/* Puncak — undangan pernikahan bertema gunung bergaya lukisan cat air: sampul foto penuh layar, lalu dari dalam tenda
   saat subuh; pintu tenda tersingkap, pandangan keluar dan naik menyusuri punggungan, malam memudar jadi fajar di atas
   lautan awan, api unggun berkedip, lalu judul di papan penunjuk puncak. Adegannya lapisan gambar (assets/img/*.webp)
   yang digerakkan CSS, tanpa pustaka. */
@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: #f3efe6; --bg2: #faf7f0; --deep: #4f6b7c; --deep2: #34495c; --ink: #2f3b3a; --soft: #6c7a78; --gold: #c98a4b; --gold-hi: #f0cfa0;
  --aksen: #b8632f; --kayu: #5a4330; --sky1: #f7d9b8; --card: #fffdf8; --line: #e0d8c8;
  --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(40, 55, 70, .28); } }

/* Adegan: lapisan gambar selebar kolom halaman, di belakang isi; hanya bagian pembuka (.hero) yang tembus pandang.
   .stage berbanding 1536:2752 (ukuran lukisan) dan selalu menutup layar; semua lapisan memakai bingkai yang sama:
   latar (langit, puncak jauh) → lautan awan → puncak + jalur → depan (rumput, edelweiss, tenda, api unggun) →
   bagian dalam tenda dengan dua daun pintu. Keadaan dasar = fajar di luar tenda (bagian dalam tenda diperbesar sampai
   lewat dan memudar). Sebelum dibuka (.js:not(.is-open)) pintu tenda tertutup, lapisan luar digeser turun, dan lapisan
   .malam membuat semuanya masih gelap kebiruan. Daun pintu lebih lebar dari bukaannya; kelebihannya tertutup kain tenda. */
.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% 50%; backface-visibility: hidden; }
.ly > img:not(.kemah) { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.fx { position: absolute; inset: 0; width: 100%; height: 100%; }
.ly-peak { transform-origin: 50% 36%; }
.ly-tent { transform-origin: 50.6% 54.3%; perspective: 1400px; transform: scale(5.2); opacity: 0; }
.daun { position: absolute; top: 28.2%; height: 52%; width: 34.2%; }
.daun img { display: block; width: 100%; height: 100%; max-width: none; }
.daun.l { left: 16.7%; transform-origin: 15% 50%; transform: rotateY(80deg); }
.daun.r { left: 50.3%; transform-origin: 85% 50%; transform: rotateY(-80deg); } .daun.r img { transform: scaleX(-1); }
.celah { position: absolute; left: 50.6%; top: 30%; width: 14%; height: 50%; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 226, 170, .85), rgba(255, 200, 120, .3) 50%, transparent); opacity: 0; }
.js .ly { transition: transform 4.6s cubic-bezier(.6, 0, .2, 1) 2.6s; }
.js .ly-tent { transition: transform 3.8s cubic-bezier(.6, 0, .3, 1) 2.4s, opacity 1.1s ease 4.5s; }
.js .daun { transition: transform 2.1s cubic-bezier(.5, 0, .3, 1) .5s; }
.js:not(.is-open) .ly-tent { transform: none; opacity: 1; }
.js:not(.is-open) .daun { transform: none; }
.js:not(.is-open) .celah { opacity: 1; }
.js:not(.is-open) .ly-bg { transform: scale(1.12); }
.js:not(.is-open) .ly-cloud { transform: translateY(12%) scale(1.15); }
.js:not(.is-open) .ly-peak { transform: translateY(22%) scale(1.25); }
.js:not(.is-open) .ly-front { transform: translateY(34%) scale(1.5); }
.js.no-anim .ly, .js.no-anim .daun, .js.no-anim .malam, .js.no-anim .surya, .js.no-anim .bintang { transition: none; }
/* Malam → fajar: lapisan biru tua memudar, bintang menghilang, cahaya matahari membesar di balik puncak. */
.malam { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 24, 52, .86), rgba(30, 44, 78, .74) 55%, rgba(40, 52, 80, .6)); opacity: 0; transition: opacity 5s ease 2.8s; }
.js:not(.is-open) .malam { opacity: 1; }
.bintang { position: absolute; inset: 0; opacity: 0; transition: opacity 4s ease 2.8s; } .js:not(.is-open) .bintang { opacity: 1; }
.bintang i, .langit i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 5px 1px rgba(255, 255, 255, .7); }
.surya { position: absolute; left: 62%; top: 38%; width: 130%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 244, 210, .8), rgba(255, 214, 150, .35) 40%, transparent 72%); transition: opacity 4s ease 3.6s, scale 5s ease 3.4s; }
.js:not(.is-open) .surya { opacity: 0; scale: .4; }
.kabut { position: absolute; left: -30%; width: 120%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .7), transparent); } .kabut.k1 { top: 50%; } .kabut.k2 { top: 60%; left: 20%; }
.kemah { position: absolute; left: 7%; top: 71.4%; width: 24%; height: auto; max-width: none; }
.unggun { position: absolute; left: 33%; top: 75.6%; width: 9.5%; } .unggun img { display: block; width: 100%; height: auto; max-width: none; }
.unggun i, .api-tutup i { position: absolute; left: 50%; top: 40%; width: 300%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 190, 90, .7), rgba(255, 150, 60, .25) 45%, transparent); }
.bw { fill: none; stroke: var(--ink); stroke-width: 4.4; stroke-linecap: round; stroke-linejoin: round; opacity: .45; transform-box: fill-box; transform-origin: 50% 100%; }
.birds { translate: -360px 900px; }
.veil { position: absolute; inset: 0; background: radial-gradient(circle at 50% 54%, #fff3d6 0, rgba(255, 236, 196, .75) 40%, transparent 80%); opacity: 0; }
.terang { position: absolute; inset: 0; background: radial-gradient(circle at 60% 36%, #fff 0, #fff6e2 55%, 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; }
.bintang i:nth-child(1) { left: 39%; top: 5.4%; animation-delay: -1.4s; }
.bintang i:nth-child(2) { left: 27%; top: 14.9%; animation-delay: -1.8s; }
.bintang i:nth-child(3) { left: 66%; top: 13.3%; animation-delay: -1.5s; }
.bintang i:nth-child(4) { left: 61%; top: 5.1%; animation-delay: -0.8s; }
.bintang i:nth-child(5) { left: 7%; top: 13.6%; animation-delay: -1.7s; }
.bintang i:nth-child(6) { left: 67%; top: 17.5%; animation-delay: -1.3s; }
.bintang i:nth-child(7) { left: 11%; top: 28.2%; animation-delay: -1.7s; }
.bintang i:nth-child(8) { left: 29%; top: 24.0%; animation-delay: -2.1s; }
.bintang i:nth-child(9) { left: 15%; top: 15.0%; animation-delay: -2.4s; }
.bintang i:nth-child(10) { left: 41%; top: 28.6%; animation-delay: -0.7s; }
.bintang i:nth-child(11) { left: 31%; top: 26.3%; animation-delay: -2.4s; }
.bintang i:nth-child(12) { left: 39%; top: 21.8%; animation-delay: -2.8s; }
.bintang i:nth-child(13) { left: 34%; top: 16.1%; animation-delay: -2.7s; }
.bintang i:nth-child(14) { left: 59%; top: 4.4%; animation-delay: -2.4s; }
.langit i:nth-child(1) { left: 14%; top: 89%; animation-delay: -2.9s; }
.langit i:nth-child(2) { left: 20%; top: 77%; animation-delay: -0.4s; }
.langit i:nth-child(3) { left: 63%; top: 68%; animation-delay: -2.4s; }
.langit i:nth-child(4) { left: 75%; top: 36%; animation-delay: -1.0s; }
.langit i:nth-child(5) { left: 42%; top: 31%; animation-delay: -0.2s; }
.langit i:nth-child(6) { left: 17%; top: 60%; animation-delay: -1.2s; }
.langit i:nth-child(7) { left: 11%; top: 90%; animation-delay: -2.2s; }
.langit i:nth-child(8) { left: 15%; top: 52%; animation-delay: -1.2s; }
.langit i:nth-child(9) { left: 47%; top: 68%; animation-delay: -0.3s; }
.langit i:nth-child(10) { left: 34%; top: 21%; animation-delay: -2.4s; }

.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; }

/* Hiasan lukisan: rangkaian edelweiss di bawah foto mempelai, buket di sampul tanpa foto dan di penutup. */
.spray { position: relative; width: 190px; margin: -30px auto 0; pointer-events: none; }
.cover-buket { position: absolute; left: 50%; bottom: 20%; width: 50%; max-width: none; translate: -50% 0; opacity: .92; pointer-events: none; }
.buket { position: relative; width: 170px; margin: 0 auto; 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 penunjuk puncak (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 krem dan biru fajar 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(40, 55, 70, .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(40, 55, 70, .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(40, 55, 70, .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 puncak.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: pintu tenda tersingkap (0,5–2,6 dtk) → keluar tenda (2,4–6,2) sambil pandangan naik (2,6–7,2), malam
     memudar jadi fajar, matahari membesar → papan puncak naik dari bawah (7,2) dan tulisannya muncul.
     Berulang terus: awan bergeser, kabut hanyut, api unggun berkedip, bintang berkelip, burung melintas. */
  .ly-cloud > img { animation: geserAwan 40s ease-in-out infinite alternate; }
  .kabut.k1 { animation: hanyut 30s ease-in-out infinite alternate; } .kabut.k2 { animation: hanyut 38s ease-in-out infinite alternate-reverse; }
  .unggun i, .api-tutup i { animation: kedipApi 1.1s ease-in-out infinite alternate; }
  .bintang i, .langit i { animation: kelipB 2.6s ease-in-out infinite alternate; }
  .celah { animation: kedipApi 2.4s ease-in-out infinite alternate; }
  .birds { animation: lintas 30s 7s linear infinite; } .bw { animation: sayap .5s ease-in-out infinite alternate; } .bw.b2 { animation-delay: -.2s; } .bw.b3 { animation-delay: -.35s; }
  .js.is-open:not(.no-anim) .veil { animation: silau 3s 2.4s ease-in-out both; }
  .js.is-open:not(.no-anim) .papan { animation: tancap 1.3s 7.2s cubic-bezier(.3, 1.3, .5, 1) both; }
  .js.is-open:not(.no-anim) .papan-a, .js.is-open:not(.no-anim) .papan-b { animation: naik .9s 8s both; } .js.is-open:not(.no-anim) .papan-b { animation-delay: 8.3s; }
  .js.is-open:not(.no-anim) .hero-pin > .mouse { animation: naik 1s 8.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 .daun, .js .malam, .js .surya, .js .bintang { transition: none; } }
.js body.locked { overflow: visible; }

/* ---------- Pembuka Puncak: judul di papan penunjuk puncak (gambar papan.webp; nama di bilah atas, tanggal di bilah
   bawah) yang ditancapkan di jalur depan. Selama pembuka digulir pandangan terus mendaki ke puncak dan menembus
   cahaya matahari. Di peramban yang mendukung, gerak gulirnya dijalankan peramban (.gulir-css); selainnya lewat --p. ---------- */
.script, .person h3, .chapters h3, .wishes-head h2 { color: var(--aksen); }
.count .script, .rsvp .script { color: #fff; }
.hero-pin { display: grid; place-items: end 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: 0 0 8vh; pointer-events: none; overflow: hidden; }
.scene-off .hero-pin { visibility: hidden; }
.title-wrap { width: min(78%, 320px); }
.papan { position: relative; transform-origin: 60% 100%; }
.papan > img { display: block; width: 100%; height: auto; max-width: none; }
.papan-a, .papan-b { position: absolute; left: 25%; right: 3%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--kayu); }
.papan-a { top: 4.5%; height: 22.5%; } .papan-b { top: 30.5%; height: 21%; }
.papan-a, .papan-b { color: #37230f; text-shadow: 0 1px 0 rgba(255, 238, 205, .55); }
.papan-a .caps { font: 700 7px/1.2 var(--display); letter-spacing: .22em; }
.t-name { font: 700 clamp(15px, 5vw, 20px)/1.15 var(--display); letter-spacing: .05em; overflow-wrap: anywhere; }
.t-name .amp { font: 400 1.25em/1 var(--script); }
.papan-b .pl-date { margin: 0; font: 700 clamp(10px, 3.3vw, 13px)/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.hero-pin > .mouse { position: absolute; left: 50%; bottom: 2.4vh; margin: 0 0 0 -11px; border-color: #fff; opacity: .92; } .hero-pin > .mouse::after { background: #fff; }
html:not(.js) .hero-pin { padding: 40px 0; } html:not(.js) .hero-pin > .mouse { display: none; }
main h2.script::after { content: ""; display: block; width: 220px; max-width: 80vw; height: 24px; margin: 6px 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: 250vh; min-height: 250svh; }
  .ready .ly { transition: none; }
  .ready .ly-tent { visibility: hidden; }
  .ready .ly-bg { transform: scale(calc(1 + var(--p, 0) * .3)); }
  .ready .ly-cloud { transform: translateY(calc(var(--p, 0) * 30%)) scale(calc(1 + var(--p, 0) * 1.2)); }
  .ready .ly-peak { transform: scale(calc(1 + var(--p, 0) * var(--p, 0) * 3.6)); }
  .ready .ly-front { transform: translateY(calc(var(--p, 0) * 90%)) scale(calc(1 + var(--p, 0))); }
  .ready .title-wrap { opacity: calc(1 - var(--p, 0) * 5); translate: 0 calc(var(--p, 0) * 120px); }
  .ready .hero-pin > .mouse { opacity: calc(.92 - var(--p, 0) * 6); }
  .ready .terang { opacity: calc((var(--p, 0) - .64) * 3.2); }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    html.gulir-css.ready .ly-bg { animation: g-bg linear both; }
    html.gulir-css.ready .ly-cloud { animation: g-cloud linear both; }
    html.gulir-css.ready .ly-peak { animation: g-peak cubic-bezier(.33, 0, .67, .33) both; }
    html.gulir-css.ready .ly-front { animation: g-front linear both; }
    html.gulir-css.ready .terang { animation: g-terang linear both; }
    html.gulir-css.ready .title-wrap { animation: g-judul linear both; }
    html.js.is-open.gulir-css.ready .hero-pin > .mouse { animation: g-mouse linear both; }
    html.gulir-css.ready .ly-bg, html.gulir-css.ready .ly-cloud, html.gulir-css.ready .ly-peak, html.gulir-css.ready .ly-front, html.gulir-css.ready .terang, html.gulir-css.ready .title-wrap, html.js.is-open.gulir-css.ready .hero-pin > .mouse { animation-timeline: scroll(root block); animation-range: 0 150vh; animation-range: 0 150svh; }
  }
}
@keyframes g-bg { from { transform: scale(1); } to { transform: scale(1.3); } }
@keyframes g-cloud { from { transform: translateY(0) scale(1); } to { transform: translateY(30%) scale(2.2); } }
@keyframes g-peak { from { transform: scale(1); } to { transform: scale(4.6); } }
@keyframes g-front { from { transform: translateY(0) scale(1); } to { transform: translateY(90%) scale(2); } }
@keyframes g-terang { 0%, 64% { opacity: 0; } 95%, 100% { opacity: 1; } }
@keyframes g-judul { 0% { opacity: 1; translate: 0 0; } 20% { opacity: 0; translate: 0 24px; } 100% { opacity: 0; translate: 0 120px; } }
@keyframes g-mouse { 0% { opacity: .92; } 15%, 100% { opacity: 0; } }
@keyframes geserAwan { from { translate: -2.5% 0; } to { translate: 2.5% 0; } }
@keyframes hanyut { from { translate: -8% 0; } to { translate: 14% 0; } }
@keyframes kedipApi { from { opacity: .55; scale: .94; } to { opacity: 1; scale: 1.06; } }
@keyframes kelipB { from { opacity: .25; } to { opacity: 1; } }
@keyframes lintas { from { translate: -360px 900px; } to { translate: 1800px 620px; } }
@keyframes sayap { from { scale: 1 1; } to { scale: 1 -.6; } }
@keyframes tancap { from { opacity: 0; translate: 0 70%; rotate: -6deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }

/* ---------- Bagian isi khas Puncak: garis kontur di latar, untai bendera di kutipan, mempelai sebagai dua foto polaroid
   berdampingan, hitung mundur di langit berbintang dengan kompas, acara di bawah papan arah, kisah cinta sebagai jalur
   pendakian ber-pos, galeri polaroid miring, api unggun di penutup. Ornamen (.orn) digerakkan saat bagiannya terlihat
   (.tampak dipasang puncak.js); keadaan dasarnya = sudah tampil. ---------- */
.orn { position: absolute; pointer-events: none; max-width: none; }
main > section:not(.hero) { overflow: hidden; background-color: var(--bg); background-image: repeating-radial-gradient(circle at 18% 8%, transparent 0 26px, rgba(79, 107, 124, .06) 26px 27px), repeating-radial-gradient(circle at 92% 96%, transparent 0 34px, rgba(79, 107, 124, .05) 34px 35px); }
/* Kutipan: untai bendera melintang di atas. */
main > section.verse { padding-top: 120px !important; background: linear-gradient(180deg, #fbe6cf, var(--bg) 70%) !important; }
.verse .tali { left: -4%; top: 22px; width: 108%; transform-origin: 50% 0; transition: translate 1.2s cubic-bezier(.2, .9, .3, 1) .1s, opacity .8s ease .1s; }
/* Mempelai: dua polaroid berdampingan, sedikit miring, nama ditulis tangan di bawah foto. */
.couple { flex-direction: row; align-items: flex-start; justify-content: center; gap: 12px; }
.person { flex: 1 1 0; min-width: 0; padding: 8px 8px 12px; background: #fff; border-radius: 4px; box-shadow: 0 10px 24px rgba(40, 55, 70, .16); gap: 4px; rotate: -3deg; }
.person:nth-of-type(even) { rotate: 3deg; margin-top: 30px; }
.person .portrait { width: 100%; height: auto; aspect-ratio: 4 / 5; padding: 0; border: 0; border-radius: 2px; }
.person .portrait > * { border-radius: 2px; }
.person .spray { width: 86%; margin-top: -18px; }
.person h3 { font-size: 27px; } .person .parents { font-size: 13px; line-height: 1.35; } .person .ig { font-size: 12px; }
/* Hitung mundur: langit subuh berbintang, kompas berputar pelan, angka sebagai label ketinggian. */
main > section.count { padding-top: 150px; background: linear-gradient(180deg, #1f2f4f, var(--deep2) 55%, #7b6f86) !important; }
.count .kompas { left: 50%; top: 26px; width: 104px; margin-left: -52px; }
.count .langit { inset: 0; }
.countdown div { border-radius: 10px; border: 1px dashed rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .08); }
/* Acara: papan arah di atas, dua kartu berkepala kayu dihubungkan jalur putus-putus. */
main > section.programme { padding-top: 210px; gap: 40px !important; }
.programme .arah { left: 50%; top: 18px; width: 128px; margin-left: -64px; transform-origin: 50% 100%; transition: translate 1.1s cubic-bezier(.3, 1.3, .5, 1) .1s, opacity .7s ease .1s; }
.programme .event { position: relative; border-radius: 8px; border: 0; outline: 0; border-top: 12px solid var(--kayu); padding-top: 24px; }
.programme .event + .event::before { content: ""; position: absolute; left: 50%; top: -52px; height: 40px; border-left: 3px dashed var(--gold); }
/* Kisah cinta: jalur pendakian dengan pos bernomor; pos terakhir = puncak. */
main > section.story { align-items: stretch; }
.story .ransel { right: -18px; bottom: -6px; width: 110px; opacity: .9; transition: translate 1.1s cubic-bezier(.2, .9, .3, 1) .2s, opacity .8s ease .2s; }
.chapters { position: relative; gap: 22px; padding-left: 46px; counter-reset: pos; }
.chapters::before { content: ""; position: absolute; left: 17px; top: 10px; bottom: 10px; border-left: 3px dashed var(--gold); }
.chapters::after { content: ""; position: absolute; left: 10px; top: 4px; bottom: 4px; width: 18px; background: var(--bg); translate: 0 101%; transition: translate 2.4s cubic-bezier(.4, 0, .2, 1) .2s; }
.chapters li { counter-increment: pos; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--line); }
.chapters li::before { content: "POS " counter(pos); left: -46px; top: 14px; bottom: auto; width: auto; padding: 5px 7px; border-radius: 4px; background: var(--deep2); color: #fff; font: 700 9px/1 var(--display); letter-spacing: .1em; z-index: 1; }
.chapters li:last-child::before { content: "PUNCAK"; background: var(--aksen); left: -52px; }
.chapters h3 { font-size: 30px; }
/* Galeri: polaroid dua kolom, miring bergantian. */
.grid { gap: 14px 12px; }
.grid img { aspect-ratio: 4 / 5; border-radius: 3px; border: 6px solid #fff; border-bottom-width: 22px; box-shadow: 0 8px 18px rgba(40, 55, 70, .16); rotate: -2.5deg; }
.grid img:nth-child(even) { rotate: 2.5deg; translate: 0 12px; } .grid img:nth-child(3n) { rotate: 1deg; }
main > section.rsvp { background: linear-gradient(180deg, var(--deep), var(--deep2)) !important; }
/* Penutup: tenda dan api unggun di bawah langit, buket di atasnya. */
main > section.closing { padding-bottom: 150px; background: linear-gradient(180deg, var(--bg), #fbe6cf) !important; }
.closing .tenda-tutup { left: 50%; bottom: 26px; width: 150px; margin-left: -110px; }
.closing .api-tutup { left: 50%; bottom: 20px; width: 64px; margin-left: 46px; } .api-tutup img { display: block; width: 100%; height: auto; }

.rv { will-change: transform, opacity; }
.rv.event { scale: 1; translate: 0 44px; box-shadow: none; } .countdown .rv { scale: .5; translate: 0 0; } .chapters .rv { translate: 34px 0; } .grid .rv { scale: .78; box-shadow: none; }
.couple .person.rv, .person:nth-child(odd).rv, .person:nth-child(even).rv { translate: 0 40px; }
.rv.in { transition: opacity 1.1s ease calc(var(--d, 0) * 1ms), translate 1.3s cubic-bezier(.22, 1, .36, 1) calc(var(--d, 0) * 1ms), scale 1.3s cubic-bezier(.22, 1, .36, 1) calc(var(--d, 0) * 1ms); }
.event, .grid img { transition: box-shadow .8s ease; }
@media (prefers-reduced-motion: no-preference) {
  .js .verse:not(.tampak) .tali { translate: 0 -120%; opacity: 0; }
  .js .programme:not(.tampak) .arah { translate: 0 60%; opacity: 0; }
  .js .story:not(.tampak) .ransel { translate: 60% 0; opacity: 0; }
  .js .story:not(.tampak) .chapters::after { translate: 0 0; }
  .verse .tali { animation: ayun 5s ease-in-out infinite; }
  .count .kompas { animation: putarK 9s ease-in-out infinite alternate; }
  .tampak .arah { animation: ayun 6s 1.4s ease-in-out infinite; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .strip img { animation: geserY linear both; animation-timeline: view(); }
  }
}
@keyframes putarK { from { rotate: -24deg; } to { rotate: 30deg; } }
@keyframes geserY { from { translate: 0 -6%; scale: 1.08; } to { translate: 0 6%; scale: 1.08; } }

/* ---------- Sampul: ornamen gunung tipis di atas foto. Garis punggungan dengan matahari terbit di bawah nama, dan
   edelweiss di atas nama tamu serta di dua sudut bawah. Tanpa foto sampul, ornamennya tetap dipakai. ---------- */
/* Edelweiss: satu rangkaian di atas nama tamu dan dua di sudut bawah (setengah keluar layar), di luar area wajah. */
.cv-pojok { bottom: -14px; width: 46%; z-index: 1; opacity: .95; } .cv-pojok.l { left: -15%; rotate: 14deg; } .cv-pojok.r { right: -15%; rotate: -14deg; scale: -1 1; }
.cover .orn.cv-bunga { position: relative; width: 168px; margin-bottom: -4px; }
.cv-garis { display: block; width: 200px; height: auto; margin-top: 2px; overflow: visible; }
.cv-punggung { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.cv-surya { fill: #ffd9a0; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .cv-pojok { animation: naik 1.4s .9s both; }
  .cv-punggung { animation: gambarGaris 2.2s .9s ease-out both; }
  .cv-surya { animation: terbit 2.4s 1.6s cubic-bezier(.2, .8, .3, 1) both; }
  .cover .orn.cv-bunga { animation: naik 1.2s .6s both; }
}
@keyframes gambarGaris { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes terbit { from { translate: 0 16px; opacity: 0; } to { translate: 0 0; opacity: 1; } }

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