/* GALERI */
        #galeri img {
            width: 100%;
            height: auto;
            object-fit: cover;
            aspect-ratio: 1/1;
        }

        #galeri .btn {
            margin-top: 10px;
        }

            #galeri {
                background: #f9fafb;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                position: relative;
                top: -140px;
                /* Geser ke atas 140px */
                padding-top: 140px;
            }

            #galeri .section-title h3 {
                font-weight: 700;
                color: #1e3a8a;
            }

            .galeri-img {
                border-radius: 8px;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
                cursor: zoom-in;
                transition: transform 0.3s ease;
            }

            .galeri-img:hover {
                transform: scale(1.05);
            }

            .zoom-overlay {
                display: none;
                position: fixed;
                inset: 0;
                background: rgba(0, 0, 0, 0.85);
                z-index: 9999;
                justify-content: center;
                align-items: center;
            }

            .zoom-overlay img {
                max-width: 92%;
                max-height: 92%;
                border-radius: 10px;
                box-shadow: 0 8px 30px rgba(255, 255, 255, 0.2);
            }

            @media (max-width: 768px) {
                .galeri-img {
                    border-radius: 6px;
                }
            }
        /* AKHIR GALERI */


    /* ========================================= */
    /* ======== LOADING SCREEN AWAL  ======= */
    /* ========================================= */

        /* Loading screen wrapper (putih statis) */
        #loadingScreen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: white;
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        /* Logo elemen (bukan ::after agar lebih fleksibel) */
        #loadingScreen::before {
            content: '';
            width: 200px;
            height: 200px;
            background-image: url('../images/logo/logo_pintar.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            opacity: 0;
            transform: scale(0.6);
            animation: logoIn 1.8s ease forwards, logoOut 1.2s ease forwards 2s;
        }

        /* Saat class .fadeOut ditambahkan */
        #loadingScreen.fadeOut {
            animation: fadeOutWrapper 1.2s ease forwards;
        }

        /* Animasi masuk logo */
        @keyframes logoIn {
            to {
                opacity: 1;
                transform: scale(1.2);
            }
        }

        /* Animasi keluar logo */
        @keyframes logoOut {
            to {
                opacity: 0;
                transform: scale(1.6);
                filter: blur(8px);
            }
        }

        /* Fade out screen dengan gradasi */
        @keyframes fadeOutWrapper {
            0% {
                opacity: 1;
            }

            100% {
                opacity: 0;
                visibility: hidden;
            }
        }


            
    /* ========================================= */
    /* === STYLE AGREGAT DATA DASHBOARD === */
    /* ========================================= */
    .agregat-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 20px;
        margin: 24px 0;
        padding: 0 10px;
    }

    /* Kartu Agregat */
    .agregat-card {
        position: relative;
        background: linear-gradient(145deg, #ffffff, #f1f4f9);
        border-radius: 18px;
        padding: 18px;
        text-align: center;
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);
        transition: all 0.3s ease;
        overflow: hidden;
    }

    .agregat-card::before {
        content: "";
        position: absolute;
        top: -40%;
        left: -40%;
        width: 180%;
        height: 180%;
        background: radial-gradient(circle at top left, rgba(42, 122, 226, 0.15), transparent 60%);
        z-index: 0;
    }

    .agregat-card:hover {
        transform: translateY(-6px) scale(1.02);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.08);
    }

    .agregat-card h4 {
        font-size: 15px;
        margin-bottom: 8px;
        color: #333;
        font-weight: 600;
        z-index: 1;
        position: relative;
        letter-spacing: 0.3px;
    }

    .agregat-angka {
        font-size: 26px;
        font-weight: 700;
        color: #2a7ae2;
        z-index: 1;
        position: relative;
        line-height: 1.2;
    }

    /* Animasi Angka Naik */
    .agregat-angka[data-animate] {
        opacity: 0;
        transform: translateY(10px);
        animation: fadeUp 0.6s ease forwards;
    }

    @keyframes fadeUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Responsive */
    @media (max-width: 992px) {
        .agregat-grid {
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 16px;
        }

        .agregat-card h4 {
            font-size: 13px;
        }

        .agregat-angka {
            font-size: 22px;
        }
    }

    @media (max-width: 576px) {
        .agregat-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

/* ========================================= */
/* === RUNNING TEXT === */
/* ========================================= */

        /* RUNNING TEXT (TICKER) */
        .running-text-wrapper {
            width: 100%;
            padding: 10px 0;
            overflow: hidden;
            position: fixed;
            top: 80px;
            left: 0;
            z-index: 1020;
            font-size: 16px;
            font-weight: 600;
            background-color: rgba(255, 255, 255, 0.1);
            /* <= Tambah ini untuk efek blur tampak */
            color: #fff;
            backdrop-filter: blur(8px);
            /* <= Blur lebih tegas */
            -webkit-backdrop-filter: blur(8px);
            /* Safari support */
            transition: background-color 0.3s ease, color 0.3s ease;
            font-family: 'Consolas', 'Courier New', monospace;
            text-transform: uppercase;
            letter-spacing: 1px;
            user-select: none;
        }

        .running-text {
            display: flex;
            align-items: center;
            white-space: nowrap;
        }

        .running-track {
            display: inline-flex;
            animation: slideTextLoop 60s linear infinite;
        }

        .running-track span {
            display: inline-block;
            margin-right: 48px;
        }

        /* Ubah warna saat scroll */
        .running-text-wrapper.scrolled {
            background-color: #fff;
            color: #111;
            /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); */
        }

        .running-text-wrapper.scrolled .running-track {
            color: inherit;
        }

        @keyframes slideTextLoop {
            0% {
                transform: translateX(0%);
            }

            100% {
                transform: translateX(-50%);
            }
        }

        /* Responsif mobile */
        @media (max-width: 576px) {
            .running-text-wrapper {
                font-size: 13px;
                padding: 6px 0;
                top: 76px;
            }

            .running-track span {
                margin-right: 32px;
            }
        }
    
/* ========================================= */
/* === NAVBAR DALAM STICKY === */
/* ========================================= */

    .sticky-navbar {
    position: sticky;
    top: 0;
    z-index: 10;

    /* Tampilan */
  background: linear-gradient(
    to right,
    #1976d2 0%,
    #42a5f5 30%,
    #26c6da 70%,
    #7e57c2 100%
);

    backdrop-filter: blur(10px);

    /* Shadow bawah */
    box-shadow: 0 7px 6px rgba(0, 0, 0, 0.35);
}

                .navbar-content {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    flex-wrap: wrap;
                }

                .left-info h5,
                .left-info p,
                .left-info small {
                    margin-bottom: 0;
                    color: #fff;
                    /* tulisan putih */
                    font-weight: 600;
                }

                .search-close-wrapper {
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    margin-top: 0.5rem;
                }

                .search-box {
                    position: relative;
                    min-width: 180px;
                }

                #searchKecamatan {
                    background: rgba(255, 255, 255, 0.2);
                    /* transparan putih */
                    color: #fff;
                    border: none;
                    border-radius: 4px;
                }

                #searchKecamatan::placeholder {
                    color: rgba(255, 255, 255, 0.7);
                }

                #autocomplete-list {
                    position: absolute;
                    top: 100%;
                    left: 0;
                    right: 0;
                    z-index: 1000;
                    max-height: 200px;
                    overflow-y: auto;
                    background: rgba(0, 0, 0, 0.7);
                    /* list transparan gelap */
                    color: #fff;
                    border: none;
                }

                #autocomplete-list li.active {
                    background-color: rgba(176, 209, 243, 0.7);
                    color: white;
                }

/* ========================================= */
/* ===== SCROLL AREA STICKYCARD ===== */
/* ========================================= */
                /* WARNA JUDUL ATAS */
                .dashboard-container {
                    color: #201de6;
                    /* semua text putih */
                    overflow-y: auto;
                    scrollbar-width: thin;
                    scrollbar-color: rgba(23, 43, 160, 0.5) transparent;
                }

                /* custom scrollbar untuk Webkit (Chrome, Edge, etc.) */
                .dashboard-container::-webkit-scrollbar {
                    width: 8px;
                }

                .dashboard-container::-webkit-scrollbar-track {
                    background: transparent;
                }

                .dashboard-container::-webkit-scrollbar-thumb {
                    background-color: rgba(182, 182, 182, 0.5);
                    border-radius: 4px;
                }

                /* ===== RESPONSIVE ===== */
                @media (max-width: 768px) {
                    .navbar-content {
                        flex-direction: column;
                        align-items: flex-start;
                    }

                    .search-close-wrapper {
                        width: 100%;
                        justify-content: space-between;
                        margin-top: 0.5rem;
                    }

                    .search-box {
                        flex: 1;
                    }

                    .dashboard-container {
                        overflow-y: auto;
                        scrollbar-width: thin;
                        scrollbar-color: rgba(255, 255, 255, 0.5) transparent;

                        /* ukuran custom */
                        width: 90%;
                        /* lebarnya 90% layar */
                        max-width: 1200px;
                        height: 80vh;
                        /* tingginya 80% tinggi layar */
                        margin: 0 auto;
                        /* biar tetap center */
                    }


                }
            /* AKHIR */

/* ========================================= */
            /* ANIMASI MASUK */
/* ========================================= */
                @keyframes fadeInUp {
                    from {
                        opacity: 0;
                        transform: translate(-50%, -60%);
                    }

                    to {
                        opacity: 1;
                        transform: translate(-50%, -50%);
                    }
                }

                .fadeInUp {
                    animation: fadeInUp 0.5s ease-out forwards;
                }

                /* ======================= */
                /* === ANIMASI KELUAR === */
                /* ======================= */
                @keyframes fadeOutUp {
                    from {
                        opacity: 1;
                        transform: translate(-50%, -50%);
                    }

                    to {
                        opacity: 0;
                        transform: translate(-50%, -80%);
                    }
                }

                .fadeOutUp {
                    animation: fadeOutUp 0.4s ease forwards;
                }


/* =========================== */
/* === STICKY CARD WRAPPER === */
/* =========================== */
#stickyCard {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* benar-benar center */
    z-index: 1050;
    width: 95vw;
    max-width: 2000px;
    max-height: 90vh;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    color: #fff;
    animation: fadeScaleIn 0.3s ease;
}

#stickyCard .card {
    background: rgba(255, 255, 255, 0.8);
    background-size: cover;
}


/* =========================== */
/* === ANIMASI MUNCUL MODAL ===*/
/* =========================== */
@keyframes fadeScaleIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* ============================= */
/* === ISI STICKY (SCROLLABLE) === */
/* ============================= */
.dashboard-container {
    overflow-y: auto;
    max-height: 80vh;
    padding: 0 10px;
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

.dashboard-container::-webkit-scrollbar {
    width: 8px;
}
.dashboard-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.dashboard-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 8px;
}
.dashboard-container::-webkit-scrollbar-thumb:hover {
    background: #666;
}

/* ======================= */
/* === TOMBOL CLOSE === */
/* ======================= */
#closeStickyCard {
    margin-left: 0.5rem;
    flex-shrink: 0;
    align-self: flex-start;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    z-index: 11;
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background 0.3s ease, transform 0.2s ease;
}
#closeStickyCard:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* ================================ */
/* === SWIPE HANDLE DENGAN TEKS === */
/* ================================ */
.swipe-handle-animated {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 10px auto 0 auto;
    cursor: grab;
    user-select: none;
    animation: bounceUpDown 4s infinite;
}
.swipe-handle-animated svg {
    width: 24px;
    height: 24px;
}
.swipe-handle-animated .swipe-text {
    font-size: 11px;
    color: #666;
    margin-top: 4px;
    opacity: 0.55;
    letter-spacing: 0.5px;
    animation: fadeInSwipeText 4s infinite;
}

/* ANIMASI PANAH NAIK TURUN */
@keyframes bounceUpDown {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(-5px); opacity: 0.7; }
}
/* ANIMASI TEKS */
@keyframes fadeInSwipeText {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* ======================== */
/* === SCROLL LOCK BODY === */
/* ======================== */
html.no-scroll,
body.no-scroll {
    overflow: hidden !important;
    height: 100%;
    touch-action: none;
}

/* ======================= */
/* === RESPONSIVE MOBILE === */
/* ======================= */
@media (max-width: 768px) {
    #stickyCard {
        width: 98vw;
        max-width: 98vw;
    }
    #closeStickyCard {
        font-size: 24px;
    }
    .swipe-handle-animated .swipe-text {
        font-size: 10px;
    }
}

        /* ============================= */
        /*         MODAL OVERLAY         */
        /* ============================= */
        #welcomeOverlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2000;
            padding: 0;
            margin: 0;
            box-sizing: border-box;

            /* Full cover background */
            background: rgba(255, 255, 255, 0.95) url('../images/bg/bg_bendera.png') center center no-repeat;
            background-size: cover;
        }

        @media (max-width: 768px) {
            #welcomeOverlay {
                background: rgba(255, 255, 255, 0.95) url('../images/bg/bg_bendera1.png') center center no-repeat;
                background-size: cover;
            }
        }

        /* ============================= */
        /*        MODAL CONTAINER        */
        /* ============================= */


        .custom-modal-welcome {
            position: relative;
            background-color: rgb(255, 255, 255);
            padding: clamp(24px, 5vw, 40px);
            border-radius: 20px;
            width: 100%;
            max-width: 800px;
            min-height: clamp(320px, 60vh, 480px);
            text-align: center;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            box-sizing: border-box;
            overflow: hidden;
            margin: 0 clamp(12px, 5vw, 32px);
        }

        /* Layer background gambar semi-transparan */
        .custom-modal-welcome::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('../images/bg/hutri2.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            opacity: 0.12;
            /* lebih soft dan tidak nubruk */
            z-index: 0;
            pointer-events: none;
        }

        /* Semua isi tetap di atas gambar */
        .custom-modal-welcome>* {
            position: relative;
            z-index: 1;
        }

        /* ============================= */
        /*        LOGO DINAS + TEXT      */
        /* ============================= */
        .header-logo {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 10px;
        }

        .logo-img {
            width: 100px;
            height: auto;
            margin-bottom: 10px;
        }

        .judul-dinas {
            font-size: clamp(12px, 1.6vw, 15px);
            font-weight: 400;
            text-align: center;
            line-height: 1.4;
            color: #333;
            margin-top: 4px;
        }

        /* ============================= */
        /*         LOGO PINTAR           */
        /* ============================= */
        .logo-pintar {
            width: 100%;
            max-width: 350px;
            aspect-ratio: 1 / 1;
            margin: -110px auto 3.2rem auto;
            background-image: url('../images/logo/logo_pintar1.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            display: block;
            animation: fadeInLogo 1.2s ease-out,
                shineEffect 4s ease-in-out infinite,
                pulseLogo 1.8s ease-in-out infinite;
            filter: drop-shadow(0 0 6px rgba(0, 123, 255, 0.2));
        }

        /* ============================= */
        /*         KETERANGAN           */
        /* ============================= */
        .keterangan {
            margin-top: -120px;
            animation: fadeInUp 1s ease-out;
            font-size: clamp(13px, 2.2vw, 16px);
            font-weight: 400;
            color: #555;
            margin-bottom: 1rem;
        }

        /* ============================= */
        /*         DESKRIPSI TEKS        */
        /* ============================= */
        .custom-modal-welcome p {
            font-size: clamp(13px, 2vw, 15px);
            color: #444;
            margin-top: -0.5rem;
            margin-bottom: 1.5rem;
        }

        /* ============================= */
        /*         TOMBOL MULAI          */
        /* ============================= */
        #btnMulai {
            animation: pulseMulai 1.2s infinite;
            font-size: clamp(14px, 2.2vw, 16px);
            padding: 10px 24px;
            border-radius: 30px;
            font-weight: 600;
            outline: none;
            background-color: #2543ecff;
            border: none;
            color: #fff;
            transition: background 0.3s ease;
            position: relative;
        }


        /* ============================= */
        /*        ANIMASI FADE IN        */
        /* ============================= */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* ============================= */
        /*        ANIMASI LOGO PINTAR    */
        /* ============================= */
        @keyframes fadeInLogo {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes shineEffect {
            0% {
                filter: drop-shadow(0 0 6px rgba(0, 123, 255, 0.2));
            }

            50% {
                filter: drop-shadow(0 0 15px rgba(0, 123, 255, 0.5)) brightness(1.5);
            }

            100% {
                filter: drop-shadow(0 0 6px rgba(0, 123, 255, 0.2));
            }
        }

        @keyframes pulseLogo {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.05);
            }

            100% {
                transform: scale(1);
            }
        }

        /* ============================= */
        /*      ANIMASI TOMBOL MULAI     */
        /* ============================= */
        @keyframes pulseMulai {
            0% {
                transform: scale(1);
                box-shadow: 0 0 0 rgba(0, 123, 255, 0);
            }

            50% {
                transform: scale(1.08);
                box-shadow: 0 0 20px rgba(0, 123, 255, 0.5);
            }

            100% {
                transform: scale(1);
                box-shadow: 0 0 0 rgba(0, 123, 255, 0);
            }
        }

        /* ============================= */
        /*         RESPONSIVE            */
        /* ============================= */
        @media (max-width: 480px) {

            .judul-dinas {
                font-size: 10px;
            }

            .logo-img {
                width: 60px;
            }
        }



/* GLONDONGAN */
                /* CSS UTAMA  ---------------------------------------------------------------------------------------------------- */
                html,
                body {
                    overflow-x: hidden;
                    width: 100%;
                    height: auto;
                }

                .no-scroll {
                    overflow: hidden;
                    height: 100%;
                }

                body {
                    font-family: 'Rubik', sans-serif;
                    position: relative;
                }

                a {
                    color: #3a7bd5;
                }

                a:hover,
                a:focus {
                    color: #3a7bd5;
                }

                h1 {
                    font-size: 60px;
                    font-weight: 300;
                    letter-spacing: -1px;
                    margin-bottom: 1.5rem;
                }

                h2 {
                    font-size: 45px;
                    font-weight: 300;
                    color: #c72137;
                    letter-spacing: -1px;
                    margin-bottom: 1rem;
                }

                h3 {
                    color: #3a7bd5;
                    font-size: 33px;
                    font-weight: 500;
                }

                h4 {
                    font-size: 20px;
                    font-weight: 400;
                    color: 3a7bd5;
                }

                h5 {
                    font-size: 28px;
                    font-weight: 300;
                    color: #ce9419;
                    margin-bottom: 0.7rem;
                }

                p {
                    color: #959094;
                }

                p.lead {
                    color: #3a7bd5;
                    margin-bottom: 2rem;
                }

                .text-primary {
                    color: #3a7bd5 !important;
                }

                .light-font {
                    font-weight: 300;
                }

                .btn {
                    font-size: 12px;
                    font-weight: 400;
                    text-transform: uppercase;
                    padding: 0.375rem 1.35rem;
                    transition: all 0.3s ease;
                }

                .btn-outline-light:hover {
                    color: #3a7bd5;
                }


                .btn-group-lg>.btn,
                .btn-lg {
                    padding: 0.8rem 1rem;
                    font-size: 15px;
                }

                .light-bg {
                    background-color: #faf6fb;
                }

                .section {
                    padding: 80px 0;
                }

                .section-title {
                    text-align: center;
                    margin-bottom: 3rem;
                }

                .section-title small {
                    color: #998a9b;
                }

                @media (max-width:767px) {
                    h1 {
                        font-size: 40px;
                    }

                    h2 {
                        font-size: 30px;
                    }
                }

                /* AKHIR CSS UTAMA --------------------------------------------------------------------------------------------------*/

/* NAVBAR------------------------------------------------------------------------------------------------------------*/

/* Toggle button style */
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler[aria-expanded="true"] {
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

/* Default toggle icon (biru tua) */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280,44,88,0.95%29' stroke-width='2.2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    transition: all 0.3s ease;
}

/* Toggle icon saat scroll → putih */
.nav-menu.is-scrolling .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.95%29' stroke-width='2.2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Logo kiri */
.logo-left {
    display: block;
    width: 140px;
    height: 60px;
    background-image: url('../images/logo/logo_pintar1.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.4s ease;
}

.logo-left:hover {
    transform: scale(1.05);
}

/* Default navbar putih transparan */
.nav-menu {
    padding: 1rem 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
}

/* Saat scroll atau menu dibuka → biru tua solid */
.nav-menu.is-scrolling,
.nav-menu.menu-is-open {
    background: #002c58;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.25);
}

.nav-menu.is-scrolling {
    padding: 0.6rem 0;
}

/* Link navbar (default) */
.navbar-nav .nav-link {
    font-size: 15px;
    font-weight: 600;
    color: #002c58;
    position: relative;
    display: inline-block;
    letter-spacing: 0.4px;
    padding: 10px 16px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

/* Hover default */
.navbar-nav .nav-link:hover {
    color: #0099dc !important;
    background-color: rgba(0, 153, 220, 0.08);
}

/* Aktif default */
.navbar-nav .nav-link.active {
    color: #0099dc !important;
    background-color: rgba(0, 153, 220, 0.08);
}

/* Saat scroll atau menu terbuka → teks putih */
.nav-menu.is-scrolling .navbar-nav .nav-link,
.nav-menu.menu-is-open .navbar-nav .nav-link {
    color: #ffffff !important;
}

.nav-menu.is-scrolling .navbar-nav .nav-link:hover,
.nav-menu.menu-is-open .navbar-nav .nav-link:hover {
    color: #ffd700 !important;
    background-color: rgba(255, 215, 0, 0.12);
}

/* Aktif saat scroll/menu terbuka */
.nav-menu.is-scrolling .navbar-nav .nav-link.active,
.nav-menu.menu-is-open .navbar-nav .nav-link.active {
    color: #ffd700 !important;
    background-color: rgba(255, 215, 0, 0.12);
}

/* Underline aktif di desktop */
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 1rem;
        padding-left: 1rem;
        font-size: 15px;
    }

    .navbar-nav > .nav-item > .nav-link.active::after {
        content: "";
        display: block;
        width: 60%;
        height: 2px;
        background-color: #0099dc;
        position: absolute;
        bottom: -4px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    .nav-menu.is-scrolling .navbar-nav > .nav-item > .nav-link.active::after,
    .nav-menu.menu-is-open .navbar-nav > .nav-item > .nav-link.active::after {
        background-color: #ffd700;
    }
}

/* Mobile responsive nav */
@media (max-width: 991px) {
    .navbar-nav.is-scrolling {
        padding-bottom: 1rem;
    }

    .navbar-nav .nav-item {
        text-align: center;
    }

    .navbar-nav .nav-link {
        display: block;
        padding: 12px 0;
        font-size: 16px;
        font-weight: 600;
        color: #ffffff !important; /* PUTIH di mode HP */
    }

    .navbar-nav .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.12);
        color: #ffd700 !important;
    }

    .navbar-nav .nav-link.active {
        background-color: rgba(255, 255, 255, 0.12);
        color: #ffd700 !important;
        border-radius: 6px;
    }

    /* ✅ Toggle di HP tetap biru tua, tidak berubah putih */
    .navbar-toggler-icon,
    .nav-menu.menu-is-open .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280,44,88,0.95%29' stroke-width='2.2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }
}

/* Layout logo & menu tengah */
@media (min-width: 992px) {
    .navbar {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .navbar-collapse {
        display: flex !important;
        justify-content: center !important;
        order: 1;
    }

    .navbar-nav {
        flex-direction: row;
        justify-content: center;
        margin: 0 auto;
        position: relative;
    }

    .logo-left {
        order: 0;
    }

    .logo-right {
        order: 2;
    }
}

/* ✅ FIX WARNA: Default awal tetap biru tua (desktop) */
.nav-menu:not(.is-scrolling):not(.menu-is-open) .navbar-nav .nav-link {
    color: #002c58 !important;
}

/* AKHIR NAVBAR------------------------------------------------------------------------------------------------------*/

                /* SECTION BERANDA LAMA ---------------------------------------------------------------------------------------------*/
                header {
                    padding: 100px 0 0;
                    text-align: center;
                    color: #FFF;
                }

                .bg-gradient {
                    background-image: -moz-linear-gradient(135deg, rgba(60, 8, 118, 0.8) 0%, rgba(250, 0, 118, 0.8) 100%);
                    background-image: -webkit-linear-gradient(135deg, rgba(60, 8, 118, 0.8) 0%, rgba(250, 0, 118, 0.8) 100%);
                    background-image: -ms-linear-gradient(135deg, rgba(60, 8, 118, 0.8) 0%, rgba(250, 0, 118, 0.8) 100%);
                    background-image: linear-gradient(135deg, rgba(60, 8, 118, 0.8) 0%, rgba(250, 0, 118, 0.8) 100%);
                }

                .tagline {
                    font-size: 23px;
                    font-weight: 300;
                    color: #172c57;
                    max-width: 800px;
                    margin: 0 auto;
                }

                .img-holder {
                    height: 0;
                    padding-bottom: 33%;
                    overflow: hidden;
                }

                @media (max-width:1200px) {
                    .img-holder {
                        padding-bottom: 50%;
                    }
                }

                @media (max-width:767px) {
                    .tagline {
                        font-size: 17px;
                    }

                    .img-holder {
                        padding-bottom: 100%;
                    }
                }

                /* AKHIR SECTION BERANDA LAMA ---------------------------------------------------------------------------------------*/


                /* SECTION LAYANAN --------------------------------------------------------------------------------------------------*/
                .gradient-fill:before {
                    color: #fc73b4;
                    background: -moz-linear-gradient(top, #9477b4 0%, #fc73b4 100%);
                    background: -webkit-linear-gradient(top, #9477b4 0%, #fc73b4 100%);
                    background: linear-gradient(to bottom, #9477b4 0%, #fc73b4 100%);
                    -webkit-background-clip: text;
                    background-clip: text;
                    -webkit-text-fill-color: transparent;
                }

                .card.features {
                    border: 0;
                    border-radius: 3px;
                    box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.04);
                    transition: all 0.3s ease;
                }

                @media (max-width:991px) {
                    .card.features {
                        margin-bottom: 2rem;
                    }

                    [class^="col-"]:last-child .card.features {
                        margin-bottom: 0;
                    }
                }

                .card.features:before {
                    content: "";
                    position: absolute;
                    width: 3px;
                    color: #fc73b4;
                    background: -moz-linear-gradient(top, #9477b4 0%, #fc73b4 100%);
                    background: -webkit-linear-gradient(top, #9477b4 0%, #fc73b4 100%);
                    background: linear-gradient(to bottom, #9477b4 0%, #fc73b4 100%);
                    top: 0;
                    bottom: 0;
                    left: 0;
                }

                .card-text {
                    font-size: 14px;
                }

                .card.features:hover {
                    transform: translateY(-25px);
                    -moz-box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.08);
                    -webkit-box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.08);
                    box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.08);
                }

                .box-icon {
                    box-shadow: 0px 0px 43px 0px rgba(0, 0, 0, 0.14);
                    padding: 10px;
                    width: 70px;
                    border-radius: 3px;
                    margin-bottom: 1.5rem;
                    background-color: #FFF;
                }

                .circle-icon {
                    box-shadow: 0px 9px 32px 0px rgba(0, 0, 0, 0.07);
                    padding: 10px;
                    width: 100px;
                    height: 100px;
                    border-radius: 50%;
                    margin-bottom: 1.5rem;
                    background-color: #FFF;
                    color: #f5378e;
                    font-size: 48px;
                    text-align: center;
                    line-height: 80px;
                    font-weight: 300;
                    transition: all 0.3s ease;
                }

                @media (max-width:992px) {
                    .circle-icon {
                        width: 70px;
                        height: 70px;
                        font-size: 28px;
                        line-height: 50px;
                    }
                }

                .ui-steps li:hover .circle-icon {
                    background-image: -moz-linear-gradient(122deg, #e6388e 0%, #fb378e 100%);
                    background-image: -webkit-linear-gradient(122deg, #e6388e 0%, #fb378e 100%);
                    background-image: -ms-linear-gradient(122deg, #e6388e 0%, #fb378e 100%);
                    background-image: linear-gradient(122deg, #e6388e 0%, #fb378e 100%);
                    box-shadow: 0px 9px 32px 0px rgba(0, 0, 0, 0.09);
                    color: #FFF;
                }

                .ui-steps li {
                    padding: 15px 0;
                }

                .ui-steps li:not(:last-child) {
                    border-bottom: 1px solid #f8e3f0;
                }

                .perspective-phone {
                    position: relative;
                    z-index: -1;
                }

                @media (min-width:992px) {
                    .perspective-phone {
                        margin-top: -150px;
                    }
                }

                /* AKHIR SECTION LAYANAN  -------------------------------------------------------------------------------------------*/

                /* SECTION TABS LAMA ------------------------------------------------------------------------------------------------*/
                .tab-content {
                    border-bottom-right-radius: 3px;
                    border-bottom-left-radius: 3px;
                    background-color: #FFF;
                    box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.04);
                    padding: 3rem;
                }

                @media (max-width:992px) {
                    .tab-content {
                        padding: 1 rem;
                    }
                }

                .tab-content p {
                    line-height: 1.8;
                }

                .tab-content h2 {
                    margin-bottom: 0.5rem;
                }

                .nav-tabs {
                    border-bottom: 0;
                }

                /* AKHIR SECTION TABS LAMA ------------------------------------------------------------------------------------------*/


                /* SECTION GALERI ---------------------------------------------------------------------------------------------------*/
                .img-gallery .owl-item {
                    box-shadow: 0px 9px 32px 0px rgba(0, 0, 0, 0.07);
                    transform: scale(0.8);
                    transition: all 0.3s ease-in;
                }

                .img-gallery .owl-item.center {
                    transform: scale(1);
                }

                /* AKHIR SECTION GALERI ---------------------------------------------------------------------------------------------*/

                /* FOOTER -----------------------------------------------------------------------------------------------------------*/
                .social-icons {
                    text-align: right;
                }

                .social-icons a {
                    background-color: #FFF;
                    box-shadow: 0px 0px 21px 0px rgba(0, 0, 0, 0.05);
                    width: 50px;
                    height: 50px;
                    display: inline-block;
                    text-align: center;
                    line-height: 50px;
                    margin: 0 0.3rem;
                    border-radius: 5px;
                    color: #f4c9e2;
                    transition: all 0.3s ease;
                }

                .social-icons a:hover {
                    text-decoration: none;
                    color: #e38cb7;
                }

                @media (max-width:991px) {
                    .social-icons {
                        text-align: center;
                        margin-top: 2rem;
                    }
                }

                /* AKHIR FOOTER --------------------------------------------------------------------------------------------------*/


                /* === BACKGROUND CAROUSEL PADA BERANDA === */
                .bg-carousel1 {
                    position: relative;
                    overflow: hidden;
                    height: 100vh;
                    color: white;
                    text-align: center;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    background-color: black;
                }

                .bg-carousel1 .bg-image {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-size: cover;
                    background-position: center;
                    opacity: 0;
                    animation: fadePure 15s infinite ease-in-out;
                    transition: opacity 1s ease-in-out;
                    z-index: 0;
                    pointer-events: none;
                }

                /* Delay untuk gambar */
                .bg-carousel1 .img1 {
                    background-image: url('../images/galeri/image1.jpeg');
                    animation-delay: 0s;
                }

                .bg-carousel1 .img2 {
                    background-image: url('../images/galeri/image2.jpeg');
                    animation-delay: 5s;
                }

                .bg-carousel1 .img3 {
                    background-image: url('../images/galeri/image3.jpeg');
                    animation-delay: 10s;
                }

                .bg-carousel1 .content {
                    position: relative;
                    z-index: 2;
                    max-width: 800px;
                    margin: 0 auto;
                    padding: 1rem;
                }

                /* === KEYFRAMES SMOOTH  === */
                @keyframes fadePure {
                    0% {
                        opacity: 0;
                    }

                    10% {
                        opacity: 1;
                    }

                    30% {
                        opacity: 1;
                    }

                    40% {
                        opacity: 0;
                    }

                    100% {
                        opacity: 0;
                    }
                }

                /* Zoom bisa dipisah kalau perlu */
                @keyframes zoom {
                    0% {
                        transform: scale(1);
                    }

                    50% {
                        transform: scale(1.05);
                    }

                    100% {
                        transform: scale(1);
                    }
                }

                /* (Opsional) Responsif HP */
                @media (max-width: 768px) {
                    .bg-carousel1 .content {
                        padding: 0 20px;
                    }
                }

                /* === AKHIR CAROUSEL 1 BACKGROUND DI BERANDA === */


    /* ========================================= */
    /* === LOGO PUTAR === */
    /* ========================================= */
    
            .logo-putar {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 320px;
                height: 320px;
                transform: translate(-50%, -50%);
                background-image: url('assets/images/logo/logokabmgl.png');
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
                animation: mutarLogo 4s linear infinite;
                z-index: 2;
                pointer-events: none;
                transform-style: preserve-3d;
            }

            @keyframes mutarLogo {
                from {
                    transform: translate(-50%, -50%) rotateY(0deg);
                }

                to {
                    transform: translate(-50%, -50%) rotateY(360deg);
                }
            }
    

    /* ========================================= */
    /* === BUTTON JELAJAH  === */
    /* ========================================= */
    
            .btn-jelajah {
                position: absolute;
                bottom: 20px;
                left: 50%;
                transform: translateX(-50%);
                z-index: 99;
                background: transparent;
                border: none;
                color: #fff;
                padding: 10px 20px;
                font-weight: 500;
                font-size: 16px;
                display: flex;
                align-items: center;
                gap: 8px;
                cursor: pointer;
                text-decoration: none !important;
                /* Hapus garis bawah */
                transition: transform 0.3s ease, color 0.3s ease;
            }

            .btn-jelajah:hover {
                transform: translateX(-50%) scale(2.1);
                /* Membesar saat hover */
                color: #fff;
                /* Tetap putih */
            }

            .btn-jelajah i {
                font-size: 30px;
                animation: bounceDown 1.4s infinite;
            }

            /* Animasi panah turun */
            @keyframes bounceDown {

                0%,
                100% {
                    transform: translateY(0);
                }

                50% {
                    transform: translateY(6px);
                }
            }

            /* Responsif */
            @media (max-width: 576px) {
                .btn-jelajah {
                    font-size: 14px;
                    padding: 8px 16px;
                    bottom: 16px;
                }

                .btn-jelajah i {
                    font-size: 18px;
                }
            }

    /* ========================================= */
    /* === APLIKASI  === */
    /* ========================================= */
    
        @keyframes flipUp {
            0% {
                transform: translateY(50px) rotateX(90deg);
                opacity: 0;
            }

            100% {
                transform: translateY(0) rotateX(0deg);
                opacity: 1;
            }
        }

        .logo-item {
            width: 100px;
            height: 100px;
            margin: 10px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            opacity: 0;
            transform: translateY(50px) rotateX(90deg);
            transition: all 0.6s ease-out;
            backface-visibility: hidden;
            perspective: 1000px;
        }

        /* Aktif saat terlihat */
        .logo-item.visible {
            animation: flipUp 0.7s ease forwards;
        }

        .client-logos {
            /* background-image: url('../images/bg/bg1.jpg'); */
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .logo-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 50px;
            flex-wrap: wrap;
        }

        .logo-item {
            width: 160px;
            height: 100px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            transition: transform 0.3s ease;
            border-radius: 8px;
        }

        .logo-item:hover {
            transform: scale(1.05);
        }

        .logo-1 {
            background-image: url('../images/logo/logo_berakhlak.png');
        }

        .logo-2 {
            background-image: url('../images/logo/logo_bangga.png');
        }

        .logo-3 {
            background-image: url('../images/logo/pendidikan.png');
        }

        .logo-4 {
            background-image: url('../images/logo/rumah_pendidikan.png');
        }

        .logo-5 {
            background-image: url('../images/logo/ramah.png');
        }

        /* RESPONSIF UNTUK HP TANPA SCROLL & JARAK DEKAT */
        @media (max-width: 768px) {
            .logo-wrapper {
                flex-wrap: nowrap;
                gap: 12px;
                /* jarak antar logo dipersempit */
                justify-content: center;
                padding: 0 10px;
            }

            .logo-item {
                width: 64px;
                height: 50px;
            }
        }

        .logo-caption {
            font-weight: bold;
            font-size: 18px;
            color: #333;
            margin-top: 20px;
        }

        #aplikasi {
            position: relative;
            top: -140px;
            /* Geser ke atas 140px */
            padding-top: 140px;
            /* Tambah ruang supaya konten gak tertutup */
        }


             
            /* KHUSUS #profil INSTANSI */
            #profil {
                position: relative;
                background: url('assets/images/bg/disdikbud.jpg') no-repeat center center fixed;
                background-size: cover;
                padding: 160px 0;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                color: #ffffff;
            }

            #profil::before {
                content: "";
                position: absolute;
                inset: 0;
                background: rgba(0, 32, 64, 0.6);
                z-index: 0;
            }

            #profil .container {
                position: relative;
                z-index: 1;
            }

            #profil .section-title small {
                color: #ffffffcc;
                letter-spacing: 2px;
                text-transform: uppercase;
                font-weight: 600;
            }

            #profil .section-title h3 {
                color: #ffffff;
                font-size: 2.5rem;
                font-weight: 700;
            }

            #profil .profil-description p {
                max-width: 800px;
                margin: auto;
                color: #ffffffcc;
                font-size: 1.2rem;
                line-height: 1.9;
            }

            #profil .card-modern {
                background: rgba(255, 255, 255, 0.1);
                border-radius: 16px;
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
                transition: transform 0.4s ease, box-shadow 0.4s ease;
                color: #f0f4f8;
                position: relative;
                overflow: hidden;
            }

            #profil .card-modern::before {
                content: "";
                position: absolute;
                top: -50%;
                left: -50%;
                width: 200%;
                height: 200%;
                background: linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.15) 100%);
                transform: rotate(25deg);
                transition: all 0.5s ease;
            }

            #profil .card-modern:hover::before {
                transform: rotate(385deg);
            }

            #profil .card-modern:hover {
                transform: translateY(-6px);
                box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
            }

            #profil h4 {
                font-weight: 600;
                color: #cbd5f7;
                margin-bottom: 1rem;
                text-align: center;
            }

            #profil .profil-list {
                list-style: none;
                padding-left: 0;
            }

            #profil .profil-list li {
                position: relative;
                padding-left: 1.5rem;
                margin-bottom: 0.75rem;
                font-size: 1rem;
                color: #e2e8f0;
                line-height: 1.6;
                text-align: justify;
            }

            #profil .profil-list li::before {
                content: "•";
                position: absolute;
                left: 0;
                color: #cbd5f7;
                font-size: 1.2rem;
                line-height: 1;
                top: 0;
            }

            #profil .struktur-besar {
                margin-top: 50px;
            }

            #profil .struktur-img-besar {
                width: 100%;
                max-width: 900px;
                border-radius: 12px;
                box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
                cursor: zoom-in;
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }

            #profil .struktur-img-besar:hover {
                transform: scale(1.02);
                box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
            }

            #profil .zoom-overlay {
                display: none;
                position: fixed;
                inset: 0;
                background-color: rgba(0, 0, 0, 0.85);
                z-index: 9999;
                justify-content: center;
                align-items: center;
            }

            #profil .zoom-overlay img {
                max-width: 92%;
                max-height: 90%;
                border-radius: 10px;
                box-shadow: 0 10px 25px rgba(255, 255, 255, 0.2);
            }

            @media (max-width: 768px) {
                #profil .section-title h3 {
                    font-size: 2rem;
                }

                #profil .profil-description p {
                    font-size: 1.1rem;
                }

                #profil .card-modern {
                    padding: 1.5rem;
                }
            }

            @media (max-width: 768px) {
                #profil .row.g-4>.col-lg-5 {
                    margin-bottom: 1.5rem;
                    /* tambahkan jarak antar card */
                }

                #profil .card-modern {
                    padding: 1.5rem;
                    margin: 0 auto;
                    /* pastikan tetap center */
                }
            }


            
    /* APLIKASI */
        @keyframes flipUp {
            0% {
                transform: translateY(50px) rotateX(90deg);
                opacity: 0;
            }

            100% {
                transform: translateY(0) rotateX(0deg);
                opacity: 1;
            }
        }

        .logo-box {
            width: 130px;
            height: 130px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            opacity: 0;
            transform: translateY(50px) rotateX(90deg);
            transition: all 0.6s ease-out;
            backface-visibility: hidden;
            perspective: 1000px;
            margin-bottom: 20px;
        }

        .logo-box.visible {
            animation: flipUp 0.7s ease forwards;
        }

        /* RESPONSIF */
        @media (max-width: 768px) {
            .logo-box {
                width: 100px;
                height: 100px;
                margin-bottom: 12px;
            }
        }

        @media (max-width: 576px) {
            .logo-box {
                width: 90px;
                height: 90px;
                margin-bottom: 10px;
            }
        }

        /* === PARTICLES BACKGROUND DI APLIKASI === */
        #particles-appJS.particles-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
        }


        #aplikasi .container {
            position: relative;
            z-index: 2;
        }

        /* === LOGO BOX UTAMA === */
        .logo-box {
            width: 130px;
            height: 130px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            transition: transform 0.3s ease;
            margin-bottom: 20px;
        }


        /* === RESPONSIF TABLET === */
        @media (max-width: 768px) {
            .logo-box {
                width: 100px;
                height: 100px;
                margin-bottom: 12px;
            }

            #aplikasi .col-6 {
                margin-bottom: 16px !important;
            }
        }


        /* === RESPONSIF HP === */
        @media (max-width: 576px) {
            .logo-box {
                width: 90px;
                height: 90px;
                margin-bottom: 10px;
            }

            #aplikasi .col-6 {
                margin-bottom: 12px !important;
            }
        }

        /* === BACKGROUND LOGO === */
        .logo-myasn {
            background-image: url('../images/logo/logo_myasn.png');
        }

        .logo-sipd {
            background-image: url('../images/logo/logo_sipd.png');
        }

        .logo-srikandi {
            background-image: url('../images/logo/logo_srikandi.png');
        }

        .logo-sipgan {
            background-image: url('../images/logo/logo_sipgan.png');
        }

        .logo-spmb {
            background-image: url('../images/logo/logo_spmb.png');
        }

        .logo-satudata {
            background-image: url('../images/logo/logo_satudata.png');
        }

        .logo-jdih {
            background-image: url('../images/logo/logo_jdih.png');
        }

        .logo-pintem {
            background-image: url('../images/logo/logo_pintem.png');
        }

        .logo-like {
            background-image: url('../images/logo/logo_like.png');
        }

        .logo-efileptk {
            background-image: url('../images/logo/logo_efileptk.png');
        }

        .logo-edoss {
            background-image: url('../images/logo/logo_edoss.png');
            alt: edos;
        }

        .logo-bospsmp {
            background-image: url('../images/logo/logo_bospsmp.png');
        }

        .logo-layanandepan {
            background-image: url('../images/logo/logo_layanandepan.png');
        }

        .logo-datapeg {
            background-image: url('../images/logo/logo_datapeg.png');
        }

        .logo-vdk {
            background-image: url('../images/logo/logo_vdk.png');
        }
    

/* BERITA */
        /* Tambah ruang supaya konten gak tertutup */
        #berita {
            background: #faf8fc;
            position: relative;
            top: -140px;
            /* Geser ke atas 140px */
            padding-top: 140px;
        }

        .news-item {
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        .news-card {
            text-align: left;
        }

        .news-card h5 {
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }

        .news-card p {
            font-size: 14px;
            color: #555;
        }

        .news-card small {
            font-size: 12px;
            color: #999;
        }