/* ====================================================== */
    /* CLICKABLE NEWS CARD */
    /* ====================================================== */

    .news-page-card {
        cursor: pointer;
    }


    .news-page-card:focus-visible {
        outline:
            3px solid
            rgba(14,165,233,.30);

        outline-offset:
            5px;
    }


    .news-page-card:active {
        /*
            Transform utama card diatur oleh scroll engine,
            jadi feedback klik menggunakan brightness/shadow
            agar tidak bentrok dengan transform scroll.
        */
        filter:
            brightness(.985);
    }


    .news-card-action {
        cursor:
            pointer;
    }


    /* ====================================================== */
    /* MODAL ROOT */
    /* ====================================================== */

    #news-detail-modal {
        position:
            fixed;

        inset:
            0;

        z-index:
            10050;

        display:
            grid;

        place-items:
            center;

        padding:
            24px;

        visibility:
            hidden;

        opacity:
            0;

        pointer-events:
            none;

        transition:
            opacity .34s ease,
            visibility 0s linear .42s;
    }


    #news-detail-modal.open {
        visibility:
            visible;

        opacity:
            1;

        pointer-events:
            auto;

        transition:
            opacity .34s ease,
            visibility 0s linear 0s;
    }


    /* ====================================================== */
    /* BACKDROP */
    /* ====================================================== */

    .news-modal-backdrop {
        position:
            absolute;

        inset:
            0;

        border:
            0;

        background:
            rgba(7,24,39,.34);

        backdrop-filter:
            blur(0px)
            saturate(110%);

        -webkit-backdrop-filter:
            blur(0px)
            saturate(110%);

        opacity:
            0;

        cursor:
            pointer;

        transition:
            opacity .38s ease,
            backdrop-filter .5s cubic-bezier(.16,1,.3,1),
            -webkit-backdrop-filter .5s cubic-bezier(.16,1,.3,1);
    }


    #news-detail-modal.open
    .news-modal-backdrop {
        opacity:
            1;

        backdrop-filter:
            blur(14px)
            saturate(125%);

        -webkit-backdrop-filter:
            blur(14px)
            saturate(125%);
    }


    /* ====================================================== */
    /* MODAL CARD */
    /* ====================================================== */

    .news-modal-shell {
        position:
            relative;

        z-index:
            2;

        width:
            min(860px, 100%);

        max-height:
            min(790px, calc(100dvh - 48px));

        overflow:
            auto;

        overscroll-behavior:
            contain;

        border:
            1px solid
            rgba(255,255,255,.84);

        border-radius:
            32px;

        background:
            rgba(255,255,255,.96);

        box-shadow:
            0 38px 110px
            rgba(7,24,39,.28),
            0 12px 40px
            rgba(14,165,233,.10),
            inset 0 1px 0
            rgba(255,255,255,.96);

        opacity:
            0;

        transform:
            perspective(1100px)
            translate3d(0,34px,0)
            scale(.91)
            rotateX(5deg);

        transform-origin:
            center center;

        filter:
            blur(7px);

        transition:
            opacity .34s ease,
            transform .55s cubic-bezier(.16,1,.3,1),
            filter .44s ease;

        scrollbar-width:
            thin;

        scrollbar-color:
            #cbd5e1 transparent;
    }


    .news-modal-shell::-webkit-scrollbar {
        width:
            8px;
    }


    .news-modal-shell::-webkit-scrollbar-thumb {
        background:
            #cbd5e1;

        border:
            2px solid white;

        border-radius:
            999px;
    }


    #news-detail-modal.open
    .news-modal-shell {
        opacity:
            1;

        transform:
            perspective(1100px)
            translate3d(0,0,0)
            scale(1)
            rotateX(0deg);

        filter:
            blur(0);
    }


    /* ====================================================== */
    /* CLOSE BUTTON */
    /* ====================================================== */

    .news-modal-close {
        position:
            absolute;

        top:
            16px;

        right:
            16px;

        z-index:
            8;

        width:
            42px;

        height:
            42px;

        display:
            inline-flex;

        align-items:
            center;

        justify-content:
            center;

        border:
            1px solid
            rgba(255,255,255,.70);

        border-radius:
            999px;

        color:
            #334155;

        background:
            rgba(255,255,255,.84);

        backdrop-filter:
            blur(12px);

        -webkit-backdrop-filter:
            blur(12px);

        box-shadow:
            0 8px 24px
            rgba(15,23,42,.10);

        cursor:
            pointer;

        opacity:
            0;

        transform:
            rotate(-18deg)
            scale(.78);

        transition:
            transform .42s cubic-bezier(.16,1,.3,1),
            opacity .3s ease,
            background .25s ease,
            color .25s ease;
    }


    #news-detail-modal.open
    .news-modal-close {
        opacity:
            1;

        transform:
            rotate(0deg)
            scale(1);

        transition-delay:
            .12s;
    }


    .news-modal-close:hover {
        color:
            white;

        background:
            #0ea5e9;

        transform:
            rotate(5deg)
            scale(1.05) !important;
    }


    /* ====================================================== */
    /* MEDIA */
    /* ====================================================== */

    .news-modal-media {
        position:
            relative;

        min-height:
            320px;

        overflow:
            hidden;

        border-radius:
            31px 31px 0 0;

        background:
            linear-gradient(
                145deg,
                #e0f2fe,
                #f0f9ff
            );
    }


    .news-modal-media img {
        width:
            100%;

        height:
            360px;

        display:
            block;

        object-fit:
            cover;

        transform:
            scale(1.10);

        filter:
            saturate(.92)
            brightness(.96);

        transition:
            transform 1.05s cubic-bezier(.16,1,.3,1),
            filter .7s ease;
    }


    #news-detail-modal.open
    .news-modal-media img {
        transform:
            scale(1);

        filter:
            saturate(1)
            brightness(1);
    }


    .news-modal-media::after {
        content:
            "";

        position:
            absolute;

        inset:
            0;

        pointer-events:
            none;

        background:
            linear-gradient(
                to top,
                rgba(7,24,39,.50) 0%,
                rgba(7,24,39,.10) 42%,
                transparent 72%
            );
    }


    .news-modal-category {
        position:
            absolute;

        z-index:
            4;

        left:
            20px;

        bottom:
            18px;

        display:
            inline-flex;

        align-items:
            center;

        gap:
            7px;

        padding:
            9px 13px;

        border-radius:
            999px;

        color:
            #075985;

        background:
            rgba(255,255,255,.92);

        backdrop-filter:
            blur(12px);

        -webkit-backdrop-filter:
            blur(12px);

        box-shadow:
            0 7px 20px
            rgba(15,23,42,.10);

        font-size:
            10px;

        font-weight:
            800;

        opacity:
            0;

        transform:
            translateY(12px);

        transition:
            opacity .38s ease,
            transform .5s cubic-bezier(.16,1,.3,1);
    }


    #news-detail-modal.open
    .news-modal-category {
        opacity:
            1;

        transform:
            translateY(0);

        transition-delay:
            .18s;
    }


    /* ====================================================== */
    /* CONTENT */
    /* ====================================================== */

    .news-modal-content {
        padding:
            28px 30px 32px;
    }


    .news-modal-meta {
        display:
            flex;

        align-items:
            center;

        flex-wrap:
            wrap;

        gap:
            8px;

        color:
            #94a3b8;

        font-size:
            10px;

        font-weight:
            700;

        opacity:
            0;

        transform:
            translateY(14px);

        transition:
            opacity .4s ease,
            transform .55s cubic-bezier(.16,1,.3,1);
    }


    .news-modal-title {
        margin-top:
            14px;

        max-width:
            720px;

        color:
            #0f172a;

        font-size:
            clamp(26px,4vw,40px);

        line-height:
            1.17;

        letter-spacing:
            -.045em;

        font-weight:
            800;

        opacity:
            0;

        transform:
            translateY(18px);

        transition:
            opacity .42s ease,
            transform .58s cubic-bezier(.16,1,.3,1);
    }


    .news-modal-description {
        margin-top:
            16px;

        color:
            #64748b;

        font-size:
            13px;

        line-height:
            1.9;

        opacity:
            0;

        transform:
            translateY(18px);

        transition:
            opacity .42s ease,
            transform .6s cubic-bezier(.16,1,.3,1);
    }


    .news-modal-author {
        margin-top:
            24px;

        padding-top:
            20px;

        border-top:
            1px solid #eef2f7;

        display:
            flex;

        align-items:
            center;

        gap:
            11px;

        opacity:
            0;

        transform:
            translateY(16px);

        transition:
            opacity .4s ease,
            transform .55s cubic-bezier(.16,1,.3,1);
    }


    .news-modal-author-icon {
        width:
            40px;

        height:
            40px;

        flex:
            none;

        display:
            inline-flex;

        align-items:
            center;

        justify-content:
            center;

        border-radius:
            14px;

        color:
            #0284c7;

        background:
            #f0f9ff;

        border:
            1px solid #e0f2fe;
    }


    .news-modal-author small {
        display:
            block;

        color:
            #94a3b8;

        font-size:
            9px;

        font-weight:
            700;

        text-transform:
            uppercase;

        letter-spacing:
            .09em;
    }


    .news-modal-author strong {
        display:
            block;

        margin-top:
            2px;

        color:
            #334155;

        font-size:
            11px;

        font-weight:
            750;
    }


    #news-detail-modal.open
    .news-modal-meta,
    #news-detail-modal.open
    .news-modal-title,
    #news-detail-modal.open
    .news-modal-description,
    #news-detail-modal.open
    .news-modal-author {
        opacity:
            1;

        transform:
            translateY(0);
    }


    #news-detail-modal.open
    .news-modal-meta {
        transition-delay:
            .15s;
    }


    #news-detail-modal.open
    .news-modal-title {
        transition-delay:
            .20s;
    }


    #news-detail-modal.open
    .news-modal-description {
        transition-delay:
            .25s;
    }


    #news-detail-modal.open
    .news-modal-author {
        transition-delay:
            .30s;
    }


    /* ====================================================== */
    /* COMING SOON MODAL */
    /* ====================================================== */

    #news-detail-modal.coming-soon
    .news-modal-media {
        min-height:
            300px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        background:
            radial-gradient(
                circle at 50% 30%,
                rgba(125,211,252,.28),
                transparent 42%
            ),
            linear-gradient(
                145deg,
                #f0f9ff,
                #ffffff
            );
    }


    #news-detail-modal.coming-soon
    .news-modal-media::after {
        display:
            none;
    }


    #news-detail-modal.coming-soon
    .news-modal-media img,
    #news-detail-modal.coming-soon
    .news-modal-category {
        display:
            none;
    }


    .news-modal-coming-visual {
        display:
            none;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        padding:
            42px 20px;

        text-align:
            center;
    }


    #news-detail-modal.coming-soon
    .news-modal-coming-visual {
        display:
            flex;
    }


    .news-modal-coming-icon {
        width:
            84px;

        height:
            84px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        border-radius:
            28px;

        color:
            #0284c7;

        background:
            rgba(224,242,254,.92);

        border:
            1px solid #bae6fd;

        box-shadow:
            0 18px 46px
            rgba(14,165,233,.12);

        transform:
            translateY(18px)
            scale(.82)
            rotate(-5deg);

        opacity:
            0;

        transition:
            transform .58s cubic-bezier(.16,1,.3,1),
            opacity .4s ease;
    }


    #news-detail-modal.open
    .news-modal-coming-icon {
        transform:
            translateY(0)
            scale(1)
            rotate(0deg);

        opacity:
            1;

        transition-delay:
            .12s;
    }


    .news-modal-coming-visual p {
        margin-top:
            18px;

        color:
            #0369a1;

        font-size:
            10px;

        font-weight:
            800;

        letter-spacing:
            .10em;

        text-transform:
            uppercase;
    }


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

    @media (max-width: 640px) {

        #news-detail-modal {
            padding:
                10px;

            align-items:
                end;
        }


        .news-modal-shell {
            width:
                100%;

            max-height:
                calc(100dvh - 20px);

            border-radius:
                26px;

            transform:
                translate3d(0,55px,0)
                scale(.96);

            transform-origin:
                center bottom;
        }


        #news-detail-modal.open
        .news-modal-shell {
            transform:
                translate3d(0,0,0)
                scale(1);
        }


        .news-modal-media {
            min-height:
                230px;

            border-radius:
                25px 25px 0 0;
        }


        .news-modal-media img {
            height:
                250px;
        }


        .news-modal-content {
            padding:
                22px 20px 25px;
        }


        .news-modal-title {
            font-size:
                25px;
        }


        .news-modal-close {
            top:
                12px;

            right:
                12px;
        }

    }


    /* ====================================================== */
    /* REDUCED MOTION */
    /* ====================================================== */

    @media (prefers-reduced-motion: reduce) {

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

            animation:
                none !important;
        }

    }