:root{
  --marun:#5E1220; --marun2:#7A1E2B; --marun-gelap:#420B16; --emas:#C9A227; --emas-terang:#E4C566; --gading:#F8F1E3; --gading2:#EFE3CB; --tinta:#33161C;
  --display:'Marcellus',Georgia,serif; --serif-i:'Cormorant Garamond',Georgia,serif; --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ez-tenun:cubic-bezier(.7,0,.25,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--gading);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(--emas);outline-offset:3px}
h1,h2,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-terang);margin:0 0 .7rem}

/* ---------- Pita songket: pola tenun dari gradien CSS ---------- */
.pita-songket{display:block;height:16px;
  background:
   repeating-linear-gradient(90deg, rgba(201,162,39,.95) 0 2px, transparent 2px 14px),
   repeating-linear-gradient(45deg, rgba(201,162,39,.4) 0 6px, transparent 6px 12px),
   repeating-linear-gradient(-45deg, rgba(201,162,39,.4) 0 6px, transparent 6px 12px),
   linear-gradient(var(--marun2), var(--marun));}

/* ---------- Sampul: tepat 1 layar penuh (standar sampul 100dvh, tanpa scroll) ----------
   Ukuran internal blok sampul dalam em terhadap font-size .blok-sampul agar auto-fit
   pasSatuLayarSampul() dapat menyesuaikan komposisi secara proporsional. Foto adalah
   anak flex yang menyusut otomatis sehingga tombol Buka selalu utuh di layar pertama.
   REVISI BINGKAI FOTO (3 Nov 2026, perintah pemilik "wajahnya jadi sembunyi"): mode
   lapisan kini memakai tata letak flex yang sama dengan mode biasa — foto sebagai
   panggung di atas blok nama, BUKAN full-bleed di balik blok. Dulu foto layar-penuh
   dengan object-position 10% + panel 26% membuat jendela tampak jatuh ke atap rumah
   gadang dan kedua wajah tertimbun panel marun bawah (di 375x667 wajah hilang
   seluruhnya). Kini panel 20% + object-position center 55%: pada foto contoh kedua
   wajah + suntiang tampil utuh di lajur pada 390x844 & 375x667. Perbaikan di
   bingkai (CSS), bukan di berkas foto — slot foto diganti foto pelanggan apa adanya.
   REVISI TEKS SAMPUL (3 Nov 2026, perintah pemilik "kecilkan lagi kata-katanya,
   yang penting masih jelas dibaca"): skala teks blok sampul diturunkan seirama —
   nama 2.05em→1.70em (−17%), nama tamu 1.30em→1.16em, tanggal 1em→0.92em,
   hormat 0.86em→0.82em (dijaga di lantai keterbacaan ±13px efektif), kicker
   0.70em→0.67em; padding blok ditrim 1.6/2.4em→1.45/2.15em. Tombol TIDAK
   dikecilkan (target sentuh ≥44px). Ruang vertikal yang bebas jatuh ke foto
   (anak flex). Tautan gaya.css di index.html bercap ?v=20261103-tekssampul
   agar HP pemilik tidak menyajikan CSS lama dari cache. */
#sampul{position:relative;background:var(--marun-gelap);color:var(--gading);overflow:hidden;height:100dvh;max-height:100dvh;display:flex;flex-direction:column}
#sampul.lapisan{position:fixed;inset:0;z-index:60;height:100dvh;max-height:100dvh}
#sampul.memudar{opacity:0;transition:opacity .4s ease;pointer-events:none}
.pembungkus-foto{position:relative;flex:1 1 auto;min-height:0}
.foto-sampul{width:100%;height:100%;object-fit:cover;object-position:center 55%}
.gonjong{position:absolute;left:0;right:0;top:-37px;width:100%;height:38px;fill:var(--marun-gelap);z-index:2}
.blok-sampul{position:relative;z-index:7;flex:none;font-size:16px;padding:1.45em 1.5em 2.15em;text-align:left;max-width:30rem;background:linear-gradient(to top, rgba(46,8,16,.96) 78%, rgba(46,8,16,0))}
.label-atas{font-size:.67em}
.nama-sampul{font-size:1.7em;line-height:1.28}
.nama-sampul .dan{font-family:var(--serif-i);font-style:italic;color:var(--emas);font-size:.71em}
.tanggal-sampul{color:var(--gading2);letter-spacing:.08em;margin:.6em 0 1.3em;font-size:.92em}
.hormat{margin:0;font-size:.82em;color:var(--gading2)}
.nama-tamu{margin:.25em 0 1.3em;font-family:var(--display);font-size:1.16em;overflow-wrap:anywhere}
.tombol-buka{background:var(--emas);color:#2A1408;border:1px solid var(--emas);padding:.85em 1.9em;font-family:var(--sans);font-weight:500;font-size:.95em;letter-spacing:.1em;cursor:pointer;min-height:50px}
.tombol-buka:hover{background:var(--emas-terang)}
.tombol-buka:disabled{opacity:.6;cursor:wait}

/* Panel kain songket: hanya tampil pada mode lapisan (JS); menyisih horizontal saat membuka */
.panel{display:none;position:absolute;top:0;bottom:0;width:20%;z-index:5;will-change:transform;
  background:
   repeating-linear-gradient(90deg, rgba(201,162,39,.16) 0 12px, transparent 12px 24px),
   repeating-linear-gradient(0deg, rgba(201,162,39,.1) 0 3px, transparent 3px 26px),
   linear-gradient(var(--marun2), var(--marun-gelap));
  transition:transform .95s var(--ez-tenun)}
#sampul.lapisan .panel{display:block}
.panel-kiri{left:0;border-right:3px solid var(--emas)}
.panel-kanan{right:0;border-left:3px solid var(--emas)}
#sampul.membuka .panel-kiri{transform:translateX(-103%)}
#sampul.membuka .panel-kanan{transform:translateX(103%)}

/* ---------- Bagian & tab bernomor ---------- */
main{max-width:30rem;margin:0 auto;background:var(--gading)}
@media (min-width:900px){ main{max-width:34rem} }
.bagian{padding:2.8rem 1.5rem 2.6rem;border-bottom:1px solid var(--gading2)}
.kepala-wrap{display:flex;align-items:center;gap:.7rem;margin-bottom:.55rem}
.tab-nomor{background:var(--marun);color:var(--emas-terang);font-family:var(--display);font-size:.86rem;letter-spacing:.08em;padding:.22rem .6rem;border:1px solid var(--emas)}
.kepala-bagian{letter-spacing:.32em;text-transform:uppercase;font-size:.68rem;color:var(--marun2);margin:0}
.judul-bagian{font-size:1.75rem;color:var(--marun);margin-bottom:1.1rem}
.isi{color:#57383d}

/* ---------- Nama panggung (momen khas b) ---------- */
.nama-panggung{margin:.4rem 0 1.4rem}
.bungkus-nama{position:relative;display:block;width:fit-content;max-width:100%}
.sapuan-nama{display:block;font-family:var(--display);font-size:2.15rem;line-height:1.25;color:var(--marun)}
.dan-besar{display:block;font-family:var(--serif-i);font-style:italic;font-size:1.5rem;color:var(--emas);margin:.15rem 0}
.tepi-emas{position:absolute;top:0;bottom:0;left:0;width:3px;background:var(--emas);opacity:0;pointer-events:none}

/* ---------- Bingkai foto garis ganda + jalur tenun (momen khas c) ---------- */
.bingkai{margin:0;border:1px solid var(--emas);outline:1px solid var(--emas);outline-offset:4px;background:#fff}
.bingkai img{width:100%;height:auto}
.area-foto{display:block;position:relative;aspect-ratio:1/1;overflow:hidden}
.foto-jalur .seg{position:absolute;left:0;width:100%;height:25.05%;overflow:hidden}
.foto-jalur .seg:nth-child(1){top:0}.foto-jalur .seg:nth-child(2){top:25%}.foto-jalur .seg:nth-child(3){top:50%}.foto-jalur .seg:nth-child(4){top:75%}
.foto-jalur .seg img{position:absolute;left:0;width:100%;height:400%;max-width:none;object-fit:cover}
.foto-jalur .seg:nth-child(1) img{top:0}.foto-jalur .seg:nth-child(2) img{top:-100%}.foto-jalur .seg:nth-child(3) img{top:-200%}.foto-jalur .seg:nth-child(4) img{top:-300%}
.nama-mempelai{font-size:1.55rem;color:var(--marun);margin-top:1rem}
.orangtua{color:#7a5a52;font-size:.92rem;margin:.2rem 0 1.6rem}

/* ---------- Acara ---------- */
.kartu-acara{border-top:2px solid var(--marun);padding:1.2rem 0 .4rem;margin-bottom:1.4rem}
.kartu-acara h4{font-size:1.5rem;color:var(--marun)}
.kartu-acara p{margin:.25rem 0;color:#57383d}
.kartu-acara .alamat{color:#7a5a52;font-size:.92rem}
.tombol-aksi{display:inline-block;margin:.6rem .5rem .4rem 0;background:none;border:1px solid var(--marun2);color:var(--marun);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(--marun2)}
.judul-hitung{font-size:1.35rem;color:var(--marun);margin-top:1.6rem}
.angka-hitung{display:flex;gap:.6rem;margin-top:.6rem}
.angka-hitung>div{flex:1;border:1px solid var(--emas);text-align:center;padding:.7rem .1rem;background:#FFFDF4}
.angka-hitung strong{display:block;font-family:var(--display);font-size:1.7rem;color:var(--marun)}
.angka-hitung span{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:#7a5a52}
.status-hitung{color:var(--marun2);min-height:1.2em}

/* ---------- Kisah ---------- */
.bab-kisah{padding:1rem 0;border-bottom:1px dashed var(--emas)}
.bab-kisah:last-child{border-bottom:none}
.bab-kisah h4{font-size:1.3rem;color:var(--marun)}
.bab-kisah p{margin:.3rem 0;color:#57383d}

/* ---------- Galeri: grid dua kolom ---------- */
#kisiGaleri{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.sel-galeri{margin:0}
.sel-galeri .bingkai{display:block;width:100%;padding:0;cursor:pointer;text-align:left;font:inherit}
.sel-galeri figcaption{padding-top:.5rem;color:#7a5a52;font-size:.84rem}
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(30,5,10,.95);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(--gading);color:var(--gading);border-radius:50%;width:44px;height:44px;font-size:1.05rem;cursor:pointer}
.lb-nav{background:none;border:none;color:var(--gading);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(--gading);font-size:.88rem;padding:0 1rem}

/* ---------- Amplop ---------- */
.kartu-amplop{border:1px solid var(--emas);background:#FFFDF4;padding:1.1rem 1.2rem;margin:0 0 1rem}
.kartu-amplop .bank{letter-spacing:.2em;text-transform:uppercase;font-size:.72rem;color:var(--marun2)}
.kartu-amplop .nomor{font-family:var(--display);font-size:1.5rem;letter-spacing:.06em;color:var(--marun);margin:.3rem 0 .1rem}
.kartu-amplop .an{color:#7a5a52;font-size:.9rem;margin:0 0 .7rem}
.label-contoh{font-size:.78rem;color:#8a6f52;font-style:italic}

/* ---------- RSVP ---------- */
.label-demo{background:#F7E8C3;border:1px dashed var(--emas);color:#6d5312;padding:.6rem .8rem;font-size:.82rem;margin-top:1.4rem}
form{margin-top:1.2rem}
form label{display:block;margin-bottom:.95rem;font-size:.9rem;color:#7a5a52}
form input,form select,form textarea{width:100%;margin-top:.35rem;background:#FFFDF4;border:1px solid var(--marun2);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(--marun);color:var(--gading);border:1px solid var(--marun);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:#6d5312;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(--marun)}
.kartu-ucapan .meta{font-size:.74rem;color:#8a6f52;letter-spacing:.06em}
.kartu-ucapan p{margin:.25rem 0 0;color:#57383d;font-size:.93rem;overflow-wrap:anywhere}
.ucapan-kosong{color:#7a5a52;font-size:.9rem}

/* ---------- Penutup ---------- */
#penutup{position:relative;background:var(--marun-gelap);color:var(--gading)}
.foto-penuh{width:100%;height:72svh;object-fit:cover;object-position:center 25%}
.blok-penutup{padding:1.8rem 1.5rem 2.2rem;max-width:30rem;margin:0 auto}
.ttd{font-family:var(--serif-i);font-style:italic;font-size:1.8rem;color:var(--emas-terang)}
.catatan-contoh{font-size:.74rem;color:var(--gading2);opacity:.85}

/* ---------- Bilah kontrol musik & jelajah otomatis (muncul setelah dibuka) ---------- */
html.jelajah-aktif{scroll-behavior:auto}
body.dibuka{padding-bottom:84px}
#bilahKontrol{position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));z-index:40;display:flex;gap:8px;padding:8px;background:rgba(66,11,22,.96);border:1px solid var(--emas);box-shadow:0 6px 24px rgba(42,8,16,.35)}
#bilahKontrol[hidden]{display:none}
#bilahKontrol button{background:transparent;color:var(--gading);border:1px solid var(--emas);padding:.65rem 1.1rem;min-height:44px;font-family:var(--sans);font-size:.85rem;letter-spacing:.06em;cursor:pointer;white-space:nowrap}
#bilahKontrol button:active{background:rgba(201,162,39,.25)}
#bilahKontrol button[disabled]{opacity:.55;cursor:default}

/* ---------- SAPUAN TENUN HORIZONTAL: mekanisme gerak template ini ----------
   Keadaan awal hanya berlaku bila JS menambahkan .js-sapuan ke <html>.
   Mekanisme yang dianimasikan adalah CLIP-PATH (sapuan dari tepi kiri),
   BUKAN transform/translateY. Tanpa JS / tanpa IO / reduced-motion: tampil penuh. */
.js-sapuan .sapuan{clip-path:inset(0 100% 0 0);transition:clip-path var(--durasi-ungkap,.9s) var(--ez-tenun);transition-delay:var(--tunda,0ms)}
.js-sapuan .sapuan.tampak{clip-path:inset(0 0 0 0)}
.js-sapuan .bungkus-nama .sapuan-nama{clip-path:inset(0 100% 0 0);transition:clip-path var(--durasi-ungkap,.9s) var(--ez-tenun);transition-delay:var(--tunda,0ms)}
.js-sapuan .bungkus-nama.tampak .sapuan-nama{clip-path:inset(0 0 0 0)}
.js-sapuan .bungkus-nama.tampak .tepi-emas{animation:tepiJalan .95s var(--ez-tenun) var(--tunda,0ms) both}
@keyframes tepiJalan{0%{left:0;opacity:0}10%{opacity:1}82%{opacity:1}100%{left:calc(100% - 3px);opacity:0}}
.js-sapuan .foto-jalur .seg{clip-path:inset(0 100% 0 0);transition:clip-path .8s var(--ez-tenun)}
.js-sapuan .foto-jalur .seg:nth-child(2){transition-delay:.07s}
.js-sapuan .foto-jalur .seg:nth-child(3){transition-delay:.14s}
.js-sapuan .foto-jalur .seg:nth-child(4){transition-delay:.21s}
.js-sapuan .foto-jalur.tampak .seg{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js-sapuan .sapuan,.js-sapuan .bungkus-nama .sapuan-nama,.js-sapuan .foto-jalur .seg{clip-path:none !important;transition:none !important}
  .js-sapuan .bungkus-nama .tepi-emas{animation:none !important;opacity:0 !important}
  .panel{transition:none}
  #sampul.memudar{transition:none}
}

/* ---------- PRELOADER TENUN (Standar Desain & Pengalaman) ----------
   Siluet gonjong emas di atas marun gelap songket: nama panggilan
   Marcellus, garis emas yang tumbuh mengikuti pemuatan aset kritis
   NYATA, dan pita songket di alas layar. Hanya tampil bila JS aktif
   (html.js-aktif disetel skrip <head>); tanpa JS tidak pernah
   menghalangi. Overlay fixed: tanpa layout shift. */
#preloader{display:none}
html.js-aktif #preloader{position:fixed;inset:0;z-index:70;background:var(--marun-gelap);color:var(--gading);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}
.pre-dalam{position:relative;z-index:2;padding:2rem 1.5rem 3rem;max-width:24rem}
.pre-gonjong{width:200px;height:22px;margin:0 auto .9rem;fill:var(--emas)}
.pre-label{letter-spacing:.34em;text-transform:uppercase;font-size:.68rem;color:var(--emas-terang);margin:0 0 .6rem}
.pre-nama{font-family:var(--display);font-size:1.7rem;color:var(--gading);margin:0 0 1.3rem}
.pre-nama .dan{font-family:var(--serif-i);font-style:italic;color:var(--emas);font-size:1.25rem}
.pre-jalur{width:200px;height:2px;background:rgba(248,241,227,.16);margin:0 auto}
#preIsi{display:block;height:100%;width:0;background:var(--emas);transition:width .3s ease}
.pre-status{font-size:.8rem;color:var(--gading2);margin:1rem 0 0;line-height:1.6}
.pre-pita{position:absolute;left:0;right:0;bottom:0}
@media (prefers-reduced-motion: reduce){
  #preIsi{transition:none}
  html.pre-selesai #preloader{transition:none}
}