  .js .reveal { opacity: 1; transform: none; }
}

/* ======================================================================
   TEMA: KEAGUNGAN ADAT JAWA
   ====================================================================== */

:root {
  --bg: #121212; --surface: #1d1410; --text: #efe2c6; --heading: #e7c766; --muted: #b39c7c;
  --accent: #c59b27; --gold: #c59b27; --gold-light: #e7c766; --sogan: #3d2314; --terracotta: #8c4327;
  --line: rgba(197, 155, 39, .38);
  --font-head: 'Cinzel Decorative', serif; --font-script: 'Cinzel Decorative', serif; --font-body: 'Lora', serif;
  --btn-bg: linear-gradient(135deg, #e7c766, #c59b27 50%, #8a6a14); --btn-color: #1a0f08; --btn-radius: 6px;
  --btn-shadow: 0 10px 24px -10px rgba(197, 155, 39, .6);
  --input-bg: #120c09; --radius: 10px; --radius-sm: 8px; --photo-radius: 50% 50% 10px 10px / 34% 34% 10px 10px;
  --toast-bg: #3d2314; --parang: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2736%27%20height%3D%2736%27%20viewBox%3D%270%200%2036%2036%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23c59b27%27%20stroke-opacity%3D%27.2%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M-4%2032Q2%2020%2012%2018T28%204%27/%3E%3Cpath%20d%3D%27M14%2050Q20%2038%2030%2036T46%2022%27/%3E%3Cpath%20d%3D%27M-22%2014Q-16%202-6%200T10-14%27/%3E%3C/g%3E%3Cg%20fill%3D%27%23c59b27%27%20fill-opacity%3D%27.22%27%3E%3Cpath%20d%3D%27M30%2030l3%203-3%203-3-3zM12%2012l2.4%202.4-2.4%202.4-2.4-2.4z%27/%3E%3C/g%3E%3C/svg%3E");
}
body { background-color: var(--bg); background-image: var(--parang); }
h1, h2, h3 { font-weight: 700; letter-spacing: .02em; }
.sec-title { color: var(--heading); font-size: clamp(1.9rem, 8vw, 2.7rem); }
.sec-eyebrow, .hero-eyebrow, .cover-label { font-family: 'Inter', sans-serif; color: var(--gold); letter-spacing: .38em; }
.person-name, .closing-names, .couple-amp, .greeting-title { font-family: 'Cinzel Decorative', serif; font-weight: 700; color: var(--gold-light); }
.person-name { font-size: clamp(1.9rem, 8vw, 2.4rem); }
.person-full { color: #fff; }
.greeting-title { font-size: clamp(2.2rem, 10vw, 3.2rem); text-shadow: 0 0 24px rgba(197, 155, 39, .35); }
.greeting-sub { color: var(--terracotta); font-family: 'Inter', sans-serif; letter-spacing: .6em; color: #d98a5f; }
.btn-ghost { color: var(--gold-light); }
.btn-ghost:hover { background: var(--gold); color: #1a0f08; border-color: var(--gold); }

/* Gunungan */
.gunungan { display: block; pointer-events: none; filter: drop-shadow(0 0 18px rgba(197, 155, 39, .35)); }
.gunungan-cover { width: 118px; margin: 0 auto 1rem; transform-origin: 50% 100%; animation: kayon 6s ease-in-out infinite; }
@keyframes kayon { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.gunungan-bg { position: absolute; left: 50%; top: 50%; width: min(420px, 110vw); transform: translate(-50%, -50%); opacity: .12; z-index: -1; filter: none; }
.frame-jawa { position: relative; width: min(220px, 62vw); margin: 0 auto 1.5rem; padding-top: 34px; }
.gunungan-crest { position: absolute; top: 0; left: 50%; width: 46px; transform: translateX(-50%); z-index: 2; }
.frame-jawa .person-photo { width: 100%; margin: 0; border: 2px solid var(--gold); padding: 6px; background: var(--sogan); outline: 1px solid var(--line); outline-offset: 5px; }
.frame-jawa .person-photo img { border-radius: inherit; filter: sepia(.15) contrast(1.05); }

/* Ukiran gebyok di keempat sudut */
.ukir { position: absolute; width: 58px; height: 58px; pointer-events: none; z-index: 2; }
.ukir-tl { top: 6px; left: 6px; } .ukir-tr { top: 6px; right: 6px; transform: scaleX(-1); }
.ukir-bl { bottom: 6px; left: 6px; transform: scaleY(-1); } .ukir-br { bottom: 6px; right: 6px; transform: scale(-1); }
.gebyok { position: relative; background: var(--sogan) var(--parang); border: 1px solid var(--line); outline: 1px solid rgba(197, 155, 39, .2); outline-offset: -12px; }

/* Cover */
.cover { background: #0b0806; }
.cover-photo { opacity: .3; filter: sepia(.7) contrast(1.1); }
.cover-overlay { background: radial-gradient(ellipse at center, rgba(61, 35, 20, .55), rgba(10, 6, 4, .95) 75%), var(--parang); }
.cover-figure { display: none; }
.cover-inner { padding: 2.5rem 1.5rem 2.25rem; background: rgba(29, 20, 16, .72); border: 1px solid var(--line); outline: 1px solid rgba(197, 155, 39, .2); outline-offset: -12px; border-radius: 8px; }
.cover-names { font-family: 'Cinzel Decorative', serif; font-weight: 700; color: var(--gold-light); font-size: clamp(2.2rem, 10vw, 3.2rem); text-shadow: 0 0 30px rgba(197, 155, 39, .35); }
.cover-names .amp, .hero-names .amp { color: #d98a5f; }
.cover-date { font-family: 'Inter', sans-serif; letter-spacing: .5em; color: var(--muted); }
.cover-guest { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cover-guest strong { color: #fff; }

/* Hero */
.hero-bg { filter: sepia(.6) contrast(1.1); }
.hero-overlay { background: linear-gradient(180deg, rgba(18, 18, 18, .55), rgba(18, 18, 18, .85) 60%, #121212), var(--parang); }
.hero-inner { width: min(100%, 470px); padding: 3rem 1.5rem; background: rgba(29, 20, 16, .55); border: 1px solid var(--line); outline: 1px solid rgba(197, 155, 39, .2); outline-offset: -12px; border-radius: 8px; }
.hero-names { font-family: 'Cinzel Decorative', serif; font-weight: 700; color: var(--gold-light); font-size: clamp(2.6rem, 12vw, 4.4rem); text-shadow: 0 0 30px rgba(197, 155, 39, .3); }
.hero-date { font-family: 'Inter', sans-serif; letter-spacing: .35em; font-size: .8rem; text-transform: uppercase; }
.scroll-hint { color: var(--gold); }

/* Kartu bergaya gebyok */
.card-x, .quote-box { background: var(--sogan) var(--parang); border: 1px solid var(--line); outline: 1px solid rgba(197, 155, 39, .18); outline-offset: -10px; box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .9); }
.quote-box { position: relative; border-radius: 10px; padding: 2.75rem 1.5rem 2rem; }
.arabic { color: var(--gold-light); }
.latin, .translation { color: #dccbaa; }
.event-icon { border-color: var(--gold); color: var(--gold-light); background: rgba(197, 155, 39, .1); }
.event-card h3 { font-size: 1.35rem; color: var(--gold-light); }
.cd-item { background: #1d1410; border-color: var(--line); }
.cd-num { font-family: 'Cinzel Decorative', serif; color: var(--gold-light); }
.sec-event { background: linear-gradient(180deg, #121212, #2a170c 50%, #121212); }
.sec-couple, .sec-rsvp { background: rgba(61, 35, 20, .35); }
.g-item { border: 2px solid var(--gold); padding: 3px; background: var(--sogan); }
.g-item img { filter: sepia(.2); }
.video-box { border: 2px solid var(--gold); }

/* Kartu bank: sogan parang & hitam beludru */
.gift-bca { --gift-bg: var(--parang), linear-gradient(135deg, #5a2c18, #3d2314 55%, #24140b); --gift-color: #e7c766; border: 1px solid var(--gold); }
.gift-mandiri { --gift-bg: radial-gradient(circle at 80% 20%, rgba(197, 155, 39, .25), transparent 45%), linear-gradient(135deg, #2a2a2a, #121212 60%, #000); --gift-color: #e7c766; border: 1px solid var(--gold); }
.gift-bank { font-family: 'Cinzel Decorative', serif; font-style: normal; }
.form-x .form-select option { background: #1d1410; }
.stats div { background: rgba(197, 155, 39, .06); }
.wish-avatar { background: var(--terracotta); color: var(--gold-light); }

/* Penutup */
.closing { background: radial-gradient(ellipse at bottom, #3d2314, #121212 70%); }
.closing-inner { position: relative; max-width: 620px; margin-inline: auto; padding: 3rem 1.5rem; background: rgba(29, 20, 16, .6); border: 1px solid var(--line); outline: 1px solid rgba(197, 155, 39, .2); outline-offset: -12px; border-radius: 8px; }
.closing-title { font-family: 'Cinzel Decorative', serif; font-weight: 700; color: var(--gold-light); font-size: clamp(2.2rem, 10vw, 3.2rem); }
.closing-salam { font-family: 'Inter', sans-serif; letter-spacing: .35em; text-transform: uppercase; font-style: normal; font-size: .75rem; color: #d98a5f; }
.closing-names { font-size: 1.7rem; }
.closing-families strong { color: #fff; }
.music-btn { border: 2px solid #121212; box-shadow: 0 0 0 2px var(--gold), 0 0 24px rgba(197, 155, 39, .45); }
