/* --- 1. HEADER SCROLL BEHAVIOR (CSS LAMA KAMU) --- */

html.sticky-header-active #header .header-nav-main nav > ul > li > a.active {
    color: #ff0000 !important;
    background: transparent !important;
}
/* Base Transparan */
#header.header-transparent .header-body {
    background-color: transparent !important;
    border-bottom: none !important;
    transition: all 0.3s ease;
}

/* Saat Scroll: Background Putih */
html.sticky-header-active #header .header-body {
    background-color: #ffffff !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1) !important;
}

/* Warna Teks Default saat Scroll (Hitam) */
html.sticky-header-active #header .header-nav-main nav > ul > li > a,
html.sticky-header-active .lang-switcher a, 
html.sticky-header-active .lang-switcher span {
    color: #333333 !important; 
}

/* --- PERBAIKAN LOGIKA HOVER DI SINI --- */

/* 1. Saat Header Masih di Atas (Transparan): Hover & Active TETAP PUTIH */
html:not(.sticky-header-active) #header .header-nav-main nav > ul > li > a:hover,
html:not(.sticky-header-active) #header .header-nav-main nav > ul > li > a:focus,
html:not(.sticky-header-active) #header .header-nav-main nav > ul > li > a.active {
    color: #FFFFFF !important; 
    background: transparent !important;
}

/* 2. Saat Header Sudah di Scroll (Sticky): Hover & Active JADI MERAH */
html.sticky-header-active #header .header-nav-main nav > ul > li > a:hover,
html.sticky-header-active #header .header-nav-main nav > ul > li > a:focus,
html.sticky-header-active #header .header-nav-main nav > ul > li > a.active {
    color: #ff0000 !important;
    background: transparent !important;
}

/* --- AKHIR PERBAIKAN --- */


/* Pengaturan Language Switcher */

/* Hover Lang Switcher (Bisa disesuaikan jika ingin putih di atas juga, 
   tapi kode ini akan membuatnya merah di kedua kondisi) */
.lang-switcher a:hover,
.lang-switcher a.active-lang {
    color: #ff0000 !important; 
}

/* Warna Text Lang Switcher Default (Putih) */
#header .custom-lang-switcher a,
#header .custom-lang-switcher span {
    color: #FFF !important; 
    transition: color 0.3s ease; 
}

/* Warna Text Lang Switcher Saat Scroll (Hitam) */
html.sticky-header-active #header .custom-lang-switcher a,
html.sticky-header-active #header .custom-lang-switcher span {
    color: #333 !important;
}

/* Opsional: Efek Hover */
#header .custom-lang-switcher a:hover {
    opacity: 0.7;
    text-decoration: none;
}

/* Tombol Burger Menu Mobile saat Scroll */
html.sticky-header-active .btn.header-btn-collapse-nav {
    color: #333333 !important;
}


.lang-switcher {
    font-size: 13px;
    letter-spacing: 1px;
    white-space: nowrap; 
}
.lang-switcher a {
    text-decoration: none;
    transition: all 0.3s;
}
    

       

        .owl-carousel .owl-dots {
            display: none !important;
        }

        .custom-slider-progress {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            color: #fff;
    
            z-index: 10;
            font-family: sans-serif;
        }

        .custom-slider-progress .progress-bar-line {
            width: 100px;
            height: 2px;
            background: rgba(255, 255, 255, 0.3);
            margin: 0 15px;
            position: relative;
        }

        .custom-slider-progress .progress-fill {
            display: block;
            height: 100%;
            background: #fff;
            width: 33%;
            transition: width 0.3s ease;
        }
        .img-gray-filter {
            filter: grayscale(100%);
            -webkit-filter: grayscale(100%);
            transition: all 0.3s ease;
            width: 100%;
        }
        .img-gray-filter:hover {
            filter: grayscale(0%);
            -webkit-filter: grayscale(0%);
        }

        @media (min-width: 992px) {
            .text-15 {
                font-size: 5rem !important;
            }
        }

        .custom-carousel-nav .owl-dots {
            margin-top: 40px !important;
            display: flex;
            justify-content: center;
        }

        .custom-carousel-nav .owl-dots .owl-dot span {
            width: 60px;
            height: 4px;
            background: #e0e0e0;
            margin: 0 5px;
            border-radius: 2px;
            transition: all 0.3s ease;
        }

        .custom-carousel-nav .owl-dots .owl-dot.active span {
            background: #555;
            width: 60px;
        }