/* ====================================================== */
    /* BERITA PAGE */
    /* ====================================================== */

    #berita-page {
        position: relative;
        z-index: 2;
        min-height: 100vh;
        overflow: hidden;
        isolation: isolate;
    }

    #berita-page::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -2;
        pointer-events: none;

        background-image:
            url('https://lh3.googleusercontent.com/d/1_uJr5viwuC4N85Fo5GnzSIlpDvhPBQc4');

        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;

        opacity: .20;
        transform: scale(1.025);
    }

    #berita-page::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;

        background:
            linear-gradient(
                180deg,
                rgba(248,252,255,.58) 0%,
                rgba(255,255,255,.78) 27%,
                rgba(255,255,255,.90) 58%,
                rgba(255,255,255,.97) 100%
            );
    }


    /* ====================================================== */
    /* HERO */
    /* ====================================================== */

    .news-page-hero {
        padding:
            150px 1.5rem
            58px;

        position: relative;
    }

    .news-page-container {
        width: min(1180px, 100%);
        margin: 0 auto;
    }

    .news-page-hero-inner {
        max-width: 840px;
        margin: 0 auto;
        text-align: center;
    }

    .news-page-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;

        padding: 8px 14px;

        border-radius: 999px;
        border: 1px solid rgba(186,230,253,.95);

        color: #0369a1;

        background:
            rgba(240,249,255,.86);

        backdrop-filter:
            blur(12px)
            saturate(130%);

        -webkit-backdrop-filter:
            blur(12px)
            saturate(130%);

        font-size: 10px;
        font-weight: 800;

        letter-spacing: .12em;
        text-transform: uppercase;

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

    .news-page-title {
        margin-top: 22px;

        color: #0f172a;

        font-size:
            clamp(42px, 6vw, 70px);

        line-height: 1.04;
        letter-spacing: -.055em;

        font-weight: 800;
    }

    .news-page-title span {
        color: #0ea5e9;
    }

    .news-page-lead {
        max-width: 700px;

        margin:
            20px auto 0;

        color: #64748b;

        font-size:
            15px;

        line-height: 1.85;
    }

    .news-page-meta {
        margin-top: 30px;

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

        gap: 10px;
    }

    .news-page-meta span {
        display: inline-flex;
        align-items: center;
        gap: 7px;

        padding:
            9px 13px;

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

        border-radius:
            999px;

        color:
            #475569;

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

        backdrop-filter:
            blur(12px);

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

        box-shadow:
            0 9px 25px
            rgba(15,23,42,.045);

        font-size:
            10px;

        font-weight:
            700;
    }


    /* ====================================================== */
    /* DIRECTORY CONTROLS */
    /* ====================================================== */

    .news-controls-section {
        padding:
            4px 1.5rem
            24px;
    }

    .news-search {
        max-width: 680px;

        margin:
            0 auto;

        display: flex;
        align-items: center;

        gap:
            12px;

        min-height:
            58px;

        padding:
            8px 10px
            8px 19px;

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

        border-radius:
            999px;

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

        backdrop-filter:
            blur(16px)
            saturate(135%);

        -webkit-backdrop-filter:
            blur(16px)
            saturate(135%);

        box-shadow:
            0 15px 38px
            rgba(15,23,42,.075),
            inset 0 1px 0
            rgba(255,255,255,.94);

        transition:
            transform .35s cubic-bezier(.16,1,.3,1),
            border-color .3s ease,
            box-shadow .35s ease;
    }

    .news-search:hover {
        transform:
            translateY(-2px);

        box-shadow:
            0 19px 44px
            rgba(14,165,233,.10),
            inset 0 1px 0
            rgba(255,255,255,.96);
    }

    .news-search:focus-within {
        border-color:
            rgba(125,211,252,.98);

        box-shadow:
            0 20px 48px
            rgba(14,165,233,.12),
            0 0 0 4px
            rgba(14,165,233,.07);
    }

    .news-search svg {
        color:
            #64748b;

        flex:
            none;
    }

    .news-search input {
        flex: 1;
        min-width: 0;

        border: 0;
        outline: 0;

        background:
            transparent;

        color:
            #0f172a;

        font-family:
            inherit;

        font-size:
            13px;
    }

    .news-search input::placeholder {
        color:
            #94a3b8;
    }

    .news-filter-row {
        margin-top:
            24px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        flex-wrap:
            wrap;

        gap:
            9px;
    }

    .news-filter-chip {
        position:
            relative;

        overflow:
            hidden;

        min-height:
            38px;

        display:
            inline-flex;

        align-items:
            center;

        justify-content:
            center;

        gap:
            7px;

        padding:
            0 16px;

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

        border-radius:
            999px;

        color:
            #475569;

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

        backdrop-filter:
            blur(12px);

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

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

        font-family:
            inherit;

        font-size:
            10.5px;

        font-weight:
            700;

        cursor:
            pointer;

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

    .news-filter-chip::after {
        content: "";

        position:
            absolute;

        inset:
            0;

        pointer-events:
            none;

        background:
            linear-gradient(
                110deg,
                transparent 17%,
                rgba(255,255,255,.45) 48%,
                transparent 76%
            );

        transform:
            translateX(-135%);

        transition:
            transform .68s cubic-bezier(.16,1,.3,1);
    }

    .news-filter-chip:hover {
        color:
            #0284c7;

        transform:
            translateY(-2px);

        border-color:
            rgba(186,230,253,.95);
    }

    .news-filter-chip:hover::after {
        transform:
            translateX(135%);
    }

    .news-filter-chip.active {
        color:
            #ffffff;

        background:
            #0ea5e9;

        border-color:
            #0ea5e9;

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


    /* ====================================================== */
    /* NEWS GRID */
    /* ====================================================== */

    .news-list-section {
        padding:
            22px 1.5rem
            100px;
    }

    .news-page-grid {
        display:
            grid;

        grid-template-columns:
            repeat(3, minmax(0,1fr));

        gap:
            22px;
    }

    .news-page-card {
        position:
            relative;

        overflow:
            hidden;

        display:
            flex;

        flex-direction:
            column;

        min-height:
            100%;

        border:
            1px solid
            rgba(226,232,240,.92);

        border-radius:
            27px;

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

        backdrop-filter:
            blur(8px);

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

        box-shadow:
            0 14px 36px
            rgba(15,23,42,.055),
            inset 0 1px 0
            rgba(255,255,255,.90);

        transition:
            transform .5s cubic-bezier(.16,1,.3,1),
            box-shadow .5s ease,
            border-color .35s ease;
    }

    .news-page-card:hover {
        transform:
            translateY(-8px);

        border-color:
            rgba(125,211,252,.95);

        box-shadow:
            0 27px 65px
            rgba(14,165,233,.13),
            inset 0 1px 0
            rgba(255,255,255,.94);
    }

    .news-page-image {
        position:
            relative;

        height:
            232px;

        margin:
            12px 12px 0;

        overflow:
            hidden;

        border-radius:
            19px;

        background:
            #e0f2fe;
    }

    .news-page-image img {
        width:
            100%;

        height:
            100%;

        object-fit:
            cover;

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

    .news-page-card:hover
    .news-page-image img {
        transform:
            scale(1.065);

        filter:
            saturate(1.05);
    }

    .news-page-image::after {
        content: "";

        position:
            absolute;

        inset:
            0;

        background:
            linear-gradient(
                to top,
                rgba(15,23,42,.18),
                transparent 60%
            );

        pointer-events:
            none;
    }

    .news-page-badges {
        position:
            absolute;

        z-index:
            3;

        top:
            12px;

        left:
            12px;

        right:
            12px;

        display:
            flex;

        align-items:
            flex-start;

        justify-content:
            space-between;

        gap:
            8px;
    }

    .news-card-tag {
        display:
            inline-flex;

        align-items:
            center;

        gap:
            5px;

        padding:
            7px 10px;

        border-radius:
            999px;

        font-size:
            9px;

        font-weight:
            800;

        box-shadow:
            0 6px 18px
            rgba(15,23,42,.08);

        backdrop-filter:
            blur(12px);

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

    .news-card-tag.category {
        color:
            #075985;

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

    .news-card-tag.featured {
        color:
            #ffffff;

        background:
            rgba(14,165,233,.94);
    }

    .news-page-content {
        flex:
            1;

        display:
            flex;

        flex-direction:
            column;

        padding:
            19px 19px 18px;
    }

    .news-page-date {
        display:
            flex;

        align-items:
            center;

        flex-wrap:
            wrap;

        gap:
            8px;

        color:
            #94a3b8;

        font-size:
            9.5px;

        font-weight:
            650;
    }

    .news-page-card h2 {
        margin-top:
            12px;

        color:
            #0f172a;

        font-size:
            18px;

        line-height:
            1.42;

        letter-spacing:
            -.025em;

        font-weight:
            800;

        transition:
            color .28s ease;
    }

    .news-page-card:hover h2 {
        color:
            #0284c7;
    }

    .news-page-description {
        margin-top:
            10px;

        color:
            #64748b;

        font-size:
            11px;

        line-height:
            1.75;

        display:
            -webkit-box;

        -webkit-line-clamp:
            3;

        -webkit-box-orient:
            vertical;

        overflow:
            hidden;
    }

    .news-card-bottom {
        margin-top:
            auto;

        padding-top:
            17px;

        border-top:
            1px solid #f1f5f9;

        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

        gap:
            12px;
    }

    .news-card-author {
        display:
            flex;

        align-items:
            center;

        gap:
            8px;

        min-width:
            0;

        color:
            #64748b;

        font-size:
            9.5px;

        font-weight:
            650;
    }

    .news-card-author-icon {
        width:
            30px;

        height:
            30px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        flex:
            none;

        border-radius:
            999px;

        color:
            #0284c7;

        background:
            #f0f9ff;

        border:
            1px solid #e0f2fe;
    }

    .news-card-action {
        width:
            36px;

        height:
            36px;

        flex:
            none;

        display:
            inline-flex;

        align-items:
            center;

        justify-content:
            center;

        border-radius:
            999px;

        color:
            #0284c7;

        background:
            #f0f9ff;

        border:
            1px solid #e0f2fe;

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

    .news-page-card:hover
    .news-card-action {
        transform:
            translate(2px,-2px);

        color:
            #ffffff;

        background:
            #0ea5e9;
    }


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

    .news-coming-card {
        min-height:
            430px;

        border:
            1px dashed
            rgba(125,211,252,.95);

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.72),
                rgba(240,249,255,.72)
            );
    }

    .news-coming-card:hover {
        transform:
            translateY(-5px);
    }

    .news-coming-inner {
        min-height:
            430px;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        padding:
            32px 24px;

        text-align:
            center;
    }

    .news-coming-icon {
        width:
            70px;

        height:
            70px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        border-radius:
            22px;

        color:
            #0284c7;

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

        border:
            1px solid
            rgba(186,230,253,.95);

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

    .news-coming-label {
        margin-top:
            22px;

        padding:
            7px 11px;

        display:
            inline-flex;

        align-items:
            center;

        gap:
            6px;

        border-radius:
            999px;

        color:
            #0369a1;

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

        border:
            1px solid
            rgba(186,230,253,.94);

        font-size:
            9px;

        font-weight:
            800;

        text-transform:
            uppercase;

        letter-spacing:
            .06em;
    }

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

        color:
            #0f172a;

        font-size:
            18px;

        font-weight:
            800;
    }

    .news-coming-copy {
        max-width:
            270px;

        margin-top:
            9px;

        color:
            #64748b;

        font-size:
            11px;

        line-height:
            1.75;
    }

    .news-coming-slot {
        margin-top:
            20px;

        color:
            #94a3b8;

        font-size:
            9px;

        font-weight:
            750;

        letter-spacing:
            .08em;

        text-transform:
            uppercase;
    }


    /* ====================================================== */
    /* EMPTY */
    /* ====================================================== */

    #news-empty {
        display:
            none;

        margin-top:
            32px;

        padding:
            36px 20px;

        border:
            1px dashed #bae6fd;

        border-radius:
            24px;

        color:
            #64748b;

        background:
            rgba(248,252,255,.86);

        text-align:
            center;

        font-size:
            12px;

        line-height:
            1.7;
    }


    /* ====================================================== */
    /* PAGINATION */
    /* ====================================================== */

    .news-pagination-wrap {
        margin-top:
            38px;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        gap:
            13px;
    }

    .news-pagination-info {
        color:
            #64748b;

        font-size:
            10px;

        font-weight:
            650;
    }

    .news-pagination {
        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        gap:
            7px;

        padding:
            7px;

        border-radius:
            999px;

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

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

        backdrop-filter:
            blur(14px);

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

        box-shadow:
            0 12px 30px
            rgba(15,23,42,.055);
    }

    .news-page-btn {
        min-width:
            38px;

        height:
            38px;

        padding:
            0 12px;

        display:
            inline-flex;

        align-items:
            center;

        justify-content:
            center;

        gap:
            5px;

        border:
            0;

        border-radius:
            999px;

        color:
            #64748b;

        background:
            transparent;

        font-family:
            inherit;

        font-size:
            10px;

        font-weight:
            750;

        cursor:
            pointer;

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

    .news-page-btn:hover:not(:disabled) {
        color:
            #0284c7;

        background:
            #f0f9ff;

        transform:
            translateY(-1px);
    }

    .news-page-btn.active {
        color:
            #ffffff;

        background:
            #0ea5e9;

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

    .news-page-btn:disabled {
        opacity:
            .34;

        cursor:
            default;
    }


    
    /* ====================================================== */
    /* SCROLL ANIMATION V2 - DIRECT & REVERSIBLE */
    /* ====================================================== */

    /*
        Animasi ini tidak bergantung pada class "visible".
        Posisi, opacity, blur, dan scale dihitung langsung
        dari posisi elemen terhadap viewport saat scroll.
    */

    .news-reveal {
        opacity: 1 !important;
        transform: none;
        filter: none;

        transition: none !important;

        backface-visibility: hidden;
        transform-style: preserve-3d;

        will-change: auto;
    }


    .news-reveal.news-motion-active {
        will-change:
            transform,
            opacity,
            filter;
    }


    /*
        Hero mendapat depth/parallax ringan ketika halaman digeser.
    */
    .news-page-hero-inner {
        transform-origin:
            center 35%;

        will-change:
            transform,
            opacity,
            filter;
    }


    /*
        Kartu memakai origin sedikit ke bawah supaya
        scale terasa seperti muncul dari permukaan halaman.
    */
    .news-page-card {
        transform-origin:
            50% 65%;
    }


    /*
        Search dan filter terlihat seperti panel kaca
        yang melayang masuk ke posisi akhirnya.
    */
    .news-search,
    .news-filter-row {
        transform-origin:
            center center;
    }


    /*
        Pagination tetap menggunakan keyframe sendiri
        saat tombol halaman ditekan.
    */
    @keyframes newsPageEnter {

        from {
            opacity:
                0;

            transform:
                translate3d(0, 22px, 0)
                scale(.975);

            filter:
                blur(4px);
        }

        to {
            opacity:
                1;

            transform:
                translate3d(0, 0, 0)
                scale(1);

            filter:
                blur(0);
        }

    }


    .news-page-card.pagination-enter {
        animation:
            newsPageEnter
            .58s
            cubic-bezier(.16,1,.3,1)
            both;
    }


    /*
        Sedikit kilau tambahan saat card sedang mendekati viewport.
        Opacity diatur JS melalui custom property.
    */
    .news-page-card::before {
        content:
            "";

        position:
            absolute;

        inset:
            0;

        z-index:
            0;

        pointer-events:
            none;

        border-radius:
            inherit;

        opacity:
            var(--news-glow, 0);

        background:
            linear-gradient(
                125deg,
                rgba(255,255,255,.30),
                transparent 30%,
                rgba(14,165,233,.035) 72%,
                transparent
            );

        transition:
            opacity .12s linear;
    }


    .news-page-card > * {
        position:
            relative;

        z-index:
            1;
    }


    /* ====================================================== */
    /* MOBILE SCROLL MOTION */
    /* ====================================================== */

    @media (max-width: 767px) {

        /*
            Blur dan gerakan horizontal diperkecil di HP
            supaya compositor bekerja lebih ringan.
        */
        .news-page-hero-inner,
        .news-reveal {
            backface-visibility:
                hidden;
        }

    }


    /* ====================================================== */
    /* ACCESSIBILITY */
    /* ====================================================== */

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

        .news-reveal,
        .news-page-hero-inner,
        .news-page-card {
            opacity:
                1 !important;

            transform:
                none !important;

            filter:
                none !important;

            animation:
                none !important;

            transition:
                none !important;

            will-change:
                auto !important;
        }

    }





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

    @media (max-width: 900px) {

        .news-page-grid {
            grid-template-columns:
                repeat(2,minmax(0,1fr));
        }

    }

    @media (max-width: 640px) {

        .news-page-hero {
            padding:
                120px 14px
                46px;
        }

        .news-page-title {
            font-size:
                40px;
        }

        .news-controls-section,
        .news-list-section {
            padding-left:
                14px;

            padding-right:
                14px;
        }

        .news-page-grid {
            grid-template-columns:
                1fr;
        }

        .news-page-image {
            height:
                218px;
        }

        .news-page-btn {
            min-width:
                34px;

            height:
                34px;

            padding:
                0 9px;
        }

        .news-page-btn.nav span {
            display:
                none;
        }

        .news-coming-card,
        .news-coming-inner {
            min-height:
                345px;
        }

    }

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

        .news-reveal {
            opacity: 1 !important;
            transform: none !important;
            filter: none !important;
            transition: none !important;
        }

    }