/* Bintang — biru muda & biru tua, bintang dan bulan, untuk tasyakuran khitanan. */
@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 {
  --sky: #e6eff2;
  --paper: #f6fafb;
  --navy: #054963;
  --gold: #e3b448;
  --line: #c9d6dc;
 /* warna hasil tone (dulu ditulis langsung) */ --tn-1: #0c6b8a;
}

/* Tone warna (field "tone"): biru-laut = bawaan di atas. */
:root[data-tone="terakota"] { --sky: #f2e9e6; --navy: #632105; --line: #dccfc9; --tn-1: #8a2d0c; }
:root[data-tone="ungu"] { --sky: #ece6f2; --navy: #340563; --line: #d3c9dc; --tn-1: #470c8a; }
:root[data-tone="merah"] { --sky: #f2e6e8; --navy: #630512; --line: #dcc9cb; --tn-1: #8a0c21; }

* { box-sizing: border-box; }
.sprite { position: absolute; width: 0; height: 0; }
body { margin: 0; background: var(--sky); color: var(--navy); font: 15px/1.65 "Plus Jakarta Sans", system-ui, sans-serif; }
main { max-width: 480px; margin: 0 auto; background: var(--paper); }
section { padding: 50px 26px; text-align: center; }
h1, h2, h3 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; margin: 0; }
h3 { font-size: 34px; margin-bottom: 18px; }
p { margin: 0 0 10px; }
.eyebrow { font-size: 12px; letter-spacing: 4px; text-transform: uppercase; margin: 0; font-weight: 700; }

.cover { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 14px; background: linear-gradient(180deg, var(--navy) 0%, var(--tn-1) 55%, var(--sky) 100%); color: #fff; overflow: hidden; }
.sky svg { position: absolute; color: var(--gold); }
.sky .moon { width: 56px; height: 56px; top: 9%; right: 14%; }
.sky .s1 { width: 18px; height: 18px; top: 12%; left: 16%; }
.sky .s2 { width: 12px; height: 12px; top: 22%; left: 34%; opacity: 0.8; }
.sky .s3 { width: 14px; height: 14px; top: 28%; right: 30%; opacity: 0.9; }
h1 { font-size: 40px; font-style: italic; line-height: 1; margin: 4px 0 6px; }
h1 span { display: block; font-size: 76px; font-style: normal; color: var(--gold); margin-top: 6px; }
.date { letter-spacing: 3px; text-transform: uppercase; font-size: 13px; margin: 0; }
.to { margin-top: 18px; color: var(--navy); }
.to p { margin: 0; font-size: 13px; }
.to .guest { font-family: "Instrument Serif", Georgia, serif; font-size: 28px; margin-top: 4px; }

.opening { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 22px; }
.child { margin: 22px 0 12px; padding: 28px 18px; background: #fff; border: 1px solid var(--line); border-radius: 22px; }
.child .star { width: 26px; height: 26px; color: var(--gold); }
.child h2 { font-size: 34px; line-height: 1.1; margin-top: 8px; }
.parents { font-size: 13px; opacity: 0.85; margin: 8px 0 0; }
.story { font-family: "Instrument Serif", Georgia, serif; font-size: 19px; font-style: italic; }

.events { background: var(--sky); }
.events article { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 24px 18px; }
.events .when { font-size: 20px; font-weight: 800; margin: 8px 0 2px; }
.events .time { font-weight: 600; }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.countdown div { background: var(--navy); color: #fff; border-radius: 14px; padding: 10px 0; }
.countdown b { display: block; font-size: 24px; }
.countdown span { font-size: 11px; opacity: 0.85; }

.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(--sky); }
.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(--navy); color: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.gift-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
.gift-card p { margin: 0; }
.gift-card .number { font-size: 20px; font-weight: 800; }

.rsvp { background: var(--sky); }
.rsvp form { display: flex; flex-direction: column; gap: 14px; text-align: left; background: #fff; border: 1px solid var(--line); 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 var(--line); border-radius: 12px; background: var(--paper); color: var(--navy); }
.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; }
.note { font-size: 13px; opacity: 0.85; }
.family b { font-size: 17px; }
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(--navy); color: #fff; 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: 1050; }
.rv { opacity: 0; scale: .88; filter: blur(3px) brightness(1.8); }
.rv.in { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; filter: blur(0) brightness(1); clip-path: none; transition: opacity 1.05s cubic-bezier(.34,1.2,.5,1) calc(var(--d, 0) * 1ms), translate 1.05s cubic-bezier(.34,1.2,.5,1) calc(var(--d, 0) * 1ms), scale 1.05s cubic-bezier(.34,1.2,.5,1) calc(var(--d, 0) * 1ms), rotate 1.05s cubic-bezier(.34,1.2,.5,1) calc(var(--d, 0) * 1ms), filter 1.05s cubic-bezier(.34,1.2,.5,1) calc(var(--d, 0) * 1ms), clip-path 1.05s cubic-bezier(.34,1.2,.5,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; }
  .star { animation: mo-kerlip 3.4s ease-in-out infinite; }
  .star:nth-child(2n) { animation-delay: -1.1s; }
  .star:nth-child(3n) { animation-delay: -2.2s; animation-duration: 4.2s; }
  .moon { animation: mo-ambang 9s 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 Bintang: bulan purnama: lingkaran emas berpendar. */
.cover-photo { aspect-ratio: 1 / 1; margin: 14px auto 10px; border: 3px solid var(--gold); border-radius: 50%; box-shadow: 0 0 0 6px rgba(227, 180, 72, 0.22), 0 0 34px rgba(227, 180, 72, 0.45); }
@media (max-height: 700px) { .cover-photo { display: none; } } /* layar pendek: sampul seperti semula supaya tombol tetap terlihat */