/* Senja — ungu tua & krem, nuansa malam. Font di-host di paket (CSP), lisensi di fonts/LISENSI.md. */
@font-face { font-family: "Instrument Serif"; font-style: normal; src: url("fonts/instrument-serif.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Instrument Serif"; font-style: italic; src: url("fonts/instrument-serif-italic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400 800; src: url("fonts/plus-jakarta-sans.woff2") format("woff2"); font-display: swap; }

:root {
  --night: #2a2036;
  --dusk: #3b2e4a;
  --dusk-2: #4a3a5c;
  --cream: #f3e9d2;
  --peach: #e9b98f;
  --line: rgba(243, 233, 210, 0.22);
}

/* Tone warna (field "tone"): ungu-tua = bawaan di atas. */
:root[data-tone="cokelat-sogan"] { --night: #362920; --dusk: #4a3a2e; --dusk-2: #5c483a; }
:root[data-tone="hijau-zamrud"] { --night: #20362d; --dusk: #2e4a3e; --dusk-2: #3a5c4e; }
:root[data-tone="marun"] { --night: #362024; --dusk: #4a2e33; --dusk-2: #5c3a3f; }

* { box-sizing: border-box; }
body { margin: 0; background: var(--night); color: var(--cream); font: 15px/1.65 "Plus Jakarta Sans", system-ui, sans-serif; }
main { max-width: 480px; margin: 0 auto; background: linear-gradient(180deg, var(--dusk) 0%, var(--night) 55%, var(--dusk) 100%); }
section { padding: 52px 26px; text-align: center; }
h1, h2, h3 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; margin: 0; }
h3 { font-size: 36px; font-style: italic; margin-bottom: 20px; color: var(--peach); }
p { margin: 0 0 10px; }
.eyebrow { font-size: 12px; letter-spacing: 5px; text-transform: uppercase; margin: 0; opacity: 0.9; }

/* Sampul: bingkai lengkung seperti jendela senja */
.cover { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.arch { border: 1px solid var(--line); border-radius: 220px 220px 24px 24px; padding: 34px 22px 28px; background: radial-gradient(120% 70% at 50% 0%, rgba(233, 185, 143, 0.22), transparent 70%); }
.moon { width: 28px; height: 28px; color: var(--peach); margin-bottom: 10px; }
h1 { font-size: 58px; line-height: 0.95; font-style: italic; margin: 10px 0 14px; }
h1 .amp { display: block; font-size: 34px; margin: 6px 0; color: var(--peach); }
.date { letter-spacing: 3px; text-transform: uppercase; font-size: 13px; margin: 0; }
.to p { margin: 0; font-size: 13px; opacity: 0.85; }
.to .guest { font-family: "Instrument Serif", Georgia, serif; font-size: 30px; opacity: 1; margin-top: 4px; }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.countdown div { border: 1px solid var(--line); border-radius: 14px; padding: 10px 0; background: rgba(0, 0, 0, 0.12); }
.countdown b { display: block; font-size: 24px; font-weight: 700; }
.countdown span { font-size: 11px; letter-spacing: 1px; opacity: 0.8; }

.opening { font-family: "Instrument Serif", Georgia, serif; font-size: 22px; font-style: italic; color: var(--peach); }
.lead { opacity: 0.9; }
.person { margin-top: 26px; }
.person h2 { font-size: 36px; line-height: 1.1; }
.parents { font-size: 13px; opacity: 0.8; margin-top: 6px; }
.amp-line { font-family: "Instrument Serif", Georgia, serif; font-size: 40px; font-style: italic; color: var(--peach); margin: 18px 0 0; }

.story p { font-family: "Instrument Serif", Georgia, serif; font-size: 21px; line-height: 1.45; font-style: italic; }

.timeline { list-style: none; margin: 0; padding: 0 0 0 22px; text-align: left; border-left: 1px solid var(--line); }
.timeline li { position: relative; padding: 0 0 28px 18px; }
.timeline li::before { content: ""; position: absolute; left: -29px; top: 4px; width: 13px; height: 13px; border-radius: 50%; background: var(--peach); box-shadow: 0 0 0 5px rgba(233, 185, 143, 0.2); }
.timeline .when { font-size: 18px; font-weight: 700; margin: 6px 0; }

.gallery .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.gallery img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; background: var(--dusk-2); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; margin-top: 8px; border: 0; border-radius: 999px; background: var(--peach); color: var(--night); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.gifts .card { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.15); border-radius: 18px; padding: 18px; margin-top: 8px; }
.gifts .card p { margin: 0; }
.gifts .number { font-size: 20px; font-weight: 800; letter-spacing: 1px; }

.rsvp form { display: flex; flex-direction: column; gap: 14px; text-align: left; background: var(--cream); color: var(--night); border-radius: 20px; padding: 20px; }
.rsvp label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 14px; }
.rsvp input:not([type=radio]), .rsvp textarea { font: inherit; padding: 10px 12px; border: 1px solid #d9cdb4; border-radius: 12px; background: #fff; }
.rsvp textarea { min-height: 96px; }
.rsvp fieldset { border: 0; padding: 0; margin: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.rsvp fieldset label { flex-direction: row; align-items: center; font-weight: 600; }
.rsvp legend { font-weight: 700; margin-bottom: 6px; }
.rsvp .btn { background: var(--dusk); color: var(--cream); }
.note { opacity: 0.85; font-size: 13px; }

.closing .names { font-family: "Instrument Serif", Georgia, serif; font-size: 34px; font-style: italic; color: var(--peach); margin-top: 14px; }
footer { padding: 24px; text-align: center; font-size: 12px; opacity: 0.6; }
footer a { color: inherit; }
.music-toggle { position: fixed; right: 16px; bottom: 16px; z-index: 20; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--peach); color: var(--night); font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
.music-toggle[aria-pressed=true] span { display: inline-block; animation: putar 3s linear infinite; }
@keyframes putar { to { transform: rotate(360deg); } }

/* Buku ucapan & simpan ke kalender (Fase 2) */
.wishes { list-style: none; padding: 0; margin: 22px 0 0; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.wishes li { padding: 14px 16px; border-radius: 14px; background: rgba(127, 127, 127, 0.1); }
.wishes li.pinned { box-shadow: inset 3px 0 0 currentColor; }
.wishes li span { font-size: 13px; opacity: 0.75; }
.wishes p { margin: 6px 0 0; }
.wishes .wish-reply { font-size: 13px; opacity: 0.8; }
.cal { display: inline-block; margin: 10px 0 0 10px; font-size: 13px; font-weight: 700; color: inherit; }

/* Amplop: beberapa rekening/e-wallet */
.gift-list { display: grid; gap: 14px; width: 100%; }

/* ---------- Animasi ---------- */
:root { --rv-dur: 1300; }
.rv { opacity: 0; clip-path: inset(0 0 99% 0); translate: 0 -10px; }
.rv.in { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; filter: blur(0) brightness(1); clip-path: inset(0 0 0 0); transition: opacity 1.3s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0) * 1ms), translate 1.3s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0) * 1ms), scale 1.3s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0) * 1ms), rotate 1.3s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0) * 1ms), filter 1.3s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0) * 1ms), clip-path 1.3s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0) * 1ms); }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; translate: none; scale: none; rotate: none; filter: none; clip-path: none; } }

@media (prefers-reduced-motion: no-preference) {
  .cover :is(.eyebrow,.opening,.bismillah,.verse) { animation: mo-naik 1s cubic-bezier(.2,.7,.2,1) .15s both; }
  .cover :is(.names,h1,.n1,.n2) { animation: mo-naik 1s cubic-bezier(.2,.7,.2,1) .4s both; }
  .cover :is(.amp,.amp-line) { animation: mo-naik 1s cubic-bezier(.2,.7,.2,1) .55s both; }
  .cover :is(.date,.cover-date) { animation: mo-naik 1s cubic-bezier(.2,.7,.2,1) .8s both; }
  .cover :is(.guest) { animation: mo-naik 1s cubic-bezier(.2,.7,.2,1) 1s both; }
  .cover :is(.btn) { animation: mo-naik 1s cubic-bezier(.2,.7,.2,1) 1.2s both; }
  .moon { animation: mo-ambang 9s ease-in-out infinite; }
  .arch { animation: mo-naik 1.5s cubic-bezier(.2,.7,.2,1) both; }
  .amp-line { animation: mo-garis 1.6s .9s cubic-bezier(.2,.7,.2,1) both; }
  .card { transition: translate .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s; }
  .card:hover { translate: 0 -5px; }
}
@keyframes mo-denyut { 0%, 100% { scale: 1; } 50% { scale: 1.08; } }
@keyframes mo-ambang { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes mo-ayun { from { rotate: -2.2deg; } to { rotate: 2.2deg; } }
@keyframes mo-putar { to { rotate: 360deg; } }
@keyframes mo-kerlip { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .35; scale: .72; } }
@keyframes mo-kilau { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes mo-geser { from { translate: -26px 0; } to { translate: 26px 0; } }
@keyframes mo-garis { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes mo-naik { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes mo-blur { from { opacity: 0; filter: blur(10px); scale: 1.05; } to { opacity: 1; filter: blur(0); scale: 1; } }
@keyframes mo-pop { from { opacity: 0; scale: .55; rotate: -8deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes mo-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 5px 0; } }
@keyframes mo-hujan { to { background-position: 0 520px, 0 520px, 0 520px, 0 780px, 0 780px; } }

/* Sampul "Buka undangan": gulir terkunci sampai tamu menekan tombol. Tanpa JS semua isi tetap tampil. */
.cover .to { margin-top: 6px; }
.cover .to .sorry { margin: 8px auto 0; max-width: 28ch; font-size: 12px; font-style: italic; opacity: 0.75; }
.cover .btn.open { margin-top: 18px; gap: 8px; text-transform: uppercase; letter-spacing: 0.12em; font-size: 12.5px; }
.cover .btn.open svg { width: 16px; height: 16px; }
.js body.locked main > :not(.cover) { display: none; }
.js body.locked .music-toggle { opacity: 0; pointer-events: none; }
.js body.opened .cover .open { visibility: hidden; }

/* Foto sampul (opsional): lengkung seperti jendela; tinggi menyesuaikan layar supaya tombol "Buka undangan" tetap terjangkau. */
.cover-photo { position: relative; z-index: 1; flex: none; display: block; width: auto; height: clamp(96px, 17svh, 150px); aspect-ratio: 4 / 5; margin: 8px auto 6px; border-radius: 999px 999px 16px 16px; overflow: hidden; border: 3px solid rgba(255, 255, 255, 0.85); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22); }
.cover-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Cover lebih tinggi dari layar (foto sampul + layar pendek): tetap bisa digulir ke tombol "Buka undangan". */
.js body.locked { overflow: visible; }
/* Bentuk foto sampul khas Senja: bulan: lingkaran dengan cincin peach berpendar. */
.cover-photo { aspect-ratio: 1 / 1; margin: 12px auto 4px; padding: 4px; border: 2px solid var(--peach); border-radius: 50%; background: transparent; box-shadow: 0 0 36px rgba(233, 185, 143, 0.35); }
.cover-photo img { border-radius: 50%; }
@media (max-height: 700px) { .cover-photo { display: none; } } /* layar pendek: sampul seperti semula supaya tombol tetap terlihat */