/* Surat Cinta (SL-01) — kertas krem, tinta cokelat-hitam, lilin merah tua.
   Gerak khas: membalik lembar (rotateX poros bawah, transform/opacity saja). */
:root{
  --kertas:#F6EEDC; --kertas-terang:#FBF6E9; --tinta:#3B2F2A; --tinta-lembut:#6B584C;
  --lilin:#8E3B2F; --rami:#A98F6D; --emas-tepi:#C9A227;
  --durasi-balik:.65s;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
html.gerak-dikurangi{scroll-behavior:auto}
body{
  font-family:"EB Garamond",Georgia,serif; color:var(--tinta); background:#4A382C;
  background-image:radial-gradient(ellipse at 50% 30%,#6B4F3A 0%,#4A382C 55%,#382A20 100%);
  min-height:100dvh; -webkit-font-smoothing:antialiased;
}
body.kunci-scroll{overflow:hidden}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;color:inherit}
h1,h2{font-weight:500}

/* ---------- Preloader ---------- */
.preloader{position:fixed;inset:0;z-index:90;background:var(--kertas);display:flex;align-items:center;justify-content:center;transition:opacity .55s ease,visibility .55s}
.preloader.hilang{opacity:0;visibility:hidden;pointer-events:none}
html.tanpa-js .preloader{display:none}
.preloader-isi{text-align:center;padding:1.5rem}
.preloader-judul{letter-spacing:.28em;text-transform:uppercase;font-size:.8rem;margin:1rem 0;color:var(--tinta-lembut)}
.bilah-muat{width:200px;height:4px;background:#E2D3AF;border-radius:2px;margin:.8rem auto;overflow:hidden}
.bilah-muat i{display:block;height:100%;width:0;background:var(--lilin);transition:width .3s ease}
.status-muat{font-size:.9rem;color:var(--tinta-lembut)}
.segel{width:84px;height:84px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#A84A3C,var(--lilin) 60%,#71301F);color:#F6EEDC;display:flex;align-items:center;justify-content:center;font-size:1.05rem;letter-spacing:.08em;box-shadow:0 0 0 2px var(--emas-tepi) inset,0 6px 18px rgba(59,47,42,.35);margin:0 auto;position:relative}
.segel-kecil{width:58px;height:58px;font-size:.8rem;animation:denyut 1.6s ease-in-out infinite}
@keyframes denyut{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* ---------- Panggung & babak ---------- */
.panggung{position:relative;max-width:430px;margin:0 auto;background:var(--kertas)}
.js .panggung{perspective:1400px}
.babak,.zona-gb{background:var(--kertas);padding:1.4rem 1.2rem 7.5rem}
.lembar-kertas{background:var(--kertas-terang);border:1px solid #E7D9B8;border-radius:6px;padding:1.6rem 1.3rem;box-shadow:0 2px 10px rgba(59,47,42,.08)}
.lembar-kertas.tengah{text-align:center}
.lembar-kertas.lebar{padding-bottom:1.6rem}
.label-lembar{letter-spacing:.3em;text-transform:uppercase;font-size:.68rem;color:var(--rami);text-align:center;margin-bottom:1.1rem}
.teks-cerita{font-size:1.28rem;line-height:1.65}
.teks-salam{font-size:1.3rem;line-height:1.6}
.teks-isi{font-size:1.05rem;line-height:1.6;color:var(--tinta-lembut);margin:.5rem 0}
.kutipan{margin-top:1.6rem;text-align:center}
.kutipan p{font-style:italic;font-size:1.25rem}
.kutipan cite{display:block;margin-top:.6rem;font-style:normal;letter-spacing:.2em;font-size:.8rem;color:var(--rami)}
.tanda-tangan-kecil{font-family:"Pinyon Script",cursive;font-size:1.9rem;text-align:center;margin-top:1.8rem;color:var(--lilin)}
.judul-babak{font-size:1.9rem;text-align:center;margin-bottom:.6rem}
.judul-kisah{font-size:1.45rem;margin-bottom:.7rem}
.nama-mempelai{font-size:1.55rem;line-height:1.3;margin-bottom:.6rem}
.orang-tua{font-size:1.05rem;line-height:1.55;color:var(--tinta-lembut)}
.tanggal-besar{font-size:1.35rem;margin:.4rem 0}
.tempat{font-size:1.25rem;font-weight:500;margin-top:.8rem}

/* Mode panggung (JS): hanya babak aktif tampil, tinggi 100dvh, gulir terkunci */
.js body.mode-panggung .panggung, .js .mode-panggung .panggung{height:100dvh;overflow:hidden}
.js .mode-panggung .babak{display:none;height:100dvh;overflow:hidden;position:relative}
.js .mode-panggung .babak.aktif{display:flex;flex-direction:column;justify-content:center}
.js .mode-panggung .babak.babak-foto.aktif{justify-content:flex-start}
.js .mode-panggung .zona-gb{display:none}
.js .mode-panggung .babak-turut[data-mode="GB"]{display:none}
/* Mode GB (JS): zona bebas tampil gulir normal, babak LP sembunyi */
.js .mode-gb .babak{display:none}
.js .mode-gb .zona-gb{display:none}
.js .mode-gb .zona-gb.aktif-gb{display:block;min-height:100dvh}
.js .mode-gb .babak-turut[data-mode="GB"].aktif-gb{display:block;min-height:100dvh;height:auto;overflow:visible}
/* Belum dibuka (JS): hanya sampul */
.js .belum-dibuka .babak,.js .belum-dibuka .zona-gb{display:none}
.js .belum-dibuka #sampul{display:flex;height:100dvh}

/* Transisi membalik lembar */
.babak{transform-origin:50% 100%}
.babak.menunggu{opacity:.82;filter:brightness(.92)}
.babak.keluar{transition:transform var(--durasi-balik) ease-out,opacity var(--durasi-balik) ease-out;z-index:3;will-change:transform,opacity;transform:translateZ(0)}
.babak.keluar-maju.pergi{transform:rotateX(64deg) translateY(-4%);opacity:0}
.babak.keluar-mundur.pergi{transform:rotateX(-64deg) translateY(-4%);opacity:0}
.bayangan-lembar{position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(to top,rgba(59,47,42,.35),transparent);opacity:0;pointer-events:none}
.babak.keluar .bayangan-lembar{opacity:.8;transition:opacity var(--durasi-balik) ease-out}

/* ---------- Sampul amplop: tepat 1 layar ---------- */
#sampul{height:100dvh;max-height:100dvh;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:1rem;background:linear-gradient(160deg,#7A5C43,#4A382C)}
.amplop-bungkus{width:100%;transform-origin:50% 50%}
.amplop{background:var(--kertas-terang);border:1px solid #E0CFA4;border-radius:8px;box-shadow:0 18px 40px rgba(0,0,0,.35);overflow:hidden;position:relative}
.lipatan-atas{height:64px;background:linear-gradient(to bottom,#EFE3C2,var(--kertas));clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;transition:transform .7s ease-out}
#sampul.membuka .lipatan-atas{transform:rotateX(160deg)}
.amplop-badan{padding:1.1rem 1.3rem 1.6rem;text-align:center}
.nama-sampul{font-size:2.3rem;line-height:1.15;margin:.3rem 0}
.nama-sampul .dan,.tanda-tangan .dan{font-family:"Pinyon Script",cursive;color:var(--lilin)}
.tanggal-sampul{letter-spacing:.14em;font-size:.92rem;color:var(--tinta-lembut)}
.blok-tamu{margin:1.1rem 0}
.kepada{font-size:.92rem;color:var(--tinta-lembut)}
.nama-tamu{font-size:1.2rem;font-weight:500;margin:.25rem 0}
.maaf{font-size:.78rem;color:var(--rami)}
.tombol-segel{background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:.7rem;margin:.4rem auto 0;min-height:44px;padding:.4rem}
.tombol-segel .segel{overflow:hidden}
.tombol-segel .monogram{position:relative;z-index:2}
.segel-belahan{position:absolute;top:0;bottom:0;width:50%;background:inherit;transition:transform .55s ease-out,opacity .55s}
.segel-belahan.kiri{left:0;border-radius:50% 0 0 50%}
.segel-belahan.kanan{right:0;border-radius:0 50% 50% 0}
#sampul.membuka .segel-belahan.kiri{transform:translate(-46%,10%) rotate(-24deg);opacity:0}
#sampul.membuka .segel-belahan.kanan{transform:translate(46%,10%) rotate(24deg);opacity:0}
#sampul.membuka .monogram{opacity:0;transition:opacity .3s}
.teks-buka{font-size:1.02rem;letter-spacing:.06em;border-bottom:1px solid var(--lilin);padding-bottom:.15rem}
.tombol-lanjut-posisi{margin-top:1rem;min-height:48px;padding:.6rem 1.2rem;border:1.5px solid var(--lilin);border-radius:999px;background:var(--kertas);font-size:1rem}

/* ---------- Babak foto ---------- */
.babak-foto{padding:0 0 7.5rem}
.js .mode-panggung .babak-foto.aktif{padding-bottom:6.8rem}
.foto-sebidang{position:relative;flex:1 1 auto;min-height:0}
.foto-sebidang img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.foto-sebidang figcaption{position:absolute;left:0;right:0;bottom:0;background:var(--kertas-terang);font-style:italic;font-size:.92rem;color:var(--tinta-lembut);padding:.5rem .9rem;border-top:1px solid #E7D9B8}
.kertas-bawah{border-radius:0;border-left:none;border-right:none;border-bottom:none;flex:0 0 auto}

/* ---------- Hitung mundur ---------- */
.hitung-mundur{display:flex;gap:.6rem;justify-content:center;margin:1.4rem 0}
.kotak-waktu{background:var(--kertas);border:1px solid #E0CFA4;border-radius:6px;min-width:64px;padding:.7rem .3rem}
.kotak-waktu .angka{display:block;font-size:1.8rem;font-weight:500}
.kotak-waktu .label{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rami)}

/* ---------- Tombol umum ---------- */
.tombol-aksi{display:flex;flex-direction:column;gap:.7rem;margin-top:1.3rem;align-items:stretch}
.tombol-utama,.tombol-garis{min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:.7rem 1.2rem;border-radius:999px;font-size:1rem;text-decoration:none}
.tombol-utama{background:var(--lilin);color:#FBF6E9;border:1.5px solid var(--lilin)}
.tombol-garis{background:transparent;color:var(--tinta);border:1.5px solid var(--rami)}
.tombol-lanjut-gb{width:100%;margin-top:1.6rem}

/* ---------- Busana ---------- */
.noda-warna{display:flex;gap:1.2rem;justify-content:center;margin:1.2rem 0}
.noda-warna figure{text-align:center}
.noda{display:block;width:56px;height:56px;border-radius:48% 52% 55% 45%/52% 46% 54% 48%;border:1px solid rgba(59,47,42,.25);margin:0 auto .4rem}
.noda-warna figcaption{font-size:.9rem;color:var(--tinta-lembut)}

/* ---------- Galeri GB ---------- */
.kisi-galeri{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1.1rem}
.kisi-galeri figure{cursor:pointer}
.kisi-galeri img{width:100%;height:180px;object-fit:cover;border-radius:4px}
.kisi-galeri figcaption{font-style:italic;font-size:.88rem;color:var(--tinta-lembut);padding:.35rem .1rem}

/* ---------- Amplop GB ---------- */
.kartu-pos{background:#fffdf4;border:1px dashed var(--rami);border-radius:6px;padding:1.1rem;margin-top:1rem}
.kartu-pos .bank{letter-spacing:.18em;text-transform:uppercase;font-size:.78rem;color:var(--rami)}
.kartu-pos .nomor{font-size:1.3rem;font-weight:500;margin:.45rem 0}
.kartu-pos .atas-nama{color:var(--tinta-lembut);margin-bottom:.7rem}
.kartu-pos .salin{min-height:44px}
.umpan-salin{min-height:1.4em;text-align:center;color:var(--lilin);margin-top:.7rem}

/* ---------- RSVP GB ---------- */
.label-demo{display:inline-block;background:var(--lilin);color:#FBF6E9;padding:.3rem .8rem;border-radius:999px;letter-spacing:.12em;font-size:.78rem;text-transform:uppercase;margin:.6rem auto}
.catatan-demo{font-size:.92rem;color:var(--tinta-lembut);text-align:center}
#zona-rsvp .judul-babak,#zona-rsvp .label-lembar{text-align:center}
#zona-rsvp{text-align:center}
.formulir{text-align:left;display:flex;flex-direction:column;gap:.45rem;margin-top:1.1rem}
.formulir label{font-size:.95rem;margin-top:.5rem}
.formulir input,.formulir select,.formulir textarea{font-family:inherit;font-size:1rem;padding:.65rem .8rem;border:1px solid var(--rami);border-radius:6px;background:#FFFDF6;color:var(--tinta);min-height:48px}
.formulir textarea{min-height:96px;resize:vertical}
.formulir button{margin-top:.9rem}
.daftar-ucapan{margin-top:1.4rem;text-align:left;display:flex;flex-direction:column;gap:.8rem}
.ucapan{background:var(--kertas);border:1px solid #E7D9B8;border-radius:6px;padding:.9rem 1rem}
.ucapan .u-nama{font-weight:500}
.ucapan .u-meta{font-size:.85rem;color:var(--rami)}
.ucapan .u-teks{margin-top:.3rem;line-height:1.5}

/* ---------- Turut ---------- */
.daftar-turut{margin:1rem 0 0 1.3rem;line-height:1.9;font-size:1.08rem}

/* ---------- Penutup ---------- */
.tanda-tangan{font-family:"Pinyon Script",cursive;font-size:2.6rem;color:var(--lilin);margin:.6rem 0 1.1rem}
.segel-utuh{margin:0.6rem auto}
.merek{font-size:.8rem;color:var(--rami);margin-top:1.2rem;letter-spacing:.1em}

/* ---------- Kendali panggung ---------- */
.kendali{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:430px;z-index:40;background:rgba(251,246,233,.96);border-top:1px solid #E0CFA4;padding:.5rem .9rem calc(.55rem + env(safe-area-inset-bottom))}
.progres{position:relative;height:16px;margin-bottom:.15rem}
.benang{position:absolute;left:0;right:0;top:7px;height:2px;background:#DCC9A0}
.benang i{display:block;height:100%;width:0;background:var(--rami)}
.simpul-baris{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center}
.simpul{width:9px;height:9px;border-radius:50%;background:var(--kertas);border:2px solid var(--rami);padding:0}
.simpul.terlewati{background:var(--rami)}
.simpul.simpul-gb{background:transparent;border-style:dashed}
.simpul.aktif{background:var(--lilin);border-color:var(--lilin)}
.label-posisi{text-align:center;font-size:.88rem;color:var(--tinta-lembut);letter-spacing:.04em}
.baris-kendali{display:flex;gap:.5rem;margin-top:.35rem}
.tombol-kendali{flex:1;min-height:44px;border:1.5px solid var(--rami);border-radius:999px;background:var(--kertas-terang);font-size:.95rem;padding:.5rem .3rem}
.tombol-kendali:disabled{opacity:.42;cursor:default}
.tombol-musik{width:100%;min-height:44px;margin-top:.45rem;border:none;background:transparent;font-size:.95rem;color:var(--lilin);text-decoration:underline;text-underline-offset:3px}
.baris-samping{display:flex;gap:.5rem}
.baris-samping .tombol-musik{flex:1 1 0;width:auto;min-width:0}
.tombol-otomatis{color:var(--tinta);font-weight:600}
.tepi{position:fixed;top:16dvh;width:56px;height:56dvh;z-index:35;background:transparent;border:none;font-size:2rem;color:var(--lilin);opacity:.35;display:flex;align-items:flex-start;justify-content:center;padding-top:1rem}
.tepi-kiri{left:max(0px,calc(50% - 215px))}
.tepi-kanan{right:max(0px,calc(50% - 215px))}
.tepi.petunjuk-pudar{opacity:.12;transition:opacity .8s}

/* ---------- Daftar lembar & lightbox ---------- */
.daftar-lembar,.kotak-cahaya{position:fixed;inset:0;z-index:60;background:rgba(43,32,24,.82);display:flex;align-items:center;justify-content:center;padding:1rem}
.daftar-lembar[hidden],.kotak-cahaya[hidden]{display:none}
.daftar-kotak{background:var(--kertas-terang);border-radius:8px;padding:1.4rem;width:100%;max-width:380px;max-height:84dvh;overflow:auto}
.daftar-kotak h2{text-align:center;margin-bottom:1rem}
.daftar-kotak ol{list-style:none;display:flex;flex-direction:column;gap:.45rem;margin-bottom:1rem}
.daftar-kotak ol button{width:100%;min-height:48px;text-align:left;padding:.6rem .9rem;border:1px solid var(--rami);border-radius:6px;background:var(--kertas);font-size:1rem}
.daftar-kotak #tutupDaftar{width:100%}
.kotak-cahaya{flex-direction:column}
.kotak-cahaya img{max-height:72dvh;max-width:100%;object-fit:contain;border:6px solid var(--kertas-terang)}
#keteranganLightbox{color:#FBF6E9;margin-top:.8rem;font-style:italic}
.tombol-cahaya{position:absolute;min-width:48px;min-height:48px;border-radius:50%;border:1.5px solid #FBF6E9;background:rgba(59,47,42,.55);color:#FBF6E9;font-size:1.4rem;display:flex;align-items:center;justify-content:center}
.tombol-cahaya.tutup{top:1rem;right:1rem}
.tombol-cahaya.sebelumnya{left:.6rem;top:50%}
.tombol-cahaya.berikutnya{right:.6rem;top:50%}

.panggang{position:fixed;left:50%;transform:translateX(-50%) translateY(20px);bottom:8.5rem;z-index:70;background:var(--tinta);color:#FBF6E9;padding:.7rem 1.1rem;border-radius:999px;font-size:.95rem;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;max-width:92vw;text-align:center}
.panggang.tampil{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Tanpa JS: semua bertumpuk terbaca ---------- */
html.tanpa-js .kendali,html.tanpa-js .tepi{display:none!important}
html.tanpa-js .babak,html.tanpa-js .zona-gb{display:block;height:auto;min-height:0}
html.tanpa-js #sampul{height:auto;max-height:none}
html.tanpa-js .foto-sebidang img{height:60dvh}
html.tanpa-js .tombol-lanjut-gb{display:none}

/* ---------- Desktop: panggung berbingkai di tengah meja ---------- */
@media (min-width:1024px){
  .panggung{box-shadow:0 0 0 1px #2E211A,0 30px 80px rgba(0,0,0,.55);margin-top:0}
  .js .mode-panggung .panggung{height:100dvh}
  .foto-sebidang img{object-position:50% 20%}
}

/* ---------- Reduced motion: instan ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}
html.gerak-dikurangi *,html.gerak-dikurangi *::before,html.gerak-dikurangi *::after{transition:none!important;animation:none!important}