/* =============================================================
   TEMA MODERN
   =============================================================

   Warna dasar: nyaris hitam-putih dengan satu aksen terakota.
   Ini satu-satunya tema di antara lima yang TIDAK memakai huruf
   serif untuk judul — sans-serif tebal dipakai untuk kesan
   editorial, bukan formal-tradisional seperti keempat tema lain.

   ELEMEN PENANDA: tipografi raksasa. Nama pasangan dipecah ke
   beberapa baris dengan ukuran huruf sangat besar dan rapat,
   menempati hampir seluruh lebar layar — gaya sampul majalah,
   bukan kartu undangan konvensional. Elemen dekoratif nyaris
   ditiadakan; ruang kosong dan tipografi sendiri yang berbicara.
   ============================================================= */

:root {
    --warna-utama:  #1A1A1A;
    --warna-kedua:  #FAFAF8;
    --aksen:        #C1502E;   /* terakota, satu-satunya warna */
    --tinta:        #1A1A1A;
    --kabur:        #767370;
    --garis:        #E4E2DD;
}

* { 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;
}

body.amplop-tertutup { overflow: hidden; height: 100vh; height: 100dvh; }


/* --- Layar amplop --- */
/* Tanpa ikon amplop bergambar sama sekali -- konsisten dengan
   identitas Modern yang menolak elemen dekoratif. Tipografi besar
   dan rata kiri sendiri yang jadi penanda, sama seperti nama
   pasangan di sampul. Transisi hanya pudar, tanpa efek membesar,
   sama seperti perlakuan lightbox tema ini. */

.layar-amplop {
    position: fixed; inset: 0; z-index: 2000;
    background: var(--warna-kedua);
    display: flex; align-items: center; justify-content: center; padding: 24px;
    transition: opacity .35s linear;
}
.layar-amplop.membuka { opacity: 0; pointer-events: none; }

.amplop-svg { display: none; }

.amplop-isi {
    text-align: left; max-width: 320px;
    transition: opacity .3s linear;
}
.layar-amplop.membuka .amplop-isi { opacity: 0; }

.amplop-label {
    font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--aksen); margin: 0 0 8px; font-weight: 700;
}
.amplop-nama-tamu {
    font-family: inherit;
    font-size: 22px; font-weight: 800; color: var(--tinta); margin: 0 0 28px;
}
.amplop-judul {
    font-family: inherit;
    font-size: 30px; font-weight: 800; color: var(--tinta);
    margin: 0 0 32px; line-height: 1.15; letter-spacing: -.02em;
}

.tombol-buka-amplop {
    display: inline-block; padding: 13px 30px;
    background: var(--tinta); color: #fff;
    border: 0; border-radius: 0;
    font-family: inherit;
    font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    cursor: pointer;
}
.tombol-buka-amplop:hover { background: var(--aksen); }

@media (prefers-reduced-motion: reduce) {
    .layar-amplop, .amplop-isi { transition: none; }
}


/* --- 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: 480px; margin: 0 auto; padding: 0 22px; }


/* --- Sampul: tipografi raksasa, penanda tema ini --- */

.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;
    justify-content: center;
    padding: 64px 22px;
    text-align: left;
}

.pembuka {
    font-size: 12px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--aksen);
    margin: 0 0 20px;
    font-weight: 700;
}

/* Nama pasangan sengaja BUKAN serif, BUKAN dipusatkan, dan
   berukuran nyaris memenuhi layar. Ini yang membedakan Modern
   dari keempat tema lain secara langsung terlihat, tanpa perlu
   membaca warnanya dulu. */
.nama-pasangan {
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(52px, 16vw, 84px);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -.03em;
    color: var(--tinta);
    margin: 0;
    text-align: left;
}

.dan {
    display: block;
    font-size: .5em;
    font-weight: 400;
    font-style: italic;
    color: var(--aksen);
    margin: 4px 0;
}

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

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

.garis-kuningan {
    width: 100%;
    height: 1px;
    background: var(--tinta);
    border: 0;
    margin: 32px 0 22px;
}

.tanggal-utama {
    font-size: 14px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--kabur);
    margin: 0;
    text-align: left;
}


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

.hitung-mundur {
    display: flex;
    gap: 0;
    margin: 26px 0 0;
    justify-content: flex-start;
    border-top: 1px solid var(--tinta);
    padding-top: 16px;
}

.hm-kotak {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 64px;
    padding: 0 16px 0 0;
}

.hm-angka {
    font-family: inherit;
    font-size: 30px;
    font-weight: 800;
    color: var(--tinta);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.hm-label {
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--aksen);
    margin-top: 5px;
    font-weight: 700;
}


/* --- Pelat nama tamu --- */

.pelat {
    margin: 30px 0 0;
    padding: 18px 0 0;
    max-width: none;
    border-top: 1px solid var(--garis);
    text-align: left;
}

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

.pelat-nama {
    font-family: inherit;
    font-size: 21px;
    font-weight: 700;
    color: var(--tinta);
    margin: 0;
    line-height: 1.3;
}

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

.kotak-qr { margin-top: 22px; text-align: left; }
.kotak-qr img { width: 110px; height: 110px; padding: 8px; background: #fff; border: 1px solid var(--garis); }
.qr-keterangan { font-size: 11px; color: var(--kabur); margin: 8px 0 0; max-width: 220px; text-transform: uppercase; letter-spacing: .04em; }


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

.bagian {
    padding: 52px 0;
    border-top: 1px solid var(--garis);
    text-align: left;
}

.bagian-judul {
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--aksen);
    margin: 0 0 8px;
}

.bagian-sub { font-size: 20px; font-weight: 600; color: var(--tinta); margin: 0 0 30px; line-height: 1.4; }


/* --- Acara --- */

.acara {
    border: 0;
    border-top: 2px solid var(--tinta);
    padding: 18px 0;
    margin-bottom: 0;
    background: none;
}

.acara-jenis { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--aksen); margin: 0 0 6px; font-weight: 700; }
.acara-nama { font-family: inherit; font-size: 22px; font-weight: 700; 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: 9px 20px;
    border: 1.5px solid var(--tinta); border-radius: 0;
    color: var(--tinta); text-decoration: none; font-size: 12.5px;
    letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
}
.acara-peta:hover { background: var(--tinta); color: #fff; }


/* --- Galeri --- */

.bagian-galeri { padding-bottom: 44px; }
.grid-galeri { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; }
.galeri-item { display: block; aspect-ratio: 3/4; overflow: hidden; border-radius: 0; cursor: zoom-in; }
@supports not (aspect-ratio: 3/4) { .galeri-item { height: 220px; } }
.galeri-item img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(15%); transition: filter .3s ease, transform .3s ease; }
.galeri-item:hover img { filter: grayscale(0%); transform: scale(1.02); }


/* --- Lightbox --- */

.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(26,26,26,.96); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .2s linear; }
.lightbox.tampak { opacity: 1; }
.lightbox[hidden] { display: none; }
/* Modern sengaja hanya memakai efek pudar, tanpa efek membesar
   (scale) seperti keempat tema lain -- konsisten dengan identitas
   tema ini yang datar dan tegas, bukan dekoratif. */
.lightbox-gambar { max-width: min(94vw, 720px); max-height: 88vh; object-fit: contain; transition: opacity .16s linear; }
.lightbox-gambar.memuat { opacity: 0; }
.lightbox-tutup, .lightbox-nav { position: absolute; background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff; cursor: pointer; border-radius: 0; display: flex; align-items: center; justify-content: center; line-height: 1; }
.lightbox-tutup { top: 20px; right: 20px; width: 40px; height: 40px; font-size: 22px; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; font-size: 26px; }
.lightbox-prev { left: 12px; } .lightbox-next { right: 12px; }
.lightbox-tutup:hover, .lightbox-nav:hover { background: var(--aksen); border-color: var(--aksen); }


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

.bagian-kisah { padding-bottom: 44px; }
.garis-waktu { display: flex; flex-direction: column; gap: 0; }
.kisah-item { display: flex; flex-direction: column; gap: 14px; border: 0; border-top: 1px solid var(--garis); border-radius: 0; overflow: hidden; padding-top: 28px; margin-top: 28px; }
.kisah-item:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.kisah-foto { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; filter: grayscale(15%); }
@supports not (aspect-ratio: 16/10) { .kisah-foto { height: 200px; } }
.kisah-teks { padding: 0; }
.kisah-waktu { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--aksen); margin: 0 0 6px; font-weight: 700; }
.kisah-judul { font-family: inherit; font-size: 20px; font-weight: 700; 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: 46px; height: 46px; border-radius: 0;
    border: 1.5px solid var(--tinta); background: var(--warna-kedua); color: var(--tinta);
    box-shadow: 0 4px 14px rgba(0,0,0,.12); cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.tombol-musik.berputar { background: var(--aksen); border-color: var(--aksen); 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); } }


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

.bagian-amplop { padding-bottom: 44px; }
.daftar-amplop { display: flex; flex-direction: column; gap: 0; }
.kartu-amplop { display: flex; gap: 16px; align-items: center; border: 0; border-top: 1px solid var(--garis); border-radius: 0; padding: 18px 0; background: none; }
.amplop-qr { width: 76px; height: 76px; object-fit: contain; border-radius: 0; background: #fff; border: 1px solid var(--garis); flex-shrink: 0; }
.amplop-bank { font-weight: 700; 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: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 10px; border-radius: 0; border: 1px solid var(--tinta); background: transparent; color: var(--tinta); 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: 12px 16px; border-radius: 0; font-size: 14px; margin-bottom: 18px; border-left: 3px solid; }
.pesan-notifikasi.pesan-success { background: #F2F1EE; color: #1A1A1A; border-color: var(--aksen); }
.pesan-notifikasi.pesan-error   { background: #F2F1EE; color: #1A1A1A; border-color: #A8443C; }
.pesan-notifikasi.pesan-warning { background: #F2F1EE; color: #1A1A1A; border-color: #8A6516; }

.kotak-rsvp-terisi { background: none; border: 0; border-left: 3px solid var(--aksen); border-radius: 0; padding: 10px 0 10px 16px; margin-bottom: 20px; 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 { max-width: none; margin: 0; }
.bidang-rsvp { margin-bottom: 18px; }
.bidang-rsvp label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 7px; color: var(--tinta); }
.wajib-tanda { color: var(--aksen); font-weight: 400; }

.bidang-rsvp input[type="text"], .bidang-rsvp input[type="number"], .bidang-rsvp textarea {
    width: 100%; padding: 11px 0; font-family: inherit; font-size: 15px;
    color: var(--tinta); background: transparent; border: 0; border-bottom: 1.5px solid var(--garis); border-radius: 0;
}
.bidang-rsvp input:focus, .bidang-rsvp textarea:focus { outline: none; border-bottom-color: var(--aksen); }

.pilihan-hadir { display: flex; gap: 18px; flex-wrap: wrap; padding: 4px 0; }
.pilihan-hadir label { display: flex; align-items: center; gap: 7px; font-weight: 500; font-size: 14px; margin: 0; text-transform: none; }
.pilihan-hadir input { width: auto; margin: 0; }

.tombol-kirim {
    width: 100%; padding: 13px; border: 0; border-radius: 0;
    background: var(--tinta); color: #fff; font-family: inherit;
    font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
.tombol-kirim:hover { background: var(--aksen); }

.daftar-ucapan { max-width: none; margin: 32px 0 0; display: flex; flex-direction: column; gap: 0; }
.kartu-ucapan { border-left: 0; border-top: 1px solid var(--garis); padding: 16px 0; }
.kartu-ucapan:first-child { border-top: 0; }
.ucapan-nama { font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 5px; }
.ucapan-isi { font-size: 14px; color: var(--tinta); margin: 0; line-height: 1.65; }


/* --- Kaki --- */

.kaki { padding: 48px 0 56px; text-align: left; border-top: 2px solid var(--tinta); color: var(--kabur); font-size: 13px; }
.kaki-nama { font-family: inherit; font-size: 22px; font-weight: 800; color: var(--tinta); margin: 0 0 6px; }

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


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

.bagian-kutipan {
    padding: 40px 0;
    text-align: left;
    border-top: 1px solid var(--garis);
    border-bottom: 1px solid var(--garis);
}

.kutipan-teks { margin: 0 0 18px; padding: 0; border-left: 3px solid var(--aksen); padding-left: 16px; }

.kutipan-teks p {
    font-family: inherit;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--tinta);
    margin: 0 0 8px;
}

.kutipan-teks cite {
    display: block;
    font-style: normal;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--kabur);
}

.sambutan-teks {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--tinta);
    margin: 0;
}

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

@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;
}