/*
        FIX:
        Animasi popup sekarang dijalankan lewat Web Animations API.
        CSS hanya bertugas menentukan visibility / layout.
    */

    #news-detail-modal {
        transition: none !important;
    }

    #news-detail-modal.open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    #news-detail-modal .news-modal-backdrop,
    #news-detail-modal .news-modal-shell,
    #news-detail-modal .news-modal-close,
    #news-detail-modal .news-modal-category,
    #news-detail-modal .news-modal-meta,
    #news-detail-modal .news-modal-title,
    #news-detail-modal .news-modal-description,
    #news-detail-modal .news-modal-author,
    #news-detail-modal .news-modal-coming-icon,
    #news-detail-modal .news-modal-media img {
        transition: none !important;
    }

    /*
        Ripple kecil saat kartu berita diklik.
    */
    .news-page-card {
        position: relative;
    }

    .news-click-ripple {
        position: absolute;
        z-index: 20;

        width: 24px;
        height: 24px;

        margin-left: -12px;
        margin-top: -12px;

        border-radius: 999px;

        pointer-events: none;

        background:
            rgba(14,165,233,.18);

        box-shadow:
            0 0 0 1px
            rgba(14,165,233,.14);
    }