/* =========================================================
   Sandingan — tampilan undangan
   Tema: gading (klasik), malam (navy), sage (botani)
   ========================================================= */
@font-face { font-family: "Great Vibes"; src: url("../fonts/great-vibes-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root, [data-theme="gading"] {
  --bg: #F6F1E7; --bg-2: #EEE6D6; --card: #FFFDF8; --ink: #13213F; --muted: #5E6B86;
  --accent: #B8913E; --accent-soft: rgba(201, 162, 74, .16); --on-accent: #FFFFFF;
  --line: rgba(19, 33, 63, .12); --shadow: 0 18px 40px -24px rgba(19, 33, 63, .35);
  --side-bg: #13213F; --side-ink: #F6F1E7; --side-accent: #D9B964;
  --cover-bg: radial-gradient(120% 80% at 50% 0%, #FFFDF8 0%, #F6F1E7 55%, #EADFCB 100%);
}
[data-theme="malam"] {
  --bg: #0E1730; --bg-2: #13213F; --card: #16244A; --ink: #F3EEDF; --muted: #AEB8D0;
  --accent: #D8B96A; --accent-soft: rgba(216, 185, 106, .14); --on-accent: #0E1730;
  --line: rgba(243, 238, 223, .12); --shadow: 0 18px 40px -24px rgba(0, 0, 0, .6);
  --side-bg: #0A1024; --side-ink: #F3EEDF; --side-accent: #D8B96A;
  --cover-bg: radial-gradient(120% 80% at 50% 0%, #1D2C57 0%, #13213F 50%, #0A1024 100%);
}
[data-theme="sage"] {
  --bg: #F2EFE6; --bg-2: #E4E7DA; --card: #FBFAF5; --ink: #2F3E2E; --muted: #637060;
  --accent: #9C6B48; --accent-soft: rgba(156, 107, 72, .14); --on-accent: #FFFFFF;
  --line: rgba(47, 62, 46, .14); --shadow: 0 18px 40px -24px rgba(47, 62, 46, .35);
  --side-bg: #3E4F3C; --side-ink: #F2EFE6; --side-accent: #E2C9A6;
  --cover-bg: radial-gradient(120% 80% at 50% 0%, #FBFAF5 0%, #F2EFE6 55%, #DEE3D2 100%);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 16px/1.7 "Plus Jakarta Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.is-locked { overflow: hidden; height: 100vh; }
img { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.script { font-family: "Great Vibes", cursive; font-weight: 400; line-height: 1.1; }
.amp { display: inline-block; margin: 0 .18em; color: var(--accent); }

/* ---------- tombol ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px; border-radius: 999px; cursor: pointer;
  font: 600 15px/1 "Plus Jakarta Sans", sans-serif; text-decoration: none;
  border: 1.5px solid transparent; transition: transform .2s, box-shadow .2s, background .2s;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 12px 24px -14px var(--accent); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--accent); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- sampul ---------- */
.cover {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  padding: 32px 24px calc(32px + env(safe-area-inset-bottom));
  background: var(--cover-bg); text-align: center;
  transition: transform .9s cubic-bezier(.7, 0, .2, 1), opacity .6s;
}
.cover::before, .cover::after {
  content: ""; position: absolute; border: 1.5px solid var(--accent); opacity: .35; pointer-events: none;
}
.cover::before { inset: 18px max(18px, calc(50% - 290px)); border-radius: 300px 300px 20px 20px; }
.cover::after { inset: 28px max(28px, calc(50% - 280px)); border-radius: 290px 290px 14px 14px; opacity: .18; }
.cover.is-open { transform: translateY(-100%); opacity: .3; pointer-events: none; }
.cover-inner { position: relative; max-width: 420px; }
.cover-label { font-size: 12.5px; letter-spacing: .32em; text-transform: uppercase; color: var(--muted); }
.cover-names { font-size: clamp(56px, 16vw, 80px); margin: 18px 0 6px; }
.cover-names .n { display: block; }
.cover-names .amp { display: block; font-size: .6em; margin: -.1em 0 -.05em; }
.cover-date { font-family: "Cormorant Garamond", serif; font-size: 21px; font-weight: 600; letter-spacing: .06em; }
.cover-guest { margin: 34px 0 28px; }
.cover-guest p:first-child { font-size: 14px; color: var(--muted); }
.guest-name { font-family: "Cormorant Garamond", serif; font-size: 28px; font-weight: 600; margin-top: 6px; line-height: 1.25; }
.cover-note { margin-top: 10px; font-size: 12px; color: var(--muted); opacity: .8; }

/* ---------- tata letak ---------- */
.layout { min-height: 100vh; }
.side { display: none; }
.content { position: relative; max-width: 520px; margin: 0 auto; background: var(--bg); }

@media (min-width: 1024px) {
  .side {
    display: block; position: fixed; inset: 0 520px 0 0; background: var(--side-bg); color: var(--side-ink); overflow: hidden;
  }
  .side-photo { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .5; }
  .side::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, var(--side-bg) 100%); }
  .side-inner { position: absolute; left: 56px; right: 56px; bottom: 64px; z-index: 1; }
  .side-label { font-size: 13px; letter-spacing: .32em; text-transform: uppercase; opacity: .85; }
  .side-names { font-size: clamp(64px, 6vw, 96px); margin: 10px 0 8px; color: var(--side-ink); }
  .side-date { font-family: "Cormorant Garamond", serif; font-size: 24px; font-weight: 600; color: var(--side-accent); letter-spacing: .05em; }
  .content { margin: 0 0 0 auto; width: 520px; box-shadow: -30px 0 60px -40px rgba(0, 0, 0, .5); }
}

/* ---------- bagian umum ---------- */
.sec { position: relative; padding: 72px 28px; text-align: center; }
.sec:nth-of-type(even) { background: var(--bg-2); }
.eyebrow { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.sec-title { font-family: "Cormorant Garamond", serif; font-size: 38px; line-height: 1.15; margin-top: 8px; }
.sec-sub { margin: 12px auto 0; max-width: 34ch; color: var(--muted); font-size: 15px; }
.lead { font-size: 15.5px; color: var(--muted); max-width: 36ch; margin: 0 auto; }
.greeting { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 21px; margin-bottom: 14px; }

.ornament { width: 160px; height: 14px; margin: 0 auto 26px; position: relative; }
.ornament::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.ornament::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; background: var(--accent); transform: translate(-50%, -50%) rotate(45deg); box-shadow: 0 0 0 5px var(--bg); }
.sec:nth-of-type(even) .ornament::after { box-shadow: 0 0 0 5px var(--bg-2); }

/* ---------- hero ---------- */
.hero { padding-top: 56px; }
.arch {
  width: min(78%, 330px); aspect-ratio: 4 / 5; margin: 22px auto 0; overflow: hidden;
  border-radius: 200px 200px 18px 18px; border: 6px solid var(--card); box-shadow: var(--shadow);
}
.arch img { width: 100%; height: 100%; object-fit: cover; }
.hero-names { font-size: clamp(58px, 17vw, 80px); margin: 26px 0 4px; }
.hero-names .amp { display: block; font-size: .6em; margin: -.12em 0 -.08em; }
.hero-date { font-family: "Cormorant Garamond", serif; font-size: 22px; font-weight: 600; letter-spacing: .05em; }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 360px; margin: 26px auto 22px; }
.countdown div { padding: 12px 4px 10px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.countdown span { display: block; font-family: "Cormorant Garamond", serif; font-size: 30px; font-weight: 600; line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.countdown small { font-size: 11.5px; color: var(--muted); letter-spacing: .06em; }

/* ---------- pembuka ---------- */
.quote { margin: 30px auto 0; max-width: 36ch; padding: 22px 20px; border-radius: 18px; background: var(--accent-soft); }
.quote p { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 21px; line-height: 1.45; }
.quote cite { display: block; margin-top: 10px; font-style: normal; font-size: 13px; color: var(--accent); font-weight: 600; letter-spacing: .04em; }

/* ---------- mempelai ---------- */
.couple { display: grid; gap: 6px; }
.person { display: grid; justify-items: center; gap: 8px; }
.monogram {
  width: 128px; height: 128px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 8px;
  background: var(--card); border: 1.5px solid var(--accent); box-shadow: var(--shadow), inset 0 0 0 6px var(--card), inset 0 0 0 7px var(--line);
}
.monogram .script { font-size: 64px; color: var(--accent); margin-top: 6px; }
.person-name { font-family: "Cormorant Garamond", serif; font-size: 30px; line-height: 1.2; }
.person-parents { color: var(--muted); font-size: 14.5px; max-width: 30ch; }
.person-ig { font-size: 14px; color: var(--accent); text-decoration: none; font-weight: 600; }
.couple-amp { font-size: 64px; color: var(--accent); margin: 18px 0 10px; }

/* ---------- acara ---------- */
.event-card {
  margin: 26px auto 0; padding: 30px 24px; border-radius: 26px; background: var(--card);
  border: 1px solid var(--line); box-shadow: var(--shadow); text-align: center;
}
.event-card:first-of-type { margin-top: 30px; }
.event-name { font-family: "Cormorant Garamond", serif; font-size: 30px; }
.event-meta { display: grid; gap: 6px; margin: 14px 0 16px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.event-meta p { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 500; }
.event-meta svg { color: var(--accent); }
.event-venue { font-weight: 600; font-size: 17px; }
.event-address { color: var(--muted); font-size: 14.5px; margin-top: 4px; }
.event-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }
.map-slot { margin-top: 18px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.map-slot iframe { display: block; width: 100%; height: 260px; border: 0; }

/* ---------- galeri ---------- */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; gap: 10px; margin-top: 28px; }
.g-item { padding: 0; border: 0; border-radius: 16px; overflow: hidden; cursor: zoom-in; background: var(--card); }
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.g-item:hover img { transform: scale(1.05); }
.g-item--0 { grid-row: span 2; }
.g-item--3 { grid-row: span 2; }

.lightbox { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(8, 10, 20, .92); padding: 56px 16px; }
.lightbox[hidden] { display: none; }
.lightbox img { max-height: 82vh; max-width: min(92vw, 900px); border-radius: 12px; object-fit: contain; }
.lb-btn { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.lb-close { top: 16px; right: 16px; }
.lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
.lb-count { position: absolute; bottom: 20px; color: rgba(255, 255, 255, .75); font-size: 14px; }

/* ---------- RSVP ---------- */
.rsvp-form { margin: 28px auto 0; padding: 26px 22px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); text-align: left; display: grid; gap: 16px; }
.field { display: grid; gap: 7px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field > span, .field legend { font-weight: 600; font-size: 14px; padding: 0; }
.field small { font-weight: 400; color: var(--muted); }
.field[hidden] { display: none; }
.rsvp-form input[type="text"], .rsvp-form select, .rsvp-form textarea {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg);
  color: var(--ink); font: 400 16px/1.5 "Plus Jakarta Sans", sans-serif; resize: vertical;
}
.rsvp-form input:focus, .rsvp-form select:focus, .rsvp-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 7px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; }
.choice span {
  display: grid; place-items: center; min-height: 46px; padding: 6px; border-radius: 12px; border: 1.5px solid var(--line);
  font-size: 14px; font-weight: 600; text-align: center; cursor: pointer; transition: all .2s;
}
.choice input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.4em; font-size: 14px; text-align: center; }
.form-status.is-error { color: #C0392B; }
.form-status.is-ok { color: var(--accent); font-weight: 600; }

.wishes { margin-top: 34px; text-align: left; }
.wishes-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.wishes-head h3 { font-family: "Cormorant Garamond", serif; font-size: 26px; }
.wish-counts { font-size: 13px; color: var(--muted); }
.wish-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; max-height: 520px; overflow-y: auto; overscroll-behavior: contain; }
.wish { padding: 16px 18px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.wish-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wish-name { font-weight: 600; }
.wish-badge { font-size: 11.5px; padding: 2px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.wish-msg { margin-top: 6px; font-size: 15px; white-space: pre-line; word-wrap: break-word; }
.wish-time { margin-top: 6px; font-size: 12px; color: var(--muted); }
.wish-empty { text-align: center; color: var(--muted); padding: 18px; font-size: 14.5px; }

/* ---------- amplop ---------- */
.gift-list { display: grid; gap: 14px; margin-top: 26px; }
.gift-card { padding: 24px 22px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; justify-items: center; gap: 6px; }
.gift-bank { font-size: 12.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.gift-number { font-family: "Cormorant Garamond", serif; font-size: 30px; font-weight: 600; letter-spacing: .04em; font-variant-numeric: lining-nums; }
.gift-holder, .gift-address { color: var(--muted); font-size: 14.5px; max-width: 32ch; }
.gift-card .btn { margin-top: 10px; }
.gift-qris { width: 200px; border-radius: 12px; background: #fff; padding: 10px; }

/* ---------- penutup ---------- */
.closing { padding-bottom: 60px; }
.closing .greeting { margin-top: 18px; }
.signoff { margin-top: 18px; font-size: 14px; color: var(--muted); letter-spacing: .08em; }
.closing-names { font-size: 56px; margin-top: 6px; color: var(--accent); }
.closing-names .amp { margin: 0 .32em 0 .2em; }

.foot { padding: 28px 24px calc(96px + env(safe-area-inset-bottom)); text-align: center; border-top: 1px solid var(--line); }
.foot-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 14px; color: var(--muted); }
.foot-brand .foot-mark { width: 32px; height: 20px; color: var(--ink); }
.demo-note { margin-top: 10px; font-size: 12.5px; color: var(--muted); opacity: .85; }
.demo-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }

/* ---------- musik & toast ---------- */
.music-btn {
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 40;
  width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--card); color: var(--accent); box-shadow: var(--shadow); cursor: pointer; display: grid; place-items: center;
}
.music-btn[hidden] { display: none; }
.music-btn .i-off { display: none; }
.music-btn[aria-pressed="false"] .i-on { display: none; }
.music-btn[aria-pressed="false"] .i-off { display: block; }
.music-btn[aria-pressed="true"] svg { animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (min-width: 1024px) { .music-btn { right: 24px; } }

.toast {
  position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 90;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 600;
  transition: opacity .25s, transform .25s;
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 1024px) { .toast { left: calc(100% - 260px); } }

/* ---------- animasi muncul ---------- */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .cover { transition: opacity .3s; }
  .music-btn[aria-pressed="true"] svg { animation: none; }
}

/* =========================================================
   Varian warna (palet) per tema
   ========================================================= */
[data-theme="gading"][data-palette="rose"] {
  --bg: #F8EFEC; --bg-2: #F1E1DC; --card: #FFFAF8; --ink: #3A2228; --muted: #7A5F64;
  --accent: #B76E79; --accent-soft: rgba(183, 110, 121, .16); --line: rgba(58, 34, 40, .12);
  --side-bg: #3A2228; --side-ink: #F8EFEC; --side-accent: #E2A9B1;
  --cover-bg: radial-gradient(120% 80% at 50% 0%, #FFF8F6 0%, #F8EFEC 55%, #EBD3CC 100%);
}
[data-theme="gading"][data-palette="zaitun"] {
  --bg: #F3F1E6; --bg-2: #E8E6D6; --card: #FBFAF3; --ink: #2C3020; --muted: #646A52;
  --accent: #7D8445; --accent-soft: rgba(125, 132, 69, .16); --line: rgba(44, 48, 32, .13);
  --side-bg: #2C3020; --side-ink: #F3F1E6; --side-accent: #C8CC8E;
  --cover-bg: radial-gradient(120% 80% at 50% 0%, #FBFAF3 0%, #F3F1E6 55%, #E1DEC8 100%);
}
[data-theme="malam"][data-palette="marun"] {
  --bg: #2A0E16; --bg-2: #33121C; --card: #3B1622; --ink: #F6EDE6; --muted: #D2B8B8;
  --accent: #D8B96A; --on-accent: #2A0E16; --line: rgba(246, 237, 230, .13);
  --side-bg: #1C0910; --side-ink: #F6EDE6; --side-accent: #D8B96A;
  --cover-bg: radial-gradient(120% 80% at 50% 0%, #4A1A27 0%, #2A0E16 55%, #16060B 100%);
}
[data-theme="malam"][data-palette="zamrud"] {
  --bg: #0B2A23; --bg-2: #0F332A; --card: #133B31; --ink: #EEF2EA; --muted: #AFC4BA;
  --accent: #D8B96A; --on-accent: #0B2A23; --line: rgba(238, 242, 234, .13);
  --side-bg: #061A15; --side-ink: #EEF2EA; --side-accent: #D8B96A;
  --cover-bg: radial-gradient(120% 80% at 50% 0%, #17473B 0%, #0B2A23 55%, #051510 100%);
}
[data-theme="sage"][data-palette="biru"] {
  --bg: #EEF1F4; --bg-2: #E1E7EE; --card: #F9FAFC; --ink: #2C3A4B; --muted: #5F6E80;
  --accent: #6E86A3; --accent-soft: rgba(110, 134, 163, .16); --line: rgba(44, 58, 75, .13);
  --side-bg: #2C3A4B; --side-ink: #EEF1F4; --side-accent: #B7C7DA;
  --cover-bg: radial-gradient(120% 80% at 50% 0%, #F9FAFC 0%, #EEF1F4 55%, #D6DFE9 100%);
}
[data-theme="sage"][data-palette="lilac"] {
  --bg: #F3EFF5; --bg-2: #E9E2EE; --card: #FBF9FC; --ink: #3E3350; --muted: #6C6079;
  --accent: #8E73A8; --accent-soft: rgba(142, 115, 168, .16); --line: rgba(62, 51, 80, .13);
  --side-bg: #3E3350; --side-ink: #F3EFF5; --side-accent: #CDB9E0;
  --cover-bg: radial-gradient(120% 80% at 50% 0%, #FBF9FC 0%, #F3EFF5 55%, #E2D7EA 100%);
}

/* =========================================================
   Tema Jawa (motif kawung & gunungan buatan sendiri)
   ========================================================= */
[data-theme="jawa"] {
  --bg: #F3EAD9; --bg-2: #EADDC6; --card: #FBF5EA; --ink: #3B2414; --muted: #6E5440;
  --accent: #A0662B; --accent-soft: rgba(160, 102, 43, .15); --on-accent: #FFFFFF;
  --line: rgba(59, 36, 20, .14); --shadow: 0 18px 40px -24px rgba(59, 36, 20, .4);
  --side-bg: #3B2414; --side-ink: #F3EAD9; --side-accent: #D9A35F;
  --cover-bg: radial-gradient(120% 80% at 50% 0%, #FBF5EA 0%, #F3EAD9 55%, #E2CFAE 100%);
  --kawung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='1.6'%3E%3Cellipse cx='24' cy='12' rx='6' ry='10'/%3E%3Cellipse cx='24' cy='36' rx='6' ry='10'/%3E%3Cellipse cx='12' cy='24' rx='10' ry='6'/%3E%3Cellipse cx='36' cy='24' rx='10' ry='6'/%3E%3Ccircle cx='24' cy='24' r='2'/%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3Ccircle cx='48' cy='0' r='3'/%3E%3Ccircle cx='0' cy='48' r='3'/%3E%3Ccircle cx='48' cy='48' r='3'/%3E%3C/g%3E%3C/svg%3E");
  --gunungan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'%3E%3Cg fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M50 4C30 34 12 64 12 96c0 16 8 26 20 30h36c12-4 20-14 20-30C88 64 70 34 50 4z'/%3E%3Cpath d='M50 18c-12 22-24 46-24 74 0 10 4 18 10 22M50 18c12 22 24 46 24 74 0 10-4 18-10 22'/%3E%3Cpath d='M50 30v96M50 52l-14 14M50 52l14 14M50 74l-18 18M50 74l18 18M50 96l-12 12M50 96l12 12'/%3E%3Cpath d='M26 126h48M20 134h60'/%3E%3C/g%3E%3C/svg%3E");
}
[data-theme="jawa"][data-palette="hijau"] {
  --bg: #EEF0E4; --bg-2: #E2E6D2; --card: #F8F9F1; --ink: #23311F; --muted: #56634F;
  --accent: #8C6A2A; --accent-soft: rgba(140, 106, 42, .15); --line: rgba(35, 49, 31, .14);
  --side-bg: #23311F; --side-ink: #EEF0E4; --side-accent: #D2B26A;
  --cover-bg: radial-gradient(120% 80% at 50% 0%, #F8F9F1 0%, #EEF0E4 55%, #D7DCC2 100%);
}
[data-theme="jawa"][data-palette="merah"] {
  --bg: #F6ECE6; --bg-2: #EEDDD3; --card: #FCF6F2; --ink: #4A1B16; --muted: #7A4F49;
  --accent: #A8322A; --accent-soft: rgba(168, 50, 42, .13); --line: rgba(74, 27, 22, .14);
  --side-bg: #4A1B16; --side-ink: #F6ECE6; --side-accent: #E2A36B;
  --cover-bg: radial-gradient(120% 80% at 50% 0%, #FCF6F2 0%, #F6ECE6 55%, #E6CDC0 100%);
}
[data-theme="jawa"] .cover::after, [data-theme="jawa"] .sec:nth-of-type(even)::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07; border: 0; border-radius: 0;
  background: var(--accent); -webkit-mask: var(--kawung) repeat center / 48px 48px; mask: var(--kawung) repeat center / 48px 48px;
}
[data-theme="jawa"] .sec:nth-of-type(even) > * { position: relative; }
[data-theme="jawa"] .cover-orn, [data-theme="jawa"] .ornament--top {
  width: 64px; height: 90px; margin: 0 auto 18px; background: var(--accent);
  -webkit-mask: var(--gunungan) no-repeat center / contain; mask: var(--gunungan) no-repeat center / contain;
}
[data-theme="jawa"] .ornament--top::before, [data-theme="jawa"] .ornament--top::after { display: none; }
[data-theme="jawa"] .monogram { border-radius: 50% 50% 18px 18px; }
[data-theme="jawa"] .side::before {
  content: ""; position: absolute; inset: 0; z-index: 1; opacity: .08; background: var(--side-accent);
  -webkit-mask: var(--kawung) repeat center / 56px 56px; mask: var(--kawung) repeat center / 56px 56px;
}

/* =========================================================
   Tema Minimalis
   ========================================================= */
[data-theme="minimalis"] {
  --bg: #FFFFFF; --bg-2: #F6F6F4; --card: #FFFFFF; --ink: #1A1A1A; --muted: #6B6B6B;
  --accent: #1A1A1A; --accent-soft: rgba(26, 26, 26, .06); --on-accent: #FFFFFF;
  --line: rgba(26, 26, 26, .12); --shadow: 0 16px 36px -28px rgba(0, 0, 0, .35);
  --side-bg: #1A1A1A; --side-ink: #FFFFFF; --side-accent: #D9D3C7;
  --cover-bg: #FFFFFF;
}
[data-theme="minimalis"][data-palette="krem"] {
  --bg: #F5F0E8; --bg-2: #EDE6DA; --card: #FBF8F3; --ink: #2B2620; --muted: #6F665B;
  --accent: #8A7458; --accent-soft: rgba(138, 116, 88, .12); --line: rgba(43, 38, 32, .12);
  --side-bg: #2B2620; --side-ink: #F5F0E8; --side-accent: #CDB894; --cover-bg: #F5F0E8;
}
[data-theme="minimalis"][data-palette="hitam"] {
  --bg: #121212; --bg-2: #1A1A1A; --card: #1E1E1E; --ink: #F2F2F2; --muted: #A8A8A8;
  --accent: #E8E2D6; --accent-soft: rgba(232, 226, 214, .1); --on-accent: #121212;
  --line: rgba(242, 242, 242, .14); --shadow: 0 16px 36px -26px rgba(0, 0, 0, .8);
  --side-bg: #000000; --side-ink: #F2F2F2; --side-accent: #E8E2D6; --cover-bg: #121212;
}
[data-theme="minimalis"] .script {
  font-family: "Cormorant Garamond", serif; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; line-height: 1.05;
}
[data-theme="minimalis"] .cover-names, [data-theme="minimalis"] .hero-names { font-size: clamp(34px, 10vw, 46px); }
[data-theme="minimalis"] .closing-names, [data-theme="minimalis"] .side-names { font-size: clamp(30px, 8vw, 40px); }
[data-theme="minimalis"] .couple-amp { font-size: 30px; }
[data-theme="minimalis"] .amp { color: var(--muted); font-family: "Cormorant Garamond", serif; font-style: italic; text-transform: none; }
[data-theme="minimalis"] .cover::before { border-radius: 0; inset: 22px max(22px, calc(50% - 280px)); }
[data-theme="minimalis"] .cover::after { display: none; }
[data-theme="minimalis"] .arch { border-radius: 4px; aspect-ratio: 3 / 4; border-width: 0; }
[data-theme="minimalis"] .btn { border-radius: 4px; }
[data-theme="minimalis"] .monogram { border-radius: 4px; }
[data-theme="minimalis"] .ornament::after { display: none; }
[data-theme="minimalis"] .event-card, [data-theme="minimalis"] .gift-card, [data-theme="minimalis"] .rsvp-form, [data-theme="minimalis"] .wish { border-radius: 6px; }

/* =========================================================
   Bagian tambahan: foto mempelai, kisah, video, streaming, turut mengundang
   ========================================================= */
.cover-orn { display: none; }
[data-theme="jawa"] .cover-orn { display: block; }
.person-photo { width: 132px; height: 160px; margin: 0 auto 16px; border-radius: 80px 80px 14px 14px; overflow: hidden; border: 4px solid var(--card); box-shadow: var(--shadow); }
.person-photo img { width: 100%; height: 100%; object-fit: cover; }
[data-theme="minimalis"] .person-photo { border-radius: 4px; border-width: 0; }

.timeline { list-style: none; margin: 30px auto 0; padding: 0 0 0 26px; max-width: 420px; text-align: left; position: relative; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 1.5px; background: linear-gradient(var(--accent), transparent); }
.tl-item { position: relative; padding: 0 0 26px 14px; }
.tl-item::before { content: ""; position: absolute; left: -24px; top: 6px; width: 13px; height: 13px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); }
.sec:nth-of-type(even) .tl-item::before { background: var(--bg-2); }
.tl-date { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.tl-title { font-family: "Cormorant Garamond", serif; font-size: 24px; margin-top: 4px; }
.tl-text { margin-top: 6px; color: var(--muted); font-size: 15px; }

.video-wrap { margin: 28px auto 0; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 9; background: #000; box-shadow: var(--shadow); }
.video-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-poster { position: relative; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; background: #000; display: block; }
.video-poster img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.video-poster .play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: var(--accent); box-shadow: 0 10px 30px -8px rgba(0,0,0,.6); }
.video-poster .play::after { content: ""; position: absolute; left: 26px; top: 20px; border-left: 18px solid var(--on-accent); border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.gallery-sec .video-wrap + .gallery { margin-top: 14px; }

.stream-card { margin-top: 18px; padding: 24px 22px; border-radius: 22px; border: 1px dashed var(--accent); background: var(--accent-soft); display: grid; justify-items: center; gap: 10px; }
.stream-label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--accent); }
.stream-note { font-size: 14.5px; color: var(--muted); max-width: 34ch; }

.invites-also { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); }
.ia-title { font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 10px; }
.invites-also ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-size: 15px; color: var(--muted); }

.wish-reply { margin-top: 10px; padding: 10px 12px; border-left: 2px solid var(--accent); background: var(--accent-soft); border-radius: 0 10px 10px 0; font-size: 14px; }
.wish-reply-label { font-size: 11.5px; font-weight: 600; color: var(--accent); letter-spacing: .04em; margin-bottom: 2px; }

.preview-bar { position: fixed; left: 0; right: 0; top: 0; z-index: 60; padding: 8px 14px; text-align: center; font: 600 13px/1.4 "Plus Jakarta Sans", sans-serif; background: #13213F; color: #F6F1E7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preview-bar ~ .cover { top: 34px; }

/* ---------- twibbon ucapan ---------- */
.twibbon-sec { text-align: center; }
.twibbon-sec .btn { margin-top: 20px; }
.tw-privacy { font-size: 12.5px; color: var(--muted); margin-top: 12px; }
html.tw-open, html.tw-open body { overflow: hidden; }
.tw-modal { position: fixed; inset: 0; z-index: 90; background: rgba(10, 14, 26, .62); display: grid; place-items: center; padding: 16px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.tw-modal[hidden] { display: none; }
.tw-sheet { width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: var(--card); color: var(--ink); border-radius: 22px; padding: 18px 18px 16px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6); }
.tw-head { display: flex; align-items: center; justify-content: space-between; }
.tw-head h3 { margin: 0; font-family: "Cormorant Garamond", serif; font-size: 26px; font-weight: 600; }
.tw-x { border: 0; background: var(--bg-2); color: var(--ink); width: 36px; height: 36px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; }
.tw-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 0 10px; }
.tw-tab { border: 1.5px solid var(--line); background: transparent; color: var(--ink); border-radius: 12px; padding: 8px 4px; font: 600 12.5px/1.25 "Plus Jakarta Sans", sans-serif; cursor: pointer; }
.tw-tab small { display: block; font-weight: 500; color: var(--muted); font-size: 11px; }
.tw-tab.is-on { border-color: var(--accent); background: var(--accent-soft); }
.tw-stage { position: relative; display: grid; place-items: center; background: var(--bg-2); border-radius: 14px; padding: 10px; }
.tw-stage canvas { display: block; max-width: 100%; max-height: 42dvh; width: auto; height: auto; border-radius: 6px; box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .5); touch-action: none; cursor: grab; }
.tw-drag { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); margin: 0; background: rgba(0, 0, 0, .55); color: #fff; font-size: 11.5px; padding: 4px 10px; border-radius: 999px; pointer-events: none; white-space: nowrap; }
.tw-controls { display: grid; gap: 10px; margin-top: 12px; font-size: 13.5px; }
.tw-pick { justify-self: start; }
.tw-zoom { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.tw-zoom input { flex: 1; accent-color: var(--accent); }
.tw-namefield { display: grid; gap: 4px; color: var(--muted); }
.tw-namefield input { font: 500 15px "Plus Jakarta Sans", sans-serif; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.tw-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.tw-actions .btn { width: 100%; justify-content: center; white-space: nowrap; padding-left: 10px; padding-right: 10px; }
.tw-sheet .tw-privacy { text-align: center; margin-bottom: 0; }

/* ---------- menu ikon bawah (tema dengan 'dock') ---------- */
.dock {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 45; transform: translateX(-50%);
  display: flex; gap: 6px; padding: 6px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); background: color-mix(in srgb, var(--card) 90%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .45);
}
.dock[hidden] { display: none; }
.dock a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); transition: transform .25s, box-shadow .25s; }
.dock a svg { width: 18px; height: 18px; }
.dock a.is-on { transform: translateY(-4px); box-shadow: 0 0 0 3px var(--card), 0 0 0 4.5px var(--accent); }
body.has-dock .music-btn { bottom: calc(76px + env(safe-area-inset-bottom)); }
body.has-dock .toast { bottom: calc(136px + env(safe-area-inset-bottom)); }
body.has-dock .foot { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { .dock { left: calc(100% - 260px); } }
.arch-wrap { position: relative; }
.person-media { position: relative; }

/* =========================================================
   Tema Mawar — ilustrasi mawar buatan sendiri (views/invite/_flora.svg)
   ========================================================= */
@font-face { font-family: "Alex Brush"; src: url("../fonts/alex-brush-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
[data-theme="mawar"] {
  --bg: #FBF4F2; --bg-2: #F6E9E6; --card: #FFFDFC; --ink: #4A1420; --muted: #85585F;
  --accent: #7A1C2C; --accent-soft: rgba(122, 28, 44, .1); --on-accent: #FFF5F3;
  --line: rgba(74, 20, 32, .13); --shadow: 0 18px 40px -24px rgba(74, 20, 32, .45);
  --side-bg: #4A1420; --side-ink: #FBEDEA; --side-accent: #F0B9BE;
  --cover-bg: radial-gradient(120% 80% at 50% 0%, #FFFFFF 0%, #FBF4F2 55%, #F2DEDA 100%);
  --band: var(--accent); --band-ink: var(--on-accent); --band-muted: rgba(255, 245, 243, .8); --band-soft: #F4D3D3;
  --f0: #3D0B14; --f1: #6E1423; --f2: #9E2F3F; --f3: #D98C94; --f4: #F4D3D3; --f5: #FFF8F7;
  --l0: #6B6650; --l1: #A79F82; --l2: #C7C3AE; --tw: #C9A58C;
}
[data-theme="mawar"][data-palette="pink"] {
  --bg: #FCF6F5; --bg-2: #F8ECEB; --card: #FFFEFD; --ink: #4E2A33; --muted: #86636A;
  --accent: #A24F60; --accent-soft: rgba(162, 79, 96, .11); --on-accent: #FFFFFF;
  --line: rgba(78, 42, 51, .13); --shadow: 0 18px 40px -24px rgba(78, 42, 51, .4);
  --side-bg: #5C2C37; --side-ink: #FCEFEF; --side-accent: #F2C2C9;
  --cover-bg: radial-gradient(120% 80% at 50% 0%, #FFFFFF 0%, #FCF6F5 55%, #F4E1E1 100%);
  --band-muted: rgba(255, 255, 255, .82); --band-soft: #F8E2E3;
  --f0: #5A2430; --f1: #8E4553; --f2: #C17A86; --f3: #E6B4BB; --f4: #F8E2E3; --f5: #FFFAF9;
  --l0: #716B57; --l1: #A9A28C; --l2: #CFCBB8; --tw: #D2B39F;
}
[data-theme="mawar"][data-palette="navy"] {
  --bg: #F6F7FA; --bg-2: #ECEFF5; --card: #FFFFFF; --ink: #1B2541; --muted: #5E6886;
  --accent: #22335E; --accent-soft: rgba(34, 51, 94, .1); --on-accent: #F4F6FB;
  --line: rgba(27, 37, 65, .13); --shadow: 0 18px 40px -24px rgba(27, 37, 65, .45);
  --side-bg: #141C33; --side-ink: #F2F4F9; --side-accent: #C9D3EA;
  --cover-bg: radial-gradient(120% 80% at 50% 0%, #FFFFFF 0%, #F6F7FA 55%, #E2E7F1 100%);
  --band-muted: rgba(244, 246, 251, .8); --band-soft: #E3E9F3;
  --f0: #101A33; --f1: #1F2E55; --f2: #4A5F8C; --f3: #9FB0D0; --f4: #E3E9F3; --f5: #FAFBFE;
  --l0: #5F6B62; --l1: #9BA59A; --l2: #C5CCC2; --tw: #B9A98F;
}
/* warna bebas (paket Gold): bunga mengikuti warna aksen */
[data-theme="mawar"][data-custom] {
  --band-muted: color-mix(in srgb, var(--on-accent) 80%, transparent); --band-soft: color-mix(in srgb, var(--accent) 22%, #fff);
  --f0: color-mix(in srgb, var(--accent) 55%, #000); --f1: color-mix(in srgb, var(--accent) 82%, #000); --f2: color-mix(in srgb, var(--accent) 85%, #fff);
  --f3: color-mix(in srgb, var(--accent) 50%, #fff); --f4: color-mix(in srgb, var(--accent) 22%, #fff); --f5: color-mix(in srgb, var(--accent) 6%, #fff);
}

[data-theme="mawar"] .script { font-family: "Alex Brush", cursive; }
.fl { position: absolute; z-index: 0; pointer-events: none; fill: none; stroke: none; overflow: visible; }
.fl-tl { top: -34px; left: -34px; width: min(64vw, 280px); height: min(64vw, 280px); }
.fl-br { bottom: -34px; right: -34px; width: min(64vw, 280px); height: min(64vw, 280px); transform: rotate(180deg); }
.fl-sm.fl-tl, .fl-sm.fl-br { width: min(44vw, 190px); height: min(44vw, 190px); }
.fl-sm.fl-tl { top: -26px; left: -26px; }
.fl-sm.fl-br { bottom: -26px; right: -26px; }
.fl-title { position: relative; display: block; width: 220px; height: 82px; margin: 2px auto -4px; }
.fl-icon { position: relative; display: block; width: 96px; height: 96px; margin: -10px auto 6px; }
[data-theme="mawar"] .sec { overflow: hidden; }
[data-theme="mawar"] .sec > :not(.fl) { position: relative; z-index: 1; }
[data-theme="mawar"] .sec:nth-of-type(even) { background: var(--bg); }
[data-theme="mawar"] .eyebrow { font-size: 11.5px; letter-spacing: .34em; }
[data-theme="mawar"] .sec-title { font-family: "Alex Brush", cursive; font-weight: 400; font-size: 50px; line-height: 1.1; color: var(--accent); margin-top: 4px; }
[data-theme="mawar"] .btn { border-radius: 12px; }
[data-theme="mawar"] .ornament { display: none; }

/* sampul */
[data-theme="mawar"] .cover::before, [data-theme="mawar"] .cover::after { display: none; }
[data-theme="mawar"] .cover-inner { z-index: 1; }
.cover .fl-tl { top: -44px; left: -44px; }
.cover .fl-br { bottom: -44px; right: -44px; }
.cover .fl-tl, .cover .fl-br { width: min(58vw, 270px); height: min(58vw, 270px); }
[data-theme="mawar"] .cover-label { color: var(--accent); font-weight: 600; letter-spacing: .3em; font-size: 11.5px; }
.cover-photo { width: 148px; height: 200px; margin: 18px auto 0; border-radius: 999px; overflow: hidden; border: 5px solid #fff; box-shadow: var(--shadow); }
.cover-photo img { width: 100%; height: 100%; object-fit: cover; }
[data-theme="mawar"] .cover-names { font-size: clamp(46px, 13vw, 60px); margin: 14px 0 4px; color: var(--accent); }
[data-theme="mawar"] .cover-names .n, [data-theme="mawar"] .cover-names .amp { display: inline-block; }
[data-theme="mawar"] .cover-names .amp { font-size: .7em; margin: 0 .2em; color: var(--f3); }
[data-theme="mawar"] .cover-date { font: 600 13px/1.4 "Plus Jakarta Sans", sans-serif; letter-spacing: .2em; text-transform: uppercase; }
[data-theme="mawar"] .cover-guest { margin: 24px 0 22px; }
@media (max-height: 700px) { .cover-photo { width: 116px; height: 156px; margin-top: 12px; } [data-theme="mawar"] .cover-guest { margin: 16px 0 16px; } }

/* hero */
[data-theme="mawar"] .hero { padding-top: 92px; }
[data-theme="mawar"] .arch { width: min(62%, 250px); aspect-ratio: 3 / 4.2; border-radius: 999px; border: 6px solid #fff; }
.fl-arch { width: 112px; height: 200px; left: calc(50% + 62px); bottom: -26px; z-index: 2; }
[data-theme="mawar"] .hero-names { font-size: clamp(50px, 14vw, 64px); color: var(--accent); margin-top: 22px; }
[data-theme="mawar"] .hero-names .amp { display: inline-block; font-size: .7em; margin: 0 .2em; color: var(--f3); }
[data-theme="mawar"] .hero-date { font: 600 13.5px/1.4 "Plus Jakarta Sans", sans-serif; letter-spacing: .2em; text-transform: uppercase; }
[data-theme="mawar"] .countdown div { background: var(--accent); color: var(--on-accent); border: 0; border-radius: 12px; box-shadow: 0 10px 20px -14px var(--accent); }
[data-theme="mawar"] .countdown span { font: 700 26px/1.2 "Plus Jakarta Sans", sans-serif; }
[data-theme="mawar"] .countdown small { color: inherit; opacity: .82; }
[data-theme="mawar"] .hero .btn-ghost { background: var(--accent); color: var(--on-accent); border-color: transparent; }

/* pita warna (pembuka & galeri) */
[data-theme="mawar"] .sec.opening, [data-theme="mawar"] .sec.gallery-sec {
  background: var(--band); color: var(--band-ink); border-radius: 50% 50% 0 0 / 46px 46px 0 0; padding-top: 66px;
}
[data-theme="mawar"] .opening .greeting { color: var(--band-ink); }
[data-theme="mawar"] .opening .lead { color: var(--band-muted); }
[data-theme="mawar"] .opening .quote { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); }
[data-theme="mawar"] .opening .quote cite { color: var(--band-soft); }
[data-theme="mawar"] .gallery-sec .eyebrow { color: var(--band-soft); }
[data-theme="mawar"] .gallery-sec .sec-title { color: var(--band-ink); }
[data-theme="mawar"] .g-item { border: 3px solid rgba(255, 255, 255, .92); border-radius: 14px; }
[data-theme="mawar"] .video-wrap { border: 3px solid rgba(255, 255, 255, .92); }

/* mempelai */
[data-theme="mawar"] .person-photo { width: 168px; height: 228px; border-radius: 999px; border: 5px solid #fff; margin-bottom: 4px; }
[data-theme="mawar"] .monogram { width: 150px; height: 200px; border-radius: 999px; }
.fl-person { width: 96px; height: 170px; right: -60px; bottom: -18px; z-index: 2; }
[data-theme="mawar"] .person:last-of-type .fl-person { right: auto; left: -60px; transform: scaleX(-1); }
.person-nick { font-size: 46px; color: var(--accent); margin-top: 6px; }
[data-theme="mawar"] .person-name { font-size: 24px; }
[data-theme="mawar"] .couple-amp { font-size: 54px; color: var(--f3); margin: 26px 0 14px; }
[data-theme="mawar"] .person-ig { display: inline-flex; padding: 6px 14px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 13px; margin-top: 4px; }

/* kisah */
[data-theme="mawar"] .timeline::before { width: 2px; background: var(--accent); opacity: .7; }
[data-theme="mawar"] .tl-item { margin-bottom: 18px; padding: 18px 18px 18px; border-radius: 16px; background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow); }
[data-theme="mawar"] .sec .tl-item::before {
  left: -28px; top: 18px; width: 20px; height: 20px; border: 0; border-radius: 0; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.7 4.5c2.2 0 3.6 1.3 4.3 2.6.7-1.3 2.1-2.6 4.3-2.6 3.7 0 5.8 3.9 4.3 7.3C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.7 4.5c2.2 0 3.6 1.3 4.3 2.6.7-1.3 2.1-2.6 4.3-2.6 3.7 0 5.8 3.9 4.3 7.3C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat;
}
[data-theme="mawar"] .tl-date { color: var(--band-soft); }
[data-theme="mawar"] .tl-text { color: var(--band-muted); }

/* acara: kartu marun melengkung */
[data-theme="mawar"] .event-card {
  position: relative; background: var(--accent); color: var(--on-accent); border: 0;
  border-radius: 220px 220px 26px 26px; padding: 54px 24px 30px; box-shadow: 0 24px 50px -30px var(--accent);
}
[data-theme="mawar"] .event-card::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 212px 212px 20px 20px; pointer-events: none; }
.ev-ico { display: block; color: var(--on-accent); }
.ev-ico svg { width: 46px; height: 31px; margin: 0 auto 6px; stroke-width: 1.6; }
[data-theme="mawar"] .event-name { font-family: "Alex Brush", cursive; font-weight: 400; font-size: 42px; line-height: 1.15; }
[data-theme="mawar"] .event-meta { display: none; }
.ev-date { margin: 12px 0 18px; }
.ev-month { font-weight: 700; font-size: 14px; letter-spacing: .26em; text-transform: uppercase; }
.ev-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 6px auto 0; max-width: 280px; }
.ev-row span { padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, .5); border-bottom: 1px solid rgba(255, 255, 255, .5); font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.ev-row b { font: 700 54px/1 "Plus Jakarta Sans", sans-serif; font-variant-numeric: lining-nums; }
.ev-time { margin-top: 10px; font-size: 14px; color: var(--band-muted); }
[data-theme="mawar"] .event-venue { display: grid; justify-items: center; gap: 8px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .28); font-size: 16px; letter-spacing: .02em; }
[data-theme="mawar"] .event-venue svg { width: 20px; height: 20px; }
[data-theme="mawar"] .event-address { color: var(--band-muted); }
[data-theme="mawar"] .event-card .btn-primary { background: #fff; color: var(--accent); box-shadow: none; }
[data-theme="mawar"] .event-card .btn-ghost { color: var(--on-accent); border-color: rgba(255, 255, 255, .45); }
[data-theme="mawar"] .event-card .map-slot { border-color: rgba(255, 255, 255, .3); }

/* RSVP, amplop, penutup */
[data-theme="mawar"] .rsvp-form, [data-theme="mawar"] .gift-card { border-top: 4px solid var(--accent); }
[data-theme="mawar"] .choice input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
[data-theme="mawar"] .wish { border-left: 3px solid var(--accent); }
[data-theme="mawar"] .closing { padding-top: 96px; padding-bottom: 170px; }
[data-theme="mawar"] .closing-names { font-size: 54px; }
[data-theme="mawar"] .closing-names .amp { color: var(--f3); }

/* panel samping (desktop) */
[data-theme="mawar"] .side .amp { color: var(--side-accent); }
.fl-side { right: -40px; bottom: -40px; width: 340px; height: 340px; transform: rotate(180deg); z-index: 2; }