/* ============================================================================
   Vowly Theme System — Struktur Undangan
   ----------------------------------------------------------------------------
   File ini TIDAK berisi warna. Semua warna, font, dan ornamen datang dari
   token tema (lihat themes.js) dan disuntikkan sebagai CSS custom properties
   oleh invitation-renderer.js.

   Tiga mode layout, dipilih lewat [data-layout]:
     slide  — satu bagian penuh per layar, navigasi geser
     scroll — gulir vertikal menerus
     mobile — gulir vertikal + menu bawah tetap

   Aturan ukuran: kolom isi dibatasi max-width 720px dan selalu rata tengah.
   Jadi tampilan tetap benar baik di frame ponsel 320px maupun desktop lebar.
   ========================================================================= */

.vw-inv {
  --vw-bg:#fff; --vw-bg-alt:#f5f5f5; --vw-surface:#fff;
  --vw-ink:#1a1a1a; --vw-ink-soft:#666; --vw-accent:#888; --vw-accent-ink:#fff;
  --vw-gold:#c9a227; --vw-line:#e5e5e5; --vw-overlay:rgba(0,0,0,.5);
  --vw-font-head:Georgia, serif;
  --vw-font-body:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --vw-radius:12px;
  --vw-orn:none;

  position:relative;
  background:var(--vw-bg);
  color:var(--vw-ink);
  font-family:var(--vw-font-body);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.vw-inv *, .vw-inv *::before, .vw-inv *::after { box-sizing:border-box; }
.vw-inv h1,.vw-inv h2,.vw-inv h3,.vw-inv h4,.vw-inv p { margin:0; }
.vw-inv button { font:inherit; color:inherit; cursor:pointer; border:none; background:none; }
.vw-inv a { color:var(--vw-accent); text-decoration:none; }
.vw-inv img { max-width:100%; display:block; }
.vw-inv svg { display:block; }

.vw-col { max-width:720px; margin:0 auto; padding:0 22px; }
.vw-sec { position:relative; padding:64px 0; }
.vw-sec--alt { background:var(--vw-bg-alt); }
.vw-sec::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--vw-orn);
  background-repeat:repeat; opacity:.5;
}
.vw-sec > * { position:relative; z-index:1; }

.vw-eyebrow {
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--vw-accent); font-weight:600;
}
.vw-h2 {
  font-family:var(--vw-font-head); font-size:26px; font-weight:400;
  letter-spacing:.01em; line-height:1.25;
}
.vw-rule { display:flex; align-items:center; justify-content:center; gap:12px; margin:16px 0 26px; }
.vw-rule::before, .vw-rule::after {
  content:""; height:1px; width:52px; background:linear-gradient(90deg,transparent,var(--vw-gold));
}
.vw-rule::after { background:linear-gradient(90deg,var(--vw-gold),transparent); }
.vw-rule i { width:6px; height:6px; border:1px solid var(--vw-gold); transform:rotate(45deg); display:block; }
.vw-center { text-align:center; }
.vw-muted { color:var(--vw-ink-soft); }

/* ============================ SAMPUL ================================== */
.vw-cover {
  position:relative; width:100%; height:100%; min-height:520px;
  display:flex; align-items:center; justify-content:center;
  text-align:center; color:#fff; overflow:hidden;
  background:var(--vw-accent);
}
.vw-cover__bg {
  position:absolute; inset:0;
  background-image:var(--vw-orn); background-repeat:repeat; opacity:.55;
}
.vw-cover__veil { position:absolute; inset:0; background:var(--vw-overlay); }
.vw-cover__in {
  position:relative; z-index:2; padding:56px 26px; width:100%; max-width:560px;
}
.vw-cover__label { font-size:10.5px; letter-spacing:.34em; text-transform:uppercase; opacity:.85; }
.vw-cover__names {
  font-family:var(--vw-font-head); font-size:clamp(30px, 8.5%, 52px);
  font-size:clamp(30px, 9vw, 52px);
  font-weight:400; line-height:1.14; margin:14px 0 10px;
}
.vw-cover__names em { font-style:normal; color:var(--vw-gold); }
.vw-cover__date { font-size:12.5px; letter-spacing:.26em; opacity:.9; }
.vw-cover__to { margin-top:38px; }
.vw-cover__to-k { font-size:11px; letter-spacing:.16em; text-transform:uppercase; opacity:.75; }
.vw-cover__to-v {
  font-family:var(--vw-font-head); font-size:20px; margin-top:5px;
  border-bottom:1px solid rgba(255,255,255,.4); display:inline-block; padding-bottom:3px;
}
.vw-cover__open {
  margin-top:34px; display:inline-flex; align-items:center; gap:9px;
  padding:13px 30px; border-radius:999px; font-size:13.5px; font-weight:600;
  background:var(--vw-gold); color:#1a1408; letter-spacing:.02em;
  transition:transform .18s, filter .18s;
}
.vw-cover__open:hover { transform:translateY(-2px); filter:brightness(1.06); }
.vw-cover.is-open { display:none; }

/* --- Tiga mode sampul: centered | fullscreen | split ------------------- */
/* centered: default di atas — konten di tengah, ornamen terlihat merata.  */
.vw-inv[data-cover="centered"] .vw-cover__bg { opacity:.5; }

/* fullscreen: sinematik — ornamen lebih samar, veil lebih tebal,          */
/* nama jauh lebih besar, tanpa bingkai.                                   */
.vw-inv[data-cover="fullscreen"] .vw-cover__bg { opacity:.3; background-size:180px 180px; }
.vw-inv[data-cover="fullscreen"] .vw-cover__veil { background:var(--vw-overlay); opacity:1.15; }
.vw-inv[data-cover="fullscreen"] .vw-cover__in { max-width:640px; padding:44px 26px; }
.vw-inv[data-cover="fullscreen"] .vw-cover__names {
  font-size:clamp(34px, 11vw, 68px); line-height:1.06; letter-spacing:-.01em;
}
.vw-inv[data-cover="fullscreen"] .vw-cover__to { margin-top:46px; }
.vw-inv[data-cover="fullscreen"] .vw-cover__open {
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.55);
  backdrop-filter:blur(2px);
}

/* split: konten didorong ke bawah, area atas dibiarkan lapang untuk       */
/* ornamen/ilustrasi — terasa seperti poster editorial.                    */
.vw-inv[data-cover="split"] .vw-cover { align-items:flex-end; text-align:left; }
.vw-inv[data-cover="split"] .vw-cover__bg {
  opacity:.85; background-position:top center; background-size:150px 150px;
}
.vw-inv[data-cover="split"] .vw-cover__veil {
  background:linear-gradient(180deg, transparent 0%, transparent 34%, var(--vw-overlay) 78%);
}
.vw-inv[data-cover="split"] .vw-cover__in {
  max-width:560px; padding:40px 26px 54px;
}
.vw-inv[data-cover="split"] .vw-cover__names { font-size:clamp(30px, 8vw, 50px); }
.vw-inv[data-cover="split"] .vw-cover__to { margin-top:26px; }
.vw-inv[data-cover="split"] .vw-cover__open { margin-top:26px; }

/* ============================ MEMPELAI ================================ */
.vw-quote {
  border-left:2px solid var(--vw-gold); padding:4px 0 4px 18px;
  font-family:var(--vw-font-head); font-size:15.5px; line-height:1.75;
  color:var(--vw-ink-soft); font-style:italic; text-align:left;
  max-width:520px; margin:0 auto;
}
.vw-quote__src { display:block; margin-top:10px; font-size:11.5px; font-style:normal; letter-spacing:.12em; text-transform:uppercase; color:var(--vw-accent); }

.vw-couple { display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:34px; }
.vw-person { text-align:center; max-width:340px; }
.vw-avatar {
  width:132px; height:132px; border-radius:50%; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--vw-font-head); font-size:42px; color:#fff;
  border:3px solid var(--vw-gold); padding:4px; background:var(--vw-accent);
  box-shadow:0 0 0 1px var(--vw-line);
}
.vw-avatar span { width:100%; height:100%; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.vw-person__name { font-family:var(--vw-font-head); font-size:22px; line-height:1.3; }
.vw-person__parents { font-size:13px; color:var(--vw-ink-soft); margin-top:7px; line-height:1.6; }
.vw-person__ig { font-size:12px; color:var(--vw-accent); margin-top:6px; letter-spacing:.03em; }
.vw-amp {
  font-family:var(--vw-font-head); font-size:32px; color:var(--vw-gold);
  margin:20px 0; line-height:1;
}

/* ============================== ACARA ================================= */
.vw-count { display:flex; justify-content:center; gap:9px; margin:26px 0 32px; flex-wrap:wrap; }
.vw-count__u {
  min-width:66px; padding:12px 8px; border-radius:var(--vw-radius);
  background:var(--vw-surface); border:1px solid var(--vw-line); text-align:center;
}
.vw-count__n { font-family:var(--vw-font-head); font-size:24px; line-height:1; }
.vw-count__l { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--vw-ink-soft); margin-top:6px; }

.vw-events { display:grid; gap:16px; }
.vw-event {
  background:var(--vw-surface); border:1px solid var(--vw-line);
  border-radius:var(--vw-radius); padding:24px 22px; text-align:center;
}
.vw-event__kind {
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--vw-accent); font-weight:600;
}
.vw-event__date { font-family:var(--vw-font-head); font-size:19px; margin:10px 0 2px; }
.vw-event__time { font-size:13.5px; color:var(--vw-ink-soft); }
.vw-event__div { height:1px; background:var(--vw-line); margin:16px auto; width:60%; }
.vw-event__place { font-size:14.5px; font-weight:600; }
.vw-event__addr { font-size:13px; color:var(--vw-ink-soft); margin-top:4px; line-height:1.6; }

.vw-btn {
  display:inline-flex; align-items:center; gap:8px; padding:11px 22px;
  border-radius:999px; font-size:13px; font-weight:600;
  background:var(--vw-accent); color:var(--vw-accent-ink);
  transition:filter .16s, transform .16s;
}
.vw-btn:hover { filter:brightness(1.08); transform:translateY(-1px); }
.vw-btn--ghost { background:transparent; color:var(--vw-accent); border:1px solid var(--vw-line); }
.vw-btn--gold { background:var(--vw-gold); color:#1a1408; }
.vw-btn--block { width:100%; justify-content:center; }
.vw-event .vw-btn { margin-top:16px; }

/* =========================== KISAH CINTA ============================== */
.vw-timeline { position:relative; padding-left:30px; margin-top:8px; }
.vw-timeline::before {
  content:""; position:absolute; left:7px; top:6px; bottom:6px;
  width:1px; background:var(--vw-line);
}
.vw-tl { position:relative; padding:0 0 30px; }
.vw-tl:last-child { padding-bottom:0; }
.vw-tl::before {
  content:""; position:absolute; left:-30px; top:6px;
  width:15px; height:15px; border-radius:50%;
  background:var(--vw-bg); border:2px solid var(--vw-gold);
}
.vw-tl__d { font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--vw-accent); font-weight:600; }
.vw-tl__t { font-family:var(--vw-font-head); font-size:18px; margin:5px 0 6px; }
.vw-tl__x { font-size:14px; color:var(--vw-ink-soft); line-height:1.7; }

/* ============================= GALERI ================================= */
.vw-gal { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px; }
.vw-gal__i {
  aspect-ratio:1/1; border-radius:calc(var(--vw-radius) * .7); position:relative;
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.85); font-size:11px; letter-spacing:.1em;
  background-image:var(--vw-orn); background-repeat:repeat;
}
.vw-gal__i:nth-child(1) { grid-column:span 2; aspect-ratio:2/1.35; }
.vw-video { margin-top:16px; border-radius:var(--vw-radius); overflow:hidden; border:1px solid var(--vw-line); background:var(--vw-surface); }
.vw-video__f { aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; gap:10px; color:var(--vw-ink-soft); font-size:13px; }

/* ============================= HADIAH ================================= */
.vw-acc {
  display:flex; align-items:center; gap:14px; text-align:left;
  background:var(--vw-surface); border:1px solid var(--vw-line);
  border-radius:var(--vw-radius); padding:16px 18px; margin-bottom:12px;
}
.vw-acc__b { font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--vw-accent); font-weight:600; }
.vw-acc__n { font-family:var(--vw-font-head); font-size:18px; letter-spacing:.04em; margin-top:3px; }
.vw-acc__h { font-size:12.5px; color:var(--vw-ink-soft); }
.vw-acc__cp {
  margin-left:auto; width:38px; height:38px; flex:0 0 auto; border-radius:10px;
  border:1px solid var(--vw-line); display:flex; align-items:center; justify-content:center;
  color:var(--vw-accent);
}
.vw-acc__cp:hover { background:var(--vw-bg-alt); }
.vw-gift-addr {
  margin-top:16px; padding:16px 18px; border-radius:var(--vw-radius);
  border:1px dashed var(--vw-line); font-size:13.5px; line-height:1.7; color:var(--vw-ink-soft);
}

/* =========================== RSVP & UCAPAN ============================ */
.vw-form { display:grid; gap:11px; margin-top:20px; }
.vw-field { display:grid; gap:6px; text-align:left; }
.vw-field label { font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--vw-ink-soft); font-weight:600; }
.vw-input, .vw-select, .vw-textarea {
  width:100%; padding:12px 14px; font:inherit; font-size:14px;
  color:var(--vw-ink); background:var(--vw-surface);
  border:1px solid var(--vw-line); border-radius:calc(var(--vw-radius) * .7);
  outline:none; transition:border-color .15s;
}
.vw-input:focus, .vw-select:focus, .vw-textarea:focus { border-color:var(--vw-accent); }
.vw-textarea { resize:vertical; min-height:96px; }
.vw-comments { margin-top:28px; display:grid; gap:0; }
.vw-cm { padding:16px 0; border-bottom:1px solid var(--vw-line); text-align:left; }
.vw-cm:last-child { border-bottom:none; }
.vw-cm__h { display:flex; align-items:center; gap:10px; margin-bottom:7px; }
.vw-cm__a {
  width:34px; height:34px; border-radius:50%; flex:0 0 auto;
  background:var(--vw-accent); color:var(--vw-accent-ink);
  display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700;
}
.vw-cm__n { font-size:13.5px; font-weight:650; }
.vw-cm__t { font-size:11px; color:var(--vw-ink-soft); }
.vw-cm__x { font-size:14px; line-height:1.7; color:var(--vw-ink-soft); }

/* ============================ PENUTUP ================================= */
.vw-outro { text-align:center; padding:56px 0 64px; }
.vw-outro__n { font-family:var(--vw-font-head); font-size:26px; margin:12px 0 8px; }
.vw-outro__t { font-size:13.5px; color:var(--vw-ink-soft); max-width:440px; margin:0 auto; line-height:1.75; }

/* ============================== NAVIGASI ============================== */
.vw-nav { display:none; }

.vw-inv[data-layout="slide"] .vw-nav--slide {
  display:flex; position:absolute; left:0; right:0; bottom:18px;
  align-items:center; justify-content:center; gap:16px; z-index:20;
}
.vw-inv[data-layout="slide"] .vw-nav--slide button {
  width:40px; height:40px; border-radius:50%;
  background:var(--vw-surface); border:1px solid var(--vw-line);
  display:flex; align-items:center; justify-content:center; color:var(--vw-ink-soft);
}
.vw-inv[data-layout="slide"] .vw-nav--slide button:hover { color:var(--vw-accent); border-color:var(--vw-accent); }
.vw-dots { display:flex; gap:6px; }
.vw-dots i {
  width:7px; height:7px; border-radius:50%; background:var(--vw-line);
  display:block; transition:background .18s, transform .18s;
}
.vw-dots i.on { background:var(--vw-accent); transform:scale(1.25); }

.vw-inv[data-layout="scroll"] .vw-nav--scroll,
.vw-inv[data-layout="mobile"] .vw-nav--scroll {
  display:block; position:sticky; top:0; z-index:30;
  background:color-mix(in srgb, var(--vw-bg) 92%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--vw-line);
}
.vw-nav__in {
  max-width:720px; margin:0 auto; padding:9px 14px;
  display:flex; gap:4px; overflow-x:auto; scrollbar-width:none;
}
.vw-nav__in::-webkit-scrollbar { display:none; }
.vw-nav__in a {
  flex:0 0 auto; padding:6px 13px; border-radius:999px;
  font-size:12.5px; font-weight:600; color:var(--vw-ink-soft); white-space:nowrap;
}
.vw-nav__in a:hover { background:var(--vw-bg-alt); color:var(--vw-ink); }
.vw-nav__in a.on { background:var(--vw-accent); color:var(--vw-accent-ink); }

.vw-inv[data-layout="mobile"] .vw-nav--tabs {
  display:block; position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:var(--vw-surface); border-top:1px solid var(--vw-line);
  padding:7px 6px calc(7px + env(safe-area-inset-bottom));
}
.vw-tabs { display:flex; justify-content:space-around; max-width:520px; margin:0 auto; }
.vw-tabs a {
  flex:1; display:grid; justify-items:center; gap:3px;
  padding:5px 2px; border-radius:10px; font-size:9.5px; letter-spacing:.04em;
  color:var(--vw-ink-soft); text-transform:uppercase; font-weight:600;
}
.vw-tabs a b { font-size:15px; font-weight:400; line-height:1; }
.vw-tabs a.on { color:var(--vw-accent); background:var(--vw-bg-alt); }

.vw-inv[data-layout="mobile"] .vw-col { padding-bottom:76px; }

/* ============================ TOMBOL MELAYANG ========================= */
.vw-fab {
  position:absolute; right:14px; bottom:76px; z-index:35;
  display:flex; flex-direction:column; gap:8px;
}
.vw-inv[data-layout="slide"] .vw-fab { bottom:76px; }
.vw-fab button {
  width:42px; height:42px; border-radius:50%;
  background:var(--vw-surface); border:1px solid var(--vw-line);
  display:flex; align-items:center; justify-content:center;
  color:var(--vw-ink-soft); box-shadow:0 2px 10px rgba(0,0,0,.10);
}
.vw-fab button:hover { color:var(--vw-accent); border-color:var(--vw-accent); }
.vw-fab button.on { background:var(--vw-accent); color:var(--vw-accent-ink); border-color:var(--vw-accent); }

/* ============================ LAYAR SLIDE ============================= */
.vw-inv[data-layout="slide"] { height:100%; }
.vw-inv[data-layout="slide"] .vw-cover { min-height:0; }
.vw-inv[data-layout="slide"] .vw-stage { position:relative; height:100%; }
.vw-inv[data-layout="slide"] .vw-sec {
  position:absolute; inset:0; overflow-y:auto; padding:0;
  display:none; align-items:center;
}
.vw-inv[data-layout="slide"] .vw-sec.is-active { display:flex; }
.vw-inv[data-layout="slide"] .vw-sec > .vw-col { width:100%; padding-top:56px; padding-bottom:96px; }

/* ============================ LAYAR GULIR ============================= */
.vw-inv[data-layout="scroll"] .vw-stage,
.vw-inv[data-layout="mobile"] .vw-stage { position:relative; }

.vw-inv[data-layout="scroll"] .vw-sec[data-key="cover"],
.vw-inv[data-layout="mobile"] .vw-sec[data-key="cover"] {
  height:100%; min-height:520px; padding:0; display:flex; align-items:center; justify-content:center;
}
.vw-inv[data-layout="scroll"] .vw-sec[data-key="cover"].is-open,
.vw-inv[data-layout="mobile"] .vw-sec[data-key="cover"].is-open { display:none; }

/* ============================== TOAST ================================= */
.vw-toast {
  position:absolute; left:50%; bottom:26px; transform:translate(-50%,70px);
  background:var(--vw-ink); color:var(--vw-bg);
  padding:11px 20px; border-radius:999px; font-size:12.5px; font-weight:600;
  opacity:0; transition:transform .22s cubic-bezier(.4,0,.2,1), opacity .22s;
  z-index:60; pointer-events:none; max-width:88%; text-align:center;
}
.vw-toast.on { opacity:1; transform:translate(-50%,0); }

/* ============================== SKALA HP ============================== */
.vw-phone {
  width:340px; height:700px; border-radius:38px; padding:10px;
  background:#151515; border:1px solid #333; flex:0 0 auto;
  box-shadow:0 20px 50px -12px rgba(0,0,0,.5);
}
.vw-phone__screen {
  width:100%; height:100%; border-radius:29px; overflow:hidden;
  position:relative; background:#fff;
}
.vw-phone__screen .vw-inv { height:100%; overflow-y:auto; }
.vw-phone__notch {
  position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:86px; height:20px; border-radius:999px; background:#151515; z-index:70;
}
.vw-desktop {
  width:100%; max-width:1000px; height:660px; border-radius:14px;
  border:1px solid #333; overflow:hidden; background:#fff;
  box-shadow:0 20px 50px -12px rgba(0,0,0,.45);
  display:flex; flex-direction:column;
}
.vw-desktop__bar {
  height:34px; flex:0 0 auto; background:#1d1d1d; display:flex; align-items:center;
  gap:6px; padding:0 12px;
}
.vw-desktop__bar i { width:9px; height:9px; border-radius:50%; background:#3d3d3d; display:block; }
.vw-desktop__bar span {
  margin-left:10px; font-size:11px; color:#7d7d7d;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.vw-desktop__view { flex:1; overflow-y:auto; position:relative; }
.vw-desktop__view .vw-inv { height:100%; }

/* =========================== GALERI TEMA ============================== */
.vw-thumb {
  height:172px; border-radius:12px 12px 0 0; position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; text-align:center; padding:16px;
}
.vw-thumb__orn { position:absolute; inset:0; background-image:var(--orn); background-repeat:repeat; opacity:.55; }
.vw-thumb__veil { position:absolute; inset:0; background:var(--veil); }
.vw-thumb__c { position:relative; z-index:2; color:#fff; }
.vw-thumb__c .k { font-size:8.5px; letter-spacing:.26em; text-transform:uppercase; opacity:.85; }
.vw-thumb__c .n { font-family:var(--f); font-size:21px; line-height:1.15; margin:5px 0; }
.vw-thumb__c .d { font-size:9.5px; letter-spacing:.14em; opacity:.9; }
.vw-thumb__chips { position:absolute; left:9px; top:9px; z-index:3; display:flex; gap:5px; }