/* =========================================
   A. STYLING GLOBAL (Berlaku untuk semua layar)
   ========================================= */
   .nav-link:hover, .nav-link.active {
        color: #0000CD !important; /* Memaksa teks menu utama tetap biru saat di-hover atau sedang aktif */
    }
    
    .nav-link::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        
        /* 👇 UBAH BAGIAN INI 👇 */
        bottom: 2px; /* Sebelumnya bottom: -2px; */
        
        left: 50%;
        background-color: #0000CD;
        transition: all 0.3s ease;
        transform: translateX(-50%);
    }
    
    .nav-link:hover::after, .nav-link.active::after {
        width: 70%;
    }
   @media (max-width: 991.98px) {
        /* 1. Paksa lebar 100% agar mengisi layar penuh */
        html body .navbar {
            padding-top: 0.1rem !important;
            padding-bottom: 0.1rem !important;
        }

        /* 2. Sedikit mengecilkan logo gambar (jika ada) khusus di HP */
        html body .navbar-brand img {
            height: 30px !important; /* Globalnya 35px, di HP kita buat 30px */
        }

        /* 3. Merapatkan jarak baris teks judul agar tidak menumpuk terlalu tinggi */
        html body .navbar-brand span {
            font-size: 18px; /* Sedikit diperkecil dari 20px */
            line-height: 1 !important; /* Dibuat sangat rapat */
            margin-bottom: 0;
        }

        /* 4. Merapatkan teks kecil ("Sangia Nibandera...") */
        html body .navbar-brand span small {
            font-size: 13px; /* Sedikit diperkecil dari 16px */
            line-height: 1 !important; 
            margin-top: 2px; /* Jarak tipis antara judul besar dan judul kecil */
        }

        /* 5. Mengecilkan kotak tombol hamburger (garis tiga) bawaan Bootstrap */
        html body .navbar-toggler {
            padding: 0.2rem 0.5rem !important; /* Mengurangi ruang kosong di dalam tombol */
        }
        html body .container, 

        /* 4. Menghilangkan padding pada kolom */
        html body .col, 
        html body .col-12, 
        html body .col-lg-12 {
            padding-left: 0;
            padding-right: 0;
        }

        /* 5. Full Width untuk Peta dan Card */
        html body #map, 
        html body .card, 
        html body .rounded {
            border-radius: 0;
            border-left: none;
            border-right: none;
        }

        /* 6. Menghilangkan celah antar tombol di HP */
        html body .btn-grid {
            gap: 0;
        }
        
        html body .btn-custom {
            border-radius: 0;
        }

        /* 7. Jarak aman Logo dan Hamburger */
        html body .navbar-brand {
            padding-left: 15px;
            padding-right: 15px;
        }
        html body .navbar-toggler {
            margin-right: 15px;
        }

        /* 8. Menghilangkan jarak besar di bawah sub-menu */
        html body .dropdown-menu {
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            margin-bottom: 0 !important;
            border: none;
            background-color: #fdfdfd; 
        }

        /* TAMBAHAN: Pastikan <li> (list) tidak memiliki jarak bawaan */
        html body .dropdown-menu li {
            margin: 0 !important;
            padding: 0 !important;
        }

        /* 9. FIX: Mencegah Teks Turun ke Bawah (No Wrap) */
        html body .dropdown-item {
            margin-bottom: 0 !important;
            padding: 9px 20px !important; /* !important memaksa menimpa Bootstrap */
            line-height: 1.2 !important; /* Mengecilkan tinggi baris teks */
            white-space: nowrap !important; 
            
            border-bottom: 1px solid #f0f0f0;
        }

        html body .navbar-nav {
            padding-bottom: 0;
        }
        html body .btn-outline-dark {
            padding-top: 10;
            margin-bottom: 0;
        }
        html body .navbar-brand span {
            font-size: 20px; /* Silakan ubah angka ini untuk memperbesar/memperkecil */
            font-weight: normal; /* Opsional: Membuat tulisan menjadi tebal */
            line-height: 1.2;
        }

        /* Mengatur ukuran teks tambahan "Sangia Nibandera Kolaka" */
        html body .navbar-brand span small {
            font-size: 16px; /* Silakan sesuaikan angkanya */
            font-weight: normal; /* Mengembalikan ketebalan normal untuk teks kecil */
            display: block; /* Menurunkan teks ini ke baris baru agar rapi */
            color: #555; /* Opsional: Memberi warna sedikit abu-abu agar beda dengan judul */
        }
        html body .custom-nav-container {
        max-width: 100%; 
        flex-direction: row; /* Mengembalikan ke baris (horizontal) */
        justify-content: space-between; /* Logo di kiri, Hamburger di kanan */
        align-items: center; 
        display: flex; /* Memastikan container menggunakan flex */
    }
    html body .navbar-nav {
        padding-top: 10px !important; /* Menambah ruang di atas menu Profil */
        padding-bottom: 0px !important; /* Mengatur jarak aman di paling bawah */
    }

    /* 2. Jarak antara bagian menu (Publikasi) dengan tombol Contact Center */
    html body .nav-item.ms-lg-4 {
        margin-top: 10px !important; /* Memberi jeda sebelum tombol WA */
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    html body .nav-item.ms-lg-4 {
        border-bottom: none !important;
        
    }

    /* 3. Merapikan tombol Contact Center agar pas di tengah dan tidak terlalu mepet bawah */
    html body .btn-outline-dark.rounded-pill {
        margin-bottom: 0px !important; /* Jarak dari tombol ke batas bawah menu */
        justify-content: center; /* Memastikan teks WA di tengah tombol */
    }

    /* Menghilangkan padding berlebih pada collapse agar tidak terlalu panjang ke bawah */
    html body .navbar-collapse {
        padding-bottom: 5px !important;
    }
    .nav-link:hover, .nav-link.active {
        color: #0000CD !important; /* Memaksa teks menu utama tetap biru saat di-hover atau sedang aktif */
    }
    
    .nav-link::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        
        /* 👇 UBAH BAGIAN INI 👇 */
        bottom: -2px; /* Sebelumnya bottom: -2px; */
        
        left: 50%;
        background-color: #0000CD;
        transition: all 0.3s ease;
        transform: translateX(-50%);
    }
    
    .nav-link:hover::after, .nav-link.active::after {
        width: 70%;
    }
        
    }
.custom-nav-container {
    max-width: 70%;
}

.navbar {
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
    min-height: auto !important;
}

.navbar-brand img {
    height: 35px !important; 
    width: auto;
}

/* Styling Item Menu */
.dropdown-item {
    padding: 5px 10px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    border-radius: 8px;
    
    padding-top: 8px !important;
    margin-left: 0px;
    white-space: nowrap;
}

.dropdown-item:hover {
    background-color: #eef2ff !important;
    color: #0000CD;
    transform: translateY(-2px);
}

/* Animasi Garis Bawah Nav Link */



//* =========================================
   B. KHUSUS TAMPILAN DESKTOP / LAPTOP
   (Layar lebih besar dari 992px)
   ========================================= */
@media (min-width: 992px) {
    /* Efek Floating Dropdown (Hanya Desktop) */
    .navbar-nav .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        margin-top: 20px;
    }

    .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        transform: translateY(15px);
        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        border: none;
        border-radius: 12px;
        box-shadow: 0 15px 35px rgba(0,0,0,0.1);
        
        /* 👇 UBAH BAGIAN INI 👇 */
        /* Gunakan max-content agar lebar kotak mengikuti panjang teks paling panjang */
        width: max-content !important; 
        min-width: 200px; /* Opsional: Menjaga agar tidak terlalu kecil jika teksnya sangat pendek */
    }

    .dropdown-menu .dropdown-item {
        text-align: left !important;   
        margin-left: 0 !important;     
        
        padding-left: 15px !important; 
        padding-right: 15px !important; 
        
        /* 👇 UBAH BAGIAN INI 👇 */
        /* Paksa teks agar memanjang dalam 1 baris dan tidak terpotong ke bawah */
        white-space: nowrap !important; 
        
        line-height: 1.4 !important; 
    }
    .nav-link {
    font-size: 1rem !important; 
    padding-top: 0.2rem !important; 
    padding-bottom: 0.2rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    position: relative; /* Penting untuk animasi garis bawah */
}
    .nav-link:hover, .nav-link.active {
        color: #0000CD !important; /* Memaksa teks menu utama tetap biru saat di-hover atau sedang aktif */
    }
    
    .nav-link::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        
        /* 👇 UBAH BAGIAN INI 👇 */
         /* Sebelumnya bottom: -2px; */
        
        left: 50%;
        background-color: #0000CD;
        transition: all 0.3s ease;
        transform: translateX(-50%);
        top: 0; 
        bottom: auto !important; /* Wajib: Mencegah bentrok dengan perintah 'bottom' dari Bootstrap */
        z-index: 10;
    }
    
    .nav-link:hover::after, .nav-link.active::after {
        width: 70%;
    }
}