/* ==========================================================
   HERO BERITA
   MUSABAQAH AL-IMAM ASY-SYATHIBY
========================================================== */

.berita-detail-hero{

    position:relative;

    min-height:540px;

    display:flex;

    align-items:center;

    overflow:hidden;

    background-size:100% 100%;

    background-position:center;

    background-repeat:no-repeat;

}


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

.berita-detail-hero .container{

    position:relative;

    z-index:2;

    padding-top:40px;

    padding-bottom:40px;

}


/* ==========================================================
   BREADCRUMB
========================================================== */

.berita-detail-hero .breadcrumb-custom{

    margin-bottom:28px;

}


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

.berita-detail-hero .page-hero-label {

    display: block;

    color: #fff !important;

    font-size: .9rem;

    font-weight: 700;

    letter-spacing: 3px;

    margin-bottom: 18px;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, .8);

}


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

.berita-detail-hero h1{

    max-width:850px;

    margin:0;

    color:#fff;

    font-size:3.4rem;

    font-weight:700;

    line-height:1.15;

    text-shadow:
        0 2px 6px rgba(0,0,0,.55);

}


/* ==========================================================
   GARIS HIJAU
========================================================== */

.berita-detail-hero h1::after{

    content:"";

    display:block;

    width:68px;

    height:3px;

    margin-top:30px;

    background:#198754;

}


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

.berita-detail-hero p{

    max-width:800px;

    margin-top:30px;

    margin-bottom:0;

    color:#fff;

    font-size:1.15rem;

    line-height:1.8;

    text-shadow:
        0 2px 5px rgba(0,0,0,.55);

}


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

.news-detail-meta{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:22px;

    padding:18px 0;

    color:#555;

    font-size:.95rem;

}


.news-detail-meta span{

    display:inline-flex;

    align-items:center;

    gap:7px;

}


.news-detail-meta i{

    color:#198754;

}


/* ==========================================================
   GAMBAR UTAMA BERITA
========================================================== */

.news-detail-image{

    width:100%;

    max-width:900px;

    margin:0 auto 35px;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    border-radius:16px;

    background:#f5f7f6;

}


.news-detail-image img{

    width:100%;

    height:auto;

    display:block;

    border-radius:16px;

}


/* ==========================================================
   ISI BERITA
========================================================== */

.news-detail-content{

    max-width:900px;

    margin:0 auto;

}


.news-detail-content p{

    color:#555;

    font-size:1.05rem;

    line-height:1.9;

    margin-bottom:22px;

}


/* ==========================================================
   GALERI
========================================================== */

.news-detail-gallery{

    margin:35px 0;

}


.news-detail-gallery img{

    width:100%;

    height:auto;

    display:block;

    border-radius:14px;

}


/* ==========================================================
   FOTO + NARASI DALAM BOX
========================================================== */

.news-feature-box{

    display:grid;

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

    gap:30px;

    align-items:center;

    margin:40px 0;

    padding:25px;

    background:#f8faf9;

    border:1px solid #e2e8e5;

    border-radius:18px;

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

}


.news-feature-image{

    overflow:hidden;

    border-radius:14px;

    background:#fff;

}


.news-feature-image img{

    width:100%;

    height:auto;

    display:block;

    border-radius:14px;

}


.news-feature-caption{

    padding:12px 15px;

    color:#666;

    font-size:.9rem;

    line-height:1.6;

    text-align:center;

}


.news-feature-text{

    padding:5px 10px;

}


.news-feature-text p{

    margin:0 0 18px;

    color:#555;

    font-size:1.05rem;

    line-height:1.9;

}


.news-feature-text p:last-child{

    margin-bottom:0;

}


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

@media (max-width:991px){

    .berita-detail-hero{

        min-height:480px;

        background-size:auto 100%;

    }


    .berita-hero-overlay{

        background:
            linear-gradient(
                90deg,
                rgba(255,255,255,.88) 0%,
                rgba(255,255,255,.62) 35%,
                rgba(255,255,255,.18) 65%,
                rgba(255,255,255,0) 100%
            );

    }


    .berita-detail-hero h1{

        font-size:2.8rem;

        max-width:700px;

    }


    .berita-detail-hero p{

        font-size:1.05rem;

        max-width:650px;

    }


    .news-feature-box{

        grid-template-columns:1fr 1fr;

        gap:22px;

        padding:20px;

    }


    .news-feature-text p{

        font-size:1rem;

        line-height:1.8;

    }

}


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

@media (max-width:767px){

    .berita-detail-hero{

        min-height:520px;

        align-items:flex-start;

        background-size:auto 100%;

    }


    .berita-hero-overlay{

        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.90) 0%,
                rgba(255,255,255,.72) 38%,
                rgba(255,255,255,.28) 70%,
                rgba(255,255,255,0) 100%
            );

    }


    .berita-detail-hero .container{

        padding-top:35px;

        padding-bottom:30px;

    }


    .berita-detail-hero .breadcrumb-custom{

        margin-bottom:24px;

    }


    .berita-detail-hero .page-hero-label{

        font-size:.8rem;

        letter-spacing:2.5px;

        margin-bottom:14px;

    }


    .berita-detail-hero h1{

        font-size:2.15rem;

        line-height:1.2;

    }


    .berita-detail-hero h1::after{

        width:55px;

        margin-top:22px;

    }


    .berita-detail-hero p{

        margin-top:22px;

        font-size:.98rem;

        line-height:1.7;

    }


    .news-detail-meta{

        gap:10px 18px;

        padding:15px 0;

        font-size:.9rem;

    }


    .news-detail-image{

        max-width:100%;

        margin-bottom:25px;

        border-radius:12px;

    }


    .news-detail-image img{

        border-radius:12px;

    }


    .news-detail-content p{

        font-size:1rem;

        line-height:1.8;

    }


    .news-detail-gallery{

        margin:25px 0;

    }


    .news-feature-box{

        grid-template-columns:1fr;

        gap:20px;

        margin:30px 0;

        padding:15px;

        border-radius:14px;

    }


    .news-feature-text{

        padding:0 5px;

    }


    .news-feature-text p{

        font-size:1rem;

        line-height:1.8;

    }


    .news-feature-caption{

        font-size:.85rem;

    }

}

/* ==========================================================
   BREADCRUMB DI ATAS HERO
========================================================== */

.berita-detail-hero .breadcrumb-custom {

    margin-bottom: 30px;

    color: #fff;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, .8);

}


.berita-detail-hero .breadcrumb-custom a {

    color: #fff !important;

    text-decoration: none;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, .8);

}


.berita-detail-hero .breadcrumb-custom a:hover {

    color: #fff !important;

    text-decoration: underline;

}


.berita-detail-hero .breadcrumb-custom span {

    color: #fff !important;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, .8);

}
/* ==========================================================
   BAGIAN KATEGORI MUSABAQAH
========================================================== */

.news-detail-content h2 {

    position: relative;

    margin-top: 45px;

    margin-bottom: 20px;

    padding-left: 16px;

    color: #174d38;

    font-size: 1.8rem;

    font-weight: 700;

    line-height: 1.3;

}


/* Garis hijau di kiri judul */

.news-detail-content h2::before {

    content: "";

    position: absolute;

    left: 0;

    top: 3px;

    width: 4px;

    height: calc(100% - 6px);

    border-radius: 4px;

    background: #198754;

}


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

.news-detail-content h2 + p {

    margin-bottom: 22px;

}


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

.news-detail-content ul {

    display: grid;

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

    gap: 18px;

    margin: 25px 0 35px;

    padding: 0;

    list-style: none;

}


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

.news-detail-content ul li {

    position: relative;

    margin: 0;

    padding: 22px 22px 22px 26px;

    background:
        linear-gradient(
            135deg,
            #f8fbf9,
            #eef7f2
        );

    border: 1px solid #d8e9df;

    border-radius: 14px;

    color: #444;

    font-size: 1rem;

    line-height: 1.7;

    box-shadow:
        0 5px 18px rgba(25, 135, 84, .07);

}


/* Aksen garis kiri */

.news-detail-content ul li::before {

    content: "";

    position: absolute;

    left: 0;

    top: 16px;

    bottom: 16px;

    width: 4px;

    border-radius: 0 4px 4px 0;

    background: #198754;

}


/* Judul 5 Juz / 10 Juz */

.news-detail-content ul li strong:first-child {

    display: block;

    margin-bottom: 4px;

    color: #174d38;

    font-size: 1.25rem;

}


/* ==========================================================
   GAMBAR DI DALAM BERITA
========================================================== */

.news-detail-content figure.news-image {

    max-width: 900px;

    margin: 35px auto;

    padding: 10px;

    background: #fff;

    border: 1px solid #e4e9e6;

    border-radius: 16px;

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

}


.news-detail-content figure.news-image img {

    width: 100%;

    height: auto;

    display: block;

    border-radius: 10px;

}


.news-detail-content figure.news-image figcaption {

    padding: 12px 10px 5px;

    color: #777;

    font-size: .9rem;

    line-height: 1.5;

    text-align: center;

}


/* ==========================================================
   KOTAK DONASI
========================================================== */

.news-donation-box {

    margin: 25px 0;

    padding: 22px 25px;

    background:
        linear-gradient(
            135deg,
            #f8fbf9,
            #eef7f2
        );

    border: 1px solid #d8e9df;

    border-left: 5px solid #198754;

    border-radius: 12px;

    color: #444;

    font-size: 1.05rem;

    line-height: 1.8;

    box-shadow:
        0 5px 18px rgba(25, 135, 84, .06);

}


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

@media (max-width: 767px) {

    .news-detail-content h2 {

        margin-top: 35px;

        margin-bottom: 17px;

        font-size: 1.5rem;

        padding-left: 13px;

    }


    .news-detail-content ul {

        grid-template-columns: 1fr;

        gap: 12px;

        margin: 20px 0 30px;

    }


    .news-detail-content ul li {

        padding: 18px 18px 18px 22px;

        font-size: .98rem;

    }


    .news-detail-content ul li strong:first-child {

        font-size: 1.15rem;

    }


    .news-detail-content figure.news-image {

        margin: 28px 0;

        padding: 7px;

        border-radius: 12px;

    }


    .news-detail-content figure.news-image img {

        border-radius: 8px;

    }


    .news-detail-content figure.news-image figcaption {

        font-size: .82rem;

    }


    .news-donation-box {

        padding: 18px 20px;

        font-size: 1rem;

    }

}