:root{
  --paper:#FAF7EF; --ink:#1E1B16; --stone:#6F675A; --rule:#D8D0BF; --burg:#722F37; --card:#FFFFFF;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif; --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:300;line-height:1.65;-webkit-font-smoothing:antialiased}
body.terkunci{overflow:hidden}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--burg);outline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0}
.label-atas{letter-spacing:.4em;text-transform:uppercase;font-size:.7em;color:var(--stone);margin:0 0 1.43em}
.garis{border:none;border-top:1px solid var(--ink);width:64px;margin:1.4em auto}

/* ---------- Preloader arsip (retrofit) ---------- */
/* Hanya tampil bila JS aktif (html.js-aktif disetel skrip <head>).
   Tanpa JS / JS gagal: display:none permanen, konten tidak terhalang.
   Overlay fixed penuh: tidak menggeser layout di bawahnya. */
#preloader{display:none}
html.js-aktif #preloader{position:fixed;inset:0;z-index:90;background:var(--paper);display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
html.pre-selesai #preloader{opacity:0;pointer-events:none;transition:opacity .35s ease}
#preloader::after{content:"";position:absolute;inset:14px;border:1px solid var(--ink);outline:1px solid var(--rule);outline-offset:5px;pointer-events:none}
.pre-dalam{position:relative;z-index:2;padding:2rem 1.5rem;max-width:24rem}
.pre-label{letter-spacing:.34em;text-transform:uppercase;font-size:.66rem;color:var(--stone);margin:0 0 1.1rem}
.pre-monogram{margin-bottom:.7rem}
.pre-judul{font-family:var(--serif);font-size:1.35rem;color:var(--ink);margin:0 0 1.4rem;letter-spacing:.04em}
.pre-jalur{width:180px;height:2px;background:var(--rule);margin:0 auto}
#preIsi{display:block;height:100%;width:0;background:var(--burg);transition:width .3s ease}
.pre-status{font-size:.8rem;color:var(--stone);margin:1rem 0 0;line-height:1.6}
#preHitung{letter-spacing:.1em}

/* ---------- Sampul / lipatan ---------- */
/* Standar sampul 1 layar penuh (pemilik 1 Nov 2026): tepat 100dvh, tanpa scroll. */
#sampul{position:fixed;inset:0;z-index:60;background:var(--paper);display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;height:100dvh;max-height:100dvh}
#sampul .panel-lipat{position:absolute;top:0;bottom:0;width:51%;background:var(--paper);z-index:2;transition:transform .6s cubic-bezier(.7,0,.3,1)}
#sampul .panel-lipat.kiri{left:0}
#sampul .panel-lipat.kanan{right:0}
#sampul .garis-lipat{position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--ink);opacity:.25;z-index:3}
#sampul.terbuka .panel-lipat.kiri{transform:translateX(-104%)}
#sampul.terbuka .panel-lipat.kanan{transform:translateX(104%)}
#sampul.memudar{opacity:0;transition:opacity .3s ease;pointer-events:none}
#sampul::after{content:"";position:absolute;inset:14px;border:1px solid var(--ink);outline:1px solid var(--rule);outline-offset:5px;pointer-events:none;z-index:5}
/* Ukuran internal sampul dalam em terhadap font-size .isi-sampul agar auto-fit
   pasSatuLayarSampul() dapat menyesuaikan komposisi secara proporsional. */
.isi-sampul{position:relative;z-index:4;padding:2em 1.5em;max-width:26em;background:var(--paper);font-size:16px}
.tanda-monogram{display:flex;align-items:center;justify-content:center;gap:.47em;font-family:var(--serif);font-size:1.9em;color:var(--burg);margin-bottom:.58em}
.tanda-monogram i{display:block;width:44px;height:1px;background:var(--ink)}
.nama-sampul{font-size:2.3em;line-height:1.18}
.nama-sampul .dan{color:var(--burg);font-style:italic;font-size:.65em}
.tanggal-sampul{letter-spacing:.16em;color:var(--stone);margin:.71em 0 0;text-transform:uppercase;font-size:.85em}
.hormat{color:var(--stone);font-size:.88em;margin:0}
.nama-tamu{font-family:var(--serif);font-size:1.4em;margin:.25em 0 1.07em;overflow-wrap:anywhere}
.tombol-buka{background:var(--ink);color:var(--paper);border:1px solid var(--ink);padding:1em 2.47em;font-family:var(--sans);letter-spacing:.14em;text-transform:uppercase;font-size:.85em;cursor:pointer;min-height:50px}
.tombol-buka:hover{background:var(--burg);border-color:var(--burg)}
.tombol-buka:disabled{opacity:.55;cursor:wait}
.petunjuk-lewati{font-size:.78em;color:var(--stone);margin-top:.9em}

/* ---------- Folio ---------- */
main{max-width:30rem;margin:0 auto;padding:0 1.1rem 3rem}
@media (min-width:900px){ main{max-width:44rem} }
.folio{padding:2.6rem 0 2.2rem;border-bottom:1px solid var(--rule)}
.kepala-folio{display:flex;align-items:baseline;gap:.9rem;border-bottom:1px solid var(--ink);padding-bottom:.45rem;margin-bottom:1.5rem}
.nomor-folio{font-family:var(--serif);font-size:1.3rem;color:var(--burg);min-width:2.2rem}
.kepala-lari{letter-spacing:.32em;text-transform:uppercase;font-size:.68rem;color:var(--stone)}
.judul-folio{font-size:2rem;margin-bottom:1rem}
.salam,.pembuka{color:#3d382f}
.salam::first-letter{font-family:var(--serif);font-size:2.6em;float:left;line-height:.82;padding:.06em .12em 0 0;color:var(--burg)}
.plate-besar{margin:0 0 1.6rem}
.plate-besar img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 62%;border:1px solid var(--rule)}
.plate-besar figcaption{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--stone);text-align:right;padding-top:.45rem}
.baris-mempelai.balik{flex-direction:row-reverse;text-align:right}
.kartu-acara{border-left:2px solid var(--burg);padding-left:1rem;margin-bottom:1.6rem}
.pasangan-ringkas{font-family:var(--serif);font-size:1.15rem;border-top:1px solid var(--rule);padding-top:1rem;margin-top:1.6rem}
.daftar-isi{list-style:none;margin:1.2rem 0 0;padding:0;counter-reset:isi}
.daftar-isi li{border-bottom:1px solid var(--rule)}
.daftar-isi a{display:flex;justify-content:space-between;align-items:baseline;color:var(--ink);text-decoration:none;padding:.7rem .1rem;min-height:48px}
.daftar-isi a:hover{color:var(--burg)}
.daftar-isi .no{font-family:var(--serif);color:var(--burg)}
.daftar-isi .nm{font-family:var(--serif);font-size:1.2rem}

/* ---------- Mempelai ---------- */
.baris-mempelai{display:flex;gap:1.1rem;align-items:center;padding:1.1rem 0;border-bottom:1px solid var(--rule)}
.baris-mempelai:last-child{border-bottom:none}
.baris-mempelai img{width:7.6rem;height:9.5rem;object-fit:cover;border:1px solid var(--rule)}
.baris-mempelai h3{font-size:1.55rem}
.orangtua{color:var(--stone);font-size:.9rem;margin:.25rem 0}

/* ---------- Acara: tabel bergaris ---------- */
.tabel-acara{width:100%;border-collapse:collapse;margin:0 0 1.4rem;background:var(--card);border:1px solid var(--rule)}
.tabel-acara caption{font-family:var(--serif);font-size:1.5rem;text-align:left;padding:.9rem 1rem .2rem;color:var(--burg)}
.tabel-acara th,.tabel-acara td{border-top:1px solid var(--rule);padding:.6rem 1rem;text-align:left;font-size:.95rem;vertical-align:top}
.tabel-acara th{width:34%;color:var(--stone);font-weight:400;letter-spacing:.06em}
.tombol-aksi{display:inline-block;margin:.2rem 0 1rem;background:none;border:1px solid var(--ink);color:var(--ink);padding:.55rem 1.15rem;min-height:44px;font-family:var(--sans);font-size:.85rem;letter-spacing:.08em;cursor:pointer;text-decoration:none}
.tombol-aksi:hover{border-color:var(--burg);color:var(--burg)}
.baris-hitung{border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);padding:.8rem 0;font-size:.95rem}
.baris-hitung strong{font-family:var(--serif);font-size:1.15rem}
#statusHitung{color:var(--burg)}

/* ---------- Galeri: lembar kontak ---------- */
.lembar-kontak{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem}
.lembar-kontak figure{margin:0}
.lembar-kontak button{padding:0;border:1px solid var(--rule);background:var(--card);cursor:pointer;width:100%}
.lembar-kontak img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.lembar-kontak figcaption{font-size:.68rem;color:var(--stone);text-align:center;padding:.25rem 0;letter-spacing:.1em}
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(24,20,16,.94);display:flex;align-items:center;justify-content:center}
.lightbox[hidden]{display:none}
.lightbox img{max-width:92vw;max-height:80vh;border:6px solid var(--paper)}
.lb-tutup{position:absolute;top:calc(.8rem + env(safe-area-inset-top));right:1rem;background:none;border:1px solid var(--paper);color:var(--paper);border-radius:50%;width:44px;height:44px;font-size:1.05rem;cursor:pointer}
.lb-nav{background:none;border:none;color:var(--paper);font-size:2.6rem;cursor:pointer;padding:.6rem;min-width:48px;min-height:48px}
.lb-keterangan{position:absolute;bottom:calc(1rem + env(safe-area-inset-bottom));left:0;right:0;text-align:center;color:var(--paper);font-size:.85rem}

/* ---------- Kisah: bab bernomor ---------- */
.bab{padding:1.1rem 0;border-bottom:1px solid var(--rule)}
.bab:last-child{border-bottom:none}
.bab .no-bab{font-family:var(--serif);color:var(--burg);font-size:1rem;letter-spacing:.1em}
.bab h3{font-size:1.45rem;margin:.2rem 0}
.bab p{margin:.2rem 0;color:#3d382f}

/* ---------- RSVP & kolom surat ---------- */
.label-demo{background:#f3ead9;border:1px dashed var(--burg);color:var(--burg);padding:.6rem .8rem;font-size:.82rem}
form{margin-top:1.2rem}
form label{display:block;margin-bottom:.95rem;font-size:.9rem;color:var(--stone)}
form input,form select,form textarea{width:100%;margin-top:.35rem;background:var(--card);border:1px solid var(--stone);border-radius:0;color:var(--ink);padding:.7rem .8rem;font-family:var(--sans);font-size:1rem;min-height:48px}
form textarea{min-height:auto}
.tombol-kirim{width:100%;background:var(--burg);color:#fff;border:1px solid var(--burg);padding:.85rem;font-family:var(--sans);letter-spacing:.12em;text-transform:uppercase;font-size:.88rem;cursor:pointer;min-height:50px}
.tombol-kirim:disabled{opacity:.55;cursor:wait}
.pesan-form{min-height:1.2em;color:var(--burg);font-size:.9rem}
.kolom-surat{margin-top:1.6rem}
.surat{border-left:2px solid var(--burg);padding:.4rem 0 .4rem 1rem;margin-bottom:1.1rem}
.surat strong{font-family:var(--serif);font-size:1.1rem}
.surat .meta{font-size:.74rem;color:var(--stone);letter-spacing:.08em;text-transform:uppercase}
.surat p{margin:.25rem 0 0;color:#3d382f;font-size:.93rem;overflow-wrap:anywhere}
.ucapan-kosong{color:var(--stone);font-size:.9rem}

/* ---------- Penutup ---------- */
.penutup{text-align:center;border-bottom:none}
.ttd{font-family:var(--serif);font-size:1.8rem;color:var(--burg)}
.catatan-demo{font-size:.75rem;color:var(--stone)}
.kembali-isi{color:var(--burg);text-decoration:none;font-size:.88rem;letter-spacing:.06em}

/* ---------- Ungkap folio (gerak khas template, lanjutan lipatan sampul) ----------
   Elemen folio terungkap seperti lembar kertas yang dibuka lipatannya:
   rotateX dari tepi atas + opacity, hanya transform/opacity (jalur compositor).
   Hanya aktif bila JS jalan (html.js-aktif); tanpa JS semua konten tampil penuh.
   Kapan menembak diatur mesin ungkap–alir di aplikasi.js (garis panggung 65%). */
html.js-aktif .ungkap{opacity:0;transform:perspective(700px) rotateX(10deg) translateY(14px);transform-origin:top center}
html.js-aktif .ungkap.terlihat{opacity:1;transform:perspective(700px) rotateX(0deg) translateY(0);transition:transform var(--durasi-ungkap,.85s) cubic-bezier(.22,.61,.21,1),opacity var(--durasi-ungkap,.85s) ease}

/* ---------- Bilah kontrol musik & jelajah otomatis ---------- */
html.jelajah-aktif{scroll-behavior:auto}
body.dibuka{padding-bottom:84px}
#bilahKontrol{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom));z-index:70;display:flex;gap:8px;padding:8px;background:rgba(30,27,22,.96);border:1px solid var(--burg);box-shadow:0 6px 24px rgba(30,27,22,.35)}
#bilahKontrol[hidden]{display:none}
#bilahKontrol button{min-height:44px;padding:0 16px;background:transparent;color:var(--paper);border:1px solid var(--rule);font-family:var(--sans);font-size:.92rem;letter-spacing:.04em;cursor:pointer;white-space:nowrap}
#bilahKontrol button:active{background:rgba(216,208,191,.22)}
#bilahKontrol button[disabled]{opacity:.55;cursor:default}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important}
  html.js-aktif .ungkap{opacity:1;transform:none}
}