/* =========================================================
   POP-UP PENGUMUMAN SIKU
   Overlay diposisikan di tengah viewport
========================================================= */

/* Mencegah halaman bergulir saat pop-up tampil */
html body.siku-popup-open {
    overflow: hidden !important;
}

/* Lapisan gelap memenuhi layar */
html body .siku-popup-overlay {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;

    z-index: 2147483647 !important;

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

    padding: 20px !important;
    box-sizing: border-box !important;

    background: rgba(0, 0, 0, 0.78) !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    animation: siku-popup-fade-in 0.2s ease-out;
}

/* Panel gambar berada di tengah layar */
html body .siku-popup-overlay .siku-popup-panel {
    position: relative !important;

    flex: 0 1 680px !important;
    width: 100% !important;
    max-width: 680px !important;

    max-height: calc(100vh - 40px) !important;
    max-height: calc(100dvh - 40px) !important;

    margin: auto !important;
    padding: 10px !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    background: #fff !important;
    box-shadow: 0 12px 45px rgba(0, 0, 0, 0.35) !important;

    animation: siku-popup-zoom-in 0.22s ease-out;
}

/* Judul pengumuman */
html body .siku-popup-overlay .siku-popup-title {
    margin: 0 !important;
    padding: 8px 38px 12px 8px !important;

    color: #222 !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;

    overflow-wrap: anywhere;
}

/* Tombol tutup */
html body .siku-popup-overlay .siku-popup-close {
    position: absolute !important;
    z-index: 2 !important;

    top: 12px !important;
    right: 12px !important;

    width: 36px !important;
    height: 36px !important;

    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;

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

    background: rgba(255, 255, 255, 0.95) !important;
    color: #222 !important;

    font-size: 28px !important;
    line-height: 1 !important;

    cursor: pointer !important;
}

html body .siku-popup-overlay .siku-popup-close:hover {
    background: #e8f5f4 !important;
    color: #008f8a !important;
}

html body .siku-popup-overlay .siku-popup-close:focus-visible {
    outline: 2px solid #008f8a !important;
    outline-offset: 2px !important;
}

/* Area gambar */
html body .siku-popup-overlay .siku-popup-content {
    width: 100% !important;
    line-height: 0 !important;
}

/* Gambar menyesuaikan ukuran layar */
html body .siku-popup-overlay .siku-popup-image {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    max-height: calc(100vh - 110px) !important;
    max-height: calc(100dvh - 110px) !important;

    margin: 0 auto !important;

    object-fit: contain !important;
}

/* =========================================================
   ANIMASI
========================================================= */

@keyframes siku-popup-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes siku-popup-zoom-in {
    from {
        opacity: 0;
        transform: scale(0.97);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* =========================================================
   RESPONSIVE MOBILE
========================================================= */

@media (max-width: 600px) {
    html body .siku-popup-overlay {
        padding: 12px !important;
    }

    html body .siku-popup-overlay .siku-popup-panel {
        max-height: calc(100vh - 24px) !important;
        max-height: calc(100dvh - 24px) !important;

        padding: 6px !important;
    }

    html body .siku-popup-overlay .siku-popup-title {
        font-size: 16px !important;
        padding: 8px 36px 10px 6px !important;
    }

    html body .siku-popup-overlay .siku-popup-close {
        top: 7px !important;
        right: 7px !important;

        width: 32px !important;
        height: 32px !important;
    }

    html body .siku-popup-overlay .siku-popup-image {
        max-height: calc(100vh - 90px) !important;
        max-height: calc(100dvh - 90px) !important;
    }
}

/* Menghormati preferensi pengurangan animasi */
@media (prefers-reduced-motion: reduce) {
    html body .siku-popup-overlay,
    html body .siku-popup-overlay .siku-popup-panel {
        animation: none !important;
    }
}