/* Komidi — undangan ulang tahun di pasar malam, lukisan cat air bergerak: langit senja ungu-merah muda, deretan tenda
   bergaris berlampu, bianglala yang berputar (gondola tetap tergantung tegak), komidi putar di depan, balon terbang.
   Dibuka: layar tertutup karcis masuk raksasa bertuliskan nama; karcis disobek dua di garis perforasi, pasar malam
   tampak mundur, bianglala menyala, konfeti jatuh, lalu papan pasar malam turun membawa nama dan usia. Saat pembuka
   digulir kamera melaju masuk ke komidi putar sampai layar memutih. Adegannya lapisan gambar (assets/img/*.webp)
   yang digerakkan CSS. */
@font-face { font-family: "Bagel Fat One"; src: url("fonts/bagel-fat-one.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/nunito.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: "Pacifico"; src: url("fonts/pacifico.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --bg: #fbf2e9; --card: #fffaf4; --ink: #33284a; --soft: #6c5f7d; --violet: #4b3a78; --violet2: #2f2452; --pink: #e0718b; --pink2: #b84e6a;
  --teal: #3f9a96; --mustard: #e8b54a; --cream: #fff3dc; --line: #eedfd4;
  --display: "Bagel Fat One", "Nunito", system-ui, sans-serif; --sans: "Nunito", system-ui, sans-serif; --script: "Pacifico", cursive;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--violet2); }
body { margin: 0; background: var(--violet2); color: var(--ink); font: 500 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
h1, h2, h3, p, figure { margin: 0; }
a { color: var(--pink2); }
:focus-visible { outline: 2px solid var(--mustard); outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.page { position: relative; z-index: 1; max-width: 480px; margin: 0 auto; min-height: 100vh; overflow: hidden; }
@media (min-width: 560px) { .page { box-shadow: 0 30px 80px rgba(20, 10, 40, .4); } }

/* ---------- Adegan: .stage berbanding 1536:2752 dan selalu menutup layar; posisi dalam persen.
   Urutan dari belakang: langit & tenda → bianglala (kaki SVG, roda, gondola) → komidi putar → balon → konfeti →
   karcis (dua belahan) → putih. Keadaan dasar = adegan akhir; sebelum dibuka karcis utuh menutup layar. ---------- */
.scene { position: fixed; top: 0; left: 50%; width: min(100%, 480px); height: 100%; transform: translateX(-50%); z-index: 0; pointer-events: none; overflow: hidden; contain: strict; background: #3a2d63; display: none; }
.js .scene { display: block; }
.scene-off .scene { visibility: hidden; }
.stage { position: absolute; left: 50%; top: 50%; height: max(100%, calc(min(100vw, 480px) * 1.7917)); aspect-ratio: 1536 / 2752; translate: -50% -50%; }
.ly { position: absolute; inset: 0; will-change: transform; transform-origin: 50% 70%; backface-visibility: hidden; }
.ly-bg > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.bintang i { position: absolute; width: .6%; aspect-ratio: 1; border-radius: 50%; background: #fff8e0; box-shadow: 0 0 6px 2px rgba(255, 240, 200, .7); }
.bintang i:nth-child(1) { left: 12%; top: 6%; } .bintang i:nth-child(2) { left: 30%; top: 12%; } .bintang i:nth-child(3) { left: 82%; top: 8%; } .bintang i:nth-child(4) { left: 64%; top: 4%; }
.bintang i:nth-child(5) { left: 90%; top: 19%; } .bintang i:nth-child(6) { left: 6%; top: 22%; } .bintang i:nth-child(7) { left: 46%; top: 3%; } .bintang i:nth-child(8) { left: 74%; top: 15%; }
/* Bianglala: pusat roda (50%, 28,9%) = titik temu kaki SVG. */
.kaki { position: absolute; inset: 0; width: 100%; height: 100%; }
.kaki path { fill: none; stroke: #f3e6cf; stroke-width: 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.roda { position: absolute; left: 9%; top: 6%; width: 82%; aspect-ratio: 1; }
.roda::after { content: ""; position: absolute; inset: -6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 226, 160, .32), rgba(255, 200, 150, .1) 70%, transparent); pointer-events: none; }
.putar { position: absolute; inset: 0; }
.putar > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.gw { position: absolute; inset: 0; }
.gw:nth-child(2) { --a: 0deg; } .gw:nth-child(3) { --a: 45deg; } .gw:nth-child(4) { --a: 90deg; } .gw:nth-child(5) { --a: 135deg; }
.gw:nth-child(6) { --a: 180deg; } .gw:nth-child(7) { --a: 225deg; } .gw:nth-child(8) { --a: 270deg; } .gw:nth-child(9) { --a: 315deg; }
.gw { rotate: var(--a); }
.gd { position: absolute; left: 50%; top: 2%; width: 13%; height: auto; max-width: none; translate: -50% 0; transform-origin: 50% 0; rotate: calc(var(--a) * -1); }
.komidi { position: absolute; left: 15%; top: 56%; width: 70%; height: auto; max-width: none; }
.sorot { position: absolute; left: 20%; top: 60%; width: 60%; height: 22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 228, 160, .45), transparent); }
.bl { position: absolute; top: 96%; width: 9%; height: auto; max-width: none; opacity: 0; }
.bl1 { left: 6%; } .bl2 { left: 20%; width: 7%; filter: hue-rotate(160deg); } .bl3 { left: 72%; filter: hue-rotate(60deg) saturate(1.3); } .bl4 { left: 86%; width: 7%; filter: hue-rotate(250deg); } .bl5 { left: 44%; width: 8%; filter: hue-rotate(120deg); }
.konfeti { position: absolute; inset: 0; }
.konfeti i { position: absolute; top: -4%; width: 1.4%; height: .7%; background: var(--c, var(--mustard)); opacity: 0; }
.konfeti i:nth-child(1) { left: 6%; } .konfeti i:nth-child(2) { left: 14%; --c: var(--pink); } .konfeti i:nth-child(3) { left: 23%; --c: var(--teal); } .konfeti i:nth-child(4) { left: 31%; }
.konfeti i:nth-child(5) { left: 40%; --c: #fff; } .konfeti i:nth-child(6) { left: 48%; --c: var(--pink); } .konfeti i:nth-child(7) { left: 57%; --c: var(--teal); } .konfeti i:nth-child(8) { left: 65%; }
.konfeti i:nth-child(9) { left: 73%; --c: var(--pink); } .konfeti i:nth-child(10) { left: 81%; --c: #fff; } .konfeti i:nth-child(11) { left: 88%; --c: var(--teal); } .konfeti i:nth-child(12) { left: 95%; }
/* Karcis: satu gambar dipotong dua di garis perforasi (zigzag). */
.tiket { position: absolute; left: 7%; top: 5.5%; width: 86%; aspect-ratio: 940 / 1742; }
.sobek { position: absolute; inset: 0; opacity: 0; }
.sobek img { width: 100%; height: 100%; max-width: none; }
.sobek.atas { clip-path: polygon(0 0, 100% 0, 100% 48.6%, 93.75% 51.4%, 87.5% 48.6%, 81.25% 51.4%, 75% 48.6%, 68.75% 51.4%, 62.5% 48.6%, 56.25% 51.4%, 50% 48.6%, 43.75% 51.4%, 37.5% 48.6%, 31.25% 51.4%, 25% 48.6%, 18.75% 51.4%, 12.5% 48.6%, 6.25% 51.4%, 0% 48.6%); transform: translate(-28%, -90%) rotate(-16deg); transform-origin: 0 50%; }
.sobek.bawah { clip-path: polygon(0% 48.6%, 6.25% 51.4%, 12.5% 48.6%, 18.75% 51.4%, 25% 48.6%, 31.25% 51.4%, 37.5% 48.6%, 43.75% 51.4%, 50% 48.6%, 56.25% 51.4%, 62.5% 48.6%, 68.75% 51.4%, 75% 48.6%, 81.25% 51.4%, 87.5% 48.6%, 93.75% 51.4%, 100% 48.6%, 100% 100%, 0 100%); transform: translate(26%, 90%) rotate(12deg); transform-origin: 100% 50%; }
.tk-isi { position: absolute; left: 14%; right: 14%; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--violet2); }
.atas .tk-isi { top: 18%; } .bawah .tk-isi { top: 62%; }
.tk-isi small { font: 900 min(2.2vmin, 11px)/1.3 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--pink2); }
.tk-isi b { font: 400 min(6.4vmin, 32px)/1.1 var(--display); overflow-wrap: anywhere; }
.bawah .tk-isi b { font: 400 min(4.8vmin, 24px)/1.25 var(--script); color: var(--teal); }
.terang { position: absolute; inset: 0; background: radial-gradient(circle at 50% 70%, #fff, #fff6ec 60%, var(--bg)); opacity: 0; }

/* Pembukaan: karcis disobek (1,0–2,3 dtk) → pasar malam mundur (1,1–4) → bianglala berpendar (2,6) → konfeti (3) →
   papan judul turun (3,6). */
.js .sobek { transition: transform 1.3s cubic-bezier(.5, 0, .3, 1) 1s, opacity .5s ease 1.9s; }
.js .ly { transition: transform 3s cubic-bezier(.5, 0, .2, 1) 1.1s; }
.js .roda::after { transition: opacity 1.4s ease 2.6s; }
.js:not(.is-open) .sobek { transform: none; opacity: 1; }
.js:not(.is-open) .ly { transform: scale(1.3); }
.js:not(.is-open) .roda::after { opacity: 0; }
.js.no-anim .sobek, .js.no-anim .ly, .js.no-anim .roda::after { transition: none; }
.js.no-anim .kartu, .js.no-anim .kartu-isi > *, .js.no-anim .pita, .js.no-anim .hero-pin > .mouse, .js.no-anim .konfeti i { animation: none !important; }

/* ---------- Sampul ---------- */
.caps { font: 900 11px/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--pink2); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--pink); color: #fff; text-decoration: none; cursor: pointer; font: 900 14px/1 var(--sans); letter-spacing: .06em; box-shadow: 0 5px 0 var(--pink2), 0 14px 26px rgba(80, 30, 60, .3); }
.btn svg { width: 20px; height: 20px; }
.btn.ghost { min-height: 40px; padding: 0 16px; background: transparent; color: var(--violet); border: 2px solid var(--violet); box-shadow: none; font-size: 13px; }
.btn.copied { background: var(--teal); color: #fff; border-color: var(--teal); }
.cover { position: relative; min-height: 100vh; min-height: 100svh; padding: 64px 26px 56px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; overflow: hidden; color: #fff;
  background: radial-gradient(120% 70% at 50% 100%, #e7899b, #7d5a9c 50%, var(--violet2)); }
.js .cover { position: fixed; inset: 0; z-index: 40; max-width: 480px; margin: 0 auto; transition: opacity .7s ease .2s; }
.js:not(.is-open) body { overflow: hidden; }
.js.is-open .cover { opacity: 0; pointer-events: none; }
.js.no-anim .cover { transition: none; }
.cover[hidden] { display: none; }
.cover-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover.has-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40, 20, 70, .66), rgba(40, 20, 70, .06) 38%, rgba(40, 20, 70, .1) 55%, rgba(40, 20, 70, .84)); }
.cover-top, .cover-bottom { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cover .caps { color: #ffd9a8; }
.names { font: 400 64px/1 var(--display); overflow-wrap: anywhere; text-shadow: 0 4px 0 var(--pink2), 0 10px 26px rgba(0, 0, 0, .3); }
.cover-age { font: 400 22px/1.2 var(--script); } .cover-age b { font: 400 34px/1 var(--display); color: var(--mustard); }
.to { font-size: 14px; opacity: .85; }
.guest-name { font: 400 26px/1.3 var(--script); overflow-wrap: anywhere; }
.memuat .cover .open { opacity: .55; pointer-events: none; }

/* ---------- Pembuka: papan pasar malam, menempel selama pembuka digulir. ---------- */
.js .hero { min-height: 260vh; min-height: 260svh; }
.hero-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; justify-content: center; padding-top: 5vh; }
.scene-off .hero-pin { visibility: hidden; }
.title-wrap { width: min(84%, 350px); }
.kartu { position: relative; transform-origin: 50% 0; }
.kartu > img { width: 100%; height: auto; }
.kartu-isi { position: absolute; left: 21%; right: 21%; top: 31%; bottom: 26%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
.kartu-isi .caps { font-size: 8.5px; letter-spacing: .2em; }
.t-name { font: 400 clamp(28px, 9vw, 40px)/1.05 var(--display); color: var(--violet); overflow-wrap: anywhere; }
.t-date { font: 800 11px/1.3 var(--sans); color: var(--soft); }
.pita { position: absolute; left: 30%; right: 30%; top: 83.5%; text-align: center; font: 400 clamp(17px, 5.4vw, 23px)/1.2 var(--script); color: var(--violet); }
.mouse { position: absolute; left: 50%; bottom: 3vh; width: 22px; height: 36px; margin-left: -11px; border: 2px solid #fff; border-radius: 12px; opacity: .9; }
.mouse::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: #fff; animation: gulir 1.6s ease-in-out infinite; }
html:not(.js) .hero-pin { position: relative; height: auto; padding: 40px 0; background: var(--violet2); } html:not(.js) .mouse { display: none; }

/* ---------- Isi: krem hangat dengan taburan titik lampu ---------- */
main > section:not(.hero) { position: relative; overflow: hidden; padding: 64px 22px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  background-color: var(--bg); background-image: radial-gradient(circle, rgba(232, 181, 74, .22) 0 2px, transparent 2.5px), radial-gradient(circle, rgba(224, 113, 139, .16) 0 2px, transparent 2.5px); background-size: 46px 46px, 46px 46px; background-position: 0 0, 23px 23px; }
.orn { pointer-events: none; }
.title { font: 400 32px/1.1 var(--display); color: var(--violet); }
.lead { font-size: 15.5px; line-height: 1.7; color: var(--soft); max-width: 24em; }
.k-label { font: 900 10px/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--pink2); }

/* Pengumuman: kartu beratap tenda bergaris berjumbai. */
.pengumuman { padding-top: 40px !important; }
.tenda { position: relative; width: 100%; margin-top: 30px; padding: 46px 22px 26px; border-radius: 0 0 22px 22px; background: var(--card); box-shadow: 0 16px 34px rgba(60, 30, 80, .12); }
.tenda::before { content: ""; position: absolute; left: -10px; right: -10px; top: -30px; height: 44px; border-radius: 14px 14px 4px 4px; background: repeating-linear-gradient(90deg, var(--pink) 0 26px, var(--cream) 26px 52px); box-shadow: 0 6px 12px rgba(80, 30, 60, .15); }
.tenda::after { content: ""; position: absolute; left: -10px; right: -10px; top: 14px; height: 14px; background: radial-gradient(circle at 13px 0, var(--pink) 12px, transparent 12.5px) 0 0 / 52px 14px repeat-x, radial-gradient(circle at 13px 0, var(--cream) 12px, transparent 12.5px) 26px 0 / 52px 14px repeat-x; }
.hi { margin: 4px 0 10px; font: 400 30px/1.1 var(--display); color: var(--violet); }
.message { font-size: 16px; line-height: 1.75; color: var(--soft); white-space: pre-line; }

/* Bintang pesta: foto bundar di cincin bianglala berlampu, usia di balon. */
.lingkar { position: relative; width: 74%; aspect-ratio: 1; margin: 6px 0 10px; padding: 5.5%; }
.lingkar::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, transparent 0 66%, #fff1d2 66.5% 70%, transparent 70.5%), repeating-conic-gradient(var(--teal) 0 7.5deg, var(--cream) 7.5deg 15deg); box-shadow: 0 16px 34px rgba(60, 30, 80, .2); }
.lingkar .foto { position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 6px solid #fff; background: linear-gradient(150deg, var(--pink), var(--violet)); display: grid; place-items: center; }
.lingkar .foto img { width: 100%; height: 100%; object-fit: cover; }
.lingkar .foto span { font: 400 110px/1 var(--display); color: #fff; }
.umur { position: absolute; right: -6%; bottom: 2%; width: 34%; aspect-ratio: .82; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50% 50% 48% 48%; background: radial-gradient(circle at 34% 28%, #ffd0db, var(--pink) 45%, var(--pink2)); color: #fff; box-shadow: 0 10px 20px rgba(120, 40, 70, .3); }
.umur::after { content: ""; position: absolute; left: 50%; top: 98%; width: 2px; height: 46px; background: var(--soft); opacity: .5; }
.umur b { font: 400 40px/1 var(--display); } .umur small { font: 900 9px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.bintang-pesta h2 { font: 400 28px/1.15 var(--display); color: var(--violet); overflow-wrap: anywhere; }
.parents { font-size: 15px; line-height: 1.6; color: var(--soft); } .parents b { color: var(--ink); }

/* Hitung mundur: sobekan karcis berlubang di sisi. */
.countdown { display: flex; gap: 8px; justify-content: center; }
.countdown div { width: 70px; padding: 14px 0 12px; display: flex; flex-direction: column; align-items: center; background: var(--c, var(--violet)); color: #fff;
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 7px, #000 7.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 7px, #000 7.5px) right / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%, transparent 7px, #000 7.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 7px, #000 7.5px) right / 51% 100% no-repeat; border-radius: 6px; }
.countdown div:nth-child(2) { --c: var(--pink); } .countdown div:nth-child(3) { --c: var(--teal); } .countdown div:nth-child(4) { --c: var(--mustard); }
.countdown b { font: 400 28px/1 var(--display); font-variant-numeric: tabular-nums; }
.countdown span { margin-top: 4px; font: 900 9px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; opacity: .9; }

/* Acara: karcis besar (gambar karcis), tanggal di atas perforasi, lokasi di bawahnya. */
.karcis { position: relative; width: 88%; aspect-ratio: 940 / 1742; margin-top: 6px; }
.karcis-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.karcis-isi { position: absolute; left: 15%; right: 15%; top: 10%; bottom: 9%; display: grid; grid-template-rows: 1fr 1fr; gap: 9%; }
.k-atas, .k-bawah { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.k-besar { font: 400 25px/1.15 var(--display); color: var(--violet); }
.k-jam { font: 400 20px/1.3 var(--script); color: var(--teal); }
.k-tempat { font-size: 14.5px; line-height: 1.55; color: var(--soft); overflow-wrap: anywhere; }
.aksi { margin-top: 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.aksi .btn { min-height: 38px; padding: 0 14px; font-size: 12.5px; box-shadow: 0 4px 0 var(--pink2); }
.aksi .btn.ghost { box-shadow: none; }
.aksi svg { width: 15px; height: 15px; }
.tema { width: 100%; padding: 30px 20px 20px; border-radius: 18px; background: var(--card); box-shadow: 0 10px 24px rgba(60, 30, 80, .1); position: relative; }
.tema p:last-child { font: 400 21px/1.35 var(--script); color: var(--violet); }
.umbul { position: absolute; left: 0; right: 0; top: 0; height: 26px; display: flex; justify-content: space-around; border-top: 2px solid var(--soft); }
.umbul i { width: 22px; height: 24px; background: var(--c, var(--pink)); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; }
.umbul i:nth-child(3n+2) { --c: var(--teal); } .umbul i:nth-child(3n) { --c: var(--mustard); }

/* Galeri: jendela gondola berbingkai merah muda. */
.grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid figure { padding: 6px; border-radius: 48% 48% 14px 14px / 30% 30% 14px 14px; background: var(--pink); box-shadow: 0 10px 20px rgba(80, 30, 60, .2); }
.grid figure:nth-child(3n+2) { background: var(--teal); } .grid figure:nth-child(3n) { background: var(--mustard); }
.grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 46% 46% 10px 10px / 28% 28% 10px 10px; }

.gift-list { width: 100%; display: grid; gap: 12px; }
.gift-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; background: var(--card); border: 2px dashed var(--line); text-align: left; }
.gift-card > div { flex: 1; min-width: 0; }
.gift-ic { flex: none; width: 36px; height: 36px; color: var(--pink); }
.bank { font: 900 11px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--teal); }
.number { font: 400 20px/1.3 var(--display); color: var(--violet); overflow-wrap: anywhere; }
.holder { font-size: 13px; color: var(--soft); overflow-wrap: anywhere; }

.form { width: 100%; display: grid; gap: 14px; padding: 22px; border-radius: 20px; background: var(--card); border: 2px solid var(--line); text-align: left; }
.field { display: grid; gap: 6px; border: 0; margin: 0; padding: 0; font-size: 14px; font-weight: 800; color: var(--soft); }
.field input, .field textarea { width: 100%; padding: 12px 14px; border: 2px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font: 600 16px/1.4 var(--sans); }
.opts { display: flex; gap: 10px; } .opt { flex: 1; } .opt input { position: absolute; opacity: 0; }
.opt span { display: block; padding: 11px; border: 2px solid var(--line); border-radius: 12px; text-align: center; color: var(--ink); cursor: pointer; background: #fff; }
.opt input:checked + span { border-color: var(--pink); background: rgba(224, 113, 139, .1); color: var(--pink2); }
.opt input:focus-visible + span { outline: 2px solid var(--mustard); outline-offset: 2px; }
.thanks .big { font: 400 26px/1.2 var(--display); color: var(--pink2); }
.note { color: var(--soft); font-size: 14px; }
.wishes-box { padding-top: 0 !important; }
.wishes-head { width: 100%; display: flex; justify-content: space-between; align-items: baseline; }
.wishes-head h2 { font: 400 22px/1.2 var(--display); color: var(--violet); } .wishes-head span { font-size: 13px; color: var(--soft); }
.wishes { width: 100%; list-style: none; margin: 0; padding: 0; max-height: 520px; overflow-y: auto; display: grid; gap: 10px; text-align: left; }
.wishes li { padding: 14px 16px; border-radius: 14px; background: var(--card); border: 2px solid var(--line); }
.wish-head { display: flex; gap: 8px; align-items: center; } .wish-head svg { width: 14px; height: 14px; color: var(--mustard); }
.tag { font-size: 10px; padding: 2px 8px; border-radius: 999px; background: rgba(224, 113, 139, .15); color: var(--pink2); font-weight: 800; }
.status { font-size: 12px; font-weight: 900; color: var(--teal); } .wish-text { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.wish-reply { margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--mustard); font-size: 14px; color: var(--soft); }

.closing { padding-bottom: 0 !important; color: #fff; background: radial-gradient(120% 80% at 50% 100%, #e7899b, #7d5a9c 55%, var(--violet2)) !important; }
.lepas { position: relative; width: 100%; height: 150px; }
.lepas img { position: absolute; bottom: 0; width: 54px; }
.lepas .b1 { left: 18%; } .lepas .b2 { left: 44%; width: 66px; filter: hue-rotate(160deg); } .lepas .b3 { right: 16%; filter: hue-rotate(60deg) saturate(1.3); }
.merci { font: 400 40px/1.1 var(--display); text-shadow: 0 3px 0 var(--pink2); }
.thanks-line { opacity: .9; max-width: 21em; }
.sign { font: 400 22px/1.4 var(--script); color: #ffd9a8; }
.komidi-kecil { width: 78%; margin-top: 18px; }
footer { position: relative; z-index: 1; padding: 18px 16px 90px; text-align: center; font-size: 12px; color: #cfc4e6; background: var(--violet2); }
footer a { color: #ffd9a8; }

.music-toggle { position: fixed; right: max(14px, calc(50% - 226px)); bottom: 16px; z-index: 50; width: 48px; height: 48px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--pink); color: #fff; cursor: pointer; box-shadow: 0 6px 0 var(--pink2), 0 10px 20px rgba(40, 20, 60, .3); }
.music-toggle svg { width: 20px; height: 20px; }
.js:not(.is-open) .music-toggle { display: none; }

/* ---------- Gerak ---------- */
.rv { opacity: 0; translate: 0 24px; }
.rv.in { opacity: 1; translate: 0 0; transition: opacity .9s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0) * 1ms), translate .9s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0) * 1ms); }
@media (prefers-reduced-motion: no-preference) {
  /* Berulang: bianglala berputar (gondola diputar balik supaya tetap tegak), komidi putar bernapas, sorot lampu
     berkedip, bintang berkelip, balon naik bergiliran. */
  .putar { animation: putar 48s linear infinite; }
  .gd { animation: balik 48s linear infinite; }
  .roda::after { animation: kedip 2.4s ease-in-out infinite alternate; }
  .komidi { animation: napas 3s ease-in-out infinite alternate; transform-origin: 50% 100%; }
  .sorot { animation: kedip 1.4s ease-in-out infinite alternate; }
  .bintang i { animation: kedip 2s ease-in-out infinite alternate; } .bintang i:nth-child(2n) { animation-delay: -1s; animation-duration: 2.8s; }
  .js.is-open .bl { animation: terbang 11s linear infinite; }
  .js.is-open .bl1 { animation-delay: 2.4s; } .js.is-open .bl2 { animation-delay: 4.2s; animation-duration: 13s; } .js.is-open .bl3 { animation-delay: 3s; animation-duration: 12s; }
  .js.is-open .bl4 { animation-delay: 6s; } .js.is-open .bl5 { animation-delay: 8s; animation-duration: 14s; }
  .js.is-open .konfeti i { animation: konfeti 3.4s cubic-bezier(.3, .4, .6, 1) both; animation-delay: calc(2.9s + var(--t, 0s)); }
  .konfeti i:nth-child(3n) { --t: .3s; } .konfeti i:nth-child(3n+1) { --t: .15s; } .konfeti i:nth-child(4n) { --t: .5s; }
  .js.is-open .kartu { animation: turun 1.3s 3.5s cubic-bezier(.3, 1.4, .5, 1) both, ayun 3.2s 4.8s ease-in-out infinite alternate; }
  .js.is-open .kartu-isi > * { animation: naik .8s both; } .js.is-open .kartu-isi > :nth-child(1) { animation-delay: 4.3s; } .js.is-open .kartu-isi > :nth-child(2) { animation-delay: 4.5s; } .js.is-open .kartu-isi > :nth-child(3) { animation-delay: 4.8s; }
  .js.is-open .pita { animation: naik .8s 5s both; }
  .js.is-open .hero-pin > .mouse { animation: naik 1s 5.4s both; }
  .music-toggle[aria-pressed="true"] svg { animation: napas .5s ease-in-out infinite alternate; }
  /* Bagian isi: ornamen bergerak saat bagiannya terlihat (.tampak). */
  .js .pengumuman:not(.tampak) .tenda::before { scale: 1 0; }
  .tenda::before { transition: scale .8s cubic-bezier(.3, 1.4, .5, 1); transform-origin: 50% 100%; }
  .bintang-pesta.tampak .lingkar::before { animation: putar 30s linear infinite; }
  .js .bintang-pesta:not(.tampak) .umur { translate: 0 80px; opacity: 0; }
  .umur { transition: translate 1.4s cubic-bezier(.3, 1.3, .5, 1) .3s, opacity .6s ease .3s; }
  .bintang-pesta.tampak .umur { animation: ayun 2.6s 1.8s ease-in-out infinite alternate; }
  .js .hitung:not(.tampak) .countdown div { rotate: -90deg; opacity: 0; }
  .countdown div { transition: rotate .9s cubic-bezier(.3, 1.4, .5, 1), opacity .5s ease; }
  .countdown div:nth-child(2) { transition-delay: .1s; } .countdown div:nth-child(3) { transition-delay: .2s; } .countdown div:nth-child(4) { transition-delay: .3s; }
  .js .acara:not(.tampak) .karcis { translate: 0 60px; rotate: -6deg; opacity: 0; }
  .karcis { transition: translate 1.1s cubic-bezier(.3, 1.2, .5, 1), rotate 1.1s cubic-bezier(.3, 1.2, .5, 1), opacity .6s ease; }
  .acara.tampak .umbul i { animation: kibar 1.6s ease-in-out infinite alternate; } .umbul i:nth-child(even) { animation-delay: -.8s !important; }
  .closing.tampak .lepas img { animation: lepas 6s ease-in infinite; } .closing.tampak .lepas .b2 { animation-delay: 1.4s; } .closing.tampak .lepas .b3 { animation-delay: 2.8s; }
  @supports (animation-timeline: view()) {
    .grid figure { animation: muncul linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  }
}
@keyframes putar { to { rotate: 360deg; } }
@keyframes balik { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes kedip { from { opacity: .45; } to { opacity: 1; } }
@keyframes napas { from { transform: scale(1); } to { transform: scale(1.012, .995); } }
@keyframes terbang { 0% { opacity: 0; transform: translate(0, 0) rotate(-4deg); } 8% { opacity: 1; } 50% { transform: translate(14px, -560%) rotate(4deg); } 90% { opacity: 1; } 100% { opacity: 0; transform: translate(-10px, -1150%) rotate(-3deg); } }
@keyframes konfeti { 0% { opacity: 0; transform: translateY(0) rotate(0); } 8% { opacity: 1; } 100% { opacity: 0; transform: translateY(16000%) rotate(720deg); } }
@keyframes turun { from { opacity: 0; transform: translateY(-90vh) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes ayun { from { rotate: -2deg; } to { rotate: 2deg; } }
@keyframes kibar { from { transform: scaleY(1) skewX(0); } to { transform: scaleY(.82) skewX(8deg); } }
@keyframes lepas { 0% { opacity: 0; transform: translateY(40px); } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-260px) rotate(6deg); } }
@keyframes naik { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes muncul { from { opacity: 0; scale: .8; } to { opacity: 1; scale: 1; } }
@keyframes gulir { 0% { translate: 0 0; opacity: 1; } 70% { translate: 0 12px; opacity: 0; } 100% { translate: 0 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .rv { opacity: 1; translate: none; } *, *::before, *::after { animation: none !important; } .js .ly, .js .sobek, .js .roda::after { transition: none; } }

@media (prefers-reduced-motion: no-preference) {
  /* Perjalanan gulir: --p (0→1) dipasang komidi.js setelah pembukaan; di p = 0 sama dengan keadaan akhir pembukaan.
     Kamera melaju masuk ke komidi putar (titik 50% 74%): bianglala naik keluar layar, tenda melebar, balon
     terlewati, cahaya komidi memenuhi layar. */
  .ready .ly { transition: none; }
  .js.is-open.ready .ly-bg { transform-origin: 50% 74%; transform: scale(calc(1 + var(--p, 0) * 1.1)); }
  .js.is-open.ready .ly-roda { transform-origin: 50% 0; transform: translateY(calc(var(--p, 0) * -38%)) scale(calc(1 + var(--p, 0) * .7)); }
  .js.is-open.ready .ly-komidi { transform-origin: 50% 74%; transform: scale(calc(1 + var(--p, 0) * 2.6)); }
  .js.is-open.ready .ly-balon { transform-origin: 50% 50%; transform: translateY(calc(var(--p, 0) * 30%)) scale(calc(1 + var(--p, 0) * 1.4)); }
  .ready .title-wrap { opacity: calc(1 - var(--p, 0) * 5); translate: 0 calc(var(--p, 0) * -160px); }
  .ready .hero-pin > .mouse { opacity: calc(.9 - var(--p, 0) * 6); }
  .ready .terang { opacity: calc((var(--p, 0) - .58) * 3); }
  @supports (animation-timeline: scroll()) {
    html.gulir-css.ready .ly-bg { animation: g-bg linear both; transform-origin: 50% 74%; }
    html.gulir-css.ready .ly-roda { animation: g-roda linear both; transform-origin: 50% 0; }
    html.gulir-css.ready .ly-komidi { animation: g-komidi linear both; transform-origin: 50% 74%; }
    html.gulir-css.ready .ly-balon { animation: g-balon linear both; }
    html.gulir-css.ready .terang { animation: g-terang linear both; }
    html.gulir-css.ready .title-wrap { animation: g-judul linear both; }
    html.gulir-css.ready .hero-pin > .mouse { animation: g-judul linear both; animation-timeline: scroll(root block); animation-range: 0 60vh; }
    html.gulir-css.ready .ly-bg, html.gulir-css.ready .ly-roda, html.gulir-css.ready .ly-komidi, html.gulir-css.ready .ly-balon, html.gulir-css.ready .terang, html.gulir-css.ready .title-wrap { animation-timeline: scroll(root block); animation-range: 0 160vh; animation-range: 0 160svh; }
  }
}
@keyframes g-bg { from { transform: none; } to { transform: scale(2.1); } }
@keyframes g-roda { from { transform: none; } to { transform: translateY(-38%) scale(1.7); } }
@keyframes g-komidi { from { transform: none; } to { transform: scale(3.6); } }
@keyframes g-balon { from { transform: none; } to { transform: translateY(30%) scale(2.4); } }
@keyframes g-terang { from, 58% { opacity: 0; } to { opacity: 1.2; } }
@keyframes g-judul { from { opacity: 1; translate: 0 0; } 20%, to { opacity: 0; translate: 0 -32px; } }