:root{
  --sage:#7D8C6F; --sage-pekat:#44512F; --hutan:#2E3A24; --krem:#FAF5EA; --krem2:#EFE6D2;
  --tembaga:#B87333; --terakota:#C96F4A; --tinta:#26301F; --hitam:#0C0F0A;
  --display:'Cormorant Garamond',Georgia,serif; --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Selama jelajah alir aktif, scrollTo per-frame mesin jelajah harus seketika —
   scroll-behavior:smooth membuat setiap scrollTo dianimasikan sehingga posisi
   aktual mengejar posisi perintah dengan jeda besar (terukur di QA upgrade:
   penyeberangan section terlambat 27–54% dari rencana dan posisi akhir putaran
   terbaca ratusan piksel di belakang). Jangkar menu di luar mode jelajah tetap
   halus seperti semula. */
html.jelajah-aktif{scroll-behavior:auto}
body{margin:0;background:var(--krem);color:var(--tinta);font-family:var(--sans);font-weight:300;line-height:1.7;-webkit-font-smoothing:antialiased}
body.terkunci{overflow:hidden}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--tembaga);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;margin:0}
.label-atas{letter-spacing:.34em;text-transform:uppercase;font-size:.7rem;color:var(--tembaga);margin:0 0 .6rem}
main{max-width:30rem;margin:0 auto;background:var(--krem)}
@media (min-width:900px){ main{max-width:34rem} }
.bagian{padding:3rem 1.5rem 2.6rem;border-bottom:1px solid var(--krem2)}
.kepala-bagian{letter-spacing:.34em;text-transform:uppercase;font-size:.68rem;color:var(--tembaga);margin:0 0 .5rem}
.judul-bagian{font-size:2rem;color:var(--hutan);margin-bottom:1.1rem}
.isi{color:#46523A}

/* ---------- Sampul: letterbox ---------- */
/* Standar sampul 1 layar penuh (pemilik, 1 Nov 2026): #sampul tepat satu layar,
   tanpa scroll sama sekali; komposisi disesuaikan pasSatuLayarSampul() di aplikasi.js. */
#sampul{background:var(--hitam);color:var(--krem);height:100dvh;max-height:100dvh;overflow:hidden}
#sampul.lapisan{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column}
.palang{background:var(--hitam)}
.palang-atas{height:9svh;min-height:52px}
#sampul.lapisan .palang-atas{flex:0 0 auto}
.foto-sampul{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:18% 35%}
#sampul.lapisan .foto-sampul{flex:1 1 auto;min-height:0;aspect-ratio:auto}
.palang-bawah{padding:1.2rem 1.5rem calc(1.4rem + env(safe-area-inset-bottom))}
.blok-sampul{text-align:left;max-width:30rem}
.nama-sampul{font-size:1.9rem;line-height:1.25;font-weight:600}
.nama-sampul .dan{font-style:italic;font-weight:400;color:var(--tembaga)}
.tanggal-sampul{color:var(--krem2);letter-spacing:.08em;margin:.55rem 0 1.1rem}
.hormat{margin:0;font-size:.86rem;color:var(--krem2)}
.nama-tamu{margin:.2rem 0 1.2rem;font-family:var(--display);font-size:1.3rem;overflow-wrap:anywhere}
.tombol-buka{background:var(--tembaga);color:#fff;border:1px solid var(--tembaga);padding:.85rem 1.9rem;font-family:var(--sans);font-size:.95rem;letter-spacing:.1em;cursor:pointer;min-height:50px}
.tombol-buka:hover{background:var(--terakota)}
.tombol-buka:disabled{opacity:.6;cursor:wait}
/* Palang menyusut SEKALI saat dibuka */
#sampul .palang{transition:transform .7s cubic-bezier(.65,0,.35,1)}
#sampul.menyusut{opacity:0;transition:opacity .45s ease .3s}
#sampul.menyusut .palang-atas{transform:translateY(-101%)}
#sampul.menyusut .palang-bawah{transform:translateY(101%)}

/* ---------- Menu atas ---------- */
.tombol-menu{position:fixed;top:calc(.8rem + env(safe-area-inset-top));right:1rem;z-index:40;background:rgba(12,15,10,.72);color:var(--krem);border:1px solid var(--tembaga);padding:.6rem 1.1rem;min-height:44px;font-family:var(--sans);font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(4px)}
.menu-lapisan{position:fixed;inset:0;z-index:70;background:rgba(24,30,18,.97);color:var(--krem);padding:4.5rem 2rem 2rem;overflow:auto}
.menu-lapisan[hidden]{display:none}
.menu-judul{letter-spacing:.3em;text-transform:uppercase;font-size:.72rem;color:var(--tembaga);margin:0 0 1.4rem}
.menu-lapisan nav{display:flex;flex-direction:column;gap:.2rem}
.menu-lapisan nav a{color:var(--krem);text-decoration:none;font-family:var(--display);font-size:1.7rem;padding:.55rem 0;border-bottom:1px solid rgba(250,245,234,.14);min-height:48px}
.menu-lapisan nav a:hover{color:var(--tembaga)}
.menu-tutup{position:absolute;top:calc(.8rem + env(safe-area-inset-top));right:1rem;background:none;border:1px solid var(--krem);color:var(--krem);border-radius:50%;width:44px;height:44px;font-size:1.05rem;cursor:pointer}

/* ---------- Foto lebar sinematik 16/10 ---------- */
.foto-lebar-sinema{width:100%;aspect-ratio:16/10;height:auto;object-fit:cover;object-position:center 32%}
#pahlawan,#penutup{background:var(--hutan);color:var(--krem)}
.blok-pahlawan,.blok-penutup{padding:1.7rem 1.5rem 2.1rem;max-width:30rem}
.nama-besar{font-size:2rem;line-height:1.3;font-weight:600}
.nama-besar .dan{font-style:italic;font-weight:400;color:var(--tembaga)}
.tanggal-besar{color:var(--krem2);letter-spacing:.1em;margin-top:.55rem}
.ttd{font-family:var(--display);font-style:italic;font-size:1.9rem;color:var(--tembaga)}
.kredit-musik,.catatan-contoh{font-size:.74rem;color:var(--krem2);opacity:.85}

/* ---------- Mempelai ---------- */
.foto-mempelai{width:100%;aspect-ratio:16/10;height:auto;object-fit:cover;object-position:center 28%;margin:1.2rem 0 .8rem}
.nama-mempelai{font-size:1.6rem;color:var(--hutan)}
.orangtua{color:#71805F;font-size:.92rem;margin:.2rem 0 1rem}

/* ---------- Acara ---------- */
.kartu-acara{border-top:3px solid var(--tembaga);background:#FFFDF6;padding:1.15rem 1.1rem .6rem;margin-bottom:1.4rem}
.kartu-acara h4{font-size:1.55rem;color:var(--hutan)}
.kartu-acara p{margin:.22rem 0;color:#46523A}
.kartu-acara .alamat{color:#71805F;font-size:.92rem}
.tombol-aksi{display:inline-block;margin:.6rem .5rem .4rem 0;background:none;border:1px solid var(--sage-pekat);color:var(--hutan);padding:.6rem 1.15rem;min-height:46px;font-family:var(--sans);font-size:.9rem;cursor:pointer;text-decoration:none}
.tombol-aksi:hover{border-color:var(--tembaga);color:var(--tembaga)}

/* ---------- Hitung mundur: pita hijau pekat ---------- */
.bagian-hitung{background:var(--hutan);color:var(--krem);padding:2.6rem 1.5rem}
.bagian-hitung .judul-bagian{color:var(--krem)}
.angka-hitung{display:flex;gap:.55rem;margin-top:.4rem}
.angka-hitung>div{flex:1;border:1px solid var(--sage);text-align:center;padding:.7rem .1rem}
.angka-hitung strong{display:block;font-family:var(--display);font-weight:600;font-size:1.8rem;color:var(--krem)}
.angka-hitung span{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--krem2)}
.status-hitung{color:var(--terakota);min-height:1.2em}

/* ---------- Kisah: adegan ---------- */
.bab-kisah{padding:1rem 0;border-bottom:1px dashed var(--sage)}
.bab-kisah:last-child{border-bottom:none}
.bab-kisah .adegan{letter-spacing:.26em;text-transform:uppercase;font-size:.66rem;color:var(--terakota);margin:0}
.bab-kisah h4{font-size:1.35rem;color:var(--hutan)}
.bab-kisah p{margin:.3rem 0;color:#46523A}

/* ---------- Galeri: filmstrip scroll-snap ---------- */
.petunjuk-geser{font-size:.85rem;color:#71805F;margin:-.4rem 0 1rem}
.filmstrip{display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.6rem;-webkit-overflow-scrolling:touch}
.bingkai{flex:0 0 84%;scroll-snap-align:center;margin:0}
.bingkai button{padding:0;border:none;background:none;cursor:pointer;width:100%}
.bingkai img{width:100%;aspect-ratio:16/10;height:auto;object-fit:cover}
.bingkai figcaption{padding-top:.5rem;color:#71805F;font-size:.9rem;text-align:left}
.penghitung-galeri{font-family:var(--display);font-size:1.15rem;color:var(--tembaga);text-align:center;margin:.4rem 0 0;letter-spacing:.12em}
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(10,13,8,.96);display:flex;align-items:center;justify-content:center}
.lightbox[hidden]{display:none}
.lightbox img{max-width:92vw;max-height:80vh}
.lb-tutup{position:absolute;top:calc(.8rem + env(safe-area-inset-top));right:1rem;background:none;border:1px solid var(--krem);color:var(--krem);border-radius:50%;width:44px;height:44px;font-size:1.05rem;cursor:pointer}
/* Retrofit inspeksi visual 30 Okt 2026: panah semula flex sejajar foto (maks 92vw) —
   total lebar melampaui viewport HP sehingga kedua panah terdorong ±2/3 keluar layar
   (terukur: ‹ di x=-32, › berakhir di x=422 pada lebar 390). Kini panah absolut di tepi
   layar di atas foto, dengan keping gelap tembus pandang agar terbaca di foto terang. */
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;background:rgba(12,15,10,.55);border:1px solid rgba(250,245,234,.35);border-radius:50%;color:var(--krem);font-size:2rem;line-height:1;cursor:pointer;width:48px;height:48px;min-width:48px;min-height:48px;display:flex;align-items:center;justify-content:center;padding:0}
#lbSebelum{left:.6rem}
#lbSesudah{right:.6rem}
.lb-keterangan{position:absolute;bottom:calc(1rem + env(safe-area-inset-bottom));left:0;right:0;text-align:center;color:var(--krem);font-size:.88rem;padding:0 1rem}

/* ---------- Amplop ---------- */
.kartu-amplop{border:1px solid var(--sage);background:#FFFDF6;padding:1.1rem 1.2rem;margin:0 0 1rem}
.kartu-amplop .bank{letter-spacing:.2em;text-transform:uppercase;font-size:.72rem;color:var(--tembaga)}
.kartu-amplop .nomor{font-family:var(--display);font-weight:600;font-size:1.55rem;letter-spacing:.05em;color:var(--hutan);margin:.3rem 0 .1rem}
.kartu-amplop .an{color:#71805F;font-size:.9rem;margin:0 0 .7rem}
.label-contoh{font-size:.78rem;color:#8A7A52;font-style:italic}

/* ---------- RSVP ---------- */
.label-demo{background:#F6E8D8;border:1px dashed var(--terakota);color:#8A4A26;padding:.6rem .8rem;font-size:.82rem}
form{margin-top:1.2rem}
form label{display:block;margin-bottom:.95rem;font-size:.9rem;color:#71805F}
form input,form select,form textarea{width:100%;margin-top:.35rem;background:#FFFDF6;border:1px solid var(--sage);color:var(--tinta);padding:.7rem .8rem;font-family:var(--sans);font-size:1rem;min-height:48px}
form textarea{min-height:auto}
.tombol-kirim{width:100%;background:var(--sage-pekat);color:var(--krem);border:1px solid var(--sage-pekat);padding:.85rem;font-family:var(--sans);font-size:.98rem;letter-spacing:.08em;cursor:pointer;min-height:50px}
.tombol-kirim:disabled{opacity:.55;cursor:wait}
.pesan-form{min-height:1.2em;color:#8A4A26;font-size:.9rem}
.kartu-ucapan{border-left:2px solid var(--tembaga);padding:.3rem 0 .3rem 1rem;margin-bottom:1rem}
.kartu-ucapan strong{font-family:var(--display);font-weight:500;font-size:1.08rem;color:var(--hutan)}
.kartu-ucapan .meta{font-size:.74rem;color:#8A7A52;letter-spacing:.06em}
.kartu-ucapan p{margin:.25rem 0 0;color:#46523A;font-size:.93rem;overflow-wrap:anywhere}
.ucapan-kosong{color:#71805F;font-size:.9rem}

/* ---------- Musik: tombol teks, kanan bawah ---------- */
.tombol-musik{position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));z-index:40;background:var(--hutan);color:var(--krem);border:1px solid var(--tembaga);padding:.65rem 1.1rem;min-height:44px;font-family:var(--sans);font-size:.85rem;letter-spacing:.06em;cursor:pointer}
/* ---------- Jelajah alir: tombol teks, kiri bawah (terpisah dari tombol musik) ---------- */
.tombol-jelajah{position:fixed;left:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));z-index:40;background:var(--hutan);color:var(--krem);border:1px solid var(--tembaga);padding:.65rem 1.1rem;min-height:44px;font-family:var(--sans);font-size:.85rem;letter-spacing:.06em;cursor:pointer}
.tombol-jelajah[hidden]{display:none}
.tombol-jelajah:disabled{opacity:.65;cursor:default}

/* ---------- Gerak khas sinematik: "bingkai masuk gerbang proyektor" ----------
   Upgrade standar penuh (2 Nov 2026) mengganti mekanisme lama (fade + naik 12px)
   yang mekanismenya IDENTIK dengan Editorial Kontemporer (temuan terbuka lama).
   Kosakata baru, khas sinema dan hanya memakai transform/opacity (Bagian E.1):
   - teks/blok: bingkai film bergeser MASUK dari sisi gerbang (translateX) sambil
     menguat — seperti frame yang meluncur ke posisi putar, bukan naik vertikal;
   - foto (img.ungkap & filmstrip): bidikan MENETAP dari sedikit membesar
     (scale 1.06 -> 1) — "camera settle" di akhir gerakan dolly pendek.
   Pemicu BUKAN lagi tepi layar: mesin ungkap Bagian G di aplikasi.js menembak
   pada garis panggung ±65% tinggi viewport dengan urutan pita 60–110 ms. */
.js-ungkap .ungkap{opacity:0;transform:translateX(-24px);transition:opacity .8s cubic-bezier(.22,.68,.26,1),transform .8s cubic-bezier(.22,.68,.26,1);transition-delay:var(--tunda,0ms)}
.js-ungkap img.ungkap,.js-ungkap .filmstrip.ungkap{transform:scale(1.06)}
.js-ungkap .ungkap.tampak{opacity:1;transform:translateX(0)}
.js-ungkap img.ungkap.tampak,.js-ungkap .filmstrip.ungkap.tampak{transform:scale(1)}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js-ungkap .ungkap{opacity:1 !important;transform:none !important;transition:none !important}
  #sampul .palang,#sampul.menyusut{transition:none}
}

/* ---------- Pramuat sinematik (retrofit Standar Desain & Pengalaman, 30 Okt 2026) ----------
   Layar hitam letterbox dengan jalur film bergerigi. Tanpa kelas 'pra' pada <html>
   (ditambahkan skrip sebaris hanya bila JS aktif) elemen ini display:none — halaman
   tetap dapat dipakai tanpa JavaScript. Lapisan fixed: tidak menggeser layout.
   Animasi praGugur adalah pengaman murni-CSS: bila pramuat.js gagal dimuat/berjalan,
   layar tetap gugur sendiri pada 9 detik dan tidak menahan tamu. */
#pramuat{display:none}
html.pra{overflow:hidden}
html.pra #pramuat{display:flex;position:fixed;inset:0;z-index:100;background:var(--hitam);color:var(--krem);
  flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:2rem 1.5rem;opacity:1;transition:opacity .45s ease;animation:praGugur .6s ease 9s forwards}
#pramuat.selesai{opacity:0;pointer-events:none}
@keyframes praGugur{to{opacity:0;visibility:hidden}}
.pra-label{letter-spacing:.34em;text-transform:uppercase;font-size:.7rem;color:var(--tembaga);margin:0 0 .6rem}
.pra-nama{font-family:var(--display);font-weight:600;font-size:2.1rem;line-height:1.25;margin:0}
.pra-nama .dan{font-style:italic;font-weight:400;color:var(--tembaga)}
.pra-jalur{position:relative;width:min(270px,72vw);height:30px;margin-top:1.2rem;
  border-top:1px solid rgba(250,245,234,.35);border-bottom:1px solid rgba(250,245,234,.35);
  background-image:repeating-linear-gradient(90deg, rgba(250,245,234,.45) 0 6px, transparent 6px 18px),
                   repeating-linear-gradient(90deg, rgba(250,245,234,.45) 0 6px, transparent 6px 18px);
  background-size:100% 5px,100% 5px;background-position:top left,bottom left;background-repeat:repeat-x}
.pra-isi{position:absolute;left:0;top:50%;height:4px;transform:translateY(-50%);width:0;background:var(--tembaga);transition:width .3s ease}
.pra-status{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--krem2);margin:.8rem 0 0;min-height:1.2em}
@media (prefers-reduced-motion: reduce){
  html.pra #pramuat{transition:none}
  .pra-isi{transition:none}
}