/* Tema: Elegan Gelap — malam biru pekat, emas, gaya art-deco */
:root {
  --bg: #0e0e16;
  --paper: #161622;
  --blush: rgba(229, 199, 127, .09);
  --pink: #8c7645;
  --rose: #c9a55a;
  --deep: #e5c77f;
  --on-deep: #14131c;
  --ink: #e9e4d8;
  --muted: #a39f96;
  --gold: #c9a55a;
  --line: rgba(229, 199, 127, .2);
  --shadow: 0 0 0;
  --overlay: 8 8 14;
  --frame: #1e1d2c;
  --radius: 6px;
  --cover-bg: radial-gradient(ellipse at 50% 0, rgba(229, 199, 127, .16), transparent 60%), linear-gradient(170deg, #22213a, #0e0e16 60%, #07070c);
  --cover-ink: #e5c77f;
  --bank-bg: linear-gradient(135deg, #2a2840, #121220);
  --dock-bg: rgba(18, 18, 28, .9);
  --script: "Pinyon Script", cursive;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", system-ui, sans-serif;
}

.kicker, .sec-title, .event h3 { font-family: "Cinzel", var(--serif); }
.kicker { font-weight: 500; letter-spacing: .32em; }
.sec-title { font-weight: 500; font-size: 1.7rem; letter-spacing: .08em; }
.event h3 { font-size: 1.25rem; letter-spacing: .1em; font-weight: 500; }
.btn { border-radius: 4px; letter-spacing: .12em; text-transform: uppercase; font-size: .74rem; }
.btn-open, .btn-main { background: linear-gradient(135deg, #f1d99a, #c9a55a); box-shadow: 0 10px 30px -12px rgba(229, 199, 127, .6); }
.btn-soft { border: 1px solid var(--line); }
.btn-soft:hover { background: rgba(229, 199, 127, .16); }

/* sampul: bingkai ganda emas */
.cover::before, .cover::after { content: ""; position: absolute; pointer-events: none; border: 1px solid rgba(229, 199, 127, .45); }
.cover::before { inset: 16px; }
.cover::after { inset: 22px; border-color: rgba(229, 199, 127, .2); }
.cover:not([style]) .cover-guest, .cover-guest { background: rgba(229, 199, 127, .07); border-color: rgba(229, 199, 127, .35); border-radius: 4px; }
.cover-guest b { color: #f3e2b5; }
.cover-fan { width: 110px; height: 110px; color: var(--deep); margin: 0 auto 10px; display: block; opacity: .9; }
.cover-title { text-shadow: 0 0 30px rgba(229, 199, 127, .25); }
.deco { color: var(--deep); opacity: .22; width: 150px; height: 150px; }
.deco-tl { top: 34px; left: 50%; transform: translateX(-50%) rotate(180deg); display: none; }
.deco-br { bottom: 30px; right: 50%; transform: translateX(50%); }

.sec + .sec { border-top: 0; }
.sec + .sec::before { content: ""; position: absolute; top: 0; left: 50%; width: 120px; height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.hero, .closing { background: radial-gradient(ellipse at 50% 0, rgba(229, 199, 127, .1), transparent 60%); }
.closing { background: radial-gradient(ellipse at 50% 100%, rgba(229, 199, 127, .1), transparent 60%); }

.arch { border: 1px solid var(--gold); box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px rgba(229, 199, 127, .35); background: var(--paper); border-radius: 110px 110px 4px 4px; }
.person-photo { border: 1px solid var(--gold); box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px rgba(229, 199, 127, .35); background: var(--paper); }
.person-photo svg, .arch-orn { color: var(--deep); opacity: .5; }
.person-full { color: var(--ink); }
.ig { border: 1px solid var(--line); }
.divider-orn { color: var(--deep); width: 70px; }

.event, .countdown div, .rsvp-stats div, .wish-form, .wish, .qris, .gift-address { box-shadow: none; border-color: var(--line); }
.event { position: relative; }
.event::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(229, 199, 127, .1); border-radius: 3px; pointer-events: none; }
.countdown div { border-radius: 4px; }
.wish-form input[type=text], .wish-form select, .wish-form textarea { background: #0c0c14; border-radius: 4px; }
.chips span { border-radius: 4px; }
.tag-hadir { background: rgba(98, 180, 130, .15); color: #8fd4a8; }
.tag-tidak { background: rgba(220, 120, 120, .15); color: #e7a0a0; }
.bank { border: 1px solid rgba(229, 199, 127, .35); color: #f3e2b5; box-shadow: none; }
.bank .btn-copy { color: #f3e2b5; }
.timeline li::before { background: var(--gold); box-shadow: 0 0 0 4px rgba(229, 199, 127, .15); }
.dock a.active { color: var(--deep); }

@media (min-width: 900px) {
  .side { background: linear-gradient(transparent 40%, rgb(var(--overlay) / .75)), var(--cover-img, var(--cover-bg)) center / cover no-repeat; }
  .side:not([style]) { place-items: center; text-align: center; }
  .side:not([style]) .side-orn { display: block; position: absolute; top: 14%; left: 50%; width: 150px; height: 150px; transform: translateX(-50%); color: var(--deep); opacity: .8; }
  .side-title { color: #f3e2b5; }
  .side .kicker { color: var(--gold); }
}

/* debu emas melayang */
.petals i { width: 4px; height: 4px; border-radius: 50%; background: #f1d99a; box-shadow: 0 0 8px 2px rgba(241, 217, 154, .6); opacity: .7; }
.rsvp-stats div, .wish, .qris, .gift-address, .bank { border-radius: 4px; }
.event-actions .btn { padding: 9px 14px; }