/* =============================================================
   TEMA CLASSIC V2
   =============================================================

   Warna dasar: krem gading dengan marun formal dan emas tua.
   Ini tema paling tradisional di antara kelimanya, ditujukan
   untuk pasangan yang menginginkan kesan resmi dan mewah tanpa
   sentuhan modern sama sekali.

   ELEMEN PENANDA: medali monogram bundar berisi inisial kedua
   mempelai, dilingkari garis emas ganda -- seperti segel resmi
   pada undangan cetak kelas atas. Berbeda dari segel panel admin
   (yang berisi "WI" tetap), medali di sini berisi inisial yang
   dihitung dari nama mempelai yang sesungguhnya.
   ============================================================= */

:root {
    --warna-utama:  #6B2737;   /* marun formal */
    --warna-kedua:  #FBF7EE;   /* gading */
    --emas:         #A8863E;
    --emas-terang:  #C9A75C;
    --tinta:        #362521;
    --kabur:        #8C7D6E;
    --garis:        #E6DCC4;
}

* { 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;
    border: 10px solid transparent;
    /* Bingkai ganda di tepi layar, ciri undangan cetak formal. */
    box-shadow:
        inset 0 0 0 1px var(--emas),
        inset 0 0 0 7px var(--warna-kedua),
        inset 0 0 0 8px var(--emas-terang);
}

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

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

.dan {
    display: block;
    font-size: .42em;
    font-style: italic;
    color: var(--emas);
    margin: 8px 0;
}

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

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

.garis-kuningan {
    width: 120px; height: 0; margin: 28px auto;
    border-top: 1px solid var(--emas);
    position: relative;
}
.garis-kuningan::before {
    content: '';
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(45deg);
    width: 7px; height: 7px; border: 1px solid var(--emas); background: var(--warna-kedua);
}

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

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

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

.hm-kotak {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 58px;
    padding: 10px 4px;
    border: 1px solid var(--garis);
    background: rgba(255, 255, 255, .5);
    position: relative;
}
.hm-kotak::before {
    content: '';
    position: absolute; inset: 3px;
    border: 1px solid var(--emas-terang);
    pointer-events: none;
}

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

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



/* --- Medali monogram: penanda tema ini --- */

.pelat {
    margin: 36px auto 0;
    padding: 0;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Medali ditulis lewat markup PHP terpisah (lihat index.php),
   bukan hanya CSS, karena isinya -- inisial mempelai -- adalah
   data, bukan dekorasi tetap. */
.medali {
    width: 64px; height: 64px;
    border-radius: 50%;
    border: 2px solid var(--emas);
    box-shadow: 0 0 0 3px var(--warna-kedua), 0 0 0 4px var(--emas-terang);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 20px; font-weight: 600; letter-spacing: .04em;
    color: var(--warna-utama);
    background: var(--warna-kedua);
    margin-bottom: 16px;
}

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

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

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


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

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

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

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


/* --- Acara --- */

.acara {
    border: 1px solid var(--garis);
    padding: 26px 22px;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, .5);
    position: relative;
}
.acara::before {
    content: '';
    position: absolute; inset: 5px;
    border: 1px solid var(--emas-terang);
    pointer-events: none;
}

.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: 24px; font-weight: 600; margin: 0 0 10px; }
.acara-baris { font-size: 14.5px; margin: 3px 0; }
.acara-tempat { color: var(--kabur); font-size: 14px; margin: 10px 0 0; }

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


/* --- Galeri --- */

.bagian-galeri { padding-bottom: 44px; }
.grid-galeri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.galeri-item { display: block; aspect-ratio: 1/1; overflow: hidden; border: 1px solid var(--garis); 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(54,37,33,.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: 4px solid rgba(255,255,255,.9); 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 var(--emas-terang); 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(201,167,92,.25); }


/* --- 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); 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: 2px solid var(--emas); background: var(--warna-kedua); color: var(--warna-utama);
    box-shadow: 0 6px 18px rgba(107,39,55,.18); cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.tombol-musik.berputar .ikon-musik { animation: musik-putar 2.4s linear infinite; }
@keyframes musik-putar { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }


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

.bagian-amplop { padding-bottom: 44px; }
.daftar-amplop { display: flex; flex-direction: column; gap: 14px; }
.kartu-amplop { display: flex; gap: 16px; align-items: center; border: 1px solid var(--garis); padding: 16px; background: rgba(255,255,255,.5); text-align: left; }
.amplop-qr { width: 84px; height: 84px; object-fit: contain; 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: 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: 1px solid; font-size: 14px; margin-bottom: 18px; text-align: left; }
.pesan-notifikasi.pesan-success { background: #F1EFE4; color: #3F6B4F; border-color: #C6D6C9; }
.pesan-notifikasi.pesan-error   { background: #F7EAE7; color: #A8443C; border-color: #E9C6C0; }
.pesan-notifikasi.pesan-warning { background: #F7F0DC; color: #8A6516; border-color: #E9DBAE; }

.kotak-rsvp-terisi { background: rgba(255,255,255,.6); border: 1px solid var(--garis); 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);
}
.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: 1px solid var(--warna-utama);
    background: var(--warna-utama); color: var(--warna-kedua); font-family: inherit;
    font-size: 14px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; cursor: pointer;
}
.tombol-kirim:hover { background: var(--warna-kedua); color: var(--warna-utama); }

.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: 44px 0 54px; text-align: center; border-top: 1px solid var(--garis); color: var(--kabur); font-size: 13px; }
.kaki-nama { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 21px; color: var(--warna-utama); 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;
    border-bottom: 1px solid var(--garis);
}

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

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

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

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

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



/* =============================================================
   CLASSIC V2 — ORNAMENTAL, WARM, ROMANTIC
   Visual direction: ivory + deep wine + antique gold.
   ============================================================= */

:root {
    --classic-ivory: #fbf7ef;
    --classic-paper: #fffdf8;
    --classic-wine: #4a1f2b;
    --classic-wine-2: #6a3041;
    --classic-gold: #b08a4a;
    --classic-gold-soft: #d7bd86;
    --classic-ink: #342a29;
    --classic-muted: #80706d;
    --classic-line: rgba(74,31,43,.16);
}

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

body {
    overflow-x: hidden;
    background:
        radial-gradient(circle at 12% 8%, rgba(176,138,74,.09), transparent 26%),
        radial-gradient(circle at 90% 78%, rgba(74,31,43,.05), transparent 28%),
        var(--classic-ivory);
    color: var(--classic-ink);
}

body::selection {
    background: var(--classic-wine);
    color: #fff;
}

/* Soft paper grain — pure CSS, no external asset */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .18;
    background-image:
        radial-gradient(rgba(74,31,43,.10) .5px, transparent .6px),
        radial-gradient(rgba(176,138,74,.08) .5px, transparent .6px);
    background-size: 17px 17px, 23px 23px;
    background-position: 0 0, 9px 11px;
    mix-blend-mode: multiply;
}

.bingkai {
    max-width: 470px;
}

/* ================= HERO ================= */
.sampul {
    position: relative;
    min-height: 100dvh;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(180deg, rgba(255,253,248,.18), rgba(255,253,248,.88) 76%),
        radial-gradient(circle at 50% 35%, rgba(176,138,74,.08), transparent 38%);
}

.sampul::before,
.sampul::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

.sampul::before {
    width: 310px;
    height: 310px;
    left: 50%;
    top: 47%;
    transform: translate(-50%,-50%);
    border: 1px solid rgba(176,138,74,.25);
    border-radius: 50%;
    box-shadow:
        0 0 0 11px rgba(176,138,74,.035),
        0 0 0 24px rgba(176,138,74,.025);
    animation: classic-halo 9s ease-in-out infinite;
}

.sampul::after {
    inset: 16px;
    border: 1px solid rgba(176,138,74,.30);
    border-radius: 2px;
}

@keyframes classic-halo {
    0%,100% { transform: translate(-50%,-50%) scale(1); opacity: .72; }
    50% { transform: translate(-50%,-50%) scale(1.035); opacity: 1; }
}

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

.pembuka::before,
.pembuka::after {
    content: '❦';
    display: inline-block;
    margin: 0 10px;
    font-size: 12px;
    letter-spacing: 0;
    vertical-align: 1px;
    opacity: .8;
}

.nama-pasangan {
    position: relative;
    z-index: 2;
    color: var(--classic-wine);
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 500;
    letter-spacing: -.045em;
    text-align: center;
    text-shadow: 0 2px 18px rgba(74,31,43,.06);
    animation: classic-name .95s .12s cubic-bezier(.2,.75,.2,1) both;
}

.dan {
    color: var(--classic-gold);
    font-size: .52em;
    font-weight: 400;
    font-family: Georgia, serif;
    margin: 3px 0;
}

.asal-usul {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--classic-muted);
    animation: classic-fade-up .8s .38s ease both;
}

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

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

.tanggal-utama {
    text-align: center;
    color: var(--classic-wine);
    font-family: Georgia, serif;
    letter-spacing: .08em;
    animation: classic-fade-up .8s .58s ease both;
}

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

.hm-kotak {
    min-width: 68px;
    padding: 13px 9px 11px;
    align-items: center;
    border: 1px solid rgba(176,138,74,.25);
    border-radius: 2px;
    background: rgba(255,253,248,.72);
    box-shadow: 0 7px 24px rgba(74,31,43,.05);
    position: relative;
    overflow: hidden;
    transition: transform .3s ease, border-color .3s ease;
}

.hm-kotak::before {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(176,138,74,.10);
}

.hm-kotak:hover {
    transform: translateY(-5px);
    border-color: var(--classic-gold);
}

.hm-angka {
    position: relative;
    z-index: 1;
    color: var(--classic-wine);
    font-family: Georgia, serif;
    font-size: 27px;
    font-weight: 600;
}

.hm-label {
    position: relative;
    z-index: 1;
    color: var(--classic-gold);
    font-size: 9px;
    letter-spacing: .15em;
}

/* ================= TAMU ================= */
.pelat {
    position: relative;
    max-width: 360px;
    margin: 32px auto 0;
    padding: 18px 22px 15px;
    border: 1px solid rgba(176,138,74,.30);
    border-radius: 2px;
    background: rgba(255,253,248,.74);
    box-shadow: 0 13px 34px rgba(74,31,43,.06);
    text-align: center;
    animation: classic-fade-up .8s .85s ease both;
}

.pelat::before,
.pelat::after {
    content: '❧';
    position: absolute;
    top: 50%;
    color: var(--classic-gold);
    font-size: 16px;
    opacity: .65;
}

.pelat::before { left: 10px; transform: translateY(-50%); }
.pelat::after { right: 10px; transform: translateY(-50%) scaleX(-1); }

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

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

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

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

.bagian-judul {
    color: var(--classic-gold);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 13px;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-align: center;
    justify-content: center;
    gap: 12px;
}

.bagian-judul::before,
.bagian-judul::after {
    content: '—';
    color: var(--classic-gold-soft);
    font-family: Georgia, serif;
    width: auto;
    height: auto;
    background: none;
}

.bagian-sub {
    color: var(--classic-wine);
    font-family: Georgia, serif;
    font-weight: 400;
    text-align: center;
    font-size: 21px;
}

/* ================= ACARA ================= */
.acara {
    padding: 22px 20px 23px;
    margin: 0 0 14px;
    border: 1px solid rgba(176,138,74,.24);
    border-radius: 3px;
    background: rgba(255,253,248,.82);
    box-shadow: 0 8px 26px rgba(74,31,43,.045);
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.acara::before { display: none; }

.acara:hover {
    transform: translateY(-4px);
    border-color: rgba(176,138,74,.55);
    box-shadow: 0 14px 34px rgba(74,31,43,.09);
}

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

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

.acara-baris {
    color: var(--classic-ink);
}

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

.acara-peta {
    border: 1px solid var(--classic-wine);
    border-radius: 20px;
    color: var(--classic-wine);
    padding: 8px 17px;
    letter-spacing: .12em;
    transition: all .25s ease;
}

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

/* ================= KUTIPAN ================= */
.bagian-kutipan {
    text-align: center;
    background: linear-gradient(180deg, rgba(176,138,74,.045), transparent);
}

.kutipan-teks {
    max-width: 410px;
    margin: 0 auto 23px;
    padding: 18px 25px;
    border: 0;
    border-top: 1px solid var(--classic-gold-soft);
    border-bottom: 1px solid var(--classic-gold-soft);
    position: relative;
}

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

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

.kutipan-teks cite {
    color: var(--classic-gold);
    font-family: inherit;
    letter-spacing: .08em;
}

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

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

.kisah-foto {
    border-radius: 3px;
    border: 5px solid rgba(255,253,248,.95);
    box-shadow: 0 12px 32px rgba(74,31,43,.10);
    filter: saturate(.88);
    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: 15px; }

.kisah-waktu { color: var(--classic-gold); letter-spacing: .18em; }
.kisah-waktu::before { display: none; }

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

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

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

.galeri-item {
    border-radius: 2px;
    box-shadow: 0 4px 14px rgba(74,31,43,.07);
}

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

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

/* ================= AMPLOP ================= */
.kartu-amplop {
    padding: 19px 4px;
    border-top: 1px solid var(--classic-line);
    transition: transform .3s ease;
}

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

.amplop-qr {
    border: 1px solid rgba(176,138,74,.30);
    border-radius: 3px;
}

/* ================= FORM ================= */
.bagian-rsvp input[type="text"],
.bagian-rsvp input[type="number"],
.bagian-rsvp textarea {
    border-bottom-color: rgba(74,31,43,.22);
}

.bagian-rsvp input:focus,
.bagian-rsvp textarea:focus {
    border-bottom-color: var(--classic-gold);
}

.tombol-kirim {
    border-radius: 24px;
    background: var(--classic-wine);
    box-shadow: 0 9px 25px rgba(74,31,43,.13);
    transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.tombol-kirim:hover {
    background: var(--classic-wine-2);
    transform: translateY(-3px);
    box-shadow: 0 13px 30px rgba(74,31,43,.18);
}

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

.classic-dock {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px;
    border: 1px solid rgba(176,138,74,.25);
    border-radius: 28px;
    background: rgba(255,253,248,.91);
    box-shadow: 0 13px 35px rgba(74,31,43,.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    transform: translateX(16px) scale(.94);
    transform-origin: right center;
    pointer-events: none;
    transition: opacity .28s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}

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

.classic-dock-item {
    min-width: 39px;
    height: 39px;
    padding: 4px 8px;
    border: 0;
    border-radius: 21px;
    background: transparent;
    color: var(--classic-wine);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: background .22s ease, color .22s ease, transform .22s ease;
}

.classic-dock-item:hover {
    background: rgba(176,138,74,.13);
    color: var(--classic-wine);
    transform: translateY(-2px);
}

.classic-dock-icon {
    width: 27px;
    height: 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(176,138,74,.38);
    border-radius: 50%;
    font-family: Georgia, serif;
    font-size: 13px;
}

.classic-dock-label {
    display: none;
    font-size: 9px;
    letter-spacing: .09em;
    text-transform: uppercase;
    font-weight: 700;
}

.classic-dock-toggle {
    position: relative;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border: 1px solid var(--classic-gold);
    border-radius: 50%;
    background: var(--classic-wine);
    color: #fff;
    box-shadow: 0 11px 30px rgba(74,31,43,.23);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .35s ease, background .25s ease;
}

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

.classic-floating-nav.terbuka .classic-dock-toggle {
    transform: rotate(45deg);
    background: var(--classic-wine-2);
}

.classic-dock-toggle-ring {
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(215,189,134,.55);
    border-radius: 50%;
}

.classic-dock-toggle-icon {
    font-size: 18px;
    line-height: 1;
}

.classic-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    z-index: 1200;
    background: linear-gradient(90deg, var(--classic-wine), var(--classic-gold));
    box-shadow: 0 0 10px rgba(176,138,74,.28);
}

/* If music button exists, place it above the dock. */
.tombol-musik {
    right: 16px;
    bottom: 79px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(176,138,74,.45);
    background: rgba(255,253,248,.93);
    color: var(--classic-wine);
    box-shadow: 0 9px 26px rgba(74,31,43,.13);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform .25s ease, background .25s ease, color .25s ease;
}

.tombol-musik:hover {
    transform: translateY(-3px);
}

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

/* ================= MOTION ================= */
@keyframes classic-fade-down {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes classic-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

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

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

@media (max-width: 560px) {
    .classic-floating-nav {
        right: 11px;
        bottom: 11px;
    }
    .classic-dock {
        gap: 2px;
        padding: 5px;
    }
    .classic-dock-item {
        min-width: 35px;
        width: 35px;
        height: 35px;
        padding: 3px;
    }
    .classic-dock-icon {
        width: 25px;
        height: 25px;
    }
    .classic-dock-toggle {
        width: 49px;
        height: 49px;
        flex-basis: 49px;
    }
    .tombol-musik {
        right: 11px;
        bottom: 69px;
    }
    .hm-kotak {
        min-width: 61px;
        padding-left: 5px;
        padding-right: 5px;
    }
    .hm-angka { font-size: 24px; }
}

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