/* =============================================================
   TEMA BLUSH BOTANICAL — terinspirasi sampul watercolor elegan
   ============================================================= */
:root {
    --warna-utama: #a96535;
    --warna-kedua: #fffdfb;
    --aksen: #b8733f;
    --tinta: #756b60;
    --kabur: #9a9188;
    --garis: #eee3dc;
    --emas: #c28a3c;
    --peach: #f4d9cc;
    --max: 520px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: #fffdfb;
    color: var(--tinta);
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body.punya-latar::before {
    content: '';
    position: fixed; inset: 0; z-index: -2;
    background-image: var(--foto-latar);
    background-size: cover; background-position: center;
}
body.punya-latar::after {
    content: ''; position: fixed; inset: 0; z-index: -1;
    background: rgba(255,253,251,.91);
}

.bingkai { width: min(100%, var(--max)); margin: 0 auto; padding: 0 28px; }

/* ================= SAMPUL ================= */
.sampul {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 48px 28px 54px;
    text-align: center;
    background:
        radial-gradient(circle at 8% 82%, rgba(246,222,211,.28), transparent 30%),
        linear-gradient(180deg, #fffefe 0%, #fffdfb 100%);
}

.sampul-isi { position: relative; z-index: 4; width: min(100%, 390px); }

.pembuka {
    margin: 0 0 20px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(22px, 6vw, 30px);
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: .01em;
    color: #786e62;
}

.nama-pasangan {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(48px, 14vw, 76px);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.045em;
    color: #a65d32;
    text-align: center;
}

.dan {
    display: block;
    margin: 5px 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: .62em;
    font-style: italic;
    font-weight: 400;
    color: #b8784e;
}

.asal-usul {
    margin: 20px auto 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: center;
}
.asal-usul p { margin: 0; font-size: 12px; line-height: 1.5; color: #9b9187; }

.garis-kuningan {
    width: 74px; height: 1px; border: 0;
    margin: 24px auto 17px;
    background: #caa36b;
    opacity: .7;
}
.tanggal-utama {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    letter-spacing: .18em;
    color: #887d71;
    text-align: center;
}

.hitung-mundur {
    display: flex; justify-content: center; gap: 10px;
    margin: 18px auto 0;
    padding-top: 14px;
    border-top: 1px solid #eee2d9;
}
.hm-kotak {
    min-width: 57px; display: flex; flex-direction: column; align-items: center;
    padding: 0 4px;
}
.hm-angka { font-family: Georgia, "Times New Roman", serif; font-size: 24px; line-height: 1; color: #9b643f; font-variant-numeric: tabular-nums; }
.hm-label { margin-top: 5px; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: #a79a8e; }

.pelat {
    max-width: 320px;
    margin: 28px auto 0;
    padding: 0;
    text-align: center;
}
.pelat-label { margin: 0 0 2px; font-size: 11px; color: #9a9187; }
.pelat-nama { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 19px; line-height: 1.35; color: #6f655b; }
.pelat-catatan { margin: 1px 0 0; font-size: 11px; color: #aaa097; }

.tombol-buka {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    margin-top: 26px;
    padding: 13px 28px;
    border-radius: 999px;
    background: #b96e38;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    letter-spacing: .02em;
    box-shadow: 0 10px 28px rgba(173,103,55,.18);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.tombol-buka:hover { transform: translateY(-2px); background: #a96031; box-shadow: 0 14px 32px rgba(173,103,55,.24); }

/* Ornamen watercolor */
.ornamen { position: absolute; pointer-events: none; background-repeat: no-repeat; background-size: contain; z-index: 1; opacity: .82; }
.ornamen-kiri { width: 330px; height: 410px; left: -108px; top: -54px; background-image: url('floral-corner.svg'); }
.ornamen-kanan { width: 330px; height: 430px; right: -126px; top: 50px; background-image: url('floral-right.svg'); opacity: .62; }
.tabur-emas { position: absolute; pointer-events: none; z-index: 2; width: 190px; height: 115px; background: url('speckles.svg') center/contain no-repeat; opacity: .45; }
.tabur-atas { right: -12px; top: 0; }
.tabur-bawah { left: -18px; bottom: 2px; transform: rotate(180deg); opacity: .28; }

/* ================= ISI ================= */
main.bingkai { position: relative; }
.bagian {
    position: relative;
    padding: 62px 0;
    text-align: center;
}
.bagian + .bagian { border-top: 1px solid var(--garis); }
.bagian-judul {
    margin: 0 0 7px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 29px;
    font-weight: 400;
    color: #a8663e;
    letter-spacing: -.01em;
}
.bagian-sub { margin: 0 auto 30px; max-width: 360px; font-size: 13.5px; line-height: 1.7; color: #9a9086; }

.bagian-kutipan { padding: 54px 0; }
.kutipan-teks { margin: 0 auto 20px; padding: 0 12px; border: 0; }
.kutipan-teks p { margin: 0 0 9px; font-family: Georgia, "Times New Roman", serif; font-size: 19px; line-height: 1.65; font-style: italic; color: #75695d; }
.kutipan-teks cite { font-size: 11px; color: #ad9f91; }
.sambutan-teks { margin: 0; font-size: 14px; color: #81766c; line-height: 1.85; }

/* Acara */
.acara {
    position: relative;
    margin: 0 0 18px;
    padding: 24px 20px 25px;
    border: 1px solid #eee0d6;
    border-radius: 22px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 12px 30px rgba(164,116,84,.07);
}
.acara-jenis { margin: 0 0 5px; font-size: 10px; text-transform: uppercase; letter-spacing: .18em; color: #c08a59; font-weight: 700; }
.acara-nama { margin: 0 0 8px; font-family: Georgia, "Times New Roman", serif; font-size: 23px; font-weight: 400; color: #786b60; }
.acara-baris { margin: 3px 0; font-size: 13.5px; color: #84796f; }
.acara-tempat { margin: 12px 0 0; font-size: 13px; line-height: 1.7; color: #9b9086; }
.acara-peta { display: inline-flex; margin-top: 15px; padding: 9px 19px; border: 1px solid #c38a59; border-radius: 999px; color: #a5663d; text-decoration: none; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.acara-peta:hover { background: #b96e38; color: #fff; }

/* Kisah */
.kisah-item { display: flex; flex-direction: column; gap: 16px; margin: 0 0 28px; padding: 0 0 28px; border-bottom: 1px solid var(--garis); }
.kisah-item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.kisah-foto { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 20px; box-shadow: 0 12px 28px rgba(125,91,70,.1); }
.kisah-teks { text-align: center; }
.kisah-waktu { margin: 0 0 5px; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: #c18a59; }
.kisah-judul { margin: 0 0 7px; font-family: Georgia, "Times New Roman", serif; font-size: 21px; font-weight: 400; color: #76695e; }
.kisah-cerita { margin: 0; font-size: 13.5px; color: #887c71; line-height: 1.8; }

/* Galeri */
.grid-galeri { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.galeri-item { display: block; aspect-ratio: 1/1.15; overflow: hidden; border-radius: 16px; cursor: zoom-in; }
.galeri-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.galeri-item:hover img { transform: scale(1.05); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(58,45,37,.94); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .25s ease; }
.lightbox.tampak { opacity: 1; }
.lightbox[hidden] { display: none; }
.lightbox-gambar { max-width: min(94vw,720px); max-height: 88vh; object-fit: contain; border-radius: 10px; transition: opacity .16s ease; }
.lightbox-gambar.memuat { opacity: 0; }
.lightbox-tutup,.lightbox-nav { position:absolute; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.45); color:#fff; cursor:pointer; border-radius:999px; display:flex; align-items:center; justify-content:center; }
.lightbox-tutup { top:20px; right:20px; width:42px; height:42px; font-size:22px; }
.lightbox-nav { top:50%; transform:translateY(-50%); width:44px; height:44px; font-size:27px; }
.lightbox-prev { left:12px; } .lightbox-next { right:12px; }
.lightbox-tutup:hover,.lightbox-nav:hover { background:#b96e38; border-color:#b96e38; }

/* Amplop */
.daftar-amplop { display:flex; flex-direction:column; gap:14px; }
.kartu-amplop { display:flex; gap:16px; align-items:center; padding:18px; border:1px solid #eee0d6; border-radius:20px; background:#fff; text-align:left; }
.amplop-qr { width:76px; height:76px; object-fit:contain; border-radius:12px; background:#fff; border:1px solid #eee0d6; flex-shrink:0; }
.amplop-bank { margin:0 0 4px; font-family:Georgia,"Times New Roman",serif; font-size:16px; color:#786b60; }
.amplop-nomor { margin:0 0 4px; font-size:14px; font-variant-numeric:tabular-nums; }
.tombol-salin-amplop { font-size:10px; padding:3px 9px; border-radius:999px; border:1px solid #c58b5c; background:transparent; color:#a5663d; cursor:pointer; }
.amplop-anama,.amplop-catatan { margin:0; font-size:12px; color:#9c9186; }

/* RSVP & ucapan */
.pesan-notifikasi { padding:12px 15px; border-radius:14px; font-size:13px; margin-bottom:18px; border:1px solid #eadbd1; background:#fff8f4; text-align:left; }
.pesan-notifikasi.pesan-success { color:#746657; border-color:#d9c3b3; }
.pesan-notifikasi.pesan-error { color:#8a5148; }
.pesan-notifikasi.pesan-warning { color:#806b3e; }
.kotak-rsvp-terisi { padding:14px 16px; margin-bottom:20px; border-radius:16px; background:#fff7f2; border:1px solid #eeddd3; text-align:left; font-size:13px; }
.kotak-rsvp-terisi p { margin:0; }
.rsvp-ubah-catatan { color:#9c9186; font-size:12px; margin-top:5px !important; }
.form-rsvp,.form-ucapan { max-width:none; margin:0; text-align:left; }
.bidang-rsvp { margin-bottom:17px; }
.bidang-rsvp label { display:block; margin-bottom:7px; font-size:11px; font-weight:700; color:#7e7166; }
.wajib-tanda { color:#bd7140; }
.bidang-rsvp input[type=text],.bidang-rsvp input[type=number],.bidang-rsvp textarea { width:100%; padding:11px 13px; font:inherit; font-size:14px; color:#766b61; background:#fff; border:1px solid #eaded6; border-radius:12px; }
.bidang-rsvp input:focus,.bidang-rsvp textarea:focus { outline:2px solid rgba(191,128,85,.16); border-color:#c58a5b; }
.pilihan-hadir { display:flex; gap:10px; flex-wrap:wrap; }
.pilihan-hadir label { display:flex; align-items:center; gap:6px; margin:0; padding:8px 10px; border:1px solid #eaded6; border-radius:999px; font-weight:500; }
.pilihan-hadir input { width:auto; margin:0; }
.tombol-kirim { width:100%; padding:13px; border:0; border-radius:999px; background:#b96e38; color:#fff; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.tombol-kirim:hover { background:#a96031; }
.daftar-ucapan { max-width:none; margin:30px 0 0; display:flex; flex-direction:column; gap:10px; }
.kartu-ucapan { padding:16px; border:1px solid #eee1d8; border-radius:16px; text-align:left; background:#fff; }
.ucapan-nama { margin:0 0 4px; font-size:12px; font-weight:700; color:#7b6e63; }
.ucapan-isi { margin:0; font-size:13px; color:#887c72; line-height:1.7; }

/* Footer */
.kaki { position:relative; padding:55px 0 70px; text-align:center; border-top:1px solid var(--garis); color:#9a8e83; font-size:12px; }
.kaki-nama { margin:0 0 5px; font-family:Georgia,"Times New Roman",serif; font-size:25px; font-weight:400; color:#a76740; }
.belum-diisi { color:#a1978d; font-size:13px; }

/* Musik */
.tombol-musik { position:fixed; right:17px; bottom:17px; z-index:900; width:46px; height:46px; border-radius:50%; border:1px solid #d6b59f; background:rgba(255,253,251,.95); color:#a5663d; box-shadow:0 6px 18px rgba(80,50,30,.12); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:18px; }
.tombol-musik.berputar { background:#b96e38; border-color:#b96e38; color:#fff; }
.tombol-musik.berputar .ikon-musik { animation:musik-putar 2.4s linear infinite; }
@keyframes musik-putar { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* Scroll reveal */
.siap-muncul { opacity:0; transform:translateY(22px); transition:opacity .75s ease,transform .75s ease; }
.siap-muncul.tampak { opacity:1; transform:translateY(0); }

.jebakan-spam { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible { outline:2px solid #c48a5a; outline-offset:2px; }

@media (max-width:420px) {
    .sampul { padding-left:20px; padding-right:20px; }
    .bingkai { padding-left:22px; padding-right:22px; }
    .ornamen-kiri { width:285px; height:355px; left:-112px; top:-45px; }
    .ornamen-kanan { width:285px; height:365px; right:-120px; top:95px; }
    .nama-pasangan { font-size:clamp(45px,14vw,64px); }
    .tanggal-utama { font-size:16px; }
    .hm-kotak { min-width:52px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    * { animation-duration:.001ms !important; transition-duration:.001ms !important; }
    .siap-muncul { opacity:1; transform:none; }
}

/* Siluet bunga sangat lembut di belakang bagian bawah sampul,
   mengikuti nuansa watercolor pada referensi. */
.sampul::after {
    content: '';
    position: absolute;
    width: 420px;
    height: 520px;
    left: -225px;
    bottom: -210px;
    background: url('floral-corner.svg') center/contain no-repeat;
    opacity: .16;
    transform: rotate(18deg);
    pointer-events: none;
    z-index: 0;
}
.kaki::after {
    content: '';
    display: block;
    width: 150px;
    height: 205px;
    margin: 24px 0 -45px auto;
    background: url('botanical.svg') bottom right/contain no-repeat;
    opacity: .72;
    pointer-events: none;
}