.js .reveal { opacity: 1; transform: none; }
}

/* ======================================================================
   TEMA: KERATON JAWA
   ====================================================================== */

:root {
  --bg: #f3e9d2; --surface: #fbf5e6; --text: #3b2416; --heading: #3b2416; --muted: #7a5c43;
  --accent: #8a5a1c; --gold: #c9a227; --sogan: #3b2416; --line: rgba(138, 90, 28, .3);
  --font-head: 'Marcellus', serif; --font-script: 'Cormorant Garamond', serif; --font-body: 'Lora', serif;
  --btn-bg: linear-gradient(135deg, #e3c05a, #c9a227 50%, #a07d14); --btn-color: #2a170c; --btn-radius: 6px;
  --input-bg: #fffaf0; --radius: 8px; --photo-radius: 50% 50% 8px 8px / 30% 30% 8px 8px; --toast-bg: #3b2416;
  --kawung-gold: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2748%27%20height%3D%2748%27%20viewBox%3D%270%200%2048%2048%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23c9a227%27%20stroke-opacity%3D%270.35%27%20stroke-width%3D%271.2%27%3E%3Cellipse%20cx%3D%2724%27%20cy%3D%2711%27%20rx%3D%276%27%20ry%3D%2710%27/%3E%3Cellipse%20cx%3D%2724%27%20cy%3D%2737%27%20rx%3D%276%27%20ry%3D%2710%27/%3E%3Cellipse%20cx%3D%2711%27%20cy%3D%2724%27%20rx%3D%2710%27%20ry%3D%276%27/%3E%3Cellipse%20cx%3D%2737%27%20cy%3D%2724%27%20rx%3D%2710%27%20ry%3D%276%27/%3E%3Ccircle%20cx%3D%2724%27%20cy%3D%2724%27%20r%3D%272%27/%3E%3Ccircle%20cx%3D%270%27%20cy%3D%270%27%20r%3D%272%27/%3E%3Ccircle%20cx%3D%2748%27%20cy%3D%2748%27%20r%3D%272%27/%3E%3Ccircle%20cx%3D%2748%27%20cy%3D%270%27%20r%3D%272%27/%3E%3Ccircle%20cx%3D%270%27%20cy%3D%2748%27%20r%3D%272%27/%3E%3C/g%3E%3C/svg%3E"); --kawung-brown: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2748%27%20height%3D%2748%27%20viewBox%3D%270%200%2048%2048%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%233b2416%27%20stroke-opacity%3D%270.07%27%20stroke-width%3D%271.2%27%3E%3Cellipse%20cx%3D%2724%27%20cy%3D%2711%27%20rx%3D%276%27%20ry%3D%2710%27/%3E%3Cellipse%20cx%3D%2724%27%20cy%3D%2737%27%20rx%3D%276%27%20ry%3D%2710%27/%3E%3Cellipse%20cx%3D%2711%27%20cy%3D%2724%27%20rx%3D%2710%27%20ry%3D%276%27/%3E%3Cellipse%20cx%3D%2737%27%20cy%3D%2724%27%20rx%3D%2710%27%20ry%3D%276%27/%3E%3Ccircle%20cx%3D%2724%27%20cy%3D%2724%27%20r%3D%272%27/%3E%3Ccircle%20cx%3D%270%27%20cy%3D%270%27%20r%3D%272%27/%3E%3Ccircle%20cx%3D%2748%27%20cy%3D%2748%27%20r%3D%272%27/%3E%3Ccircle%20cx%3D%2748%27%20cy%3D%270%27%20r%3D%272%27/%3E%3Ccircle%20cx%3D%270%27%20cy%3D%2748%27%20r%3D%272%27/%3E%3C/g%3E%3C/svg%3E");
}
body { background-color: var(--bg); background-image: var(--kawung-brown); font-size: .97rem; }
.sec-title, .event-card h3 { letter-spacing: .06em; }
.sec-eyebrow, .hero-eyebrow, .cover-label { color: var(--accent); letter-spacing: .3em; }
.person-name, .closing-names, .couple-amp { font-style: italic; font-weight: 500; color: var(--accent); }
.btn-ghost { color: var(--accent); }
.gunungan { display: block; width: 64px; margin: 0 auto 1rem; color: var(--gold); }
.gunungan-bg { position: absolute; left: 50%; top: 50%; width: 360px; transform: translate(-50%, -50%); color: rgba(201, 162, 39, .1); z-index: -1; pointer-events: none; }

/* Panel sogan bermotif kawung */
.cover, .hero, .sec-event, .closing { background-color: var(--sogan); background-image: var(--kawung-gold); color: #f3e9d2; }
.cover-photo, .cover-figure { display: none; }
.cover-overlay { background: radial-gradient(ellipse at center, rgba(59, 36, 22, .3), rgba(30, 17, 9, .92)); }
.cover-inner { padding: 2.5rem 1.5rem; border: 2px solid var(--gold); border-radius: 8px; background: rgba(30, 17, 9, .55); }
.cover-inner::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(201, 162, 39, .4); border-radius: 4px; pointer-events: none; }
.cover-names, .hero-names { font-family: 'Marcellus', serif; color: #f0d68a; letter-spacing: .05em; }
.cover-label, .hero-eyebrow { color: var(--gold); }
.cover-guest { border-top: 1px solid rgba(201, 162, 39, .45); border-bottom: 1px solid rgba(201, 162, 39, .45); }
.hero-bg { opacity: .25; filter: sepia(.6); }
.hero-inner { padding: 2rem 1rem; }
.hero .divider, .closing .divider, .sec-event .sec-head .divider { color: var(--gold); }
.scroll-hint { color: var(--gold); }

.card-x { border: 1px solid var(--line); border-top: 4px double var(--gold); box-shadow: 0 16px 34px -24px rgba(59, 36, 22, .6); }
.event-icon { border-color: var(--gold); background: #fbf5e6; }
.person-photo { border: 3px solid var(--gold); padding: 5px; background: var(--sogan); }
.person-photo img { border-radius: inherit; }
.arabic { color: var(--accent); }
.quote-box { border: 1px solid var(--line); padding: 2rem 1.25rem; border-radius: 8px; background: var(--surface); }
.sec-event .sec-title { color: #f0d68a; }
.sec-event .sec-eyebrow { color: var(--gold); }
.sec-event .cd-item { background: rgba(255, 255, 255, .05); border-color: rgba(201, 162, 39, .5); }
.sec-event .cd-num { color: #f0d68a; }
.sec-event .cd-label { color: #d9c39a; }
.sec-event .card-x { color: var(--text); }
.g-item { border: 3px solid var(--sogan); outline: 1px solid var(--gold); outline-offset: -6px; }
.gift-bca { --gift-bg: var(--kawung-gold), linear-gradient(135deg, #5a3720, #3b2416 60%, #24150b); --gift-color: #f0d68a; border: 1px solid var(--gold); }
.gift-mandiri { --gift-bg: var(--kawung-brown), linear-gradient(135deg, #f6e7b0, #e3c05a 55%, #c9a227); --gift-color: #3b2416; }
.closing-title { color: #f0d68a; font-family: 'Marcellus', serif; }
.closing-names { color: var(--gold); }
.closing-families strong { color: #fff; }
.music-btn { border: 2px solid var(--sogan); box-shadow: 0 0 0 2px var(--gold); }