:root {
    --arkaplan: #f0f2f5;
    --yuzey: #ffffff;
    --kenarlik: #dce1e6;
    --golge: rgba(0, 0, 0, 0.1);
    --birincil-renk: #1a73e8;
    --birincil-metin: #202124;
    --ikincil-metin: #5f6368;
    --benim-mesajim-bg: #d9e9ff;
    --onlarin-mesaji-bg: #f1f3f4;
    --benim-mesajim-yazi: #202124; /* YENİ */
    --onlarin-mesaji-yazi: #202124; /* YENİ */
    --font-aile: 'Roboto', sans-serif;
    --online-color: #34a853;
    --offline-color: #bdc1c6;
    --muted-color: #fbbc05;
    --banned-color: #ea4335;
}

.dark-theme {
    --arkaplan: #202124;
    --yuzey: #303134;
    --kenarlik: #3c4043;
    --golge: rgba(0, 0, 0, 0.3);
    --birincil-renk: #8ab4f8;
    --birincil-metin: #e8eaed;
    --ikincil-metin: #bdc1c6;
    --benim-mesajim-bg: #223449;
    --onlarin-mesaji-bg: #3c4043;
    --benim-mesajim-yazi: #e8eaed; /* YENİ */
    --onlarin-mesaji-yazi: #e8eaed; /* YENİ */
}

/* YAZI TİPİ AYARI */
.font-sm .mesaj-balonu { font-size: 0.9rem; }
.font-lg .mesaj-balonu { font-size: 1.1rem; }

/* ANA YAPI */
body { margin: 0; font-family: var(--font-aile); background-color: var(--arkaplan); }
.sohbet-app-material { display: flex; height: 100vh;  overflow: hidden; }

/* KENAR ÇUBUĞU (SIDEBAR) */
.sohbet-sidebar { width: 320px; height: 100%; background-color: var(--yuzey); border-right: 1px solid var(--kenarlik); display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.sidebar-baslik { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--kenarlik); flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; }
.sidebar-baslik h3 { margin: 0; font-size: 1.25rem; color: var(--birincil-metin); }
.sidebar-kapat-btn { display: none; background: none; border: none; color: var(--ikincil-metin); font-size: 1.5rem; cursor: pointer; padding: 0.5rem; line-height: 1; border-radius: 50%; width: 40px; height: 40px; }
.sidebar-kapat-btn:hover { background-color: var(--arkaplan); color: var(--birincil-metin); }
.sidebar-icerik { padding: 1rem; overflow-y: auto; flex-grow: 1; }
.kullanici-grubu h4 { margin: 1.5rem 0 0.75rem 0.5rem; font-size: 0.8rem; color: var(--ikincil-metin); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.kullanici-grubu h4 .toggle-arrow { transition: transform 0.2s; }
.kullanici-grubu h4.collapsed .toggle-arrow { transform: rotate(-90deg); }
.kullanici-listesi { display: flex; flex-direction: column; gap: 0.25rem; }
.kullanici-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; border-radius: 8px; transition: background-color 0.2s; }
.kullanici-item:hover { background-color: var(--arkaplan); }
.durum-noktasi { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.durum-noktasi.online { background-color: var(--online-color); }
.durum-noktasi.offline { background-color: var(--offline-color); }
.durum-noktasi.muted { background-color: var(--muted-color); }
.durum-noktasi.banned { background-color: var(--banned-color); }
.kullanici-adi { font-size: 1rem; font-weight: 500; color: var(--birincil-metin); display: flex; align-items: center; }
.yonetim-butonu { margin-left: auto; background: none; border: none; color: var(--ikincil-metin); cursor: pointer; width: 32px; height: 32px; border-radius: 50%; display: none; align-items: center; justify-content: center; }
.kullanici-item:hover .yonetim-butonu { display: flex; }
.yonetim-butonu:hover { background-color: var(--kenarlik); }
.user-role-badge { margin-right: 6px; font-size: 0.8rem; padding: 2px 6px; border-radius: 4px; font-weight: 700; line-height: 1; }
.user-role-badge.admin { background-color: #ea4335; color: white; }
.user-role-badge.moderator { background-color: #fbbc05; color: #3c2a00; }

/* ANA SOHBET PANELİ */
.sohbet-ana-panel { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--arkaplan); }
.panel-baslik-material { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1.5rem; border-bottom: 1px solid var(--kenarlik); background-color: var(--yuzey); flex-shrink: 0; }
.kanal-bilgisi { flex-grow: 1; }
.kanal-bilgisi h4 { margin: 0; font-size: 1.1rem; color: var(--birincil-metin); }
.kanal-bilgisi p { margin: 0; font-size: 0.8rem; color: var(--ikincil-metin); }
.panel-buton-material { background: none; border: none; color: var(--ikincil-metin); font-size: 1.25rem; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s; }
.panel-buton-material:hover { background-color: var(--arkaplan); }
#mobil-menu-btn { display: none; }

/* MESAJLAR */
.mesajlar-alani { flex-grow: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.25rem; }
.mesaj { display: flex; max-width: 70%; margin-bottom: 0.75rem; align-items: flex-end; }
.mesaj-avatar img { width: 40px; height: 40px; border-radius: 50%; }
.mesaj-icerik { display: flex; flex-direction: column; width: 100%; }
.mesaj-balonu { padding: 0.75rem 1rem; border-radius: 18px; line-height: 1.5; word-wrap: break-word; max-width: 100%; }
.mesaj-meta { font-size: 0.75rem; color: var(--ikincil-metin); padding: 0.25rem 0.5rem; }
.mesaj-benim { align-self: flex-end; }
.mesaj-benim .mesaj-balonu { background-color: var(--benim-mesajim-bg); color: var(--benim-mesajim-yazi); border-bottom-right-radius: 4px; }
.mesaj-benim .mesaj-meta { text-align: right; }
.mesaj-baskasi { align-self: flex-start; }
.mesaj-baskasi .mesaj-balonu { background-color: var(--onlarin-mesaji-bg); color: var(--onlarin-mesaji-yazi); border-bottom-left-radius: 4px; }
.mesaj-baskasi .mesaj-avatar { margin-right: 0.75rem; }
.mesaj-benim .mesaj-avatar { display: none; }
.mesaj-kullanici-adi { font-weight: 700; margin: 0 0 0.25rem 0.5rem; font-size: 0.8rem; color: var(--ikincil-metin); }
.mesaj-benim .mesaj-icerik { align-items: flex-end; } /* YENİ: Kendi mesajlarımızda kullanıcı adını sağa hizala */

/* MESAJ GİRİŞ ALANI */
.mesaj-giris-alani { padding: 1rem 1.5rem; background-color: var(--yuzey); border-top: 1px solid var(--kenarlik); display: flex; align-items: center; gap: 1rem; }
#chat-message-input { flex-grow: 1; resize: none; border: 1px solid var(--kenarlik); border-radius: 24px; padding: 0.75rem 1.25rem; font-size: 1rem; font-family: inherit; line-height: 1.5; background-color: var(--arkaplan); color: var(--birincil-metin); }
#chat-message-input:focus { outline: none; border-color: var(--birincil-renk); box-shadow: 0 0 0 2px color-mix(in srgb, var(--birincil-renk) 20%, transparent); }
#send-chat-message-btn { background-color: var(--birincil-renk); color: white; width: 48px; height: 48px; border: none; border-radius: 50%; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s; flex-shrink: 0; }
#send-chat-message-btn:hover { background-color: color-mix(in srgb, var(--birincil-renk) 80%, black); }

/* MODAL STİLLERİ */
/* ... (Bu bölüm değişmedi) ... */

/* MOBİL GÖRÜNÜM */
@media (max-width: 800px) {
    .sohbet-sidebar { position: fixed; z-index: 1002; transform: translateX(-111%); box-shadow: 0 0 20px var(--golge); border: none; }
    .sohbet-sidebar.acik { transform: translateX(0); }
    .panel-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1001; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
    .panel-overlay.aktif { opacity: 1; visibility: visible; }
    #mobil-menu-btn { display: flex; }
    .sidebar-kapat-btn { display: inline-flex; align-items: center; justify-content: center; }
}
/* ... (Diğer stiller değişmedi) ... */
.sohbet-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1001; display: flex; align-items: center; justify-content: center; }
.sohbet-modal-content { background: var(--yuzey); color: var(--birincil-metin); padding: 2rem; border-radius: 8px; box-shadow: 0 5px 20px var(--golge); width: 90%; max-width: 400px; position: relative; }
.sohbet-modal-content .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.sohbet-modal-content .modal-header h4 { margin: 0; }
.sohbet-modal-content h4 { margin: 0 0 0.5rem 0; font-size: 1.25rem; }
.sohbet-modal-content p { margin: 0 0 1.5rem 0; color: var(--ikincil-metin); }
.sohbet-modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.modal-action-btn { padding: 0.75rem; border: none; border-radius: 6px; color: white; font-weight: 500; font-size: 0.9rem; cursor: pointer; transition: opacity 0.2s; }
.modal-action-btn:hover { opacity: 0.85; }
.modal-action-btn.mute { background-color: var(--muted-color); }
.modal-action-btn.ban { background-color: var(--banned-color); }
.modal-action-btn.unmute, .modal-action-btn.unban { background-color: var(--online-color); }
.modal-close-btn { position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 1.8rem; color: var(--ikincil-metin); cursor: pointer; }
.setting-group { margin-bottom: 1.5rem; text-align: left; }
.setting-group label { display: block; margin-bottom: 0.75rem; color: var(--ikincil-metin); font-weight: 500; font-size: 0.9rem; }
.setting-options { display: flex; gap: 0.75rem; }
.setting-btn { flex: 1; padding: 0.6rem; border: 1px solid var(--kenarlik); background: var(--arkaplan); color: var(--ikincil-metin); border-radius: 6px; cursor: pointer; transition: all 0.2s; }
.setting-btn:hover { border-color: var(--birincil-renk); color: var(--birincil-metin); }
.setting-btn.active { background: var(--birincil-renk); color: white; border-color: var(--birincil-renk); }
.setting-divider { border: none; height: 1px; background-color: var(--kenarlik); margin: 1.5rem 0; }
.setting-switch-wrapper { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; color: var(--birincil-metin); }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--birincil-renk); }
input:checked + .slider:before { transform: translateX(20px); }

/* YENİ: ROL ROZETİ STİLLERİ */

.user-role-badge {
    margin-right: 8px;
    font-size: 1rem;
    line-height: 1;
    /* Renkleri kaldırıyoruz, çünkü ikon kullanacağız */
}

/* Eski Admin ve Mod badge'lerini gizleyebilir veya silebilirsiniz, 
   çünkü artık ikonla göstereceğiz. Şimdilik bırakıyorum. */
.user-role-badge.admin { background-color: transparent; color: inherit; }
.user-role-badge.moderator { background-color: transparent; color: inherit; }

.kullanici-adi .badge-tooltip {
    position: relative;
    display: inline-block;
}

.kullanici-adi .badge-tooltip .tooltip-text {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.kullanici-adi .badge-tooltip .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.kullanici-adi .badge-tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}