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

/* ======================================================================
   TEMA: SWEET SEVENTEEN
   ====================================================================== */

:root {
  --bg: #faf5ff; --surface: #fff; --text: #3b2a52; --heading: #6d28d9; --muted: #7c6f94;
  --accent: #a855f7; --pink: #f472b6; --line: rgba(168, 85, 247, .2);
  --font-head: 'Playball', cursive; --font-script: 'Playball', cursive; --font-body: 'Poppins', sans-serif;
  --btn-bg: linear-gradient(135deg, #f9a8d4, #c084fc 60%, #a855f7); --btn-color: #fff; --btn-shadow: 0 10px 24px -10px rgba(168, 85, 247, .7);
  --input-bg: #fff; --radius: 26px; --radius-sm: 16px; --photo-radius: 50%; --toast-bg: #a855f7;
  --glitter: linear-gradient(135deg, #f0abfc, #c4b5fd 30%, #fbcfe8 55%, #e9d5ff 80%, #f9a8d4);
}
body { font-weight: 300; background: linear-gradient(180deg, #faf5ff, #fdf2f8); }
h1, h2, h3 { font-weight: 400; }
.sec-title { color: var(--heading); font-size: clamp(2.8rem, 11vw, 3.8rem); }
.sec-eyebrow, .hero-eyebrow, .cover-label { color: var(--pink); letter-spacing: .3em; }
.feed-card h3, .cd-num, .stats strong { font-family: 'Poppins', sans-serif; font-weight: 600; }
.cd-num { color: var(--accent); font-size: clamp(1.7rem, 7vw, 2.3rem); }
.stats strong { color: var(--accent); font-size: 1.5rem; }
.btn-ghost { color: var(--accent); }
.age {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%); z-index: -1; pointer-events: none;
  font-family: 'Playball', cursive; font-size: min(78vw, 420px); line-height: 1;
  background: var(--glitter); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .35;
}
.butterfly { position: absolute; width: 70px; pointer-events: none; animation: flutter 3s ease-in-out infinite; }
.bf-1 { top: 12%; right: 10%; }
.bf-2 { bottom: 14%; left: 8%; width: 52px; animation-delay: -1.5s; }
@keyframes flutter { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-14px) rotate(6deg) scaleX(.85); } }
.sparkle { position: absolute; width: 20px; color: #c084fc; pointer-events: none; animation: twinkle 2s ease-in-out infinite; }
.sp-1 { top: 20%; left: 14%; } .sp-2 { top: 32%; right: 20%; width: 14px; animation-delay: -.6s; color: #f472b6; }
.sp-3 { bottom: 26%; right: 14%; animation-delay: -1.2s; } .sp-4 { bottom: 34%; left: 22%; width: 12px; animation-delay: -.3s; color: #f472b6; }
@keyframes twinkle { 0%, 100% { transform: scale(.6) rotate(0); opacity: .4; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }

.cover { background: radial-gradient(ellipse at top, #f3e8ff, #faf5ff 55%, #fdf2f8); }
.cover-photo { display: none; }
.cover-figure { width: min(180px, 50vw); aspect-ratio: 1; border-radius: 50%; padding: 5px; background: var(--glitter); }
.cover-figure img { border-radius: 50%; }
.cover-names, .hero-names, .closing-names { color: var(--heading); }
.cover-names { font-size: clamp(3.6rem, 17vw, 5rem); }
.cover-guest { background: rgba(255, 255, 255, .8); border-radius: 20px; box-shadow: 0 12px 30px -20px rgba(168, 85, 247, .6); }
.hero-overlay { background: linear-gradient(180deg, rgba(250, 245, 255, .65), rgba(250, 245, 255, .9) 60%, #faf5ff); }
.hero-names { font-size: clamp(4.4rem, 20vw, 7rem); }
.card-x { border: 1px solid #f3e8ff; box-shadow: 0 22px 45px -28px rgba(168, 85, 247, .55); }
.event-icon { background: #f3e8ff; border: 0; }
.cd-item { background: #fff; border-color: #e9d5ff; border-radius: 20px; }
.person-photo { width: min(200px, 58vw); aspect-ratio: 1; padding: 5px; background: var(--glitter); }
.person-photo img { border-radius: 50%; }
.g-item { border-radius: 22px; border: 4px solid #fff; box-shadow: 0 14px 30px -18px rgba(168, 85, 247, .6); }
.sec-event { background: linear-gradient(180deg, #f3e8ff, #fce7f3); }
.gift-card { border-radius: 24px; }
.gift-bca { --gift-bg: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .7), transparent 40%), var(--glitter); --gift-color: #3b2a52; }
.gift-mandiri { --gift-bg: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .35), transparent 40%), linear-gradient(135deg, #a855f7, #7c3aed); --gift-color: #fff; }
.gift-bank { font-family: 'Playball', cursive; font-style: normal; font-weight: 400; font-size: 1.9rem; }
.closing { background: linear-gradient(180deg, #faf5ff, #fce7f3); }
.closing-title { color: var(--heading); font-size: clamp(3.2rem, 13vw, 4.2rem); }