/* =========================================================
   MPA JATIM - CUSTOM WEBSITE STYLE
   BACKGROUND FULL PAGE
   CLEAN + MODERN + SOFT
   ========================================================= */


/* =========================================================
   1. GLOBAL
   ========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    font-family: 'Segoe UI', 'Poppins', sans-serif;

    background-color: #f5f8f7;

    /*
       Background utama ditangani oleh body::before
       supaya tetap terlihat sampai bagian bawah halaman.
    */
    position: relative;
    isolation: isolate;
}


/* =========================================================
   2. BACKGROUND WEBSITE
   ========================================================= */

body::before {
    content: "";

    position: fixed;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 100vh;

    z-index: -1;

    pointer-events: none;

    /*
       Lapisan putih dibuat lebih kuat di tengah,
       tetapi sisi kiri dan kanan tetap terlihat.
    */
    background-image:

        radial-gradient(
            ellipse at center,
            rgba(255, 255, 255, 0.88) 0%,
            rgba(255, 255, 255, 0.78) 38%,
            rgba(255, 255, 255, 0.48) 68%,
            rgba(255, 255, 255, 0.18) 100%
        ),

        url('../images/bg-website.png');

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}


/* =========================================================
   3. HEADER
   ========================================================= */

header {
    background-color: rgba(255, 255, 255, 0.96) !important;
}


/*
   Container di dalam header tetap transparan.
*/
header .container {
    background-color: transparent !important;
}


/* =========================================================
   4. NAVIGATION
   ========================================================= */

.nav-item {
    position: relative;

    display: inline-block;

    margin-right: 3px;
    padding: 3px;
}

.nav-item .nav-link {
    font-family: 'Signika', sans-serif;

    color: #111 !important;

    font-size: 18px;

    text-decoration: none;

    transition: color 0.3s ease;
}

.nav-item::after {
    content: '';

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 3px;

    background-color: #17b978;

    transition: width 0.3s ease;
}

.nav-item .nav-link:hover {
    color: #17b978 !important;
}

.nav-item:hover::after {
    width: 100%;
}


/* =========================================================
   5. AREA WEBSITE / WRAPPER
   ========================================================= */

/*
   Semua wrapper utama dibuat transparan.
   Ini yang membuat background body tetap terlihat.
*/

main,
.content,
.page-content,
.page-wrapper,
.site-content,
section,
section.bg0,
.bg0,
.container,
.container-fluid {
    background-color: transparent !important;
}


/*
   Jangan menghilangkan background image
   dari body.
*/


/* =========================================================
   6. CONTAINER
   ========================================================= */

.container {
    margin-bottom: 20px;

    background-color: transparent !important;
}


/*
   Jangan membuat container menjadi card.
*/

.container {
    border-radius: 0;
}


/* =========================================================
   7. TRENDING NEWS
   ========================================================= */

.headline {
    background-color: rgba(255, 255, 255, 0.82) !important;

    border-radius: 16px;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.05);
}


/* =========================================================
   8. CARD BERITA UTAMA
   ========================================================= */

.how1 {
    position: relative;

    width: 100%;

    background-color: rgba(255, 255, 255, 0.94) !important;

    border-radius: 16px;

    overflow: hidden;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.12);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.how1:hover {
    transform: translateY(-3px);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   9. GAMBAR BERITA
   ========================================================= */

.size-w-1 img,
.wrap-pic-w img,
.bg-img1 img {
    border-radius: 12px;
}


/* =========================================================
   10. BACKGROUND IMAGE CARD
   ========================================================= */

.bg-img1 {
    border-radius: 16px;

    overflow: hidden;

    transition:
        transform 0.3s ease;
}

.bg-img1:hover {
    transform: scale(1.015);
}


/* =========================================================
   11. FEATURED NEWS
   ========================================================= */

.rounded-news {
    position: relative;

    border-radius: 16px;

    overflow: hidden;

    margin-bottom: 12px;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.12);
}


/* =========================================================
   12. OVERLAY FEATURED NEWS
   ========================================================= */

.rounded-news::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.60),
            rgba(0, 0, 0, 0.05) 65%,
            transparent
        );

    z-index: 1;

    pointer-events: none;
}


/* =========================================================
   13. TEKS BERITA
   ========================================================= */

.how1-child2,
.how-txt1 {
    position: relative;

    z-index: 5;

    opacity: 1 !important;

    visibility: visible !important;
}

.how-txt1,
.f1-m-3,
.f1-s-5 {
    transition:
        color 0.2s ease;
}

.how-txt1:hover,
.f1-m-3:hover,
.f1-s-5:hover {
    color: #dc3545 !important;
}


/* =========================================================
   14. SECTION BERITA
   ========================================================= */

/*
   Lensa Utama
   Liputan Khusus
   Dunia Islam
   dan section sejenis
*/

.tab01 {
    background-color: rgba(255, 255, 255, 0.70) !important;

    border-radius: 16px;

    padding: 15px;

    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.06);
}


/* =========================================================
   15. BOX KONTEN
   ========================================================= */

.how2 {
    background-color: rgba(255, 255, 255, 0.82) !important;
}


/* =========================================================
   16. POPULAR POST
   ========================================================= */

.size-w-2 a {
    font-weight: 500;
}


/* =========================================================
   17. GRID BERITA
   ========================================================= */

.row.m-rl--1 {
    margin-left: -5px;

    margin-right: -5px;
}

.p-rl-1 {
    padding-left: 5px !important;

    padding-right: 5px !important;
}


/* =========================================================
   18. AREA LIST BERITA
   ========================================================= */

.wrap-slick3 {
    background-color: transparent !important;
}

.p-b-30,
.p-t-70 {
    background-color: transparent !important;
}


/* =========================================================
   19. PADDING SECTION
   ========================================================= */

.p-b-70,
.p-b-40,
.p-b-30,
.p-t-10,
.p-t-20,
.p-t-30,
.p-t-40,
.p-t-50,
.p-t-60,
.p-t-70 {
    background-color: transparent !important;
}


/* =========================================================
   20. BREADCRUMB
   ========================================================= */

.headline.bg0 {
    background-color: rgba(255, 255, 255, 0.80) !important;

    border-radius: 14px;
}


/* =========================================================
   21. SIDEBAR
   ========================================================= */

/*
   Sidebar utama transparan.
*/

.sidebar,
.sidebar2,
.p-l-10,
.p-rl-0-sr991 {
    background-color: transparent !important;
}


/* =========================================================
   22. BOX SIDEBAR
   ========================================================= */

.sidebar .how2,
.sidebar2 .how2 {
    background-color: rgba(255, 255, 255, 0.78) !important;
}


/* =========================================================
   23. GAMBAR SIDEBAR
   ========================================================= */

.size-w-10 img,
.size-w-11 img,
.size-w-12 img {
    border-radius: 8px;
}


/* =========================================================
   24. LINK
   ========================================================= */

a {
    transition:
        color 0.2s ease;
}


/* =========================================================
   25. HOVER GAMBAR
   ========================================================= */

.hov1 {
    transition:
        transform 0.3s ease;
}


/* =========================================================
   26. FORM / SEARCH
   ========================================================= */

input,
textarea,
select {
    border-radius: 8px;
}


/* =========================================================
   27. FOOTER
   ========================================================= */

footer {
    background-color: rgba(255, 255, 255, 0.96) !important;
}


/*
   Container footer tetap transparan
   agar hanya footer yang berwarna putih.
*/

footer .container {
    background-color: transparent !important;
}


/* =========================================================
   28. SCROLL TO TOP
   ========================================================= */

.btn-back-to-top {
    border-radius: 8px;
}


/* =========================================================
   29. MOBILE
   ========================================================= */

@media (max-width: 768px) {

    body::before {
        position: fixed;

        background-size: auto 100%;

        background-position: center top;
    }


    .container {
        padding-left: 15px;

        padding-right: 15px;
    }


    .nav-item .nav-link {
        font-size: 16px;
    }


    .tab01 {
        background-color: rgba(255, 255, 255, 0.86) !important;
    }


    .headline {
        background-color: rgba(255, 255, 255, 0.90) !important;
    }
}


/* =========================================================
   30. MOBILE KECIL
   ========================================================= */

@media (max-width: 576px) {

    .container {
        padding-left: 18px;

        padding-right: 18px;
    }


    .how1 {
        border-radius: 12px;
    }


    .tab01 {
        border-radius: 12px;
    }


    .headline {
        border-radius: 12px;
    }
}


/* =========================================================
   31. DESKTOP BESAR
   ========================================================= */

@media (min-width: 1200px) {

    body::before {
        background-position: center center;
    }
}


/* =========================================================
   32. PERFORMANCE
   ========================================================= */

.rounded-news,
.how1,
.bg-img1 {
    backface-visibility: hidden;
}


/* =========================================================
   33. FINAL OVERRIDE
   ========================================================= */

/*
   Wrapper utama tidak boleh menjadi bidang putih.
*/

main,
.content,
.page-content,
.page-wrapper,
.site-content,
section.bg0,
.bg0,
.container,
.container-fluid {
    background-color: transparent !important;
}


/*
   Card tetap putih.
*/

.how1 {
    background-color: rgba(255, 255, 255, 0.94) !important;
}


/*
   Section berita semi-transparan.
*/

.tab01 {
    background-color: rgba(255, 255, 255, 0.70) !important;
}


/*
   Footer tetap putih.
*/

footer {
    background-color: rgba(255, 255, 255, 0.96) !important;
}


/* =========================================================
   FIX FOOTER - SOLID
   ========================================================= */

footer {
    position: relative;
    z-index: 10;

    background-color: #ffffff !important;

    background-image: none !important;

    opacity: 1 !important;
}

footer::before,
footer::after {
    display: none !important;
}

footer .container,
footer .container-fluid {
    background-color: transparent !important;
    background-image: none !important;
}


/* Copyright bar paling bawah */
footer .bg2 {
    background-color: #303030 !important;
    background-image: none !important;
}


.news-detail-image {
    display: block;
    width: 100%;
    max-width: 500px;
    height: auto !important;
    margin: 0 auto 10px auto;
}