/* Kelana — undangan pernikahan bertema perjalanan mobil & motor retro, gaya poster 1970-an bergerak: kanopi pom bensin
   tua berlampu bohlam di depan jalan berjajar palem menuju matahari terbenam. Saat dibuka senja menyala (bohlam kanopi
   hidup berurutan dari atas), mobil pengantin masuk dari kiri dan motor café racer dari kanan, lampu depannya menyala,
   lalu papan nama bergantung turun dari kanopi. Selama pembuka digulir kamera melaju di antara keduanya menuju matahari
   (mobil lalu motor tancap gas ke arah hadapnya dan berpapasan keluar layar, kanopi terlewati) sampai layar memutih. Adegannya lapisan gambar
   (assets/img/*.webp) yang digerakkan CSS. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 700; src: url("fonts/fraunces.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300 700; src: url("fonts/fraunces-italic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Pacifico"; src: url("fonts/pacifico.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Special Elite"; src: url("fonts/special-elite.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --bg: #f4e6cc; --bg2: #fbf3e2; --ink: #3a2a1f; --soft: #765f4b; --rust: #b4472a; --orange: #e07b39; --mustard: #e9a93a;
  --teal: #2f6b68; --teal2: #1f4a48; --card: #fffaf0; --line: #e6d3b3; --sky: #f6c88f;
  --stripes: linear-gradient(180deg, var(--mustard) 0 33.3%, var(--orange) 33.3% 66.6%, var(--rust) 66.6%);
  --display: "Fraunces", Georgia, serif;
  --serif: "Fraunces", Georgia, serif;
  --script: "Pacifico", "Fraunces", cursive;
  --mono: "Special Elite", "Courier New", monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 18px/1.55 var(--serif); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
h1, h2, h3, p, ol { margin: 0; }
a { color: var(--rust); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.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(90, 50, 25, .28); } }

/* Adegan: .stage berbanding 1116:2000 (ukuran lukisan induk) dan selalu menutup layar. Urutan dari belakang: latar
   (jalan, palem, laut, matahari) → kanopi pom bensin (bukaan tengahnya transparan; bohlam = lingkaran SVG di koordinat
   piksel gambar 1536×2752) dan balon → mobil → motor. Keadaan dasar = adegan akhir; sebelum dibuka
   (.js:not(.is-open)) hari masih gelap, bohlam padam, kendaraan di luar layar, dan pandangan sedikit mendongak. */
.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: var(--sky); 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.7922)); aspect-ratio: 1116 / 2000; translate: -50% -50%; }
.ly { position: absolute; inset: 0; will-change: transform; transform-origin: 50% 60%; }
.ly > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.fx { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; mix-blend-mode: screen; }
.bl circle, .fs circle { opacity: .95; }
.mentari { position: absolute; left: 50%; top: 43%; width: 46%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 236, 170, .75), rgba(255, 190, 110, .3) 55%, transparent); mix-blend-mode: screen; }
.burung { position: absolute; left: 0; top: 30%; width: 100%; height: 12%; }
.burung i { position: absolute; left: 30%; top: 30%; width: 16px; height: 8px; }
.burung i::before, .burung i::after { content: ""; position: absolute; top: 0; width: 9px; height: 6px; border-top: 2px solid #6b3b2a; border-radius: 60% 60% 0 0; }
.burung i::before { left: 0; rotate: 14deg; } .burung i::after { right: 0; rotate: -14deg; }
.burung i:nth-child(2) { left: 22%; top: 55%; scale: .8; } .burung i:nth-child(3) { left: 36%; top: 70%; scale: .65; }
.ly > .balon { inset: auto; left: 79%; top: 35.5%; width: 15%; height: auto; transform-origin: 50% 100%; }
.mb { position: absolute; left: 3%; top: 60%; width: 68%; }
.mt { position: absolute; left: 49%; top: 64.5%; width: 44%; }
.mb img, .mt img { position: relative; display: block; width: 100%; height: auto; max-width: none; }
.bayang { position: absolute; left: 6%; right: 6%; bottom: -3%; height: 16%; border-radius: 50%; background: radial-gradient(closest-side, rgba(40, 22, 12, .45), transparent); }
.sorot { position: absolute; width: 22%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 252, 225, .95), rgba(255, 230, 150, .4) 40%, transparent); mix-blend-mode: screen; }
.sorot.a { left: 60.6%; top: 68%; } .sorot.b { left: 96%; top: 63%; width: 16%; } .sorot.c { left: 27.3%; top: 15%; width: 30%; }
.asap { position: absolute; left: 97%; top: 52%; width: 10%; aspect-ratio: 1; }
.laju { position: absolute; inset: -12%; opacity: 0; pointer-events: none; background: repeating-conic-gradient(from 2deg at 50% 51%, transparent 0 3.4deg, rgba(255, 250, 238, .8) 3.4deg 3.9deg, transparent 3.9deg 7.6deg, rgba(255, 250, 238, .5) 7.6deg 7.95deg, transparent 7.9deg 11.5deg);
  -webkit-mask-image: radial-gradient(closest-side at 50% 51%, transparent 42%, #000 96%); mask-image: radial-gradient(closest-side at 50% 51%, transparent 42%, #000 96%); }
.asap i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 245, 230, .7), transparent); opacity: 0; }
.konfeti { position: absolute; inset: 0; }
.konfeti i { position: absolute; top: -4%; width: 7px; height: 11px; border-radius: 2px; background: var(--mustard); display: none; }
.konfeti i:nth-child(3n) { background: var(--orange); } .konfeti i:nth-child(3n+1) { background: #6fa7a2; } .konfeti i:nth-child(5n) { background: #fff4dc; }
.malam { position: absolute; inset: 0; background: linear-gradient(180deg, #1d1f3d, #3b2547 55%, #2a1f2e); mix-blend-mode: multiply; opacity: 0; }
.terang { position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, #fffdf3 0, #fff3dc 55%, var(--bg) 100%); opacity: 0; }
.konfeti i:nth-child(1) { left: 76%; animation-duration: 11.2s, 3.6s; animation-delay: -12.6s, -2.6s; }
.konfeti i:nth-child(2) { left: 56%; animation-duration: 12.9s, 4.0s; animation-delay: -1.7s, -1.9s; }
.konfeti i:nth-child(3) { left: 45%; animation-duration: 12.4s, 2.4s; animation-delay: -3.3s, -1.1s; }
.konfeti i:nth-child(4) { left: 17%; animation-duration: 9.8s, 3.5s; animation-delay: -1.9s, -0.0s; }
.konfeti i:nth-child(5) { left: 23%; animation-duration: 14.8s, 2.7s; animation-delay: -2.5s, -1.3s; }
.konfeti i:nth-child(6) { left: 66%; animation-duration: 10.2s, 4.1s; animation-delay: -10.4s, -3.9s; }
.konfeti i:nth-child(7) { left: 35%; animation-duration: 11.5s, 4.1s; animation-delay: -4.0s, -1.3s; }
.konfeti i:nth-child(8) { left: 73%; animation-duration: 11.0s, 3.0s; animation-delay: -12.3s, -1.9s; }
.konfeti i:nth-child(9) { left: 20%; animation-duration: 13.2s, 2.5s; animation-delay: -14.6s, -0.1s; }
.konfeti i:nth-child(10) { left: 48%; animation-duration: 13.7s, 3.1s; animation-delay: -8.7s, -0.0s; }
.konfeti i:nth-child(11) { left: 87%; animation-duration: 14.7s, 2.8s; animation-delay: -11.3s, -3.7s; }
.konfeti i:nth-child(12) { left: 41%; animation-duration: 14.4s, 2.9s; animation-delay: -6.9s, -2.4s; }
.konfeti i:nth-child(13) { left: 34%; animation-duration: 14.7s, 2.6s; animation-delay: -5.1s, -2.4s; }
.konfeti i:nth-child(14) { left: 60%; animation-duration: 12.3s, 3.0s; animation-delay: -4.8s, -0.7s; }

/* Pembukaan: langit gelap memudar (0,3–2,7 dtk), bohlam kanopi menyala berpasangan dari atas (0,5–1,8), lampu untai
   (1,9), pandangan turun dari kanopi ke jalan (0,2–3,8), mobil masuk dari kiri (1,4–3,6) lalu motor dari kanan
   (2,3–4,3), lampu depan menyala (3,4 / 4,2), papan nama turun (4,3). */
.js .malam { transition: opacity 2.4s ease .3s; }
.js .bl circle, .js .fs circle { transition: opacity .3s ease; }
.js .fs circle { transition-delay: 1.9s; }
.js .ly { transition: transform 3.6s cubic-bezier(.45, 0, .2, 1) .2s; }
.js .mb { transition: translate 2.2s cubic-bezier(.15, .7, .25, 1) 1.4s, rotate 2.2s cubic-bezier(.15, .7, .25, 1) 1.4s; }
.js .mt { transition: translate 2s cubic-bezier(.15, .7, .25, 1) 2.3s, rotate 2s cubic-bezier(.15, .7, .25, 1) 2.3s; }
.js .sorot { transition: opacity .5s ease 3.4s; }
.js .sorot.c { transition-delay: 4.2s; }
.js:not(.is-open) .malam { opacity: .78; }
.js:not(.is-open) .bl circle, .js:not(.is-open) .fs circle, .js:not(.is-open) .sorot { opacity: 0; }
.js:not(.is-open) .ly { transform: translateY(7%) scale(1.06); }
.js:not(.is-open) .mb { translate: -130% 0; rotate: -1.5deg; }
.js:not(.is-open) .mt { translate: 140% 0; rotate: 2deg; }
.js.is-open .bl circle:nth-child(1), .js.is-open .bl circle:nth-child(2) { transition-delay: .5s; }
.js.is-open .bl circle:nth-child(3), .js.is-open .bl circle:nth-child(4) { transition-delay: .59s; }
.js.is-open .bl circle:nth-child(5), .js.is-open .bl circle:nth-child(6) { transition-delay: .68s; }
.js.is-open .bl circle:nth-child(7), .js.is-open .bl circle:nth-child(8) { transition-delay: .77s; }
.js.is-open .bl circle:nth-child(9), .js.is-open .bl circle:nth-child(10) { transition-delay: .86s; }
.js.is-open .bl circle:nth-child(11), .js.is-open .bl circle:nth-child(12) { transition-delay: .95s; }
.js.is-open .bl circle:nth-child(13), .js.is-open .bl circle:nth-child(14) { transition-delay: 1.04s; }
.js.is-open .bl circle:nth-child(15), .js.is-open .bl circle:nth-child(16) { transition-delay: 1.13s; }
.js.is-open .bl circle:nth-child(17), .js.is-open .bl circle:nth-child(18) { transition-delay: 1.22s; }
.js.is-open .bl circle:nth-child(19), .js.is-open .bl circle:nth-child(20) { transition-delay: 1.31s; }
.js.is-open .bl circle:nth-child(21), .js.is-open .bl circle:nth-child(22) { transition-delay: 1.4s; }
.js.is-open .bl circle:nth-child(23), .js.is-open .bl circle:nth-child(24) { transition-delay: 1.49s; }
.js.is-open .bl circle:nth-child(25), .js.is-open .bl circle:nth-child(26) { transition-delay: 1.58s; }
.js.is-open .bl circle:nth-child(27), .js.is-open .bl circle:nth-child(28) { transition-delay: 1.67s; }
.js.is-open .bl circle:nth-child(29), .js.is-open .bl circle:nth-child(30) { transition-delay: 1.76s; }
.js.no-anim .ly, .js.no-anim .mb, .js.no-anim .mt, .js.no-anim .sorot, .js.no-anim .malam, .js.no-anim .bl circle, .js.no-anim .fs circle { transition: none; }

.caps { font: 600 12px/1.4 var(--mono); letter-spacing: .3em; text-transform: uppercase; }
.script { font: 400 40px/1.25 var(--script); color: var(--rust); }
.lead { font-size: 17px; line-height: 1.6; color: var(--soft); max-width: 22em; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 26px; border: 2px solid var(--rust); border-radius: 999px; background: var(--rust); color: #fff8ec; text-decoration: none; cursor: pointer; font: 700 13px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; }
.btn-line { background: transparent; color: inherit; border-color: currentColor; }
.btn.copied { background: var(--teal); border-color: var(--teal); color: #fff; }

/* ---------- Sampul: tanpa foto = matahari bergaris gaya 70-an di belakang nama; dengan foto = foto penuh layar ---------- */
.cover { position: relative; min-height: 100vh; min-height: 100svh; padding: 54px 26px 44px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; background: linear-gradient(180deg, var(--bg2), var(--bg) 60%, #efd3a6); color: var(--ink); overflow: hidden; }
.cover[hidden] { display: none; }
.cover-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover.has-photo { color: #fff; }
.cover.has-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40, 18, 10, .55) 0%, rgba(40, 18, 10, .05) 34%, rgba(40, 18, 10, .1) 56%, rgba(40, 18, 10, .8) 100%); }
.cover.has-photo .cover-art { display: none; }
.cover-art { position: absolute; inset: 0; }
.surya { position: absolute; left: 50%; top: 17vh; width: 300px; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: linear-gradient(180deg, #f7c65a, var(--orange) 55%, var(--rust)); -webkit-mask: linear-gradient(180deg, #000 0 50%, transparent 50% 54%, #000 54% 62%, transparent 62% 67%, #000 67% 74%, transparent 74% 80%, #000 80% 86%, transparent 86%); mask: linear-gradient(180deg, #000 0 50%, transparent 50% 54%, #000 54% 62%, transparent 62% 67%, #000 67% 74%, transparent 74% 80%, #000 80% 86%, transparent 86%); opacity: .9; }
.cover-rangkai { position: absolute; left: 50%; bottom: 24%; width: 78%; max-width: none; translate: -50% 0; pointer-events: none; }
.cover-top, .cover-bottom { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cover:not(.has-photo) .cover-top { margin-top: 22vh; padding: 18px 22px; border-radius: 18px; background: rgba(255, 250, 238, .9); box-shadow: 0 0 0 3px var(--card), 0 0 0 6px var(--orange); }
.cover .names { font: 400 40px/1.3 var(--script); overflow-wrap: break-word; color: inherit; }
.cover:not(.has-photo) .names { color: var(--rust); }
.names .amp { display: block; font-size: 26px; line-height: 1; color: var(--orange); }
.cover-date { font: 400 15px/1.4 var(--mono); letter-spacing: .14em; }
.to { font-size: 16px; line-height: 1.5; opacity: .9; }
.guest-name { font: 600 24px/1.2 var(--serif); overflow-wrap: anywhere; }
.cover .open { margin-top: 10px; min-width: 230px; min-height: 48px; border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .2); color: inherit; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cover:not(.has-photo) .open { border-color: var(--rust); background: var(--rust); color: #fff8ec; }

/* Dengan JS: sampul menutup layar sampai tamu menekan "Buka undangan", lalu memudar. */
.js .cover { position: fixed; top: 0; bottom: 0; left: 50%; width: min(100%, 480px); transform: translateX(-50%); z-index: 40; overflow-y: auto; transition: opacity .9s ease; }
.js:not(.is-open) body { overflow: hidden; }
.js.is-open .cover { opacity: 0; pointer-events: none; }
.js.no-anim .cover { transition: none; }
html:not(.js) .cover .open { display: none; }
.memuat .cover .open { pointer-events: none; opacity: .55; }

/* ---------- Pembuka: judul di papan nama berbohlam (papan.webp, teks HTML di atasnya) yang bergantung dari tepi atas
   kanopi. Lebar & letaknya mengikuti .stage supaya batang gantungannya tepat di bawah atap kanopi. ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; padding: 44px 20px; display: grid; place-items: center; text-align: center; background: linear-gradient(180deg, var(--sky), var(--bg)); }
.js .hero { background: none; display: block; padding: 0; }
.hero-pin { display: grid; place-items: start center; width: 100%; position: relative; }
.js .hero-pin { --sh: max(100svh, calc(min(100vw, 480px) * 1.7922)); position: fixed; left: 50%; bottom: 0; width: min(100%, 480px); height: 100vh; height: 100svh; translate: -50% 0; pointer-events: none; overflow: hidden; display: block; }
.scene-off .hero-pin { visibility: hidden; }
.title-wrap { width: min(86%, 320px); }
.js .title-wrap { position: absolute; left: 50%; top: calc((100svh - var(--sh)) / 2); width: calc(var(--sh) * .558 * .64); translate: -50% 0; }
.papan { position: relative; transform-origin: 50% 0; }
.papan > img { display: block; width: 100%; height: auto; max-width: none; }
.papan-t { position: absolute; left: 14%; right: 14%; top: 27%; bottom: 14%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; color: var(--ink); container-type: inline-size; }
.papan-t .caps { font-size: max(8px, 5.4cqw); letter-spacing: .22em; color: var(--soft); }
.t-name { font: 400 max(20px, 13cqw)/1.25 var(--script); color: var(--rust); overflow-wrap: break-word; max-width: 100%; }
.t-name .amp { font-size: .7em; color: var(--orange); }
.pl-date { margin-top: 2px; font: 400 max(9px, 5.6cqw)/1.3 var(--mono); letter-spacing: .1em; }
.mouse { display: block; margin-top: 18px; width: 22px; height: 36px; border: 1.5px solid var(--ink); border-radius: 12px; position: relative; opacity: .7; }
.mouse::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); animation: gulir 1.6s ease-in-out infinite; }
.hero-pin > .mouse { position: absolute; left: 50%; bottom: 4vh; margin: 0 0 0 -11px; border-color: #fff; opacity: .9; }
.hero-pin > .mouse::after { background: #fff; }
html:not(.js) .hero-pin { padding: 40px 0; } html:not(.js) .hero-pin > .mouse { display: none; }

/* ---------- Isi Kelana ---------- */
main > section:not(.hero) { position: relative; padding: 64px 26px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; background: var(--bg); }
main h2.script::after { content: ""; display: block; width: 210px; max-width: 70vw; height: 22px; margin: 4px auto 0; background: url("img/pembatas.webp") center / contain no-repeat; }
/* tiga garis 70-an (mustard, oranye, karat) sebagai batas atas bagian tertentu */
.verse::before, .count::before, .programme::before, .closing::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 15px; background: var(--stripes); }

/* With Love: untaian bunga di atas, kutipan di kartu pos bertepi garis. */
main > section.verse { background: var(--bg2); padding-top: 52px; }
.rangkai-atas { width: 300px; margin: 0 auto -8px; pointer-events: none; }
.quote { font: italic 400 20px/1.6 var(--serif); max-width: 20em; padding: 22px 20px; border-radius: 14px; background: var(--card); border: 2px dashed var(--orange); }
.source { font: 400 14px/1.4 var(--mono); letter-spacing: .12em; color: var(--soft); }

/* Bride & Groom: kartu SIM — "Surat Izin Menikah" — foto di kiri, data di kanan, cap "Lulus". */
.couple { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 8px; }
.sim { position: relative; width: 100%; border-radius: 16px; overflow: hidden; text-align: left; background: linear-gradient(135deg, #fdf7e8, #f3ead2 50%, #e7efe2); border: 1px solid #d9c49d; box-shadow: 0 16px 30px rgba(90, 50, 25, .16); }
.sim::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 150px; aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, rgba(47, 107, 104, .09) 0 2px, transparent 2px 9px); pointer-events: none; }
.sim-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 14px; background: linear-gradient(90deg, var(--teal), #3f8a85); color: #fff6e2; font: 400 12px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.sim-head b { font-weight: 400; padding: 2px 8px; border-radius: 4px; background: var(--mustard); color: var(--ink); }
.sim-body { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 14px; padding: 16px 14px 18px; }
.portrait { width: 100px; height: 132px; border-radius: 8px; overflow: hidden; background: var(--bg); border: 3px solid #fff; box-shadow: 0 0 0 1px #d9c49d; display: flex; }
.portrait > * { flex: 1; width: 100%; height: 100%; object-fit: cover; }
.portrait span { display: flex; align-items: center; justify-content: center; font: 400 52px/1 var(--script); color: var(--rust); }
.sim-data { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sim h3 { font: 700 21px/1.2 var(--display); color: var(--ink); overflow-wrap: anywhere; }
.parents { font-size: 15px; line-height: 1.45; color: var(--soft); }
.ig { font: 400 14px/1.4 var(--mono); color: var(--teal); }
.cap { position: absolute; right: 14px; bottom: 12px; padding: 2px 10px; border: 2px solid var(--rust); border-radius: 6px; color: var(--rust); font: 400 14px/1.3 var(--mono); letter-spacing: .2em; text-transform: uppercase; rotate: -12deg; opacity: .75; }
.dan { align-self: center; margin: 2px 0; }
.dan span { font: 400 42px/1 var(--script); color: var(--orange); }

/* Save the Date: hitung mundur odometer — gulungan angka putih di panel dasbor. */
main > section.count, main > section.rsvp { background: linear-gradient(180deg, var(--teal), var(--teal2)); color: #fff6e2; }
.count .script, .rsvp .script, .count .lead { color: #fff6e2; }
.countdown { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 330px; padding: 18px; border-radius: 22px; background: linear-gradient(180deg, #4a2f22, #2e1d15); box-shadow: inset 0 0 0 3px #c9a46a, inset 0 0 0 6px #2e1d15, inset 0 0 0 7px rgba(201, 164, 106, .5), 0 18px 30px rgba(0, 0, 0, .3); }
.countdown div { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.countdown b { display: inline-block; overflow: hidden; padding: 6px 0 6px .25ch; border-radius: 6px; font: 600 32px/1.1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: .5ch; color: #fff6e2; background: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 30% 70%, rgba(0, 0, 0, .55)), repeating-linear-gradient(90deg, #1b1410 0 calc(1.5ch - 2px), #000 calc(1.5ch - 2px) 1.5ch); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.countdown span { font: 400 12px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--mustard); }
html:not(.js) .countdown { display: none; }
.count .btn-line { color: #fff6e2; border-color: #fff6e2; }

/* Acara: karcis bersobekan — potongan kiri bertulisan tegak, garis perforasi dengan dua lubang setengah lingkaran. */
main > section.programme { gap: 26px; background: var(--bg); padding-top: 70px; }
.balon-acara { position: absolute; right: 6px; top: 40px; width: 64px; pointer-events: none; }
.event { position: relative; width: 100%; display: grid; grid-template-columns: 50px minmax(0, 1fr); border-radius: 14px; background: var(--card); border: 1px solid #e3c99a; box-shadow: 0 16px 30px rgba(90, 50, 25, .14); text-align: left; }
.event::before, .event::after { content: ""; position: absolute; left: 38px; width: 24px; height: 24px; border-radius: 50%; background: var(--bg); border: 1px solid #e3c99a; }
.event::before { top: -12px; clip-path: inset(50% 0 0 0); } .event::after { bottom: -12px; clip-path: inset(0 0 50% 0); }
.sobek { display: flex; align-items: center; justify-content: center; border-radius: 0 14px 14px 0; background: linear-gradient(270deg, var(--mustard) 0 33.3%, var(--orange) 33.3% 66.6%, var(--rust) 66.6%); border-left: 2px dashed var(--card); writing-mode: vertical-rl; rotate: 180deg; font: 400 13px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: #fff8ec; }
.tiket-isi { padding: 22px 18px 22px 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.plat { font: 700 24px/1.1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--rust); }
.when { font: 400 17px/1.5 var(--mono); }
.where { font-size: 16px; line-height: 1.5; color: var(--soft); overflow-wrap: anywhere; }
.where b { display: block; font: 400 12px/1.6 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.tiket-isi .btn { min-height: 42px; padding: 0 20px; }
.dress { font-size: 16px; font-style: italic; color: var(--soft); }

/* Our Journey: rute di peta — garis putus-putus berkelok kiri-kanan, tiap bab ditandai pin. */
main > section.story { background-color: var(--bg2); background-image: linear-gradient(rgba(47, 107, 104, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(47, 107, 104, .07) 1px, transparent 1px); background-size: 28px 28px; }
.chapters { list-style: none; padding: 0 0 0 0; width: 100%; display: flex; flex-direction: column; text-align: left; }
.chapters li { position: relative; padding: 14px 18px 34px 46px; border: 3px dashed var(--rust); border-width: 0 0 3px 3px; border-radius: 0 0 0 46px; }
.chapters li:nth-child(even) { padding: 14px 46px 34px 18px; border-width: 0 3px 3px 0; border-radius: 0 0 46px 0; text-align: right; }
.chapters li + li { margin-top: -3px; }
.chapters li:last-child { border-bottom-color: transparent; padding-bottom: 8px; }
.pin { position: absolute; left: -19px; top: -16px; width: 34px; pointer-events: none; }
.chapters li:nth-child(even) .pin { left: auto; right: -19px; }
.chapters h3 { font: 400 26px/1.3 var(--script); color: var(--teal); margin-bottom: 4px; }
.chapters p { font-size: 16px; line-height: 1.55; color: var(--soft); }

/* Gallery: polaroid miring bergantian. */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; width: 100%; }
.grid img { width: 100%; aspect-ratio: 1; object-fit: cover; padding: 8px 8px 30px; background: #fffdf7; box-shadow: 0 12px 22px rgba(90, 50, 25, .2); rotate: -2.5deg; }
.grid img:nth-child(even) { rotate: 2deg; }
.grid img:nth-child(3n+1) { grid-column: 1 / -1; aspect-ratio: 4 / 3; rotate: -1deg; }

/* Wedding Gift: struk pom bensin bertepi gerigi. */
.gift-list { display: grid; gap: 16px; width: 100%; }
.gift-card { padding: 18px 18px 26px; background: #fffdf6; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; box-shadow: 0 10px 20px rgba(90, 50, 25, .1); border-top: 6px solid var(--orange); -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 8px repeat-x; mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 8px repeat-x; }
.bank { font: 700 13px/1.4 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--rust); }
.number { font: 400 21px/1.4 var(--mono); letter-spacing: .04em; overflow-wrap: anywhere; padding: 2px 0; border-top: 1px dashed #c9b38c; border-bottom: 1px dashed #c9b38c; }
.holder { font-size: 15px; color: var(--soft); }
.gift-card .btn { flex-shrink: 0; min-height: 40px; padding: 0 16px; color: var(--rust); }
.address { width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px dashed var(--line); font-size: 16px; line-height: 1.5; color: var(--soft); text-align: left; }

/* Wishes */
.note { width: 100%; padding: 14px 16px; border: 1px dashed rgba(255, 255, 255, .7); border-radius: 14px; font-size: 16px; }
.thanks { width: 100%; padding: 22px 18px; border-radius: 18px; background: rgba(255, 255, 255, .14); display: flex; flex-direction: column; gap: 6px; }
.thanks .big { font: 400 32px/1.3 var(--script); }
.form { width: 100%; display: flex; flex-direction: column; gap: 14px; text-align: left; }
.field { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; font-size: 16px; font-weight: 600; }
.field legend { padding: 0 0 6px; }
.field input, .field textarea { width: 100%; min-height: 48px; padding: 0 14px; border: 0; border-radius: 12px; background: #fffaf0; color: var(--ink); font: 400 17px/1.4 var(--serif); }
.field textarea { padding: 12px 14px; min-height: 110px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--mustard); outline-offset: 1px; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt { position: relative; }
.opt input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.opt span { display: flex; align-items: center; justify-content: center; min-height: 48px; border: 1.5px solid rgba(255, 255, 255, .8); border-radius: 12px; font: 700 13px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.opt input:checked + span { background: var(--mustard); border-color: var(--mustard); color: var(--ink); }
.opt input:focus-visible + span { outline: 2px solid var(--mustard); outline-offset: 2px; }
.rsvp .btn { min-height: 50px; background: var(--mustard); border-color: var(--mustard); color: var(--ink); }
main > section.wishes-box { align-items: stretch; text-align: left; gap: 0; padding-top: 30px; }
.wishes-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.wishes-head h2 { font: 400 28px/1.3 var(--script); color: var(--rust); }
.wishes-head span { font-size: 15px; color: var(--soft); white-space: nowrap; }
.wishes { list-style: none; margin: 12px 0 0; padding: 0; max-height: 560px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.wishes li { padding: 14px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.wish-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wish-head b { font-size: 17px; }
.tag { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--orange); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--orange); }
.status { font: 400 13px/1.4 var(--mono); color: var(--teal); }
.wish-text { font-size: 16px; line-height: 1.5; color: var(--soft); overflow-wrap: anywhere; }
.wish-reply { margin-top: 6px; padding: 8px 12px; border-left: 2px solid var(--orange); font-style: italic; color: var(--soft); }

/* Penutup: rambu jalan "Just Married" dengan nama, buket diapit dua ikat balon. */
main > section.closing { padding-top: 70px; background: linear-gradient(180deg, var(--bg), #f2cf9d); }
.rambu { position: relative; width: 290px; max-width: 86%; }
.rambu-b { display: block; width: 100%; height: auto; }
.rambu-t { position: absolute; left: 9%; right: 9%; top: 13%; height: 46%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #fff6e2; font: 400 26px/1.25 var(--script); overflow-wrap: anywhere; }
.rambu-t span { font: 400 12px/1.3 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--mustard); }
.penutup-hias { display: flex; align-items: flex-end; justify-content: center; gap: 4px; margin-top: -8px; }
.buket { width: 150px; }
.balon-kiri, .balon-kanan { width: 70px; margin-bottom: 40px; transform-origin: 50% 100%; }
.balon-kiri { scale: -1 1; }
.merci { font-size: 44px; }
.thanks-line { font-size: 16px; font-style: italic; color: var(--soft); max-width: 20em; }
footer { position: relative; padding: 18px 16px 26px; text-align: center; font-size: 14px; color: var(--soft); background: #f2cf9d; }

.music-toggle { position: fixed; bottom: 16px; right: max(14px, calc(50% - 226px)); z-index: 50; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--rust); color: #fff; cursor: pointer; box-shadow: 0 8px 18px rgba(90, 50, 25, .3); }
.music-toggle svg { width: 18px; height: 18px; }
.music-toggle[aria-pressed="false"]::after { content: ""; position: absolute; width: 24px; height: 1.5px; background: #fff; transform: rotate(-45deg); }
html:not(.js) .music-toggle, .js:not(.is-open) .music-toggle { display: none; }

/* ---------- Animasi ---------- */
/* Isi muncul bertahap saat digulir (kelas .rv dipasang kelana.js): SIM dibagikan dari kiri/kanan, karcis menggelinding
   masuk, polaroid jatuh di meja. */
.rv { opacity: 0; translate: 0 26px; }
.rv.script { translate: 0 -22px; }
.couple > .rv.sim:nth-child(1) { translate: -60px 0; rotate: -6deg; } .couple > .rv.sim:nth-child(3) { translate: 60px 0; rotate: 6deg; }
.rv.event { translate: 0 30px; rotate: -3deg; }
.grid .rv { translate: 0 -20px; scale: 1.15; }
.countdown .rv { scale: .7; translate: 0 0; }
.rv.in { opacity: 1; translate: 0 0; scale: 1; 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), scale .9s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0) * 1ms), rotate .9s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0) * 1ms); }
.couple > .rv.in.sim, .rv.in.event { rotate: 0deg; }
.grid .rv.in { rotate: -2.5deg; } .grid .rv.in:nth-child(even) { rotate: 2deg; } .grid .rv.in:nth-child(3n+1) { rotate: -1deg; }
@media (prefers-reduced-motion: no-preference) {
  /* Berulang: bohlam kanopi berkejaran, lampu untai berkelip, matahari berdenyut, burung melintas, balon bergoyang,
     mesin langsam (mobil sedikit bergetar), asap knalpot motor, konfeti. */
  .konfeti i { display: block; animation-name: gugur, kibar; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite; animation-direction: normal, alternate; }
  .js.is-open .bl circle:nth-child(4n+1), .js.is-open .bl circle:nth-child(4n+2) { animation: kejar 1.6s 2.2s steps(1) infinite; }
  .js.is-open .bl circle:nth-child(4n+3), .js.is-open .bl circle:nth-child(4n) { animation: kejar 1.6s 3s steps(1) infinite; }
  .js.is-open .fs circle:nth-child(odd) { animation: kelip 2.4s 2.4s ease-in-out infinite alternate; }
  .js.is-open .fs circle:nth-child(even) { animation: kelip 2.4s 3.6s ease-in-out infinite alternate; }
  .mentari { animation: denyutM 4s ease-in-out infinite alternate; }
  .burung { animation: melintas 26s linear infinite; }
  .burung i::before, .burung i::after { animation: kepak .5s ease-in-out infinite alternate; transform-origin: 100% 100%; }
  .burung i::after { transform-origin: 0 100%; }
  .balon { animation: ayun 4.5s ease-in-out infinite; }
  .mb img { animation: langsam .32s ease-in-out infinite alternate; }
  .mt img { animation: langsam .22s ease-in-out infinite alternate; }
  .asap i { animation: asap 2.4s ease-out infinite; } .asap i:nth-child(2) { animation-delay: .8s; } .asap i:nth-child(3) { animation-delay: 1.6s; }
  .js:not(.is-open) .asap i { animation: none; }
  .papan { animation: goyang 4.5s ease-in-out infinite alternate; }
  .js.is-open:not(.no-anim) .papan { animation: turunP 1.4s 4.3s cubic-bezier(.3, 1.3, .4, 1) both, goyang 4.5s 5.7s ease-in-out infinite alternate; }
  .js.is-open:not(.no-anim) .hero-pin > .mouse { animation: naik 1s 5.4s both; }
  .cover-top { animation: turun 1.2s .2s both; } .cover-bottom { animation: naik 1.2s .5s both; }
  .surya { animation: terbit 1.6s .1s cubic-bezier(.2, .8, .2, 1) both; }
  .cover .open { animation: denyut 2.8s 2s ease-in-out infinite; }
  .balon-kiri, .balon-kanan, .balon-acara { animation: ayun 5s ease-in-out infinite; }
  .balon-kanan { animation-delay: -2.5s; }
  .buket { animation: ayun 7s ease-in-out infinite; transform-origin: 50% 20%; }
}
@keyframes gugur { from { translate: 0 0; } to { translate: 60px 112vh; } }
@keyframes kibar { from { rotate: -50deg; scale: 1 1; } to { rotate: 190deg; scale: .4 1; } }
@keyframes kejar { 0% { opacity: .95; } 50% { opacity: .35; } }
@keyframes kelip { from { opacity: .45; } to { opacity: 1; } }
@keyframes denyutM { from { opacity: .7; scale: .95; } to { opacity: 1; scale: 1.06; } }
@keyframes melintas { from { translate: -60% 0; } to { translate: 90% -30%; } }
@keyframes kepak { from { rotate: 22deg; } to { rotate: -8deg; } }
@keyframes langsam { from { translate: 0 0; } to { translate: 0 -.25%; } }
@keyframes asap { 0% { opacity: 0; translate: 0 0; scale: .5; } 20% { opacity: .8; } 100% { opacity: 0; translate: 160% -120%; scale: 2.4; } }
@keyframes goyang { from { rotate: -1deg; } to { rotate: 1deg; } }
@keyframes turunP { from { opacity: 0; translate: 0 -110%; rotate: 5deg; } to { opacity: 1; translate: 0 0; rotate: -1deg; } }
@keyframes terbit { from { opacity: 0; translate: -50% 40%; } to { opacity: .9; translate: -50% 0; } }
@keyframes turun { from { opacity: 0; translate: 0 -18px; } to { opacity: 1; translate: 0 0; } }
@keyframes naik { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes denyut { 0%, 100% { box-shadow: 0 0 0 0 rgba(224, 123, 57, 0); } 50% { box-shadow: 0 0 0 9px rgba(224, 123, 57, .22); } }
@keyframes ayun { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
@keyframes gulir { 0% { translate: 0 0; opacity: 1; } 70% { translate: 0 12px; opacity: 0; } 100% { translate: 0 0; opacity: 0; } }
@keyframes cap { from { opacity: 0; scale: 2.6; } 60% { opacity: .9; scale: .92; } to { opacity: .75; scale: 1; } }
@keyframes jatuhPin { from { opacity: 0; translate: 0 -60px; } 70% { opacity: 1; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .rv { opacity: 1; translate: none; scale: none; rotate: none; } *, *::before, *::after { animation: none !important; } .js .ly, .js .mb, .js .mt { transition: none; } }

@media (prefers-reduced-motion: no-preference) {
  .js .hero { min-height: 260vh; min-height: 260svh; }
  /* Perjalanan gulir: --p = seberapa jauh pembuka sudah digulir; di p = 0 sama dengan keadaan akhir pembukaan. Kamera
     melaju lurus ke matahari: jalan membesar ke titik hilang, kanopi terlewati. Mobil (menghadap kanan) lalu motor
     (menghadap kiri) tancap gas ke arah hadapnya (--k masing-masing, berselang, makin cepat) dan berpapasan keluar layar;
     mobil berguncang, motor miring. Garis laju dari titik hilang muncul selama kecepatan tinggi. */
  .ready .ly { transition: none; }
  .js.is-open.ready .ly-bg { transform-origin: 50% 51%; transform: scale(calc(1 + var(--p, 0) * .8)); }
  .js.is-open.ready .ly-kanopi { transform-origin: 50% 50%; transform: scale(calc(1 + var(--p, 0) * var(--p, 0) * 2.8)); opacity: calc(1 - (var(--p, 0) - .45) * 3.5); }
  .ready .mb, .ready .mt { transition: none; }
  .js.is-open.ready .ly-mobil { --k: clamp(0, calc(var(--p, 0) / .5), 1); transform-origin: 37% 79%; transform: translate(calc(var(--k) * var(--k) * 105%), calc(var(--k) * var(--k) * 10%)) scale(calc(1 + var(--k) * .55)); }
  .js.is-open.ready .ly-motor { --k: clamp(0, calc((var(--p, 0) - .1) / .48), 1); transform-origin: 71% 84%; transform: translate(calc(var(--k) * var(--k) * -105%), calc(var(--k) * var(--k) * 8%)) scale(calc(1 + var(--k) * .45)) rotate(calc(var(--k) * -7deg)); }
  .js.is-open.ready .mb { translate: 0 calc(sin(calc(var(--p, 0) * 4200deg)) * 1.1%); rotate: calc(sin(calc(var(--p, 0) * 2900deg)) * .6deg); }
  .js.is-open.ready .mt { translate: 0 calc(sin(calc(var(--p, 0) * 5200deg + 40deg)) * .9%); }
  .ready .laju { opacity: calc(min(var(--p, 0) * 5, (.8 - var(--p, 0)) * 3.5)); scale: calc(1 + var(--p, 0) * .7); }
  .ready .title-wrap { opacity: calc(1 - var(--p, 0) * 5); }
  .ready .title-wrap { translate: -50% calc(var(--p, 0) * -120px); }
  .ready .hero-pin > .mouse { opacity: calc(.9 - var(--p, 0) * 6); }
  .ready .terang { opacity: calc((var(--p, 0) - .68) * 3.4); }
  .ready .konfeti { opacity: calc(1 - var(--p, 0) * 2.5); }

  /* Ornamen isi: keadaan awal ditulis di bawah .gerak, digerakkan saat bagian/elemen mendapat .tampak. */
  .rangkai-atas { transition: scale 1.1s cubic-bezier(.3, 1.3, .4, 1), opacity .6s ease; }
  .gerak .verse:not(.tampak) .rangkai-atas { scale: .2 1; opacity: 0; }
  .verse::before, .count::before, .programme::before, .closing::before { transition: clip-path 1.4s cubic-bezier(.3, .8, .3, 1); clip-path: inset(0); }
  .gerak section:not(.tampak)::before { clip-path: inset(0 100% 0 0); }
  .gerak .sim:not(.tampak) .cap { opacity: 0; }
  .sim.tampak .cap { animation: cap .5s 1.1s cubic-bezier(.3, 1.2, .5, 1) both; }
  .countdown b { transition: clip-path .9s cubic-bezier(.3, .8, .3, 1) .5s, translate .9s cubic-bezier(.3, .8, .3, 1) .5s; clip-path: inset(0); }
  .gerak .count:not(.tampak) .countdown b { clip-path: inset(0 0 100% 0); translate: 0 -40%; }
  .sobek { transition: translate .8s cubic-bezier(.3, 1.4, .4, 1) .3s; }
  .gerak .event:not(.tampak) .sobek { translate: -14px 0; }
  .balon-acara { transition: translate 1.6s cubic-bezier(.2, .8, .2, 1), opacity .8s ease; }
  .gerak .programme:not(.tampak) .balon-acara { translate: 0 120px; opacity: 0; }
  .chapters li { transition: clip-path 1.6s ease; clip-path: inset(-30px -30px -30px -30px); }
  .gerak .chapters li:not(.tampak) { clip-path: inset(-30px -30px 100% -30px); }
  .chapters li.tampak .pin { animation: jatuhPin .7s .5s cubic-bezier(.3, 1.2, .5, 1) both; }
  .gerak .chapters li:not(.tampak) .pin { opacity: 0; }
  .gift-card { transition: clip-path 1.1s cubic-bezier(.3, .8, .3, 1) .2s; clip-path: inset(0); }
  .gerak .gift-card:not(.tampak) { clip-path: inset(0 0 100% 0); }
  .rambu { transition: rotate 1.2s cubic-bezier(.3, 1.5, .4, 1), opacity .5s ease; transform-origin: 50% 100%; }
  .gerak .closing:not(.tampak) .rambu { rotate: -14deg; opacity: 0; }
  .balon-kiri, .balon-kanan { transition: translate 1.8s cubic-bezier(.2, .8, .2, 1) .4s, opacity .8s ease .4s; }
  .gerak .closing:not(.tampak) .balon-kiri, .gerak .closing:not(.tampak) .balon-kanan { translate: 0 140px; opacity: 0; }
}
.js body.locked { overflow: visible; }

/* Foto tiap kisah cinta (opsional, sub-field stories.photo): polaroid kecil di atas judul, miring bergantian. */
.kisah-foto { margin: 2px 0 14px; padding: 6px 6px 20px; background: #fff; border-radius: 3px; box-shadow: 0 10px 22px rgba(30, 20, 20, .16); rotate: -1.4deg; }
:nth-child(even) > .kisah-foto { rotate: 1.4deg; }
.kisah-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }