/* Santorini — undangan pernikahan bergaya lukisan cat air: sampul foto penuh layar, lalu dua daun jendela kayu biru
   yang tertutup penuh di layar terbuka ke luar; di baliknya desa putih di tebing, kubah biru, kincir yang berputar, dan
   laut Aegea dengan kapal layar. Judul di ubin keramik bermotif yang tergantung. Selama pembuka digulir pandangan
   menuruni tangga putih menuju laut sampai layar memutih. Adegannya lapisan gambar (assets/img/*.webp) + 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: #f7f5ef; --bg2: #fcfbf7; --deep: #1f4e8c; --deep2: #163a6b; --ink: #23324a; --soft: #5e6b7c; --gold: #c9a45c; --gold-hi: #ecdcae;
  --aksen: #1f4e8c; --pink: #c7286a; --r1: #ffe3ef; --r2: #f48cb6; --r3: #d63c7f; --sky1: #f6efe3; --sky2: #eaf1f7; --card: #fffefb; --line: #dfe6ee;
  --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(20, 45, 80, .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. Lapisan dari belakang: langit & laut (+ kapal,
   kilau, camar) → desa di tebing (+ baling-baling kincir, pusat 81,1% / 29,2%, tampak miring jadi diskalakan mendatar
   .45) → tangga & bugenvil depan → dua daun jendela. Keadaan dasar = lukisan utuh, jendela terbuka. Sebelum dibuka
   (.js:not(.is-open)) daun jendela tertutup dan pandangan sedikit lebih dekat ke anak tangga teratas. */
.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% 75%; }
.ly > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.surya { position: absolute; left: 62%; top: 27%; width: 60%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 238, 196, .75), rgba(255, 226, 170, .25) 45%, rgba(255, 226, 170, 0)); mix-blend-mode: screen; }
.kilau { position: absolute; inset: 0; }
.kilau i { position: absolute; background: #fff8e6; opacity: 0; clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); }
.kilau i:nth-child(1) { left: 39.9%; top: 44.4%; width: 9px; height: 9px; animation-duration: 2.7s; animation-delay: -1.4s; }
.kilau i:nth-child(2) { left: 39.5%; top: 37.0%; width: 7px; height: 7px; animation-duration: 2.0s; animation-delay: -1.3s; }
.kilau i:nth-child(3) { left: 49.0%; top: 45.3%; width: 6px; height: 6px; animation-duration: 2.5s; animation-delay: -0.4s; }
.kilau i:nth-child(4) { left: 58.9%; top: 40.0%; width: 6px; height: 6px; animation-duration: 2.0s; animation-delay: -2.9s; }
.kilau i:nth-child(5) { left: 63.5%; top: 40.0%; width: 9px; height: 9px; animation-duration: 2.9s; animation-delay: -2.7s; }
.kilau i:nth-child(6) { left: 60.3%; top: 45.4%; width: 7px; height: 7px; animation-duration: 2.4s; animation-delay: -1.3s; }
.kilau i:nth-child(7) { left: 63.3%; top: 39.9%; width: 9px; height: 9px; animation-duration: 1.8s; animation-delay: -1.8s; }
.kilau i:nth-child(8) { left: 59.5%; top: 33.6%; width: 6px; height: 6px; animation-duration: 2.6s; animation-delay: -2.9s; }
.kilau i:nth-child(9) { left: 45.4%; top: 37.9%; width: 5px; height: 5px; animation-duration: 1.9s; animation-delay: -2.9s; }
.kilau i:nth-child(10) { left: 45.2%; top: 39.0%; width: 8px; height: 8px; animation-duration: 2.9s; animation-delay: -2.7s; }
.kilau i:nth-child(11) { left: 42.0%; top: 38.9%; width: 6px; height: 6px; animation-duration: 1.9s; animation-delay: -1.9s; }
.kilau i:nth-child(12) { left: 40.0%; top: 35.1%; width: 6px; height: 6px; animation-duration: 2.0s; animation-delay: -0.9s; }
.kapal { position: absolute; left: 63%; top: 36.4%; width: 4.4%; }
.kapal img { display: block; width: 100%; height: auto; }
.camar { position: absolute; width: 4.2%; opacity: .8; } .camar.c1 { left: 22%; top: 14%; } .camar.c2 { left: 34%; top: 18%; width: 3.2%; }
.kincir { position: absolute; left: 81.1%; top: 29.2%; width: 35.2%; aspect-ratio: 1; translate: -50% -50%; scale: .45 1; }
.putar, .putar img { display: block; width: 100%; height: 100%; }
.daun { position: absolute; top: 0; width: 50.5%; height: 100%; overflow: hidden; backface-visibility: hidden; box-shadow: 0 0 40px rgba(10, 30, 60, .35); }
.daun img { display: block; width: 100%; height: 100%; object-fit: cover; }
.daun.l { left: 0; transform-origin: 0 50%; } .daun.r { right: 0; transform-origin: 100% 50%; } .daun.r img { transform: scaleX(-1); }
.ly-jendela { perspective: 1200px; }
.daun.l { transform: rotateY(-108deg); opacity: 0; } .daun.r { transform: rotateY(108deg); opacity: 0; }
.js .daun { transition: transform 2.1s cubic-bezier(.6, 0, .3, 1) .5s, opacity .5s ease 2.2s; }
.js .ly { transition: transform 3.6s cubic-bezier(.45, 0, .2, 1) 1.2s; }
.js:not(.is-open) .daun { transform: none; opacity: 1; }
.js:not(.is-open) .ly-langit { transform: scale(1.05); }
.js:not(.is-open) .ly-kota { transform: scale(1.1); }
.js:not(.is-open) .ly-depan { transform: scale(1.22); }
.js.no-anim .ly, .js.no-anim .daun { transition: none; }
.petals { position: absolute; inset: 0; }
.petals i { position: absolute; top: -4%; border-radius: 60% 40% 70% 30%; background: linear-gradient(135deg, var(--r1), var(--r2) 55%, var(--r3)); display: none; }
.terang { position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, #fff 0, #fffdf8 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: 19%; width: 11px; height: 10px; animation-duration: 13.8s, 3.3s; animation-delay: -3.0s, -3.2s; opacity: 0.95; }
.petals i:nth-child(2) { left: 21%; width: 12px; height: 11px; animation-duration: 11.4s, 2.4s; animation-delay: -5.2s, -2.3s; opacity: 0.75; }
.petals i:nth-child(3) { left: 16%; width: 9px; height: 8px; animation-duration: 14.2s, 3.2s; animation-delay: -13.9s, -3.1s; opacity: 0.85; }
.petals i:nth-child(4) { left: 76%; width: 11px; height: 7px; animation-duration: 15.7s, 3.4s; animation-delay: -9.7s, -2.6s; opacity: 0.85; }
.petals i:nth-child(5) { left: 0%; width: 9px; height: 7px; animation-duration: 10.7s, 4.1s; animation-delay: -6.3s, -2.2s; opacity: 0.85; }
.petals i:nth-child(6) { left: 49%; width: 11px; height: 8px; animation-duration: 11.1s, 2.5s; animation-delay: -12.1s, -0.9s; opacity: 0.75; }
.petals i:nth-child(7) { left: 24%; width: 13px; height: 11px; animation-duration: 15.9s, 2.5s; animation-delay: -7.8s, -2.2s; opacity: 0.85; }
.petals i:nth-child(8) { left: 23%; width: 10px; height: 8px; animation-duration: 15.3s, 3.1s; animation-delay: -5.1s, -1.8s; opacity: 0.85; }
.petals i:nth-child(9) { left: 38%; width: 11px; height: 10px; animation-duration: 11.6s, 3.9s; animation-delay: -2.2s, -2.9s; opacity: 0.85; }
.petals i:nth-child(10) { left: -2%; width: 11px; height: 7px; animation-duration: 13.3s, 3.7s; animation-delay: -3.1s, -2.4s; opacity: 0.95; }
.petals i:nth-child(11) { left: 77%; width: 8px; height: 8px; animation-duration: 14.0s, 3.5s; animation-delay: -11.7s, -1.3s; opacity: 0.95; }
.petals i:nth-child(12) { left: 37%; width: 9px; height: 7px; animation-duration: 11.0s, 4.1s; animation-delay: -2.4s, -1.7s; opacity: 0.75; }
.petals i:nth-child(13) { left: 85%; width: 8px; height: 11px; animation-duration: 15.4s, 4.1s; animation-delay: -5.7s, -4.0s; opacity: 0.95; }
.petals i:nth-child(14) { left: 73%; width: 8px; height: 9px; animation-duration: 12.9s, 3.1s; animation-delay: -3.5s, -3.5s; opacity: 0.75; }

.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 ubin keramik yang tergantung (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 putih kapur, blok biru Aegea ---------- */
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; }
.vrang { width: 240px; margin: -8px auto -6px; transform-origin: 50% 0; }
.js .vrang { transition: scale 1.2s cubic-bezier(.3, 1.3, .4, 1) .2s, opacity .6s ease .2s; }
.js .verse:not(.buka) .vrang { scale: .3; 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; }
.kusen { position: absolute; left: 50%; top: 6px; width: var(--pw, 100%); aspect-ratio: 3 / 4; translate: -50% 0; z-index: 3; pointer-events: none; perspective: 900px; }
.kd { position: absolute; top: 0; width: 50%; height: 100%; object-fit: cover; border-radius: 100% 0 0 0 / 37% 0 0 0; max-width: none; filter: drop-shadow(0 6px 8px rgba(20, 45, 80, .25)); }
.kd.l { left: 0; transform-origin: 0 50%; rotate: y -118deg; } .kd.r { right: 0; transform-origin: 100% 50%; scale: -1 1; rotate: y 118deg; }
.js .kd { transition: rotate 1.8s cubic-bezier(.5, 0, .3, 1) .35s; }
.js .person:not(.buka) .kd { rotate: y 0deg; } html:not(.js) .kd { display: none; }
.person.buka .kd.l { rotate: y 62deg; } .person.buka .kd.r { rotate: y -62deg; } html:not(.js) .kd { display: none; }
.person { padding-top: 6px; }
.portrait { width: 100%; height: auto; aspect-ratio: 3 / 4; padding: 5px; border: 1.5px solid var(--deep); border-radius: 999px 999px 8px 8px; background: var(--card); display: flex; box-shadow: 0 12px 22px rgba(20, 45, 80, .16); }
.portrait > * { flex: 1; width: 100%; height: 100%; border-radius: 999px 999px 4px 4px; 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, #2a64a8, var(--deep) 45%, var(--deep2)); color: #fff; overflow: hidden; }
.layar { position: relative; width: 100%; height: 70px; margin: 0 0 -30px; }
.layar img { position: absolute; left: 12%; bottom: 6px; width: 58px; }
.layar::after { content: ""; position: absolute; left: -28px; right: -28px; bottom: 0; height: 10px; background: radial-gradient(10px 5px at 10px 0, transparent 9px, rgba(255, 255, 255, .5) 10px, transparent 11px) 0 0 / 20px 10px repeat-x; }
.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; }



html:not(.js) .countdown { display: none; }

.programme { gap: 26px !important; background: linear-gradient(180deg, var(--bg), var(--bg2)) !important; }
.event { position: relative; width: 100%; margin-top: 56px; padding: 40px 22px 30px; border-radius: 999px 999px 12px 12px; background: var(--card); border: 1.5px solid var(--line); box-shadow: 0 16px 30px -14px rgba(20, 45, 80, .25); display: flex; flex-direction: column; align-items: center; gap: 12px; clip-path: none; }
.event::before { content: ""; position: absolute; left: 50%; top: -52px; width: 96px; height: 52px; margin-left: -48px; border-radius: 96px 96px 0 0; background: radial-gradient(60% 70% at 35% 35%, #4f86c6, var(--deep) 60%, var(--deep2)); box-shadow: inset 0 -6px 0 rgba(255, 255, 255, .85); }
.event::after { content: ""; position: absolute; left: 50%; top: -66px; width: 3px; height: 16px; margin-left: -1.5px; background: var(--gold); box-shadow: -5px 5px 0 -1px var(--gold), 5px 5px 0 -1px var(--gold); }

.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(20, 45, 80, .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(20, 45, 80, .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: 8px; background: linear-gradient(var(--deep), #4f86c6); }
.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 { position: relative; display: flex; width: 58%; aspect-ratio: 1 / 1.25; margin-top: 10px; perspective: 900px; border: 8px solid #fff; border-radius: 999px 999px 4px 4px; overflow: hidden; background: url("img/pemandangan.webp") center / cover; box-shadow: 0 16px 30px -12px rgba(20, 45, 80, .35); }
.tb { display: block; width: 50%; height: 100%; overflow: hidden; transform-origin: 0 50%; } .tb.r { transform-origin: 100% 50%; }
.tb img { display: block; width: 100%; height: 100%; object-fit: cover; max-width: none; } .tb.r img { transform: scaleX(-1); }
.tb.l { rotate: y -100deg; } .tb.r { rotate: y 100deg; }
.js .tb { transition: rotate 2.4s cubic-bezier(.6, 0, .3, 1) .8s; }
.closing.buka .tb, html:not(.js) .tb { rotate: y 0deg; }





.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(20, 45, 80, .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 santorini.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: daun jendela terbuka ke luar (0,5–2,6 dtk) → pandangan mundur dari anak tangga teratas
     (1,2–4,8) → ubin judul turun bergantung tali (4,4) lalu berayun → nama (5,4). Berulang: baling-baling kincir
     berputar, kapal berlayar pelan, kilau di laut, camar, kelopak bugenvil gugur, cahaya matahari berdenyut. */
  .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; }
  .event { animation: goyang 6s ease-in-out infinite alternate; } .event:nth-child(even) { animation-delay: -3s; }
  .putar { animation: putarK 14s linear infinite; }
  .kapal { animation: berlayar 70s linear infinite alternate; }
  .kapal img { animation: ayunK 3.2s ease-in-out infinite alternate; }
  .kilau i { animation: kelip2 2.4s ease-in-out infinite; }
  .surya { animation: sinar 6s ease-in-out infinite alternate; }
  .camar.c1 { animation: terbang1 22s ease-in-out infinite; } .camar.c2 { animation: terbang2 28s ease-in-out infinite; }
  .camar path { animation: kepakC 1.4s ease-in-out infinite alternate; transform-origin: 50% 70%; }
  .vrang { animation: goyang 5s ease-in-out infinite alternate; }
  .gantung { animation: goyang 5.5s ease-in-out infinite alternate; }
  .js.is-open:not(.no-anim) .gantung { animation: turunU 1.4s 4.4s cubic-bezier(.3, 1.25, .45, 1) both, goyang 5.5s 5.8s ease-in-out infinite alternate; }
  .js.is-open:not(.no-anim) .ubin-t { animation: naik 1s 5.4s both; }
  .js.is-open:not(.no-anim) .hero-pin > .ombak { animation: naik 1s 6s both; }
  .ombak i { animation: ombakT 2.4s ease-in-out infinite; } .ombak i:nth-child(2) { animation-delay: -.8s; } .ombak i:nth-child(3) { animation-delay: -1.6s; }
  .layar img { animation: lintasK 18s linear -4s infinite, ayunK 2.6s ease-in-out infinite alternate; }

}
@keyframes geserS { from { scale: 1.16; translate: 0 5%; } to { scale: 1; translate: 0 -3%; } }
@keyframes putarK { to { rotate: 360deg; } }
@keyframes berlayar { from { translate: 0 0; } to { translate: -320% 6%; } }
@keyframes ayunK { from { rotate: -2deg; } to { rotate: 2.5deg; } }
@keyframes kepakC { from { scale: 1 1; } to { scale: 1 .45; } }
@keyframes turunU { from { translate: 0 -120%; opacity: 0; } 30% { opacity: 1; } }
@keyframes ombakT { 0%, 100% { translate: 0 0; opacity: .35; } 50% { translate: 0 6px; opacity: 1; } }
@keyframes lintasK { from { left: -64px; } to { left: 100%; } }
@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 .daun, .js .kd, .js .tb, .js .vrang { transition: none; } }
.js body.locked { overflow: visible; }

/* ---------- Pembuka Santorini: judul di ubin keramik bermotif (ubin.webp, teks HTML di panel putihnya) yang tergantung
   pada tali dari atas dan berayun. Selama pembuka digulir (.ready, --p 0→1 dipasang santorini.js) pandangan menuruni
   tangga: tangga & bugenvil melaju lewat, desa membesar dan memudar, 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: 4vh 0 0; pointer-events: none; overflow: hidden; }
.scene-off .hero-pin { visibility: hidden; }
.title-wrap { width: min(64%, 260px); }
.gantung { position: relative; padding-top: 7vh; transform-origin: 50% 0; }
.tali { position: absolute; left: 22%; right: 22%; top: 0; height: calc(7vh + 6%); border: solid #8a6a3a; border-width: 0 2px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.tali::before { content: ""; position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--gold); box-shadow: 0 2px 4px rgba(0, 0, 0, .3); }
.ubin { position: relative; filter: drop-shadow(0 14px 18px rgba(20, 45, 80, .3)); }
.ubin > img { display: block; width: 100%; height: auto; max-width: none; }
.ubin-t { position: absolute; left: 18%; right: 18%; top: 15%; bottom: 13%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; color: var(--ink); }
.ubin-t .caps { font-size: 8.5px; letter-spacing: .22em; line-height: 1.5; color: var(--soft); }
.t-name { font: 400 clamp(26px, 8.6vw, 36px)/1.02 var(--script); color: var(--deep); overflow-wrap: anywhere; }
.t-amp { font: 400 20px/1 var(--script); color: var(--pink); }
.ubin-t .pl-date { margin: 6px 0 0; font: 600 9px/1.5 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--deep2); }
/* Penanda "gulir ke bawah": tiga garis ombak yang mengalun. */
.ombak { position: absolute; left: 50%; bottom: 5vh; width: 44px; height: 40px; margin-left: -22px; display: flex; flex-direction: column; gap: 5px; }
.ombak i { display: block; height: 8px; background: radial-gradient(8px 5px at 8px 0, transparent 7px, #fff 7.5px, #fff 9px, transparent 9.5px) 0 0 / 16px 8px repeat-x; filter: drop-shadow(0 1px 2px rgba(20, 45, 80, .5)); }
html:not(.js) .hero-pin { padding: 40px 0; } html:not(.js) .hero-pin > .ombak { display: none; }
main h2.script::after { content: ""; display: block; width: 260px; max-width: 80vw; height: 24px; margin: 8px auto 0; background: url("img/pembatas.webp") center / contain no-repeat; }
/* Pita meander di tepi atas blok biru. */
main > section.count::before, main > section.rsvp::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px; background: url("img/pembatas.webp") center / auto 22px repeat-x; filter: brightness(0) invert(1); opacity: .5; }
.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 .daun { transition: none; }
  .ready .ly-langit { transform: translateY(calc(var(--p, 0) * -4%)) scale(calc(1 + var(--p, 0) * .2)); }
  .ready .ly-kota { transform-origin: 50% 62%; transform: translateY(calc(var(--p, 0) * 6%)) scale(calc(1 + var(--p, 0) * 1.6)); opacity: calc(1 - (var(--p, 0) - .45) * 4); }
  .ready .ly-depan { transform-origin: 50% 64%; transform: translateY(calc(var(--p, 0) * 14%)) scale(calc(1 + var(--p, 0) * 2.8)); opacity: calc(1 - (var(--p, 0) - .55) * 5); }
  .ready .title-wrap { opacity: calc(1 - var(--p, 0) * 5); translate: 0 calc(var(--p, 0) * -160px); }
  .ready .hero-pin > .ombak { opacity: calc(1 - var(--p, 0) * 6); }
  .ready .terang { opacity: calc((var(--p, 0) - .62) * 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; }

/* Kisah: tiap kisah di dalam bingkai tegel Yunani (ubin.webp), lalu ditutup kapal layar menuju laut. */
.chapters { gap: 20px; }
.chapters li, .chapters li:nth-child(2), .chapters li:nth-child(3), .chapters li:nth-child(4), .chapters li:nth-child(n+5) { width: 100%; margin-left: 0; padding: 12px 8px; border: 34px solid transparent; border-image: url("img/ubin.webp") 76 / 34px stretch; border-radius: 0; background: var(--card); background-clip: padding-box; box-shadow: none; text-align: center; }
.chapters li::before { display: none; }
.chapters li > .kisah-foto { rotate: none; }
.story::after { content: ""; width: 120px; aspect-ratio: 260 / 300; background: url("img/kapal.webp") center / contain no-repeat; }