/* ===== Phinisi Bugis — zamrud & emas, layar dibentangkan ===== */
:root{
  --zamrud:#06382B; --zamrud2:#0B4A37; --laut:#2C7A5F;
  --emas:#C9A227; --emas2:#E3C766; --gading:#F6EFDC; --kertas:#FBF7EA;
  --tinta:#22302A; --redup:#5C6B62; --garis:#D8CBA0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Jost',sans-serif;font-weight:300;color:var(--tinta);background:var(--kertas);padding-bottom:74px}
h1,h2,h3{font-family:'Marcellus',serif;font-weight:400;color:var(--zamrud)}
em{font-family:'Cormorant Garamond',serif;font-size:1.12em}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--emas);outline-offset:2px}

/* ---------- SAMPUL: tirai dua layar — tepat 1 layar penuh (standar 100dvh, tanpa scroll) ---------- */
#sampul{background:linear-gradient(180deg,var(--zamrud) 0%,var(--zamrud2) 58%,#0E5B43 100%);color:var(--gading);text-align:center;padding:24px 18px;overflow:hidden;height:100dvh;max-height:100dvh;display:flex;align-items:center;justify-content:center}
#sampul.lapisan{position:fixed;inset:0;z-index:60;overflow:hidden;height:100dvh;max-height:100dvh}
body.terkunci{overflow:hidden}
.panel-layar{display:none}
#sampul.lapisan .panel-layar{display:block;position:absolute;top:0;width:56%;height:100%;z-index:1;pointer-events:none;
  background:linear-gradient(160deg,#0E5B43,#06382B 70%);transition:transform 1s cubic-bezier(.7,0,.3,1)}
#sampul.lapisan .layar-kiri{left:0;clip-path:polygon(0 0,100% 0,58% 100%,0 100%);border-right:3px solid var(--emas)}
#sampul.lapisan .layar-kanan{right:0;clip-path:polygon(0 0,100% 0,100% 100%,42% 100%)}
#sampul.membuka .layar-kiri{transform:translate(-118%,-9%) rotate(-4deg)}
#sampul.membuka .layar-kanan{transform:translate(118%,9%) rotate(4deg)}
#sampul.membuka .isi-sampul{opacity:0;transition:opacity .45s ease}
#sampul.sembunyi{display:none}
/* Ukuran internal sampul dalam em terhadap font-size .isi-sampul agar auto-fit
   pasSatuLayarSampul() dapat menyesuaikan komposisi secara proporsional. */
.isi-sampul{position:relative;z-index:2;max-width:520px;width:100%;margin:0 auto;font-size:16px}
.label-sampul{letter-spacing:.3em;font-size:.68em;color:var(--emas2);margin:0 0 .625em}
.kapal{width:min(21.25em,86vw);height:auto}
html.js .garis-horizon{stroke-dasharray:370;stroke-dashoffset:370;animation:tarikHorizon 1.6s ease .25s forwards}
@keyframes tarikHorizon{to{stroke-dashoffset:0}}
.siri{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.06em;color:#DCEBDD;margin:.875em auto .5em;max-width:26.25em}
.nama-sampul{color:var(--gading);font-size:2em;line-height:1.3;margin:.19em 0}
.nama-sampul .dan{color:var(--emas2);font-size:.7em}
.tanggal-sampul{color:var(--emas2);letter-spacing:.12em;margin:.25em 0 1.375em}
.blok-tamu{border-top:1px solid rgba(227,199,102,.45);padding-top:1.125em}
.hormat{margin:0;font-size:.85em;color:#CBE0CE}
.nama-tamu{font-family:'Marcellus',serif;font-size:1.25em;margin:.3em 0 .8em;color:#fff}
.tombol-buka,.tombol{display:inline-block;background:var(--emas);color:#231a02;border:none;border-radius:999px;
  padding:0 28px;min-height:48px;font-size:1rem;font-weight:500;letter-spacing:.04em;text-decoration:none;line-height:48px}
.tombol-buka:hover,.tombol:hover{background:var(--emas2)}
.catatan-contoh{font-size:.72rem;color:#9DBFA8;margin:14px 0 0}

/* ---------- BAGIAN & KEPALA PELABUHAN ---------- */
.bagian{max-width:640px;margin:0 auto;padding:52px 22px 8px;text-align:center}
.kepala-wrap{display:flex;align-items:center;gap:12px;justify-content:center}
.pasak{background:var(--zamrud);color:var(--emas2);font-size:.68rem;letter-spacing:.22em;padding:6px 12px;border-radius:999px;border:1px solid var(--emas)}
.tali{display:block;height:2px;width:74px;background:linear-gradient(90deg,var(--emas),var(--emas2));transform-origin:left center}
html.js .tali{transform:scaleX(0);transition:transform .55s ease}
html.js .tali.terlihat{transform:scaleX(1)}
.kepala-bagian{letter-spacing:.32em;font-size:.7rem;color:var(--redup);text-transform:uppercase;margin:14px 0 4px}
.judul-bagian{font-size:1.65rem;margin:6px 0 16px;line-height:1.35}
/* GERAK KHAS: layar dibentangkan — clip-path inset ATAS menyusut (bawah→atas) */
.rentang{transition:clip-path .7s cubic-bezier(.33,.66,.34,1)}
html.js .rentang{clip-path:inset(100% 0 0 0)}
html.js .rentang.terlihat{clip-path:inset(0 0 0 0)}
.isi{line-height:1.75;font-size:1rem}
.ayat{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.12rem;line-height:1.7;color:var(--zamrud2);
  border-left:3px solid var(--emas);margin:26px 0;padding:6px 0 6px 16px;text-align:left}
.ayat span{font-size:.92rem;color:var(--redup)}

/* ---------- MEMPELAI ---------- */
.kartu-mempelai{background:#fff;border:1px solid var(--garis);border-radius:16px;padding:26px 20px;margin:16px 0;box-shadow:0 6px 18px rgba(6,56,43,.06)}
.monogram{width:86px;height:86px;margin:0 auto 12px;border-radius:50%;background:var(--zamrud);color:var(--emas2);
  font-family:'Marcellus',serif;font-size:1.7rem;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--emas);box-shadow:0 0 0 5px var(--kertas),0 0 0 6px var(--emas)}
.kartu-mempelai h3{font-size:1.3rem;margin:4px 0 8px}

/* ---------- KISAH: rute logbook ---------- */
.rute{position:relative;text-align:left;margin:10px 0 0 8px;padding-left:26px;border-left:2px dashed var(--emas)}
.perhentian{position:relative;padding:10px 0 18px}
.perhentian .penanda{position:absolute;left:-35px;top:16px;width:16px;height:16px;border-radius:50%;background:var(--kertas);border:3px solid var(--emas)}
.perhentian .tahap{letter-spacing:.24em;font-size:.68rem;color:var(--laut);text-transform:uppercase;margin:0}
.perhentian h3{margin:4px 0 6px;font-size:1.15rem}
.perhentian .isi{margin:0}

/* ---------- ACARA ---------- */
.hitung{display:flex;gap:10px;justify-content:center;margin:18px 0 6px}
.hitung>div{background:var(--zamrud);color:var(--gading);border-radius:12px;min-width:68px;padding:10px 4px;border:1px solid var(--emas)}
.hitung span{font-family:'Marcellus',serif;font-size:1.5rem;display:block}
.hitung small{letter-spacing:.14em;font-size:.62rem;color:var(--emas2)}
.keterangan-hitung{color:var(--redup);font-size:.9rem}
.kartu-acara{background:#fff;border:1px solid var(--garis);border-top:4px solid var(--emas);border-radius:14px;padding:24px 20px;margin:20px 0;text-align:center}
.kartu-acara h3{font-size:1.35rem;margin:0 0 6px}
.kartu-acara .jadwal{font-weight:500;color:var(--zamrud2);letter-spacing:.03em;margin:0 0 10px}
.tombol-peta{background:var(--zamrud);color:var(--gading);margin-top:8px}
.tombol-peta:hover{background:var(--zamrud2)}

/* ---------- GALERI: jendela lambung ---------- */
.rute-galeri{position:relative;margin:8px 0 0 8px;padding-left:26px;border-left:2px dashed var(--emas);text-align:left}
.bingkai-lengkung{position:relative;margin:0 0 26px}
.bingkai-lengkung::before{content:"";position:absolute;left:-35px;top:34px;width:16px;height:16px;border-radius:50%;background:var(--kertas);border:3px solid var(--emas)}
.pemicu-galeri{display:block;width:100%;padding:0;border:none;background:none}
.bingkai-lengkung svg,.bingkai-lengkung img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:130px 130px 14px 14px;border:2px solid var(--emas);
  box-shadow:0 0 0 5px var(--kertas),0 0 0 7px var(--emas2),0 10px 22px rgba(6,56,43,.14)}
.bingkai-lengkung figcaption{text-align:center;margin-top:14px;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.08rem;color:var(--zamrud2)}

/* ---------- AMPLOP ---------- */
.kartu-amplop{background:var(--zamrud);color:var(--gading);border-radius:16px;padding:22px;margin:16px 0;border:1px solid var(--emas)}
.kartu-amplop .bank{letter-spacing:.2em;font-size:.72rem;color:var(--emas2);margin:0}
.kartu-amplop .nomor{font-family:'Marcellus',serif;font-size:1.5rem;letter-spacing:.08em;margin:8px 0 2px}
.kartu-amplop .an{margin:0 0 14px;color:#CBE0CE}
.tombol-salin{background:transparent;color:var(--emas2);border:1.5px solid var(--emas2);border-radius:999px;min-height:44px;padding:0 22px;font-size:.92rem}
.tombol-salin:hover{background:rgba(227,199,102,.15)}

/* ---------- RSVP ---------- */
.demo-label{background:#FDF3D7;border:1px dashed var(--emas);border-radius:10px;padding:10px 14px;font-size:.85rem;line-height:1.6}
form{text-align:left;background:#fff;border:1px solid var(--garis);border-radius:14px;padding:20px;margin:18px 0}
form label{display:block;font-size:.9rem;font-weight:400;margin-bottom:14px}
form input,form select,form textarea{width:100%;margin-top:6px;padding:11px 12px;border:1px solid #B9C4BB;border-radius:9px;font:inherit;background:#FFFDF4;min-height:44px}
form .tombol{width:100%}
.galat{color:#8E2323;font-size:.9rem}
.sukses{color:var(--zamrud2);font-weight:500}
.ucapan-item{background:#fff;border-left:3px solid var(--emas);border-radius:0 10px 10px 0;padding:12px 16px;margin:12px 0;text-align:left}
.ucapan-item strong{color:var(--zamrud)}
.ucapan-item p{margin:4px 0 0;line-height:1.6}
.kosong{color:var(--redup);font-style:italic}

/* ---------- BILAH KONTROL MUSIK & JELAJAH OTOMATIS ----------
   Melayang di atas bilah navigasi bawah; badan halaman diberi bantalan bawah
   ekstra setelah dibuka (body.dibuka) agar tidak ada konten tertutup permanen. */
html.jelajah-aktif{scroll-behavior:auto}
body.dibuka{padding-bottom:164px}
#bilahKontrol{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom));z-index:45;display:flex;gap:8px;padding:8px;background:rgba(6,56,43,.97);border:1px solid var(--emas);border-radius:12px;box-shadow:0 6px 24px rgba(6,56,43,.35)}
#bilahKontrol[hidden]{display:none}
#bilahKontrol button{min-height:44px;padding:0 16px;background:transparent;color:var(--gading);border:1.5px solid var(--emas2);border-radius:999px;font-size:.92rem;letter-spacing:.04em;white-space:nowrap}
#bilahKontrol button:active{background:rgba(227,199,102,.18)}
#bilahKontrol button[disabled]{opacity:.55;cursor:default}

/* ---------- PENUTUP & NAV ---------- */
.penutup{padding-bottom:30px}
.tanda{margin-top:22px}
.navigasi{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(6,56,43,.97);display:flex;justify-content:space-around;padding:8px 4px calc(8px + env(safe-area-inset-bottom))}
.navigasi a{color:var(--gading);text-decoration:none;font-size:.78rem;letter-spacing:.06em;min-height:44px;display:flex;align-items:center;padding:0 6px}
.navigasi a::before{content:"◆";color:var(--emas);font-size:.55rem;margin-right:5px}
.navigasi a:hover{color:var(--emas2)}

/* ---------- KOTAK CAHAYA ---------- */
.kotak-cahaya{position:fixed;inset:0;z-index:80;background:rgba(4,32,24,.96);color:var(--gading);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}
.kotak-cahaya[hidden]{display:none}
.kc-isi svg,.kc-isi img{width:min(88vw,480px);height:auto;border-radius:130px 130px 14px 14px;border:2px solid var(--emas)}
.kc-keterangan{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.15rem;margin:14px 0 2px}
.kc-hitung{margin:0;color:var(--emas2);font-size:.85rem;letter-spacing:.1em}
.kc-tutup{position:absolute;top:14px;right:14px;background:transparent;color:var(--gading);border:1.5px solid var(--emas2);border-radius:999px;min-height:44px;padding:0 18px}
.kc-nav{display:flex;gap:12px;margin-top:16px}
.kc-nav button{background:var(--emas);border:none;color:#231a02;border-radius:999px;min-height:44px;padding:0 20px;font-weight:500}

/* ---------- PRELOADER BERTEMA: pinisi & rute pelayaran ----------
   Lapisan fixed di atas segalanya (z-100): tidak menggeser tata letak apa pun.
   Animasi "pengaman-gagal" CSS murni menutup preloader pada detik ke-6 bila
   JavaScript mati di tengah jalan; tanpa JS ia disembunyikan oleh <noscript>. */
@keyframes preloaderPengamanGagal{to{opacity:0;visibility:hidden}}
@keyframes kapalBerayun{from{transform:translateY(0)}to{transform:translateY(-3px)}}
.preloader{position:fixed;inset:0;z-index:100;background:linear-gradient(180deg,var(--zamrud) 0%,var(--zamrud2) 58%,#0E5B43 100%);
  color:var(--gading);display:flex;align-items:center;justify-content:center;
  animation:preloaderPengamanGagal .4s linear 6s forwards}
.preloader.selesai{opacity:0;pointer-events:none;transition:opacity .55s ease;animation:none}
.preloader-dalam{text-align:center;padding:2rem 1.5rem;max-width:22rem}
.preloader-kapal{width:150px;height:auto;animation:kapalBerayun 3.2s ease-in-out infinite alternate}
.preloader-label{letter-spacing:.3em;text-transform:uppercase;font-size:.66rem;color:var(--emas2);margin:.7rem 0 .3rem}
.preloader-nama{font-family:'Marcellus',serif;font-size:1.5rem;color:#fff;margin:0 0 1.7rem}
.preloader-jalur{position:relative;width:min(240px,62vw);height:2px;margin:0 auto;
  background-image:repeating-linear-gradient(90deg,rgba(227,199,102,.4) 0 8px,transparent 8px 16px)}
.preloader-isi{position:absolute;left:0;top:0;height:100%;width:0;background:var(--emas2);transition:width .3s ease}
.preloader-isi::after{content:"";position:absolute;right:-4px;top:50%;width:8px;height:8px;background:var(--emas2);transform:translateY(-50%) rotate(45deg)}
.preloader-teks{font-size:.82rem;letter-spacing:.12em;color:#CBE0CE;margin:.85rem 0 0}
.preloader-rute{position:absolute;left:0;right:0;bottom:26px;border-top:2px dashed rgba(201,162,39,.5)}
@media (prefers-reduced-motion: reduce){
  .preloader-kapal{animation:none}
  .preloader-isi{transition:none}
  .preloader.selesai{transition:none}
  /* Pengaman-gagal tetap dipertahankan (ia menghilangkan, bukan menggerakkan)
     agar tamu reduced-motion pun tidak pernah terjebak di layar muat. */
  .preloader{animation:preloaderPengamanGagal .4s linear 6s forwards !important}
  .preloader.selesai{animation:none !important}
}

/* ---------- GERAK DIKURANGI & LAYAR LEBAR ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  html.js .rentang{clip-path:none}
  html.js .tali{transform:none}
  html.js .garis-horizon{stroke-dashoffset:0}
}
@media (min-width:760px){
  .nama-sampul{font-size:2.5em}
  .rute-galeri{display:block}
}