/* ================================================================
   SENJA KREM — gaya.css
   Palet: peach #F6C39A, aprikot #EE9B6A, krem hangat #FBF3E4,
   teks cokelat hangat. Serif miring Cormorant Garamond + Jost.
   Motif: bingkai busur (arch). Gerak khas: gradasi latar
   "senja bergeser" mengikuti gulir (transform saja pada lapisan
   gradasi) + sapuan cahaya sekali lewat pada nama mempelai.
   Struktur kelas mengikuti mesin pabrik (diadopsi dari Gala Noir,
   diganti total kulit visualnya).
   ================================================================ */
:root{
  --krem:#FBF3E4; --krem-2:#F7E9D2; --peach:#F6C39A; --aprikot:#EE9B6A;
  --aprikot-dalam:#C56F3D; --mawar:#BC7350; --teks:#4A3226; --teks-lembut:#93735C;
  --emas:#B98A4A; --garis:#E9D3AC; --kartu:#FFFDF8;
  --bayang:0 14px 34px rgba(140,84,44,.15);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  --arab:'Amiri',serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html.jelajah-aktif{scroll-behavior:auto}
html{overflow-x:hidden}
body{background:var(--krem);color:var(--teks);font-family:var(--sans);font-weight:400;line-height:1.7;-webkit-font-smoothing:antialiased}
body.terkunci{overflow:hidden}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--aprikot-dalam);outline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:500}
button{font-family:var(--sans)}
a{color:var(--aprikot-dalam)}

/* ---------- Lapisan gradasi "senja bergeser" (gerak khas) ---------- */
.lapisan-senja{
  position:fixed;left:0;right:0;top:-10%;height:120%;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    #F9CF9F 0%, #F8BE92 16%, #F6CFA6 32%, #FAE3C2 48%,
    #FBEFD9 62%, #F9E7C6 78%, #F5CD9C 100%);
}

main{max-width:480px;margin:0 auto;padding-bottom:5.5rem;position:relative}
.bagian{position:relative;padding:3.4rem 1.4rem 2.8rem;text-align:center}
.bagian::before{content:"";position:absolute;top:0;left:14%;right:14%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--aprikot),transparent);
  transform:scaleX(0);transform-origin:center;transition:transform 1.1s ease}
section.senja-aktif.bagian::before{transform:scaleX(1)}
.label-bagian{letter-spacing:.4em;text-transform:uppercase;font-size:.68rem;color:var(--mawar);margin:0 0 .8rem;font-weight:500}
.label-bagian.kecil{font-size:.62rem;margin-top:1.1rem}
.judul-bagian{font-size:2.05rem;line-height:1.18;margin-bottom:1.4rem;font-style:italic}
.teks-isi{color:#5D4433;max-width:34rem;margin-left:auto;margin-right:auto}
.garis{border:none;border-top:1px solid var(--garis);width:64px;margin:1.1em auto}

/* ---------- Segel monogram ---------- */
.segel{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border:1px solid var(--emas);border-radius:50%;outline:1px solid var(--garis);outline-offset:4px;font-family:var(--serif);font-size:1.18rem;color:var(--aprikot-dalam);background:rgba(255,253,248,.6)}

/* ---------- Bingkai busur (arch) ---------- */
.bingkai{margin:0 auto;background:var(--kartu);padding:8px;border:1px solid var(--garis);box-shadow:var(--bayang);border-radius:999px 999px 16px 16px}
.bingkai img{width:100%;height:auto;object-fit:cover;border-radius:999px 999px 10px 10px}
.sampul-foto{max-width:11.6em;padding:.55em}
.sampul-foto img{aspect-ratio:4/5;object-position:center 26%}
.kartu-mempelai .bingkai{max-width:250px}
.kartu-mempelai .bingkai img{aspect-ratio:3/4}
#fotoWanita{object-position:center 20%}
#fotoPria{object-position:center 26%}
.bingkai.bersama{max-width:400px;border-radius:18px;padding:8px}
.bingkai.bersama img{aspect-ratio:4/3;border-radius:12px;object-position:center 55%}
.bingkai.penutup-foto{max-width:290px}
.bingkai.penutup-foto img{aspect-ratio:4/5;object-position:center 26%}

/* ---------- Preloader bertema ---------- */
#preloader{display:none}
html.js #preloader{position:fixed;inset:0;z-index:90;background:linear-gradient(180deg,#F9CF9F,#FAE7C8 55%,#FBF3E4);display:flex;align-items:center;justify-content:center;text-align:center}
html.pre-selesai #preloader{opacity:0;pointer-events:none;transition:opacity .35s ease}
.pre-dalam{padding:24px}
.pre-matahari{width:54px;height:54px;margin:0 auto 16px;border-radius:50%;
  background:radial-gradient(circle at 50% 42%,#FBD9A8 0%,#F6B26E 55%,#EE9B6A 100%);
  box-shadow:0 0 0 10px rgba(246,179,106,.18),0 0 44px rgba(238,155,106,.45);
  animation:napasMatahari 2.6s ease-in-out infinite}
@keyframes napasMatahari{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.pre-nama{font-family:var(--serif);font-style:italic;font-size:1.5rem;margin-top:14px;color:var(--teks)}
.pre-jalur{width:180px;height:4px;border-radius:4px;background:rgba(185,138,74,.25);margin:16px auto 0;overflow:hidden}
.pre-jalur span{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--peach),var(--aprikot-dalam));transition:width .5s ease}
.pre-status{margin-top:12px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teks-lembut)}

/* ---------- Sampul ---------- */
#sampul{position:relative;height:100dvh;max-height:100dvh;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;
  background:linear-gradient(180deg,#F9CD9D 0%,#F8C69C 34%,#FAE7C8 74%,#FBF3E4 100%)}
html.js #sampul{position:fixed;inset:0;z-index:60}
.cahaya-buka{position:absolute;inset:0;pointer-events:none;opacity:0;will-change:opacity;
  background:radial-gradient(circle at 50% 38%,rgba(255,240,205,.95) 0%,rgba(255,214,160,.45) 34%,transparent 68%)}
#sampul.terbuka .cahaya-buka{animation:cahayaMembuka 1.25s ease-out 1 forwards}
@keyframes cahayaMembuka{0%{opacity:0}35%{opacity:1}100%{opacity:.55}}
.isi-sampul{font-size:16px;display:flex;flex-direction:column;align-items:center;gap:.55em;padding:1em .9em;width:100%;max-width:26em;position:relative}
.label-atas{font-size:.72em;letter-spacing:.34em;text-transform:uppercase;color:var(--mawar)}
.nama-sampul{font-style:italic;font-weight:500;font-size:1.62em;line-height:1.22;color:var(--teks)}
.nama-sampul .dan{font-size:.72em;color:var(--aprikot-dalam)}
.tanggal-sampul{font-size:.86em;letter-spacing:.16em;text-transform:uppercase;color:var(--teks-lembut)}
.hormat{font-size:.82em;color:var(--teks-lembut)}
.nama-tamu{font-family:var(--serif);font-weight:600;font-size:1.3em;margin-top:.1em}
.tombol-buka{margin-top:.55em;min-height:50px;padding:.8em 2em;border-radius:999px;border:1px solid var(--aprikot-dalam);
  background:var(--aprikot-dalam);color:#FFF8EE;font-size:.92em;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  box-shadow:0 10px 24px rgba(197,111,61,.35);transition:background .25s ease,transform .25s ease}
.tombol-buka:hover,.tombol-buka:focus-visible{background:#A85A2F;transform:translateY(-1px)}

/* ---------- Sapuan cahaya sekali lewat pada nama (gerak khas) ---------- */
.nama-sapuan{position:relative;overflow:hidden}
.nama-sapuan::after{content:"";position:absolute;top:0;bottom:0;left:0;width:55%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,244,214,0) 0%,rgba(255,244,214,.95) 50%,rgba(255,244,214,0) 100%);
  transform:translateX(-190%) skewX(-12deg)}
.nama-sapuan.menyapu::after{transform:translateX(320%) skewX(-12deg);transition:transform 1.5s ease .1s}

/* ---------- Pembuka ---------- */
.teks-arab{font-family:var(--arab);font-size:1.65rem;line-height:2;color:var(--aprikot-dalam);margin-bottom:14px}
.salam{font-family:var(--serif);font-weight:600;font-size:1.32rem}
.ayat{margin:22px auto 0;max-width:34rem}
.ayat p{font-style:italic;color:#5D4433}
.ayat cite{display:block;margin-top:10px;font-style:normal;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--teks-lembut)}
#paragrafPembuka{margin-top:24px}

/* ---------- Mempelai ---------- */
.kartu-mempelai{background:var(--kartu);border:1px solid var(--garis);border-radius:22px;padding:28px 20px 24px;box-shadow:var(--bayang);margin-bottom:6px}
.nama-mempelai{font-style:italic;font-weight:600;font-size:1.58rem;line-height:1.22;margin-top:.2rem}
.orangtua{margin-top:8px;font-size:.9rem;color:var(--teks-lembut)}
.tautan-ig{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;padding:6px 14px;font-size:.86rem;letter-spacing:.06em;text-decoration:none;border-bottom:1px solid var(--peach)}
.dan-besar{font-family:var(--serif);font-style:italic;font-size:1.9rem;color:var(--aprikot-dalam);margin:8px 0}

/* ---------- Hitung mundur ---------- */
.hitung{display:flex;gap:10px;justify-content:center;margin:1.2rem 0 .6rem}
.kotak-waktu{flex:1;max-width:96px;padding:14px 4px 10px;background:linear-gradient(180deg,#FFF6E6,#FBEEDB);border:1px solid var(--garis);border-radius:48px 48px 12px 12px}
.kotak-waktu .angka{display:block;font-family:var(--serif);font-size:1.8rem;font-weight:600;line-height:1;color:var(--aprikot-dalam)}
.kotak-waktu .label{display:block;margin-top:5px;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--teks-lembut)}
.label-hitung{font-size:.86rem;color:var(--teks-lembut)}
.tombol-utama{min-height:48px;padding:10px 24px;border-radius:999px;border:1px solid var(--aprikot-dalam);background:var(--aprikot-dalam);color:#FFF8EE;font-size:.92rem;letter-spacing:.08em;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.tombol-utama:hover{background:#A85A2F}
.tombol-utama.penuh{width:100%}
#tombolKalender{margin-top:16px}
.pesan-kalender{font-size:.84rem;color:var(--aprikot-dalam);min-height:1.3em;margin-top:10px}

/* ---------- Acara ---------- */
.kartu-acara{background:var(--kartu);border:1px solid var(--garis);border-radius:22px;padding:30px 22px 26px;box-shadow:var(--bayang);margin-bottom:20px}
.kartu-acara h3{font-style:italic;font-weight:600;font-size:1.7rem}
.kartu-acara .tanggal-besar{font-family:var(--serif);font-size:1.22rem;margin-top:6px;color:var(--teks)}
.kartu-acara p{margin-top:4px}
.kartu-acara .tempat{font-weight:500;margin-top:10px}
.tombol-peta{display:inline-flex;align-items:center;min-height:48px;margin-top:16px;padding:10px 22px;border:1px solid var(--aprikot-dalam);border-radius:999px;color:var(--aprikot-dalam);text-decoration:none;font-size:.9rem;letter-spacing:.06em}
.tombol-peta:hover{background:rgba(238,155,106,.14)}

/* ---------- Galeri ---------- */
.kisi-galeri{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:1.2rem}
.kisi-galeri figure{text-align:center}
.kisi-galeri button{display:block;width:100%;padding:6px;background:var(--kartu);border:1px solid var(--garis);border-radius:100px 100px 12px 12px;box-shadow:var(--bayang);cursor:pointer}
.kisi-galeri button img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:center 35%;border-radius:94px 94px 8px 8px}
.kisi-galeri figcaption{font-family:var(--serif);font-style:italic;font-size:1rem;padding:8px 4px 0;color:var(--teks)}

/* ---------- Amplop ---------- */
.kartu-amplop{background:var(--kartu);border:1px solid var(--garis);border-radius:18px;padding:24px 20px;box-shadow:var(--bayang);margin:16px 0}
.kartu-amplop .bank{letter-spacing:.26em;text-transform:uppercase;font-size:.74rem;color:var(--mawar);font-weight:500}
.kartu-amplop .nomor{font-family:var(--serif);font-size:1.5rem;font-weight:600;letter-spacing:.04em;margin:6px 0 2px;overflow-wrap:anywhere}
.kartu-amplop .atas-nama{font-size:.88rem;color:var(--teks-lembut)}
.tombol-salin{min-height:48px;padding:10px 24px;margin-top:12px;border-radius:999px;border:1px solid var(--aprikot-dalam);background:transparent;color:var(--aprikot-dalam);font-size:.9rem;cursor:pointer}
.tombol-salin:hover{background:rgba(238,155,106,.14)}
.pesan-salin{font-size:.84rem;color:var(--aprikot-dalam);min-height:1.2em;margin-top:8px}

/* ---------- RSVP (MODE DEMO) ---------- */
.label-demo{display:inline-block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;border:1px dashed var(--mawar);color:var(--mawar);border-radius:999px;padding:6px 14px;margin-bottom:18px;background:rgba(255,253,248,.7)}
#formulirRsvp{background:var(--kartu);border:1px solid var(--garis);border-radius:22px;box-shadow:var(--bayang);padding:24px 20px;text-align:left;display:grid;gap:13px}
#formulirRsvp label{display:grid;gap:6px;font-size:.85rem;letter-spacing:.05em}
#formulirRsvp input,#formulirRsvp select,#formulirRsvp textarea{font-family:inherit;font-size:1rem;color:var(--teks);background:#FFF9EF;border:1px solid var(--garis);border-radius:.7rem;min-height:48px;padding:10px 12px;width:100%}
#formulirRsvp textarea{min-height:80px;resize:vertical}
.pesan-form{font-size:.85rem;color:var(--mawar);min-height:1.2em}
#daftarUcapan{margin-top:20px;display:grid;gap:12px;text-align:left}
.ucapan-item{background:rgba(255,253,248,.88);border:1px solid var(--garis);border-radius:14px;padding:13px 16px}
.ucapan-item strong{font-family:var(--serif);font-size:1.08rem}
.ucapan-item .meta{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--aprikot-dalam)}
.ucapan-item p{font-size:.9rem;color:#5D4433;margin-top:3px}
.ucapan-kosong{font-size:.88rem;color:var(--teks-lembut);text-align:center}

/* ---------- Penutup ---------- */
.turut{margin-top:22px}
.turut ul{list-style:none}
.turut li{font-size:.9rem;color:var(--teks-lembut);margin:2px 0}
#penutup .salam{margin-top:24px}
#monogramPenutup{margin-top:16px}
.tanda-tangan{font-family:var(--serif);font-style:italic;font-weight:600;font-size:1.85rem;margin-top:12px}
.kredit-musik{margin-top:30px;font-size:.72rem;color:var(--teks-lembut)}
.catatan-demo{margin-top:6px;font-size:.68rem;color:#B99B7D}

/* ---------- Lightbox ---------- */
#lightbox{position:fixed;inset:0;z-index:80;background:rgba(46,28,18,.94);display:flex;align-items:center;justify-content:center;gap:6px;padding:16px}
#lightbox[hidden]{display:none}
.lb-isi{max-width:min(88vw,420px);text-align:center}
.lb-isi img{max-height:74dvh;width:auto;max-width:100%;margin:0 auto;border-radius:14px;object-fit:contain}
.lb-isi figcaption{color:#F6E3C8;font-family:var(--serif);font-style:italic;font-size:1.05rem;margin-top:12px}
.lb-tombol{min-width:48px;min-height:48px;padding:10px 16px;border-radius:999px;border:1px solid rgba(246,227,200,.5);background:transparent;color:#F6E3C8;cursor:pointer;font-size:.9rem}
.lb-tutup{position:absolute;top:calc(12px + env(safe-area-inset-top));right:12px}
.lb-nav{flex:none}

/* ---------- Bilah kontrol ---------- */
#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;border-radius:999px;background:rgba(255,250,238,.92);border:1px solid var(--emas);box-shadow:0 8px 22px rgba(140,84,44,.25)}
#bilahKontrol[hidden]{display:none}
#bilahKontrol button{min-height:44px;padding:0 16px;background:transparent;color:var(--aprikot-dalam);border:1px solid var(--garis);border-radius:999px;font-size:.9rem;letter-spacing:.03em;cursor:pointer;white-space:nowrap}
#bilahKontrol button[disabled]{opacity:.55;cursor:default}

/* ---------- Ungkap (hanya disembunyikan bila JS aktif) ---------- */
html.js .ungkap{opacity:0;transform:translateY(14px)}
html.js .ungkap.terlihat{opacity:1;transform:translateY(0);transition:transform var(--durasi-ungkap,.85s) cubic-bezier(.22,.61,.21,1),opacity var(--durasi-ungkap,.85s) ease}

/* ---------- Gerak dikurangi ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
  html.js .ungkap{opacity:1;transform:none}
  #sampul.terbuka .cahaya-buka{animation:none;opacity:0}
}