.sidebar { width: 280px; background-color: var(--sidebar-bg); color: #fff; display: flex; flex-direction: column; position: fixed; height: 100vh; z-index: 100; transition: 0.3s; }
.sidebar-header { padding: 30px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.logo { font-size: 22px; font-weight: 700; color: #fff; letter-spacing: 2px; }
.logo span { color: var(--accent-color); }

.nav-menu { padding: 30px 0; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.nav-item { padding: 15px 30px; display: flex; align-items: center; gap: 15px; font-size: 15px; font-weight: 500; color: #A0A0A0; transition: 0.3s; border-left: 3px solid transparent; }
.nav-item:hover, .nav-item.active { color: #fff; background: rgba(255,255,255,0.03); border-left-color: var(--accent-color); }
.nav-item svg { color: var(--accent-color); opacity: 0.8; transition: 0.3s; }
.nav-item.active svg, .nav-item:hover svg { opacity: 1; }

.sidebar-footer { padding: 20px 30px; border-top: 1px solid rgba(255,255,255,0.05); font-size: 13px; color: #A0A0A0; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: 0.3s; }
.sidebar-footer:hover { color: var(--danger); }



/* Sidebar-ın default vəziyyəti (Sol tərəfdə sabit) */
.sidebar { 
    left: 0; 
    top: 0; 
}

/* Mobil Menyu Düyməsi (Geniş ekranda gizli) */
.mobile-nav-toggle {
    display: none;
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 90;
    background: var(--dark-bg);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
}

/* Mobildə arxa fon qaraltısı */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    z-index: 95;
    opacity: 0;
    transition: 0.3s;
}

/* Mobildə bağlama (X) düyməsi */
.mobile-close {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
}

/* =========================================
   📱 RESPONSIVE (Masaüstü və Mobil fərqi)
   ========================================= */

@media (max-width: 1024px) {
    .mobile-nav-toggle { display: block; }

    .sidebar {
        transform: translateX(-100%); /* Başlanğıcda gizlədirik */
        box-shadow: 10px 0 30px rgba(0,0,0,0.2);
    }

    .sidebar.active {
        transform: translateX(0); /* Açıldıqda görünür */
    }

    .sidebar-overlay.active {
        display: block;
        opacity: 1;
    }

    .sidebar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mobile-close {
        display: block;
    }

    /* Dizayn eyni qalsın deyə paddingləri azacıq tənzimləyirik */
    .sidebar-header { padding: 25px; }
    .nav-item { padding: 15px 25px; }
}

/* Çox kiçik ekranlar üçün sığorta (iPhone SE və s.) */
@media (max-width: 320px) {
    .sidebar {
        width: 250px; /* Ekran çox kiçikdirsə sidebarı da biraz daraldırıq */
    }
}