/* ==========================================================================
   NATAL — Christmas celebration template (2001)
   css/style.css
   --------------------------------------------------------------------------
   Estetika: editorial lilin & candlelight — evergreen dalam, emas antique,
   gading (ivory), dan merah kardinal. Jenis teks Cinzel + Cormorant Garamond
   + Plus Jakarta Sans. Tetap menjadi undangan bergulir alami (side-by-side
   stacked scenes), kini dibungkus chrome navigasi "house UX pattern":
   header app sticky (token --header-h), pil desktop, lembar menu mobile,
   dock mengambang, scroll-spy dua arah, lightbox zoom penuh, dan sampul
   dikunci setinggi satu viewport di bawah header.

   Arsitektur: GULIR ALAMI. Tidak ada shell 100dvh / panel geser / pembajakan
   roda & sentuh. Semua scene bertumpuk dalam alur dokumen; header melayang di
   atas (sticky), dock mengapung di bawah. Tinggi header dikunci token
   --header-h; tinggi sampul & offset anchor diturunkan dari token yang sama.

   Trade-off desain yang disengaja: template ini SEBELUMNYA sudah merupakan
   undangan editorial bergulir (bukan shell satu viewport). Untuk mematuhi
   "jangan ubah aesthetic — hindari gap aneh", scene konten TIDAK dipaksa
   setinggi penuh viewport; hanya SAM PUL yang dikunci satu layar. Scene
   konten mengalir alami dengan min-height moderat dan konten ditengahkan,
   sehingga ritme editorial tetap terjaga tanpa sela kosong yang janggal.
   ========================================================================== */

/* ---------- Token geometri chrome + palet Natal ---------- */
:root {
  /* core palette Natal */
  --c-pine-950: #0c1a13;
  --c-pine-900: #122619;
  --c-pine-800: #18371f;
  --c-pine-700: #1f4626;
  --c-pine-600: #2b5a33;
  --c-pine-400: #4e7a4f;

  --c-gold-700: #8a6a25;
  --c-gold-500: #c39739;
  --c-gold-400: #d4af5a;
  --c-gold-300: #e3c878;
  --c-gold-200: #f0dca8;

  --c-ivory:    #fbf6ea;
  --c-ivory-2:  #f4ecd8;
  --c-cream:    #efe4cd;

  --c-cardinal: #9b2424;
  --c-cardinal-soft: #c0392b;

  --c-text-dark:   #2a2a24;
  --c-text-mute:   #6f6a5c;
  --c-text-light:  #f3ead4;
  --c-text-light-mute: #cdbf9d;

  --bg-section: var(--c-ivory);
  --bg-deep:    var(--c-pine-950);
  --bg-card:    #ffffff;

  --font-display: "Cinzel", "Cormorant Garamond", Georgia, serif;
  --font-serif:   "Cormorant Garamond", Georgia, serif;
  --font-body:    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --shadow-sm: 0 2px 10px rgba(12, 26, 19, 0.06);
  --shadow-md: 0 10px 34px rgba(12, 26, 19, 0.10);
  --shadow-lg: 0 26px 70px rgba(12, 26, 19, 0.22);
  --shadow-gold: 0 10px 40px rgba(195, 151, 57, 0.28);

  --radius:    20px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  --container: 520px;
  --section-pad: 88px;

  --rule: 1px solid rgba(195, 151, 57, 0.30);
  --rule-soft: 1px solid rgba(42, 42, 36, 0.10);

  /* ---- Geometri chrome — SUMBER TUNGGAL tinggi header ---- */
  --header-h: 3.5rem;                                        /* tinggi header app — dipakai CSS & scroll-margin */
  --dock-clear: calc(60px + env(safe-area-inset-bottom, 0px)); /* zona aman dock mengambang */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}

/* ---- Reset & dasar ---- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--c-text-dark);
  background: var(--bg-section);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Lompatan mulus untuk anchor; prefers-reduced-motion mematikannya lagi. */
@media (prefers-reduced-motion: no-preference) {
  html.js { scroll-behavior: smooth; }
}

[hidden] { display: none !important; }

h1, h2, h3 { margin: 0 0 .35em; line-height: 1.2; font-weight: 500; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, select, input, textarea { font-family: inherit; }

/* Scrollbar senada palet (halaman & area gulir dalam). */
html { scrollbar-width: thin; scrollbar-color: var(--c-gold-500) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--c-gold-300), var(--c-gold-500));
  border-radius: 999px;
  border: 2px solid rgba(251, 246, 234, .6);
}
::-webkit-scrollbar-thumb:hover { background: var(--c-gold-500); }

:focus-visible { outline: 3px solid var(--c-gold-400); outline-offset: 2px; border-radius: 4px; }

/* Elemen yang disembunyikan sementara oleh fit-to-screen sampul (JS).
   Murni visual — tidak ada yang dihapus dari DOM; print memulihkannya. */
.fit-hidden { display: none !important; }

/* ---------- Skip link ---------- */
.skip-link {
  position: fixed;
  top: -64px;
  left: 12px;
  z-index: 120;
  padding: 10px 16px;
  background: var(--c-pine-950);
  color: var(--c-text-light);
  font-size: .85rem;
  border-radius: 0 0 12px 12px;
  transition: top .2s ease;
}
.skip-link:focus { top: 0; }

/* ---------- Kanvas salju (dekorasi tetap) ---------- */
.snow {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 60;
  opacity: 0.85;
}

/* ---------- Tipografi ------------- */
.prime-title, .section-title {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0.01em;
}
.section-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--c-gold-500);
  margin: 0 0 12px;
}
.section-title {
  font-size: clamp(28px, 7vw, 40px);
  margin: 0 0 26px;
  color: var(--c-pine-900);
  text-align: center;
}
.section-subtitle {
  text-align: center;
  color: var(--c-text-mute);
  font-size: 15px;
  margin: -16px 0 26px;
}

/* ==========================================================================
   ALUR DOKUMEN — setiap scene bertumpuk; konten ditengahkan dalam kolom.
   (Keputusan desainer: scene konten TIDAK dipaksa 100vh agar ritme editorial
   natal tetap mengalir tanpa sela kosong — lihat header file ini.)
   ========================================================================== */
.app-main { display: block; }

.scene {
  position: relative;
  /* Anchor & deep link mendarat tepat di bawah header (token geometri). */
  scroll-margin-top: calc(var(--header-h) + 6px);
}
.scene + .scene { /* beri jeda antar scene tetapi tidak berlebihan */
  padding-top: calc(var(--section-pad) * 0.35);
}

.scene-body {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--section-pad) 24px;
}
.scene-body-center { text-align: center; }

.panel-hidden { display: none !important; }

/* ==========================================================================
   HEADER APP — brand + pil desktop + burger mobile + progres baca.
   Tinggi dikunci --header-h (geometri sampul & anchor menumpang token ini).
   ========================================================================== */
.app-header {
  position: sticky;
  top: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  height: calc(var(--header-h) + var(--safe-t));
  padding: var(--safe-t) clamp(.9rem, 3vw, 1.6rem) 0;
  background: linear-gradient(180deg, rgba(12, 26, 19, .97), rgba(18, 38, 25, .95));
  transition: background .3s ease, box-shadow .3s ease;
}
.app-header.is-scrolled {
  background: linear-gradient(180deg, rgba(10, 22, 16, .94), rgba(18, 38, 25, .9));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 28px -14px rgba(8, 16, 12, .75);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  color: var(--c-text-light);
  /* Berlindung dari shrink mengerut sehingga label brand tertindih pil navigasi. */
  flex: 0 0 auto;
  min-width: 0;
  padding-right: .25rem;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  font-size: 1.05rem;
  color: var(--c-gold-300);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(227, 200, 120, .5);
  border-radius: 50%;
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .98rem;
  letter-spacing: .05em;
  white-space: nowrap;
}
.brand-name em { font-style: normal; color: var(--c-gold-300); }

/* Pil navigasi desktop — dibangun JS dari section DOM. */
.topnav { display: none; gap: .25rem; min-width: 0; }
.js .topnav { display: flex; }
@media (min-width: 900px) { .topnav { display: flex; } }
@media (max-width: 899px) { .js .topnav { display: none; } }

/* Header grid: brand + topnav diperkenankan menggulir horizontal bila lebih
   dari satu baris pil (template punya 12 scene). Mencegah overflow keluar
   dari body — pil bergulir dalam header, scrollbar disembunyikan. */
.app-header { min-width: 0; }
.topnav { flex: 1 1 auto; justify-content: flex-end; overflow-x: auto; scrollbar-width: none; }
.topnav::-webkit-scrollbar { display: none; }
.brand { flex: 0 0 auto; }
@media (max-width: 899px) { .brand { flex: 0 1 auto; } }

.topnav-item {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 1px solid transparent;
  padding: .42rem .82rem;
  border-radius: var(--radius-pill);
  background: transparent;
  color: rgba(243, 234, 212, .82);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .03em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.topnav-item:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.topnav-item.is-current {
  background: var(--c-gold-500);
  color: var(--c-pine-950);
  border-color: rgba(255, 255, 255, .35);
  box-shadow: 0 4px 12px rgba(195, 151, 57, .45);
}
.topnav-item .nav-icon { font-size: .9rem; }

/* Progres baca — garis emas tipis di bibir bawah header. */
.app-header__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--c-gold-300), var(--c-gold-700));
  pointer-events: none;
}

/* Burger (mobile) — tersembunyi tanpa JS dan di lebar desktop. */
.menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 2.6rem;
  height: 2.6rem;
  padding: .55rem .6rem;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(227, 200, 120, .45);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.js .menu-btn { display: inline-flex; }
@media (min-width: 900px) { .js .menu-btn { display: none; } }
.menu-btn:hover { background: rgba(255, 255, 255, .16); }
.menu-btn__bar {
  height: 2px;
  border-radius: 2px;
  background: var(--c-text-light);
  transition: transform .28s ease, opacity .28s ease;
}
.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Lembar menu mobile (slide-down di bawah header) ---------- */
.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(8, 18, 12, .55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: fade-in .22s ease;
}

.mobile-menu {
  position: fixed;
  top: calc(var(--header-h) + var(--safe-t));
  left: 0;
  right: 0;
  z-index: 65;
  /* Cap ketinggian agar sebagian latar redup tetap terlihat di dasar —
     ketuk luar (backdrop) tetap bisa menutup lembar, dan isi lembar bisa
     digulir bila panjang (overscroll-behavior: contain). */
  max-height: calc(100dvh - var(--header-h) - var(--safe-t) - 3rem);
  overflow-y: auto;
  background: rgba(251, 246, 234, .98);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(195, 151, 57, .3);
  box-shadow: 0 26px 44px -26px rgba(8, 18, 12, .6);
  padding: .5rem .95rem calc(.8rem + var(--safe-b));
  animation: sheet-down .26s ease;
  overscroll-behavior: contain;
}
.mobile-menu__head {
  margin: .4rem 0 .5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-text-mute);
}
.mobile-menu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.mobile-menu-row {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 100%;
  padding: .8rem .8rem;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: var(--c-text-dark);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  text-align: left;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.mobile-menu-row:hover { background: var(--c-ivory-2); border-color: rgba(195, 151, 57, .25); }
.mobile-menu-row .nav-icon {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  font-size: 1.05rem;
  background: var(--c-ivory-2);
  border-radius: 12px;
  flex: none;
}
.mobile-menu-row .menu-num {
  margin-left: auto;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--c-text-mute);
}
.mobile-menu-row.is-current { background: var(--c-gold-200); border-color: var(--c-gold-400); }
.mobile-menu-row.is-current .nav-icon { background: var(--c-gold-300); }

@keyframes sheet-down {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   DOCK — pill kaca melayang berisi ikon tiap bagian (dibangun JS dari DOM)
   ========================================================================== */
.dock {
  position: fixed;
  left: 50%;
  bottom: max(.7rem, var(--safe-b));
  transform: translateX(-50%);
  z-index: 55;
  display: flex;
  align-items: stretch;
  gap: 1px;
  max-width: calc(100vw - 12px);
  padding: .32rem .4rem;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(195, 151, 57, .45);
  border-radius: 20px;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow-x: auto;
  scrollbar-width: none;
}
.dock::-webkit-scrollbar { display: none; }

.dock-item {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 46px;
  padding: .34rem .5rem;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--c-text-mute);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
.dock-item .nav-icon { font-size: 1.06rem; line-height: 1; }
.dock-item .dock-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .52rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 62px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dock-item:hover { color: var(--c-text-dark); background: var(--c-ivory-2); }
.dock-item:active { transform: scale(.94); }
.dock-item.is-current {
  color: var(--c-pine-950);
  background: var(--c-gold-200);
}
.dock-item.is-current::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-gold-500);
  box-shadow: 0 0 8px var(--c-gold-500);
}
.dock-item:focus-visible { outline-offset: -3px; }

/* Layar sempit: label dock disembunyikan agar muat; ikon tetap jelas +
   aria-label membawa nama bagian. */
@media (max-width: 430px) {
  .dock { gap: 0; padding: .3rem .3rem; }
  .dock-item { min-width: 42px; padding: .36rem .42rem; }
  .dock-item .dock-label { display: none; }
}

/* ==========================================================================
   TOMBOL
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .92rem;
  line-height: 1;
  padding: .88rem 1.5rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  letter-spacing: .06em;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--c-gold-500); outline-offset: 3px; }

.btn-cta {
  background: var(--c-gold-500);
  color: var(--c-pine-950);
  box-shadow: 0 8px 20px rgba(195, 151, 57, .4);
}
.btn-cta:hover { box-shadow: 0 12px 26px rgba(195, 151, 57, .55); }

.btn-gold {
  background: var(--c-gold-400);
  color: var(--c-pine-950);
  border-color: var(--c-gold-500);
  box-shadow: 0 8px 20px rgba(195, 151, 57, .35);
}
.btn-gold:hover { background: var(--c-gold-300); }

.btn-secondary {
  background: transparent;
  color: var(--c-gold-300);
  border: 1px solid var(--c-gold-400);
}
.btn-secondary:hover { background: rgba(195, 151, 57, .16); color: var(--c-gold-200); }

.detail-cta { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.8rem; }

/* ==========================================================================
   1. SAM PUL — tepat satu layar: setinggi viewport DI BAWAH header, isi
   menengah vertikal.
   ========================================================================== */
.scene-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--c-text-light);
  min-height: calc(100vh - var(--header-h));
  scroll-margin-top: 0;
}
.js .scene-cover {
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  min-height: 0;
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
  overflow: hidden;
}
/* Katup pengaman ekstrem: bila isi masih meluap setelah pemangkasan, JS
   memasang kelas ini agar isi bisa digulir di dalam sampul. */
.js .scene-cover.is-overflow { overflow-y: auto; overscroll-behavior: contain; }
.no-js .scene-cover { min-height: calc(100vh - var(--header-h)); }

.cover-bg { position: absolute; inset: 0; }
/* Hook memakai KELAS karena engine mengganti <img> morph foto dengan
   <picture> mempertahankan class; pastikan gambar memenuhi penuh. */
.cover-bg-img,
.cover-bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cover-bg-img { filter: brightness(0.60) saturate(0.95); }
.cover-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(12,26,19,0.55) 0%, rgba(12,26,19,0.40) 50%, rgba(12,26,19,0.78) 100%);
}
.cover-inner {
  position: relative; z-index: 2;
  padding: 0 28px calc(var(--dock-clear) + .4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: main-in 1.1s ease both;
}
@keyframes main-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(12, 26, 19, .45);
  border: 1px solid rgba(227, 200, 120, .5);
  color: var(--c-text-light);
  border-radius: var(--radius-pill);
  padding: .4rem .95rem;
  font-size: .82rem;
  font-weight: 600;
  max-width: min(88vw, 24rem);
  overflow-wrap: anywhere;
  margin-bottom: 14px;
}
.chip strong { font-weight: 700; color: var(--c-gold-200); }

.cover-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-gold-300);
  margin: 0 0 18px;
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.cover-title {
  font-family: var(--font-display);
  font-weight: 600;
  /* Tumbuh mengikuti layar tapi BERHENTI melewati ~700px tinggi viewport:
     komponen vh menyusut di layar pendek, px cap menahan di layar besar. */
  font-size: clamp(34px, min(9vw, 9.5vh), 52px);
  line-height: 1.05;
  color: #fff;
  margin: 0 0 12px;
  text-wrap: balance;
  text-shadow: 0 2px 26px rgba(0,0,0,.5);
  overflow-wrap: anywhere;
}
.cover-divider { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px auto; color: var(--c-gold-300); }
.divider-line { width: 56px; height: 1px; background: currentColor; opacity: .55; }
.divider-mark { color: var(--c-gold-300); font-size: 16px; }
.cover-date {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(16px, 4.5vh, 20px);
  color: var(--c-text-light-mute);
  margin: 6px 0 2px;
}
.cover-actions { margin-top: 22px; }

/* Tier sampul pendek (≤700px): skala fluid berhenti, spacing dipampatkan. */
@media (max-height: 700px) {
  .cover-title { font-size: clamp(30px, min(8vw, 7.5vh), 42px); margin-bottom: 8px; }
  .cover-eyebrow { margin-bottom: 12px; }
  .cover-actions { margin-top: 14px; }
}
@media (max-height: 600px) {
  .cover-title { font-size: clamp(26px, 7vh, 34px); }
  .chip { margin-bottom: 8px; padding: .3rem .8rem; }
  .cover-date { font-size: 15px; }
  .cover-actions { margin-top: 8px; }
  .btn-cta { padding: .7rem 1.3rem; font-size: .86rem; }
}
/* Lanskap ponsel (mis. 844×390): inti sampul harus tetap muat SATU layar
   tanpa gulir internal. */
@media (max-height: 460px) {
  .cover-inner { padding: 0 24px calc(var(--dock-clear) + .2rem); }
  .chip { margin-bottom: 4px; font-size: .7rem; }
  .cover-eyebrow { margin-bottom: 6px; font-size: 10px; }
  .cover-title { font-size: clamp(20px, 6vh, 26px); margin-bottom: 2px; }
  .cover-divider { display: none; }
  .cover-date { font-size: 13px; margin: 2px 0 0; }
  .cover-actions { margin-top: 4px; }
  .btn-cta { padding: .55rem 1.1rem; font-size: .82rem; }
}

/* ==========================================================================
   2. GREETING / SALAM (deep pine, teks terang)
   ========================================================================== */
.panel-greeting {
  background: var(--bg-deep);
  color: var(--c-text-light);
  overflow: hidden;
}
.panel-greeting::before,
.panel-greeting::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gold-500), transparent);
  opacity: .45;
}
.panel-greeting::before { top: 34px; }
.panel-greeting::after  { bottom: 34px; }
.greeting-arabic {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(18px, 5vw, 23px);
  line-height: 1.55;
  color: var(--c-gold-200);
  margin: 0 0 18px;
}
.greeting-body {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--c-text-light-mute);
  margin: 0;
}

/* ==========================================================================
   3. SCRIPTURE / AYAT
   ========================================================================== */
.panel-quote { text-align: center; }
.quote-mark { display: block; color: var(--c-gold-500); font-size: 22px; margin: 0 0 6px; }
.quote-verse {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 5.5vw, 26px);
  line-height: 1.55;
  color: var(--c-pine-900);
  margin: 0 auto 16px;
  max-width: 460px;
}
.quote-source {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold-500);
  margin: 0;
}

/* ==========================================================================
   4. HOSTS / MAJELIS
   ========================================================================== */
.panel-hosts { text-align: center; }
.couple { display: flex; flex-direction: column; align-items: center; gap: 40px; margin-top: 8px; }
.couple-info { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 360px; }
.couple-preview { position: relative; }
.profile-open {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: 50%;
  transition: transform .15s ease;
}
.profile-open:hover { transform: scale(1.04); }
.profile-open:focus-visible { outline: 3px solid var(--c-gold-500); outline-offset: 4px; }
.profile-img {
  width: 180px; height: 180px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--c-gold-400);
  box-shadow: var(--shadow-md), 0 0 0 7px rgba(195,151,57,0.12);
}
/* Jika engine mengganti <img> dengan <picture>, pastikan tetap bulat & pas. */
.profile-open .profile-img,
.profile-open picture { width: 180px; height: 180px; border-radius: 50%; }
.couple-details { text-align: center; }
.couple-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  color: var(--c-pine-900);
  margin: 0 0 4px;
}
.couple-role {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-gold-500);
  margin: 0 0 12px;
}
.couple-parents { font-size: 14.5px; color: var(--c-text-mute); line-height: 1.85; margin: 0; }
.couple-parents p { margin: 0; }
.couple-parents .father-name,
.couple-parents .mother-name { color: var(--c-text-dark); font-weight: 600; }

.zoom-chip {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  white-space: nowrap;
  background: rgba(12, 26, 19, .72);
  color: var(--c-gold-200);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  padding: .32rem .8rem;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}

/* ==========================================================================
   5. SAVE THE DATE + COUNTDOWN + ADD TO CALENDAR
   ========================================================================== */
.panel-savedate { text-align: center; }
.std-calendar {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 44px;
  margin: 8px 0 34px;
  background: var(--bg-deep);
  color: var(--c-text-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  position: relative;
}
.std-calendar::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(195, 151, 57, 0.40);
  border-radius: 14px;
  pointer-events: none;
}
.std-month { font-size: 12px; font-weight: 600; letter-spacing: 0.30em; text-transform: uppercase; color: var(--c-gold-300); }
.std-day { margin: 4px 0; }
.std-day-num { font-family: var(--font-display); font-weight: 600; font-size: 62px; line-height: 1; color: #fff; }
.std-year { font-size: 13px; letter-spacing: 0.18em; color: var(--c-text-light-mute); }
.std-weekday { margin-top: 8px; font-family: var(--font-serif); font-style: italic; font-size: 16px; color: var(--c-gold-200); }

.countdown-wrap { margin: 0 0 8px; }
.countdown-wrap h3 { font-family: var(--font-display); font-weight: 500; color: var(--c-pine-800); margin: 0 0 14px; }
.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.count-item {
  background: var(--bg-card);
  border: var(--rule);
  border-radius: var(--radius-sm);
  padding: 16px 6px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.count-num { display: block; font-family: var(--font-display); font-weight: 600; font-size: 26px; color: var(--c-pine-800); line-height: 1; font-variant-numeric: tabular-nums; }
.count-text { display: block; margin-top: 6px; font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-text-mute); }
.countdown-done { display: block; padding: .6rem; font-weight: 700; color: var(--c-pine-700); }

/* Add to Calendar (.ics) */
.calendar-cta { margin: 22px 0 4px; text-align: center; }
.calendar-note { margin: .6rem 0 0; font-size: .8rem; color: var(--c-text-mute); }

/* ==========================================================================
   6. EVENTS
   ========================================================================== */
.panel-events { text-align: center; }
.events-list { display: flex; flex-direction: column; gap: 22px; margin-bottom: 30px; }
.event-item {
  display: flex;
  gap: 20px;
  text-align: left;
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.event-date-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  padding: 12px 8px;
  background: var(--c-pine-900);
  color: var(--c-text-light);
  border-radius: var(--radius-sm);
}
.event-day-name { font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-gold-300); }
.event-day-num { font-family: var(--font-display); font-weight: 600; font-size: 32px; line-height: 1.1; color: #fff; }
.event-month { font-size: 11px; color: var(--c-text-light-mute); }
.event-body { flex: 1; }
.event-title { font-family: var(--font-display); font-weight: 500; font-size: 18px; color: var(--c-pine-900); margin: 0 0 6px; }
.event-time { font-size: 13px; font-weight: 600; color: var(--c-gold-700); margin: 0 0 8px; }
.event-venue { font-size: 14px; font-weight: 600; color: var(--c-text-dark); margin: 0; }
.event-address { font-size: 13px; color: var(--c-text-mute); margin: 2px 0 10px; }
.event-map { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.10em; color: var(--c-pine-700); border-bottom: 1px solid var(--c-gold-400); padding-bottom: 1px; }
.event-dresscode {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--c-text-mute);
  background: var(--c-cream);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
}
.event-dresscode-label { font-weight: 700; color: var(--c-cardinal); }

/* ==========================================================================
   7. RUNDOWN
   ========================================================================== */
.panel-rundown { text-align: center; }
.rundown-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 440px;
  text-align: left;
  counter-reset: step;
}
.rundown-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 4px;
  border-bottom: var(--rule-soft);
  counter-increment: step;
  position: relative;
}
.rundown-item:last-child { border-bottom: none; }
.rundown-item::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  color: var(--c-gold-500);
  min-width: 26px;
}
.rundown-time { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--c-pine-800); min-width: 56px; }
.rundown-act { font-size: 14.5px; color: var(--c-text-dark); flex: 1; }

/* ==========================================================================
   8. GALLERY + VIDEO
   ========================================================================== */
.panel-gallery { text-align: center; }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.gallery-item {
  overflow: hidden;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  aspect-ratio: 1 / 1;
}
.gallery-open {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
  transition: transform .6s ease;
}
.gallery-item:hover .gallery-open { transform: scale(1.03); }
.gallery-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-hint { text-align: center; font-size: .8rem; color: var(--c-mute); margin: 1rem 0 0; }

.video-section { margin-top: 1.6rem; }
.video-title { font-family: var(--font-display); font-weight: 500; font-size: 1rem; color: var(--c-pine-900); margin-bottom: .2rem; }
.video-card {
  max-width: 560px;
  margin: .6rem auto 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 3px solid var(--c-gold-200);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.video-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  background: var(--c-pine-900);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s ease;
}
.video-open:hover { transform: translateY(-3px); }
.video-thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; opacity: .9; }
.video-play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 3.4rem; height: 3.4rem;
  border-radius: 50%;
  background: var(--c-gold-400);
  color: var(--c-pine-950);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; padding-left: .28rem;
  box-shadow: 0 8px 20px rgba(0,0,0,.45), 0 0 0 6px rgba(255,255,255,.35);
}
.video-chip {
  position: absolute; left: 50%; bottom: .9rem;
  transform: translateX(-50%);
  background: rgba(251,246,234,.96);
  color: var(--c-pine-900);
  font-size: .78rem; font-weight: 600;
  padding: .4rem .95rem; border-radius: var(--radius-pill);
  white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.video-open-plain .video-thumb { display: none; }
.video-open-plain { min-height: 220px; background: linear-gradient(160deg, var(--c-pine-950), var(--c-pine-700)); }
.video-hint { margin: .6rem 0 0; font-size: .8rem; color: var(--c-text-mute); text-align: center; }

/* ==========================================================================
   9. PERSEMBAHAN / WEDDING-GIFT
   ========================================================================== */
.panel-gift { text-align: center; }
.wg-blurb { color: var(--c-text-mute); font-size: 14.5px; max-width: 420px; margin: 0 auto 28px; }
.wg-bank-wrap { display: flex; flex-direction: column; gap: 16px; }
.bank-item {
  display: flex;
  align-items: center;
  gap: 18px;
  text-align: left;
  background: var(--bg-card);
  border: var(--rule);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.bank-img-wrap { flex-shrink: 0; position: relative; }
.bank-img-btn {
  display: block;
  width: 78px; height: 78px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--c-cream);
  cursor: zoom-in;
  position: relative;
}
.bank-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bank-detail { flex: 1; }
.bank-name { font-family: var(--font-display); font-weight: 500; font-size: 16px; color: var(--c-pine-900); margin: 0 0 2px; }
.bank-account-name-detail { font-size: 12px; color: var(--c-text-mute); margin: 0 0 4px; }
.bank-account-number-detail { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; letter-spacing: 0.04em; color: var(--c-text-dark); margin: 0; }
.bank-account-number { font-variant-numeric: tabular-nums; }
.bank-copy-btn {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--c-gold-500);
  background: rgba(195,151,57,0.12);
  border: 1px solid var(--c-gold-400);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  transition: all 0.25s ease;
}
.bank-copy-btn:hover { background: var(--c-gold-500); color: #fff; }
.bank-copy-btn.copied { background: var(--c-pine-600); border-color: var(--c-pine-600); color: #fff; }

/* ==========================================================================
   10. BUKU TAMU (Style A mount) + form konten inject platform
   ========================================================================== */
.panel-guestbook { text-align: center; }
.wedding-wish-body { text-align: left; margin-top: 14px; }
.guestbook-section .guestbook-form { max-width: 460px; margin: 0 auto; text-align: left; }

#guestbookForm {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: clamp(18px, 4vw, 28px);
}
#guestbookForm .form-group { margin-bottom: 16px; }
#guestbookForm .form-group:last-child { margin-bottom: 0; }
#guestbookForm .form-group label {
  display: block;
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: .4rem;
  color: var(--c-text-mute);
}
#guestbookForm .form-control {
  width: 100%;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--c-text-dark);
  background: var(--bg-card);
  border: 1px solid rgba(42,42,36,0.18);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#guestbookForm .form-control:focus {
  outline: none;
  border-color: var(--c-gold-500);
  box-shadow: 0 0 0 3px rgba(195,151,57,0.18);
}
#guestbookForm .error { display: block; font-size: 12px; color: var(--c-cardinal-soft); margin-top: 4px; min-height: 14px; }
#guestbookForm .error:empty { display: none; }
#guestbookForm button[type="submit"] {
  display: inline-block;
  border: 0;
  border-radius: var(--radius-pill);
  padding: .9rem 1.6rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  color: var(--c-pine-950);
  background: var(--c-gold-500);
  box-shadow: 0 8px 20px rgba(195,151,57,.4);
  cursor: pointer;
  transition: transform .15s ease;
}
#guestbookForm button[type="submit"]:hover { transform: translateY(-2px); }

.guestbook-section .guestbook-wrap { scrollbar-width: thin; scrollbar-color: var(--c-gold-500) transparent; }
.guestbook-section .guestbook-entry {
  padding: 14px 6px;
  border-bottom: 1px solid rgba(42,42,36,0.10);
  text-align: left;
}
.guestbook-section .guestbook-entry h5 { font-size: 14px; font-weight: 600; color: var(--c-pine-800); margin: 0 0 6px; }
.guestbook-section .guestbook-entry p { font-size: 13.5px; line-height: 1.6; color: var(--c-text-dark); margin: 0 0 6px; }
.guestbook-section .guestbook-entry small { font-size: 11px; letter-spacing: .08em; color: var(--c-text-mute); }
.guestbook-section .more-guestbook-wrap { text-align: center; margin-top: 14px; }
.guestbook-section #load-more,
.guestbook-section #moreComment,
.guestbook-section #guestbookForm .badge-pill.bg-kundangan {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-gold-500);
  background: transparent;
  border: 1px solid var(--c-gold-400);
  border-radius: var(--radius-pill);
  padding: 9px 22px;
  cursor: pointer;
  transition: all .25s ease;
}
.guestbook-section #load-more:hover,
.guestbook-section #moreComment:hover,
.guestbook-section #guestbookForm .badge-pill.bg-kundangan:hover { background: var(--c-gold-500); color: #fff; }
.guestbook-section .loading-guestbook { text-align: center; font-size: 13px; color: var(--c-text-mute); padding-top: 12px; }
.guestbook-section .thank-you-message h4 { font-family: var(--font-serif); font-size: 22px; color: var(--c-pine-800); margin: 0 0 8px; }
.guestbook-section .thank-you-message p { font-size: 13.5px; color: var(--c-text-mute); }

/* ==========================================================================
   11. HALAMAN BEBAS (opsional)
   ========================================================================== */
.panel-free { text-align: center; }
.free-blocks { display: flex; flex-direction: column; gap: 1.1rem; text-align: left; }
.free-block {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem;
  box-shadow: var(--shadow-sm);
}
.free-title { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; color: var(--c-pine-800); margin-bottom: .45rem; }
.free-content { color: var(--c-text-dark); font-size: .95rem; }
.free-content p { margin: 0 0 .6rem; }
.free-content p:last-child { margin-bottom: 0; }
.free-media {
  margin: 1rem 0 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 3px solid var(--c-gold-200);
  box-shadow: var(--shadow-sm);
  background: var(--bg-card);
}
.free-open {
  display: block; width: 100%; padding: 0;
  border: 0; font: inherit; color: inherit;
  background: var(--bg-card);
  position: relative; overflow: hidden;
  cursor: zoom-in;
}
.free-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.free-chip {
  position: absolute; right: .8rem; bottom: .8rem;
  background: rgba(251,246,234,.95);
  color: var(--c-pine-900);
  font-size: .78rem; font-weight: 600;
  padding: .4rem .85rem; border-radius: var(--radius-pill);
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.free-media:not(:has(img)) { display: none; }

/* ==========================================================================
   12. PENUTUP (+ footer)
   ========================================================================== */
.panel-closing {
  background: var(--bg-deep);
  color: var(--c-text-light);
}
.closing-mark { display: block; color: var(--c-gold-400); font-size: 26px; margin-bottom: 14px; }
.closing-body {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 5.5vw, 26px);
  line-height: 1.55;
  color: var(--c-gold-200);
  margin: 0 auto 12px;
  max-width: 460px;
}
.closing-source {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c-text-light-mute);
  margin: 0 auto 18px;
}
.closing-thanks { font-size: 14.5px; line-height: 1.8; color: var(--c-text-light-mute); margin: 0 auto 22px; max-width: 440px; }

.app-footer { position: static; margin-top: .6rem; text-align: center; }
.footnote-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  color: var(--c-gold-300);
  margin: 0 0 8px;
}
.footnote-quote { font-family: var(--font-serif); font-style: italic; font-size: 15px; color: var(--c-text-light-mute); margin: 0 0 22px; }

.powered-by {
  width: 100%;
  margin-top: 20px;
  padding: .7rem 1rem calc(.7rem + var(--safe-b));
  text-align: center;
  font-size: .76rem;
  color: var(--c-text-light-mute);
  border-top: 1px solid rgba(195,151,57,.35);
}
.powered-by p { margin: 0; }
.powered-by-brand { font-weight: 700; color: var(--c-gold-300); }

/* ==========================================================================
   LIGHTBOX — foto ukuran asli dengan zoom (roda / pinch / ketuk-ganda /
   tombol ±), pan saat dizoom, ‹ › antar foto, dan tautan buka-asli.
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(8, 18, 12, .94);
  animation: fade-in .22s ease;
}
.lightbox-backdrop { position: absolute; inset: 0; }

.lightbox-figure {
  position: relative;
  z-index: 1;
  width: min(880px, 94vw);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}
.lightbox-frame {
  position: relative;
  width: 100%;
  height: min(72vh, 600px);
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-frame.is-zoomed { cursor: grab; }
.lightbox-frame.is-panning { cursor: grabbing; }
.lightbox-frame.is-panning .lightbox-img { transition: none; }
.lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  background: var(--c-ivory);
  cursor: zoom-in;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
  transition: transform .18s ease;
}
.lightbox-cap { max-width: min(880px, 94vw); padding: .1rem 1rem; font-weight: 600; font-size: .95rem; color: var(--c-text-light); text-align: center; overflow-wrap: anywhere; }
.lightbox-count { position: absolute; top: -.4rem; right: 0; font-size: .78rem; font-weight: 700; color: var(--c-text-light); background: rgba(8,18,12,.65); padding: .25rem .6rem; border-radius: var(--radius-pill); }

.lightbox-video {
  position: relative;
  z-index: 1;
  width: min(880px, 94vw);
  background: #000;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
}
.lightbox-iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.lightbox-video .lightbox-cap { background: var(--c-ivory); color: var(--c-text-dark); }

.lightbox-close,
.lightbox-nav {
  position: absolute;
  z-index: 3;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  color: var(--c-text-light);
  background: rgba(255,255,255,.12);
  font-size: 1.4rem;
  line-height: 1;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.lightbox-close:hover,
.lightbox-nav:hover:not(:disabled) { background: rgba(255,255,255,.24); }
.lightbox-close:focus-visible,
.lightbox-nav:focus-visible { outline: 3px solid var(--c-gold-400); outline-offset: 2px; }

.lightbox-close { top: max(.8rem, var(--safe-t)); right: max(.8rem, var(--safe-r)); }
.lightbox-nav { top: 50%; transform: translateY(-50%); font-size: 1.6rem; }
.lightbox-nav:disabled { opacity: .35; cursor: default; }
.lightbox-prev { left: max(.8rem, var(--safe-l)); }
.lightbox-next { right: max(.8rem, var(--safe-r)); }

.lightbox-tools {
  position: absolute;
  left: 50%;
  bottom: max(.7rem, var(--safe-b));
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.lightbox-tool {
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 .5rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(8,18,12,.55);
  color: var(--c-text-light);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease;
}
.lightbox-tool:hover { background: rgba(255,255,255,.24); }
.lightbox-tool:disabled { opacity: .35; cursor: default; }
.lightbox-tool-readout { font-size: .72rem; letter-spacing: .05em; font-variant-numeric: tabular-nums; }
.lightbox-original {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .62rem .95rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(8,18,12,.55);
  color: var(--c-text-light);
  font-size: .78rem;
  text-decoration: none;
  transition: background .18s ease;
}
.lightbox-original:hover { background: rgba(255,255,255,.24); }
.lightbox-zoom-hint {
  position: absolute;
  left: 50%;
  bottom: calc(max(.7rem, var(--safe-b)) + 3.1rem);
  transform: translateX(-50%);
  z-index: 2;
  font-size: .72rem;
  font-weight: 700;
  color: rgba(243,234,212,.95);
  background: rgba(8,18,12,.5);
  padding: .28rem .8rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  pointer-events: none;
}

/* Mode media-inline (CONFIG.mediaLightbox = false): tanpa afordansi klik —
   chip/hint/ikon perbesar disembunyikan, kursor kembali normal, dan JS
   mematikan semua handler klik media. */
.media-inline .gallery-open,
.media-inline .profile-open,
.media-inline .bank-img-btn,
.media-inline .free-open,
.media-inline .video-open { cursor: default; pointer-events: none; }
.media-inline .zoom-chip,
.media-inline .free-chip,
.media-inline .video-play,
.media-inline .video-chip,
.media-inline .gallery-hint,
.media-inline .video-hint { display: none !important; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 380px) {
  :root { --section-pad: 68px; }
  .countdown { grid-template-columns: repeat(2, 1fr); }
  .profile-img, .profile-open .profile-img, .profile-open picture { width: 150px; height: 150px; }
}
@media (min-width: 720px) {
  :root { --container: 600px; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   PREFERS-REDUCED-MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .snow { display: none; }
  .mobile-menu, .menu-backdrop, .lightbox { animation: none; }
}

/* ==========================================================================
   FALLBACK TANPA JS — halaman terbaca sempurna sebagai dokumen panjang:
   semua scene bertumpuk; chrome interaktif (burger, dock, progres, lembar
   menu) disembunyikan. Anchor native tetap bekerja.
   ========================================================================== */
.no-js .app-header { background: var(--c-pine-950); }
.no-js .menu-btn,
.no-js .app-header__progress,
.no-js .skip-link { display: none; }

/* ==========================================================================
   CETAK (PRINT) — chrome navigasi hilang, SEMUA isi dipulihkan:
   elemen .fit-hidden (pangkas sampul) tampil kembali, scene bertumpuk.
   ========================================================================== */
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .app-header, .dock, .menu-backdrop, .mobile-menu, .snow,
  .lightbox, .skip-link, .cover-actions, .btn, .video-section,
  .detail-cta, .calendar-cta { display: none !important; }

  .fit-hidden { display: revert !important; }

  .scene { scroll-margin-top: 0; padding: 0; }
  .js .scene-cover { height: auto; max-height: none; overflow: visible; }
  .panel-hidden { display: none !important; }
  .scene + .scene { padding-top: 0; }
  .scene-body { padding: 32px 20px; }

  .panel-greeting, .panel-closing { background: #fff !important; color: #1a1a1a; }
  .panel-greeting::before, .panel-greeting::after { display: none; }
  .greeting-arabic, .greeting-body, .closing-body, .closing-source,
  .closing-thanks, .footnote-title, .footnote-quote { color: #2a2a24 !important; }

  .scene-cover { background: #fff !important; }
  .cover-bg, .cover-overlay { display: none !important; }
  .cover-title { color: #2a2a24; text-shadow: none; }
  .cover-eyebrow { color: #8a6a25; }
  .cover-date { color: #444; }

  .app-footer, .powered-by { position: static; color: #666; }
  .powered-by { background: none; border-top: 1px solid #ddd; }
  .free-block { background: #f4f6f1; box-shadow: none; }
  .event-item, .count-item, .bank-item { box-shadow: none; }
}

/* Redaksi ukuran kecil (mis. teks fallback) */
.loading { text-align: center; font-size: 13px; color: var(--c-text-mute); padding-top: 12px; }
.dropcap:first-letter { font-family: var(--font-display); font-weight: 500; }