/* ═══════════════════════════════════════════════════════════════
   LOVE CAROUSEL — undangan komidi putar
   ═══════════════════════════════════════════════════════════════ */
:root {
    --mint: #bfe7d9; --mint-d: #8fcfb9;
    --pink: #f6b6c8; --pink-d: #ec8fab;
    --butter: #fbe7a1; --butter-d: #f1cf68;
    --lilac: #cdb8ef; --lilac-d: #a98ee0;
    --cream: #fff8ee; --paper: #fffdf8;
    --gold: #d7a84a; --gold-l: #f3d58c; --gold-d: #a87a22;
    --ink: #6b2340; --ink-2: #8b4a63; --ink-3: #ad7f92;
    --rasp: #c43d6b;
    --f-disp: 'Abril Fatface', 'Fraunces', Georgia, serif;
    --f-serif: 'Fraunces', Georgia, serif;
    --f-ui: 'Nunito', system-ui, sans-serif;
    --f-ar: 'Amiri', serif;
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --gold-grad: linear-gradient(180deg, #f6dc98 0%, #d7a84a 48%, #b8862c 100%);
    --sw: 328px; --sh: 520px; --fw: 80px; --fh: 330px; --ph: 540px; --hz: 96px; --u: 1;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
    overflow: hidden; overscroll-behavior: none;
    font-family: var(--f-ui); color: var(--ink); background: var(--cream);
    -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1em; height: 1em; display: inline-block; vertical-align: -.14em; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── Tombol ─────────────────────────────────────────────────── */
.btn-gold, .btn-rasp, .btn-ride {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 0; border-radius: 999px; text-decoration: none; font-family: var(--f-ui);
    font-weight: 800; letter-spacing: .02em; transition: transform .2s, box-shadow .2s;
}
.btn-gold {
    margin-top: 16px; padding: 12px 22px; font-size: 14px; color: var(--ink);
    background: var(--gold-grad);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 3px 0 var(--gold-d), 0 10px 18px -8px rgba(107, 35, 64, .45);
}
.btn-gold.ghost { background: #fff; box-shadow: inset 0 0 0 2px var(--gold), 0 3px 0 var(--gold-d); }
.btn-rasp {
    width: 100%; margin-top: 16px; padding: 14px; font-size: 15px; color: #fff;
    background: linear-gradient(180deg, #d9577f, #a92d58);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 0 #7d1f43, 0 12px 20px -10px rgba(107, 35, 64, .6);
}
.btn-gold:active, .btn-rasp:active, .btn-ride:active { transform: translateY(2px); }
.btn-rasp.loading { opacity: .6; pointer-events: none; }

/* ═══════════════ COVER · TIKET ═══════════════ */
.intro {
    position: fixed; inset: 0; z-index: 9000; overflow: hidden auto;
    display: flex; align-items: center; justify-content: center;
    padding: calc(70px + var(--sat)) 20px calc(26px + var(--sab));
    background: radial-gradient(120% 70% at 50% 0%, #fff6e8 0%, #fde6ee 55%, #f3e9fb 100%);
    transition: opacity .8s ease, transform .9s cubic-bezier(.6, 0, .3, 1);
}
.sunburst {
    position: absolute; left: 50%; top: 34%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax;
    background: repeating-conic-gradient(from 0deg, rgba(246, 182, 200, .22) 0 7.5deg, rgba(255, 255, 255, 0) 7.5deg 15deg);
    animation: spin 90s linear infinite; pointer-events: none;
}
.bunting { position: absolute; top: var(--sat); left: 0; width: 100%; height: 70px; pointer-events: none; }
.intro-inner { position: relative; width: min(340px, 100%); display: flex; flex-direction: column; align-items: center; }
.mini-carousel { width: 132px; margin-bottom: -6px; position: relative; z-index: 1; animation: bob 3.2s ease-in-out infinite; }
.mini-carousel svg { display: block; width: 100%; }
.mc-bulbs circle { animation: twinkle 1.4s ease-in-out infinite; }
.mc-bulbs circle:nth-child(2n) { animation-delay: .7s; }

.ticket { width: 100%; position: relative; filter: drop-shadow(0 18px 26px rgba(107, 35, 64, .22)); }
.tk-main, .tk-stub {
    position: relative; background: var(--paper);
    -webkit-mask: radial-gradient(circle 12px at 0 100%, transparent 98%, #000) 0 0 / 51% 100% no-repeat,
                  radial-gradient(circle 12px at 100% 100%, transparent 98%, #000) 100% 0 / 51% 100% no-repeat;
            mask: radial-gradient(circle 12px at 0 100%, transparent 98%, #000) 0 0 / 51% 100% no-repeat,
                  radial-gradient(circle 12px at 100% 100%, transparent 98%, #000) 100% 0 / 51% 100% no-repeat;
}
.tk-main { border-radius: 22px 22px 0 0; padding: 0 22px 22px; text-align: center; overflow: hidden; }
.tk-main::before {
    content: ''; position: absolute; inset: 8px 8px 0; border: 1.5px solid var(--gold); border-bottom: 0;
    border-radius: 16px 16px 0 0; pointer-events: none;
}
.tk-strip {
    display: flex; justify-content: space-between; margin: 0 -22px 16px; padding: 22px 26px 12px;
    background: repeating-linear-gradient(90deg, var(--pink) 0 16px, #fbd0dc 16px 32px);
    font-weight: 900; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
    border-bottom: 2px dashed rgba(107, 35, 64, .25);
}
.tk-kicker { margin: 0; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; font-weight: 800; color: var(--ink-3); }
.tk-names { margin: 6px 0 4px; font: 400 clamp(38px, 11.5vw, 46px)/1.02 var(--f-disp); color: var(--ink); }
.tk-names span { display: block; font: italic 600 .5em/1.3 var(--f-serif); color: var(--gold-d); }
.tk-date { margin: 4px 0 0; font: italic 500 15px var(--f-serif); color: var(--ink-2); }
.tk-guest { margin-top: 16px; padding: 14px 10px 4px; border-top: 1.5px dotted rgba(107, 35, 64, .25); }
.tk-label { margin: 0; font-size: 12px; color: var(--ink-3); font-weight: 700; }
.tk-name { margin: 6px 0 0; font: 600 23px/1.2 var(--f-serif); color: var(--ink); word-break: break-word; }
.tk-stamp {
    position: absolute; right: 12px; bottom: 74px; padding: 8px 10px; mix-blend-mode: multiply; border: 3px double var(--rasp); border-radius: 10px;
    font: 900 12px/1.05 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--rasp);
    transform: rotate(-12deg) scale(2.4); opacity: 0; pointer-events: none;
}
.tk-stub {
    border-radius: 0 0 22px 22px; padding: 18px 22px 22px; margin-top: -1px;
    background: linear-gradient(var(--paper), var(--paper)) padding-box;
    -webkit-mask: radial-gradient(circle 12px at 0 0, transparent 98%, #000) 0 0 / 51% 100% no-repeat,
                  radial-gradient(circle 12px at 100% 0, transparent 98%, #000) 100% 0 / 51% 100% no-repeat;
            mask: radial-gradient(circle 12px at 0 0, transparent 98%, #000) 0 0 / 51% 100% no-repeat,
                  radial-gradient(circle 12px at 100% 0, transparent 98%, #000) 100% 0 / 51% 100% no-repeat;
    transform-origin: 0 0;
}
.tk-stub::before { content: ''; position: absolute; left: 16px; right: 16px; top: 0; border-top: 2.5px dashed rgba(107, 35, 64, .3); }
.tk-stub-row { display: flex; justify-content: space-between; gap: 8px; text-align: left; }
.tk-stub-row span { display: flex; flex-direction: column; min-width: 0; }
.tk-stub-row small { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 800; color: var(--ink-3); }
.tk-stub-row b { font-size: 13px; font-weight: 800; white-space: nowrap; }
.btn-ride {
    width: 100%; margin-top: 16px; padding: 15px; font-size: 16px; color: #fff; text-transform: uppercase; letter-spacing: .14em;
    background: linear-gradient(180deg, #d9577f, #a92d58);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 0 #7d1f43, 0 14px 24px -10px rgba(107, 35, 64, .7);
    animation: ridePulse 2.4s ease-in-out infinite;
}
.btn-ride .ico { color: var(--gold-l); }
.intro-note { margin: 18px 0 0; font-size: 11px; color: var(--ink-3); text-align: center; }

.intro.tearing .tk-stub { animation: tear 1s cubic-bezier(.5, 0, .7, .4) forwards; }
.intro.tearing .tk-stamp { animation: stamp .45s .25s cubic-bezier(.3, 1.6, .5, 1) forwards; }
.intro.tearing .btn-ride { animation: none; }
.intro.leaving { opacity: 0; transform: translateY(-8%); pointer-events: none; }
@keyframes tear {
    0% { transform: none; }
    22% { transform: rotate(-4deg) translateY(4px); }
    100% { transform: translate(40px, 110vh) rotate(26deg); }
}
@keyframes stamp { to { opacity: .85; transform: rotate(-12deg) scale(1); } }
@keyframes ridePulse { 0%, 100% { transform: none; } 50% { transform: scale(1.03); } }

/* ═══════════════ APP / LANGIT ═══════════════ */
.app { position: fixed; inset: 0; visibility: hidden; }
body.opened .app { visibility: visible; }
.sky {
    position: absolute; inset: 0; overflow: hidden; pointer-events: none;
    background:
        radial-gradient(70% 40% at 50% 48%, rgba(255, 248, 238, .95) 0%, rgba(255, 248, 238, 0) 70%),
        linear-gradient(180deg, #e9defa 0%, #fde8ef 42%, #fff4e4 70%, #dff3ea 100%);
}
.cloud { position: absolute; width: 120px; height: 34px; border-radius: 40px; background: #fff; opacity: .75; }
.cloud::before, .cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 54px; height: 54px; left: 18px; top: -26px; }
.cloud::after { width: 40px; height: 40px; left: 60px; top: -16px; }
.cloud.c1 { top: calc(14% + var(--sat)); left: -30px; animation: drift 38s linear infinite; }
.cloud.c2 { top: calc(30% + var(--sat)); right: -50px; transform: scale(.7); animation: drift 52s linear infinite reverse; }
.cloud.c3 { bottom: 16%; left: 10%; transform: scale(.55); opacity: .5; }
.confetti {
    position: absolute; left: calc(var(--i) * 7.3%); top: calc(8% + var(--i) * 5.7% % 80%);
    width: 6px; height: 10px; border-radius: 2px; opacity: .55;
    background: var(--pink); transform: rotate(calc(var(--i) * 37deg));
}
.confetti:nth-child(3n) { background: var(--mint-d); }
.confetti:nth-child(3n+1) { background: var(--butter-d); }
.confetti:nth-child(4n) { background: var(--lilac-d); width: 7px; height: 7px; border-radius: 50%; }

.stage {
    position: absolute; left: 0; right: 0; top: 0; bottom: calc(78px + var(--sab));
    touch-action: none; user-select: none; -webkit-user-select: none; overflow: hidden;
}
.carousel { position: absolute; inset: 0; transition: transform 1.3s cubic-bezier(.2, .9, .25, 1.05), opacity .8s; }
.stage.rising .carousel { transform: translateY(75vh) scale(.8); opacity: 0; transition: none; }
.floor, .roof { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.floor { z-index: 1; filter: drop-shadow(0 14px 16px rgba(107, 35, 64, .18)); }
.ring { position: absolute; inset: 0; z-index: 2; }
.roof { z-index: 3; filter: drop-shadow(0 8px 10px rgba(107, 35, 64, .18)); }
.bulbs { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.bulb {
    position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff 0 22%, #fff6cf 38%, #ffd75e 80%);
    box-shadow: 0 0 0 1.5px #c99434;
}
.bulb::after {
    content: ''; position: absolute; inset: -6px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 236, 160, .95) 0 30%, rgba(255, 220, 120, 0) 70%);
    animation: glow 1.6s var(--d) ease-in-out infinite;
}
.bulb.lamp { background: radial-gradient(circle at 35% 35%, #fff 0 22%, #ffe3ec 40%, #f59cbb 82%); }
.bulb.lamp::after { background: radial-gradient(circle, rgba(255, 190, 212, .95) 0 30%, rgba(246, 170, 196, 0) 70%); }
.finial { position: absolute; left: -30px; top: -92px; width: 60px; height: 92px; z-index: 5; transform-origin: 30px 92px; pointer-events: none; }
.finial > svg { display: block; width: 100%; height: 100%; }
.crest {
    position: absolute; left: 50%; top: 104px; transform: translateX(-50%); white-space: nowrap;
    display: flex; align-items: center; gap: 4px; padding: 4px 12px 5px;
    background: var(--paper); border: 2px solid var(--gold); border-radius: 999px;
    box-shadow: 0 0 0 3px var(--paper), 0 6px 14px -6px rgba(107, 35, 64, .5);
    font: 400 17px/1 var(--f-disp); color: var(--ink);
}
.crest i { color: var(--rasp); font-size: 12px; display: flex; }

/* papan cermin (inti komidi) */
.face, .horse { position: absolute; left: 0; top: 0; will-change: transform; }
.face {
    width: var(--fw); height: var(--fh); margin: calc(var(--fh) / -2) 0 0 calc(var(--fw) / -2);
    cursor: pointer; backface-visibility: hidden;
}
.face-in {
    position: absolute; inset: 0; overflow: hidden;
    border-radius: calc(var(--fw) / 2) calc(var(--fw) / 2) 8px 8px;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, .55) 0 18%, rgba(255, 255, 255, 0) 19% 40%, rgba(255, 255, 255, .3) 41% 46%, rgba(255, 255, 255, 0) 47%),
        linear-gradient(180deg, var(--t1), var(--t2));
    border: 3px solid var(--gold);
    box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 5px rgba(215, 168, 74, .7);
    display: flex; flex-direction: column; align-items: center; padding: 16px 0 12px; gap: 8px;
}
.fc-no { font: 400 min(calc(var(--fw) * .24), 30px)/1 var(--f-disp); color: var(--ink); opacity: .8; margin-top: 6px; }
.fc-ico {
    width: min(calc(var(--fw) * .52), 64px); height: min(calc(var(--fw) * .52), 64px); border-radius: 50%; background: var(--paper);
    border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center; color: var(--rasp); flex: none;
}
.fc-ico .ico { width: 56%; height: 56%; }
.fc-label {
    writing-mode: vertical-rl; transform: rotate(180deg); flex: 1; min-height: 0; overflow: hidden;
    font: 700 min(calc(var(--fw) * .19), 20px)/1 var(--f-serif); letter-spacing: .08em; color: var(--ink); white-space: nowrap; text-align: center;
}
.fc-heart { color: var(--paper); width: 14px; height: 14px; }
.fc-heart .ico { width: 100%; height: 100%; }
.shade { position: absolute; inset: 0; background: #3c1226; border-radius: inherit; pointer-events: none; opacity: 0; }
.face .shade { border-radius: calc(var(--fw) / 2) calc(var(--fw) / 2) 8px 8px; }

/* kuda & tiang emas */
.horse { width: var(--hz); height: var(--ph); margin: calc(var(--ph) / -2) 0 0 calc(var(--hz) / -2); cursor: pointer; }
.horse .shade { display: none; }
.pole {
    position: absolute; left: 50%; top: 0; bottom: 0; width: 7px; margin-left: -3.5px; border-radius: 4px;
    background:
        repeating-linear-gradient(-55deg, rgba(255, 255, 255, .55) 0 3px, rgba(255, 255, 255, 0) 3px 9px),
        linear-gradient(90deg, #a87a22, #f6dc98 45%, #d7a84a 60%, #8d6418);
    box-shadow: 0 0 0 .5px rgba(107, 35, 64, .3);
}
.pole::before, .pole::after { content: ''; position: absolute; left: -4px; right: -4px; height: 9px; border-radius: 4px; background: var(--gold-grad); }
.pole::before { top: 0; }
.pole::after { bottom: 0; }
.hz { position: absolute; left: 0; right: 0; top: 52%; height: calc(var(--hz) * .77); margin-top: calc(var(--hz) * -.38); }
.hz svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 3px rgba(107, 35, 64, .25)); }
.stage.moving .hz { animation: bobRide .9s var(--d) ease-in-out infinite alternate; }

/* ═══════════════ PANEL (sheet) ═══════════════ */
.sheets { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.sheet {
    position: absolute; left: 0; top: 0; width: var(--sw); height: var(--sh);
    margin: calc(var(--sh) / -2) 0 0 calc(var(--sw) / -2);
    display: flex; flex-direction: column; visibility: hidden; opacity: 0;
    background: var(--paper); color: var(--ink);
    border-radius: calc(var(--sw) / 2) calc(var(--sw) / 2) 24px 24px / 64px 64px 24px 24px;
    border: 3px solid var(--gold);
    box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5.5px rgba(215, 168, 74, .55),
                0 30px 50px -20px rgba(107, 35, 64, .5), 0 0 0 1px rgba(107, 35, 64, .1);
    overflow: hidden; transform-origin: 50% 50%;
}
.sheet.vis { visibility: visible; }
.sheet.live { pointer-events: auto; }
.t-mint { --t1: var(--mint); --t2: var(--mint-d); }
.t-pink { --t1: var(--pink); --t2: var(--pink-d); }
.t-butter { --t1: var(--butter); --t2: var(--butter-d); }
.t-lilac { --t1: var(--lilac); --t2: var(--lilac-d); }
.sh-cap {
    position: absolute; left: 0; right: 0; top: 0; height: 58px; pointer-events: none;
    background: repeating-linear-gradient(90deg, var(--t1) 0 18px, #fff 18px 36px);
    -webkit-mask: radial-gradient(circle 9px at 9px 49px, #000 98%, transparent) 0 0 / 18px 58px repeat-x, linear-gradient(#000, #000) 0 0 / 100% 49px no-repeat;
            mask: radial-gradient(circle 9px at 9px 49px, #000 98%, transparent) 0 0 / 18px 58px repeat-x, linear-gradient(#000, #000) 0 0 / 100% 49px no-repeat;
    opacity: .9;
}
.sh-head {
    position: relative; z-index: 2; flex: none; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 20px 14px 0; height: 76px; gap: 6px;
}
.sh-no {
    width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
    background: var(--gold-grad); color: var(--ink); font: 400 13px/1 var(--f-disp);
    box-shadow: 0 0 0 2px var(--paper), 0 3px 6px -2px rgba(107, 35, 64, .4);
}
.sh-label {
    padding: 6px 14px; border-radius: 999px; background: var(--paper); border: 1.5px solid var(--gold);
    font-size: 10.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto;
}
.sh-open {
    display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px; border: 0;
    background: var(--ink); color: #fff; font-size: 11px; font-weight: 800; flex: none;
}
.sh-open .ico { width: 11px; height: 11px; }
.sh-body {
    position: relative; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    padding: 10px 22px 26px; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: var(--t1) transparent;
    -webkit-mask: linear-gradient(transparent 0, #000 12px, #000 calc(100% - 22px), transparent);
            mask: linear-gradient(transparent 0, #000 12px, #000 calc(100% - 22px), transparent);
}
.sh-body.center, .center { text-align: center; }
.sh-body.center { display: flex; flex-direction: column; align-items: center; }
.sh-body.center > * { flex: none; }
.sh-body.center::before, .sh-body.center::after { content: ''; flex: 1 0 0; }

.h-title { margin: 4px 0 8px; font: 400 30px/1.1 var(--f-disp); color: var(--ink); text-align: center; }
.h-title em { display: block; font: italic 600 18px/1.4 var(--f-serif); color: var(--gold-d); margin-top: 2px; }
.txt { margin: 0 0 10px; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.txt.sm { font-size: 13.5px; }
.arab { margin: 2px 0 10px; font: 700 26px/1.7 var(--f-ar); color: var(--ink); text-align: center; direction: rtl; }
.arab.sm { font-size: 19px; font-weight: 400; line-height: 1.9; margin: 6px 0; }
.sheet .txt { text-align: center; }
.ayat { margin: 14px 0 0; padding: 18px 16px 16px; border-radius: 18px; background: color-mix(in srgb, var(--t1) 35%, #fff); border: 1.5px dashed var(--gold); text-align: center; }
.ayat-orn { display: flex; justify-content: center; gap: 6px; color: var(--gold); font-size: 13px; }
.ayat-orn .ico:nth-child(2) { color: var(--rasp); }
.ayat blockquote { margin: 6px 0 8px; font: italic 400 14.5px/1.65 var(--f-serif); color: var(--ink); }
.ayat figcaption { font-size: 11px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-d); }

/* mempelai */
.medal { position: relative; width: 168px; height: 168px; margin: 6px 0 22px; }
.medal::before {
    content: ''; position: absolute; inset: -10px; border-radius: 50%;
    background: repeating-conic-gradient(var(--gold) 0 10deg, var(--gold-l) 10deg 20deg);
    -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%); mask: radial-gradient(circle, transparent 60%, #000 61%);
}
.medal-in {
    position: absolute; inset: 0; border-radius: 50%; overflow: hidden; border: 4px solid var(--gold);
    background: radial-gradient(circle at 35% 30%, #fff, var(--t1) 70%);
    display: grid; place-items: center; box-shadow: inset 0 0 0 4px var(--paper);
}
.medal-in img { width: 100%; height: 100%; object-fit: cover; }
.mono { font: 400 78px/1 var(--f-disp); color: var(--ink); text-shadow: 3px 3px 0 #fff; }
.medal-ribbon {
    position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); white-space: nowrap;
    padding: 6px 16px; background: var(--ink); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%);
}
.p-name { margin: 6px 0 8px; font: 400 29px/1.12 var(--f-disp); color: var(--ink); }
.p-parent { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.p-parent b { color: var(--ink); font-weight: 800; }
.tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; }
.tags span { padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, var(--t1) 55%, #fff); border: 1px solid var(--t2); font-size: 12px; font-weight: 700; }

/* kisah */
.rides { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.rides li { display: flex; gap: 12px; text-align: left; padding: 14px; border-radius: 18px; background: #fff; border: 1.5px solid color-mix(in srgb, var(--t2) 70%, #fff); box-shadow: 0 6px 14px -10px rgba(107, 35, 64, .35); }
.rides li:nth-child(2) { background: color-mix(in srgb, var(--t1) 30%, #fff); }
.rd-no { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-grad); font: 400 17px/1 var(--f-disp); color: var(--ink); }
.rides b { display: block; font: 700 16px/1.25 var(--f-serif); color: var(--ink); margin: 2px 0 4px; }
.rides p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }

/* hitung mundur */
.cd { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; margin: 10px 0 6px; }
.cd-box {
    position: relative; padding: 14px 0 10px; border-radius: 14px; background: #fff; border: 2px solid var(--gold);
    box-shadow: 0 4px 0 var(--t2), inset 0 -18px 0 color-mix(in srgb, var(--t1) 35%, #fff);
}
.cd-box b { display: block; font: 400 30px/1 var(--f-disp); color: var(--ink); font-variant-numeric: tabular-nums; }
.cd-box span { display: block; margin-top: 6px; font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.cd-date { margin: 14px 0 0; font: italic 600 17px var(--f-serif); color: var(--ink); }

/* acara */
.ev-badge {
    width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; font-size: 32px; color: var(--rasp);
    background: radial-gradient(circle at 35% 30%, #fff, var(--t1)); border: 3px solid var(--gold); box-shadow: 0 0 0 5px var(--paper), 0 0 0 6.5px var(--gold);
    margin: 4px 0 8px;
}
.ev-ticket {
    width: 100%; margin-top: 6px; padding: 6px 16px 12px; border-radius: 16px; background: #fff; text-align: left;
    border: 1.5px solid color-mix(in srgb, var(--t2) 80%, #fff); box-shadow: 0 8px 18px -12px rgba(107, 35, 64, .4);
}
.ev-row { display: flex; flex-direction: column; padding: 10px 0; border-bottom: 1.5px dashed color-mix(in srgb, var(--t2) 60%, #fff); }
.ev-row:last-of-type { border-bottom: 0; }
.ev-row span { font-size: 10.5px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.ev-row b { margin-top: 3px; font: 700 16.5px/1.35 var(--f-serif); color: var(--ink); }
.ev-addr { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }

/* lokasi */
.map-frame { width: 100%; height: 200px; margin: 6px 0 12px; border-radius: 20px; overflow: hidden; border: 3px solid var(--gold); box-shadow: 0 0 0 4px var(--paper), 0 10px 20px -12px rgba(107, 35, 64, .5); position: relative; touch-action: auto; }
.leaflet-map { width: 100%; height: 100%; }
.map-illu { position: absolute; inset: 0; display: block; }
.map-illu svg { width: 100%; height: 100%; display: block; }
.map-illu .route { animation: dash 2.4s linear infinite; }
.mi-pin { position: absolute; left: 70.5%; top: 18%; width: 38px; height: 38px; margin-left: -19px; display: grid; place-items: center; color: #fff; background: var(--rasp); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 6px 12px -4px rgba(107, 35, 64, .6); animation: pinHop 1.6s ease-in-out infinite; }
.mi-pin .ico { transform: rotate(45deg); font-size: 17px; }
.lc-marker span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50% 50% 50% 0; background: var(--rasp); color: #fff; transform: rotate(-45deg); border: 3px solid #fff; box-shadow: 0 6px 12px rgba(107, 35, 64, .4); }
.lc-marker svg { width: 18px; height: 18px; transform: rotate(45deg); fill: currentColor; }
.loc-kind { margin: 0; font-size: 11px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-d); }
.loc-name { margin: 4px 0 4px; font: 700 20px/1.25 var(--f-serif); }
.loc-addr { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); }

/* galeri: cermin melengkung */
.mirrors { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; margin-top: 6px; }
.mirror {
    position: relative; aspect-ratio: 3 / 4; padding: 0; border: 3px solid var(--gold); overflow: hidden;
    border-radius: 50% 50% 14px 14px / 36% 36% 14px 14px;
    box-shadow: inset 0 0 0 3px var(--paper), 0 8px 16px -10px rgba(107, 35, 64, .5); background: var(--mint);
}
.mirror:nth-child(4n+2), .mirror.m1 { background: var(--pink); }
.mirror.m2 { background: var(--butter); }
.mirror.m3 { background: var(--lilac); }
.mirror img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mirror.ph svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mirror.ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255, 255, 255, .5) 0 14%, transparent 15% 34%, rgba(255, 255, 255, .25) 35% 40%, transparent 41%); }
.mirror.ph span { position: absolute; left: 0; right: 0; bottom: 10px; font: italic 600 13px var(--f-serif); color: var(--ink); z-index: 1; }

/* hadiah — restyle partial */
.gift-wrap { margin: 10px -22px 0; }
.gift-wrap:not(:has(#gift-section)) { display: none; }
.gift-wrap #gift-section { background: transparent !important; padding: 0 0 6px !important; font-family: var(--f-ui) !important; }
.gift-wrap .gs-heading { display: none; }
.gift-wrap .gs-wrap { padding: 0 22px !important; }
.gift-wrap .gs-track { padding: 4px 22px 14px !important; }
.gift-wrap .gs-card, .gift-wrap .gs-bank-card { border-radius: 18px !important; border: 2px solid var(--gold) !important; box-shadow: 0 4px 0 color-mix(in srgb, var(--t2) 70%, #fff) !important; }
.gift-wrap .gs-img-ph { background: repeating-linear-gradient(90deg, var(--pink) 0 14px, #fff 14px 28px) !important; }
.gift-wrap .gs-btn, .gift-wrap .gs-bank-copy { border-radius: 999px !important; font-family: var(--f-ui) !important; font-weight: 800 !important; }
.gift-wrap .gs-btn-buy { background: linear-gradient(180deg, #d9577f, #a92d58) !important; color: #fff !important; }
.gift-wrap .gs-bank-copy { background: var(--paper) !important; border: 1.5px solid var(--gold) !important; color: var(--ink) !important; }
.gift-wrap .gs-bank-logo.groom, .gift-wrap .gs-bank-logo.bride, .gift-wrap .gs-bank-logo.other { background: var(--gold-grad) !important; color: var(--ink) !important; }
.gift-wrap .gs-sub-label { font-family: var(--f-ui) !important; color: var(--ink-3) !important; padding: 0 22px !important; }
.gift-wrap .gs-price { color: var(--rasp) !important; font-family: var(--f-ui) !important; font-weight: 900 !important; }
.gift-wrap .gs-name, .gift-wrap .gs-bank-name-text, .gift-wrap .gs-bank-holder { font-family: var(--f-ui) !important; }
.gift-wrap .gs-bank-number { color: var(--ink) !important; }
.gift-wrap .gs-bank-owner-badge { display: none !important; }
#gs-modal { font-family: var(--f-ui); }
#gs-modal .gs-sbtn { background: linear-gradient(180deg, #d9577f, #a92d58) !important; border-radius: 999px !important; }

/* rsvp */
.rsvp-form { margin-top: 8px; text-align: left; }
.f-l { display: block; margin: 12px 0 6px; font-size: 11px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.f-in {
    width: 100%; padding: 12px 14px; border-radius: 14px; border: 2px solid color-mix(in srgb, var(--t2) 70%, #fff);
    background: #fff; font: 600 15px var(--f-ui); color: var(--ink); outline: none; resize: vertical;
}
.f-in:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(215, 168, 74, .2); }
.att { display: grid; gap: 7px; }
.att label { position: relative; display: block; }
.att input { position: absolute; opacity: 0; }
.att span {
    display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; cursor: pointer;
    background: #fff; border: 2px dashed color-mix(in srgb, var(--t2) 70%, #fff); font-weight: 800; font-size: 14px; transition: all .2s;
}
.att span::before { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--gold); flex: none; transition: all .2s; }
.att input:checked + span { background: color-mix(in srgb, var(--t1) 45%, #fff); border-style: solid; border-color: var(--gold); }
.att input:checked + span::before { background: var(--rasp); box-shadow: inset 0 0 0 3px #fff; }
.att input:focus-visible + span { outline: 2px solid var(--ink); }

/* ucapan */
.wishes-list { display: grid; gap: 10px; margin-top: 10px; }
.wish-item {
    display: flex; gap: 10px; padding: 12px; border-radius: 16px; background: #fff; text-align: left;
    border: 1.5px solid color-mix(in srgb, var(--t2) 60%, #fff); position: relative;
}
.wish-item::after { content: ''; position: absolute; right: 54px; top: 0; bottom: 0; border-right: 1.5px dashed rgba(107, 35, 64, .08); }
.wish-item.new { animation: popIn .5s cubic-bezier(.3, 1.5, .5, 1); }
.wish-avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--av, var(--pink)); border: 2px solid var(--gold); font: 400 18px/1 var(--f-disp); color: var(--ink); text-transform: uppercase; }
.wish-body { min-width: 0; flex: 1; }
.wish-header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wish-name { font-weight: 900; font-size: 14px; }
.wish-badge { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.wish-badge.hadir { background: var(--mint); }
.wish-badge.tidak { background: var(--pink); }
.wish-badge.ragu { background: var(--butter); }
.wish-message { margin: 4px 0 2px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); word-break: break-word; }
.wish-time { font-size: 11px; color: var(--ink-3); }
.wish-empty { text-align: center; padding: 24px 10px; color: var(--ink-3); font-size: 14px; }
.we-ico { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--t1); color: var(--ink); font-size: 24px; }

/* penutup */
.end-crest { display: flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 999px; background: var(--gold-grad); font: 400 26px/1 var(--f-disp); color: var(--ink); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4.5px var(--gold); }
.end-crest .ico { color: var(--rasp); font-size: 18px; }
.end-kicker { margin: 16px 0 0; font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-d); }
.end-names { margin: 4px 0 8px; font: 400 36px/1.1 var(--f-disp); }
.end-names em { font: italic 600 .6em var(--f-serif); color: var(--gold-d); }
.end-fam { display: grid; gap: 8px; width: 100%; margin: 6px 0 0; }
.end-fam p { margin: 0; padding: 10px; border-radius: 14px; background: color-mix(in srgb, var(--t1) 35%, #fff); font: 600 14px/1.45 var(--f-serif); }
.end-fam span { display: block; font: 900 10px var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.end-salam { margin: 14px 0 0; font: italic 600 16px/1.4 var(--f-serif); }
.end-credit { margin: 18px 0 0; font-size: 11.5px; color: var(--ink-3); }

/* ═══════════════ HINT & DOCK ═══════════════ */
.hint {
    position: absolute; left: 50%; bottom: 18px; z-index: 50; transform: translate(-50%, 20px); opacity: 0;
    display: flex; align-items: center; gap: 8px; padding: 9px 16px 9px 10px; border-radius: 999px; white-space: nowrap;
    background: var(--ink); color: #fff; font-size: 13px; font-weight: 800; pointer-events: none;
    box-shadow: 0 10px 22px -8px rgba(107, 35, 64, .7); transition: opacity .4s, transform .4s;
}
.hint.show { opacity: 1; transform: translate(-50%, 0); }
.hint-hand { width: 26px; height: 26px; color: var(--ink); animation: swipeHand 1.6s ease-in-out infinite; }
.hint-hand svg { width: 100%; height: 100%; }
.dock {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 20;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 8px 14px calc(12px + var(--sab));
    background: linear-gradient(180deg, rgba(223, 243, 234, 0), #dff3ea 30%);
}
.dk-btn {
    width: 50px; height: 50px; flex: none; border-radius: 50%; border: 0; display: grid; place-items: center; font-size: 22px;
    background: var(--gold-grad); color: var(--ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 3px 0 var(--gold-d), 0 8px 16px -8px rgba(107, 35, 64, .6);
    transition: transform .15s;
}
.dk-btn:active { transform: translateY(2px) scale(.96); }
.dk-ticket {
    position: relative; flex: 1; max-width: 250px; min-width: 0; padding: 8px 14px 9px; text-align: center;
    background: var(--paper); border: 2px solid var(--gold); border-radius: 12px;
    -webkit-mask: radial-gradient(circle 7px at 0 50%, transparent 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, transparent 96%, #000) right / 51% 100% no-repeat;
            mask: radial-gradient(circle 7px at 0 50%, transparent 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, transparent 96%, #000) right / 51% 100% no-repeat;
    box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px rgba(215, 168, 74, .5);
}
.dk-bulbs { display: flex; justify-content: center; gap: 5px; }
.dk-bulbs i { width: 7px; height: 7px; border-radius: 50%; background: #ead9c4; transition: all .3s; }
.dk-bulbs i.done { background: var(--gold-l); }
.dk-bulbs i.on { background: #ffd65a; box-shadow: 0 0 0 1.5px var(--gold), 0 0 8px 2px rgba(255, 210, 90, .9); transform: scale(1.25); }
.dk-text { margin: 5px 0 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-text b { font: 400 14px var(--f-disp); letter-spacing: .04em; }
.dk-dot { margin: 0 6px; color: var(--gold); }
#dkLabel { font: italic 600 14.5px var(--f-serif); }

/* ═══════════════ POP-OUT ═══════════════ */
.pop {
    position: fixed; inset: 0; z-index: 9500; display: flex; align-items: flex-end; justify-content: center;
    background: rgba(60, 18, 38, .45); opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s;
}
.pop.show { opacity: 1; visibility: visible; transition: opacity .35s; }
.pop-card {
    width: min(520px, 100%); height: calc(100% - 28px - var(--sat)); display: flex; flex-direction: column;
    background: var(--paper); border-radius: 26px 26px 0 0; border: 3px solid var(--gold); border-bottom: 0; overflow: hidden;
    transform: translateY(100%); transition: transform .45s cubic-bezier(.2, .9, .25, 1);
}
.pop.show .pop-card { transform: none; }
.pop-head {
    display: flex; align-items: center; gap: 10px; padding: 14px 16px; flex: none;
    background: repeating-linear-gradient(90deg, var(--t1, var(--pink)) 0 18px, #fff 18px 36px); border-bottom: 2px solid var(--gold);
}
.pop-head b { flex: 1; font: 400 20px var(--f-disp); }
.pop-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 2px solid var(--gold); color: var(--rasp); font-size: 17px; }
.pop-close { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; font-size: 15px; }
.pop-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.pop-body .sh-body { overflow: visible; -webkit-mask: none; mask: none; padding: 18px 22px calc(30px + var(--sab)); min-height: 100%; }

/* ═══════════════ MUSIK, TOAST, FX, LIGHTBOX ═══════════════ */
.music-toggle-btn {
    position: fixed; top: calc(12px + var(--sat)); right: 12px; z-index: 8000; width: 42px; height: 42px; border-radius: 50%;
    border: 0; display: none; place-items: center; background: var(--paper); color: var(--ink);
    box-shadow: 0 0 0 2px var(--gold), 0 6px 14px -6px rgba(107, 35, 64, .5);
}
body.opened .music-toggle-btn { display: grid; }
.music-toggle-btn svg { width: 19px; height: 19px; }
.music-toggle-btn.playing { animation: ping 2.2s ease-out infinite; }
.toast {
    position: fixed; left: 50%; top: calc(18px + var(--sat)); z-index: 9900; transform: translate(-50%, -140%);
    padding: 10px 18px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 800;
    transition: transform .4s cubic-bezier(.3, 1.4, .5, 1), opacity .3s; white-space: nowrap; pointer-events: none; opacity: 0;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.fx-layer { position: fixed; inset: 0; z-index: 9600; pointer-events: none; overflow: hidden; }
.bit { position: absolute; width: 8px; height: 11px; border-radius: 2px; animation: bit 1.4s cubic-bezier(.2, .7, .4, 1) forwards; }
.bit.heart { width: 12px; height: 12px; border-radius: 0; background: none !important; }
.bit.heart::before { content: '♥'; position: absolute; inset: -4px 0 0; font-size: 15px; color: inherit; }
.gallery-lightbox { position: fixed; inset: 0; z-index: 9700; display: none; align-items: center; justify-content: center; background: rgba(40, 10, 24, .92); opacity: 0; transition: opacity .3s; }
.lb-img-wrap { max-width: 92vw; max-height: 80vh; }
.lb-img-wrap img { max-width: 92vw; max-height: 80vh; border-radius: 14px; border: 3px solid var(--gold); display: block; }
.lb-close, .lb-prev, .lb-next { position: absolute; border: 0; background: var(--paper); color: var(--ink); width: 44px; height: 44px; border-radius: 50%; font-size: 22px; box-shadow: 0 0 0 2px var(--gold); }
.lb-close { top: calc(16px + var(--sat)); right: 16px; font-size: 16px; }
.lb-prev { left: 12px; top: 50%; }
.lb-next { right: 12px; top: 50%; }
.lb-counter { position: absolute; bottom: calc(22px + var(--sab)); left: 50%; transform: translateX(-50%); color: #fff; font-weight: 800; font-size: 13px; }
body.has-qr .dock { padding-right: 70px; }

/* ═══════════════ KEYFRAMES ═══════════════ */
@keyframes ping { 0% { box-shadow: 0 0 0 2px var(--gold), 0 0 0 2px rgba(215, 168, 74, .6); } 100% { box-shadow: 0 0 0 2px var(--gold), 0 0 0 14px rgba(215, 168, 74, 0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes bobRide { from { transform: translateY(calc(var(--hz) * -.22)); } to { transform: translateY(calc(var(--hz) * .22)); } }
@keyframes glow { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes twinkle { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(.72); } }
@keyframes drift { from { transform: translateX(-20vw); } to { transform: translateX(120vw); } }
@keyframes dash { to { stroke-dashoffset: -44; } }
@keyframes pinHop { 0%, 100% { transform: rotate(-45deg) translate(0, 0); } 50% { transform: rotate(-45deg) translate(4px, -4px); } }
@keyframes swipeHand { 0%, 100% { transform: translateX(-4px) rotate(-8deg); } 50% { transform: translateX(6px) rotate(8deg); } }
@keyframes popIn { from { opacity: 0; transform: scale(.9) translateY(-8px); } }
@keyframes bit { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--tx), calc(var(--ty) + 160px)) rotate(var(--rot)); opacity: 0; } }

/* ═══════════════ DESKTOP ═══════════════ */
@media (min-width: 760px) {
    .h-title { font-size: 34px; }
    .dk-ticket { max-width: 320px; }
    .stage { bottom: 84px; }
}

/* ═══════════════ REDUCED MOTION ═══════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .sunburst, .bulb, .mc-bulbs circle { animation: none !important; }
}