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

.berita-detail-hero{

    position:relative;

    min-height:540px;

    padding:110px 0 100px;

    display:flex;

    align-items:center;

    overflow:hidden;

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    color:#fff;
}


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

.berita-detail-hero .berita-hero-overlay{

    position:absolute;

    inset:0;

    z-index:1;

    background:
        linear-gradient(
            to right,
            rgba(0,0,0,.68),
            rgba(0,0,0,.42),
            rgba(0,0,0,.18)
        );

    pointer-events:none;
}


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

.berita-detail-hero .container{

    position:relative;

    z-index:2;

    width:100%;

    padding-top:40px;

    padding-bottom:40px;
}


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

.berita-detail-hero .breadcrumb-custom{

    margin-bottom:18px;

    line-height:1.5;

    color:#fff;
}


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

    color:#fff;
}


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

    color:#fff;
}


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

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

    display:inline-block;

    color:var(--accent);

    font-size:.85rem;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:8px;

    text-shadow:1px 1px 5px rgba(0,0,0,.75);
}


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

.berita-detail-hero h1{

    max-width:850px;

    margin:0 0 25px;

    color:#fff;

    font-size:3.4rem;

    font-weight:700;

    line-height:1.2;

    overflow-wrap:break-word;

    text-shadow:2px 2px 7px rgba(0,0,0,.75);
}


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

.berita-detail-hero h1::after{

    content:"";

    display:block;

    width:60px;

    height:3px;

    margin-top:25px;

    background:var(--accent);
}


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

.berita-detail-hero p{

    max-width:800px;

    margin:0;

    color:#fff;

    font-size:1.25rem;

    line-height:1.8;

    text-shadow:1px 1px 5px rgba(0,0,0,.75);
}

/* ==========================================================
   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;

    max-height:500px;

    object-fit:contain;

    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;

}

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

@media (max-width:991px){

    .berita-detail-hero{

        min-height:480px;

    }


    .berita-detail-hero .berita-hero-overlay{

        background:
            linear-gradient(
                to right,
                rgba(0,0,0,.68),
                rgba(0,0,0,.42),
                rgba(0,0,0,.18)
            );
    }


    .berita-detail-hero h1{

        font-size:2.8rem;

        max-width:700px;

    }


    .berita-detail-hero p{

        font-size:1.05rem;

        max-width:650px;

    }

}

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

@media (max-width:767px){

    .berita-detail-hero{

        min-height:520px;

        align-items:flex-start;

        padding:0;

        background-size:cover;

        background-position:center;

    }


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

    .berita-detail-hero .berita-hero-overlay{

        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.30) 0%,
                rgba(0,0,0,.40) 45%,
                rgba(0,0,0,.52) 100%
            );
    }


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

    .berita-detail-hero .container{

        width:100%;

        max-width:100%;

        padding-top:35px;

        padding-right:20px;

        padding-bottom:30px;

        padding-left:20px;

        box-sizing:border-box;
    }


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

    .berita-detail-hero .breadcrumb-custom{

        width:100%;

        max-width:100%;

        margin-bottom:24px;

        font-size:.9rem;

        line-height:1.55;

        overflow-wrap:anywhere;

        color:#fff;
    }


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

        color:#fff;
    }


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

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

        font-size:.8rem;

        letter-spacing:2.5px;

        margin-bottom:14px;

        color:var(--accent);
    }


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

    .berita-detail-hero h1{

        width:100%;

        max-width:100%;

        margin:0;

        font-size:2.15rem;

        line-height:1.2;

        color:#fff;

        overflow-wrap:anywhere;

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


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

    .berita-detail-hero h1::after{

        width:55px;

        height:3px;

        margin-top:22px;

        background:var(--accent);
    }


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

    .berita-detail-hero p{

        width:100%;

        max-width:100%;

        margin-top:22px;

        margin-bottom:0;

        color:#fff;

        font-size:.98rem;

        line-height:1.7;

        overflow-wrap:anywhere;

        text-shadow:1px 1px 5px rgba(0,0,0,.75);
    }


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

.news-detail-image{

    width:100%;

    max-width:100%;

    margin-bottom:25px;

    border-radius:12px;
}


.news-detail-image img{

    width:100%;

    max-height:none;

    border-radius:12px;
}

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

    .news-detail-meta{

        gap:10px 18px;

        padding:15px 0;

        font-size:.9rem;
    }


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

    .news-detail-content p{

        font-size:1rem;

        line-height:1.8;
    }


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

    .news-detail-gallery{

        margin:25px 0;
    }

}

/* ==========================================================
   GALERI DONASI ACEH
========================================================== */

.donasi-gallery-image {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}