/* ============================================================
   ULOS BATAK (UB-01) — gaya
   Sistem gerak BERTANGGA: teks terungkap via clip-path inset
   dengan timing steps(6); kain sampir turun berjenjang
   steps(7) seperti gerakan mangulosi; foto terungkap berjenjang
   steps(5). Bukan fade+rise, bukan sapuan kontinu.
   ============================================================ */
:root{
  --merah:#7A1616;
  --merah-gelap:#4A0E12;
  --hitam:#17120F;
  --hitam-2:#211812;
  --emas:#C9A227;
  --emas-terang:#E7C66A;
  --krem:#F7F0E1;
  --krem-2:#EFE2C6;
  --tinta:#2A1A12;
  --fon-judul:'Marcellus',serif;
  --fon-isi:'Jost',sans-serif;
  --fon-aksen:'Cormorant Garamond',serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--hitam);color:var(--tinta);font-family:var(--fon-isi);font-weight:300;line-height:1.65;font-size:17px}
img{max-width:100%;display:block}
h2,h3{font-family:var(--fon-judul);font-weight:400}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--emas);outline-offset:2px}

/* ---------- Pola tenun (CSS murni) ---------- */
.pola-tenun{
  background:
    repeating-linear-gradient(0deg, transparent 0 10px, rgba(201,162,39,.55) 10px 12px),
    repeating-linear-gradient(90deg, var(--merah) 0 26px, var(--hitam) 26px 52px);
}

/* ---------- SAMPUL ---------- */
/* Standar sampul 1 layar penuh (pemilik, 1 Nov 2026): tepat 100dvh,
   max-height 100dvh, overflow hidden — tanpa scroll sama sekali, juga
   tanpa JS. Auto-fit pasSatuLayarSampul() di aplikasi.js menyesuaikan
   komposisi (.isi-sampul kini berukuran em-proporsional) hingga tombol
   Buka utuh di layar pertama walau pada 375x667. */
#sampul{position:relative;height:100dvh;max-height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:var(--hitam);color:var(--krem)}
/* translateZ(0): lapisan sampul (foto + gradasi + kain) diraster sekali dan
   memudar lewat kompositor — perbaikan kehalusan koreografi pembuka yang
   sama dengan promosi .bingkai-foto (uji Bagian E). */
html.js-langkah #sampul{position:fixed;inset:0;z-index:60;overflow:hidden;transform:translateZ(0);transition:opacity .35s ease}
html.js-langkah #sampul.membuka{opacity:0;pointer-events:none}
.foto-sampul{position:absolute;inset:0;background:url('assets/img/sampul.jpg') center 30%/cover no-repeat}
.foto-sampul::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,18,15,.18) 30%,rgba(23,18,15,.55) 62%,rgba(74,14,18,.92) 100%)}
/* Kain sampir: pita tenun selebar penuh di tepi atas sampul.
   Dengan JS ia turun menyelimuti berjenjang (momen mangulosi);
   tanpa JS ia diam tampil sebagai hiasan tepi. */
.kain-sampir{position:absolute;top:0;left:0;right:0;height:88px;z-index:3;
  background:
    repeating-linear-gradient(0deg, transparent 0 9px, rgba(201,162,39,.6) 9px 11px),
    repeating-linear-gradient(90deg, var(--merah) 0 24px, var(--hitam) 24px 48px);
  border-bottom:3px solid var(--emas)}
.kain-sampir::after{content:"";position:absolute;top:100%;left:0;right:0;height:16px;
  background:repeating-linear-gradient(90deg, var(--emas) 0 3px, transparent 3px 10px)}
html.js-langkah .kain-sampir{animation:sampirTurun .55s steps(7,end) both}
@keyframes sampirTurun{from{transform:translateY(-104%)}to{transform:translateY(0)}}
html.js-langkah #sampul.membuka .kain-sampir{animation:none;transform:translateY(-104%);transition:transform .5s steps(4,end)}
.isi-sampul{position:relative;z-index:2;margin-top:auto;text-align:center;padding:120px 22px 44px;font-size:16px}
.label-atas{letter-spacing:.32em;text-transform:uppercase;font-size:.72rem;color:var(--emas-terang);margin:0 0 10px}
.label-atas.gelap{color:var(--merah)}
.nama-sampul{font-family:var(--fon-judul);font-size:2.6rem;line-height:1.15;margin:6px 0;color:#FFF8EA}
.nama-sampul .panggilan{color:var(--emas-terang)}
.tanggal-sampul{font-family:var(--fon-aksen);font-style:italic;font-size:1.25rem;margin:4px 0 20px;color:var(--krem)}
/* Retrofit inspeksi visual: label & tanggal sampul duduk di atas foto
   (garis atap bolon/langit terang) — bayangan teks tipis menjaga
   keterbacaan tanpa mengubah komposisi. Hanya di sampul. */
#sampul .label-atas,#sampul .tanggal-sampul{text-shadow:0 1px 10px rgba(23,18,15,.85),0 0 3px rgba(23,18,15,.9)}
.kotak-tamu{background:rgba(23,18,15,.66);border:1px solid var(--emas);padding:16px 18px;max-width:340px;margin:0 auto 18px}
.kotak-tamu .yth{margin:0;font-size:.92rem}
#namaTamu{font-family:var(--fon-judul);font-size:1.3rem;margin:6px 0;color:#FFF8EA;overflow-wrap:anywhere}
.ket-tamu{font-size:.72rem;margin:4px 0 0;opacity:.85}
.tombol-buka{min-height:52px;padding:12px 34px;background:var(--merah);color:#FFF8EA;border:2px solid var(--emas);font-size:1.05rem;letter-spacing:.12em;text-transform:uppercase}
.tombol-buka:hover{background:var(--merah-gelap)}
/* Pembagi undakan diposisikan absolut di tepi bawah sampul (keluar dari
   aliran flex) agar total scrollHeight sampul tidak melampaui 100dvh
   karena pembulatan sub-piksel — syarat standar sampul 1 layar penuh. */
.undakan{position:absolute;left:0;right:0;bottom:0;z-index:2;display:block;width:100%;height:26px;fill:var(--krem)}

/* ---------- STRUKTUR BAGIAN ---------- */
main{background:var(--krem)}
.bagian{max-width:640px;margin:0 auto;padding:56px 22px 8px;text-align:center}
.tab-tangga{display:flex;justify-content:center;margin-bottom:14px}
.tab-tangga span{display:inline-block;transform:translateZ(0);background:var(--emas);color:var(--hitam);font-family:var(--fon-judul);font-size:.95rem;letter-spacing:.2em;padding:7px 18px 7px 22px;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
.judul-bagian{font-size:2rem;margin:0 0 14px;color:var(--merah-gelap);text-transform:uppercase;letter-spacing:.06em}
.judul-sub{font-size:1.35rem;color:var(--merah-gelap);margin:34px 0 8px}
.label-contoh{font-size:.8rem;color:var(--merah)}
.salam{font-family:var(--fon-aksen);font-style:italic;font-size:1.3rem;color:var(--merah);margin:0 0 6px}
.ayat{font-family:var(--fon-aksen);font-style:italic;font-size:1.22rem;max-width:520px;margin:10px auto 2px}
.sumber-ayat{font-size:.85rem;color:#7A6A55;margin:0 0 14px}

/* ---------- Gerak bertangga (teks) ---------- */
/* Clip ditaruh pada span DALAM (.langkah-dalam) yang dibungkus oleh JS:
   elemen luar .bertangga harus tetap tanpa clip agar IntersectionObserver
   dapat mengukur perpotongannya (elemen ter-clip penuh berasio 0). */
html.js-langkah .bertangga .langkah-dalam{display:inline-block;clip-path:inset(0 100% 0 0);transition:clip-path .6s steps(6,end)}
html.js-langkah .bertangga.tampak .langkah-dalam{clip-path:inset(0 0 0 0)}

/* ---------- Hitung mundur ---------- */
.hitung{margin:26px auto 10px;max-width:480px}
.label-hitung{font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--merah)}
.kisi-hitung{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sel-hitung{background:var(--hitam);border-top:4px solid var(--merah);padding:10px 2px 8px;color:var(--krem)}
.angka-hitung{display:block;font-family:var(--fon-judul);font-size:1.7rem;color:var(--emas-terang)}
.label-angka{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}

/* ---------- Mempelai ---------- */
.profil{margin:30px 0 6px}
/* Promosi lapisan (translateZ(0)): clip-path bertakik + strip gradasi pada
   bingkai diraster SEKALI sebagai lapisan kompositor, bukan dicat ulang
   tiap frame gulir — terukur pada uji kehalusan Bagian E (frame >32ms
   turun dari +-23% ke +-5% pada throttle CPU 4x). Tampilan tidak berubah. */
.bingkai-foto{position:relative;margin:0 auto;max-width:400px;border:0;padding:0;background:var(--hitam-2);transform:translateZ(0);
  clip-path:polygon(28px 0,100% 0,100% calc(100% - 28px),calc(100% - 14px) calc(100% - 28px),calc(100% - 14px) calc(100% - 14px),calc(100% - 28px) calc(100% - 14px),calc(100% - 28px) 100%,0 100%,0 28px,14px 28px,14px 14px,28px 14px)}
.bingkai-foto::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;z-index:2;
  background:repeating-linear-gradient(45deg,var(--emas) 0 8px,var(--merah) 8px 16px,var(--hitam) 16px 24px)}
.bingkai-foto img{width:100%;height:auto}
.bingkai-foto.lebar{max-width:560px}
.bungkus-nama{margin-top:18px}
.nama-mempelai{font-size:1.9rem;margin:0;color:var(--merah-gelap)}
.orangtua{margin:8px 0 6px}
.tautan-ig{color:var(--merah);font-weight:400;text-decoration:none;border-bottom:1px solid var(--emas);padding:6px 2px;display:inline-block;min-height:44px;line-height:32px}
.pemisah-amp{font-family:var(--fon-aksen);font-style:italic;font-size:2.2rem;color:var(--emas);margin:6px 0 0}

/* ---------- Kisah ---------- */
.daftar-kisah{list-style:none;margin:8px 0;padding:0;text-align:left}
.daftar-kisah li{border-left:4px solid var(--emas);background:#FFFDF6;padding:16px 18px;margin:0 0 14px}
.tahun-kisah{font-family:var(--fon-judul);color:var(--merah);font-size:1.05rem;margin:0;letter-spacing:.2em}
.judul-kisah{margin:2px 0 6px;font-size:1.25rem;color:var(--merah-gelap)}
.daftar-kisah p{margin:0 0 4px}

/* ---------- Acara ---------- */
.kartu-acara{background:var(--hitam);color:var(--krem);padding:26px 20px;margin:0 0 18px;text-align:center;border-top:6px solid var(--merah)}
.kartu-acara h3{font-size:1.5rem;margin:0 0 8px;color:var(--emas-terang)}
.tanggal-acara{font-family:var(--fon-aksen);font-style:italic;font-size:1.15rem;color:#FFF8EA}
.kartu-acara p{color:var(--krem)}
.baris-tombol{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.tombol-aksi{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 22px;background:var(--merah);color:#FFF8EA;border:1px solid var(--emas);font-size:.98rem;text-decoration:none}
.tombol-aksi:hover{background:var(--merah-gelap)}
.tombol-aksi.sekunder{background:transparent;color:var(--emas-terang)}
.ket-unduh{font-size:.85rem;color:#7A6A55}

/* ---------- Galeri: deret alat tenun satu kolom ---------- */
.deret-galeri{display:flex;flex-direction:column;gap:26px;margin-top:10px}
.baris-galeri{margin:0;width:calc(100% - 24px);text-align:left}
.baris-galeri:nth-child(even){align-self:flex-end}
.baris-galeri .bingkai-foto{max-width:none;width:100%;display:block;text-align:left}
.baris-galeri figcaption{font-family:var(--fon-aksen);font-style:italic;font-size:1.02rem;color:#6B543E;margin-top:8px}
html.js-langkah .baris-galeri .bingkai-foto img{clip-path:inset(0 0 100% 0);transition:clip-path .6s steps(5,end)}
html.js-langkah .baris-galeri .bingkai-foto.tampak img{clip-path:inset(0 0 0 0)}

/* ---------- Amplop ---------- */
.kartu-amplop{background:#FFFDF6;border:1px solid var(--emas);border-left:6px solid var(--merah);padding:18px;margin:0 0 14px}
.bank-amplop{font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--merah);margin:0}
.nomor-amplop{font-family:var(--fon-judul);font-size:1.5rem;letter-spacing:.08em;margin:6px 0 2px;overflow-wrap:anywhere}
.pemilik-amplop{margin:0 0 12px;font-size:.92rem}

/* ---------- RSVP ---------- */
.label-demo{background:#F6E7C8;border:1px dashed var(--merah);padding:12px 14px;font-size:.92rem;text-align:left}
form{text-align:left;max-width:480px;margin:18px auto 0}
form label{display:block;font-weight:500;margin:14px 0 4px}
form input,form select,form textarea{width:100%;min-height:48px;padding:10px 12px;font:inherit;background:#FFFDF6;border:1px solid #B99B5F;border-radius:0;color:var(--tinta)}
form textarea{min-height:84px}
#tombolKirim{width:100%;min-height:52px;margin-top:16px;background:var(--merah);color:#FFF8EA;border:2px solid var(--emas);font-size:1.02rem;letter-spacing:.08em}
.pesan-form{min-height:1.4em;font-size:.95rem;color:var(--merah-gelap)}
.daftar-ucapan{max-width:480px;margin:10px auto 0;text-align:left}
.kartu-ucapan{background:#FFFDF6;border-left:4px solid var(--emas);padding:12px 14px;margin:0 0 10px}
.kartu-ucapan .nama-ucapan{font-family:var(--fon-judul);color:var(--merah-gelap);margin:0}
.kartu-ucapan .status-ucapan{font-size:.8rem;color:var(--merah);text-transform:uppercase;letter-spacing:.1em}
.kartu-ucapan p{margin:4px 0 0;overflow-wrap:anywhere}

/* ---------- Penutup ---------- */
.penutup{padding-bottom:64px}
.penutup .bingkai-foto{margin-bottom:22px}
.nama-penutup{font-family:var(--fon-judul);font-size:2.1rem;color:var(--merah-gelap);margin:4px 0}
.ket-contoh{font-size:.8rem;color:#7A6A55;max-width:440px;margin:14px auto 0}

/* ---------- Bilah kontrol musik & jelajah otomatis ----------
   Melayang di bawah-tengah seperti Parang Keraton; badan halaman diberi
   bantalan bawah 84px setelah dibuka sehingga tidak ada konten yang
   tertutup permanen oleh bilah. Kedua tombol teks >=44px. */
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(23,18,15,.96);border:1px solid var(--emas)}
#bilahKontrol[hidden]{display:none}
#bilahKontrol button{min-height:44px;padding:0 16px;background:transparent;color:var(--emas-terang);border:1px solid var(--emas);font-size:.92rem;letter-spacing:.04em;white-space:nowrap}
#bilahKontrol button:active{background:rgba(201,162,39,.22)}
#bilahKontrol button[disabled]{opacity:.55;cursor:default}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(15,10,8,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:94vw;max-height:70vh;object-fit:contain}
.lb-keterangan{color:var(--krem);font-family:var(--fon-aksen);font-style:italic;font-size:1.1rem;margin:0;text-align:center}
.lb-tombol{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.lb-tombol button{min-height:48px;padding:10px 18px;background:var(--merah);color:#FFF8EA;border:1px solid var(--emas);font-size:.95rem}

/* ---------- Pramuat (retrofit): "menyiapkan sampir" ----------
   Lapisan tetap di atas segalanya; tidak menggeser layout karena
   position:fixed. Hanya tampil di bawah html.js-aktif — tanpa JS
   ia display:none dan halaman utuh terbaca. Keluarnya meniru kain
   sampir yang TERANGKAT berjenjang (steps), sama seperti saat
   sampul dibuka. */
#pramuat{display:none}
html.js-aktif #pramuat{position:fixed;inset:0;z-index:80;background:var(--hitam);color:var(--krem);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;
  transition:transform .5s steps(5,end)}
html.js-aktif #pramuat.pramuat-selesai{transform:translateY(-102%)}
.pramuat-pita{position:absolute;top:0;left:0;right:0;height:64px;
  background:
    repeating-linear-gradient(0deg, transparent 0 9px, rgba(201,162,39,.6) 9px 11px),
    repeating-linear-gradient(90deg, var(--merah) 0 24px, var(--hitam) 24px 48px);
  border-bottom:3px solid var(--emas)}
.pramuat-pita::after{content:"";position:absolute;top:100%;left:0;right:0;height:14px;
  background:repeating-linear-gradient(90deg, var(--emas) 0 3px, transparent 3px 10px)}
.pramuat-dalam{position:relative;padding:84px 24px 40px;max-width:430px}
.pramuat-judul{font-family:var(--fon-judul);font-size:1.65rem;line-height:1.25;margin:2px 0 20px;color:#FFF8EA}
.pramuat-deret{display:flex;gap:12px;justify-content:center;margin:0 0 18px}
.pramuat-segmen{width:24px;height:24px;transform:rotate(45deg);background:var(--hitam-2);
  border:2px solid rgba(201,162,39,.4)}
.pramuat-segmen.siap{background:repeating-linear-gradient(45deg,var(--emas) 0 6px,var(--merah) 6px 12px,var(--hitam) 12px 18px);
  border-color:var(--emas)}
.pramuat-jalur{height:5px;background:var(--hitam-2);border:1px solid rgba(201,162,39,.45);max-width:280px;margin:0 auto 14px}
#pramuatIsi{display:block;height:100%;width:0;background:var(--emas)}
.pramuat-status{font-size:.95rem;margin:0;color:var(--krem)}
#pramuatHitung{color:var(--emas-terang);letter-spacing:.1em;font-size:.88rem}
.pramuat-undakan{position:absolute;bottom:0;left:0;width:100%;height:26px;fill:var(--merah)}

@media (max-width:380px){ .nama-sampul{font-size:2.2rem} .judul-bagian{font-size:1.7rem} }
@media (min-width:768px){ .nama-sampul{font-size:3.2rem} .bagian{padding-top:72px} }
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  html.js-langkah .bertangga .langkah-dalam,html.js-langkah .baris-galeri .bingkai-foto img{clip-path:none;transition:none}
  html.js-langkah .kain-sampir{animation:none}
  html.js-langkah #sampul{transition:none}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}