/* ==========================================================================
   NAVBAR REACTIVE SCROLL SYSTEM - THEME GLOSSY GLASSMORPHISM
   ========================================================================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 22px 0;
    z-index: 10000;
    
    /* STYLE AWAL: Transparan Total Menyatu dengan Grid Background */
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0) !important;
    box-shadow: none !important;
    backdrop-filter: blur(0px) !important;
    -webkit-backdrop-filter: blur(0px) !important;
    
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* KONDISI AKTIF: Berubah Menjadi Kaca Mengkilap Setelah Layar Di-Scroll */
.navbar.scrolled {
    padding: 12px 0;
    background: rgba(19, 11, 46, 0.75) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-bottom: 1px solid rgba(138, 43, 226, 0.25) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.nav-container {
    width: 85%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* BRANDING LOGO "FKMPI JATIM" */
.logo {
    font-size: 1.8rem !important;
    font-weight: 800;
    text-decoration: none;
    color: #ffffff !important;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
}

.logo span {
    color: #bd53ff !important;
    font-weight: 900;
    margin-left: 6px;
    filter: drop-shadow(0 0 8px #8a2be2);
}

/* LINK MENU NAVIGASI DEKSTOP */
.nav-links {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 2.2rem;
}

.nav-links li a {
    text-decoration: none;
    color: #a49cb9 !important;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    position: relative;
    padding: 6px 0;
}

/* Pastikan border statis bawaan mati */
.nav-links li a.active {
    border-bottom: none !important; 
}

.nav-links li a:hover,
.nav-links li a.active {
    color: #ffffff !important;
}

/* INDIKATOR GARIS BAWAH GESER (GRADIENT MAGIC + GLOW) */
.nav-links li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0; /* Memulai garis dari titik 0 (hilang) */
    height: 3px;
    background: linear-gradient(90deg, #bd53ff, #8a2be2);
    box-shadow: 0 0 8px rgba(189, 83, 255, 0.8);
    border-radius: 5px;
    transition: width 0.3s ease-in-out; /* Animasi bergeser/memanjang */
}

/* Garis memanjang jadi 100% saat di-hover / sedang aktif */
.nav-links li a:hover::after,
.nav-links li a.active::after {
    width: 100%;
}

/* PANEL ADMIN BUTTON GAYA NEON GLOW */
.nav-links li a[href*="dashboard.php"] {
    background: rgba(138, 43, 226, 0.1) !important;
    color: #bd53ff !important;
    padding: 8px 18px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(189, 83, 255, 0.3) !important;
    font-weight: 600 !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.1);
}

/* Matikan garis bawah ajaib khusus untuk tombol Admin */
.nav-links li a[href*="dashboard.php"]::after { display: none; }

.nav-links li a[href*="dashboard.php"]:hover {
    background: #8a2be2 !important;
    color: #ffffff !important;
    border-color: #bd53ff !important;
    box-shadow: 0 0 20px #bd53ff !important;
}

/* TOMBOL AVATAR PROFIL */
.user-avatar-btn { cursor: pointer; }
.nav-user-initial {
    width: 36px; height: 36px;
    background: #8a2be2 !important;
    color: #ffffff !important;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.95rem;
    box-shadow: 0 0 10px rgba(138, 43, 226, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.1);
}
.nav-user-img {
    width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   HAMBURGER BAR (RESPONSIVE TOGGLE) & ANIMASI
   ========================================================================== */
/* 1. Sembunyikan secara default (Untuk Layar Desktop) */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 22px;
    cursor: pointer;
    z-index: 100000;
    background: transparent;
    border: none;
}

.menu-toggle .bar {
    display: block;
    width: 100%;
    height: 3px;
    background: #ffffff;
    transition: all 0.3s ease-in-out;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

/* 2. Saat menu terbuka (class is-active dipasang oleh JS) -> Jadi Huruf X */
.menu-toggle.is-active .bar:nth-child(1) {
    transform: translateY(9.5px) rotate(45deg);
    background-color: #bd53ff !important;
}

.menu-toggle.is-active .bar:nth-child(2) {
    opacity: 0;
}

.menu-toggle.is-active .bar:nth-child(3) {
    transform: translateY(-9.5px) rotate(-45deg);
    background-color: #bd53ff !important;
}


/* Gaya Tombol Masuk */
.btn-login-nav {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 20px !important;
    background: transparent !important;
    border: 1px solid #bd53ff !important;
    color: #ffffff !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

/* Hover Efek untuk Tombol Masuk */
.btn-login-nav:hover {
    background: #bd53ff !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(189, 83, 255, 0.6) !important;
}

/* Mematikan garis bawah ajaib untuk tombol ini */
.btn-login-nav::after {
    display: none !important;
}

/* Responsif untuk Mobile */
@media screen and (max-width: 768px) {
    .btn-login-nav {
        width: 100% !important;
        justify-content: center !important;
        margin-top: 10px !important;
    }
}

/* 3. KUNCI UTAMA: Paksa Muncul HANYA di Layar HP (Mobile) */
@media screen and (max-width: 768px) {
    .menu-toggle {
        display: flex !important;
    }
}