/* Melati — putih gading & hijau sage, untaian melati garis halus. Font di-host di paket (CSP), lisensi di fonts/LISENSI.md. */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 600; src: url("fonts/cormorant-garamond.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 600; src: url("fonts/cormorant-garamond-italic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Pinyon Script"; src: url("fonts/pinyon-script.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Jost"; font-weight: 300 500; src: url("fonts/jost.woff2") format("woff2"); font-display: swap; }

:root {
  --ivory: #fbf8f1;
  --paper: #fffdf8;
  --sage-wash: #eef1e8;
  --sage-soft: #dfe6d5;
  --sage: #8a9b7c;
  --sage-deep: #55684b;
  --ink: #2f3b2b;
  --muted: #5f6b59;
  --line: #d5dccb;
  --gold: #b49a5e;
  --serif: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --script: "Pinyon Script", "Snell Roundhand", cursive;
  --sans: "Jost", "Futura", system-ui, sans-serif;
 /* warna hasil tone (dulu ditulis langsung) */ --tn-1: #e9ece2; --tn-2: #55684b; --tn-3: #3c4a34; --tn-4: #20281d; --tn-5: #8a9b7c;
}

/* Tone warna (field "tone"): sage = bawaan di atas. */
:root[data-tone="ungu"] { --sage-wash: #ebe8f1; --sage-soft: #dcd5e6; --sage: #8c7c9b; --sage-deep: #5d4b68; --ink: #372b3b; --line: #d2cbdc; --tn-1: #e5e2ec; --tn-2: #5d4b68; --tn-3: #42344a; --tn-4: #251d28; --tn-5: #8c7c9b; }
:root[data-tone="toska"] { --sage-wash: #e8f1f0; --sage-soft: #d5e6e6; --sage: #7c979b; --sage-deep: #4b6168; --ink: #2b363b; --line: #cbdcdc; --tn-1: #e2eceb; --tn-2: #4b6168; --tn-3: #34454a; --tn-4: #1d2528; --tn-5: #7c979b; }
:root[data-tone="merah"] { --sage-wash: #f1e8eb; --sage-soft: #e6d5d9; --sage: #9b7c7f; --sage-deep: #684b4b; --ink: #3b2d2b; --line: #dccbcf; --tn-1: #ece2e6; --tn-2: #684b4b; --tn-3: #4a3434; --tn-4: #281e1d; --tn-5: #9b7c7f; }

* { 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: var(--tn-1) url("img/pola.svg") 0 0 / 260px 260px;
}
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(--ivory);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tn-2) 6%, transparent), 0 30px 80px color-mix(in srgb, var(--tn-3) 16%, transparent);
  overflow: hidden;
}
section { position: relative; padding: 76px 28px; text-align: center; }

.eyebrow {
  margin: 0;
  font: 500 11px/1.4 var(--sans);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sage-deep);
}
.head { margin-bottom: 30px; }
.head h2 { font: 500 38px/1.1 var(--serif); margin-top: 10px; color: var(--ink); }
.head::after {
  content: "";
  display: block;
  width: 56px;
  height: 9px;
  margin: 16px auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 9'%3E%3Cpath d='M0 4.5h22M34 4.5h22' stroke='%238a9b7c' stroke-width='.8'/%3E%3Cpath d='M28 .8 31.7 4.5 28 8.2 24.3 4.5Z' fill='none' stroke='%238a9b7c' stroke-width='.8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lead { color: var(--muted); max-width: 34ch; margin: 0 auto 8px; }

/* ---------- Sampul ---------- */
.cover {
  min-height: 100vh;
  min-height: 100svh;
  padding: 0 28px 56px;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 60% at 50% 100%, var(--sage-wash), transparent 70%),
    radial-gradient(80% 40% at 50% 0%, #fff, transparent 70%),
    var(--ivory);
}
.tirai { width: calc(100% + 56px); max-width: none; margin: 0 -28px; height: auto; transform-origin: 50% 0; }
.cover-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: -22%;
  padding-top: 12px;
}
.cover .eyebrow { color: var(--muted); }
.names {
  margin: 14px 0 8px;
  font: 400 64px/1.02 var(--script);
  color: var(--sage-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.names .amp { font: italic 400 30px/1 var(--serif); color: var(--gold); margin: 2px 0 6px; }
.cover-date {
  margin: 10px 0 0;
  font: 500 17px/1.4 var(--serif);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.to {
  margin-top: 28px;
  padding: 16px 26px 14px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  min-width: 240px;
}
.to p { margin: 0; font-size: 13px; color: var(--muted); }
.to .guest { font: 600 25px/1.3 var(--serif); color: var(--ink); margin-top: 4px; }
.to .sorry { font-size: 11.5px; line-height: 1.5; margin-top: 8px; font-style: italic; }
.js body.opened .cover .open { visibility: hidden; }
.cover .open { margin-top: 28px; display: none; }
.js .cover .open { display: inline-flex; }

/* ---------- Tombol ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 26px;
  border: 1px solid var(--sage-deep);
  border-radius: 999px;
  background: var(--sage-deep);
  color: var(--paper);
  font: 500 13px/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, transform 0.25s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { background: var(--ink); border-color: var(--ink); }
.btn:active { transform: scale(0.98); }
.btn:focus-visible, .music:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn.ghost { background: transparent; color: var(--sage-deep); }
.btn.ghost:hover { background: var(--sage-wash); color: var(--ink); }

/* ---------- Pembuka ---------- */
.intro { padding-top: 84px; padding-bottom: 64px; }
.salam { font: italic 500 24px/1.4 var(--serif); color: var(--sage-deep); margin-bottom: 26px; }
.quote { margin: 0 auto; max-width: 34ch; }
.quote blockquote { margin: 0; font: italic 400 21px/1.55 var(--serif); color: var(--ink); }
.quote blockquote::before { content: "\201C"; display: block; font: 400 64px/0.6 var(--serif); color: var(--sage); margin-bottom: 10px; }
.quote figcaption { margin-top: 16px; font: 500 11px/1.4 var(--sans); letter-spacing: 0.3em; text-transform: uppercase; color: var(--sage-deep); }
.sprig { width: 170px; height: auto; margin: 34px auto 0; }

/* ---------- Mempelai ---------- */
.couple { background: var(--paper); border-top: 1px solid var(--sage-wash); border-bottom: 1px solid var(--sage-wash); }
.couple .lead { margin-bottom: 40px; }
.person { display: flex; flex-direction: column; align-items: center; }
.frame {
  position: relative;
  width: 214px;
  aspect-ratio: 3 / 4;
  border-radius: 999px 999px 18px 18px;
  overflow: hidden;
  background: var(--sage-wash);
  box-shadow: 0 0 0 7px var(--paper), 0 0 0 8px var(--line);
  margin: 8px 0 30px;
}
.frame > img { width: 100%; height: 100%; object-fit: cover; }
.placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 40%, #fff 0 28%, transparent 60%),
    linear-gradient(180deg, var(--sage-wash), var(--sage-soft));
}
.placeholder img { width: 46%; opacity: 0.95; }
.person h3 { font: 400 54px/1.05 var(--script); color: var(--sage-deep); }
.person .full { font: 600 22px/1.3 var(--serif); margin: 6px 0 8px; letter-spacing: 0.02em; }
.person .parents { font-size: 14px; color: var(--muted); margin: 0; }
.and { font: italic 400 46px/1 var(--serif); color: var(--gold); margin: 34px 0 26px; }

/* ---------- Hitung mundur ---------- */
.save { background: var(--sage-wash); }
.save::before, .save::after { content: ""; position: absolute; width: 96px; height: 96px; background: url("img/sudut.svg") center / contain no-repeat; pointer-events: none; }
.save::before { top: 6px; left: 6px; }
.save::after { bottom: 6px; right: 6px; transform: rotate(180deg); }
.save .head h2 { color: var(--sage-deep); }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 340px; margin: 0 auto; }
.countdown div { padding: 4px 0; }
.countdown div + div { border-left: 1px solid var(--sage); }
.countdown b { display: block; font: 500 40px/1.1 var(--serif); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.countdown span { font: 500 10.5px/1.6 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.save-date { margin: 26px 0 0; font: italic 500 20px/1.4 var(--serif); color: var(--sage-deep); }

/* ---------- Kisah ---------- */
.story-text { white-space: pre-line; font: 400 19px/1.65 var(--serif); color: var(--ink); max-width: 36ch; margin: 0 auto; }

/* ---------- Acara ---------- */
.events { background: var(--paper); }
.event {
  position: relative;
  padding: 40px 24px 30px;
  margin: 0 0 20px;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 4px;
  outline: 1px solid var(--line);
  outline-offset: -8px;
}
.event::before, .event::after {
  content: "";
  position: absolute;
  width: 68px;
  height: 68px;
  background: url("img/sudut.svg") center / contain no-repeat;
}
.event::before { top: -8px; left: -8px; }
.event::after { bottom: -8px; right: -8px; transform: rotate(180deg); }
.event h3 { font: 600 25px/1.25 var(--serif); margin: 12px 0 4px; }
.event .time { font: italic 500 19px/1.4 var(--serif); color: var(--sage-deep); margin-bottom: 14px; }
.event .place { color: var(--muted); font-size: 14.5px; max-width: 30ch; margin: 0 auto 4px; }
.actions { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-top: 18px; }
.actions .btn { min-width: 220px; }
.dress { margin: 30px auto 0; font: italic 500 20px/1.4 var(--serif); max-width: 30ch; }
.dress .eyebrow { display: block; margin-bottom: 8px; font-style: normal; }
.live { margin: 26px 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: 8px; }
.gallery img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 3px; background: var(--sage-wash); }
.gallery img:nth-child(3n + 1) { grid-column: span 2; aspect-ratio: 4 / 3; }
.gallery img:first-child { border-radius: 999px 999px 3px 3px; aspect-ratio: 4 / 4.4; }

.gallery img { cursor: zoom-in; }
.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-4) 92%, transparent); }
.lightbox.show { display: flex; animation: muncul 0.3s ease both; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 4px; 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.14); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }

/* ---------- Amplop ---------- */
.gifts { background: var(--sage-wash); }
.gift-card {
  position: relative;
  margin: 26px auto 0;
  max-width: 330px;
  padding: 34px 24px 28px;
  background: var(--paper);
  border-radius: 6px;
  box-shadow: 0 18px 40px color-mix(in srgb, var(--tn-3) 12%, transparent);
}
.gift-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(90deg, var(--sage), var(--gold), var(--sage));
}
.bank { font: 500 12px/1.4 var(--sans); letter-spacing: 0.3em; text-transform: uppercase; color: var(--sage-deep); margin-bottom: 8px; }
.number { font: 600 30px/1.2 var(--serif); letter-spacing: 0.06em; margin-bottom: 4px; font-variant-numeric: lining-nums; }
.holder { color: var(--muted); font-size: 14px; margin-bottom: 20px; }
.btn.copied { background: var(--gold); border-color: var(--gold); }

/* ---------- RSVP & ucapan ---------- */
.rsvp { background: var(--paper); }
.form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: left;
  padding: 26px 22px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--ivory);
}
.field { display: flex; flex-direction: column; gap: 6px; font: 500 12px/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage-deep); }
.field input, .field textarea {
  font: 400 16px/1.5 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  min-height: 46px;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px var(--sage-wash); }
.choice { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.choice legend { font: 500 12px/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage-deep); 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: 4px;
  background: var(--paper);
  font-size: 13.5px;
  text-align: center;
  line-height: 1.25;
  transition: 0.2s;
}
.choice input:checked + span { background: var(--sage-deep); border-color: var(--sage-deep); color: var(--paper); }
.choice input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.form .btn { align-self: stretch; margin-top: 4px; }
.note { font: italic 500 18px/1.5 var(--serif); color: var(--muted); }
.note.sent { color: var(--sage-deep); }
.count { margin: 34px 0 12px; font: 500 11px/1.4 var(--sans); letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); }
.wishes {
  list-style: none;
  margin: 0;
  padding: 0 4px 0 0;
  max-height: 520px;
  overflow-y: auto;
  text-align: left;
  border-top: 1px solid var(--line);
}
.wishes li { padding: 18px 4px; border-bottom: 1px solid var(--line); }
.wishes li.pinned { background: linear-gradient(90deg, var(--sage-wash), transparent); padding-left: 14px; }
.who { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.who b { font: 600 19px/1.3 var(--serif); }
.tag, .pin { font: 500 10px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; background: var(--sage-wash); color: var(--sage-deep); }
.pin { background: transparent; border: 1px solid var(--gold); color: #7d6a3a; }
.msg { margin: 0; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.wish-reply { margin: 10px 0 0 12px; padding-left: 12px; border-left: 2px solid var(--sage); color: var(--muted); font-size: 14.5px; }
.wish-reply span { display: block; font: 500 10.5px/1.6 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage-deep); }

/* ---------- Penutup ---------- */
.closing { padding-top: 64px; padding-bottom: 84px; background: radial-gradient(90% 60% at 50% 100%, var(--sage-wash), transparent 75%), var(--ivory); }
.closing .sprig { margin: 0 auto 28px; }
.closing > p:not(.names):not(.salam):not(.from) { color: var(--muted); max-width: 34ch; margin: 0 auto 18px; }
.closing .salam { margin: 22px 0 0; }
.from { margin: 28px 0 0; font: 500 11px/1.4 var(--sans); letter-spacing: 0.3em; text-transform: uppercase; color: var(--sage-deep); }
.closing .names { margin: 8px 0 0; font: 400 52px/1.2 var(--script); color: var(--sage-deep); display: block; }
.closing .names span { font: italic 400 30px var(--serif); color: var(--gold); }
footer { padding: 22px 24px 30px; text-align: center; font: 400 12px/1.5 var(--sans); letter-spacing: 0.08em; color: var(--muted); background: var(--sage-wash); }
footer a { color: var(--sage-deep); font-weight: 500; }

/* ---------- 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: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.92);
  color: var(--sage-deep);
  cursor: pointer;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--tn-3) 18%, 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 .tirai { animation: turun 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both, ayun 6s 1.6s ease-in-out infinite alternate; }
.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 turun { from { opacity: 0; transform: translateY(-24px) scaleY(0.96); } to { opacity: 1; transform: none; } }
@keyframes ayun { from { transform: skewX(0.8deg); } to { transform: skewX(-0.8deg); } }
@keyframes muncul { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes denyut { 0% { box-shadow: 0 8px 24px color-mix(in srgb, var(--tn-3) 18%, transparent), 0 0 0 0 color-mix(in srgb, var(--tn-5) 45%, transparent); } 100% { box-shadow: 0 8px 24px color-mix(in srgb, var(--tn-3) 18%, transparent), 0 0 0 14px color-mix(in srgb, var(--tn-5) 0%, transparent); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Desktop ---------- */
@media (min-width: 640px) {
  body { padding: 0; }
  main { min-height: 100vh; }
}

/* 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) {
  .sprig { transform-origin: 50% 0; animation: mo-ayun 7s 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 Melati: lengkung jendela dengan bingkai sage tipis. */
.cover-photo { padding: 4px; border: 1px solid var(--sage); background: var(--paper); box-shadow: 0 10px 24px rgba(85, 104, 75, 0.16); }
.cover-photo img { border-radius: 999px 999px 12px 12px; }
@media (max-height: 700px) { .cover-photo { display: none; } } /* layar pendek: sampul seperti semula supaya tombol tetap terlihat */