/* Gapura — undangan pernikahan bergaya lukisan cat air, konsep "taman rahasia": sampul foto penuh layar, lalu tembok
   batu berselimut mawar dengan pintu kayu tertutup; kunci emas turun ke lubangnya dan berputar, pintu terbuka, pandangan
   berjalan masuk lewat lorong tiga lengkung mawar menuju rumah kaca di tepi kolam, lentera menyala, angsa meluncur,
   lalu papan nama lonjong turun bergantung rantai. 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: #eef2e8; --bg2: #f8faf4; --deep: #8fa68a; --deep2: #6f8a6c; --ink: #44543f; --soft: #6f7d6a; --gold: #b89a5e; --gold-hi: #e2d1a6;
  --aksen: #b5697a; --r1: #f9d3d6; --r2: #f0a3ac; --r3: #dc7f8e; --sky1: #f6f3e4; --card: #fffdf7; --line: #d9e2d0;
  --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(50, 70, 50, .28); } }

/* Adegan: lapisan gambar selebar kolom halaman, di belakang isi; hanya bagian pembuka (.hero) yang tembus pandang.
   .stage berbanding 1116:2000 (ukuran lukisan) dan selalu menutup layar. Urutan lapisan dari belakang: latar →
   rumah kaca + kolam (angsa) → jalan → tiga lengkung mawar (satu gambar yang sama, diperkecil ke .41 dan .63 dari
   titik hilang 50% 57.5%) → tembok berpintu. Keadaan dasar = sudah di dalam taman (tembok diperbesar sampai lewat
   dan memudar). Sebelum dibuka (.js:not(.is-open)) tembok di skala 1 dengan dua daun pintu tertutup dan kunci
   tergantung di atasnya. Daun pintu lebih lebar dari lubangnya; kelebihannya tersembunyi di balik tembok. */
.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.7922)); aspect-ratio: 1116 / 2000; translate: -50% -50%; }
.ly { position: absolute; inset: 0; will-change: transform; transform-origin: 50% 57.5%; }
.ly > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.ly-bg { transform: scale(1.04); }
.ar { transform: scale(calc(var(--s) * var(--k, 1))); } .a1 { --s: 1; } .a2 { --s: .63; } .a3 { --s: .41; }
.ly-wall { transform-origin: 50.54% 53.7%; perspective: 1400px; transform: scale(5); opacity: 0; }
.door { position: absolute; top: 26.8%; height: 53.8%; width: 44.06%; }
.door img { display: block; width: 100%; height: 100%; max-width: none; }
.door.l { left: 6.82%; transform-origin: 57.91% 50%; transform: rotateY(82deg); }
.door.r { left: 50.19%; transform-origin: 42.09% 50%; transform: rotateY(-82deg); } .door.r img { transform: scaleX(-1); }
.js .ly { transition: transform 4s cubic-bezier(.6, 0, .2, 1) 2.8s; }
.js .ly-wall { transition: transform 4s cubic-bezier(.6, 0, .3, 1) 2.8s, opacity 1.1s ease 5s; }
.js .door { transition: transform 2.2s cubic-bezier(.5, 0, .3, 1) 2.2s; }
.js:not(.is-open) .ly-wall { transform: none; opacity: 1; }
.js:not(.is-open) .door { transform: none; }
.js:not(.is-open) .ly-bg { transform: none; }
.js:not(.is-open) .ar { --k: .78; }
.js:not(.is-open) .ly-house { transform: scale(.92); }
.js:not(.is-open) .ly-path { transform: scale(.86); }
.js.no-anim .ly, .js.no-anim .door, .js.no-anim .lt i, .js.no-anim .kunang { transition: none; }
/* Kunci: tergantung di atas pintu; saat dibuka turun ke lubang kunci, mengecil, berputar seperempat, lalu hilang. */
.kunci-w { position: absolute; left: 40.54%; top: 2%; width: 20%; transform-origin: 50% 0; }
.kunci { display: block; width: 100%; height: auto; max-width: none; transform-origin: 49% 43%; }
.js.is-open .kunci { opacity: 0; }
.pendar { position: absolute; left: 45.38%; top: 57.9%; width: 26%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 244, 200, .95), rgba(255, 224, 140, .5) 45%, transparent); opacity: 0; }
/* Lentera di lengkung kedua dan ketiga: gambar + pendar lilin yang menyala setelah pandangan tiba. */
.lt { position: absolute; top: 23%; width: 15%; } .lt.l { left: 9%; } .lt.r { right: 9%; }
.lt img { display: block; width: 100%; height: auto; max-width: none; }
.lt i { position: absolute; left: 50%; top: 66%; width: 150%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 236, 170, .95), rgba(255, 214, 120, .45) 42%, transparent); mix-blend-mode: screen; transition: opacity .7s ease 6s; }
.a2 .lt i { transition-delay: 6.4s; }
.js:not(.is-open) .lt i { opacity: 0; }
.kolam { position: absolute; left: 41%; top: 60%; width: 24%; height: 6.6%; }
.angsa { position: absolute; left: 0; bottom: 0; width: 24%; height: auto; max-width: none; }
.rays { position: absolute; left: 50%; top: 50%; width: 190%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 250, 225, .34) 0 5deg, transparent 5deg 18deg); -webkit-mask-image: radial-gradient(circle, #000 6%, transparent 40%); mask-image: radial-gradient(circle, #000 6%, transparent 40%); opacity: .7; }
.kunang { position: absolute; inset: 0; transition: opacity 1.6s ease 6s; } .js:not(.is-open) .kunang { opacity: 0; }
.kunang i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #fff6c0; box-shadow: 0 0 8px 3px rgba(255, 236, 150, .8); opacity: 0; }
.petals { position: absolute; inset: 0; }
.petals i { position: absolute; top: -4%; border-radius: 90% 10% 80% 20%; background: linear-gradient(135deg, #fff, var(--r1) 60%, var(--r2)); display: none; }
.veil { position: absolute; inset: 0; background: radial-gradient(circle at 50% 54%, #fffdf0 0, rgba(255, 250, 225, .7) 40%, transparent 78%); opacity: 0; }
.terang { position: absolute; inset: 0; background: radial-gradient(circle at 50% 56%, #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: 48%; width: 12px; height: 10px; animation-duration: 13.9s, 2.6s; animation-delay: -5.3s, -1.2s; opacity: 0.6; }
.petals i:nth-child(2) { left: 68%; width: 8px; height: 6px; animation-duration: 10.1s, 3.5s; animation-delay: -13.9s, -2.8s; opacity: 0.7; }
.petals i:nth-child(3) { left: 47%; width: 13px; height: 8px; animation-duration: 11.5s, 3.1s; animation-delay: -4s, -0.6s; opacity: 0.7; }
.petals i:nth-child(4) { left: 71%; width: 8px; height: 8px; animation-duration: 15.7s, 2.6s; animation-delay: -8.8s, -3.9s; opacity: 0.5; }
.petals i:nth-child(5) { left: 45%; width: 8px; height: 9px; animation-duration: 12.3s, 2.8s; animation-delay: -1.8s, -3s; opacity: 0.8; }
.petals i:nth-child(6) { left: 1%; width: 13px; height: 9px; animation-duration: 14s, 4s; animation-delay: -9.7s, -3.4s; opacity: 0.8; }
.petals i:nth-child(7) { left: 43%; width: 11px; height: 9px; animation-duration: 13.1s, 3.5s; animation-delay: -3.3s, -1.8s; opacity: 0.8; }
.petals i:nth-child(8) { left: 83%; width: 10px; height: 10px; animation-duration: 14.7s, 4.2s; animation-delay: -0.6s, -0.6s; opacity: 0.6; }
.petals i:nth-child(9) { left: -3%; width: 12px; height: 10px; animation-duration: 13.5s, 3.5s; animation-delay: -13.9s, -1.4s; opacity: 0.6; }
.petals i:nth-child(10) { left: 10%; width: 10px; height: 8px; animation-duration: 9.8s, 2.9s; animation-delay: -10s, -4s; opacity: 0.8; }
.petals i:nth-child(11) { left: 82%; width: 12px; height: 9px; animation-duration: 9.9s, 2.8s; animation-delay: -9s, -3.3s; opacity: 0.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: 0.8; }
.kunang i:nth-child(1) { left: 36%; top: 37%; animation-duration: 8.7s, 3.1s; animation-delay: -2.4s, -0.2s; }
.kunang i:nth-child(2) { left: 77%; top: 82%; animation-duration: 12.2s, 2.6s; animation-delay: -4.9s, -1.5s; }
.kunang i:nth-child(3) { left: 48%; top: 65%; animation-duration: 8.8s, 2.2s; animation-delay: -4.9s, -2.8s; }
.kunang i:nth-child(4) { left: 21%; top: 54%; animation-duration: 8.5s, 3.1s; animation-delay: -5.9s, -0.2s; }
.kunang i:nth-child(5) { left: 68%; top: 59%; animation-duration: 10.9s, 3.1s; animation-delay: -0.8s, -2.7s; }
.kunang i:nth-child(6) { left: 29%; top: 51%; animation-duration: 11.5s, 2.4s; animation-delay: -3.3s, -0.1s; }
.kunang i:nth-child(7) { left: 41%; top: 69%; animation-duration: 9.9s, 2.4s; animation-delay: -7.8s, -2.1s; }
.kunang i:nth-child(8) { left: 69%; top: 50%; animation-duration: 7.8s, 3.1s; animation-delay: -3.3s, -0.3s; }
.kunang i:nth-child(9) { left: 53%; top: 65%; animation-duration: 7.9s, 1.6s; animation-delay: -8.2s, -1.2s; }
.kunang i:nth-child(10) { left: 63%; top: 58%; animation-duration: 10.5s, 2.6s; animation-delay: -8.6s, -1.5s; }
.kunang i:nth-child(11) { left: 40%; top: 48%; animation-duration: 7.9s, 1.8s; animation-delay: -9s, -1s; }
.kunang i:nth-child(12) { left: 13%; top: 68%; animation-duration: 11.2s, 2.6s; animation-delay: -1.5s, -1.6s; }

.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; width: 220px; margin: -58px 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 papan nama lonjong yang bergantung rantai (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; }
.mouse { display: block; margin-top: 18px; width: 22px; height: 36px; border: 1.5px solid var(--ink); border-radius: 12px; position: relative; opacity: .7; }
.mouse::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); animation: gulir 1.6s ease-in-out infinite; }

/* ---------- 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 { font: italic 500 21px/1.6 var(--serif); max-width: 20em; }
.source { font: 600 14px/1.4 var(--display); letter-spacing: .14em; }
.couple { display: flex; flex-direction: column; gap: 44px; width: 100%; margin-top: 8px; }
.person { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.portrait { width: 230px; height: 300px; padding: 7px; border: 1.5px solid var(--gold); border-radius: 999px 999px 18px 18px; background: var(--card); display: flex; }
.portrait > * { flex: 1; width: 100%; height: 100%; border-radius: 999px 999px 12px 12px; 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 42px/1.05 var(--script); color: var(--deep2); overflow-wrap: anywhere; }
.parents { font-size: 17px; line-height: 1.45; color: var(--soft); max-width: 16em; }
.ig { font-size: 16px; 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 { padding: 14px 0 12px; border: 1.5px solid rgba(255, 255, 255, .75); border-radius: 14px; display: flex; flex-direction: column; gap: 2px; }
.countdown b { font: 500 30px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.countdown span { font-size: 15px; }
html:not(.js) .countdown { display: none; }

.programme { gap: 26px !important; background: linear-gradient(180deg, var(--bg), var(--bg2)) !important; }
.event { width: 100%; padding: 34px 22px 30px; border-radius: 110px 110px 22px 22px; background: var(--card); border: 1.5px solid var(--gold); outline: 1px solid var(--gold-hi); outline-offset: -8px; box-shadow: 0 18px 40px rgba(50, 70, 50, .12); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.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: 18px; text-align: left; }
.chapters li { position: relative; padding: 20px 20px 20px 26px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.chapters li::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 2px; background: var(--r2); }
.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(50, 70, 50, .14); }
.grid img:nth-child(3n+1) { grid-column: 1 / -1; aspect-ratio: 4 / 3; }

.gift-list { display: grid; gap: 12px; width: 100%; }
.gift-card { padding: 16px 18px; border-radius: 18px; 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 .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)); }

.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(50, 70, 50, .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 gapura.js): judul turun, foto membesar, mempelai dari kiri/kanan. */
.rv { opacity: 0; translate: 0 26px; }
.rv.script { translate: 0 -22px; }
.rv.portrait, .grid .rv, .rv.event { translate: 0 0; scale: .86; }
.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: kunci turun & berputar (0,4–2,6 dtk) → cahaya di lubang kunci → pintu terbuka (2,2–4,4) → berjalan masuk
     lewat pintu, lengkung mendekat (2,8–6,8) → lentera menyala → papan nama turun (6,7) lalu berayun.
     Berulang terus: angsa di kolam, kunang-kunang, kelopak, sinar di balik rumah kaca, denyut lentera. */
  .petals i { display: block; animation-name: gugur, kibar; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite; animation-direction: normal, alternate; }
  .kunang i { animation-name: melayangK, kedip; animation-timing-function: ease-in-out, ease-in-out; animation-iteration-count: infinite; animation-direction: alternate, alternate; }
  .rays { animation: putar2 110s linear infinite; }
  .angsa { animation: renang 34s linear infinite; }
  .js:not(.is-open) .kunci-w { animation: ayunK 3.6s ease-in-out infinite alternate; }
  .js.is-open:not(.no-anim) .kunci { animation: masuk 2.2s .4s cubic-bezier(.5, 0, .3, 1) both; }
  .js.is-open:not(.no-anim) .pendar { animation: kilatK 1.5s 1.9s ease-out both; }
  .js.is-open .lt i { animation: nyalaL 2.6s 8s ease-in-out infinite alternate; }
  .js.is-open:not(.no-anim) .veil { animation: silau 3s 2.6s ease-in-out both; }
  .papan { animation: goyang 5s ease-in-out infinite alternate; }
  .js.is-open:not(.no-anim) .papan { animation: turunP 1.6s 6.7s cubic-bezier(.3, 1.2, .4, 1) both, goyang 5s 8.3s ease-in-out infinite alternate; }
  .js.is-open:not(.no-anim) .hero-pin > .mouse { animation: naik 1s 8s both; }
  .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; }
}
@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 .door, .js .lt i, .js .kunang { transition: none; } }
.js body.locked { overflow: visible; }

/* ---------- Pembuka Gapura: judul di papan nama lonjong (gambar papan.webp, teks HTML di atasnya) yang bergantung
   rantai dari lengkung terdepan dan berayun pelan. Selama pembuka digulir (.ready, --p 0→1 dipasang gapura.js)
   pandangan terus berjalan: melewati lengkung satu per satu sampai ke pintu rumah kaca, 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: 13vh 0 0; pointer-events: none; overflow: hidden; }
.scene-off .hero-pin { visibility: hidden; }
.title-wrap { width: min(70%, 290px); }
.papan { position: relative; transform-origin: 50% 0; }
.papan > img { display: block; width: 100%; height: auto; max-width: none; }
.papan-t { position: absolute; left: 14%; right: 14%; top: 47%; bottom: 9%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; color: var(--ink); }
.papan-t .caps { font-size: 9px; letter-spacing: .26em; color: var(--soft); }
.t-name { font: 400 clamp(24px, 8.2vw, 33px)/1.05 var(--script); color: var(--aksen); overflow-wrap: anywhere; }
.t-name .amp { font-size: .78em; color: var(--gold); }
.papan-t .pl-date { margin: 2px 0 0; font-size: 10px; letter-spacing: .14em; }
.hero-pin > .mouse { position: absolute; left: 50%; bottom: 5vh; margin: 0 0 0 -11px; border-color: var(--ink); opacity: .75; }
html:not(.js) .hero-pin { padding: 40px 0; } html:not(.js) .hero-pin > .mouse { display: none; }
main h2.script::after { content: ""; display: block; width: 240px; max-width: 80vw; height: 34px; margin: 4px auto 0; background: url("img/pembatas.webp") center / contain no-repeat; }
.memuat .cover .open { pointer-events: none; opacity: .55; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero { min-height: 260vh; min-height: 260svh; }
  /* Perjalanan gulir: aktif setelah pembukaan selesai. --p = seberapa jauh pembuka sudah digulir. Di p = 0 semua
     nilainya sama dengan keadaan akhir pembukaan, jadi tidak ada lompatan. */
  .ready .ly { transition: none; }
  .ready .ly-wall { visibility: hidden; }
  .ready .ly-bg { transform: scale(calc(1.04 + var(--p, 0) * .3)); }
  .ready .ly-house { transform: scale(calc(1 + var(--p, 0) * var(--p, 0) * 3.4)); }
  .ready .ly-path { transform: scale(calc(1 + var(--p, 0) * 2.2)); }
  .ready .ar { --k: calc(1 + var(--p, 0) * 3.2); }
  .ready .a1 { opacity: calc(1 - (var(--p, 0) - .12) * 6); } .ready .a2 { opacity: calc(1 - (var(--p, 0) - .42) * 6); } .ready .a3 { opacity: calc(1 - (var(--p, 0) - .72) * 6); }
  .ready .title-wrap { opacity: calc(1 - var(--p, 0) * 5); translate: 0 calc(var(--p, 0) * -160px); }
  .ready .hero-pin > .mouse { opacity: calc(.75 - var(--p, 0) * 6); }
  .ready .terang { opacity: calc((var(--p, 0) - .64) * 3.2); }
  .ready .petals, .ready .kunang { opacity: calc(1 - var(--p, 0) * 2.5); transition: none; }
}
@keyframes putar2 { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes renang { 0% { left: 0; scale: 1 1; } 48% { left: 76%; scale: 1 1; } 50% { left: 76%; scale: -1 1; } 98% { left: 0; scale: -1 1; } 100% { left: 0; scale: 1 1; } }
@keyframes ayunK { from { rotate: -2.5deg; } to { rotate: 2.5deg; } }
@keyframes masuk { 0% { translate: 0 0; scale: 1; rotate: 0deg; opacity: 1; } 60% { translate: -24.78% 211.25%; scale: .3; rotate: 0deg; opacity: 1; } 84% { translate: -24.78% 211.25%; scale: .3; rotate: 90deg; opacity: 1; } 100% { translate: -24.78% 211.25%; scale: .3; rotate: 90deg; opacity: 0; } }
@keyframes kilatK { 0% { opacity: 0; scale: .2; } 35% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1.8; } }
@keyframes nyalaL { from { opacity: .6; } to { opacity: 1; } }
@keyframes melayangK { from { translate: -14px 10px; } to { translate: 16px -22px; } }
@keyframes kedip { from { opacity: 0; } to { opacity: .95; } }
@keyframes goyang { from { rotate: -1.6deg; } to { rotate: 1.6deg; } }
@keyframes turunP { from { opacity: 0; translate: 0 -110%; rotate: 7deg; } to { opacity: 1; translate: 0 0; rotate: -1.6deg; } }

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

/* Kisah: sulur merambat di tengah, kartu berbentuk daun tumbuh bergantian ke kiri dan kanan, kuntum mawar di tiap ruas. */
.chapters { position: relative; gap: 26px; }
.chapters::before { content: ""; position: absolute; left: 50%; top: -6px; bottom: -6px; width: 36px; margin-left: -18px; background: url("img/sulur.svg") top center / 36px auto repeat-y; }
.chapters li { width: 86%; padding: 22px 22px 22px; border: 1px solid var(--line); border-radius: 4px 52px 4px 52px; box-shadow: 0 12px 22px rgba(70, 90, 70, .12); }
.chapters li:nth-child(even) { margin-left: auto; border-radius: 52px 4px 52px 4px; }
.chapters li::before { top: 22px; bottom: auto; right: -13px; left: auto; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 42% 40%, var(--r1), var(--r2) 34%, var(--r3) 66%, var(--aksen)); box-shadow: 0 0 0 3px var(--card); }
.chapters li:nth-child(even)::before { right: auto; left: -13px; }