/* Pora — undangan pernikahan pedang pora bergaya lukisan cat air: map surat perintah bersegel lilin dibuka, kamera maju ke
   jalan berkarpet merah menuju gedung, dua baris prajurit mengangkat pedang satu per satu membentuk lengkung, plakat kuningan
   turun bergantung pita. Tanpa lambang resmi. Adegannya lapisan gambar (assets/img/*.webp) yang digerakkan CSS. */
@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: #f5efe0; --bg2: #fbf7ec; --zaitun: #5b6640; --zaitun2: #3f4a2c; --zaitun3: #2b3320; --tinta: #39351f; --soft: #6c6750;
  --kuningan: #a9833f; --kuningan2: #e2c98f; --marun: #7a1f2b; --marun2: #a43242; --kertas: #fffbf0; --garis: #dcd2b4; --sky1: #f6efd8;
  --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(--zaitun3); }
body { margin: 0; background: var(--zaitun3); 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(--kuningan); 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, .4); } }

/* Adegan: selebar kolom halaman, di belakang isi. Keadaan dasar = pedang sudah membentuk lengkung; sebelum dibuka
   (.js:not(.is-open)) pedang tegak dan kamera sedikit mundur. Empat baris prajurit memakai satu gambar yang sama,
   diperkecil dari titik hilang 50% 56% (ambang pintu gedung). Pangkal pedang (.pd) tepat di kepalan tangan. */
.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% 56%; }
.ly > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.ar { transform: scale(calc(var(--s) * var(--k, 1))); }
.b1 { --s: 1; --n: 0; } .b2 { --s: .62; --n: 1; } .b3 { --s: .4; --n: 2; } .b4 { --s: .26; --n: 3; }
.prj { position: absolute; bottom: 3%; height: 46%; aspect-ratio: 460 / 960; container-type: size; }
.prj.l { left: -4.8%; } .prj.r { right: -4.8%; transform: scaleX(-1); }
.orang { position: relative; width: 100%; height: 100%; max-width: none; }
.pd { position: absolute; left: 92%; top: 4.7%; width: 0; height: 0; transform: rotate(34deg); }
.pd img { position: absolute; left: 0; top: 0; height: 50cqh; width: auto; max-width: none; transform: translate(-54%, -89%); }
.kilap { position: absolute; left: 50%; top: 38%; width: 22%; aspect-ratio: 1; translate: -50% -50%; opacity: 0; background: radial-gradient(closest-side, #fff, rgba(255, 244, 205, .6) 22%, transparent), linear-gradient(90deg, transparent 47%, #fff 50%, transparent 53%), linear-gradient(transparent 47%, #fff 50%, transparent 53%); mix-blend-mode: screen; }
.rays { position: absolute; left: 50%; top: 47%; width: 170%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 246, 214, .3) 0 5deg, transparent 5deg 18deg); -webkit-mask-image: radial-gradient(circle, #000 5%, transparent 38%); mask-image: radial-gradient(circle, #000 5%, transparent 38%); opacity: .5; }
.debu { position: absolute; inset: 0; transition: opacity 1.6s ease 5s; } .js:not(.is-open) .debu { opacity: 0; }
.debu i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff3c4; box-shadow: 0 0 7px 2px rgba(255, 232, 160, .7); opacity: 0; }
.debu i:nth-child(1) { left: 28%; top: 38%; animation-duration: 8.7s, 3.1s; animation-delay: -2.4s, -.2s; }
.debu i:nth-child(2) { left: 72%; top: 62%; animation-duration: 12.2s, 2.6s; animation-delay: -4.9s, -1.5s; }
.debu i:nth-child(3) { left: 48%; top: 46%; animation-duration: 8.8s, 2.2s; animation-delay: -4.9s, -2.8s; }
.debu i:nth-child(4) { left: 21%; top: 54%; animation-duration: 8.5s, 3.1s; animation-delay: -5.9s, -.2s; }
.debu i:nth-child(5) { left: 64%; top: 41%; animation-duration: 10.9s, 3.1s; animation-delay: -.8s, -2.7s; }
.debu i:nth-child(6) { left: 36%; top: 68%; animation-duration: 11.5s, 2.4s; animation-delay: -3.3s, -.1s; }
.debu i:nth-child(7) { left: 55%; top: 74%; animation-duration: 9.9s, 2.4s; animation-delay: -7.8s, -2.1s; }
.debu i:nth-child(8) { left: 80%; top: 50%; animation-duration: 7.8s, 3.1s; animation-delay: -3.3s, -.3s; }
.debu i:nth-child(9) { left: 44%; top: 60%; animation-duration: 7.9s, 1.6s; animation-delay: -8.2s, -1.2s; }
.debu i:nth-child(10) { left: 16%; top: 36%; animation-duration: 10.5s, 2.6s; animation-delay: -8.6s, -1.5s; }
.petals { position: absolute; inset: 0; transition: opacity 1.4s ease 4.6s; } .js:not(.is-open) .petals { opacity: 0; }
.petals i { position: absolute; top: -4%; border-radius: 90% 10% 80% 20%; background: linear-gradient(135deg, #d4515f, var(--marun)); display: none; }
.petals i:nth-child(3n) { background: linear-gradient(135deg, #fff, #f2e6d0); }
.petals i:nth-child(1) { left: 48%; width: 12px; height: 10px; animation-duration: 13.9s, 2.6s; animation-delay: -5.3s, -1.2s; opacity: .7; }
.petals i:nth-child(2) { left: 68%; width: 8px; height: 6px; animation-duration: 10.1s, 3.5s; animation-delay: -13.9s, -2.8s; opacity: .8; }
.petals i:nth-child(3) { left: 27%; width: 13px; height: 8px; animation-duration: 11.5s, 3.1s; animation-delay: -4s, -.6s; opacity: .8; }
.petals i:nth-child(4) { left: 71%; width: 8px; height: 8px; animation-duration: 15.7s, 2.6s; animation-delay: -8.8s, -3.9s; opacity: .6; }
.petals i:nth-child(5) { left: 45%; width: 8px; height: 9px; animation-duration: 12.3s, 2.8s; animation-delay: -1.8s, -3s; opacity: .8; }
.petals i:nth-child(6) { left: 3%; width: 13px; height: 9px; animation-duration: 14s, 4s; animation-delay: -9.7s, -3.4s; opacity: .8; }
.petals i:nth-child(7) { left: 39%; width: 11px; height: 9px; animation-duration: 13.1s, 3.5s; animation-delay: -3.3s, -1.8s; opacity: .8; }
.petals i:nth-child(8) { left: 83%; width: 10px; height: 10px; animation-duration: 14.7s, 4.2s; animation-delay: -.6s, -.6s; opacity: .7; }
.petals i:nth-child(9) { left: 57%; width: 12px; height: 10px; animation-duration: 13.5s, 3.5s; animation-delay: -13.9s, -1.4s; opacity: .7; }
.petals i:nth-child(10) { left: 10%; width: 10px; height: 8px; animation-duration: 9.8s, 2.9s; animation-delay: -10s, -4s; opacity: .8; }
.petals i:nth-child(11) { left: 91%; width: 12px; height: 9px; animation-duration: 9.9s, 2.8s; animation-delay: -9s, -3.3s; opacity: .7; }
.petals i:nth-child(12) { left: 33%; width: 13px; height: 6px; animation-duration: 10.9s, 2.4s; animation-delay: -3.8s, -2.8s; opacity: .8; }
.terang { position: absolute; inset: 0; background: radial-gradient(circle at 50% 56%, #fff 0, #fffdf5 60%, var(--bg) 100%); opacity: 0; }

/* Pembukaan: kamera maju pelan, lalu pedang naik berurutan dari baris depan ke belakang. */
.js .ly { transition: transform 3.8s cubic-bezier(.45, 0, .2, 1) 1.6s; }
.js .pd { transition: transform .85s cubic-bezier(.3, 1.45, .55, 1) calc(2.5s + var(--n) * .42s); }
.js:not(.is-open) .ly-bg { transform: scale(.94); }
.js:not(.is-open) .ly-sisi { transform: scale(.88); }
.js:not(.is-open) .ar { --k: .8; }
.js:not(.is-open) .pd { transform: rotate(-7deg); }
.js.no-anim .ly, .js.no-anim .pd, .js.no-anim .petals, .js.no-anim .debu { transition: none; }

.caps { font: 500 13px/1.4 var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--kuningan); }
.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(--kuningan2); border-radius: 4px; 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(--kuningan); border-color: var(--kuningan); color: #fff; }

/* ---------- Sampul: map dinas di atas meja. Tutupnya berengsel di punggung kiri, tali & segel lepas saat dibuka. ---------- */
.cover { position: relative; min-height: 100vh; min-height: 100svh; padding: 26px 20px 30px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; text-align: center; background: radial-gradient(ellipse at 50% 42%, #5a6442, var(--zaitun2) 58%, var(--zaitun3)); color: #f6efd8; overflow: hidden; }
.cover[hidden] { display: none; }
.berkas { position: relative; width: min(86vw, 370px, 58svh); aspect-ratio: 760 / 1044; perspective: 1500px; }
.dalam { position: absolute; inset: 1.5% 2% 1.5% 3%; padding: 13% 10%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: var(--kertas); color: var(--tinta); border-radius: 3px; box-shadow: 0 16px 40px rgba(0, 0, 0, .4); }
.d-isi { font-size: 17px; line-height: 1.45; color: var(--soft); }
.d-nama { font: 400 38px/1.1 var(--script); color: var(--marun); overflow-wrap: anywhere; }
.d-cap { padding: 4px 12px; border: 2px solid var(--marun); border-radius: 4px; color: var(--marun); font: 700 12px/1.3 var(--display); letter-spacing: .2em; text-transform: uppercase; rotate: -6deg; }
.tutup { position: absolute; inset: 0; transform-origin: 3% 50%; transform-style: preserve-3d; backface-visibility: hidden; }
.map { width: 100%; height: 100%; max-width: none; }
.label { position: absolute; left: 28.7%; top: 18.9%; width: 44.7%; height: 16.2%; padding: 2%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--tinta); }
.label .caps { font-size: 8px; letter-spacing: .24em; color: var(--marun); }
.names { font: 400 21px/1.08 var(--script); overflow-wrap: anywhere; }
.names .amp { margin: 0 .22em; color: var(--kuningan); }
.stempel { position: absolute; left: 50%; top: 70%; translate: -50% -50%; rotate: -9deg; padding: 6px 14px; border: 3px double rgba(232, 214, 170, .75); border-radius: 5px; color: rgba(232, 214, 170, .78); font: 700 15px/1.2 var(--display); letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; }
.lampiran { position: absolute; left: 50%; top: 57%; width: 46%; aspect-ratio: 4 / 3.4; translate: -50% 0; rotate: -3deg; padding: 4px; background: #fff; box-shadow: 0 6px 14px rgba(0, 0, 0, .3); }
.lampiran img { width: 100%; height: 100%; object-fit: cover; }
.lampiran i, .grid figure i { position: absolute; left: 14%; top: -10px; width: 12px; height: 34px; border: 2px solid #a7a79f; border-bottom-color: #8b8b84; border-radius: 7px; }
.tali { position: absolute; left: 2.5%; right: 1%; top: 49.4%; height: 4px; border-radius: 2px; background: linear-gradient(#d3b26d, #8d6a2c); box-shadow: 0 2px 3px rgba(0, 0, 0, .3); transform-origin: 50% 50%; }
.segel { position: absolute; left: 50%; top: 50%; width: 25%; translate: -50% -50%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.segel img { width: 100%; }
.cover-bottom { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.to { font-size: 15px; line-height: 1.4; opacity: .85; }
.guest-name { font: 600 23px/1.2 var(--serif); overflow-wrap: anywhere; }
.cover .btn.open { margin-top: 8px; min-width: 230px; min-height: 48px; }

.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 .8s ease 1.5s; }
.js:not(.is-open) body { overflow: hidden; }
.js .tutup { transition: transform 1.25s cubic-bezier(.5, 0, .3, 1) .55s; }
.js .tali { transition: transform .5s cubic-bezier(.5, 0, 1, .6), opacity .4s linear .1s; }
.js .segel { transition: transform .5s cubic-bezier(.5, 0, 1, .6), opacity .4s linear .1s; }
.js .cover-bottom { transition: opacity .4s ease; }
.js.is-open .cover { opacity: 0; pointer-events: none; }
.js.is-open .tutup { transform: rotateY(-168deg); }
.js.is-open .tali { transform: translateY(70px) rotate(5deg); opacity: 0; }
.js.is-open .segel { transform: translateY(150px) rotate(40deg) scale(.8); opacity: 0; }
.js.is-open .cover-bottom { opacity: 0; }
.js.no-anim .cover, .js.no-anim .tutup, .js.no-anim .tali, .js.no-anim .segel { transition: none; }
html:not(.js) .cover .open { display: none; }
.memuat .cover .open { pointer-events: none; opacity: .6; }

/* ---------- Pembuka: plakat kuningan bergantung pita ---------- */
.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(--zaitun2), var(--zaitun)); }
.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; pointer-events: none; overflow: hidden; }
.scene-off .hero-pin { visibility: hidden; }
.title-wrap { width: min(82%, 350px); }
.papan { position: relative; transform-origin: 50% 0; }
.papan > img { width: 100%; height: auto; max-width: none; }
.papan-t { position: absolute; left: 15%; right: 15%; top: 32%; bottom: 13%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; color: #4d3613; }
.papan-t .caps { font-size: 9px; letter-spacing: .26em; color: #5e4419; }
.t-name { font: 400 clamp(25px, 8.4vw, 36px)/1.05 var(--script); color: #47300e; text-shadow: 0 1px 0 rgba(255, 240, 200, .6); overflow-wrap: anywhere; }
.t-name .amp { font-size: .78em; }
.pl-date { font: 600 10px/1.4 var(--display); letter-spacing: .14em; 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: .85; }
.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 { display: none; }

/* ---------- Isi: kertas surat, papan zaitun, dan peta bergantian ---------- */
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: 250px; max-width: 76vw; height: 24px; margin: 10px auto 0; background: url("img/pembatas.webp") center / contain no-repeat; }
.verse { padding-top: 96px !important; background: linear-gradient(var(--bg2), var(--bg)) !important; }
.verse-bunga { position: absolute; left: 50%; top: -28px; width: 300px; max-width: 86%; translate: -50% 0; }
.quote { font: italic 500 21px/1.6 var(--serif); max-width: 20em; }
.source { font: 600 14px/1.4 var(--display); letter-spacing: .14em; }

/* Mempelai: lembar data personel dengan pasfoto dijepit dan papan nama dada, berselang kiri-kanan. */
.couple { display: flex; flex-direction: column; gap: 30px; width: 100%; margin-top: 12px; }
.person { position: relative; display: grid; grid-template-columns: 122px 1fr; gap: 16px; padding: 16px; border-radius: 3px; background: var(--kertas); border: 1px solid var(--garis); box-shadow: 0 12px 26px rgba(60, 50, 20, .14); text-align: left; rotate: -1deg; }
.person:nth-child(even) { grid-template-columns: 1fr 122px; rotate: 1deg; }
.person:nth-child(even) .pasfoto { order: 2; }
.pasfoto { position: relative; aspect-ratio: 3 / 4; padding: 4px; background: #fff; border: 1px solid var(--garis); }
.pasfoto > * { width: 100%; height: 100%; object-fit: cover; }
.pasfoto span { display: flex; align-items: center; justify-content: center; background: var(--zaitun); font: 400 58px/1 var(--script); color: var(--kuningan2); }
.data { min-width: 0; display: flex; flex-direction: column; gap: 5px; justify-content: center; }
.papan-dada { align-self: flex-start; padding: 3px 12px; border-radius: 2px; background: linear-gradient(#20201c, #0f0f0d); box-shadow: inset 0 0 0 1px var(--kuningan), 0 2px 3px rgba(0, 0, 0, .35); color: #f4f0e4; font: 600 12px/1.5 var(--display); letter-spacing: .18em; text-transform: uppercase; }
.person h3 { font: 600 22px/1.15 var(--serif); color: var(--zaitun2); overflow-wrap: anywhere; }
.parents { font-size: 16px; line-height: 1.4; color: var(--soft); }
.ig { font-size: 15px; font-weight: 700; color: var(--marun); }

/* Menuju hari H: papan zaitun bergaris kontur. */
main > section.count, main > section.rsvp { background: linear-gradient(180deg, var(--zaitun), var(--zaitun2)); color: #f6efd8; }
.count .caps, .rsvp .caps { color: var(--kuningan2); }
.count .script, .rsvp .script { color: #fff; }
.countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; margin-top: 6px; }
.countdown div { padding: 14px 0 10px; border-radius: 3px; background: var(--zaitun3); box-shadow: inset 0 0 0 1px rgba(226, 201, 143, .55); display: flex; flex-direction: column; gap: 2px; }
.countdown b { font: 600 30px/1.1 var(--display); font-variant-numeric: tabular-nums; color: var(--kuningan2); }
.countdown span { font-size: 14px; }
html:not(.js) .countdown { display: none; }

/* Rangkaian acara: lembar perintah harian dengan kolom jam. */
.harian { width: 100%; padding: 30px 18px 22px; background: var(--kertas); border: 1px solid var(--garis); box-shadow: 0 16px 34px rgba(60, 50, 20, .14); outline: 1px solid var(--garis); outline-offset: -7px; }
.baris { display: grid; grid-template-columns: 82px 1fr; gap: 14px; padding: 18px 2px; margin-top: 12px; border-top: 1px solid var(--garis); text-align: left; }
.pukul { font: 600 22px/1.1 var(--display); color: var(--marun); font-variant-numeric: tabular-nums; }
.pukul small { display: block; margin-top: 3px; font-size: 11px; letter-spacing: .2em; color: var(--soft); }
.ket h3 { font: 600 23px/1.15 var(--serif); color: var(--zaitun2); }
.when { font-size: 17px; font-weight: 600; }
.where { font-size: 16px; line-height: 1.45; color: var(--soft); overflow-wrap: anywhere; }
.tautan { display: inline-block; margin-top: 6px; font: 600 12px/1.4 var(--display); letter-spacing: .1em; }
.dress { padding-top: 14px; border-top: 1px solid var(--garis); font-size: 16px; color: var(--soft); }
.dress b { display: block; font: 600 11px/1.6 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--tinta); }

/* Kisah: titik rute di atas peta medan. */
main > section.story { background: linear-gradient(rgba(245, 239, 224, .62), rgba(245, 239, 224, .28) 30%), url("img/peta.webp") center / cover; }
.story .caps { color: var(--marun); }
.chapters { position: relative; list-style: none; padding: 8px 0 0; width: 100%; display: flex; flex-direction: column; gap: 26px; text-align: left; counter-reset: titik; }
.chapters::before { content: ""; position: absolute; left: 17px; top: 20px; bottom: 30px; border-left: 3px dashed var(--marun); opacity: .75; }
.chapters li { position: relative; margin-left: 46px; padding: 14px 16px; background: rgba(255, 251, 240, .9); border: 1px solid var(--garis); border-radius: 3px; counter-increment: titik; }
.chapters li::before { content: counter(titik); position: absolute; left: -46px; top: 8px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50% 50% 50% 4px; rotate: -45deg; background: var(--marun); box-shadow: 0 3px 6px rgba(0, 0, 0, .3); color: transparent; }
.chapters li::after { content: counter(titik); position: absolute; left: -46px; top: 8px; width: 34px; height: 34px; display: grid; place-items: center; color: #fff; font: 600 14px/1 var(--display); }
.chapters h3 { font: 600 23px/1.15 var(--serif); color: var(--zaitun2); margin-bottom: 4px; }
.chapters p { font-size: 17px; line-height: 1.5; color: var(--soft); }
.kisah-foto { margin: 2px 0 12px; padding: 5px; background: #fff; box-shadow: 0 8px 18px rgba(30, 20, 20, .16); rotate: -1.2deg; }
.kisah-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Dokumentasi: foto dijepit klip, diletakkan acak. */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 14px; width: 100%; margin-top: 8px; }
.grid figure { position: relative; padding: 6px; background: #fff; box-shadow: 0 10px 22px rgba(60, 50, 20, .18); rotate: -1.6deg; }
.grid figure:nth-child(even) { rotate: 1.8deg; }
.grid figure:nth-child(3n+1) { grid-column: 1 / -1; rotate: .6deg; }
.grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.grid figure:nth-child(3n+1) img { aspect-ratio: 4 / 3; }
.grid figure i { top: -12px; }

.gift-list { display: grid; gap: 12px; width: 100%; }
.gift-card { padding: 16px; border-radius: 3px; background: var(--kertas); border: 1px solid var(--garis); border-left: 5px solid var(--kuningan); display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; }
.bank { font: 600 12px/1.4 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--zaitun); }
.number { font-size: 22px; font-weight: 700; letter-spacing: .04em; overflow-wrap: anywhere; }
.holder { font-size: 15px; color: var(--soft); }
.gift-card .btn { flex-shrink: 0; min-height: 42px; 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: 3px; 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(--kuningan2); 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; padding: 4px; border: 1.5px solid rgba(226, 201, 143, .8); border-radius: 3px; text-align: center; font: 600 11px/1.3 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.opt input:checked + span { background: var(--kuningan2); color: var(--zaitun3); }
.opt input:focus-visible + span { outline: 2px solid var(--kuningan2); 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(--kuningan); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--kuningan); }
.status { font-size: 14px; font-weight: 700; color: var(--zaitun); }
.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(--marun2); font-style: italic; color: var(--soft); }

main > section.closing { padding-top: 54px; background: linear-gradient(180deg, var(--bg), var(--bg2)); }
.buket { width: 220px; }
.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: #d9d2b8; background: var(--zaitun3); }
footer a { color: var(--kuningan2); }

.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, .35); }
.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; }

/* Isi muncul bertahap saat digulir (.rv dipasang pora.js), ornamen bergerak saat bagiannya terlihat (.tampak). */
.rv { opacity: 0; translate: 0 26px; }
.rv.script { translate: 0 -20px; }
.grid .rv, .rv.harian { translate: 0 0; scale: .9; }
.couple .rv:nth-child(odd) { translate: -36px 0; } .couple .rv:nth-child(even) { translate: 36px 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); }
@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; }
  .debu i { animation-name: melayang, kedip; animation-timing-function: ease-in-out, ease-in-out; animation-iteration-count: infinite; animation-direction: alternate, alternate; }
  .rays { animation: putar 120s linear infinite; }
  /* Kilau bertemu ujung pedang: sekali saat lengkung terbentuk (dari baris belakang), lalu berulang pelan. */
  .js.is-open .kilap { animation: kilap 7s calc(4.5s + (3 - var(--n)) * .22s) ease-out infinite; }
  .js:not(.is-open) .segel { animation: denyut-segel 2.4s ease-in-out infinite; }
  .papan { animation: goyang 5s ease-in-out infinite alternate; }
  .js.is-open:not(.no-anim) .papan { animation: turunP 1.6s 4.9s cubic-bezier(.3, 1.2, .4, 1) both, goyang 5s 6.5s ease-in-out infinite alternate; }
  .js.is-open:not(.no-anim) .mouse { animation: naik 1s 6.2s both; }
  .js:not(.is-open) .title-wrap { opacity: 0; }
  .js .tampak .buket { animation: ayun 7s ease-in-out infinite; transform-origin: 50% 80%; }
  .js .verse-bunga { transition: scale 1.2s cubic-bezier(.3, 1.3, .5, 1), opacity 1s ease; }
  .js .verse:not(.tampak) .verse-bunga { scale: .7; opacity: 0; }
  .js .hero { min-height: 280vh; min-height: 280svh; }
  /* Perjalanan gulir: --p = seberapa jauh pembuka digulir. Di p = 0 nilainya sama dengan akhir pembukaan. */
  .ready .ly { transition: none; }
  .ready .ly-bg { transform: scale(calc(1 + var(--p, 0) * var(--p, 0) * 3.4)); }
  .ready .ly-sisi { transform: scale(calc(1 + var(--p, 0) * 3)); }
  .ready .ar { --k: calc(1 + var(--p, 0) * 3.4); }
  .ready .b1 { opacity: calc(1 - (var(--p, 0) - .1) * 6); } .ready .b2 { opacity: calc(1 - (var(--p, 0) - .34) * 6); } .ready .b3 { opacity: calc(1 - (var(--p, 0) - .56) * 6); } .ready .b4 { opacity: calc(1 - (var(--p, 0) - .74) * 6); }
  .ready .title-wrap { opacity: calc(1 - var(--p, 0) * 5); translate: 0 calc(var(--p, 0) * -160px); }
  .ready .mouse { opacity: calc(.85 - 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 melayang { from { translate: -14px 10px; } to { translate: 16px -22px; } }
@keyframes kedip { from { opacity: 0; } to { opacity: .9; } }
@keyframes putar { to { rotate: 360deg; } }
@keyframes kilap { 0% { opacity: 0; scale: .3; rotate: 0deg; } 4% { opacity: 1; scale: 1; } 10%, 100% { opacity: 0; scale: .5; rotate: 40deg; } }
@keyframes denyut-segel { 50% { scale: 1.07; } }
@keyframes goyang { from { rotate: -1.2deg; } to { rotate: 1.2deg; } }
@keyframes turunP { from { opacity: 0; translate: 0 -110%; rotate: 6deg; } to { opacity: 1; translate: 0 0; rotate: -1.2deg; } }
@keyframes naik { from { opacity: 0; translate: 0 18px; } to { opacity: .85; translate: 0 0; } }
@keyframes ayun { 0%, 100% { rotate: -2deg; } 50% { rotate: 2deg; } }
@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 .pd, .js .tutup, .js .tali, .js .segel { transition: none; } }