/* =============================================================
   TEMA FLORAL
   =============================================================

   Warna dasar: merah jambu pudar dengan hijau sage dan sentuhan
   emas mawar. Dipilih karena floral identik dengan warna hangat
   dan lembut, tetapi sage green mencegahnya jatuh ke pink permen
   yang terlalu manis.

   ELEMEN PENANDA: bingkai bunga garis tangan (line-art) yang
   mengelilingi nama pasangan dan nama tamu. Berbeda dari pelat
   berbingkai kotak pada Elegant, bingkai di sini organik —
   sulur dan kuntum digambar sebagai SVG, bukan foto atau ikon
   dari pustaka luar, supaya ringan dan bisa mewarisi warna tema.
   ============================================================= */

:root {
    --warna-utama:  #B4685A;   /* mawar terbakar, bukan pink permen */
    --warna-kedua:  #FCF6F1;   /* krem merah jambu */
    --sage:         #8A9A7E;
    --emas-mawar:   #C79A6B;
    --tinta:        #3B332F;
    --kabur:        #93857D;
    --garis:        #EDE0D8;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--warna-kedua);
    color: var(--tinta);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}


/* --- Foto latar belakang, opsional --- */

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: var(--warna-kedua);
    opacity: .88;
}

.bingkai {
    max-width: 460px;
    margin: 0 auto;
    padding: 0 22px;
}


/* --- Sampul --- */

.sampul {
    min-height: 100vh; /* cadangan untuk peramban lama */
    min-height: 100dvh; /* tinggi layar SUNGGUHAN yang terlihat,
       tidak dihitung dari kondisi address bar tersembunyi seperti
       100vh biasa -- inilah yang mencegah ruang kosong berlebih
       muncul di atas konten saat halaman baru dimuat di HP,
       ketika address bar peramban masih terlihat. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 56px 22px;
    position: relative;
    overflow: hidden;
}

/* Sulur bunga di sudut sampul, digambar lewat SVG latar. Dijaga
   samar (opacity rendah) agar tidak bersaing dengan teks. */
.sampul::before,
.sampul::after {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: .5;
    pointer-events: none;
}

.sampul::before {
    top: -20px;
    left: -30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%238A9A7E' stroke-width='2.5'%3E%3Cpath d='M20 180 Q40 100 100 70 Q140 50 170 20'/%3E%3Cpath d='M60 130 Q75 110 100 105'/%3E%3Cpath d='M90 90 Q105 75 130 68'/%3E%3C/g%3E%3Cg fill='%23B4685A'%3E%3Ccircle cx='100' cy='70' r='9'/%3E%3Ccircle cx='130' cy='68' r='6'/%3E%3Ccircle cx='60' cy='130' r='6'/%3E%3C/g%3E%3Cg fill='%23C79A6B'%3E%3Ccircle cx='170' cy='20' r='5'/%3E%3C/g%3E%3C/svg%3E");
    transform: rotate(-8deg);
}

.sampul::after {
    bottom: -25px;
    right: -30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%238A9A7E' stroke-width='2.5'%3E%3Cpath d='M180 20 Q160 100 100 130 Q60 150 30 180'/%3E%3Cpath d='M140 70 Q125 90 100 95'/%3E%3Cpath d='M110 110 Q95 125 70 132'/%3E%3C/g%3E%3Cg fill='%23B4685A'%3E%3Ccircle cx='100' cy='130' r='9'/%3E%3Ccircle cx='70' cy='132' r='6'/%3E%3Ccircle cx='140' cy='70' r='6'/%3E%3C/g%3E%3Cg fill='%23C79A6B'%3E%3Ccircle cx='30' cy='180' r='5'/%3E%3C/g%3E%3C/svg%3E");
    transform: rotate(-8deg);
}

.sampul > * { position: relative; z-index: 1; }

.pembuka {
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--sage);
    margin: 0 0 26px;
    font-weight: 600;
}

.nama-pasangan {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: clamp(38px, 12vw, 58px);
    font-weight: 600;
    line-height: 1.12;
    color: var(--warna-utama);
    margin: 0;
}

.dan {
    display: block;
    font-size: .46em;
    font-style: normal;
    color: var(--emas-mawar);
    margin: 6px 0;
}

.asal-usul {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.asal-usul p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--kabur);
    font-weight: 400;
}

.garis-kuningan {
    width: 0;
    height: 0;
    margin: 26px auto;
    border: 0;
    position: relative;
}

.garis-kuningan::before {
    content: '❀';
    color: var(--sage);
    font-size: 18px;
}

.tanggal-utama {
    font-size: 15px;
    letter-spacing: .05em;
    color: var(--kabur);
    margin: 0;
}


/* --- Hitung mundur --- */

.hitung-mundur {
    display: flex;
    gap: 8px;
    margin: 22px 0 0;
    justify-content: center;
}

.hm-kotak {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 54px;
    padding: 10px 4px;
    border: 1px solid var(--garis);
    border-radius: 12px 4px 12px 4px;
    background: rgba(255, 255, 255, .5);
}

.hm-angka {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 25px;
    font-weight: 600;
    color: var(--warna-utama);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.hm-label {
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--kabur);
    margin-top: 4px;
}


/* --- Bingkai bunga: penanda tema ini --- */

.pelat {
    margin: 34px auto 0;
    padding: 26px 22px 22px;
    max-width: 300px;
    position: relative;
}

/* Empat sudut bingkai, masing-masing satu sulur kecil, memberi
   kesan dibingkai bunga tanpa memuat gambar utuh yang berat. */
.pelat::before,
.pelat::after {
    content: '';
    position: absolute;
    width: 46px;
    height: 46px;
    background-repeat: no-repeat;
    background-size: contain;
}

.pelat::before {
    top: -6px;
    left: -6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M4 4 Q20 10 26 26' fill='none' stroke='%238A9A7E' stroke-width='2'/%3E%3Ccircle cx='26' cy='26' r='4.5' fill='%23B4685A'/%3E%3Ccircle cx='14' cy='10' r='3' fill='%23C79A6B'/%3E%3C/svg%3E");
}

.pelat::after {
    bottom: -6px;
    right: -6px;
    transform: rotate(180deg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M4 4 Q20 10 26 26' fill='none' stroke='%238A9A7E' stroke-width='2'/%3E%3Ccircle cx='26' cy='26' r='4.5' fill='%23B4685A'/%3E%3Ccircle cx='14' cy='10' r='3' fill='%23C79A6B'/%3E%3C/svg%3E");
}

.pelat-label {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--sage);
    margin: 0 0 6px;
    font-weight: 600;
}

.pelat-nama {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 23px;
    font-weight: 600;
    color: var(--tinta);
    margin: 0;
    line-height: 1.3;
}

.pelat-catatan {
    font-size: 12.5px;
    color: var(--kabur);
    margin: 8px 0 0;
}


/* --- Bagian isi --- */

.bagian {
    padding: 56px 0;
    border-top: 1px dashed var(--garis);
    text-align: center;
}

.bagian-judul {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 28px;
    font-weight: 600;
    color: var(--warna-utama);
    margin: 0 0 6px;
}

.bagian-sub {
    font-size: 13.5px;
    color: var(--kabur);
    margin: 0 0 30px;
}


/* --- Acara --- */

.acara {
    border: 1px solid var(--garis);
    border-radius: 14px 4px 14px 4px;
    padding: 24px 22px;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, .55);
}

.acara-jenis {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--emas-mawar);
    margin: 0 0 8px;
    font-weight: 600;
}

.acara-nama {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 10px;
}

.acara-baris { font-size: 14.5px; margin: 3px 0; }
.acara-tempat { color: var(--kabur); font-size: 14px; margin: 10px 0 0; }

.acara-peta {
    display: inline-block;
    margin-top: 14px;
    padding: 8px 18px;
    border: 1px solid var(--warna-utama);
    border-radius: 99px;
    color: var(--warna-utama);
    text-decoration: none;
    font-size: 13px;
    letter-spacing: .04em;
}

.acara-peta:hover { background: var(--warna-utama); color: #fff; }


/* --- Galeri --- */

.bagian-galeri { padding-bottom: 44px; }

.grid-galeri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }

.galeri-item {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 10px 2px 10px 2px;
    cursor: zoom-in;
}

.galeri-item:nth-child(6n+1) { grid-column: span 2; grid-row: span 2; }

@supports not (aspect-ratio: 1 / 1) {
    .galeri-item { height: 110px; }
    .galeri-item:nth-child(6n+1) { height: 226px; }
}

.galeri-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.galeri-item:hover img { transform: scale(1.04); }


/* --- Lightbox --- */

.lightbox {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(59, 51, 47, .94);
    display: flex; align-items: center; justify-content: center; padding: 20px;
    opacity: 0;
    transition: opacity .22s ease;
}
.lightbox.tampak { opacity: 1; }
.lightbox[hidden] { display: none; }
.lightbox-gambar {
    max-width: min(94vw, 720px); max-height: 88vh; object-fit: contain; border-radius: 6px;
    transform: scale(.96);
    transition: transform .22s ease, opacity .18s ease;
}
.lightbox.tampak .lightbox-gambar { transform: scale(1); }
.lightbox-gambar.memuat { opacity: 0; }
.lightbox-tutup, .lightbox-nav {
    position: absolute; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
    color: #fff; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1;
}
.lightbox-tutup { top: 16px; right: 16px; width: 38px; height: 38px; font-size: 22px; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; font-size: 26px; }
.lightbox-prev { left: 10px; } .lightbox-next { right: 10px; }
.lightbox-tutup:hover, .lightbox-nav:hover { background: rgba(255,255,255,.22); }


/* --- Kisah Kami --- */

.bagian-kisah { padding-bottom: 44px; }
.garis-waktu { display: flex; flex-direction: column; gap: 28px; text-align: left; }

.kisah-item {
    display: flex; flex-direction: column; gap: 14px;
    border: 1px solid var(--garis); border-radius: 16px 4px 16px 4px;
    overflow: hidden; background: rgba(255,255,255,.55);
}

.kisah-foto { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; }

@supports not (aspect-ratio: 16/10) { .kisah-foto { height: 200px; } }

.kisah-teks { padding: 4px 20px 20px; }
.kisah-item:not(:has(.kisah-foto)) .kisah-teks { padding-top: 20px; }

.kisah-waktu {
    font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--emas-mawar); margin: 0 0 6px; font-weight: 600;
}
.kisah-judul {
    font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic;
    font-size: 22px; font-weight: 600; margin: 0 0 8px;
}
.kisah-cerita { font-size: 14.5px; color: var(--tinta); margin: 0; line-height: 1.75; }


/* --- Tombol musik --- */

.tombol-musik {
    position: fixed; right: 18px; bottom: 18px; z-index: 900;
    width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid var(--garis); background: var(--warna-kedua); color: var(--warna-utama);
    box-shadow: 0 6px 18px rgba(180,104,90,.18); cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.tombol-musik.berputar .ikon-musik { animation: musik-putar 2.4s linear infinite; }
@keyframes musik-putar { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }


/* --- Amplop Digital --- */

.bagian-amplop { padding-bottom: 44px; }
.daftar-amplop { display: flex; flex-direction: column; gap: 14px; }

.kartu-amplop {
    display: flex; gap: 16px; align-items: center;
    border: 1px solid var(--garis); border-radius: 14px 4px 14px 4px;
    padding: 16px; background: rgba(255,255,255,.55); text-align: left;
}
.amplop-qr { width: 84px; height: 84px; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid var(--garis); flex-shrink: 0; }
.amplop-bank { font-weight: 600; font-size: 15px; margin: 0 0 4px; }
.amplop-nomor { font-variant-numeric: tabular-nums; font-size: 15px; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.tombol-salin-amplop { font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 99px; border: 1px solid var(--warna-utama); background: transparent; color: var(--warna-utama); cursor: pointer; }
.amplop-anama, .amplop-catatan { font-size: 13px; color: var(--kabur); margin: 0; }


/* --- Formulir RSVP & Ucapan --- */

.bagian-rsvp, .bagian-ucapan { padding-bottom: 44px; }

.pesan-notifikasi { padding: 11px 16px; border-radius: 10px; font-size: 14px; margin-bottom: 18px; text-align: left; }
.pesan-notifikasi.pesan-success { background: #EEF3EA; color: #5C6E4F; }
.pesan-notifikasi.pesan-error   { background: #FBEDEA; color: #A8443C; }
.pesan-notifikasi.pesan-warning { background: #FBF6E9; color: #8A6516; }

.kotak-rsvp-terisi {
    background: rgba(255,255,255,.6); border: 1px solid var(--garis); border-radius: 12px;
    padding: 14px 16px; margin-bottom: 20px; text-align: left; font-size: 14px;
}
.kotak-rsvp-terisi p { margin: 0; }
.rsvp-ubah-catatan { color: var(--kabur); font-size: 12.5px; margin-top: 4px !important; }

.form-rsvp, .form-ucapan { text-align: left; max-width: 380px; margin: 0 auto; }
.bidang-rsvp { margin-bottom: 16px; }
.bidang-rsvp label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--tinta); }
.wajib-tanda { color: #A8443C; font-weight: 400; }

.bidang-rsvp input[type="text"], .bidang-rsvp input[type="number"], .bidang-rsvp textarea {
    width: 100%; padding: 10px 12px; font-family: inherit; font-size: 14.5px;
    color: var(--tinta); background: #fff; border: 1px solid var(--garis); border-radius: 10px;
}
.bidang-rsvp input:focus, .bidang-rsvp textarea:focus { outline: none; border-color: var(--warna-utama); }

.pilihan-hadir { display: flex; gap: 16px; flex-wrap: wrap; padding: 4px 0; }
.pilihan-hadir label { display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: 14px; margin: 0; }
.pilihan-hadir input { width: auto; margin: 0; }

.tombol-kirim {
    width: 100%; padding: 12px; border: 0; border-radius: 99px;
    background: var(--warna-utama); color: #fff; font-family: inherit;
    font-size: 14.5px; font-weight: 600; letter-spacing: .02em; cursor: pointer;
}
.tombol-kirim:hover { opacity: .92; }

.daftar-ucapan { max-width: 380px; margin: 28px auto 0; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.kartu-ucapan { border-left: 2px solid var(--emas-mawar); padding: 4px 0 4px 14px; }
.ucapan-nama { font-weight: 600; font-size: 13.5px; margin: 0 0 3px; }
.ucapan-isi { font-size: 13.5px; color: var(--tinta); margin: 0; line-height: 1.6; }


/* --- Kaki --- */

.kaki { padding: 44px 0 54px; text-align: center; border-top: 1px dashed var(--garis); color: var(--kabur); font-size: 13px; }
.kaki-nama { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 22px; color: var(--warna-utama); margin: 0 0 6px; }

.belum-diisi { color: var(--kabur); font-size: 14px; font-style: italic; }


/* --- Kutipan & Sambutan --- */

.bagian-kutipan {
    padding: 46px 0;
    text-align: center;
    border-bottom: 1px dashed var(--garis);
}

.kutipan-teks { margin: 0 0 22px; padding: 0; }

.kutipan-teks p {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 18px;
    line-height: 1.7;
    color: var(--warna-utama);
    margin: 0 0 10px;
}

.kutipan-teks cite {
    display: block;
    font-style: normal;
    font-size: 12px;
    color: var(--kabur);
}

.sambutan-teks {
    font-size: 14px;
    line-height: 1.75;
    color: var(--tinta);
    margin: 0 auto;
    max-width: 360px;
}

a:focus-visible { outline: 2px solid var(--emas-mawar); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}


/* =============================================================
   TRANSISI ANTAR BAGIAN
   =============================================================

   Setiap bagian undangan muncul perlahan (pudar + naik sedikit)
   saat mulai terlihat di layar, bukan langsung terpasang kaku
   begitu halaman dimuat. Elemen diberi kelas .siap-muncul oleh
   PHP di setiap bagian; kelas .tampak ditambahkan JavaScript
   tepat saat bagian itu masuk area pandang tamu.

   Sengaja tidak diterapkan pada .sampul: bagian pertama yang
   dilihat tamu harus langsung utuh, bukan ikut memudar masuk
   dan membuat kesan halaman "belum siap".
   ============================================================= */

.siap-muncul {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s ease, transform .7s ease;
}

.siap-muncul.tampak {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .siap-muncul {
        opacity: 1;
        transform: none;
        transition: none;
    }
}



/* =============================================================
   JEBAKAN SPAM
   =============================================================

   Disembunyikan lewat posisi di luar layar dan ukuran nol, BUKAN
   display:none. Sebagian bot pengisi form otomatis memeriksa
   properti display sebelum memutuskan mengisi sebuah kolom;
   teknik posisi ini tidak mengubah display sama sekali sehingga
   tetap "terlihat" bagi pemeriksaan sederhana semacam itu, padahal
   secara visual maupun lewat keyboard sepenuhnya tidak terjangkau
   pengguna sungguhan.
   ============================================================= */

.jebakan-spam {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}



/* =============================================================
   FLORAL SIGNATURE UPGRADE
   ============================================================= */

:root{
    --warna-utama:#A6523E;
    --warna-kedua:#F7EFE8;
    --sage:#71866D;
    --emas-mawar:#C99B62;
    --tinta:#3A2F2A;
    --kabur:#7F7067;
    --garis:#E7D8CC;
    --cream:#FFFDF9;
}

html{scroll-behavior:smooth;}
body{
    background:
        radial-gradient(circle at 12% 10%, rgba(201,155,98,.08), transparent 26%),
        radial-gradient(circle at 88% 78%, rgba(113,134,109,.10), transparent 28%),
        var(--warna-kedua);
    overflow-x:hidden;
}
body::selection{background:rgba(166,82,62,.18);}
.sampul,.bagian,.kaki{max-width:460px;margin-left:auto;margin-right:auto;}
main.bingkai{position:relative;z-index:2;}
.sampul{z-index:2; isolation:isolate; padding:56px 22px 74px; min-height:100dvh;}
.sampul::before{
    width:250px;height:250px;top:-70px;left:-75px;opacity:.3;
    filter:drop-shadow(0 8px 20px rgba(166,82,62,.08));
}
.sampul::after{
    width:230px;height:230px;bottom:-80px;right:-65px;opacity:.32;
}
.sampul > *{z-index:3;}

.label-estetik{
    display:flex;align-items:center;justify-content:center;gap:10px;
    font-size:10px;letter-spacing:.34em;color:var(--sage);
    text-transform:uppercase;font-weight:700;margin:0 0 16px;
}
.label-estetik span{width:28px;height:1px;background:var(--emas-mawar);opacity:.75;}
.pembuka{font-size:11px;letter-spacing:.28em;color:var(--emas-mawar);margin-bottom:18px;}

.foto-sampul-wrap{
    width:min(78vw,280px);aspect-ratio:4/5;position:relative;
    margin:10px auto 24px;display:grid;place-items:center;
}
.foto-sampul-ring{
    position:absolute;inset:-10px;border:1px solid rgba(199,154,107,.7);
    border-radius:38% 38% 42% 42% / 28% 28% 52% 52%;
    transform:rotate(-2deg);
    box-shadow:0 0 0 7px rgba(255,253,249,.85),0 18px 40px rgba(77,48,36,.10);
}
.foto-sampul-ring::before,.foto-sampul-ring::after{
    content:"✿";position:absolute;color:var(--sage);font-size:20px;
    text-shadow:0 3px 10px rgba(113,134,109,.2);
}
.foto-sampul-ring::before{left:-10px;top:32%;}
.foto-sampul-ring::after{right:-10px;bottom:30%;transform:rotate(180deg);}
.foto-sampul{
    width:100%;height:100%;object-fit:cover;border-radius:38% 38% 42% 42% / 28% 28% 52% 52%;
    display:block;border:7px solid var(--cream);
    box-shadow:0 18px 48px rgba(82,52,42,.18);
}
.nama-pasangan{
    font-size:clamp(46px,13vw,62px);
    letter-spacing:-.02em;color:var(--warna-utama);
    text-shadow:0 2px 0 rgba(255,255,255,.75);
    margin:10px 0 8px;
}
.dan{color:var(--emas-mawar);margin:2px 0;}
.asal-usul-grid{
    display:grid !important;grid-template-columns:1fr 1fr;gap:0;
    max-width:420px;margin:16px auto 0;
}
.asal-usul-grid p{padding:0 14px;position:relative;}
.asal-usul-grid p:first-child::after{
    content:"";position:absolute;right:0;top:8px;bottom:8px;width:1px;background:var(--garis);
}
.asal-usul p{font-size:12.5px;color:var(--tinta);}
.asal-usul p::first-line{font-weight:700;color:var(--warna-utama);}
.garis-kuningan{margin:22px auto 18px;}
.garis-kuningan::before{color:var(--emas-mawar);}

.tanggal-utama{
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:18px;letter-spacing:.08em;color:var(--tinta);
}
.hitung-mundur{gap:7px;margin-top:16px;}
.hm-kotak{
    min-width:62px;padding:11px 4px;border-radius:18px 6px 18px 6px;
    background:rgba(255,253,249,.78);border-color:rgba(199,154,107,.35);
    box-shadow:0 5px 18px rgba(90,54,44,.06);
}
.hm-angka{font-size:28px;color:var(--warna-utama);}
.hm-label{color:var(--sage);font-weight:700;}

.pelat{
    margin-top:28px;padding:18px 18px 16px;max-width:320px;
    border:1px solid var(--garis);border-radius:24px;
    background:rgba(255,253,249,.72);box-shadow:0 12px 30px rgba(76,51,42,.07);
}
.pelat-label{color:var(--sage);}
.pelat-nama{color:var(--warna-utama);}
.bagian{
    padding:62px 22px;border-top:0;position:relative;
}
.bagian::before{
    content:"";position:absolute;left:22px;right:22px;top:0;height:1px;
    background:linear-gradient(90deg,transparent,var(--garis),transparent);
}
.bagian::after{
    content:"✿";position:absolute;top:-12px;left:50%;transform:translateX(-50%);
    width:28px;height:28px;display:grid;place-items:center;background:var(--warna-kedua);
    color:var(--emas-mawar);font-size:15px;
}
.bagian-judul{font-size:34px;color:var(--warna-utama);font-style:italic;margin-bottom:4px;}
.bagian-sub{max-width:330px;margin:0 auto 28px;color:var(--kabur);}

.acara{
    padding:28px 22px;border-radius:22px 8px 22px 8px;
    background:rgba(255,253,249,.82);border:1px solid rgba(199,154,107,.28);
    box-shadow:0 14px 34px rgba(77,48,36,.07);
}
.acara + .acara{margin-top:18px;}
.acara-jenis{color:var(--emas-mawar);font-size:10.5px;letter-spacing:.22em;}
.acara-nama{font-size:28px;color:var(--warna-utama);}
.acara-baris{font-size:14.5px;color:var(--tinta);}
.acara-tempat{color:var(--kabur);}
.acara-peta{
    background:var(--warna-utama);color:#fff;border-color:var(--warna-utama);
    box-shadow:0 8px 18px rgba(166,82,62,.18);
}
.acara-peta:hover{background:#8E4333;}

.garis-waktu{gap:26px;}
.kisah-item{
    border:1px solid rgba(199,154,107,.28);
    border-radius:24px 8px 24px 8px;background:rgba(255,253,249,.85);
    box-shadow:0 14px 34px rgba(77,48,36,.07);
}
.kisah-foto{aspect-ratio:4/3;}
.kisah-teks{padding:8px 20px 24px;}
.kisah-waktu{color:var(--emas-mawar);}
.kisah-judul{font-size:26px;color:var(--warna-utama);}
.kisah-cerita{color:var(--tinta);}

.grid-galeri{
    grid-template-columns:repeat(2,1fr);gap:10px;
}
.galeri-item{border-radius:18px 5px 18px 5px;}
.galeri-item:nth-child(6n+1){grid-column:span 2;grid-row:span 1;aspect-ratio:16/10;}
.galeri-item img{filter:saturate(.92) contrast(.98);}

.kartu-amplop{
    border-radius:20px 7px 20px 7px;background:rgba(255,253,249,.85);
    border-color:rgba(199,154,107,.28);box-shadow:0 12px 28px rgba(77,48,36,.06);
}
.tombol-salin-amplop{color:var(--warna-utama);border-color:var(--warna-utama);}

.form-rsvp,.form-ucapan{max-width:390px;}
.bidang-rsvp input[type="text"],.bidang-rsvp input[type="number"],.bidang-rsvp textarea{
    background:rgba(255,253,249,.92);border-color:var(--garis);border-radius:14px;
}
.tombol-kirim{background:var(--warna-utama);border-radius:16px;box-shadow:0 10px 22px rgba(166,82,62,.18);}
.kartu-ucapan{border-left-color:var(--emas-mawar);}

.tombol-musik{
    right:max(16px, calc((100vw - 460px)/2 + 16px));
    bottom:84px;width:50px;height:50px;
    background:rgba(255,253,249,.94);color:var(--warna-utama);
    border-color:rgba(199,154,107,.65);
    box-shadow:0 10px 24px rgba(65,43,35,.14);
    z-index:950;
}

.kaki{padding-bottom:120px;}
.kaki-nama{color:var(--warna-utama);}

.navigasi-bawah{
    position:fixed;left:50%;bottom:0;transform:translateX(-50%);
    width:min(460px,100vw);z-index:940;
    display:grid;grid-template-columns:repeat(5,1fr);
    background:rgba(255,253,249,.96);backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-top:1px solid rgba(199,154,107,.35);
    box-shadow:0 -10px 28px rgba(77,48,36,.08);
    padding:8px max(8px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom));
}
.nav-item{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    min-width:0;gap:3px;text-decoration:none;color:var(--kabur);
    padding:7px 3px;border-radius:14px;transition:.25s ease;
}
.nav-item span{font-size:19px;line-height:1;color:var(--sage);}
.nav-item small{font-size:9.5px;letter-spacing:.03em;}
.nav-item:hover,.nav-item:focus{color:var(--warna-utama);background:rgba(199,154,107,.10);}
.nav-item:active{transform:translateY(1px);}

/* Kelopak bunga ringan: bergerak di belakang UI tanpa menutupi interaksi. */
.kelopak-hujan{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.kelopak{position:absolute;top:-8vh;width:12px;height:18px;border-radius:70% 30% 70% 30%;
    background:linear-gradient(135deg,rgba(198,149,104,.55),rgba(166,82,62,.30));
    filter:blur(.2px);opacity:.65;animation:jatuh-bunga linear infinite;
}
.kelopak:nth-child(3n){background:linear-gradient(135deg,rgba(142,158,132,.55),rgba(113,134,109,.22));}
.k1{left:8%;animation-duration:13s;animation-delay:-3s;transform:rotate(20deg) scale(.8);}
.k2{left:19%;animation-duration:17s;animation-delay:-9s;transform:rotate(-12deg) scale(.65);}
.k3{left:33%;animation-duration:15s;animation-delay:-5s;transform:rotate(34deg) scale(.72);}
.k4{left:48%;animation-duration:19s;animation-delay:-12s;transform:rotate(-24deg) scale(.9);}
.k5{left:62%;animation-duration:14s;animation-delay:-7s;transform:rotate(18deg) scale(.7);}
.k6{left:74%;animation-duration:18s;animation-delay:-14s;transform:rotate(-18deg) scale(.82);}
.k7{left:86%;animation-duration:16s;animation-delay:-4s;transform:rotate(24deg) scale(.68);}
.k8{left:28%;animation-duration:21s;animation-delay:-17s;transform:rotate(-30deg) scale(.6);}
.k9{left:55%;animation-duration:20s;animation-delay:-10s;transform:rotate(12deg) scale(.72);}
.k10{left:94%;animation-duration:23s;animation-delay:-18s;transform:rotate(-28deg) scale(.55);}
@keyframes jatuh-bunga{
    0%{transform:translate3d(0,-12vh,0) rotate(0deg);}
    45%{transform:translate3d(28px,48vh,0) rotate(160deg);}
    100%{transform:translate3d(-26px,115vh,0) rotate(330deg);}
}

.siap-muncul{
    opacity:1;transform:none;
    animation:naik-lembut .8s cubic-bezier(.22,1,.36,1) both;
}
@keyframes naik-lembut{from{opacity:.2;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (max-width:700px){
    .asal-usul-grid{max-width:100%;}
    .sampul{padding-left:18px;padding-right:18px;}
}
@media (prefers-reduced-motion:reduce){
    .kelopak{animation:none!important;display:none;}
    .siap-muncul{animation:none!important;}
}

/* =============================================================
   FLORAL BLOOM DELUXE — DARK EDITION
   ============================================================= */
:root{
    --warna-utama:#E3A58B;
    --warna-kedua:#171316;
    --sage:#A7B49A;
    --emas-mawar:#D7B277;
    --tinta:#F4ECE7;
    --kabur:#C4B3AC;
    --garis:#4A3D3F;
    --cream:#211A1D;
}
html{background:#120F11;}
body{
    background:
      radial-gradient(circle at 18% 8%,rgba(215,178,119,.10),transparent 24%),
      radial-gradient(circle at 84% 76%,rgba(167,180,154,.10),transparent 28%),
      linear-gradient(180deg,#151216 0%,#1B1518 46%,#120F11 100%);
    color:var(--tinta);
}
body.punya-latar::before{background-size:cover;background-position:center;filter:saturate(.65) brightness(.34) contrast(1.08);}
body.punya-latar::after{background:linear-gradient(180deg,rgba(18,15,17,.68),rgba(18,15,17,.82));opacity:1;}
.bingkai{max-width:460px;}
.sampul{padding:52px 22px 84px;background:linear-gradient(180deg,rgba(20,16,19,.35),rgba(20,16,19,.08));}
.sampul::before,.sampul::after{opacity:.55;filter:brightness(1.15) saturate(.7);}
.sampul::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23A7B49A' stroke-width='2.5'%3E%3Cpath d='M20 180 Q40 100 100 70 Q140 50 170 20'/%3E%3Cpath d='M60 130 Q75 110 100 105'/%3E%3Cpath d='M90 90 Q105 75 130 68'/%3E%3C/g%3E%3Cg fill='%23D7B277'%3E%3Ccircle cx='100' cy='70' r='9'/%3E%3Ccircle cx='130' cy='68' r='6'/%3E%3Ccircle cx='60' cy='130' r='6'/%3E%3C/g%3E%3Cg fill='%23E3A58B'%3E%3Ccircle cx='170' cy='20' r='5'/%3E%3C/g%3E%3C/svg%3E");}
.sampul::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23A7B49A' stroke-width='2.5'%3E%3Cpath d='M180 20 Q160 100 100 130 Q60 150 30 180'/%3E%3Cpath d='M140 70 Q125 90 100 95'/%3E%3Cpath d='M110 110 Q95 125 70 132'/%3E%3C/g%3E%3Cg fill='%23D7B277'%3E%3Ccircle cx='100' cy='130' r='9'/%3E%3Ccircle cx='70' cy='132' r='6'/%3E%3Ccircle cx='140' cy='70' r='6'/%3E%3C/g%3E%3Cg fill='%23E3A58B'%3E%3Ccircle cx='30' cy='180' r='5'/%3E%3C/g%3E%3C/svg%3E");}
.pembuka,.label-estetik{color:var(--emas-mawar);}
.foto-sampul-wrap{margin:12px auto 30px;}
.foto-sampul-ring{border-color:rgba(215,178,119,.95);box-shadow:0 0 0 7px rgba(27,21,24,.92),0 18px 55px rgba(0,0,0,.34);}
.foto-sampul{border-color:#2B2326;box-shadow:0 16px 44px rgba(0,0,0,.38);}
.nama-pasangan{color:#F0D5A8;text-shadow:0 2px 14px rgba(0,0,0,.35);}
.dan{color:#E3A58B;}
.asal-usul-grid p{color:var(--tinta);}
.asal-usul-grid p:first-child::after{background:var(--garis);}
.asal-usul p{color:#EFE5E0;}
.asal-usul p::first-line{color:#EBCB96;}
.garis-kuningan{border-color:var(--garis);}
.garis-kuningan::before{color:var(--emas-mawar);}
.tanggal-utama{color:#F2E9E5;}
.hm-kotak{background:rgba(34,27,30,.92);border-color:#6A564A;box-shadow:0 8px 24px rgba(0,0,0,.28);}
.hm-angka{color:#E8C98F;}
.hm-label{color:#BFC9B5;}
.pelat{background:rgba(33,26,29,.9);border-color:#5A494A;box-shadow:0 12px 30px rgba(0,0,0,.25);}
.pelat-label{color:#B9C6AE;}
.pelat-nama{color:#E5C68C;}
.pelat-catatan{color:#C8B9B2;}
.bagian{background:linear-gradient(180deg,rgba(29,23,26,.9),rgba(22,18,20,.95));}
.bagian::before{background:linear-gradient(90deg,transparent,#4D4143,transparent);}
.bagian::after{background:#1B1518;color:#D7B277;}
.bagian-judul{color:#E4C68E;}
.bagian-sub{color:#BEAEA7;}
.kutipan-teks{color:#E8D9D2;}
.kutipan-teks p{color:#EBDDD7;}
.kutipan-teks cite{color:#D5B67F;}
.sambutan-teks{color:#D3C4BE;}
.acara{background:rgba(35,28,31,.94);border-color:#4E4244;box-shadow:0 14px 34px rgba(0,0,0,.30);}
.acara-jenis{color:#D7B277;}
.acara-nama{color:#E8C98F;}
.acara-baris{color:#EFE5E0;}
.acara-tempat{color:#C9B9B1;}
.acara-peta{background:#C58A61;color:#171214;border-color:#D9AD79;box-shadow:0 8px 20px rgba(197,138,97,.24);}
.acara-peta:hover{background:#D39A6B;}
.kisah-item{background:rgba(35,28,31,.96);border-color:#4E4244;box-shadow:0 14px 34px rgba(0,0,0,.3);}
.kisah-teks,.kisah-cerita{color:#D9CBC5;}
.kisah-waktu{color:#D7B277;}
.kisah-judul{color:#E8C98F;}
.kartu-amplop{background:rgba(35,28,31,.96);border-color:#4E4244;box-shadow:0 12px 28px rgba(0,0,0,.28);}
.tombol-salin-amplop{color:#E8C98F;border-color:#B99863;}
.bidang-rsvp input[type="text"],.bidang-rsvp input[type="number"],.bidang-rsvp textarea{background:#261F22;border-color:#55474A;color:#F4ECE7;}
.bidang-rsvp input::placeholder,.bidang-rsvp textarea::placeholder{color:#9E8D86;}
.tombol-kirim{background:#D29A67;color:#171214;box-shadow:0 10px 24px rgba(210,154,103,.20);}
.kartu-ucapan{background:#271F22;border-left-color:#D7B277;}
.kartu-ucapan strong,.kartu-ucapan p,.kartu-ucapan small{color:#E5D8D2;}
.tombol-musik{background:rgba(30,24,27,.94);color:#E7C68D;border-color:#B99761;box-shadow:0 10px 24px rgba(0,0,0,.35);}
.kaki{background:#141012;color:#D9CBC4;}
.kaki-nama{color:#E5C58B;}
.navigasi-bawah{background:rgba(20,16,18,.97);border-top-color:#5C4B3C;box-shadow:0 -12px 28px rgba(0,0,0,.28);}
.nav-item{color:#AA9B94;}
.nav-item span{color:#D6B36F;}
.nav-item:hover,.nav-item:focus{color:#F0D8AB;background:rgba(215,178,119,.10);}
.nav-item small{color:inherit;}
.kelopak-hujan{z-index:1;}
.kelopak{background:linear-gradient(135deg,rgba(240,199,139,.88),rgba(199,128,103,.42));box-shadow:0 0 10px rgba(240,199,139,.15);}
.kelopak:nth-child(3n){background:linear-gradient(135deg,rgba(210,223,195,.75),rgba(129,150,118,.26));}

@media (min-width:701px){
 body{background-color:#0F0C0E;}
 .sampul,.bagian,.kaki{box-shadow:0 0 0 1px rgba(215,178,119,.08);}
}