/* =====================================================================
   eSohbet Önizleme Teması — KULLANICI LİSTESİ TASARIMI
   Kaynak  : /esohbet_onizleme/  (main.chunk.css)
   Hedef   : control/chat.php + system/panel/user_list.php
   Tema    : Ana sohbetin KOYU (dark) arkaplanına uygun varsayılan değerler.
   Kontrol : main.css / colors.css ile sınıf ÇAKIŞMASI YOK.
   ===================================================================== */

/* ---- [UL-1] Dikey flex konteyner (panel akışına uyumlu) --------- */
.sidebar-content-vertical-flex-container{display:flex;flex-direction:column;width:100%;position:relative}

/* ---- [UL-2] Üst seçim menüsü (Arkadaş / Takip / Herkes) ---------- */
.selection-menu{width:100%;display:flex;flex-direction:row;padding-left:16px;padding-right:16px;margin-top:16px;margin-bottom:8px}
.selection-menu .selection-item{flex:auto 1;text-align:center;background:#151f2b;padding-top:8px;padding-bottom:8px;font-size:.8rem;color:#fff;cursor:pointer;border-top:1px solid hsla(0,0%,100%,.13);border-bottom:1px solid hsla(0,0%,100%,.13);border-right:1px solid hsla(0,0%,100%,.13)}
.selection-menu .selection-item:first-child{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem;border-left:1px solid hsla(0,0%,100%,.13)}
.selection-menu .selection-item:last-child{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}
.selection-menu .selection-item.active,.selection-menu .selection-item:hover{background:#252f3b;color:#fff}
.selection-menu .selection-item.active{font-weight:700}

/* ---- [UL-3] Kullanıcı sayısı rozeti ----------------------------- */
.user-count-badge{display:inline;border:1px solid hsla(0,0%,100%,.13);color:#bbb;padding:0 4px;border-radius:.25rem;margin-left:4px}
.user-count-badge.ucb-red{background:#e53935;color:#fff}

/* ---- [UL-4] Arama / filtre alanı -------------------------------- */
.filter-area{margin-left:16px;margin-right:16px;position:relative;margin-bottom:8px}
.filter-area.margin-top{margin-top:16px}
.filter-area .user-search-input{width:100%;background:#151f2b;border:1px solid hsla(0,0%,100%,.13);color:#fff;border-radius:.5rem;padding:9px 10px 9px 34px;font-size:.85rem;outline:none;box-sizing:border-box;transition:border-color .2s ease}
.filter-area .user-search-input:focus{border-color:#11a6f3}
.filter-area .user-search-input::placeholder{color:#8a97a5}
.filter-area i{position:absolute;left:12px;top:11px;color:#8a97a5}

/* ---- [UL-5] Liste sarmalayıcı + kaydırma alanı (akış tabanlı) --- */
.sidebar-content-list-wrapper{position:relative;width:100%}
.sidebar-content-list{padding:0;margin:0;width:100%;list-style:none}

/* ---- [UL-6] Kullanıcı satırı (SADECE li.user — .user cakismasi onlendi) ----- */
.sidebar-content-list li.user{width:100%;height:80px;display:flex;flex-direction:row;cursor:pointer;padding-right:8px;padding-left:8px;position:relative;color:#fff;list-style:none}
.sidebar-content-list li.user:hover{background:hsla(0,0%,100%,.07)}

/* ---- [UL-7] Avatar ---------------------------------------------- */
.user-avatar{width:80px;height:80px;padding:10px;position:relative}
.user-avatar.small-avatar{width:42px;height:42px;padding-top:8px;cursor:pointer}
.user .user-avatar img{width:60px;height:60px;border-radius:50%;border:1px solid hsla(0,0%,100%,.13)!important}
.user-avatar.small-avatar img{width:32px;height:32px}

/* ---- [UL-8] Çevrimiçi göstergesi -------------------------------- */
.user-online-indicator{position:absolute;background:#d1d1d1;width:12px;height:12px;border-radius:50%;right:13px;bottom:13px;border:2px solid #151f2b}
.user-online-indicator.online{background:#11a6f3}

/* ---- [UL-9] İçerik alanı (isim, rütbe) -------------------------- */
.user .user-content{flex:1 1;height:100%;padding-top:12px;font-size:.8rem;position:relative;border-bottom:1px solid hsla(0,0%,100%,.13)}
.user .user-content.user-content-fr{padding-left:8px}
.user .user-content span{position:relative}
.user .user-content span b{font-weight:500}
.user .user-content i{position:relative;font-size:.6rem;line-height:.6rem}
.user-item-rank-name{font-size:.6rem}

/* ---- [UL-10] Yıldızlar / durum etiketi / onaylı rozet ----------- */
.user .stars{margin-top:1px;line-height:.6rem;margin-bottom:2px}
.user .Status{width:auto;font-size:.6rem;color:#777;margin-bottom:4px;border-radius:1rem;margin-left:-2px;padding-left:5px;padding-right:5px;padding-bottom:1px;font-weight:700}
.StatusWrapper{margin-top:2px}
.verified{height:.8rem;vertical-align:middle;margin-left:3px}

/* ---- [UL-11] Cinsiyet / platform ikonları ----------------------- */
.user-platform-wrapper{position:absolute;right:5px;top:10px}
.user-platform{padding:3px;font-size:12px;color:#ccc!important}
.user-gender{padding:3px;font-size:14px!important;vertical-align:middle;color:#ccc!important;margin-right:4px}

/* ---- [UL-12] Mobil seçenekler (üç nokta) ------------------------ */
.mobile-user-options{position:absolute;bottom:0;right:0;width:64px;height:80px;text-align:center}
.mobile-user-options-icon{position:absolute;color:hsla(0,0%,100%,.67);bottom:16px;right:8px}

/* =====================================================================
   ADIM 1 — UST HEADER (oda ikonu + oda adi + oda sahibi + butonlar)
   Kaynak: /esohbet_onizleme/ .main-menu  |  Hedef: control/chat.php #chat_head
   ===================================================================== */
#chat_head.chat_head{display:flex !important;align-items:center;background:#151f2b;border-bottom:1px solid hsla(0,0%,100%,.13);height:64px;padding:0 4px}
#chat_head .head_option{display:flex;align-items:center;justify-content:center;width:44px;height:100%}
#chat_head #empty_top_mob{display:none}

/* oda basligi (avatar + isim + sahibi) - flex:1 ile butonlari saga iter */
.main-menu-heading{display:flex;flex-direction:row;align-items:center;height:100%;flex:1 1 auto;min-width:0}
.main-menu-room-avatar{border-radius:.25rem;height:36px;width:36px;object-fit:cover;margin:14px 13px;border:1px solid hsla(0,0%,100%,.13);flex:0 0 auto}
.main-menu-content{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0}
.main-menu-title{font-weight:700;color:#fff;font-size:.85rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.main-menu-subtitle{color:hsla(0,0%,100%,.67);font-size:.72rem;line-height:1.25;white-space:nowrap}
.room-owner-text{cursor:pointer;color:#11a6f3}

/* ust header butonlari (Yetki Satin Al / Yeni Oda Ac / Tum Odalar) */
.main-menu-button{height:64px;line-height:64px;text-align:center;padding:0 16px;color:hsla(0,0%,100%,.67);font-size:.8rem;font-weight:700;border-left:1px solid hsla(0,0%,100%,.13);cursor:pointer;white-space:nowrap;transition:background .2s ease,color .2s ease}
.main-menu-button:hover{background:hsla(0,0%,100%,.05);color:#fff}
.main-menu-button i{margin-right:6px}

/* sag ust bildirim ikonlari koyu temaya uyum */
#chat_head .head_option i{color:hsla(0,0%,100%,.7)}
#chat_head .head_option:hover i{color:#fff}
#chat_head .avatar_menu{border:1px solid hsla(0,0%,100%,.2)}

/* =====================================================================
   KOYU TEMA TABANI + ADIM 4 (MESAJLAR) + ADIM 5 (INPUT)
   Kapsam: yalnizca body.boom-logged (sohbet sayfasi) — login sayfasi korunur.
   Lite temasini demo koyu gorunume cevirir. custom.css en son yuklenir.
   ===================================================================== */

/* --- genel arka plan + metin --- */
body.boom-logged{background:#0a1521 !important;color:hsla(0,0%,100%,.87)}
body.boom-logged .backglob{background:#0a1521 !important}
body.boom-logged .back_chat{background:transparent !important}
body.boom-logged .back_panel{background:#0e1622 !important}
body.boom-logged .back_priv{background:#0e1622 !important}
body.boom-logged .back_menu,
body.boom-logged .back_box,
body.boom-logged .back_modal,
body.boom-logged .back_quote,
body.boom-logged .page_element{background:#151f2b !important}
body.boom-logged .back_input{background:#151f2b !important;border-top:1px solid hsla(0,0%,100%,.13) !important}

/* --- header / footer / sidebar --- */
body.boom-logged .bhead{background:#151f2b !important;color:#fff}
body.boom-logged .bsidebar{background:#0e1622 !important;color:#fff}
body.boom-logged .bfoot,
body.boom-logged .foot{background:#151f2b !important;color:#fff}
body.boom-logged .modal_top,
body.boom-logged .pro_top,
body.boom-logged .back_ptop,
body.boom-logged .back_pmenu{background:#151f2b !important;color:#fff}

/* --- borderlar --- */
body.boom-logged .bborder{border-bottom:1px solid hsla(0,0%,100%,.10) !important}
body.boom-logged .tborder{border-top:1px solid hsla(0,0%,100%,.10) !important}
body.boom-logged .lborder,
body.boom-logged .ppanel{border-left:1px solid hsla(0,0%,100%,.10) !important}
body.boom-logged .rborder{border-right:1px solid hsla(0,0%,100%,.10) !important}
body.boom-logged .fborder{border:1px solid hsla(0,0%,100%,.10) !important}
body.boom-logged .blist,
body.boom-logged .blisting{border-bottom:1px solid hsla(0,0%,100%,.08) !important}

/* --- hover / selected --- */
body.boom-logged .bhover:hover,
body.boom-logged .bhoverr:hover,
body.boom-logged .bbackhover,
body.boom-logged .blisting:hover{background:hsla(0,0%,100%,.05) !important}
body.boom-logged .bselected,
body.boom-logged .cselected,
body.boom-logged .tab_selected,
body.boom-logged .modal_selected{background:hsla(0,0%,100%,.08) !important}
body.boom-logged .bback,
body.boom-logged .bbackb{background:hsla(0,0%,100%,.04) !important}

/* --- inputlar (genel) --- */
body.boom-logged input,
body.boom-logged textarea,
body.boom-logged .post_input_container{background:#252f3b !important;border:1px solid hsla(0,0%,100%,.13) !important;color:#fff !important}
body.boom-logged .selectboxit-list,
body.boom-logged .selectboxit-btn,
body.boom-logged .selectboxit-options{background:#252f3b !important;color:#fff !important;border:1px solid hsla(0,0%,100%,.13) !important}

/* --- metin renkleri --- */
body.boom-logged .user{color:hsla(0,0%,100%,.87)}
body.boom-logged .default_color{color:#fff}
body.boom-logged .sub_text,
body.boom-logged .list_mood,
body.boom-logged .sub_date{color:hsla(0,0%,100%,.5)}
body.boom-logged .sub_chat,
body.boom-logged .sub_priv{color:hsla(0,0%,100%,.4)}
body.boom-logged .chat_system,
body.boom-logged .system_text{color:hsla(0,0%,100%,.5);background:transparent !important}
body.boom-logged .theme_color{color:#11a6f3}

/* ===== ADIM 4 — SOHBET MESAJLARI (demo .message.received birebir) =====
   .my_text=balon | isim ust | mesaj | SAAT mesaj sonunda float-right (sadece saat)
   .cdate JS ile .chat_message icine tasinir (function_handlers.js) */
body.boom-logged .chat_log{display:flex !important;align-items:flex-start;padding:0 8px;margin-top:8px}
body.boom-logged .chat_avatar{display:block !important;width:40px;flex:0 0 40px;margin-left:5px}
body.boom-logged .chat_avatar img.cavatar{width:30px;height:30px;border-radius:50%;margin-top:5px;border:none}

/* balon = .my_text (demo .message.received) */
body.boom-logged .my_text{display:block !important;flex:0 1 auto;max-width:62%;background:#151f2b !important;border-radius:.4rem;box-shadow:1px 1px 1px -1px rgba(0,0,0,.5);padding:0 !important;margin:0;position:relative;color:hsla(0,0%,100%,.87)}

/* isim (balon ust) — rank ikonu kaldirildi */
body.boom-logged .my_text .btable{display:block !important;width:auto !important}
body.boom-logged .cname{display:block !important;width:auto !important;margin:4px 0 0 6px;line-height:12px}
body.boom-logged .cname .chat_rank{display:none !important}
body.boom-logged .cname .username{font-weight:700 !important;font-size:12px;letter-spacing:normal}

/* mesaj icerik kutusu (demo .message-content: inline-block, padding 0 6px 6px) */
body.boom-logged .log_content{display:block !important;padding:0 !important;width:auto !important}
body.boom-logged .chat_message{display:inline-block !important;width:auto !important;padding:0 6px 6px 6px !important;margin:0 !important}
body.boom-logged .mbubble{display:inline !important;background:transparent !important;color:hsla(0,0%,100%,.87);box-shadow:none !important;padding:0 !important;font-size:.8rem;white-space:normal !important;overflow-wrap:break-word;word-break:normal !important}

/* SAAT — mesaj sonunda float-right (demo .metadata .time) — JS ile iceri tasindi */
body.boom-logged .chat_message .cdate{float:right !important;position:static !important;width:auto !important;color:hsla(0,0%,100%,.5) !important;font-size:.6rem !important;line-height:1;padding:4px 0 0 14px !important;background:transparent !important;white-space:nowrap}

/* ... menu — balon ust-sag, hover'da gorunur */
body.boom-logged .cclear{position:absolute !important;top:3px;right:6px;width:auto !important;color:hsla(0,0%,100%,.4) !important;opacity:0;transition:opacity .15s ease;z-index:2}
body.boom-logged .my_text:hover .cclear{opacity:1}

body.boom-logged .cquote{background:hsla(0,0%,100%,.08) !important;color:hsla(0,0%,100%,.7)}
body.boom-logged .my_log{background:#252f3b !important;color:#fff !important}
body.boom-logged .topic_log{background:hsla(160,60%,40%,.18) !important;color:#7ee2b8 !important}

/* ===== ADIM 5 — INPUT ALANI (demo .main-content-input-area BIREBIR) =====
   alan h:48px flex-row #151f2b | ikon 36x48 renk #aaa 16px | input cerceve r:8px h:36px | gonder 36px daire */
body.boom-logged #top_chat_container.back_input{background:#151f2b !important;border-top:1px solid hsla(0,0%,100%,.13) !important}
body.boom-logged .input_table{display:flex !important;flex-direction:row;align-items:center;width:100%;height:48px;min-height:48px;overflow:visible !important}
body.boom-logged .input_table .main_item{flex:0 0 auto;width:36px;height:48px;line-height:48px;display:flex !important;align-items:center;justify-content:center;color:#aaa;font-size:16px;cursor:pointer;border-radius:0;margin:0}
body.boom-logged .input_table .sub_hidden{display:none !important}
body.boom-logged .input_item{color:#aaa}
body.boom-logged .input_item:hover{color:#fff;cursor:pointer}
/* input sarmalayici (demo .text-node-component-wrapper: flex:1, h:48) */
body.boom-logged #main_input_box.td_input{flex:1 1 0%;display:flex !important;align-items:center;justify-content:center;position:relative;height:48px;margin:0;padding:0 !important}
/* INPUT CERCEVE (demo .text-node-component: r:8px, h:36px, NOT tam daire) — flex ile ortalanir */
body.boom-logged #content{width:100%;height:36px;background:#252f3b !important;border:1px solid hsla(0,0%,100%,.13) !important;border-radius:8px !important;color:#fff !important;font-size:12.8px;line-height:34px;padding:0 12px !important;box-sizing:border-box}
body.boom-logged #content::placeholder{color:hsla(0,0%,100%,.4)}
/* gonder (demo .main-content-input-button.send: 36px daire, m:6px, #2196f3, 16px) */
body.boom-logged #inputt_right{flex:0 0 auto;width:auto !important;display:flex !important;align-items:center}
body.boom-logged #submit_button.send_btn{width:36px !important;height:36px !important;float:none !important;display:flex !important;align-items:center;justify-content:center;margin:6px;padding:0 !important;border-radius:50% !important;background:#2196f3 !important;color:#fff !important;font-size:16px !important;line-height:1 !important;transition:background .2s ease}
body.boom-logged #submit_button.send_btn:hover{background:#11a6f3 !important}
body.boom-logged #submit_button.send_btn i{color:#fff !important}

/* left sidebar + right panel ikonlari */
body.boom-logged .leftmenui{color:hsla(0,0%,100%,.7)}
body.boom-logged .left_menu_item:hover .leftmenui{color:#fff}
body.boom-logged #right_panel_bar .panel_option{color:hsla(0,0%,100%,.6)}
body.boom-logged #right_panel_bar .panel_option.bselected,
body.boom-logged #right_panel_bar .panel_option:hover{color:#fff}

/* ===== ALT FOOTER (#wrap_footer / #my_menu) KALDIRILDI =====
   footer gizlenir + sohbet alani bosluğu doldurur (input en alta iner) */
body.boom-logged #wrap_footer{display:none !important}
body.boom-logged #global_chat{height:calc(100vh - 64px) !important}
body.boom-logged #chat_center{height:calc(100vh - 64px) !important}
body.boom-logged #container_chat{height:100% !important}
body.boom-logged #wrap_chat{display:flex !important;flex-direction:column;height:100% !important}
body.boom-logged #warp_show_chat{flex:1 1 auto !important;height:auto !important;min-height:0}
body.boom-logged #top_chat_container{flex:0 0 auto}

/* ===== TYPING INDICATOR (yaziyor) — demo .room-writing birebir ===== */
@keyframes blink{0%{opacity:0}50%{opacity:1}100%{opacity:1}}
body.boom-logged .room-writings-layout{width:100%;max-width:100%;overflow-x:hidden;color:#fff;padding:2px 8px;white-space:nowrap;flex:0 0 auto}
body.boom-logged .room-writings-layout:empty{display:none}
body.boom-logged .room-writing{display:inline-block;background:hsla(0,0%,100%,.07);color:#fff;border-radius:5px;font-size:.7rem;padding:3px 5px;margin-left:3px}
body.boom-logged .writing-dot{width:3px;height:3px;border-radius:50%;display:inline-block;margin-left:2px;animation:blink 1.4s infinite both}
body.boom-logged .room-writing .writing-dot{background:#fff}
body.boom-logged .room-writing .writing-dot:nth-child(2){animation-delay:.2s}
body.boom-logged .room-writing .writing-dot:nth-child(3){animation-delay:.4s}

/* ===== Mobilde ust header butonlarini gizle (Yetki/Yeni Oda/Tum Odalar) ===== */
@media screen and (max-width:768px){
	body.boom-logged .main-menu-button{display:none !important}
}

/* ===== MOBIL SAG HIZLI ERISIM BARI (radyovefa uyarlamasi) — show_mobile ile sadece mobilde ===== */
body.boom-logged .mobile-messages-right-buttons{position:fixed;right:0;top:50%;transform:translateY(-50%);width:36px;border-top-left-radius:.5rem;border-bottom-left-radius:.5rem;background:#151f2b;color:#fff;text-align:center;box-shadow:0 -1px 8px 0 rgba(0,0,0,.25),0 0 0 1px hsla(0,0%,100%,.2);z-index:60}
body.boom-logged .mobile-messages-right-button{position:relative;height:46px;border-bottom:1px solid hsla(0,0%,100%,.07);cursor:pointer}
body.boom-logged .mobile-messages-right-button:hover{background:hsla(0,0%,100%,.07)}
body.boom-logged .mobile-messages-right-button:last-child{border-bottom:none}
body.boom-logged .mobile-messages-right-button .icon{width:36px;height:34px;font-size:.9rem;line-height:34px;text-align:center;color:hsla(0,0%,100%,.85)}
body.boom-logged .mobile-messages-right-button .menu-badge{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);font-size:6px;padding:1px 3px;background:hsla(0,0%,100%,.1);border-radius:.5rem;white-space:nowrap;color:#fff}
body.boom-logged .mobile-messages-right-button .notification.bnotify{position:absolute;top:3px;right:3px}

/* ===== Sag panel (user list) KAPAT butonu — mobilde (show_mobile) ===== */
body.boom-logged .sag-panel-close{position:fixed;bottom:0;margin-left:-18px;border-radius:5px 5px 0 0;padding:6px 4px;line-height:30px;font-size:26px;z-index:61;cursor:pointer}
body.boom-logged .sag-panel-close i{color:#fff}

/* ===== Yazarken extra ikonlar gizlenir; bos/gonderince geri gelir (.is-typing) ===== */
body.boom-logged .input_table.is-typing .bnd-input-btn{display:none !important}
body.boom-logged .input_table.is-typing #upchat{display:none !important}
body.boom-logged .input_table.is-typing .main_item:has(#record_chat){display:none !important}

/* ===== Input ust boslugu düzelt: #container_input padding'ini sifirla (demo gibi tam otur) ===== */
body.boom-logged #container_input{padding:0 !important}
body.boom-logged #main_input{height:48px !important}

/* ===== Kullanici listesi: arama ikonu (sekme yaninda) + kutu varsayilan gizli ===== */
body.boom-logged .selection-search-icon{flex:0 0 auto;width:38px;display:flex;align-items:center;justify-content:center;background:#151f2b;color:#fff;cursor:pointer;font-size:.8rem;border-top:1px solid hsla(0,0%,100%,.13);border-bottom:1px solid hsla(0,0%,100%,.13);border-right:1px solid hsla(0,0%,100%,.13);border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}
body.boom-logged .selection-search-icon:hover{background:#252f3b}
body.boom-logged .filter-area.filter-hidden{display:none}

/* ===== Masaustu (>=769px): user list 360px + ust header sag ikon bolumu 360px + ayrac ===== */
body.boom-logged #chat_head .head-right-icons{display:flex;align-items:center;justify-content:flex-end;flex:0 0 auto}
@media screen and (min-width:769px){
	body.boom-logged #chat_right{width:360px !important;max-width:360px !important}
	body.boom-logged #chat_head .head-right-icons{flex:0 0 360px;width:360px;height:100%;border-left:1px solid hsla(0,0%,100%,.13);box-sizing:border-box}
}

/* ===== Sag panel ust bar (#right_panel_bar) kaldirildi — sekmeler yerini aliyor ===== */
body.boom-logged #right_panel_bar{display:none !important}
body.boom-logged #chat_right_data{height:calc(100vh - 64px) !important;padding-bottom:10px !important}

/* ===== Profil: ozel sohbet gibi yan panel (kullanici listesi yaninda, sag:360px) — masaustu, backdrop kalir ===== */
@media screen and (min-width:769px){
	body.boom-logged #large_modal.large_modal_out:has(.profile_wrap) #large_modal_in{
		position:fixed !important;
		top:64px !important;
		right:360px !important;
		bottom:0 !important;
		left:auto !important;
		width:360px !important;
		max-width:360px !important;
		height:auto !important;
		max-height:none !important;
		margin:0 !important;
		padding:0 !important;
		transform:none !important;
		border-radius:0 !important;
		box-shadow:-4px 0 16px -6px rgba(0,0,0,.5);
		overflow:hidden !important;
	}
	body.boom-logged #large_modal:has(.profile_wrap) #large_modal_content{padding:0 !important;height:100% !important;width:100% !important}
}

/* ===== Profil detay icerik (demo .desktop-profile-container birebir) ===== */
body.boom-logged .desktop-profile-container{width:360px;height:100%;overflow-y:auto;overflow-x:hidden;background:#151f2b;border-left:1px solid hsla(0,0%,100%,.13);position:relative}
body.boom-logged .user-profile-wrapper{width:100%;height:100%;overflow-y:auto;position:relative;min-width:0}
body.boom-logged .user-profile{position:relative;width:100%;padding-bottom:12px}
body.boom-logged .ConnectivityStatus{font-size:.6rem;padding-top:18px;text-align:center;padding-bottom:5px;color:hsla(0,0%,100%,.55);margin-left:60px;margin-right:60px;line-height:1.5}
body.boom-logged .ConnectivityStatus b{color:#fff}
body.boom-logged .ProfileSection{width:100%;overflow:visible}
body.boom-logged .ProfileSection .UserAvatarCover{position:relative;width:100%;height:170px}
body.boom-logged .ProfileSection .UserAvatarImage{position:absolute;width:150px;height:150px;border-radius:50%;top:10px;left:calc(50% - 75px);background:hsla(0,0%,100%,.07);cursor:pointer;border:3px solid hsla(0,0%,100%,.1);object-fit:cover}
body.boom-logged .ProfileSection .UserAvatarImage:hover{opacity:.85}
body.boom-logged .ProfileSection .UserPlatform,
body.boom-logged .user-profile-gender{position:absolute;width:30px;height:30px;text-align:center;background:#151f2b;border-radius:50%;border:1px solid #404043;font-size:14px;color:hsla(0,0%,100%,.67);line-height:30px}
body.boom-logged .ProfileSection .UserPlatform{left:calc(50% + 45px);top:30px}
body.boom-logged .user-profile-gender{left:calc(50% + 55px);top:52px}
body.boom-logged .UserContent{position:relative;text-align:center;margin-top:16px}
body.boom-logged .UserContent .username{font-size:1rem;text-align:center;color:#fff;font-weight:700}
body.boom-logged .UserContent .rank{text-align:center}
body.boom-logged .UserContent .rank div{font-weight:700;font-size:.7rem}
body.boom-logged .ContentSection{margin:0;padding:10px 10px 18px;text-align:center;font-size:.8rem;color:hsla(0,0%,100%,.6)}
body.boom-logged .ContentSection b{color:#fff}
body.boom-logged .CountSectionW{text-align:center;margin-top:6px}
body.boom-logged .CountNumber{font-weight:700;margin-right:3px;display:inline-block;color:hsla(0,0%,100%,.8)}
body.boom-logged .CountText{display:inline-block;color:hsla(0,0%,100%,.6)}
body.boom-logged .friendship-wrapper{width:calc(100% - 32px);margin:8px 16px;border:1px solid hsla(0,0%,100%,.2);border-radius:.4rem;overflow:hidden}
body.boom-logged .f-friendship{width:100%;display:flex;flex-direction:row;background:#151f2b;box-sizing:border-box}
body.boom-logged .f-button{padding:9px 8px;text-align:center;cursor:pointer;flex:1 1 0;border-right:1px solid hsla(0,0%,100%,.2);font-size:.75rem;color:hsla(0,0%,100%,.67)}
body.boom-logged .f-friendship .f-button:last-child{border-right:none}
body.boom-logged .f-button:hover{background:hsla(0,0%,100%,.07);color:#fff}
body.boom-logged .f-button i{margin-right:5px}
body.boom-logged .f-button div{display:inline-block}
body.boom-logged .f-friendship button{margin:0;padding:6px 0;height:auto;flex:1 1 0;background:#151f2b !important;border:none !important;border-right:1px solid hsla(0,0%,100%,.2) !important;cursor:pointer;color:hsla(0,0%,100%,.67) !important}
body.boom-logged .f-friendship button:last-child{border-right:none !important}
body.boom-logged .f-friendship button:hover{background:hsla(0,0%,100%,.07) !important}
body.boom-logged .f-friendship button:hover div,
body.boom-logged .f-friendship button:hover i{color:#fff !important}
body.boom-logged .f-friendship button i{display:block;margin:0 auto;width:auto;font-size:17px;color:hsla(0,0%,100%,.67);line-height:24px}
body.boom-logged .f-friendship button div{margin-top:3px;font-weight:500;font-size:.6rem;white-space:nowrap;color:hsla(0,0%,100%,.6)}
body.boom-logged .desktop-profile-container .header-button{margin:0;height:40px;width:40px;line-height:40px;text-align:center;border:1px solid hsla(0,0%,100%,.2);border-radius:50%;cursor:pointer;color:hsla(0,0%,100%,.67);position:absolute;top:10px;left:10px;z-index:5}
body.boom-logged .desktop-profile-container .header-button:hover{background:hsla(0,0%,100%,.07);color:#fff}
body.boom-logged .desktop-profile-container .header-button-right{left:auto;right:10px}

/* ===== Profil acikken kullanici listesi backdrop ustunde (baska kullaniciya tiklanabilsin) ===== */
@media screen and (min-width:769px){
	body.boom-logged:has(#large_modal.large_modal_out .profile_wrap) #chat_right{position:relative !important;z-index:1001 !important}
}

/* ===== Profil acikken sohbet alani 360px sola daralir (profil ustune binmesin) ===== */
@media screen and (min-width:769px){
	body.boom-logged:has(#large_modal.large_modal_out .profile_wrap) #chat_center{padding-right:360px !important;box-sizing:border-box}
}

/* ===== Mobilde profil: alttan yukari kayarak acilir (bottom sheet) ===== */
@keyframes profileSlideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media screen and (max-width:768px){
	body.boom-logged #large_modal.large_modal_out:has(.profile_wrap) #large_modal_in{
		position:fixed !important;
		left:0 !important;right:0 !important;bottom:0 !important;top:64px !important;
		width:100% !important;max-width:100% !important;
		height:auto !important;max-height:none !important;
		margin:0 !important;padding:0 !important;transform:none !important;
		border-radius:16px 16px 0 0 !important;
		overflow:hidden !important;
		animation:profileSlideUp .28s cubic-bezier(.4,0,.2,1) both;
	}
	body.boom-logged #large_modal:has(.profile_wrap) #large_modal_content{padding:0 !important;height:100% !important;width:100% !important}
	body.boom-logged .desktop-profile-container{width:100% !important;border-left:none !important;border-radius:16px 16px 0 0}
	body.boom-logged .user-profile-wrapper{min-width:0 !important}
}

/* ===== Profil "..." aksiyon menusu: modal yerine dropdown (profil acikken) ===== */
@media screen and (min-width:769px){
	body.boom-logged:has(.profile_wrap) #over_modal.over_modal_out{background:transparent !important}
	body.boom-logged:has(.profile_wrap) #over_modal.over_modal_out #over_modal_in{
		position:fixed !important;
		top:112px !important;
		right:366px !important;
		left:auto !important;
		bottom:auto !important;
		width:240px !important;
		max-width:240px !important;
		max-height:72vh !important;
		margin:0 !important;
		padding:0 !important;
		transform:none !important;
		border-radius:.5rem !important;
		box-shadow:0 8px 26px rgba(0,0,0,.55);
		overflow-y:auto;
		z-index:1002;
	}
}

/* ===== Profil "..." dropdown: avatar kaldir + Global/Ana tabs duzgun ===== */
@media screen and (min-width:769px){
	body.boom-logged:has(.profile_wrap) #over_modal_in .modal_user_avatar{display:none !important}
	body.boom-logged:has(.profile_wrap) #over_modal_in .modal_user{padding:4px 4px 0}
	body.boom-logged:has(.profile_wrap) #over_modal_in .modal_user_name{padding-left:12px}
	body.boom-logged:has(.profile_wrap) #over_modal_in .modal_menu ul{display:flex;list-style:none;padding:0;margin:6px 0}
	body.boom-logged:has(.profile_wrap) #over_modal_in .modal_menu_item{flex:1 1 0;text-align:center;padding:7px 6px;cursor:pointer;font-size:.75rem;color:hsla(0,0%,100%,.6);border-radius:.4rem;font-weight:700}
	body.boom-logged:has(.profile_wrap) #over_modal_in .modal_menu_item.modal_selected{background:hsla(0,0%,100%,.1);color:#fff}
}