/* =============================================================
   TEMA ELEGAN V2
   =============================================================

   Warna dasar: gading hangat dengan tinta hijau zaitun tua dan
   satu garis kuningan. Hijau zaitun dipilih agar undangan tidak
   jatuh ke kombinasi krem-cokelat yang sudah terlalu umum, tetapi
   tetap terasa tenang dan formal.

   --warna-utama dan --warna-kedua dapat ditimpa oleh pengaturan
   client. Nilainya sudah disaring di router; hanya kode heks yang
   diteruskan ke sini.

   Elemen penanda tema ini adalah PELAT NAMA TAMU: nama tamu
   ditampilkan pada bidang tersendiri berbingkai tipis, seperti
   nama yang dituliskan tangan di muka amplop. Ini juga yang
   membedakan undangan personal dari undangan umum.
   ============================================================= */

:root {
    --warna-utama:  #4A5D45;   /* hijau zaitun tua */
    --warna-kedua:  #FBF8F2;   /* gading hangat */
    --kuningan:     #A98545;
    --tinta:        #2F3A2C;
    --kabur:        #77806F;
    --garis:        #E2DDD0;
}

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

   Dua lapis terpisah, bukan satu background-image langsung di
   body: lapis foto (::before) dan lapis warna tembus pandang
   (::after) di atasnya. Warna tembus pandang itu warna asli tema
   sendiri pada opacity tinggi (.88) -- apa pun foto yang diunggah
   client, teks di atasnya tetap terjaga kontrasnya karena warna
   tema selalu mendominasi, foto hanya menjadi tekstur samar di
   baliknya, bukan gambar utuh yang bisa mengganggu keterbacaan.

   position:fixed (bukan sekadar absolute) supaya foto tidak ikut
   bergeser saat halaman digulir, dan background-attachment:fixed
   SENGAJA tidak dipakai karena terkenal bermasalah performanya
   di Safari mobile -- position:fixed pada elemen terpisah ini
   mencapai efek visual yang sama tanpa masalah itu. */

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

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

.nama-pasangan {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-size: clamp(38px, 12vw, 60px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -.01em;
    color: var(--warna-utama);
    margin: 0;
}

.dan {
    display: block;
    font-size: .48em;
    font-style: italic;
    color: var(--kuningan);
    margin: 6px 0;
}


/* --- Asal usul mempelai --- */

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

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

.garis-kuningan {
    width: 46px;
    height: 1px;
    background: var(--kuningan);
    border: 0;
    margin: 28px auto;
}

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


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

.hitung-mundur {
    display: flex;
    gap: 10px;
    margin: 22px 0 0;
}

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

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

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


/* --- Pelat nama tamu: penanda tema ini --- */

.pelat {
    margin: 34px auto 0;
    padding: 18px 24px;
    max-width: 320px;
    border: 1px solid var(--garis);
    border-radius: 2px;
    background: rgba(255, 255, 255, .55);
}

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

.pelat-nama {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 24px;
    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: 27px;
    font-weight: 500;
    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: 3px;
    padding: 24px 22px;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, .5);
}

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

.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 18px;
    border: 1px solid var(--warna-utama);
    border-radius: 2px;
    color: var(--warna-utama);
    text-decoration: none;
    font-size: 13px;
    letter-spacing: .06em;
}

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


/* --- 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: 12.5px;
    letter-spacing: .04em;
    color: var(--kabur);
}

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


/* --- 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: 2px;
    cursor: zoom-in;
}

/* Setiap tiga foto, yang pertama diberi ruang dua kolom agar
   grid tidak terasa monoton kalau jumlah fotonya banyak. */
.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); }


/* --- 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: 4px;
    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(--kuningan);
    margin: 0 0 6px;
}

.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 mengambang --- */

.tombol-musik {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 900;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--garis);
    background: var(--warna-kedua);
    color: var(--warna-utama);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.tombol-musik .ikon-musik {
    display: inline-block;
}

.tombol-musik.berputar .ikon-musik {
    animation: musik-putar 2.4s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .tombol-musik.berputar .ikon-musik { animation: none; }
}


/* --- 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: 4px;
    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: #EAF2ED; color: #3F6B4F; }
.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: var(--warna-kedua);
    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(--kuningan);
    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;
}


/* --- Lightbox --- */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(20, 18, 14, .94);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    /* Pudar + sedikit membesar saat muncul, bukan langsung
       terpasang kaku. Kelas 'tampak' ditambahkan JavaScript
       sesaat setelah elemen ditampilkan, memicu transisi ini. */
    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: 2px;
    /* Sedikit membesar dari 96% ke 100% mengikuti pudarnya
       .lightbox -- memberi kesan foto "mendekat" saat dibuka,
       bukan sekadar muncul rata di tempatnya. */
    transform: scale(.96);
    transition: transform .22s ease, opacity .18s ease;
}

.lightbox.tampak .lightbox-gambar { transform: scale(1); }

/* Dipasang JavaScript saat tamu berpindah ke foto lain sementara
   lightbox sudah terbuka -- foto lama pudar sekejap sebelum
   sumbernya diganti, memberi kesan transisi slide antar foto. */
.lightbox-gambar.memuat { opacity: 0; }

.lightbox-tutup,
.lightbox-nav {
    position: absolute;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.lightbox-tutup {
    top: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
    font-size: 22px;
}

.lightbox-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    font-size: 26px;
}

.lightbox-prev { left: 10px; }
.lightbox-next { right: 10px; }

.lightbox-tutup:hover,
.lightbox-nav:hover { background: rgba(255, 255, 255, .2); }

@media (max-width: 480px) {
    .lightbox-nav { width: 38px; height: 38px; font-size: 22px; }
}

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


/* =============================================================
   POLISH & ANIMASI — lapisan visual tambahan
   ============================================================= */

html { scroll-behavior: smooth; }

body {
    overflow-x: hidden;
    background-image:
        radial-gradient(circle at 10% 15%, rgba(169,133,69,.07) 0 1px, transparent 2px),
        radial-gradient(circle at 90% 70%, rgba(74,93,69,.06) 0 1px, transparent 2px);
    background-size: 34px 34px, 42px 42px;
}

.sampul {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 50% 40%, rgba(255,255,255,.72), transparent 38%),
        linear-gradient(180deg, rgba(255,255,255,.12), transparent 60%);
}

.sampul::before,
.sampul::after {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(169,133,69,.22);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}

.sampul::before { top: -95px; left: -95px; animation: lingkaran-mengambang 8s ease-in-out infinite; }
.sampul::after { right: -95px; bottom: -95px; animation: lingkaran-mengambang 9s ease-in-out infinite reverse; }

.ornamen-sampul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 14px;
    color: var(--kuningan);
    animation: turun-lembut .9s ease both;
}

.ornamen-sampul span {
    width: 34px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--kuningan));
}

.ornamen-sampul span:last-child {
    background: linear-gradient(90deg, var(--kuningan), transparent);
}

.ornamen-sampul i {
    font-style: normal;
    font-size: 15px;
    animation: denyut 2.6s ease-in-out infinite;
}

.pembuka { animation: turun-lembut 1s .1s ease both; }

.foto-sampul-wrap {
    margin: 2px 0 26px;
    animation: muncul-foto 1.1s .15s cubic-bezier(.2,.8,.2,1) both;
}

.foto-sampul-ring {
    width: clamp(126px, 34vw, 176px);
    height: clamp(126px, 34vw, 176px);
    padding: 6px;
    border: 1px solid rgba(169,133,69,.72);
    border-radius: 50%;
    box-shadow: 0 18px 45px rgba(47,58,44,.14), inset 0 0 0 5px rgba(255,255,255,.55);
    animation: foto-mengambang 5s ease-in-out infinite;
}

.foto-sampul {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.nama-pasangan {
    text-shadow: 0 4px 18px rgba(74,93,69,.10);
    animation: naik-lembut 1s .25s cubic-bezier(.2,.8,.2,1) both;
}

.dan { animation: denyut 3s ease-in-out infinite; }

.garis-kuningan {
    position: relative;
    animation: melebar 1s .6s ease both;
}

.hitung-mundur { animation: naik-lembut .9s .7s ease both; }

.hm-kotak {
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(6px);
    box-shadow: 0 7px 20px rgba(47,58,44,.06);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.hm-kotak::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.5) 50%, transparent 80%);
    transform: translateX(-130%);
    animation: kilau 4.5s ease-in-out infinite;
}

.hm-kotak:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(47,58,44,.10); border-color: rgba(169,133,69,.55); }

.pelat {
    position: relative;
    box-shadow: 0 12px 30px rgba(47,58,44,.07);
    animation: naik-lembut .9s .9s ease both;
}

.pelat::before,
.pelat::after {
    content: '✦';
    position: absolute;
    color: var(--kuningan);
    font-size: 10px;
    animation: denyut 3s ease-in-out infinite;
}
.pelat::before { top: 8px; left: 10px; }
.pelat::after { right: 10px; bottom: 8px; animation-delay: 1.2s; }

.dekorasi-pemisah {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 4px 0 2px;
    color: var(--kuningan);
    opacity: .82;
}

.dekorasi-pemisah span { width: 62px; height: 1px; background: linear-gradient(90deg, transparent, var(--kuningan)); }
.dekorasi-pemisah span:last-child { background: linear-gradient(90deg, var(--kuningan), transparent); }
.dekorasi-pemisah b { font-family: Georgia, serif; font-size: 22px; font-weight: 400; animation: denyut 3s ease-in-out infinite; }

.bagian {
    position: relative;
}

.bagian::before {
    content: '✦';
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(169,133,69,.38);
    font-size: 9px;
}

.bagian-judul { transition: letter-spacing .35s ease, transform .35s ease; }
.bagian:hover .bagian-judul { letter-spacing: .02em; transform: translateY(-2px); }

.acara,
.kisah-item,
.kartu-amplop,
.kartu-ucapan {
    box-shadow: 0 9px 28px rgba(47,58,44,.055);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.acara:hover,
.kisah-item:hover,
.kartu-amplop:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 34px rgba(47,58,44,.10);
    border-color: rgba(169,133,69,.48);
}

.acara-peta,
.tombol-kirim,
.tombol-salin-amplop {
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, opacity .25s ease;
}

.acara-peta:hover,
.tombol-salin-amplop:hover { transform: translateY(-2px); }

.tombol-kirim:hover { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(74,93,69,.20); opacity: 1; }
.tombol-kirim:active { transform: translateY(0); }

.kisah-foto { transition: transform .65s cubic-bezier(.2,.8,.2,1), filter .65s ease; }
.kisah-item:hover .kisah-foto { transform: scale(1.035); filter: saturate(1.04); }

.galeri-item { box-shadow: 0 5px 16px rgba(47,58,44,.06); }
.galeri-item img { transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .6s ease; }
.galeri-item:hover img { transform: scale(1.08); filter: saturate(1.05); }

.tombol-musik {
    box-shadow: 0 7px 22px rgba(47,58,44,.16);
    transition: transform .3s ease, box-shadow .3s ease;
}
.tombol-musik:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 12px 28px rgba(47,58,44,.20); }
.tombol-musik.berputar { animation: musik-denyut 2.2s ease-in-out infinite; }

.lightbox-gambar { box-shadow: 0 25px 70px rgba(0,0,0,.35); }

@keyframes turun-lembut {
    from { opacity: 0; transform: translateY(-14px); }
    to { opacity: 1; transform: translateY(0); }
}

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

@keyframes muncul-foto {
    from { opacity: 0; transform: scale(.84) translateY(16px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes foto-mengambang {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-7px) rotate(1deg); }
}

@keyframes lingkaran-mengambang {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: .7; }
    50% { transform: scale(1.08) rotate(8deg); opacity: 1; }
}

@keyframes denyut {
    0%, 100% { opacity: .65; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.12); }
}

@keyframes melebar {
    from { width: 0; opacity: 0; }
    to { width: 46px; opacity: 1; }
}

@keyframes kilau {
    0%, 55%, 100% { transform: translateX(-130%); }
    70% { transform: translateX(130%); }
}

@keyframes musik-denyut {
    0%, 100% { box-shadow: 0 7px 22px rgba(47,58,44,.16); }
    50% { box-shadow: 0 8px 28px rgba(169,133,69,.30); }
}

@media (max-width: 480px) {
    .sampul { padding-left: 18px; padding-right: 18px; }
    .foto-sampul-wrap { margin-bottom: 22px; }
    .nama-pasangan { font-size: clamp(36px, 13vw, 52px); }
    .hitung-mundur { gap: 6px; }
    .hm-kotak { min-width: 54px; padding: 9px 3px; }
    .hm-angka { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .ornamen-sampul,
    .pembuka,
    .foto-sampul-wrap,
    .foto-sampul-ring,
    .nama-pasangan,
    .dan,
    .garis-kuningan,
    .hitung-mundur,
    .pelat,
    .sampul::before,
    .sampul::after,
    .hm-kotak::after,
    .tombol-musik.berputar { animation: none !important; }
}

/* =============================================================
   POLISH PREMIUM — LAYAR PEMBUKA & MICRO-ANIMASI
   ============================================================= */
:root {
    --bayangan-lembut: 0 18px 55px rgba(47, 58, 44, .10);
    --gold-transparan: rgba(169, 133, 69, .32);
}

html.undangan-terkunci,
html.undangan-terkunci body { overflow: hidden; }

/* --- Layar pembuka --- */
.layar-pembuka {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--warna-kedua);
    color: var(--tinta);
    opacity: 1;
    visibility: visible;
    transition: opacity .8s ease, visibility .8s ease;
}

.layar-pembuka[hidden] { display: none; }

.layar-pembuka.ditutup {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.pembuka-foto {
    position: absolute;
    inset: -4%;
    background-image: var(--foto-cover);
    background-size: cover;
    background-position: center;
    filter: saturate(.55) sepia(.08) blur(1px);
    transform: scale(1.05);
    animation: pembuka-kenaikan 14s ease-out forwards;
}

.pembuka-lapis {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 38%, rgba(255,255,255,.88), rgba(251,248,242,.96) 64%),
        var(--warna-kedua);
    opacity: .94;
}

.pembuka-isi {
    position: relative;
    z-index: 2;
    width: min(92vw, 430px);
    padding: 34px 28px;
    text-align: center;
    animation: pembuka-naik 1.05s cubic-bezier(.22,.61,.36,1) both;
}

.pembuka-kecil {
    margin: 0 0 24px;
    font-size: 11px;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--kabur);
    animation: pembuka-fade 1s .15s both;
}

.pembuka-pasangan {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(47px, 14vw, 72px);
    font-weight: 500;
    line-height: .88;
    letter-spacing: -.025em;
    color: var(--warna-utama);
}

.pembuka-pasangan span:first-child { animation: nama-masuk-kiri .9s .2s both; }
.pembuka-pasangan span:last-child { animation: nama-masuk-kanan .9s .38s both; }

.pembuka-pasangan em {
    display: block;
    margin: 12px 0 10px;
    font-size: .42em;
    line-height: 1;
    font-weight: 500;
    color: var(--kuningan);
    animation: hati-muncul 1s .5s both;
}

.pembuka-ornamen {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    width: 150px;
    margin: 25px auto 18px;
    animation: pembuka-fade 1s .65s both;
}

.pembuka-ornamen span {
    width: 52px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--kuningan));
}

.pembuka-ornamen span:last-child {
    background: linear-gradient(to left, transparent, var(--kuningan));
}

.pembuka-ornamen i {
    font-style: normal;
    font-size: 12px;
    color: var(--kuningan);
    animation: bintang-berkilau 2.8s ease-in-out infinite;
}

.pembuka-tanggal {
    margin: 0 0 25px;
    font-size: 14px;
    letter-spacing: .08em;
    color: var(--kabur);
    animation: pembuka-fade 1s .75s both;
}

.pembuka-tamu {
    width: min(100%, 330px);
    margin: 0 auto 26px;
    padding: 17px 20px;
    border: 1px solid rgba(169,133,69,.38);
    background: rgba(255,255,255,.52);
    box-shadow: 0 12px 35px rgba(47,58,44,.07);
    animation: tamu-masuk 1s .82s both;
}

.pembuka-tamu small,
.pembuka-tamu span {
    display: block;
    color: var(--kabur);
}

.pembuka-tamu small {
    margin-bottom: 5px;
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.pembuka-tamu strong {
    display: block;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 23px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--tinta);
}

.pembuka-tamu span {
    margin-top: 5px;
    font-size: 11px;
}

.tombol-buka {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 190px;
    padding: 12px 22px;
    border: 1px solid var(--warna-utama);
    border-radius: 999px;
    background: var(--warna-utama);
    color: var(--warna-kedua);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(74,93,69,.22);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    animation: tombol-muncul 1s 1s both;
}

.tombol-buka:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(74,93,69,.28);
}

.tombol-buka:active { transform: translateY(0); }

.tombol-buka-ikon {
    font-size: 17px;
    line-height: 1;
    animation: hati-denyut 1.8s ease-in-out infinite;
}

.pembuka-hint {
    margin: 13px 0 0;
    font-size: 10px;
    letter-spacing: .08em;
    color: var(--kabur);
    opacity: .78;
    animation: pembuka-fade 1s 1.15s both;
}

.pembuka-dekor {
    position: absolute;
    z-index: 1;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 82px;
    line-height: 1;
    color: var(--gold-transparan);
    pointer-events: none;
    animation: dekor-mengambang 6s ease-in-out infinite;
}

.pembuka-dekor-atas { top: 3%; left: 7%; transform: rotate(-12deg); }
.pembuka-dekor-bawah { right: 6%; bottom: 2%; transform: rotate(168deg); animation-delay: -2s; }

/* --- Sampul setelah layar pembuka --- */
.sampul {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

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

.sampul::before {
    width: 180px;
    height: 180px;
    top: -75px;
    left: -75px;
    border: 1px solid var(--gold-transparan);
    border-radius: 50%;
    box-shadow: 0 0 0 18px rgba(169,133,69,.045), 0 0 0 38px rgba(169,133,69,.03);
    animation: lingkaran-nafas 5s ease-in-out infinite;
}

.sampul::after {
    width: 160px;
    height: 160px;
    right: -65px;
    bottom: -65px;
    border: 1px solid var(--gold-transparan);
    border-radius: 50%;
    animation: lingkaran-nafas 5s 1.5s ease-in-out infinite;
}

.sampul .pembuka { animation: elemen-masuk .9s .05s both; }
.sampul .nama-pasangan { animation: nama-naik 1s .18s both; text-shadow: 0 5px 20px rgba(47,58,44,.07); }
.sampul .garis-kuningan { animation: garis-buka .8s .45s both; }
.sampul .tanggal-utama { animation: elemen-masuk .9s .5s both; }
.sampul .hitung-mundur { animation: elemen-masuk .9s .62s both; }
.sampul .pelat { animation: tamu-masuk .95s .75s both; box-shadow: var(--bayangan-lembut); }

.hm-kotak {
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.hm-kotak::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.7) 50%, transparent 75%);
    transform: translateX(-120%);
    animation: kilau 4.8s 1.2s infinite;
}

.hm-kotak:hover {
    transform: translateY(-4px);
    border-color: var(--gold-transparan);
    box-shadow: 0 9px 22px rgba(47,58,44,.08);
}

/* --- Kartu isi lebih hidup --- */
.acara,
.kisah-item,
.kartu-amplop,
.kotak-rsvp-terisi {
    box-shadow: 0 8px 25px rgba(47,58,44,.045);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.acara:hover,
.kisah-item:hover,
.kartu-amplop:hover,
.kotak-rsvp-terisi:hover {
    transform: translateY(-4px);
    border-color: var(--gold-transparan);
    box-shadow: 0 15px 35px rgba(47,58,44,.09);
}

.acara-peta,
.tombol-kirim {
    transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease, background .25s ease;
}

.acara-peta:hover,
.tombol-kirim:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(74,93,69,.14);
}

.galeri-item {
    position: relative;
    box-shadow: 0 3px 12px rgba(47,58,44,.06);
}

.galeri-item::after {
    content: '⌕';
    position: absolute;
    inset: auto 8px 8px auto;
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(251,248,242,.84);
    color: var(--warna-utama);
    font-size: 15px;
    opacity: 0;
    transform: scale(.7);
    transition: opacity .25s ease, transform .25s ease;
}

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

/* --- Musik premium --- */
.tombol-musik {
    transition: transform .25s ease, box-shadow .25s ease;
}

.tombol-musik:hover { transform: scale(1.08); }
.tombol-musik.berputar { box-shadow: 0 0 0 7px rgba(169,133,69,.10), 0 8px 24px rgba(47,58,44,.16); }

/* --- Keyframes --- */
@keyframes pembuka-naik {
    from { opacity: 0; transform: translateY(25px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pembuka-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes nama-masuk-kiri {
    from { opacity: 0; transform: translateX(-22px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes nama-masuk-kanan {
    from { opacity: 0; transform: translateX(22px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes hati-muncul {
    from { opacity: 0; transform: scale(.5) rotate(-12deg); }
    to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes hati-denyut {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

@keyframes bintang-berkilau {
    0%, 100% { opacity: .45; transform: scale(.85) rotate(0); }
    50% { opacity: 1; transform: scale(1.15) rotate(18deg); }
}

@keyframes tamu-masuk {
    from { opacity: 0; transform: translateY(18px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tombol-muncul {
    from { opacity: 0; transform: translateY(14px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes dekor-mengambang {
    0%, 100% { margin-top: 0; opacity: .55; }
    50% { margin-top: -10px; opacity: .8; }
}

@keyframes pembuka-kenaikan {
    from { transform: scale(1.05); }
    to { transform: scale(1.11); }
}

@keyframes elemen-masuk {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes nama-naik {
    from { opacity: 0; transform: translateY(20px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes garis-buka {
    from { opacity: 0; width: 0; }
    to { opacity: 1; width: 46px; }
}

@keyframes kilau {
    0%, 45% { transform: translateX(-120%); }
    65%, 100% { transform: translateX(120%); }
}

@keyframes lingkaran-nafas {
    0%, 100% { transform: scale(1); opacity: .7; }
    50% { transform: scale(1.06); opacity: 1; }
}

@media (max-width: 480px) {
    .pembuka-isi { padding: 26px 18px; }
    .pembuka-kecil { margin-bottom: 20px; letter-spacing: .27em; }
    .pembuka-pasangan { font-size: clamp(44px, 15vw, 60px); }
    .pembuka-tamu { margin-bottom: 22px; }
    .pembuka-dekor { font-size: 62px; }
    .tombol-buka { min-width: 180px; }
}

@media (prefers-reduced-motion: reduce) {
    .layar-pembuka *,
    .sampul *,
    .sampul::before,
    .sampul::after,
    .hm-kotak::before {
        animation: none !important;
        transition: none !important;
    }
}