/* [DIHAPUS] Trik "body{visibility:visible}" di baris pertama file ini SUDAH TIDAK DIPAKAI LAGI --
   ternyata inilah sumber bug "isi undangan sekilas kelihatan tanpa gaya" di koneksi lambat: browser
   bisa menerapkan baris PALING ATAS file CSS eksternal ini sebelum SISA file (ukuran font, dst) selesai
   diproses. Kunci FOUC sekarang HANYA dibuka lewat event "load" pada tag <link> stylesheet ini di
   functions.php (digitaluxs_render_template_by_slug) -- lihat komentar di sana. */

/* Font Google dimuat lewat <link> di functions.php (lebih cepat), bukan @import di sini */
:root {
    --formal-navy: #1B2A41;
    --formal-navy-deep: #101B2C;
    --formal-steel: #3B6E8F;
    --formal-steel-deep: #2C5570;
    --formal-white: #FAFBFC;
    --formal-ink: #1F2937;
    --formal-line: rgba(27,42,65,0.14);
}

.formal-undangan { font-family: 'Inter', sans-serif; color: var(--formal-ink); background: var(--formal-white); overflow-x: hidden; }
.formal-undangan * { box-sizing: border-box; }

/* ============ SAMPUL ============ */
.formal-cover {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(160deg, var(--formal-navy) 0%, var(--formal-navy-deep) 100%);
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
.formal-cover.formal-cover-tertutup { opacity: 0; visibility: hidden; pointer-events: none; }

.formal-cover-lapis-hitam { position: absolute; inset: 0; background: rgba(0,0,0,0.55); z-index: 1; }
/* [DIPERBAIKI] Sebelumnya panel ini nyaris putih (rgba 250,251,252) sementara semua teks di atasnya
   (.formal-cover-frame, .formal-eyebrow, dst.) berwarna putih -- begitu ada foto cover, teks jadi
   nyaris tidak kelihatan karena putih di atas putih. Diganti jadi panel navy gelap senada dengan
   gradasi sampul tanpa foto, supaya teks putih tetap kontras jelas dengan atau tanpa foto cover. */
.formal-cover-lapis-putih {
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 420px; max-width: 90%;
    background: rgba(16,27,44,0.82);
    z-index: 2;
}

.formal-cover-frame {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 50px 32px;
    max-width: 400px;
    margin: 20px;
    color: #fff;
}
#formalCover:not([style*="background: url"]) .formal-cover-frame { color: #fff; }
.formal-eyebrow {
    display: block;
    font-family: 'Libre Franklin', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #9FC1D6;
    margin-bottom: 16px;
}
.formal-cover-nama {
    font-family: 'Libre Franklin', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.25;
    margin: 0 0 12px 0;
    color: #fff;
}
.formal-cover-tanggal { font-size: 14px; letter-spacing: 0.5px; color: #C7D6E0; margin-bottom: 6px; }

.formal-cover-countdown { display: flex; gap: 10px; justify-content: center; margin: 22px 0; }
.formal-cover-cd-box { text-align: center; min-width: 44px; }
.formal-cover-cd-angka { display: block; font-family: 'Libre Franklin', sans-serif; font-size: 22px; font-weight: 700; color: #fff; line-height: 1.2; }
.formal-cover-cd-label { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px; color: #9FC1D6; }

.formal-cover-tamu-kartu { margin: 22px 0; }
.formal-cover-tamu-label { margin: 0 0 10px 0; font-size: 12px; color: #C7D6E0; }
.formal-cover-tamu-nama-kotak {
    background: #fff;
    border-radius: 6px;
    padding: 14px 18px;
    min-height: 26px;
    margin: 0 0 10px 0;
    font-family: 'Libre Franklin', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--formal-navy);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}
.formal-cover-tamu-catatan { margin: 0; font-size: 10px; font-style: italic; color: #9FC1D6; }

.formal-btn-buka {
    font-family: 'Libre Franklin', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 14px 38px;
    border-radius: 4px;
    border: 1.5px solid #fff;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.formal-btn-buka:hover { background: #fff; color: var(--formal-navy); }

/* ============ ISI ============ */
.formal-isi { position: relative; }
.formal-section { text-align: center; padding: 30px 24px; border-top: 1px solid var(--formal-line); }
.formal-divider { font-size: 13px; letter-spacing: 2px; color: var(--formal-steel); display: block; margin-bottom: 14px; font-weight: 700; }
.formal-judul { font-family: 'Libre Franklin', sans-serif; font-weight: 700; font-size: 21px; margin: 0 0 22px 0; color: var(--formal-navy); text-transform: uppercase; letter-spacing: 0.5px; }

.formal-hero { text-align: center; padding: 50px 24px 25px 24px; }
.formal-hero-nama { font-family: 'Libre Franklin', sans-serif; font-weight: 700; font-size: 30px; margin: 8px 0 8px 0; color: var(--formal-navy); }
.formal-hero-tanggal { font-size: 13px; letter-spacing: 0.5px; color: var(--formal-steel); font-weight: 700; }

.formal-foto-unggulan { padding: 0 24px 28px 24px; max-width: 680px; margin: 0 auto; }
.formal-foto-unggulan img { width: 100%; border-radius: 8px; display: block; box-shadow: 0 16px 40px rgba(27,42,65,0.15); }

/* Waktu & Tempat */
.formal-acara-blok { max-width: 420px; margin: 0 auto; }
.formal-acara-waktu { font-size: 15px; font-weight: 700; margin-bottom: 4px; color: var(--formal-steel); }
.formal-lokasi-nama { font-size: 14px; margin-bottom: 14px; }
.formal-dresscode { font-size: 13px; margin-top: 14px; opacity: 0.85; }

.formal-btn-outline {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: 4px;
    border: 1.5px solid var(--formal-steel);
    color: var(--formal-steel);
    text-decoration: none;
    background: transparent;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.formal-btn-outline:hover { background: var(--formal-steel); color: #fff; }

/* Pembicara */
/* [DIUBAH] Dulu CSS grid (auto-fit minmax) -- kalau jumlah orang tidak pas mengisi kolom terakhir
   (mis. cuma 1, atau sisa 1 di baris terakhir), kartunya nempel rata kiri karena kolom kosong di
   sebelahnya tidak collapse sempurna di semua browser. Diganti flexbox+wrap+justify-content:center
   supaya berapa pun jumlahnya (1 sampai banyak), tiap baris SELALU center -- dipakai bareng untuk
   section Pembicara & Host. */
.formal-pembicara-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; max-width: 640px; margin: 0 auto; }
.formal-pembicara-kartu { text-align: center; width: 140px; }
/* [DIUBAH] Dulu lingkaran (100x100 + border-radius:50%). Sekarang kotak potret berbentuk kapsul/oval
   (lebih tinggi dari lebar, border-radius setengah lebar) -- sisi kiri-kanan lurus, ujung atas-bawah
   membulat penuh, sesuai referensi bentuk foto yang diminta. Dipakai bareng untuk Pembicara & Host. */
.formal-pembicara-foto { width: 110px; height: 150px; border-radius: 55px; object-fit: cover; margin: 0 auto 12px auto; display: block; box-shadow: 0 8px 20px rgba(27,42,65,0.15); }
.formal-pembicara-foto-kosong { display: flex; align-items: center; justify-content: center; background: var(--formal-navy); color: #fff; font-family: 'Libre Franklin', sans-serif; font-weight: 700; font-size: 32px; }
.formal-pembicara-nama { font-family: 'Libre Franklin', sans-serif; font-weight: 700; font-size: 14px; margin: 0 0 3px 0; color: var(--formal-navy); }
.formal-pembicara-jabatan { font-size: 12px; color: var(--formal-steel); margin: 0; line-height: 1.4; }

/* Rundown — motif garis timeline tipis (signature) */
.formal-rundown-list { max-width: 460px; margin: 0 auto; text-align: left; }
.formal-rundown-baris { display: flex; gap: 14px; padding-bottom: 22px; position: relative; }
.formal-rundown-baris:last-child { padding-bottom: 0; }
.formal-rundown-waktu { flex-shrink: 0; width: 84px; font-family: 'Libre Franklin', sans-serif; font-weight: 700; font-size: 12px; color: var(--formal-steel); padding-top: 2px; }
.formal-rundown-titik { flex-shrink: 0; width: 10px; position: relative; }
.formal-rundown-titik::before { content: ''; position: absolute; top: 4px; left: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--formal-steel); }
.formal-rundown-baris:not(:last-child) .formal-rundown-titik::after { content: ''; position: absolute; top: 14px; left: 4.5px; width: 1px; bottom: -22px; background: var(--formal-line); }
.formal-rundown-info { flex: 1; }
.formal-rundown-kegiatan { font-size: 14px; font-weight: 600; margin: 0 0 2px 0; color: var(--formal-ink); }
.formal-rundown-pembicara { font-size: 12px; color: var(--formal-steel); margin: 0; }

/* Kado / Kontribusi */
.formal-kado-list { text-align: left; max-width: 460px; margin: 0 auto; }
.formal-kado-baris {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--formal-line);
}
.formal-kado-baris:last-child { border-bottom: none; }
.formal-kado-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; min-width: 0; }
.formal-kado-bank { font-family: 'Libre Franklin', sans-serif; font-weight: 700; font-size: 15px; color: var(--formal-navy); }
.formal-kado-nomor { font-size: 14px; font-weight: 600; letter-spacing: 0.3px; }
.formal-kado-pemilik { font-size: 12px; opacity: 0.65; }
.formal-kado-salin { font-size: 11px; padding: 8px 16px; flex-shrink: 0; }

/* Galeri */
.formal-galeri-grid { column-count: 2; column-gap: 10px; max-width: 640px; margin: 0 auto; }
.formal-galeri-item { break-inside: avoid; margin-bottom: 10px; border-radius: 6px; overflow: hidden; }
.formal-galeri-item img { width: 100%; height: auto; display: block; transition: transform 0.4s; }
.formal-galeri-item:hover img { transform: scale(1.05); }

/* RSVP */
.formal-form-rsvp { max-width: 420px; margin: 0 auto; text-align: left; }
.formal-form-group { margin-bottom: 16px; }
.formal-form-group label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--formal-navy); }
.formal-label-opsional { font-weight: 400; opacity: 0.6; }
.formal-form-group input, .formal-form-group select, .formal-form-group textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--formal-line);
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    background: #fff;
    color: var(--formal-ink);
}
.formal-form-group input:focus, .formal-form-group select:focus, .formal-form-group textarea:focus {
    outline: none;
    border-color: var(--formal-steel);
}
.formal-btn-submit { width: 100%; background: var(--formal-navy); color: #fff; border-color: var(--formal-navy); }
.formal-btn-submit:hover { background: var(--formal-steel); color: #fff; }
.formal-rsvp-pesan { margin-top: 12px; font-size: 13px; text-align: center; }

/* Kutipan & Penutup */
.formal-kutipan-ayat-teks { font-family: 'Libre Franklin', sans-serif; font-style: italic; font-size: 16px; line-height: 1.7; max-width: 480px; margin: 0 auto; color: var(--formal-navy); }
.formal-pengantar-teks { font-size: 15px; line-height: 1.8; max-width: 520px; margin: 0 auto; color: var(--formal-ink); }

.formal-penutup { text-align: center; padding: 32px 24px 50px 24px; }
.formal-penutup-teks { font-size: 14px; line-height: 1.8; max-width: 460px; margin: 0 auto 20px auto; color: var(--formal-ink); }
.formal-penutup-nama { font-family: 'Libre Franklin', sans-serif; font-weight: 700; font-size: 22px; color: var(--formal-navy); text-transform: uppercase; letter-spacing: 0.5px; }

/* Riwayat Konfirmasi */
.formal-riwayat-scroll { max-height: 480px; overflow-y: auto; text-align: left; padding-right: 6px; max-width: 460px; margin: 0 auto; }
.formal-riwayat-baris { padding: 14px 4px; border-bottom: 1px solid var(--formal-line); }
.formal-riwayat-baris:last-child { border-bottom: none; }
.formal-riwayat-atas { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.formal-riwayat-nama { font-size: 14px; color: var(--formal-ink); }
.formal-riwayat-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 4px; white-space: nowrap; }
.formal-riwayat-hadir { background: rgba(59,110,143,0.15); color: var(--formal-steel-deep); }
.formal-riwayat-ragu { background: rgba(217,142,4,0.15); color: #8a5f16; }
.formal-riwayat-tidak { background: rgba(217,98,43,0.15); color: #9c4620; }
.formal-riwayat-ucapan { margin: 0; font-size: 13px; color: var(--formal-ink); opacity: 0.85; line-height: 1.6; }
.formal-riwayat-kosong { font-size: 13px; opacity: 0.6; text-align: center; }

/* Tombol musik mengambang */
.formal-musik-toggle {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 50px;
    height: 50px;
    border-radius: 4px;
    background: var(--formal-navy);
    color: #fff;
    border: none;
    font-size: 18px;
    cursor: pointer;
    z-index: 9999999;
    box-shadow: 0 8px 20px rgba(27,42,65,0.4);
}

@media (max-width: 480px) {
    .formal-cover-nama { font-size: 26px; }
    .formal-hero-nama { font-size: 24px; }
    .formal-cover-cd-box { min-width: 40px; }
    .formal-pembicara-kartu { width: 124px; }
}

@media (prefers-reduced-motion: reduce) {
    .formal-cover, .formal-galeri-item img, .formal-btn-buka, .formal-btn-outline { transition: none; }
}