/* ==========================================================================
   Starlight Cuddles — Kartu Undangan Baby Shower (Boy) · card
   styles.css
   --------------------------------------------------------------------------
   Estetika: kartu undangan digital bergaya alat tulis kertas yang hangat —
   langit biru muda bertabur bintang, awan lembut, beruang teddy dengan dasi
   biru, bintang emas, dan aksen tulisan tangan. Kustomisasi warna lewat
   token :root di bawah.
   ========================================================================== */

/* ---------- Token & palet ---------- */
:root {
  --c-sky-100: #eaf3fc;
  --c-sky-200: #cfe3f5;
  --c-sky-300: #a9c9e8;
  --c-sky-400: #8fb4dd;
  --c-sky-deep: #5c82b8;
  --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(61, 90, 128, .22);
  --shadow-soft: 0 6px 16px rgba(61, 90, 128, .14);
  /* ---------- Geometri kerangka (sumber tunggal) ----------
     --header-h mengunci tinggi header sungguhan; cap sampul dan offset
     anchor (scroll-padding-top / scroll-margin-top) diturunkan darinya,
     jadi krom nyata tidak akan pernah bergeser dari token. */
  --header-h: 60px;
  --dock-h: 66px;
}

/* ---------- Reset & dasar ---------- */
/* ====== DASAR ====== */
/* Utilitas tersembunyi yang selalu menang: gaya penulis seperti
   `.btn-cal { display:inline-flex }` mengalahkan `[hidden]` bawaan UA,
   sehingga elemen yang disembunyikan JS bisa tetap tampak. */
[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

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

[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; }

/* ==========================================================================
   ALUR DOKUMEN — semua seksi bertumpuk dalam alur normal; halaman menggulir
   alami dari kartu sampul sampai penutup. Kelas .js hanya menyalakan krom
   tetap (header lengket, dok mengambang) dan pengguliran anchor mulus.
   Tanpa JS halaman tetap terbaca sebagai dokumen bertumpuk.
   ========================================================================== */
.scenes { display: block; }

.scene {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100dvh - var(--header-h)); /* adegan penuh satu layar; yang lebih tinggi tumbuh & mengalir */
  padding-top: clamp(1rem, 3vh, 2rem);
}

/* Offset anchor dari token yang sama — HANYA lewat scroll-margin-top pada
   seksi (scroll-padding di root akan menggandakan kompensasi dengan
   scrollIntoView). */
.scene { scroll-margin-top: calc(var(--header-h) + 8px); }
@media (prefers-reduced-motion: no-preference) {
  html.js { scroll-behavior: smooth; }
}

/* Seksi yang fiturnya dinonaktifkan (oleh platform / CONFIG) disembunyikan
   seluruhnya — entri nav/dok/menunya ikut hilang otomatis (diisi JS). */
.panel-hidden { display: none !important; }

/* Seksi difokuskan secara terprogram (tabindex=-1) → sembunyikan ring default
   browser; fokus visual tetap tersedia di tombol & kolom isian. */
.scene[tabindex="-1"]:focus { outline: none; }

/* Elemen sampul yang dikorbankan agar kartu muat satu layar (fit JS).
   Hanya di layar — saat cetak semuanya muncul kembali. */
@media screen {
  .fit-hidden { display: none !important; }
}

/* Tier remasan terakhir (semua korban sudah disembunyikan tapi masih meluap):
   pangkas jarak napas, jangan pernah konten utama. */
.panel-cover.cover-squeeze .invite-card { padding-top: .8rem; padding-bottom: .9rem; }
.panel-cover.cover-squeeze .cover-meta { margin-bottom: .7rem; }
.panel-cover.cover-squeeze .cover-actions { margin-top: 0; }
.panel-cover.cover-squeeze .host-line { margin-top: .6rem; }
.panel-cover.cover-squeeze .cover-body { padding-top: .4rem; padding-bottom: .5rem; }

/* Kunci gulir latar saat penampil terbuka. */
body.lb-open { overflow: hidden; }

/* Mode tanpa klik-buka (CONFIG.clickToOpen = false): media inline saja —
   tanpa lencana 🔍, tanpa kursor zoom, tanpa tombol akses foto latar. */
html.no-zoom .zoom-badge,
html.no-zoom .video-hint,
html.no-zoom .cover-bg-hint { display: none !important; }
html.no-zoom [data-lightbox],
html.no-zoom [data-video-open] { cursor: auto; }

/* ---------- Struktur konten umum ---------- */
.panel-inner {
  width: min(680px, 100%);
  margin: 1.1rem 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;
}

.panel-inner-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  margin: auto; /* dipusatkan di adegan penutup oleh flex .scene */
  padding-bottom: 1rem;
}

.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; }
.lead code {
  font-family: inherit;
  background: var(--c-sky-100);
  border-radius: 6px;
  padding: .1em .35em;
  font-size: .85em;
}

/* ---------- 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-sky-deep);
  color: #fff;
  font-size: 1.08rem;
  box-shadow: 0 10px 26px rgba(92, 130, 184, .5);
}
.btn-cta:hover { box-shadow: 0 14px 32px rgba(92, 130, 184, .6); }

.btn-block { width: 100%; }

/* ==========================================================================
   HALAMAN 1 — SAMPUL KARTU
   ========================================================================== */
.panel-cover {
  background:
    radial-gradient(circle at 82% 10%, var(--c-sky-100), transparent 42%),
    radial-gradient(circle at 12% 88%, var(--c-gold-soft), transparent 40%),
    linear-gradient(180deg, var(--c-sky-200) 0%, var(--c-sky-100) 52%, var(--c-cream) 100%);
}

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

.stars-field {
  position: absolute; inset: 0;
  background-repeat: repeat;
}
.stars-a {
  background-image:
    radial-gradient(2.2px 2.2px at 18% 22%, rgba(255, 255, 255, .95) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 68% 12%, rgba(255, 255, 255, .85) 50%, transparent 51%),
    radial-gradient(2px 2px at 86% 30%, rgba(255, 255, 255, .8) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 40% 8%, rgba(255, 255, 255, .9) 50%, transparent 51%);
  background-size: 240px 240px, 190px 190px, 300px 300px, 160px 160px;
}
.stars-b {
  background-image:
    radial-gradient(1.8px 1.8px at 30% 16%, rgba(242, 193, 78, .8) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 76% 26%, rgba(242, 193, 78, .7) 50%, transparent 51%),
    radial-gradient(2px 2px at 54% 4%, rgba(255, 255, 255, .75) 50%, transparent 51%);
  background-size: 210px 210px, 260px 260px, 180px 180px;
  animation: twinkle 5s ease-in-out infinite alternate;
}

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

.floaty {
  position: absolute; z-index: 2; font-size: 1.6rem; opacity: .95;
  pointer-events: none;
  animation: bob 5s ease-in-out infinite alternate;
  filter: drop-shadow(0 4px 8px rgba(61, 90, 128, .3));
}
.f1 { top: 30%; right: 6%; animation-duration: 5.4s; }
.f2 { bottom: 32%; left: 5%; animation-delay: .9s; animation-duration: 6s; }
.f3 { top: 16%; left: 22%; animation-delay: 1.4s; animation-duration: 4.8s; opacity: .7; }
.f4 { bottom: 22%; right: 7%; animation-delay: .5s; animation-duration: 5.8s; }

/* --- Kepala kartu --- */
.cover-head {
  position: relative; z-index: 4;
  display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap;
  padding: 1rem 1rem 0;
}

.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(61, 90, 128, .16);
  border-radius: 999px;
  padding: .4rem .95rem;
  font-size: .84rem;
  font-weight: 600;
  box-shadow: var(--shadow-soft);
  max-width: min(90vw, 24rem);
  overflow-wrap: anywhere;
}
.chip strong { font-weight: 800; }
.chip-rsvp { background: var(--c-gold-soft); border-color: rgba(242, 193, 78, .55); }

/* --- Kartu undangan ---
   Sampul = TEPAT satu layar: tingginya di-cap pada viewport dikurangi header
   (token --header-h), kartu dipusatkan vertikal, dan ukuran font/jarak
   memakai clamp dvh yang BERHENTI tumbuh pada layar pendek (≤700px) agar
   ponsel mid-size tidak kehilangan konten. Bila tetap meluap, JS menyembunyikan
   dekorasi menurut urutan prioritas (lihat main.js → initCoverFit); gulir di
   dalam sampul hanyalah katup darurat untuk viewport ekstrem. */
.panel-cover {
  height: calc(100dvh - var(--header-h));
  min-height: 0;
  max-height: calc(100dvh - var(--header-h));
  justify-content: center;
  overflow-y: auto; /* katup darurat saja — fit JS menjaga konten pas */
  overflow-x: hidden;
}
.cover-body {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  /* Isi ruang yang TERSISA di bawah baris chip (bukan 100% penuh — itu yang
     bikin meluap 26px); kartu tetap dipusatkan di area bebas tersebut.
     Padding bawah mencadangkan ruang dok mengambang agar CTA tidak pernah
     tertutup pil dok (cek akhir halaman & lanskap). */
  flex: 1 1 auto;
  min-height: 0;
  margin: auto;
  width: 100%;
  padding: clamp(.6rem, 2dvh, 1.6rem) clamp(1rem, 4vw, 2rem) clamp(4.6rem, 9dvh, 5.4rem);
}

.invite-card {
  position: relative;
  width: min(460px, 100%);
  background: var(--c-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(1.2rem, 3.4dvh, 2.6rem) clamp(1.4rem, 5vw, 2.2rem) clamp(1.3rem, 3.6dvh, 2.4rem);
  text-align: center;
  transform: rotate(-1deg);
}
.invite-card::before {
  content: '';
  position: absolute; inset: 10px;
  border: 2px dashed rgba(143, 180, 221, .6);
  border-radius: calc(var(--radius-lg) - 8px);
  pointer-events: none;
}

.invite-corner {
  position: absolute; z-index: 2;
  font-size: 1.15rem;
  filter: drop-shadow(0 2px 3px rgba(61, 90, 128, .25));
}
.invite-corner-tl { top: 14px; left: 16px; }
.invite-corner-tr { top: 14px; right: 16px; transform: scaleX(-1); }
.invite-corner-bl { bottom: 14px; left: 16px; transform: scaleY(-1); }
.invite-corner-br { bottom: 14px; right: 16px; transform: scale(-1); }

.hero-photo {
  position: relative;
  width: clamp(5.6rem, min(24vw, 15dvh), 8.5rem);
  height: clamp(5.6rem, min(24vw, 15dvh), 8.5rem);
  border-radius: 50%;
  border: 5px solid #fff;
  outline: 3px solid var(--c-sky-300);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  margin: 0 auto 1.1rem;
  transform: rotate(-3deg);
  background: var(--c-sky-100);
  cursor: zoom-in;
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }

/* --- Foto latar sampul (opsional; diaktifkan JS via CONFIG.coverBg) --- */
.cover-photo-bg {
  position: absolute; inset: 0; z-index: 1;
  overflow: hidden;
  cursor: zoom-in;
}
.cover-photo-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.cover-photo-bg::after {
  /* Lapisan temaram agar kartu & teks tetap terbaca di atas foto. */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(234, 243, 252, .72), rgba(253, 248, 239, .88));
}
.panel-cover.has-photo-bg .sky-bg,
.panel-cover.has-photo-bg .floaty { display: none; }

.cover-bg-hint {
  position: absolute; z-index: 4; left: 50%; transform: translateX(-50%);
  bottom: max(1.2rem, env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(61, 90, 128, .2);
  color: var(--c-ink);
  border-radius: 999px;
  padding: .55rem 1.1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .84rem;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: background .15s ease;
}
.cover-bg-hint:hover { background: #fff; }
.cover-bg-hint:focus-visible { outline: 3px solid var(--c-sky-ink); outline-offset: 2px; }

.kicker-cover { background: var(--c-gold-soft); color: var(--c-ink); }

.cover-title {
  font-family: var(--font-hand);
  font-weight: 700;
  /* Fluid tapi berhenti tumbuh melewati layar pendek (~≤700px tinggi):
     suku dvh membatasi ukuran pada viewport rendah agar kartu selalu muat. */
  font-size: clamp(2.45rem, min(11vw, 8.4dvh), 3.9rem);
  line-height: 1.1;
  color: var(--c-sky-ink);
  margin: .05em 0 .12em;
  text-wrap: balance;
  transform: rotate(-1.5deg);
}

.cover-sub {
  color: var(--c-ink-soft);
  font-size: clamp(.95rem, 3vw, 1.05rem);
  max-width: 38ch;
  margin: 0 auto 1rem;
}

.mascot-row {
  display: flex; align-items: center; justify-content: center;
  gap: .9rem; margin: .3rem 0 .5rem;
}
.teddy-svg {
  width: clamp(4.5rem, min(19vw, 12.6dvh), 6.5rem);
  height: auto;
  filter: drop-shadow(0 8px 14px rgba(169, 102, 63, .35));
  transform: rotate(-4deg);
}
.star-svg {
  width: clamp(2.1rem, min(9vw, 6dvh), 3.4rem);
  height: auto;
  transform: rotate(14deg);
  filter: drop-shadow(0 5px 9px rgba(242, 193, 78, .55));
  animation: bob 3.6s ease-in-out infinite alternate;
}

.cover-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.65rem, min(7.5vw, 5.6dvh), 2.6rem);
  color: var(--c-ink);
  margin: .35em 0 .4em;
  text-wrap: balance;
  overflow-wrap: anywhere; /* nama panjang tidak akan meluber */
}

.cover-meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem;
  margin-bottom: 1.5rem;
}
.cover-meta span {
  background: var(--c-sky-100);
  border: 1px solid rgba(92, 130, 184, .22);
  padding: .5rem .95rem;
  border-radius: 14px;
  font-size: .86rem;
  font-weight: 600;
}

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

.host-line { margin-top: 1.6rem; font-size: .9rem; color: var(--c-ink-soft); }
.host-line span { color: var(--c-ink); font-weight: 800; }

/* ==========================================================================
   HALAMAN 2 — DETAIL ACARA
   ========================================================================== */
.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 .panel-inner,
.panel-rsvp .panel-inner,
.panel-guestbook .panel-inner,
.panel-closing .panel-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); }

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

/* ==========================================================================
   HALAMAN 3 — GALERI MOMEN
   ========================================================================== */
.panel-gallery {
  background:
    radial-gradient(circle at 12% 14%, var(--c-sky-100), transparent 40%),
    radial-gradient(circle at 88% 86%, var(--c-gold-soft), transparent 42%),
    var(--c-cream);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.gallery-item {
  position: relative;
  margin: 0;
  background: #fff;
  border-radius: 12px;
  padding: .55rem .55rem .75rem;
  box-shadow: var(--shadow-soft);
  transform: rotate(-1.4deg);
  transition: transform .18s ease, box-shadow .18s ease;
  cursor: zoom-in;
}
.gallery-item:nth-child(even) { transform: rotate(1.4deg); }
.gallery-item:hover {
  transform: rotate(0deg) translateY(-3px);
  box-shadow: var(--shadow-card);
}
.gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 8px;
  background: var(--c-sky-100);
}
.gallery-item figcaption {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: clamp(1rem, 4vw, 1.15rem);
  text-align: center;
  color: var(--c-ink-soft);
  padding: .5rem .2rem 0;
}

/* ==========================================================================
   HALAMAN 4 — 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; }

/* ==========================================================================
   HALAMAN 5 — 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 7 — HALAMAN BEBAS (opsional — diisi platform lewat morph "Free Page")
   ========================================================================== */
.panel-free {
  background:
    radial-gradient(circle at 12% 14%, var(--c-sky-100), transparent 40%),
    radial-gradient(circle at 88% 86%, var(--c-gold-soft), transparent 42%),
    var(--c-cream);
}

.free-blocks {
  display: grid;
  gap: 1.3rem;
  margin-top: 1.5rem;
}

.free-block {
  background: var(--c-sky-100);
  border: 1px dashed rgba(92, 130, 184, .3);
  border-radius: var(--radius-md);
  padding: 1.2rem 1.2rem 1.3rem;
  box-shadow: var(--shadow-soft);
}

.free-block-title {
  font-size: 1.15rem;
  color: var(--c-sky-deep);
  margin-bottom: .45rem;
}

.free-block-text {
  margin: 0 0 1rem;
  color: var(--c-ink);
  font-size: .97rem;
}

.free-block-figure {
  position: relative;
  margin: 0;
  max-width: 320px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  cursor: zoom-in;
}
.free-block-figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--c-sky-100);
}
.free-block-figure .zoom-badge { top: .7rem; right: .7rem; }
.free-block-figure:focus-visible { outline: 3px solid var(--c-sky-ink); outline-offset: 3px; }
/* Gambar opsional: bila tidak diisi, platform menghapus <img> → bingkai kosong
   disembunyikan agar blok tetap rapi (judul + teks tetap tampil). */
.free-block-figure:not(:has(img)) { display: none; }

/* ==========================================================================
   HALAMAN 6 — 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 {
  text-align: center; font-size: .76rem;
  color: var(--c-ink-soft);
  padding: .9rem max(.9rem, env(safe-area-inset-right)) calc(.9rem + env(safe-area-inset-bottom)) max(.9rem, env(safe-area-inset-left));
}

/* ==========================================================================
   HEADER LENGKET — brand + pil nav desktop + burger mobile + progres
   Tinggi dikunci token --header-h; cap sampul & offset anchor menurun dari
   token yang sama (lihat blok token di atas). Tanpa JS seluruh krom ini
   disembunyikan (lihat FALLBACK TANPA JS di bawah).
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  height: var(--header-h); /* terkunci: cap sampul bergantung pada angka ini */
  padding: 0 max(.9rem, env(safe-area-inset-left)) 0 max(.9rem, env(safe-area-inset-right));
  background: rgba(253, 248, 239, .88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(92, 130, 184, .18);
  transition: box-shadow .2s ease;
}
.site-header.is-scrolled { box-shadow: 0 10px 26px -14px rgba(61, 90, 128, .4); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  color: var(--c-ink);
  min-width: 0;
}
.brand-mark {
  display: grid; place-items: center;
  width: 2.15rem; height: 2.15rem;
  font-size: 1.1rem; line-height: 1;
  background: #fff;
  border: 1px solid rgba(92, 130, 184, .3);
  border-radius: 50%;
  box-shadow: var(--shadow-soft);
}
.brand-name {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--c-sky-ink);
  white-space: nowrap;
}
.brand-name em { font-style: normal; color: var(--c-caramel-deep); }

/* --- Pil navigasi desktop (isi dibangun JS dari seksi DOM) --- */
.topnav { display: none; gap: .2rem; }
@media (min-width: 860px) { html.js .topnav { display: flex; } }
.topnav-btn {
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .84rem;
  line-height: 1;
  color: var(--c-ink-soft);
  padding: .62rem .95rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.topnav-btn:hover { background: var(--c-sky-100); color: var(--c-ink); }
.topnav-btn.is-active { background: var(--c-sky-deep); color: #fff; }
.topnav-btn:focus-visible { outline: 3px solid var(--c-sky-ink); outline-offset: 2px; }

/* --- Burger mobile (<860px) ---
   Tanpa JS tetap tersembunyi — dokumen menggulir alami tak butuh krom. */
.menu-btn { display: none; }
html.js .menu-btn {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.7rem; height: 2.7rem;
  padding: 0 .55rem;
  background: #fff;
  border: 1px solid rgba(92, 130, 184, .3);
  border-radius: 12px;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: border-color .15s ease;
}
html.js .menu-btn:hover { border-color: var(--c-sky-deep); }
.menu-btn:focus-visible { outline: 3px solid var(--c-sky-ink); outline-offset: 2px; }
.menu-btn__bar {
  height: 2px; border-radius: 2px;
  background: var(--c-sky-ink);
  transition: transform .25s ease, opacity .2s ease;
}
.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(1) { transform: translateY(7px) 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(-7px) rotate(-45deg); }
@media (min-width: 860px) { html.js .menu-btn { display: none; } }

/* --- Garis progres gulir (tepi bawah header) --- */
.scroll-progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: linear-gradient(90deg, var(--c-gold), var(--c-sky-400));
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}

/* ==========================================================================
   MENU MOBILE — lembar geser ke bawah berisi baris seksi berlabel,
   di atas latar redup. Sumber baris = seksi DOM (sama dengan pil & dok).
   ========================================================================== */
.menu-backdrop {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 43;
  background: rgba(47, 67, 96, .42);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.menu-backdrop.is-open { opacity: 1; pointer-events: auto; }

.mobile-menu {
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  z-index: 44;
  margin: 0;
  padding: .35rem .9rem calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(253, 248, 239, .98);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(92, 130, 184, .22);
  box-shadow: 0 28px 44px -30px rgba(61, 90, 128, .6);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}
.mobile-menu-row {
  display: flex;
  align-items: center;
  gap: .85rem;
  width: 100%;
  padding: .85rem .5rem;
  border: 0;
  border-bottom: 1px dashed rgba(92, 130, 184, .28);
  background: transparent;
  color: var(--c-ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .98rem;
  text-align: left;
  cursor: pointer;
  border-radius: 10px;
}
.mobile-menu-row:last-child { border-bottom: 0; }
.mobile-menu-row .row-icon { font-size: 1.2rem; flex: 0 0 auto; }
.mobile-menu-row .row-num {
  margin-left: auto;
  font-size: .72rem;
  color: var(--c-ink-soft);
  font-variant-numeric: tabular-nums;
}
.mobile-menu-row:hover { background: var(--c-sky-100); }
.mobile-menu-row.is-active { color: var(--c-sky-deep); background: var(--c-sky-100); }
.mobile-menu-row:focus-visible { outline: 3px solid var(--c-sky-ink); outline-offset: 2px; }
@media (min-width: 860px) { .mobile-menu, .menu-backdrop { display: none; } }

/* ==========================================================================
   DOK NAVIGASI MENGAMBANG — pil kaca ikon per seksi (dibangun JS dari DOM).
   Ikon saja di layar sangat sempit agar tetap muat 390px.
   ========================================================================== */
.dock {
  position: fixed;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: stretch;
  gap: 2px;
  max-width: calc(100vw - 16px);
  padding: 7px 8px;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(92, 130, 184, .22);
  border-radius: 20px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 38px -18px rgba(61, 90, 128, .5);
}
.dock-btn {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 0 1 auto;
  min-width: 40px;
  min-height: 46px;
  padding: 5px 8px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--c-ink-soft);
  cursor: pointer;
  transition: color .2s ease, background .2s ease, transform .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.dock-btn .dock-emoji { font-size: 1.15rem; line-height: 1; }
.dock-btn:hover { color: var(--c-ink); background: var(--c-sky-100); }
.dock-btn:active { transform: scale(.94); }
.dock-btn.is-current { color: var(--c-sky-deep); background: rgba(143, 180, 221, .2); }
.dock-btn.is-current::after {
  content: "";
  position: absolute;
  top: 5px; right: 7px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 8px var(--c-gold);
}
.dock-btn:focus-visible { outline: 3px solid var(--c-sky-ink); outline-offset: 2px; }
.dock__label {
  font-family: var(--font-display);
  font-size: .54rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Label disembunyikan di layar sempit supaya semua ikon tetap muat (≥390px). */
@media (max-width: 479px) { .dock__label { display: none; } }

/* Ponsel lanskap / layar sangat pendek: dok mengambang memakan terlalu banyak
   dari viewport yang sudah sesak — disembunyikan (navigasi tetap lengkap
   lewat burger + gulir alami; pil desktop menyala di ≥860px). */
@media (max-height: 480px) {
  .dock { display: none; }
}

/* Layar pendek (lanskap): tipografi & meta sampul dirapatkan agar kartu
   semuanya sedekat mungkin dengan satu layar. */
@media (max-height: 560px) {
  .invite-card { transform: none; }
  .cover-title { font-size: clamp(1.9rem, 7vw, 2.6rem); }
  .cover-name { font-size: clamp(1.4rem, 5.5vw, 1.9rem); margin: .2em 0 .25em; }
  .cover-meta { gap: .4rem; margin-bottom: .9rem; }
  .cover-meta span { padding: .35rem .7rem; font-size: .78rem; }
  .btn { padding: .75rem 1.3rem; }
}

/* ==========================================================================
   ADD TO CALENDAR
   ========================================================================== */
.cal-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1.5rem;
  text-align: center;
}
.btn-cal {
  background: var(--c-gold-soft);
  color: var(--c-ink);
  border: 2px solid var(--c-gold);
  box-shadow: var(--shadow-soft);
}
.btn-cal:hover { background: #ffe8b3; }
.cal-hint {
  margin: 0;
  font-family: var(--font-hand);
  font-size: 1.05rem;
  color: var(--c-ink-soft);
}

/* ==========================================================================
   TABURAN BINTANG (JS)
   ========================================================================== */
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 50; 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: .55; }
  to { opacity: 1; }
}
@keyframes drift {
  from { transform: translateX(-14px); }
  to { transform: translateX(14px); }
}

/* ==========================================================================
   PENAMPIL FOTO (LIGHTBOX) — semua foto & video bisa diklik & di-zoom
   ========================================================================== */
.zoom-badge {
  position: absolute; z-index: 2;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(61, 90, 128, .18);
  box-shadow: var(--shadow-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem;
  pointer-events: none;
}
.hero-photo .zoom-badge { top: .5rem; right: .5rem; width: 1.9rem; height: 1.9rem; }
.gallery-item .zoom-badge { top: .95rem; right: .95rem; }
.flyer-frame .zoom-badge { top: 1.05rem; right: 1.05rem; }

.lightbox {
  position: fixed; inset: 0; z-index: 60;
}
.lb-scrim {
  position: absolute; inset: 0;
  background: rgba(41, 56, 84, .86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: zoom-out;
}
.lb-stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: max(3.6rem, env(safe-area-inset-top)) 1.2rem max(3.4rem, calc(env(safe-area-inset-bottom) + 2.6rem));
  pointer-events: none;
}
.lb-figure {
  margin: 0;
  /* Lebar pasti — jangan bergantung pada intrinsic sizing gambar: rantai
     flex + margin:auto membuat kontribusi intrinsik <img> dihitung 0 oleh
     Chromium sehingga foto "menghilang". */
  width: min(92vw, 900px);
  max-height: 100%;
  text-align: center;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.lb-frame {
  position: relative;
  margin: auto;
  max-width: 100%;
  overflow: hidden;
  border-radius: 18px;
  line-height: 0;
}
.lb-frame.is-zoomed { cursor: grab; }
.lb-frame.is-panning { cursor: grabbing; }
#lightbox-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 66dvh;
  object-fit: contain;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 24px 60px rgba(15, 25, 45, .5);
  cursor: zoom-in;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transform-origin: center center;
  will-change: transform;
}
.lb-frame.is-zoomed #lightbox-img { box-shadow: none; }
/* Pemutar video di dalam lightbox (embed YouTube/Vimeo atau file langsung) */
.lb-video {
  width: min(92vw, 880px);
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(10, 18, 34, .55);
}
.lb-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.lb-video video { width: 100%; height: 100%; display: block; }
.lb-cap {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: clamp(1.2rem, 4.5vw, 1.5rem);
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  margin-top: .7rem;
  line-height: 1.3;
}
.lb-cap:empty { display: none; }
.lb-btn {
  pointer-events: auto;
  position: absolute; z-index: 2;
  width: 2.9rem; height: 2.9rem; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, .92); color: var(--c-sky-ink);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  box-shadow: 0 8px 22px rgba(15, 25, 45, .35);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease, background .15s ease;
}
.lb-btn:hover { background: #fff; }
.lb-close { top: max(1rem, env(safe-area-inset-top)); right: 1rem; }
.lb-nav { top: 50%; transform: translateY(-50%); }
.lb-nav:hover { transform: translateY(-50%) scale(1.08); }
.lb-prev { left: .8rem; }
.lb-next { right: .8rem; }

/* --- Alat zoom (+ / pembacaan % / −) --- */
.lb-tools {
  pointer-events: auto;
  position: absolute;
  bottom: max(1.05rem, env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%);
  z-index: 3;
  display: flex; align-items: center; gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, .92);
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(15, 25, 45, .35);
}
.lb-tool {
  min-width: 2.2rem; height: 2.2rem;
  border: 0; border-radius: 999px;
  background: transparent; color: var(--c-sky-ink);
  font-size: 1.15rem; font-weight: 700; line-height: 1;
  cursor: pointer;
}
.lb-tool:hover { background: var(--c-sky-100); }
.lb-tool:disabled { opacity: .35; cursor: default; }
.lb-tool-readout {
  font-family: var(--font-display);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}
.lb-tool:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 1px; }
.lb-tools[hidden] { display: none; }

/* --- Tautan "buka media asli" (wajib untuk video & berguna untuk foto) --- */
.lb-original {
  position: absolute;
  bottom: max(1.15rem, env(safe-area-inset-bottom));
  left: 1.1rem;
  z-index: 3;
  display: inline-flex; align-items: center; gap: .4rem;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .84rem;
  text-decoration: none;
  background: rgba(255, 255, 255, .16);
  border-radius: 999px;
  padding: .55rem 1rem;
  transition: background .15s ease;
}
.lb-original:hover { background: rgba(255, 255, 255, .28); }
.lb-original:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
.lb-original[hidden] { display: none; }

.lb-count {
  position: absolute; bottom: max(1.25rem, env(safe-area-inset-bottom));
  right: 1.2rem;
  margin: 0; color: rgba(255, 255, 255, .85);
  font-weight: 700; font-size: .9rem; letter-spacing: .08em;
}
.lb-count:empty { display: none; }
.lb-btn:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }

/* ==========================================================================
   HALAMAN VIDEO (opsional — aktif lewat CONFIG.video)
   ========================================================================== */
.panel-video {
  background:
    radial-gradient(circle at 12% 14%, var(--c-sky-100), transparent 40%),
    radial-gradient(circle at 88% 86%, var(--c-gold-soft), transparent 42%),
    var(--c-cream);
}
.video-section { margin-top: 1.5rem; }
.video-tile {
  position: relative; display: block; width: 100%;
  border: 0; padding: 0; border-radius: var(--radius-md); overflow: hidden;
  background: var(--c-sky-100); cursor: pointer;
  box-shadow: var(--shadow-soft);
  aspect-ratio: 16 / 9;
  transition: transform .18s ease, box-shadow .18s ease;
}
.video-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.video-tile:focus-visible { outline: 3px solid var(--c-sky-ink); outline-offset: 3px; }
.video-thumb { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-thumb-fallback { font-size: 3.6rem; opacity: .75; }
.play-btn {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(3.2rem, 14vw, 4.4rem); height: clamp(3.2rem, 14vw, 4.4rem);
  border-radius: 50%;
  background: rgba(255, 255, 255, .94); color: var(--c-sky-deep);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; padding-left: .3rem;
  box-shadow: 0 10px 26px rgba(61, 90, 128, .4);
  transition: transform .18s ease;
}
.video-tile:hover .play-btn { transform: translate(-50%, -50%) scale(1.08); }
.video-title {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: block;
  padding: 2.4rem 1.1rem .85rem;
  background: linear-gradient(transparent, rgba(41, 56, 84, .8));
  color: #fff; font-family: var(--font-hand); font-weight: 600;
  font-size: clamp(1.15rem, 4.5vw, 1.45rem); text-align: left;
}
.video-hint { font-size: .88rem; color: var(--c-ink-soft); margin-top: .9rem; }
.video-hint code { font-family: inherit; background: var(--c-sky-100); border-radius: 6px; padding: .1em .35em; font-size: .85em; }

/* Mode inline (CONFIG.clickToOpen = false): video diputar di tempat,
   tanpa tile modal — tamu tak pernah menemui tombol yang tidak berfungsi. */
.video-inline {
  width: 100%; aspect-ratio: 16 / 9;
  background: #000; border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.video-inline iframe, .video-inline video { width: 100%; height: 100%; border: 0; display: block; }

/* ==========================================================================
   POSTER / BANNER RESMI (opsional — aktif lewat CONFIG.flyer)
   ========================================================================== */
.flyer-section { margin-top: 1.7rem; }
.flyer-hint { font-size: .88rem; color: var(--c-ink-soft); margin: .15rem 0 0; }
.flyer-frame {
  position: relative;
  margin: 1rem auto 0;
  max-width: 300px;
  background: #fff;
  border-radius: 14px;
  padding: .6rem .6rem .75rem;
  box-shadow: var(--shadow-soft);
  transform: rotate(1.2deg);
  transition: transform .18s ease, box-shadow .18s ease;
  cursor: zoom-in;
}
.flyer-frame:hover { transform: rotate(0deg) translateY(-3px); box-shadow: var(--shadow-card); }
.flyer-frame:focus-visible { outline: 3px solid var(--c-sky-ink); outline-offset: 3px; }
.gallery-item:focus-visible { outline: 3px solid var(--c-sky-ink); outline-offset: 3px; }
.flyer-frame img { width: 100%; border-radius: 9px; aspect-ratio: 3 / 4; object-fit: cover; background: var(--c-sky-100); }
.flyer-frame figcaption {
  font-family: var(--font-hand); font-weight: 600;
  font-size: clamp(1rem, 4vw, 1.15rem);
  text-align: center; color: var(--c-ink-soft);
  padding: .55rem .2rem 0;
}

/* ==========================================================================
   FOOTER & BRAND
   ========================================================================== */
.footer-brand {
  display: block;
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--c-sky-deep);
  margin-top: .1rem;
}

/* Baris brand platform (full-width footer, class "powered-by").
   HTML statis platform — jangan diubah/disunting lewat morph. */
.powered-by {
  width: 100%;
  text-align: center;
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--c-ink-soft);
  padding: .6rem 1rem calc(1rem + env(safe-area-inset-bottom));
  font-family: var(--font-body);
}
.powered-by-brand { font-weight: 700; color: var(--c-sky-deep); }

/* ==========================================================================
   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;
  }
  .floaty, .star-svg, .stars-b, .cloud { animation: none; }
}

/* ==========================================================================
   FALLBACK TANPA JS — halaman tetap terbaca sempurna sebagai dokumen
   bertumpuk: semua seksi tampil berurutan; krom interaktif (header nav,
   burger, dok, progres, penampil foto) disembunyikan karena memang tak
   bisa berfungsi. Elemen yang butuh JS (hitung mundur, CTA lompat seksi)
   ikut disembunyikan agar tidak ada tombol mati.
   ========================================================================== */
.no-js .topnav,
.no-js .menu-btn,
.no-js .menu-backdrop,
.no-js .mobile-menu,
.no-js .dock,
.no-js .scroll-progress,
.no-js .site-header,
.no-js .countdown-wrap,
.no-js .floaty,
.no-js .stars-field,
.no-js [data-goto],
.no-js .zoom-badge,
.no-js .cover-bg-hint { display: none !important; }
/* Tile video butuh JS untuk pemutar → sembunyikan aksinya, sisakan teks. */
.no-js .video-tile,
.no-js .video-hint { display: none; }

/* ==========================================================================
   LAYAR LEBAR
   ========================================================================== */
@media (max-height: 600px) {
  /* Layar sangat pendek: dekorasi pinggiran dikorbankan lebih dulu
     (urutan prioritas lengkap ada di main.js → initCoverFit). */
  .floaty, .cloud-c { display: none; }
  .mascot-row { margin: .1rem 0 .2rem; }
}

/* ==========================================================================
   LAYAR LEBAR
   ========================================================================== */
@media (min-width: 720px) {
  .cover-title { font-size: clamp(3rem, min(7vw, 8.4dvh), 4rem); }
  .cover-meta span { font-size: .92rem; }
  .panel-inner { padding-top: clamp(2rem, 5vw, 3rem); }
}

/* Desktop: galeri & buku tamu boleh lebih lega (presentasi desktop sengaja
   sedikit berbeda — kolom lebih banyak, napas lebih besar). */
@media (min-width: 860px) {
  .panel-gallery .panel-inner,
  .panel-guestbook .panel-inner { width: min(900px, 100%); }
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

/* ==========================================================================
   SCROLLBAR — bergaya sesuai palet (gulir halaman, menu mobile & katup
   darurat sampul)
   ========================================================================== */
html { scrollbar-width: thin; scrollbar-color: var(--c-sky-300) var(--c-sky-100); }
.mobile-menu, .panel-cover { scrollbar-width: thin; scrollbar-color: rgba(92, 130, 184, .5) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--c-sky-100); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--c-sky-300), var(--c-sky-deep));
  border-radius: 999px;
  border: 2px solid var(--c-sky-100);
}
::-webkit-scrollbar-thumb:hover { background: var(--c-sky-deep); }
.mobile-menu::-webkit-scrollbar, .panel-cover::-webkit-scrollbar { width: 6px; }
.mobile-menu::-webkit-scrollbar-thumb, .panel-cover::-webkit-scrollbar-thumb { background: rgba(92, 130, 184, .45); border: 0; }

/* ==========================================================================
   LAYAR SANGAT SEMPIT — kartu undangan tetap muat
   ========================================================================== */
@media (max-width: 380px) {
  .invite-card { transform: none; }
  .invite-corner { display: none; }
}

/* ==========================================================================
   CETAK (PRINT)
   ========================================================================== */
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .site-header, .dock, .mobile-menu, .menu-backdrop, .scroll-progress,
  .confetti-layer, .cover-actions, [data-goto], .floaty, .sky-bg,
  .stars-field, .rsvp-wrap, .cover-photo-bg, .btn, .lightbox,
  .zoom-badge, .cover-bg-hint, .play-btn,
  .video-section, .video-inline, .lb-btn, .lb-tools, .lb-original,
  .cal-wrap { display: none !important; }

  /* Elemen yang disembunyikan fit JS sampul muncul kembali saat cetak. */
  .fit-hidden { display: revert !important; }

  .scene {
    min-height: 0;
    height: auto;
    max-height: none;
    overflow: visible;
    background: #fff !important;
    color: #1a1a1a;
    page-break-inside: avoid;
  }
  .panel-hidden { display: none !important; }

  .panel-inner { width: 100%; max-width: none; margin: 0 0 1rem; box-shadow: none; }
  .panel-inner-center { min-height: 0; margin: 0 0 1rem; }

  .cover-body { min-height: 0; padding: 1.5rem 1rem; }
  .invite-card { transform: none; box-shadow: none; }
  .cover-title, .closing-note { color: #3d5a80; }
  .info-card, .countdown-wrap, .gift-note, .about-baby { box-shadow: none; }
  .field input, .field select, .field textarea { border: 1px solid #bbb; }
  .app-footer { color: #666; }
}

/* ── Guestbook (platform-injected form + message list) ─────────────── */
.guestbook-form {
  background: var(--c-sky-100);
  border: 1px dashed rgba(92, 130, 184, .3);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 1.3rem;
}

#guestbookForm .form-group { margin-bottom: 1.1rem; }

#guestbookForm .form-group label {
  display: block;
  font-weight: 700;
  font-size: .9rem;
  color: var(--c-ink);
  margin-bottom: .4rem;
}

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

#guestbookForm .error {
  display: block;
  margin-top: .3rem;
  font-size: .82rem;
  font-weight: 700;
  color: #d96b3d; /* matches template .error-text */
}

/* !important beats Bootstrap .bg-kundangan / .text-white / .px-3 */
#guestbookForm button[type="submit"] {
  padding: .9rem 1.6rem !important;
  border: 0;
  border-radius: 999px;
  background: var(--c-sky-deep) !important;
  color: #fff !important;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  box-shadow: 0 8px 20px rgba(92, 130, 184, .4);
}
#guestbookForm button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(92, 130, 184, .5);
}

.guestbook-chapta { margin: .2rem 0 .8rem; }

.loading-guestbook {
  text-align: center;
  margin-top: 1rem;
  font-weight: 700;
  font-size: .92rem;
  color: var(--c-sky-deep);
}

#comments-container.guestbook-wrap {
  border-top: 1px solid var(--c-sky-200) !important; /* overrides inline border-top */
  padding-top: 1rem;
}

.guestbook-entry {
  background: var(--c-sky-100);
  border: 1px dashed rgba(92, 130, 184, .3);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
  margin-bottom: .9rem;
}
.guestbook-entry:last-child { margin-bottom: 0; }

.guestbook-entry h5 {
  margin: 0 0 .3rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--c-sky-ink);
}

.guestbook-entry p {
  margin: 0 0 .45rem;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--c-ink);
}

.guestbook-entry small {
  font-size: .78rem;
  color: var(--c-ink-soft);
}

.more-guestbook-wrap { text-align: center; margin-top: 1.1rem; }

#load-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--c-gold);
  background: var(--c-gold-soft);
  color: var(--c-ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9rem;
  line-height: 1;
  padding: .65rem 1.3rem;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease, background .15s ease;
}
#load-more:hover { transform: translateY(-2px); background: #ffe8b3; }