/* =========================================
   KARARGAH - ANA İSKELET (LAYOUT MD3)
   Sidebar, Topbar ve Duyarlı (Responsive) Yapı
   ========================================= */

/* --- ÖZEL KAYDIRMA ÇUBUĞU (SCROLLBAR) --- */
::-webkit-scrollbar {
    width: 6px;  /* Dikey kaydırma çubuğu inceliği */
    height: 6px; /* Yatay kaydırma çubuğu inceliği */
}
::-webkit-scrollbar-track {
    background: transparent; /* Arka planı gizle */
}
::-webkit-scrollbar-thumb {
    background: var(--md-outline-variant, #534343); 
    border-radius: 10px; /* Yumuşak köşeler */
}
::-webkit-scrollbar-thumb:hover {
    background: var(--md-primary); /* Üzerine gelince IF kırmızısı olsun */
}

body {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background-color: var(--md-bg);
    font-size: 14px; /* Global font boyutu %20 küçültüldü */
}

/* --- MD3 Navigation Drawer (Sidebar) --- */
.sidebar {
    width: 240px; /* 280px'den 240px'e düşürüldü */
    background-color: var(--md-surface);
    display: flex;
    flex-direction: column;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s ease;
    z-index: 1000;
    box-shadow: var(--md-shadow-1);
    border-right: 1px solid var(--md-outline-variant);
}

/* --- Sidebar Header & Logo --- */
.sidebar-header {
    padding: 20px 16px;
    display: flex;
    flex-direction: column; /* Yan yana yerine ALT ALTA diz */
    align-items: center;    /* Yatayda ortala */
    text-align: center;     /* Metni ortala */
    gap: 8px;               /* Logo ve yazı arasındaki boşluğu daralt */
}

/* LOGO FIX: 1:1 zorlaması kaldırıldı, oran korundu */
.sidebar-header .logo { 
    width: auto; 
    height: 32px; 
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

/* Karanlık Modda Logo Filtresi */
[data-theme="dark"] .sidebar-header .logo {
    filter: brightness(0) invert(1);
}

.sidebar-header h2 { 
    font-size: 1.1rem; 
    font-weight: 800; 
    letter-spacing: 2px;
    color: var(--md-primary);
    font-family: 'Montserrat', sans-serif;
    margin: 0;
}

/* --- Sidebar Navigation --- */
.sidebar-nav {
    padding: 8px 0;
    overflow-y: auto;
    overflow-x: hidden; /* EKLENDİ: İçerik darsa sağa-sola kaymayı kesinlikle engeller */
    flex: 1;
}

.nav-title, .nav-category-collapsible {
    font-size: 0.75rem;
    color: var(--md-primary);
    padding: 16px 24px 8px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 2px 12px;
    padding: 10px 16px; /* Padding daraltıldı */
    color: var(--md-on-surface-variant);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: var(--radius-xl);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-item:hover { 
    background-color: var(--md-hover-bg); 
    color: var(--md-primary);
}

.nav-item.active {
    background-color: var(--md-primary-container);
    color: var(--md-on-primary-container);
    box-shadow: none; 
}

.nav-item.active .material-icons-round { 
    color: var(--md-primary); 
}

.nav-item .material-icons-round {
    font-size: 22px;
}

/* Masaüstünde Sidebar'ı daraltmak için bu class'ı kullanacağız */
.sidebar.mini {
    width: 72px;
}

/* 1. Karargah yazısını ve "Oyun Yönetimi" gibi kategori başlıklarını toptan gizle */
.sidebar.mini h2, 
.sidebar.mini .nav-section, 
.sidebar.mini .nav-category-collapsible {
    display: none; 
}

/* 2. Çıplak yazıları (Trivia vb.) gizlemek için font-size sıfırlama hilesi */
.sidebar.mini .nav-item {
    justify-content: center;
    padding: 12px;
    margin: 4px 12px; /* Ortalamayı kusursuz yapmak için margin artırıldı */
    font-size: 0; 
    color: transparent;
    gap: 0; /* EKLENDİ: İkon ile görünmez yazı arasındaki hayalet boşluğu yok eder */
}

/* 3. İkonların kendi boyutunu korumasını sağla */
.sidebar.mini .nav-item .material-icons-round {
    font-size: 24px;
}

/* 4. Alt menülerin sola olan girintilerini sıfırla ki ikonlar ekrandan taşmasın */
.sidebar.mini .nav-submenu {
    margin: 0;
    border-left: none;
    align-items: center; /* İkonları merkeze hizala */
}

.sidebar.mini .sidebar-header .logo {
    height: 20px; /* EKLENDİ: Mini menüde logoyu orantılı şekilde zarifçe küçültür */
    margin-bottom: 0;
}

/* --- Top App Bar (Üst Panel) --- */
.main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--md-bg);
}

.topbar {
    height: 56px; /* 72px'den 56px'e düşürüldü */
    background-color: var(--md-surface);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid var(--md-outline-variant);
    z-index: 100;
}

.topbar-left, .topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

#page-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--md-on-surface);
    letter-spacing: -0.3px;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: var(--radius-xl);
    background: var(--md-surface-variant);
    color: var(--md-on-surface);
    cursor: pointer;
    font-size: 0.85rem;
}

/* --- İçerik Alanı --- */
.content-area {
    flex: 1;
    padding: 20px; /* 32px'den 20px'e düşürüldü */
    overflow-y: auto;
    scroll-behavior: smooth;
}

/* --- Mobil Uyumluluk --- */
.overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    z-index: 999;
}

#mobile-menu-btn { 
    display: none; 
    color: var(--md-on-surface);
}

@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        height: 100%;
        transform: translateX(-100%);
        border-right: none;
        border-radius: 0 24px 24px 0;
        width: 260px; /* Mobilde daralmasına gerek yok */
    }
    .sidebar.open { 
        transform: translateX(0); 
        box-shadow: 10px 0 30px rgba(0,0,0,0.2);
    }
    #mobile-menu-btn { display: flex; }
    #desktop-mini-btn { display: none; }
    .overlay.active { display: block; }
    .content-area { padding: 16px; }
    .topbar { height: 60px; }
}

/* --- Collapsible (Açılır Menü) Mantığı --- */
.nav-category-collapsible {
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-radius: var(--radius-m);
    margin: 4px 12px;
}

.nav-category-collapsible:hover {
    background: var(--md-surface-variant);
}

.nav-category-collapsible .chevron {
    transition: transform 0.3s ease;
}

.nav-category-collapsible.open .chevron {
    transform: rotate(180deg);
}

.nav-submenu {
    display: none;
    flex-direction: column;
    margin: 4px 12px 12px 32px;
    border-left: 2px solid var(--md-outline-variant);
}

.nav-submenu.active {
    display: flex;
}

.nav-submenu .nav-item {
    margin: 2px 0;
    padding: 10px 16px;
}