/* Asmara — cat air merah muda ke marun, mawar & peoni, kelopak berguguran. Font di-host di paket (CSP), lisensi di fonts/LISENSI.md. */
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 700; src: url("fonts/playfair-display.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400 700; src: url("fonts/playfair-display-italic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Parisienne"; src: url("fonts/parisienne.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Mulish"; font-weight: 300 700; src: url("fonts/mulish.woff2") format("woff2"); font-display: swap; }

:root {
  --cream: #fff8f4;
  --blush: #fbebe7;
  --petal: #f3c9c8;
  --rose: #c96a7a;
  --rose-deep: #a8445a;
  --wine: #6e1f33;
  --wine-deep: #4a1222;
  --ink: #3f1d26;
  --muted: #74505a;
  --line: #efd3d1;
  --gold: #c9a26b;
  --sage: #7d9478;
  --serif: "Playfair Display", "Didot", Georgia, serif;
  --script: "Parisienne", "Snell Roundhand", cursive;
  --sans: "Mulish", system-ui, sans-serif;
 /* warna hasil tone (dulu ditulis langsung) */ --tn-1: #c96a7a; --tn-2: #f3c9c8; --tn-3: #6e1f33; --tn-4: #f7e4e0; --tn-5: #e8a0a8; --tn-6: #2e0a14; --tn-7: #4a1222; --tn-8: #f6d9d6; --tn-9: #e7bfc3;
}

/* Tone warna (field "tone"): merah-muda = bawaan di atas. */
:root[data-tone="ungu"] { --petal: #e6c8f3; --rose: #9a6ac9; --rose-deep: #7144a8; --wine: #401f6e; --wine-deep: #28124a; --ink: #2b1d3f; --muted: #5e5074; --line: #e7d1ef; --tn-1: #9a6ac9; --tn-2: #e6c8f3; --tn-3: #401f6e; --tn-4: #f3e0f7; --tn-5: #c8a0e8; --tn-6: #180a2e; --tn-7: #28124a; --tn-8: #efd6f6; --tn-9: #d6bfe7; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font: 400 15.5px/1.75 var(--sans);
  background:
    radial-gradient(40vw 40vw at 8% 12%, color-mix(in srgb, var(--tn-1) 28%, transparent), transparent 70%),
    radial-gradient(36vw 36vw at 92% 30%, color-mix(in srgb, var(--tn-2) 70%, transparent), transparent 70%),
    radial-gradient(44vw 44vw at 85% 92%, color-mix(in srgb, var(--tn-3) 20%, transparent), transparent 70%),
    radial-gradient(30vw 30vw at 12% 80%, color-mix(in srgb, var(--tn-2) 80%, transparent), transparent 70%),
    var(--tn-4);
  background-attachment: fixed;
}
img { display: block; max-width: 100%; }
p { margin: 0 0 12px; }
h1, h2, h3 { margin: 0; font-weight: 400; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.offscreen { position: fixed; left: -9999px; top: 0; }

main {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  background: var(--cream);
  box-shadow: 0 30px 90px color-mix(in srgb, var(--tn-3) 22%, transparent);
  overflow: hidden;
}
section { position: relative; padding: 76px 28px; text-align: center; }

/* Sapuan cat air di balik judul bagian */
.head { position: relative; margin-bottom: 30px; z-index: 0; }
.head::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 46%;
  width: 230px;
  height: 92px;
  transform: translate(-50%, -50%) rotate(-4deg);
  border-radius: 48% 52% 44% 56% / 60% 46% 54% 40%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tn-2) 85%, transparent), color-mix(in srgb, var(--tn-2) 35%, transparent) 70%, transparent);
  filter: blur(6px);
}
.eyebrow { margin: 0; font: 600 11px/1.4 var(--sans); letter-spacing: 0.3em; text-transform: uppercase; color: var(--rose-deep); }
.head h2 { font: 400 46px/1.15 var(--script); color: var(--wine); margin-top: 4px; }
.lead { color: var(--muted); max-width: 34ch; margin: 0 auto 8px; text-wrap: balance; }

/* ---------- Kelopak berguguran ---------- */
.petals { position: fixed; z-index: 4; top: 0; bottom: 0; left: 50%; width: min(480px, 100%); transform: translateX(-50%); pointer-events: none; overflow: hidden; }
.petals i {
  position: absolute;
  top: -40px;
  left: 10%;
  width: 16px;
  height: 18px;
  background: url("img/kelopak.svg") center / contain no-repeat;
  opacity: 0.8;
  animation: jatuh 14s linear infinite;
}
.petals i:nth-child(2) { left: 24%; width: 12px; height: 13px; animation-duration: 17s; animation-delay: -6s; animation-name: jatuh2; }
.petals i:nth-child(3) { left: 38%; animation-duration: 12s; animation-delay: -9s; }
.petals i:nth-child(4) { left: 52%; width: 20px; height: 22px; animation-duration: 19s; animation-delay: -2s; animation-name: jatuh2; }
.petals i:nth-child(5) { left: 66%; width: 13px; height: 14px; animation-duration: 15s; animation-delay: -11s; }
.petals i:nth-child(6) { left: 80%; animation-duration: 13s; animation-delay: -4s; animation-name: jatuh2; }
.petals i:nth-child(7) { left: 92%; width: 11px; height: 12px; animation-duration: 18s; animation-delay: -13s; }
.petals i:nth-child(8) { left: 4%; width: 18px; height: 20px; animation-duration: 16s; animation-delay: -8s; animation-name: jatuh2; }
.petals i:nth-child(9) { left: 46%; width: 10px; height: 11px; animation-duration: 21s; animation-delay: -15s; }
.petals i:nth-child(10) { left: 72%; width: 15px; height: 17px; animation-duration: 20s; animation-delay: -1s; animation-name: jatuh2; }
.petals i:nth-child(11) { left: 16%; width: 13px; height: 14px; animation-duration: 22s; animation-delay: -18s; }
.petals i:nth-child(12) { left: 58%; width: 12px; height: 13px; animation-duration: 15s; animation-delay: -7s; animation-name: jatuh2; }
@keyframes jatuh {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  25% { transform: translate3d(28px, 27vh, 0) rotate(120deg); }
  50% { transform: translate3d(-10px, 54vh, 0) rotate(220deg); }
  75% { transform: translate3d(34px, 81vh, 0) rotate(320deg); }
  100% { transform: translate3d(8px, 110vh, 0) rotate(420deg); }
}
@keyframes jatuh2 {
  0% { transform: translate3d(0, 0, 0) rotate(20deg) scaleX(1); }
  30% { transform: translate3d(-30px, 33vh, 0) rotate(-80deg) scaleX(0.6); }
  60% { transform: translate3d(14px, 66vh, 0) rotate(-170deg) scaleX(1); }
  100% { transform: translate3d(-22px, 110vh, 0) rotate(-300deg) scaleX(0.7); }
}

/* ---------- Sampul ---------- */
.cover {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 28px 110px;
  background:
    radial-gradient(60% 34% at 18% 14%, color-mix(in srgb, var(--tn-2) 90%, transparent), transparent 70%),
    radial-gradient(55% 30% at 86% 88%, color-mix(in srgb, var(--tn-5) 55%, transparent), transparent 70%),
    radial-gradient(70% 50% at 50% 50%, #fffaf7, transparent 80%),
    var(--blush);
}
.bouquet { position: absolute; width: 300px; height: auto; pointer-events: none; }
.bouquet.tl { top: -52px; left: -76px; transform: rotate(-8deg); }
.bouquet.br { bottom: -60px; right: -84px; transform: rotate(172deg); }
.cover-body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.kicker { font: italic 400 19px/1.3 var(--serif); color: var(--rose-deep); margin: 0; }
.cover .names { margin: 10px 0 10px; font: 400 74px/0.95 var(--script); color: var(--wine); display: flex; flex-direction: column; align-items: center; text-shadow: 0 2px 18px rgba(255, 248, 244, 0.9); }
.cover .names .amp { font: italic 400 34px/1 var(--serif); color: var(--rose); margin: 6px 0 4px; }
.cover-date { margin: 10px 0 0; padding: 8px 18px; font: 500 13px/1.4 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--wine); border-top: 1px solid var(--rose); border-bottom: 1px solid var(--rose); }
.to {
  margin-top: 26px;
  padding: 16px 22px;
  min-width: 250px;
  max-width: 310px;
  border-radius: 18px;
  background: rgba(255, 248, 244, 0.72);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--tn-3) 8%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--tn-1) 20%, transparent);
  backdrop-filter: blur(4px);
}
.to p { margin: 0; font-size: 13px; color: var(--muted); }
.to .guest { font: 600 22px/1.3 var(--serif); color: var(--ink); margin: 4px 0 6px; }
.to .sorry { font-size: 11px; font-style: italic; text-wrap: balance; }
.cover .open { margin-top: 26px; display: none; }
.js .cover .open { display: inline-flex; }
.js body.opened .cover .open { visibility: hidden; }

/* ---------- Tombol ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 26px;
  border: 1px solid var(--wine);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--rose-deep), var(--wine));
  color: #fff;
  font: 700 13.5px/1 var(--sans);
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--tn-3) 22%, transparent);
  transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 14px 26px color-mix(in srgb, var(--tn-3) 28%, transparent); }
.btn:focus-visible, .music:focus-visible, .gallery img:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn.ghost { background: transparent; color: var(--wine); box-shadow: none; border-color: var(--rose); }
.btn.ghost:hover { background: var(--blush); }
.btn.light { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.5); box-shadow: none; min-height: 44px; padding: 0 18px; }

/* ---------- Pembuka ---------- */
.intro { background: linear-gradient(180deg, var(--wine-deep), var(--wine)); color: #fbe9e6; padding: 80px 30px 64px; }
.intro .salam { font: italic 400 22px/1.4 var(--serif); color: var(--petal); margin-bottom: 24px; }
.quote { margin: 0 auto; max-width: 34ch; }
.quote blockquote { margin: 0; font: italic 400 18px/1.7 var(--serif); color: #fff3f0; text-wrap: pretty; }
.quote figcaption { margin-top: 16px; font: 600 11px/1.4 var(--sans); letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); }
.intro .spray { width: 190px; height: auto; margin: 30px auto 0; }

/* ---------- Mempelai ---------- */
.couple .lead { margin-bottom: 40px; }
.person { display: flex; flex-direction: column; align-items: center; }
.portrait { position: relative; width: 230px; height: 230px; margin-bottom: 34px; }
.portrait::before {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 46% 54% 52% 48% / 52% 44% 56% 48%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tn-5) 75%, transparent), color-mix(in srgb, var(--tn-2) 50%, transparent) 70%, transparent);
  filter: blur(4px);
}
.portrait > img:first-child, .initial {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 6px solid var(--cream);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--tn-3) 18%, transparent);
}
.initial {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 35% 30%, #fff, var(--blush) 55%, var(--petal));
}
.initial img { width: 92%; transform: translate(6%, -4%) rotate(-10deg); opacity: 0.9; }
.portrait .spray { position: absolute; left: 50%; bottom: -30px; width: 200px; transform: translateX(-50%); }
.person h3 { font: 400 54px/1.05 var(--script); color: var(--wine); }
.person .full { font: 600 21px/1.35 var(--serif); margin: 8px 0 8px; text-wrap: balance; }
.person .parents { font-size: 14px; color: var(--muted); margin: 0; }
.person .parents b { font-weight: 600; color: var(--ink); }
.and { font: 400 72px/1 var(--script); color: var(--rose); margin: 34px 0 24px; }

/* ---------- Hitung mundur ---------- */
.save {
  background:
    radial-gradient(70% 50% at 0% 0%, color-mix(in srgb, var(--tn-5) 45%, transparent), transparent 70%),
    radial-gradient(60% 50% at 100% 100%, color-mix(in srgb, var(--tn-1) 30%, transparent), transparent 70%),
    var(--blush);
}
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 360px; margin: 0 auto; }
.countdown div {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, var(--cream) 60%, #fde3e0);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--tn-3) 12%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--tn-1) 25%, transparent);
}
.countdown b { font: 600 26px/1 var(--serif); color: var(--wine); font-variant-numeric: lining-nums tabular-nums; }
.countdown span { font: 600 9.5px/1.6 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.save-date { margin: 26px 0 0; font: italic 400 19px/1.4 var(--serif); color: var(--wine); }

/* ---------- Kisah ---------- */
.letter {
  position: relative;
  padding: 34px 26px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 18px 40px color-mix(in srgb, var(--tn-3) 10%, transparent);
}
.letter::before { content: "\201C"; position: absolute; top: -26px; left: 50%; transform: translateX(-50%); width: 52px; height: 52px; border-radius: 50%; background: var(--wine); color: #fff; font: 400 46px/72px var(--serif); }
.letter p { margin: 0; white-space: pre-line; font: italic 400 17px/1.75 var(--serif); color: var(--ink); }

/* ---------- Acara ---------- */
.events { background: linear-gradient(180deg, var(--cream), var(--blush)); }
.event {
  position: relative;
  margin: 70px 0 0;
  padding: 58px 22px 30px;
  background: #fff;
  border-radius: 200px 200px 20px 20px;
  box-shadow: 0 18px 40px color-mix(in srgb, var(--tn-3) 10%, transparent), inset 0 0 0 1px var(--line);
}
.event + .event { margin-top: 84px; }
.events .head + .event { margin-top: 56px; }
.event .spray { position: absolute; top: -44px; left: 50%; width: 210px; transform: translateX(-50%); }
.event h3 { font: 400 44px/1.1 var(--script); color: var(--wine); }
.event .day { font: 600 19px/1.35 var(--serif); margin: 10px 0 2px; }
.event .time { font: 700 14px/1.4 var(--sans); letter-spacing: 0.18em; color: var(--rose-deep); margin-bottom: 14px; }
.event .place { color: var(--muted); font-size: 14.5px; max-width: 30ch; margin: 0 auto; text-wrap: balance; }
.actions { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-top: 22px; }
.actions .btn { min-width: 220px; }
.dress { margin: 40px auto 0; }
.dress p:not(.eyebrow) { font: italic 400 20px/1.4 var(--serif); margin: 8px 0 12px; }
.swatch { display: inline-flex; gap: 8px; }
.swatch i { width: 26px; height: 26px; border-radius: 50%; background: var(--petal); box-shadow: 0 0 0 3px #fff, 0 3px 8px color-mix(in srgb, var(--tn-3) 15%, transparent); }
.swatch i:nth-child(2) { background: var(--rose); }
.swatch i:nth-child(3) { background: var(--wine); }
.swatch i:nth-child(4) { background: var(--cream); }
.live { margin: 30px 0 0; color: var(--muted); font-size: 14px; display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* ---------- Galeri ---------- */
.gallery .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gallery img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; background: var(--blush); cursor: zoom-in; }
.gallery img:nth-child(4n + 1) { grid-row: span 2; aspect-ratio: auto; min-height: 100%; }
.gallery img:first-child { border-radius: 120px 120px 16px 16px; }
.lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: 20px; background: color-mix(in srgb, var(--tn-6) 92%, transparent); }
.lightbox.show { display: flex; animation: muncul 0.3s ease both; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); }
.lightbox button { position: absolute; top: 12px; right: 12px; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }

/* ---------- Amplop ---------- */
.gifts { background: var(--cream); }
.gift-card {
  position: relative;
  overflow: hidden;
  margin: 28px auto 0;
  max-width: 340px;
  aspect-ratio: 1.6;
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  color: #fff;
  border-radius: 18px;
  background:
    radial-gradient(80% 90% at 100% 0%, color-mix(in srgb, var(--tn-2) 55%, transparent), transparent 60%),
    radial-gradient(60% 70% at 0% 100%, color-mix(in srgb, var(--tn-1) 60%, transparent), transparent 70%),
    linear-gradient(135deg, var(--wine), var(--wine-deep));
  box-shadow: 0 22px 44px color-mix(in srgb, var(--tn-7) 35%, transparent);
}
.gift-card::after { content: ""; position: absolute; right: -40px; bottom: -50px; width: 190px; height: 160px; background: url("img/rangkaian.svg") center / contain no-repeat; opacity: 0.35; transform: rotate(160deg); }
.gc-top { display: flex; justify-content: space-between; align-items: center; }
.chip { width: 40px; height: 30px; border-radius: 6px; background: linear-gradient(135deg, #f1d9a8, #c9a26b 60%, #e8c98f); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.bank { margin: 0; font: 700 13px/1.2 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.number { position: relative; z-index: 1; margin: 0; font: 600 23px/1.2 var(--serif); letter-spacing: 0.06em; font-variant-numeric: lining-nums; overflow-wrap: anywhere; }
.gc-bottom { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.holder { margin: 0; font: 600 13.5px/1.35 var(--sans); }
.holder span { display: block; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.75; font-weight: 600; }
.btn.copied { background: #fff; color: var(--wine); }

/* ---------- RSVP & ucapan ---------- */
.rsvp { background: radial-gradient(80% 40% at 50% 0%, color-mix(in srgb, var(--tn-2) 60%, transparent), transparent 70%), var(--blush); }
.form { display: flex; flex-direction: column; gap: 18px; text-align: left; padding: 26px 22px; border-radius: 22px; background: #fff; box-shadow: 0 18px 40px color-mix(in srgb, var(--tn-3) 10%, transparent); }
.field { display: flex; flex-direction: column; gap: 6px; font: 700 13px/1.4 var(--sans); color: var(--wine); }
.field input, .field textarea {
  font: 400 16px/1.5 var(--sans);
  color: var(--ink);
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--cream);
  min-height: 46px;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tn-2) 60%, transparent); }
.choice { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.choice legend { font: 700 13px/1.4 var(--sans); color: var(--wine); margin-bottom: 8px; padding: 0; }
.choice label { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 6px 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--cream); font-size: 13.5px; text-align: center; line-height: 1.25; transition: 0.2s; }
.choice input:checked + span { background: var(--wine); border-color: var(--wine); color: #fff; }
.choice input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.form .btn { align-self: stretch; margin-top: 4px; }
.note { font: italic 400 17px/1.5 var(--serif); color: var(--muted); }
.note.sent { color: var(--wine); }
.count { margin: 34px 0 14px; font: italic 400 18px/1.4 var(--serif); color: var(--muted); }
.count b { font-style: normal; color: var(--wine); }
.wishes { list-style: none; margin: 0; padding: 4px; max-height: 540px; overflow-y: auto; text-align: left; display: flex; flex-direction: column; gap: 12px; }
.wishes li { padding: 16px 18px; border-radius: 16px; background: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--tn-3) 6%, transparent); }
.wishes li.pinned { box-shadow: 0 6px 16px color-mix(in srgb, var(--tn-3) 6%, transparent), inset 3px 0 0 var(--rose); }
.who { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.who b { font: 600 17px/1.3 var(--serif); }
.tag, .pin { font: 700 10px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; background: var(--blush); color: var(--rose-deep); }
.pin { background: var(--wine); color: #fff; }
.msg { margin: 0; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; font-size: 14.5px; }
.wish-reply { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--cream); color: var(--muted); font-size: 14px; }
.wish-reply span { display: block; font: 700 10px/1.6 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-deep); }

/* ---------- Penutup ---------- */
.closing { overflow: hidden; padding: 150px 30px 160px; background: linear-gradient(180deg, var(--wine), var(--wine-deep)); color: #fbe9e6; }
.closing .bouquet { width: 250px; opacity: 0.95; }
.closing .bouquet.tl { top: -30px; left: -80px; }
.closing .bouquet.br { bottom: -40px; right: -80px; }
.thanks { font: 400 52px/1.1 var(--script); color: #fff; margin-bottom: 18px; }
.closing > p:not(.thanks):not(.names):not(.salam) { max-width: 33ch; margin: 0 auto 16px; color: var(--tn-8); text-wrap: balance; }
.closing .salam { font: italic 400 20px/1.4 var(--serif); color: var(--petal); margin: 18px 0 0; }
.closing .names { margin: 26px 0 0; font: 400 46px/1.2 var(--script); color: #fff; }
.closing .names span { font: italic 400 26px var(--serif); color: var(--gold); }
footer { padding: 20px 24px 28px; text-align: center; font: 400 12px/1.5 var(--sans); color: var(--tn-9); background: var(--wine-deep); }
footer a { color: #fff; font-weight: 700; }

/* ---------- Musik ---------- */
.music {
  position: fixed;
  z-index: 30;
  right: max(16px, calc(50% - 240px + 16px));
  bottom: 18px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rose-deep), var(--wine));
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--tn-3) 30%, transparent);
}
.music svg { width: 22px; height: 22px; }
.music[aria-pressed=true] { animation: denyut 2.4s ease-out infinite; }
.js body.locked .music { opacity: 0; pointer-events: none; }

/* ---------- Gerbang sampul (hanya dengan JS) ---------- */
.js body.locked { overflow: hidden; }
.js body.locked main > :not(.cover) { display: none; }
.js .cover .bouquet.tl { animation: mekar-tl 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.js .cover .bouquet.br { animation: mekar-br 1.6s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.js .cover-body > * { animation: muncul 1s ease both; }
.js .cover-body > :nth-child(2) { animation-delay: 0.25s; }
.js .cover-body > :nth-child(3) { animation-delay: 0.45s; }
.js .cover-body > :nth-child(4) { animation-delay: 0.6s; }
.js .cover-body > :nth-child(5) { animation-delay: 0.75s; }
.js body.opened .intro > * { animation: muncul 1.1s ease both; }

@keyframes mekar-tl { from { opacity: 0; transform: rotate(-20deg) scale(0.85); } to { opacity: 1; transform: rotate(-8deg); } }
@keyframes mekar-br { from { opacity: 0; transform: rotate(160deg) scale(0.85); } to { opacity: 1; transform: rotate(172deg); } }
@keyframes muncul { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes denyut { 0% { box-shadow: 0 10px 24px color-mix(in srgb, var(--tn-3) 30%, transparent), 0 0 0 0 color-mix(in srgb, var(--tn-1) 50%, transparent); } 100% { box-shadow: 0 10px 24px color-mix(in srgb, var(--tn-3) 30%, transparent), 0 0 0 14px color-mix(in srgb, var(--tn-1) 0%, transparent); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .petals { display: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (min-width: 640px) { main { min-height: 100vh; } }
@media (min-width: 1000px) {
  body::before, body::after { content: ""; position: fixed; z-index: -1; width: 520px; height: 420px; background: url("img/rangkaian.svg") center / contain no-repeat; opacity: 0.55; pointer-events: none; }
  body::before { top: -60px; left: -80px; transform: rotate(-6deg); }
  body::after { bottom: -80px; right: -90px; transform: rotate(174deg); }
}

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

/* ---------- Animasi ---------- */
:root { --rv-dur: 1300; }
.rv { opacity: 0; scale: .9; rotate: -2deg; filter: blur(8px) brightness(1.1); }
.rv.in { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; filter: blur(0) brightness(1); clip-path: none; 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) {
  .spray { transform-origin: 50% 100%; animation: mo-ayun 9s ease-in-out infinite alternate; }
}
@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; } }

/* 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 Asmara: lingkaran dengan cincin mawar. */
.cover-photo { aspect-ratio: 1 / 1; border: 4px solid var(--cream); border-radius: 50%; box-shadow: 0 0 0 2px var(--rose), 0 10px 26px rgba(110, 31, 51, 0.22); }
@media (max-height: 700px) { .cover-photo { display: none; } } /* layar pendek: sampul seperti semula supaya tombol tetap terlihat */