/* Venesia — undangan pernikahan bergaya lukisan cat air: cermin Murano di atas beludru, kamera menembus kacanya ke kanal
   senja, gondola meluncur, jendela palazzo menyala satu per satu, kembang api di atas kubah. Saat digulir pandangan melaju
   di air menembus jembatan. Adegannya lapisan gambar + dua kanvas (air dan kembang api) di assets/venesia.js. */
@font-face { font-family: "Cinzel"; src: url("fonts/cinzel.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Pinyon Script"; src: url("fonts/pinyon-script.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --bg: #f8f1e7; --bg2: #fdf9f2; --marun: #6d1a34; --marun2: #3a0f1f; --teal: #15525a; --teal2: #0e3238; --emas: #b98f45; --emas2: #ecd9a4;
  --tinta: #3a2730; --soft: #75626a; --kertas: #fffcf5; --garis: #e7d9c3; --sky1: #f6d7c2;
  --display: "Cinzel", "Cormorant Garamond", Georgia, serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  --script: "Pinyon Script", "Cormorant Garamond", cursive;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--marun2); }
body { margin: 0; background: var(--marun2); color: var(--tinta); font: 500 19px/1.55 var(--serif); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
h1, h2, h3, p, ol, figure { margin: 0; }
a { color: var(--marun); }
:focus-visible { outline: 2px solid var(--emas); 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(0, 0, 0, .45); } }

/* Adegan selebar kolom. Keadaan dasar = kamera sudah di kanal; sebelum dibuka (.js:not(.is-open)) semua lapisan mundur dari titik
   hilang 50% 54% dan gondola di bawah layar. Urutan: langit → kembang api → merpati → air (kanvas) → jembatan → palazzo → gondola. */
.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(--sky1); 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% 54%; }
.ly > img { position: absolute; max-width: none; }
.ly-bg > img, .ly-sisi > img { inset: 0; width: 100%; height: 100%; }
.tengah { left: 32.94%; top: 36.99%; width: 40.04%; }
.air { position: absolute; left: 0; top: 57%; width: 100%; height: 43%; -webkit-mask-image: linear-gradient(transparent, #000 3%); mask-image: linear-gradient(transparent, #000 3%); }
.kembang { position: absolute; left: 0; top: 0; width: 100%; height: 56%; }
.jendela { position: absolute; inset: 0; }
.jendela i { position: absolute; width: 8%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 216, 130, .95), rgba(255, 180, 90, .35) 45%, transparent); opacity: 0; }
.jendela i:nth-child(1) { left: 3%; top: 10.7%; --u: 0; } .jendela i:nth-child(2) { left: 97.5%; top: 10.7%; --u: 3; } .jendela i:nth-child(3) { left: 11%; top: 17.2%; --u: 6; } .jendela i:nth-child(4) { left: 90%; top: 17.2%; --u: 1; }
.jendela i:nth-child(5) { left: 15%; top: 18.6%; --u: 4; } .jendela i:nth-child(6) { left: 86%; top: 18.6%; --u: 7; } .jendela i:nth-child(7) { left: 2.5%; top: 28.6%; --u: 2; } .jendela i:nth-child(8) { left: 97.5%; top: 28.6%; --u: 5; }
.jendela i:nth-child(9) { left: 11.5%; top: 32.9%; --u: 8; } .jendela i:nth-child(10) { left: 88.5%; top: 33%; --u: 9; } .jendela i:nth-child(11) { left: 15.4%; top: 33.6%; --u: 11; } .jendela i:nth-child(12) { left: 84.6%; top: 33.6%; --u: 10; }
.jendela i:nth-child(13) { left: 26.4%; top: 35%; --u: 12; } .jendela i:nth-child(14) { left: 76.4%; top: 35%; --u: 13; width: 6%; } .jendela i:nth-child(15) { left: 37.2%; top: 40%; --u: 14; width: 5%; } .jendela i:nth-child(16) { left: 68%; top: 41.5%; --u: 15; width: 5%; }
.perahu { position: absolute; left: 50%; bottom: 17%; width: 38%; translate: -50% 0; transform-origin: 50% 90%; }
.perahu img { position: relative; width: 100%; }
/* Jejak gondola: bayangan garis air, pantulan bergelombang, dan riak; garis air = 22% tinggi kanvas ini. */
.jejak { position: absolute; left: -70%; top: 72%; width: 240%; height: 86%; }
.kawanan { position: absolute; left: -46%; top: 18%; width: 40%; aspect-ratio: 1.3; opacity: 0; }
.bg { position: absolute; height: auto; max-width: none; transform-origin: 50% 60%; }
.b1 { left: 44%; top: 0; width: 44%; } .b2 { left: 14%; top: 36%; width: 34%; } .b3 { left: 0; top: 4%; width: 28%; }
.petals { position: absolute; inset: 0; transition: opacity 1.4s ease 2.6s; } .js:not(.is-open) .petals { opacity: 0; }
.petals i { position: absolute; top: -4%; border-radius: 90% 10% 80% 20%; background: linear-gradient(135deg, #a8324e, var(--marun)); display: none; }
.petals i:nth-child(1) { left: 48%; width: 12px; height: 10px; animation-duration: 13.9s, 2.6s; animation-delay: -5.3s, -1.2s; opacity: .8; }
.petals i:nth-child(2) { left: 68%; width: 8px; height: 6px; animation-duration: 10.1s, 3.5s; animation-delay: -13.9s, -2.8s; opacity: .9; }
.petals i:nth-child(3) { left: 27%; width: 13px; height: 8px; animation-duration: 11.5s, 3.1s; animation-delay: -4s, -.6s; opacity: .9; }
.petals i:nth-child(4) { left: 71%; width: 8px; height: 8px; animation-duration: 15.7s, 2.6s; animation-delay: -8.8s, -3.9s; opacity: .7; }
.petals i:nth-child(5) { left: 45%; width: 8px; height: 9px; animation-duration: 12.3s, 2.8s; animation-delay: -1.8s, -3s; opacity: .9; }
.petals i:nth-child(6) { left: 3%; width: 13px; height: 9px; animation-duration: 14s, 4s; animation-delay: -9.7s, -3.4s; opacity: .9; }
.petals i:nth-child(7) { left: 39%; width: 11px; height: 9px; animation-duration: 13.1s, 3.5s; animation-delay: -3.3s, -1.8s; opacity: .9; }
.petals i:nth-child(8) { left: 83%; width: 10px; height: 10px; animation-duration: 14.7s, 4.2s; animation-delay: -.6s, -.6s; opacity: .8; }
.petals i:nth-child(9) { left: 57%; width: 12px; height: 10px; animation-duration: 13.5s, 3.5s; animation-delay: -13.9s, -1.4s; opacity: .8; }
.petals i:nth-child(10) { left: 10%; width: 10px; height: 8px; animation-duration: 9.8s, 2.9s; animation-delay: -10s, -4s; opacity: .9; }
.petals i:nth-child(11) { left: 91%; width: 12px; height: 9px; animation-duration: 9.9s, 2.8s; animation-delay: -9s, -3.3s; opacity: .8; }
.petals i:nth-child(12) { left: 33%; width: 13px; height: 6px; animation-duration: 10.9s, 2.4s; animation-delay: -3.8s, -2.8s; opacity: .9; }
.petals i:nth-child(13) { left: 21%; width: 9px; height: 8px; animation-duration: 12.9s, 3s; animation-delay: -7.1s, -2s; opacity: .8; }
.petals i:nth-child(14) { left: 62%; width: 11px; height: 8px; animation-duration: 11.1s, 3.7s; animation-delay: -2.2s, -1s; opacity: .9; }
.petals i:nth-child(3n) { background: linear-gradient(135deg, #fff3c9, var(--emas)); border-radius: 2px; }
.terang { position: absolute; inset: 0; background: radial-gradient(circle at 50% 54%, #fff 0, #fffaf1 60%, var(--bg) 100%); opacity: 0; }

/* Pembukaan: kamera melaju ke depan setelah menembus cermin. */
.js .ly { transition: transform 3.8s cubic-bezier(.2, .55, .2, 1) .35s; }
.js .perahu { transition: transform 4.2s cubic-bezier(.2, .55, .2, 1) .5s; }
.js:not(.is-open) .ly-bg { transform: scale(.96); }
.js:not(.is-open) .ly-air, .js:not(.is-open) .ly-tg { transform: scale(.76); }
.js:not(.is-open) .ly-sisi { transform: scale(.66); }
.js:not(.is-open) .perahu { transform: translateY(70%) scale(1.4); }
.js.no-anim .ly, .js.no-anim .perahu, .js.no-anim .petals { transition: none; }

.caps { font: 500 12px/1.4 var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--emas); }
.script { font: 400 50px/1.05 var(--script); color: var(--marun); }
.lead { font-size: 18px; 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: 1px solid var(--emas2); border-radius: 2px; background: var(--marun); color: #fff; text-decoration: none; cursor: pointer; font: 600 13px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; }
.btn-line { background: transparent; color: inherit; border-color: currentColor; }
.btn.copied { background: var(--emas); border-color: var(--emas); color: #fff; }

/* ---------- Sampul: cermin Murano berisi foto sampul di atas beludru marun ---------- */
.cover { position: relative; min-height: 100vh; min-height: 100svh; padding: 18px 18px 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: #f6ead6; background: radial-gradient(ellipse at 50% 34%, var(--marun), var(--marun2) 62%, #1d0710); overflow: hidden; }
.cover[hidden] { display: none; }
.cermin-sampul { position: relative; z-index: 1; flex: none; width: min(72%, 40svh, 300px); aspect-ratio: 300 / 440; margin-bottom: 10px; transform-origin: 50% 52.7%; }
.cermin-sampul::after { content: ""; position: absolute; inset: 0; background: url("img/cermin.svg") center / 100% 100% no-repeat; pointer-events: none; }
.kaca { position: absolute; left: 8.667%; right: 8.667%; top: 11.364%; bottom: 5.909%; overflow: hidden; background: linear-gradient(135deg, #dfe8e6, #8fa8ae 55%, #cdd9dc); }
.kaca::after { content: ""; position: absolute; inset: -20% -70%; background: linear-gradient(105deg, transparent 44%, rgba(255, 255, 255, .34) 50%, transparent 56%); translate: -60% 0; pointer-events: none; }
.cover-foto { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.cover-teks { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cover .caps { color: var(--emas2); }
.names { font: 400 44px/1.1 var(--script); color: #fff; overflow-wrap: anywhere; text-shadow: 0 2px 14px rgba(0, 0, 0, .45); }
.names .amp { margin: 0 .22em; color: var(--emas2); }
.to { margin-top: 2px; font-size: 15px; line-height: 1.4; opacity: .85; }
.guest-name { font: 600 22px/1.2 var(--serif); overflow-wrap: anywhere; }
.cover .btn.open { margin-top: 10px; min-width: 210px; min-height: 48px; }
.js .cover { position: fixed; top: 0; bottom: 0; left: 50%; width: min(100%, 480px); transform: translateX(-50%); z-index: 40; overflow: hidden; transition: background-color .3s; }
.js .cover::after { content: ""; position: absolute; inset: 0; background: rgba(255, 244, 222, 0); pointer-events: none; }
.js:not(.is-open) body { overflow: hidden; }
.js .cover-teks { transition: opacity .4s ease; }
.js .cermin-sampul { transition: transform 1.5s cubic-bezier(.7, 0, .5, 1), opacity .35s linear 1.15s; }
.js.is-open .cermin-sampul { transform: scale(15); opacity: 0; }
.js.is-open .cover-teks { opacity: 0; }
.js.is-open .cover { background: none; pointer-events: none; }
.js.is-open .cover-foto, .js.is-open .kaca::after { opacity: 0; }
.js.is-open .kaca { background: none; }
.js .cover-foto { transition: opacity .45s ease .15s; }
.js.no-anim .cermin-sampul, .js.no-anim .cover-teks, .js.no-anim .cover-foto { transition: none; }
html:not(.js) .cover .open { display: none; }
.memuat .cover .open { pointer-events: none; opacity: .6; }

/* ---------- Pembuka: nama di bingkai emas barok ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; padding: 30px 20px; display: grid; place-items: center; text-align: center; background: linear-gradient(var(--sky1), var(--teal)); }
.js .hero { display: block; padding: 0; background: none; }
.hero-pin { display: grid; place-items: start center; width: 100%; position: relative; }
.js .hero-pin { position: fixed; left: 50%; bottom: 0; width: min(100%, 480px); height: 100vh; height: 100svh; translate: -50% 0; padding-top: 6vh; pointer-events: none; overflow: hidden; }
.scene-off .hero-pin { visibility: hidden; }
.title-wrap { width: min(66%, 290px); }
.papan { position: relative; transform-origin: 50% 0; }
.papan > img { position: relative; width: 100%; height: auto; max-width: none; }
.isi-bingkai { position: absolute; left: 15%; right: 15%; top: 18%; bottom: 18%; background: radial-gradient(ellipse at 50% 40%, var(--teal), var(--teal2)); }
.papan-t { position: absolute; left: 18%; right: 18%; top: 20%; bottom: 20%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; color: var(--emas2); }
.papan-t .caps { font-size: 8px; letter-spacing: .22em; color: var(--emas2); }
.t-name { max-width: 100%; font: 400 clamp(21px, 6.4vw, 29px)/1.05 var(--script); color: #fff; overflow-wrap: break-word; }
.t-name .amp { margin: 0 .2em; font-size: .75em; color: var(--emas2); }
.pl-date { margin-top: 3px; font: 600 9px/1.4 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.mouse { position: absolute; left: 50%; bottom: 5vh; margin-left: -11px; width: 22px; height: 36px; border: 1.5px 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) .mouse, html:not(.js) .ketuk { display: none; }
.ketuk { position: absolute; left: 0; right: 0; top: 41vh; text-align: center; font: italic 500 16px/1.3 var(--serif); color: #fff; text-shadow: 0 1px 8px rgba(70, 20, 30, .7); opacity: 0; }
.ketuk.hilang { opacity: 0 !important; animation: none !important; }

/* ---------- Isi ---------- */
main > section:not(.hero) { position: relative; padding: 64px 26px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; background: var(--bg); }
main h2.script::after { content: ""; display: block; width: 64px; height: 12px; margin: 10px auto 0; background: radial-gradient(circle, var(--emas) 3px, transparent 3.5px) center / 16px 12px repeat-x; }
main > section.verse { padding-top: 40px; background: linear-gradient(var(--bg2), var(--bg)); }
.rangkai { width: 280px; max-width: 86%; }
.quote { font: italic 500 21px/1.6 var(--serif); max-width: 20em; }
.source { font: 600 14px/1.4 var(--display); letter-spacing: .14em; }

/* Mempelai: potret dalam cermin Murano, berselang kiri-kanan. */
.couple { display: flex; flex-direction: column; gap: 30px; width: 100%; margin-top: 8px; }
.person { display: grid; grid-template-columns: 156px 1fr; gap: 16px; align-items: center; text-align: left; }
.person:nth-child(even) { grid-template-columns: 1fr 156px; text-align: right; }
.person:nth-child(even) .cameo { order: 2; }
.cameo { position: relative; aspect-ratio: 300 / 440; }
.cameo::after { content: ""; position: absolute; inset: 0; background: url("img/cermin.svg") center / 100% 100% no-repeat; pointer-events: none; }
.isi { position: absolute; left: 8.667%; right: 8.667%; top: 11.364%; bottom: 5.909%; overflow: hidden; background: var(--teal); }
.isi > * { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.isi span { display: flex; align-items: center; justify-content: center; font: 400 54px/1 var(--script); color: var(--emas2); }
.person h3 { font: 400 30px/1.1 var(--script); color: var(--marun); overflow-wrap: anywhere; }
.parents { margin-top: 4px; font-size: 16px; line-height: 1.4; color: var(--soft); overflow-wrap: anywhere; }
.ig { margin-top: 2px; font-size: 15px; font-weight: 700; color: var(--teal); overflow-wrap: anywhere; }

/* Menuju hari H: jendela lengkung gotik di dinding teal. */
main > section.count, main > section.rsvp { background: radial-gradient(ellipse at 50% 0, var(--teal), var(--teal2)); color: #f4ead8; }
.count .script, .rsvp .script, .count .lead { color: #fff; }
.countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; }
.countdown div { padding: 26px 2px 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; border-radius: 50% 50% 3px 3px / 42% 42% 3px 3px; background: linear-gradient(#ffdf9e, #f2bc6c); color: var(--marun2); box-shadow: inset 0 0 0 3px var(--teal2), 0 0 0 2px var(--emas2), 0 0 18px rgba(255, 200, 110, .35); }
.countdown b { font: 600 24px/1 var(--display); font-variant-numeric: tabular-nums; }
.countdown span { font-size: 13px; line-height: 1.2; }
html:not(.js) .countdown { display: none; }

/* Acara: buku program opera per babak. */
main > section.programme { gap: 24px; background: linear-gradient(var(--bg), var(--bg2)); }
.event { width: 100%; padding: 30px 20px 26px; background: var(--kertas); box-shadow: 0 16px 34px rgba(70, 30, 40, .12); outline: 1px solid var(--emas); outline-offset: -8px; border-top: 7px solid var(--marun); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.babak { font: 600 12px/1.4 var(--display); letter-spacing: .34em; text-transform: uppercase; color: var(--emas); }
.when { font: 600 19px/1.5 var(--serif); }
.where { font-size: 17px; line-height: 1.5; color: var(--soft); overflow-wrap: anywhere; }
.dress { font-size: 17px; font-style: italic; color: var(--soft); }

/* Kisah: karcis opera dengan sobekan bernomor. */
.chapters { list-style: none; padding: 8px 0 0; width: 100%; display: flex; flex-direction: column; gap: 18px; counter-reset: karcis; }
.chapters li { position: relative; counter-increment: karcis; padding: 62px 22px 24px; color: #f6ead6; background: linear-gradient(160deg, var(--marun), var(--marun2)); -webkit-mask: radial-gradient(circle 11px at 0 46px, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 46px, transparent 98%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle 11px at 0 46px, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 46px, transparent 98%, #000) right / 51% 100% no-repeat; }
.chapters li::before { content: "Teatro · Kursi " counter(karcis); position: absolute; left: 18px; right: 18px; top: 0; height: 46px; display: flex; align-items: center; justify-content: center; border-bottom: 2px dashed rgba(236, 217, 164, .6); font: 600 11px/1 var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--emas2); }
.chapters h3 { font: 400 34px/1.05 var(--script); color: var(--emas2); margin-bottom: 6px; }
.chapters p { font-size: 17px; line-height: 1.5; color: #f1e2cd; }
.kisah-foto { margin: 0 0 12px; padding: 4px; background: var(--emas2); }
.kisah-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Galeri: deretan cermin Murano di dinding teal. */
main > section.gallery { background: radial-gradient(ellipse at 50% 20%, #1c5f68, var(--teal2)); }
.gallery .script { color: #fff; }
.salon { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; width: 100%; margin-top: 6px; }
.salon figure { position: relative; aspect-ratio: 300 / 440; }
.salon figure:nth-child(3n+1), .salon figure:last-child:nth-child(3n+2) { grid-column: 1 / -1; aspect-ratio: 600 / 440; }
.salon img { position: absolute; left: 8.667%; top: 11.364%; width: 82.666%; height: 82.727%; object-fit: cover; object-position: 50% 25%; }
.salon figure:nth-child(3n+1) img, .salon figure:last-child:nth-child(3n+2) img { left: 4.333%; width: 91.334%; }
.salon figure::after { content: ""; position: absolute; inset: 0; background: url("img/cermin.svg") center / 100% 100% no-repeat; pointer-events: none; }
.salon figure:nth-child(3n+1)::after, .salon figure:last-child:nth-child(3n+2)::after { background-image: url("img/cermin-lebar.svg"); }

.gift-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; width: 100%; }
.gift-card { padding: 16px 12px 18px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--kertas); box-shadow: 0 12px 24px rgba(70, 30, 40, .1); outline: 1px solid var(--emas2); outline-offset: -6px; }
.tali { width: 70px; margin-bottom: 6px; }
.bank { font: 600 12px/1.4 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--teal); }
.number { font-size: 20px; font-weight: 700; letter-spacing: .03em; overflow-wrap: anywhere; }
.holder { font-size: 15px; color: var(--soft); }
.gift-card .btn { margin-top: 8px; min-height: 40px; padding: 0 16px; color: var(--marun); }
.address { width: 100%; padding: 14px 16px; border: 1px dashed var(--garis); font-size: 16px; line-height: 1.5; color: var(--soft); text-align: left; }

.note { width: 100%; padding: 14px 16px; border: 1px dashed rgba(255, 255, 255, .6); font-size: 16px; }
.thanks { width: 100%; padding: 20px 18px; background: rgba(255, 255, 255, .12); display: flex; flex-direction: column; gap: 6px; }
.thanks .big { font: 400 36px/1.1 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: 700; }
.field legend { padding: 0 0 6px; }
.field input, .field textarea { width: 100%; min-height: 48px; padding: 0 14px; border: 0; border-radius: 2px; background: var(--kertas); color: var(--tinta); font: 500 18px/1.4 var(--serif); }
.field textarea { padding: 12px 14px; min-height: 110px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--emas2); 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, .7); border-radius: 2px; font: 600 12px/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.opt input:checked + span { background: var(--kertas); color: var(--teal2); }
.opt input:focus-visible + span { outline: 2px solid var(--emas2); outline-offset: 2px; }
.rsvp .btn { min-height: 50px; }

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 36px/1.1 var(--script); color: var(--marun); }
.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; background: var(--kertas); border: 1px solid var(--garis); display: flex; flex-direction: column; gap: 4px; }
.wish-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wish-head b { font-size: 18px; }
.tag { padding: 2px 8px; border: 1px solid var(--emas); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--emas); }
.status { font-size: 14px; font-weight: 700; color: var(--marun); }
.wish-text { font-size: 17px; line-height: 1.5; color: var(--soft); overflow-wrap: anywhere; }
.wish-reply { margin-top: 6px; padding: 8px 12px; border-left: 2px solid var(--emas); font-style: italic; color: var(--soft); }

main > section.closing { padding-top: 54px; background: linear-gradient(var(--bg), var(--sky1)); }
.lampu-tutup { width: 62px; }
.merci { font-size: 54px; }
.thanks-line { font-size: 17px; font-style: italic; color: var(--soft); }
.pl-name.small { font: 500 21px/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; overflow-wrap: anywhere; }
footer { position: relative; padding: 18px 16px 26px; text-align: center; font-size: 14px; color: #e6d6c2; background: var(--marun2); }
footer a { color: var(--emas2); }

.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(--marun); color: #fff; cursor: pointer; box-shadow: 0 8px 18px rgba(0, 0, 0, .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; }

.rv { opacity: 0; translate: 0 26px; }
.rv.script { translate: 0 -20px; }
.rv.event { translate: 0 0; scale: .92; }
.couple .rv:nth-child(odd) { translate: -34px 0; } .couple .rv:nth-child(even) { translate: 34px 0; }
.chapters .rv { translate: 0 22px; rotate: -2deg; }
.rv.in { opacity: 1; translate: 0 0; rotate: 0deg; 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), rotate .9s ease calc(var(--d, 0) * 1ms), scale .9s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0) * 1ms); }
@media (prefers-reduced-motion: no-preference) {
  .petals i { display: block; animation-name: gugur, kibar; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite; animation-direction: normal, alternate; }
  /* Sampul: cermin mengambang, kilau lewat di kaca, cahaya lilin, tombol berdenyut. */
  .js:not(.is-open) .cermin-sampul { animation: ambang 4.4s ease-in-out infinite alternate; }
  .js:not(.is-open) .kaca::after { animation: kilau 5.5s 1.2s ease-in-out infinite; }
  .js:not(.is-open) .cover { animation: lilin 3.1s ease-in-out infinite alternate; }
  .js:not(.is-open) .cover-teks { animation: naik 1.1s .3s ease both; }
  .js:not(.is-open) .cover .btn.open { animation: ajak 2.4s 1.5s ease-in-out infinite; }
  /* Setelah terbuka. */
  .js.is-open .jendela i { animation: nyala 5s calc(2.6s + var(--u) * .42s) ease-in-out infinite alternate both; }
  .js.is-open .perahu img { animation: apung 3.4s ease-in-out infinite alternate; }
  .js.is-open .kawanan { animation: kawanan 17s 3s linear infinite; }
  .js.is-open .bg { animation: kepak .7s ease-in-out infinite alternate; } .js.is-open .b2 { animation-delay: -.25s; } .js.is-open .b3 { animation-delay: -.45s; }
  .js:not(.is-open) .title-wrap { opacity: 0; }
  .js .papan { animation: goyang 6s ease-in-out infinite alternate; }
  .js.is-open:not(.no-anim) .title-wrap { animation: masuk-judul 1.3s 3.2s cubic-bezier(.3, 1.3, .5, 1) backwards; }
  .js.is-open:not(.no-anim) .mouse { animation: naik 1s 4.6s both; }
  .js.is-open:not(.no-anim) .ketuk { animation: muncul-ketuk 5s 6s ease both; }
  .js.is-open.no-anim .ketuk { animation: muncul-ketuk 5s 1s ease both; }
  .js .hero { min-height: 280vh; min-height: 280svh; }
  /* Perjalanan gulir: melaju di air, menembus lengkung jembatan. --p = seberapa jauh pembuka digulir. */
  .ready .ly, .ready .perahu { transition: none; }
  .ready .ly-sisi { transform: scale(calc(1 + var(--p, 0) * 3.4)); }
  .ready .ly-tg { transform: scale(calc(1 + var(--p, 0) * var(--p, 0) * 7)); opacity: calc(1 - (var(--p, 0) - .62) * 7); }
  .ready .ly-air { transform: scale(calc(1 + var(--p, 0) * 2.2)); opacity: calc(1 - (var(--p, 0) - .55) * 4); }
  .ready .ly-bg { transform: scale(calc(1 + var(--p, 0) * var(--p, 0) * 1.5)); }
  .ready .perahu { transform: translateY(calc(var(--p, 0) * 30%)); opacity: calc(1 - (var(--p, 0) - .4) * 3); }
  .ready .title-wrap { opacity: calc(1 - var(--p, 0) * 5); translate: 0 calc(var(--p, 0) * -170px); }
  .ready .mouse { opacity: calc(.9 - var(--p, 0) * 6); }
  .ready .terang { opacity: calc((var(--p, 0) - .68) * 3.4); }
}
@keyframes gugur { from { translate: 0 0; } to { translate: 70px 112vh; } }
@keyframes kibar { from { rotate: -50deg; scale: 1 1; } to { rotate: 190deg; scale: .5 1; } }
@keyframes ambang { from { translate: 0 -5px; } to { translate: 0 5px; } }
@keyframes kilau { 0% { translate: -60% 0; } 45%, 100% { translate: 60% 0; } }
@keyframes lilin { from { filter: brightness(1); } to { filter: brightness(1.12); } }
@keyframes naik { from { opacity: 0; translate: 0 18px; } to { opacity: .9; translate: 0 0; } }
@keyframes ajak { 0%, 100% { scale: 1; } 50% { scale: 1.04; } }
@keyframes nyala { 0% { opacity: 0; } 12% { opacity: .9; } 55% { opacity: .55; } 100% { opacity: .95; } }
@keyframes apung { from { translate: 0 0; } to { translate: 0 -2px; } }
@keyframes kawanan { 0% { opacity: 0; left: -46%; top: 24%; } 3% { opacity: 1; } 40% { opacity: 1; } 44%, 100% { opacity: 0; left: 108%; top: 7%; } }
@keyframes kepak { from { transform: scaleY(1) rotate(-3deg); } to { transform: scaleY(.76) rotate(4deg); } }
@keyframes masuk-judul { from { opacity: 0; scale: .7; translate: 0 -30px; } to { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes goyang { from { rotate: -.6deg; } to { rotate: .6deg; } }
@keyframes muncul-ketuk { 0%, 100% { opacity: 0; } 12%, 80% { opacity: 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; scale: none; } *, *::before, *::after { animation: none !important; } .js .ly, .js .perahu, .js .cermin-sampul { transition: none; } }