/* ================= BREADCRUMB ================= */
    .newslist-breadcrumb{
        display:flex;
        align-items:center;
        gap:8px;
        margin-top:-80px;
        margin-bottom:0;
        margin-left:-115px;
        transform:translateY(-45px);
        color:#ffffff;
        font-size:14px;
        font-weight:500;
    }

    .newslist-breadcrumb i{
        font-size:9px;
        opacity:.8;
    }

    .newslist-breadcrumb a{
        color:#fff;
        text-decoration:none;
        font-weight:600;
    }

    .newslist-breadcrumb a:hover{
        color:#98d733;
        text-decoration:none;
    }

    .newslist-breadcrumb span{
        font-weight:750;
        color:#caf5f2;
        text-decoration:none;   
    }

    /* ================= HERO ================= */
    .newslist-hero{
        height:460px;
        position:relative;
        overflow:hidden;
        background-image:url("/static/img/profil/hero.jpg");
        background-size:cover;
        background-position:right center;
        display:flex;
        align-items:center;
        z-index: 1;
        min-height:420px;
        padding-bottom:120px;
    }

    /* RED GRADIENT */
    .newslist-hero-overlay{
        position:absolute;
        inset:0;
        background:
        linear-gradient(
            90deg,
            rgba(190,0,0,0.95) 0%,
            rgba(205,0,0,0.75) 35%,
            rgba(205,0,0,0.25) 70%,
            rgba(252, 251, 251, 0.05)
        );
    }

    /* DOT */
    .newslist-hero::before{
        content:"";
        position:absolute;
        top:25px;
        left:35px;
        width:120px;
        height:120px;
        background-image:
        radial-gradient(
            rgba(255,255,255,.8) 2px,
            transparent 2px
        );
        background-size:16px 16px;
        opacity:.5;
        z-index:3;
    }

    /* CONTENT */
    .newslist-hero-container{
        position:relative;
        z-index:2;
        width:100%;
        padding-left:80px;
    }

    .newslist-hero-content{
        max-width:800px;
        color:white;
        transform:translateY(20px);
        padding-left:100px;
        padding-bottom: 110px;
    }

    .newslist-label{
        color:white;
        font-size:52px;
        font-weight:700;
        margin:0 0 16px -80px;
        line-height:1.15;
    }

    .newslist-hero p{
        font-size:18px;
        line-height:1.6;
        color:white;
        max-width: 620px;
        margin-bottom: 0;
        margin-left: -80px;
    }

    /* =========================================================
    SOFT FADE BAGIAN BAWAH HERO
    ========================================================= */
    .newslist-hero::after{
        content:"";
        position:absolute;
        left:0;
        right:0;
        bottom:0;
        height:120px;
        z-index:5;
        background:
            linear-gradient(
                to bottom,
                rgba(255,255,255,0) 0%,
                rgba(255,255,255,.35) 35%,
                rgba(255,255,255,.75) 65%,
                #ffffff 100%
            );
        pointer-events:none;
    }

    /*=====================================
    PAGE
    =====================================*/
    .news-page-wrapper{
        position:relative;
        margin-top:-55px;
        margin-bottom:80px;
        z-index:5;
    }

    .news-page{
        background:#fff;
        border-radius:34px;
        padding:40px;
        padding-bottom:80px;
        box-shadow:0 20px 60px rgba(0,0,0,.08);
    }

    .section-title{
        font-size:36px;
        font-weight:700;
        color:#14213d;
        margin-bottom:30px;
    }

    /* ================= GRID ================= */
    .news-grid{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:28px;
    }

    .news-grid p{
        grid-column:1/-1;
        text-align:center;
        background:#fff;
        padding:60px;
        border-radius:20px;
    }

    /* ================= CARD ================= */
    .news-card{
        background:#fff;
        border-radius:22px;
        overflow:hidden;
        box-shadow:0 12px 35px rgba(0,0,0,.08);
        transition:.3s;
        display:block;
        color:inherit;
        text-decoration:none !important;
    }

    .news-card:hover{
        transform:translateY(-8px);
        box-shadow:0 18px 45px rgba(0,0,0,.12);
        color:inherit;
        text-decoration:none !important;
    }

    .news-card:hover .news-title{
        color:#d71920;
    }

    /* ================= IMAGE ================= */
    .news-thumb{
        height:220px;
        overflow:hidden;
    }

    .news-thumb img{
        width:100%;
        height:100%;
        object-fit:cover;
        transition:.4s;
    }

    .news-card:hover img{
        transform:scale(1.08);
    }

    /* ================= BODY ================= */
    .news-body{
        padding:22px;
    }

    .news-date{
        display:inline-flex;
        align-items:center;
        gap:8px;
        font-size:14px;
        color:#64748b;
        margin-bottom:14px;
    }

    .news-title{
        margin:0 0 18px;
        line-height:1.5;
        text-decoration:none !important;

        color:#0f172a;
        font-size:22px;
        font-weight:700;
        transition:.2s;
    }

    /* ================= BUTTON ================= */
    .news-readmore{
        display:inline-flex;
        align-items:center;
        gap:8px;
        color:#d71920;
        font-weight:700;
        text-decoration:none;
        transition:.2s;
    }

    .news-readmore:hover{
        gap:14px;
        text-decoration:none;
    }

    /* ================= PAGINATION ================= */
    .pagination{
        margin:60px 0 20px;
        display:flex;
        justify-content:center;
        gap:10px;
        flex-wrap:wrap;
    }

    .pagination a,
    .pagination span{
        width:46px;
        height:46px;
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius:12px;
        background:#fff;
        border:1px solid #e2e8f0;
        font-weight:700;
        color:#475569;
        text-decoration:none;
        transition:.2s;
    }

    .pagination a:hover{
        background:#d71920;
        color:#fff;
    }

    .pagination .active{
        background:#d71920;
        color:#fff;
        border-color:#d71920;
    }

    /*==================================================
    FEATURED NEWS
    ==================================================*/
    .featured-news{
        display:grid;
        grid-template-columns:48% 52%;
        align-items:center;
        gap:50px;
        background:#fff;
        border-radius:32px;
        padding:32px;
        margin-bottom:70px;
        box-shadow:0 18px 50px rgba(0,0,0,.08);
        transition:.35s;
        color:inherit;
        text-decoration:none !important;
    }

    .featured-news:hover{
        transform:translateY(-6px);
        box-shadow:0 28px 70px rgba(0,0,0,.12);
    }

    .featured-news:hover .featured-title{
        color:#d71920;
    }

    .featured-image{
        height:340px;
        overflow:hidden;
        border-radius:20px;
    }

    .featured-image img{
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center center;
        display:block;
        transition:.5s;
    }

    .featured-news:hover img{
        transform:scale(1.05);
    }

    .featured-content{
        padding:0;
        display:flex;
        flex-direction:column;
        justify-content:center;
    }

    .featured-content h2{
        margin:14px 0 22px;
        font-size:36px;
        font-weight:700;
        line-height:1.25;
        color:#14213d;
    }

    .featured-badge{
        display:inline-block;
        background:#D71920;
        color:#fff;
        padding:10px 22px;
        border-radius:50px;
        font-size:13px;
        font-weight:700;
        margin-bottom:20px;
        width:max-content;
        letter-spacing:.5px;
    }

    .featured-date{
        color:#64748b;
        font-size:15px;
        margin-bottom:18px;
    }

    .featured-excerpt{
        font-size:17px;
        line-height:1.8;
        color:#64748b;
        margin-bottom:30px;
    }

    .featured-button{
        color:#D71920;
        font-weight:700;
        text-decoration:none;
        font-size:18px;
        transition:.25s;
    }


    /* ================= MOBILE ================= */
    @media(max-width:600px){

        /* =====================================================
        HERO MOBILE
        ===================================================== */
        .newslist-hero{
            height:300px;
            min-height:0;
            padding-bottom:0;

            position:relative;
            overflow:hidden;

            align-items:flex-start;

            background-position:68% center;
        }

        /* -----------------------------------------------------
        OVERLAY MOBILE
        ----------------------------------------------------- */
        .newslist-hero-overlay{
            background:
            linear-gradient(
                90deg,
                rgba(190,0,0,.94) 0%,
                rgba(205,0,0,.72) 42%,
                rgba(205,0,0,.25) 75%,
                rgba(255,255,255,.05) 100%
            );
        }

        /* -----------------------------------------------------
        DOT PATTERN
        ----------------------------------------------------- */
        .newslist-hero::before{
            top:22px;
            left:18px;
            width:90px;
            height:90px;
            background-size:13px 13px;
            opacity:.45;
        }

        /* -----------------------------------------------------
        CONTENT
        ----------------------------------------------------- */
        .newslist-hero-container{
            width:100%;
        }

        .newslist-hero-content{
            max-width:none;
            padding-left:20px;
            padding-right:20px;
            padding-top:-10px;
            padding-bottom:0;
            transform:none;
        }
        
        /* -----------------------------------------------------
        BREADCRUMB
        ----------------------------------------------------- */
        .newslist-breadcrumb{
            display:none;

        }

        /* -----------------------------------------------------
        JUDUL
        ----------------------------------------------------- */
        .newslist-label{
            font-size:30px;
            line-height:1.15;
            font-weight:800;
            margin:0 0 12px -81px;
            color:#fff;
    }

        /* -----------------------------------------------------
        DESKRIPSI
        ----------------------------------------------------- */
        .newslist-hero p{
            font-size:14px;
            line-height:1.55;
            max-width:330px;
            margin:0 0 0 -81px;
            color:#fff;
        }

        /* =====================================================
        SOFT FADE BAWAH HERO
        ===================================================== */
        .newslist-hero::after{
            height:100px;
            background:
            linear-gradient(
                to bottom,
                rgba(255,255,255,0) 0%,
                rgba(255,255,255,.18) 25%,
                rgba(255,255,255,.65) 65%,
                #fff 100%
            );
            z-index:5;
            pointer-events:none;
        }

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

        .news-page-wrapper{
            margin-top:-35px;
            margin-bottom:40px;
        }

        .news-page{
            padding:20px;
            padding-bottom:45px;
            border-radius:24px;
            box-shadow:0 12px 35px rgba(0,0,0,.07);
        }


        /* ==================================================
        BERITA TERBARU
        FOTO KANAN
        ================================================== */

        .featured-news{
            display:grid;

            grid-template-columns:46% 54%;

            /*
            * TINGGI CARD DIKUNCI
            * supaya gambar tidak memanjang
            */
            height:190px;
            min-height:190px;

            padding:12px;

            gap:0;

            margin-bottom:40px;

            border-radius:20px;

            align-items:center;

            overflow:hidden;

            box-shadow:0 10px 30px rgba(0,0,0,.08);
        }


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

        .featured-content{
            grid-column:1;
            grid-row:1;

            min-width:0;

            height:100%;

            padding:8px 8px 8px 4px;

            display:flex;
            flex-direction:column;
            justify-content:center;
        }


        /* ===============================
        FOTO KANAN
        =============================== */

        .featured-image{
            grid-column:2;
            grid-row:1;

            width:100%;

            /*
            * JANGAN pakai height:100%
            */
            height:160px;

            min-height:0;

            border-radius:14px;

            overflow:hidden;

            align-self:center;
        }

        .featured-image img{
            display:block;

            width:100%;
            height:100%;

            object-fit:cover;
            object-position:center;
        }


        /* ===============================
        BADGE
        =============================== */

        .featured-badge{
            font-size:9px;

            padding:7px 10px;

            border-radius:30px;

            margin-bottom:8px;

            letter-spacing:.2px;

            width:max-content;
        }


        /* ===============================
        TANGGAL
        =============================== */

        .featured-date{
            font-size:11px;

            margin-bottom:6px;
        }


        /* ===============================
        JUDUL
        =============================== */

        .featured-content h2{
            font-size:17px;

            line-height:1.3;

            margin:0 0 8px;

            display:-webkit-box;
            -webkit-line-clamp:3;
            -webkit-box-orient:vertical;

            overflow:hidden;
        }


        /* ===============================
        EXCERPT
        =============================== */

        .featured-excerpt{
            display:none;
        }


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

        .featured-button{
            font-size:11px;

            line-height:1.2;

            white-space:nowrap;
        }


        /* ==================================================
        BERITA LAINNYA
        ================================================== */

        .section-title{
            font-size:28px;

            margin-bottom:20px;
        }


        .news-grid{
            display:flex;

            flex-direction:column;

            gap:14px;
        }


        /* ==================================================
        CARD BERITA LAINNYA
        FOTO KANAN
        ================================================== */

        .news-card{

            display:grid;

            grid-template-columns:46% 54%;

            /*
            * TINGGI CARD DIKUNCI
            */
            height:145px;
            min-height:145px;

            width:100%;

            border-radius:18px;

            overflow:hidden;

            box-shadow:0 8px 24px rgba(0,0,0,.07);
        }


        /* ===============================
        FOTO KANAN
        =============================== */

        .news-thumb{

            grid-column:2;
            grid-row:1;

            width:100%;

            /*
            * PENTING:
            * jangan height:100%
            */
            height:125px;

            min-height:0;

            align-self:center;

            overflow:hidden;

            border-radius:0;
        }

        .news-thumb img{

            display:block;

            width:100%;
            height:100%;

            object-fit:cover;

            object-position:center;
        }


        /* ===============================
        BODY KIRI
        =============================== */

        .news-body{

            grid-column:1;
            grid-row:1;

            min-width:0;

            height:100%;

            padding:12px 8px 12px 14px;

            display:flex;

            flex-direction:column;

            justify-content:center;
        }


        /* ===============================
        TANGGAL
        =============================== */

        .news-date{

            font-size:10px;

            margin-bottom:6px;

            line-height:1.2;
        }


        /* ===============================
        JUDUL
        =============================== */

        .news-title{

            margin:0 0 7px;
            font-size: 18px;

            line-height:1.25;

            display:-webkit-box;

            -webkit-line-clamp:3;

            -webkit-box-orient:vertical;

            overflow:hidden;
        }




        /* ===============================
        BACA SELENGKAPNYA
        =============================== */

        .news-readmore{

            font-size:11px;

            line-height:1.2;

            white-space:nowrap;
        }


        /* ===============================
        HILANGKAN BADGE TIPE
        SUPAYA CARD TETAP BERSIH
        =============================== */

        .news-badge{
            display:none;
        }


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

        .pagination{

            margin:35px 0 10px;

            gap:8px;
        }

        .pagination a,
        .pagination span{

            width:42px;
            height:42px;

            border-radius:10px;

            font-size:13px;
        }

    }