html, body {
    max-width: 100%;
    /* Memotong paksa apapun yang meluber ke kiri/kanan halaman utama */
    overflow-x: hidden; 
    position: relative; 
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', serif; 
    color: #333;
    background-color: #fcfcfc;
}

body.locked { overflow: hidden; }

/* KELAS PLACEHOLDER (Pengganti Foto) */
.placeholder-photo, .placeholder-avatar {
    background-color: rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #888;
    font-size: 0.8rem;
}
.placeholder-photo { width: 100%; height: 100%; border-radius: inherit; }
.placeholder-avatar { width: 150px; height: 150px; border-radius: 50%; margin: 0 auto 15px auto; }

/* HALAMAN COVER */
#cover-page {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background: url('assets/bg_cover1.webp') center/cover;
    display: flex; justify-content: center; align-items: center; text-align: center;
    z-index: 9999; transition: transform 1s ease-in-out, opacity 1s ease-in-out;
    overflow: hidden; 
}

/* =========================================================
   ANIMASI BUNGA SUDUT
   ========================================================= */
.bunga-sudut {
    position: absolute;
    width: 250px; 
    max-width: 55vw; 
    pointer-events: none; 
    z-index: 5;
    opacity: 0; 
    translate: 0px 0px; 
    rotate: 0deg;
    scale: 1;
    will-change: translate, rotate, opacity;
}

.bunga-atas-kiri { 
    top: -50px; left: -40px; width: 210px; transform-origin: top left; 
    animation: masukAtasKiri 4s cubic-bezier(0.22, 1, 0.36, 1) forwards, ayunKiri 6s ease-in-out infinite alternate;
}
.bunga-atas-kanan { 
    top: -50px; right: -40px; width: 210px; transform-origin: top right;
    animation: masukAtasKanan 4s cubic-bezier(0.22, 1, 0.36, 1) forwards, ayunKanan 6.5s ease-in-out infinite alternate; 
}
.bunga-bawah-kiri { 
    bottom: -50px; left: -40px; width: 210px; transform-origin: bottom left;
    animation: masukBawahKiri 4s cubic-bezier(0.22, 1, 0.36, 1) forwards, ayunKiri 5.5s ease-in-out infinite alternate; 
}
.bunga-bawah-kanan { 
    bottom: -50px; right: -40px; width: 210px; transform-origin: bottom right;
    animation: masukBawahKanan 4s cubic-bezier(0.22, 1, 0.36, 1) forwards, ayunKanan 7s ease-in-out infinite alternate; 
}

@keyframes masukAtasKiri { 0% { opacity: 0; translate: -50px -50px; } 100% { opacity: 1; translate: 0px 0px; } }
@keyframes masukAtasKanan { 0% { opacity: 0; translate: 50px -50px; } 100% { opacity: 1; translate: 0px 0px; } }
@keyframes masukBawahKiri { 0% { opacity: 0; translate: -50px 50px; } 100% { opacity: 1; translate: 0px 0px; } }
@keyframes masukBawahKanan { 0% { opacity: 0; translate: 50px 50px; } 100% { opacity: 1; translate: 0px 0px; } }
@keyframes ayunKiri { 0% { rotate: -2deg; scale: 1; } 100% { rotate: 8deg; scale: 1.03; } }
@keyframes ayunKanan { 0% { rotate: 2deg; scale: 1; } 100% { rotate: -8deg; scale: 1.03; } }

/* =========================================================
   ANIMASI DEKORASI BINGKAI FULL
   ========================================================= */
.dekor-bingkai-full {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; 
    pointer-events: none; 
    z-index: 4; 
    opacity: 0; 
    animation: munculBingkaiAman 1s ease-in-out 1s forwards;
}
@keyframes munculBingkaiAman {
    0% { opacity: 0; transform: scale(1.03); }
    100% { opacity: 1; transform: scale(1); }
}

/* =========================================================
   ANIMASI BINGKAI MERAH TENGAH
   ========================================================= */
.bingkai-tengah {
    position: absolute;
    top: 48%; left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    width: 420px; max-width: 100vw; height: auto;
    pointer-events: none; 
    z-index: 4; 
    opacity: 0;
    will-change: transform, opacity;
    animation: bingkaiMerahReveal 2s cubic-bezier(0.22, 1, 0.36, 1) 2s forwards;
}
@keyframes bingkaiMerahReveal {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

#cover-page.slide-up { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.cover-content {
    position: relative; 
    z-index: 20; 
    width: 100%; 
    display: flex; flex-direction: column; align-items: center;
}

/* =========================================================
   ANIMASI IKON CINCIN
   ========================================================= */
.ikon-cincin {
    position: relative; 
    width: 27px; max-width: 15vw; height: auto;
    margin-bottom: 5px; 
    pointer-events: none; z-index: 6; opacity: 0;
    animation: ikonCincinReveal 1s cubic-bezier(0.22, 1, 0.36, 1) 3s forwards;
}
@keyframes ikonCincinReveal {
    0% { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}

/* =========================================================
   BAGIAN TAMU UNDANGAN (COVER)
   ========================================================= */
#cover-page .title-small, #cover-page .nama-mempelai { color: #ffe3be; }
.nama-mempelai { 
    font-family: 
    'Cinzel Decorative', serif; 
    font-size: 1.7rem; 
    font-weight: 700; margin-bottom: -8px; 
    color: #ffe3be; 
}
.simbol-dan { 
    font-size: 1.2rem; 
    font-weight: 400; 
    vertical-align: middle; 
    margin: 0 5px; }
.title-small { 
    font-family: 
    'Cormorant Garamond', serif; 
    font-weight: 400; 
    font-size: 1rem; 
    margin-top: 20px; 
    margin-bottom: 40px; 
    color: #ffe3be; }
.teks-kepada { 
    font-family: 
    'Cormorant Garamond', serif; 
    color: #ffe3be; 
    margin-bottom: 12px; 
    font-size: 1rem;
}
 
.nama-tamu { 
    color: #ffe3be; 
    margin-bottom: 5px; 
    font-size: 1rem;
    max-width: 200px; /* Membatasi lebar maksimal teks */
    margin: 0 auto;  /* Menengahkan blok teks secara horizontal */
}

#btn-buka {
    position: relative;
    background-color: #ffe3be;
    color: #30041c; 
    border: 1px solid rgba(255, 227, 190, 0.4);
    
    /* Padding diperkecil drastis */
    padding: 6px 16px; 
    border-radius: 30px; 
    
    cursor: pointer;
    font-family: 'Poppins', serif; 
    font-weight: 900;
    /* Font size diperkecil lagi */
    font-size: 0.65rem; 
    letter-spacing: 0.5px; 
    
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px; /* Jarak ikon dan teks dirapatkan */
    
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    overflow: hidden;
    
    /* Mengatur ulang jarak agar tidak menabrak teks disclaimer */
    margin-top: 10px;
    margin-bottom: 20px; 
    z-index: 10;
}

/* Ukuran Ikon diperkecil */
#btn-buka svg {
    width: 12px;
    height: 12px;
}

/* Hover effect */
#btn-buka:hover {
    transform: translateY(-2px);
    background-color: #ffffff;
    box-shadow: 0 6px 15px rgba(255, 227, 190, 0.3);
}

/* Efek Kilau (Shimmer) */
#btn-buka::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 15%;
    height: 200%;
    background: linear-gradient(
        to right, 
        transparent, 
        rgba(255, 255, 255, 0.5), 
        transparent
    );
    transform: rotate(30deg);
    animation: shimmerBtn 5s infinite;
}

@keyframes shimmerBtn {
    0% { left: -60%; }
    20% { left: 160%; } 
    100% { left: 160%; }
}
.disclaimer-nama { 
    font-size: 0.7rem; 
    color: #ffe3be; 
    margin-top: -3px; /* Tambahkan sedikit margin atas di sini */
    font-style: italic; 
    opacity: 0.9; 
    max-width: 60%; /* Diperlebar sedikit agar teksnya tidak terlalu panjang ke bawah */
    line-height: 1.3; 
}
.tamu-section { 
    margin-top: 65px; background: transparent !important; border: none !important;
    box-shadow: none !important; padding: 0 !important; width: 100%; display: flex;
    flex-direction: column; align-items: center; gap: 5px; 
}

/* TOMBOL DASAR */
button, .btn-wa, .btn-lokasi {
    background-color: #5B8FB9; color: white; border: none; padding: 10px 20px; 
    border-radius: 20px; cursor: pointer; font-family: 'Poppins', serif; 
    font-weight: 600; text-decoration: none; display: inline-block; margin-top: 10px;
}

#cover-page .title-small, #cover-page .nama-mempelai, #cover-page .teks-kepada,
#cover-page .nama-tamu, #cover-page #btn-buka, #cover-page .disclaimer-nama {
    opacity: 0; transform: translateY(20px); animation: teksCoverReveal 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
#cover-page .title-small { animation-delay: 3s; }
#cover-page .nama-mempelai { animation-delay: 3.2s; }
#cover-page .teks-kepada { animation-delay: 3.4s; }
#cover-page .nama-tamu { animation-delay: 3.6s; }
#cover-page #btn-buka { animation-delay: 3.8s; }
#cover-page .disclaimer-nama { animation-delay: 4s; }

@keyframes teksCoverReveal {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* SECTIONS UMUM */
.section {
    min-height: 100vh; padding: 60px 20px; display: flex; flex-direction: column;
    justify-content: center; align-items: center; text-align: center;
    position: relative; overflow: hidden; 
}
.hero-bg, .bg-light, .bg-gift, .bg-rsvp, .bg-penutup, .bg-gallery {
    background-size: cover; background-position: center; background-attachment: scroll !important; 
}

/* =========================================================
   HALAMAN HERO
   ========================================================= */
.hero-bg {
    background-image: url('assets/bg_hero1.webp'); background-size: cover;
    background-position: center; background-attachment: scroll !important; background-color: transparent;
}
#hero .intro-text, #hero .tanggal, #hero .cd-box p { color: #ffe3be; }
#hero .cd-box span { 
    background: rgba(48, 4, 28, 0.6); color: #ffe3be; border: 1px solid #ffe3be;
    width: 70px; height: 70px; display: flex; justify-content: center; align-items: center; 
    border-radius: 10px; font-size: 1.8rem; font-weight: bold; 
}

#btn-save-date {
    background-color: #ffe3be; color: #8b0000; font-weight: bold; border: none;
    padding: 6px 16px; font-size: 0.85rem; border-radius: 20px; cursor: pointer;
    font-family: 'Poppins', serif; transition: transform 0.2s ease;
}
#btn-save-date:active { transform: scale(0.95); }

#countdown { display: flex; justify-content: center; gap: 10px; margin: 20px 0; }
.cd-box { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.cd-box span { width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; background: rgba(255,255,255,0.8); border-radius: 10px; font-size: 1.5rem; font-weight: bold; }

.mempelai-card, .event-card, .story-card, .atm-card, .rsvp-form-box, .wish-wall-box {
    background: rgba(255, 255, 255, 0.8); padding: 30px 20px; border-radius: 15px;
    width: 100%; max-width: 400px; margin: 15px auto; box-shadow: 0 5px 15px rgba(0,0,0,0.05); text-align: center;
}
.hero-content { display: flex; flex-direction: column; align-items: center; gap: 25px; width: 100%; padding: 0 15px; }

.nama-mempelai-vertikal {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    font-family: 'Cinzel Decorative', serif; font-size: 2.2rem; font-weight: 700; color: #ffe3be; line-height: 1.1;
}
.nama-mempelai-vertikal .simbol-dan { font-size: 1.4rem; margin: 8px 0; font-family: 'Poppins', serif; }
#hero .title-small { margin: 0; }

#hero { padding: 0; }
#hero .cover-content { max-width: 320px; }
#hero .title-small { 
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400; 
    font-size: 1rem;
    margin-top: 20px; 
    margin-bottom: 20px; }
#hero .nama-mempelai-vertikal { font-size: 2.5rem; margin: 5px 0; margin-bottom: 20px; }
#hero .intro-text { 
    font-size: 0.8rem; 
    line-height: 1.6; 
    margin: 25px auto 20px auto; 
    max-width: 600px; 
    padding: 0 25px; }
#hero .tanggal { font-size: 0.9rem; margin-top: 3px; margin-bottom: 5px; }
#hero .bingkai-tengah { height: 550px; max-height: 90vh; object-fit: fill; }
#hero .bingkai-tengah { animation-delay: 0s; }
#hero .ikon-cincin { animation-delay: 0.5s; }

body.locked #hero .bunga-sudut, body.locked #hero .dekor-bingkai-full,
body.locked #hero .bingkai-tengah, body.locked #hero .ikon-cincin { animation: none !important; opacity: 0 !important; }

body:not(.locked) #hero .bunga-atas-kiri { animation: masukAtasKiri 6s cubic-bezier(0.22, 1, 0.36, 1) forwards, ayunKiri 8s ease-in-out infinite alternate; }
body:not(.locked) #hero .bunga-atas-kanan { animation: masukAtasKanan 6s cubic-bezier(0.22, 1, 0.36, 1) forwards, ayunKanan 8.5s ease-in-out infinite alternate; }
body:not(.locked) #hero .bunga-bawah-kiri { animation: masukBawahKiri 6s cubic-bezier(0.22, 1, 0.36, 1) forwards, ayunKiri 7.5s ease-in-out infinite alternate; }
body:not(.locked) #hero .bunga-bawah-kanan { animation: masukBawahKanan 6s cubic-bezier(0.22, 1, 0.36, 1) forwards, ayunKanan 9s ease-in-out infinite alternate; }
body:not(.locked) #hero .dekor-bingkai-full { animation: munculBingkaiAman 1.5s ease-in-out 0.5s forwards; }
body:not(.locked) #hero .bingkai-tengah { animation: bingkaiMerahReveal 3s cubic-bezier(0.22, 1, 0.36, 1) 1s forwards; }
body:not(.locked) #hero .ikon-cincin { animation: ikonCincinReveal 2.5s cubic-bezier(0.22, 1, 0.36, 1) 2s forwards; }

body.locked #hero .title-small, body.locked #hero .nama-mempelai-vertikal,
body.locked #hero .intro-text, body.locked #hero .tanggal,
#hero .title-small, #hero .nama-mempelai-vertikal, #hero .intro-text,
#hero .tanggal, #hero #countdown, #hero .calendar-actions { opacity: 0; }

body:not(.locked) #hero .title-small { animation: heroFadeDown 1.5s ease-out 2.2s forwards; }
body:not(.locked) #hero .nama-mempelai-vertikal { animation: heroZoomIn 2s ease-out 2.4s forwards; }
body:not(.locked) #hero .intro-text { animation: heroFadeUp 1.5s ease-out 2.6s forwards; }
body:not(.locked) #hero .tanggal { animation: heroFadeRight 1.5s ease-out 2.8s forwards; }

@keyframes heroFadeDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes heroZoomIn { 0% { opacity: 0; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); } }
@keyframes heroFadeUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes heroFadeRight { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes countdownZoomIn { 0% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(0.75); } }
@keyframes zoomOutReveal { 0% { opacity: 0; transform: scale(1.5); } 100% { opacity: 1; transform: scale(1); } }
@keyframes slideFromLeft { 0% { opacity: 0; transform: translateX(-40px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes simpleFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }

/* =========================================================
   STYLE HALAMAN AYAT
   ========================================================= */
#ayat { 
    position: relative; 
    overflow: hidden; 
    min-height: 100vh; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    padding: 60px 20px; }
.bg-ayat { 
    background-image: url('assets/bg_ayat1.webp'); 
    background-size: cover; 
    background-position: center; 
    background-attachment: scroll !important; }
#ayat .bingkai-tengah { 
    height: 540px; 
    max-height: 90vh; 
    object-fit: fill; }
#ayat .cover-content { 
    max-width: 320px; 
    z-index: 10; text-align: center; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 20px; }
.img-bismillah { 
    width: 200px; 
    max-width: 60%; 
    height: auto; 
    opacity: 0.8; 
    margin-bottom: 10px; }
.teks-ayat { 
    font-family: 'Poppins', sans-serif; 
    font-size: 0.8rem; 
    line-height: 1.6; 
    color: #ffe3be; 
    font-style: italic; 
    margin: 0; 
    padding: 0 25px; 
    width: 100%; 
    text-align: center; }
.sumber-ayat { 
    font-family: 'Cinzel', serif; 
    font-size: 0.9rem; 
    color: #ffe3be; 
    letter-spacing: 2px; 
    font-weight: bold;
    margin-top: 5px; }

#ayat .reveal-ayat { opacity: 0; pointer-events: none; }
/* =========================================================
   PERBAIKAN ANIMASI AYAT (INDEPENDENT SMART SCROLL)
   ========================================================= */
/* Sembunyikan jika belum discroll */
.reveal-ayat:not(.active) { 
    opacity: 0; 
    animation: none !important; 
    pointer-events: none; 
}

/* Bunga Sudut Ayat berulang saat discroll */
.bunga-atas-kiri.reveal-ayat.active { animation: masukAtasKiri 4s cubic-bezier(0.22, 1, 0.36, 1) forwards, ayunKiri 8s ease-in-out infinite alternate; pointer-events: auto; }
.bunga-atas-kanan.reveal-ayat.active { animation: masukAtasKanan 4s cubic-bezier(0.22, 1, 0.36, 1) forwards, ayunKanan 8.5s ease-in-out infinite alternate; pointer-events: auto; }
.bunga-bawah-kiri.reveal-ayat.active { animation: masukBawahKiri 4s cubic-bezier(0.22, 1, 0.36, 1) forwards, ayunKiri 7.5s ease-in-out infinite alternate; pointer-events: auto; }
.bunga-bawah-kanan.reveal-ayat.active { animation: masukBawahKanan 4s cubic-bezier(0.22, 1, 0.36, 1) forwards, ayunKanan 9s ease-in-out infinite alternate; pointer-events: auto; }

/* Bingkai dan Konten Ayat berulang saat discroll */
.bingkai-tengah.reveal-ayat.active { animation: bingkaiMerahReveal 3s cubic-bezier(0.22, 1, 0.36, 1) 0s forwards; pointer-events: auto; }
.img-bismillah.reveal-ayat.active { animation: zoomOutReveal 1.5s ease-out 0.2s forwards; opacity: 0; pointer-events: auto; }
.teks-ayat.reveal-ayat.active { animation: heroZoomIn 1.5s ease-out 0.4s forwards; opacity: 0; pointer-events: auto; }
.sumber-ayat.reveal-ayat.active { animation: heroFadeUp 1.5s ease-out 0.6s forwards; opacity: 0; pointer-events: auto; }

/* =========================================================
   STYLE HALAMAN PROFIL
   ========================================================= */
.bg-profil {
    background-image: url('assets/bg_profil1.webp'); background-size: cover; background-position: center;
    background-attachment: fixed !important; position: relative; overflow: hidden; min-height: 100vh;
    display: flex; justify-content: center; align-items: center; padding: 80px 20px;
}
#profil .bingkai-tengah { 
    height: calc(100% - 100px); 
    max-height: none; 
    width: 92%; 
    max-width: 420px; 
    object-fit: fill; 
    margin-top: 30px; }
.judul-profil { 
    font-family: 'Cinzel Decorative', serif; 
    color: #ffe3be; 
    text-align: center; 
    margin-bottom: 20px; }
.judul-profil .we-are { 
    display: block; 
    font-size: 1.2rem; 
    letter-spacing: 4px; 
    margin-bottom: 5px; }
.judul-profil .getting-married { 
    display: block; 
    font-size: 1.2rem; 
    font-weight: 600; }
.teks-pengantar-profil { 
    font-family: 'Poppins', sans-serif; 
    font-size: 0.8rem; 
    color: #ffe3be; 
    text-align: center; 
    line-height: 1.6; 
    margin-top: -15px; 
    margin-bottom: 35px; 
    margin-top: -10px; 
    padding: 0 13px; 
    width: 85%; }
.profil-susun-container { display: flex; flex-direction: column; align-items: center; width: 100%; }
.profil-item { display: flex; flex-direction: column; align-items: center; text-align: center; color: #ffe3be; }
.foto-bulat { 
    width: 190px; 
    height: 190px; 
    border-radius: 50%; 
    object-fit: cover; 
    border: none; 
    
    /* Padding tipis untuk bingkai */
    padding: 3px; 
    
    /* Gradasi bingkai */
    background: linear-gradient(
        135deg, 
        rgba(255, 227, 190, 0.8) 0%,     
        rgba(255, 255, 255, 1) 15%,   
        rgba(255, 227, 190, 0.1) 50%,  
        rgba(255, 255, 255, 1) 85%,   
        rgba(255, 227, 190, 0.8) 100%    
    );
    
    margin-bottom: 30px; 
    
    /* Hanya efek bayangan gelap ke bawah, efek glow dihapus */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.35);
}
.nama-panggilan { font-family: 'Cinzel Decorative', serif; font-size: 1.3rem; margin-bottom: 15px; }
.nama-lengkap { 
    font-family: 'Poppins', sans-serif; 
    font-size: 1rem; font-weight: 600; margin-bottom: 15px; letter-spacing: 1px; }
.status-anak { font-size: 0.7rem; margin-bottom: 15px; font-style: italic; line-height: 1.6; opacity: 0.9; }
.btn-ig-profil { display: inline-block; color: #ffe3be; text-decoration: none; font-size: 0.6rem; border: 1px solid rgba(255, 227, 190, 0.5); padding: 6px 18px; border-radius: 20px; font-weight: bold; position: relative; z-index: 50; pointer-events: auto; }
.btn-ig-profil:hover { background-color: rgba(255, 227, 190, 0.1); }
.simbol-dan-profil { font-family: 'Cinzel Decorative', serif; font-size: 2rem; color: #ffe3be; margin: 30px 0; }
#profil .cover-content { max-width: 340px; z-index: 10; display: flex; flex-direction: column; align-items: center; padding-top: 70px; padding-bottom: 70px; gap: 15px; }

#profil .reveal-profil { opacity: 0; pointer-events: none; }
/* =========================================================
   PERBAIKAN ANIMASI PROFIL (INDEPENDENT SMART SCROLL)
   ========================================================= */
/* Sembunyikan elemen sebelum masuk layar */
.reveal-profil:not(.active) { 
    opacity: 0 !important; 
    animation: none !important; 
    pointer-events: none; 
}
.profil-item.reveal-profil:not(.active) * { 
    opacity: 0 !important; 
    animation: none !important; 
}

/* Bunga Sudut Profil berulang saat discroll */
.bunga-atas-kiri.reveal-profil.active { animation: masukAtasKiri 4s cubic-bezier(0.22, 1, 0.36, 1) forwards, ayunKiri 8s ease-in-out infinite alternate; pointer-events: auto; }
.bunga-atas-kanan.reveal-profil.active { animation: masukAtasKanan 4s cubic-bezier(0.22, 1, 0.36, 1) forwards, ayunKanan 8.5s ease-in-out infinite alternate; pointer-events: auto; }
.bunga-bawah-kiri.reveal-profil.active { animation: masukBawahKiri 4s cubic-bezier(0.22, 1, 0.36, 1) forwards, ayunKiri 7.5s ease-in-out infinite alternate; pointer-events: auto; }
.bunga-bawah-kanan.reveal-profil.active { animation: masukBawahKanan 4s cubic-bezier(0.22, 1, 0.36, 1) forwards, ayunKanan 9s ease-in-out infinite alternate; pointer-events: auto; }

/* Bingkai dan Header Profil */
.bingkai-tengah.reveal-profil.active { animation: bingkaiMerahReveal 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0s forwards; pointer-events: auto; }
.judul-profil.reveal-profil.active { animation: heroZoomIn 1.5s ease-out 0s forwards; opacity: 0; pointer-events: auto;}
.teks-pengantar-profil.reveal-profil.active { animation: heroFadeUp 1.5s ease-out 0.2s forwards; opacity: 0; pointer-events: auto;}
.simbol-dan-profil.reveal-profil.active { animation: heroZoomIn 1.5s ease-out 0s forwards; opacity: 0; pointer-events: auto;}

/* Detail Foto dan Teks Mempelai (Delay dipersingkat agar langsung muncul) */
.profil-item.reveal-profil.active { opacity: 1 !important; pointer-events: auto; }
.profil-item.reveal-profil.active img { animation: heroZoomIn 1.5s ease-out 0s forwards; opacity: 0; }
.profil-item.reveal-profil.active h2 { animation: slideFromLeft 1s ease-out 0.2s forwards; opacity: 0; }
.profil-item.reveal-profil.active h3 { animation: simpleFadeIn 1s ease-out 0.4s forwards; opacity: 0; }
.profil-item.reveal-profil.active p { animation: simpleFadeIn 1s ease-out 0.6s forwards; opacity: 0; }
.profil-item.reveal-profil.active a { animation: heroFadeUp 1s ease-out 0.8s forwards; opacity: 0; pointer-events: auto; }

/* =========================================================
   STYLE HALAMAN COUNTDOWN BARU (FULL & FIX)
   ========================================================= */
.bg-countdown {
    background-image: url('assets/bg_countdown1.webp'); background-size: cover; background-position: center;
    background-attachment: scroll !important; padding: 0 !important; display: flex; flex-direction: column; justify-content: flex-start;
}
.slider-container { position: relative; width: 100%; height: 45vh; overflow: hidden; }
.slides { display: flex; width: 300%; height: 100%; animation: slideAnimasi 15s infinite; }
.slide { width: 100%; height: 100%; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
@keyframes slideAnimasi { 0%, 30% { transform: translateX(0); } 33%, 63% { transform: translateX(-33.33%); } 66%, 96% { transform: translateX(-66.66%); } 100% { transform: translateX(0); } }

/* =========================================================
   STYLE HALAMAN COUNTDOWN (PREMIUM DESIGN)
   ========================================================= */
/* Area Gradient yang menyatu mulus dengan warna latar */
.gradient-overlay-premium {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 180px;
    background: linear-gradient(to bottom, transparent, #30041c);
}

.countdown-content-premium {
    flex: 1;
    /* UBAH BARIS INI: 
       Urutan padding adalah (Atas, Kanan, Bawah, Kiri).
       Ubah angka ketiga (sebelumnya 50px) menjadi 100px atau 120px */
    padding: 20px 20px 80px 20px; 
    
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 5;
    background-color: #30041c; 
    width: 100%;
}

.title-save-date-premium {
    font-family: 'Cinzel Decorative', serif;
    color: #ffe3be;
    font-size: 2rem;
    margin-bottom: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.ornament-divider {
    margin-bottom: 30px;
}

/* Desain Countdown yang Mewah & Modern */
.countdown-elegant {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 35px;
}

.cd-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 75px;
    /* Efek Kaca Transparan */
    background: rgba(255, 227, 190, 0.05);
    border: 1px solid rgba(255, 227, 190, 0.3);
    border-radius: 12px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.cd-item span {
    font-size: 1.8rem;
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    color: #ffe3be;
    line-height: 1;
    margin-bottom: 4px;
}

.cd-item p {
    font-size: 0.75rem;
    color: #ffe3be;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

.cd-separator {
    font-size: 1.5rem;
    color: #ffe3be;
    font-family: 'Cinzel Decorative', serif;
    opacity: 0.6;
    margin-top: -15px; /* Menyelaraskan titik dua dengan angka */
}

.teks-undangan-countdown {
    color: #ffe3be;
    font-size: 0.8rem;
    line-height: 1.6;
    max-width: 325px;
    margin-bottom: 35px;
    text-align: center;
    opacity: 0.9;
}

/* Tombol Premium */
.btn-calendar-premium {
    background-color: rgba(255, 227, 190, 0.1);
    color: #ffe3be;
    border: 1px solid #ffe3be;
    padding: 12px 28px;
    font-size: 0.9rem;
    border-radius: 30px;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.btn-calendar-premium svg {
    width: 18px;
    height: 18px;
}

.btn-calendar-premium:hover, .btn-calendar-premium:active {
    background-color: #ffe3be;
    color: #30041c;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 227, 190, 0.25);
}

/* =========================================================
   PERBAIKAN ANIMASI COUNTDOWN (INDEPENDENT SMART SCROLL)
   ========================================================= */
/* Sembunyikan isi countdown jika belum discroll */
.countdown-content-premium.reveal-countdown:not(.active) * {
    opacity: 0 !important;
    animation: none !important;
}

/* Muncul berurutan ketika di-scroll */
.countdown-content-premium.reveal-countdown.active .title-save-date-premium { animation: eleganReveal 1s ease-out 0s forwards !important; opacity: 0; }
.countdown-content-premium.reveal-countdown.active .ornament-divider { animation: eleganReveal 1s ease-out 0.2s forwards !important; opacity: 0; }
.countdown-content-premium.reveal-countdown.active .countdown-elegant { animation: eleganReveal 1.5s ease-out 0.4s forwards !important; opacity: 0; }
.countdown-content-premium.reveal-countdown.active .teks-undangan-countdown { animation: eleganReveal 1s ease-out 0.7s forwards !important; opacity: 0; }
.countdown-content-premium.reveal-countdown.active .btn-calendar-premium { animation: eleganReveal 1s ease-out 1s forwards !important; opacity: 0; pointer-events: auto; }
/* =========================================================
   STYLE HALAMAN EVENT (FIX BACKGROUND)
   ========================================================= */
.bg-event {
    /* Lapisan Hitam Transparan + Gambar Background */
    background-image: url('assets/bg_event1.webp');
 background-size: 100% auto !important; /* Paksa lebar gambar pas 100% dengan layar HP */
    background-repeat: repeat !important;  /* Jika konten panjang, gambar akan menyusun rapi ke bawah */
    background-position: top center !important; 
    
    background-attachment: scroll !important;
    min-height: 100vh; 
    display: flex; 
    justify-content: center; 
    align-items: center;
    position: relative; 
    overflow: hidden; 
   padding: 60px 20px;
}
/* 2. Kurangi padding atas di kotak event-nya */
.event-container.rampingkan { 
    max-width: 320px; 
    margin: 0 auto; 
    
    /* 👇 UBAH BARIS INI (Pisahkan atas dan bawah) 👇 */
    padding-top: 60px; /* Jarak atas dikurangi drastis */
    padding-bottom: 60px; /* Jarak bawah tetap agar lega */
    
    z-index: 10; 
    position: relative;
}
.title-event { font-family: 'Cinzel Decorative', serif; font-size: 2.2rem; color: #ffe3be; margin-bottom: 40px; margin-top: -20px; text-align: center; }

/* =========================================================
   STYLE HALAMAN EVENT (PREMIUM DESIGN)
   ========================================================= */
.event-card-premium {
    /* Efek Glassmorphism: Background transparan gelap dengan blur */
    background: rgba(48, 4, 28, 0.45); 
    border: 1px solid rgba(255, 227, 190, 0.25);
    border-radius: 16px;
    padding: 35px 25px;
    margin-bottom: 35px;
    position: relative;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    text-align: center;
    overflow: hidden;
}

/* Garis emas halus di bagian atas card untuk aksen mewah */
.event-card-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 227, 190, 0.8), transparent);
}

/* Penyesuaian Ikon SVG */
.event-icon-wrapper svg {
    width: 45px;
    height: 45px;
    fill: #ffe3be; /* Menyamakan dengan warna teks (gold) */
    margin-bottom: 15px;
    opacity: 0.9;
}

/* Garis pembatas elegan */
.event-divider {
    width: 40px;
    height: 1px;
    background-color: #ffe3be;
    margin: 12px auto 18px auto;
    opacity: 0.4;
}

.title-small-event { 
    font-size: 1.8rem; 
    color: #ffe3be; 
    margin-bottom: 5px; 
    font-family: 'Cinzel Decorative', serif;
    letter-spacing: 1px;
}

.tanggal-event { 
    font-weight: 600; 
    color: #ffe3be; 
    font-size: 1.05rem;
}

.waktu-event {
    font-size: 1.05rem;
    font-weight: bold;
    color: #ffe3be;
    margin-top: 5px;
    margin-bottom: 18px;
    letter-spacing: 0.5px;
}

.teks-penghubung { 
    opacity: 0.85; 
    font-size: 0.9rem;
    font-weight: bold;
    color: #ffe3be;
    margin-bottom: 20px;
}

.alamat-event {
    color: #ffe3be; 
    font-size: 0.8rem; 
    line-height: 1.5;
    margin-bottom: 25px;
}

/* Tombol Google Maps Elegan */
.btn-lokasi-premium {
    background-color: transparent;
    color: #ffe3be;
    border: 1px solid rgba(255, 227, 190, 0.6);
    padding: 10px 28px;
    font-size: 0.85rem;
    border-radius: 30px;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.btn-lokasi-premium:hover, .btn-lokasi-premium:active { 
    background-color: #ffe3be; 
    color: #30041c; 
    border-color: #ffe3be;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 227, 190, 0.2);
}
/* =========================================================
   ANIMASI EVENT SCROLL (DIPERBAIKI AGAR INDEPENDEN)
   ========================================================= */
@keyframes eleganReveal { 
    0% { opacity: 0; transform: translateY(50px); } 
    100% { opacity: 1; transform: translateY(0); } 
}

/* 1. Sembunyikan elemen jika belum mendapat class .active dari Javascript */
.title-event.reveal:not(.active),
#event .ornament-divider.reveal:not(.active),
.event-card-premium.reveal:not(.active) { 
    opacity: 0 !important; 
    animation: none !important; 
}

/* 2. Animasi dipicu HANYA pada elemen yang sedang dilihat layar (self-trigger) */
.title-event.reveal.active { 
    opacity: 0; 
    animation: eleganReveal 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0s forwards !important; 
}

#event .ornament-divider.reveal.active { 
    opacity: 0; 
    animation: eleganReveal 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards !important; 
}

/* Karena sekarang dipicu masing-masing, delay panjang dihapus agar langsung muncul saat discroll */
.event-card-premium.reveal.active { 
    opacity: 0; 
    animation: eleganReveal 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards !important; 
}
/* =========================================================
   STYLE HALAMAN GALLERY (PREMIUM DESIGN)
   ========================================================= */
.bg-gallery {
    background-image: url('assets/bg_galeri.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed !important; /* Efek Parallax */
    position: relative;
    padding: 80px 15px;
    min-height: 100vh;
}

/* Overlay untuk meredupkan foto background agar galeri terlihat jelas */
.overlay-gallery {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(48, 4, 28, 0.75); /* Warna marun gelap transparan */
    z-index: 1;
}

.gallery-container {
    position: relative;
    z-index: 2; /* Agar konten berada di atas overlay */
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.title-gallery {
    font-family: 'Cinzel Decorative', serif;
    color: #ffe3be;
    font-size: 2.2rem;
    margin-bottom: 5px;
    text-align: center;
}

/* Container Utama Grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Dasar 2 kolom */
    gap: 10px; /* Jarak antar foto */
    margin-top: 30px;
}

.gallery-item {
    width: 100%;
    /* Diubah menjadi vertikal (portrait) dengan rasio 3:4 */
    aspect-ratio: 3 / 4; 
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 227, 190, 0.2);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
    background-color: rgba(255, 227, 190, 0.1);
    opacity: 0; /* Wajib ada untuk animasi zoom-in */
}

/* Pengaturan khusus untuk foto yang MELEBAR (Galeri 3 & 6) */
.gallery-item.wide {
    grid-column: span 2; /* Mengambil 2 kolom sekaligus */
    /* Bentuk melebar landscape (16:9 atau 21:9) */
    aspect-ratio: 16 / 9; 
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* Hover effect tetap dipertahankan */
.gallery-item:hover img {
    transform: scale(1.08);
}

/* =========================================================
   ANIMASI KHUSUS GALLERY (Diperhalus & Diperlambat)
   ========================================================= */
@keyframes zoomInElegant {
    0% { 
        opacity: 0; 
        transform: scale(0.5); 
    }
    100% { 
        opacity: 1; 
        transform: scale(1); 
    }
}

/* Perbaikan Animasi Judul Gallery (Mencegah efek double/bentrok) */
.header-gallery.reveal:not(.active) {
    opacity: 0 !important;
    animation: none !important;
}

.header-gallery.reveal.active {
    transition: none !important; /* Mematikan transition bawaan agar tidak berbayang */
    animation: eleganReveal 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0s forwards !important;
}

/* Durasi animasi diubah dari 0.8s menjadi 1.5s agar membukanya pelan dan mulus.
   Jeda antar foto juga diatur lebih renggang (0.3s -> 0.6s -> 0.9s dst) */
#gallery.active .gallery-item.delay-1 { animation: zoomInElegant 2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards; }
#gallery.active .gallery-item.delay-2 { animation: zoomInElegant 2s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards; }
#gallery.active .gallery-item.delay-3 { animation: zoomInElegant 2s cubic-bezier(0.22, 1, 0.36, 1) 0.9s forwards; }
#gallery.active .gallery-item.delay-4 { animation: zoomInElegant 2s cubic-bezier(0.22, 1, 0.36, 1) 1.2s forwards; }
#gallery.active .gallery-item.delay-5 { animation: zoomInElegant 2s cubic-bezier(0.22, 1, 0.36, 1) 1.5s forwards; }
#gallery.active .gallery-item.delay-6 { animation: zoomInElegant 2s cubic-bezier(0.22, 1, 0.36, 1) 1.8s forwards; }

/* =========================================================
   NAVIGASI BAWAH (VERSI RAMPING & ELEGAN)
   ========================================================= */
.footer-wrapper {
    position: fixed;
    bottom: 20px; /* Jarak dari batas bawah layar */
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 1000;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none; /* Mencegah area kosong di samping menu menghalangi klik */
}

/* Kelas untuk menyembunyikan navigasi saat scroll ke bawah */
.footer-wrapper.nav-hidden {
    transform: translateY(150%);
}

.nav-bottom {
    background: rgba(48, 4, 28, 0.85); /* Warna merah tema transparan */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 227, 190, 0.3);
    padding: 6px 12px; /* DIPERKECIL: Membuat kapsul lebih pipih/ramping */
    border-radius: 40px; /* Bentuk kapsul membulat */
    display: flex;
    gap: 8px; /* DIPERKECIL: Jarak antar ikon agar lebih rapat */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    pointer-events: auto; /* Mengaktifkan klik khusus di area kapsul */
}

.nav-btn {
    width: 36px;  /* DIPERKECIL: Ukuran bulatan tombol (sebelumnya mungkin 45-50px) */
    height: 36px; /* DIPERKECIL: Ukuran bulatan tombol */
    border-radius: 50%;
    background-color: transparent;
    color: #ffe3be; /* Warna krem/emas */
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 1.1rem; /* DIPERKECIL: Ukuran ikon/teks di dalamnya */
    transition: all 0.3s ease;
    filter: brightness(0) saturate(100%) invert(88%) sepia(16%) saturate(849%) hue-rotate(334deg) brightness(107%) contrast(101%);
}


/* =========================================================
   STYLE GAMBAR IKON NAVIGASI BAWAH
   ========================================================= */
.nav-btn img {
    width: 18px;  /* Mengatur ukuran gambar agar proporsional di dalam kapsul */
    height: 18px;
    object-fit: contain;
    transition: all 0.3s ease;
}

/* Mengubah ikon PNG berwarna hitam menjadi putih murni saat disentuh */
.nav-btn:hover img, 
.nav-btn:active img {
    filter: brightness(0) invert(1);
}

#music-toggle { position: fixed; bottom: 85px; right: 20px; width: 36px; height: 36px; border-radius: 50%; z-index: 101; display: none; justify-content: center; align-items: center; font-size: 1.1rem; font-weight: bold; background-color: #ffe3be; color: #30041c; border: none; box-shadow: 0 4px 10px rgba(0,0,0,0.3); cursor: pointer; transition: all 0.3s ease; }
#music-toggle:active { background-color: #fffcf8; transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0,0,0,0.4); }

.reveal { opacity: 0; transform: translateY(30px); transition: all 0.6s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }
.hidden { display: none; }
.show { display: block; }

/* DEKORASI PISAH (ATAS & BAWAH) */
.dekor-pisah { position: absolute; left: 0; width: 100%; height: auto; pointer-events: none; z-index: 4; opacity: 0; }
.dekor-atas { top: 0; } .dekor-bawah { bottom: 0; }
#cover-page .dekor-pisah { animation: munculBingkaiAman 1.5s ease-in-out 1s forwards; }
body.locked #hero .dekor-pisah { animation: none !important; opacity: 0 !important; }
body:not(.locked) #hero .dekor-pisah { animation: munculBingkaiAman 1.5s ease-in-out 0.2s forwards; }
#ayat.active .dekor-pisah.reveal-ayat, #profil.active .dekor-pisah.reveal-profil, #event.active .dekor-pisah.reveal-event { animation: munculBingkaiAman 1.5s ease-in-out 0.5s forwards; }

/* MODE DESKTOP */
@media (min-width: 500px) {
    body { width: 100%; max-width: 414px; margin: 0 auto; box-shadow: 0 0 50px rgba(0,0,0,0.15); }
    #cover-page { width: 414px !important; left: 50% !important; transform: translateX(-50%) !important; }
    #cover-page.slide-up { transform: translate(-50%, -100%) !important; }
    .footer-wrapper { width: 414px; left: 50%; transform: translateX(-50%); }
    #music-toggle { right: calc(50vw - 207px + 20px) !important; }

    /* PERBAIKAN FINAL ANTI-ZOOM */
    .bg-profil, .bg-event, .bg-countdown, .bg-gallery, .bg-story, .bg-rsvp, .bg-penutup {
        background-attachment: scroll !important; 
        background-size: 100% auto !important; 
        background-repeat: repeat !important; 
        background-position: top center !important; 
    }
}
@media (hover: hover) { #music-toggle:hover { background-color: #fffcf8; transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0,0,0,0.4); } }

/* =========================================================
   STYLE HALAMAN OUR STORY (FUTURISTIC & ELEGANT)
   ========================================================= */
.bg-story {
    /* Mengubah gradasi menjadi warna solid persis seperti halaman Countdown */
    background-color: #30041c;
    background-image: none; /* Memastikan tidak ada gambar/gradasi yang menimpa */
    
    position: relative;
    padding: 80px 15px;
    min-height: 100vh;
    overflow: hidden;
}

/* Hilangkan overlay karena kita sudah pakai gradasi warna solid */
.overlay-story {
    display: none; 
}

.story-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title-story {
    font-family: 'Cinzel Decorative', serif; 
    color: #ffe3be; /* Warna teks sesuai permintaan */
    font-size: 2.2rem; 
    margin-bottom: 5px; 
    text-align: center;
    text-shadow: 0 0 15px rgba(255, 227, 190, 0.3);
}

.story-slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 20px 0 40px 0;
}

.story-slider {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    width: 100%;
}

.story-slide {
    min-width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
}

/* KARTU MENGAMBANG FUTURISTIK */
.story-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 227, 190, 0.2); /* Border warna ffe3be */
    border-radius: 20px;
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(255, 227, 190, 0.05);
    text-align: center;
    position: relative;
}

.floating-effect { animation: floatAnim 6s ease-in-out infinite; }
.delay-float-1 { animation-delay: 1s; }
.delay-float-2 { animation-delay: 2s; }

@keyframes floatAnim {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-12px); box-shadow: 0 35px 55px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(255, 227, 190, 0.1); }
    100% { transform: translateY(0px); }
}

.story-img-wrapper {
    position: relative;
    width: 100%;
    height: 220px;
    border-bottom: 1px solid rgba(255, 227, 190, 0.2);
}

.story-img-wrapper img {
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0.85; filter: grayscale(20%) sepia(10%);
    transition: all 0.5s ease;
}

.story-card:hover .story-img-wrapper img {
    opacity: 1; filter: grayscale(0%) sepia(0%); transform: scale(1.05);
}

/* Lencana Tanggal Futuristik */
.story-date-badge {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffe3be; /* Background badge pakai warna ffe3be */
    color: #30041c; /* Teks warna background agar sangat kontras dan terbaca */
    padding: 6px 20px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 900;
    font-family: 'Poppins', serif;
    box-shadow: 0 5px 15px rgba(255, 227, 190, 0.4);
    z-index: 3;
    white-space: nowrap;
}

.story-content {
    padding: 35px 20px 25px 20px;
}

.story-phase {
    font-family: 'Cinzel Decorative', serif;
    color: #ffe3be; /* Warna teks sesuai permintaan */
    font-size: 1.5rem;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.story-text {
    font-family: 'Poppins', serif;
    color: rgba(255, 227, 190, 0.85); /* Warna ffe3be tapi sedikit transparan agar tidak bertabrakan dengan judul */
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Navigasi Panah */
.story-nav {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    background: rgba(48, 4, 28, 0.6);
    border: 1px solid rgba(255, 227, 190, 0.3);
    color: #ffe3be; /* Warna panah */
    width: 35px; height: 35px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex; justify-content: center; align-items: center;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}
.story-nav:hover { background: #ffe3be; color: #30041c; }
.story-nav.prev { left: 5px; }
.story-nav.next { right: 5px; }

/* Indikator Titik */
.story-dots {
    display: flex; gap: 8px; justify-content: center; margin-top: 10px;
}
.story-dots .dot {
    width: 10px; height: 10px;
    background: rgba(255, 227, 190, 0.3); /* Titik pasif */
    border-radius: 50%; cursor: pointer;
    transition: all 0.3s ease;
}
.story-dots .dot.active {
    background: #ffe3be; /* Titik aktif */
    width: 25px; border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 227, 190, 0.5);
}

/* =========================================================
   STYLE HALAMAN GIFT (PREMIUM DESIGN: ATM & KADO)
   ========================================================= */
.bg-gift {
    background-image: url('assets/bg_event1.webp'); 
    background-size: 100% auto !important; 
    background-repeat: repeat !important; 
    background-position: top center !important; 
    background-attachment: scroll !important;
    min-height: 100vh; 
    display: flex; 
    justify-content: center; 
    align-items: center;
    position: relative; 
    overflow: hidden; 
    padding: 60px 20px;
}

.header-gift {
    text-align: center;
    margin-bottom: 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}

.title-gift {
    font-family: 'Cinzel Decorative', serif;
    font-size: 2.2rem;
    color: #ffe3be;
    margin-bottom: 30px; 
    margin-top: 20px;
}

.subtitle-gift {
    font-family: 'Poppins', serif;
    color: #ffe3be;
    font-size: 0.8rem;
    line-height: 1.6;
    opacity: 0.9;
    max-width: 320px;
    margin: 0 auto;
}

.gift-cards-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    z-index: 10;
}

.gift-item-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    /* UBAH BARIS INI: 
       Sebelumnya 20px atau 25px, naikkan menjadi 40px atau 50px */
    margin-bottom: 40px; 
}

/* -------------------------------------------
   A. DESAIN KARTU ATM MEWAH (BCA & E-WALLET)
   ------------------------------------------- */
.atm-card-design {
    width: 100%;
    max-width: 340px;
    aspect-ratio: 1.586 / 1;
    background: linear-gradient(135deg, rgba(80, 10, 45, 0.9) 0%, rgba(48, 4, 28, 1) 100%);
    border: 1px solid rgba(255, 227, 190, 0.3);
    border-radius: 18px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.atm-card-design::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: linear-gradient(to bottom right, rgba(255, 227, 190, 0.1) 0%, transparent 40%, transparent 100%);
    transform: rotate(30deg);
    pointer-events: none;
}

.atm-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 2; 
}

.atm-chip {
    width: 42px;
    height: auto;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
}

.atm-bank-name {
    font-family: 'Poppins', serif;
    color: #ffe3be;
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    text-transform: uppercase;
}

.atm-body {
    text-align: left;
    z-index: 2;
}

.atm-number {
    font-family: 'Courier New', monospace;
    font-size: 1.5rem;
    color: #ffe3be;
    letter-spacing: 2px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    margin-top: 10px;
}

.atm-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    z-index: 2;
}

.atm-holder {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.atm-label {
    font-family: Arial, sans-serif;
    font-size: 0.6rem;
    color: rgba(255, 227, 190, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 3px;
}

.atm-name {
    font-family: 'Poppins', serif;
    font-size: 1.1rem;
    color: #ffe3be;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.btn-copy-inside {
    background: rgba(255, 227, 190, 0.15);
    border: 1px solid rgba(255, 227, 190, 0.4);
    color: #ffe3be;
    padding: 6px 12px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: Arial, sans-serif;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.btn-copy-inside svg { width: 14px; height: 14px; }
.btn-copy-inside:hover { background: #ffe3be; color: #30041c; transform: scale(1.05); }

/* -------------------------------------------
   B. DESAIN KARTU KADO FISIK (GLASSMORPHISM)
   ------------------------------------------- */
.gift-card-premium {
    background: rgba(48, 4, 28, 0.45); 
    border: 1px solid rgba(255, 227, 190, 0.25);
    border-radius: 16px;
    padding: 30px 20px;
    width: 100%;
    max-width: 350px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    text-align: center;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gift-card-premium::before {
    content: '';
    position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 60%; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 227, 190, 0.8), transparent);
}

.gift-icon-wrapper svg {
    width: 40px; height: 40px;
    stroke: #ffe3be;
    margin-bottom: 15px;
    opacity: 0.9;
}
.rek-name {
    margin-bottom: 8px; 
    font-family: 'Poppins', sans-serif; 
    color: #ffe3be; 
    font-size: 1.1rem; /* Ubah ukuran teks penerima di sini */
    font-weight: bold;
}

.alamat-kado {
    font-size: 0.95rem; /* Ubah ukuran teks alamat di sini */
    line-height: 1.5; 
    color: #ffe3be; 
    opacity: 0.85; 
    margin-bottom: 20px;
}

.btn-copy-premium {
    background-color: transparent;
    color: #ffe3be;
    border: 1px solid rgba(255, 227, 190, 0.6);
    padding: 10px 28px;
    font-size: 0.85rem;
    border-radius: 30px;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 15px;
}

.btn-copy-premium:hover, .btn-copy-premium:active { 
    background-color: #ffe3be; 
    color: #30041c; 
    border-color: #ffe3be;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 227, 190, 0.2);
}

/* -------------------------------------------
   C. TOMBOL WHATSAPP CONFIRM
   ------------------------------------------- */
.wa-confirm-wrapper {
    margin-top: 20px;
    text-align: center;
    z-index: 10;
}

.wa-text {
    color: #ffe3be;
    font-size: 0.95rem;
    margin-bottom: 15px;
    font-style: italic;
    opacity: 0.9;
}

.btn-wa-premium {
    background-color: #ffe3be;
    color: #30041c; 
    border: none;
    padding: 8px 24px;
    font-size: 0.9rem;
    border-radius: 20px;
    font-family: 'Poppins', serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(82, 12, 35, 0.2);
}

.btn-wa-premium:hover, .btn-wa-premium:active {
    background-color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(176, 13, 65, 0.4);
}

/* =========================================================
   STYLE HALAMAN RSVP (PREMIUM & GLASSMORPHISM)
   ========================================================= */
.bg-rsvp {
    background-image: url('assets/bg_galeri.webp'); /* Sama persis dengan Gallery */
    background-size: cover;
    background-position: center;
    background-attachment: fixed !important; /* Efek Parallax */
    position: relative;
    padding: 80px 20px;
    min-height: 100vh;
}

.overlay-rsvp {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(48, 4, 28, 0.75); /* Warna overlay marun gelap sama persis dengan Gallery */
    z-index: 1;
}

.rsvp-container {
    position: relative;
    z-index: 2; /* Agar berada di atas overlay */
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
}

.header-rsvp {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title-rsvp {
    font-family: 'Cinzel Decorative', serif;
    color: #ffe3be;
    font-size: 2.2rem;
    margin-bottom: 5px;
}

.subtitle-rsvp {
    font-family: 'Poppins', serif;
    color: #ffe3be;
    font-size: 0.8rem;
    line-height: 1.6;
    opacity: 0.9;
    margin-bottom: 30px;
}

/* Kotak Form dan Wall Glassmorphism */
.rsvp-form-box, .wish-wall-box {
    background: rgba(48, 4, 28, 0.45);
    border: 1px solid rgba(255, 227, 190, 0.25);
    border-radius: 16px;
    padding: 30px 20px;
    margin-bottom: 25px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

/* =========================================================
   Styling Input Form (Background Putih, Teks Hitam, Font Biasa)
   ========================================================= */
.form-group {
    margin-bottom: 15px;
}

.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    background-color: #ffffff; /* Background diubah menjadi putih solid */
    border: 1px solid rgba(255, 227, 190, 0.8); /* Garis batas tetap ada sentuhan emas/krem */
    color: #111111; /* Teks diubah menjadi hitam */
    padding: 12px 15px;
    border-radius: 8px;
    font-family: Arial, Helvetica, sans-serif; /* Font diubah ke standar/biasa agar jelas */
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
}

/* Warna Placeholder (Teks petunjuk sebelum diketik) */
.form-group input::placeholder, .form-group textarea::placeholder {
    color: #888888; /* Diubah jadi abu-abu agar kontras di atas putih */
    font-family: Arial, Helvetica, sans-serif;
}

/* Efek saat form diklik (Fokus) */
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: #c1121f; /* Garis batas berubah merah saat diketik */
    box-shadow: 0 0 8px rgba(193, 18, 31, 0.3);
}

/* Khusus Dropdown Select (Pilihan Kehadiran) */
.form-group select option {
    background-color: #ffffff; /* Background pilihan jadi putih */
    color: #111111; /* Teks pilihan jadi hitam */
}

/* Tombol Submit Premium */
.btn-submit {
    width: 100%;
    background-color: transparent;
    color: #ffe3be;
    border: 1px solid rgba(255, 227, 190, 0.6);
    padding: 12px;
    font-size: 1rem;
    border-radius: 30px;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.btn-submit:hover, .btn-submit:active {
    background-color: #ffe3be;
    color: #30041c;
    border-color: #ffe3be;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 227, 190, 0.2);
}

/* Area Scroll untuk Buku Tamu */
.wish-messages {
    max-height: 250px;
    overflow-y: auto;
    padding-right: 5px;
}

/* Styling Scrollbar Kustom agar Estetik */
.wish-messages::-webkit-scrollbar { width: 5px; }
.wish-messages::-webkit-scrollbar-track { background: rgba(255, 227, 190, 0.1); border-radius: 10px; }
.wish-messages::-webkit-scrollbar-thumb { background: rgba(255, 227, 190, 0.4); border-radius: 10px; }
/* =========================================================
   STYLE BALON UCAPAN BUKU TAMU (BACKGROUND PUTIH & FONT STANDAR)
   ========================================================= */
.wish-item {
    background-color: #ffffff; /* Latar putih solid */
    border: 1px solid #dddddd; /* Garis batas abu-abu halus */
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 12px;
    text-align: left;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Tambahan sedikit bayangan agar menonjol */
}

.wish-item:hover {
    transform: translateX(5px); 
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.wish-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    border-bottom: 1px dashed #cccccc; /* Garis putus-putus abu-abu */
    padding-bottom: 8px;
}

.wish-name {
    color: #111111; /* Teks nama hitam pekat */
    font-family: Arial, Helvetica, sans-serif; /* Font biasa */
    font-size: 1rem;
    font-weight: bold;
}

.wish-status {
    font-size: 0.75rem;
    padding: 4px 12px;
    border-radius: 20px;
    font-family: Arial, Helvetica, sans-serif; /* Font biasa */
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.wish-text {
    color: #333333; /* Teks ucapan abu-abu gelap/hitam */
    font-family: Arial, Helvetica, sans-serif; /* Font biasa */
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
    font-style: normal; /* Dibuat tegak (tidak miring) agar makin mudah dibaca */
}
/* =========================================================
   STYLE HALAMAN PENUTUP (ELEGANT BACKGROUND)
   ========================================================= */
.bg-penutup {
    background-image: url('assets/bg_galeri.webp');
    background-size: cover;
    background-position: center top; 
    background-attachment: fixed !important; 
    position: relative;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-end; 
    
    /* UBAH BARIS INI: 15vh diganti menjadi 8vh (semakin kecil angka = semakin ke bawah) */
    padding: 0 20px 1vh 20px; 
    
    overflow: hidden;
}

.overlay-penutup {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Gradasi: 0% sangat transparan (wajah), 100% gelap marun (teks) */
    background: linear-gradient(to bottom, rgba(48, 4, 28, 0.05) 0%, rgba(48, 4, 28, 0.4) 50%, rgba(48, 4, 28, 0.95) 100%);
    z-index: 1;
}

.penutup-container {
    position: relative;
    z-index: 2; /* Agar teks di atas overlay */
    text-align: center;
    width: 100%;
    max-width: 400px;
}

.nama-mempelai-penutup {
    font-family: 'Cinzel Decorative', serif;
    color: #ffe3be;
    font-size: 1.8rem;
    margin-bottom: 0;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.6); /* Bayangan hitam agar teks menonjol */
}

.teks-penutup {
    font-family: 'Cormorant Garamond', serif;
    color: rgba(255, 227, 190, 0.95);
    font-size: 1rem;
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 30px;
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
}

.terima-kasih {
    font-family: 'Cinzel Decorative', serif;
    color: #ffe3be;
    font-size: 1.1rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
}

/* Animasi Dekorasi Atas Bawah khusus halaman Our Story */
#story:not(.active) .dekor-pisah {
    opacity: 0 !important;
    animation: none !important;
}

#story.active .dekor-pisah {
    opacity: 0;
    animation: munculBingkaiAman 1s ease-in-out 0s forwards !important;
}
/* =========================================================
   ANIMASI DEKORASI BAWAH - HALAMAN COUNTDOWN
   ========================================================= */
#countdown-baru:not(.active) .dekor-pisah {
    opacity: 0 !important;
    animation: none !important;
}

#countdown-baru.active .dekor-pisah {
    opacity: 0;
    animation: munculBingkaiAman 1s ease-in-out 0s forwards !important;
    z-index: 10; /* Memastikan dekorasi berada di atas background tapi tidak menutupi tombol */
}
/* =========================================================
   ANIMASI DEKORASI ATAS - HALAMAN GALLERY
   ========================================================= */
#gallery:not(.active) .dekor-pisah {
    opacity: 0 !important;
    animation: none !important;
}

#gallery.active .dekor-pisah {
    opacity: 0;
    animation: munculBingkaiAman 1s ease-in-out 0s forwards !important;
    z-index: 10; /* Memastikan dekorasi berada di atas overlay transparan */
}
/* =========================================================
   EDIT ANIMASI DEKORASI ATAS (HALAMAN EVENT)
   ========================================================= */
#event.active .dekor-atas.reveal-event {
    /* Format: nama-animasi | durasi | gaya-gerak | waktu-tunda (delay) | forwards */
    animation: munculBingkaiAman 1s ease-in-out 0s forwards !important;
}
/* =========================================================
   PERBAIKAN FINAL BACKGROUND DESKTOP (PROFIL DISAMAKAN DENGAN EVENT)
   ========================================================= */
@media (min-width: 500px) {
    /* 1. Matikan Parallax untuk SEMUA halaman di Desktop */
    html body #hero,
    html body #ayat,
    html body #profil,
    html body #countdown-baru,
    html body #event,
    html body #story,
    html body #gallery,
    html body #gift,
    html body #rsvp,
    html body #penutup {
        background-attachment: scroll !important; 
        background-position: top center !important; 
    }

    /* 2. Kelompok Halaman yang menggunakan pola (Fitting 100% Lebar) */
    /* Kita masukkan #profil ke sini agar tidak nge-zoom */
    html body #profil,
    html body #event, 
    html body #gift {
        background-size: 100% auto !important; 
        background-repeat: repeat !important;
    }

    /* 3. Kelompok Halaman yang menggunakan foto estetik (Full Cover) */
    html body #story,
    html body #gallery,
    html body #rsvp, 
    html body #penutup {
        background-size: cover !important; 
        background-repeat: no-repeat !important;
    }
}
/* =========================================================
   CREDIT DESIGNER (ABSOLUTE POSITION - ANTI GESER)
   ========================================================= */
.credit-wrapper {
    /* Membuat elemen melayang di bagian paling bawah halaman Penutup */
    position: absolute;
    bottom: 30px; 
    left: 0;
    width: 100%;
    
    display: flex;
    justify-content: center;
    z-index: 100; /* Pastikan selalu paling atas dan bisa diklik */
    pointer-events: auto;
    
    /* Hilangkan margin/padding yang membuat halaman membesar */
    margin: 0;
    padding: 0;
}

.credit-box {
    background-color: #30041c; 
    color: #ffe3be; 
    padding: 8px 22px;
    border-radius: 50px; /* Bentuk capsule bulat */
    text-decoration: none; 
    font-family: 'Poppins', serif;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 227, 190, 0.2);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* Bayangan agar terlihat menonjol */
}

.credit-box span {
    font-family: 'Poppins', serif;
    font-size: 0.8rem;
    font-weight: 400;
    text-transform: none;
    font-style: italic;
    opacity: 0.9;
}

/* Efek menyala saat diklik atau disentuh */
.credit-box:hover, .credit-box:active {
    background-color: #ffe3be;
    color: #30041c;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
}

.credit-box:hover span, .credit-box:active span {
    color: #30041c;
}
/* =========================================================
   STYLE HALAMAN TURUT MENGUNDANG (VERSI TERBARU)
   ========================================================= */
.bg-turut {
    /* Menggunakan background yang sama dengan RSVP/Gallery */
    background-image: url('assets/bg_cover1.webp'); 
    background-size: cover;
    background-position: center;
    background-attachment: scroll !important; /* Efek Parallax */
    position: relative;
    padding: 80px 20px;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}


.turut-container {
    position: relative;
    z-index: 2; /* Di atas overlay */
    max-width: 340px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Desain Kotak: Putih dengan Stroke #d78457 */
.doa-card, .turut-card {
    background: #ffffff !important; /* Putih Solid */
    border: 2px solid #d78457;    /* Stroke Oranye Tema */
    padding: 35px 20px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

/* Warna Teks di Dalam Kotak Putih (Diubah jadi gelap agar kontras) */
.title-doa, .title-turut {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.2rem;
    margin-bottom: 5px;
    font-weight: bold;
    color: #ba4b2e; /* Marun tema untuk judul */
}

.doa-arab {
    font-size: 1.5rem;
    margin-bottom: 10px;
    line-height: 1.6;
    font-family: serif;
    color: #1a1a1a;
}

.doa-latin {
    font-size: 0.85rem;
    font-style: italic;
    margin-bottom: 10px;
    color: #555555;
}

.doa-terjemahan {
    font-size: 0.8rem;
    line-height: 1.5;
    font-weight: 400;
    color: #333333;
    font-style: italic;
}

/* =========================================================
   STYLE LIST TURUT MENGUNDANG (DENGAN SIMBOL)
   ========================================================= */
.list-turut {
    list-style: none;
    padding: 0;
    margin-top: 20px;
    text-align: left; /* Diubah ke kiri agar simbol sejajar rapi */
    display: inline-block; /* Membuat list tetap berada di tengah kotak */
}

.list-turut li {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    color: #333333;
    margin-bottom: 12px;
    line-height: 1.4;
    position: relative;
    padding-left: 25px; /* Memberi ruang untuk simbol di kiri */
}

/* Simbol di sebelah kiri nama */
.list-turut li::before {
    content: "◈"; /* Anda bisa ganti dengan "❤" atau "✦" */
    position: absolute;
    left: 0;
    color: #d78457; /* Warna sesuai stroke kotak */
    font-size: 1rem;
    top: -2px;
}

/* Menghapus garis pemisah lama agar tidak bertumpuk dengan simbol */
.list-turut li:not(:last-child)::after {
    display: none;
}