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

/* ======================================================================
   TEMA: LITTLE HERO
   ====================================================================== */

:root {
  --bg: #fef9c3; --surface: #fff; --text: #111827; --heading: #1d4ed8; --muted: #4b5563;
  --accent: #1d4ed8; --yellow: #facc15; --red: #ef4444; --line: #111827;
  --font-head: 'Bangers', cursive; --font-script: 'Bangers', cursive; --font-body: 'Nunito', sans-serif;
  --btn-bg: #ef4444; --btn-color: #fff; --btn-radius: 12px; --input-bg: #fff; --radius: 16px; --radius-sm: 12px;
  --photo-radius: 18px; --toast-bg: #1d4ed8; --halftone: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2714%27%20height%3D%2714%27%3E%3Ccircle%20cx%3D%277%27%20cy%3D%277%27%20r%3D%272.2%27%20fill%3D%27%231e3a8a%27%20fill-opacity%3D%27.18%27/%3E%3C/svg%3E");
}
body { background-color: var(--bg); background-image: var(--halftone); font-weight: 600; }
h1, h2, h3 { font-weight: 400; letter-spacing: .04em; }
.sec-title { font-size: clamp(2.6rem, 11vw, 3.6rem); color: #fff; -webkit-text-stroke: 2px #111; text-shadow: 4px 4px 0 #111; letter-spacing: .05em; }
.sec-eyebrow, .hero-eyebrow, .cover-label { display: inline-block; color: #111; background: var(--yellow); border: 3px solid #111; padding: .2rem .8rem; transform: rotate(-2deg); letter-spacing: .15em; font-weight: 900; }
.person-name, .closing-names, .couple-amp { color: var(--red); -webkit-text-stroke: 1px #111; letter-spacing: .05em; }
/* Panel komik: border tebal + bayangan offset */
.card-x, .cd-item, .gift-card, .g-item, .person-photo, .video-box, .quote-box, .cover-guest { border: 3px solid #111; box-shadow: 6px 6px 0 #111; }
.btn-main, .btn-ghost { border: 3px solid #111; box-shadow: 4px 4px 0 #111; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.btn-main:hover, .btn-ghost:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #111; }
.btn-ghost { background: var(--yellow); color: #111; }
.burst { position: absolute; width: 130px; color: var(--yellow); pointer-events: none; }
.burst-tr { top: 2%; right: -30px; transform: rotate(12deg); }
.burst-bl { bottom: 4%; left: -30px; color: #fb923c; }
.burst-text { position: absolute; font-family: 'Bangers', cursive; font-size: 1.8rem; color: #ef4444; -webkit-text-stroke: 1px #111; pointer-events: none; }
.burst-text.tr { top: calc(2% + 46px); right: 8px; transform: rotate(12deg); }
.burst-text.bl { bottom: calc(4% + 46px); left: 14px; transform: rotate(-8deg); color: #1d4ed8; }
.shield { display: block; width: 76px; margin: 0 auto 1rem; filter: drop-shadow(4px 4px 0 #111); }

.cover { background: #1d4ed8 var(--halftone); color: #fff; }
.cover::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-conic-gradient(from 0deg at 50% 45%, rgba(255,255,255,.08) 0 10deg, transparent 10deg 20deg); }
.cover-photo { display: none; }
.cover-figure { width: min(190px, 52vw); aspect-ratio: 1; border-radius: 50%; border: 5px solid #111; box-shadow: 6px 6px 0 #111; background: var(--yellow); }
.cover-names, .hero-names { color: var(--yellow); -webkit-text-stroke: 2px #111; text-shadow: 5px 5px 0 #111; letter-spacing: .06em; }
.cover-names { font-size: clamp(4rem, 20vw, 6rem); }
.cover-date { font-weight: 900; letter-spacing: .3em; }
.cover-guest { background: #fff; color: #111; border-radius: 14px; }
.hero { background: #1d4ed8; }
.hero-bg { opacity: .35; }
.hero-overlay { background: var(--halftone), linear-gradient(180deg, rgba(29, 78, 216, .55), rgba(29, 78, 216, .9)); }
.hero-names { font-size: clamp(5rem, 26vw, 8rem); }
.hero-date { color: #fff; font-weight: 900; }
.scroll-hint { color: var(--yellow); }
.event-icon { border: 3px solid #111; background: var(--yellow); color: #111; }
.event-card h3 { font-size: 2.2rem; color: var(--accent); }
.cd-num { font-family: 'Bangers', cursive; color: var(--red); font-size: 2.8rem; }
.quote-box { position: relative; background: #fff; border-radius: 22px; padding: 1.75rem 1.25rem; }
.quote-box::after { content: ""; position: absolute; bottom: -22px; left: 18%; width: 30px; height: 30px; background: #fff; border-right: 3px solid #111; border-bottom: 3px solid #111; transform: skewX(30deg) rotate(30deg); }
.arabic { color: #111; }
.sec-event { background: #ef4444 var(--halftone); }
.sec-event .cd-label { color: #111; }
.gift-bca { --gift-bg: var(--halftone), linear-gradient(135deg, #3b82f6, #1d4ed8); --gift-color: #fff; }
.gift-mandiri { --gift-bg: var(--halftone), linear-gradient(135deg, #fde047, #facc15); --gift-color: #111; }
.gift-bank { font-family: 'Bangers', cursive; font-style: normal; font-size: 1.8rem; letter-spacing: .06em; }
.gift-card .btn-copy { background: #fff; color: #111; border: 2px solid #111; }
.attend label, .stats div { border: 2px solid #111; }
.wish-avatar { border: 2px solid #111; }
.closing { background: #1d4ed8 var(--halftone); color: #fff; }
.closing-title { color: var(--yellow); -webkit-text-stroke: 2px #111; text-shadow: 4px 4px 0 #111; font-size: clamp(3rem, 14vw, 4.5rem); }
.closing-names { color: #fff; }
.music-btn { border: 3px solid #111; box-shadow: 4px 4px 0 #111; }
/* Perisai kecil pemisah judul section (sebelumnya style="width:46px") */
.shield-sm { width: 46px; }