/* Font di-host di paket (CSP: aset hanya dari paket template & CDN platform). Lisensi: 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 {
  --bg: #1f3a2e;
  --bg-2: #2a4a3b;
  --cream: #f3e9d2;
  --cream-2: #e8dcc0;
  --line: rgba(243, 233, 210, 0.25);
}

/* Tone warna (field "tone"): hutan = bawaan di atas. */
:root[data-tone="malam"] { --bg: #1b2a40; --bg-2: #24384f; }
:root[data-tone="marun"] { --bg: #3d1820; --bg-2: #4e2430; }
:root[data-tone="arang"] { --bg: #202022; --bg-2: #2e2e31; }

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--cream); font: 15px/1.6 "Plus Jakarta Sans", system-ui, sans-serif; }
main { max-width: 480px; margin: 0 auto; }
section { padding: 48px 24px; text-align: center; border-bottom: 1px solid var(--line); }
h1, h2, h3 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; margin: 0; }
h1 { font-size: 64px; line-height: 0.95; font-style: italic; margin: 12px 0; }
h2 { font-size: 34px; margin-top: 16px; }
h3 { font-size: 34px; margin-bottom: 16px; }
.eyebrow { font-size: 12px; letter-spacing: 4px; text-transform: uppercase; margin: 0; }
.date { letter-spacing: 4px; text-transform: uppercase; }
hr { width: 48px; border: 0; border-top: 1px solid var(--cream); margin: 20px auto; }
.guest { font-size: 22px; font-weight: 700; margin: 0; }
.to { margin: 0; }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 24px; }
.countdown div { background: var(--bg-2); border-radius: 12px; padding: 10px 0; }
.countdown b { display: block; font-size: 24px; }
.countdown span { font-size: 12px; }
.parents { font-size: 13px; opacity: 0.85; }
.amp { font-family: "Instrument Serif", Georgia, serif; font-size: 28px; font-style: italic; margin: 16px 0 0; }
.events article { text-align: left; background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 18px; margin-bottom: 12px; }
.events .when { font-size: 18px; font-weight: 700; margin: 6px 0; }
.gallery .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gallery img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; background: var(--bg-2); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--bg); color: var(--cream); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.btn.light { background: var(--cream); color: var(--bg); margin-top: 8px; }
.gifts .card { display: flex; justify-content: space-between; align-items: center; text-align: left; background: var(--cream); color: var(--bg); border-radius: 16px; padding: 16px 18px; }
.gifts .card p { margin: 0; }
.gifts .number { font-size: 20px; font-weight: 800; }
.rsvp form { display: flex; flex-direction: column; gap: 14px; text-align: left; background: var(--cream); color: var(--bg); border-radius: 18px; padding: 18px; }
.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 var(--cream-2); border-radius: 12px; }
.rsvp fieldset { border: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.rsvp fieldset label { flex-direction: row; align-items: center; font-weight: 600; }
.rsvp legend { font-weight: 700; margin-bottom: 6px; }
.note { opacity: 0.85; font-size: 13px; }
footer { padding: 24px; text-align: center; font-size: 12px; opacity: 0.7; }
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(--cream); color: var(--bg); 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: 1100; }
.rv { opacity: 0; translate: 0 28px; filter: blur(6px); }
.rv.in { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; filter: blur(0) brightness(1); clip-path: none; transition: opacity 1.1s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0) * 1ms), translate 1.1s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0) * 1ms), scale 1.1s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0) * 1ms), rotate 1.1s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0) * 1ms), filter 1.1s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0) * 1ms), clip-path 1.1s 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-blur 1.2s cubic-bezier(.2,.7,.2,1) .15s both; }
  .cover :is(.names,h1,.n1,.n2) { animation: mo-blur 1.2s cubic-bezier(.2,.7,.2,1) .4s both; }
  .cover :is(.amp,.amp-line) { animation: mo-blur 1.2s cubic-bezier(.2,.7,.2,1) .55s both; }
  .cover :is(.date,.cover-date) { animation: mo-blur 1.2s cubic-bezier(.2,.7,.2,1) .8s both; }
  .cover :is(.guest) { animation: mo-blur 1.2s cubic-bezier(.2,.7,.2,1) 1s both; }
  .cover :is(.btn) { animation: mo-blur 1.2s cubic-bezier(.2,.7,.2,1) 1.2s both; }
  .amp { display: inline-block; animation: mo-denyut 3.8s ease-in-out infinite; }
  .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 Sekar: kapsul tegak dengan bingkai garis krem. */
.cover-photo { aspect-ratio: 5 / 7; margin: 14px auto 12px; padding: 5px; border: 1px solid var(--cream-2); border-radius: 999px; background: transparent; box-shadow: none; }
.cover-photo img { border-radius: 999px; }
@media (max-height: 700px) { .cover-photo { display: none; } } /* layar pendek: sampul seperti semula supaya tombol tetap terlihat */