:root {
    --bg-dark: #0f172a;
    --sidebar-bg: #1e293b;
    --card-bg: #334155;
    --accent: #0ea5e9;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --chat-sent: #059669; /* Gönderilen Mesaj Yeşili */
    --chat-received: #475569; /* Gelen Mesaj Grisi */
}

body { margin: 0; font-family: 'Segoe UI', sans-serif; background-color: var(--bg-dark); color: var(--text-main); overflow: hidden; }

/* Giriş Ekranı */
#auth-container { height: 100vh; display: flex; justify-content: center; align-items: center; background: #0f172a; }
.auth-box { background: var(--sidebar-bg); padding: 40px; border-radius: 16px; width: 350px; text-align: center; border: 1px solid #475569; }
input, select { width: 100%; padding: 12px; margin: 10px 0; background: var(--bg-dark); border: 1px solid #475569; color: white; border-radius: 8px; box-sizing: border-box; }
button.primary-btn { width: 100%; padding: 12px; background: var(--accent); color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; }

/* Dashboard */
#dashboard-layout { display: flex; height: 100vh; }
.sidebar { width: 260px; background: var(--sidebar-bg); padding: 20px; display: flex; flex-direction: column; border-right: 1px solid #334155; }
.menu-item { padding: 12px; margin-bottom: 5px; border-radius: 8px; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; gap: 10px; }
.menu-item:hover, .menu-item.active { background: var(--accent); color: white; }
.main-content { flex: 1; padding: 30px; overflow-y: auto; }

/* Kategoriler ve Videolar */
.category-section { margin-bottom: 40px; }
.category-title { border-bottom: 2px solid var(--accent); padding-bottom: 10px; margin-bottom: 20px; color: var(--accent); font-size: 1.5rem; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.video-card { background: var(--card-bg); border-radius: 12px; overflow: hidden; border: 1px solid #475569; }
.video-thumb { height: 160px; background: #000; }
.card-body { padding: 15px; }

/* ÖZEL MESAJLAŞMA SİSTEMİ */
#msg-layout { display: flex; height: 70vh; gap: 20px; }
#user-list { width: 30%; background: var(--card-bg); border-radius: 12px; overflow-y: auto; padding: 10px; }
#chat-window { width: 70%; background: var(--card-bg); border-radius: 12px; display: flex; flex-direction: column; padding: 10px; }
.user-row { padding: 10px; border-bottom: 1px solid #475569; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.user-row:hover, .user-row.active-chat { background: var(--accent); color: white; border-radius: 8px; }
.status-dot { width: 10px; height: 10px; background: #10b981; border-radius: 50%; }

#chat-history { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.message-bubble { max-width: 70%; padding: 10px 15px; border-radius: 15px; font-size: 0.9rem; }
.msg-sent { background: var(--chat-sent); align-self: flex-end; border-bottom-right-radius: 2px; }
.msg-received { background: var(--chat-received); align-self: flex-start; border-bottom-left-radius: 2px; }