/* =============================================================
   TEMA ISLAMIC V2
   =============================================================

   Warna dasar: hijau zamrud tua dengan emas. Hijau tua dipilih
   karena asosiasinya kuat dengan nuansa islami tanpa jatuh ke
   hijau terang yang terasa murah, dipasangkan dengan emas sebagai
   satu-satunya aksen.

   ELEMEN PENANDA: bingkai lengkung ganda menyerupai siluet mihrab
   di sekeliling pelat nama tamu, dibangun murni dari border-radius
   CSS asimetris (bukan gambar), ditambah pola geometris delapan
   titik sebagai garis pemisah antar bagian, digambar sebagai SVG
   inline berulang.
   ============================================================= */

:root {
    --warna-utama:  #0E4A3E;   /* hijau zamrud tua */
    --warna-kedua:  #F7F4EC;   /* gading hangat */
    --emas:         #B8925A;
    --emas-terang:  #D4AF74;
    --tinta:        #24312C;
    --kabur:        #7C8880;
    --garis:        #DED7C4;
}

* { 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;
    background: var(--warna-utama);
    color: #fff;
}

.pembuka {
    font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
    color: var(--emas-terang); margin: 0 0 10px; font-weight: 600;
}

/* Basmalah singkat sebagai pembuka, ditulis lewat teks biasa
   (bukan gambar kaligrafi) supaya tetap ringan dan bisa diseleksi. */
.pembuka-arab {
    font-size: 22px;
    color: var(--emas-terang);
    margin: 0 0 22px;
    opacity: .9;
}

.nama-pasangan {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(36px, 11vw, 54px);
    font-weight: 600;
    line-height: 1.15;
    color: #fff;
    margin: 0;
}

.dan {
    display: block;
    font-size: .46em;
    font-style: italic;
    color: var(--emas-terang);
    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: rgba(255, 255, 255, .68);
    font-weight: 400;
}

.garis-kuningan {
    width: 64px; height: 1px; margin: 26px auto;
    background: var(--emas);
    border: 0;
    position: relative;
}
.garis-kuningan::before {
    content: '';
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(45deg);
    width: 8px; height: 8px; background: var(--emas-terang);
}

.tanggal-utama { font-size: 15px; letter-spacing: .05em; color: rgba(255,255,255,.72); margin: 0; }

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

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

.hm-kotak {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 56px;
    padding: 10px 4px;
    border: 1px solid rgba(212, 175, 116, .35);
    border-radius: 6px;
    background: rgba(255, 255, 255, .06);
}

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

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



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

.pelat {
    margin: 34px auto 0;
    padding: 30px 22px 20px;
    max-width: 290px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(212, 175, 116, .4);
    /* Lengkung ganda di atas, menyerupai puncak mihrab. Sudut
       bawah tetap persegi agar bentuknya condong ke gapura,
       bukan oval penuh. */
    border-radius: 60px 60px 6px 6px;
}

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

.pelat-nama {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 22px; font-weight: 600; color: #fff; margin: 0; line-height: 1.3;
}

.pelat-catatan { font-size: 12.5px; color: rgba(255,255,255,.6); margin: 8px 0 0; }


/* --- Pemisah bagian: pola geometris berulang --- */

.bagian {
    padding: 56px 0;
    text-align: center;
    position: relative;
}

.bagian::before {
    content: '';
    display: block;
    width: 100%;
    height: 14px;
    margin-bottom: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='14' viewBox='0 0 56 14'%3E%3Cg fill='none' stroke='%23B8925A' stroke-width='1.2'%3E%3Cpath d='M0 7 L7 0 L14 7 L7 14 Z'/%3E%3Cpath d='M14 7 L21 0 L28 7 L21 14 Z' opacity='.5'/%3E%3Cpath d='M28 7 L35 0 L42 7 L35 14 Z'/%3E%3Cpath d='M42 7 L49 0 L56 7 L49 14 Z' opacity='.5'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: center;
    background-size: 56px 14px;
    opacity: .8;
}

.bagian-judul {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 27px; 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: 30px 30px 6px 6px;
    padding: 26px 22px 22px;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, .5);
}

.acara-jenis { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--emas); margin: 0 0 8px; font-weight: 600; }
.acara-nama { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 23px; 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 20px;
    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: 4px; 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(14,20,17,.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: 4px; 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,.1); border: 1px solid rgba(212,175,116,.4); 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(212,175,116,.2); }


/* --- 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: 6px; overflow: hidden; background: rgba(255,255,255,.5); }
.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); margin: 0 0 6px; font-weight: 600; }
.kisah-judul { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 21px; 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(--emas); background: var(--warna-utama); color: var(--emas-terang);
    box-shadow: 0 6px 18px rgba(14,74,62,.3); 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: 6px; padding: 16px; background: rgba(255,255,255,.5); text-align: left; }
.amplop-qr { width: 84px; height: 84px; object-fit: contain; border-radius: 4px; 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: 4px; font-size: 14px; margin-bottom: 18px; text-align: left; }
.pesan-notifikasi.pesan-success { background: #E9F1EC; color: #175C46; }
.pesan-notifikasi.pesan-error   { background: #FBEEEC; 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: 4px; 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: 4px;
}
.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: 4px;
    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); 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: 48px 0 56px; text-align: center;
    background: var(--warna-utama); color: rgba(255,255,255,.72); font-size: 13px;
}
.kaki-nama { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 21px; color: #fff; margin: 0 0 6px; }

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


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

.bagian-kutipan {
    padding: 48px 0;
    text-align: center;
    background: var(--warna-utama);
    border-bottom: 0;
}

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

.kutipan-teks p {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 19px;
    line-height: 1.7;
    color: #fff;
    margin: 0 0 10px;
}

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

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

a:focus-visible { outline: 2px solid var(--emas-terang); 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;
}



/* =============================================================
   ISLAMIC V2 — NUSANTARA ARABESQUE LUXURY
   Deep emerald + warm gold + ivory.
   ============================================================= */

:root {
    --isl-ivory: #fbf8ef;
    --isl-paper: #fffdf6;
    --isl-emerald: #173f36;
    --isl-emerald-2: #23594b;
    --isl-gold: #b8944e;
    --isl-gold-soft: #dbc58f;
    --isl-sage: #728d7e;
    --isl-ink: #342f29;
    --isl-muted: #7b7468;
    --isl-line: rgba(23,63,54,.15);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 22px;
}

body {
    overflow-x: hidden;
    color: var(--isl-ink);
    background:
        radial-gradient(circle at 10% 10%, rgba(184,148,78,.10), transparent 26%),
        radial-gradient(circle at 92% 74%, rgba(23,63,54,.075), transparent 30%),
        var(--isl-ivory);
}

/* Subtle Islamic geometry using repeating linear gradients */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .11;
    background:
        linear-gradient(45deg, rgba(184,148,78,.16) 1px, transparent 1px),
        linear-gradient(-45deg, rgba(184,148,78,.16) 1px, transparent 1px);
    background-size: 31px 31px;
    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
}

/* ================= HERO ================= */
.sampul {
    position: relative;
    min-height: 100dvh;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(180deg, rgba(251,248,239,.12), rgba(251,248,239,.90) 82%),
        radial-gradient(circle at 50% 42%, rgba(184,148,78,.08), transparent 40%);
}

.sampul::before {
    content: '';
    position: absolute;
    width: 340px;
    height: 340px;
    left: 50%;
    top: 45%;
    transform: translate(-50%,-50%) rotate(45deg);
    border: 1px solid rgba(184,148,78,.22);
    border-radius: 36px;
    box-shadow:
        0 0 0 11px rgba(184,148,78,.028),
        0 0 0 25px rgba(23,63,54,.025);
    animation: isl-geometry 11s ease-in-out infinite;
    pointer-events: none;
}

.sampul::after {
    content: '☾  ✦  ☽';
    position: absolute;
    left: 50%;
    top: 18%;
    transform: translateX(-50%);
    color: var(--isl-gold);
    font-size: 11px;
    letter-spacing: .38em;
    opacity: .58;
    animation: isl-glow 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes isl-geometry {
    0%,100% { transform: translate(-50%,-50%) rotate(45deg) scale(1); opacity: .65; }
    50% { transform: translate(-50%,-50%) rotate(45deg) scale(1.035); opacity: 1; }
}

@keyframes isl-glow {
    0%,100% { opacity: .38; letter-spacing: .34em; }
    50% { opacity: .78; letter-spacing: .45em; }
}

.pembuka {
    position: relative;
    z-index: 2;
    color: var(--isl-gold);
    letter-spacing: .30em;
    font-size: 10px;
    animation: isl-down .9s ease both;
}

.pembuka::before,
.pembuka::after {
    content: '✦';
    margin: 0 10px;
    color: var(--isl-gold-soft);
    letter-spacing: 0;
}

.nama-pasangan {
    position: relative;
    z-index: 2;
    color: var(--isl-emerald);
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.045em;
    text-align: center;
    text-shadow: 0 6px 24px rgba(23,63,54,.08);
    animation: isl-name 1s .12s cubic-bezier(.18,.78,.22,1) both;
}

.dan {
    color: var(--isl-gold);
    font-family: Georgia, serif;
    font-style: italic;
}

.asal-usul {
    color: var(--isl-muted);
    text-align: center;
    animation: isl-up .8s .36s ease both;
}

.garis-kuningan {
    width: 90px;
    height: 1px;
    margin: 26px auto 18px;
    background: linear-gradient(90deg, transparent, var(--isl-gold), transparent);
    border: 0;
    position: relative;
    animation: isl-line 1s .43s ease both;
}

.garis-kuningan::after {
    content: '✦';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    padding: 0 9px;
    background: var(--isl-ivory);
    color: var(--isl-gold);
    font-size: 8px;
}

.tanggal-utama {
    color: var(--isl-emerald);
    text-align: center;
    font-family: Georgia, serif;
    letter-spacing: .07em;
    animation: isl-up .8s .56s ease both;
}

/* ================= COUNTDOWN ================= */
.hitung-mundur {
    justify-content: center;
    gap: 8px;
    padding: 0;
    margin-top: 25px;
    border: 0;
    animation: isl-up .8s .7s ease both;
}

.hm-kotak {
    min-width: 65px;
    padding: 12px 7px 10px;
    align-items: center;
    border: 1px solid rgba(184,148,78,.28);
    border-radius: 3px;
    background: rgba(255,253,246,.80);
    box-shadow: 0 8px 26px rgba(23,63,54,.055);
    position: relative;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.hm-kotak::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(184,148,78,.10);
}

.hm-kotak:hover {
    transform: translateY(-5px);
    border-color: var(--isl-gold);
    box-shadow: 0 15px 31px rgba(23,63,54,.10);
}

.hm-angka {
    color: var(--isl-emerald);
    font-family: Georgia, serif;
    font-size: 27px;
}

.hm-label {
    color: var(--isl-gold);
    font-size: 8px;
    letter-spacing: .15em;
}

/* ================= TAMU ================= */
.pelat {
    position: relative;
    max-width: 370px;
    margin: 32px auto 0;
    padding: 18px 26px 16px;
    text-align: center;
    border: 1px solid rgba(184,148,78,.30);
    border-radius: 4px;
    background: rgba(255,253,246,.82);
    box-shadow: 0 12px 32px rgba(23,63,54,.07);
    animation: isl-up .8s .86s ease both;
}

.pelat::before,
.pelat::after {
    content: '❧';
    position: absolute;
    color: var(--isl-gold);
    opacity: .58;
    font-size: 17px;
}

.pelat::before { left: 10px; top: 9px; transform: rotate(-12deg); }
.pelat::after { right: 10px; bottom: 9px; transform: rotate(168deg); }

.pelat-label {
    color: var(--isl-gold);
    letter-spacing: .22em;
    font-size: 9px;
}

.pelat-nama {
    color: var(--isl-emerald);
    font-family: Georgia, serif;
    font-size: 21px;
    font-weight: 600;
}

.pelat-catatan {
    color: var(--isl-muted);
    font-style: italic;
}

/* ================= SECTIONS ================= */
.bagian {
    position: relative;
    padding: 65px 0;
    border-top: 1px solid var(--isl-line);
}

.bagian-judul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--isl-emerald);
    font-family: Georgia, serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .14em;
}

.bagian-judul::before,
.bagian-judul::after {
    content: '✦';
    width: auto;
    height: auto;
    background: none;
    color: var(--isl-gold);
    font-size: 7px;
}

.bagian-sub {
    color: var(--isl-muted);
    font-family: Georgia, serif;
    text-align: center;
    font-size: 20px;
}

/* ================= KUTIPAN ================= */
.bagian-kutipan {
    background: linear-gradient(180deg, rgba(184,148,78,.045), transparent);
}

.kutipan-teks {
    max-width: 420px;
    margin: 0 auto 25px;
    padding: 27px 26px 21px;
    border: 1px solid rgba(184,148,78,.25);
    background: rgba(255,253,246,.65);
    position: relative;
}

.kutipan-teks::before {
    content: '﴾';
    position: absolute;
    left: 50%;
    top: -17px;
    transform: translateX(-50%);
    color: var(--isl-gold);
    background: var(--isl-ivory);
    padding: 0 9px;
    font: 27px/1 Georgia, serif;
}

.kutipan-teks p {
    color: var(--isl-emerald);
    font-family: Georgia, serif;
    font-size: 18px;
    font-style: italic;
    line-height: 1.8;
}

.kutipan-teks cite {
    color: var(--isl-gold);
}

/* ================= ACARA ================= */
.acara {
    position: relative;
    padding: 24px 20px 25px;
    margin-bottom: 15px;
    border: 1px solid rgba(184,148,78,.23);
    border-radius: 4px;
    background: rgba(255,253,246,.85);
    box-shadow: 0 9px 27px rgba(23,63,54,.05);
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.acara::after {
    content: '✦';
    position: absolute;
    top: 10px;
    right: 12px;
    color: var(--isl-gold);
    opacity: .45;
    font-size: 8px;
}

.acara:hover {
    transform: translateY(-5px);
    border-color: rgba(184,148,78,.55);
    box-shadow: 0 16px 34px rgba(23,63,54,.10);
}

.acara-jenis {
    color: var(--isl-gold);
    letter-spacing: .20em;
    font-size: 9px;
}

.acara-nama {
    color: var(--isl-emerald);
    font-family: Georgia, serif;
    font-size: 23px;
    font-weight: 500;
}

.acara-tempat {
    color: var(--isl-muted);
}

.acara-peta {
    border: 1px solid var(--isl-emerald);
    border-radius: 2px;
    color: var(--isl-emerald);
    transition: all .25s ease;
}

.acara-peta:hover {
    background: var(--isl-emerald);
    color: #fff;
    transform: translateY(-2px);
}

/* ================= KISAH ================= */
.kisah-item {
    position: relative;
    border: 0;
    padding: 0 0 31px;
    margin-bottom: 31px;
}

.kisah-item::before {
    content: '۞';
    display: block;
    text-align: center;
    color: var(--isl-gold);
    font-size: 14px;
    margin-bottom: 13px;
}

.kisah-foto {
    border: 5px solid rgba(255,253,246,.94);
    border-radius: 4px;
    box-shadow: 0 14px 34px rgba(23,63,54,.11);
    filter: saturate(.86);
    transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .4s ease;
}

.kisah-item:hover .kisah-foto {
    transform: scale(1.012);
    filter: saturate(1);
}

.kisah-teks {
    text-align: center;
    padding-top: 14px;
}

.kisah-waktu {
    color: var(--isl-gold);
    letter-spacing: .18em;
}

.kisah-judul {
    color: var(--isl-emerald);
    font-family: Georgia, serif;
    font-size: 22px;
    font-weight: 500;
}

.kisah-cerita {
    color: var(--isl-ink);
}

/* ================= GALERI ================= */
.grid-galeri {
    gap: 8px;
}

.galeri-item {
    border-radius: 3px;
    box-shadow: 0 6px 18px rgba(23,63,54,.08);
}

.galeri-item img {
    filter: saturate(.88);
    transition: transform .65s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}

.galeri-item:hover img {
    transform: scale(1.06);
    filter: saturate(1);
}

.galeri-item::after {
    content: '✦';
    position: absolute;
    right: 9px;
    bottom: 9px;
    width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,253,246,.92);
    color: var(--isl-gold);
    opacity: 0;
    transform: scale(.75);
    transition: opacity .25s ease, transform .25s ease;
}

.galeri-item:hover::after {
    opacity: 1;
    transform: scale(1);
}

/* ================= AMPLOP & RSVP ================= */
.kartu-amplop {
    padding: 19px 5px;
    transition: transform .3s ease;
}

.kartu-amplop:hover {
    transform: translateX(4px);
}

.amplop-qr {
    border: 1px solid rgba(184,148,78,.32);
    border-radius: 3px;
}

.tombol-kirim {
    border-radius: 3px;
    background: var(--isl-emerald);
    box-shadow: 0 9px 25px rgba(23,63,54,.16);
    transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.tombol-kirim:hover {
    background: var(--isl-emerald-2);
    transform: translateY(-3px);
    box-shadow: 0 14px 31px rgba(23,63,54,.20);
}

/* ================= FLOATING MENU ================= */
.islamic-floating-nav {
    position: fixed;
    right: 14px;
    bottom: 15px;
    z-index: 980;
    display: flex;
    align-items: center;
    gap: 8px;
}

.islamic-dock {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    border: 1px solid rgba(184,148,78,.32);
    border-radius: 4px;
    background: rgba(255,253,246,.93);
    box-shadow: 0 14px 36px rgba(23,63,54,.16);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    opacity: 0;
    transform: translateX(18px) scale(.93);
    transform-origin: right center;
    pointer-events: none;
    transition: opacity .28s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}

.islamic-floating-nav.terbuka .islamic-dock {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}

.islamic-nav-item {
    width: 38px;
    height: 38px;
    padding: 4px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--isl-emerald);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: inherit;
    transition: all .23s ease;
}

.islamic-nav-item:hover {
    background: rgba(184,148,78,.12);
    transform: translateY(-2px);
}

.islamic-nav-icon {
    width: 27px;
    height: 27px;
    border: 1px solid rgba(184,148,78,.48);
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: Georgia, serif;
    font-size: 12px;
}

.islamic-nav-label {
    display: none;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.islamic-toggle {
    position: relative;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border: 1px solid var(--isl-gold);
    border-radius: 50%;
    background: var(--isl-emerald);
    color: #fff;
    box-shadow: 0 12px 32px rgba(23,63,54,.26);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .35s ease, background .25s ease;
}

.islamic-toggle:hover {
    transform: translateY(-3px);
}

.islamic-floating-nav.terbuka .islamic-toggle {
    transform: rotate(45deg);
    background: var(--isl-emerald-2);
}

.islamic-toggle-ornament {
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(219,197,143,.55);
    transform: rotate(45deg);
    font-size: 0;
}

.islamic-toggle-icon {
    position: relative;
    z-index: 2;
    font-size: 19px;
}

.islamic-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    z-index: 1200;
    background: linear-gradient(90deg, var(--isl-emerald), var(--isl-gold));
    box-shadow: 0 0 10px rgba(184,148,78,.32);
}

.tombol-musik {
    right: 15px;
    bottom: 80px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(184,148,78,.45);
    background: rgba(255,253,246,.94);
    color: var(--isl-emerald);
    box-shadow: 0 9px 26px rgba(23,63,54,.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.tombol-musik.berputar {
    background: var(--isl-emerald);
    border-color: var(--isl-gold);
    color: #fff;
}

/* ================= ANIMATION ================= */
@keyframes isl-down {
    from { opacity: 0; transform: translateY(-13px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes isl-up {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes isl-name {
    from { opacity: 0; transform: translateY(22px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes isl-line {
    from { opacity: 0; transform: scaleX(0); }
    to { opacity: 1; transform: scaleX(1); }
}

@media (max-width: 560px) {
    .islamic-floating-nav {
        right: 10px;
        bottom: 10px;
    }
    .islamic-toggle {
        width: 49px;
        height: 49px;
        flex-basis: 49px;
    }
    .islamic-dock {
        gap: 1px;
        padding: 5px;
    }
    .islamic-nav-item {
        width: 35px;
        height: 35px;
    }
    .islamic-nav-icon {
        width: 25px;
        height: 25px;
    }
    .tombol-musik {
        right: 10px;
        bottom: 67px;
    }
    .hm-kotak {
        min-width: 59px;
    }
    .hm-angka {
        font-size: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .sampul::before,
    .sampul::after,
    .pembuka,
    .nama-pasangan,
    .asal-usul,
    .garis-kuningan,
    .tanggal-utama,
    .hitung-mundur,
    .pelat {
        animation: none !important;
    }
    .islamic-dock,
    .islamic-toggle,
    .acara,
    .kisah-foto,
    .tombol-kirim {
        transition: none !important;
    }
}


/* =============================================================
   ISLAMIC V2 — READABILITY PATCH
   Prevent light/white inherited text from disappearing over
   the ivory hero background.
   ============================================================= */

.sampul,
.sampul * {
    text-shadow: none;
}

.sampul .pembuka,
.sampul .nama-pasangan,
.sampul .dan,
.sampul .asal-usul,
.sampul .tanggal-utama,
.sampul .pelat,
.sampul .pelat * {
    color: var(--isl-emerald) !important;
}

.sampul .pembuka,
.sampul .pelat-label,
.sampul .hm-label {
    color: var(--isl-gold) !important;
}

.sampul .dan {
    color: var(--isl-gold) !important;
}

.sampul .asal-usul,
.sampul .pelat-catatan {
    color: var(--isl-muted) !important;
}

/* Parent/origin text: strong contrast on the pale hero */
.sampul .nama-orangtua,
.sampul .orangtua,
.sampul .asal,
.sampul .data-orangtua,
.sampul [class*="orangtua"],
.sampul [class*="ortu"] {
    color: var(--isl-emerald) !important;
}

/* If the existing theme uses inline white text, force a readable tone. */
.sampul [style*="color: white"],
.sampul [style*="color:#fff"],
.sampul [style*="color: #fff"],
.sampul [style*="color: #ffffff"],
.sampul [style*="color:#ffffff"] {
    color: var(--isl-emerald) !important;
}

/* Make all supporting hero copy readable even when a utility class
   accidentally supplies a light text color. */
.sampul small,
.sampul p,
.sampul span,
.sampul div {
    color: inherit;
}

.sampul .pelat {
    color: var(--isl-emerald) !important;
}

.sampul .pelat-nama {
    color: var(--isl-emerald) !important;
    font-weight: 600;
}

/* Better contrast for the opening Bismillah if it is rendered as text. */
.sampul .bismillah,
.sampul [class*="bismillah"],
.sampul [class*="basmalah"] {
    color: var(--isl-gold) !important;
}

/* Keep decorative/ornamental text gold rather than white. */
.sampul .ornamen,
.sampul [class*="ornamen"] {
    color: var(--isl-gold) !important;
}

/* Slightly stronger contrast for date/countdown cards. */
.hm-kotak,
.hm-kotak * {
    color: var(--isl-emerald);
}

.hm-kotak .hm-label {
    color: var(--isl-gold);
}


/* =============================================================
   ISLAMIC V2 — READABILITY PATCH 2
   Strong contrast for section copy over photo backgrounds.
   ============================================================= */

/* The photo/overlay can be beautiful without sacrificing text contrast. */
.bagian,
.bagian * {
    text-shadow: none;
}

.bagian {
    color: var(--isl-ink);
}

/* Main section copy */
.bagian p,
.bagian-sub,
.bagian-teks,
.sambutan,
.kalimat-sambutan,
.teks-sambutan,
.bagian-sambutan,
.bagian-sambutan p,
.bagian-sambutan .sambutan,
.bagian-sambutan .kalimat-sambutan {
    color: var(--isl-ink) !important;
}

/* Titles remain emerald; small labels remain gold. */
.bagian h1,
.bagian h2,
.bagian h3,
.bagian-judul,
.bagian-sub {
    color: var(--isl-emerald) !important;
}

.bagian small,
.bagian .label,
.bagian .acara-jenis,
.bagian .kisah-waktu,
.bagian .pelat-label {
    color: var(--isl-gold) !important;
}

/* Explicitly fix the invitation greeting/body copy that was appearing white. */
.sambutan p,
.sambutan-teks,
.kalimat-sambutan,
.teks-sambutan,
[class*="sambutan"] p,
[class*="sambutan"] .teks,
[class*="sambutan"] .isi {
    color: #3f3932 !important;
    opacity: 1 !important;
}

/* "Merupakan suatu kehormatan..." and other descriptive text */
.bagian p:not(.kutipan-teks p),
.bagian .deskripsi,
.bagian .deskripsi-acara,
.acara-deskripsi,
.acara-keterangan,
.keterangan-acara {
    color: #3f3932 !important;
    opacity: 1 !important;
}

/* Links should remain readable too. */
.bagian a {
    color: var(--isl-emerald) !important;
}

/* Do not allow generic utility classes to turn normal copy white. */
.bagian .text-white,
.bagian .text-light,
.bagian [class*="text-white"],
.bagian [class*="text-light"] {
    color: #3f3932 !important;
}

/* Improve contrast over the photographic background by strengthening
   the section's ivory veil rather than washing out the photograph. */
.bagian::before {
    pointer-events: none;
}

/* Keep the quotation intentionally distinct. */
.bagian-kutipan .kutipan-teks p {
    color: var(--isl-emerald) !important;
}

/* Event card copy */
.acara,
.acara * {
    color: var(--isl-ink);
}

.acara-nama {
    color: var(--isl-emerald) !important;
}

.acara-jenis {
    color: var(--isl-gold) !important;
}

.acara-tempat,
.acara-baris {
    color: #5a5249 !important;
}

/* Story copy */
.kisah-cerita {
    color: #3f3932 !important;
}

.kisah-judul {
    color: var(--isl-emerald) !important;
}

.kisah-waktu {
    color: var(--isl-gold) !important;
}

/* Mobile: slightly stronger body contrast and readable line height. */
@media (max-width: 560px) {
    .bagian p,
    .sambutan,
    .kalimat-sambutan,
    .teks-sambutan,
    .bagian-sambutan p,
    .acara-baris,
    .acara-tempat,
    .kisah-cerita {
        color: #39342f !important;
        opacity: 1 !important;
        line-height: 1.75;
    }

    .bagian-sambutan,
    .bagian-sambutan::before {
        background-color: rgba(251,248,239,.72);
    }
}


/* =============================================================
   ISLAMIC V2 — DEFINITIVE CONTRAST / R3
   Do not place important copy directly over the photo.
   ============================================================= */

/* ---------- HERO: parent/lineage copy ---------- */
.sampul .asal-usul,
.sampul .asal-usul p {
    color: #173f36 !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: none !important;
}

.sampul .asal-usul p {
    background: rgba(251,248,239,.78);
    border: 1px solid rgba(184,148,78,.18);
    border-radius: 4px;
    padding: 8px 12px;
}

.sampul .pembuka-arab {
    color: #b8944e !important;
    opacity: 1 !important;
}

/* ---------- QUOTE + GREETING ---------- */
/* This section is intentionally opaque: the background photo must not
   compete with readable invitation copy. */
.bagian-kutipan {
    background: #fbf8ef !important;
    color: #342f29 !important;
    position: relative;
}

.bagian-kutipan .bingkai {
    position: relative;
    z-index: 2;
}

.bagian-kutipan .kutipan-teks {
    max-width: 420px;
    margin: 0 auto 28px;
    padding: 27px 24px 21px;
    border: 1px solid rgba(184,148,78,.30);
    background: #fffdf6 !important;
    box-shadow: 0 10px 28px rgba(23,63,54,.07);
}

.bagian-kutipan .kutipan-teks p {
    color: #173f36 !important;
    opacity: 1 !important;
}

.bagian-kutipan .kutipan-teks cite {
    color: #9b793e !important;
    opacity: 1 !important;
}

.bagian-kutipan .sambutan-teks {
    display: block;
    max-width: 420px;
    margin: 0 auto;
    padding: 22px 24px;
    border: 1px solid rgba(184,148,78,.22);
    border-radius: 4px;
    background: #fffdf6 !important;
    color: #342f29 !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 14px;
    line-height: 1.85;
    box-shadow: 0 8px 22px rgba(23,63,54,.05);
}

/* ---------- EVENT SECTION ---------- */
main.bingkai .bagian {
    background: #fbf8ef !important;
}

main.bingkai .bagian-sub {
    color: #514a42 !important;
    opacity: 1 !important;
}

main.bingkai .acara {
    background: #fffdf6 !important;
    color: #342f29 !important;
}

main.bingkai .acara-baris,
main.bingkai .acara-tempat {
    color: #514a42 !important;
    opacity: 1 !important;
}

main.bingkai .acara-nama {
    color: #173f36 !important;
}

/* ---------- UNIVERSAL SAFETY NET FOR IMPORTANT COPY ----------
   Only normal content areas are targeted; footer/lightbox controls
   are left alone. */
.bagian:not(.bagian-rsvp) p {
    opacity: 1;
}

.bagian:not(.bagian-rsvp) p.sambutan-teks,
.bagian:not(.bagian-rsvp) p.bagian-sub,
.bagian:not(.bagian-rsvp) p.kisah-cerita {
    color: #342f29 !important;
}

.bagian:not(.bagian-rsvp) h2,
.bagian:not(.bagian-rsvp) h3 {
    color: #173f36 !important;
}

@media (max-width: 560px) {
    .sampul .asal-usul p {
        padding: 7px 10px;
        font-size: 12.5px;
        background: rgba(251,248,239,.90);
    }

    .bagian-kutipan .sambutan-teks {
        padding: 20px 18px;
        font-size: 14px;
        line-height: 1.82;
    }

    main.bingkai .bagian-sub {
        padding-left: 8px;
        padding-right: 8px;
        font-size: 14px;
    }
}


/* ================================================================
   ISLAMIC V3 — SAFIYA
   Original visual direction:
   "Modern Islamic editorial" — not an ornament-heavy wedding card.
   Palette: midnight teal, parchment, champagne gold, muted olive.
   ================================================================ */

:root {
    --v3-night: #102f2d;
    --v3-night-2: #183f3a;
    --v3-parchment: #f5efe3;
    --v3-paper: #fffdf8;
    --v3-paper-2: #eee5d4;
    --v3-gold: #b99654;
    --v3-gold-light: #d8c28e;
    --v3-olive: #697965;
    --v3-ink: #292c29;
    --v3-muted: #6d6b64;
    --v3-line: rgba(16,47,45,.14);
}

/* ---- Base ---- */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 18px;
}

body {
    overflow-x: hidden;
    color: var(--v3-ink);
    background: var(--v3-parchment);
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -2;
    background:
        radial-gradient(circle at 0 0, rgba(185,150,84,.09), transparent 24%),
        radial-gradient(circle at 100% 100%, rgba(24,63,58,.07), transparent 27%);
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: .18;
    background-image:
        radial-gradient(rgba(41,44,41,.14) .6px, transparent .7px);
    background-size: 7px 7px;
    mix-blend-mode: multiply;
}

/* ---- Hero: split editorial composition ---- */
.sampul {
    position: relative;
    min-height: 100dvh;
    overflow: hidden;
    isolation: isolate;
    background: var(--v3-night);
    color: var(--v3-paper);
    display: flex;
    align-items: center;
}

.sampul::before {
    content: '';
    position: absolute;
    width: min(72vw, 410px);
    height: min(72vw, 410px);
    right: -110px;
    top: 13%;
    border: 1px solid rgba(216,194,142,.33);
    border-radius: 50%;
    box-shadow:
        0 0 0 28px rgba(216,194,142,.025),
        0 0 0 64px rgba(216,194,142,.018);
    animation: v3-orbit 15s linear infinite;
}

.sampul::after {
    content: 'بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ';
    position: absolute;
    top: 8.5%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    color: var(--v3-gold-light);
    font-family: Georgia, serif;
    font-size: clamp(15px, 4vw, 21px);
    letter-spacing: .03em;
    opacity: .92;
}

@keyframes v3-orbit {
    to { transform: rotate(360deg); }
}

.sampul .bingkai,
.sampul > div {
    position: relative;
    z-index: 2;
}

/* Deep veil behind hero text if a photo exists */
.sampul .foto-sampul,
.sampul img {
    opacity: .26 !important;
    filter: saturate(.72) contrast(.92);
}

.pembuka {
    color: var(--v3-gold-light) !important;
    font-size: 9px;
    letter-spacing: .34em;
    text-transform: uppercase;
    text-align: center;
    animation: v3-fade .9s ease both;
}

.pembuka::before,
.pembuka::after {
    content: '—';
    color: var(--v3-gold);
    margin: 0 10px;
}

.pembuka-arab,
.sampul .bismillah,
.sampul [class*="bismillah"],
.sampul [class*="basmalah"] {
    color: var(--v3-gold-light) !important;
}

.nama-pasangan {
    color: var(--v3-paper) !important;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(54px, 15vw, 82px);
    font-weight: 400;
    line-height: .91;
    letter-spacing: -.055em;
    text-align: center;
    animation: v3-title 1s .12s cubic-bezier(.16,.78,.22,1) both;
}

.dan {
    display: block;
    margin: 7px 0;
    color: var(--v3-gold-light) !important;
    font-size: .40em;
    font-style: italic;
    letter-spacing: 0;
}

.asal-usul {
    max-width: 430px;
    margin: 18px auto 0;
    color: rgba(255,253,248,.84) !important;
    text-align: center;
    font-size: 12px;
    line-height: 1.75;
    animation: v3-fade .8s .34s ease both;
}

.asal-usul p {
    color: rgba(255,253,248,.84) !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

.garis-kuningan {
    width: 110px;
    height: 1px;
    margin: 25px auto 17px;
    background: linear-gradient(90deg, transparent, var(--v3-gold), transparent);
    border: 0;
}

.garis-kuningan::after {
    content: '✦';
    color: var(--v3-gold-light);
    background: var(--v3-night);
    padding: 0 8px;
    font-size: 8px;
}

.tanggal-utama {
    color: var(--v3-paper) !important;
    font-family: Georgia, serif;
    font-size: 17px;
    letter-spacing: .10em;
    text-align: center;
}

/* ---- Countdown: one clean horizontal strip ---- */
.hitung-mundur {
    display: flex;
    justify-content: center;
    gap: 0;
    margin: 26px auto 0;
    padding: 0;
    border: 1px solid rgba(216,194,142,.32);
    background: rgba(255,255,255,.035);
    max-width: 390px;
    border-radius: 2px;
    overflow: hidden;
}

.hm-kotak {
    min-width: 72px;
    padding: 12px 8px 10px;
    border: 0;
    border-right: 1px solid rgba(216,194,142,.24);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.hm-kotak:last-child { border-right: 0; }

.hm-angka {
    color: var(--v3-paper) !important;
    font-family: Georgia, serif;
    font-size: 26px;
}

.hm-label {
    color: var(--v3-gold-light) !important;
    letter-spacing: .16em;
    font-size: 7px;
}

/* ---- Guest card: a "letterhead" instead of a generic box ---- */
.pelat {
    max-width: 420px;
    margin: 31px auto 0;
    padding: 19px 24px 17px;
    background: var(--v3-paper) !important;
    border: 0;
    border-left: 4px solid var(--v3-gold);
    border-radius: 0;
    box-shadow: 0 16px 42px rgba(0,0,0,.15);
}

.pelat::before,
.pelat::after {
    display: none;
}

.pelat-label {
    color: var(--v3-gold) !important;
    letter-spacing: .22em;
}

.pelat-nama {
    color: var(--v3-night) !important;
    font-family: Georgia, serif;
    font-size: 22px;
}

.pelat-catatan {
    color: var(--v3-muted) !important;
}

/* ---- Sections: alternating parchment / night panels ---- */
.bagian {
    position: relative;
    padding: 72px 0;
    border-top: 1px solid var(--v3-line);
    background: var(--v3-parchment) !important;
}

.bagian:nth-of-type(even) {
    background: var(--v3-paper) !important;
}

.bagian-judul {
    color: var(--v3-night) !important;
    font-family: Georgia, serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .20em;
    text-transform: uppercase;
    text-align: center;
}

.bagian-judul::before,
.bagian-judul::after {
    content: '✦';
    width: auto;
    height: auto;
    background: none;
    color: var(--v3-gold);
    font-size: 7px;
}

.bagian-sub {
    color: var(--v3-muted) !important;
    font-family: Georgia, serif;
    text-align: center;
    font-size: 20px;
    line-height: 1.55;
}

/* ---- Quote: oversized editorial quotation ---- */
.bagian-kutipan {
    background: var(--v3-paper) !important;
}

.bagian-kutipan .kutipan-teks {
    max-width: 500px;
    margin: 0 auto 24px;
    padding: 12px 22px 24px;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
    text-align: center;
}

.bagian-kutipan .kutipan-teks::before {
    content: '“';
    position: static;
    display: block;
    transform: none;
    padding: 0;
    background: transparent;
    color: var(--v3-gold);
    font: 72px/.65 Georgia, serif;
}

.bagian-kutipan .kutipan-teks p {
    color: var(--v3-night) !important;
    font-family: Georgia, serif;
    font-size: clamp(18px, 4.7vw, 24px);
    font-style: italic;
    line-height: 1.75;
}

.bagian-kutipan .kutipan-teks cite {
    color: var(--v3-gold) !important;
    font-size: 11px;
    letter-spacing: .10em;
}

/* Greeting: no photo behind copy */
.bagian-kutipan .sambutan-teks {
    display: block;
    max-width: 490px;
    margin: 30px auto 0;
    padding: 23px 24px;
    border-top: 1px solid var(--v3-line);
    border-bottom: 1px solid var(--v3-line);
    background: transparent !important;
    color: var(--v3-ink) !important;
    font-size: 14px;
    line-height: 1.9;
    text-align: center;
}

/* ---- Event cards: timeline-like ---- */
.acara {
    position: relative;
    padding: 28px 22px 27px;
    margin: 0 auto 17px;
    max-width: 470px;
    border: 1px solid var(--v3-line);
    border-radius: 0;
    background: var(--v3-paper) !important;
    color: var(--v3-ink) !important;
    box-shadow: 0 9px 30px rgba(16,47,45,.055);
    text-align: center;
}

.acara::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -7px;
    width: 13px;
    height: 13px;
    transform: translateX(-50%) rotate(45deg);
    border: 1px solid var(--v3-gold);
    background: var(--v3-paper);
}

.acara::after {
    display: none;
}

.acara-jenis {
    color: var(--v3-gold) !important;
    letter-spacing: .23em;
    font-size: 8px;
}

.acara-nama {
    color: var(--v3-night) !important;
    font-family: Georgia, serif;
    font-size: 25px;
}

.acara-tempat,
.acara-baris {
    color: #595951 !important;
}

.acara-peta {
    border: 1px solid var(--v3-night);
    border-radius: 2px;
    color: var(--v3-night) !important;
}

.acara-peta:hover {
    background: var(--v3-night);
    color: var(--v3-paper) !important;
}

/* ---- Story: magazine timeline ---- */
.kisah-item {
    position: relative;
    padding: 0 0 38px;
    margin: 0 auto 38px;
    max-width: 510px;
    border: 0;
}

.kisah-item::before {
    content: '0' counter(v3-story);
    counter-increment: v3-story;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0 auto 13px;
    border: 1px solid var(--v3-gold);
    border-radius: 50%;
    color: var(--v3-gold);
    font: 12px Georgia, serif;
}

.bagian-kisah {
    counter-reset: v3-story;
}

.kisah-foto {
    border: 0;
    border-radius: 0;
    box-shadow: 0 14px 35px rgba(16,47,45,.12);
    filter: saturate(.84);
}

.kisah-item:hover .kisah-foto {
    transform: none;
    filter: saturate(1);
}

.kisah-teks {
    padding-top: 17px;
    text-align: center;
}

.kisah-waktu {
    color: var(--v3-gold) !important;
    letter-spacing: .18em;
    font-size: 9px;
}

.kisah-judul {
    color: var(--v3-night) !important;
    font-family: Georgia, serif;
    font-size: 23px;
}

.kisah-cerita {
    color: var(--v3-ink) !important;
    line-height: 1.85;
}

/* ---- Gallery: strict editorial grid ---- */
.grid-galeri {
    gap: 9px;
}

.galeri-item {
    border-radius: 0;
    box-shadow: none;
    border: 1px solid rgba(16,47,45,.08);
}

.galeri-item img {
    filter: saturate(.82);
    transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .45s ease;
}

.galeri-item:hover img {
    transform: scale(1.045);
    filter: saturate(1);
}

.galeri-item::after {
    content: '↗';
    position: absolute;
    right: 9px;
    bottom: 9px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: var(--v3-paper);
    color: var(--v3-night);
    opacity: 0;
    transform: translateY(5px);
    transition: opacity .25s ease, transform .25s ease;
}

.galeri-item:hover::after {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Envelope / RSVP ---- */
.bagian-amplop,
.bagian-rsvp {
    background: var(--v3-night) !important;
    color: var(--v3-paper) !important;
}

.bagian-amplop .bagian-judul,
.bagian-rsvp .bagian-judul,
.bagian-amplop .bagian-sub,
.bagian-rsvp .bagian-sub {
    color: var(--v3-paper) !important;
}

.kartu-amplop {
    color: var(--v3-paper);
}

.amplop-qr {
    border: 1px solid rgba(216,194,142,.36);
    border-radius: 0;
    background: var(--v3-paper);
}

.tombol-kirim {
    border-radius: 0;
    background: var(--v3-gold);
    color: #fff !important;
    box-shadow: none;
    transition: background .25s ease, transform .25s ease;
}

.tombol-kirim:hover {
    background: #c5a765;
    transform: translateY(-2px);
}

/* ---- Floating menu: vertical "prayer beads" dock ---- */
.islamic-floating-nav {
    position: fixed;
    right: 13px;
    bottom: 15px;
    z-index: 980;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 8px;
}

.islamic-dock {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    border: 1px solid rgba(185,150,84,.34);
    border-radius: 28px;
    background: rgba(16,47,45,.94);
    box-shadow: 0 17px 38px rgba(0,0,0,.22);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    transform: translateY(15px) scale(.92);
    transform-origin: bottom center;
    pointer-events: none;
    transition: opacity .25s ease, transform .34s cubic-bezier(.2,.8,.2,1);
}

.islamic-floating-nav.terbuka .islamic-dock {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.islamic-nav-item {
    width: 39px;
    height: 39px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--v3-paper);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.islamic-nav-item:hover {
    background: rgba(216,194,142,.13);
    transform: scale(1.05);
}

.islamic-nav-icon {
    width: 27px;
    height: 27px;
    border: 1px solid rgba(216,194,142,.52);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--v3-gold-light);
    font: 12px Georgia, serif;
}

.islamic-nav-label {
    display: none;
}

.islamic-toggle {
    position: relative;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border: 1px solid var(--v3-gold);
    border-radius: 50%;
    background: var(--v3-night);
    color: var(--v3-gold-light);
    box-shadow: 0 14px 34px rgba(0,0,0,.24);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .35s ease, background .25s ease;
}

.islamic-toggle::before {
    content: '';
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(216,194,142,.55);
    border-radius: 50%;
}

.islamic-toggle:hover {
    transform: translateY(-3px);
}

.islamic-floating-nav.terbuka .islamic-toggle {
    transform: rotate(45deg);
    background: var(--v3-gold);
    color: var(--v3-night);
}

.islamic-toggle-ornament {
    display: none;
}

.islamic-toggle-icon {
    position: relative;
    z-index: 2;
    font-size: 19px;
}

/* ---- Progress & music ---- */
.islamic-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    z-index: 1200;
    background: var(--v3-gold);
}

.tombol-musik {
    right: 14px;
    bottom: 80px;
    width: 43px;
    height: 43px;
    border: 1px solid rgba(185,150,84,.46);
    border-radius: 50%;
    background: var(--v3-paper);
    color: var(--v3-night);
    box-shadow: 0 9px 24px rgba(0,0,0,.13);
}

/* ---- Motion ---- */
@keyframes v3-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes v3-title {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 560px) {
    .sampul::after {
        top: 7.5%;
        font-size: 14px;
    }

    .nama-pasangan {
        font-size: clamp(52px, 16vw, 72px);
    }

    .hitung-mundur {
        max-width: calc(100% - 34px);
    }

    .hm-kotak {
        min-width: 0;
        flex: 1;
    }

    .hm-angka {
        font-size: 23px;
    }

    .pelat {
        margin-left: 16px;
        margin-right: 16px;
    }

    .bagian {
        padding: 58px 0;
    }

    .bagian-kutipan .sambutan-teks {
        margin-left: 16px;
        margin-right: 16px;
        padding-left: 14px;
        padding-right: 14px;
    }

    .islamic-floating-nav {
        right: 9px;
        bottom: 10px;
    }

    .islamic-toggle {
        width: 51px;
        height: 51px;
        flex-basis: 51px;
    }

    .tombol-musik {
        right: 10px;
        bottom: 69px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .sampul::before,
    .pembuka,
    .nama-pasangan,
    .asal-usul {
        animation: none !important;
    }

    .islamic-dock,
    .islamic-toggle,
    .galeri-item img,
    .tombol-kirim {
        transition: none !important;
    }
}


/* ================================================================
   ISLAMIC V3 SAFIYA — READABLE EDITION
   Design principle: contrast first, ornament second.
   The hero keeps the midnight-teal identity but puts every
   important text element on a warm parchment content panel.
   ================================================================ */

:root {
    --r-night: #103633;
    --r-night-2: #174943;
    --r-paper: #fffaf0;
    --r-paper-deep: #f0e6d4;
    --r-ink: #24312e;
    --r-gold: #b78f48;
    --r-gold-dark: #8d6c34;
    --r-muted: #625f58;
}

/* Hero becomes a controlled composition rather than text directly
   sitting on the dark/photo layer. */
.sampul {
    background:
        radial-gradient(circle at 50% 36%, rgba(255,250,240,.12), transparent 32%),
        var(--r-night) !important;
    color: var(--r-ink) !important;
    padding: 54px 14px 40px;
    box-sizing: border-box;
}

/* Keep the photo decorative and quiet. */
.sampul .foto-sampul,
.sampul > img {
    opacity: .12 !important;
    filter: grayscale(.18) saturate(.55) !important;
}

/* A single parchment "invitation sheet" behind all hero copy. */
.sampul .bingkai {
    position: relative;
    z-index: 5;
    width: min(100%, 470px);
    margin: 0 auto;
    padding: 82px 22px 28px;
    box-sizing: border-box;
    background: rgba(255,250,240,.97) !important;
    border: 1px solid rgba(183,143,72,.65);
    border-radius: 2px;
    box-shadow:
        0 22px 55px rgba(0,0,0,.25),
        inset 0 0 0 7px rgba(183,143,72,.07);
}

/* Gold inner rule */
.sampul .bingkai::before {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(183,143,72,.22);
    pointer-events: none;
}

/* Basmalah and opener */
.sampul .pembuka,
.sampul .pembuka-arab,
.sampul .bismillah,
.sampul [class*="bismillah"],
.sampul [class*="basmalah"] {
    position: relative;
    z-index: 6;
    color: var(--r-gold-dark) !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

.sampul::after {
    top: 72px;
    color: var(--r-gold-dark) !important;
    opacity: 1 !important;
    font-size: 15px;
    z-index: 7;
}

/* Names: strongest contrast and no transparency. */
.sampul .nama-pasangan {
    position: relative;
    z-index: 6;
    color: var(--r-night) !important;
    opacity: 1 !important;
    text-shadow: none !important;
    font-weight: 400;
}

.sampul .dan {
    color: var(--r-gold-dark) !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Parents: dark text, explicitly opaque. */
.sampul .asal-usul,
.sampul .asal-usul p,
.sampul [class*="orangtua"],
.sampul [class*="ortu"],
.sampul .nama-orangtua {
    position: relative;
    z-index: 6;
    color: var(--r-ink) !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: none !important;
}

.sampul .asal-usul p {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0;
}

/* Date */
.sampul .tanggal-utama {
    position: relative;
    z-index: 6;
    color: var(--r-night) !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Decorative line belongs to the parchment sheet. */
.sampul .garis-kuningan::after {
    background: var(--r-paper) !important;
    color: var(--r-gold) !important;
}

/* Countdown: readable dark cards, not dark-on-dark. */
.sampul .hitung-mundur {
    position: relative;
    z-index: 6;
    background: transparent !important;
    border: 0 !important;
    overflow: visible;
    gap: 6px;
}

.sampul .hm-kotak {
    background: #fffdf8 !important;
    border: 1px solid rgba(183,143,72,.38) !important;
    border-radius: 2px !important;
    box-shadow: 0 5px 14px rgba(35,49,46,.08) !important;
}

.sampul .hm-angka {
    color: var(--r-night) !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

.sampul .hm-label {
    color: var(--r-gold-dark) !important;
    opacity: 1 !important;
}

/* Guest card remains premium but with a stronger edge. */
.sampul .pelat {
    position: relative;
    z-index: 6;
    background: #fffdf8 !important;
    color: var(--r-ink) !important;
    border-left: 4px solid var(--r-gold) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.15);
}

.sampul .pelat-label {
    color: var(--r-gold-dark) !important;
}

.sampul .pelat-nama {
    color: var(--r-night) !important;
}

.sampul .pelat-catatan {
    color: var(--r-muted) !important;
}

/* Section readability: every text block gets a stable contrast. */
.bagian,
.bagian:nth-of-type(even),
.bagian:nth-of-type(odd) {
    color: var(--r-ink) !important;
    background: var(--r-paper) !important;
}

.bagian-judul,
.bagian h2,
.bagian h3 {
    color: var(--r-night) !important;
}

.bagian-sub,
.bagian p,
.sambutan-teks,
.kisah-cerita,
.acara-baris,
.acara-tempat {
    color: var(--r-ink) !important;
    opacity: 1 !important;
}

/* Sambutan gets a dedicated reading column. */
.bagian-kutipan .sambutan-teks {
    max-width: 500px;
    margin: 28px auto 0;
    padding: 22px 20px;
    background: #fffdf8 !important;
    border: 1px solid rgba(183,143,72,.20);
    color: var(--r-ink) !important;
    line-height: 1.9;
}

/* Event cards */
.acara {
    background: #fffdf8 !important;
    color: var(--r-ink) !important;
    border-color: rgba(183,143,72,.25);
}

.acara-nama {
    color: var(--r-night) !important;
}

.acara-tempat,
.acara-baris {
    color: #55524b !important;
}

/* Floating buttons stay dark because their icons are gold/white. */
.islamic-dock {
    background: rgba(16,54,51,.97) !important;
}

.islamic-toggle {
    background: var(--r-night) !important;
    color: var(--r-gold-light) !important;
}

/* Mobile: maximize readable width and spacing. */
@media (max-width: 560px) {
    .sampul {
        padding: 44px 9px 28px;
    }

    .sampul .bingkai {
        padding: 78px 15px 24px;
        width: 100%;
    }

    .sampul .nama-pasangan {
        font-size: clamp(50px, 16vw, 72px);
    }

    .sampul .asal-usul,
    .sampul .asal-usul p {
        font-size: 12px !important;
        line-height: 1.72 !important;
    }

    .sampul .tanggal-utama {
        font-size: 16px !important;
    }

    .sampul .hm-kotak {
        padding: 10px 5px 9px;
    }

    .sampul .hm-angka {
        font-size: 23px !important;
    }

    .sampul .pelat {
        margin-left: 0;
        margin-right: 0;
    }
}


/* ================================================================
   ISLAMIC V3 SAFIYA — FINAL VISUAL
   "Ivory Mihrab Editorial"

   Important correction:
   The previous version attempted to style .sampul .bingkai,
   but .bingkai belongs to the later sections, not the hero.
   This layer therefore styles the ACTUAL hero DOM directly.
   ================================================================ */

:root {
    --final-ivory: #f8f3e8;
    --final-paper: #fffdf8;
    --final-emerald: #173f3a;
    --final-emerald-soft: #315b53;
    --final-gold: #b58c45;
    --final-gold-dark: #8d6b32;
    --final-ink: #30332f;
    --final-muted: #68665e;
}

/* ---------- HERO ---------- */
.sampul {
    min-height: 100dvh;
    padding: 70px 16px 34px;
    box-sizing: border-box;
    background:
        radial-gradient(circle at 50% 32%, rgba(181,140,69,.10), transparent 31%),
        var(--final-ivory) !important;
    color: var(--final-ink) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

/* Soft photo wash, never dark enough to compete with text. */
.sampul .foto-sampul,
.sampul > img {
    opacity: .16 !important;
    filter: saturate(.48) contrast(.88) !important;
    mix-blend-mode: multiply;
}

/* Large ornamental mihrab arch. */
.sampul::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 10%;
    width: min(86vw, 440px);
    height: min(86vw, 440px);
    transform: translateX(-50%);
    border: 1px solid rgba(181,140,69,.34);
    border-bottom-color: rgba(181,140,69,.16);
    border-radius: 50% 50% 12px 12px;
    box-shadow:
        0 0 0 12px rgba(181,140,69,.025),
        inset 0 0 45px rgba(181,140,69,.035);
    pointer-events: none;
    z-index: 0;
}

/* Only one basmalah ornament — no duplicate line. */
.sampul::after {
    content: '✦';
    top: 8.2%;
    left: 50%;
    transform: translateX(-50%);
    color: var(--final-gold) !important;
    font-size: 10px;
    opacity: 1;
    z-index: 4;
}

/* Every direct hero element sits above the ornament. */
.sampul > * {
    position: relative;
    z-index: 3;
}

/* Opener */
.sampul .pembuka {
    margin-top: 14px;
    color: var(--final-gold-dark) !important;
    font-size: 9px;
    letter-spacing: .30em;
    text-transform: uppercase;
    text-shadow: none !important;
    animation: v3-fade .8s ease both;
}

.sampul .pembuka::before,
.sampul .pembuka::after {
    content: '—';
    margin: 0 9px;
    color: var(--final-gold) !important;
}

/* Real Bismillah element from index.php */
.sampul .pembuka-arab {
    margin: 11px 0 0;
    color: var(--final-gold-dark) !important;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(21px, 6vw, 29px);
    line-height: 1.5;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Couple names — maximum contrast. */
.sampul .nama-pasangan {
    margin: 20px 0 0;
    color: var(--final-emerald) !important;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(54px, 16vw, 82px);
    font-weight: 400;
    line-height: .88;
    letter-spacing: -.055em;
    text-align: center;
    text-shadow: none !important;
    opacity: 1 !important;
}

.sampul .dan {
    display: block;
    margin: 8px 0;
    color: var(--final-gold-dark) !important;
    font-size: .38em;
    line-height: 1;
}

/* Parents — actual class in the PHP. */
.sampul .asal-usul {
    max-width: 430px;
    margin: 22px auto 0;
    color: var(--final-ink) !important;
    opacity: 1 !important;
    text-align: center;
    font-size: 12px;
    line-height: 1.72;
    text-shadow: none !important;
}

.sampul .asal-usul p {
    margin: 7px 0;
    padding: 0 !important;
    color: var(--final-ink) !important;
    background: transparent !important;
    border: 0 !important;
    opacity: 1 !important;
}

/* Name inside parents slightly stronger. */
.sampul .asal-usul p br:first-of-type {
    color: var(--final-emerald);
}

/* Divider */
.sampul .garis-kuningan {
    width: 105px;
    height: 1px;
    margin: 24px auto 16px;
    background: linear-gradient(90deg, transparent, var(--final-gold), transparent);
    border: 0;
}

.sampul .garis-kuningan::after {
    content: '✦';
    background: var(--final-ivory) !important;
    color: var(--final-gold) !important;
    padding: 0 8px;
}

/* Date */
.sampul .tanggal-utama {
    color: var(--final-emerald) !important;
    font-family: Georgia, serif;
    font-size: 17px;
    letter-spacing: .08em;
    text-align: center;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Countdown */
.sampul .hitung-mundur {
    width: min(100%, 400px);
    margin: 25px auto 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
    border: 0 !important;
    background: transparent !important;
}

.sampul .hm-kotak {
    min-width: 67px;
    flex: 1;
    max-width: 90px;
    padding: 11px 5px 9px;
    border: 1px solid rgba(181,140,69,.30) !important;
    border-radius: 3px !important;
    background: rgba(255,253,248,.96) !important;
    box-shadow: 0 6px 17px rgba(23,63,58,.07) !important;
}

.sampul .hm-angka {
    color: var(--final-emerald) !important;
    font-family: Georgia, serif;
    font-size: 25px;
    opacity: 1 !important;
}

.sampul .hm-label {
    color: var(--final-gold-dark) !important;
    font-size: 7px;
    letter-spacing: .15em;
    opacity: 1 !important;
}

/* Guest card */
.sampul .pelat {
    width: min(100%, 420px);
    margin: 30px auto 0;
    padding: 18px 22px;
    box-sizing: border-box;
    background: var(--final-paper) !important;
    border: 1px solid rgba(181,140,69,.28) !important;
    border-left: 4px solid var(--final-gold) !important;
    border-radius: 2px !important;
    box-shadow: 0 13px 30px rgba(23,63,58,.10) !important;
    color: var(--final-ink) !important;
}

.sampul .pelat-label {
    color: var(--final-gold-dark) !important;
}

.sampul .pelat-nama {
    color: var(--final-emerald) !important;
    font-family: Georgia, serif;
    font-size: 22px;
}

.sampul .pelat-catatan {
    color: var(--final-muted) !important;
}

/* ---------- SECTIONS ---------- */
.bagian,
.bagian:nth-of-type(even),
.bagian:nth-of-type(odd) {
    background: var(--final-ivory) !important;
    color: var(--final-ink) !important;
}

.bagian .bagian-judul,
.bagian h2,
.bagian h3 {
    color: var(--final-emerald) !important;
}

.bagian .bagian-sub,
.bagian p,
.bagian .sambutan-teks,
.bagian .kisah-cerita,
.bagian .acara-tempat,
.bagian .acara-baris {
    color: var(--final-ink) !important;
    opacity: 1 !important;
}

/* Quote */
.bagian-kutipan .kutipan-teks {
    background: var(--final-paper) !important;
    border: 1px solid rgba(181,140,69,.20);
    padding: 26px 20px 20px;
}

.bagian-kutipan .kutipan-teks p {
    color: var(--final-emerald) !important;
    opacity: 1 !important;
}

.bagian-kutipan .kutipan-teks cite {
    color: var(--final-gold-dark) !important;
}

.bagian-kutipan .sambutan-teks {
    background: var(--final-paper) !important;
    color: var(--final-ink) !important;
    border: 1px solid rgba(181,140,69,.16);
    opacity: 1 !important;
}

/* Events */
.acara {
    background: var(--final-paper) !important;
    color: var(--final-ink) !important;
    border-color: rgba(181,140,69,.23) !important;
}

.acara-nama {
    color: var(--final-emerald) !important;
}

.acara-tempat,
.acara-baris {
    color: #56554f !important;
}

/* Floating menu */
.islamic-dock {
    background: rgba(23,63,58,.97) !important;
}

.islamic-toggle {
    background: var(--final-emerald) !important;
    color: var(--final-gold-light) !important;
}

/* ---------- MOBILE ---------- */
@media (max-width: 560px) {
    .sampul {
        padding: 66px 10px 30px;
    }

    .sampul::before {
        top: 10%;
        width: 94vw;
        height: 94vw;
    }

    .sampul .pembuka-arab {
        font-size: 21px;
    }

    .sampul .nama-pasangan {
        font-size: clamp(50px, 16vw, 72px);
    }

    .sampul .asal-usul {
        font-size: 12px;
        max-width: 360px;
    }

    .sampul .tanggal-utama {
        font-size: 16px;
    }

    .sampul .hm-kotak {
        min-width: 0;
        padding: 10px 4px 8px;
    }

    .sampul .hm-angka {
        font-size: 22px;
    }

    .sampul .pelat {
        width: calc(100% - 18px);
    }
}


/* ================================================================
   NOIR V2 — CINEMATIC WEDDING EDITORIAL
   Original direction:
   charcoal / ivory / champagne, strong typography, photography-first,
   restrained decoration, floating luxury dial.
   ================================================================ */

:root {
    --noir-black: #111110;
    --noir-charcoal: #1b1a18;
    --noir-paper: #f5f1e8;
    --noir-ivory: #fffdf7;
    --noir-gold: #c2a15b;
    --noir-gold-soft: #d7c28d;
    --noir-ink: #292824;
    --noir-muted: #8b8579;
    --noir-line: rgba(245,241,232,.16);
    --noir-dark-line: rgba(17,17,16,.15);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 18px;
}

body {
    overflow-x: hidden;
    background: var(--noir-paper);
    color: var(--noir-ink);
}

/* Minimal cinematic atmosphere */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -2;
    background:
        radial-gradient(circle at 80% 5%, rgba(194,161,91,.07), transparent 28%),
        radial-gradient(circle at 10% 85%, rgba(17,17,16,.05), transparent 26%);
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: .12;
    background-image: radial-gradient(rgba(17,17,16,.25) .5px, transparent .7px);
    background-size: 8px 8px;
    mix-blend-mode: multiply;
}

/* ================================================================
   HERO
   ================================================================ */
.sampul {
    position: relative;
    min-height: 100dvh;
    padding: 34px 14px 38px;
    box-sizing: border-box;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--noir-black) !important;
    color: var(--noir-paper) !important;
}

.sampul::before {
    content: '';
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(194,161,91,.35);
    pointer-events: none;
    z-index: 0;
}

.sampul::after {
    content: '';
    position: absolute;
    width: min(76vw, 430px);
    height: min(76vw, 430px);
    right: -130px;
    top: 12%;
    border: 1px solid rgba(194,161,91,.22);
    border-radius: 50%;
    box-shadow: 0 0 0 18px rgba(194,161,91,.025), 0 0 0 42px rgba(194,161,91,.018);
    animation: noir-orbit 18s linear infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes noir-orbit {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

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

/* If the theme ever contains a hero image, make it cinematic rather than
   decorative text competing with it. */
.sampul img {
    opacity: .18 !important;
    filter: grayscale(.72) contrast(1.08) brightness(.68) !important;
}

/* Small editorial kicker */
.sampul .pembuka {
    color: var(--noir-gold-soft) !important;
    font-size: 9px;
    letter-spacing: .38em;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 13px;
}

.sampul .pembuka::before,
.sampul .pembuka::after {
    content: '—';
    color: var(--noir-gold) !important;
    margin: 0 10px;
}

/* Arabic/bismillah line */
.sampul .pembuka-arab,
.sampul .bismillah,
.sampul [class*="bismillah"],
.sampul [class*="basmalah"] {
    color: var(--noir-gold-soft) !important;
    font-family: Georgia, serif;
    font-size: clamp(18px, 5.3vw, 25px);
    line-height: 1.55;
    text-align: center;
    text-shadow: none !important;
}

/* Giant names */
.sampul .nama-pasangan {
    color: var(--noir-ivory) !important;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(61px, 18vw, 95px);
    font-weight: 400;
    line-height: .80;
    letter-spacing: -.06em;
    text-align: center;
    margin-top: 17px;
    text-shadow: 0 10px 35px rgba(0,0,0,.24) !important;
}

.sampul .dan {
    color: var(--noir-gold-soft) !important;
    font-size: .35em;
    margin: 9px 0;
    letter-spacing: 0;
}

/* Parents / lineage: glassy but readable */
.sampul .asal-usul,
.sampul .asal-usul p {
    color: rgba(255,253,247,.83) !important;
    opacity: 1 !important;
    text-align: center;
    font-size: 11.5px;
    line-height: 1.75;
    text-shadow: none !important;
}

.sampul .asal-usul {
    max-width: 440px;
    margin: 24px auto 0;
    padding: 14px 16px;
    border-top: 1px solid rgba(194,161,91,.24);
    border-bottom: 1px solid rgba(194,161,91,.24);
    background: rgba(0,0,0,.08);
}

.sampul .asal-usul p {
    margin: 4px 0;
}

/* Date */
.sampul .garis-kuningan {
    width: 120px;
    height: 1px;
    margin: 25px auto 16px;
    border: 0;
    background: linear-gradient(90deg, transparent, var(--noir-gold), transparent);
}

.sampul .garis-kuningan::after {
    content: '✦';
    background: var(--noir-black) !important;
    color: var(--noir-gold) !important;
    padding: 0 9px;
}

.sampul .tanggal-utama {
    color: var(--noir-paper) !important;
    font-family: Georgia, serif;
    font-size: 16px;
    letter-spacing: .13em;
    text-transform: uppercase;
    text-align: center;
    opacity: 1 !important;
}

/* Countdown */
.sampul .hitung-mundur {
    width: min(100%, 400px);
    margin: 27px auto 0;
    display: flex;
    gap: 0;
    padding: 0;
    border: 1px solid rgba(194,161,91,.28) !important;
    background: rgba(255,255,255,.025) !important;
    overflow: hidden;
}

.sampul .hm-kotak {
    flex: 1;
    min-width: 0;
    padding: 13px 5px 11px;
    border: 0 !important;
    border-right: 1px solid rgba(194,161,91,.20) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.sampul .hm-kotak:last-child {
    border-right: 0 !important;
}

.sampul .hm-angka {
    color: var(--noir-paper) !important;
    font-family: Georgia, serif;
    font-size: 27px;
}

.sampul .hm-label {
    color: var(--noir-gold-soft) !important;
    font-size: 7px;
    letter-spacing: .16em;
}

/* Guest card: looks like a ticket / invitation label */
.sampul .pelat {
    width: min(100%, 410px);
    margin: 28px auto 0;
    padding: 20px 22px 17px;
    background: var(--noir-ivory) !important;
    border: 0 !important;
    border-left: 4px solid var(--noir-gold) !important;
    border-radius: 0 !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.25) !important;
    color: var(--noir-ink) !important;
    text-align: left;
}

.sampul .pelat-label {
    color: #8c6f38 !important;
    font-size: 9px;
    letter-spacing: .24em;
}

.sampul .pelat-nama {
    color: var(--noir-black) !important;
    font-family: Georgia, serif;
    font-size: 22px;
}

.sampul .pelat-catatan {
    color: var(--noir-muted) !important;
}

/* ================================================================
   SECTIONS
   ================================================================ */
.bagian {
    padding: 72px 0;
    background: var(--noir-paper) !important;
    color: var(--noir-ink) !important;
    border-top: 1px solid var(--noir-dark-line);
}

.bagian:nth-child(even) {
    background: var(--noir-ivory) !important;
}

.bagian-judul {
    color: var(--noir-black) !important;
    font-family: Georgia, serif;
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    text-align: center;
}

.bagian-judul::before,
.bagian-judul::after {
    content: '✦';
    width: auto;
    height: auto;
    background: none;
    color: var(--noir-gold);
    font-size: 7px;
}

.bagian-sub {
    color: var(--noir-muted) !important;
    text-align: center;
    font-family: Georgia, serif;
    font-size: 21px;
    line-height: 1.55;
}

.bagian p,
.sambutan-teks,
.kisah-cerita,
.acara-baris,
.acara-tempat {
    color: var(--noir-ink) !important;
    opacity: 1 !important;
}

/* ================================================================
   QUOTE
   ================================================================ */
.bagian-kutipan {
    background: var(--noir-paper) !important;
    text-align: center;
}

.bagian-kutipan .kutipan-teks {
    max-width: 500px;
    margin: 0 auto 26px;
    padding: 0 18px 26px;
    border: 0;
    background: transparent !important;
    box-shadow: none;
}

.bagian-kutipan .kutipan-teks::before {
    content: '“';
    position: static;
    display: block;
    transform: none;
    background: transparent;
    color: var(--noir-gold);
    padding: 0;
    font: 80px/.65 Georgia, serif;
}

.bagian-kutipan .kutipan-teks p {
    color: var(--noir-black) !important;
    font-family: Georgia, serif;
    font-style: italic;
    font-size: clamp(19px, 5vw, 25px);
    line-height: 1.72;
}

.bagian-kutipan .kutipan-teks cite {
    color: #90733d !important;
}

.bagian-kutipan .sambutan-teks {
    max-width: 540px;
    margin: 25px auto 0;
    padding: 22px 18px;
    border-top: 1px solid var(--noir-dark-line);
    border-bottom: 1px solid var(--noir-dark-line);
    background: transparent !important;
    line-height: 1.9;
}

/* ================================================================
   EVENTS
   ================================================================ */
.acara {
    position: relative;
    padding: 28px 21px;
    margin-bottom: 16px;
    background: var(--noir-ivory) !important;
    border: 1px solid rgba(17,17,16,.10) !important;
    border-radius: 0 !important;
    box-shadow: 0 10px 28px rgba(17,17,16,.05) !important;
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease;
}

.acara::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 11px;
    height: 11px;
    transform: translateX(-50%) rotate(45deg);
    background: var(--noir-ivory);
    border-right: 1px solid rgba(17,17,16,.10);
    border-bottom: 1px solid rgba(17,17,16,.10);
}

.acara:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 35px rgba(17,17,16,.10) !important;
}

.acara-jenis {
    color: #9a7938 !important;
    font-size: 8px;
    letter-spacing: .22em;
}

.acara-nama {
    color: var(--noir-black) !important;
    font-family: Georgia, serif;
    font-size: 25px;
    font-weight: 500;
}

.acara-peta {
    border: 1px solid var(--noir-black);
    border-radius: 0;
    color: var(--noir-black) !important;
    transition: background .22s ease, color .22s ease, transform .22s ease;
}

.acara-peta:hover {
    background: var(--noir-black);
    color: #fff !important;
    transform: translateY(-2px);
}

/* ================================================================
   STORY
   ================================================================ */
.bagian-kisah {
    counter-reset: noir-story;
}

.kisah-item {
    position: relative;
    padding: 0 0 38px;
    margin: 0 auto 38px;
    max-width: 500px;
    border: 0;
}

.kisah-item::before {
    content: '0' counter(noir-story);
    counter-increment: noir-story;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    margin: 0 auto 14px;
    border: 1px solid var(--noir-gold);
    border-radius: 50%;
    color: #92733a;
    font: 11px Georgia, serif;
}

.kisah-foto {
    border: 0;
    border-radius: 0;
    box-shadow: 0 17px 35px rgba(17,17,16,.12);
    filter: saturate(.85) contrast(1.02);
}

.kisah-teks {
    text-align: center;
    padding-top: 17px;
}

.kisah-waktu {
    color: #92733a !important;
    font-size: 9px;
    letter-spacing: .20em;
}

.kisah-judul {
    color: var(--noir-black) !important;
    font-family: Georgia, serif;
    font-size: 23px;
    font-weight: 500;
}

.kisah-cerita {
    color: var(--noir-ink) !important;
}

/* ================================================================
   GALLERY
   ================================================================ */
.grid-galeri {
    gap: 8px;
}

.galeri-item {
    border-radius: 0;
    box-shadow: none;
    border: 1px solid rgba(17,17,16,.09);
}

.galeri-item img {
    filter: saturate(.82);
    transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .45s ease;
}

.galeri-item:hover img {
    transform: scale(1.055);
    filter: saturate(1);
}

.galeri-item::after {
    content: '↗';
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,253,247,.93);
    color: var(--noir-black);
    opacity: 0;
    transform: translateY(5px);
    transition: opacity .2s ease, transform .2s ease;
}

.galeri-item:hover::after {
    opacity: 1;
    transform: translateY(0);
}

/* ================================================================
   DARK CLOSING SECTIONS
   ================================================================ */
.bagian-amplop,
.bagian-rsvp {
    background: var(--noir-black) !important;
    color: var(--noir-paper) !important;
    border-top-color: rgba(194,161,91,.18) !important;
}

.bagian-amplop .bagian-judul,
.bagian-rsvp .bagian-judul,
.bagian-amplop .bagian-sub,
.bagian-rsvp .bagian-sub,
.bagian-amplop p,
.bagian-rsvp p {
    color: var(--noir-paper) !important;
}

.bagian-amplop .bagian-judul::before,
.bagian-amplop .bagian-judul::after,
.bagian-rsvp .bagian-judul::before,
.bagian-rsvp .bagian-judul::after {
    color: var(--noir-gold-soft);
}

.tombol-kirim {
    border-radius: 0;
    background: var(--noir-gold);
    color: var(--noir-black) !important;
    box-shadow: none;
    transition: transform .22s ease, background .22s ease;
}

.tombol-kirim:hover {
    background: var(--noir-gold-soft);
    transform: translateY(-2px);
}

/* ================================================================
   FLOATING LUXURY DIAL
   ================================================================ */
.noir-floating-nav {
    position: fixed;
    right: 12px;
    bottom: 14px;
    z-index: 990;
    display: flex;
    align-items: flex-end;
    gap: 9px;
}

.noir-dock {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 7px;
    border: 1px solid rgba(194,161,91,.28);
    border-radius: 20px;
    background: rgba(17,17,16,.95);
    box-shadow: 0 18px 45px rgba(0,0,0,.28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(14px) scale(.90);
    transform-origin: bottom center;
    pointer-events: none;
    transition: opacity .25s ease, transform .32s cubic-bezier(.2,.8,.2,1);
}

.noir-floating-nav.terbuka .noir-dock {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.noir-nav-item {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--noir-paper);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: inherit;
    transition: transform .2s ease, background .2s ease;
}

.noir-nav-item:hover {
    transform: scale(1.08);
    background: rgba(194,161,91,.10);
}

.noir-nav-icon {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(194,161,91,.55);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--noir-gold-soft);
    font: 12px Georgia, serif;
}

.noir-nav-label {
    display: none;
}

.noir-toggle {
    position: relative;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border: 1px solid var(--noir-gold);
    border-radius: 50%;
    background: var(--noir-black);
    color: var(--noir-gold-soft);
    box-shadow: 0 15px 35px rgba(0,0,0,.29);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .35s ease, background .25s ease;
}

.noir-toggle::before {
    content: '';
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(194,161,91,.55);
    border-radius: 50%;
}

.noir-toggle:hover {
    transform: translateY(-3px);
}

.noir-floating-nav.terbuka .noir-toggle {
    transform: rotate(45deg);
    background: var(--noir-gold);
    color: var(--noir-black);
}

.noir-toggle-ornament {
    display: none;
}

.noir-toggle-icon {
    position: relative;
    z-index: 2;
    font-size: 18px;
}

/* Progress + music */
.noir-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--noir-gold);
    z-index: 1200;
}

.tombol-musik {
    right: 13px;
    bottom: 79px;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    border: 1px solid rgba(194,161,91,.55);
    background: var(--noir-paper);
    color: var(--noir-black);
    box-shadow: 0 10px 24px rgba(0,0,0,.17);
}

.tombol-musik.berputar {
    background: var(--noir-gold);
    color: var(--noir-black);
}

/* Footer */
.kaki {
    background: var(--noir-black) !important;
    color: rgba(245,241,232,.72) !important;
    border-top: 1px solid rgba(194,161,91,.22) !important;
    text-align: center;
}

.kaki-nama {
    color: var(--noir-gold-soft) !important;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 560px) {
    .sampul {
        padding: 34px 10px 28px;
    }

    .sampul::before {
        inset: 11px;
    }

    .sampul::after {
        width: 96vw;
        height: 96vw;
    }

    .sampul .nama-pasangan {
        font-size: clamp(54px, 17vw, 74px);
    }

    .sampul .asal-usul {
        font-size: 11px;
        padding-left: 9px;
        padding-right: 9px;
    }

    .sampul .hitung-mundur {
        max-width: calc(100% - 16px);
    }

    .sampul .hm-angka {
        font-size: 23px;
    }

    .sampul .pelat {
        width: calc(100% - 12px);
    }

    .noir-floating-nav {
        right: 8px;
        bottom: 9px;
    }

    .noir-toggle {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
    }

    .noir-dock {
        padding: 5px;
        gap: 2px;
    }

    .noir-nav-item {
        width: 35px;
        height: 35px;
    }

    .noir-nav-icon {
        width: 25px;
        height: 25px;
    }

    .tombol-musik {
        right: 9px;
        bottom: 67px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .sampul::after { animation: none !important; }
    .noir-dock,
    .noir-toggle,
    .acara,
    .galeri-item img,
    .tombol-kirim {
        transition: none !important;
    }
}

/* ================================================================
   ROYAL LUXE V2 — MOBILE FIRST
   Heritage Palace Wedding
   ================================================================ */

:root {
    --royal-emerald:#173d35;
    --royal-emerald-2:#245247;
    --royal-ivory:#fbf7ed;
    --royal-paper:#fffdf8;
    --royal-gold:#c1a05a;
    --royal-gold-light:#e5d09b;
    --royal-burgundy:#5a2631;
    --royal-ink:#302d29;
    --royal-muted:#777066;
    --royal-line:rgba(193,160,90,.22);
}

html { scroll-behavior:smooth; scroll-padding-top:16px; }

body{
    margin:0; overflow-x:hidden; color:var(--royal-ink);
    background:
      radial-gradient(circle at 8% 5%, rgba(193,160,90,.09), transparent 23%),
      radial-gradient(circle at 92% 84%, rgba(90,38,49,.05), transparent 24%),
      var(--royal-ivory);
}

body::before{
    content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
    opacity:.14;
    background-image:radial-gradient(rgba(48,45,41,.16) .55px, transparent .65px);
    background-size:8px 8px; mix-blend-mode:multiply;
}

.sampul{
    position:relative; min-height:100dvh; overflow:hidden; isolation:isolate;
    padding:42px 11px 30px; box-sizing:border-box;
    display:flex; flex-direction:column; justify-content:center;
    background:
      radial-gradient(circle at 50% 25%, rgba(193,160,90,.11), transparent 31%),
      linear-gradient(180deg,var(--royal-emerald) 0%,#12312d 100%) !important;
    color:var(--royal-ivory) !important;
}

.sampul::before{
    content:''; position:absolute; left:50%; top:7%;
    width:min(92vw,460px); height:72vh; transform:translateX(-50%);
    border:1px solid rgba(227,208,155,.30); border-bottom:0;
    border-radius:50% 50% 0 0;
    box-shadow:0 0 0 11px rgba(227,208,155,.025), inset 0 0 55px rgba(227,208,155,.045);
    pointer-events:none;
}

.sampul::after{
    content:'✦   ❦   ✦'; position:absolute; top:6%;
    left:50%; transform:translateX(-50%); white-space:nowrap;
    color:var(--royal-gold-light); font-size:9px; letter-spacing:.28em;
    pointer-events:none;
}

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

.sampul img{ opacity:.13 !important; filter:grayscale(.8) brightness(.68) saturate(.65)!important; }

.sampul .pembuka{
    color:var(--royal-gold-light)!important; font-size:8px; letter-spacing:.30em;
    text-transform:uppercase; text-align:center; margin-bottom:11px;
}

.sampul .pembuka::before,.sampul .pembuka::after{
    content:'—'; color:var(--royal-gold)!important; margin:0 8px;
}

.sampul .pembuka-arab,.sampul .bismillah,.sampul [class*="bismillah"],.sampul [class*="basmalah"]{
    color:var(--royal-gold-light)!important;
    font-family:Georgia,serif; font-size:clamp(18px,5.4vw,28px);
    line-height:1.55; text-align:center;
}

.sampul .nama-pasangan{
    color:var(--royal-paper)!important;
    font-family:Georgia,'Times New Roman',serif;
    font-size:clamp(56px,17vw,88px); font-weight:400;
    line-height:.84; letter-spacing:-.06em; text-align:center;
    margin-top:17px; text-shadow:0 8px 25px rgba(0,0,0,.22)!important;
}

.sampul .dan{ color:var(--royal-gold-light)!important; font-size:.36em; margin:9px 0; }

.sampul .asal-usul,.sampul .asal-usul p{
    color:rgba(255,253,248,.82)!important; opacity:1!important;
    text-align:center; font-size:11px; line-height:1.72;
}

.sampul .asal-usul{
    max-width:430px; margin:20px auto 0; padding:12px 15px;
    border-top:1px solid rgba(227,208,155,.21);
    border-bottom:1px solid rgba(227,208,155,.21);
}

.sampul .garis-kuningan{
    width:118px;height:1px;margin:23px auto 15px;
    background:linear-gradient(90deg,transparent,var(--royal-gold),transparent);
    border:0;
}

.sampul .garis-kuningan::after{
    content:'◆'; background:var(--royal-emerald)!important;
    color:var(--royal-gold-light)!important; padding:0 8px; font-size:6px;
}

.sampul .tanggal-utama{
    color:var(--royal-paper)!important; font-family:Georgia,serif;
    font-size:15px; letter-spacing:.09em; text-align:center; opacity:1!important;
}

.sampul .hitung-mundur{
    width:min(100%,400px); margin:24px auto 0; padding:0;
    display:flex; gap:5px; border:0!important; background:transparent!important;
}

.sampul .hm-kotak{
    flex:1; min-width:0; padding:10px 4px 9px;
    border:1px solid rgba(227,208,155,.22)!important;
    border-radius:2px!important; background:rgba(255,253,248,.06)!important;
    box-shadow:inset 0 0 0 3px rgba(227,208,155,.018)!important;
}

.sampul .hm-angka{ color:var(--royal-paper)!important; font-family:Georgia,serif; font-size:23px; }
.sampul .hm-label{ color:var(--royal-gold-light)!important; font-size:7px; letter-spacing:.14em; }

.sampul .pelat{
    width:min(100%,405px); margin:28px auto 0; padding:18px 19px 16px;
    box-sizing:border-box; background:var(--royal-paper)!important;
    border:0!important; border-left:4px solid var(--royal-gold)!important;
    border-radius:0; box-shadow:0 17px 42px rgba(0,0,0,.21)!important;
    color:var(--royal-ink)!important; text-align:center;
}

.sampul .pelat-label{ color:var(--royal-gold)!important; font-size:8px; letter-spacing:.22em; }
.sampul .pelat-nama{ color:var(--royal-emerald)!important; font-family:Georgia,serif; font-size:21px; }
.sampul .pelat-catatan{ color:var(--royal-muted)!important; }

.bagian{
    position:relative; padding:62px 0; background:var(--royal-ivory)!important;
    color:var(--royal-ink)!important; border-top:1px solid rgba(90,38,49,.10);
}
.bagian:nth-child(even){ background:var(--royal-paper)!important; }

.bagian-judul{
    color:var(--royal-emerald)!important; font-family:Georgia,serif;
    font-size:12px; font-weight:500; letter-spacing:.21em;
    text-transform:uppercase; text-align:center;
}
.bagian-judul::before,.bagian-judul::after{
    content:'✦'; width:auto; height:auto; background:none;
    color:var(--royal-gold); font-size:7px;
}
.bagian-sub{
    color:var(--royal-muted)!important; font-family:Georgia,serif;
    font-size:20px; line-height:1.55; text-align:center;
}
.bagian p,.sambutan-teks,.kisah-cerita,.acara-baris,.acara-tempat{
    color:var(--royal-ink)!important; opacity:1!important;
}

.bagian-kutipan{ background:var(--royal-paper)!important; text-align:center; }
.bagian-kutipan .kutipan-teks{
    max-width:510px; margin:0 auto 24px; padding:0 16px 23px;
    border:0; background:transparent!important;
}
.bagian-kutipan .kutipan-teks::before{
    content:'❝'; display:block; position:static; transform:none;
    background:transparent; color:var(--royal-gold); padding:0;
    font:46px/.85 Georgia,serif;
}
.bagian-kutipan .kutipan-teks p{
    color:var(--royal-emerald)!important; font-family:Georgia,serif;
    font-size:clamp(18px,4.7vw,24px); font-style:italic; line-height:1.78;
}
.bagian-kutipan .kutipan-teks cite{ color:#8d6b32!important; }
.bagian-kutipan .sambutan-teks{
    max-width:520px; margin:23px auto 0; padding:21px 18px;
    border-top:1px solid var(--royal-line); border-bottom:1px solid var(--royal-line);
    line-height:1.88;
}

.acara{
    position:relative; max-width:480px; margin:0 auto 16px; padding:27px 20px;
    background:var(--royal-paper)!important; color:var(--royal-ink)!important;
    border:1px solid rgba(193,160,90,.25)!important; border-radius:3px!important;
    box-shadow:0 11px 30px rgba(23,61,53,.055)!important; text-align:center;
    transition:transform .28s ease,box-shadow .28s ease;
}
.acara::before{
    content:''; position:absolute; left:50%; top:-7px; width:13px; height:13px;
    transform:translateX(-50%) rotate(45deg); background:var(--royal-paper);
    border-top:1px solid rgba(193,160,90,.25); border-left:1px solid rgba(193,160,90,.25);
}
.acara:hover{ transform:translateY(-4px); box-shadow:0 17px 35px rgba(23,61,53,.10)!important; }
.acara-jenis{ color:var(--royal-gold)!important; font-size:8px; letter-spacing:.23em; }
.acara-nama{ color:var(--royal-emerald)!important; font-family:Georgia,serif; font-size:24px; font-weight:500; }
.acara-baris,.acara-tempat{ color:#5a564e!important; }
.acara-peta{
    color:var(--royal-emerald)!important; border:1px solid var(--royal-emerald)!important;
    border-radius:20px!important;
}
.acara-peta:hover{ color:#fff!important; background:var(--royal-emerald); }

.kisah-item{ position:relative; max-width:510px; margin:0 auto 35px; padding-bottom:35px; border:0; }
.kisah-item::before{
    content:'✧'; display:flex; align-items:center; justify-content:center;
    width:33px; height:33px; margin:0 auto 13px; border:1px solid var(--royal-gold);
    border-radius:50%; color:var(--royal-gold); font-size:11px;
}
.kisah-foto{
    border:4px solid rgba(255,253,248,.96); border-radius:3px;
    box-shadow:0 16px 36px rgba(23,61,53,.11); filter:saturate(.87);
}
.kisah-teks{ padding-top:14px; text-align:center; }
.kisah-waktu{ color:var(--royal-gold)!important; font-size:9px; letter-spacing:.18em; }
.kisah-judul{ color:var(--royal-emerald)!important; font-family:Georgia,serif; font-size:22px; }
.kisah-cerita{ color:var(--royal-ink)!important; line-height:1.84; }

.grid-galeri{ gap:7px; }
.galeri-item{ border-radius:3px; border:1px solid rgba(23,61,53,.07); box-shadow:0 5px 15px rgba(23,61,53,.07); }
.galeri-item img{ filter:saturate(.86); transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .45s ease; }
.galeri-item:hover img{ transform:scale(1.05); filter:saturate(1); }

.bagian-amplop,.bagian-rsvp{
    background:
      radial-gradient(circle at 50% 0, rgba(193,160,90,.09), transparent 33%),
      var(--royal-emerald)!important;
    color:var(--royal-paper)!important;
}
.bagian-amplop .bagian-judul,.bagian-rsvp .bagian-judul,
.bagian-amplop .bagian-sub,.bagian-rsvp .bagian-sub,
.bagian-amplop p,.bagian-rsvp p{ color:var(--royal-paper)!important; }
.tombol-kirim{
    border-radius:22px!important; background:var(--royal-gold)!important;
    color:#1d241f!important; box-shadow:0 9px 24px rgba(0,0,0,.14);
}
.tombol-kirim:hover{ background:var(--royal-gold-light)!important; }

.royal-floating-nav{
    position:fixed; right:9px; bottom:10px; z-index:1000;
    display:flex; flex-direction:column; align-items:flex-end; gap:8px;
}
.royal-dock{
    display:flex; flex-direction:column; gap:4px; padding:6px;
    border:1px solid rgba(193,160,90,.38); border-radius:23px;
    background:rgba(23,61,53,.97); box-shadow:0 16px 40px rgba(0,0,0,.24);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    opacity:0; transform:translateY(12px) scale(.92); transform-origin:bottom right;
    pointer-events:none; transition:opacity .24s ease,transform .32s cubic-bezier(.2,.8,.2,1);
}
.royal-floating-nav.terbuka .royal-dock{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.royal-nav-item{
    width:37px; height:37px; padding:0; border:0; border-radius:50%;
    background:transparent; color:var(--royal-paper); display:flex; align-items:center;
    justify-content:center; text-decoration:none; cursor:pointer; font-family:inherit;
    transition:background .2s ease,transform .2s ease;
}
.royal-nav-item:hover{ background:rgba(193,160,90,.14); transform:scale(1.06); }
.royal-nav-icon{
    width:27px; height:27px; border:1px solid rgba(227,207,154,.58); border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    color:var(--royal-gold-light); font:12px Georgia,serif;
}
.royal-nav-label{ display:none; }
.royal-toggle{
    position:relative; width:53px; height:53px; flex:0 0 53px; border:1px solid var(--royal-gold);
    border-radius:50%; background:var(--royal-emerald); color:var(--royal-gold-light);
    box-shadow:0 15px 34px rgba(0,0,0,.24); cursor:pointer; display:flex;
    align-items:center; justify-content:center; transition:transform .35s ease,background .25s ease;
}
.royal-toggle::before{
    content:''; position:absolute; inset:7px; border:1px solid rgba(227,207,154,.58); border-radius:50%;
}
.royal-toggle:hover{ transform:translateY(-3px); }
.royal-floating-nav.terbuka .royal-toggle{ transform:rotate(45deg); background:var(--royal-burgundy); }
.royal-toggle-icon{ position:relative; z-index:2; font-size:18px; }

.royal-progress{
    position:fixed; top:0; left:0; width:0; height:2px; z-index:1200;
    background:linear-gradient(90deg,var(--royal-burgundy),var(--royal-gold),var(--royal-emerald));
}

.tombol-musik{
    right:9px; bottom:72px; width:42px; height:42px; border-radius:50%;
    border:1px solid rgba(193,160,90,.55); background:var(--royal-paper);
    color:var(--royal-emerald); box-shadow:0 10px 26px rgba(0,0,0,.16);
}
.tombol-musik.berputar{ background:var(--royal-gold); color:var(--royal-emerald); }

.kaki{
    background:var(--royal-emerald)!important; color:rgba(255,253,248,.75)!important;
    border-top-color:rgba(193,160,90,.25)!important; text-align:center;
}
.kaki-nama{ color:var(--royal-gold-light)!important; }

@media (min-width:700px){
    .sampul{ padding-left:24px; padding-right:24px; }
    .sampul .nama-pasangan{ font-size:96px; }
    .bagian{ padding-top:82px; padding-bottom:82px; }
    .royal-floating-nav{ right:18px; bottom:18px; }
}

@media (max-width:560px){
    .sampul{ padding:36px 9px 28px; }
    .sampul::before{ width:96vw; height:72vh; }
    .sampul .nama-pasangan{ font-size:clamp(54px,17vw,74px); }
    .sampul .hitung-mundur{ max-width:calc(100% - 8px); }
    .sampul .pelat{ width:calc(100% - 12px); }
    .royal-floating-nav{ right:8px; bottom:9px; }
    .royal-toggle{ width:50px; height:50px; flex-basis:50px; }
    .royal-dock{ gap:2px; padding:5px; }
    .royal-nav-item{ width:35px; height:35px; }
    .royal-nav-icon{ width:25px; height:25px; }
    .tombol-musik{ right:9px; bottom:67px; }
}

@media (prefers-reduced-motion:reduce){
    html{ scroll-behavior:auto; }
    .sampul::before,.sampul::after,.sampul .pembuka,.sampul .nama-pasangan,
    .royal-dock,.royal-toggle,.acara,.kisah-foto,.galeri-item img{
        animation:none!important; transition:none!important;
    }
}