/* Pura — undangan pernikahan adat Bali bergaya lukisan cat air: sampul foto penuh layar, lalu candi bentar yang kedua
   belahannya rapat menutup layar; belahannya bergeser membelah, pandangan naik menapaki tangga, penjor ditegakkan,
   lalu tedung terbuka dan kain prada terurai turun berisi nama mempelai. Selama pembuka digulir pandangan terus naik
   melewati candi bentar ke meru sampai layar memutih. 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: #fbf5ea; --bg2: #fffaf2; --deep: #b8573a; --deep2: #8f3a24; --ink: #4d2f24; --soft: #806a5c; --gold: #c39a45; --gold-hi: #ecd9a0;
  --aksen: #a8442c; --r1: #fff7dc; --r2: #f8dc86; --r3: #edbc4e; --sky1: #fbeede; --sky2: #f6e3cf; --card: #fffbf4; --line: #ecdcc8;
  --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(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 500 19px/1.55 var(--serif); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
h1, h2, h3, p, ol { margin: 0; }
a { color: var(--deep2); }
:focus-visible { outline: 2px solid var(--gold); 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, 40, 25, .28); } }

/* Adegan: lapisan gambar selebar kolom halaman, di belakang isi; hanya bagian pembuka (.hero) yang tembus pandang.
   .stage berbanding 940:1684 (ukuran lukisan) dan selalu menutup layar. Urutan lapisan dari belakang: langit & Gunung
   Agung → meru → tangga & pelataran → dua belahan candi bentar → penjor → tanaman depan. Keadaan dasar = lukisan utuh
   (celah candi bentar 37,1%–63% lebar). Sebelum dibuka (.js:not(.is-open)) pandangan berada rendah di kaki tangga
   (lapisan diperbesar dari 50% 78%) dan kedua belahan digeser 12,95% lebar ke tengah sampai rapat. */
.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.7915)); aspect-ratio: 940 / 1684; translate: -50% -50%; }
.ly { position: absolute; inset: 0; will-change: transform; transform-origin: 50% 78%; }
.ly > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.ly-bg { transform: scale(1.03); }
.meru { position: absolute; left: 33%; top: 34.6%; width: 34%; aspect-ratio: 520 / 816; }
.meru img { display: block; width: 100%; height: 100%; max-width: none; }
.belah { position: absolute; top: 0; width: 50%; height: 100%; will-change: transform; }
.belah.l { left: 0; } .belah.r { left: 50%; }
.belah img { display: block; width: 100%; height: 100%; max-width: none; }
.pj { position: absolute; top: 26.5%; width: 34%; aspect-ratio: 300 / 523; transform-origin: 12% 100%; }
.pj.l { left: -5%; } .pj.r { right: -5%; scale: -1 1; transform-origin: 50% 100%; }
.pj img { display: block; width: 100%; height: 100%; max-width: none; transform-origin: 12% 100%; }
.js .ly { transition: transform 3.8s cubic-bezier(.5, 0, .2, 1) 1.8s; }
.js .belah { transition: transform 2.2s cubic-bezier(.6, 0, .3, 1) .6s; }
.js .pj { transition: transform 1.8s cubic-bezier(.2, .8, .2, 1) 4s, opacity .8s ease 4s; }
.js:not(.is-open) .ly-bg { transform: scale(1.12) translateY(2%); }
.js:not(.is-open) .ly-meru { transform: scale(1.3) translateY(5%); }
.js:not(.is-open) .ly-tangga { transform: scale(1.6) translateY(9%); }
.js:not(.is-open) .ly-gerbang, .js:not(.is-open) .ly-hias { transform: scale(1.5) translateY(8%); }
.js:not(.is-open) .ly-depan { transform: scale(1.9) translateY(20%); }
.js:not(.is-open) .belah.l { transform: translateX(25.9%); } .js:not(.is-open) .belah.r { transform: translateX(-25.9%); }
.js:not(.is-open) .pj { transform: translateY(40%); opacity: 0; }
.js.no-anim .ly, .js.no-anim .belah, .js.no-anim .pj { transition: none; }
/* Awan tipis di langit, asap dupa dari canang di anak tangga, kelopak kamboja yang gugur. */
.awan { position: absolute; inset: 0; }
.awan i { position: absolute; height: 3.2%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)); }
.awan i:nth-child(1) { left: 6%; top: 7%; width: 46%; } .awan i:nth-child(2) { left: 48%; top: 13%; width: 54%; height: 2.6%; } .awan i:nth-child(3) { left: -10%; top: 19%; width: 40%; height: 2.2%; }
.dupa { position: absolute; width: 0; height: 0; } .d1 { left: 23.6%; top: 87.6%; } .d2 { left: 59.4%; top: 93.4%; }
.dupa i { position: absolute; left: -4px; bottom: 0; width: 8px; height: 54px; border-radius: 50%; background: linear-gradient(to top, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0)); filter: blur(2.5px); transform-origin: 50% 100%; opacity: 0; }
.petals { position: absolute; inset: 0; }
.petals i { position: absolute; top: -4%; border-radius: 80% 20% 70% 30%; background: linear-gradient(135deg, #fff, var(--r1) 45%, var(--r2)); display: none; }
.terang { position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, #fff 0, #fffdf5 60%, var(--bg) 100%); opacity: 0; }
.strip { position: relative; width: calc(100% + 56px); margin: -64px -28px 0; -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 78%, transparent); }
.strip img { display: block; width: 100%; height: auto; }
.petals i:nth-child(1) { left: 28%; width: 13px; height: 8px; animation-duration: 12.2s, 3.5s; animation-delay: -8.8s, -0.3s; opacity: 0.7; }
.petals i:nth-child(2) { left: 58%; width: 11px; height: 8px; animation-duration: 11.2s, 3.7s; animation-delay: -7.6s, -2.2s; opacity: 0.8; }
.petals i:nth-child(3) { left: 79%; width: 10px; height: 8px; animation-duration: 13.8s, 4.0s; animation-delay: -7.3s, -3.0s; opacity: 0.9; }
.petals i:nth-child(4) { left: 6%; width: 10px; height: 7px; animation-duration: 11.8s, 2.5s; animation-delay: -12.1s, -1.9s; opacity: 0.9; }
.petals i:nth-child(5) { left: 47%; width: 14px; height: 10px; animation-duration: 12.4s, 3.8s; animation-delay: -6.2s, -3.7s; opacity: 0.8; }
.petals i:nth-child(6) { left: 10%; width: 9px; height: 8px; animation-duration: 13.0s, 2.9s; animation-delay: -9.4s, -3.1s; opacity: 0.8; }
.petals i:nth-child(7) { left: 51%; width: 13px; height: 10px; animation-duration: 13.4s, 3.4s; animation-delay: -5.7s, -0.9s; opacity: 0.8; }
.petals i:nth-child(8) { left: 85%; width: 9px; height: 9px; animation-duration: 15.9s, 3.6s; animation-delay: -2.3s, -3.4s; opacity: 0.9; }
.petals i:nth-child(9) { left: 71%; width: 13px; height: 7px; animation-duration: 14.3s, 2.8s; animation-delay: -11.6s, -2.3s; opacity: 0.8; }
.petals i:nth-child(10) { left: 13%; width: 9px; height: 10px; animation-duration: 15.1s, 4.2s; animation-delay: -1.2s, -3.2s; opacity: 0.8; }
.petals i:nth-child(11) { left: 17%; width: 9px; height: 9px; animation-duration: 12.6s, 3.1s; animation-delay: -1.7s, -2.4s; opacity: 0.7; }
.petals i:nth-child(12) { left: 46%; width: 14px; height: 9px; animation-duration: 13.3s, 4.1s; animation-delay: -3.9s, -0.9s; opacity: 0.7; }

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

/* Rangkaian bunga lukisan: di bawah foto mempelai, di sampul tanpa foto, dan buket di penutup. */
.spray { position: relative; z-index: 2; width: 118%; max-width: none; margin: -30% auto 0; pointer-events: none; }
.cover-buket { position: absolute; left: 50%; bottom: 20%; width: 56%; max-width: none; translate: -50% 0; opacity: .92; pointer-events: none; }
.buket { position: relative; width: 230px; margin: -30px auto 0; pointer-events: none; }

/* ---------- Sampul: foto penuh layar dengan gradasi gelap, nama di atas, tamu dan tombol di bawah ---------- */
.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) 55%, color-mix(in srgb, var(--deep) 45%, var(--bg))); 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(20, 10, 12, .55) 0%, rgba(20, 10, 12, .05) 34%, rgba(20, 10, 12, .1) 56%, rgba(20, 10, 12, .78) 100%); }
.cover.has-photo .cover-art { display: none; }
.cover-art { position: absolute; inset: 0; }
.cover-top, .cover-bottom { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cover .names { font: 500 34px/1.15 var(--display); letter-spacing: .08em; text-transform: uppercase; overflow-wrap: anywhere; }
.names .amp { margin: 0 .25em; font: 400 40px/1 var(--script); text-transform: none; letter-spacing: 0; }
.cover:not(.has-photo) .cover-top { margin-top: 26vh; }
.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, .55); background: rgba(255, 255, 255, .22); color: inherit; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cover:not(.has-photo) .open { border-color: var(--deep2); background: var(--deep2); color: #fff; }

/* Dengan JS: sampul menutup layar sampai tamu menekan "Buka undangan", lalu memudar dan taman terlihat. */
.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; }

/* ---------- Pembuka: judul di kain prada di bawah tedung (lihat bagian akhir berkas) ---------- */
.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(--sky1), var(--sky2)); }
.js .hero { background: none; }
.frame-art { position: absolute; inset: 0; overflow: hidden; }
.pl-name { font: 500 40px/1.15 var(--display); letter-spacing: .14em; text-transform: uppercase; overflow-wrap: anywhere; }
.pl-name.small { font-size: 22px; margin-top: 10px; }
.pl-and { font: 400 34px/1 var(--script); color: var(--deep2); }
.pl-date { margin-top: 10px; font: 500 15px/1.4 var(--display); letter-spacing: .2em; text-transform: uppercase; }

/* ---------- Isi: bagian berlatar gading dan hijau sage bergantian ---------- */
main > section:not(.hero) { position: relative; padding: 64px 28px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; background: var(--bg); }
.verse { background: linear-gradient(180deg, var(--bg2), var(--bg)) !important; }
.quote { position: relative; font: italic 500 20px/1.6 var(--serif); max-width: 11.5em; }
main > section.verse { overflow: hidden; padding-bottom: 96px; }
.vp { position: absolute; bottom: -18px; width: 31%; max-width: none; transform-origin: 12% 100%; pointer-events: none; opacity: .95; }
.vp.l { left: -10%; } .vp.r { right: -10%; scale: -1 1; transform-origin: 50% 100%; }
.js .vp { transition: translate 1.6s cubic-bezier(.2, .8, .2, 1) .2s, opacity 1s ease .2s; }
.js .verse:not(.buka) .vp { translate: 0 45%; opacity: 0; }
.source { font: 600 14px/1.4 var(--display); letter-spacing: .14em; }
.couple { display: flex; flex-direction: row; align-items: flex-start; gap: 14px; width: calc(100% + 20px); margin: 8px -10px 0; }
.person { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.person + .person { margin-top: 54px; }
.payung { position: relative; z-index: 2; width: 112%; max-width: none; margin-bottom: -21%; transform-origin: 50% 10%; filter: drop-shadow(0 6px 8px rgba(90, 40, 25, .22)); pointer-events: none; }
.js .payung { transition: scale 1.2s cubic-bezier(.3, 1.3, .4, 1) .25s, opacity .5s ease .25s; }
.js .person:not(.buka) .payung { scale: .1 1.18; opacity: 0; }
.portrait { width: 100%; height: auto; aspect-ratio: 3 / 4; padding: 5px; border: 1.5px solid var(--gold); border-radius: 12px 12px 60px 60px; background: var(--card); display: flex; box-shadow: 0 12px 22px rgba(90, 40, 25, .16); }
.portrait > * { flex: 1; width: 100%; height: 100%; border-radius: 8px 8px 55px 55px; object-fit: cover; }
.portrait span { display: flex; align-items: center; justify-content: center; background: var(--bg2); font: 400 90px/1 var(--script); color: var(--deep2); }
.person h3 { font: 400 30px/1.08 var(--script); color: var(--deep2); overflow-wrap: anywhere; }
.parents { font-size: 14.5px; line-height: 1.4; color: var(--soft); max-width: 16em; }
.ig { font-size: 14px; font-weight: 700; color: var(--deep2); }

main > section.count, main > section.rsvp { background: linear-gradient(180deg, var(--deep), var(--deep2)); color: #fff; }
.count .script, .rsvp .script, .count .lead { color: #fff; }
.countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; }
.countdown div { aspect-ratio: 1; border: 1.5px solid var(--gold-hi); border-radius: 50%; box-shadow: inset 0 0 0 4px rgba(236, 217, 160, .18); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
.countdown b { font: 500 25px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.countdown span { font-size: 12.5px; }
.sesaji { position: relative; width: 132px; margin: 8px 0 -22px; }
.sesaji img { display: block; width: 100%; height: auto; }
.sesaji i { position: absolute; left: 68%; top: -4%; width: 9px; height: 60px; margin-left: -4px; border-radius: 50%; background: linear-gradient(to top, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); filter: blur(2.5px); transform-origin: 50% 100%; opacity: 0; translate: 0 -100%; }
html:not(.js) .countdown { display: none; }

.programme { gap: 26px !important; background: linear-gradient(180deg, var(--bg), var(--bg2)) !important; }
.event { position: relative; width: 86%; padding: 46px 20px 62px; background: radial-gradient(circle, rgba(195, 154, 69, .12) 1px, transparent 1.6px) 0 0 / 14px 14px, var(--card); border: 9px solid #8f2a22; border-top-width: 0; box-shadow: inset 0 0 0 1.5px var(--gold), inset 0 0 0 5px var(--card), inset 0 0 0 6px var(--gold-hi); display: flex; flex-direction: column; align-items: center; gap: 12px; transform-origin: 50% 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), 83.3% 100%, 66.6% calc(100% - 28px), 50% 100%, 33.3% calc(100% - 28px), 16.6% 100%, 0 calc(100% - 28px)); }
.event::before { content: ""; position: absolute; left: -9px; right: -9px; top: 0; height: 13px; background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, #8a6a2c); }
.event:nth-child(odd) { align-self: flex-start; margin-left: 2%; } .event:nth-child(even) { align-self: flex-end; margin-right: 2%; }
.when { font: 600 19px/1.5 var(--serif); }
.where { font-size: 17px; line-height: 1.5; color: var(--soft); max-width: 17em; overflow-wrap: anywhere; }
.where b { display: block; font: 600 12px/1.6 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.dress { font-size: 17px; font-style: italic; color: var(--soft); }

.chapters { list-style: none; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 0; text-align: left; }
.chapters li { position: relative; width: 82%; padding: 18px 18px 16px 20px; background: var(--card); border: 1px solid var(--line); border-bottom: 9px solid #a39d94; border-radius: 4px; box-shadow: 0 10px 18px -8px rgba(90, 40, 25, .22); }
.chapters li:nth-child(2) { margin-left: 6%; } .chapters li:nth-child(3) { margin-left: 12%; } .chapters li:nth-child(4) { margin-left: 18%; } .chapters li:nth-child(n+5) { margin-left: 18%; }
.chapters li::before { content: ""; position: absolute; left: -1px; right: -1px; bottom: -9px; height: 3px; background: #c9c3b9; }
.chapters h3 { font: 400 34px/1.05 var(--script); color: var(--deep2); margin-bottom: 6px; }
.chapters p { font-size: 17px; line-height: 1.55; color: var(--soft); }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; border: 4px solid var(--card); box-shadow: 0 10px 22px rgba(90, 40, 25, .14); }
.grid img:nth-child(3n+1) { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.grid img:nth-child(3n+2) { rotate: -1.6deg; } .grid img:nth-child(3n) { rotate: 1.6deg; translate: 0 14px; }
.gallery .grid { padding-bottom: 14px; }

.gift-list { display: grid; gap: 12px; width: 100%; }
.gift-card { position: relative; overflow: hidden; padding: 16px 18px 16px 30px; border-radius: 6px; background: var(--card); border: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; }
.bank { font: 600 12px/1.4 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--deep2); }
.number { font-size: 22px; font-weight: 700; letter-spacing: .04em; overflow-wrap: anywhere; }
.holder { font-size: 15px; color: var(--soft); }
.gift-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; background: conic-gradient(#2b2521 25%, #f8f2e7 0 50%, #2b2521 0 75%, #f8f2e7 0) 0 0 / 14px 14px; }
.gift-card .btn { flex-shrink: 0; min-height: 42px; padding: 0 16px; }
.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; }

.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, .16); display: flex; flex-direction: column; gap: 6px; }
.thanks .big { font: 400 38px/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: 12px; background: #fff; color: var(--ink); 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(--gold-hi); 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: 600 13px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.opt input:checked + span { background: #fff; color: var(--deep2); }
.opt input:focus-visible + span { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.rsvp .btn { min-height: 50px; background: #fff; border-color: #fff; color: var(--deep2); }

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(--deep2); }
.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: 16px; 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: 18px; }
.tag { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--gold); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.status { font-size: 14px; font-weight: 700; color: var(--deep2); }
.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(--r2); font-style: italic; color: var(--soft); }

main > section.closing { padding-top: 90px; background: linear-gradient(180deg, var(--bg), var(--sky2)); }

.tutup { display: flex; width: 62%; margin-top: 8px; }
.tb { display: block; width: 50%; aspect-ratio: 470 / 1063; overflow: hidden; }
.tb img { display: block; width: 100%; height: auto; max-width: none; margin-top: -69.4%; }
.js .tb { transition: translate 2.4s cubic-bezier(.6, 0, .3, 1) .5s; }
.closing.buka .tb.l { translate: 25.7% 0; } .closing.buka .tb.r { translate: -25.7% 0; }
html:not(.js) .tb.l { translate: 25.7% 0; } html:not(.js) .tb.r { translate: -25.7% 0; }
.merci { font-size: 54px; }
.thanks-line { font-size: 17px; font-style: italic; color: var(--soft); }
footer { position: relative; padding: 18px 16px 26px; text-align: center; font-size: 14px; color: var(--soft); background: var(--sky2); }

.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(--deep2); color: #fff; cursor: pointer; box-shadow: 0 8px 18px rgba(90, 40, 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 pura.js): judul turun, foto membesar, mempelai dari kiri/kanan. */
.rv { opacity: 0; translate: 0 26px; }
.rv.script { translate: 0 -22px; }
.rv.portrait { translate: 0 0; scale: .86; }
.grid .rv { translate: 0 40px; scale: .8; }
.rv.event { opacity: 1; translate: 0 0; scale: 1 .04; }
.chapters .rv { translate: -46px 22px; }
.countdown .rv { translate: 0 0; scale: .3; }
.gift-list .rv { translate: 40px 0; }
.person:nth-child(odd) .rv { translate: -30px 0; } .person:nth-child(even) .rv { translate: 30px 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) {
  /* Urutan sesudah .is-open: belahan candi bentar bergeser membelah (0,6–2,8 dtk) → pandangan naik menapaki tangga
     (1,8–5,6) → penjor ditegakkan (4) → tiang tedung naik (5), tedung terbuka (5,5), kain prada terurai (6,3),
     nama muncul (7,1). Sisanya berulang: penjor & kain berayun, awan bergeser, asap dupa, kelopak kamboja gugur. */
  .petals i { display: block; animation-name: gugur, kibar; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite; animation-direction: normal, alternate; }
  .spray { animation: ayun 6s ease-in-out infinite; transform-origin: 50% 100%; } .buket { animation: ayun 7s ease-in-out infinite; transform-origin: 50% 80%; }
  .cover-top { animation: turun 1.2s .2s both; } .cover-bottom { animation: naik 1.2s .5s both; }
  .cover .open { animation: denyut 2.8s 2s ease-in-out infinite; }
  .pj img { animation: goyangP 5.5s ease-in-out infinite alternate; } .pj.r img { animation-duration: 6.4s; animation-delay: -2s; }
  .awan i { animation: geserA 26s ease-in-out infinite alternate; } .awan i:nth-child(2) { animation-duration: 34s; animation-direction: alternate-reverse; }
  .dupa i { animation: asap 4.6s ease-out infinite; } .dupa i:nth-child(2) { animation-delay: -1.5s; } .dupa i:nth-child(3) { animation-delay: -3s; }
  .vp { animation: goyangP 5.5s ease-in-out infinite alternate; } .vp.r { animation-duration: 6.4s; animation-delay: -2s; }
  .event { animation: goyang 6s ease-in-out infinite alternate; } .event:nth-child(even) { animation-delay: -3s; }
  .buka .sesaji i { animation: asap 4.6s ease-out infinite; } .buka .sesaji i:nth-child(3) { animation-delay: -1.5s; } .buka .sesaji i:nth-child(4) { animation-delay: -3s; }
  .payung { animation: goyang 5.4s ease-in-out infinite alternate; }
  @supports (animation-timeline: view()) { .strip img { animation: geserS linear both; animation-timeline: view(); } }
  .gulung { animation: goyang 5s ease-in-out infinite alternate; }
  .js.is-open:not(.no-anim) .pajeng { animation: naikT 1.2s 5s cubic-bezier(.2, .8, .2, 1) both; }
  .js.is-open:not(.no-anim) .kanopi { animation: bukaT 1.3s 5.5s cubic-bezier(.3, 1.3, .4, 1) both; }
  .js.is-open:not(.no-anim) .gulung { animation: urai 1.5s 6.3s cubic-bezier(.4, 0, .2, 1) both, goyang 5s 7.8s ease-in-out infinite alternate; }
  .js.is-open:not(.no-anim) .kain-t { animation: naik 1s 7.1s both; }
  .js.is-open:not(.no-anim) .hero-pin > .gugur { animation: naik 1s 7.6s both; }
  .gugur img { animation: jatuhK 3s ease-in infinite; } .gugur img + img { animation-delay: -1.5s; }

}
@keyframes geserS { from { scale: 1.16; translate: 0 5%; } to { scale: 1; translate: 0 -3%; } }
@keyframes goyangP { from { rotate: -1.6deg; } to { rotate: 1.8deg; } }
@keyframes goyang { from { rotate: -1.3deg; } to { rotate: 1.3deg; } }
@keyframes geserA { from { translate: -6% 0; } to { translate: 8% 0; } }
@keyframes asap { 0% { opacity: 0; transform: translate(0, 0) scale(.6, .4) rotate(0deg); } 20% { opacity: .8; } 100% { opacity: 0; transform: translate(14px, -46px) scale(2.2, 1.5) rotate(14deg); } }
@keyframes naikT { from { opacity: 0; translate: 0 34%; } to { opacity: 1; translate: 0 0; } }
@keyframes bukaT { from { scale: .1 1.18; } to { scale: 1 1; } }
@keyframes urai { from { clip-path: inset(0 -20px 100% -20px); } to { clip-path: inset(0 -20px -30px -20px); } }
@keyframes jatuhK { 0% { translate: -8px -10px; rotate: 0deg; opacity: 0; } 18% { opacity: 1; } 100% { translate: 8px 30px; rotate: 210deg; opacity: 0; } }
@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 kelip { 0%, 100% { opacity: 0; translate: 0 0; } 50% { opacity: .75; translate: 6px -26px; } }
@keyframes kepak { from { scale: 1 1; } to { scale: .2 1; } }
@keyframes terbang1 { 0%, 100% { translate: 0 0; rotate: 20deg; } 25% { translate: 70px -60px; rotate: -10deg; } 50% { translate: 150px -20px; rotate: 30deg; } 75% { translate: 60px 30px; rotate: -25deg; } }
@keyframes terbang2 { 0%, 100% { translate: 0 0; rotate: -20deg; } 30% { translate: -90px 40px; rotate: 15deg; } 60% { translate: -150px -10px; rotate: -30deg; } 80% { translate: -50px -40px; rotate: 20deg; } }
@keyframes alir { to { stroke-dashoffset: -14; } }
@keyframes riak { from { scale: .4; opacity: .9; } to { scale: 2.6; opacity: 0; } }
@keyframes apung { from { translate: -2px 1px; } to { translate: 2px -1px; } }
@keyframes apung2 { from { translate: -1px 0; rotate: -.25deg; } to { translate: 1px 0; rotate: .25deg; } }
@keyframes kelip2 { 0%, 100% { scale: .3; opacity: 0; } 50% { scale: 1.1; opacity: .95; } }
@keyframes sinar { from { opacity: .55; } to { opacity: 1; } }
@keyframes napas { from { scale: 1; } to { scale: 1.035; } }
@keyframes silau { 0%, 100% { opacity: 0; } 50% { opacity: .5; } }
@keyframes mekarR { from { opacity: 0; scale: -.3 .3; } to { opacity: 1; scale: -1 1; } }
@keyframes naik2 { from { opacity: 0; translate: 0 50%; } to { opacity: 1; translate: 0 0; } }
@keyframes kabut { from { opacity: .9; } to { opacity: 0; } }
@keyframes toleh { from { rotate: -4deg; } to { rotate: 5deg; } }
@keyframes kibas { from { rotate: -1.2deg; } to { rotate: 1.2deg; } }
@keyframes plakat { from { opacity: 0; translate: 0 26px; scale: .94; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes mekar { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }
@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(255, 255, 255, 0); } 50% { box-shadow: 0 0 0 9px rgba(255, 255, 255, .18); } }
@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 .belah, .js .pj, .js .vp, .js .payung, .js .tb { transition: none; } }
.js body.locked { overflow: visible; }

/* ---------- Pembuka Pura: judul di kain prada (gambar kain.webp, teks HTML di panel kremnya) yang bergantung di bawah
   tedung. Tedung = tiang.webp + tedung.webp (kanopi, dibuka dengan skala mendatar dari puncaknya). Selama pembuka
   digulir (.ready, --p 0→1 dipasang pura.js) pandangan terus naik: tangga melaju lewat, kedua belahan candi bentar
   menyingkir ke samping, meru membesar, lalu layar memutih. ---------- */
.script, .person h3, .chapters h3, .wishes-head h2 { color: var(--aksen); }
.count .script, .rsvp .script { color: #fff; }
.hero-pin { display: grid; place-items: start center; width: 100%; position: relative; }
.js .hero { display: block; padding: 0; }
.js .hero-pin { position: fixed; left: 50%; bottom: 0; width: min(100%, 480px); height: 100vh; height: 100svh; translate: -50% 0; padding: 7vh 0 0; pointer-events: none; overflow: hidden; }
.scene-off .hero-pin { visibility: hidden; }
.title-wrap { width: min(78%, 320px); }
.pajeng { position: relative; display: flex; flex-direction: column; align-items: center; }
.atap { position: relative; z-index: 2; width: 100%; aspect-ratio: 460 / 276; }
.kanopi { position: relative; display: block; width: 100%; height: 100%; max-width: none; transform-origin: 50% 10%; filter: drop-shadow(0 8px 10px rgba(90, 40, 25, .22)); }
.tiang { position: absolute; left: 50%; top: 78.3%; width: 5.44%; height: auto; max-width: none; translate: -50% 0; }
.gulung { position: relative; z-index: 3; width: 94%; margin-top: -9%; transform-origin: 50% 0; }
.kain { position: relative; filter: drop-shadow(0 12px 14px rgba(90, 40, 25, .25)); }
.kain > img { display: block; width: 100%; height: auto; max-width: none; }
.kain-t { position: absolute; left: 29.5%; right: 29.5%; top: 15.5%; bottom: 30.5%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; color: var(--ink); }
.kain-t .caps { font-size: 8px; letter-spacing: .2em; line-height: 1.5; color: var(--soft); }
.t-name { font: 400 clamp(25px, 8.4vw, 34px)/1.02 var(--script); color: var(--aksen); overflow-wrap: anywhere; }
.t-amp { font: 400 20px/1 var(--script); color: var(--gold); }
.kain-t .pl-date { margin: 4px 0 0; font: 500 8.5px/1.5 var(--display); letter-spacing: .1em; text-transform: uppercase; }
/* Penanda "gulir ke bawah": bunga kamboja yang jatuh berputar. */
.gugur { position: absolute; left: 50%; bottom: 5vh; width: 26px; height: 60px; margin-left: -13px; }
.gugur img { position: absolute; left: 0; top: 0; width: 26px; height: auto; max-width: none; }
html:not(.js) .hero-pin { padding: 40px 0; } html:not(.js) .hero-pin > .gugur { display: none; }
main h2.script::after { content: ""; display: block; width: 250px; max-width: 80vw; height: 22px; margin: 8px auto 0; background: url("img/pembatas.webp") center / contain no-repeat; }
/* Pita poleng (kotak hitam-putih) di tepi atas blok berwarna. */
main > section.count::before, main > section.rsvp::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: conic-gradient(#2b2521 25%, #f8f2e7 0 50%, #2b2521 0 75%, #f8f2e7 0) 0 0 / 14px 14px; opacity: .9; }
.memuat .cover .open { pointer-events: none; opacity: .55; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero { min-height: 260vh; min-height: 260svh; }
  /* Nilai di --p: 0 sama dengan keadaan akhir pembukaan supaya tidak melompat saat .ready dipasang. */
  .ready .ly, .ready .belah, .ready .pj { transition: none; }
  .ready .ly-bg { transform: scale(calc(1.03 + var(--p, 0) * .25)); }
  .ready .ly-meru { transform-origin: 50% 60%; transform: translateY(calc(var(--p, 0) * 5%)) scale(calc(1 + var(--p, 0) * var(--p, 0) * 2.4)); }
  .ready .ly-tangga { transform-origin: 50% 63%; transform: translateY(calc(var(--p, 0) * 22%)) scale(calc(1 + var(--p, 0) * 2.6)); }
  .ready .ly-gerbang, .ready .ly-hias { transform-origin: 50% 60%; transform: translateY(calc(var(--p, 0) * 14%)) scale(calc(1 + var(--p, 0) * 2.8)); opacity: calc(1 - (var(--p, 0) - .42) * 5); }
  .ready .pj { transform: translateX(calc(var(--p, 0) * -110%)); }
  .ready .belah.l { transform: translateX(calc(var(--p, 0) * -46%)); } .ready .belah.r { transform: translateX(calc(var(--p, 0) * 46%)); }
  .ready .ly-depan { transform: translateY(calc(var(--p, 0) * 60%)) scale(calc(1 + var(--p, 0) * 3)); opacity: calc(1 - var(--p, 0) * 3.5); }
  .ready .title-wrap { opacity: calc(1 - var(--p, 0) * 5); translate: 0 calc(var(--p, 0) * -160px); }
  .ready .hero-pin > .gugur { opacity: calc(1 - var(--p, 0) * 6); }
  .ready .terang { opacity: calc((var(--p, 0) - .64) * 3.2); }
  .ready .petals { opacity: calc(1 - var(--p, 0) * 2.5); }
}

/* 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; }