/* ============================================================
   SAGE LEMBUT (Basic) — gaya
   Dunia visual: kertas daur ulang hijau muda & krem, tinta
   cokelat tanah, botani garis halus. Gerak khas template ini:
   ranting garis "tumbuh" menggambar dirinya (stroke-draw) dan
   satu daun melayang turun sekali saat sampul dibuka.
   Gerakan lain hanya memakai transform/opacity.
   ============================================================ */
:root{
  --krem:#F7F2E4;
  --kertas:#FCFAF2;
  --sage:#8FA98A;
  --sage-muda:#C7D5BD;
  --sage-gelap:#5F7D5C;
  --tinta:#43382A;
  --tinta-lembut:#756852;
  --garis:#DDD2B8;
  --emas-tanah:#A4834F;
  --bayang:0 10px 30px rgba(67,56,42,.13);
  --jari:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html.jelajah-aktif{scroll-behavior:auto}
body{
  font-family:"Jost","Segoe UI",system-ui,sans-serif;
  font-weight:300;
  color:var(--tinta);
  background:
    radial-gradient(120% 60% at 50% 0%, #F1EDD8 0%, rgba(241,237,216,0) 60%),
    repeating-linear-gradient(0deg, rgba(143,169,138,.045) 0 2px, rgba(143,169,138,0) 2px 7px),
    var(--krem);
  line-height:1.65;
  overflow-x:hidden;
}
body.terkunci{overflow:hidden;height:100dvh}
img{display:block;max-width:100%}
button{font:inherit;cursor:pointer}
h1,h2,h3,.nama-sampul,.nama-mempelai,.nama-penutup,.pre-nama{
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;line-height:1.2;
}

/* ---------- Preloader ---------- */
#preloader{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:var(--krem);transition:opacity .6s ease;text-align:center;padding:24px;
}
#preloader.selesai{opacity:0;pointer-events:none}
#preloader.gagal{display:none}
.pre-dalam{display:flex;flex-direction:column;align-items:center;gap:10px}
.pre-ranting{width:54px;height:108px}
.pre-ranting path{
  fill:none;stroke:var(--sage-gelap);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:100;stroke-dashoffset:100;animation:tumbuhPre 2.2s ease forwards;
}
.pre-ranting path:nth-child(2){animation-delay:.5s}
.pre-ranting path:nth-child(3){animation-delay:.9s}
.pre-ranting path:nth-child(4){animation-delay:1.3s}
@keyframes tumbuhPre{to{stroke-dashoffset:0}}
.pre-monogram{font-family:"Cormorant Garamond",serif;font-size:2rem;color:var(--sage-gelap);letter-spacing:.14em}
.pre-monogram em{color:var(--emas-tanah);font-style:italic}
.pre-nama{font-size:1.5rem;letter-spacing:.06em}
.pre-batang{width:min(240px,70vw);height:4px;background:#E3DCC4;border-radius:99px;overflow:hidden}
.pre-batang span{display:block;height:100%;width:0;background:var(--sage);transition:width .3s ease}
.pre-teks{font-size:.85rem;color:var(--tinta-lembut);letter-spacing:.08em}

/* ---------- Sampul: tepat 1 layar ---------- */
#sampul{
  position:fixed;inset:0;z-index:100;height:100dvh;max-height:100dvh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;padding:14px 18px;
  background:
    radial-gradient(110% 55% at 50% 0%, #F1EDD8 0%, rgba(241,237,216,0) 60%),
    repeating-linear-gradient(0deg, rgba(143,169,138,.05) 0 2px, rgba(143,169,138,0) 2px 7px),
    var(--krem);
  transition:opacity .9s ease,transform .9s ease;
}
#sampul.terbuka{opacity:0;transform:scale(1.035);pointer-events:none}
.sampul-dalam{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
  width:100%;max-width:430px;max-height:100%;
}
.sampul-label{letter-spacing:.34em;text-transform:uppercase;font-size:.72rem;color:var(--sage-gelap)}
.bingkai-sampul{position:relative;width:min(66vw,252px);flex:0 1 auto;min-height:0}
.bingkai-sampul img{
  width:100%;height:auto;max-height:38dvh;object-fit:cover;aspect-ratio:4/5;
  border-radius:120px 120px var(--jari) var(--jari);box-shadow:var(--bayang);
  border:1px solid var(--garis);
}
.sudut{position:absolute;width:22px;height:22px;border:0 solid var(--emas-tanah);z-index:2}
.sudut-ki{top:-7px;left:-7px;border-top-width:2px;border-left-width:2px;border-top-left-radius:10px}
.sudut-ka{top:-7px;right:-7px;border-top-width:2px;border-right-width:2px;border-top-right-radius:10px}
.sudut-bki{bottom:-7px;left:-7px;border-bottom-width:2px;border-left-width:2px;border-bottom-left-radius:10px}
.sudut-bka{bottom:-7px;right:-7px;border-bottom-width:2px;border-right-width:2px;border-bottom-right-radius:10px}
.ranting-sampul{position:absolute;right:-40px;bottom:-6px;width:34px;height:114px;z-index:2}
.nama-sampul{font-size:clamp(1.9rem,8.6vw,2.7rem);letter-spacing:.02em}
.nama-sampul em,.nama-penutup em{color:var(--emas-tanah);font-style:italic;font-size:.78em}
.tanggal-sampul{letter-spacing:.26em;font-size:.86rem;color:var(--sage-gelap);text-transform:uppercase}
.kotak-tamu{
  margin-top:2px;background:rgba(252,250,242,.82);border:1px solid var(--garis);
  border-radius:var(--jari);padding:12px 18px 14px;width:100%;box-shadow:var(--bayang);
}
.teks-tamu{font-size:.88rem;color:var(--tinta-lembut)}
.nama-tamu{font-family:"Cormorant Garamond",serif;font-size:1.3rem;font-weight:600;margin:2px 0}
.catatan-tamu{font-size:.72rem;color:var(--tinta-lembut);margin-bottom:10px}
.tombol-utama{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;
  padding:11px 26px;border-radius:99px;border:1px solid var(--sage-gelap);
  background:var(--sage-gelap);color:#FBF8EC;font-size:.98rem;letter-spacing:.05em;
  box-shadow:0 8px 20px rgba(95,125,92,.35);transition:transform .25s ease,background .25s ease;
}
.tombol-utama:hover{background:#54704F}
.tombol-utama:active{transform:scale(.97)}
.tombol-utama svg{width:20px;height:20px;flex:0 0 auto}
.tombol-utama.lebar{width:100%}

/* Daun tunggal melayang turun — SEKALI, hanya transform/opacity */
.daun-jatuh{
  position:absolute;top:-48px;left:56%;width:34px;height:34px;opacity:0;pointer-events:none;z-index:3;
}
.daun-jatuh.jatuh{animation:daunTurun 3.4s cubic-bezier(.3,.55,.45,1) .15s forwards}
@keyframes daunTurun{
  0%{opacity:0;transform:translate3d(0,-10px,0) rotate(-24deg)}
  10%{opacity:.95}
  38%{transform:translate3d(-26px,32dvh,0) rotate(38deg)}
  68%{transform:translate3d(14px,58dvh,0) rotate(-30deg)}
  92%{opacity:.9}
  100%{opacity:0;transform:translate3d(-6px,86dvh,0) rotate(16deg)}
}

/* ---------- Ranting tumbuh (gerak khas) ---------- */
.ranting path{
  fill:none;stroke:var(--sage-gelap);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:100;stroke-dashoffset:100;
}
.ranting-sisi{position:absolute;left:-8px;top:26px;width:40px;height:134px;opacity:.75}
.ranting-kartu{position:absolute;right:-14px;top:14px;width:30px;height:100px;opacity:.65}
.ranting-kartu.balik{transform:scaleX(-1);right:auto;left:-14px}
.ranting-penutup{width:36px;height:120px;margin:16px auto 0;opacity:.8}

/* ---------- Bagian umum ---------- */
main{display:block}
.bagian{
  position:relative;max-width:560px;margin:0 auto;padding:64px 22px 30px;text-align:center;
}
.judul-bagian{font-size:2rem;letter-spacing:.03em}
.subjudul-bagian{color:var(--tinta-lembut);font-size:.95rem;margin:4px 0 26px;letter-spacing:.05em}
.teks-tengah{max-width:46ch;margin:0 auto 18px}
.kartu-lembut{
  background:var(--kertas);border:1px solid var(--garis);border-radius:var(--jari);
  padding:20px;box-shadow:var(--bayang);text-align:center;
}

/* Ungkap: elemen menyusul dengan naik halus; ranting di dalamnya
   MENGGAMBAR DIRINYA (stroke-dashoffset) — identitas gerak template. */
.ungkap>*{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.ungkap.terlihat>*{opacity:1;transform:none}
.ungkap .ranting path{transition:stroke-dashoffset 1.5s ease}
.ungkap .ranting path:nth-child(2){transition-delay:.35s}
.ungkap .ranting path:nth-child(3){transition-delay:.65s}
.ungkap .ranting path:nth-child(4){transition-delay:.95s}
.ungkap .ranting path:nth-child(5){transition-delay:1.2s}
.ungkap.terlihat .ranting path{stroke-dashoffset:0}

/* ---------- Pembuka ---------- */
.salam{font-family:"Cormorant Garamond",serif;font-size:1.35rem;font-weight:600;margin-bottom:14px}
.ayat-arab{font-family:"Amiri",serif;font-size:1.45rem;line-height:2.1;color:var(--sage-gelap);margin-bottom:10px}
.ayat-terjemahan{font-style:italic;color:var(--tinta);max-width:48ch;margin:0 auto 6px}
.ayat-sumber{color:var(--emas-tanah);letter-spacing:.14em;font-size:.85rem;margin-bottom:26px}
.foto-bersama{position:relative;margin-bottom:20px}
.foto-bersama img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--jari);box-shadow:var(--bayang);border:1px solid var(--garis)}
.foto-bersama figcaption,.foto-penutup figcaption{
  position:absolute;right:10px;bottom:10px;background:rgba(67,56,42,.72);color:#FBF8EC;
  font-size:.7rem;letter-spacing:.1em;padding:3px 10px;border-radius:99px;
}
.teks-undangan{max-width:48ch;margin:0 auto}

/* ---------- Mempelai ---------- */
.kartu-mempelai{
  position:relative;background:var(--kertas);border:1px solid var(--garis);border-radius:var(--jari);
  padding:26px 20px 22px;box-shadow:var(--bayang);overflow:visible;margin-bottom:8px;
}
.foto-mempelai img{
  width:min(52vw,200px);aspect-ratio:3/4;object-fit:cover;margin:0 auto 16px;
  border-radius:110px 110px 14px 14px;border:1px solid var(--garis);box-shadow:var(--bayang);
}
.nama-mempelai{font-size:1.55rem;margin-bottom:6px}
.orangtua{color:var(--tinta-lembut);font-size:.95rem;white-space:pre-line}
.pemisah-amp{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:2rem;color:var(--emas-tanah);margin:10px 0}

/* ---------- Hitung mundur ---------- */
.hitung{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.kotak-hitung{
  min-width:70px;padding:14px 8px 10px;background:var(--kertas);border:1px solid var(--garis);
  border-radius:14px;box-shadow:var(--bayang);display:flex;flex-direction:column;gap:2px;
}
.angka-hitung{font-family:"Cormorant Garamond",serif;font-size:1.9rem;font-weight:600;color:var(--sage-gelap)}
.label-hitung{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--tinta-lembut)}
.hitung-selesai{margin-top:16px;color:var(--sage-gelap)}

/* ---------- Acara ---------- */
.kartu-acara{
  background:var(--kertas);border:1px solid var(--garis);border-radius:var(--jari);
  padding:24px 20px;box-shadow:var(--bayang);margin-bottom:18px;text-align:center;
}
.kartu-acara h3{font-size:1.5rem;color:var(--sage-gelap);margin-bottom:6px}
.kartu-acara .tgl{letter-spacing:.1em;margin-bottom:2px}
.kartu-acara .jam{font-family:"Cormorant Garamond",serif;font-size:1.25rem;font-weight:600;margin-bottom:8px}
.kartu-acara .tempat{font-weight:400}
.kartu-acara .alamat{color:var(--tinta-lembut);font-size:.92rem;margin-bottom:16px}
.tombol-peta{
  display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:9px 22px;border-radius:99px;
  border:1.5px solid var(--sage-gelap);color:var(--sage-gelap);background:transparent;
  text-decoration:none;font-size:.95rem;letter-spacing:.04em;transition:background .25s ease,color .25s ease;
}
.tombol-peta:hover{background:var(--sage-gelap);color:#FBF8EC}
.tombol-peta svg{width:18px;height:18px}
.status-aksi{min-height:1.4em;font-size:.9rem;color:var(--sage-gelap);margin-top:10px}
.dresscode{margin-top:20px}
.dresscode h3{font-family:"Cormorant Garamond",serif;font-size:1.3rem;margin-bottom:6px;color:var(--sage-gelap)}
.dresscode p{color:var(--tinta-lembut);font-size:.95rem}

/* ---------- Galeri ---------- */
.kisi-galeri{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sel-galeri{border:0;padding:0;background:none;border-radius:14px;overflow:hidden;min-height:44px;box-shadow:var(--bayang)}
.sel-galeri img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .5s ease}
.sel-galeri:hover img{transform:scale(1.045)}
.catatan-galeri{margin-top:14px;font-size:.85rem;color:var(--tinta-lembut)}

/* ---------- Amplop ---------- */
.kartu-amplop{
  background:var(--kertas);border:1px solid var(--garis);border-radius:var(--jari);
  padding:20px;box-shadow:var(--bayang);margin-bottom:14px;text-align:center;
}
.kartu-amplop .jenis{letter-spacing:.2em;font-size:.8rem;text-transform:uppercase;color:var(--emas-tanah)}
.kartu-amplop .nomor{font-family:"Cormorant Garamond",serif;font-size:1.7rem;font-weight:600;letter-spacing:.06em;margin:4px 0 2px}
.kartu-amplop .an{color:var(--tinta-lembut);font-size:.92rem;margin-bottom:14px}
.tombol-salin{
  display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:9px 22px;border-radius:99px;
  border:1.5px solid var(--sage-gelap);background:transparent;color:var(--sage-gelap);font-size:.95rem;
}
.tombol-salin svg{width:17px;height:17px}

/* ---------- RSVP ---------- */
.lencana-demo{
  display:inline-block;background:#F3E5C3;border:1px dashed var(--emas-tanah);color:#7A5E27;
  font-size:.78rem;letter-spacing:.12em;padding:5px 14px;border-radius:99px;margin-bottom:14px;
}
#formulirRsvp{text-align:left;max-width:440px;margin:0 auto}
.kolom{display:block;margin-bottom:14px}
.kolom span{display:block;font-size:.9rem;margin-bottom:5px;color:var(--tinta)}
.kolom input,.kolom select,.kolom textarea{
  width:100%;min-height:48px;padding:11px 14px;border:1px solid var(--garis);border-radius:12px;
  background:var(--kertas);color:var(--tinta);font:inherit;font-weight:300;
}
.kolom textarea{min-height:84px;resize:vertical}
.kolom input:focus,.kolom select:focus,.kolom textarea:focus{outline:2px solid var(--sage);outline-offset:1px}
.judul-bukutamu{font-size:1.4rem;margin:34px 0 16px;text-align:center}
.kartu-ucapan{
  background:var(--kertas);border:1px solid var(--garis);border-left:4px solid var(--sage);
  border-radius:12px;padding:14px 16px;margin-bottom:12px;text-align:left;box-shadow:var(--bayang);
}
.kartu-ucapan .kepala{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:4px}
.kartu-ucapan .nama{font-weight:500}
.kartu-ucapan .hadir{font-size:.75rem;letter-spacing:.08em;color:var(--sage-gelap);background:#EBF0E2;border-radius:99px;padding:2px 10px;white-space:nowrap}
.kartu-ucapan .isi{color:var(--tinta);font-size:.96rem}
.ucapan-kosong{color:var(--tinta-lembut);font-style:italic}

/* ---------- Penutup & kaki ---------- */
.foto-penutup{position:relative;margin-bottom:22px}
.foto-penutup img{width:min(78vw,320px);aspect-ratio:4/5;object-fit:cover;margin:0 auto;border-radius:130px 130px var(--jari) var(--jari);border:1px solid var(--garis);box-shadow:var(--bayang)}
.teks-penutup{max-width:48ch;margin:0 auto 16px}
.salam-penutup{font-family:"Cormorant Garamond",serif;font-size:1.2rem;font-weight:600;margin-bottom:20px}
.label-kami{color:var(--tinta-lembut);font-size:.92rem}
.nama-penutup{font-size:2rem;margin:2px 0}
.keluarga-penutup{color:var(--tinta-lembut);font-size:.92rem}
.kaki{max-width:560px;margin:0 auto;padding:8px 22px 110px;text-align:center}
.kaki p{font-size:.75rem;color:var(--tinta-lembut);letter-spacing:.04em}

/* ---------- Kontrol melayang ---------- */
.tombol-melayang{
  position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:90;
  width:52px;height:52px;border-radius:50%;border:1px solid var(--sage-gelap);
  background:rgba(252,250,242,.94);color:var(--sage-gelap);box-shadow:var(--bayang);
  display:flex;align-items:center;justify-content:center;
}
.tombol-melayang svg{width:22px;height:22px}
.tombol-jelajah{
  position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:90;
  min-height:52px;padding:10px 18px;border-radius:99px;border:1px solid var(--sage-gelap);
  background:rgba(252,250,242,.94);color:var(--sage-gelap);box-shadow:var(--bayang);
  display:inline-flex;align-items:center;gap:8px;font-size:.9rem;
}
.tombol-jelajah svg{width:19px;height:19px}
.tombol-jelajah.berhenti{opacity:.55}
.indikator-jelajah{
  position:fixed;left:50%;transform:translateX(-50%);bottom:calc(80px + env(safe-area-inset-bottom));z-index:89;
  background:rgba(67,56,42,.85);color:#FBF8EC;font-size:.78rem;letter-spacing:.04em;
  padding:7px 16px;border-radius:99px;pointer-events:none;white-space:nowrap;
}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:150;background:rgba(38,33,24,.94);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;
}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(92vw,560px);max-height:74dvh;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.keterangan-lightbox{color:#EDE6D2;font-size:.92rem;text-align:center;max-width:52ch}
.lb-tombol{
  position:absolute;min-width:48px;min-height:48px;border-radius:50%;border:1px solid rgba(251,248,236,.5);
  background:rgba(251,248,236,.1);color:#FBF8EC;font-size:1.6rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.lb-tutup{top:calc(14px + env(safe-area-inset-top));right:14px}
.lb-sebelum{left:12px;top:50%;transform:translateY(-50%)}
.lb-sesudah{right:12px;top:50%;transform:translateY(-50%)}

/* ---------- Desktop ---------- */
@media (min-width:760px){
  .bagian{padding-top:84px}
  .judul-bagian{font-size:2.3rem}
  .kisi-galeri{gap:16px}
  .bingkai-sampul{width:270px}
}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .ungkap>*{opacity:1;transform:none}
  .ungkap .ranting path{stroke-dashoffset:0}
  .daun-jatuh{display:none}
}