/* --- SİDEBAR, KULLANICI LİSTESİ VE SES PANELİ --- */

/* Marka kısmı - logo ortalandı, yazı kaldırıldı */
.brand { 
    margin-bottom: 20px; 
    display: flex; 
    align-items: center; 
    justify-content: center; /* Ortala */
    width: 100%;
}
.site-logo { 
    max-width: 140px; 
    height: 50px; 
    object-fit: contain; 
    filter: drop-shadow(0 2px 10px rgba(14, 165, 233, 0.3)); 
}

/* Ekolayzır */
.eq-bar { display: inline-flex; align-items: flex-end; height: 14px; gap: 3px; margin-left: 10px; }
.eq-bar span { width: 3px; background-color: #38bdf8; border-radius: 2px; animation: eq-bounce 0.4s infinite alternate; box-shadow: 0 0 6px #38bdf8; }
.eq-bar span:nth-child(1) { animation-delay: 0.1s; } .eq-bar span:nth-child(2) { animation-delay: 0.3s; }
.eq-bar span:nth-child(3) { animation-delay: 0.0s; } .eq-bar span:nth-child(4) { animation-delay: 0.2s; }
@keyframes eq-bounce { 0% { height: 4px; } 100% { height: 14px; } }

.radio-eq { display: inline-flex; align-items: center; gap: 3px; margin-left: 10px; height: 18px; }
.radio-eq span { width: 4px; background-color: #60a5fa; border-radius: 2px; animation: radio-bounce 0.5s infinite alternate; box-shadow: 0 0 8px #60a5fa; }
.radio-eq span:nth-child(1) { animation-delay: 0.1s; height: 10px; } .radio-eq span:nth-child(2) { animation-delay: 0.4s; height: 18px; }
.radio-eq span:nth-child(3) { animation-delay: 0.2s; height: 12px; } .radio-eq span:nth-child(4) { animation-delay: 0.5s; height: 16px; }
.radio-eq span:nth-child(5) { animation-delay: 0.3s; height: 14px; }
@keyframes radio-bounce { 0% { transform: scaleY(0.3); opacity: 0.6; } 100% { transform: scaleY(1); opacity: 1; } }

/* Ses kontrol paneli */
.voice-panel { 
    background: rgba(15, 23, 42, 0.5); 
    border: 1px solid rgba(59, 130, 246, 0.15); 
    border-radius: var(--radius-lg); 
    padding: 16px; 
    margin-bottom: 20px; 
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.2), var(--shadow-glass); 
    backdrop-filter: blur(10px); 
}
.room-header-badge { 
    font-size: 16px; 
    font-weight: 700; 
    color: #f8fafc; 
    margin-bottom: 12px; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}
.room-header-badge .hash { color: #38bdf8; opacity: 0.9; }

/* Ses durumu rozeti */
.voice-status-badge { 
    background: rgba(15, 23, 42, 0.6); 
    padding: 10px 12px; /* Biraz daha düşük */
    border-radius: var(--radius-md); 
    font-size: 13px; 
    font-weight: 600; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    margin-bottom: 16px; 
    color: #94a3b8; 
    border: 1px solid rgba(255,255,255,0.05); 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
}

.voice-status-badge.listening { border-color: rgba(56, 189, 248, 0.4); color: #38bdf8; background: rgba(14, 165, 233, 0.1); animation: pulse-cyan 2s infinite; }
.voice-status-badge.speaking { border-color: rgba(37, 99, 235, 0.5); color: #60a5fa; background: rgba(37, 99, 235, 0.15); animation: pulse-royal 2s infinite; }
.voice-status-badge.radio { border-color: rgba(99, 102, 241, 0.4); color: #818cf8; background: rgba(99, 102, 241, 0.1); animation: pulse-indigo 2s infinite; }
.voice-status-badge.muted { border-color: rgba(239, 68, 68, 0.3); color: #f87171; background: rgba(239, 68, 68, 0.1); }

@keyframes pulse-cyan { 0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(56, 189, 248, 0); } 100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); } }
@keyframes pulse-royal { 0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); } }
@keyframes pulse-indigo { 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(99, 102, 241, 0); } 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); } }

.voice-controls { display: flex; flex-direction: column; gap: 8px; } /* Boşluk azaltıldı */

/* Ses butonları - yükseklik azaltıldı */
.voice-btn { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
    padding: 10px; /* Daha düşük yükseklik */
    border-radius: var(--radius-md); 
    border: none; 
    font-size: 13px; /* Biraz daha küçük font */
    font-weight: 600; 
    cursor: pointer; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    background: rgba(30, 41, 59, 0.6); 
    color: #cbd5e1; 
    border: 1px solid rgba(255,255,255,0.05); 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
}
.voice-btn:hover { 
    background: rgba(51, 65, 85, 0.8); 
    color: #fff; 
    transform: translateY(-1px); 
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); 
}
.voice-btn.mic-active { 
    background: rgba(239, 68, 68, 0.15); 
    color: #f87171; 
    border: 1px solid rgba(239, 68, 68, 0.4); 
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.2); 
}
.voice-btn.radio-btn { 
    background: rgba(99, 102, 241, 0.15); 
    color: #818cf8; 
    border: 1px solid rgba(99, 102, 241, 0.4); 
}
.voice-btn.hand-btn { 
    background: rgba(56, 189, 248, 0.15); 
    color: #38bdf8; 
    border: 1px solid rgba(56, 189, 248, 0.4); 
}

/* Mixer kontrolleri */
#mixer-controls { margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(255,255,255,0.1); }
.mixer-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mixer-row label { color: #0aff00; font-size: 11px; width: 60px; font-weight:600; display: flex; align-items: center; gap: 4px; }
.mixer-row input[type=range] { flex: 1; cursor: pointer; height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; outline: none; -webkit-appearance: none; }
.mixer-row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--brand-accent); cursor: pointer; box-shadow: 0 0 5px var(--brand-accent); }
.mixer-row .mute-icon { cursor: pointer; font-size: 16px; transition: transform 0.2s; }
.mixer-row .mute-icon:hover { transform: scale(1.2); }

/* Kullanıcı listesi */
.user-item { display: flex; align-items: center; padding: 8px 10px; border-radius: var(--radius-sm); margin-bottom: 6px; border: 1px solid transparent; transition: all 0.2s ease; cursor: pointer; }
.user-item:hover { background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); transform: translateX(4px); }
.user-avatar { width: 36px; height: 36px; border-radius: var(--radius-sm); background: rgba(30, 41, 59, 0.8); border: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: center; align-items: center; font-weight: 700; color: #e2e8f0; margin-right: 12px; font-size: 14px; position: relative; flex-shrink: 0; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }
.user-item.is-me .user-avatar { background: linear-gradient(135deg, #2563eb, #38bdf8); border: none; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4); }
.online-dot { width: 10px; height: 10px; background: #38bdf8; border-radius: 50%; position: absolute; bottom: -2px; right: -2px; border: 2px solid #0f172a; box-shadow: 0 0 5px rgba(56, 189, 248, 0.5); }
.afk-dot { position: absolute; bottom: -6px; right: -6px; font-size: 12px; background: #0f172a; border-radius: 50%; width: 16px; height: 16px; display: flex; justify-content: center; align-items: center; animation: zzz-bounce 2s infinite ease-in-out; }
@keyframes zzz-bounce { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.1); } }
.user-info-container { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.user-name-text { font-size: 14px; font-weight: 600; color: #f8fafc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.2s; }
.user-item:hover .user-name-text { color: #38bdf8; }
.user-role-text { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.role-badge-admin { color: #38bdf8; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.role-badge-mod { color: #818cf8; font-weight: 700; text-transform: uppercase; }
.user-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }