/* ==========================================================================
   KEYİFBİZDE.COM - BAĞIMSIZ WEB (MASAÜSTÜ / PC) GÖRÜNÜM TASARIMI
   Dosya Yolu: css/kb-web.css
   Kapsam: SADECE html.kb-view-web aktifken çalışır. Mobil görünümü etkilemez.
   Mimari: 3 Sütunlu Modern Masaüstü Paneli (Sol Odalar/Özeller | Orta Geniş Lobi | Sağ Nick Listesi)
   ========================================================================== */

html.kb-view-web {
    --kb-header-h: 52px !important;
    --kb-web-left-w: 244px;
    --kb-web-right-w: 230px;
    --kb-web-topic-h: 34px;
    --kb-editor-h: 50px !important;
    --kb-pm-header-h: 54px !important;
}
html.kb-view-web body.kb-web-left-collapsed { --kb-web-left-w: 0px; }
html.kb-view-web body.kb-user-closed-nick,
html.kb-view-web body.kb-status-mode { --kb-web-right-w: 0px; }
html.kb-view-web body.kb-topic-collapsed { --kb-web-topic-h: 24px; }
html.kb-view-web body.kb-private-mode.kb-pm-is-admin { --kb-pm-header-h: 78px !important; }

/* Giriş Ekranı Masaüstü Ferah Kart Düzeni */
html.kb-view-web .acilis .overlay { max-width: 455px !important; }
html.kb-view-web .kb-login-box { padding: 34px 32px 28px 32px !important; border-radius: 28px !important; }

/* ==========================================================================
   1. WEB ÜST BAR (.header) - TAM DONANIMLI MASAÜSTÜ KONTROL ŞERİDİ
   ========================================================================== */
html.kb-view-web .header {
    height: var(--kb-header-h) !important;
    min-height: var(--kb-header-h) !important;
    max-height: var(--kb-header-h) !important;
    padding: 0 12px !important;
    gap: 8px !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06) !important;
}

html.kb-view-web #radioMobileToggle.kb-creative-radio { display: none !important; }

html.kb-view-web #hmenu.kb-elite-menu-btn {
    display: inline-flex !important;
    height: 32px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
}

html.kb-view-web .kb-theme-dropdown-menu {
    left: 148px !important;
}

html.kb-view-web #kbWebSidebarBtn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    flex: 0 0 auto !important;
    height: 32px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #1e1b4b 0%, #3730a3 55%, #4f46e5 100%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
    color: #ffffff !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(55, 48, 163, 0.28) !important;
    transition: transform 0.15s ease, opacity 0.15s ease !important;
}
html.kb-view-web #kbWebSidebarBtn:hover { transform: translateY(-1px) !important; }

html.kb-view-web .header .topbar-left,
html.kb-view-web .header .topbar-right {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
}

html.kb-view-web #kbDesktopRadioBtn.kb-radio-pill {
    display: inline-flex !important;
    height: 32px !important;
    max-height: 32px !important;
    padding: 0 10px 0 5px !important;
}

html.kb-view-web .header .pc-radio-volume {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 114px !important;
    height: 32px !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
}
html.kb-view-web .header .pc-radio-volume i {
    font-size: 12px !important;
    flex: 0 0 auto !important;
}
html.kb-view-web .header .pc-radio-volume .radio-volume-range {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 76px !important;
    margin: 0 !important;
}

/* Web Görünümünde Ortak Bento Popover Menü Konumlandırması */
html.kb-view-web body.kb-popover-menu-open .header .topbar-center {
    top: calc(var(--kb-header-h) + 6px) !important;
    left: 12px !important;
    width: 300px !important;
}

html.kb-view-web #kbQuickViewSwitchBtn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    height: 30px !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #334155 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}
html.kb-view-web #kbQuickViewSwitchBtn:hover {
    background: #eef2ff !important;
    border-color: #818cf8 !important;
    color: #4338ca !important;
}

/* ==========================================================================
   2. WEB SOL SÜTUN (.pencereler) - SABİT ODALAR (#KANALLAR) VE AÇIK ÖZELLER
   ========================================================================== */
html.kb-view-web .pencereler {
    position: fixed !important;
    top: var(--kb-header-h) !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: var(--kb-web-left-w) !important;
    height: auto !important;
    padding: 8px 6px 12px 6px !important;
    margin: 0 !important;
    background: var(--kb-bg) !important;
    border: none !important;
    border-right: 1px solid var(--kb-border) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 25 !important;
    transition: width 0.2s ease, transform 0.2s ease !important;
}
html.kb-view-web body.kb-web-left-collapsed .pencereler {
    width: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
}

html.kb-view-web .pencereler > .baslik {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: #4f46e5 !important;
    padding: 4px 8px !important;
    margin: 0 !important;
}

html.kb-view-web .pencereler .kanallar {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    background: #ffffff !important;
    border: 1px solid var(--kb-border) !important;
    border-radius: 14px !important;
    padding: 6px !important;
    margin: 2px 2px 10px 2px !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04) !important;
    flex: 0 0 auto !important;
}

html.kb-view-web .pencereler .kanallar .kanal {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 30px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease !important;
}
html.kb-view-web .pencereler .kanallar .kanal:hover {
    background: #eef2ff !important;
    border-color: #c7d2fe !important;
    transform: translateX(2px) !important;
}
html.kb-view-web .pencereler .kanallar .kanal .kanalname {
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: inherit !important;
}
html.kb-view-web .pencereler .kanallar .kanal .kapat {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0.55 !important;
    font-size: 10px !important;
    padding: 2px 5px !important;
    border-radius: 6px !important;
    margin-left: 4px !important;
}
html.kb-view-web .pencereler .kanallar .kanal .kapat:hover {
    opacity: 1 !important;
    background: rgba(239, 68, 68, 0.16) !important;
    color: #dc2626 !important;
}
html.kb-view-web .pencereler .kanallar .kanal.kactive {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 55%, #7c3aed 100%) !important;
    border-color: #4338ca !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(79, 70, 229, 0.28) !important;
}
html.kb-view-web .pencereler .kanallar .kanal.kactive .kanalname,
html.kb-view-web .pencereler .kanallar .kanal.kactive .kapat { color: #ffffff !important; }

/* Sol Sütun Alt Bölüm: Açık Özel Sohbetler Listesi */
html.kb-view-web .pencereler .mobilozeller {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 4px 6px !important;
    margin: 2px 2px 4px 2px !important;
    border-bottom: 1px solid var(--kb-border) !important;
}
html.kb-view-web .pencereler .mobilozeller .part1 { flex: 0 1 auto !important; }
html.kb-view-web .pencereler .mobilozeller .part1 p {
    margin: 0 !important;
    padding: 2px 4px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #4f46e5 !important;
}
html.kb-view-web .pencereler .mobilozeller .part1 p.okapat {
    padding: 3px 8px !important;
    border-radius: 999px !important;
    background: #ffe4e6 !important;
    border: 1px solid #fecdd3 !important;
    color: #be123c !important;
    font-size: 10px !important;
    cursor: pointer !important;
}

html.kb-view-web .pencereler .ozeller {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: #ffffff !important;
    border: 1px solid var(--kb-border) !important;
    border-radius: 14px !important;
    padding: 6px !important;
    margin: 0 2px !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04) !important;
}

html.kb-view-web .pencereler .ozeller .mobilkapat {
    display: block !important;
    width: 100% !important;
    margin-bottom: 4px !important;
    padding-bottom: 4px !important;
    border-bottom: 1px dashed #e2e8f0 !important;
    background: transparent !important;
}
html.kb-view-web .pencereler .ozeller .mobilkapat .ozellerikapat {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 100% !important;
    height: 26px !important;
    border-radius: 8px !important;
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: #dc2626 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}
html.kb-view-web .pencereler .ozeller .mobilkapat .ozellerikapat:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
}

html.kb-view-web .pencereler .ozeller .ozel {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 30px !important;
    padding: 0 9px !important;
    margin: 0 !important;
    border-radius: 9px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}
html.kb-view-web .pencereler .ozeller .ozel:hover { background: #eef2ff !important; border-color: #c7d2fe !important; }
html.kb-view-web .pencereler .ozeller .ozel.oactive {
    background: linear-gradient(135deg, #0284c7 0%, #4f46e5 100%) !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
}
html.kb-view-web .pencereler .ozeller .ozel.oactive .ozelname,
html.kb-view-web .pencereler .ozeller .ozel.oactive .kapat { color: #ffffff !important; }
html.kb-view-web .pencereler .ozeller .ozel .kapat {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 6px !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    opacity: 0.7 !important;
}
html.kb-view-web .pencereler .ozeller .ozel .kapat:hover {
    opacity: 1 !important;
    background: rgba(239, 68, 68, 0.2) !important;
    color: #dc2626 !important;
}

/* Masaüstü Sağ Üst Yüzen Profil & Arkadaşlar Paneli (.solbar) */
html.kb-view-web .solbar {
    display: none;
    position: fixed !important;
    top: calc(var(--kb-header-h) + 6px) !important;
    right: 12px !important;
    left: auto !important;
    width: 310px !important;
    height: auto !important;
    max-height: calc(100vh - var(--kb-header-h) - 18px) !important;
    overflow-y: auto !important;
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.28) !important;
    padding: 8px !important;
    z-index: 99998 !important;
}

/* ==========================================================================
   3. WEB ORTA SÜTUN - TOPIC BARI (.topicbolum) VE GENİŞ SOHBET ALANI (.msg)
   ========================================================================== */
html.kb-view-web .topicbolum {
    position: fixed !important;
    top: var(--kb-header-h) !important;
    left: var(--kb-web-left-w) !important;
    right: var(--kb-web-right-w) !important;
    width: auto !important;
    height: var(--kb-web-topic-h) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 44px 0 14px !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--kb-border) !important;
    background: linear-gradient(90deg, #fff7ed 0%, #f8fafc 60%, #f1f5f9 100%) !important;
    cursor: pointer !important;
    user-select: none !important;
    z-index: 15 !important;
    transition: left 0.2s ease, right 0.2s ease, height 0.2s ease !important;
    overflow: hidden !important;
}

html.kb-view-web .topicbolum .baslik {
    font-size: 12.5px !important;
    font-weight: 800 !important;
    color: #b45309 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
}
html.kb-view-web .topicbolum .kb-topic-caret { font-size: 10px !important; color: #d97706 !important; transition: transform 0.25s ease !important; }
html.kb-view-web .topicbolum .tcol-2 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 10px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
html.kb-view-web .topicbolum .tcol-3 { flex: 0 0 auto !important; font-size: 14px !important; color: #6366f1 !important; padding: 0 6px !important; }
html.kb-view-web body.kb-topic-expanded .topicbolum {
    height: auto !important;
    min-height: var(--kb-web-topic-h) !important;
    max-height: 44dvh !important;
    overflow-y: auto !important;
    align-items: flex-start !important;
    padding-top: 8px !important;
    padding-bottom: 10px !important;
    z-index: 65 !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22) !important;
}
html.kb-view-web body.kb-topic-expanded .topicbolum .kb-topic-caret { transform: rotate(180deg) !important; }
html.kb-view-web body.kb-topic-expanded .topicbolum .tcol-2,
html.kb-view-web body.kb-topic-expanded .topicbolum .topic {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    line-height: 1.5 !important;
}
html.kb-view-web body.kb-status-mode .topicbolum,
html.kb-view-web body.kb-private-mode .topicbolum { display: none !important; }

/* Masaüstü Ana Sohbet Sahnesi (.msg) */
html.kb-view-web .msg {
    position: fixed !important;
    top: calc(var(--kb-header-h) + var(--kb-web-topic-h)) !important;
    bottom: var(--kb-editor-h) !important;
    left: var(--kb-web-left-w) !important;
    right: var(--kb-web-right-w) !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: var(--kb-bg) !important;
    overflow: hidden !important;
    z-index: 5 !important;
    transition: left 0.2s ease, right 0.2s ease, top 0.2s ease !important;
}
html.kb-view-web body.kb-status-mode .msg { top: var(--kb-header-h) !important; }
html.kb-view-web .msg .kanal:not(.mactive) { display: none !important; }
html.kb-view-web .msg .kanal.mactive {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 10px 16px 16px 16px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
html.kb-view-web .msg .kanal .mesaj,
html.kb-view-web .msg .kanal .mesajsekil,
html.kb-view-web .msg .kanal .notice,
html.kb-view-web .msg .kanal .action {
    padding: 3.5px 8px !important;
    font-size: 13.8px !important;
    line-height: 1.44 !important;
    border-radius: 6px !important;
}
html.kb-view-web .msg .kanal .mesajsekil:hover { background: rgba(99, 102, 241, 0.05) !important; }
html.kb-view-web .msg .kanal .nick,
html.kb-view-web .msg .mesajsekil .nick,
html.kb-view-web .msg .kanal .nick *,
html.kb-view-web .msg .mesajsekil .nick * { font-size: 13.8px !important; }

/* Masaüstü Ekran & Akış Kilidi (#scrollLockBtn) */
html.kb-view-web .scrolllock-floating {
    position: absolute !important;
    top: 8px !important;
    right: 16px !important;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: 27px !important;
    padding: 0 10px !important;
    gap: 5px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #334155 !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.12) !important;
    z-index: 55 !important;
    cursor: pointer !important;
    user-select: none !important;
}
html.kb-view-web body.kb-radyo-room-active .scrolllock-floating { top: 48px !important; }
html.kb-view-web .scrolllock-floating.active { background: linear-gradient(135deg, #dc2626, #e11d48) !important; border-color: #fecdd3 !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(225, 29, 72, 0.38) !important; }

/* ==========================================================================
   4. WEB ÖZEL SOHBET MODU (TEK SATIRLI FERAH MASAÜSTÜ PM BARI)
   ========================================================================== */
html.kb-view-web body.kb-private-mode .kb-pm-topbar {
    position: fixed !important;
    top: var(--kb-header-h) !important;
    left: var(--kb-web-left-w) !important;
    right: var(--kb-web-right-w) !important;
    width: auto !important;
    height: var(--kb-pm-header-h) !important;
    padding: 0 14px !important;
    background: linear-gradient(90deg, #ffffff 0%, #f5f3ff 55%, #fdf2f8 100%) !important;
    border-bottom: 1px solid var(--kb-border) !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    z-index: 30 !important;
    box-sizing: border-box !important;
}

html.kb-view-web .kb-pm-row-top {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    height: 48px !important;
}
html.kb-view-web .kb-pm-back-btn {
    height: 30px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    background: #eef2ff !important;
    border: 1px solid #c7d2fe !important;
    color: #4338ca !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    cursor: pointer !important;
}
html.kb-view-web .kb-pm-user {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    padding: 3px 10px 3px 4px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid #e2e8f0 !important;
}
html.kb-view-web .kb-pm-user img { width: 30px !important; height: 30px !important; border-radius: 50% !important; object-fit: cover !important; border: 2px solid #7c3aed !important; }
html.kb-view-web .kb-pm-user-info { display: flex !important; align-items: center !important; gap: 6px !important; }
html.kb-view-web .kb-pm-user-info #kbPmNick { font-size: 14px !important; font-weight: 900 !important; color: #1e1b4b !important; }
html.kb-view-web .kb-pm-user-info small {
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #15803d !important;
    background: #dcfce7 !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
}

html.kb-view-web .kb-pm-close-top {
    order: 99 !important;
    height: 30px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    background: #fee2e2 !important;
    border: 1px solid #fca5a5 !important;
    color: #dc2626 !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    cursor: pointer !important;
}

html.kb-view-web .kb-pm-row-bottom {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex: 0 1 auto !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}
html.kb-view-web .kb-pm-btn {
    height: 30px !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #334155 !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: transform 0.12s ease !important;
}
html.kb-view-web .kb-pm-btn:hover { transform: translateY(-1px) !important; }
html.kb-view-web .kb-pm-btn.call { background: #dcfce7 !important; color: #15803d !important; border-color: #86efac !important; }
html.kb-view-web .kb-pm-btn.cam  { background: #dbeafe !important; color: #1d4ed8 !important; border-color: #93c5fd !important; }
html.kb-view-web .kb-pm-btn.conf { background: #fef3c7 !important; color: #b45309 !important; border-color: #fcd34d !important; }
html.kb-view-web .kb-pm-btn.game { background: #ecfdf5 !important; color: #047857 !important; border-color: #6ee7b7 !important; }
html.kb-view-web .kb-pm-btn.like { background: #ffe4e6 !important; color: #e11d48 !important; border-color: #fda4af !important; }
html.kb-view-web .kb-pm-btn.more { background: linear-gradient(135deg, #4f46e5, #7c3aed) !important; color: #ffffff !important; border: none !important; }

html.kb-view-web body.kb-private-mode .msg { top: calc(var(--kb-header-h) + var(--kb-pm-header-h)) !important; }

html.kb-view-web .msg .kullanicimenu {
    display: none !important;
    position: fixed !important;
    top: calc(var(--kb-header-h) + var(--kb-pm-header-h) + 6px) !important;
    right: calc(var(--kb-web-right-w) + 12px) !important;
    width: 240px !important;
    max-height: calc(100vh - var(--kb-header-h) - var(--kb-pm-header-h) - var(--kb-editor-h) - 16px) !important;
    overflow-y: auto !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.25) !important;
    z-index: 4200 !important;
}
html.kb-view-web body.kb-private-mode .msg .kullanicimenu.kb-card-open { display: block !important; }
html.kb-view-web .msg .kullanicimenu ul { width: 100% !important; padding: 14px !important; margin: 0 !important; background: transparent !important; }

/* ==========================================================================
   5. WEB SAĞ SÜTUN (.nickler) - GENİŞ VE OKUNAKLI MASAÜSTÜ NICK LİSTESİ
   ========================================================================== */
html.kb-view-web body:not(.kb-status-mode):not(.kb-user-closed-nick) .nickler {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: var(--kb-header-h) !important;
    right: 0 !important;
    left: auto !important;
    bottom: calc(var(--kb-editor-h) + 34px) !important;
    width: var(--kb-web-right-w) !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--kb-bg) !important;
    border: none !important;
    border-left: 1px solid var(--kb-border) !important;
    z-index: 25 !important;
}
html.kb-view-web body.kb-user-closed-nick .nickler,
html.kb-view-web body.kb-status-mode .nickler,
html.kb-view-web .nickler .kenarakaydir { display: none !important; }

html.kb-view-web .nickler .baslik {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    height: 36px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid var(--kb-border) !important;
    flex: 0 0 36px !important;
}
html.kb-view-web .nickler .baslik p {
    margin: 0 !important;
    font-size: 11.5px !important;
    font-weight: 900 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #4f46e5 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

html.kb-view-web .nickler .mobilkanalinc {
    position: absolute !important;
    top: 7px !important;
    right: 36px !important;
    left: auto !important;
    bottom: auto !important;
    background: linear-gradient(135deg, #ff7a00 0%, #ea580c 100%) !important;
    color: #ffffff !important;
    border: 1.5px solid #ffffff !important;
    border-radius: 999px !important;
    padding: 0 8px !important;
    min-width: 28px !important;
    height: 21px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(234, 88, 12, 0.3) !important;
    z-index: 10 !important;
}
html.kb-view-web .nickler .mobilkanalinc span { font-size: 10.5px !important; font-weight: 900 !important; color: #ffffff !important; }

/* Masaüstü Sağ Sütun Aç/Kapat K <-> B Butonu */
html.kb-view-web #kbNickToggleBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    top: calc(var(--kb-header-h) + 6px) !important;
    right: 8px !important;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    border-radius: 7px !important;
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 55%, #7c3aed 100%) !important;
    border: 1.5px solid #ffffff !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.32) !important;
    z-index: 27 !important;
    cursor: pointer !important;
}
html.kb-view-web body.kb-status-mode #kbNickToggleBtn { display: none !important; }
html.kb-view-web #kbNickToggleBtn .kb-k-mark {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}
html.kb-view-web #kbNickToggleBtn .kb-k-mark .kb-char-k,
html.kb-view-web #kbNickToggleBtn .kb-k-mark .kb-char-b {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.35s ease, opacity 0.25s ease !important;
}
html.kb-view-web #kbNickToggleBtn .kb-k-mark .kb-char-k { opacity: 1 !important; color: #fde047 !important; }
html.kb-view-web #kbNickToggleBtn .kb-k-mark .kb-char-b { opacity: 0 !important; color: #ffffff !important; }
html.kb-view-web body.kb-user-closed-nick #kbNickToggleBtn { background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important; }
html.kb-view-web body.kb-user-closed-nick #kbNickToggleBtn .kb-k-mark .kb-char-k { opacity: 0 !important; }
html.kb-view-web body.kb-user-closed-nick #kbNickToggleBtn .kb-k-mark .kb-char-b { opacity: 1 !important; }

html.kb-view-web .nickler .nicktara {
    position: relative !important;
    inset: auto !important;
    width: calc(100% - 16px) !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 7px 8px 5px 8px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 32px !important;
    flex-shrink: 0 !important;
    z-index: 3 !important;
}
html.kb-view-web .nickler .nicktara:focus-within { border-color: #6366f1 !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16) !important; }
html.kb-view-web .nickler .nicktara span i { color: #6366f1 !important; font-size: 12px !important; }
html.kb-view-web .nickler .nicktara input[type="text"] {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    width: 100% !important;
    padding: 0 !important;
    height: 100% !important;
}

html.kb-view-web .nickler #kbNickStoryBar.kb-nick-story-bar {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 66px !important;
    height: auto !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    padding: 7px 8px 6px 8px !important;
    margin: 0 !important;
    z-index: 2 !important;
}

html.kb-view-web .nickler ul:not(.nactive) { display: none !important; }
html.kb-view-web .nickler ul.nactive {
    display: block !important;
    position: relative !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 0% !important;
    padding: 4px 8px 18px 8px !important;
    margin: 0 !important;
    border: none !important;
    border-top: 1px solid var(--kb-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

html.kb-view-web .nickler ul li.nick {
    height: 31px !important;
    min-height: 31px !important;
    max-height: 31px !important;
    padding: 0 8px !important;
    margin: 3px 0 !important;
    border-radius: 9px !important;
    cursor: pointer !important;
    transition: transform 0.12s ease, border-color 0.12s ease !important;
}
html.kb-view-web .nickler ul li.nick:hover { border-color: #a5b4fc !important; transform: translateX(-2px) !important; }
html.kb-view-web .nickler ul li.nick span.isim { font-size: 12.5px !important; line-height: 29px !important; height: 29px !important; }

/* ==========================================================================
   6. WEB ALT YAZI BARI (.editor) & SAĞ ALT (+ A -) KUTUSU
   ========================================================================== */
html.kb-view-web .editor {
    position: fixed !important;
    bottom: 0 !important;
    left: var(--kb-web-left-w) !important;
    right: 0 !important;
    width: auto !important;
    height: var(--kb-editor-h) !important;
    z-index: 45 !important;
    transition: left 0.2s ease !important;
}
html.kb-view-web .editor:has(#kbTextStylePopup:not([style*="none"]), .emojionearea-button.active, #kbMentionPopup:not([style*="none"])) {
    z-index: 9200 !important;
}

html.kb-view-web .editor #kbLeftTabBtn.kb-classic-tab-btn {
    width: 40px !important;
    height: 38px !important;
    font-size: 14.5px !important;
}

html.kb-view-web .editor .co-alt .kb-editor-input-col,
html.kb-view-web .editor #inputmsg,
html.kb-view-web .emojionearea.emojionearea-inline {
    height: 38px !important;
}

html.kb-view-web .emojionearea.emojionearea-inline > .emojionearea-editor {
    line-height: 35px !important;
}

html.kb-view-web .editor #kbBarStyleBtn.kb-bar-style-btn {
    height: 38px !important;
    padding: 0 13px !important;
    font-size: 14px !important;
}

html.kb-view-web .editor #inputgonder {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
}

html.kb-view-web .kb-font-zoom-bar {
    width: var(--kb-web-right-w) !important;
    min-width: 114px !important;
    height: 34px !important;
    border-top-left-radius: 12px !important;
}

/* Masaüstünde Yardımcı Alt Barların Orta Sütuna Hizalanması */
html.kb-view-web :is(.quote-box, .kb-edit-bar, .kb-autoword-bar) {
    left: calc(var(--kb-web-left-w) + 8px) !important;
    right: calc(var(--kb-web-right-w) + 8px) !important;
    width: auto !important;
}
html.kb-view-web .kb-mention-popup { left: calc(var(--kb-web-left-w) + 14px) !important; }
html.kb-view-web :is(.kb-text-style-popup, #kbTextStylePopup) {
    right: calc(var(--kb-web-right-w) + 10px) !important;
    bottom: calc(var(--kb-editor-h) + 8px) !important;
    width: 280px !important;
}
html.kb-view-web body:is(.kb-private-mode, .kb-status-mode, .kb-user-closed-nick) :is(.kb-text-style-popup, #kbTextStylePopup) {
    right: 12px !important;
}
html.kb-view-web #kbTextStylePopup .kb-ts-list { max-height: 360px !important; }

/* Koyu Temalarda (Tam Koyu & Gece Modu Lacivert) Masaüstü Tüm Panellerin Kusursuz Uyumu */
html.kb-view-web body:is(.kb-theme-dark, .kb-theme-night) :is(.pencereler > .baslik, .pencereler .mobilozeller .part1 p:not(.okapat), .nickler .baslik p) {
    color: #93c5fd !important;
}
html.kb-view-web body:is(.kb-theme-dark, .kb-theme-night) .pencereler :is(.kanallar, .ozeller) {
    background: rgba(22, 32, 54, 0.88) !important;
    border-color: #293856 !important;
}
html.kb-view-web body:is(.kb-theme-dark, .kb-theme-night) .pencereler :is(.kanallar .kanal:not(.kactive), .ozeller .ozel:not(.oactive)) {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
html.kb-view-web body:is(.kb-theme-dark, .kb-theme-night) .pencereler :is(.kanallar .kanal:not(.kactive):hover, .ozeller .ozel:not(.oactive):hover) {
    background: #263552 !important;
    border-color: #60a5fa !important;
}
html.kb-view-web body:is(.kb-theme-dark, .kb-theme-night) .pencereler .ozeller .ozel:not(.oactive) :is(.ozelname, .kapat) {
    color: #e2e8f0 !important;
}
html.kb-view-web body:is(.kb-theme-dark, .kb-theme-night) .pencereler .ozeller .mobilkapat { border-bottom-color: #293856 !important; }
html.kb-view-web body:is(.kb-theme-dark, .kb-theme-night) :is(.pencereler .mobilozeller .part1 p.okapat, .pencereler .ozeller .mobilkapat .ozellerikapat) {
    background: #2d1222 !important;
    border-color: rgba(244, 63, 94, 0.48) !important;
    color: #fda4af !important;
}
html.kb-view-web body:is(.kb-theme-dark, .kb-theme-night) .topicbolum {
    background: linear-gradient(90deg, #162036 0%, #1e293b 60%, #19243b 100%) !important;
    border-bottom-color: #293856 !important;
    color: #e2e8f0 !important;
}
html.kb-view-web body:is(.kb-theme-dark, .kb-theme-night) .topicbolum .baslik { color: #60a5fa !important; }
html.kb-view-web body:is(.kb-theme-dark, .kb-theme-night) .topicbolum :is(.kb-topic-caret, .tcol-3) { color: #93c5fd !important; }
html.kb-view-web body:is(.kb-theme-dark, .kb-theme-night) .msg .kanal :is(.mesaj, .mesajsekil):hover { background: rgba(96, 165, 250, 0.08) !important; }
html.kb-view-web body:is(.kb-theme-dark, .kb-theme-night) .scrolllock-floating:not(.active) {
    background: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important;
}
html.kb-view-web body:is(.kb-theme-dark, .kb-theme-night) .nickler .nicktara {
    background: #19243b !important; border-color: #334155 !important;
}
html.kb-view-web body:is(.kb-theme-dark, .kb-theme-night) .nickler .nicktara span i { color: #60a5fa !important; }
html.kb-view-web body:is(.kb-theme-dark, .kb-theme-night) .nickler .nicktara input[type="text"] { color: #f1f5f9 !important; }
html.kb-view-web body:is(.kb-theme-dark, .kb-theme-night).kb-private-mode .kb-pm-topbar {
    background: linear-gradient(90deg, #111a2e 0%, #19243b 55%, #1e1b4b 100%) !important;
    border-bottom-color: #293856 !important;
}
html.kb-view-web body:is(.kb-theme-dark, .kb-theme-night) .kb-pm-user { background: rgba(30, 41, 59, 0.85) !important; border-color: #334155 !important; }
html.kb-view-web body:is(.kb-theme-dark, .kb-theme-night) .kb-pm-user-info #kbPmNick { color: #f8fafc !important; }
html.kb-view-web body:is(.kb-theme-dark, .kb-theme-night) .kb-pm-back-btn { background: #1e293b !important; border-color: #3b82f6 !important; color: #93c5fd !important; }
html.kb-view-web body:is(.kb-theme-dark, .kb-theme-night) .kb-pm-btn:not(.more) { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; }
html.kb-view-web body:is(.kb-theme-dark, .kb-theme-night) :is(.solbar, .msg .kullanicimenu) {
    background: #162036 !important; border-color: #334155 !important; color: #f1f5f9 !important;
}