/* ==========================================================================
   Little Star — Poster Baby Shower (Boy) · flyer
   styles.css
   --------------------------------------------------------------------------
   Estetika: poster pesta bergaya langit senja biru — gradien biru malam ke
   biru muda, bintang berkelip, bulan, awan, dan beruang teddy yang duduk di
   bukit. Judul besar dan tegas seperti poster cetak, dengan halaman detail
   yang tetap hangat dan bersih. Kustomisasi warna lewat token :root.

   Arsitektur: GULIR ALAMI (house UX pattern). Tidak ada lagi shell satu
   viewport — semua halaman bertumpuk dalam alur dokumen; header app melayang
   di atasnya (sticky), dock ikon mengapung di bawah, dan lembar menu mobile
   slide-down di bawah header. Tinggi header dikunci token --header-h;
   tinggi sampul & offset anchor diturunkan dari token yang sama sehingga
   chrome tidak pernah bergeser dari geometri token.
   ========================================================================== */

/* ---------- Token & palet ---------- */
:root {
  --c-night: #2f4a7a;
  --c-sky-deep: #5c82b8;
  --c-sky-400: #8fb4dd;
  --c-sky-300: #a9c9e8;
  --c-sky-200: #cfe3f5;
  --c-sky-100: #eaf3fc;
  --c-sky-ink: #3d5a80;
  --c-ink: #2f4360;
  --c-ink-soft: #64799b;
  --c-cream: #fdf8ef;
  --c-card: #ffffff;
  --c-caramel: #c98a5e;
  --c-caramel-deep: #a9663f;
  --c-caramel-soft: #f6e4cd;
  --c-gold: #f2c14e;
  --c-gold-soft: #fae9bd;
  --c-mint-soft: #dff0ea;

  --font-hand: 'Caveat', 'Gochi Hand', 'Segoe Print', cursive;
  --font-display: 'Fredoka', 'Baloo 2', 'Comic Sans MS', 'Segoe Print', system-ui, sans-serif;
  --font-body: 'Quicksand', 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --radius-lg: 30px;
  --radius-md: 16px;
  --shadow-card: 0 16px 38px rgba(47, 74, 122, .28);
  --shadow-soft: 0 6px 16px rgba(47, 74, 122, .16);

  /* Geometri chrome — SUMBER TUNGGAL tinggi header. Penutup tinggi sampul
     (§ cover satu layar), scroll-padding-top, dan scroll-margin-top semua
     diturunkan dari token ini; header dikunci pada nilai yang sama. */
  --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, body { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  /* Anchor & deep link mendarat tepat di bawah header: offset ditangani
     scroll-margin-top pada tiap .scene (token geometri yang sama).
     Catatan: JANGAN menambahkan scroll-padding-top di sini — nilai itu
     MENJUMLAH dengan scroll-margin sehingga target mendarat dua kali lipat
     terlalu jauh di bawah header. */
}

body {
  font-family: var(--font-body);
  color: var(--c-ink);
  background: var(--c-sky-200);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 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: 700; font-family: var(--font-display); }
h2 { font-size: clamp(1.5rem, 5.5vw, 2rem); }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
a { color: inherit; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

/* Scrollbar senada palet langit — halaman, kartu gulir, dan lightbox. */
html { scrollbar-width: thin; scrollbar-color: var(--c-sky-400) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--c-sky-400), var(--c-sky-deep));
  border-radius: 999px;
  border: 2px solid rgba(253, 248, 239, .65);
}
::-webkit-scrollbar-thumb:hover { background: var(--c-sky-deep); }

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

/* ---------- Skip link ---------- */
.skip-link {
  position: fixed;
  top: -64px;
  left: 12px;
  z-index: 120;
  padding: 10px 16px;
  background: var(--c-night);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .85rem;
  text-decoration: none;
  border-radius: 0 0 12px 12px;
  transition: top .2s ease;
}
.skip-link:focus { top: 0; }

/* 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; }

/* ==========================================================================
   ALUR DOKUMEN — setiap section adalah satu "adegan" setinggi viewport
   yang menengahkan kartunya; konten lebih tinggi tumbuh & mengalir.
   ========================================================================== */
.app-main { display: block; }

.scene {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
  /* Zona aman bawah: dock mengambang menutupi ~72px terbawah; sisakan ruang
     agar konten akhir tiap scene (CTA, powered-by) tidak tertutup dock. */
  padding: clamp(.9rem, 2.5vh, 1.6rem) clamp(.75rem, 3vw, 1.5rem)
    calc(clamp(.9rem, 2.5vh, 1.6rem) + var(--dock-clear));
  /* Anchor & deep link mendarat tepat di bawah header (token geometri). */
  scroll-margin-top: calc(var(--header-h) + 6px);
  outline: none;
}

.scene-inner {
  width: min(680px, 100%);
  margin: 0 auto;
  background: var(--c-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(1.5rem, 5vw, 2.5rem) clamp(1.25rem, 5vw, 2.25rem) 2.5rem;
}

.scene-inner-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: 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(47, 74, 122, .96), rgba(61, 90, 128, .94));
  transition: background .3s ease, box-shadow .3s ease;
}
.app-header.is-scrolled {
  background: linear-gradient(180deg, rgba(38, 59, 97, .92), rgba(47, 74, 122, .88));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 28px -14px rgba(23, 37, 60, .65);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  color: #fff;
  min-width: 0;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  font-size: 1.05rem;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 50%;
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .04em;
  white-space: nowrap;
}
.brand-name em { font-style: normal; color: var(--c-gold); }

/* 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; } }

.topnav-item {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 1px solid transparent;
  padding: .42rem .85rem;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, .82);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .78rem;
  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, .14); color: #fff; }
.topnav-item.is-current {
  background: var(--c-gold);
  color: var(--c-ink);
  border-color: rgba(255, 255, 255, .35);
  box-shadow: 0 4px 12px rgba(242, 193, 78, .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), var(--c-caramel));
  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, .14);
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 12px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  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, .26); }
.menu-btn__bar {
  height: 2px;
  border-radius: 2px;
  background: #fff;
  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(23, 37, 60, .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;
  max-height: calc(100dvh - var(--header-h) - var(--safe-t));
  overflow-y: auto;
  background: rgba(253, 248, 239, .98);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(47, 74, 122, .18);
  box-shadow: 0 26px 44px -26px rgba(23, 37, 60, .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: 700;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.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-ink);
  font-family: var(--font-display);
  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-sky-100); border-color: rgba(47, 74, 122, .14); }
.mobile-menu-row .nav-icon {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  font-size: 1.05rem;
  background: var(--c-sky-100);
  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-ink-soft);
}
.mobile-menu-row.is-current { background: var(--c-gold-soft); border-color: var(--c-gold); }
.mobile-menu-row.is-current .nav-icon { background: var(--c-gold); }

@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, .93);
  border: 1px solid rgba(47, 74, 122, .2);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  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-ink-soft);
  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-display);
  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-ink); background: var(--c-sky-100); }
.dock-item:active { transform: scale(.94); }
.dock-item.is-current {
  color: var(--c-ink);
  background: var(--c-gold-soft);
}
.dock-item.is-current::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 8px var(--c-gold);
}
.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; }
}

/* ==========================================================================
   STRUKTUR KONTEN UMUM
   ========================================================================== */
.kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .4rem .85rem;
  border-radius: 999px;
  background: var(--c-sky-200);
  color: var(--c-ink);
  margin: 0 0 1rem;
}

.lead { font-size: 1rem; color: var(--c-ink-soft); max-width: 56ch; }

/* ---------- Tombol ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  padding: .9rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  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-sky-ink); outline-offset: 3px; }

.btn-primary { background: var(--c-sky-deep); color: #fff; box-shadow: 0 8px 20px rgba(92, 130, 184, .4); }
.btn-primary:hover { box-shadow: 0 12px 26px rgba(92, 130, 184, .5); }

.btn-secondary { background: var(--c-gold-soft); color: var(--c-ink); border: 2px solid var(--c-gold); }
.btn-secondary:hover { background: #ffe8b3; }

.btn-cta {
  background: var(--c-gold);
  color: var(--c-ink);
  font-size: 1.08rem;
  box-shadow: 0 10px 26px rgba(242, 193, 78, .55);
}
.btn-cta:hover { box-shadow: 0 14px 32px rgba(242, 193, 78, .7); }

.btn-block { width: 100%; }

/* ==========================================================================
   POSTER PEMBUKA — tepat satu layar: setinggi viewport DI BAWAH header,
   isi menengah vertikal, dekorasi dipangkas bertahap bila ruang sempit.
   ========================================================================== */
.scene-cover {
  background:
    radial-gradient(circle at 78% 20%, rgba(143, 180, 221, .55), transparent 42%),
    linear-gradient(180deg, var(--c-night) 0%, var(--c-sky-deep) 46%, var(--c-sky-300) 74%, var(--c-cream) 100%);
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  /* Zona aman dock: CTA sampul tidak boleh tenggelam di bawah dock
     mengambang pada layar pendek/lanskap — sisakan ruang di dasar poster. */
  padding: 0 0 calc(var(--dock-clear) + .5rem);
  overflow: hidden;
}
.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));
}
/* Katup pengaman ekstrem: bila setelah pemangkasan isi masih meluap,
   JS memasang kelas ini agar isi bisa digulir di dalam poster. */
.js .scene-cover.is-overflow { overflow-y: auto; overscroll-behavior: contain; }

/* Tanpa JS: poster tumbuh alami seperti section lain (dokumen utuh). */
.no-js .scene-cover { min-height: calc(100vh - var(--header-h)); }

/* --- Dekorasi latar --- */
.poster-deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.twinkle {
  position: absolute; inset: 0;
  background-repeat: repeat;
}
.twinkle-a {
  background-image:
    radial-gradient(2.4px 2.4px at 16% 14%, rgba(255, 255, 255, .95) 50%, transparent 51%),
    radial-gradient(1.7px 1.7px at 62% 8%, rgba(255, 255, 255, .85) 50%, transparent 51%),
    radial-gradient(2px 2px at 84% 22%, rgba(255, 255, 255, .8) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 38% 26%, rgba(255, 255, 255, .9) 50%, transparent 51%);
  background-size: 230px 230px, 180px 180px, 290px 290px, 150px 150px;
  animation: twinkle 4.5s ease-in-out infinite alternate;
}
.twinkle-b {
  background-image:
    radial-gradient(2px 2px at 28% 10%, rgba(242, 193, 78, .9) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 72% 30%, rgba(242, 193, 78, .75) 50%, transparent 51%),
    radial-gradient(2.2px 2.2px at 50% 18%, rgba(255, 255, 255, .8) 50%, transparent 51%);
  background-size: 210px 210px, 260px 260px, 180px 180px;
  animation: twinkle 6s ease-in-out infinite alternate-reverse;
}

.moon {
  position: absolute; top: 9%; right: 7%; width: clamp(3.4rem, 12vw, 5rem);
  filter: drop-shadow(0 0 18px rgba(251, 227, 160, .7));
  animation: bob 6s ease-in-out infinite alternate;
}
.moon svg { width: 100%; height: auto; display: block; }

.cloud {
  position: absolute;
  color: rgba(255, 255, 255, .94);
  width: 120px;
  filter: drop-shadow(0 6px 10px rgba(47, 74, 122, .22));
}
.cloud svg { width: 100%; height: auto; display: block; }
.cloud-a { top: 16%; left: 5%; animation: drift 26s ease-in-out infinite alternate; }
.cloud-b { top: 30%; right: 4%; width: 96px; animation: drift 32s ease-in-out infinite alternate-reverse; }
.cloud-c { bottom: 22%; left: 12%; width: 84px; opacity: .85; animation: drift 38s ease-in-out infinite alternate; }

.floaty {
  position: absolute; z-index: 3; font-size: 1.6rem; opacity: .95;
  pointer-events: none;
  animation: bob 5s ease-in-out infinite alternate;
  filter: drop-shadow(0 4px 8px rgba(47, 74, 122, .4));
}
.f1 { top: 24%; left: 30%; animation-duration: 5.4s; }
.f2 { top: 44%; right: 10%; animation-delay: .9s; animation-duration: 6s; }
.f3 { bottom: 30%; left: 6%; animation-delay: 1.4s; animation-duration: 4.8s; }
.f4 { top: 34%; left: 8%; animation-delay: .5s; animation-duration: 5.8s; }

/* Bukit lembut tempat teddy duduk */
.hill {
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  width: 130%; height: 24%;
  background: linear-gradient(180deg, rgba(234, 243, 252, .55), rgba(253, 248, 239, .95));
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

/* --- Foto latar sampul (opsional; diaktifkan JS via CONFIG.coverBg) --- */
.cover-photo-bg {
  position: absolute; inset: 0; z-index: 1;
  overflow: hidden;
}
.cover-photo-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.cover-photo-bg::after {
  /* Lapisan temaram agar judul & teks poster tetap terbaca di atas foto. */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(234, 243, 252, .82), rgba(253, 248, 239, .9));
}
/* Foto latar aktif → langit ilustrasi & teddy disembunyikan; teks beralih ke tinta gelap. */
.scene-cover.has-photo-bg .poster-deco,
.scene-cover.has-photo-bg .teddy-stage { display: none; }
.scene-cover.has-photo-bg .cover-title { color: var(--c-sky-ink); text-shadow: none; }
.scene-cover.has-photo-bg .cover-sub { color: var(--c-ink); text-shadow: none; }
.scene-cover.has-photo-bg .host-line { color: var(--c-ink-soft); text-shadow: none; }
.scene-cover.has-photo-bg .host-line span { color: var(--c-ink); }
.scene-cover.has-photo-bg .kicker-cover,
.scene-cover.has-photo-bg .chip {
  background: rgba(255, 255, 255, .78);
  color: var(--c-ink);
  border-color: rgba(47, 74, 122, .22);
}
.scene-cover.has-photo-bg .chip-date { background: rgba(242, 193, 78, .92); }
.scene-cover.has-photo-bg .cover-photo-img { border-color: rgba(255, 255, 255, .9); }

/* --- Tombol "lihat foto latar" (hanya tampil saat foto latar aktif) --- */
.cover-bg-open {
  position: absolute;
  right: max(.8rem, var(--safe-r));
  bottom: max(.9rem, var(--safe-b));
  z-index: 3;
  width: 2.7rem;
  height: 2.7rem;
  padding: 0;
  cursor: zoom-in;
  font-size: 1.1rem;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(47, 74, 122, .3);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease, background .15s ease;
}
.cover-bg-open:hover { transform: scale(1.08); background: rgba(255, 255, 255, .3); }
.cover-bg-open:active { transform: scale(1); }
.cover-bg-open:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 3px; }

/* --- Kepala poster (chip tamu + tanggal) --- */
.cover-head {
  position: relative; z-index: 5;
  display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: max(.9rem, var(--safe-t)) clamp(.9rem, 3vw, 1.4rem) 0;
}

.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .45);
  color: #fff;
  border-radius: 999px;
  padding: .4rem .95rem;
  font-size: .84rem;
  font-weight: 600;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  max-width: min(90vw, 24rem);
  overflow-wrap: anywhere;
}
.chip strong { font-weight: 800; }
.chip-date { background: rgba(242, 193, 78, .9); color: var(--c-ink); border-color: transparent; }

/* --- Isi poster --- */
.cover-body {
  position: relative; z-index: 4;
  flex: 1 1 auto;
  /* TANPA min-height:0 — body harus tumbuh mengikuti isi agar peluapan
     terlihat oleh fit-to-screen (scrollHeight scene) dan dekorasi dipangkas
     sesuai prioritas, alih-alih isi meluap diam-diam menembus header/dock. */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: .6rem clamp(1rem, 4vw, 2rem);
}

.kicker-cover {
  background: rgba(255, 255, 255, .22);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .4);
}

.cover-title {
  font-family: var(--font-display);
  font-weight: 700;
  /* Tumbuh mengikuti layar tapi BERHENTI melewati ~700px tinggi viewport:
     komponen vh menyusut di layar pendek, px cap menahan di layar besar. */
  font-size: clamp(2.7rem, min(13vw, 10.5vh), 4.9rem);
  line-height: 1;
  color: #fff;
  margin: .15em 0 .2em;
  text-wrap: balance;
  letter-spacing: .01em;
  text-shadow: 0 6px 0 rgba(47, 74, 122, .35), 0 14px 30px rgba(47, 74, 122, .45);
  transform: rotate(-1.5deg);
}

.cover-sub {
  color: #f0f5fc;
  font-size: clamp(.92rem, min(3.2vw, 2.6vh), 1.1rem);
  max-width: 40ch;
  margin: 0 auto .9rem;
  text-shadow: 0 1px 3px rgba(47, 74, 122, .6);
}

.cover-name {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, min(5.5vw, 4vh), 1.9rem);
  color: var(--c-ink);
  background: var(--c-gold-soft);
  border: 2px solid var(--c-gold);
  border-radius: 999px;
  padding: .35rem 1.4rem;
  margin: .2rem 0 .95rem;
  box-shadow: 0 8px 18px rgba(47, 74, 122, .3);
  overflow-wrap: anywhere;
}

/* --- Foto sampul opsional (bingkai bulat; kini bisa diketuk → lightbox) --- */
.cover-photo {
  margin: .5rem auto .85rem;
  transform: rotate(-3deg);
  filter: drop-shadow(0 10px 16px rgba(47, 74, 122, .35));
}
.cover-photo-btn {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: 50%;
  transition: transform .15s ease;
}
.cover-photo-btn:hover { transform: scale(1.06); }
.cover-photo-btn:active { transform: scale(1); }
.cover-photo-btn:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 4px; }
.cover-photo-img {
  width: clamp(4.4rem, min(15vw, 11vh), 6rem);
  height: clamp(4.4rem, min(15vw, 11vh), 6rem);
  border-radius: 50%;
  border: 4px solid #fff;
  outline: 3px solid var(--c-sky-300);
  object-fit: cover;
  background: var(--c-sky-100);
}

.cover-meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem;
  margin-bottom: 1.4rem;
}
.cover-meta span {
  background: rgba(255, 255, 255, .88);
  color: var(--c-ink);
  border: 1px solid rgba(255, 255, 255, .9);
  padding: .5rem .95rem;
  border-radius: 14px;
  font-size: .86rem;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(47, 74, 122, .28);
}

.cover-actions { margin-top: .4rem; }

.host-line {
  margin-top: 1.2rem; font-size: .9rem; color: #eef3fa;
  text-shadow: 0 1px 3px rgba(47, 74, 122, .7);
}
.host-line span { color: #fff; font-weight: 800; }

/* --- Beruang teddy di atas bukit --- */
.teddy-stage {
  position: relative; z-index: 3;
  flex: none;
  margin-top: auto;
  align-self: center;
  display: flex; justify-content: center;
  pointer-events: none;
  padding-bottom: .4rem;
}
.teddy-svg {
  width: clamp(5.4rem, min(24vw, 17vh), 9rem);
  height: auto;
  filter: drop-shadow(0 14px 18px rgba(47, 74, 122, .4));
  transform: rotate(-3deg);
}

/* Tinggi viewport pendek (≤700px, mis. ponsel mid-range / landscape):
   skala fluid berhenti — sisanya ditangani pemangkasan dekorasi via JS. */
@media (max-height: 700px) {
  .cover-title { font-size: clamp(2.4rem, min(11vw, 9vh), 3.6rem); }
  .cover-sub br { display: none; }
  .cover-meta { margin-bottom: 1rem; }
  .cover-meta span { padding: .4rem .8rem; font-size: .8rem; }
  .host-line { margin-top: .8rem; }
}
@media (max-height: 600px) {
  .cover-title { font-size: clamp(2.1rem, 8vh, 2.9rem); }
  .cover-sub { margin-bottom: .5rem; }
  .cover-name { margin-bottom: .6rem; padding: .28rem 1.1rem; }
  .teddy-svg { width: clamp(4rem, 13vh, 5.4rem); }
}
/* Lanskap ponsel (mis. 844×390): inti sampul harus tetap muat SATU layar
   di atas dock tanpa mengandalkan gulir internal — mampatkan tipografi,
   jarak antar elemen, dan chip meta. */
@media (max-height: 460px) {
  .scene-cover { padding-bottom: var(--dock-clear); }
  .cover-head { padding-top: .35rem; }
  .chip { padding: .28rem .7rem; font-size: .68rem; }
  .cover-title { font-size: clamp(1.6rem, 6vh, 2.1rem); margin-bottom: .2rem; }
  .cover-name { font-size: 1rem; padding: .22rem 1rem; margin-bottom: .4rem; }
  .cover-meta { gap: .35rem; margin-bottom: .6rem; }
  .cover-meta span { padding: .3rem .6rem; font-size: .72rem; }
  .cover-actions { margin-top: .1rem; }
  .btn-cta { padding: .62rem 1.3rem; font-size: .92rem; }
  .teddy-stage { display: none; } /* di lanskap ekstrem mascot dikorbankan lebih awal */
}

/* ==========================================================================
   DETAIL PESTA
   ========================================================================== */
.panel-detail {
  background:
    radial-gradient(circle at 88% 6%, var(--c-sky-100), transparent 36%),
    radial-gradient(circle at 6% 42%, var(--c-gold-soft), transparent 38%),
    var(--c-cream);
}
.panel-detail .scene-inner,
.panel-gallery .scene-inner,
.panel-rsvp .scene-inner,
.panel-guestbook .scene-inner,
.panel-closing .scene-inner {
  background: var(--c-card);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .9rem;
  margin: 1.4rem 0;
}

.info-card {
  border-radius: var(--radius-md);
  padding: 1.2rem 1.2rem 1.1rem;
  box-shadow: var(--shadow-soft);
  background: var(--c-sky-100);
}
.info-card:nth-child(2) { background: var(--c-gold-soft); }
.info-card:nth-child(3) { background: var(--c-mint-soft); }
.info-card:nth-child(4) { background: var(--c-caramel-soft); }

.info-icon { font-size: 1.6rem; display: block; margin-bottom: .4rem; }
.info-card h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--c-ink-soft); }
.info-card p { margin: 0; font-size: .95rem; color: var(--c-ink); }
.info-card strong { color: var(--c-ink); }

.text-link {
  display: inline-block; margin-top: .6rem;
  font-weight: 700; color: var(--c-sky-deep);
  text-decoration: underline; text-underline-offset: 3px;
}

/* Tentang si kecil */
.about-baby {
  display: flex; align-items: center; gap: 1rem;
  background: var(--c-caramel-soft);
  border: 1px dashed var(--c-caramel);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
  margin: 1.4rem 0;
}
.about-baby-icon { font-size: 1.8rem; }
.about-baby-text p { margin: 0 0 .25rem; font-size: .95rem; }
.about-baby-text h3 { margin-bottom: .25rem; font-size: 1rem; color: var(--c-caramel-deep); }
.about-baby-text strong { color: var(--c-caramel-deep); }

.countdown-wrap {
  background: var(--c-gold-soft);
  border: 1px dashed var(--c-gold);
  border-radius: var(--radius-md);
  padding: 1.2rem;
  text-align: center;
  margin: 1.4rem 0;
}
.countdown-wrap h3 { font-size: 1rem; letter-spacing: .06em; }

.countdown { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: .6rem; }
.cd-box {
  background: #fff; color: var(--c-ink);
  min-width: 3.6rem; padding: .55rem .4rem; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center;
  box-shadow: var(--shadow-soft);
}
.cd-num { font-weight: 700; font-size: 1.6rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--c-sky-deep); }
.cd-box small { font-size: .62rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; color: var(--c-ink-soft); }
.cd-sep { font-weight: 700; font-size: 1.3rem; color: var(--c-ink-soft); }
.countdown-done { display: block; padding: .6rem; font-weight: 700; color: var(--c-sky-deep); }

/* Add to Calendar (.ics) — pasangan hitung mundur; hilang bersama bila
   data tanggal kosong (elemen [data-cal-wrap] tetap hidden). */
.calendar-cta { text-align: center; margin: 0 0 1.4rem; }
.calendar-note { margin: .55rem 0 0; font-size: .8rem; color: var(--c-ink-soft); }

/* Alur acara */
.timeline { list-style: none; margin: .4rem 0 1.8rem; padding: 0; position: relative; }
.timeline::before {
  content: '';
  position: absolute; left: 4.55rem; top: .5rem; bottom: .5rem;
  width: 3px; border-radius: 3px;
  background: linear-gradient(var(--c-sky-400), var(--c-gold));
}
.timeline li { position: relative; padding: .45rem 0 .45rem 5.3rem; }
.tl-time {
  position: absolute; left: 0; top: .68rem; width: 4.2rem; text-align: right;
  font-weight: 700; font-size: .98rem; color: var(--c-sky-deep);
}
.timeline li::before { /* bintang kecil sebagai penanda */
  content: '';
  position: absolute; left: calc(4.55rem - 10px); top: .78rem;
  width: 20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 8 L59 39 L91 39 L65 57 L74 89 L50 69 L26 89 L35 57 L9 39 L41 39 Z' fill='%23f2c14e'/%3E%3C/svg%3E") no-repeat center / contain;
}
.timeline p { margin: 0; font-size: .95rem; color: var(--c-ink); }

/* Catatan hadiah */
.gift-note {
  display: flex; gap: .8rem; align-items: flex-start;
  background: var(--c-sky-100);
  border: 1px solid rgba(92, 130, 184, .25);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
  margin: 0 0 1.4rem;
}
.gift-note-icon { font-size: 1.5rem; line-height: 1.3; }
.gift-note p { margin: 0; font-size: .92rem; color: var(--c-ink); }

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

/* ==========================================================================
   FLYER/BANNER RESMI (opsional)
   ========================================================================== */
.flyer-section { margin-top: 1.6rem; text-align: center; }
.flyer-title { font-size: 1rem; letter-spacing: .04em; text-align: left; margin-bottom: .2rem; }

.flyer-card {
  max-width: 560px;
  margin: .6rem auto 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 3px solid var(--c-gold-soft);
  box-shadow: var(--shadow-soft);
}
.flyer-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  background: var(--c-sky-100);
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  transition: transform .15s ease, box-shadow .15s ease;
}
.flyer-open:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(47, 74, 122, .22); }
.flyer-open:active { transform: translateY(0); }
.flyer-open:focus-visible { outline: 3px solid var(--c-sky-ink); outline-offset: 3px; }
.flyer-img {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  display: block;
}
.flyer-chip {
  position: absolute;
  right: .8rem;
  bottom: .8rem;
  background: rgba(253, 248, 239, .94);
  color: var(--c-ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .78rem;
  padding: .4rem .85rem;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(47, 74, 122, .25);
}
.flyer-hint { margin: .6rem 0 0; font-size: .8rem; color: var(--c-ink-soft); }

/* ==========================================================================
   VIDEO (opsional)
   ========================================================================== */
.video-section { margin-top: 1.8rem; }
.video-title { font-size: 1rem; letter-spacing: .04em; margin-bottom: .2rem; }

.video-card {
  max-width: 560px;
  margin: .6rem auto 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 3px solid var(--c-gold-soft);
  box-shadow: var(--shadow-soft);
  position: relative;
}
.video-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  background: var(--c-sky-deep);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.video-open:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(47, 74, 122, .25); }
.video-open:active { transform: translateY(0); }
.video-open:focus-visible { outline: 3px solid var(--c-sky-ink); outline-offset: 3px; }
.video-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  opacity: .92;
  transition: opacity .15s ease;
}
.video-open:hover .video-thumb { opacity: 1; }
.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);
  color: var(--c-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; padding-left: .25rem;
  box-shadow: 0 8px 20px rgba(47, 74, 122, .45), 0 0 0 6px rgba(255, 255, 255, .35);
  transition: transform .15s ease;
}
.video-open:hover .video-play { transform: translate(-50%, -50%) scale(1.08); }
.video-chip {
  position: absolute;
  left: 50%; bottom: .9rem;
  transform: translateX(-50%);
  background: rgba(253, 248, 239, .94);
  color: var(--c-ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .78rem;
  padding: .4rem .95rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(47, 74, 122, .25);
}
/* Tanpa poster (file cuplikan tak ada) → latar gradien lembut dengan tombol putar */
.video-open-plain .video-thumb { display: none; }
.video-open-plain {
  min-height: 220px;
  background:
    radial-gradient(circle at 30% 20%, rgba(143, 180, 221, .5), transparent 45%),
    linear-gradient(160deg, var(--c-night), var(--c-sky-deep));
}
.video-hint { margin: .6rem 0 0; font-size: .8rem; color: var(--c-ink-soft); text-align: center; }

/* Mode media-inline (CONFIG.mediaLightbox = false): tanpa afordansi klik —
   chip/hint/ikon perbesar disembunyikan, kursor kembali normal, dan JS
   mematikan semua handler klik media. Foto/video hanya tampil apa adanya. */
.media-inline .photo-open,
.media-inline .flyer-open,
.media-inline .video-open,
.media-inline .free-open,
.media-inline .cover-photo-btn,
.media-inline .cover-bg-open {
  cursor: default;
  pointer-events: none;
}
.media-inline .flyer-chip,
.media-inline .free-chip,
.media-inline .video-play,
.media-inline .video-chip,
.media-inline .gallery-hint,
.media-inline .flyer-hint,
.media-inline .video-hint,
.media-inline .cover-bg-open { display: none !important; }
.media-inline .photo-open:hover,
.media-inline .flyer-open:hover,
.media-inline .video-open:hover { transform: none; box-shadow: var(--shadow-soft); }

/* ==========================================================================
   GALERI FOTO
   ========================================================================== */
.panel-gallery {
  background:
    radial-gradient(circle at 88% 10%, var(--c-sky-100), transparent 40%),
    radial-gradient(circle at 8% 88%, var(--c-caramel-soft), transparent 42%),
    var(--c-cream);
}

.gallery-section { margin-top: 1.3rem; }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .9rem;
}

.photo-card { margin: 0; }

.photo-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  background: var(--c-sky-100);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: zoom-in;
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease, box-shadow .15s ease;
}
.photo-open:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(47, 74, 122, .22); }
.photo-open:active { transform: translateY(0); }
.photo-open:focus-visible { outline: 3px solid var(--c-sky-ink); outline-offset: 3px; }

.photo-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* Foto gagal dimuat → kotak lembut tetap tampil, caption tetap terbaca */
.photo-card.photo-img-missing .photo-img { display: none; }

.photo-card figcaption {
  margin-top: .5rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--c-ink-soft);
  text-align: center;
  overflow-wrap: anywhere;
}

.gallery-hint {
  text-align: center;
  font-size: .8rem;
  color: var(--c-ink-soft);
  margin: 1rem 0 0;
}

/* ==========================================================================
   LIGHTBOX — foto ukuran asli dengan zoom (roda / pinch / ketuk-ganda /
   tombol ±), geser 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(23, 37, 60, .93);
  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;
}
/* Bingkai berukuran TENTU (tidak mengikuti ukuran gambar): geometri stabil
   untuk zoom/pan/pinch sejak sebelum foto selesai dimuat, dan roda mouse
   selalu mendarat di dalam bingkai — bukan di figure di belakangnya. */
.lightbox-frame {
  position: relative;
  width: 100%;
  height: min(72vh, 600px);
  overflow: hidden;
  border-radius: var(--radius-md);
  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-sky-100);
  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: 700;
  font-size: .95rem;
  color: #fff;
  text-align: center;
  overflow-wrap: anywhere;
}
.lightbox-count {
  position: absolute;
  top: -.4rem;
  right: 0;
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  background: rgba(23, 37, 60, .65);
  padding: .25rem .6rem;
  border-radius: 999px;
}

/* Mode video di dalam lightbox (iframe/video asli) */
.lightbox-video {
  position: relative;
  z-index: 1;
  width: min(880px, 94vw);
  background: #000;
  border-radius: var(--radius-md);
  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-sky-100); color: var(--c-ink); }

.lightbox-close,
.lightbox-nav {
  position: absolute;
  z-index: 3;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  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, .28); }
.lightbox-close:focus-visible,
.lightbox-nav:focus-visible { outline: 3px solid var(--c-gold); 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)); }

/* Alat zoom (foto saja) + tautan buka-asli */
.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: 999px;
  border: 1px solid rgba(255, 255, 255, .4);
  background: rgba(23, 37, 60, .55);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background .18s ease, color .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;
  min-width: 3.4rem;
}
.lightbox-original {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .62rem .95rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .4);
  background: rgba(23, 37, 60, .55);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .78rem;
  text-decoration: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  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(255, 255, 255, .92);
  background: rgba(23, 37, 60, .5);
  padding: .28rem .8rem;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
}

/* ==========================================================================
   RSVP
   ========================================================================== */
.panel-rsvp {
  background:
    radial-gradient(circle at 10% 10%, var(--c-sky-100), transparent 36%),
    radial-gradient(circle at 90% 90%, var(--c-gold-soft), transparent 40%),
    var(--c-cream);
}

.rsvp-form { margin-top: 1.3rem; }

.field { margin-bottom: 1.1rem; }
.field label {
  display: block; font-weight: 700; font-size: .9rem; margin-bottom: .4rem;
}
.req { color: var(--c-sky-deep); }

.field input, .field select, .field textarea {
  width: 100%;
  font-family: inherit; font-size: 1rem;
  color: var(--c-ink);
  background: var(--c-sky-100);
  border: 2px solid transparent;
  border-radius: 14px;
  padding: .75rem .95rem;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--c-sky-400);
  box-shadow: 0 0 0 4px rgba(143, 180, 221, .35);
}
.field textarea { resize: vertical; min-height: 84px; }

.error-text {
  display: block; min-height: 1.25em; margin-top: .3rem;
  font-size: .82rem; font-weight: 700; color: #d96b3d;
}

/* Detail tamu disembunyikan saat "tidak hadir" (JS) */
.rsvp-details { transition: opacity .2s ease; }
.rsvp-details-hidden { display: none !important; }

.rsvp-no-note {
  text-align: center;
  background: var(--c-sky-100);
  border: 1px dashed var(--c-sky-400);
  border-radius: var(--radius-md);
  padding: .9rem 1rem;
  font-weight: 700;
  font-size: .95rem;
  margin: 0 0 1.2rem;
}

.loading {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  margin-top: 1rem; font-weight: 700; font-size: .92rem; color: var(--c-sky-deep);
}
.spinner {
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  border: 3px solid rgba(92, 130, 184, .3); border-top-color: var(--c-sky-deep);
  animation: spin .8s linear infinite;
}

.form-note { text-align: center; font-size: .8rem; color: var(--c-ink-soft); margin-top: 1rem; }

/* ==========================================================================
   BUKU TAMU
   ========================================================================== */
.panel-guestbook {
  background:
    radial-gradient(circle at 85% 12%, var(--c-sky-100), transparent 38%),
    radial-gradient(circle at 10% 85%, var(--c-gold-soft), transparent 40%),
    var(--c-cream);
}
.guestbook-section { margin-top: 1.4rem; }
.guestbook-body { display: flex; flex-direction: column; gap: .9rem; }

/* ==========================================================================
   HALAMAN BEBAS (OPSIONAL — blok teks + foto yang bisa diulang)
   ========================================================================== */
.panel-free {
  background:
    radial-gradient(circle at 12% 10%, var(--c-gold-soft), transparent 40%),
    radial-gradient(circle at 88% 90%, var(--c-sky-100), transparent 42%),
    var(--c-cream);
}

.free-page-section { margin-top: .4rem; }

.free-blocks {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.free-block {
  background: var(--c-sky-100);
  border: 1px solid rgba(92, 130, 184, .22);
  border-radius: var(--radius-md);
  padding: 1.2rem 1.3rem;
  box-shadow: var(--shadow-soft);
}
.free-title {
  font-size: 1.15rem;
  color: var(--c-sky-ink);
  margin-bottom: .45rem;
}
.free-content { color: var(--c-ink); font-size: .95rem; }
.free-content p { margin: 0 0 .6rem; }
.free-content p:last-child { margin-bottom: 0; }

/* Foto blok bebas (opsional) — bingkai hanya tampil saat foto terisi */
.free-media {
  margin: 1rem 0 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: var(--shadow-soft);
  background: var(--c-card);
}
.free-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  background: var(--c-card);
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  transition: transform .15s ease, box-shadow .15s ease;
}
.free-open:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(47, 74, 122, .22); }
.free-open:active { transform: translateY(0); }
.free-open:focus-visible { outline: 3px solid var(--c-sky-ink); outline-offset: 3px; }
.free-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--c-sky-100);
}
.free-chip {
  position: absolute;
  right: .8rem;
  bottom: .8rem;
  background: rgba(253, 248, 239, .94);
  color: var(--c-ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .78rem;
  padding: .4rem .85rem;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(47, 74, 122, .25);
}
/* Foto blok bebas opsional: bila platform menghapus <img> (morph Free Image
   dikosongkan), bingkai kosong disembunyikan agar blok tetap rapi — judul +
   teks tetap tampil (halaman berfungsi penuh tanpa gambar). */
.free-media:not(:has(img)) { display: none; }

/* ==========================================================================
   PENUTUP
   ========================================================================== */
.panel-closing {
  background:
    radial-gradient(circle at 50% 8%, var(--c-sky-100), transparent 46%),
    var(--c-cream);
}
.closing-note {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: clamp(1.5rem, 5vw, 2rem);
  color: var(--c-sky-ink);
  border-left: 4px solid var(--c-gold);
  padding-left: 1rem;
  text-align: left;
  max-width: 26ch;
  margin: 1.2rem 0;
}
.host-sign { margin-top: 1.4rem; font-size: 1rem; color: var(--c-ink-soft); }
.host-sign strong { color: var(--c-ink); font-weight: 800; font-size: 1.15rem; }

.app-footer {
  position: static;
  margin-top: 1.5rem;
  text-align: center; font-size: .76rem;
  color: var(--c-ink-soft);
  padding: 0 max(.9rem, var(--safe-r)) calc(.9rem + var(--safe-b)) max(.9rem, var(--safe-l));
}
.app-footer .footer-brand {
  font-weight: 800;
  color: var(--c-sky-deep);
}
.app-footer .footer-brand::after { content: ' · '; color: var(--c-ink-soft); font-weight: 400; }
.app-footer .footer-brand:empty::after { content: none; }

/* Baris brand platform selebar penuh (kelas .powered-by — jangan dihapus).
   Menutup undangan di akhir alur dokumen. */
.powered-by {
  width: 100%;
  margin-top: .4rem;
  padding: .7rem 1rem calc(.7rem + var(--safe-b));
  text-align: center;
  font-size: .76rem;
  color: var(--c-ink-soft);
  background: rgba(234, 243, 252, .6);
  border-top: 1px solid rgba(47, 74, 122, .12);
}
.powered-by p { margin: 0; }
.powered-by-brand { font-weight: 800; color: var(--c-sky-deep); }

/* ==========================================================================
   TABURAN BINTANG (JS)
   ========================================================================== */
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 105; overflow: hidden; }
.confetti-piece { position: absolute; top: -3vh; opacity: .95; animation: confetti-fall linear forwards; }

@keyframes confetti-fall { to { transform: translateY(112vh) rotate(720deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob {
  from { transform: translateY(-7px); }
  to { transform: translateY(9px); }
}
@keyframes twinkle {
  from { opacity: .5; }
  to { opacity: 1; }
}
@keyframes drift {
  from { transform: translateX(-14px); }
  to { transform: translateX(14px); }
}

/* ==========================================================================
   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; }
  .floaty, .moon, .twinkle, .cloud { animation: none; }
  .mobile-menu, .menu-backdrop, .lightbox { animation: none; }
}

/* ==========================================================================
   FALLBACK TANPA JS — halaman terbaca sempurna sebagai dokumen panjang:
   semua section bertumpuk; chrome interaktif (burger, dock, progres,
   lembar menu) disembunyikan. Anchor native tetap bekerja.
   ========================================================================== */
.no-js .app-header { background: var(--c-night); }
.no-js .menu-btn,
.no-js .app-header__progress,
.no-js .skip-link { display: none; }
/* Kartu-kartu tak perlu bayangan layar penuh saat menjadi dokumen cetak polos */

/* ==========================================================================
   LAYAR LEBAR — napas lebih lega di dalam kartu
   ========================================================================== */
@media (min-width: 720px) {
  .cover-title { font-size: clamp(3.4rem, min(9vw, 10.5vh), 5.6rem); }
  .cover-meta span { font-size: .92rem; }
  .scene-inner { padding-top: clamp(2rem, 5vw, 3rem); }
}

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

  .app-header, .dock, .menu-backdrop, .mobile-menu, .confetti-layer,
  .lightbox, .skip-link, .cover-actions, .floaty, .poster-deco,
  .twinkle, .cover-photo-bg, .rsvp-wrap, .btn, .video-section,
  .detail-cta, .calendar-cta { display: none !important; }

  /* Pulihkan elemen yang dipangkas fit-to-screen (dekorasi & teks sekunder) */
  .fit-hidden { display: revert !important; }

  .scene {
    min-height: 0;
    padding: 0;
    display: block;
  }
  .js .scene-cover { height: auto; max-height: none; overflow: visible; }
  .panel-hidden { display: none !important; }

  .scene-inner { width: 100%; max-width: none; margin: 0 0 1rem; box-shadow: none; border-radius: 0; }
  .panel-detail, .panel-gallery, .panel-rsvp, .panel-guestbook, .panel-free, .panel-closing {
    background: #fff !important; color: #1a1a1a;
  }

  .cover-head { position: static; padding: 1rem; }
  .cover-body { padding: 1rem; }
  .cover-title { color: #2f4a7a; text-shadow: none; transform: none; }
  .cover-sub, .host-line { color: #444; text-shadow: none; }
  .chip { background: #eef3fa; color: #333; }
  .cover-name { background: #fae9bd; }
  .teddy-stage { display: none; }
  .info-card, .countdown-wrap, .gift-note, .about-baby { box-shadow: none; }
  .field input, .field select, .field textarea { border: 1px solid #bbb; }
  .app-footer, .powered-by { position: static; color: #666; }
  .powered-by { background: none; border-top: 1px solid #ddd; }
  .free-block { background: #f2f6fb; box-shadow: none; }
}

/* ── Guestbook (platform-injected form + message list) ─────────────── */
/* Matches the template's field cards (soft sky fills, rounded corners,
   ring focus), .btn-primary button, and sky/gold accent lines. The
   template has no global .form-control rule, so inputs are fully
   defined here. */
.guestbook-form { width: 100%; }

#guestbookForm {
  background: var(--c-card);
  border: 2px solid var(--c-sky-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  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: 700;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
  color: var(--c-ink);
}
#guestbookForm .form-control {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-ink);
  background: var(--c-sky-100);
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 0.75rem 0.95rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
#guestbookForm .form-control::placeholder { color: var(--c-ink-soft); }
#guestbookForm .form-control:hover { border-color: var(--c-sky-300); }
#guestbookForm .form-control:focus {
  outline: none;
  background: var(--c-card);
  border-color: var(--c-sky-400);
  box-shadow: 0 0 0 4px rgba(143, 180, 221, 0.35);
}
#guestbookForm textarea.form-control { resize: vertical; min-height: 84px; }
#guestbookForm .error {
  display: block;
  min-height: 0;
  margin-top: 0.3rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--c-caramel-deep);
}
#guestbookForm .error:empty { display: none; }

.guestbook-chapta { margin: 2px 0; }

#guestbookForm button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 auto;
  border: 0;
  border-radius: 999px;
  padding: 0.9rem 1.6rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  color: #fff;
  background: var(--c-sky-deep);
  box-shadow: 0 8px 20px rgba(92, 130, 184, 0.4);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#guestbookForm button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(92, 130, 184, 0.5);
}

.loading-guestbook {
  display: block;
  text-align: center;
  margin-top: 0.4rem;
  font-size: 0.86rem;
  color: var(--c-ink-soft);
}

#comments-container.guestbook-wrap {
  border-top: 2px solid var(--c-sky-200) !important;
  padding-top: 20px;
}
.guestbook-entry {
  background: var(--c-card);
  border: 1px solid var(--c-sky-200);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-soft);
}
.guestbook-entry h5 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--c-ink);
}
.guestbook-entry p { margin: 0 0 6px; font-size: 0.92rem; line-height: 1.55; color: var(--c-ink-soft); }
.guestbook-entry small { font-size: 0.76rem; color: var(--c-ink-soft); opacity: 0.85; }

.more-guestbook-wrap { text-align: center; margin-top: 4px; }
#load-more {
  background: var(--c-sky-100);
  border: 2px solid var(--c-sky-300);
  border-radius: 999px;
  padding: 10px 26px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--c-sky-ink);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
#load-more:hover { background: var(--c-card); border-color: var(--c-sky-deep); color: var(--c-sky-deep); }