/* ============================================================
   INVITEGRAM — UNDANGAN.CSS (V2, mengikuti desain referensi)
   ============================================================
   - Semua warna dari CSS variables yang di-set inline oleh
     layout.php berdasarkan tema pilihan user (palet_undangan()).
   - Struktur: envGate (amplop 3D) → cover → sheet (sections)
     → bottomNav pil mengambang → musik, kelopak, lightbox, toast.
   - Mandiri: TIDAK memuat style.css agar bebas konflik.
   ============================================================ */

/* ---------- 1. DASAR ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body, 'Jost', sans-serif);
  background: var(--g950);
  color: var(--ink);
  line-height: 1.65;
  font-size: 15px;
  -webkit-tap-highlight-color: transparent;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font-family: inherit; }
.hidden { display: none !important; }
body.locked { overflow: hidden; height: 100vh; }
::selection { background: var(--gold); color: #fff; }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-thumb { background: var(--g600); border-radius: 9px; }
::-webkit-scrollbar-track { background: var(--g950); }

.script { font-family: var(--font-couple); font-weight: 400; }
.serif  { font-family: var(--font-head, 'Cormorant Garamond', serif); }

/* ============ v1.8.12: MODE FONT SCRIPT (data-fscript="1") ============
   Sejak v1.8.12 font script/calligraphy pilihan user dipakai JUGA di
   semua judul (--font-head). Font script tidak punya sumbu ketebalan
   600/700 — browser men-sintesis bold (faux bold) sehingga huruf
   calligraphy menggumpal dan sulit dibaca. Guard ini memaksa tebal
   normal (400) pada elemen judul saat font script aktif; untuk font
   serif/sans (data-fscript="0") tidak ada efek sama sekali. */
[data-fscript="1"] :is(h1, h2, h3, h4, h5, h6,
  .title, .serif, .script, .umur-besar, .ag-time,
  .cd-box b, .gb-avatar, .event-card h3, .event-card .big,
  .ag-body h4, .guest-name, .cover-date, .cover-hijri,
  .hero-text .d, .person small) { font-weight: 400; }

#sheet {
  max-width: 540px;
  margin: 0 auto;
  background: var(--cream);
  box-shadow: 0 0 90px rgba(0, 0, 0, .55);
  position: relative;
}
section { padding: 76px 26px; text-align: center; position: relative; }
.alt { background: linear-gradient(180deg, var(--cream2), var(--cream3)); }
.sec-head { margin-bottom: 36px; }
.eyebrow {
  color: var(--gold3);
  letter-spacing: .38em;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 10px;
}
.title {
  font-family: var(--font-head, 'Cormorant Garamond', serif);
  font-size: 2.25rem;
  font-weight: 600;
  color: var(--g800);
  line-height: 1.15;
}
.orn { color: var(--gold); margin-top: 14px; }
.orn svg { width: 150px; height: 20px; display: block; margin: 0 auto; }

/* ---------- 1b. BINGKAI SUDUT SETIAP HALAMAN (v1.8.8 — permintaan user:
   "tampilan terlalu polos, tambahkan bingkai di sudut tiap halaman,
   minimalis/elegan, warna mengikuti tema undangan") ----------
   Dibuat murni CSS tanpa elemen tambahan: ::before = 4 sudut huruf L
   emas (8 gradient), ::after = garis rambut tipis di dalamnya.
   Warna otomatis ikut tema karena memakai --gold/--gold2 dari palet.
   Variasi: section .alt diberi titik berlian kecil di keempat sudut.

   v1.8.10 (permintaan user):
   1) KETEBALAN GARIS BISA DIPILIH di editor (Tipis/Normal/Tebal) —
      semua ukuran garis memakai variabel --bkw/--bkw2/--bkd (halaman)
      dan --bkwf/--bkwf2 (foto). Bawaan Normal 2px (garis 1px lama
      dianggap terlalu tipis & ada yang tak jelas terlihat).
   2) BINGKAI IKUT TAMPIL di halaman COVER (#cover) & halaman AMPLOP
      (#envGate, "sebelum cover") — keduanya kini memakai pola yang
      SAMA dengan section di lembar isi, mengikuti gaya pilihan user;
      .frame statis lama dinonaktifkan agar tidak timbul bingkai dobel. */
body {
  --bkw: 2px;    /* tebal garis utama bingkai halaman */
  --bkw2: 1.5px; /* tebal lapis kedua / garis dalam */
  --bkd: 1.9px;  /* radius titik (berlian/titik) */
  --bkwf: 2px;   /* tebal bingkai foto */
  --bkwf2: 1px;  /* tebal lapis kedua bingkai foto */
}
/* v1.8.11: katalog diperluas 3 → 5 level (permintaan user "tambah
   lagi pilihan tema dan ketebalan tema"). Kunci lama tetap sah. */
[data-bingkai-tebal="sangattipis"] { --bkw: 1px;   --bkw2: 1px;   --bkd: 1.3px; }
[data-bingkai-tebal="tipis"]       { --bkw: 1.5px; --bkw2: 1.2px; --bkd: 1.6px; }
[data-bingkai-tebal="tebal"]       { --bkw: 3px;   --bkw2: 2px;   --bkd: 2.5px; }
[data-bingkai-tebal="sangattebal"] { --bkw: 4.5px; --bkw2: 3px;   --bkd: 3.2px; }
[data-bingkai-foto-tebal="sangattipis"] { --bkwf: 1px;   --bkwf2: 1px; }
[data-bingkai-foto-tebal="tipis"]       { --bkwf: 1.5px; --bkwf2: 1px; }
[data-bingkai-foto-tebal="tebal"]       { --bkwf: 3px;   --bkwf2: 2px; }
[data-bingkai-foto-tebal="sangattebal"] { --bkwf: 4.5px; --bkwf2: 3px; }

section::before, #cover::before, #envGate::before {
  content: '';
  position: absolute; inset: 10px; pointer-events: none;
  background-image:
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-size:
    26px var(--bkw), var(--bkw) 26px,
    26px var(--bkw), var(--bkw) 26px,
    26px var(--bkw), var(--bkw) 26px,
    26px var(--bkw), var(--bkw) 26px;
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
  opacity: .75;
}
section::after, #cover::after, #envGate::after {
  content: '';
  position: absolute; inset: 17px; pointer-events: none;
  border: var(--bkw2) solid rgba(var(--gold-rgb), .18);
}
/* Pseudo cover/hero diangkat ke atas latar foto & shade (di bawah teks);
   .frame statis lama nonaktif — diganti ornamen katalog pilihan user. */
#cover::before, #cover::after { z-index: 1; }
.cover-inner { z-index: 1; }
.hero::before, .hero::after { z-index: 1; }
.hero-text { z-index: 2; }
.frame { display: none; }
/* variasi utk halaman berlatar lembut (.alt): sudut emas lebih tegas +
   titik berlian kecil di pertemuan garis */
.alt::before { opacity: .85; }
.alt::after {
  border-color: rgba(var(--gold-rgb), .24);
  background-image:
    radial-gradient(circle, var(--gold2) 0 var(--bkd), transparent calc(var(--bkd) + 0.8px)),
    radial-gradient(circle, var(--gold2) 0 var(--bkd), transparent calc(var(--bkd) + 0.8px)),
    radial-gradient(circle, var(--gold2) 0 var(--bkd), transparent calc(var(--bkd) + 0.8px)),
    radial-gradient(circle, var(--gold2) 0 var(--bkd), transparent calc(var(--bkd) + 0.8px));
  background-size: 8px 8px;
  background-repeat: no-repeat;
  background-position:
    left -4px top -4px, right -4px top -4px,
    left -4px bottom -4px, right -4px bottom -4px;
}

/* ---------- 1c. KATALOG BINGKAI PILIHAN (v1.8.9 — permintaan user:
   "buatkan banyak pilihan bingkai yg bisa dipilih di editor undangan") ----------
   Pilihan disimpan di details JSON undangan & dikirim lewat atribut
   <body data-bingkai="...">. Gaya 'sudut' = blok 1b di atas (bawaan).
   Semua gaya memakai var(--gold)/var(--gold2) → warna otomatis
   mengikuti tema undangan yang dipilih (15 palet). */

/* SUDUT BERLIAN — sudut L lebih tegas + titik berlian di keempat sudut */
[data-bingkai="berlian"] section::before,
[data-bingkai="berlian"] #cover::before,
[data-bingkai="berlian"] #envGate::before { opacity: .85; }
[data-bingkai="berlian"] section::after,
[data-bingkai="berlian"] #cover::after,
[data-bingkai="berlian"] #envGate::after {
  border-color: rgba(var(--gold-rgb), .24);
  background-image:
    radial-gradient(circle, var(--gold2) 0 var(--bkd), transparent calc(var(--bkd) + 0.8px)),
    radial-gradient(circle, var(--gold2) 0 var(--bkd), transparent calc(var(--bkd) + 0.8px)),
    radial-gradient(circle, var(--gold2) 0 var(--bkd), transparent calc(var(--bkd) + 0.8px)),
    radial-gradient(circle, var(--gold2) 0 var(--bkd), transparent calc(var(--bkd) + 0.8px));
  background-size: 8px 8px;
  background-repeat: no-repeat;
  background-position:
    left -4px top -4px, right -4px top -4px,
    left -4px bottom -4px, right -4px bottom -4px;
}

/* SUDUT GANDA — dua lapis huruf L (tebal di luar, tipis di dalam) */
[data-bingkai="ganda"] section::before,
[data-bingkai="ganda"] #cover::before,
[data-bingkai="ganda"] #envGate::before {
  opacity: .8;
  background-image:
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold));
  background-size:
    30px var(--bkw), var(--bkw) 30px, 30px var(--bkw), var(--bkw) 30px,
    30px var(--bkw), var(--bkw) 30px, 30px var(--bkw), var(--bkw) 30px,
    20px var(--bkw2), var(--bkw2) 20px, 20px var(--bkw2), var(--bkw2) 20px,
    20px var(--bkw2), var(--bkw2) 20px, 20px var(--bkw2), var(--bkw2) 20px;
  background-position:
    left top, left top, right top, right top,
    left bottom, left bottom, right bottom, right bottom,
    left 9px top 9px, left 9px top 9px, right 9px top 9px, right 9px top 9px,
    left 9px bottom 9px, left 9px bottom 9px, right 9px bottom 9px, right 9px bottom 9px;
}
[data-bingkai="ganda"] section::after,
[data-bingkai="ganda"] #cover::after,
[data-bingkai="ganda"] #envGate::after { content: none; }

/* GARIS GANDA — dua garis penuh mengelilingi halaman */
[data-bingkai="garis"] section::before,
[data-bingkai="garis"] #cover::before,
[data-bingkai="garis"] #envGate::before {
  background-image: none;
  inset: 12px; opacity: 1;
  border: var(--bkw) solid rgba(var(--gold-rgb), .5);
  border-radius: 3px;
}
[data-bingkai="garis"] section::after,
[data-bingkai="garis"] #cover::after,
[data-bingkai="garis"] #envGate::after { border-color: rgba(var(--gold-rgb), .2); }

/* LENGKUNG HALUS — busur kuartal lingkaran di keempat sudut */
[data-bingkai="lengkung"] section::before,
[data-bingkai="lengkung"] #cover::before,
[data-bingkai="lengkung"] #envGate::before {
  opacity: .8;
  background-image:
    radial-gradient(circle at 0 0, transparent 0 22px, var(--gold) 22px calc(22px + var(--bkw)), transparent calc(23px + var(--bkw))),
    radial-gradient(circle at 100% 0, transparent 0 22px, var(--gold) 22px calc(22px + var(--bkw)), transparent calc(23px + var(--bkw))),
    radial-gradient(circle at 0 100%, transparent 0 22px, var(--gold) 22px calc(22px + var(--bkw)), transparent calc(23px + var(--bkw))),
    radial-gradient(circle at 100% 100%, transparent 0 22px, var(--gold) 22px calc(22px + var(--bkw)), transparent calc(23px + var(--bkw)));
  background-size: 25px 25px;
  background-repeat: no-repeat;
  background-position: left top, right top, left bottom, right bottom;
}

/* ART DECO — sudut bertingkat tiga lapis */
[data-bingkai="deco"] section::before,
[data-bingkai="deco"] #cover::before,
[data-bingkai="deco"] #envGate::before {
  opacity: .9;
  background-image:
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold));
  background-size:
    28px var(--bkw), var(--bkw) 28px, 28px var(--bkw), var(--bkw) 28px,
    28px var(--bkw), var(--bkw) 28px, 28px var(--bkw), var(--bkw) 28px,
    20px var(--bkw2), var(--bkw2) 20px, 20px var(--bkw2), var(--bkw2) 20px,
    20px var(--bkw2), var(--bkw2) 20px, 20px var(--bkw2), var(--bkw2) 20px,
    12px var(--bkw2), var(--bkw2) 12px, 12px var(--bkw2), var(--bkw2) 12px,
    12px var(--bkw2), var(--bkw2) 12px, 12px var(--bkw2), var(--bkw2) 12px;
  background-position:
    left top, left top, right top, right top,
    left bottom, left bottom, right bottom, right bottom,
    left 7px top 7px, left 7px top 7px, right 7px top 7px, right 7px top 7px,
    left 7px bottom 7px, left 7px bottom 7px, right 7px bottom 7px, right 7px bottom 7px,
    left 14px top 14px, left 14px top 14px, right 14px top 14px, right 14px top 14px,
    left 14px bottom 14px, left 14px bottom 14px, right 14px bottom 14px, right 14px bottom 14px;
}
[data-bingkai="deco"] section::after,
[data-bingkai="deco"] #cover::after,
[data-bingkai="deco"] #envGate::after { content: none; }

/* TITIK HALUS — rangkaian titik kecil membentuk sudut */
[data-bingkai="titik"] section::before,
[data-bingkai="titik"] #cover::before,
[data-bingkai="titik"] #envGate::before {
  opacity: .85;
  background-image:
    radial-gradient(circle, var(--gold) 0 var(--bkd), transparent calc(var(--bkd) + 0.8px)),
    radial-gradient(circle, var(--gold) 0 var(--bkd), transparent calc(var(--bkd) + 0.8px)),
    radial-gradient(circle, var(--gold) 0 var(--bkd), transparent calc(var(--bkd) + 0.8px)),
    radial-gradient(circle, var(--gold) 0 var(--bkd), transparent calc(var(--bkd) + 0.8px)),
    radial-gradient(circle, var(--gold) 0 var(--bkd), transparent calc(var(--bkd) + 0.8px)),
    radial-gradient(circle, var(--gold) 0 var(--bkd), transparent calc(var(--bkd) + 0.8px)),
    radial-gradient(circle, var(--gold) 0 var(--bkd), transparent calc(var(--bkd) + 0.8px)),
    radial-gradient(circle, var(--gold) 0 var(--bkd), transparent calc(var(--bkd) + 0.8px)),
    radial-gradient(circle, var(--gold) 0 var(--bkd), transparent calc(var(--bkd) + 0.8px)),
    radial-gradient(circle, var(--gold) 0 var(--bkd), transparent calc(var(--bkd) + 0.8px)),
    radial-gradient(circle, var(--gold) 0 var(--bkd), transparent calc(var(--bkd) + 0.8px)),
    radial-gradient(circle, var(--gold) 0 var(--bkd), transparent calc(var(--bkd) + 0.8px));
  background-size: calc(var(--bkd) * 3 + 0.5px) calc(var(--bkd) * 3 + 0.5px);
  background-repeat: no-repeat;
  background-position:
    left 3px top 3px, left calc(6px + var(--bkd) * 3) top 3px, left 3px top calc(6px + var(--bkd) * 3),
    right 3px top 3px, right calc(6px + var(--bkd) * 3) top 3px, right 3px top calc(6px + var(--bkd) * 3),
    left 3px bottom 3px, left calc(6px + var(--bkd) * 3) bottom 3px, left 3px bottom calc(6px + var(--bkd) * 3),
    right 3px bottom 3px, right calc(6px + var(--bkd) * 3) bottom 3px, right 3px bottom calc(6px + var(--bkd) * 3);
}

/* PLUS MODERN — tanda plus kecil di keempat sudut */
[data-bingkai="krus"] section::before,
[data-bingkai="krus"] #cover::before,
[data-bingkai="krus"] #envGate::before {
  opacity: .85;
  background-image:
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold));
  background-size:
    14px var(--bkw), var(--bkw) 14px, 14px var(--bkw), var(--bkw) 14px,
    14px var(--bkw), var(--bkw) 14px, 14px var(--bkw), var(--bkw) 14px;
  background-position:
    left 4px top 10px, left 10px top 4px,
    right 4px top 10px, right 10px top 4px,
    left 4px bottom 10px, left 10px bottom 4px,
    right 4px bottom 10px, right 10px bottom 4px;
}

/* TANPA BINGKAI — semua halaman bersih tanpa ornamen
   (termasuk cover & halaman amplop — konsisten dgn pilihan user) */
[data-bingkai="polos"] section::before,
[data-bingkai="polos"] #cover::before,
[data-bingkai="polos"] #envGate::before,
[data-bingkai="polos"] section::after,
[data-bingkai="polos"] #cover::after,
[data-bingkai="polos"] #envGate::after { content: none; }

/* Variasi .alt (halaman berlatar lembut): gaya selain sudut/berlian
   tidak memakai titik berlian di sudutnya — cukup garis sedikit lebih tegas */
[data-bingkai="ganda"] .alt::after,
[data-bingkai="garis"] .alt::after,
[data-bingkai="lengkung"] .alt::after,
[data-bingkai="deco"] .alt::after,
[data-bingkai="titik"] .alt::after,
[data-bingkai="krus"] .alt::after,
[data-bingkai="polos"] .alt::after {
  background-image: none;
  border-color: rgba(var(--gold-rgb), .2);
}

/* ---------- 2. ENVELOPE GATE ---------- */
#envGate {
  position: fixed; inset: 0; z-index: 150;
  background: radial-gradient(120% 100% at 50% 10%, var(--g800), var(--g950));
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 36px;
  transition: opacity .6s, visibility .6s;
  cursor: pointer;
}
#envGate.fade { opacity: 0; visibility: hidden; pointer-events: none; }
.env {
  width: 290px; height: 195px; position: relative;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .45));
  perspective: 900px;
}
.env-back {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, var(--g600), var(--g800));
  border-radius: 10px;
}
.env-letter {
  position: absolute; left: 12px; right: 12px; top: 10px; bottom: 10px;
  background: var(--cream); border-radius: 8px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 14px;
  /* v1.8.8: animasi dipercepat (1.1s/.55s → .7s/.2s) — permintaan user */
  transition: transform .7s cubic-bezier(.22, .9, .3, 1.18) .2s;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
}
.env.open .env-letter { transform: translateY(-48%) scale(1.07); }
.env-k {
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold3);
}
.env-name {
  font-family: var(--font-couple); font-size: 1.9rem; color: var(--g800);
  line-height: 1.2; word-wrap: break-word; max-width: 100%;
}
.env-front {
  position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(160deg, var(--g800), var(--g900));
  clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%);
}
.env-flap {
  position: absolute; top: 0; left: 0; right: 0; height: 53%; z-index: 4;
  background: linear-gradient(180deg, var(--g900), var(--g800));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transition: transform .55s cubic-bezier(.6, 0, .3, 1);
}
.env.open .env-flap { transform: rotateX(-180deg); z-index: 1; }
.env-seal {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); z-index: 5;
  width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--gold2), var(--g800));
  color: var(--g950);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
  transition: opacity .3s, transform .45s;
}
.env.open .env-seal { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
.env-tap {
  color: var(--gold2); letter-spacing: .28em; font-size: 11px; text-transform: uppercase;
  animation: cue 1.8s ease-in-out infinite;
}

/* ---------- 3. COVER ---------- */
#cover {
  position: fixed; inset: 0; z-index: 100;
  background: var(--g950);
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
  transition: opacity 1.1s, visibility 1.1s;
}
#cover.closed { opacity: 0; visibility: hidden; pointer-events: none; }
.cover-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .30;
  animation: slowzoom 36s ease-in-out infinite alternate;
}
.cover-bg--polos {
  opacity: 1;
  background:
    radial-gradient(90% 70% at 50% 8%, var(--g800), transparent 70%),
    radial-gradient(70% 55% at 50% 100%, var(--g900), transparent 75%),
    var(--g950);
}
@keyframes slowzoom { from { transform: scale(1); } to { transform: scale(1.15); } }
.cover-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(var(--g950-rgb), .45) 0%,
    rgba(var(--g950-rgb), .62) 45%,
    rgba(var(--g950-rgb), .92) 100%);
}
.frame { position: absolute; inset: 16px; border: 1px solid rgba(var(--gold2-rgb), .45); pointer-events: none; }
.frame::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(var(--gold2-rgb), .22); }
.frame .c { position: absolute; width: 24px; height: 24px; border: 0 solid var(--gold2); }
.frame .c1 { top: -2px; left: -2px; border-top-width: 2px; border-left-width: 2px; }
.frame .c2 { top: -2px; right: -2px; border-top-width: 2px; border-right-width: 2px; }
.frame .c3 { bottom: -2px; left: -2px; border-bottom-width: 2px; border-left-width: 2px; }
.frame .c4 { bottom: -2px; right: -2px; border-bottom-width: 2px; border-right-width: 2px; }
.cover-inner {
  position: relative; text-align: center; color: var(--on-dark);
  max-width: 400px; width: 100%;
  animation: fadeUp 1.2s both;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
  max-height: 100%; overflow-y: auto; padding: 8px 0;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.cover-eyebrow {
  letter-spacing: .5em; font-size: 11px; text-transform: uppercase;
  color: var(--gold2); font-weight: 500;
}
.cover-names { margin: 18px 0 14px; line-height: .95; }
.cover-names span {
  display: block; font-family: var(--font-couple); font-weight: 400;
  font-size: 3.4rem; color: var(--on-dark);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .4);
  word-wrap: break-word;
}
.cover-names .amp-mini {
  display: block; font-family: var(--font-head, 'Cormorant Garamond', serif); font-style: normal;
  font-size: 1.5rem; color: var(--gold2); margin: 6px 0;
}
.cover-date {
  font-family: var(--font-head, 'Cormorant Garamond', serif);
  letter-spacing: .35em; font-size: 14px; color: var(--on-dark); opacity: .95;
}
.cover-hijri {
  font-family: var(--font-head, 'Cormorant Garamond', serif);
  font-size: 13px; letter-spacing: .12em; color: var(--gold2); margin-top: 9px;
}
.cover-orn { color: var(--gold); margin: 20px auto 24px; }
.guest-box {
  background: rgba(0, 0, 0, .30);
  border: 1px solid rgba(var(--gold2-rgb), .4);
  border-radius: 16px; padding: 20px 18px;
  backdrop-filter: blur(6px); margin-bottom: 30px;
}
.gb-k { font-size: 12.5px; color: rgba(255, 255, 255, .92); }
.guest-name {
  font-family: var(--font-head, 'Cormorant Garamond', serif);
  font-size: 1.8rem; font-weight: 700; color: var(--gold2);
  line-height: 1.25; margin: 6px 0; word-wrap: break-word;
}
.gb-note { font-size: 10.5px; color: rgba(255, 255, 255, .62); }
#openBtn {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  background: rgba(var(--on-dark-rgb), .06);
  border: 1px solid rgba(var(--gold2-rgb), .7);
  color: var(--on-dark);
  padding: 14px 38px; border-radius: 999px;
  font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; transition: .35s; backdrop-filter: blur(4px);
}
#openBtn:hover { background: var(--gold2); color: var(--g900); border-color: var(--gold2); }
#openBtn::after {
  content: ''; position: absolute; inset: -4px; border-radius: 999px;
  border: 1px solid rgba(var(--gold2-rgb), .5);
  animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(.96); opacity: .9; }
  70% { transform: scale(1.12); opacity: 0; }
  100% { opacity: 0; }
}

/* ---------- 4. HERO ---------- */
.hero { position: relative; height: 94vh; min-height: 560px; padding: 0 !important; overflow: hidden; }
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  animation: slowzoom 26s ease-in-out infinite alternate;
}
.hero--polos {
  background:
    radial-gradient(90% 70% at 50% 0%, var(--g800), transparent 70%),
    var(--g950);
}
.hero-mono {
  position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%);
  width: 150px; height: 150px; border-radius: 50%;
  border: 1px solid var(--gold); color: var(--gold2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head, 'Cormorant Garamond', serif); font-size: 2.4rem; letter-spacing: .06em;
  opacity: .9;
}
.hero-mono::after {
  content: ''; position: absolute; inset: 7px; border-radius: 50%;
  border: 1px dashed rgba(var(--gold2-rgb), .4);
}
.hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(var(--g950-rgb), .42) 0%,
    rgba(var(--g950-rgb), .05) 40%,
    rgba(var(--g950-rgb), .78) 100%);
}
.hero-text {
  position: absolute; left: 0; right: 0; bottom: 12%;
  color: var(--on-dark); text-align: center;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}
.hero-text .pre {
  letter-spacing: .4em; font-size: 11px; text-transform: uppercase; color: var(--gold2);
}
.hero-text h2 {
  font-family: var(--font-couple); font-weight: 400;
  font-size: 4rem; margin: 8px 0 10px;
  text-shadow: 0 3px 24px rgba(0, 0, 0, .45);
  word-wrap: break-word;
}
.hero-text .d {
  display: inline-block; font-family: var(--font-head, 'Cormorant Garamond', serif);
  letter-spacing: .4em; font-size: 14px;
  border: 1px solid rgba(var(--gold2-rgb), .6);
  padding: 8px 22px; border-radius: 999px; backdrop-filter: blur(3px);
}
.scroll-cue {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 42px;
  border: 1.5px solid rgba(var(--on-dark-rgb), .7); border-radius: 14px;
  display: flex; justify-content: center; padding-top: 8px;
}
.scroll-cue span {
  width: 3px; height: 9px; border-radius: 3px; background: var(--gold2);
  animation: cue 1.6s ease-in-out infinite;
}
@keyframes cue {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(14px); opacity: 0; }
  100% { opacity: 0; }
}

/* ---------- 5. QUOTE ---------- */
.quote .q {
  font-family: var(--font-head, 'Cormorant Garamond', serif); font-style: italic;
  font-size: 1.22rem; line-height: 1.8; max-width: 430px;
  margin: 0 auto; color: #4a493f;
}
.quote .src {
  font-size: 11px; letter-spacing: .3em; color: var(--gold3);
  margin-top: 18px; text-transform: uppercase;
}
.quote .bismillah {
  font-family: var(--font-head, 'Cormorant Garamond', serif);
  font-size: 1.35rem; color: var(--g800); margin-bottom: 18px;
}
.quote-arab {
  font-family: 'Amiri', serif; font-size: 1.5rem; line-height: 2.1;
  color: var(--g800); margin-bottom: 18px; direction: rtl;
}
.quote-terjemah {
  font-family: var(--font-head, 'Cormorant Garamond', serif); font-style: italic;
  font-size: 1.18rem; line-height: 1.85; max-width: 430px; margin: 0 auto; color: #4a493f;
}
.quote-sumber {
  font-size: 12.5px; letter-spacing: .12em; color: var(--gold3); margin-top: 18px; line-height: 1.8;
}
.quote-list { list-style: none; margin-top: 10px; }
.quote-list li {
  font-size: 13.5px; color: #55544a; padding: 6px 0;
  border-bottom: 1px dashed var(--line);
}
.quote-list li:last-child { border-bottom: 0; }

/* ---------- 6. OUR STORY ---------- */
.story-tl {
  max-width: 420px; margin: 0 auto; position: relative;
  padding-left: 30px; text-align: left;
}
.story-tl::before {
  content: ''; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, var(--gold), rgba(var(--gold-rgb), .1));
}
.story-item { position: relative; margin-bottom: 38px; }
.story-item:last-child { margin-bottom: 0; }
.story-item::before {
  content: ''; position: absolute; left: -27px; top: 6px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 4px var(--cream2), 0 0 0 6px rgba(var(--gold-rgb), .25);
}
.story-item .st-date {
  font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--gold3); font-weight: 500;
}
.story-item h3 {
  font-family: var(--font-couple); font-size: 1.75rem;
  color: var(--g800); font-weight: 400; margin: 2px 0 6px;
}
.story-item p { font-size: 13.5px; color: #5c5b4f; line-height: 1.75; }
.story-foto {
  width: 100%; max-width: 300px; border-radius: 14px; margin-bottom: 12px;
  box-shadow: 0 12px 28px rgba(var(--g900-rgb), .18);
  border: 4px solid var(--card);
}

/* ---------- 7. MEMPELAI / PROFIL ----------
   v1.8.8: foto tokoh/mempelai diberi BINGKAI ELEGAN minimalis — aksen
   sudut emas (huruf L) di dua sudut diagonal + bayangan lembut, warna
   mengikuti tema (--gold/--gold2). Berlaku utk foto split 2 orang &
   1 figur (semua varian fr-*). */
.pfoto { position: relative; }
.pfoto::before,
.pfoto::after {
  content: '';
  position: absolute; width: 34px; height: 34px;
  pointer-events: none; z-index: 1;
  border: 2px solid var(--gold2);
  opacity: .9;
  filter: drop-shadow(0 2px 4px rgba(var(--g900-rgb), .25));
}
.pfoto::before {
  top: -11px; left: -11px;
  border-right: 0; border-bottom: 0;
  border-radius: 8px 0 0 0;
}
.pfoto::after {
  bottom: -11px; right: -11px;
  border-left: 0; border-top: 0;
  border-radius: 0 0 8px 0;
}
/* v1.8.10: ketebalan bingkai foto via variabel (bawaan Normal 2px).
   Hanya sisi yang MEMANG bergaris (sudut L) yang diubah — sisi nol gaya
   sudut tetap nol; gaya varian ber-border penuh menimpa lewat shorthand
   miliknya (spesifisitas lebih tinggi) sehingga tak terpengaruh. */
.pfoto::before { border-top-width: var(--bkwf); border-left-width: var(--bkwf); }
.pfoto::after  { border-bottom-width: var(--bkwf); border-right-width: var(--bkwf); }

/* ---------- VARIASI BINGKAI FOTO (v1.8.9 — katalog pilihan editor) ----------
   Dikirim lewat <body data-bingkai-foto="...">. 'sudut' = gaya di atas
   (bawaan). Semua tetap memakai warna tema --gold/--gold2. */
[data-bingkai-foto="ganda"] .pfoto::before,
[data-bingkai-foto="ganda"] .pfoto::after {
  border: 0; border-radius: 0;
  width: 46px; height: 46px;
  background-repeat: no-repeat;
}
[data-bingkai-foto="ganda"] .pfoto::before {
  top: -14px; left: -14px;
  background-image:
    linear-gradient(var(--gold2), var(--gold2)), linear-gradient(var(--gold2), var(--gold2)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold));
  background-size: 46px var(--bkwf), var(--bkwf) 46px, 32px var(--bkwf2), var(--bkwf2) 32px;
  background-position: left top, left top, left 9px top 9px, left 9px top 9px;
}
[data-bingkai-foto="ganda"] .pfoto::after {
  bottom: -14px; right: -14px;
  background-image:
    linear-gradient(var(--gold2), var(--gold2)), linear-gradient(var(--gold2), var(--gold2)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold));
  background-size: 46px var(--bkwf), var(--bkwf) 46px, 32px var(--bkwf2), var(--bkwf2) 32px;
  background-position: right bottom, right bottom, right 9px bottom 9px, right 9px bottom 9px;
}
[data-bingkai-foto="tebal"] .pfoto::before {
  inset: -12px; width: auto; height: auto; border-radius: 18px;
  border: calc(var(--bkwf) + 1px) solid var(--gold2);
}
[data-bingkai-foto="tebal"] .pfoto::after {
  inset: -5px; width: auto; height: auto; border-radius: 12px;
  border: var(--bkwf2) solid rgba(var(--gold-rgb), .4);
}
[data-bingkai-foto="penuh"] .pfoto::before {
  inset: -9px; width: auto; height: auto; border-radius: 15px;
  border: var(--bkwf) solid var(--gold2);
}
[data-bingkai-foto="penuh"] .pfoto::after {
  inset: -3px; width: auto; height: auto; border-radius: 9px;
  border: var(--bkwf2) solid rgba(var(--gold-rgb), .35);
}
[data-bingkai-foto="putus"] .pfoto::before {
  inset: -9px; width: auto; height: auto; border-radius: 15px;
  border: var(--bkwf) dashed rgba(var(--gold-rgb), .7);
}
[data-bingkai-foto="putus"] .pfoto::after { content: none; }
[data-bingkai-foto="lengkung"] .pfoto::before {
  inset: -8px; width: auto; height: auto;
  border: var(--bkwf) solid var(--gold2);
  border-radius: 64px 64px 18px 18px;
}
[data-bingkai-foto="lengkung"] .pfoto::after { content: none; }
[data-bingkai-foto="polos"] .pfoto::before,
[data-bingkai-foto="polos"] .pfoto::after { content: none; }
.person { margin-bottom: 50px; }
.person:last-of-type { margin-bottom: 0; }
/* v1.8.11: foto 1 figur diperkecil 205x268 → 192x252 — bingkai aksen
   (huruf L/ganda, menjorok -11..-14px keluar foto) tidak lagi mendekati
   garis rambut bingkai halaman (inset 17px) pada layar kecil. */
.person > img,
.person .pfoto img {
  width: 192px; height: 252px; object-fit: cover;
  border-radius: 110px 110px 14px 14px; margin: 0 auto 20px;
  border: 5px solid var(--card); outline: 1px solid var(--gold); outline-offset: 5px;
  box-shadow: 0 18px 40px rgba(var(--g900-rgb), .22);
}
.person .role {
  font-size: 10px; letter-spacing: .35em; text-transform: uppercase;
  color: var(--gold3); font-weight: 500;
}
.person h3 {
  font-family: var(--font-couple); font-size: 2.3rem; font-weight: 400;
  color: var(--g800); margin: 6px 0 4px; word-wrap: break-word;
}
.person p { font-size: 13px; color: var(--muted); }
.person small {
  display: block; font-family: var(--font-head, 'Cormorant Garamond', serif);
  font-size: 15px; color: #5c5b4f; margin-top: 4px;
}
.amp {
  font-family: var(--font-couple); font-size: 3.6rem;
  color: var(--gold); margin: 36px 0; line-height: 1;
}
.soc { display: flex; gap: 8px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.soc-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; padding: 5px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--g600);
  text-decoration: none; transition: .3s;
}
.soc-link:hover { background: var(--g900); color: var(--gold2); border-color: var(--g900); }
/* v1.8.11 — PERBAIKAN UKURAN FOTO MEMPELAI (permintaan user: "Perbaiki
   ukuran foto mempelai, karena jika diberi bingkai, bingkainya bertumpuk
   dengan bingkai halaman"): (1) foto split diperkecil 168x220 → 150x198;
   (2) .pfoto diberi margin 12px sehingga aksen bingkai yang menjorok
   keluar foto (maks -14px) BERAKHIR ±26px dari tepi section — aman dari
   garis rambut bingkai halaman (inset 17px) & sudut L (hingga 36px);
   (3) gap flex 20→16px agar teks tetap lega. */
.split .person { display: flex; align-items: center; gap: 16px; text-align: left; margin-bottom: 40px; }
.split .person .pfoto { margin: 12px; flex-shrink: 0; }
.split .person > img,
.split .person .pfoto img { margin: 0; width: 150px; height: 198px; border-radius: 14px; flex-shrink: 0; outline-offset: 3px; }
.split .person .inner { flex: 1; min-width: 0; }
.split .person.rev { flex-direction: row-reverse; text-align: right; }
.split .soc { justify-content: flex-start; margin-top: 12px; }
.split .person.rev .soc { justify-content: flex-end; }
.split .amp { display: none; }

/* profil 1 figur — nama besar & meta per jenis */
.profil-nama-besar {
  font-family: var(--font-couple); font-weight: 400;
  font-size: 2.8rem; color: var(--g800); line-height: 1.15; word-wrap: break-word;
}
.profil-nama-besar .arab { display: block; font-family: 'Amiri', serif; font-size: 1.7rem; color: var(--gold3); margin-top: 6px; }
.umur-besar {
  font-family: var(--font-head, 'Cormorant Garamond', serif); font-weight: 700;
  font-size: 5rem; line-height: 1; color: var(--gold); margin: 14px 0 4px;
}
.baby-meta {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 12px 0;
}
.baby-meta span {
  font-size: 11.5px; padding: 5px 12px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line); color: #55544a;
}
.dress-chip {
  display: inline-block; font-size: 11.5px; padding: 6px 16px; border-radius: 999px;
  background: rgba(var(--gold-rgb), .14); border: 1px solid rgba(var(--gold-rgb), .4);
  color: var(--gold3); margin-top: 10px;
}

/* bingkai foto BERBEDA per jenis (identitas visual tiap acara) */
.pfoto { display: inline-block; }
.pfoto img {
  width: 192px; height: 252px; object-fit: cover;
  border: 5px solid var(--card); outline: 1px solid var(--gold); outline-offset: 5px;
  box-shadow: 0 18px 40px rgba(var(--g900-rgb), .22);
  display: block;
}
.fr-arch img   { border-radius: 110px 110px 14px 14px; }
.fr-polaroid img { border-radius: 12px; transform: rotate(-2.5deg); }
.fr-scallop img  { border-radius: 50% 50% 14px 14px / 32% 32% 8% 8%; }
.fr-fun img      { border-radius: 22px; border-color: var(--gold2); transform: rotate(2deg); }
.fr-laurel img   { border-radius: 14px; outline-style: double; outline-offset: 8px; }
.fr-moon img     { border-radius: 110px 110px 110px 14px; }
.fr-geo img      { border-radius: 0; border-width: 1px; outline-offset: 8px; }

/* ==========================================================
   FITUR v1.8.11: BENTUK FOTO PILIHAN (permintaan user: "Berikan
   opsi bentukan foto tokoh dan mempelai, jangan cuman kotak
   saja, agar lebih bervariasi") — dikirim lewat
   <body data-bentuk-foto="...">. 'bawaan' = TANPA rule di bawah
   → tampilan lama persis (split: kotak membulat, 1 figur: fr-*).
   Spesifisitas selector atribut (0,2,1 / 0,3,1 dgn .split) selalu
   mengungguli .fr-* img (0,1,1) & rule dasar → pilihan user menang.
   ========================================================== */
[data-bentuk-foto="kotak"] .pfoto img,
[data-bentuk-foto="kotak"] .split .pfoto img { border-radius: 16px; }
[data-bentuk-foto="lingkaran"] .pfoto img,
[data-bentuk-foto="lingkaran"] .split .pfoto img {
  height: auto; aspect-ratio: 1 / 1; border-radius: 50%;
}
[data-bentuk-foto="oval"] .pfoto img,
[data-bentuk-foto="oval"] .split .pfoto img { border-radius: 50%; }
[data-bentuk-foto="lengkung"] .pfoto img,
[data-bentuk-foto="lengkung"] .split .pfoto img { border-radius: 999px 999px 16px 16px; }

/* Bingkai foto gaya "cincin penuh" (Tebal/Penuh/Putus/Lengkung) ikut
   menjadi BULAT pada foto lingkaran/oval — border-radius 50% pada
   pseudo-frame-nya, sehingga tidak ada lagi bingkai kotak yang
   "menggantung" di sudut sekitar foto bulat. Gaya sudut (Sudut
   Klasik/Ganda) sengaja dibiarkan tetap kotak: aksen sudut di luar
   foto bulat memang terlihat sengaja & rapi. */
[data-bentuk-foto="lingkaran"][data-bingkai-foto="tebal"] .pfoto::before,
[data-bentuk-foto="lingkaran"][data-bingkai-foto="tebal"] .pfoto::after,
[data-bentuk-foto="lingkaran"][data-bingkai-foto="penuh"] .pfoto::before,
[data-bentuk-foto="lingkaran"][data-bingkai-foto="penuh"] .pfoto::after,
[data-bentuk-foto="lingkaran"][data-bingkai-foto="putus"] .pfoto::before,
[data-bentuk-foto="lingkaran"][data-bingkai-foto="lengkung"] .pfoto::before,
[data-bentuk-foto="oval"][data-bingkai-foto="tebal"] .pfoto::before,
[data-bentuk-foto="oval"][data-bingkai-foto="tebal"] .pfoto::after,
[data-bentuk-foto="oval"][data-bingkai-foto="penuh"] .pfoto::before,
[data-bentuk-foto="oval"][data-bingkai-foto="penuh"] .pfoto::after,
[data-bentuk-foto="oval"][data-bingkai-foto="putus"] .pfoto::before,
[data-bentuk-foto="oval"][data-bingkai-foto="lengkung"] .pfoto::before { border-radius: 50%; }

/* ---------- 8. ACARA ---------- */
.event-grid { display: flex; flex-direction: column; gap: 18px; }
.event-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 22px;
  padding: 32px 24px; position: relative; overflow: hidden;
  box-shadow: 0 14px 34px rgba(var(--g900-rgb), .08);
}
.event-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.ico-ring {
  width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 50%;
  background: linear-gradient(160deg, var(--g900), var(--g600));
  color: var(--gold2);
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  box-shadow: 0 8px 20px rgba(var(--g900-rgb), .25);
}
.event-card h3 {
  font-family: var(--font-head, 'Cormorant Garamond', serif);
  font-size: 1.55rem; font-weight: 600; color: var(--g800); margin-bottom: 4px;
}
.event-card .big {
  font-family: var(--font-head, 'Cormorant Garamond', serif);
  font-size: 1.3rem; font-weight: 700; color: #4a493f; letter-spacing: .04em; margin-top: 8px;
}
.event-card p { font-size: 13.5px; color: var(--muted); }
.event-card .venue { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.event-card .venue strong { color: var(--g800); font-weight: 600; }
.btn-line {
  display: inline-block; margin-top: 16px; padding: 10px 26px; border-radius: 999px;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; transition: .3s; cursor: pointer; border: none;
}
.btn-line.green { border: 1px solid var(--g600); color: var(--g600); background: transparent; }
.btn-line.green:hover { background: var(--g800); border-color: var(--g800); color: #fff; }
.btn-line.gold {
  background: linear-gradient(160deg, var(--gold2), var(--gold));
  color: var(--g950); font-weight: 500;
  box-shadow: 0 8px 20px rgba(var(--gold-rgb), .35);
}
.btn-line.gold:hover { transform: translateY(-2px); }
.ics-note { font-size: 11px; color: var(--muted); margin-top: 16px; }

/* ---------- 9. AGENDA / RUNDOWN ---------- */
.agenda-tl { max-width: 440px; margin: 0 auto; text-align: left; }
.ag-item {
  display: grid; grid-template-columns: 86px 22px 1fr; gap: 0 10px;
  position: relative; padding-bottom: 30px;
}
.ag-item:last-child { padding-bottom: 0; }
.ag-time {
  font-family: var(--font-head, 'Cormorant Garamond', serif); font-weight: 700;
  font-size: 1.02rem; color: var(--gold3); text-align: right; padding-top: 2px; line-height: 1.3;
}
.ag-item::before {
  content: ''; position: absolute; left: 105px; top: 10px; bottom: -6px; width: 2px;
  background: linear-gradient(180deg, var(--gold), rgba(var(--gold-rgb), .15));
}
.ag-item:last-child::before { display: none; }
.ag-dot {
  width: 12px; height: 12px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 3px var(--cream), 0 0 0 5px rgba(var(--gold-rgb), .25);
  margin-top: 5px; position: relative; z-index: 1;
}
.ag-body h4 {
  font-family: var(--font-head, 'Cormorant Garamond', serif);
  font-size: 1.2rem; font-weight: 700; color: var(--g800); margin: 0 0 3px; line-height: 1.3;
}
.ag-body p { font-size: 12.5px; color: var(--muted); line-height: 1.65; }

/* ---------- 10. COUNTDOWN ---------- */
#countdown {
  background: radial-gradient(130% 110% at 50% 0%, var(--g800), var(--g950));
  color: var(--on-dark);
}
#countdown .eyebrow { color: var(--gold2); }
.cd-boxes { display: flex; gap: 12px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.cd-box {
  background: rgba(var(--on-dark-rgb), .06);
  border: 1px solid rgba(var(--gold2-rgb), .35);
  border-radius: 16px; min-width: 76px; padding: 16px 10px 12px;
  backdrop-filter: blur(3px);
}
.cd-box b {
  font-family: var(--font-head, 'Cormorant Garamond', serif); font-size: 2.5rem; font-weight: 600;
  display: block; line-height: 1; color: var(--gold2); font-variant-numeric: tabular-nums;
}
.cd-box small {
  font-size: 9.5px; letter-spacing: .28em; text-transform: uppercase;
  opacity: .8; display: block; margin-top: 6px;
}
.cd-done {
  font-family: var(--font-head, 'Cormorant Garamond', serif); font-style: italic;
  font-size: 1.2rem; color: var(--gold2);
}

/* ---------- 11. LOKASI ---------- */
.loc-block { margin-bottom: 36px; }
.loc-block:last-of-type { margin-bottom: 0; }
.loc-title {
  font-family: var(--font-couple); font-size: 1.8rem;
  font-weight: 400; color: var(--g800); margin-bottom: 2px;
}
.loc-venue { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.map-wrap {
  border-radius: 20px; overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(var(--g900-rgb), .14);
}
.map-wrap iframe { width: 100%; height: 270px; border: 0; display: block; }

/* ---------- 12. GALERI ---------- */
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gitem {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 16px;
  cursor: pointer; transition: .45s;
}
.gitem:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 16px 34px rgba(var(--g900-rgb), .25);
}
.gallery.mosaic .gitem:nth-child(4n+1) { grid-column: span 2; aspect-ratio: 16/10; }
#lightbox {
  position: fixed; inset: 0;
  background: rgba(var(--g950-rgb), .94); z-index: 200;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 16px; padding: 20px;
}
#lightbox img {
  max-width: 92%; max-height: 78vh; border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}
.lb-bar {
  display: flex; align-items: center; gap: 18px;
  color: var(--on-dark); opacity: .9; font-size: 13px;
}
.lb-bar button {
  background: rgba(var(--on-dark-rgb), .1);
  border: 1px solid rgba(var(--on-dark-rgb), .3);
  color: var(--on-dark); width: 42px; height: 42px; border-radius: 50%;
  font-size: 17px; cursor: pointer; transition: .3s;
}
.lb-bar button:hover { background: var(--gold2); color: var(--g900); opacity: 1; }

/* ---------- 13. KADO / AMPLOP DIGITAL — VERSI RAMPING (permintaan user:
   dulu tiap rekening/QRIS = kartu besar bertumpuk ke bawah; kini baris
   kompak rapat tapi tetap elegan) ---------- */
.gift-intro {
  font-size: 13.5px; color: var(--muted);
  max-width: 400px; margin: -16px auto 20px;
}
.gift-stack {
  max-width: 460px; margin: 0 auto;
  display: grid; gap: 10px;
}
.gift-row {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px;
  display: flex; align-items: center; gap: 12px; text-align: left;
  box-shadow: 0 6px 16px rgba(var(--g900-rgb), .05);
}
.gift-row__isi { flex: 1; min-width: 0; }
.gift-row__judul { display: block; font-size: 13.5px; color: var(--g800); letter-spacing: .02em; }
.bank-logo {
  flex-shrink: 0;
  display: inline-block; padding: 5px 12px; border-radius: 8px;
  color: #fff; font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
  max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bank-bca { background: linear-gradient(160deg, #1a7ae0, #0b4ea0); }
.bank-mandiri { background: linear-gradient(160deg, #1c4f9c, #0a2d63); }
.bank-bri { background: linear-gradient(160deg, #1a5fb4, #0a3a7a); }
.bank-bni { background: linear-gradient(160deg, #f28c28, #c05f0a); }
.bank-bsi { background: linear-gradient(160deg, #1d9d8f, #0d6e63); }
.bank-other { background: linear-gradient(160deg, var(--g800), var(--g600)); }
.acc-number {
  font-family: var(--font-head, 'Cormorant Garamond', serif);
  font-size: 1.2rem; font-weight: 700; letter-spacing: .12em;
  margin: 0; line-height: 1.25; color: var(--g800);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gift-row small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 1px; }
.copy-btn {
  flex-shrink: 0;
  background: linear-gradient(160deg, var(--gold2), var(--gold));
  border: none; color: var(--g950); font-weight: 500;
  padding: 8px 16px; border-radius: 999px; font-size: 11px; letter-spacing: .06em;
  cursor: pointer; transition: .3s;
  box-shadow: 0 5px 12px rgba(var(--gold-rgb), .28);
}
.copy-btn:hover { transform: translateY(-2px); }
.copy-btn--mini { margin: 0; }
.qris-img {
  width: 92px; height: 92px; object-fit: cover; flex-shrink: 0;
  margin: 0; border-radius: 10px;
  border: 1px solid var(--line);
  box-shadow: 0 4px 12px rgba(var(--g900-rgb), .1);
}
.gift-row--alamat { display: block; }
.gift-row--alamat .copy-btn--mini { margin-top: 8px; }
.gift-alamat {
  font-size: 12.5px; margin: 4px 0 0; color: #55544a; line-height: 1.6;
  word-break: break-word;
}
@media (max-width: 380px) {
  .gift-row { flex-wrap: wrap; }
  .gift-row__isi { flex: 1 1 calc(100% - 110px); }
}

/* ---------- 14. RSVP & UCAPAN — DIRAPATKAN (permintaan user:
   form tidak terlalu panjang ke bawah + buku tamu terbatas tinggi) ---------- */
#rsvpForm {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 16px 15px 15px; text-align: left; margin-bottom: 22px;
  box-shadow: 0 10px 26px rgba(var(--g900-rgb), .08);
}
#rsvpForm label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--g600); display: block; margin: 10px 0 4px;
}
#rsvpForm label:first-child { margin-top: 0; }
#rsvpForm input, #rsvpForm select, #rsvpForm textarea {
  width: 100%; padding: 9px 12px;
  border: 1.5px solid var(--line); border-radius: 10px;
  font-size: 14px; background: var(--cream); color: var(--ink);
  transition: .3s; font-family: var(--font-body, 'Jost', sans-serif);
}
#rsvpForm textarea { resize: vertical; min-height: 62px; }
#rsvpForm input:focus, #rsvpForm select:focus, #rsvpForm textarea:focus {
  outline: none; border-color: var(--gold); background: #fff;
}
/* 2 kolom: kehadiran + jumlah tamu berdampingan agar form ringkas */
.rsvp-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 420px) { .rsvp-duo { grid-template-columns: 1fr; } }
#rsvpForm button[type="submit"] {
  width: 100%; margin-top: 14px;
  background: linear-gradient(160deg, var(--g800), var(--g950));
  border: none; color: var(--on-dark);
  padding: 12px; border-radius: 12px;
  font-size: 13.5px; letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; transition: .3s;
  box-shadow: 0 10px 22px rgba(var(--g900-rgb), .28);
}
#rsvpForm button[type="submit"]:hover { transform: translateY(-2px); }
#rsvpForm button[type="submit"]:disabled { opacity: .6; cursor: wait; }
.rsvp-chips {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px;
}
.chip {
  font-size: 11.5px; padding: 6px 14px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line); color: var(--muted);
}
.chip b { color: var(--g800); }
/* BUKU TAMU: tinggi dibatasi + scroll halus — halaman tidak melar ke bawah */
#guestbook {
  max-height: 430px; overflow-y: auto; padding: 2px 6px 2px 2px;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  -webkit-mask-image: linear-gradient(180deg, #000 92%, transparent);
          mask-image: linear-gradient(180deg, #000 92%, transparent);
}
#guestbook::-webkit-scrollbar { width: 5px; }
#guestbook::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.gb-item {
  display: flex; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 13px;
  padding: 10px 13px; margin-bottom: 8px; text-align: left;
  box-shadow: 0 4px 12px rgba(var(--g900-rgb), .05);
  animation: fadeUp .6s both;
}
.gb-avatar {
  width: 32px; height: 32px; min-width: 32px; border-radius: 50%;
  background: linear-gradient(160deg, var(--g800), var(--g600));
  color: var(--gold2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head, 'Cormorant Garamond', serif); font-weight: 700; font-size: 15px;
}
.gb-body { flex: 1; min-width: 0; }
.gb-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; flex-wrap: wrap;
}
.gb-head strong { font-size: 13.5px; color: var(--g800); }
.gb-body p { font-size: 13px; margin: 3px 0; color: #55544a; overflow-wrap: break-word; }
.gb-time { font-size: 10.5px; color: var(--muted); }
.badge {
  font-size: 10px; padding: 3px 11px; border-radius: 999px;
  white-space: nowrap; font-weight: 500;
}
.b-hadir { background: var(--ok-bg); color: var(--ok); }
.b-tidak { background: var(--no-bg); color: var(--no); }
.b-ragu  { background: var(--maybe-bg); color: var(--maybe); }
.gb-empty { font-size: 13px; color: var(--muted); font-style: italic; padding: 20px 0; }

/* ---------- 15. MENU (bukapuasa) ---------- */
.menu-kartu {
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  padding: 30px 24px; max-width: 420px; margin: 0 auto;
  box-shadow: 0 14px 34px rgba(var(--g900-rgb), .08);
}
.menu-list { list-style: none; text-align: left; }
.menu-list li {
  padding: 11px 4px; border-bottom: 1px dashed var(--line);
  font-size: 14px; color: #55544a;
  display: flex; align-items: center; gap: 10px;
}
.menu-list li:last-child { border-bottom: 0; }
.menu-list li::before { content: '✦'; color: var(--gold); font-size: 11px; }

/* ---------- 16. FOOTER / PENUTUP ---------- */
.undangan-footer, footer.penutup-foot {
  background: radial-gradient(130% 110% at 50% 100%, var(--g800), var(--g950));
  color: var(--on-dark); text-align: center;
  padding: 76px 26px; position: relative;
}
footer.penutup-foot::before,
.undangan-footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.mono {
  width: 74px; height: 74px; margin: 0 auto 22px; border-radius: 50%;
  border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head, 'Cormorant Garamond', serif); font-size: 17px; letter-spacing: .05em;
  color: var(--gold2); position: relative;
}
.mono::after {
  content: ''; position: absolute; inset: 5px; border-radius: 50%;
  border: 1px dashed rgba(var(--gold2-rgb), .4);
}
footer.penutup-foot p { font-size: 13.5px; max-width: 380px; margin: 0 auto 14px; }
footer.penutup-foot .script { font-size: 2.9rem; color: var(--gold2); margin: 18px auto 4px; }
footer.penutup-foot small { display: block; margin-top: 34px; font-size: 11px; opacity: .65; letter-spacing: .05em; }
footer.penutup-foot small a { color: var(--gold2); text-decoration: none; }

/* ---------- 17. NAV PIL BAWAH & MUSIK & KELOPAK ---------- */
#musicBtn {
  position: fixed; top: 16px; right: 16px; z-index: 70;
  width: 47px; height: 47px; border-radius: 50%;
  background: rgba(var(--g900-rgb), .82); color: var(--gold2);
  border: 1px solid rgba(var(--gold2-rgb), .4);
  font-size: 17px; cursor: pointer;
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
}
#musicBtn.spin { animation: spin 3.5s linear infinite; }
#musicBtn:disabled { opacity: .45; cursor: default; }
@keyframes spin { to { transform: rotate(360deg); } }
#bottomNav {
  position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%);
  z-index: 60; display: flex; gap: 2px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 9px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .28);
  max-width: calc(100vw - 16px); overflow-x: auto; scrollbar-width: none;
}
#bottomNav::-webkit-scrollbar { display: none; }
#bottomNav a {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  text-decoration: none; color: var(--muted);
  font-size: 8px; letter-spacing: .03em;
  padding: 4px 7px; border-radius: 999px; transition: .3s; white-space: nowrap;
}
#bottomNav a .ico { font-size: 16px; line-height: 1.25; }
#bottomNav a.active, #bottomNav a:hover { background: var(--g900); color: var(--gold2); }
.petal {
  position: fixed; top: -44px; z-index: 5; pointer-events: none;
  animation: fall linear infinite; user-select: none;
}
@keyframes fall {
  0%   { transform: translateY(-6vh) translateX(0) rotate(0); }
  25%  { transform: translateY(28vh) translateX(3vw) rotate(95deg); }
  50%  { transform: translateY(58vh) translateX(-2vw) rotate(185deg); }
  75%  { transform: translateY(84vh) translateX(2.5vw) rotate(275deg); }
  100% { transform: translateY(112vh) translateX(0) rotate(360deg); }
}

/* ---------- 18. REVEAL / TOAST / WATERMARK ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 1s ease, transform 1s ease; }
.reveal.visible { opacity: 1; transform: none; }
#toast {
  position: fixed; bottom: 92px; left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--g900); color: var(--on-dark);
  border: 1px solid rgba(var(--gold2-rgb), .4);
  padding: 12px 26px; border-radius: 999px; font-size: 13px;
  opacity: 0; pointer-events: none; transition: .4s; z-index: 300;
  white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Watermark & banner draft (payload dari layout) */
.watermark {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  display: flex; flex-wrap: wrap; align-content: space-around; justify-content: space-around;
  overflow: hidden;
}
.watermark span {
  transform: rotate(-24deg);
  font-size: 15px; font-weight: 700; letter-spacing: .12em;
  color: rgba(var(--g950-rgb), .16);
  text-transform: uppercase; white-space: nowrap; padding: 0 18px;
}
.draft-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 130;
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 14px; font-size: 12.5px;
  background: rgba(var(--g950-rgb), .92); color: var(--on-dark);
  border-bottom: 1px solid rgba(var(--gold2-rgb), .4);
  backdrop-filter: blur(6px);
}
.draft-banner__btn {
  background: linear-gradient(160deg, var(--gold2), var(--gold));
  color: var(--g950); font-weight: 600; font-size: 11.5px;
  padding: 6px 14px; border-radius: 999px; text-decoration: none;
}

/* ---------- 19. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cover-bg, .hero-bg { animation: none !important; }
  .petal { display: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  #envGate, .env-letter, .env-flap, #cover, .cover-inner { transition-duration: .01s !important; animation-duration: .01s !important; }
}

/* ---------- 20. RESPONSIF ---------- */
@media (max-width: 480px) {
  section { padding: 62px 20px; }
  .cover-names span { font-size: 2.7rem; }
  .hero-text h2 { font-size: 2.9rem; }
  .profil-nama-besar { font-size: 2.1rem; }
  .split .person,
  .split .person.rev { flex-direction: column; text-align: center; gap: 0; }
  .split .person > img,
  .split .person .pfoto img { margin: 0 auto 18px; }
  .split .soc,
  .split .person.rev .soc { justify-content: center; }
  .ag-item { grid-template-columns: 64px 22px 1fr; }
  .ag-item::before { left: 83px; }
  .cd-box { min-width: 68px; }
  .cd-box b { font-size: 2rem; }
}

/* =========================================================
 * FITUR v1.7 (F4): LIVE STREAMING + VIDEO GALERI YOUTUBE
 * ======================================================= */
.live-wrap {
  max-width: 560px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
  background: #000;
}
.live-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  cursor: pointer;
}
.live-frame img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  opacity: .85;
}
.live-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 68px; height: 68px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: rgba(0,0,0,.65);
  color: #fff; font-size: 24px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 22px rgba(0,0,0,.4);
  transition: transform .2s ease, background .2s ease;
}
.live-frame:hover .live-play { transform: translate(-50%,-50%) scale(1.08); background: var(--gold, #b98a2e); }
.live-iframe {
  width: 100%; height: 100%;
  border: 0; display: block;
  aspect-ratio: 16 / 9;
}
.live-note {
  text-align: center;
  margin-top: 14px;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.7;
}
.live-note a { color: var(--gold3); font-weight: 600; }

/* item video di galeri */
.gitem--video {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: 14px;
  aspect-ratio: 16 / 10;
}
.gitem--video img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .35s ease;
}
.gitem--video:hover img { transform: scale(1.05); }
.gitem--video .gitem-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(0,0,0,.62);
  color: #fff; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.gitem--video .live-iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

/* ==========================================================
   v1.8.8 (permintaan user): VIDEO GALERI = BLOK HERO BERDIRI
   SENDIRI DI ATAS FOTO — tidak lagi memakai kotak grid galeri.
   Lebar penuh kolom (maks 480px), rasio layar lebar 16:9,
   bingkai emas tipis + bayangan, caption di bawahnya.
   ======================================================= */
.video-hero {
  max-width: 480px;
  margin: 0 auto 30px;
}
.video-hero__frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(var(--gold-rgb), .5);
  outline: 1px solid rgba(var(--gold-rgb), .22);
  outline-offset: 5px;
  box-shadow: 0 24px 52px rgba(var(--g900-rgb), .3);
}
.video-hero .gitem--video {
  aspect-ratio: 16 / 9;
  border-radius: 0;
}
.video-hero .gitem-play {
  width: 62px; height: 62px; font-size: 22px;
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .35);
  backdrop-filter: blur(2px);
}
.video-hero .gitem--video:hover .gitem-play {
  transform: translate(-50%, -50%) scale(1.08);
}
.video-hero__cap {
  margin-top: 14px;
  font-family: var(--font-head, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: .95rem;
  color: var(--muted);
}
/* section live (prawed) juga diberi bingkai emas serasi */
.live-wrap {
  border: 1px solid rgba(var(--gold-rgb), .5);
  outline: 1px solid rgba(var(--gold-rgb), .22);
  outline-offset: 5px;
}

/* FITUR v1.7 (F3): dua tombol kalender rapi sebaris */
.kalender-btns {
  display: flex; gap: 10px; justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* ==========================================================
   FITUR v1.7.3: QR CHECK-IN PRIBADI DI UNDANGAN (ikon → popup)
   - .qr-chip  : ikon kecil "QR Saya" (cover + penutup), gaya kaca
                 agar serasi dengan foto latar cover.
   - .qr-modal : popup kartu QR (QR 200px + kode cadangan + petunjuk).
   PERBAIKAN v1.8 (bug user: "QR Saya" di dekstop/tablet muncul DI
   SAMPING tombol Buka Undangan): dulu .qr-chip inline-flex sehingga
   berada di baris teks yang sama dgn #openBtn bila lebar layar cukup.
   Kini display:flex (block-level) + width:fit-content + margin auto →
   chip SELALU di baris sendiri TEPAT DI BAWAH tombol, di semua ukuran
   layar.
   ========================================================== */
.qr-chip {
  margin: 14px auto 0;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: fit-content;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, .65);
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-weight: 700; font-size: .82rem; letter-spacing: .02em;
  cursor: pointer;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .2s ease, transform .2s ease;
}
.qr-chip:hover { background: rgba(255, 255, 255, .28); transform: translateY(-1px); }
.qr-chip svg { flex-shrink: 0; }

/* v1.8: titik hijau kecil pada ikon saat tamu SUDAH check-in */
.qr-chip--ok { position: relative; }
.qr-chip--ok::after {
  content: ''; position: absolute; top: -3px; right: -3px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #43A047; border: 2px solid rgba(255, 255, 255, .9);
  box-shadow: 0 0 6px rgba(67, 160, 71, .8);
}

/* varian di penutup — latar terang, ikut warna tinta tema */
.qr-chip--penutup {
  margin-top: 18px;
  border-color: rgba(var(--g950-rgb, 23, 19, 14), .22);
  background: rgba(var(--g950-rgb, 23, 19, 14), .06);
  color: var(--g950, #17130E);
}
.qr-chip--penutup:hover { background: rgba(var(--g950-rgb, 23, 19, 14), .12); transform: none; }

.qr-modal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(23, 19, 14, .6);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
.qr-modal[hidden] { display: none; }
.qr-kartu {
  background: #fff;
  border-radius: 20px;
  padding: 26px 22px 22px;
  max-width: 330px; width: 100%;
  text-align: center;
  box-shadow: 0 24px 60px rgba(23, 19, 14, .35);
  animation: qrMuncul .25s ease;
}
@keyframes qrMuncul {
  from { transform: translateY(14px) scale(.96); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.qr-judul {
  font-size: .74rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: #7E756A; margin: 0 0 4px;
}
.qr-nama { font-size: .98rem; color: #17130E; margin: 0 0 14px; }
.qr-kartu img {
  width: 200px; height: 200px; display: block;
  margin: 0 auto 12px;
  border-radius: 12px; border: 1px solid #EBE4DA;
}
.qr-kode {
  font-family: ui-monospace, monospace; font-size: .72rem;
  color: #7E756A; word-break: break-all; margin: 0 0 10px;
}

/* FITUR v1.8: badge status check-in di popup ("Sudah check-in") */
.qr-status {
  margin: 0 0 10px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: .8rem; font-weight: 700;
  background: #F5EFE4; color: #7E756A;
  border: 1px dashed #D9CFBE;
}
.qr-status--ok {
  background: var(--ok-bg, #e2efdc); color: var(--ok, #3f6b34);
  border: 1px solid #CBDCc4;
}
.qr-hint { font-size: .78rem; line-height: 1.55; color: #7E756A; margin: 0 0 16px; }
.qr-tutup {
  width: 100%; padding: 11px;
  border: 0; border-radius: 12px;
  background: #17130E; color: #fff;
  font-weight: 700; font-size: .9rem; cursor: pointer;
}
.qr-tutup:hover { background: #2b241b; }
@media (prefers-reduced-motion: reduce) { .qr-kartu { animation: none; } }

/* ==========================================================
   FITUR v1.8: TOMBOL LINK (Zoom/dokumen utk jenis RAPAT)
   Chip pill kecil serasi tema — dipakai di section Doa & Sambutan.
   ========================================================== */
.qr-link-row {
  display: flex; gap: 10px; flex-wrap: wrap;
  justify-content: center; margin-top: 18px;
}
.link-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--gold2, #C9A86A);
  background: rgba(var(--gold2-rgb, 201, 168, 106), .12);
  color: var(--ink, #17130E);
  font-weight: 700; font-size: .85rem;
  text-decoration: none !important;
  transition: background .2s ease, transform .2s ease;
}
.link-chip:hover { background: rgba(var(--gold2-rgb, 201, 168, 106), .25); transform: translateY(-1px); }

/* ==========================================================
   v1.8.10 — TEMA LATAR GELAP (audit kontras — permintaan user:
   "periksa semua Tema warna dengan teliti, beberapa tema warna
   tidak cocok dengan teks dan form rsvp, teks nya banyak tidak
   terbaca, periksa dengan teliti")
   ==========================================================
   Tema Navy Gold & Midnight punya latar GELAP, sehingga semua teks
   "tinta gelap" (var --g800/--g600) dan abu-abu tetap (#4a493f,
   #55544a, #5c5b4f) menjadi tak terbaca di atas --cream yang ikut
   gelap. Token tersebut TIDAK bisa dibalik di palet_undangan() karena
   juga dipakai sebagai LATAR tombol/env. Maka dibalik di sini per
   aturan, diaktifkan lewat <body data-gelap="1"> yang di-set layout.php
   berdasarkan luminansi WCAG (helpers luminansi_warna() < 0.35).
   Tema terang tidak terpengaruh sama sekali (data-gelap="0").
   Nilai --muted/--card/--line/--gold3 untuk tema gelap sudah dibalik
   arahnya di palet_undangan(). */
[data-gelap="1"] .title,
[data-gelap="1"] .quote .bismillah,
[data-gelap="1"] .quote-arab,
[data-gelap="1"] .quote .q,
[data-gelap="1"] .quote-terjemah,
[data-gelap="1"] .story-item h3,
[data-gelap="1"] .person h3,
[data-gelap="1"] .profil-nama-besar,
[data-gelap="1"] .env-name,
[data-gelap="1"] .event-card h3,
[data-gelap="1"] .event-card .venue strong,
[data-gelap="1"] .event-card .big,
[data-gelap="1"] .ag-body h4,
[data-gelap="1"] .loc-title,
[data-gelap="1"] .gift-row__judul,
[data-gelap="1"] .acc-number,
[data-gelap="1"] .gb-head strong,
[data-gelap="1"] .chip b { color: var(--ondark); }

[data-gelap="1"] .quote-list li,
[data-gelap="1"] .story-item p,
[data-gelap="1"] .person small,
[data-gelap="1"] .gb-body p,
[data-gelap="1"] .menu-list li,
[data-gelap="1"] .baby-meta span,
[data-gelap="1"] .gift-alamat { color: var(--muted); }

/* FORM RSVP & UCAPAN — bagian yang paling dikeluhkan user */
[data-gelap="1"] #rsvpForm label,
[data-gelap="1"] .soc-link { color: var(--ondark); }
/* dulu focus = latar #fff + teks var(--ink) terang → teks hilang;
   kini tetap di atas kartu gelap, cukup bingkai emas yang menonjol */
[data-gelap="1"] #rsvpForm input:focus,
[data-gelap="1"] #rsvpForm select:focus,
[data-gelap="1"] #rsvpForm textarea:focus { background: var(--card); }
[data-gelap="1"] #rsvpForm button[type="submit"] { border: 1px solid rgba(var(--gold-rgb), .55); }
[data-gelap="1"] .btn-line.green { color: var(--gold2); border-color: rgba(var(--gold2-rgb), .55); }
[data-gelap="1"] .btn-line.green:hover { background: var(--gold2); border-color: var(--gold2); color: var(--g950); }
[data-gelap="1"] .umur-besar,
[data-gelap="1"] .amp,
[data-gelap="1"] .dress-chip { color: var(--gold2); }

/* nav pil bawah: putih tetap → pil gelap serasi tema gelap */
[data-gelap="1"] #bottomNav {
  background: rgba(var(--g950-rgb), .92);
  border-color: rgba(var(--gold-rgb), .4);
}
[data-gelap="1"] #bottomNav a { color: rgba(var(--on-dark-rgb), .78); }

/* watermark & chip QR penutup ikut menyesuaikan */
[data-gelap="1"] .watermark span { color: rgba(var(--on-dark-rgb), .09); }
[data-gelap="1"] .qr-chip--penutup {
  color: var(--ondark);
  border-color: rgba(var(--on-dark-rgb), .3);
  background: rgba(var(--on-dark-rgb), .07);
}
[data-gelap="1"] .qr-chip--penutup:hover { background: rgba(var(--on-dark-rgb), .14); }

/* placeholder input/textarea & dropdown select terbaca di SEMUA tema:
   placeholder abu tema (bawaan browser terlalu pudar di latar gelap),
   opsi select dipaksa gelap-di-atas-putih (popup native Android/iOS). */
#rsvpForm input::placeholder,
#rsvpForm textarea::placeholder { color: var(--muted); opacity: 1; }
#rsvpForm select option { color: #26251F; background: #FFFFFF; }