/* ============================================================
   GAYA — Standalone Sinematik (Emerald Zamrud Emas & Navy Emas)
   Ditulis tangan dari sistem desain rendisi katalog sinematik:
   palet zamrud/navy + emas sampanye, kaca mewah (luxury-card),
   kilau emas bergerak, ungkap arah + zoom.
   (Sampul berkas ini: mode dissolve foto — revisi 3 Nov 2026; salinan
   Navy mempertahankan sampul tirai dari sistem yang sama.)
   Perbedaan kedua tema dikunci lewat body[data-tema]:
   Emerald = kartu potong sudut zamrud + foto latar tetap;
   Navy    = kartu sudut membulat + pola ornamen emas.
   ============================================================ */

:root {
  --emas-100: #FBF5E6;
  --emas-200: #F3E5AB;
  --emas-300: #E6C762;
  --emas-400: #D4AF37;
  --emas-500: #AA7C11;
  --emas-600: #855E08;
  --gading-50: #FFFFFF;
  --gading-100: #FAF6F0;
  --gading-200: #EFE7DA;
  --fon-judul: "Cormorant Garamond", "Times New Roman", serif;
  --fon-sambung: "Great Vibes", cursive;
  --fon-isi: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fon-arab: "Amiri", serif;
}

body[data-tema="emerald"] {
  --tema-950: #021F1A;
  --tema-900: #032E24;
  --tema-800: #064E3B;
  --tema-700: #065F46;
  --tema-600: #047857;
  --potong-kartu: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
  --radius-kartu: 6px;
}
body[data-tema="navy"] {
  --tema-950: #060D1A;
  --tema-900: #0A1628;
  --tema-800: #112240;
  --tema-700: #1B3358;
  --tema-600: #264675;
  --potong-kartu: none;
  --radius-kartu: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.jelajah-aktif { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--tema-950);
  color: var(--gading-100);
  font-family: var(--fon-isi);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.kunci-scroll { overflow: hidden; }

/* Latar tetap layar penuh di belakang kolom aplikasi */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: var(--tema-950);
}
body[data-tema="emerald"]::before {
  background-image:
    linear-gradient(180deg, rgba(2, 31, 26, 0.30), rgba(2, 31, 26, 0.45)),
    url("assets/img/latar.jpg");
  background-size: cover;
  background-position: center;
}
body[data-tema="navy"]::before {
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(212, 175, 55, 0.10), transparent),
    radial-gradient(ellipse 60% 40% at 50% 110%, rgba(27, 51, 88, 0.35), transparent),
    radial-gradient(rgba(212, 175, 55, 0.055) 1px, transparent 1.6px);
  background-size: auto, auto, 36px 36px;
}

::selection { background: rgba(212, 175, 55, 0.35); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--tema-950); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--emas-500), var(--emas-600)); border-radius: 8px; }

img { max-width: 100%; }
a { color: var(--emas-300); }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--emas-300); outline-offset: 3px; border-radius: 6px; }

/* ---------- Utilitas khas rendisi ---------- */
.teks-emas-gradien {
  background: linear-gradient(135deg, #F3E5AB 0%, #D4AF37 30%, #FFF6D6 50%, #D4AF37 70%, #AA7C11 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: kilauEmas 6s linear infinite;
  /* Remediasi Bagian E ronde 2: kilau hanya berjalan setelah sampul terbuka
     dan berhenti selama auto-scroll — animasi background-position pada teks
     memaksa repaint teks setiap frame (juga di halaman lain yang terbuka
     bersamaan). Semua pemakai kelas ini adalah judul section di bawah
     sampul, jadi tidak ada tampilan yang hilang. */
  animation-play-state: paused;
}
/* Penalaan Bagian E pasca-revisi sampul (probe A/B terukur): kilau mulai
   0,8 dtk SETELAH klik — selama 0,7 dtk pertama ia tertutup dissolve
   sampul yang sedang berjalan, jadi tidak ada tampilan yang hilang,
   tetapi repaint background-position-nya tidak lagi menumpuk frame
   klik + transisi pembuka yang diukur Bagian E. */
body.sampul-terbuka .teks-emas-gradien { animation-play-state: running; animation-delay: 0.8s; }
html.jelajah-aktif .teks-emas-gradien { animation-play-state: paused; }
@keyframes kilauEmas { to { background-position: 200% center; } }

.latar-emas-gradien {
  background: linear-gradient(135deg, #E6C762 0%, #D4AF37 45%, #AA7C11 100%);
}

.kartu-mewah {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.18)), linear-gradient(160deg, var(--tema-800), var(--tema-950));
  background-color: var(--tema-900);
  /* Remediasi Bagian E: backdrop-filter dihapus — lapisan gradien kartu ini
     opak penuh sehingga blur latar tidak pernah terlihat, tetapi biayanya
     adalah penyebab dominan frame lambat (terukur probe atribusi). */
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: var(--radius-kartu);
  clip-path: var(--potong-kartu);
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.55);
}
.kartu-mewah-gading {
  background: linear-gradient(165deg, rgba(250, 246, 240, 0.97), rgba(239, 231, 218, 0.94));
  color: #22302A;
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: var(--radius-kartu);
  clip-path: var(--potong-kartu);
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.5);
}
body[data-tema="navy"] .kartu-mewah-gading { color: #1B2A44; }

.kicker {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--emas-300);
  font-weight: 500;
}
.judul-bagian {
  font-family: var(--fon-judul);
  font-weight: 600;
  font-size: clamp(2rem, 8vw, 2.6rem);
  line-height: 1.12;
  margin: 0.35rem 0 0;
}
.teks-sambung {
  font-family: var(--fon-sambung);
  font-weight: 400;
  color: var(--emas-200);
}
.pemisah-ornamen {
  display: flex; align-items: center; justify-content: center; gap: 0.7rem;
  margin: 1rem auto 0; color: var(--emas-400);
}
.pemisah-ornamen::before, .pemisah-ornamen::after {
  content: ""; height: 1px; width: 64px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.65));
}
.pemisah-ornamen::after { background: linear-gradient(90deg, rgba(212, 175, 55, 0.65), transparent); }

/* Bola cahaya melayang (identitas gerak sinematik) */
.orb {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(46px); opacity: 0.5; z-index: 0;
}
.orb-emas { background: rgba(212, 175, 55, 0.20); }
.orb-tema { background: var(--tema-600); opacity: 0.28; }
.melayang { animation: melayang 6s ease-in-out infinite; }
.melayang-balik { animation: melayangBalik 7s ease-in-out infinite; }
/* Remediasi Bagian E ronde 3: bola cahaya hanya melayang setelah sampul
   terbuka dan berhenti selama auto-scroll — lapisan blur 46px yang terus
   bergerak memaksa komposit ulang pada setiap frame gulir. */
.melayang, .melayang-balik { animation-play-state: paused; }
/* Sama seperti kilau di atas: melayang mulai 0,8 dtk setelah klik
   (tertutup dissolve selama jeda itu) demi jendela ukur Bagian E. */
body.sampul-terbuka .melayang, body.sampul-terbuka .melayang-balik { animation-play-state: running; animation-delay: 0.8s; }
html.jelajah-aktif .melayang, html.jelajah-aktif .melayang-balik { animation-play-state: paused; }
@keyframes melayang { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes melayangBalik { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(12px); } }

/* ---------- Preloader bertema ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 300;
  background: var(--tema-950);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 1.5rem;
  transition: opacity 0.55s ease, visibility 0.55s ease;
}
.preloader.hilang { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-isi { max-width: 300px; }
.monogram-cincin {
  width: 92px; height: 92px; margin: 0 auto 1.1rem;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.55);
  box-shadow: 0 0 0 6px rgba(212, 175, 55, 0.08), inset 0 0 24px rgba(212, 175, 55, 0.12);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fon-judul); font-size: 1.7rem; font-weight: 600;
  color: var(--emas-200);
  animation: denyutEmas 3s ease-in-out infinite;
}
@keyframes denyutEmas {
  0%, 100% { box-shadow: 0 0 0 6px rgba(212, 175, 55, 0.08), inset 0 0 24px rgba(212, 175, 55, 0.12); }
  50% { box-shadow: 0 0 0 10px rgba(212, 175, 55, 0.04), inset 0 0 30px rgba(212, 175, 55, 0.2); }
}
.preloader-judul { font-family: var(--fon-sambung); font-size: 2rem; margin: 0; color: var(--emas-200); }
.preloader-nama { margin: 0.2rem 0 1.4rem; letter-spacing: 0.28em; font-size: 0.72rem; text-transform: uppercase; color: rgba(250, 246, 240, 0.75); }
.bilah-muat { height: 3px; border-radius: 99px; background: rgba(212, 175, 55, 0.18); overflow: hidden; }
.bilah-muat i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--emas-500), var(--emas-300)); transition: width 0.4s ease; }
.status-muat { font-size: 0.78rem; color: rgba(250, 246, 240, 0.65); margin: 0.7rem 0 0; }

/* ---------- Kanvas partikel emas ---------- */
#kanvasPartikel {
  position: fixed; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* ---------- Kolom aplikasi ---------- */
.kolom-aplikasi {
  position: relative; z-index: 2;
  max-width: 440px; margin: 0 auto;
  /* Remediasi Bagian E: kolom dibuat opak (sebelumnya color-mix 88%
     tembus cahaya) — kolom tembus cahaya di atas latar foto tetap memaksa
     pencampuran ulang selayar pada setiap frame gulir/pembuka. Foto latar
     tetap tampil di sisi-sisi desktop; selisih visual di HP nyaris nol. */
  background: var(--tema-950);
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.22), 0 30px 80px rgba(0, 0, 0, 0.6);
  min-height: 100dvh;
  overflow: hidden;
}
/* Remediasi Bagian E ronde 2: pada lebar <=440px kolom opak selebar layar
   menutupi foto latar tetap sepenuhnya — foto itu tidak pernah terlihat,
   jadi tidak perlu dikomposit setiap frame. Di layar lebih lebar foto
   tetap tampil di sisi-sisi kolom seperti sebelumnya. */
@media (max-width: 440px) {
  body::before { display: none; }
}

/* ---------- Sampul (tepat 1 layar) ---------- */
/* Revisi sampul 3 Nov 2026 (keputusan pemilik): mode sampul template ini
   adalah "dissolve" (data-mode pada #sampul) — sampul FOTO mengikuti kartu
   katalog: foto pasangan layar penuh, isi berlabuh di bawah, nama serif.
   Koreografi buka: isi memudar lebih dulu, foto mengecil sangat pelan
   (zoom settle, transform saja) sambil seluruh sampul dissolve ke konten;
   mesin bersama hanya memasang kelas cover-opened — geraknya diatur di
   sini, per mode, tanpa mengubah mesin. Aturan tirai & monogram sampul
   lama dihapus dari berkas ini (markup-nya juga sudah tidak ada). */
.sampul {
  position: fixed; inset: 0; z-index: 200;
  height: 100dvh; max-height: 100dvh; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
  text-align: center;
  background: var(--tema-950);
  /* Penalaan Bagian E pasca-revisi: jendela animasi selayar dipadatkan
     (pudar 0,9->0,6 dtk; probe A/B: varian 0,6 dtk + jeda kilau/orb
     memberi sebaran angka terbaik) — koreografi dissolve sama,
     frame transisi yang diukur lebih sedikit. */
  transition: opacity 0.6s ease, visibility 0.65s ease;
  will-change: opacity;
}
.sampul.cover-opened { opacity: 0; visibility: hidden; pointer-events: none; }
/* Bingkai klip foto: transform zoom pada foto tidak boleh menyumbang
   scrollable overflow ke #sampul (scrollHeight sampul harus = 100dvh). */
.bingkai-sampul { position: absolute; inset: 0; overflow: hidden; }
.latar-sampul {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 24%;
  /* Zoom settle dissolve: foto mulai sedikit lebih besar lalu mengecil
     pelan ke 1.0 selama transisi buka — satu lapisan, transform saja.
     Penalaan Bagian E (2 ronde): rentang diperhalus 1,06->1,025 dan
     durasi 1,15->0,85 dtk dengan jeda awal 0,1 dtk agar tumpang tindih
     pudar+skala (dua animasi selayar serentak) menyempit. Settle tetap
     terbaca sebagai gerak khas dissolve sinematik. */
  transform: scale(1.025);
  transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s;
  will-change: transform;
}
.sampul.cover-opened .latar-sampul { transform: scale(1); }
.bayang-sampul {
  position: absolute; inset: 0;
  /* Gradasi baca ala kartu: atas relatif bersih (wajah aman), bawah
     gelap pekat di belakang teks + tombol. */
  background: linear-gradient(180deg, rgba(2, 31, 26, 0.34), rgba(2, 31, 26, 0) 30%, rgba(2, 31, 26, 0.22) 55%, rgba(2, 31, 26, 0.86) 82%, var(--tema-950));
}
.isi-sampul {
  position: relative; z-index: 4; width: 100%; padding: 1rem 1.4rem 2.3rem;
  transition: opacity 0.55s ease;
}
.sampul.cover-opened .isi-sampul { opacity: 0; }
.blok-sampul { transform-origin: center bottom; max-width: 560px; margin: 0 auto; }
.foto-bulat-sampul {
  width: 148px; height: 148px; margin: 0 auto 1rem; border-radius: 50%;
  object-fit: cover; border: 2px solid rgba(212, 175, 55, 0.75);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 0 7px rgba(212, 175, 55, 0.12);
}
.sampul .kicker { color: var(--emas-200); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6); }
/* Nama sampul SERIF ala kartu (Cormorant Garamond, fon judul template) —
   nama wanita satu baris, "& Pria" baris berikutnya, seperti kartu. */
.nama-sampul {
  font-family: var(--fon-judul); font-weight: 500;
  font-size: clamp(2.9rem, 13.5vw, 4rem); line-height: 1.08;
  margin: 0.4rem 0 0.2rem; color: #FFF8E6;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.65);
}
.nama-sampul #sampulNamaWanita { display: block; }
.nama-sampul .dan { font-size: 0.6em; font-style: italic; color: var(--emas-200); }
.tanggal-sampul { font-family: var(--fon-judul); font-weight: 500; letter-spacing: 0.04em; font-size: 1.05rem; color: #F7EFDD; margin: 0.45rem 0 0; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7); }
/* Blok Kepada dipertahankan KECIL di atas tombol (keputusan pemilik). */
.blok-tamu { margin: 0.85rem auto 0; max-width: 320px; }
.blok-tamu .kepada { font-size: 0.72rem; color: rgba(250, 246, 240, 0.85); margin: 0; }
.blok-tamu .nama-tamu { font-family: var(--fon-judul); font-size: 1.08rem; font-weight: 600; margin: 0.15rem 0; color: #fff; }
.blok-tamu .maaf { font-size: 0.62rem; color: rgba(250, 246, 240, 0.6); margin: 0; }

.tombol-emas {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 48px; padding: 0.8rem 1.7rem;
  border: none; border-radius: 999px;
  background: linear-gradient(135deg, #E6C762 0%, #D4AF37 45%, #AA7C11 100%);
  color: #231a04; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow: 0 14px 34px -8px rgba(212, 175, 55, 0.55);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.tombol-emas:hover { transform: translateY(-2px); filter: brightness(1.06); }
.tombol-emas:active { transform: translateY(0); }
#tombolBuka { margin-top: 1.05rem; animation: denyutTombol 3s ease-in-out infinite; }
/* Remediasi Bagian E ronde 5: denyut box-shadow tombol berhenti begitu
   sampul membuka — animasi box-shadow memaksa repaint bayangan setiap
   frame tepat di jendela transisi pembuka yang diukur Bagian E. Denyut
   adalah penarik perhatian SEBELUM diklik; sesudah klik ia tak terlihat
   lagi di balik dissolve yang berjalan. */
.sampul.cover-opened #tombolBuka { animation-play-state: paused; }
@keyframes denyutTombol {
  0%, 100% { box-shadow: 0 14px 34px -8px rgba(212, 175, 55, 0.55), 0 0 0 0 rgba(212, 175, 55, 0.35); }
  50% { box-shadow: 0 14px 34px -8px rgba(212, 175, 55, 0.55), 0 0 0 12px rgba(212, 175, 55, 0); }
}
.tombol-garis {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.75rem 1.4rem;
  border-radius: 999px; border: 1px solid rgba(212, 175, 55, 0.55);
  background: rgba(212, 175, 55, 0.07); color: var(--emas-200);
  font-weight: 500; font-size: 0.9rem; text-decoration: none;
  transition: background 0.25s ease, transform 0.25s ease;
}
.tombol-garis:hover { background: rgba(212, 175, 55, 0.16); transform: translateY(-1px); }

.tombol-video {
  position: absolute; z-index: 5;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.7);
  /* Remediasi Bagian E: backdrop-filter dihapus, latar digelapkan sedikit. */
  background: rgba(0, 0, 0, 0.55); color: var(--emas-200);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.tombol-video-sampul { top: 1rem; right: 1rem; }

/* ---------- Bagian & ungkap panggung ---------- */
.bagian {
  position: relative;
  padding: 4.2rem 1.35rem;
  text-align: center;
  overflow: hidden;
}
.bagian + .bagian { border-top: 1px solid rgba(212, 175, 55, 0.14); }
/* Ruang bebas dasar halaman: isi penutup (termasuk baris merek) harus bisa
   bergulir bebas melewati bilah kontrol apung (~132px) — tanpa ini baris
   terakhir tertutup permanen oleh bilah pada gulir maksimum. */
#sectionClosing { padding-bottom: 10.5rem; }
.isi-bagian { position: relative; z-index: 2; max-width: 380px; margin: 0 auto; }
.teks-isi { color: rgba(250, 246, 240, 0.82); font-size: 0.98rem; }

/* Remediasi Bagian E: will-change massal pada semua .reveal dihapus —
   lapisan komposit permanen untuk puluhan elemen terukur mahal; transisi
   opacity/transform tetap berjalan tanpa petunjuk itu. */
.reveal { opacity: 0; transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal-up { transform: translateY(38px); }
.reveal-down { transform: translateY(-32px); }
.reveal-left { transform: translateX(-36px); }
.reveal-right { transform: translateX(36px); }
.reveal-zoom { transform: scale(0.9); }
.reveal.active { opacity: 1; transform: none; }
.reveal.delay-100 { transition-delay: 0.1s; }
.reveal.delay-200 { transition-delay: 0.2s; }
.reveal.delay-300 { transition-delay: 0.3s; }
.reveal.delay-400 { transition-delay: 0.4s; }
html.tanpa-js .reveal, html.gerak-dikurangi .reveal { opacity: 1; transform: none; transition: none; }
/* Fallback tanpa-JS (paritas dengan navy-gold): tanpa aturan ini pramuat
   menutupi halaman dan gulir terkunci bagi tamu tanpa JS. */
html.tanpa-js .preloader { display: none; }
html.tanpa-js .sampul { position: relative; }
html.tanpa-js body { overflow: visible; }

/* ---------- Pembuka ---------- */
.teks-arab {
  font-family: var(--fon-arab);
  font-size: 1.9rem; line-height: 1.9; direction: rtl;
  color: var(--emas-200); margin: 0 0 0.6rem;
}
.salam { font-family: var(--fon-judul); font-style: italic; font-size: 1.15rem; color: var(--emas-100); margin: 0 0 1rem; }
.ayat { margin: 0; }
.ayat p { font-family: var(--fon-judul); font-style: italic; font-size: 1.08rem; line-height: 1.75; color: rgba(250, 246, 240, 0.9); }
.ayat cite { display: block; margin-top: 0.7rem; font-style: normal; font-size: 0.78rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--emas-300); }

/* ---------- Mempelai ---------- */
.kartu-mempelai { padding: 2rem 1.4rem; margin-top: 1.6rem; }
.bingkai-lengkung {
  position: relative; width: 190px; margin: 0 auto 1.1rem;
  border-radius: 140px 140px 24px 24px;
  padding: 7px;
  background: linear-gradient(170deg, rgba(212, 175, 55, 0.65), rgba(212, 175, 55, 0.15));
}
.bingkai-lengkung img {
  display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 132px 132px 18px 18px;
}
.nama-mempelai { font-family: var(--fon-judul); font-weight: 600; font-size: 1.65rem; margin: 0.2rem 0 0.3rem; }
.orang-tua { font-size: 0.88rem; color: rgba(250, 246, 240, 0.75); margin: 0 0 0.9rem; }
.tautan-ig {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 44px; padding: 0.5rem 1.1rem; border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.4); color: var(--emas-200);
  font-size: 0.85rem; text-decoration: none;
  transition: background 0.25s ease;
}
.tautan-ig:hover { background: rgba(212, 175, 55, 0.14); }
.dan-besar { font-family: var(--fon-sambung); font-size: 2.6rem; color: var(--emas-300); margin: 1.2rem 0 0; line-height: 1; }

/* ---------- Acara & hitung mundur ---------- */
.hitung-mundur { display: flex; justify-content: center; gap: 0.55rem; margin: 1.6rem 0 0.5rem; }
.kotak-waktu {
  min-width: 68px; padding: 0.7rem 0.3rem 0.55rem;
  border-radius: var(--radius-kartu); clip-path: var(--potong-kartu);
  background: linear-gradient(165deg, var(--tema-800), var(--tema-950));
  border: 1px solid rgba(212, 175, 55, 0.3);
}
.kotak-waktu .angka {
  display: block; font-family: var(--fon-judul); font-weight: 600;
  font-size: 1.7rem; line-height: 1; color: var(--emas-200);
  transform-origin: center top;
}
.kotak-waktu .angka.berputar { animation: balikAngka 0.32s ease; }
@keyframes balikAngka { from { transform: rotateX(72deg); opacity: 0.2; } to { transform: rotateX(0); opacity: 1; } }
.kotak-waktu .label { display: block; margin-top: 0.3rem; font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(250, 246, 240, 0.65); }
.label-hitung { font-size: 0.85rem; color: rgba(250, 246, 240, 0.7); margin: 0.4rem 0 0; }
.kartu-acara { padding: 1.9rem 1.4rem; margin-top: 1.6rem; }
.kartu-acara h3 { font-family: var(--fon-sambung); font-weight: 400; font-size: 2rem; color: var(--emas-200); margin: 0 0 0.4rem; }
.tanggal-besar { font-family: var(--fon-judul); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.04em; margin: 0; }
.baris-acara { display: flex; gap: 0.6rem; justify-content: center; align-items: baseline; margin-top: 0.55rem; font-size: 0.92rem; color: rgba(250, 246, 240, 0.85); }
.baris-acara .ikon { color: var(--emas-400); }
.tempat-acara { font-weight: 500; color: var(--gading-50); }
.alamat-acara { font-size: 0.84rem; color: rgba(250, 246, 240, 0.65); }
.tombol-aksi { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 1.2rem; }
.tombol-aksi .tombol-emas, .tombol-aksi .tombol-garis { min-height: 46px; padding: 0.65rem 1.2rem; font-size: 0.87rem; }
.busana { margin-top: 1.6rem; font-size: 0.9rem; color: rgba(250, 246, 240, 0.8); }
.busana strong { color: var(--emas-200); font-weight: 500; letter-spacing: 0.08em; }

/* ---------- Lokasi ---------- */
.kartu-lokasi { padding: 2rem 1.5rem; }
.kartu-lokasi h3 { font-family: var(--fon-judul); font-size: 1.45rem; font-weight: 600; margin: 0.4rem 0 0.3rem; }

/* ---------- Kisah cinta ---------- */
.garis-kisah { list-style: none; margin: 1.8rem 0 0; padding: 0; position: relative; text-align: left; }
.garis-kisah::before {
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(212, 175, 55, 0.55), transparent);
}
.garis-kisah li { position: relative; padding: 0 0 1.7rem 2rem; }
.garis-kisah li:last-child { padding-bottom: 0; }
.garis-kisah .titik {
  position: absolute; left: 0; top: 5px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--tema-950); border: 2px solid var(--emas-400);
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.14);
}
.garis-kisah .periode { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--emas-300); margin: 0; }
.garis-kisah h3 { font-family: var(--fon-judul); font-size: 1.25rem; font-weight: 600; margin: 0.25rem 0 0.35rem; }
.garis-kisah p { font-size: 0.92rem; color: rgba(250, 246, 240, 0.8); margin: 0; }

/* ---------- Galeri ---------- */
.kisi-galeri {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-top: 1.7rem;
}
.kisi-galeri figure {
  margin: 0; position: relative; overflow: hidden;
  border-radius: var(--radius-kartu); clip-path: var(--potong-kartu);
  border: 1px solid rgba(212, 175, 55, 0.25);
  cursor: zoom-in; background: var(--tema-900);
}
.kisi-galeri img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.kisi-galeri figure:hover img { transform: scale(1.05); }
.kisi-galeri figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem 0.7rem 0.55rem;
  font-size: 0.72rem; text-align: left; color: var(--gading-100);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72));
}

/* ---------- Amplop ---------- */
.kartu-amplop-item { padding: 1.5rem 1.3rem; margin-top: 1.2rem; text-align: left; }
.kartu-amplop-item .bank { font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--emas-300); margin: 0; font-weight: 500; }
.kartu-amplop-item .nomor { font-family: var(--fon-judul); font-size: 1.5rem; font-weight: 600; letter-spacing: 0.06em; margin: 0.35rem 0 0.1rem; word-break: break-all; }
.kartu-amplop-item .atas-nama { font-size: 0.88rem; color: rgba(250, 246, 240, 0.75); margin: 0 0 1rem; }
.label-demo {
  display: inline-block; margin-top: 1rem; padding: 0.35rem 0.8rem; border-radius: 999px;
  border: 1px dashed rgba(212, 175, 55, 0.5); color: var(--emas-200);
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
}

/* ---------- RSVP & buku tamu ---------- */
.formulir { text-align: left; margin-top: 1.6rem; }
.formulir label { display: block; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--emas-200); margin: 1rem 0 0.4rem; font-weight: 500; }
.formulir input, .formulir select, .formulir textarea {
  width: 100%; min-height: 48px; padding: 0.75rem 0.9rem;
  border-radius: 12px; border: 1px solid rgba(212, 175, 55, 0.35);
  background: rgba(0, 0, 0, 0.28); color: var(--gading-50);
  font-family: inherit; font-size: 0.95rem; font-weight: 300;
}
.formulir textarea { min-height: 96px; resize: vertical; }
.formulir select option { color: #1c1c1c; }
.formulir .tombol-emas { width: 100%; margin-top: 1.3rem; }
.catatan-demo { font-size: 0.8rem; color: rgba(250, 246, 240, 0.65); text-align: center; }
.daftar-ucapan { margin-top: 1.6rem; text-align: left; display: grid; gap: 0.8rem; }
.kartu-ucapan {
  padding: 1rem 1.1rem; border-radius: var(--radius-kartu); clip-path: var(--potong-kartu);
  background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(212, 175, 55, 0.2);
}
.kartu-ucapan .ucapan-nama { font-weight: 500; color: var(--emas-200); margin: 0; font-size: 0.95rem; }
.kartu-ucapan .ucapan-status { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(250, 246, 240, 0.55); margin: 0.15rem 0 0.4rem; }
.kartu-ucapan .ucapan-teks { margin: 0; font-size: 0.92rem; color: rgba(250, 246, 240, 0.88); }
.kartu-ucapan time { font-size: 0.72rem; color: rgba(250, 246, 240, 0.45); }

/* ---------- Penutup ---------- */
.video-penutup { position: relative; margin-top: 1.6rem; border-radius: var(--radius-kartu); clip-path: var(--potong-kartu); overflow: hidden; border: 1px solid rgba(212, 175, 55, 0.3); }
.video-penutup video { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; opacity: 0.85; }
.video-penutup .tombol-video { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.tanda-tangan { font-family: var(--fon-sambung); font-size: 2.4rem; color: var(--emas-200); margin: 0.6rem 0 0; line-height: 1.3; }
.merek { margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid rgba(212, 175, 55, 0.16); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(250, 246, 240, 0.45); text-align: center; }

/* ---------- Kontrol apung ---------- */
.kontrol-apung {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(0.7rem + env(safe-area-inset-bottom)); z-index: 90;
  width: min(430px, calc(100vw - 1.4rem));
  display: flex; flex-direction: column; gap: 0.55rem;
  opacity: 0; visibility: hidden; transition: opacity 0.6s ease 0.2s, visibility 0.6s;
}
body.sampul-terbuka .kontrol-apung { opacity: 1; visibility: visible; }
.baris-kontrol { display: flex; justify-content: space-between; align-items: flex-end; gap: 0.6rem; }
.tombol-jelajah, .tombol-musik {
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 46px; padding: 0.55rem 1rem; border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.5);
  /* Remediasi Bagian E: backdrop-filter dihapus (bilah apung di atas isi
     yang bergulir = blur ulang tiap frame); opasitas latar 82% -> 93%
     menjaga kesan kaca berwarna gelap yang nyaris sama. */
  background: color-mix(in srgb, var(--tema-950) 93%, transparent);
  color: var(--emas-200); font-size: 0.8rem; font-weight: 500;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  transition: background 0.25s ease, color 0.25s ease;
}
.tombol-jelajah.sedang-jalan, .tombol-musik.memutar {
  background: linear-gradient(135deg, #E6C762, #D4AF37 55%, #AA7C11);
  color: #231a04; border-color: transparent;
}
.piringan {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: radial-gradient(circle, #2b2b2b 0 26%, #151515 27% 62%, #2e2e2e 63% 100%);
  border: 1px solid rgba(212, 175, 55, 0.7);
  display: flex; align-items: center; justify-content: center;
  color: var(--emas-300); font-size: 0.72rem;
}
.piringan.berputar { animation: putarPiringan 6s linear infinite; }
@keyframes putarPiringan { to { transform: rotate(360deg); } }
.navigasi-bawah {
  display: flex; justify-content: space-around; align-items: stretch;
  border-radius: 20px; padding: 0.4rem 0.3rem;
  /* Remediasi Bagian E: backdrop-filter dihapus; opasitas 84% -> 93%. */
  background: color-mix(in srgb, var(--tema-950) 93%, transparent);
  border: 1px solid rgba(212, 175, 55, 0.4);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}
.navigasi-bawah a {
  flex: 1; min-height: 48px; padding: 0.3rem 0.1rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem;
  color: rgba(250, 246, 240, 0.78); text-decoration: none; font-size: 0.62rem;
  letter-spacing: 0.08em; text-transform: uppercase; border-radius: 14px;
  transition: color 0.25s ease, background 0.25s ease;
}
.navigasi-bawah a:hover, .navigasi-bawah a:focus-visible { color: var(--emas-200); background: rgba(212, 175, 55, 0.1); }
.navigasi-bawah svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Lightbox & toast ---------- */
.kotak-cahaya {
  position: fixed; inset: 0; z-index: 250; display: none;
  /* Remediasi Bagian E: backdrop-filter dihapus (latar sudah 94% opak). */
  background: rgba(2, 8, 6, 0.94);
  align-items: center; justify-content: center; flex-direction: column;
  padding: 1.2rem;
}
body[data-tema="navy"] .kotak-cahaya { background: rgba(3, 6, 12, 0.94); }
.kotak-cahaya.terbuka { display: flex; }
.kotak-cahaya img { max-width: min(92vw, 560px); max-height: 74dvh; object-fit: contain; border-radius: 14px; border: 1px solid rgba(212, 175, 55, 0.4); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7); }
.kotak-cahaya p { color: var(--gading-100); font-size: 0.9rem; margin: 1rem 0 0; text-align: center; }
.tombol-cahaya {
  position: absolute; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.55); background: rgba(0, 0, 0, 0.5);
  color: var(--emas-200); font-size: 1.15rem;
  display: flex; align-items: center; justify-content: center;
}
.tombol-cahaya.tutup { top: 1rem; right: 1rem; }
.tombol-cahaya.sebelumnya { left: 0.8rem; top: 50%; transform: translateY(-50%); }
.tombol-cahaya.berikutnya { right: 0.8rem; top: 50%; transform: translateY(-50%); }
.panggang {
  position: fixed; left: 50%; bottom: 8.5rem; transform: translateX(-50%) translateY(16px);
  z-index: 260; max-width: min(90vw, 360px);
  padding: 0.7rem 1.1rem; border-radius: 999px;
  background: color-mix(in srgb, var(--tema-950) 92%, transparent);
  border: 1px solid rgba(212, 175, 55, 0.55); color: var(--emas-100);
  font-size: 0.85rem; text-align: center;
  opacity: 0; visibility: hidden; transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
}
.panggang.tampil { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* ---------- Gerak dikurangi & layar lebar ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .piringan.berputar { animation: none; }
}
@media (min-width: 768px) {
  .bagian { padding: 5rem 2rem; }
  .nama-sampul { font-size: 4rem; }
}

/* ---------- Kelas saklar mesin jelajah (dipakai verbatim oleh mesin NAT) ---------- */
.bg-gold-gradient { background: linear-gradient(135deg, #E6C762 0%, #D4AF37 55%, #AA7C11 100%); }
.bg-navy-800 { background: var(--tema-800); }
.text-gold-200 { color: var(--emas-200); }
.text-navy-950 { color: var(--tema-950); }