/* Overlay: Menutupi seluruh layar dengan warna gelap transparan */

.popup-overlay {

    display: flex; /* Menggunakan flex untuk memposisikan di tengah */

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.7);

    z-index: 9999;

    justify-content: center;

    align-items: center;

    visibility: visible;

}



/* Kontainer Poster dengan Animasi dari Atas */

.popup-content {

    position: relative;

    width: 90%;

    max-width: 450px;

    background: #fff;

    border-radius: 15px;

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(0,0,0,0.5);

    

    /* Pemicu Animasi */

    animation: slideDown 0.6s ease-out forwards;

}



/* Keyframes untuk gerakan dari atas ke bawah */

@keyframes slideDown {

    0% {

        transform: translateY(-100%);

        opacity: 0;

    }

    100% {

        transform: translateY(0);

        opacity: 1;

    }

}



/* Pengaturan Gambar agar Responsif */

.promo-img {

    width: 100%;

    display: block;

    height: auto;

}



/* Tombol Close di pojok kanan atas */

.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;

    width: 35px;
    height: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 20px;
    font-weight: bold;

    color: #fff;
    background-color: rgba(0, 0, 0, 0.6); /* 🔥 background gelap */

    border-radius: 50%; /* bulat */
    cursor: pointer;

    z-index: 10;
}


.close-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
    
}



/* Animasi saat popup ditutup (Tarik ke Bawah) */

.popup-content.closing {

    animation: slideOutDown 0.5s ease-in forwards;

}



@keyframes slideOutDown {

    0% {

        transform: translateY(0);

        opacity: 1;

    }

    100% {

        transform: translateY(120%); /* Ditarik ke bawah layar */

        opacity: 0;

    }

}



/* Memastikan overlay juga memudar perlahan saat ditutup */

.popup-overlay.fade-out {

    opacity: 0;

    transition: opacity 0.5s ease-in;

    pointer-events: none; /* Agar tidak bisa diklik saat proses hilang */

}



/* Tombol Tutup/CTA Tambahan (Opsional) */

.popup-footer {

    padding: 10px;

    text-align: center;

    background: #fff;

}



.cta-button {

    background-color: #2fb9e6; /* Biru Gelap */

    color: white;

    border: none;

    padding: 10px 20px;

    border-radius: 15px;

    font-weight: bold;

    cursor: pointer;

    width: 100%;


}