/* =========================================
    HALAMAN BERITA
========================================= */

.berita-page{
    width:100%;
    background:#fff;
}


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

.berita-hero{
    position:relative;

    padding:72px 18px 68px;

    overflow:hidden;

    background:

        radial-gradient(
            700px 320px at 10% 0%,
            rgba(37,99,235,.15),
            transparent 65%
        ),

        radial-gradient(
            700px 320px at 90% 20%,
            rgba(16,185,129,.13),
            transparent 65%
        ),

        linear-gradient(
            135deg,
            #f7fbff 0%,
            #ffffff 52%,
            #f6fffb 100%
        );
}


.berita-hero::before{
    content:"";

    position:absolute;

    width:300px;
    height:300px;

    right:-130px;
    top:-150px;

    border-radius:50%;

    background:
        rgba(37,99,235,.05);
}


.berita-hero-inner{
    position:relative;

    z-index:1;

    max-width:850px;

    margin:0 auto;

    text-align:center;
}


/* =========================================
   LABEL
========================================= */

.berita-label{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:7px 14px;

    border-radius:999px;

    border:
        1px solid
        rgba(37,99,235,.12);

    background:
        rgba(37,99,235,.08);

    color:#2563eb;

    font-size:11px;

    font-weight:800;

    letter-spacing:1px;

    margin-bottom:17px;
}


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

.berita-hero h1{
    margin:0 0 15px;

    color:#0f172a;

    font-size:46px;

    line-height:1.15;

    font-weight:800;

    letter-spacing:-.5px;
}


.berita-hero p{
    max-width:700px;

    margin:0 auto;

    color:
        rgba(15,23,42,.68);

    font-size:15px;

    line-height:1.8;
}


/* =========================================
   SECTION
========================================= */

.berita-section{
    padding:60px 18px 80px;
}


.berita-container{
    max-width:1200px;

    margin:0 auto;
}


/* =========================================
   HEADING
========================================= */

.berita-heading{
    margin-bottom:28px;
}


.berita-heading h2{
    margin:0 0 7px;

    color:#0f172a;

    font-size:30px;

    line-height:1.2;

    font-weight:800;
}


.berita-heading p{
    margin:0;

    color:
        rgba(15,23,42,.62);

    font-size:14px;

    line-height:1.7;
}


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

.berita-grid{
    display:grid;

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

    gap:24px;
}


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

.berita-card{
    display:flex;

    flex-direction:column;

    min-width:0;

    overflow:hidden;

    background:#fff;

    border:
        1px solid
        rgba(15,23,42,.08);

    border-radius:22px;

    box-shadow:
        0 12px 35px
        rgba(15,23,42,.06);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


.berita-card:hover{
    transform:translateY(-6px);

    border-color:
        rgba(37,99,235,.18);

    box-shadow:
        0 22px 50px
        rgba(15,23,42,.11);
}


/* =========================================
   IMAGE
========================================= */

.berita-image-link{
    position:relative;

    display:block;

    width:100%;

    height:220px;

    overflow:hidden;

    background:#f1f5f9;

    text-decoration:none;
}


.berita-image{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .5s ease;
}


.berita-card:hover .berita-image{
    transform:scale(1.055);
}


/* =========================================
   NO IMAGE
========================================= */

.berita-no-image{
    width:100%;
    height:100%;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:20px;

    text-align:center;

    background:

        radial-gradient(
            400px 200px at 20% 20%,
            rgba(37,99,235,.18),
            transparent 65%
        ),

        linear-gradient(
            135deg,
            #0f172a,
            #1e3a8a
        );

    color:#fff;

    font-size:12px;

    font-weight:800;

    letter-spacing:1px;
}


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

.berita-content{
    display:flex;

    flex-direction:column;

    flex:1;

    padding:20px;
}


/* =========================================
   META
========================================= */

.berita-meta{
    min-height:27px;

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:10px;
}


.berita-badge{
    display:inline-flex;

    align-items:center;

    padding:5px 10px;

    border-radius:999px;

    background:
        rgba(37,99,235,.10);

    color:#2563eb;

    font-size:10px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.3px;
}


.berita-date{
    margin-left:auto;

    color:
        rgba(15,23,42,.52);

    font-size:12px;

    font-weight:600;

    white-space:nowrap;
}


/* =========================================
   TITLE
========================================= */

.berita-title{
    margin:0 0 10px;

    font-size:19px;

    line-height:1.45;

    font-weight:800;
}


.berita-title a{
    color:#0f172a;

    text-decoration:none;

    transition:
        color .2s ease;
}


.berita-title a:hover{
    color:#2563eb;
}


/* =========================================
   DESCRIPTION
========================================= */

.berita-description{
    margin:0 0 18px;

    color:
        rgba(15,23,42,.70);

    font-size:13px;

    line-height:1.75;

    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:3;

    overflow:hidden;
}


/* =========================================
   READ MORE
========================================= */

.berita-more{
    display:inline-flex;

    align-items:center;

    gap:7px;

    width:max-content;

    margin-top:auto;

    color:#2563eb;

    text-decoration:none;

    font-size:13px;

    font-weight:800;

    transition:
        color .2s ease,
        gap .25s ease;
}


.berita-more span{
    font-size:17px;

    line-height:1;

    transition:
        transform .25s ease;
}


.berita-more:hover{
    color:#10b981;

    gap:10px;
}


.berita-more:hover span{
    transform:translateX(3px);
}


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

.berita-empty{
    padding:80px 20px;

    text-align:center;

    border:
        1px solid
        rgba(15,23,42,.08);

    border-radius:22px;

    background:#fff;

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


.berita-empty-icon{
    font-size:42px;

    margin-bottom:14px;
}


.berita-empty h3{
    margin:0 0 7px;

    font-size:20px;
}


.berita-empty p{
    margin:0;

    color:#64748b;

    font-size:14px;
}


/* =========================================
   TABLET
========================================= */

@media(max-width:900px){

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

        gap:20px;
    }


    .berita-hero{
        padding:
            58px 18px 55px;
    }


    .berita-hero h1{
        font-size:39px;
    }


    .berita-image-link{
        height:200px;
    }

}


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

@media(max-width:600px){

    .berita-hero{
        padding:
            44px 15px 45px;
    }


    .berita-label{
        font-size:10px;

        padding:
            6px 12px;
    }


    .berita-hero h1{
        font-size:31px;

        letter-spacing:0;
    }


    .berita-hero p{
        font-size:13px;

        line-height:1.75;
    }


    .berita-section{
        padding:
            40px 12px 55px;
    }


    .berita-heading{
        margin-bottom:20px;
    }


    .berita-heading h2{
        font-size:26px;
    }


    .berita-heading p{
        font-size:13px;
    }


    .berita-grid{
        grid-template-columns:1fr;

        gap:18px;
    }


    .berita-image-link{
        height:200px;
    }


    .berita-content{
        padding:
            17px 17px 20px;
    }


    .berita-title{
        font-size:18px;
    }


    .berita-description{
        font-size:13px;
    }

}


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

@media(max-width:380px){

    .berita-hero h1{
        font-size:28px;
    }


    .berita-image-link{
        height:180px;
    }

}