:root{
  --olive:#5A6248; --olive-pekat:#39412E; --gading:#F7F3E8; --gading2:#EFE8D5; --emas:#B08D4F; --tinta:#2E2A1E;
  --display:'Marcellus',Georgia,serif; --serif-i:'Cormorant Garamond',Georgia,serif; --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--tinta);font-family:var(--sans);font-weight:300;line-height:1.7;-webkit-font-smoothing:antialiased;
  background-color:var(--gading);
  background-image:radial-gradient(rgba(90,98,72,.05) 1px, transparent 1.4px),radial-gradient(rgba(176,141,79,.05) 1px, transparent 1.4px);
  background-size:22px 22px, 34px 34px; background-position:0 0, 11px 17px}
body.terkunci{overflow:hidden}
:focus-visible{outline:2px solid var(--emas);outline-offset:3px}
h1,h3,h4{font-family:var(--display);font-weight:400;margin:0}
.label-atas{letter-spacing:.34em;text-transform:uppercase;font-size:.7rem;color:var(--emas);margin:0 0 .7rem}
.isi{color:#4A4636}
main{max-width:30rem;margin:0 auto;padding-bottom:7rem}
@media (min-width:900px){ main{max-width:34rem} }

/* ---------- Sampul: medali terpusat, panel ornamen ---------- */
#sampul{position:relative;background:var(--gading2);text-align:center;overflow:hidden;padding:3rem 1.5rem 2.6rem}
/* Standar sampul 1 layar penuh (pemilik, 1 Nov 2026): dalam mode lapisan
   (JS aktif) sampul dikunci tepat 100dvh tanpa scroll; fungsi
   pasSatuLayarSampul() di aplikasi.js mengecilkan komposisi (tangga kelas
   .ringkas-1/.ringkas-2 di bawah) hingga tombol Buka utuh di layar pertama.
   Tanpa JS sampul tetap header statis yang terbaca penuh. */
#sampul.lapisan{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:1.5rem;height:100dvh;max-height:100dvh}
#sampul.ringkas-1 .medali{width:96px;height:96px}
#sampul.ringkas-1 .nama-sampul{font-size:clamp(1.22rem,5.8vw,1.7rem)}
#sampul.ringkas-1 .nama-tamu{font-size:1.15rem;margin-bottom:1rem}
#sampul.ringkas-1 .tanggal-sampul{margin-bottom:.9rem}
#sampul.ringkas-2 .medali{width:76px;height:76px;margin-bottom:.3rem}
#sampul.ringkas-2 .nama-sampul{font-size:clamp(1.08rem,5.2vw,1.5rem)}
#sampul.ringkas-2 .label-atas{margin-bottom:.45rem}
#sampul.ringkas-2 .nama-tamu{font-size:1.05rem;margin-bottom:.85rem}
#sampul.ringkas-2 .tombol-buka{padding:.7rem 1.5rem;min-height:48px}
#sampul.memudar{opacity:0;transition:opacity .55s ease;pointer-events:none}
.panel-ornamen{position:absolute;top:0;bottom:0;width:15%;background-color:var(--olive-pekat);
  background-image:repeating-linear-gradient(45deg, rgba(176,141,79,.35) 0 2px, transparent 2px 16px),repeating-linear-gradient(-45deg, rgba(176,141,79,.35) 0 2px, transparent 2px 16px);
  transition:transform .9s cubic-bezier(.7,0,.3,1)}
.panel-kiri{left:0}.panel-kanan{right:0}
#sampul.berpisah .panel-kiri{transform:translateX(-102%)}
#sampul.berpisah .panel-kanan{transform:translateX(102%)}
.isi-sampul{position:relative;max-width:26rem;margin:0 auto}
.medali{width:118px;height:118px;margin:0 auto .6rem}
.medali.kecil{width:74px;height:74px}
.medali circle,.medali rect{stroke:var(--emas);stroke-width:1.6}
.nama-sampul{font-size:clamp(1.38rem,6.6vw,1.95rem);line-height:1.3;color:var(--olive-pekat);overflow-wrap:break-word}
.nama-sampul .dan{font-family:var(--serif-i);font-style:italic;color:var(--emas);font-size:1.35rem}
.tanggal-sampul{color:#6B6248;letter-spacing:.08em;margin:.6rem 0 1.2rem}
/* Layar sempit (<=400px): tanggal panjang ("Sabtu, 11 Desember 2027 ·
   Jakarta") meluber melewati tepi kolom gading pada 375px — kecilkan
   huruf + rapatkan jarak huruf agar tetap di dalam kolom. */
@media (max-width:400px){ .tanggal-sampul{font-size:.9rem;letter-spacing:.03em} }
.hormat{margin:0;font-size:.86rem;color:#6B6248}
.nama-tamu{margin:.25rem 0 1.3rem;font-family:var(--display);font-size:1.3rem;color:var(--olive-pekat);overflow-wrap:anywhere}
.tombol-buka{background:var(--olive);color:var(--gading);border:1px solid var(--olive);padding:.85rem 1.9rem;font-family:var(--sans);font-size:.95rem;letter-spacing:.1em;cursor:pointer;min-height:50px}
.tombol-buka:hover{background:var(--olive-pekat)}
.tombol-buka:disabled{opacity:.6;cursor:wait}

/* ---------- Gambar-diri SVG: garis menggambar sendiri (sekali) ---------- */
.gambar-diri{stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset 1.15s ease}
.js-klip .gambar-diri{stroke-dashoffset:100}
.js-klip .tampak .gambar-diri{stroke-dashoffset:0}
.medali.bersenjata .gambar-diri{stroke-dashoffset:100}
.medali.digambar .gambar-diri{stroke-dashoffset:0}
.bintang-judul .gambar-diri{stroke:var(--emas);stroke-width:1.4}
.garis-bingkai .gambar-diri{stroke:var(--emas);stroke-width:1.2;transition-duration:1.4s}
.medali .gambar-diri{transition-duration:1.2s}

/* ---------- Pengungkapan klip per baris (khas konsep ini) ---------- */
.klip{display:block;overflow:hidden}
.klip>span{display:block}
.js-klip .klip>span{transform:translateY(112%);transition:transform .8s cubic-bezier(.19,.61,.22,1)}
.js-klip .tampak .klip>span,.js-klip .klip.tampak>span{transform:translateY(0)}

/* ---------- Navigasi jangkar ---------- */
.nav-jangkar{position:sticky;top:0;z-index:30;background:var(--gading);border-bottom:1px solid var(--gading2);padding:.55rem 1rem;text-align:center;font-size:.85rem;letter-spacing:.05em}
.nav-jangkar a{color:var(--olive-pekat);text-decoration:none;padding:.45rem .35rem;display:inline-block;min-height:44px;line-height:2}
.nav-jangkar a:hover{color:var(--emas)}

/* ---------- Bagian ---------- */
.bagian{padding:2.8rem 1.5rem 2.4rem;border-bottom:1px solid var(--gading2)}
.kepala{display:flex;gap:.8rem;align-items:flex-start;margin-bottom:1rem}
.bintang-judul{width:26px;height:26px;flex:none;margin-top:.2rem}
.kepala-bagian{letter-spacing:.32em;text-transform:uppercase;font-size:.66rem;color:var(--emas);margin:0 0 .35rem}
.judul-bagian{font-size:1.65rem;color:var(--olive-pekat);line-height:1.25}
.bismillah{font-size:1.7rem;text-align:center;color:var(--olive-pekat);margin:.2rem 0 1rem}
.ayat-arab{font-size:1.35rem;line-height:2.1;text-align:right;color:var(--olive-pekat);margin:.6rem 0}
.gelar-nama{font-family:var(--display);font-size:1.45rem;color:var(--olive-pekat);text-align:center;margin:.2rem 0}
.orangtua{color:#6B6248;font-size:.92rem;text-align:center;margin:.2rem 0 .8rem}
.dan-besar{font-family:var(--serif-i);font-style:italic;font-size:1.6rem;color:var(--emas);text-align:center;margin:.2rem 0}
.bingkai-nama{position:relative;padding:1.6rem 1.2rem 1.2rem;margin-top:.6rem}
.garis-bingkai{position:absolute;inset:0;width:100%;height:100%}

/* ---------- Acara ---------- */
.kartu-acara{border-top:2px solid var(--olive);padding:1.1rem 0 .4rem;margin-bottom:1.5rem}
.kartu-acara h4{font-size:1.45rem;color:var(--olive-pekat)}
.kartu-acara p{margin:.25rem 0;color:#4A4636}
.kartu-acara .alamat{color:#6B6248;font-size:.92rem}
.tombol-aksi{display:inline-block;margin:.6rem .5rem .4rem 0;background:none;border:1px solid var(--olive);color:var(--olive-pekat);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(--emas);color:var(--emas)}

/* ---------- Hitung mundur ---------- */
.angka-hitung{display:flex;gap:.6rem}
.angka-hitung>div{flex:1;border:1px solid var(--olive);text-align:center;padding:.7rem .1rem;background:rgba(255,255,255,.5)}
.angka-hitung strong{display:block;font-family:var(--display);font-size:1.65rem;color:var(--olive-pekat)}
.angka-hitung span{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:#6B6248}
.status-hitung{color:var(--emas);min-height:1.2em}

/* ---------- Kisah ---------- */
.bab-kisah{padding:1rem 0;border-bottom:1px dashed var(--olive)}
.bab-kisah:last-child{border-bottom:none}
.bab-kisah h4{font-size:1.25rem;color:var(--olive-pekat)}
.bab-kisah p{margin:.3rem 0;color:#4A4636}

/* ---------- Amplop ---------- */
.kartu-amplop{border:1px solid var(--olive);background:rgba(255,255,255,.55);padding:1.1rem 1.2rem;margin:0 0 1rem}
.kartu-amplop .bank{letter-spacing:.18em;text-transform:uppercase;font-size:.7rem;color:var(--emas)}
.kartu-amplop .nomor{font-family:var(--display);font-size:1.5rem;letter-spacing:.06em;color:var(--olive-pekat);margin:.3rem 0 .1rem}
.kartu-amplop .an{color:#6B6248;font-size:.9rem;margin:0 0 .7rem}
.label-contoh{font-size:.78rem;color:#8a7a52;font-style:italic}

/* ---------- RSVP ---------- */
.label-demo{background:#F1EAD3;border:1px dashed var(--emas);color:#7A5A1E;padding:.6rem .8rem;font-size:.82rem}
form{margin-top:1.2rem}
form label{display:block;margin-bottom:.95rem;font-size:.9rem;color:#6B6248}
form input,form select,form textarea{width:100%;margin-top:.35rem;background:rgba(255,255,255,.7);border:1px solid var(--olive);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(--olive);color:var(--gading);border:1px solid var(--olive);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:#7A5A1E;font-size:.9rem}
.kartu-ucapan{border-left:2px solid var(--emas);padding:.3rem 0 .3rem 1rem;margin-bottom:1rem}
.kartu-ucapan strong{font-family:var(--display);font-weight:400;font-size:1.05rem;color:var(--olive-pekat)}
.kartu-ucapan .meta{font-size:.74rem;color:#8a7a52;letter-spacing:.06em}
.kartu-ucapan p{margin:.25rem 0 0;color:#4A4636;font-size:.93rem;overflow-wrap:anywhere}
.ucapan-kosong{color:#6B6248;font-size:.9rem}

/* ---------- Penutup & musik ---------- */
.penutup{text-align:center}
.penutup .isi{text-align:center}
.ttd{font-family:var(--serif-i);font-style:italic;font-size:1.8rem;color:var(--emas)}
.catatan-contoh{font-size:.74rem;color:#8a7a52}
/* ---------- Bilah kontrol musik & jelajah (Standar A/C: dua tombol teks
   >=44px, selalu tersedia selama undangan terbuka; tampil setelah dibuka) ---------- */
#bilahKontrol{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(1rem + env(safe-area-inset-bottom));z-index:45;display:flex;gap:.55rem;background:rgba(247,243,232,.94);border:1px solid var(--emas);padding:.45rem;box-shadow:0 4px 18px rgba(46,42,30,.18)}
#bilahKontrol[hidden]{display:none}
#bilahKontrol button{min-height:44px;padding:.6rem 1rem;font-family:var(--sans);font-size:.85rem;letter-spacing:.06em;cursor:pointer;border:1px solid var(--olive);white-space:nowrap}
#bilahKontrol .tombol-musik{background:var(--olive-pekat);color:var(--gading);border-color:var(--emas)}
#bilahKontrol .tombol-jelajah{background:transparent;color:var(--olive-pekat)}
#bilahKontrol button:disabled{opacity:.55;cursor:default}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js-klip .klip>span{transform:none !important;transition:none !important}
  .js-klip .gambar-diri{stroke-dashoffset:0 !important;transition:none !important}
  .panel-ornamen,#sampul.memudar{transition:none !important}
}

/* ---------- Pramuat bertema: medali bintang delapan menggambar (retrofit 30 Okt 2026) ----------
   Lapisan tetap di atas segalanya; tidak mengubah tata letak konten (tanpa layout shift).
   Animasi penjaga murni-CSS: bila JS mati di tengah jalan, lapisan tetap tersembunyi pada 6 detik. */
html.pramuat-aktif{overflow:hidden}
.pramuat{position:fixed;inset:0;z-index:200;background:var(--gading);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;padding:1.5rem;text-align:center;
  animation:pramuatJaga .4s linear 6s forwards}
@keyframes pramuatJaga{to{opacity:0;visibility:hidden}}
.pramuat.selesai{opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s;pointer-events:none}
.pramuat .medali-p{width:92px;height:92px}
.pramuat .medali-p circle,.pramuat .medali-p rect{stroke:var(--emas);stroke-width:1.6;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.1s ease}
.pramuat.digambar .medali-p circle,.pramuat.digambar .medali-p rect{stroke-dashoffset:0}
.pramuat-label{letter-spacing:.34em;text-transform:uppercase;font-size:.68rem;color:var(--emas);margin:0}
.pramuat .garis{width:180px;height:2px;background:var(--gading2)}
.pramuat .isi-garis{height:100%;width:0;background:var(--emas);transition:width .3s ease}
.pramuat-status{font-size:.8rem;letter-spacing:.06em;color:#6B6248;margin:0}
@media (prefers-reduced-motion: reduce){
  .pramuat .medali-p circle,.pramuat .medali-p rect{stroke-dashoffset:0;transition:none}
  .pramuat .isi-garis{transition:none}
  .pramuat.selesai{transition:none}
}