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

/* ======================================================================
   TEMA: ISLAMIC SYAR'I & ARABESQUE
   ====================================================================== */

:root {
  --bg: #fcfbf7; --surface: #fff; --text: #1f2937; --heading: #064e3b; --muted: #6b7280;
  --accent: #064e3b; --accent-2: #eab308; --gold: #ca8a04; --cream-gold: #fde68a; --line: rgba(6, 78, 59, .16);
  --font-head: 'Amiri', serif; --font-script: 'Amiri', serif; --font-body: 'Nunito', sans-serif;
  --btn-bg: #064e3b; --btn-color: #fefce8; --btn-shadow: 0 10px 24px -12px rgba(6, 78, 59, .75);
  --input-bg: #fff; --radius: 14px; --photo-radius: 999px 999px 0 0; --toast-bg: #064e3b;
  --pattern-gold: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2764%27%20height%3D%2764%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23eab308%27%20stroke-opacity%3D%270.32%27%20stroke-width%3D%271%27%3E%3Crect%20x%3D%2717%27%20y%3D%2717%27%20width%3D%2730%27%20height%3D%2730%27/%3E%3Crect%20x%3D%2717%27%20y%3D%2717%27%20width%3D%2730%27%20height%3D%2730%27%20transform%3D%27rotate%2845%2032%2032%29%27/%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%277%27/%3E%3Cpath%20d%3D%27M0%200l10%2010M64%200L54%2010M0%2064l10-10M64%2064L54%2054%27/%3E%3C/g%3E%3C/svg%3E");
  --pattern-green: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2764%27%20height%3D%2764%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23064e3b%27%20stroke-opacity%3D%270.06%27%20stroke-width%3D%271%27%3E%3Crect%20x%3D%2717%27%20y%3D%2717%27%20width%3D%2730%27%20height%3D%2730%27/%3E%3Crect%20x%3D%2717%27%20y%3D%2717%27%20width%3D%2730%27%20height%3D%2730%27%20transform%3D%27rotate%2845%2032%2032%29%27/%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%277%27/%3E%3Cpath%20d%3D%27M0%200l10%2010M64%200L54%2010M0%2064l10-10M64%2064L54%2054%27/%3E%3C/g%3E%3C/svg%3E");
}
body { background-color: var(--bg); background-image: var(--pattern-green); }
h1, h2, h3 { font-weight: 700; }
.sec-title { color: var(--accent); }
.sec-eyebrow { color: var(--gold); }
.person-name { font-weight: 700; font-size: clamp(2.4rem, 9vw, 3rem); }
.couple-amp { color: var(--gold); }
.basmalah { width: min(440px, 92%); margin: 0 auto 2.25rem; color: var(--gold); }
.basmalah svg { width: 100%; height: auto; display: block; }
.cover .basmalah { width: min(260px, 74%); margin-bottom: 1.25rem; color: var(--cream-gold); }

/* Panel hijau zamrud bermotif geometris */
.cover, .sec-event, .closing { background-color: #064e3b; background-image: var(--pattern-gold); color: #ecfdf5; }
.cover .btn-main, .sec-event .btn-main { background: linear-gradient(135deg, #fde68a, #eab308); color: #064e3b; }

/* Cover: bingkai lengkung mihrab */
.cover-photo { display: none; }
.cover-overlay { background: radial-gradient(ellipse at center, rgba(6, 78, 59, .15), rgba(2, 44, 34, .85)); }
.cover-inner { padding: 3rem 1.5rem 2.25rem; border: 1px solid rgba(234, 179, 8, .5); border-radius: 999px 999px 22px 22px; background: rgba(2, 44, 34, .55); }
.cover-inner::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(234, 179, 8, .22); border-radius: inherit; pointer-events: none; }
.cover-figure { width: min(150px, 42vw); aspect-ratio: 3 / 4; border-radius: 999px 999px 0 0; border: 3px solid var(--accent-2); padding: 5px; }
.cover-figure img { border-radius: inherit; }
.cover-names { color: var(--cream-gold); font-weight: 700; }
.cover-label { color: var(--cream-gold); }
.cover-guest { border-top: 1px solid rgba(234, 179, 8, .4); border-bottom: 1px solid rgba(234, 179, 8, .4); }

/* Hero */
.hero-overlay { background: linear-gradient(180deg, rgba(6, 78, 59, .9), rgba(2, 44, 34, .95)); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--pattern-gold); opacity: .6; }
.hero-inner { color: #ecfdf5; width: min(100%, 440px); padding: 4.5rem 1.75rem 3rem; border: 1px solid rgba(234, 179, 8, .55); border-radius: 999px 999px 18px 18px; background: rgba(2, 44, 34, .45); }
.hero-names { color: var(--cream-gold); font-weight: 700; }
.hero-eyebrow { color: var(--accent-2); }
.hero .divider, .closing .divider { color: var(--accent-2); }
.star-bg { position: absolute; top: 50%; left: 50%; width: 560px; height: 560px; margin: -280px 0 0 -280px; color: rgba(234, 179, 8, .14); z-index: -1; animation: spin 140s linear infinite; }
.scroll-hint { color: var(--accent-2); }

/* Monogram mempelai (tanpa foto, sesuai gaya syar'i) */
.person-photo.monogram { display: grid; place-items: center; width: min(190px, 54vw); background: #064e3b var(--pattern-gold); border: 3px solid var(--accent-2); outline: 1px solid var(--accent-2); outline-offset: 5px; }
.monogram span { font-family: 'Amiri', serif; font-size: 5.5rem; font-weight: 700; color: var(--cream-gold); line-height: 1; }

/* Kartu */
.card-x { border-top: 3px solid var(--accent-2); box-shadow: 0 18px 40px -26px rgba(6, 78, 59, .55); }
.arabic { color: var(--accent); font-size: clamp(1.5rem, 6vw, 2.1rem); }
.quote-box { background: #fff; border: 1px solid var(--line); border-radius: 999px 999px 18px 18px; padding: 3.5rem 1.5rem 2rem; box-shadow: 0 18px 40px -28px rgba(6, 78, 59, .5); }

/* Section acara (zamrud) */
.sec-event .sec-title, .sec-event .sec-head .divider { color: var(--cream-gold); }
.sec-event .sec-eyebrow { color: var(--accent-2); }
.sec-event .cd-item { background: rgba(255, 255, 255, .06); border-color: rgba(234, 179, 8, .5); }
.sec-event .cd-num { color: var(--cream-gold); }
.sec-event .cd-label { color: #a7f3d0; }
.sec-event .card-x { background: #fcfbf7; color: var(--text); }

/* Galeri berbentuk jendela lengkung */
.g-item { border-radius: 999px 999px 10px 10px; border: 2px solid var(--accent-2); padding: 4px; background: #fff; }
.g-item img { border-radius: inherit; }
.video-box { border: 3px solid var(--accent-2); }

/* Kartu bank */
.gift-bca { --gift-bg: var(--pattern-gold), linear-gradient(135deg, #065f46, #064e3b 60%, #022c22); --gift-color: #fef9c3; border: 1px solid var(--accent-2); }
.gift-mandiri { --gift-bg: var(--pattern-green), linear-gradient(135deg, #fefce8, #fde68a 60%, #eab308); --gift-color: #064e3b; }

.wish-avatar { background: #064e3b; color: var(--cream-gold); }

/* Penutup */
.closing-title, .closing-names { color: var(--cream-gold); font-weight: 700; }
.closing-families strong { color: #fff; }
.music-btn { background: #064e3b; color: var(--cream-gold); border: 2px solid var(--accent-2); }