:root{
  --hitam:#111111; --putih:#FFFFFF; --abu:#8A8A8A; --abu-muda:#E7E7E7; --kobalt:#2244CC;
  --serif:'Marcellus',Georgia,serif; --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--putih);color:var(--hitam);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:3px solid var(--kobalt);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;margin:0}
section{scroll-margin-top:64px}

/* ---------- Sampul: terbelah — tipe di atas putih, foto di bawah ----------
   Standar sampul 1 layar (pemilik, 1 Nov 2026): tepat satu layar penuh,
   tanpa scroll — height:100dvh, max-height:100dvh, overflow:hidden.
   Foto adalah elemen fleksibel (flex:1, min-height:0) sehingga komposisi
   menyusut otomatis; pasSatuLayarSampul() di aplikasi.js adalah jaring
   pengaman yang mengecilkan tipe raksasa bila blok atas tetap melebihi
   layar pendek (mis. 375x667). */
#sampul{background:var(--putih);display:flex;flex-direction:column;height:100dvh;max-height:100dvh;overflow:hidden}
#sampul.lapisan{position:fixed;inset:0;z-index:60}
#sampul.memudar{opacity:0;transition:opacity .6s ease;pointer-events:none}
.sampul-atas{padding:1.6rem 1.25rem 1.4rem}
.label-edisi{letter-spacing:.3em;text-transform:uppercase;font-size:.66rem;font-weight:500;color:var(--kobalt);margin:0 0 1rem}
.nama-raksasa{font-size:clamp(3.6rem,19vw,6.2rem);line-height:.94;letter-spacing:.005em;text-transform:uppercase}
.nama-raksasa span{display:block}
.nama-raksasa .dan-besar{display:inline-block;font-size:.42em;color:var(--kobalt);line-height:1;margin:.1em 0}
.tanggal-sampul{font-size:1rem;letter-spacing:.14em;text-transform:uppercase;margin:.9rem 0 0;color:var(--hitam)}
.blok-tamu{margin-top:1.5rem;border-top:3px solid var(--hitam);padding-top:1rem}
.hormat{margin:0;font-size:.85rem;color:#555}
.nama-tamu{margin:.2rem 0 1.1rem;font-family:var(--serif);font-size:1.45rem;overflow-wrap:anywhere}
.tombol-buka{background:var(--hitam);color:var(--putih);border:2px solid var(--hitam);padding:.9rem 2rem;font-family:var(--sans);font-weight:500;font-size:.95rem;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;min-height:54px}
.tombol-buka:hover{background:var(--kobalt);border-color:var(--kobalt)}
.tombol-buka:disabled{opacity:.6;cursor:wait}
.foto-sampul{width:100%;flex:1;min-height:0;height:auto;object-fit:cover;object-position:center 28%}

/* ---------- Navigasi lengket ---------- */
#navigasi{position:sticky;top:0;z-index:50;background:var(--putih);border-bottom:3px solid var(--hitam);display:flex;justify-content:space-between;max-width:44rem;margin:0 auto}
#navigasi a{flex:1;text-align:center;padding:.8rem .1rem;min-height:48px;display:flex;align-items:center;justify-content:center;color:var(--hitam);text-decoration:none;font-weight:500;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
#navigasi a:hover,#navigasi a:active{color:var(--kobalt)}

/* ---------- Kerangka ---------- */
main{max-width:44rem;margin:0 auto}
#beranda{padding:2.6rem 1.25rem 0}
.label-kecil{letter-spacing:.34em;text-transform:uppercase;font-size:.68rem;font-weight:500;color:var(--abu);margin:0 0 .8rem}
.nama-hero{font-size:clamp(2.5rem,11.5vw,3.9rem);line-height:1.08}
.dan-hero{color:var(--kobalt)}
.tanggal-hero{font-size:1.05rem;letter-spacing:.16em;text-transform:uppercase;margin:.8rem 0 1rem;font-weight:400}
.isi{color:#333;max-width:36rem}
.bagian{padding:3rem 1.25rem 2.4rem;border-top:1px solid var(--abu-muda)}

/* ---------- Pita hitung mundur (hitam) ---------- */
.pita-hitung{background:var(--hitam);color:var(--putih);margin:2rem -1.25rem 0;padding:1.4rem 1.25rem 1.5rem}
.label-hitung{letter-spacing:.3em;text-transform:uppercase;font-size:.7rem;font-weight:500;color:#B9C6FF;margin:0}
.angka-hitung{display:flex;gap:.5rem;margin-top:.8rem}
.angka-hitung>div{flex:1;border:1px solid #444;text-align:center;padding:.65rem .1rem}
.angka-hitung strong{display:block;font-family:var(--serif);font-size:1.9rem;line-height:1.1}
.angka-hitung span{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--abu)}
.status-hitung{color:#B9C6FF;min-height:1.2em;margin:.6rem 0 0;font-size:.9rem}

/* ---------- Kepala indeks ---------- */
.kepala-indeks{display:flex;align-items:baseline;gap:.9rem;border-bottom:3px solid var(--hitam);padding-bottom:.6rem;margin-bottom:1.6rem}
.angka-indeks{font-family:var(--serif);font-size:2.9rem;line-height:1;color:var(--kobalt)}
.judul-bagian{font-size:1.7rem;text-transform:uppercase;letter-spacing:.04em}

/* ---------- Mempelai: blok offset ---------- */
.blok-mempelai{max-width:24rem}
.blok-mempelai.geser-kiri{margin-right:auto}
.blok-mempelai.geser-kanan{margin-left:auto;margin-top:2.6rem;text-align:right}
.foto-mempelai{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:center 22%}
.nama-mempelai{font-size:1.9rem;margin-top:.9rem}
.orangtua{color:#555;font-size:.93rem;margin:.25rem 0 0}

/* ---------- Acara ---------- */
.kartu-acara{border-top:3px solid var(--hitam);padding:1.1rem 0 .6rem;margin-bottom:1.8rem}
.kartu-acara .jam-besar{font-family:var(--serif);font-size:2.7rem;line-height:1;color:var(--kobalt);margin:0}
.kartu-acara h4{font-size:1.65rem;text-transform:uppercase;margin:.3rem 0 .2rem}
.kartu-acara p{margin:.18rem 0;color:#333}
.kartu-acara .alamat{color:#666;font-size:.92rem}
.tombol-aksi{display:inline-block;margin:.65rem .5rem .4rem 0;background:var(--putih);border:2px solid var(--hitam);color:var(--hitam);padding:.6rem 1.1rem;min-height:48px;font-family:var(--sans);font-weight:500;font-size:.88rem;letter-spacing:.06em;cursor:pointer;text-decoration:none}
.tombol-aksi:hover{border-color:var(--kobalt);color:var(--kobalt)}

/* ---------- Kisah ---------- */
.bab-kisah{display:flex;gap:1.1rem;padding:1.1rem 0;border-bottom:1px solid var(--abu-muda)}
.bab-kisah:last-child{border-bottom:none}
.bab-kisah .no-bab{font-family:var(--serif);font-size:2.2rem;line-height:1;color:var(--kobalt);flex:none}
.bab-kisah h4{font-size:1.3rem}
.bab-kisah p{margin:.3rem 0 0;color:#333}

/* ---------- Galeri: kisi offset dua kolom ---------- */
#kisiGaleri{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;align-items:start}
.momen{margin:0}
.momen:nth-child(even){margin-top:1.9rem}
.momen.lebar{grid-column:1 / -1;margin-top:0}
.momen button{padding:0;border:none;background:none;cursor:pointer;width:100%;display:block}
.momen img{width:100%;height:100%;object-fit:cover}
.momen .bingkai{display:block;width:100%}
.rasio-34{aspect-ratio:3/4}.rasio-11{aspect-ratio:1/1}.rasio-45{aspect-ratio:4/5}.rasio-1610{aspect-ratio:16/10}
.momen figcaption{display:flex;align-items:baseline;gap:.6rem;padding-top:.5rem}
.momen figcaption b{font-family:var(--serif);font-weight:400;font-size:1.8rem;line-height:1;color:var(--kobalt)}
.momen figcaption span{font-size:.86rem;color:#555}
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(8,8,8,.97);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:2px solid var(--putih);color:var(--putih);width:44px;height:44px;font-size:1rem;cursor:pointer}
.lb-nav{background:none;border:none;color:var(--putih);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(--putih);font-size:.9rem;padding:0 1rem}

/* ---------- Amplop ---------- */
.kartu-amplop{border:2px solid var(--hitam);padding:1.1rem 1.15rem;margin:0 0 1rem}
.kartu-amplop .bank{letter-spacing:.24em;text-transform:uppercase;font-size:.72rem;font-weight:500;color:var(--kobalt)}
.kartu-amplop .nomor{font-family:var(--serif);font-size:1.65rem;letter-spacing:.05em;margin:.3rem 0 .1rem}
.kartu-amplop .an{color:#666;font-size:.9rem;margin:0 0 .6rem}
.label-contoh{font-size:.78rem;color:#777;font-style:italic}

/* ---------- RSVP ---------- */
.label-demo{border:2px dashed var(--kobalt);color:var(--kobalt);padding:.65rem .85rem;font-size:.84rem;font-weight:400}
form{margin-top:1.3rem}
form label{display:block;margin-bottom:1rem;font-size:.9rem;font-weight:400;color:#444}
form input,form select,form textarea{width:100%;margin-top:.35rem;background:var(--putih);border:2px solid var(--hitam);color:var(--hitam);padding:.7rem .8rem;font-family:var(--sans);font-size:1rem;min-height:50px;border-radius:0}
form textarea{min-height:auto}
.tombol-kirim{width:100%;background:var(--hitam);color:var(--putih);border:2px solid var(--hitam);padding:.9rem;font-family:var(--sans);font-weight:500;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;min-height:54px}
.tombol-kirim:hover{background:var(--kobalt);border-color:var(--kobalt)}
.tombol-kirim:disabled{opacity:.55;cursor:wait}
.pesan-form{min-height:1.2em;color:var(--kobalt);font-size:.9rem}
.kartu-ucapan{border-left:4px solid var(--kobalt);padding:.25rem 0 .25rem 1rem;margin-bottom:1.1rem}
.kartu-ucapan strong{font-family:var(--serif);font-weight:400;font-size:1.1rem}
.kartu-ucapan .meta{font-size:.74rem;color:#888;letter-spacing:.06em;text-transform:uppercase}
.kartu-ucapan p{margin:.25rem 0 0;color:#333;font-size:.94rem;overflow-wrap:anywhere}
.ucapan-kosong{color:#666;font-size:.92rem}

/* ---------- Penutup ---------- */
#penutup{padding:0}
.foto-penutup{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:center 30%}
.blok-penutup{background:var(--hitam);color:var(--putih);padding:2.2rem 1.25rem 2.4rem}
.blok-penutup p{max-width:36rem}
.ttd{font-family:var(--serif);font-size:2rem}
.catatan-contoh{font-size:.74rem;color:var(--abu)}

/* ---------- Musik: tombol teks, kanan bawah, di bawah sampul & lightbox ---------- */
.tombol-musik{position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));z-index:40;background:var(--hitam);color:var(--putih);border:2px solid var(--kobalt);padding:.65rem 1.1rem;min-height:44px;font-family:var(--sans);font-weight:500;font-size:.85rem;letter-spacing:.08em;cursor:pointer}

/* ---------- Pemuatan awal bertema: masthead majalah ----------
   Lapisan tetap (fixed) di atas segalanya — TIDAK menggeser tata
   letak dokumen sama sekali. Tanpa JS kelas .js-pre tidak pernah
   ditambahkan, sehingga preloader tidak tampil dan halaman utuh
   dapat dipakai. Progresnya diisi pemuatan.js dari pemuatan aset
   kritis yang nyata (foto sampul + fon lokal sampul). */
.preloader{display:none}
html.js-pre .preloader{position:fixed;inset:0;z-index:100;background:var(--putih);display:flex;justify-content:center}
.pre-dalam{width:100%;max-width:44rem;padding:2.2rem 1.25rem 1.5rem}
.pre-label{letter-spacing:.3em;text-transform:uppercase;font-size:.66rem;font-weight:500;color:var(--kobalt);margin:0 0 1rem}
.pre-judul{font-family:var(--serif);font-size:clamp(2.5rem,12vw,4.2rem);line-height:1.02;text-transform:uppercase;margin:0}
.pre-judul .pre-dan{color:var(--kobalt);font-size:.6em}
.pre-rel{height:3px;background:var(--abu-muda);margin:2.1rem 0 .8rem}
.pre-isi{height:100%;width:0;background:var(--hitam);transition:width .3s ease}
.pre-baris{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:0;font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;font-weight:500}
.pre-baris #prePersen{font-family:var(--serif);font-size:1.15rem;letter-spacing:0}
.pre-total{margin:.35rem 0 0;font-size:.8rem;color:#666}
html.js-pre .preloader.pre-selesai{opacity:0;pointer-events:none;transition:opacity .35s ease}

/* ---------- Tombol Jelajah (alur berkelanjutan) — teks, kiri bawah,
   terpisah dari tombol musik di kanan bawah; ≥44px. ---------- */
.tombol-jelajah{position:fixed;left:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));z-index:40;background:var(--putih);color:var(--hitam);border:2px solid var(--hitam);padding:.65rem 1.1rem;min-height:44px;font-family:var(--sans);font-weight:500;font-size:.85rem;letter-spacing:.08em;cursor:pointer}
.tombol-jelajah[hidden]{display:none}
.tombol-jelajah:disabled{opacity:.55;cursor:default}

/* ---------- Ungkap editorial: "kolom disusun & tirai cetak dibuka" ----------
   Mekanisme KHAS template ini (menggantikan fade+naik generik lama yang
   identik dengan template bergaya lain — temuan koherensi gerak pabrik):
   teks masuk sebagai kolom yang digeser dari tepi kiri bloknya disertai
   garis aturan kobalt yang terbit dari kiri (transform scaleX pada
   pseudo-elemen), dan foto terungkap seperti tirai cetak yang dibuka
   dari kiri ke kanan (clip-path inset). Hanya transform/opacity/clip-path
   yang dianimasikan (jalur kompositor). Pemicu BUKAN di sini: aplikasi.js
   menembak .tampak saat elemen melintasi garis panggung ±65% (Bagian G).
   Keadaan awal hanya berlaku bila JS menambahkan .js-ungkap ke <html>.
   Tanpa JS / reduced-motion: konten tampil penuh. */
.js-ungkap .ungkap{opacity:0;transform:translateX(-18px);transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1),clip-path .7s cubic-bezier(.22,1,.36,1);transition-delay:var(--tunda,0ms)}
.js-ungkap .ungkap.tampak{opacity:1;transform:translateX(0)}
.js-ungkap img.ungkap,.js-ungkap .momen.ungkap{clip-path:inset(0 100% 0 0)}
.js-ungkap img.ungkap.tampak,.js-ungkap .momen.ungkap.tampak{clip-path:inset(0 0 0 0)}
.js-ungkap .kepala-indeks.ungkap{clip-path:none}
.js-ungkap .ungkap.seketika{transition:none !important}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js-ungkap .ungkap{opacity:1 !important;transform:none !important;clip-path:none !important;transition:none !important}
  #sampul.memudar{transition:none}
  .pre-isi{transition:none}
  html.js-pre .preloader.pre-selesai{transition:none}
}