/* ════════════════════════════════════════════════════════════════
   GACHA CINTA — mesin kapsul pastel yang menggemaskan
   ════════════════════════════════════════════════════════════════ */
:root {
    --ink: #3b2b4f;
    --ink-s: #6a5a80;
    --muted: #8a7c9c;
    --cream: #fff8f1;
    --paper: #fffdf9;
    --pink: #ff7ba5;
    --pink-d: #e85d8a;
    --pink-l: #ffe3ec;
    --mint: #7fd8be;
    --mint-d: #4fbf9f;
    --mint-l: #dcf6ee;
    --butter: #ffd66b;
    --butter-l: #fff1c4;
    --lilac: #b8a6ff;
    --lilac-l: #ece6ff;
    --sky: #8ed1fc;
    --peach: #ff9f7a;
    --col: 480px;
    --line: 3px;
    --pop: 0 4px 0 0 var(--ink);
    --f-d: 'Fredoka', 'Nunito', system-ui, sans-serif;
    --f-b: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    font: 400 16px/1.6 var(--f-b);
    color: var(--ink);
    background-color: var(--pink-l);
    background-image:
        radial-gradient(circle at 25% 25%, rgba(255, 255, 255, .85) 3px, transparent 3.5px),
        radial-gradient(circle at 75% 75%, rgba(255, 255, 255, .85) 3px, transparent 3.5px);
    background-size: 28px 28px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
body.no-scroll { overflow: hidden; height: 100vh; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
a { color: inherit; }
.ico { width: 1em; height: 1em; display: inline-block; vertical-align: -.12em; fill: currentColor; }
svg.cap { display: block; overflow: visible; }

/* ════════════════════════════════════════════════════════════════
   COVER
   ════════════════════════════════════════════════════════════════ */
.intro {
    position: fixed;
    inset: 0;
    z-index: 3000;
    overflow: hidden;
    background:
        radial-gradient(120% 70% at 50% 0%, #fff 0%, rgba(255, 255, 255, 0) 60%),
        linear-gradient(180deg, #ffe9f1 0%, #fff3df 55%, #e5f8f1 100%);
}
.intro::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 123, 165, .16) 2.5px, transparent 3px);
    background-size: 26px 26px;
}
.intro-bg { position: absolute; inset: 0; pointer-events: none; }
.ib-cap { position: absolute; width: 34px; animation: floatCap 7s ease-in-out infinite; }
.ib-cap.c1 { left: 7%; top: 12%; width: 30px; }
.ib-cap.c2 { right: 8%; top: 18%; width: 40px; animation-delay: -2s; }
.ib-cap.c3 { left: 4%; top: 52%; width: 26px; animation-delay: -4s; }
.ib-cap.c4 { right: 5%; top: 58%; width: 32px; animation-delay: -1s; }
.ib-cap.c5 { left: 12%; bottom: 8%; width: 28px; animation-delay: -3s; }
.ib-cap.c6 { right: 14%; bottom: 12%; width: 24px; animation-delay: -5s; }
@keyframes floatCap {
    0%, 100% { transform: translateY(0) rotate(-12deg); }
    50% { transform: translateY(-14px) rotate(14deg); }
}
.ib-sp { position: absolute; width: 16px; height: 16px; color: var(--butter); animation: twinkle 2.4s ease-in-out infinite; }
.ib-sp.s1 { left: 20%; top: 26%; }
.ib-sp.s2 { right: 22%; top: 9%; width: 12px; animation-delay: -.8s; color: var(--pink); }
.ib-sp.s3 { left: 15%; top: 70%; width: 12px; animation-delay: -1.4s; color: var(--mint); }
.ib-sp.s4 { right: 18%; top: 44%; animation-delay: -.4s; color: var(--lilac); }
@keyframes twinkle { 0%, 100% { transform: scale(.4) rotate(0); opacity: .3; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }

.intro-inner {
    position: relative;
    height: 100%;
    max-width: var(--col);
    margin: 0 auto;
    padding: max(18px, env(safe-area-inset-top)) 20px max(18px, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    gap: 10px;
    transition: opacity .5s ease, transform .5s ease, filter .5s ease;
}
.intro-top { text-align: center; animation: dropIn .8s var(--ease-pop) both; }
.it-kicker {
    margin: 0 0 4px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 14px;
    border-radius: 99px;
    background: #fff;
    border: 2px solid var(--ink);
    font: 600 12px/1.4 var(--f-d);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.it-kicker .ico { color: var(--pink); }
.it-names {
    margin: 6px 0 0;
    font: 700 clamp(30px, 9vw, 42px)/1.05 var(--f-d);
    color: var(--pink-d);
    -webkit-text-stroke: 1.5px var(--ink);
    paint-order: stroke fill;
    text-shadow: 0 3px 0 var(--ink);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0 10px;
    overflow-wrap: anywhere;
}
.it-names b { color: var(--butter); font-size: .8em; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-30px) scale(.9); } to { opacity: 1; transform: none; } }

/* ── Mesin ── */
.machine-wrap {
    position: relative;
    width: min(66vw, calc(44vh * .64), 270px);
    flex-shrink: 0;
    animation: machineIn .9s .15s var(--ease-pop) both;
}
@keyframes machineIn { from { opacity: 0; transform: scale(.6) translateY(40px); } to { opacity: 1; transform: none; } }
.machine { width: 100%; height: auto; display: block; overflow: visible; animation: bob 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-.6deg); } }
.machine-shadow {
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: -8px;
    height: 14px;
    border-radius: 50%;
    background: rgba(59, 43, 79, .16);
    filter: blur(2px);
    animation: shadowPulse 3.2s ease-in-out infinite;
}
@keyframes shadowPulse { 50% { transform: scaleX(.92); opacity: .7; } }
.m-label { font: 700 17px var(--f-d); fill: var(--ink); letter-spacing: .06em; }
.m-tiny { font: 700 8px var(--f-d); fill: var(--ink); letter-spacing: .06em; }
.m-tiny.dark { font-size: 7.5px; }
.m-bow { transform-origin: 150px 14px; animation: bowWiggle 2.6s ease-in-out infinite; }
@keyframes bowWiggle { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.dc { filter: saturate(1.15); transform-box: fill-box; transform-origin: center; animation: jiggle 2.8s ease-in-out infinite; animation-delay: var(--d); }
@keyframes jiggle {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    50% { transform: translate(calc(var(--j) * 1px), -1.5px) rotate(calc(var(--j) * 6deg)); }
}
.m-knob { transform-box: view-box; transform-origin: 124px 352px; cursor: pointer; transition: transform .2s; }
.m-knob:hover { transform: rotate(-20deg); }
.m-coin { opacity: 0; transform-box: view-box; }
.m-flap { transform-box: fill-box; transform-origin: 50% 0; }

.drop-cap {
    position: absolute;
    left: 50%;
    top: 87%;
    width: 15%;
    margin-left: -7.5%;
    opacity: 0;
    z-index: 2;
    pointer-events: none;
}

/* ── Kartu tamu ── */
.guest-card {
    position: relative;
    width: 100%;
    max-width: 340px;
    padding: 16px 18px 14px;
    text-align: center;
    background: #fff;
    border: var(--line) solid var(--ink);
    border-radius: 22px;
    box-shadow: 0 6px 0 0 var(--ink);
    animation: dropIn .8s .35s var(--ease-pop) both;
}
.gc-tag {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%) rotate(-3deg);
    padding: 2px 12px;
    border-radius: 99px;
    background: var(--butter);
    border: 2px solid var(--ink);
    font: 700 11px/1.5 var(--f-d);
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.gc-label { margin: 4px 0 0; font-size: 12px; color: var(--muted); font-weight: 600; }
.gc-name { margin: 0 0 10px; font: 700 20px/1.25 var(--f-d); color: var(--ink); overflow-wrap: anywhere; }
.spin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 200px;
    padding: 12px 22px;
    border: var(--line) solid var(--ink);
    border-radius: 99px;
    background: var(--pink);
    color: #fff;
    font: 700 18px/1 var(--f-d);
    letter-spacing: .02em;
    cursor: pointer;
    box-shadow: 0 5px 0 0 var(--ink);
    transition: transform .12s, box-shadow .12s;
    animation: btnPulse 1.8s ease-in-out infinite;
    -webkit-tap-highlight-color: transparent;
}
.spin-btn .ico { width: 22px; height: 22px; animation: coinFlip 1.8s ease-in-out infinite; }
.spin-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 0 var(--ink); }
@keyframes btnPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes coinFlip { 0%, 60%, 100% { transform: rotateY(0); } 80% { transform: rotateY(180deg); } }
.gc-hint { margin: 10px 0 0; font-size: 12px; color: var(--muted); }

/* ── Urutan membuka ── */
.intro.s-coin .spin-btn { animation: none; transform: translateY(4px); box-shadow: 0 1px 0 0 var(--ink); pointer-events: none; }
.intro.s-coin .m-coin { animation: coinIn .5s cubic-bezier(.5, 0, .7, .4) both; }
@keyframes coinIn {
    0% { opacity: 0; transform: translate(0, -40px) rotate(0); }
    25% { opacity: 1; }
    80% { opacity: 1; transform: translate(0, 44px) scaleX(.6); }
    100% { opacity: 0; transform: translate(0, 54px) scaleX(.2); }
}
.intro.s-spin .m-knob { animation: knobSpin .95s cubic-bezier(.5, 0, .3, 1) both; }
@keyframes knobSpin { to { transform: rotate(360deg); } }
.intro.s-spin .machine { animation: shake .95s ease-in-out both; }
@keyframes shake {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(-2.5deg) translateX(-3px); }
    30% { transform: rotate(2.5deg) translateX(3px); }
    45% { transform: rotate(-2deg) translateX(-2px); }
    60% { transform: rotate(2deg) translateX(2px); }
    80% { transform: rotate(-1deg); }
}
.intro.s-spin .dc { animation: shuffle .32s ease-in-out 3; animation-delay: calc(var(--d) * .3); }
@keyframes shuffle {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    33% { transform: translate(calc(var(--j) * 5px), -9px) rotate(calc(var(--j) * 70deg)); }
    66% { transform: translate(calc(var(--j) * -4px), -3px) rotate(calc(var(--j) * -40deg)); }
}
.intro.s-drop .m-flap { animation: flap .6s ease-out both; }
@keyframes flap { 0% { transform: rotateX(0); } 40% { transform: rotateX(70deg); } 100% { transform: rotateX(0); } }
.intro.s-drop .drop-cap { animation: capOut .8s cubic-bezier(.3, 0, .5, 1) both; }
@keyframes capOut {
    0% { opacity: 0; transform: translateY(-10px) scale(.6); }
    20% { opacity: 1; }
    55% { opacity: 1; transform: translateY(50px) scale(1) rotate(160deg); }
    75% { transform: translateY(36px) scale(1) rotate(220deg); }
    100% { opacity: 1; transform: translateY(50px) scale(1) rotate(260deg); }
}
.intro.s-prize .intro-inner { opacity: .2; transform: scale(.94); filter: blur(3px); }

/* ── Panggung hadiah ── */
.prize-stage {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    visibility: hidden;
}
.intro.s-prize .prize-stage { visibility: visible; }
.ps-rays {
    position: absolute;
    left: 50%;
    top: 46%;
    width: 170vmax;
    height: 170vmax;
    margin: -85vmax 0 0 -85vmax;
    background: repeating-conic-gradient(from 0deg, rgba(255, 214, 107, .55) 0 9deg, rgba(255, 255, 255, 0) 9deg 22.5deg);
    -webkit-mask: radial-gradient(circle, #000 0, #000 12%, transparent 46%);
    mask: radial-gradient(circle, #000 0, #000 12%, transparent 46%);
    opacity: 0;
    transform: scale(.3);
}
.intro.s-crack .ps-rays { animation: raysIn .7s ease-out both, spin 14s linear infinite; }
@keyframes raysIn { to { opacity: 1; transform: scale(1); } }
@keyframes spin { to { rotate: 360deg; } }
.ps-cap {
    position: absolute;
    left: 50%;
    top: 46%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    opacity: 0;
}
.ps-cap > span, .stc-top, .stc-bot { position: absolute; inset: 0; }
.ps-cap .half, .st-cap .half { width: 100%; height: 100%; }
.psc-top .half, .stc-top .half { clip-path: inset(-10% -10% 50% -10%); }
.psc-bot .half, .stc-bot .half { clip-path: inset(50% -10% -10% -10%); }
.intro.s-prize .ps-cap { animation: capRise .65s var(--ease-pop) both, wobble .5s .65s ease-in-out 2; }
@keyframes capRise { from { opacity: 0; transform: translateY(45vh) scale(.25) rotate(-200deg); } to { opacity: 1; transform: none; } }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg) scale(1.04); } 75% { transform: rotate(10deg) scale(1.04); } }
.intro.s-crack .psc-top { animation: topFly .9s cubic-bezier(.2, .6, .3, 1) both; }
.intro.s-crack .psc-bot { animation: botFall .9s cubic-bezier(.4, 0, .8, .6) both; }
@keyframes topFly { to { transform: translate(-90px, -46vh) rotate(-260deg); opacity: 0; } }
@keyframes botFall { to { transform: translate(70px, 52vh) rotate(200deg); opacity: 0; } }

.prize-card {
    position: relative;
    width: min(300px, 82vw);
    padding: 22px 20px 20px;
    text-align: center;
    border-radius: 22px;
    border: var(--line) solid var(--ink);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .0) 30%, rgba(255, 255, 255, .7) 45%, rgba(255, 255, 255, 0) 60%) 0 0 / 300% 100% no-repeat,
        linear-gradient(160deg, #fff4fa 0%, #fff8e4 50%, #eafaf4 100%);
    box-shadow: 0 7px 0 0 var(--ink), 0 30px 60px -20px rgba(59, 43, 79, .45);
    opacity: 0;
    transform: scale(.2) rotate(-12deg);
}
.intro.s-crack .prize-card { animation: cardPop .7s .15s var(--ease-pop) both, cardShine 1.6s .8s ease-in-out both; }
@keyframes cardPop { to { opacity: 1; transform: none; } }
@keyframes cardShine { from { background-position: 100% 0, 0 0; } to { background-position: -100% 0, 0 0; } }
.pc-rank {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%) rotate(-4deg);
    padding: 2px 16px;
    border-radius: 12px;
    border: var(--line) solid var(--ink);
    background: linear-gradient(90deg, var(--pink), var(--butter), var(--mint), var(--sky), var(--lilac));
    font: 700 20px/1.3 var(--f-d);
    color: #fff;
    -webkit-text-stroke: 1px var(--ink);
    paint-order: stroke fill;
    letter-spacing: .08em;
}
.pc-stars { display: block; margin-top: 6px; color: var(--butter); font-size: 20px; letter-spacing: 3px; -webkit-text-stroke: 1px var(--ink); }
.pc-got { margin: 4px 0 0; font-size: 13px; color: var(--muted); font-weight: 700; }
.pc-title { margin: 2px 0 6px; font: 600 15px/1.3 var(--f-d); letter-spacing: .1em; text-transform: uppercase; }
.pc-names { margin: 0; font: 700 30px/1.15 var(--f-d); color: var(--pink-d); overflow-wrap: anywhere; }
.pc-names b { color: var(--mint-d); }
.pc-date { margin: 8px 0 0; display: inline-block; padding: 3px 12px; border-radius: 99px; background: var(--ink); color: #fff; font: 600 13px/1.5 var(--f-d); }
.intro.s-out { animation: introOut .7s ease-in both; }
@keyframes introOut { to { opacity: 0; transform: scale(1.12); } }

/* ════════════════════════════════════════════════════════════════
   MUSIK, FX, TOAST
   ════════════════════════════════════════════════════════════════ */
.music-toggle-btn {
    position: fixed;
    top: 8px;
    right: max(12px, calc(50vw - var(--col) / 2 + 12px));
    z-index: 1002;
    width: 40px;
    height: 40px;
    padding: 0;
    border: var(--line) solid var(--ink);
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    background: var(--butter);
    color: var(--ink);
    box-shadow: 0 3px 0 0 var(--ink);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
    -webkit-tap-highlight-color: transparent;
}
body.opened .music-toggle-btn { opacity: 1; pointer-events: auto; }
.music-toggle-btn svg { width: 18px; height: 18px; }
.music-toggle-btn.playing { animation: spinSlow 4s linear infinite; }
@keyframes spinSlow { to { transform: rotate(360deg); } }

.fx-layer { position: fixed; inset: 0; z-index: 5000; pointer-events: none; overflow: hidden; }
.cf {
    position: absolute;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    animation: cfFly 1.5s cubic-bezier(.15, .7, .35, 1) both;
}
.cf svg { width: 100%; height: 100%; fill: currentColor; }
.cf-heart, .cf-star { width: 16px; height: 16px; }
.cf-dot { border-radius: 50%; background: currentColor; width: 10px; height: 10px; }
.cf-bar { width: 6px; height: 14px; border-radius: 3px; background: currentColor; }
@keyframes cfFly {
    0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(.4); }
    60% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--tx), calc(var(--ty) + 120px)) rotate(var(--rot)) scale(1); }
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 6000;
    max-width: min(90vw, 380px);
    padding: 10px 18px;
    border-radius: 99px;
    border: var(--line) solid var(--ink);
    background: #fff;
    box-shadow: 0 4px 0 0 var(--ink);
    font: 600 14px/1.4 var(--f-d);
    text-align: center;
    transform: translate(-50%, 140%);
    opacity: 0;
    transition: transform .35s var(--ease-pop), opacity .25s;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }
body.has-qr .toast { bottom: 90px; }

/* kapsul melayang di latar */
.bg-float { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.bf { position: absolute; width: 38px; opacity: .55; animation: floatCap 9s ease-in-out infinite; }
.bf.b1 { left: 3%; top: 20%; }
.bf.b2 { right: 4%; top: 42%; width: 30px; animation-delay: -3s; }
.bf.b3 { left: 5%; top: 72%; width: 28px; animation-delay: -5s; }
.bf.b4 { right: 6%; top: 85%; width: 34px; animation-delay: -7s; }
@media (max-width: 560px) { .bg-float { display: none; } }

/* ════════════════════════════════════════════════════════════════
   WORLD
   ════════════════════════════════════════════════════════════════ */
.world {
    position: relative;
    z-index: 1;
    max-width: var(--col);
    min-height: 100vh;
    margin: 0 auto;
    background-color: var(--paper);
    background-image: radial-gradient(circle, rgba(184, 166, 255, .16) 1.6px, transparent 2px);
    background-size: 22px 22px;
    box-shadow: 0 0 0 var(--line) var(--ink), 0 30px 80px -30px rgba(59, 43, 79, .4);
    overflow: clip;
}
body.has-qr .world { padding-bottom: 96px; }

.tracker {
    position: sticky;
    top: 0;
    z-index: 50;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 62px 0 14px;
    background: rgba(255, 253, 249, .92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: var(--line) solid var(--ink);
}
.tr-label { font: 700 12px/1 var(--f-d); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-s); }
.tr-dots { display: flex; gap: 5px; flex: 1; justify-content: center; }
.tr-dots i {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px dashed #cfc5dc;
    background: #fff;
    transition: transform .3s;
}
.tr-dots i.on {
    border: 2px solid var(--ink);
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .85) 0 2.5px, transparent 3px),
        linear-gradient(180deg, var(--ct) 0 50%, var(--ink) 50% calc(50% + 1px), var(--cream) calc(50% + 1px));
    animation: dotPop .5s var(--ease-pop);
}
@keyframes dotPop { 0% { transform: scale(.3) rotate(-90deg); } 100% { transform: scale(1) rotate(0); } }
.tr-count {
    min-width: 44px;
    padding: 2px 8px;
    border-radius: 99px;
    background: var(--ink);
    color: #fff;
    font: 600 13px/1.5 var(--f-d);
    text-align: center;
}
.tr-count.bump { animation: bump .4s var(--ease-pop); }
@keyframes bump { 50% { transform: scale(1.3); background: var(--pink); } }

main { position: relative; }

/* reveal */
[data-reveal] { opacity: 0; transform: translateY(26px) scale(.97); transition: opacity .6s ease, transform .7s var(--ease-pop); }
[data-reveal].shown { opacity: 1; transform: none; }

.sec { position: relative; padding: 46px 20px 30px; }
.sec-head { text-align: center; margin-bottom: 22px; }
.sh-no {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 99px;
    border: 2px solid var(--ink);
    background: var(--butter-l);
    font: 600 11px/1.4 var(--f-d);
    letter-spacing: .12em;
    text-transform: uppercase;
}
.sh-title {
    margin: 10px 0 4px;
    font: 700 32px/1.1 var(--f-d);
    color: var(--ink);
    text-shadow: 3px 3px 0 var(--pink-l);
}
.sh-sub { margin: 0 auto; max-width: 320px; font-size: 14px; color: var(--muted); }

/* tombol */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: var(--line) solid var(--ink);
    border-radius: 99px;
    background: #fff;
    color: var(--ink);
    font: 600 15px/1.2 var(--f-d);
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--pop);
    transition: transform .12s, box-shadow .12s, background .2s;
    -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 0 var(--ink); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 0 var(--ink); }
.btn.pink { background: var(--pink); color: #fff; }
.btn.mint { background: var(--mint); }
.btn.small { padding: 7px 14px; font-size: 13px; box-shadow: 0 3px 0 0 var(--ink); }
.btn.big { width: 100%; padding: 14px 20px; font-size: 17px; }
.btn .ico { width: 18px; height: 18px; }

/* ════════════════════════════════════════════════════════════════
   KARTU HOLO
   ════════════════════════════════════════════════════════════════ */
.holo-card {
    --mx: 50%;
    --my: 50%;
    --rx: 0deg;
    --ry: 0deg;
    position: relative;
    isolation: isolate;
    padding: 16px 16px 18px;
    text-align: center;
    border-radius: 22px;
    border: var(--line) solid var(--ink);
    background: #fff;
    box-shadow: 0 6px 0 0 var(--ink);
    overflow: hidden;
    transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
    transition: transform .25s ease-out;
}
.holo-card[data-reveal] { transition: opacity .6s ease, transform .7s var(--ease-pop); }
.holo-card[data-reveal].shown { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); }
.holo-card.shown.live { transition: transform .08s linear; }
.hc-shine {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, 0) 38%),
        linear-gradient(115deg, transparent 20%, rgba(255, 123, 165, .35) 35%, rgba(255, 214, 107, .35) 45%, rgba(127, 216, 190, .35) 55%, rgba(142, 209, 252, .35) 65%, transparent 80%);
    background-size: 100% 100%, 260% 260%;
    background-position: 0 0, var(--mx) var(--my);
    mix-blend-mode: soft-light;
    opacity: .9;
    animation: holoIdle 6s ease-in-out infinite;
}
.holo-card.live .hc-shine { animation: none; }
@keyframes holoIdle { 0%, 100% { background-position: 0 0, 10% 10%; } 50% { background-position: 0 0, 90% 90%; } }
.hc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.hc-rank {
    padding: 1px 12px;
    border-radius: 10px;
    border: 2px solid var(--ink);
    background: linear-gradient(90deg, var(--pink), var(--butter), var(--mint), var(--sky), var(--lilac));
    font: 700 15px/1.4 var(--f-d);
    color: #fff;
    -webkit-text-stroke: .8px var(--ink);
    paint-order: stroke fill;
    letter-spacing: .08em;
}
.hc-stars { color: var(--butter); font-size: 16px; letter-spacing: 2px; -webkit-text-stroke: .8px var(--ink); }

.hero { padding: 26px 20px 30px; text-align: center; }
.hero-kicker { margin: 0 0 12px; font: 600 13px/1.4 var(--f-d); letter-spacing: .14em; text-transform: uppercase; color: var(--pink-d); }
.holo-card.big {
    background:
        radial-gradient(circle at 50% 30%, #fff 0, rgba(255, 255, 255, 0) 60%),
        linear-gradient(160deg, #ffeaf2 0%, #fff6dc 50%, #e4f8f1 100%);
}
.hc-art {
    position: relative;
    height: 190px;
    margin: 0 -4px 12px;
    border-radius: 16px;
    border: 2px solid var(--ink);
    background: linear-gradient(180deg, #fff 0%, #ffeef5 100%);
    overflow: hidden;
}
.hc-burst {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 420px;
    height: 420px;
    margin: -210px 0 0 -210px;
    background: repeating-conic-gradient(from 0deg, rgba(255, 214, 107, .45) 0 10deg, transparent 10deg 20deg);
    animation: spin 30s linear infinite;
}
.hc-ring { position: absolute; left: 50%; top: 10px; width: 120px; margin-left: -60px; animation: ringBob 3s ease-in-out infinite; }
.hc-ring svg { width: 100%; display: block; }
@keyframes ringBob { 50% { transform: translateY(-6px) rotate(4deg); } }
.hc-mono {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: 700 40px/1 var(--f-d);
    color: var(--ink);
}
.hc-mono .ico { width: 26px; height: 26px; color: var(--pink); animation: beat 1.2s ease-in-out infinite; }
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } 45% { transform: scale(1.15); } }
.hc-sub { margin: 0; font: 500 13px/1.4 var(--f-d); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.hc-names { margin: 4px 0 8px; font: 700 30px/1.15 var(--f-d); color: var(--ink); overflow-wrap: anywhere; }
.hc-names b { color: var(--pink); }
.hc-date { margin: 0; font-weight: 700; color: var(--ink-s); }
.hc-foot {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 2px dashed #e6dcef;
    font: 600 11px/1.4 var(--f-d);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}
.hero-scroll { margin: 22px 0 0; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); font-weight: 700; }
.hero-scroll b { font-size: 20px; color: var(--pink); animation: hop 1.4s ease-in-out infinite; }
@keyframes hop { 50% { transform: translateY(6px); } }

/* ── Kapsul pesan ── */
.cap-letter {
    border: var(--line) solid var(--ink);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 6px 0 0 var(--ink);
    overflow: hidden;
}
.cl-lid {
    position: relative;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background:
        radial-gradient(ellipse 30% 40% at 18% 30%, rgba(255, 255, 255, .7), transparent 70%),
        var(--pink);
    border-bottom: var(--line) solid var(--ink);
}
.cl-lid::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -9px;
    height: 6px;
    background: var(--ink);
    opacity: .12;
}
.cl-no { font: 700 18px/1 var(--f-d); color: #fff; -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; letter-spacing: .04em; }
.cl-dots { display: flex; gap: 6px; }
.cl-dots i { width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); }
.cl-body { padding: 22px 20px 22px; text-align: center; }
.salam { margin: 0 0 12px; font: 600 17px/1.4 var(--f-d); color: var(--pink-d); }
.cl-body > p { margin: 0 0 16px; font-size: 15px; }
.ayat {
    position: relative;
    margin: 0;
    padding: 20px 18px 16px;
    border-radius: 18px;
    background: var(--mint-l);
    border: 2px dashed var(--mint-d);
}
.ayat .q-ico { position: absolute; top: -12px; left: 50%; width: 24px; height: 24px; margin-left: -12px; color: var(--butter); filter: drop-shadow(0 2px 0 var(--ink)); }
.ayat p { margin: 0 0 8px; font-style: italic; font-size: 15px; }
.ayat cite { font: 600 13px var(--f-d); font-style: normal; color: var(--mint-d); letter-spacing: .06em; }

/* ── Kartu mempelai ── */
.duo-cards { display: grid; gap: 14px; }
.holo-card.char { max-width: 340px; width: 100%; justify-self: center; }
.holo-card.groom { background: linear-gradient(170deg, #eaf6ff 0%, #fff 60%); }
.holo-card.bride { background: linear-gradient(170deg, #ffeaf2 0%, #fff 60%); }
.char-art {
    position: relative;
    margin: 0 auto 10px;
    width: 170px;
    border-radius: 50%;
    border: var(--line) solid var(--ink);
    background: #fff;
    overflow: hidden;
    box-shadow: 0 4px 0 0 var(--ink);
}
.char-art svg { display: block; width: 100%; height: auto; }
.groom .char-art { background: #dff3ff; }
.bride .char-art { background: #ffe6ef; }
.char-role { display: block; font: 600 12px/1.4 var(--f-d); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.char-name { margin: 2px 0 8px; font: 700 26px/1.2 var(--f-d); overflow-wrap: anywhere; }
.groom .char-name { color: #3f6fb8; }
.bride .char-name { color: var(--pink-d); }
.char-tags { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.char-tags li { padding: 2px 10px; border-radius: 99px; border: 2px solid var(--ink); font: 600 12px/1.5 var(--f-d); background: var(--butter-l); }
.groom .char-tags li:last-child { background: #dff3ff; }
.bride .char-tags li:last-child { background: var(--pink-l); }
.char-bio { margin: 0; font-size: 14px; color: var(--ink-s); }
.char-bio b { color: var(--ink); }
.set-bonus {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font: 700 16px/1 var(--f-d);
    letter-spacing: .1em;
    color: var(--pink-d);
}
.set-bonus span { width: 30px; animation: floatCap 3s ease-in-out infinite; }
.set-bonus span:last-child { animation-delay: -1.5s; }
.set-bonus b { padding: 6px 14px; border-radius: 99px; background: #fff; border: 2px solid var(--ink); box-shadow: 0 3px 0 0 var(--ink); }

/* ── Kapsul kisah ── */
.story { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.st-item {
    display: grid;
    grid-template-columns: 78px 1fr;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border-radius: 22px;
    border: var(--line) solid var(--ink);
    background: #fff;
    box-shadow: 0 5px 0 0 var(--ink);
}
.st-cap {
    position: relative;
    width: 78px;
    height: 78px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.st-item:not(.open) .st-cap { animation: nudge 2.4s ease-in-out infinite; }
.st-item:nth-child(2):not(.open) .st-cap { animation-delay: -.8s; }
.st-item:nth-child(3):not(.open) .st-cap { animation-delay: -1.6s; }
@keyframes nudge { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-12deg); } 86% { transform: rotate(10deg); } 94% { transform: rotate(-5deg); } }
.stc-top, .stc-bot { transition: transform .6s var(--ease-pop); }
.stc-q {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font: 700 26px/1 var(--f-d);
    color: #fff;
    -webkit-text-stroke: 1.5px var(--ink);
    paint-order: stroke fill;
    transition: transform .4s var(--ease-pop), opacity .3s;
}
.st-item.open .stc-top { transform: translate(-6px, -22px) rotate(-28deg); }
.st-item.open .stc-bot { transform: translateY(6px); }
.st-item.open .stc-q { opacity: 0; transform: scale(2); }
.st-item.open .st-cap::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 46%;
    width: 22px;
    height: 20px;
    margin: -10px 0 0 -11px;
    background: var(--pink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21s-9.5-5.8-9.5-12.4A5.3 5.3 0 0 1 12 5.3a5.3 5.3 0 0 1 9.5 3.3C21.5 15.2 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21s-9.5-5.8-9.5-12.4A5.3 5.3 0 0 1 12 5.3a5.3 5.3 0 0 1 9.5 3.3C21.5 15.2 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat;
    animation: heartUp .7s .1s var(--ease-pop) both;
}
@keyframes heartUp { from { transform: scale(0) translateY(10px); } to { transform: scale(1) translateY(-6px); } }
.st-body { position: relative; min-width: 0; }
.st-no { font: 600 11px/1.4 var(--f-d); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.st-title { margin: 0 0 2px; font: 700 19px/1.25 var(--f-d); }
.st-text { margin: 0; font-size: 14px; color: var(--ink-s); }
.st-title, .st-text { transition: filter .5s, opacity .5s; }
.st-item:not(.open) .st-title, .st-item:not(.open) .st-text { filter: blur(6px); opacity: .55; user-select: none; }
.st-locked {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-30%);
    text-align: center;
    padding: 6px 8px;
    border-radius: 99px;
    background: var(--ink);
    color: #fff;
    font: 600 12px/1.3 var(--f-d);
    transition: opacity .3s, transform .3s;
}
.st-item.open .st-locked { opacity: 0; transform: translateY(-30%) scale(.8); pointer-events: none; }

/* ── Hitung mundur ── */
.cd-panel {
    padding: 18px 16px 20px;
    text-align: center;
    border-radius: 26px;
    border: var(--line) solid var(--ink);
    background: var(--mint);
    box-shadow: 0 6px 0 0 var(--ink);
}
.cd-screen {
    padding: 14px 10px;
    border-radius: 18px;
    border: var(--line) solid var(--ink);
    background: var(--paper);
    background-image: radial-gradient(circle, rgba(127, 216, 190, .25) 1.4px, transparent 1.8px);
    background-size: 14px 14px;
}
.cd { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cd-box { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cd-box b {
    position: relative;
    width: 100%;
    max-width: 74px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: var(--line) solid var(--ink);
    background: linear-gradient(180deg, var(--ct) 0 50%, var(--ink) 50% calc(50% + 2px), #fff calc(50% + 2px));
    font: 700 24px/1 var(--f-d);
    color: #fff;
    -webkit-text-stroke: 1.5px var(--ink);
    paint-order: stroke fill;
    box-shadow: 0 3px 0 0 var(--ink);
}
.cd-box b::before {
    content: '';
    position: absolute;
    left: 20%;
    top: 14%;
    width: 22%;
    height: 12%;
    border-radius: 50%;
    background: rgba(255, 255, 255, .8);
    transform: rotate(-30deg);
}
.cd-box.tick b { animation: tick .35s var(--ease-pop); }
@keyframes tick { 40% { transform: scale(1.08) rotate(-6deg); } }
.cd-box span { font: 600 12px/1 var(--f-d); letter-spacing: .06em; text-transform: uppercase; }
.cd-date { margin: 14px 0 12px; font: 600 16px/1.4 var(--f-d); }

/* ── Tiket ── */
.ticket {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 78px;
    margin-bottom: 18px;
    border-radius: 20px;
    border: var(--line) solid var(--ink);
    background: #fff;
    box-shadow: 0 6px 0 0 var(--ink);
}
.ticket::before, .ticket::after {
    content: '';
    position: absolute;
    right: 70px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--paper);
    border: var(--line) solid var(--ink);
    z-index: 2;
}
.ticket::before { top: -11px; clip-path: inset(50% -4px -4px -4px); }
.ticket::after { bottom: -11px; clip-path: inset(-4px -4px 50% -4px); }
.tk-main { padding: 16px 14px 16px 16px; border-right: 3px dashed var(--ink); min-width: 0; }
.tk-kind { display: inline-block; padding: 1px 10px; border-radius: 99px; background: var(--tc); border: 2px solid var(--ink); font: 600 11px/1.5 var(--f-d); letter-spacing: .08em; text-transform: uppercase; }
.tk-title { margin: 8px 0 8px; font: 700 26px/1.1 var(--f-d); }
.tk-rows { margin: 0 0 12px; display: grid; gap: 6px; }
.tk-rows div { display: grid; grid-template-columns: 64px 1fr; gap: 8px; font-size: 14px; }
.tk-rows dt { font: 600 12px/1.6 var(--f-d); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tk-rows dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.tk-stub {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 0 17px 17px 0;
    background: var(--tc);
}
.tk-stub .cap { width: 40px; animation: floatCap 4s ease-in-out infinite; }
.tk-stub span { font: 700 12px/1.1 var(--f-d); text-align: center; letter-spacing: .1em; writing-mode: vertical-rl; transform: rotate(180deg); }

/* ── Peta ── */
.map-card {
    border-radius: 24px;
    border: var(--line) solid var(--ink);
    background: #fff;
    box-shadow: 0 6px 0 0 var(--ink);
    overflow: hidden;
}
.map-frame { position: relative; height: 230px; border-bottom: var(--line) solid var(--ink); background: var(--mint-l); }
.leaflet-map { width: 100%; height: 100%; z-index: 1; }
.map-illu { position: absolute; inset: 0; display: block; background: var(--mint-l); background-image: radial-gradient(circle, rgba(79, 191, 159, .3) 2px, transparent 2.5px); background-size: 20px 20px; }
.mi-road { position: absolute; background: #fff; border: 2px solid var(--ink); }
.mi-road.r1 { left: -10%; right: -10%; top: 55%; height: 22px; transform: rotate(-8deg); }
.mi-road.r2 { top: -10%; bottom: -10%; left: 38%; width: 22px; transform: rotate(12deg); }
.mi-pin { position: absolute; left: 50%; top: 40%; width: 46px; margin: -23px 0 0 -23px; animation: hop 1.4s ease-in-out infinite; }
.gc-marker { background: none; border: 0; }
.gc-marker svg { width: 34px; height: 34px; display: block; filter: drop-shadow(0 3px 0 rgba(59, 43, 79, .5)); animation: hop 1.4s ease-in-out infinite; }
.gc-marker i { display: block; width: 3px; height: 12px; margin: -2px auto 0; background: var(--ink); border-radius: 2px; }
.loc { padding: 16px 18px 20px; text-align: center; }
.loc-name { margin: 0 0 4px; font: 700 21px/1.25 var(--f-d); }
.loc-addr { margin: 0 0 14px; font-size: 14px; color: var(--ink-s); }

/* ── Album stiker ── */
.sticker-book {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 18px;
    border-radius: 24px;
    border: var(--line) solid var(--ink);
    background: var(--lilac-l);
    background-image:
        linear-gradient(rgba(184, 166, 255, .25) 1px, transparent 1px),
        linear-gradient(90deg, rgba(184, 166, 255, .25) 1px, transparent 1px);
    background-size: 18px 18px;
    box-shadow: 0 6px 0 0 var(--ink);
}
.sticker {
    position: relative;
    aspect-ratio: 1;
    padding: 6px;
    border: 0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 0 0 2px var(--ink), 0 5px 0 2px rgba(59, 43, 79, .25);
    transform: rotate(var(--r));
    cursor: pointer;
    transition: transform .3s var(--ease-pop);
}
.sticker:hover { transform: rotate(0) scale(1.04); }
.sticker::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 26px;
    height: 26px;
    border-radius: 0 0 20px 0;
    background: linear-gradient(135deg, transparent 50%, #eee6f6 50%, #fff 75%);
    box-shadow: -2px -2px 3px rgba(59, 43, 79, .12);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.sticker img { width: 100%; height: 100%; object-fit: cover; border-radius: 15px; }
.sticker.ph { cursor: default; }
.ph-in {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: color-mix(in srgb, var(--ct) 22%, #fff);
    background-image: radial-gradient(circle, rgba(255, 255, 255, .8) 2px, transparent 2.5px);
    background-size: 16px 16px;
}
.ph-ico { width: 52%; height: 52%; color: var(--ct); filter: drop-shadow(0 3px 0 var(--ink)); }
.ph-cap { width: 55%; }

/* ── Kado ── */
.gift-wrap:not(:has(#gift-section)) { display: none; }
.gift-box { border-radius: 24px; border: var(--line) solid var(--ink); background: #fff; box-shadow: 0 6px 0 0 var(--ink); overflow: hidden; }
.gift-wrap #gift-section { background: transparent !important; padding: 18px 0 20px !important; font-family: var(--f-b) !important; }
.gift-wrap .gs-heading h2 { font-family: var(--f-d) !important; font-weight: 700 !important; color: var(--ink) !important; }
.gift-wrap .gs-heading h2::after { background: var(--pink) !important; }
.gift-wrap .gs-card, .gift-wrap .gs-bank-card { border: 2px solid var(--ink) !important; border-radius: 16px !important; box-shadow: 0 4px 0 0 var(--ink) !important; }
.gift-wrap .gs-btn, .gift-wrap .gs-bank-copy { border-radius: 99px !important; font-family: var(--f-d) !important; }
.gift-wrap .gs-btn-buy { background: var(--pink) !important; color: #fff !important; }
.gift-wrap .gs-bank-logo { background: var(--lilac) !important; color: var(--ink) !important; border: 2px solid var(--ink) !important; }

/* ── RSVP ── */
.rsvp-card {
    padding: 20px 18px;
    border-radius: 24px;
    border: var(--line) solid var(--ink);
    background: #fff;
    box-shadow: 0 6px 0 0 var(--ink);
}
.f-l { display: block; margin: 0 0 6px; font: 600 14px/1.4 var(--f-d); }
.f-in {
    width: 100%;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: var(--line) solid var(--ink);
    border-radius: 16px;
    background: var(--cream);
    font: 600 16px/1.4 var(--f-b);
    color: var(--ink);
    resize: vertical;
    transition: background .2s, box-shadow .2s;
}
.f-in:focus { outline: none; background: #fff; box-shadow: 0 0 0 4px var(--pink-l); }
.choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.ch { position: relative; cursor: pointer; }
.ch input { position: absolute; opacity: 0; inset: 0; }
.ch span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 4px;
    border-radius: 16px;
    border: var(--line) solid var(--ink);
    background: #fff;
    font: 600 13px/1.2 var(--f-d);
    text-align: center;
    transition: background .2s, transform .2s, box-shadow .2s;
}
.ch .cap { width: 30px; transition: transform .4s var(--ease-pop); }
.ch input:checked + span { background: color-mix(in srgb, var(--ct) 35%, #fff); box-shadow: 0 4px 0 0 var(--ink); transform: translateY(-3px); }
.ch input:checked + span .cap { transform: rotate(360deg) scale(1.15); }
.ch input:focus-visible + span { outline: 3px solid var(--lilac); outline-offset: 2px; }
#rsvpSubmitBtn.sending .coin-ico { animation: coinDrop .6s ease-in infinite; }
@keyframes coinDrop { 0% { transform: translateY(-8px) rotateY(0); } 100% { transform: translateY(6px) rotateY(360deg); opacity: .3; } }
#rsvpSubmitBtn.sent { background: var(--mint); color: var(--ink); }
#rsvpSubmitBtn:disabled { cursor: default; }

.wish-head { display: flex; align-items: center; justify-content: space-between; margin: 30px 2px 12px; }
.wish-head h3 { margin: 0; font: 700 22px/1.2 var(--f-d); }
.wh-live { display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--f-d); color: var(--mint-d); text-transform: uppercase; letter-spacing: .08em; }
.wh-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint-d); animation: livePulse 1.6s ease-in-out infinite; }
@keyframes livePulse { 50% { box-shadow: 0 0 0 5px rgba(79, 191, 159, .25); } }
.wishes-list { display: grid; gap: 12px; max-height: 520px; overflow-y: auto; padding: 4px 4px 8px; }
.wish-item { --av: var(--pink); display: flex; gap: 12px; align-items: flex-start; }
.wish-avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: var(--line) solid var(--ink);
    background: linear-gradient(180deg, var(--av) 0 50%, var(--ink) 50% calc(50% + 2px), #fff calc(50% + 2px));
    font: 700 18px/1 var(--f-d);
    color: #fff;
    -webkit-text-stroke: 1px var(--ink);
    paint-order: stroke fill;
    text-transform: uppercase;
}
.wish-body {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border-radius: 4px 18px 18px 18px;
    border: 2px solid var(--ink);
    background: #fff;
    box-shadow: 0 3px 0 0 var(--ink);
}
.wish-header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 2px; }
.wish-name { font: 700 15px/1.3 var(--f-d); overflow-wrap: anywhere; }
.wish-badge { padding: 1px 8px; border-radius: 99px; border: 1.5px solid var(--ink); font: 600 10px/1.5 var(--f-d); text-transform: uppercase; letter-spacing: .04em; }
.wish-badge.hadir { background: var(--mint-l); }
.wish-badge.tidak { background: var(--pink-l); }
.wish-badge.ragu { background: var(--butter-l); }
.wish-message { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.wish-time { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.wish-item.new { animation: wishIn .6s var(--ease-pop) both; }
@keyframes wishIn { from { opacity: 0; transform: scale(.7) translateY(-10px); } }
.wish-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 10px; text-align: center; color: var(--muted); }
.wish-empty p { margin: 0; font-size: 14px; }
.we-cap { width: 46px; animation: floatCap 3s ease-in-out infinite; }

/* ── Penutup ── */
.ending {
    position: relative;
    margin-top: 20px;
    padding: 50px 22px 36px;
    text-align: center;
    background: var(--ink);
    color: #fff;
    border-radius: 36px 36px 0 0;
}
.complete-stamp {
    position: absolute;
    top: -34px;
    right: 22px;
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: var(--line) solid var(--ink);
    background: var(--butter);
    color: var(--ink);
    font: 700 13px/1.15 var(--f-d);
    letter-spacing: .04em;
    box-shadow: 0 4px 0 0 var(--ink), inset 0 0 0 5px #fff, inset 0 0 0 7px var(--ink);
    transform: rotate(14deg) scale(0);
    transition: transform .6s var(--ease-pop);
}
.complete-stamp.on { transform: rotate(14deg) scale(1); }
.end-caps { display: flex; justify-content: center; gap: 4px; margin-bottom: 18px; }
.end-caps span { width: 32px; animation: capWave 2s ease-in-out infinite; animation-delay: calc(var(--i) * .12s); }
@keyframes capWave { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-12px) rotate(-20deg); } 60% { transform: translateY(0) rotate(0); } }
.end-copy { margin: 0 auto 14px; max-width: 360px; font-size: 15px; color: #e7def3; }
.end-thanks { margin: 0; font: 600 14px/1.4 var(--f-d); color: var(--butter); letter-spacing: .08em; text-transform: uppercase; }
.end-names { margin: 6px 0 16px; font: 700 34px/1.15 var(--f-d); color: #fff; overflow-wrap: anywhere; }
.end-names b { color: var(--pink); }
.end-parents { display: grid; gap: 10px; margin: 0 auto 18px; max-width: 340px; }
.end-parents p { margin: 0; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .08); font-size: 14px; font-weight: 700; }
.end-parents span { display: block; font: 600 11px/1.5 var(--f-d); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.end-salam { margin: 0 0 18px; font: 500 15px/1.4 var(--f-d); color: #e7def3; }
.end-credit { margin: 0; font-size: 12px; color: #a99cbb; }

/* ── Lightbox ── */
.gallery-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 7000;
    align-items: center;
    justify-content: center;
    background: rgba(59, 43, 79, .92);
    opacity: 0;
    transition: opacity .3s;
}
.lb-img-wrap img { max-width: 92vw; max-height: 80vh; border-radius: 18px; border: 6px solid #fff; }
.lb-close, .lb-prev, .lb-next {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: var(--line) solid var(--ink);
    display: grid;
    place-items: center;
    background: #fff;
    color: var(--ink);
    font: 700 22px/1 var(--f-d);
    cursor: pointer;
    box-shadow: 0 3px 0 0 var(--ink);
}
.lb-close { top: 18px; right: 18px; font-size: 16px; }
.lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 14px; top: 50%; transform: translateY(-50%); }
.lb-counter { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: #fff; font: 600 14px var(--f-d); }

@media (min-width: 430px) {
    .sec { padding-left: 24px; padding-right: 24px; }
}
@media (max-height: 640px) {
    .gc-hint { display: none; }
    .it-names { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    [data-reveal] { opacity: 1; transform: none; }
}