/* Ana Sayfa Düzeni ve Font Ayarları */
body { 
    background-color: #f4f6f9; 
    font-family: 'Segoe UI', sans-serif; 
    overflow-x: hidden; 
}

/* Sol Menü (Sidebar) Tasarımı */
#sidebar { 
    min-width: 260px; 
    max-width: 260px; 
    min-height: 100vh; 
    background: #2c3e50; 
    color: #fff; 
    transition: all 0.3s; 
}

#sidebar .sidebar-header { 
    padding: 20px; 
    background: #1a252f; 
    text-align: center; 
}

#sidebar ul.components { 
    padding: 20px 0; 
    border-bottom: 1px solid #4f5d73; 
}

#sidebar ul li a { 
    padding: 12px 20px; 
    font-size: 1.1rem; 
    display: block; 
    color: #a5b1c2; 
    text-decoration: none; 
    transition: 0.2s; 
}

#sidebar ul li a:hover, 
#sidebar ul li.active > a { 
    color: #fff; 
    background: #34495e; 
    border-left: 4px solid #3498db; 
}

#sidebar ul li a i { 
    margin-right: 10px; 
    width: 20px; 
    text-align: center; 
}

/* Sağ İçerik Alanı (Content) */
#content { 
    width: 100%; 
    padding: 30px; 
    transition: all 0.3s; 
}

/* Kart Tasarımları */
.card { 
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); 
    border: none; 
    border-radius: 8px; 
}

/* Dahili Listesi Satır Ayarları */
.ext-item-row { 
    display: flex; 
    align-items: center; 
    padding: 6px 12px; 
    border-bottom: 1px solid #edf2f7; 
    transition: 0.2s; 
}

.ext-item-row:hover { 
    background-color: #f8fafc; 
}

.ext-click-area { 
    flex-grow: 1; 
    background: none; 
    border: none; 
    text-align: left; 
    font-weight: 600; 
    color: #4a5568; 
    padding: 4px 0; 
}

/* Ses Kodekleri Kutusu */
.codec-box { 
    max-height: 140px; 
    overflow-y: auto; 
    border: 1px solid #dee2e6; 
    padding: 10px; 
    border-radius: 6px; 
    background: #fff; 
}

.badge-codec { 
    font-size: 0.8rem; 
    margin-right: 4px; 
    margin-bottom: 4px; 
}

/* Sağ Alt Bildirim (Toast) Konumlandırması */
.toast-container { 
    width: max-content !important; 
    left: auto !important; 
    pointer-events: none; 
}

.toast { 
    pointer-events: auto; 
}

.help-tooltip { 
    cursor: help; 
    border-bottom: 1px dotted #a0aec0; 
}

/* 🎯 Yeni Şifre Üretildiğinde Input Alanının Parlama Animasyonu */
.password-flash {
    animation: inputFlash 0.4s ease-in-out; 
    border-color: #3498db !important; 
    box-shadow: 0 0 8px rgba(52, 152, 219, 0.6) !important;
}

@keyframes inputFlash {
    0% { border-color: #dee2e6; box-shadow: none; }
    50% { border-color: #2ecc71; box-shadow: 0 0 10px rgba(46, 204, 113, 0.8); }
    100% { border-color: #3498db; box-shadow: 0 0 8px rgba(52, 152, 219, 0.6); }
}