/* =========================================
    BODY HEADER
========================================= */
body {
    padding-top: 80px;
}

/* =========================================
    NAVBAR UTAMA
========================================= */
#mainNavbar {
    transition: all 0.4s ease-in-out;
    padding-top: 12px;
    padding-bottom: 12px;
    background: linear-gradient(90deg, #0f3d5e, #075985) !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

/* =========================================
    NAVBAR SAAT SCROLL
========================================= */
#mainNavbar.navbar-scrolled {
    padding-top: 7px;
    padding-bottom: 7px;
    background: linear-gradient(90deg, #0b3048, #064a6e) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
}

/* =========================================
    LOGO
========================================= */
.navbar-brand img {
    transition: all 0.3s ease;
}

.navbar-brand img:hover {
    transform: scale(1.08);
}

/* =========================================
    NAV MENU
========================================= */
.nav-link {
    position: relative;
    transition: all 0.3s ease;
    color: #ffffff !important;
    font-weight: 500;
}

.nav-link:hover {
    color: #20b8e6 !important;
}

/* Garis Bawah Menu */
.nav-link::after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background-color: #20b8e6;
    transition: all 0.3s ease-in-out;
    transform: translateX(-50%);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 80%;
}

.nav-link.active {
    color: #20b8e6 !important;
}

/* =========================================
    TOMBOL LAPOR
========================================= */
.btn-lapor {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #212529 !important;
    animation: pulse-animation 2s infinite;
    transition: all 0.3s ease;
}

.btn-lapor:hover {
    background-color: #ffd54f !important;
    border-color: #ffd54f !important;
    transform: translateY(-2px);
}

@keyframes pulse-animation {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(255, 193, 7, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
    }
}

/* =========================================
    NAVBAR TOGGLER
========================================= */
.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.15rem rgba(32, 184, 230, 0.35);
}

/* =========================================
    DROPDOWN PROFIL & ICON ▼ (PERBAIKAN UTAMA)
========================================= */
.navbar .dropdown-toggle::after {
    display: inline-block !important;
    margin-left: 8px !important;
    vertical-align: middle !important;
    content: "" !important;
    border-top: 0.35em solid !important;
    border-right: 0.35em solid transparent !important;
    border-bottom: 0 !important;
    border-left: 0.35em solid transparent !important;
    transition: transform 0.3s ease;
}

.navbar .dropdown-toggle.show::after {
    transform: rotate(180deg);
}

.navbar .dropdown-toggle {
    display: inline-flex !important;
    align-items: center !important;
    transition: all 0.3s ease !important;
    border-radius: 8px;
}

.navbar .dropdown-toggle:hover {
    background: rgba(32, 184, 230, 0.12) !important;
    color: #20b8e6 !important;
}

/* Dropdown Box */
.navbar .dropdown-menu {
    border: 1px solid rgba(32, 184, 230, 0.15) !important;
    border-radius: 12px !important;
    padding: 8px !important;
    min-width: 235px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18) !important;
    overflow: hidden;
    animation: dropdownProfil 0.25s ease;
}

@keyframes dropdownProfil {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Item Dropdown */
.navbar .dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px;
    padding: 11px 13px !important;
    margin-bottom: 3px;
    border-radius: 8px !important;
    color: #0f3d5e !important;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.25s ease !important;
}

.navbar .dropdown-item i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #e8f7fc;
    color: #075985;
    font-size: 14px;
    transition: all 0.25s ease;
}

.navbar .dropdown-item:hover {
    background: linear-gradient(90deg, #e8f7fc, #f5fcfe) !important;
    color: #075985 !important;
    transform: translateX(3px);
}

.navbar .dropdown-item:hover i {
    background: #20b8e6;
    color: #ffffff;
    transform: scale(1.08);
}

.navbar .dropdown-menu li + li {
    border-top: 1px solid #eef3f6;
    padding-top: 3px;
}

/* =========================================
    MOBILE / DEVICE RESPONSIVE (MAX 991.98px)
========================================= */
@media (max-width: 991.98px) {
    #mainNavbar {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    #mainNavbar > .container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100%;
    }

    .navbar-brand {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center;
        margin-right: 0 !important;
        margin-bottom: 5px !important;
        padding: 3px 0 !important;
    }

    .navbar-brand > img {
        width: 42px !important;
        height: 42px !important;
        flex: 0 0 auto !important;
        display: block !important;
        object-fit: contain;
        margin-left: 3px !important;
        margin-right: 3px !important;
        padding: 2px !important;
        background-color: #ffffff !important;
        border-radius: 50% !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    }

    .navbar-brand > div {
        flex-basis: 100% !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        margin-left: 0 !important;
        margin-top: 5px !important;
        line-height: 1.1;
    }

    .navbar-brand > div span:first-child {
        display: block !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px !important;
        line-height: 1.2 !important;
    }

    .navbar-brand > div span:last-child {
        display: block !important;
        font-size: 11px !important;
        font-weight: normal !important;
        margin-top: 2px !important;
        line-height: 1.2 !important;
        opacity: 0.75;
    }

    .navbar-toggler {
        display: block !important;
        margin: 4px auto 8px auto !important;
        padding: 6px 10px !important;
        border-radius: 8px;
        align-self: center !important;
    }

    .navbar-collapse {
        width: 100% !important;
        text-align: center !important;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        padding-top: 8px;
    }

    .navbar-nav {
        width: 100% !important;
        padding-top: 5px;
        align-items: center !important;
        justify-content: center !important;
    }

    .nav-item {
        width: 100% !important;
        text-align: center !important;
    }

    .nav-link {
        display: inline-block !important;
        padding: 10px 0 !important;
    }

    .nav-link::after {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .nav-link:hover::after,
    .nav-link.active::after {
        width: 50px;
    }

    .btn-lapor {
        margin-top: 8px;
        margin-left: 0 !important;
        margin-bottom: 8px;
    }

    .navbar .dropdown-menu {
        margin-top: 5px !important;
        border-radius: 10px !important;
    }

    .navbar .dropdown-item {
        justify-content: center;
        text-align: center;
    }
}

/* =========================================
    HP KECIL (MAX 480px)
========================================= */
@media (max-width: 480px) {
    .navbar-brand > img {
        width: 38px !important;
        height: 38px !important;
        margin-left: 2px !important;
        margin-right: 2px !important;
    }

    .navbar-brand > div span:first-child {
        font-size: 15px !important;
    }

    .navbar-brand > div span:last-child {
        font-size: 10px !important;
    }
}

/* =========================================
    FIX DROPDOWN PROFIL & ICON ▼ (SEJAJAR)
========================================= */

/* Hilangkan panah bawaan Bootstrap */
.navbar .dropdown-toggle::after {
    display: none !important;
}

/* Jadikan tombol dropdown sebagai flex container agar teks dan icon sejajar */
.navbar .dropdown-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important; /* Jarak antara teks dan icon panah */
    transition: all 0.3s ease !important;
    border-radius: 8px;
    padding-left: 12px;
    padding-right: 12px;
}

/* Tambahkan ikon panah secara konsisten menggunakan atribut pseudo-content */
.navbar .dropdown-toggle::before {
    content: "\f0d7" !important; /* Kode unicode ikon panah bawah FontAwesome */
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 11px !important;
    order: 2; /* Memposisikan ikon di sebelah kanan teks */
    transition: transform 0.3s ease;
    display: inline-flex;
    align-items: center;
}

/* Efek putar saat dropdown terbuka */
.navbar .dropdown-toggle.show::before {
    transform: rotate(180deg);
}

.navbar .dropdown-toggle:hover {
    background: rgba(32, 184, 230, 0.12) !important;
    color: #20b8e6 !important;
}

/* Kotak Menu Dropdown */
.navbar .dropdown-menu {
    border: 1px solid rgba(32, 184, 230, 0.15) !important;
    border-radius: 12px !important;
    padding: 8px !important;
    min-width: 235px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18) !important;
    overflow: hidden;
    animation: dropdownProfil 0.25s ease;
}

@keyframes dropdownProfil {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Item di dalam Dropdown */
.navbar .dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px;
    padding: 11px 13px !important;
    margin-bottom: 3px;
    border-radius: 8px !important;
    color: #0f3d5e !important;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.25s ease !important;
}

.navbar .dropdown-item i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #e8f7fc;
    color: #075985;
    font-size: 14px;
    transition: all 0.25s ease;
}

.navbar .dropdown-item:hover {
    background: linear-gradient(90deg, #e8f7fc, #f5fcfe) !important;
    color: #075985 !important;
    transform: translateX(3px);
}

.navbar .dropdown-item:hover i {
    background: #20b8e6;
    color: #ffffff;
    transform: scale(1.08);
}

.navbar .dropdown-menu li + li {
    border-top: 1px solid #eef3f6;
    padding-top: 3px;
}

/* Penyesuaian Mobile */
@media (max-width: 991.98px) {
    .navbar .dropdown-toggle {
        justify-content: center !important;
    }
    .navbar .dropdown-menu {
        margin-top: 5px !important;
        border-radius: 10px !important;
    }
    .navbar .dropdown-item {
        justify-content: center;
        text-align: center;
    }
}

/* =========================================================
   NAVBAR - PERBAIKAN MOBILE
========================================================= */

@media (max-width: 991.98px) {
    /* Navbar tidak lagi menutupi content */
    #mainNavbar {
        position: sticky !important;

        top: 0 !important;

        z-index: 1050;

        width: 100%;

        /* Jangan menggunakan fixed-top pada mobile */
        margin: 0 !important;
    }

    /* Padding body tidak diperlukan
   karena navbar sekarang masuk flow */
    body {
        padding-top: 0 !important;
    }

    /* Pastikan container tidak menyebabkan overflow */
    #mainNavbar .container {
        width: 100%;

        max-width: 100%;

        padding-left: 15px;
        padding-right: 15px;
    }
}