/* =============================================================================
   ELEVATE v2 — single stylesheet.
   Normal top-to-bottom scroll. Performance rules: animate transform/opacity
   only, no stacked filters, no fullscreen video. Aura kept from v1: black
   canvas, rainbow gradient, Fraunces italic + mono eyebrow chrome.
   ============================================================================= */

:root {
  --bg:        #070707;
  --surface:   #111111;
  --line:      rgba(255, 255, 255, 0.09);
  --text:      #f5f5f5;
  --muted:     rgba(245, 245, 245, 0.62);

  --lime:   #C9E02E;
  --teal:   #2FD6BD;
  --sky:    #7EC8E3;
  --violet: #9B7CE8;
  --pink:   #F06595;
  --red:    #E8304A;
  --grad: linear-gradient(90deg, var(--lime), var(--teal), var(--sky), var(--violet), var(--pink), var(--red));

  --font-display: "Fraunces", serif;
  /* Instrument Sans gantiin Inter (2026-07-14, Rafael: "something screams
     AI") — grotesque yang lebih berkarakter tapi tetap bersih. */
  --font-body:    "Instrument Sans", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
  --font-script:  "WindSong", cursive;

  --pad: clamp(24px, 5vw, 72px); /* floor 24px (2026-07-14) — 20px kerasa sempit di HP */
  --nav-h: 64px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
  accent-color: var(--teal);
}

::selection { background: var(--pink); color: #000; }

/* slim brand scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb {
  background: #2a2a2a; border-radius: 5px;
  border: 2px solid #0a0a0a;
}
::-webkit-scrollbar-thumb:hover { background: var(--pink); }

/* Ambient aurora — four soft brand-colour glows on one fixed layer, drifting
   as a single very-slow transform (GPU-composited, no repaints). z-index -1
   paints it above the body background but under all content. */
.aurora {
  position: fixed; inset: -22%;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 34% 28% at 18% 22%, rgba(47, 214, 189, 0.075), transparent 70%),
    radial-gradient(ellipse 30% 26% at 82% 12%, rgba(155, 124, 232, 0.07), transparent 70%),
    radial-gradient(ellipse 36% 30% at 76% 78%, rgba(240, 101, 149, 0.06), transparent 70%),
    radial-gradient(ellipse 28% 24% at 10% 84%, rgba(201, 224, 46, 0.05), transparent 70%);
  animation: auroraDrift 52s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  to { transform: translate(3%, -2%) rotate(2deg) scale(1.07); }
}

/* Film grain — static SVG noise tiled over the whole page (NOT animated;
   a static composited layer costs nothing). Sits under the intro gate. */
.grain {
  position: fixed; inset: 0; z-index: 60;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* clip > hidden: also stops mobile Chrome expanding the layout viewport
     for out-of-frame absolute boxes. Hidden kept as older-browser fallback. */
  overflow-x: hidden;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: fixed; top: 10px; left: 50%; transform: translate(-50%, -160%);
  z-index: 100; padding: 10px 20px; border-radius: 999px;
  background: #000; border: 1px solid var(--line); color: var(--text);
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.2em; text-decoration: none; transition: transform 200ms ease;
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* ── Shared type ─────────────────────────────────────────────────────────── */

.eyebrow {
  font-family: var(--font-mono);
  font-size: clamp(0.72rem, 1vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 10px var(--teal);
  animation: liveDot 1.6s ease-in-out infinite;
}
.eyebrow__bracket { color: var(--pink); }
@media (max-width: 640px) { .eyebrow__bracket { display: none; } }
@keyframes liveDot {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.25); }
}

.heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 5vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 18px 0 20px;
}
.heading em {
  font-style: italic;
  font-variation-settings: "opsz" 144;
  background: var(--grad);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  /* per-section duotone di bawah override background-image ini */
  color: transparent;
}
/* Rainbow penuh di SEMUA judul kerasa template (2026-07-14) — sekarang tiap
   section duotone sesuai chroma-nya; rainbow penuh disisain buat momen gede
   (hero, surrender, praise|worship, footer ghost). */
.section--tentang .heading em { background-image: linear-gradient(100deg, #2FD6BD, #7EC8E3); }
.section--jadwal .heading em  { background-image: linear-gradient(100deg, #9B7CE8, #F06595); }
.section--sermon .heading em  { background-image: linear-gradient(100deg, #E8304A, #F06595); }
.section--series .heading em  { background-image: linear-gradient(100deg, #F06595, #9B7CE8); }
.section--galeri .heading em  { background-image: linear-gradient(100deg, #7EC8E3, #C9E02E); }
.section--daftar .heading em  { background-image: linear-gradient(100deg, #C9E02E, #2FD6BD); }

.lead { color: var(--muted); max-width: 56ch; font-size: clamp(1rem, 1.4vw, 1.15rem); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */

/* De-mono (2026-07-14): tombol pakai sans sentence-case — mono-uppercase di
   semua tombol salah satu yang bikin kerasa "AI template". Mono disisain
   buat chrome editorial doang (eyebrow, marquee, chip, caption). */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px; border-radius: 999px;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  letter-spacing: 0.02em; text-decoration: none;
  cursor: pointer; border: 0;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.btn--primary {
  color: #fff;
  background: linear-gradient(#161616, #161616) padding-box, var(--grad) border-box;
  background-size: 100% 100%, 300% 100%;
  border: 2px solid transparent;
  animation: borderFlow 7s linear infinite;
}
@keyframes borderFlow {
  from { background-position: 0 0, 0 50%; }
  to   { background-position: 0 0, 300% 50%; }
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(240, 101, 149, 0.35);
}
.btn--ghost {
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.06); transform: translateY(-2px); }
.btn--small { padding: 10px 20px; font-size: 11px; }

/* ── Intro ceremony ──────────────────────────────────────────────────────────
   Movie-style cold open: chrono line types in → logo wipes on with a bloom →
   gradient rule sweeps → subtitle → whole gate lifts. Pure CSS timeline with
   `forwards` fills, so even if JS dies the overlay removes itself. Only exists
   when <html>.has-intro (set pre-paint, skipped on reduced-motion / no-JS). */

/* Ported from v1's final intro: conic brand-rays flash, grain/scanline
   atmosphere, camera FOCUS-PULL on the big logo (blur+scale → sharp), rule
   sweep, bracketed motto, film vignette, then the gate defocuses away. */

.intro { display: none; }

html.has-intro .intro {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 50%, #0a0812 0%, #000 70%);
  overflow: hidden;
  animation: introGate 700ms cubic-bezier(0.16, 1, 0.3, 1) 3400ms forwards;
}

/* HOLD — seluruh timeline (termasuk entrance hero, biar tetap sinkron) beku
   sampai inline script di <head> lepas `intro-hold` waktu logonya siap.
   2026-07-15, Rafael: "kasih waktu buat load, animasinya kepotong". */
html.intro-hold .intro,
html.intro-hold .intro__rays,
html.intro-hold .intro__grain,
html.intro-hold .intro__stage,
html.intro-hold .intro__wordmark,
html.intro-hold .intro__rule,
html.intro-hold .intro__motto,
html.intro-hold .hero__inner > * { animation-play-state: paused; }
/* film vignette */
html.has-intro .intro::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse 90% 80% at 50% 50%,
    transparent 60%, rgba(0, 0, 0, 0.22) 92%, rgba(0, 0, 0, 0.42) 100%);
}

.intro__rays {
  position: absolute; top: 50%; left: 50%;
  width: 140vmax; height: 140vmax;
  transform: translate(-50%, -50%) scale(0.4);
  background: conic-gradient(from 0deg at 50% 50%,
    transparent 0deg,
    rgba(201, 224, 46, 0.22) 18deg,  transparent 42deg,
    rgba(240, 101, 149, 0.28) 90deg, transparent 120deg,
    rgba(155, 124, 232, 0.22) 175deg, transparent 205deg,
    rgba(126, 200, 227, 0.26) 270deg, transparent 305deg,
    rgba(232, 48, 74, 0.22) 345deg,  transparent 360deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 8%, #000 30%, transparent 75%);
          mask: radial-gradient(circle at 50% 50%, transparent 8%, #000 30%, transparent 75%);
  filter: blur(40px);
  opacity: 0;
  animation: introRays 2300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes introRays {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(0deg); }
  22%  { opacity: 1; }
  100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1.25) rotate(55deg); }
}

.intro__grain {
  position: absolute; inset: 0; pointer-events: none;
  mix-blend-mode: overlay; opacity: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    repeating-linear-gradient(to bottom, transparent 0 3px, rgba(255, 255, 255, 0.025) 3px 4px);
  background-size: 160px 160px, 100% 4px;
  animation: introGrain 1800ms ease forwards;
}
@keyframes introGrain {
  0%   { opacity: 0; }
  25%  { opacity: 0.18; }
  100% { opacity: 0.09; }
}

.intro__stage {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(16px, 2.6vh, 28px);
  animation: introCameraDrift 2600ms cubic-bezier(0.33, 0, 0.66, 1) 2300ms forwards;
}
@keyframes introCameraDrift {
  to { transform: scale(1.02) translateY(-6px); }
}

/* camera focus pull — the movie moment */
.intro__wordmark {
  /* ⚠️ ARAH ZOOM DIBALIK (2026-07-15, "animasinya kepotong / ga sinkron"):
     dulu mulai scale 1.22 → 94vw × 1.22 = 114vw, logonya MELEBIHI LAYAR
     selama ~1.2s pertama; yang keliatan cuma potongan tengah yang blur, terus
     "pas" mendadak → kebaca broken. Sekarang push-in dari 0.94 → 1.0, jadi
     ukuran maksimalnya = ukuran final dan NGGAK PERNAH kepotong.
     Aturan baru: scale awal HARUS ≤ 1. */
  width: min(94vw, 1250px);
  opacity: 0;
  transform: scale(0.94) translateZ(0);
  filter: blur(18px);
  will-change: transform, filter, opacity;
  /* 2100ms: focus-pull-nya dikasih napas biar kebaca sebagai gerakan kamera,
     bukan kedipan (2026-07-15). */
  animation: introFocusPull 2100ms cubic-bezier(0.22, 1, 0.36, 1) 300ms forwards;
}
@keyframes introFocusPull {
  to { opacity: 1; transform: scale(1) translateZ(0); filter: blur(0); }
}

/* Mobile boleh lebih lebar sekarang: scale maksimal = 1.0, jadi nggak ada
   risiko clip lagi (dulu dikunci 82vw cuma buat ngakalin zoom 1.22). */
@media (max-width: 700px) {
  .intro__wordmark { width: 90vw; }
}

.intro__rule {
  width: clamp(120px, 22vw, 280px); height: 1px;
  background: var(--grad);
  transform-origin: left center;
  transform: scaleX(0); opacity: 0;
  animation: introRuleSweep 800ms cubic-bezier(0.22, 1, 0.36, 1) 2050ms forwards;
}
@keyframes introRuleSweep {
  20%  { opacity: 1; }
  100% { transform: scaleX(1); opacity: 0.85; }
}

.intro__motto {
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.4vw, 15px); font-weight: 500;
  letter-spacing: 0.42em; text-transform: uppercase;
  color: rgba(245, 245, 245, 0.82);
  text-shadow: 0 0 12px rgba(240, 101, 149, 0.25), 0 0 28px rgba(126, 200, 227, 0.15);
  display: inline-flex; align-items: center; gap: 12px;
  opacity: 0; transform: translateY(8px);
  animation: introMottoIn 900ms cubic-bezier(0.22, 1, 0.36, 1) 2300ms forwards;
}
.intro__motto b { color: rgba(240, 101, 149, 0.9); font-size: 1.15em; }
@keyframes introMottoIn {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes introGate {
  to { opacity: 0; visibility: hidden; }
}

/* Hold the hero entrance while the gate is up; release together with it. */
html.has-intro .hero__inner > * { animation-delay: 3.6s; }

/* ── Nav ─────────────────────────────────────────────────────────────────── */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad);
  transition: background 250ms ease, border-color 250ms ease;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(7, 7, 7, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}
.nav__brand img { height: 26px; width: auto; }

.nav__links {
  display: flex; align-items: center; gap: clamp(16px, 2.5vw, 34px);
}
.nav__links a {
  color: var(--muted); text-decoration: none;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: color 160ms ease;
}
.nav__links a:hover { color: var(--text); }
.nav__links a.nav__cta {
  color: #fff; padding: 9px 18px; border-radius: 999px;
  background: linear-gradient(#141414, #141414) padding-box, var(--grad) border-box;
  background-size: 100% 100%, 300% 100%;
  border: 2px solid transparent;
  animation: borderFlow 7s linear infinite;
}

.nav__burger {
  display: none;
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 7px;
}
.nav__burger span {
  display: block; width: 24px; height: 2px; background: var(--text);
  transition: transform 250ms ease;
}
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child  { transform: translateY(-4.5px) rotate(-45deg); }

@media (max-width: 820px) {
  .nav__burger { display: flex; }
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(7, 7, 7, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    padding: 8px var(--pad) 20px;
    transform: translateY(-110%);
    transition: transform 280ms ease;
    visibility: hidden;
  }
  .nav__links.is-open { transform: translateY(0); visibility: visible; }
  .nav__links a { padding: 14px 0; font-size: 14px; }
  .nav__links a.nav__cta { text-align: center; justify-content: center; display: block; margin-top: 10px; }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
/* v4 (2026-07-13): reference-style minimal hero — full-bleed recap video
   (0.9x slowdown baked into the mp4 at encode time), ONE signature-script
   line dead-centre. Same layout on every viewport; phones keep the still
   (matchMedia guard in site.js — video is desktop/tablet only). */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: var(--nav-h) var(--pad) 88px;
}

.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img, .hero__bg video {
  width: 100%; height: 100%; object-fit: cover;
  /* Grade VIVID (2026-07-14, Rafael: "colour not powerful enough" — revisi
     dari muted 0.55/0.6). Legibility teks diurus vignette ::after. */
  filter: saturate(1.08) brightness(0.78) contrast(1.08);
}
/* Legibility scrim — soft vignette keeps the thin script readable over
   confetti/laser frames; bottom melts into the page canvas. */
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 120% 90% at 50% 45%, rgba(7, 7, 7, 0.16) 0%, rgba(7, 7, 7, 0.58) 100%),
    linear-gradient(to top, var(--bg) 0%, rgba(7, 7, 7, 0.14) 22%, rgba(7, 7, 7, 0) 45%);
}

.hero__inner { position: relative; z-index: 1; }

/* The one thing on screen — signature script, thin and huge. */
.hero__script {
  font-family: var(--font-script);
  font-weight: 500;
  font-size: clamp(4.2rem, 12.5vw, 11.5rem);
  line-height: 1.3; /* script ascender/descender loops need the air */
  color: #fff;
  text-shadow: 0 2px 60px rgba(0, 0, 0, 0.6);
}

/* Mobile (≤700px) — GMS-style: same video hero + same muted grade, but the
   script splits into two interlocking lines ("Welcome" left, "fam!" right)
   like Rafael's reference SS. site.js loops only the first 10s of the
   montage here to keep phones light. */
@media (max-width: 700px) {
  .hero__script {
    font-size: clamp(3.6rem, 20vw, 6rem);
    line-height: 1.05;
    width: min(92vw, 30rem);
    text-align: center;
  }
  .hero__script-word {
    display: block;
    text-align: center; /* revisi Rafael: "famnya juga di centre" */
    margin-top: -0.16em; /* tuck the second line into the first's descenders */
  }
  /* GMS-style: the top bar is a solid dark strip from the very start on
     phones — same look as .is-scrolled, just always on. */
  .nav {
    background: rgba(7, 7, 7, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-color: var(--line);
  }
}

/* ── Quick-nav (mobile only, 2026-07-14) — ala Planetshakers/Elevation:
   4 shortcut icon langsung keliatan begitu lewat hero. ── */
.quicknav {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 18px var(--pad);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 820px) { .quicknav { display: grid; } }
.quicknav a {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 14px 6px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface);
  color: var(--muted); text-decoration: none;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.quicknav a:active { border-color: var(--teal); color: var(--text); }
.quicknav svg { color: var(--text); }

.hero__scroll {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 1;
  color: var(--muted); text-decoration: none;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase;
  animation: scrollCue 2.4s ease-in-out infinite;
}
@keyframes scrollCue {
  0%, 100% { transform: translate(-50%, 0);    opacity: 0.6; }
  50%      { transform: translate(-50%, 7px);  opacity: 1;   }
}

/* Entrance — the script settles in like ink drying. Opacity + transform
   only, plays once on load (delayed under the intro gate, see .has-intro). */
.hero__inner > * {
  opacity: 0;
  transform: translateY(24px) scale(0.985);
  animation: riseIn 1100ms cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s forwards;
}
@keyframes riseIn { to { opacity: 1; transform: translateY(0) scale(1); } }

/* ── Marquee ─────────────────────────────────────────────────────────────── */

.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding: 14px 0;
  background: var(--surface);
}
.marquee__track {
  display: flex; width: max-content;
  animation: marquee 30s linear infinite;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.marquee__track span { white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee--reverse .marquee__track { animation-direction: reverse; }

/* ── Sections ────────────────────────────────────────────────────────────── */

.section {
  position: relative;
  padding: clamp(72px, 11vw, 130px) var(--pad);
  max-width: 1200px; margin: 0 auto;
}

/* Per-section ambient washes — each chapter of the journey gets its own hue,
   so scrolling reads as a colour progression instead of flat black. */
/* NO negative horizontal inset here — an absolutely-positioned box poking
   past the viewport edge makes mobile Chrome WIDEN the layout viewport
   (body overflow-x can't stop it). Bleed comes from wide ellipses instead. */
.section--tentang::before,
.section--jadwal::before,
.section--series::before,
.section--galeri::before {
  content: ""; position: absolute; inset: -10% 0;
  z-index: -1; pointer-events: none;
}
.section--tentang::before { background: radial-gradient(ellipse 64% 42% at 88% 12%, rgba(47, 214, 189, 0.07), transparent 70%); }
.section--jadwal::before  { background: radial-gradient(ellipse 66% 44% at 8% 30%, rgba(155, 124, 232, 0.075), transparent 70%); }
.section--series::before  { background: radial-gradient(ellipse 66% 44% at 92% 45%, rgba(240, 101, 149, 0.07), transparent 70%); }
.section--galeri::before  { background: radial-gradient(ellipse 66% 44% at 10% 20%, rgba(126, 200, 227, 0.07), transparent 70%); }

.section--daftar::before {
  content: ""; position: absolute; inset: -10% 0;
  z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 70% 44% at 50% 22%, rgba(232, 48, 74, 0.07), transparent 70%);
}

.section__grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
@media (max-width: 820px) { .section__grid { grid-template-columns: 1fr; } }

/* Tentang sedikit lebih lega (Rafael 2026-07-13: "first section slightly
   bigger") — section melebar + foto tim dapet porsi kolom lebih gede.
   ⚠️ WAJIB di-scope ≥821px — tanpa scope, rule ini ngalahin stack 1-kolom
   mobile (lebih spesifik + lebih bawah) dan mobile pecah. */
.section--tentang { max-width: 1280px; }
@media (min-width: 821px) {
  .section--tentang .section__grid { grid-template-columns: 1fr 1fr; }
}

/* Reveal on scroll */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 650ms ease var(--d, 0s), transform 650ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0s);
}
[data-reveal].in { opacity: 1; transform: none; }

/* ── Tentang ─────────────────────────────────────────────────────────────── */

.tentang__stats {
  list-style: none; display: flex; gap: clamp(22px, 4vw, 48px);
  margin-top: 30px;
}
.tentang__stats li { display: flex; flex-direction: column; }
.tentang__stats strong {
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-variation-settings: "opsz" 144;
  /* digedein 2026-07-14 — angka-angka ini moment, bukan footnote */
  font-size: clamp(2.6rem, 5.2vw, 3.6rem);
  line-height: 1.1;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tentang__stats span {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted);
}

.tentang__photo { position: relative; }
.tentang__photo img {
  border-radius: 8px;
  border: 1px solid var(--line);
}
.tentang__photo::after {
  content: ""; position: absolute; inset: 12px -12px -12px 12px;
  border: 1px solid var(--line); border-radius: 8px; z-index: -1;
}

/* ── Surrender — FULL-BLEED band (2026-07-13 v2, revisi Rafael: "the image
   cover the whole web" + pakai foto tangan asli + "coverage is different as
   the user scrolls"). background-attachment: fixed = efek parallax ala
   "Pengakuan Iman" GMS. Pengecualian sadar dari aturan transform-only:
   desktop only — mobile balik scroll biasa (iOS ignore fixed + janky). ── */
.surrender {
  position: relative;
  background: #0d0d0d url("../assets/photos/surrender-hand.webp") center / cover no-repeat;
  background-attachment: fixed;
  padding: clamp(110px, 16vw, 200px) var(--pad);
}
/* scrim diagonal — teks duduk di zona gelap KIRI, foto kebaca di kanan */
.surrender::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(260deg,
    rgba(7, 7, 7, 0.3) 0%, rgba(7, 7, 7, 0.52) 46%, rgba(7, 7, 7, 0.84) 74%);
}
.surrender__inner {
  position: relative;
  max-width: 1200px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 14px;
}
/* teks di paruh KIRI (revisi Rafael), foto bernapas di kanan */
@media (min-width: 821px) { .surrender__inner { padding-right: 48%; } }
.surrender__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.4rem, 5.4vw, 3.8rem); line-height: 1.05;
}
.surrender__title em {
  font-style: italic;
  font-variation-settings: "opsz" 144;
  background: var(--grad);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.surrender__text { color: rgba(245, 245, 245, 0.85); font-size: 1.1rem; line-height: 1.75; max-width: 46ch; }
.surrender__text strong { color: #fff; font-weight: 600; }

@media (max-width: 820px) {
  .surrender {
    background-attachment: scroll;
    padding: 96px var(--pad) 88px;
  }
  .surrender::before {
    background: linear-gradient(to top,
      rgba(7, 7, 7, 0.9) 0%, rgba(7, 7, 7, 0.6) 55%, rgba(7, 7, 7, 0.35) 100%);
  }
}

/* ── Praise | Worship break — passage sendiri ala VISI|MISI GMS.
   2026-07-14: jadi BAND full-bleed dengan surface lebih terang — satu-satunya
   section beda tone, ritme gelap-terang ala GMS versi Elevate. ── */
.section--pw {
  max-width: none;
  background:
    radial-gradient(ellipse 56% 60% at 12% 20%, rgba(201, 224, 46, 0.05), transparent 70%),
    radial-gradient(ellipse 56% 60% at 88% 80%, rgba(155, 124, 232, 0.07), transparent 70%),
    #121216;
  border-block: 1px solid var(--line);
}
.pw {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 88px);
  max-width: 1140px; margin-inline: auto;
}
/* garis pemisah tengah, fade di ujung */
.pw::before {
  content: ""; position: absolute; top: 6%; bottom: 6%; left: 50%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line) 28%, var(--line) 72%, transparent);
}
.pw__col { display: flex; flex-direction: column; gap: 10px; }
.pw__label {
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-variation-settings: "opsz" 144;
  font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1;
  color: var(--chroma);
}
.pw__statement {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 2.8vw, 2rem); line-height: 1.15;
}
.pw__statement em {
  font-style: italic;
  font-variation-settings: "opsz" 144;
  background: var(--grad);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pw__body { color: var(--muted); line-height: 1.7; max-width: 44ch; }

@media (max-width: 820px) {
  .pw { grid-template-columns: 1fr; gap: 32px; }
  .pw::before { display: none; }
  .pw__col + .pw__col { border-top: 1px solid var(--line); padding-top: 30px; }
}

/* ── Latest message / sermon (2026-07-13) — video facade ala Planetshakers:
   thumbnail + play, iframe baru dibikin on-click (site.js). ─────────────── */

.section--sermon::before {
  content: ""; position: absolute; inset: -10% 0;
  z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 60% 42% at 12% 35%, rgba(232, 48, 74, 0.06), transparent 70%);
}
.sermon {
  display: grid; grid-template-columns: 1.45fr 1fr;
  gap: clamp(28px, 4.5vw, 64px); align-items: center;
}
@media (max-width: 820px) { .sermon { grid-template-columns: 1fr; } }
.sermon__player {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}
/* chroma hairline top, konsisten sama kartu lain */
.sermon__player::before {
  content: ""; position: absolute; top: 0; left: 0; z-index: 2;
  width: 44%; height: 2px;
  background: linear-gradient(90deg, var(--chroma), transparent);
}
.sermon__player img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sermon__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sermon__play {
  position: absolute; inset: 0; margin: auto; z-index: 1;
  width: 86px; height: 86px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #fff;
  background: rgba(7, 7, 7, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}
.sermon__play:hover {
  transform: scale(1.08);
  background: rgba(232, 48, 74, 0.72);
  border-color: transparent;
}
.sermon__play svg { margin-left: 4px; } /* optical center panah play */
.sermon__meta { display: flex; flex-direction: column; align-items: flex-start; }
.sermon__meta .btn { margin-top: 24px; }

/* ── Jadwal — GMS-style campus cards (2026-07-13) ────────────────────────── */

/* Campus cards v2 — IMMERSIVE (2026-07-13, Rafael: "underwhelming, take
   inspiration from huge churches websites"). Hillsong/Elevation pattern:
   foto = background penuh kartu tinggi, scrim gradient dari bawah, konten
   nempel di bawah di atas fotonya. Sejarah bentuk sebelumnya (framed print,
   compact 2-col) di-supersede — jangan balik ke layout foto-atas-teks-bawah. */
.campuses {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px; margin-top: clamp(36px, 5vw, 56px);
}
@media (max-width: 820px) { .campuses { grid-template-columns: 1fr; } }

/* GALLERY FRAME v3 (2026-07-14, Rafael: "proper frame, text on the frame
   not the picture"): kartu = bingkai bermat ala galeri seni. 3 lapis —
   border kartu → garis mat halus (::before) → bingkai NEON chroma ketat di
   foto. Foto UTUH tanpa teks/scrim; teks jadi plakat di mat bawah foto. */
.campus {
  position: relative;
  padding: clamp(14px, 1.6vw, 20px);            /* lebar mat */
  background: linear-gradient(180deg, #131313, #0d0d0d);
  border: 1px solid var(--line); border-radius: 18px;
  transition: transform 220ms ease, border-color 220ms ease,
              opacity 650ms ease var(--d, 0s);
}
.campus:hover { transform: translateY(-4px); border-color: var(--chroma); }

/* lapisan 2: garis mat tipis banget */
.campus::before {
  content: ""; position: absolute; inset: 7px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 13px; pointer-events: none;
}

/* lapisan 3: foto = karya dengan bingkai neon chroma + glow halus */
.campus__photo {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--chroma);
  box-shadow: 0 0 26px -10px var(--chroma);
}
.campus__photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.campus:hover .campus__photo img { transform: scale(1.04); }

/* plakat — teks duduk di MAT, bukan di foto */
.campus__content {
  position: relative;
  padding: clamp(16px, 2vw, 22px) clamp(4px, 0.8vw, 8px) clamp(4px, 0.8vw, 8px);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 12px;
}
.campus__eyebrow {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--chroma);
}
.campus__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.05;
}
.campus__times { display: flex; flex-wrap: wrap; gap: 8px; }
.campus__chip {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--chroma); color: var(--text);
  background: #0b0b0b; /* di mat solid — blur nggak perlu lagi */
}
/* Mobile: 2 chip ALSUT harus muat SEBARIS (Rafael: "jangan di atas bawah,
   kiri kanan aja"). Sisain slack lebar — sempet wrap gara-gara kelebihan
   0.5px subpixel. */
@media (max-width: 700px) {
  .campus__times { gap: 6px; }
  .campus__chip { font-size: 10px; letter-spacing: 0.08em; padding: 6px 10px; }
}
.campus__addr {
  display: flex; gap: 8px; align-items: center;
  color: var(--muted); font-size: 0.88rem; line-height: 1.5;
}
.campus__addr svg { flex: none; color: var(--chroma); }

/* ── Series ──────────────────────────────────────────────────────────────── */

/* Series lebih dominan (Rafael 2026-07-13): section dilebarin 1360px →
   poster otomatis lebih gede. Galeri (1400px) tetap yang paling lebar. */
.section--series { max-width: 1360px; }
/* INFINITE MARQUEE carousel (2026-07-14, request Rafael — ala logo slider):
   track berisi 2 set kartu (set kedua di-clone site.js), animasi translateX
   ke -50% lalu loop = seamless. Transform-only, teknik yang sama kayak
   marquee teks. GAP WAJIB fixed 20px — offset seam dihitung -50% - 10px
   (setengah gap); kalau gap berubah, offset ikut. Pause pas hover. */
.archive {
  overflow: hidden;
  margin-top: clamp(28px, 4vw, 44px);
  /* full-bleed sampai tepi layar */
  margin-inline: calc(-1 * var(--pad));
}
/* Gerakan marquee DIPINDAH ke JS rAF (2026-07-14 malam, revisi Rafael:
   "too fast di mobile + ada space pas loop") — px-based: kecepatan konsisten
   di semua device (30px/s HP, 45px/s desktop) & wrap presisi tanpa gap.
   CSS cuma layout; transform di-set site.js tiap frame. */
.archive__track {
  display: flex; gap: 20px;
  width: max-content;
  will-change: transform;
}
.archive .archive__card {
  flex: 0 0 clamp(240px, 70vw, 320px);
}

.archive__card {
  border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: transform 220ms ease, border-color 220ms ease,
              opacity 650ms ease var(--d, 0s);
}
.archive__card:hover { transform: translateY(-4px); border-color: rgba(240, 101, 149, 0.5); }
.archive__card img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.archive__card figcaption {
  padding: 12px 14px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
}

/* ── Galeri ──────────────────────────────────────────────────────────────── */

/* Scrapbook mosaic — every photo is a slightly-thrown polaroid with a tape
   strip and a chroma caption chip; hover straightens + lifts it. Rotation
   rides the SAME transform as the reveal (see [data-reveal] override below)
   so the two never fight. */

/* Galeri sengaja lebih GEDE dari section lain (Rafael 2026-07-13: "bigger,
   take more space") — section-nya dilebarin ke 1400px + row lebih tinggi. */
.section--galeri { max-width: 1400px; }
.gallery {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(220px, 17vw, 265px); gap: clamp(16px, 2.4vw, 26px);
  margin-top: clamp(36px, 5vw, 56px);
  padding: 8px;
}
/* Mobile: near-square tiles so photos aren't letterboxed into thin strips,
   the tall tile collapses to a normal one so the 2-col grid stays symmetrical
   (8 cells = 4 full rows), and dense flow backfills the cell next to the
   full-width band. Extra .gallery ancestor beats the base --tall rule that
   appears later in this file. */
@media (max-width: 700px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 40vw;
    grid-auto-flow: dense;
  }
  .gallery .gallery__item--tall { grid-row: span 1; }
}

.gallery__item {
  position: relative;
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
  transition: opacity 650ms ease var(--d, 0s),
              transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gallery__item[data-reveal]      { transform: translateY(26px) rotate(var(--rot, 0deg)); }
.gallery__item[data-reveal].in   { transform: rotate(var(--rot, 0deg)); }
.gallery__item[data-reveal].in:hover {
  transform: rotate(0deg) translateY(-6px) scale(1.02);
  border-color: var(--chroma);
  z-index: 2;
}

.gallery__item--tall { grid-row: span 2; }
.gallery__item--wide { grid-column: span 2; }

.gallery__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 500ms ease;
}
.gallery__item:hover img { transform: scale(1.06); }

/* Tape strip DIHAPUS 2026-07-13 — Rafael: "weird shade on the picture".
   Kotak abu-abunya kebaca sebagai glitch, bukan selotip. Jangan dibalikin. */

/* caption chip + legibility fade */
.gallery__item::after {
  content: ""; position: absolute; inset: 55% 0 0 0;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.78));
  pointer-events: none;
}
.gallery__item figcaption {
  position: absolute; left: 14px; bottom: 12px; z-index: 2;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: #fff;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--chroma);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.gallery__item figcaption::before {
  content: "✦ "; color: var(--chroma);
}

.quote {
  position: relative;
  margin: clamp(48px, 7vw, 72px) auto 0; max-width: 720px; text-align: center;
}
.quote::before {
  content: "✦";
  position: absolute; top: -0.55em; left: 50%; transform: translateX(-50%);
  font-size: clamp(2.6rem, 5vw, 4rem);
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0.5;
  pointer-events: none;
}
.quote p {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.35;
}
.quote em {
  font-style: italic; font-variation-settings: "opsz" 144;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.quote cite {
  display: block; margin-top: 16px; font-style: normal;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--muted);
}

/* ── Daftar Jemaat ───────────────────────────────────────────────────────── */

.section--daftar {
  max-width: 860px;
}
.daftar__head { text-align: center; margin-bottom: clamp(36px, 5vw, 56px); }
.daftar__head .eyebrow { justify-content: center; }
.daftar__head .lead { margin-inline: auto; }

.form {
  padding: clamp(22px, 4vw, 44px);
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface);
  position: relative;
}
.form::before {
  content: ""; position: absolute; inset: -1px; z-index: -1;
  border-radius: 15px;
  background: var(--grad);
  opacity: 0.35;
}

.form__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}
@media (max-width: 640px) { .form__grid { grid-template-columns: 1fr; } }
.field--full { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: 8px; border: 0; }
.field > span, .field > legend {
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted);
}
.field b { color: var(--pink); }

.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 16px;
  border-radius: 8px;
  background: #0a0a0a;
  border: 1px solid var(--line);
  color: var(--text);
  /* 16px minimum — anything smaller makes mobile Chrome/Safari auto-zoom
     into the field on focus, and that zoom level sticks to the whole page. */
  font-family: var(--font-body); font-size: 16px;
  transition: border-color 160ms ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(47, 214, 189, 0.15);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(245, 245, 245, 0.28); }
.field select { appearance: none; }
.field input[type="date"] { color-scheme: dark; }
.field textarea { resize: vertical; }

.field--cabang legend { margin-bottom: 8px; }
.cabang { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .cabang { grid-template-columns: 1fr; } }
/* Radio dipin di DALAM pill (parent wajib relative!) — dulu absolute tanpa
   anchor, inputnya ngambang 349px keluar viewport → horizontal jiggle. */
.cabang__pill { position: relative; }
.cabang__pill input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; margin: 0; cursor: pointer;
}
.cabang__pill span {
  display: block; padding: 16px 18px; text-align: center;
  border: 1px solid var(--line); border-radius: 10px;
  background: #0a0a0a; cursor: pointer;
  font-weight: 600; line-height: 1.35;
  transition: border-color 160ms ease, background 160ms ease;
}
.cabang__pill small {
  font-weight: 400; color: var(--muted); font-size: 0.82rem;
}
.cabang__pill input:checked + span {
  border-color: var(--teal);
  background: rgba(47, 214, 189, 0.08);
}
.cabang__pill input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }

.selfie { display: flex; align-items: center; gap: 18px; }
.selfie__preview {
  width: 84px; height: 84px; flex: none;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  background: #0a0a0a center / cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
}
.selfie__preview.has-img { border-style: solid; border-color: var(--teal); font-size: 0; }
.selfie__hint { font-size: 0.82rem; color: var(--muted); margin-top: 8px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.form__error {
  margin-top: 18px; padding: 12px 16px; border-radius: 8px;
  background: rgba(232, 48, 74, 0.12);
  border: 1px solid rgba(232, 48, 74, 0.5);
  color: #ff9daa; font-size: 0.92rem;
}

.form__submit { margin-top: 24px; width: 100%; justify-content: center; }
.form__submit[disabled] { opacity: 0.55; cursor: wait; }

.form__success {
  text-align: center;
  padding: clamp(40px, 7vw, 72px) clamp(22px, 4vw, 44px);
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface);
}
.form__success-big {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 12px;
}
.form__success p { color: var(--muted); }
.form__success .btn { margin-top: 24px; }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.footer {
  border-top: 1px solid var(--line);
  margin-top: clamp(40px, 6vw, 80px);
  padding: clamp(48px, 7vw, 80px) var(--pad) 32px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: 36px;
  max-width: 1200px; margin-inline: auto;
  position: relative;
}
.footer::before {
  content: ""; position: absolute; top: -1px; left: var(--pad); right: var(--pad);
  height: 2px; background: var(--grad);
}
@media (max-width: 700px) { .footer { grid-template-columns: 1fr; gap: 28px; } }

/* Ghost motto — huge editorial sign-off floating above the footer columns. */
.footer__ghost {
  grid-column: 1 / -1;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 7vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  opacity: 0.22;
  margin-bottom: clamp(8px, 2vw, 24px);
}
.footer__ghost em {
  font-style: italic;
  font-variation-settings: "opsz" 144;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.footer__brand img { height: 34px; width: auto; margin-bottom: 16px; }
.footer__brand p { color: var(--muted); font-size: 0.92rem; }

.footer__label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 14px;
}
.footer__col p { margin-bottom: 12px; font-weight: 600; font-size: 0.95rem; }
.footer__col small { font-weight: 400; color: var(--muted); }
.footer__col a {
  display: block; color: var(--muted); text-decoration: none;
  font-size: 0.95rem; margin-bottom: 10px;
  transition: color 160ms ease;
}
.footer__col a:hover { color: var(--text); }

.footer__bar {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  padding-top: 22px; margin-top: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted);
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__bg img, .hero__scroll, .marquee__track, .eyebrow::before,
  .btn--primary, .nav__links a.nav__cta, .aurora,
  .archive__track,
  .hero__inner > * { animation: none; }
  /* marquee series mati → balikin jadi scroll manual biar semua poster tetap kejangkau */
  .archive { overflow-x: auto; }
  .hero__inner > * { opacity: 1; transform: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}