/* ════════════════════════════════════════════════════════════════
   BOBA POP — kedai bubble tea pastel, outline cokelat & stiker lucu
   ════════════════════════════════════════════════════════════════ */
:root {
    --dk: #5b3a29;
    --dk-s: #7c5a47;
    --cream: #fffaf0;
    --pink: #ffa3c2;
    --pink-d: #ff7aa6;
    --taro: #d9c8f7;
    --yellow: #ffd84d;
    --col: 490px;
    --f-b: 'Fredoka', 'Nunito', system-ui, sans-serif;
    --f-s: 'Pacifico', 'Brush Script MT', cursive;
    --ease: cubic-bezier(.22, .8, .24, 1);
    --bounce: cubic-bezier(.34, 1.56, .64, 1);
    --hard: 4px 5px 0 var(--dk);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    font: 400 15.5px/1.7 var(--f-b);
    color: var(--dk);
    background: var(--taro);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
body.no-scroll { overflow: hidden; height: 100vh; }
img { max-width: 100%; display: block; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; }
svg { display: block; }
.ico { width: 18px; height: 18px; flex: none; }

/* ── Jenis ornamen: satu variabel gambar + rasio, dipakai di mana saja ── */
.k-cup-taro { --img: url('cup-taro.svg'); --ar: .6; }
.k-cup-matcha { --img: url('cup-matcha.svg'); --ar: .6; }
.k-cup-pink { --img: url('cup-pink.svg'); --ar: .6; }
.k-cup-teh { --img: url('cup-teh.svg'); --ar: .6; }
.k-cloud { --img: url('cloud.svg'); --ar: 1.667; }
.k-cloudp { --img: url('cloud-pink.svg'); --ar: 1.667; }
.k-cloudsoft { --img: url('cloud-soft.svg'); --ar: 1.667; }
.k-sun { --img: url('sun.svg'); --ar: 1; }
.k-star { --img: url('star.svg'); --ar: 1; }
.k-heart { --img: url('heart.svg'); --ar: 1; }
.k-heartl { --img: url('heart-lilac.svg'); --ar: 1; }
.k-spark { --img: url('sparkle.svg'); --ar: 1; }
.k-sparky { --img: url('sparkle-y.svg'); --ar: 1; }
.k-flower { --img: url('flower.svg'); --ar: 1; }
.k-flowerp { --img: url('flower-pink.svg'); --ar: 1; }
.k-bubble { --img: url('bubble.svg'); --ar: 1; }
.k-ice { --img: url('ice.svg'); --ar: 1; }
.k-pearls { --img: url('pearls.svg'); --ar: 1.2; }
.k-pile { --img: url('pearl-pile.svg'); --ar: 3.478; }
.k-hill-far { --img: url('hill-far.svg'); --ar: 2.4; }
.k-hill-mid { --img: url('hill-mid.svg'); --ar: 2.82; }
.k-hill-matcha { --img: url('hill-matcha.svg'); --ar: 2.82; }
.c0 { --img: url('cup-taro.svg'); } .c1 { --img: url('cup-matcha.svg'); } .c2 { --img: url('cup-pink.svg'); } .c3 { --img: url('cup-teh.svg'); }

/* elemen gambar mutlak (hero, cover, panel samping) */
.it { position: absolute; display: block; left: var(--l); right: var(--rt); top: var(--t); bottom: var(--b); width: var(--w); aspect-ratio: var(--ar, 1); background: var(--img) center / contain no-repeat; pointer-events: none; }
.p-cup, .end-cup, .dome i, .phc { display: block; background: var(--img) center / contain no-repeat; aspect-ratio: var(--ar, .6); }

/* ── Kolom & bagian ── */
.stage { max-width: var(--col); margin: 0 auto; position: relative; overflow: hidden; background: var(--taro); }
.sec { --bg: var(--taro); position: relative; padding: 92px 24px 96px; text-align: center; background-color: var(--bg); background-image: url('pattern.svg'); background-size: 120px; }
.sec > * { position: relative; z-index: 2; }
.sec > .it { position: absolute; }
.sec::before { content: ''; position: absolute; left: 0; right: 0; top: -26px; height: 27px; background: var(--bg); -webkit-mask: url('wave-top.svg') 0 0 / 64px 27px repeat-x; mask: url('wave-top.svg') 0 0 / 64px 27px repeat-x; }
.sec-in { max-width: 380px; margin: 0 auto; }
.s-taro { --bg: #d9c8f7; } .s-peach { --bg: #ffdcc4; } .s-pink { --bg: #ffc6da; } .s-matcha { --bg: #cdeebd; }
.s-sky { --bg: #c4e6f6; } .s-cream { --bg: #fff1d6; } .s-cocoa { --bg: #5b3a29; background-image: none; color: #fff4e6; }
.sec-head { margin-bottom: 34px; }
.sec-sub { margin: 14px auto 0; max-width: 320px; font-size: 14px; line-height: 1.65; color: var(--dk-s); }

/* ── Tipografi ── */
.title { display: inline-block; padding: 6px 28px 12px; font: 400 29px/1.25 var(--f-s); color: var(--dk); background: #fff; border: 3px solid var(--dk); border-radius: 99px; box-shadow: var(--hard); rotate: -2deg; }
.names { font: 400 clamp(40px, 12vw, 54px)/1.2 var(--f-s); color: #fff; text-shadow: -3px -3px 0 var(--dk), 3px -3px 0 var(--dk), -3px 3px 0 var(--dk), 3px 3px 0 var(--dk), 0 -3px 0 var(--dk), 0 3px 0 var(--dk), -3px 0 0 var(--dk), 3px 0 0 var(--dk), 5px 7px 0 var(--dk); }
.names.sm { font-size: 40px; margin: 6px 0 4px; }
.salam { margin: 22px 0 10px; font: 600 16px/1.5 var(--f-b); color: var(--dk); }
.salam.w { color: #ffd84d; }
.body-c { max-width: 340px; margin: 0 auto 18px; font-size: 14.5px; color: var(--dk-s); }
.body-c.w { color: #fff4e6; opacity: .95; }
.date-l { display: inline-block; margin-top: 14px; padding: 5px 20px 6px; font: 600 16px/1.5 var(--f-b); background: #ffe27a; border: 3px solid var(--dk); border-radius: 14px; box-shadow: 3px 4px 0 var(--dk); rotate: -1.5deg; }

/* ── Foto bulat ala stiker ── */
.photo-s { position: relative; width: 150px; height: 150px; margin: 18px auto 12px; border-radius: 50%; border: 5px solid #fff; box-shadow: 0 0 0 3px var(--dk), 5px 7px 0 3px var(--dk); background: linear-gradient(160deg, #f0e4ff, #ffc3d9); overflow: hidden; }
.photo-s img { width: 100%; height: 100%; object-fit: cover; }
.photo-s.mono { display: grid; place-items: center; color: var(--dk); }
.photo-s.mono span { font: 400 48px/1 var(--f-s); }
.photo-s.pk { background: linear-gradient(160deg, #ffe3ee, #ffb3cc); }

/* ── Tombol ── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 12px 26px; border: 3px solid var(--dk); border-radius: 99px;
    font: 600 14px/1.2 var(--f-b); letter-spacing: .03em; text-decoration: none; cursor: pointer;
    color: var(--dk); background: var(--pink);
    box-shadow: 0 5px 0 var(--dk);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s; -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--dk); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--dk); }
.btn.sm { padding: 9px 20px; font-size: 13px; background: #bfe3ff; }
.btn.full { width: 100%; }
.btn:disabled { opacity: .7; cursor: default; transform: none; }

/* ── Musik, gelembung, toast ── */
.music-toggle-btn { position: fixed; bottom: 22px; right: max(14px, calc(50vw - var(--col) / 2 + 14px)); z-index: 1002; width: 44px; height: 44px; padding: 0; border: 3px solid var(--dk); border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: #fff; color: var(--dk); box-shadow: 0 4px 0 var(--dk); 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; background: var(--pink); }
@keyframes spinSlow { to { transform: rotate(360deg); } }
.floaties { position: fixed; inset: 0; z-index: 900; pointer-events: none; overflow: hidden; }
.fl { position: absolute; bottom: -50px; width: var(--s); aspect-ratio: 1; opacity: 0; background: center / contain no-repeat; animation: rise var(--d) linear var(--w) infinite; will-change: transform; }
.fl.f-b { background-image: url('bubble.svg'); }
.fl.f-h { background-image: url('heart.svg'); }
.fl.f-s { background-image: url('star.svg'); }
.fl.f-p { background: #7a4e36; border: 2px solid var(--dk); border-radius: 50%; width: calc(var(--s) * .6); }
@keyframes rise { 0% { transform: translate3d(0, 0, 0) rotate(0); opacity: 0; } 10% { opacity: .9; } 85% { opacity: .8; } 100% { transform: translate3d(var(--x), -112vh, 0) rotate(40deg); opacity: 0; } }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 8000; transform: translate(-50%, 24px); padding: 11px 22px; border-radius: 99px; background: #fff; border: 3px solid var(--dk); box-shadow: 0 4px 0 var(--dk); color: var(--dk); font-size: 13.5px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity .3s, transform .4s var(--bounce); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* muncul memantul saat digulir */
[data-reveal] { opacity: 0; transform: translateY(28px) scale(.9); transition: opacity .7s ease var(--dl, 0s), transform .9s var(--bounce) var(--dl, 0s); }
[data-reveal].shown { opacity: 1; transform: none; }
.zi { animation: zoomIn .9s var(--bounce) var(--dl, 0s) both; }
@keyframes zoomIn { from { opacity: 0; transform: scale(.45) translateY(24px); } to { opacity: 1; transform: none; } }

/* ornamen pop (dipakai di cover & hero) */
.pp { position: absolute; left: var(--l); top: var(--t); width: var(--w); rotate: var(--r); pointer-events: none; }
.pp b { display: block; aspect-ratio: var(--ar, 1); background: var(--img) center / contain no-repeat; }
@keyframes pop { 0% { opacity: 0; transform: scale(0) rotate(-50deg); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }

/* ════════════════════════════════════════════════════════════════
   COVER
   ════════════════════════════════════════════════════════════════ */
.side { display: none; }
.cover { position: fixed; inset: 0; z-index: 6000; display: grid; place-items: center; overflow: hidden; background: linear-gradient(180deg, #d9c8f7 0%, #f6cdee 45%, #ffd6e2 72%, #ffe6cc 100%); transition: opacity 1.2s ease, transform 1.2s var(--ease); }
.cover::before { content: ''; position: absolute; inset: 0; background: url('pattern.svg') 0 0 / 120px; opacity: .8; }
.cover.open { opacity: 0; transform: scale(1.12); pointer-events: none; }
.cv-cloud { z-index: 0; }
.cv-cloud.a { --l: -8%; --t: 8%; --w: 130px; animation: drift 16s ease-in-out infinite alternate; }
.cv-cloud.b { --l: 70%; --t: 52%; --w: 120px; animation: drift 20s ease-in-out -6s infinite alternate-reverse; }
@keyframes drift { to { transform: translateX(26px); } }
.cv-hill { --l: -10%; --b: -36px; --w: 120%; z-index: 0; }
.cvp { z-index: 1; }
.cover .cvp { animation: pop .8s var(--bounce) var(--d) both; }
.cover .cvp b { animation: bob 3.6s ease-in-out calc(var(--d) + 1s) infinite; }
.cover-in { position: relative; z-index: 3; width: 100%; max-width: 340px; padding: 0 12px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cv-badge { padding: 6px 20px; font: 600 12px/1.4 var(--f-b); letter-spacing: .2em; text-transform: uppercase; background: #fff; border: 3px solid var(--dk); border-radius: 99px; box-shadow: 3px 4px 0 var(--dk); rotate: -2deg; }
.cv-cup { --ch: clamp(240px, 40vh, 340px); width: calc(var(--ch) * .6); height: var(--ch); margin: 6px auto 8px; }
.cv-bob { position: relative; width: 100%; height: 100%; animation: bob 4.2s ease-in-out 1.4s infinite; }
.cv-cupimg { position: absolute; inset: 0; background: url('cup-sleeve.svg') center / contain no-repeat; }
.cv-sleeve { position: absolute; left: 21%; width: 58%; top: 62%; height: 20%; display: flex; flex-direction: column; align-items: center; justify-content: center; font: 400 calc(var(--ch) * .065)/1.08 var(--f-s); color: var(--dk); }
.cv-sleeve i { font-style: normal; font-size: .62em; color: #e5557f; line-height: 1; }
.cv-cup.lg .cv-sleeve { font-size: calc(var(--ch) * .05); }
.cv-to { margin-bottom: 14px; padding: 8px 22px 9px; font-size: 12.5px; line-height: 1.5; color: var(--dk-s); background: #fff; border: 3px solid var(--dk); border-radius: 20px; box-shadow: 3px 4px 0 var(--dk); max-width: 100%; }
.cv-to b { display: block; font: 600 17px/1.35 var(--f-b); color: var(--dk); overflow-wrap: anywhere; }
.btn-open { background: var(--yellow); }
.btn-open .ico { animation: beat 1.8s ease-in-out infinite; }
@keyframes beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* ════════════════════════════════════════════════════════════════
   HERO — zoom out berlapis (jauh → dekat), lalu ornamen pop satu per satu
   ════════════════════════════════════════════════════════════════ */
.s-hero { --bg: #ffd9e8; min-height: max(100svh, 740px); padding: 0; overflow: hidden; background: linear-gradient(180deg, #d6c4f6 0%, #f2cdf0 36%, #ffd9e6 62%, #ffe8cf 100%); }
.s-hero::before { display: none; }
.s-hero > .zg, .s-hero > .pops { position: absolute !important; inset: 0; pointer-events: none; }
.zg { z-index: 0 !important; opacity: 0; transform-origin: 50% 66%; }
.pops { z-index: 1 !important; }
.hero-in { z-index: 3 !important; padding: 92px 24px 320px; }
.g1 { --z: 1.3; --zd: .25s; } .g2 { --z: 1.7; --zd: .15s; } .g3 { --z: 2.2; --zd: .1s; } .g4 { --z: 2.9; --zd: .05s; } .g5 { --z: 3.9; --zd: 0s; }
body.opened .zg { animation: zg 6.4s cubic-bezier(.22, .62, .2, 1) var(--zd) both; will-change: transform, opacity; }
body.opened .g5 { animation-name: zgBlur; }
body.opened .g4 { animation-name: zgBlurS; }
@keyframes zg { 0% { opacity: 0; transform: scale(var(--z)); } 16% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
@keyframes zgBlur { 0% { opacity: 0; transform: scale(var(--z)); filter: blur(8px); } 16% { opacity: 1; } 75% { filter: blur(0); } 100% { opacity: 1; transform: scale(1); filter: blur(0); } }
@keyframes zgBlurS { 0% { opacity: 0; transform: scale(var(--z)); filter: blur(4px); } 16% { opacity: 1; } 75% { filter: blur(0); } 100% { opacity: 1; transform: scale(1); filter: blur(0); } }
body.opened .g4 .it { animation: bob 4.6s ease-in-out 6.4s infinite; }
body.opened .g4 .it:nth-child(2) { animation-delay: 7.6s; }
body.opened .g4 .it:nth-child(3) { animation-delay: 8.4s; }
body.opened .g3 .k-ice { animation: sway 5s ease-in-out 6.4s infinite; }

/* ornamen: pop satu per satu setelah zoom out hampir selesai */
body.opened .pops .pp { animation: pop .8s var(--bounce) var(--d) both; }
body.opened .pp b { animation: bob 3.6s ease-in-out calc(var(--d) + 1s) infinite; }
.pops .pp { opacity: 0; }
body.opened .pops .pp { opacity: 1; }
.pops .pp:nth-child(even) b { animation-direction: reverse; }

/* teks hero menyusul terakhir */
.hz { opacity: 0; }
body.opened .hz { animation: hzPop .95s var(--bounce) var(--dl) both; }
@keyframes hzPop { from { opacity: 0; transform: scale(.4) translateY(30px); } to { opacity: 1; transform: none; } }
.hero-k { display: inline-block; padding: 5px 18px; font: 600 12px/1.4 var(--f-b); letter-spacing: .24em; text-transform: uppercase; background: #fff; border: 3px solid var(--dk); border-radius: 99px; box-shadow: 3px 4px 0 var(--dk); }
.hero-photo { width: 156px; height: 156px; margin: 22px auto 16px; }
.hero-photo.mono span { font-size: 42px; }

/* ════════════════════════════════════════════════════════════════
   ISI
   ════════════════════════════════════════════════════════════════ */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: -12px 0 12px; }
.tr-i { position: relative; padding: 0; border: 4px solid #fff; aspect-ratio: 1 / 1.1; border-radius: 26px; overflow: hidden; background: #efe4ff; cursor: pointer; box-shadow: 0 0 0 3px var(--dk), 4px 6px 0 3px var(--dk); -webkit-tap-highlight-color: transparent; }
.tr-i.t0 { rotate: -4deg; } .tr-i.t1 { margin-top: 16px; rotate: 2deg; } .tr-i.t2 { rotate: 4deg; }
.tr-i img { width: 100%; height: 100%; object-fit: cover; }
.tr-i.ph { display: grid; place-items: center; cursor: default; }
.tr-i.ph .phc { width: 52%; }
.tr-i.t1.ph { background: #d7f2c9; } .tr-i.t2.ph { background: #ffd0e0; }
.bubble-card { position: relative; margin-top: 26px; padding: 22px 20px 20px; background: #fff; border: 3px solid var(--dk); border-radius: 28px; box-shadow: 5px 6px 0 var(--dk); }
.bubble-card::before { content: ''; position: absolute; left: 50%; top: -13px; width: 22px; height: 22px; margin-left: -11px; background: #fff; border-left: 3px solid var(--dk); border-top: 3px solid var(--dk); border-radius: 5px 0 0 0; rotate: 45deg; }
.verse-t { font: 500 14.5px/1.8 var(--f-b); }
.verse-s { margin-top: 12px; font-size: 13px; font-weight: 600; color: #e5557f; }
#salam { padding-bottom: 100px; }

.person { max-width: 320px; margin: 0 auto; }
.p-photo { width: 156px; height: 156px; margin: 4px auto 0; overflow: visible; }
.p-photo > span { position: absolute; inset: 0; display: grid; place-items: center; font: 400 66px/1 var(--f-s); }
.p-photo.mono { overflow: visible; }
.p-cup { position: absolute; right: -34px; bottom: -14px; width: 56px; rotate: 10deg; animation: bob 3.8s ease-in-out infinite; }
.tag { position: relative; z-index: 1; display: inline-block; margin: -10px 0 8px; padding: 3px 18px; font: 600 12px/1.5 var(--f-b); letter-spacing: .16em; text-transform: uppercase; background: #bfe3ff; border: 3px solid var(--dk); border-radius: 99px; box-shadow: 2px 3px 0 var(--dk); rotate: -2deg; }
.tag.pk { background: #ffb3cc; rotate: 2deg; }
.p-name { font: 400 28px/1.3 var(--f-s); }
.p-par { margin-top: 6px; font-size: 14.5px; line-height: 1.7; }
.p-par b { font-weight: 600; }
.amp-h { display: block; width: 50px; height: 50px; margin: 22px auto 24px; background: url('heart.svg') center / contain no-repeat; }
#mempelai { padding-bottom: 110px; }

.dome-w { position: relative; width: min(78%, 290px); margin: 14px auto 52px; }
.straw { position: absolute; left: 56%; top: -62px; width: 20px; height: 120px; border: 3px solid var(--dk); border-radius: 10px; background: repeating-linear-gradient(135deg, #ff8fb1 0 9px, #fff 9px 18px); rotate: 16deg; }
.dome { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 50% 50% 28px 28px / 62% 62% 28px 28px; border: 4px solid var(--dk); background: #fff; overflow: hidden; box-shadow: 6px 8px 0 var(--dk); }
.dome img { width: 100%; height: 100%; object-fit: cover; }
.dome.none { display: grid; place-items: end center; background: linear-gradient(180deg, #fff, #ffe9f1); }
.dome.none i { width: 46%; margin-bottom: 8%; }
#countdown { padding-top: 90px; padding-bottom: 110px; }
.quote-s { margin: 16px auto 24px; max-width: 300px; font-size: 13.5px; line-height: 1.7; color: var(--dk-s); }
.cd { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 28px; }
.cd > div { padding: 10px 2px 8px; background: #fff; border: 3px solid var(--dk); border-radius: 20px; box-shadow: 3px 4px 0 var(--dk); }
.cd .c1 { rotate: -3deg; } .cd .c2 { background: #ffe27a; rotate: 2deg; } .cd .c3 { background: #bfe3ff; rotate: -2deg; } .cd .c4 { background: #cdeebd; rotate: 3deg; }
.cd b { display: block; font: 700 28px/1.15 var(--f-b); font-variant-numeric: tabular-nums; }
.cd span { display: block; font-size: 12px; font-weight: 500; }

.event { position: relative; max-width: 360px; margin: 0 auto 30px; padding: 36px 22px 26px; background: var(--cream); border: 3px solid var(--dk); border-radius: 28px; box-shadow: 6px 7px 0 var(--dk); }
.event::before { content: ''; position: absolute; inset: 8px; border: 2px dashed #e2c9a0; border-radius: 20px; pointer-events: none; }
.event.e2 { rotate: 0.8deg; }
.stick { position: absolute; top: -15px; right: 20px; padding: 3px 14px; font: 600 11.5px/1.5 var(--f-b); letter-spacing: .08em; text-transform: uppercase; background: #ffe27a; border: 3px solid var(--dk); border-radius: 99px; box-shadow: 2px 3px 0 var(--dk); rotate: 5deg; }
.stick.pk { background: #ffb3cc; }
.ev-t { font: 400 30px/1.3 var(--f-s); margin-bottom: 12px; }
.ev-l { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; font-size: 14.5px; }
.ev-l li { display: flex; align-items: center; justify-content: flex-start; gap: 12px; text-align: left; }
.ev-l .ico { width: 30px; height: 30px; padding: 5px; border-radius: 50%; background: #cdeebd; border: 2.5px solid var(--dk); color: var(--dk); }
.loc { max-width: 380px; margin: 40px auto 0; }
.map { height: 220px; border-radius: 26px; border: 3px solid var(--dk); box-shadow: 5px 6px 0 var(--dk); overflow: hidden; margin-bottom: 24px; z-index: 0; }
.loc-name { font: 600 19px/1.4 var(--f-b); }
.loc-addr { margin: 4px 0 18px; font-size: 14px; color: var(--dk-s); }
#acara { padding-bottom: 110px; }

.tline { list-style: none; margin: 0 auto; padding: 0; max-width: 360px; position: relative; text-align: left; }
.tline::before { content: ''; position: absolute; left: 21px; top: 10px; bottom: 10px; border-left: 3px dashed var(--dk); }
.tl-i { position: relative; display: flex; gap: 16px; margin-bottom: 28px; }
.tl-i:last-child { margin-bottom: 0; }
.tl-dot { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 700 18px/1 var(--f-b); color: #fff; background: #7a4e36; border: 3px solid var(--dk); box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .15), inset 4px 4px 0 rgba(255, 255, 255, .18); }
.tl-c { flex: 1; padding: 14px 18px 16px; background: #fff; border: 3px solid var(--dk); border-radius: 6px 22px 22px 22px; box-shadow: 4px 5px 0 var(--dk); }
.tl-c h3 { font: 400 22px/1.3 var(--f-s); margin-bottom: 3px; }
.tl-c p { font-size: 14px; line-height: 1.7; color: var(--dk-s); }
#kisah { padding-bottom: 110px; }

.gal { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 400px; margin: 0 auto; }
.gal-i { position: relative; padding: 0; border: 5px solid #fff; border-radius: 24px; overflow: hidden; aspect-ratio: 1 / 1.15; background: #ffd9e6; cursor: pointer; box-shadow: 0 0 0 3px var(--dk), 4px 6px 0 3px var(--dk); -webkit-tap-highlight-color: transparent; }
.gal-i.g0 { grid-column: span 2; aspect-ratio: 16 / 10; rotate: -1deg; }
.gal-i.g1 { rotate: 1.5deg; } .gal-i.g2 { rotate: -1.5deg; } .gal-i.g4 { rotate: 1deg; } .gal-i.g5 { rotate: -1deg; }
.gal-i.g3 { border-radius: 90px 90px 24px 24px; }
.gal-i img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gal-i:hover img { transform: scale(1.05); }
.gal-i.ph { display: grid; place-items: center; cursor: default; }
.gal-i.ph .phc { width: 34%; }
.gal-i.g0 .phc { width: 20%; }
.gal-i.ph.g1 { background: #d7f2c9; } .gal-i.ph.g2 { background: #cfe7ff; } .gal-i.ph.g3 { background: #e6d9fb; } .gal-i.ph.g4 { background: #ffe2c2; }
#galeri { padding-bottom: 110px; }

/* ── Form & ucapan ── */
.card { max-width: 400px; margin: 0 auto; padding: 26px 22px; background: #fff; border: 3px solid var(--dk); border-radius: 28px; box-shadow: 6px 7px 0 var(--dk); text-align: left; }
.f-l { display: block; margin: 16px 0 6px; font: 600 12px/1.3 var(--f-b); letter-spacing: .14em; text-transform: uppercase; color: #e5557f; }
.form .f-l:first-of-type { margin-top: 0; }
.f-in { width: 100%; padding: 12px 14px; border: 2.5px solid var(--dk); border-radius: 16px; background: var(--cream); color: var(--dk); font: 400 15px/1.5 var(--f-b); outline: none; transition: box-shadow .2s, background .2s; resize: vertical; }
.f-in:focus { background: #fff; box-shadow: 0 0 0 4px rgba(255, 163, 194, .7); }
.choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ch { position: relative; }
.ch input { position: absolute; opacity: 0; pointer-events: none; }
.ch span { display: block; padding: 10px 4px; text-align: center; font-size: 13px; font-weight: 500; border: 2.5px solid var(--dk); border-radius: 16px; background: var(--cream); cursor: pointer; transition: transform .2s var(--bounce), background .2s; }
.ch input:checked + span { background: var(--pink); transform: translateY(-2px); box-shadow: 0 3px 0 var(--dk); }
.ch input:focus-visible + span { box-shadow: 0 0 0 4px rgba(255, 163, 194, .7); }
.form .btn { margin-top: 22px; }

.wish-head { display: flex; align-items: center; justify-content: space-between; max-width: 400px; margin: 46px auto 16px; }
.wish-head h3 { font: 400 28px/1.3 var(--f-s); }
.wh-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.wh-live i { width: 8px; height: 8px; border-radius: 50%; background: #3fbf6a; border: 1.5px solid var(--dk); animation: live 1.6s ease-in-out infinite; }
@keyframes live { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.wishes { max-width: 400px; margin: 0 auto; display: grid; gap: 14px; max-height: 500px; overflow-y: auto; padding: 4px 8px 8px 4px; text-align: left; overscroll-behavior: contain; }
.wish-item { --av: var(--pink); display: flex; gap: 12px; padding: 14px; background: #fff; border: 2.5px solid var(--dk); border-radius: 20px; box-shadow: 3px 4px 0 var(--dk); }
.wish-item.new { animation: wishIn .7s var(--bounce) both; }
@keyframes wishIn { from { opacity: 0; transform: translateY(-14px) scale(.9); } to { opacity: 1; transform: none; } }
.wish-avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--av); color: #fff; border: 2.5px solid var(--dk); font: 600 18px/1 var(--f-b); text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.wish-body { min-width: 0; flex: 1; }
.wish-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wish-name { font: 600 15px/1.3 var(--f-b); overflow-wrap: anywhere; }
.wish-badge { padding: 1px 10px; border-radius: 99px; border: 2px solid var(--dk); font-size: 11px; font-weight: 600; }
.wish-badge.hadir { background: #cdeebd; }
.wish-badge.tidak { background: #ffc6c6; }
.wish-badge.ragu { background: #ffe9a8; }
.wish-message { margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--dk-s); overflow-wrap: anywhere; }
.wish-time { display: block; margin-top: 6px; font-size: 12px; color: #a98876; }
.wish-empty { text-align: center; padding: 20px; color: var(--dk-s); }
#rsvp { padding-bottom: 120px; }

/* ── Kado (partial) ── */
.gift-box { max-width: 420px; margin: 0 auto; border: 3px solid var(--dk); border-radius: 28px; background: #fff; overflow: hidden; color: var(--dk); text-align: left; box-shadow: 6px 7px 0 var(--dk); }
.gift-wrap .gs-heading h2 { font-family: var(--f-s) !important; font-weight: 400 !important; font-size: 28px !important; color: var(--dk) !important; }
.gift-wrap .gs-heading h2::after { background: var(--pink) !important; }
.gift-wrap .gs-card, .gift-wrap .gs-bank-card { border: 2.5px solid var(--dk) !important; border-radius: 18px !important; }
.gift-wrap .gs-btn, .gift-wrap .gs-bank-copy { border-radius: 99px !important; font-family: var(--f-b) !important; border: 2.5px solid var(--dk) !important; }
.gift-wrap .gs-btn-buy { background: var(--pink) !important; color: var(--dk) !important; }
.gift-wrap .gs-bank-logo { background: #ffe1ec !important; color: var(--dk) !important; }
#kado { padding-bottom: 110px; }

/* ── Penutup ── */
.end { padding-top: 96px; padding-bottom: 190px; }
.sec > .end-pile { --l: -4%; --b: -10px; --w: 108%; z-index: 1; }
.end-cup { width: 84px; margin: 0 auto 8px; animation: bob 4s ease-in-out infinite; }
.fam { margin: 22px 0 26px; display: grid; gap: 14px; font-size: 14.5px; }
.fam span { display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #ffd84d; }
.end-credit { font-size: 12.5px; opacity: .8; }

/* ── Lightbox ── */
.gallery-lightbox { display: none; position: fixed; inset: 0; z-index: 7000; align-items: center; justify-content: center; background: rgba(60, 36, 24, .92); opacity: 0; transition: opacity .3s; }
.lb-img-wrap img { max-width: 92vw; max-height: 80vh; border: 6px solid #fff; border-radius: 18px; }
.lb-close, .lb-prev, .lb-next { position: absolute; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--dk); display: grid; place-items: center; background: #fff; color: var(--dk); font: 600 22px/1 var(--f-b); cursor: pointer; box-shadow: 0 3px 0 var(--dk); }
.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-size: 14px; letter-spacing: .1em; }

/* ════════════════════════════════════════════════════════════════
   DESKTOP: panel visual di kiri (tetap), undangan di kolom kanan
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
    .side { display: block; position: fixed; top: 0; bottom: 0; left: 0; right: var(--col); z-index: 1; overflow: hidden; background: #d9c8f7; }
    .side-photo { position: absolute; inset: 0; background: center / cover no-repeat; animation: zoomSlow 20s ease-in-out infinite alternate; }
    .side-photo.none { background: linear-gradient(180deg, #d9c8f7 0%, #f6cdee 50%, #ffd6e2 80%, #ffe6cc 100%); animation: none; }
    .side-photo.none ~ .side-shade { display: none; }
    .side-photo.none ~ .side-in { bottom: auto; top: 13vh; }
    .side-photo.none ~ .side-in .sd-k { color: var(--dk); }
    .side-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(60, 36, 24, 0) 40%, rgba(60, 36, 24, .55)); }
    .side-in { position: absolute; left: 0; right: 0; bottom: 12vh; padding: 0 40px; text-align: center; color: #fff; }
    .sd-k { font: 600 15px/1.4 var(--f-b); letter-spacing: .26em; text-transform: uppercase; }
    .sd-n { margin: 14px 0 16px; font: 400 clamp(44px, 6vw, 88px)/1.15 var(--f-s); text-shadow: -3px -3px 0 var(--dk), 3px -3px 0 var(--dk), -3px 3px 0 var(--dk), 3px 3px 0 var(--dk), 0 4px 0 var(--dk), 5px 7px 0 var(--dk); }
    .sd-n i { font-style: normal; }
    .sd-d { display: inline-block; padding: 5px 20px; font: 600 16px/1.5 var(--f-b); color: var(--dk); background: #ffe27a; border: 3px solid var(--dk); border-radius: 14px; box-shadow: 3px 4px 0 var(--dk); }
    .stage { margin-left: auto; margin-right: 0; width: var(--col); position: relative; z-index: 2; box-shadow: -10px 0 0 var(--dk); }
    .cover { left: auto; right: 0; width: var(--col); }
    .music-toggle-btn { right: 18px; }
    .toast { left: calc(100% - var(--col) / 2); }
    .floaties { left: auto; width: var(--col); }
}
@keyframes zoomSlow { to { transform: scale(1.07); } }

@media (max-height: 700px) {
    .cv-cup { --ch: 232px; margin: 2px auto; }
    .cv-to { margin-bottom: 10px; padding: 5px 18px 6px; }
}
@media (max-width: 360px) {
    .names { font-size: 38px; }
    .cd b { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
    [data-reveal] { opacity: 1; transform: none; }
    .zg, .hz, .pops .pp { opacity: 1; }
    .floaties { display: none; }
}