:root{
  --terracotta:#a85a3a;
  --terracotta-deep:#8e452c;
  --cream:#fbf5ea;
  --cream-2:#f4eadb;
  --ink:#4a3128;
  --muted:#7c685d;
  --gold:#c79a49;
  --gold-light:#e1bd74;
  --line:#dfcdb8;
  --sage:#71806a;
  --white:#fffaf2;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--terracotta); color:var(--ink);
  font-family:Arial,"Helvetica Neue",sans-serif; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-3;
  background:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.08), transparent 28%),
    radial-gradient(circle at 90% 90%, rgba(255,220,190,.08), transparent 30%),
    linear-gradient(135deg, #a85a3a 0%, #9f5234 45%, #8e452c 100%);
}
.bingkai{width:min(100%,460px);margin:0 auto;padding:0 22px}
.sampul{
  width:min(100%,460px); margin:0 auto; min-height:100svh; min-height:100dvh;
  position:relative; overflow:hidden; text-align:center; padding:48px 22px 100px;
  background:var(--cream);
  border-left:1px solid rgba(120,70,45,.16); border-right:1px solid rgba(120,70,45,.16);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
}
.sampul::before,.sampul::after{
  content:""; position:absolute; width:150px; height:150px; pointer-events:none; opacity:.9;
  background-repeat:no-repeat; background-size:contain;
}
.sampul::before{
  left:-28px; top:-12px;
  background:
    radial-gradient(circle at 45% 60%, #e8a66e 0 12px, transparent 13px),
    radial-gradient(circle at 66% 46%, #e7c58a 0 10px, transparent 11px),
    linear-gradient(145deg, transparent 43%, #809070 44% 48%, transparent 49%),
    linear-gradient(115deg, transparent 54%, #809070 55% 59%, transparent 60%);
  transform:rotate(-10deg);
}
.sampul::after{
  right:-28px; bottom:35px; transform:rotate(170deg);
  background:
    radial-gradient(circle at 45% 60%, #e8a66e 0 12px, transparent 13px),
    radial-gradient(circle at 66% 46%, #e7c58a 0 10px, transparent 11px),
    linear-gradient(145deg, transparent 43%, #809070 44% 48%, transparent 49%),
    linear-gradient(115deg, transparent 54%, #809070 55% 59%, transparent 60%);
}
.pembuka{margin:0 0 12px; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--terracotta-deep); font-weight:700}
.judul-kecil{margin:0 0 20px; color:var(--ink); font-size:16px; font-weight:500; letter-spacing:.12em; text-transform:uppercase}
.foto-sampul-wrap{position:relative; width:250px; margin:6px auto 22px; z-index:1}
.foto-sampul{background:#fff; padding:10px; border:1px solid var(--line); box-shadow:0 8px 24px rgba(90,50,30,.1)}
.foto-sampul img{width:100%; aspect-ratio:1.08/1; object-fit:cover; display:block}
.nama-pasangan{font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(42px,11vw,58px); line-height:1; color:var(--terracotta-deep); margin:4px 0 18px; font-weight:600; position:relative; z-index:1}
.dan{font-family:"Cormorant Garamond",Georgia,serif; color:#a98a72; display:inline-block; margin:0 .15em}
.asal-usul{width:100%; display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:0 0 16px; position:relative; z-index:1}
.asal-usul p{margin:0; padding:0 10px; font-family:"Cormorant Garamond",Georgia,serif; color:var(--muted); font-size:12px; line-height:1.5}
.asal-usul p + p{border-left:1px solid var(--line)}
.asal-usul p::first-line{font-weight:700;color:var(--ink)}
.garis-kuningan{width:72px; margin:6px auto 22px; border:0; border-top:1px solid var(--gold)}
.tanggal-utama{font-family:"Cormorant Garamond",Georgia,serif; font-size:16px; color:var(--muted); margin:0 0 16px}
.hitung-mundur{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; width:100%; max-width:310px; margin:0 auto 18px}
.hm-kotak{padding:10px 4px; border:1px solid var(--line); background:rgba(255,255,255,.42); min-width:0}
.hm-kotak::before{display:none}
.hm-angka{font-family:"Cormorant Garamond",Georgia,serif; color:var(--terracotta-deep); font-size:25px; line-height:1; font-weight:600}
.hm-label{font-size:9px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted)}
.pelat{order:3; margin:0; max-width:360px; width:100%; position:relative; z-index:2}
.medali{width:72px;height:72px;margin:8px auto 12px;border:2px solid var(--gold);box-shadow:0 0 0 4px var(--cream);background:var(--terracotta);color:#fff;border-radius:50%;font-family:"Cormorant Garamond",Georgia,serif;font-size:20px;display:flex;align-items:center;justify-content:center}
.pelat-label{font-size:11px; letter-spacing:.16em; text-transform:uppercase; margin:0 0 4px; color:var(--muted)}
.pelat-nama{font-family:"Cormorant Garamond",Georgia,serif; font-size:24px; margin:0; color:var(--terracotta-deep)}
.pelat-catatan{font-size:12px;color:var(--muted);margin:3px 0 0}
.tombol-buka-sampul{order:4; display:inline-block; margin:12px 0 22px; padding:11px 30px; border-radius:5px; background:var(--terracotta); color:#fff; text-decoration:none; font-size:14px; font-weight:700; box-shadow:0 8px 18px rgba(120,60,35,.18); position:relative; z-index:2}
.tombol-buka-sampul:hover{background:var(--terracotta-deep)}
.bagian{padding:58px 0; border-top:1px solid var(--line); text-align:center; background:rgba(251,245,234,.96)}
.bagian-judul{font-family:"Cormorant Garamond",Georgia,serif;font-size:34px;color:var(--terracotta-deep);margin:0 0 7px;font-weight:600}
.bagian-sub{font-size:13px;color:var(--muted);margin:0 0 26px;font-style:italic}
.bagian-kutipan .bingkai{padding-top:0;padding-bottom:0}
.kutipan-teks{margin:0 auto 28px; color:var(--terracotta-deep); font-family:"Cormorant Garamond",Georgia,serif; font-size:25px; font-style:italic; line-height:1.35; max-width:390px}
.kutipan-teks cite{display:block;margin-top:12px;font-size:13px;color:var(--muted);font-style:normal}
.sambutan-teks{font-size:15px;color:var(--ink);line-height:1.85;max-width:395px;margin:0 auto}
.acara{border:1px solid var(--line); padding:24px 20px; margin-bottom:16px; background:rgba(255,255,255,.6); box-shadow:0 7px 18px rgba(90,55,35,.06)}
.acara-jenis{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 6px;font-weight:700}
.acara-nama{font-family:"Cormorant Garamond",Georgia,serif;font-size:28px;color:var(--terracotta-deep);margin:0 0 10px}
.acara-baris{font-size:14px;margin:3px 0;color:var(--ink)}
.acara-tempat{font-size:14px;color:var(--muted);margin:11px 0 0}
.acara-peta{display:inline-block;margin-top:16px;padding:9px 18px;border:1px solid var(--terracotta);color:var(--terracotta);text-decoration:none;font-size:12px;border-radius:4px}
.acara-peta:hover{background:var(--terracotta);color:#fff}
.kisah-item,.kartu-amplop,.kartu-ucapan,.form-rsvp,.form-ucapan{background:rgba(255,255,255,.68);border-color:var(--line)}
.kisah-judul{color:var(--terracotta-deep)}
.kisah-cerita,.amplop-info,.rsvp-ubah-catatan,.ucapan-isi{color:var(--ink)}
.grid-galeri{gap:7px}.galeri-item{border-color:var(--line)}
.tombol-musik{position:fixed;right:max(16px,calc((100vw - 460px)/2 + 16px));bottom:84px;z-index:900;width:50px;height:50px;border-radius:50%;border:2px solid var(--gold);background:var(--terracotta);color:#fff;box-shadow:0 8px 20px rgba(80,35,20,.2)}
.navigasi-bawah{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,460px);height:68px;display:grid;grid-template-columns:repeat(5,1fr);z-index:880;background:rgba(251,245,234,.98);border-top:1px solid var(--line);box-shadow:0 -5px 20px rgba(90,55,35,.08);padding-bottom:env(safe-area-inset-bottom)}
.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;text-decoration:none;color:#8b776c;font-size:10px;min-width:0}
.nav-ikon{font-size:22px;line-height:1;color:var(--terracotta-deep);font-family:Georgia,serif}
.nav-item.aktif,.nav-item:hover{background:rgba(194,126,84,.11);color:var(--terracotta-deep)}
.kaki{background:var(--cream);border-top:1px solid var(--line);padding:30px 0 110px;text-align:center;color:var(--muted)}
.kaki-nama{font-family:"Cormorant Garamond",Georgia,serif;color:var(--terracotta-deep);font-size:24px}
.siap-muncul{opacity:1;transform:none}
.form-rsvp,.form-ucapan{padding:18px}
input,textarea{border:1px solid var(--line);background:#fffaf5;color:var(--ink)}
.tombol-kirim{background:var(--terracotta);color:#fff;border:none;border-radius:4px;padding:11px 20px}
@media(max-width:460px){.sampul{width:100%;}.bingkai{width:100%}.tombol-musik{right:16px}.asal-usul p{font-size:11px}.foto-sampul-wrap{width:235px}}
@media(min-width:900px){body{background:#7b4634}.sampul,.bingkai{width:460px}}

/* Pastikan foto kisah/galeri tidak pernah keluar dari canvas tema. */
.kisah-item,
.kartu-amplop,
.grid-galeri,
.galeri-item,
.bingkai,
.bagian{
  max-width:100%;
  min-width:0;
  overflow:hidden;
}
.kisah-foto,
.grid-galeri img,
.galeri-item img,
.amplop-qr{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  box-sizing:border-box;
}
.kisah-foto{object-fit:cover}