/* ==========================================================
   BERITA
   RTQ AL IMAM ADZ DZAHABIY

   FILE INI KHUSUS UNTUK:
   - Featured News
   - Berita Terkini
   - Card Berita
   - Slider / Indicator

   DETAIL SETIAP BERITA MENGGUNAKAN CSS SENDIRI
========================================================== */


/* ==========================================================
   FEATURED NEWS
========================================================== */

.news-featured{

    background:#f7f9f8;

    padding:45px 0 35px;

}


/* ==========================================================
   SLIDER
========================================================== */

.news-featured-slider{

    position:relative;

    max-width:1400px;

    margin:0 auto;

    overflow:hidden;

}


/* ==========================================================
   FEATURED ITEM
========================================================== */

.news-featured-item{

    display:none;

    background:#fff;

    border-radius:22px;

    padding:30px 35px;

    box-shadow:
        0 8px 25px rgba(0,0,0,.08);

}


/* BERITA AKTIF */

.news-featured-item.active{

    display:block;

    animation:
        newsSlideIn .6s ease;

}


/* ==========================================================
   ANIMASI SLIDER
========================================================== */

@keyframes newsSlideIn{

    from{

        opacity:0;

        transform:translateX(40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}


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

.news-featured-image{

    width:100%;

    min-height:280px;

    border-radius:16px;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f5f7f6;

}


/*
   Gambar mengikuti rasio aslinya.

   Tidak menggunakan object-fit:cover
   supaya gambar TIDAK terpotong.
*/

.news-featured-image img{

    width:100%;

    height:auto;

    max-height:390px;

    object-fit:contain;

    display:block;

}


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

.news-featured-content{

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

}


/* ==========================================================
   KATEGORI
========================================================== */

.news-category{

    display:inline-block;

    color:#198754;

    font-size:.9rem;

    font-weight:700;

    letter-spacing:.5px;

    margin-bottom:10px;

}


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

.news-featured-item h2{

    color:#176b35;

    font-size:2rem;

    font-weight:700;

    line-height:1.35;

    margin-bottom:12px;

}


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

.news-date{

    display:flex;

    align-items:center;

    gap:7px;

    color:#777;

    font-size:.95rem;

    margin-bottom:15px;

}


.news-date i{

    color:#198754;

}


/* ==========================================================
   INFORMASI LOKASI
========================================================== */

.news-location{

    display:flex;

    align-items:flex-start;

    gap:7px;

    color:#777;

    font-size:.95rem;

    margin-bottom:15px;

}


.news-location i{

    color:#198754;

    margin-top:3px;

}


/* ==========================================================
   RINGKASAN FEATURED
========================================================== */

.news-featured-summary{

    color:#666;

    font-size:1.05rem;

    line-height:1.8;

    margin-bottom:20px;

}


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

.news-featured-item .btn{

    display:inline-flex;

    align-items:center;

    gap:7px;

    width:max-content;

    border-radius:25px;

    padding:10px 24px;

    font-weight:600;

}


/* ==========================================================
   INDICATOR
========================================================== */

.news-featured-indicators{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    margin-top:20px;

}


.news-indicator{

    width:9px;

    height:9px;

    padding:0;

    border:0;

    border-radius:50%;

    background:#c8d8cf;

    cursor:pointer;

    transition:.3s;

}


.news-indicator.active{

    width:28px;

    border-radius:10px;

    background:#198754;

}


/* ==========================================================
   BERITA TERKINI
========================================================== */

.news-list-section{

    background:#fff;

}


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

.news-card{

    height:100%;

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:
        0 8px 25px rgba(0,0,0,.08);

    transition:.3s;

}


.news-card:hover{

    transform:translateY(-6px);

    box-shadow:
        0 18px 40px rgba(0,0,0,.12);

}


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

.news-card-image{

    width:100%;

    min-height:200px;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f5f7f6;

}


.news-card-image img{

    width:100%;

    height:auto;

    max-height:260px;

    object-fit:contain;

    display:block;

    transition:.4s;

}


.news-card:hover
.news-card-image img{

    transform:scale(1.03);

}


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

.news-card-body{

    padding:28px;

}


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

.news-card .news-category{

    margin-bottom:8px;

}


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

.news-card h3{

    color:#176b35;

    font-size:1.35rem;

    font-weight:700;

    line-height:1.45;

    margin-bottom:12px;

}


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

.news-card .news-date{

    margin-bottom:10px;

}


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

.news-card .news-location{

    margin-bottom:12px;

}


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

.news-card p{

    color:#666;

    font-size:1rem;

    line-height:1.8;

    margin-bottom:18px;

}


/* ==========================================================
   LINK BACA
========================================================== */

.news-read-more{

    display:inline-flex;

    align-items:center;

    gap:7px;

    color:#198754;

    font-weight:600;

    text-decoration:none;

    transition:.25s;

}


.news-read-more:hover{

    color:#145c38;

    gap:11px;

}


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

@media (max-width:991px){

    .news-featured{

        padding:35px 0 30px;

    }


    .news-featured-item{

        padding:25px;

    }


    .news-featured-image{

        min-height:240px;

    }


    .news-featured-image img{

        max-height:300px;

    }


    .news-featured-content{

        padding-top:25px;

    }


    .news-featured-item h2{

        font-size:1.7rem;

    }

}


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

@media (max-width:767px){

    .news-featured{

        padding:25px 0;

    }


    .news-featured-slider{

        border-radius:16px;

    }


    .news-featured-item{

        padding:18px;

        border-radius:16px;

    }


    .news-featured-image{

        min-height:0;

        border-radius:12px;

    }


    .news-featured-image img{

        width:100%;

        height:auto;

        max-height:none;

    }


    .news-featured-content{

        padding-top:22px;

    }


    .news-featured-item h2{

        font-size:1.4rem;

    }


    .news-featured-summary{

        font-size:.95rem;

        line-height:1.7;

    }


    .news-category{

        font-size:.85rem;

    }


    .news-date,
    .news-location{

        font-size:.9rem;

    }


    .news-card-image{

        min-height:0;

    }


    .news-card-image img{

        width:100%;

        height:auto;

        max-height:none;

    }


    .news-card-body{

        padding:22px;

    }


    .news-card h3{

        font-size:1.2rem;

    }

}