/* TEMA: ROYAL GOLD & LUXURY DARK */
:root {
  --bg: #0f172a; --surface: rgba(255, 255, 255, .035); --text: #f8fafc; --heading: #fff; --muted: #94a3b8;
  --accent: #d4af37; --accent-2: #f39c12; --line: rgba(212, 175, 55, .28);
  --font-head: 'Playfair Display', serif; --font-script: 'Playfair Display', serif; --font-body: 'Poppins', sans-serif;
  --gold: linear-gradient(135deg, #f7e08a 0%, #d4af37 45%, #f39c12 100%);
  --btn-bg: var(--gold); --btn-color: #1a1405; --btn-shadow: 0 10px 30px -10px rgba(212, 175, 55, .65);
  --input-bg: rgba(255, 255, 255, .06); --radius: 18px; --toast-bg: #1e293b; --toast-color: #f8fafc;
}
body { background: radial-gradient(ellipse at 50% 0%, #1e293b 0%, #0f172a 55%) fixed, #0f172a; font-weight: 300; }
.cover-names, .hero-names, .sec-title, .person-name, .closing-title, .closing-names, .couple-amp, .cd-num { background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cover-names, .hero-names, .person-name, .closing-names, .couple-amp { font-style: italic; }
.sec-eyebrow, .hero-eyebrow, .cover-label { color: #f7e08a; }
.btn-ghost { color: #f7e08a; }
.btn-ghost:hover { color: #1a1405; background: var(--gold); border-color: transparent; }
.corner { position: absolute; width: 72px; height: 72px; pointer-events: none; }
.corner-tl { top: -9px; left: -9px; }
.corner-tr { top: -9px; right: -9px; transform: scaleX(-1); }
.corner-bl { bottom: -9px; left: -9px; transform: scaleY(-1); }
.corner-br { bottom: -9px; right: -9px; transform: scale(-1); }
.cover-inner, .hero-inner, .closing-inner { border: 1px solid var(--line); outline: 1px solid rgba(212, 175, 55, .14); outline-offset: -10px; padding: 3.25rem 1.75rem 2.75rem; }
.cover-figure { display: none; }
.cover-overlay { background: linear-gradient(180deg, rgba(15, 23, 42, .5) 0%, rgba(15, 23, 42, .82) 55%, #0f172a 100%); }
.cover-inner { background: rgba(15, 23, 42, .45); backdrop-filter: blur(3px); }
.cover-guest { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cover-date, .hero-date { font-family: var(--font-head); }
.hero-overlay { background: linear-gradient(180deg, rgba(15, 23, 42, .55), rgba(15, 23, 42, .78) 60%, #0f172a); }
.hero-inner { width: min(100%, 520px); background: rgba(15, 23, 42, .3); }
.card-x { background: linear-gradient(180deg, rgba(30, 41, 59, .78), rgba(15, 23, 42, .78)); box-shadow: 0 25px 50px -25px rgba(0, 0, 0, .8); }
.card-x::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(212, 175, 55, .12); border-radius: calc(var(--radius) - 6px); pointer-events: none; }
.event-icon { background: radial-gradient(circle, rgba(212, 175, 55, .2), transparent 70%); border-color: var(--accent); }
.cd-item { background: rgba(255, 255, 255, .04); }
.person-photo { padding: 6px; border: 1px solid var(--accent); }
.person-photo img { border-radius: inherit; }
.sec-quote { background: linear-gradient(180deg, transparent, rgba(212, 175, 55, .05), transparent); }
.arabic { color: #f7e08a; }
.g-item { border: 1px solid var(--line); }
.video-box { border: 1px solid var(--accent); }
.gift-bca { --gift-bg: linear-gradient(135deg, #f7e08a 0%, #d4af37 35%, #b8860b 70%, #f39c12 100%); --gift-color: #1a1405; }
.gift-mandiri { --gift-bg: linear-gradient(135deg, #1e293b 0%, #0f172a 60%, #020617 100%); --gift-color: #f7e08a; border: 1px solid var(--accent); }
.gift-card::after { content: ""; position: absolute; inset: -50%; background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .28) 50%, transparent 58%); transform: translateX(-60%); animation: shine 5s ease-in-out infinite; pointer-events: none; }
@keyframes shine { 0%, 60% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
.sec-rsvp .card-x { background: rgba(255, 255, 255, .06); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-color: rgba(255, 255, 255, .14); }
.orb { position: absolute; border-radius: 50%; filter: blur(70px); z-index: -1; opacity: .35; pointer-events: none; }
.orb-1 { width: 300px; height: 300px; top: 10%; left: -80px; background: #d4af37; }
.orb-2 { width: 260px; height: 260px; bottom: 5%; right: -60px; background: #f39c12; }
.form-x .form-select option { background: #0f172a; color: #f8fafc; }
.closing { background: linear-gradient(180deg, transparent, rgba(212, 175, 55, .07)); }
.closing-inner { position: relative; max-width: 620px; margin-inline: auto; }
.music-btn { box-shadow: 0 0 0 4px rgba(212, 175, 55, .2), 0 10px 25px -8px rgba(212, 175, 55, .6); }
