/* ═══════════════════════════════════════════════════════════════════







   GlomaxGPT — Design System v3







   ChatGPT / Gemini / Claude kalitesinde premium, minimal, sade UI







   







   YÜKLEME SIRASI: index.php'de chatgpt-ui.css'den SONRA yüklenir.







   Tüm mevcut CSS dosyalarını override eder — hiçbirini silmez.







   Backend / PHP / API'ye dokunulmaz.







   







   Bölümler:







     0.  Flash önleme & font







     1.  CSS Token sistemi (dark / light)







     2.  Z-index hiyerarÅŸisi







     3.  Global reset & tipografi







     4.  Sidebar sistemi (260px / 70px, 300ms)







     5.  Mobile header







     6.  Topbar







     7.  Model seçici dropdown







     8.  Chat layout







     9.  Mesaj baloncukları







    10.  Input alanı







    11.  Speed picker & dropdown fix







    12.  Buton sistemi







    13.  Kart tasarımı







    14.  Modal sistemi







    15.  Animasyonlar







    16.  Scrollbar







    17.  Footer







    18.  Mobil responsive







    19.  Tablet (768px+)







    20.  Yardımcı sınıflar







═══════════════════════════════════════════════════════════════════ */















/* ── 0. FLASH ÖNLEME & FONT ─────────────────────────────────────── */







@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');















html {







  font-family: 'Inter', Arial, sans-serif !important;







}















/* ── 1. CSS TOKEN SİSTEMİ ───────────────────────────────────────── */















/* LIGHT TEMA */







[data-theme="light"],







html:not([data-theme="dark"]) {







  /* Ana arka planlar */







  --v3-bg:            #ffffff;







  --v3-sidebar-bg:    #f7f7f8;







  --v3-surface:       #f7f7f8;







  --v3-surface2:      #ececf1;







  --v3-card:          #ffffff;







  --v3-input-bg:      #ffffff;















  /* Kenarlıklar */







  --v3-border:        #e5e5e5;







  --v3-border2:       #d0d0d0;















  /* Metin */







  --v3-text:          #202123;







  --v3-text2:         #6e6e80;







  --v3-text3:         #9e9ea8;







  --v3-text4:         #b0b0c0;















  /* Butonlar */







  --v3-btn-bg:        #10a37f;







  --v3-btn-hover:     #0d9270;







  --v3-btn-text:      #FFFFFF;







  --v3-btn-disabled:  #CCCCCC;















  /* Kullanıcı mesaj balonu */







  --v3-user-bubble:   #ffffff;















  /* Accent */







  --v3-accent:        #10a37f;







  --v3-accent2:       #0d9270;















  /* Gölgeler */







  --v3-shadow-sm:     0 1px 4px rgba(0,0,0,0.06);







  --v3-shadow-md:     0 4px 20px rgba(0,0,0,0.08);







  --v3-shadow-lg:     0 8px 32px rgba(0,0,0,0.10);







  --v3-input-shadow:  0 4px 20px rgba(0,0,0,0.08);















  /* Sidebar hover/active */







  --v3-sidebar-hover:  #ececf1;







  --v3-sidebar-active: #ececf1;















  /* Hover genel */







  --v3-hover:         #ececf1;







}















/* DARK TEMA */







[data-theme="dark"] {







  /* Ana arka planlar */







  --v3-bg:            #343541;







  --v3-sidebar-bg:    #202123;







  --v3-surface:       #343541;







  --v3-surface2:      #444654;







  --v3-card:          #444654;







  --v3-input-bg:      #40414f;















  /* Kenarlıklar */







  --v3-border:        #565869;







  --v3-border2:       #565869;















  /* Metin */







  --v3-text:          #ececf1;







  --v3-text2:         #8e8ea0;







  --v3-text3:         #565869;







  --v3-text4:         #444654;















  /* Butonlar */







  --v3-btn-bg:        #19c37d;







  --v3-btn-hover:     #15a96b;







  --v3-btn-text:      #ffffff;







  --v3-btn-disabled:  #404040;















  /* Kullanıcı mesaj balonu */







  --v3-user-bubble:   #444654;















  /* Accent */







  --v3-accent:        #19c37d;







  --v3-accent2:       #15a96b;















  /* Gölgeler */







  --v3-shadow-sm:     0 1px 4px rgba(0,0,0,0.4);







  --v3-shadow-md:     0 4px 20px rgba(0,0,0,0.5);







  --v3-shadow-lg:     0 8px 32px rgba(0,0,0,0.6);







  --v3-input-shadow:  0 4px 20px rgba(0,0,0,0.3);















  /* Sidebar hover/active */







  --v3-sidebar-hover:  #2a2b32;







  --v3-sidebar-active: #343541;















  /* Hover genel */







  --v3-hover:         #2a2b32;







}















/* ── 2. Z-INDEX HİYERARŞİSİ ─────────────────────────────────────── */







/*







  Sidebar overlay:   100







  Sidebar:           200







  Mobile header:     300







  Topbar:            400







  Dropdown/Popup:    9999







  Modal overlay:     99990







  Modal box:         99999







*/















/* ── 3. GLOBAL RESET & TİPOGRAFİ ───────────────────────────────── */







*,







*::before,







*::after {







  box-sizing: border-box;







}















html,







body {







  font-family: 'Inter', Arial, sans-serif !important;







  -webkit-font-smoothing: antialiased;







  -moz-osx-font-smoothing: grayscale;







}















body {







  background: var(--v3-bg) !important;







  color: var(--v3-text) !important;







  margin: 0;







  padding: 0;







}















/* Başlıklar */







h1, h2, h3, h4, h5, h6 {







  font-family: 'Inter', Arial, sans-serif !important;







  font-weight: 600;







  color: var(--v3-text) !important;







}















/* Linkler */







a {







  color: inherit;







  text-decoration: none;







}















/* ── 4. SIDEBAR SİSTEMİ ─────────────────────────────────────────── */















/* Sidebar overlay (mobil) */







.sidebar-overlay {







  display: none;







  position: fixed;







  inset: 0;







  background: rgba(0,0,0,0.5);







  z-index: 150 !important;







  backdrop-filter: none;







  -webkit-backdrop-filter: none;







  opacity: 0;







  pointer-events: none;







  transition: opacity 0.3s ease;







}















.sidebar-overlay.active {







  opacity: 1;







  pointer-events: auto;







}















/* Ana sidebar */







.sidebar {







  width: 260px !important;







  min-width: 260px !important;







  max-width: 260px !important;







  height: 100vh !important;







  position: sticky !important;







  top: 0 !important;







  left: 0 !important;







  flex-shrink: 0 !important;







  display: flex !important;







  flex-direction: column !important;







  /* overflow: visible — popup'ların sidebar dışına çıkabilmesi için */







  overflow-x: visible !important;







  overflow-y: visible !important;







  background: var(--v3-sidebar-bg) !important;







  border-right: 1px solid var(--v3-border) !important;







  transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease, transform 0.3s ease !important;







  z-index: 200 !important;







}















/* Daraltılmış sidebar */







.sidebar.collapsed {







  width: 70px !important;







  min-width: 70px !important;







  max-width: 70px !important;







}















/* Sidebar üst bölge */







.sidebar-top {







  display: flex !important;







  align-items: center !important;







  justify-content: space-between !important;







  padding: 16px 14px 8px !important;







  flex-shrink: 0 !important;







  min-height: 56px !important;







}















/* Logo */







.sidebar-logo {







  display: flex !important;







  align-items: center !important;







  gap: 8px !important;







  text-decoration: none !important;







  overflow: hidden !important;







  flex: 1 !important;







  min-width: 0 !important;







}















.sidebar-logo-text {







  font-size: 1.2rem !important;







  color: var(--v3-text) !important;







  letter-spacing: 0.04em !important;







  white-space: nowrap !important;







  overflow: hidden !important;







  text-overflow: ellipsis !important;







  transition: opacity 0.2s ease !important;







}















.sidebar.collapsed .sidebar-logo-text {







  opacity: 0 !important;







  width: 0 !important;







  pointer-events: none !important;







}















/* Sidebar üst sağ butonlar */







.sidebar-top-right {







  display: flex !important;







  align-items: center !important;







  gap: 4px !important;







  flex-shrink: 0 !important;







}















/* Sidebar icon butonlar */







.sidebar-icon-btn,







.sb-new-chat-btn {







  width: 32px !important;







  height: 32px !important;







  border-radius: 8px !important;







  border: none !important;







  background: transparent !important;







  color: var(--v3-text3) !important;







  cursor: pointer !important;







  display: flex !important;







  align-items: center !important;







  justify-content: center !important;







  transition: background 0.2s ease, color 0.2s ease !important;







  flex-shrink: 0 !important;







  text-decoration: none !important;







}















.sidebar-icon-btn:hover,







.sb-new-chat-btn:hover {







  background: var(--v3-sidebar-hover) !important;







  color: var(--v3-text) !important;







}















/* Yeni sohbet tam buton */







.sb-new-chat-wrap {







  padding: 4px 10px 8px !important;







  flex-shrink: 0 !important;







}















.sb-new-chat-full {







  display: flex !important;







  align-items: center !important;







  gap: 8px !important;







  width: 100% !important;







  padding: 9px 12px !important;







  border-radius: 10px !important;







  background: transparent !important;







  border: 1px solid var(--v3-border) !important;







  color: var(--v3-text2) !important;







  font-size: 0.84rem !important;







  font-weight: 500 !important;







  cursor: pointer !important;







  text-decoration: none !important;







  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;







  overflow: hidden !important;







  white-space: nowrap !important;







}















.sb-new-chat-full:hover {







  background: var(--v3-sidebar-hover) !important;







  border-color: var(--v3-border2) !important;







  color: var(--v3-text) !important;







}















.sb-new-chat-full svg {







  flex-shrink: 0 !important;







}















.sb-new-chat-full span {







  transition: opacity 0.2s ease, width 0.3s ease !important;







  overflow: hidden !important;







}















.sidebar.collapsed .sb-new-chat-full {







  justify-content: center !important;







  padding: 9px !important;







  border-color: transparent !important;







}















.sidebar.collapsed .sb-new-chat-full span {







  opacity: 0 !important;







  width: 0 !important;







  pointer-events: none !important;







}















/* Sidebar nav — flex: 0 0 auto ile sadece içeriği kadar yer kaplar, boşluk oluşmaz */







.sidebar-nav {







  flex: 0 0 auto !important;







  overflow-y: visible !important;







  overflow-x: visible !important;







  padding: 4px 8px !important;







  display: flex !important;







  flex-direction: column !important;







  gap: 2px !important;







}















.sidebar-nav::-webkit-scrollbar { width: 4px; }







.sidebar-nav::-webkit-scrollbar-thumb {







  background: var(--v3-border);







  border-radius: 2px;







}







.sidebar-nav::-webkit-scrollbar-track { background: transparent; }















/* Nav item */







.sidebar-nav-item {







  display: flex !important;







  align-items: center !important;







  gap: 10px !important;







  padding: 9px 10px !important;







  border-radius: 10px !important;







  color: var(--v3-text2) !important;







  font-size: 0.84rem !important;







  font-weight: 400 !important;







  cursor: pointer !important;







  text-decoration: none !important;







  border: none !important;







  background: transparent !important;







  width: 100% !important;







  text-align: left !important;







  transition: background 0.18s ease, color 0.18s ease !important;







  white-space: nowrap !important;







  overflow: hidden !important;







  position: relative !important;







}















.sidebar-nav-item:hover {







  background: var(--v3-sidebar-hover) !important;







  color: var(--v3-text) !important;







}















.sidebar-nav-item.active {







  background: var(--v3-sidebar-active) !important;







  color: var(--v3-text) !important;







  font-weight: 500 !important;







}















.sidebar-nav-item svg {







  flex-shrink: 0 !important;







  opacity: 0.7 !important;







  transition: opacity 0.18s ease !important;







}















.sidebar-nav-item:hover svg,







.sidebar-nav-item.active svg {







  opacity: 1 !important;







}















.sidebar-nav-item > span:not(.sb-badge-beta) {







  transition: opacity 0.2s ease !important;







  overflow: hidden !important;







  text-overflow: ellipsis !important;







}















.sidebar.collapsed .sidebar-nav-item > span:not(.sb-badge-beta) {







  opacity: 0 !important;







  width: 0 !important;







  pointer-events: none !important;







}















.sidebar.collapsed .sidebar-nav-item {







  justify-content: center !important;







  padding: 9px !important;







}















/* Beta badge */







.sb-badge-beta {







  font-size: 0.65rem !important;







  font-weight: 600 !important;







  padding: 2px 6px !important;







  border-radius: 4px !important;







  background: var(--v3-accent) !important;







  color: #fff !important;







  letter-spacing: 0.02em !important;







  flex-shrink: 0 !important;







  transition: opacity 0.2s ease !important;







}















.sidebar.collapsed .sb-badge-beta {







  opacity: 0 !important;







  width: 0 !important;







  overflow: hidden !important;







  padding: 0 !important;







}















/* Sidebar section label */







.sidebar-section-label {







  font-size: 0.7rem !important;







  font-weight: 600 !important;







  color: var(--v3-text4) !important;







  text-transform: uppercase !important;







  letter-spacing: 0.06em !important;







  padding: 12px 10px 4px !important;







  transition: opacity 0.2s ease !important;







}















.sidebar.collapsed .sidebar-section-label {







  opacity: 0 !important;







  height: 0 !important;







  padding: 0 !important;







  overflow: hidden !important;







}















/* Sidebar divider */







.sidebar-divider,







.sb-divider {







  height: 1px !important;







  background: var(--v3-border) !important;







  margin: 6px 10px !important;







  flex-shrink: 0 !important;







}















/* Sidebar alt bölge */







.sidebar-bottom {







  flex-shrink: 0 !important;







  padding: 8px !important;







  border-top: 1px solid var(--v3-border) !important;







}















/* Kullanıcı profil alanı (sidebar alt) */







.sidebar-user,







.sb-user-btn {







  display: flex !important;







  align-items: center !important;







  gap: 10px !important;







  padding: 9px 10px !important;







  border-radius: 10px !important;







  cursor: pointer !important;







  transition: background 0.18s ease !important;







  width: 100% !important;







  border: none !important;







  background: transparent !important;







  text-align: left !important;







  text-decoration: none !important;







  overflow: hidden !important;







}















.sidebar-user:hover,







.sb-user-btn:hover {







  background: var(--v3-sidebar-hover) !important;







}















.sidebar-user-avatar,







.sb-avatar {







  width: 32px !important;







  height: 32px !important;







  border-radius: 50% !important;







  background: var(--v3-surface2) !important;







  display: flex !important;







  align-items: center !important;







  justify-content: center !important;







  font-size: 0.78rem !important;







  font-weight: 600 !important;







  color: var(--v3-text) !important;







  flex-shrink: 0 !important;







  overflow: hidden !important;







}















.sidebar-user-avatar img,







.sb-avatar img {







  width: 100% !important;







  height: 100% !important;







  object-fit: cover !important;







  border-radius: 50% !important;







}















.sidebar-user-info {







  flex: 1 !important;







  min-width: 0 !important;







  transition: opacity 0.2s ease !important;







}















.sidebar.collapsed .sidebar-user-info {







  opacity: 0 !important;







  width: 0 !important;







  pointer-events: none !important;







}















.sidebar-user-name {







  font-size: 0.82rem !important;







  font-weight: 500 !important;







  color: var(--v3-text) !important;







  white-space: nowrap !important;







  overflow: hidden !important;







  text-overflow: ellipsis !important;







}















.sidebar-user-plan {







  font-size: 0.72rem !important;







  color: var(--v3-text3) !important;







  white-space: nowrap !important;







  overflow: hidden !important;







  text-overflow: ellipsis !important;







}















/* Sidebar expand butonu (collapsed modda) */







.sidebar-expand-btn {







  display: none !important;







  width: 100% !important;







  padding: 14px 0 !important;







  align-items: center !important;







  justify-content: center !important;







  border: none !important;







  background: transparent !important;







  cursor: pointer !important;







  color: var(--v3-text3) !important;







  transition: color 0.18s ease !important;







  flex-direction: column !important;







  gap: 8px !important;







}















.sidebar.collapsed .sidebar-expand-btn {







  display: flex !important;







}















.sidebar-expand-btn:hover {







  color: var(--v3-text) !important;







}















/* Sohbet listesi */







.sidebar-conv-list,







.sb-conv-list {







  display: flex !important;







  flex-direction: column !important;







  gap: 1px !important;







}















.sidebar-conv-group-label,







.sb-conv-date-label {







  font-size: 0.7rem !important;







  font-weight: 600 !important;







  color: var(--v3-text4) !important;







  padding: 8px 10px 4px !important;







  text-transform: uppercase !important;







  letter-spacing: 0.05em !important;







  transition: opacity 0.2s ease !important;







}















.sidebar.collapsed .sidebar-conv-group-label,







.sidebar.collapsed .sb-conv-date-label {







  opacity: 0 !important;







  height: 0 !important;







  padding: 0 !important;







  overflow: hidden !important;







}















.sidebar-conv-item,







.sb-conv-item {







  display: flex !important;







  align-items: center !important;







  gap: 8px !important;







  padding: 8px 10px !important;







  border-radius: 8px !important;







  cursor: pointer !important;







  color: var(--v3-text2) !important;







  font-size: 0.82rem !important;







  text-decoration: none !important;







  transition: background 0.18s ease, color 0.18s ease !important;







  white-space: nowrap !important;







  overflow: hidden !important;







  text-overflow: ellipsis !important;







  position: relative !important;







}















.sidebar-conv-item:hover,







.sb-conv-item:hover {







  background: var(--v3-sidebar-hover) !important;







  color: var(--v3-text) !important;







}















.sidebar-conv-item.active,







.sb-conv-item.active {







  background: var(--v3-sidebar-active) !important;







  color: var(--v3-text) !important;







}















/* Kullanım çubuğu */







.sidebar-usage,







.sb-usage {







  padding: 8px 10px !important;







  transition: opacity 0.2s ease !important;







}















.sidebar.collapsed .sidebar-usage,







.sidebar.collapsed .sb-usage {







  opacity: 0 !important;







  height: 0 !important;







  padding: 0 !important;







  overflow: hidden !important;







}















.sidebar-usage-bar,







.sb-usage-bar {







  height: 3px !important;







  background: var(--v3-border) !important;







  border-radius: 2px !important;







  overflow: hidden !important;







  margin-top: 4px !important;







}















.sidebar-usage-fill,







.sb-usage-fill {







  height: 100% !important;







  background: var(--v3-accent) !important;







  border-radius: 2px !important;







  transition: width 0.4s ease !important;







}















/* "Daha fazla" popup */







.sb-more-wrap {







  position: relative !important;







}















.sb-more-popup {







  /* position ve left/top JS tarafından yönetilir (sbToggleMore fonksiyonu) */







  position: fixed !important;







  width: 220px !important;







  background: var(--v3-card) !important;







  border: 1px solid var(--v3-border) !important;







  border-radius: 14px !important;







  box-shadow: var(--v3-shadow-lg) !important;







  z-index: 9999 !important;







  padding: 6px !important;







  animation: v3FadeIn 0.18s ease both !important;







  max-height: 80vh !important;







  overflow-y: auto !important;







}















.sb-more-section-label {







  font-size: 0.68rem !important;







  font-weight: 600 !important;







  color: var(--v3-text4) !important;







  text-transform: uppercase !important;







  letter-spacing: 0.06em !important;







  padding: 6px 10px 4px !important;







}















.sb-more-item {







  display: flex !important;







  align-items: center !important;







  gap: 10px !important;







  padding: 9px 10px !important;







  border-radius: 8px !important;







  color: var(--v3-text2) !important;







  font-size: 0.83rem !important;







  text-decoration: none !important;







  cursor: pointer !important;







  transition: background 0.18s ease, color 0.18s ease !important;







  border: none !important;







  background: transparent !important;







  width: 100% !important;







  text-align: left !important;







}















.sb-more-item:hover,







.sb-more-item.active {







  background: var(--v3-sidebar-hover) !important;







  color: var(--v3-text) !important;







}















/* ── 5. MOBİL HEADER ────────────────────────────────────────────── */







.mobile-page-header {







  display: none !important;







  position: sticky !important;







  top: 0 !important;







  left: 0 !important;







  right: 0 !important;







  height: 52px !important;







  min-height: 52px !important;







  flex-shrink: 0 !important;







  background: var(--v3-bg) !important;







  border-bottom: 1px solid var(--v3-border) !important;







  z-index: 300 !important;







  align-items: center !important;







  justify-content: space-between !important;







  padding: 0 12px !important;







  gap: 8px !important;







  box-sizing: border-box !important;







}















.mph-left,







.mph-right {







  display: flex !important;







  align-items: center !important;







  gap: 6px !important;







  flex-shrink: 0 !important;







}















.mph-center {







  flex: 1 !important;







  text-align: center !important;







  min-width: 0 !important;







  overflow: hidden !important;







}















.mobile-hamburger,







.mobile-back-btn,







.mobile-header-btn {







  width: 36px !important;







  height: 36px !important;







  border-radius: 8px !important;







  border: none !important;







  background: transparent !important;







  color: var(--v3-text2) !important;







  cursor: pointer !important;







  display: flex !important;







  align-items: center !important;







  justify-content: center !important;







  transition: background 0.18s ease, color 0.18s ease !important;







  text-decoration: none !important;







}















.mobile-hamburger:hover,







.mobile-back-btn:hover,







.mobile-header-btn:hover {







  background: var(--v3-hover) !important;







  color: var(--v3-text) !important;







}















.mobile-logo-text {







  font-size: 0.84rem !important;







  font-weight: 700 !important;







  color: var(--v3-text) !important;







  letter-spacing: 0.04em !important;







}















.mobile-header-login-btn,







.mobile-header-register-btn {







  padding: 6px 12px !important;







  border-radius: 8px !important;







  font-size: 0.78rem !important;







  font-weight: 500 !important;







  text-decoration: none !important;







  transition: background 0.18s ease, color 0.18s ease !important;







}















.mobile-header-login-btn {







  color: var(--v3-text2) !important;







  background: transparent !important;







}















.mobile-header-register-btn {







  color: var(--v3-btn-text) !important;







  background: var(--v3-btn-bg) !important;







}















.mobile-header-register-btn:hover {







  background: var(--v3-btn-hover) !important;







}















/* ── 6. TOPBAR ──────────────────────────────────────────────────── */







.topbar {







  position: sticky !important;







  top: 0 !important;







  z-index: 400 !important;







  height: 56px !important;







  min-height: 56px !important;







  display: flex !important;







  align-items: center !important;







  justify-content: space-between !important;







  padding: 0 16px !important;







  gap: 10px !important;







  flex-shrink: 0 !important;







  background: transparent !important;







  







  box-shadow: none !important;







  transition: background 0.25s ease, border-color 0.25s ease !important;







}















[data-theme="light"] .topbar {







  background: transparent !important;







  backdrop-filter: none;







  -webkit-backdrop-filter: none;







}















[data-theme="dark"] .topbar {







  background: transparent !important;







  backdrop-filter: none;







  -webkit-backdrop-filter: none;







}















/* ── 7. MODEL SEÇİCİ DROPDOWN ──────────────────────────────────── */







.tb-model-selector {







  position: relative !important;







}















.tb-model-btn {







  display: flex !important;







  align-items: center !important;







  gap: 6px !important;







  padding: 7px 12px !important;







  border-radius: 10px !important;







  border: 1px solid var(--v3-border) !important;







  background: transparent !important;







  color: var(--v3-text) !important;







  font-size: 0.84rem !important;







  font-weight: 500 !important;







  cursor: pointer !important;







  transition: background 0.18s ease, border-color 0.18s ease !important;







  font-family: 'Inter', Arial, sans-serif !important;







  white-space: nowrap !important;







}















.tb-model-btn:hover {







  background: var(--v3-hover) !important;







  border-color: var(--v3-border2) !important;







}















.tb-model-chevron {







  transition: transform 0.2s ease !important;







  opacity: 0.6 !important;







}















.tb-model-btn[aria-expanded="true"] .tb-model-chevron {







  transform: rotate(180deg) !important;







}















.tb-model-menu {







  position: absolute !important;







  top: calc(100% + 8px) !important;







  left: 0 !important;







  min-width: 280px !important;







  max-width: 340px !important;







  max-height: 420px !important;







  overflow-y: auto !important;







  background: var(--v3-card) !important;







  border: 1px solid var(--v3-border) !important;







  border-radius: 14px !important;







  box-shadow: var(--v3-shadow-lg) !important;







  z-index: 9999 !important;







  padding: 6px !important;







  animation: v3FadeIn 0.18s ease both !important;







  scrollbar-width: thin !important;







  scrollbar-color: var(--v3-border) transparent !important;







}















.tb-model-menu::-webkit-scrollbar { width: 4px; }







.tb-model-menu::-webkit-scrollbar-thumb {







  background: var(--v3-border);







  border-radius: 2px;







}















.tb-model-menu-header {







  padding: 8px 10px 6px !important;







  font-size: 0.72rem !important;







  font-weight: 600 !important;







  color: var(--v3-text4) !important;







  text-transform: uppercase !important;







  letter-spacing: 0.06em !important;







}















.tb-model-group-label {







  font-size: 0.68rem !important;







  font-weight: 600 !important;







  color: var(--v3-text4) !important;







  text-transform: uppercase !important;







  letter-spacing: 0.06em !important;







  padding: 8px 10px 4px !important;







}















.tb-model-option {







  display: flex !important;







  align-items: center !important;







  justify-content: space-between !important;







  gap: 8px !important;







  padding: 9px 10px !important;







  border-radius: 8px !important;







  border: none !important;







  background: transparent !important;







  color: var(--v3-text2) !important;







  font-size: 0.83rem !important;







  cursor: pointer !important;







  width: 100% !important;







  text-align: left !important;







  transition: background 0.15s ease, color 0.15s ease !important;







  font-family: 'Inter', Arial, sans-serif !important;







}















.tb-model-option:hover {







  background: var(--v3-hover) !important;







  color: var(--v3-text) !important;







}















.tb-model-option.active {







  background: var(--v3-sidebar-active) !important;







  color: var(--v3-text) !important;







}















.tb-model-option-info {







  display: flex !important;







  flex-direction: column !important;







  gap: 2px !important;







  min-width: 0 !important;







}















.tb-model-option-name {







  font-weight: 500 !important;







  white-space: nowrap !important;







  overflow: hidden !important;







  text-overflow: ellipsis !important;







}















.tb-model-option-ctx {







  font-size: 0.7rem !important;







  color: var(--v3-text4) !important;







}















.tb-model-option-badge {







  font-size: 0.65rem !important;







  font-weight: 600 !important;







  padding: 2px 6px !important;







  border-radius: 4px !important;







  background: var(--v3-accent) !important;







  color: #fff !important;







  flex-shrink: 0 !important;







}















/* Topbar saÄŸ butonlar */







.topbar-right {







  display: flex !important;







  align-items: center !important;







  gap: 6px !important;







  flex-shrink: 0 !important;







}















.topbar-left {







  display: flex !important;







  align-items: center !important;







  gap: 8px !important;







  flex: 1 !important;







  min-width: 0 !important;







}















.btn-icon {







  width: 34px !important;







  height: 34px !important;







  border-radius: 8px !important;







  border: none !important;







  background: transparent !important;







  color: var(--v3-text3) !important;







  cursor: pointer !important;







  display: flex !important;







  align-items: center !important;







  justify-content: center !important;







  transition: background 0.18s ease, color 0.18s ease !important;







  text-decoration: none !important;







  position: relative !important;







}















.btn-icon:hover {







  background: var(--v3-hover) !important;







  color: var(--v3-text) !important;







}















/* Topbar avatar */







.tb-avatar,







.topbar-avatar {







  width: 32px !important;







  height: 32px !important;







  border-radius: 50% !important;







  background: var(--v3-surface2) !important;







  display: flex !important;







  align-items: center !important;







  justify-content: center !important;







  font-size: 0.78rem !important;







  font-weight: 600 !important;







  color: var(--v3-text) !important;







  overflow: hidden !important;







  cursor: pointer !important;







  border: none !important;







  transition: opacity 0.18s ease !important;







}















.tb-avatar:hover,







.topbar-avatar:hover {







  opacity: 0.85 !important;







}















.tb-avatar img,







.topbar-avatar img {







  width: 100% !important;







  height: 100% !important;







  object-fit: cover !important;







}















/* Bildirim badge */







.notif-badge {







  position: absolute !important;







  top: 4px !important;







  right: 4px !important;







  width: 8px !important;







  height: 8px !important;







  border-radius: 50% !important;







  background: #ef4444 !important;







  border: 2px solid var(--v3-bg) !important;







}















/* ── 8. CHAT LAYOUT ─────────────────────────────────────────────── */







.chat-main {







  display: flex !important;







  flex-direction: column #111625ant;







  flex: 1 1 0 !important;







  min-width: 0 !important;







  min-height: 0 !important;







  /* height: 100vh KULLANMA — app-with-sidebar flex:1 ile yönetiliyor */







  overflow: hidden !important;







  background: var(--v3-bg) !important;







  position: relative !important;







}















.messages-container,







#messages.messages-container {







  flex: 1 1 0 !important;







  overflow-y: auto !important;







  overflow-x: hidden !important;







  scroll-behavior: smooth !important;







  padding: 0px 0px 0px !important;







  display: flex !important;







  flex-direction: column !important;







  align-items: stretch !important;







  min-height: 0 !important;







  scrollbar-width: thin !important;







  scrollbar-color: var(--v3-border) transparent !important;







}















.messages-container::-webkit-scrollbar { width: 5px; }







.messages-container::-webkit-scrollbar-thumb {







  background: var(--v3-border);







  border-radius: 3px;







}







.messages-container::-webkit-scrollbar-track { background: transparent; }















/* Mesajlar max-width ile ortala */







.messages-container > .message,







.messages-container > .message-wrapper {







  flex-shrink: 0 !important;







  max-width: 768px !important;







  width: 100% !important;







  margin-left: auto !important;







  margin-right: auto !important;







}















/* Welcome screen */







.welcome-screen {







  display: flex !important;







  flex-direction: column !important;







  align-items: center !important;







  justify-content: center !important;







  flex: 1 !important;







  padding: 40px 20px 20px !important;







  text-align: center !important;







  animation: v3FadeIn 0.35s ease both !important;







  min-height: 0 !important;







  max-width: 768px !important;







  width: 100% !important;







  margin-left: auto !important;







  margin-right: auto !important;







  box-sizing: border-box !important;







}















.welcome-title,







#welcome-greeting {







  font-size: clamp(1.5rem, 4vw, 2rem) !important;







  font-weight: 700 !important;







  color: var(--v3-text) !important;







  line-height: 1.3 !important;







  margin: 0 0 10px !important;







  letter-spacing: -0.02em !important;







  background: none !important;







  -webkit-background-clip: unset !important;







  -webkit-text-fill-color: var(--v3-text) !important;







  background-clip: unset !important;







  animation: none !important;







}















.welcome-subtitle {







  font-size: 0.95rem !important;







  color: var(--v3-text3) !important;







  line-height: 1.6 !important;







  margin: 0 0 32px !important;







  max-width: 480px !important;







}















/* Öneri kartları */







.suggestion-pills {







  display: grid !important;







  grid-template-columns: repeat(4, 1fr) !important;







  gap: 10px !important;







  width: 100% !important;







  max-width: 680px !important;







  margin: 0 auto !important;







}















.suggestion-chip {







  display: flex !important;







  align-items: center !important;







  gap: 8px !important;







  padding: 10px 14px !important;







  background: var(--v3-surface) !important;







  border: 1px solid var(--v3-border) !important;







  border-radius: 12px !important;







  font-size: 0.83rem !important;







  font-weight: 500 !important;







  color: var(--v3-text2) !important;







  cursor: pointer !important;







  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;







  text-align: left !important;







  line-height: 1.4 !important;







  font-family: 'Inter', Arial, sans-serif !important;







  flex-direction: row !important;







}















.suggestion-chip:hover {







  background: var(--v3-surface2) !important;







  border-color: var(--v3-border2) !important;







  color: var(--v3-text) !important;







  transform: translateY(-2px) !important;







  box-shadow: var(--v3-shadow-md) !important;







}















/* ── 9. MESAJ BALONCULARI ───────────────────────────────────────── */







.message.user,







.message.assistant {







  display: flex !important;







  width: 100% !important;







  padding: 4px 0 !important;







  box-sizing: border-box !important;







  background: none !important;







  border: none !important;







  box-shadow: none !important;







  border-radius: 0 !important;







  animation: v3MsgIn 0.22s ease both !important;







}















/* Kullanıcı mesajı — sağa hizalı */







.message.user {







  justify-content: flex-end !important;







}















.message.user .message-inner,







.message.user .msg-content {







  background: #32281900 !important;







  border-radius: 18px 18px 4px 18px !important;







  padding: 12px 16px !important;







  max-width: 100% !important;







  color: var(--v3-text) !important;







  font-size: 0.9rem !important;







  line-height: 1.6 !important;







  word-break: break-word !important;







}















/* AI mesajı — sola hizalı, şeffaf */







.message.assistant {







  justify-content: flex-start !important;







}















.message.assistant .message-inner,







.message.assistant .msg-content {







  background: transparent !important;







  padding: 4px 0 !important;







  max-width: 100% !important;







  color: var(--v3-text) !important;







  font-size: 0.9rem !important;







  line-height: 1.7 !important;







  word-break: break-word !important;







}















/* Avatar */







.message-avatar,







.msg-avatar {







  width: 36px !important;







  height: 36px !important;







  border-radius: 50% !important;







  flex-shrink: 0 !important;







  display: flex !important;







  align-items: center !important;







  justify-content: center !important;







  font-size: 0.78rem !important;







  font-weight: 600 !important;







  overflow: hidden !important;







}















/* Mesaj aksiyonları (beğen, kopyala vb.) */







.message-actions,







.msg-actions {







  display: flex !important;







  align-items: center !important;







  gap: 4px !important;







  opacity: 0 !important;







  transition: opacity 0.18s ease !important;







  margin-top: 4px !important;







}















.message:hover .message-actions,







.message:hover .msg-actions {







  opacity: 1 !important;







}















.msg-action-btn {







  width: 28px !important;







  height: 28px !important;







  border-radius: 6px !important;







  border: none !important;







  background: transparent !important;







  color: var(--v3-text4) !important;







  cursor: pointer !important;







  display: flex !important;







  align-items: center !important;







  justify-content: center !important;







  transition: background 0.15s ease, color 0.15s ease !important;







}















.msg-action-btn:hover {







  background: var(--v3-hover) !important;







  color: var(--v3-text2) !important;







}















/* ── 10. INPUT ALANI ────────────────────────────────────────────── */







.input-wrapper {







  flex-shrink: 0 !important;







  width: 100% !important;







  padding: 10px 16px 16px !important;







  box-sizing: border-box !important;







  background: var(--v3-bg) !important;







  position: relative !important;







  z-index: 20 !important;







  border-top: none !important;







  overflow: visible !important;







}















.input-area {







  max-width: 768px !important;







  width: 100% !important;







  margin-left: auto !important;







  margin-right: auto !important;







  box-sizing: border-box !important;







  padding: 0 !important;







  overflow: visible !important;







  position: relative !important;







}















.input-box {







  width: 100% !important;







  box-sizing: border-box !important;







  border-radius: 16px !important;







  background: var(--v3-input-bg) !important;







  border: 1px solid var(--v3-border2) !important;







  box-shadow: var(--v3-input-shadow) !important;







  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;







  overflow: hidden !important;







}















.input-box:focus-within {







  border-color: var(--v3-border2) !important;







  box-shadow: 0 4px 24px rgba(0,0,0,0.12) !important;







}















[data-theme="dark"] .input-box:focus-within {







  box-shadow: 0 4px 24px rgba(0,0,0,0.4) !important;







}















.input-row {







  display: flex !important;







  align-items: flex-end !important;







  padding: 12px 14px 4px !important;







  gap: 8px !important;







}















#message-input {







  flex: 1 !important;







  border: none !important;







  outline: none !important;







  background: transparent !important;







  color: var(--v3-text) !important;







  font-size: 0.92rem !important;







  font-family: 'Inter', Arial, sans-serif !important;







  line-height: 1.6 !important;







  resize: none !important;







  min-height: 24px !important;







  max-height: 200px !important;







  overflow-y: auto !important;







  padding: 0 !important;







  scrollbar-width: thin !important;







}















#message-input::placeholder {







  color: var(--v3-text4) !important;







}















.input-actions {







  display: flex !important;







  align-items: center !important;







  justify-content: space-between !important;







  padding: 6px 10px 10px !important;







  gap: 6px !important;







}















.input-actions-left,







.input-actions-right {







  display: flex !important;







  align-items: center !important;







  gap: 4px !important;







}















/* Input araç butonları */







.btn-tool {







  width: 45px !important;







  height: 32px !important;







  border-radius: 4px !important;







  border: none !important;







  background: transparent !important;







  color: var(--v3-text3) !important;







  cursor: pointer !important;







  display: flex !important;







  align-items: center !important;







  justify-content: center !important;







  transition: background 0.18s ease, color 0.18s ease, transform 0.2s ease !important;







  flex-shrink: 0 !important;







}















.btn-tool:hover {







  background: var(--v3-hover) !important;







  color: var(--v3-text) !important;







  transform: scale(1.05) !important;







}















/* Gönder butonu */







.btn-send {







  width: 34px !important;







  height: 34px !important;







  border-radius: 10px !important;







  border: none !important;







  background: var(--v3-btn-bg) !important;







  color: var(--v3-btn-text) !important;







  cursor: pointer !important;







  display: flex !important;







  align-items: center !important;







  justify-content: center !important;







  transition: background 0.18s ease, transform 0.2s ease, opacity 0.18s ease !important;







  flex-shrink: 0 !important;







}















.btn-send:hover:not(:disabled) {







  background: var(--v3-btn-hover) !important;







  transform: scale(1.05) !important;







}















.btn-send:disabled {







  background: var(--v3-btn-disabled) !important;







  cursor: not-allowed !important;







  opacity: 0.5 !important;







}















/* Ek önizleme */







.attachments-preview {







  padding: 0 14px !important;







  display: flex !important;







  flex-wrap: wrap !important;







  gap: 8px !important;







}















.attachments-preview:empty {







  display: none !important;







}















/* ── 11. SPEED PICKER & DROPDOWN FIX ───────────────────────────── */







.speed-picker {







  position: relative !important;







}















.speed-picker-btn {







  display: flex !important;







  align-items: center !important;







  gap: 4px !important;







  padding: 5px 10px !important;







  border-radius: 8px !important;







  border: 1px solid var(--v3-border) !important;







  background: transparent !important;







  color: var(--v3-text3) !important;







  font-size: 0.78rem !important;







  font-weight: 500 !important;







  cursor: pointer !important;







  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease !important;







  font-family: 'Inter', Arial, sans-serif !important;







  white-space: nowrap !important;







}















.speed-picker-btn:hover {







  background: var(--v3-hover) !important;







  border-color: var(--v3-border2) !important;







  color: var(--v3-text) !important;







}















.speed-chevron {







  transition: transform 0.2s ease !important;







  opacity: 0.6 !important;







}















/* KRITIK: Dropdown her zaman input'un ÜSTÜNDE açılır */







.speed-picker-dropdown {







  position: absolute !important;







  bottom: calc(100% + 8px) !important;







  right: 0 !important;







  width: 240px !important;







  background: var(--v3-card) !important;







  border: 1px solid var(--v3-border) !important;







  border-radius: 14px !important;







  box-shadow: var(--v3-shadow-lg) !important;







  z-index: 9999 !important;







  padding: 6px !important;







  animation: v3FadeUp 0.18s ease both !important;







  display: none !important;







}















.speed-picker-dropdown.open {







  display: block !important;







}















.speed-picker-option {







  display: flex !important;







  align-items: center !important;







  gap: 10px !important;







  padding: 10px 12px !important;







  border-radius: 10px !important;







  border: none !important;







  background: transparent !important;







  color: var(--v3-text2) !important;







  font-size: 0.83rem !important;







  cursor: pointer !important;







  width: 100% !important;







  text-align: left !important;







  transition: background 0.15s ease, color 0.15s ease !important;







  font-family: 'Inter', Arial, sans-serif !important;







}















.speed-picker-option:hover,







.speed-picker-option.active {







  background: var(--v3-hover) !important;







  color: var(--v3-text) !important;







}















.speed-option-icon {







  width: 28px !important;







  height: 28px !important;







  border-radius: 8px !important;







  background: var(--v3-surface2) !important;







  display: flex !important;







  align-items: center !important;







  justify-content: center !important;







  flex-shrink: 0 !important;







  color: var(--v3-text2) !important;







}















.speed-option-info {







  display: flex !important;







  flex-direction: column !important;







  gap: 2px !important;







}















.speed-option-name {







  font-weight: 500 !important;







  color: var(--v3-text) !important;







  font-size: 0.83rem !important;







}















.speed-option-desc {







  font-size: 0.72rem !important;







  color: var(--v3-text4) !important;







}















/* Karakter sayacı */







.char-count {







  font-size: 0.72rem !important;







  color: var(--v3-text4) !important;







  font-family: 'Inter', Arial, sans-serif !important;







}















/* ── 12. BUTON SİSTEMİ ──────────────────────────────────────────── */







.btn-primary {







  display: inline-flex !important;







  align-items: center !important;







  justify-content: center !important;







  gap: 6px !important;







  padding: 10px 20px !important;







  border-radius: 12px !important;







  border: none !important;







  background: var(--v3-btn-bg) !important;







  color: var(--v3-btn-text) !important;







  font-size: 0.88rem !important;







  font-weight: 500 !important;







  cursor: pointer !important;







  transition: background 0.2s ease, transform 0.2s ease !important;







  font-family: 'Inter', Arial, sans-serif !important;







  text-decoration: none !important;







}















.btn-primary:hover {







  background: var(--v3-btn-hover) !important;







  transform: scale(1.03) !important;







}















.btn-primary:disabled {







  opacity: 0.5 !important;







  cursor: not-allowed !important;







  transform: none !important;







}















.btn-secondary {







  display: inline-flex !important;







  align-items: center !important;







  justify-content: center !important;







  gap: 6px !important;







  padding: 10px 20px !important;







  border-radius: 12px !important;







  border: 1px solid var(--v3-border) !important;







  background: transparent !important;







  color: var(--v3-text2) !important;







  font-size: 0.88rem !important;







  font-weight: 500 !important;







  cursor: pointer !important;







  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;







  font-family: 'Inter', Arial, sans-serif !important;







  text-decoration: none !important;







}















.btn-secondary:hover {







  background: var(--v3-hover) !important;







  border-color: var(--v3-border2) !important;







  transform: scale(1.03) !important;







}















.btn-accent {







  display: inline-flex !important;







  align-items: center !important;







  justify-content: center !important;







  gap: 6px !important;







  padding: 10px 20px !important;







  border-radius: 12px !important;







  border: none !important;







  background: var(--v3-accent) !important;







  color: #fff !important;







  font-size: 0.88rem !important;







  font-weight: 500 !important;







  cursor: pointer !important;







  transition: opacity 0.2s ease, transform 0.2s ease !important;







  font-family: 'Inter', Arial, sans-serif !important;







  text-decoration: none !important;







}















.btn-accent:hover {







  opacity: 0.88 !important;







  transform: scale(1.03) !important;







}















/* ── 13. KART TASARIMI ──────────────────────────────────────────── */







.card,







.settings-card,







.profile-card,







.plan-card,







.workspace-card {







  background: var(--v3-card) !important;







  border: 1px solid var(--v3-border) !important;







  border-radius: 16px !important;







  padding: 24px !important;







  box-shadow: var(--v3-shadow-sm) !important;







  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;







}















.card:hover {







  box-shadow: var(--v3-shadow-md) !important;







}















/* ── 14. MODAL SİSTEMİ ──────────────────────────────────────────── */







/* KRITIK: display:none inline style'ı override etmemek için display kuralı YOK */







/* Modal açma/kapama tamamen JS tarafından yönetilir (style="display:none/flex") */







.modal {







  position: fixed !important;







  inset: 0 !important;







  z-index: 99990 !important;







  align-items: center !important;







  justify-content: center !important;







  padding: 16px !important;







}















.modal-overlay {







  position: absolute !important;







  inset: 0 !important;







  background: rgba(0,0,0,0.5) !important;







  backdrop-filter: none;







  -webkit-backdrop-filter: none;







}















.modal-box {







  position: relative !important;







  z-index: 99999 !important;







  background: var(--v3-card) !important;







  border: 1px solid var(--v3-border) !important;







  border-radius: 20px !important;







  box-shadow: var(--v3-shadow-lg) !important;







  width: 100% !important;







  max-width: 520px !important;







  max-height: 90vh !important;







  overflow-y: auto !important;







  animation: v3ModalIn 0.25s ease both !important;







}















.modal-box.modal-lg {







  max-width: 720px !important;







}















.modal-header {







  display: flex !important;







  align-items: center !important;







  justify-content: space-between !important;







  padding: 20px 24px 16px !important;







  border-bottom: 1px solid var(--v3-border) !important;







}















.modal-header h3 {







  font-size: 1rem !important;







  font-weight: 600 !important;







  color: var(--v3-text) !important;







  margin: 0 !important;







}















.modal-header button {







  width: 32px !important;







  height: 32px !important;







  border-radius: 8px !important;







  border: none !important;







  background: transparent !important;







  color: var(--v3-text3) !important;







  cursor: pointer !important;







  display: flex !important;







  align-items: center !important;







  justify-content: center !important;







  transition: background 0.18s ease, color 0.18s ease !important;







}















.modal-header button:hover {







  background: var(--v3-hover) !important;







  color: var(--v3-text) !important;







}















.modal-body {







  padding: 20px 24px !important;







}















.modal-footer {







  display: flex !important;







  align-items: center !important;







  justify-content: flex-end !important;







  gap: 8px !important;







  padding: 16px 24px 20px !important;







  border-top: 1px solid var(--v3-border) !important;







}















/* Form elemanları */







.form-group {







  display: flex !important;







  flex-direction: column !important;







  gap: 6px !important;







  margin-bottom: 16px !important;







}















.form-group label {







  font-size: 0.82rem !important;







  font-weight: 500 !important;







  color: var(--v3-text2) !important;







}















.form-group input,







.form-group textarea,







.form-group select {







  background: var(--v3-input-bg) !important;







  border: 1px solid var(--v3-border2) !important;







  border-radius: 10px !important;







  padding: 10px 14px !important;







  color: var(--v3-text) !important;







  font-size: 0.88rem !important;







  font-family: 'Inter', Arial, sans-serif !important;







  outline: none !important;







  transition: border-color 0.2s ease !important;







  width: 100% !important;







  box-sizing: border-box !important;







}















.form-group input:focus,







.form-group textarea:focus,







.form-group select:focus {







  border-color: var(--v3-accent) !important;







}















.form-group input::placeholder,







.form-group textarea::placeholder {







  color: var(--v3-text4) !important;







}















.form-row {







  display: grid !important;







  grid-template-columns: 1fr 1fr !important;







  gap: 16px !important;







}















/* Range input */







input[type="range"] {







  accent-color: var(--v3-accent) !important;







}















/* ── 15. ANİMASYONLAR ───────────────────────────────────────────── */







@keyframes v3FadeIn {







  from { opacity: 0; transform: translateY(6px); }







  to   { opacity: 1; transform: translateY(0); }







}















@keyframes v3FadeUp {







  from { opacity: 0; transform: translateY(8px); }







  to   { opacity: 1; transform: translateY(0); }







}















@keyframes v3MsgIn {







  from { opacity: 0; transform: translateY(8px); }







  to   { opacity: 1; transform: translateY(0); }







}















@keyframes v3ModalIn {







  from { opacity: 0; transform: scale(0.96) translateY(8px); }







  to   { opacity: 1; transform: scale(1) translateY(0); }







}















@keyframes v3SlideIn {







  from { opacity: 0; transform: translateX(-8px); }







  to   { opacity: 1; transform: translateX(0); }







}















/* Typing indicator */







.typing-indicator,







.typing-dots {







  display: flex !important;







  align-items: center !important;







  gap: 4px !important;







  padding: 12px 0 !important;







}















.typing-dot {







  width: 6px !important;







  height: 6px !important;







  border-radius: 50% !important;







  background: var(--v3-text4) !important;







  animation: v3TypingBounce 1.2s ease infinite !important;







}















.typing-dot:nth-child(2) { animation-delay: 0.2s !important; }







.typing-dot:nth-child(3) { animation-delay: 0.4s !important; }















@keyframes v3TypingBounce {







  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }







  30%            { transform: translateY(-6px); opacity: 1; }







}















/* ── 16. SCROLLBAR ──────────────────────────────────────────────── */







* {







  scrollbar-width: thin;







  scrollbar-color: var(--v3-border) transparent;







}















*::-webkit-scrollbar { width: 5px; height: 5px; }







*::-webkit-scrollbar-thumb {







  background: var(--v3-border);







  border-radius: 3px;







}







*::-webkit-scrollbar-track { background: transparent; }















/* ── 17. FOOTER ─────────────────────────────────────────────────── */







.input-footer {







  text-align: center !important;







  font-size: 0.72rem !important;







  color: var(--v3-text4) !important;







  padding: 6px 0 0 !important;







  line-height: 1.5 !important;







  font-family: 'Inter', Arial, sans-serif !important;







}















/* ── 18. MOBİL RESPONSIVE ──────────────────────────────────────── */







@media (max-width: 768px) {







  /* Sidebar mobilde drawer olarak çalışır */







  .sidebar {







    position: fixed !important;







    top: 0 !important;







    left: 0 !important;







    height: 100vh !important;







    width: 280px !important;







    min-width: 280px !important;







    max-width: 280px !important;







    transform: translateX(-100%) !important;







    z-index: 200 !important;







    box-shadow: var(--v3-shadow-lg) !important;







  }















  .sidebar.open {







    transform: translateX(0) !important;







  }















  /* Collapsed modda da tam genişlik göster */







  .sidebar.collapsed {







    width: 280px !important;







    min-width: 280px !important;







    max-width: 280px !important;







  }















  /* Overlay mobilde sadece aktifken görünür ve tıklanabilir */







  .sidebar-overlay {







    display: block !important;







    pointer-events: none;







  }















  .sidebar-overlay.active {







    pointer-events: auto !important;







  }















  /* Mobil header görünür */







  .mobile-page-header {







    display: flex !important;







  }















  /* Chat main mobilde: flex:1 ile app-with-sidebar içinde kalan alanı doldur */







  .chat-main {







    padding-top: 0 !important;







    flex: 1 1 0 !important;







    min-height: 0 !important;







    min-width: 0 !important;







    display: flex !important;







    flex-direction: column !important;







    overflow: hidden !important;







    box-sizing: border-box !important;







    /* height: 100dvh KULLANMA — app-with-sidebar flex:1 ile yönetiliyor */







  }















  /* Mesaj alanı: padding-top gerekmez (header artık sticky flex içinde) */







  .chat-main #messages,







  .chat-main .messages-container {







    padding-top: 0 !important;







  }















  /* Input wrapper mobilde her zaman görünür ve altta sabit */







  .input-wrapper {







    flex-shrink: 0 !important;







    width: 100% !important;







    position: relative !important;







    z-index: 20 !important;







    display: block !important;







    visibility: visible !important;







    opacity: 1 !important;







    overflow: visible !important;







  }















  /* Messages container kalan alanı doldursun */







  .messages-container,







  #messages.messages-container {







    flex: 1 1 0 !important;







    min-height: 0 !important;







    overflow-y: auto !important;







  }















  /* Topbar mobilde gizlenir (mobile-page-header kullanılır) */







  .topbar {







    display: none !important;







  }















  /* Mesajlar tam geniÅŸlik */







  .messages-container > .message,







  .messages-container > .message-wrapper {







    max-width: 100% !important;







  }















  /* Kullanıcı mesajı mobilde daha geniş */







  .message.user .message-inner,







  .message.user .msg-content {







    max-width: 88% !important;







  }















  /* Input alanı mobilde */







  .input-wrapper {







    padding: 8px 12px 12px !important;







  }















  /* Öneri kartları mobilde 2 kolon */







  .suggestion-pills {







    grid-template-columns: repeat(2, 1fr) !important;







  }















  /* Modal tam ekran */







  .modal {







    padding: 0 !important;







    align-items: flex-end !important;







  }















  .modal-box {







    border-radius: 20px 20px 0 0 !important;







    max-height: 92vh !important;







    max-width: 100% !important;







  }















  /* Speed picker dropdown mobilde tam geniÅŸlik */







  .speed-picker-dropdown {







    right: auto !important;







    left: 0 !important;







    width: 260px !important;







  }















  /* Form row mobilde tek kolon */







  .form-row {







    grid-template-columns: 1fr !important;







  }















  /* Sidebar nav item metinleri mobilde görünür */







  .sidebar.open .sidebar-nav-item > span:not(.sb-badge-beta) {







    opacity: 1 !important;







    width: auto !important;







  }















  .sidebar.open .sidebar-nav-item {







    justify-content: flex-start !important;







    padding: 9px 10px !important;







  }















  .sidebar.open .sb-new-chat-full span {







    opacity: 1 !important;







    width: auto !important;







  }















  .sidebar.open .sidebar-logo-text {







    opacity: 1 !important;







    width: auto !important;







  }















  /* chat-main: app-with-sidebar flex:1 ile yönetiliyor, height sabit değil */







}















/* Çok küçük ekranlar */







@media (max-width: 400px) {







  .suggestion-pills {







    grid-template-columns: 1fr !important;







  }















  .input-actions-left {







    gap: 2px !important;







  }















  .btn-tool {







    width: 28px !important;







    height: 28px !important;







  }







}















/* ── 19. TABLET (768px - 1024px) ────────────────────────────────── */







@media (min-width: 769px) and (max-width: 1024px) {







  .sidebar {







    width: 220px !important;







    min-width: 220px !important;







    max-width: 220px !important;







  }















  .sidebar.collapsed {







    width: 70px !important;







    min-width: 70px !important;







    max-width: 70px !important;







  }







}















/* ── 20. YARDIMCI SINIFLAR ──────────────────────────────────────── */















/* Toast bildirimleri */







.toast,







.toast-notification {







  position: fixed !important;







  bottom: 24px !important;







  left: 50% !important;







  transform: translateX(-50%) !important;







  background: var(--v3-card) !important;







  border: 1px solid var(--v3-border) !important;







  border-radius: 12px !important;







  padding: 12px 20px !important;







  font-size: 0.84rem !important;







  color: var(--v3-text) !important;







  box-shadow: var(--v3-shadow-lg) !important;







  z-index: 99999 !important;







  animation: v3FadeIn 0.25s ease both !important;







  white-space: nowrap !important;







  font-family: 'Inter', Arial, sans-serif !important;







}















.toast.success { border-color: var(--border-control) !important; }







.toast.error   { border-color: var(--border-control) !important; }







.toast.warning { border-color: var(--border-control) !important; }















/* Duyuru bandı */







.announcement {







  display: flex !important;







  align-items: center !important;







  justify-content: space-between !important;







  gap: 12px !important;







  padding: 10px 16px !important;







  font-size: 0.82rem !important;







  border-bottom: 1px solid var(--v3-border) !important;







  flex-shrink: 0 !important;







}















.announcement-info    { background: rgba(80,80,80,0.08) !important; color: var(--v3-accent2) !important; }







.announcement-success { background: rgba(16,163,127,0.08) !important; color: var(--v3-accent) !important; }







.announcement-warning { background: var(--surface2) !important; color: var(--text2) !important; }







.announcement-error   { background: var(--surface2) !important; color: var(--text2) !important; }















.announcement button {







  width: 24px !important;







  height: 24px !important;







  border-radius: 6px !important;







  border: none !important;







  background: transparent !important;







  color: inherit !important;







  cursor: pointer !important;







  display: flex !important;







  align-items: center !important;







  justify-content: center !important;







  flex-shrink: 0 !important;







  opacity: 0.7 !important;







  transition: opacity 0.15s ease !important;







}















.announcement button:hover { opacity: 1 !important; }















/* Kod bloÄŸu */







/* ══════════════════════════════════════════════════════════════







   23. KOD BLOGU — ChatGPT / Claude seviyesinde modern gorunum







   Tum mevcut CSS dosyalarini override eder.







   Dark/Light tema CSS degiskenleri uzerinden yonetilir.







══════════════════════════════════════════════════════════════ */















/* Kod blogu CSS degiskenleri */







[data-theme="light"] {







  --cb-bg:               #f7f7f8;







  --cb-header-bg:        #ebebec;







  --cb-border:           #e0e0e1;







  --cb-text:             #1e1e2e;







  --cb-lang-color:       #555;







  --cb-btn-color:        #666;







  --cb-btn-hover-bg:     rgba(0,0,0,0.07);







  --cb-btn-hover-border: rgba(0,0,0,0.14);







  --cb-btn-hover-color:  #050816;







  --cb-expand-bg:        #ebebec;







  --cb-expand-hover:     #dededf;







  --cb-shadow:           0 2px 12px rgba(0,0,0,0.07);







}















[data-theme="dark"] {







  --cb-bg:               #1e1e1e;







  --cb-header-bg:        #2a2a2a;







  --cb-border:          #484848;







  --cb-text:             #e2e2f0;







  --cb-lang-color:       #aaa;







  --cb-btn-color:        #888;







  --cb-btn-hover-bg:     rgba(255,255,255,0.1);







  --cb-btn-hover-border: rgba(255,255,255,0.18);







  --cb-btn-hover-color: #e2e2f0;







  --cb-expand-bg:        #252525;







  --cb-expand-hover:     #2f2f2f;







  --cb-shadow:           0 2px 16px rgba(0,0,0,0.4);







}















/* Ana pre sarmalayici */







.code-block-wrap {







  margin: 10px 0 !important;







  border-radius: 12px !important;







  overflow: hidden !important;







  border: 1px solid var(--cb-border) !important;







  box-shadow: var(--cb-shadow) !important;







  background: var(--cb-bg) !important;







  max-height: none !important;







  position: relative !important;







}















pre,







.code-block {







  border-radius: 12px !important;







  overflow: hidden !important;







  margin: 10px 0 !important;







  background: var(--cb-bg) !important;







  border: 1px solid var(--cb-border) !important;







  box-shadow: var(--cb-shadow) !important;







}















.code-block-wrap pre {







  margin: 0 !important;







  border: none !important;







  border-radius: 0 !important;







  box-shadow: none !important;







  background: transparent !important;







}















/* Kod icerigi */







pre code,







.message-content pre code {







  display: block !important;







  padding: 16px 18px !important;







  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', 'Monaco', monospace !important;







  font-size: 0.855rem !important;







  line-height: 1.7 !important;







  overflow-x: auto !important;







  color: var(--cb-text) !important;







  background: transparent !important;







  tab-size: 2 !important;







  -moz-tab-size: 2 !important;







  white-space: pre !important;







  word-break: normal !important;







  word-wrap: normal !important;







}















/* Satir ici kod */







code:not(pre code),







.message-content code:not(pre code) {







  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important;







  font-size: 0.84em !important;







  padding: 2px 6px !important;







  border-radius: 5px !important;







  background: var(--cb-header-bg) !important;







  border: 1px solid var(--cb-border) !important;







  color: var(--v3-accent) !important;







  word-break: break-word !important;







}















/* Kod blogu header */







.code-header {







  display: flex !important;







  align-items: center !important;







  justify-content: space-between !important;







  padding: 0 12px !important;







  height: 44px !important;







  min-height: 44px !important;







  background: var(--cb-header-bg) !important;







  border-bottom: 1px solid var(--cb-border) !important;







  border-radius: 12px 12px 0 0 !important;







  gap: 8px !important;







  position: sticky !important;







  top: 0 !important;







  z-index: 10 !important;







  flex-shrink: 0 !important;







}















/* Sol: dil badge */







.code-header-left {







  display: flex !important;







  align-items: center !important;







  gap: 8px !important;







  flex: 1 !important;







  min-width: 0 !important;







}















.code-lang-badge,







.code-lang {







  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important;







  font-size: 0.72rem !important;







  font-weight: 600 !important;







  text-transform: uppercase !important;







  letter-spacing: 0.06em !important;







  color: var(--cb-lang-color) !important;







  white-space: nowrap !important;







  user-select: none !important;







}















/* Sag: aksiyon butonlari */







.code-header-actions {







  display: flex !important;







  align-items: center !important;







  gap: 3px !important;







  flex-shrink: 0 !important;







}















.btn-copy-code,







.btn-edit-code,







.btn-download-code,







.btn-preview-code {







  display: inline-flex !important;







  align-items: center !important;







  gap: 5px !important;







  padding: 5px 10px !important;







  border-radius: 7px !important;







  border: 1px solid transparent !important;







  background: transparent !important;







  color: var(--cb-btn-color) !important;







  font-size: 0.72rem !important;







  font-weight: 500 !important;







  cursor: pointer !important;







  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;







  font-family: 'Inter', Arial, sans-serif !important;







  white-space: nowrap !important;







  line-height: 1 !important;







}















.btn-copy-code:hover,







.btn-edit-code:hover,







.btn-download-code:hover {







  background: var(--cb-btn-hover-bg) !important;







  border-color: var(--cb-btn-hover-border) !important;







  color: var(--cb-btn-hover-color) !important;







}















.btn-preview-code:hover,







.btn-preview-code.active {







  background: rgba(80,80,80,0.1) !important;







  border-color: rgba(120,120,120,0.25) !important;







  color: var(--v3-accent) !important;







}















.btn-copy-code.copied {







  color: var(--v3-accent) !important;







  background: rgba(80,80,80,0.08) !important;







  border-color: rgba(120,120,120,0.2) !important;







}















/* Uzun kod collapse butonu */







.code-expand-btn {







  display: flex !important;







  align-items: center !important;







  justify-content: center !important;







  gap: 6px !important;







  width: 100% !important;







  padding: 9px 14px !important;







  background: var(--cb-expand-bg) !important;







  border: none !important;







  border-top: 1px solid var(--cb-border) !important;







  color: var(--cb-btn-color) !important;







  font-size: 0.75rem !important;







  font-weight: 500 !important;







  cursor: pointer !important;







  transition: background 0.15s ease, color 0.15s ease !important;







  border-radius: 0 0 12px 12px !important;







  font-family: 'Inter', Arial, sans-serif !important;







}















.code-expand-btn:hover {







  background: var(--cb-expand-hover) !important;







  color: var(--cb-btn-hover-color) !important;







}















/* Syntax highlight: hljs override — Dark tema */







[data-theme="dark"] .hljs { background: var(--cb-bg) !important; color: #abb2bf !important; }







[data-theme="dark"] .hljs-keyword,







[data-theme="dark"] .hljs-selector-tag,







[data-theme="dark"] .hljs-built_in { color: #c678dd !important; }







[data-theme="dark"] .hljs-string,







[data-theme="dark"] .hljs-attr { color: #98c379 !important; }







[data-theme="dark"] .hljs-number,







[data-theme="dark"] .hljs-literal { color: #d19a66 !important; }







[data-theme="dark"] .hljs-comment { color: #5c6370 !important; font-style: italic !important; }







[data-theme="dark"] .hljs-function,







[data-theme="dark"] .hljs-title { color: #61afef !important; }







[data-theme="dark"] .hljs-variable,







[data-theme="dark"] .hljs-name { color: #e06c75 !important; }







[data-theme="dark"] .hljs-type,







[data-theme="dark"] .hljs-class { color: #e5c07b !important; }







[data-theme="dark"] .hljs-tag { color: #e06c75 !important; }







[data-theme="dark"] .hljs-attribute { color: #d19a66 !important; }







[data-theme="dark"] .hljs-meta { color: #56b6c2 !important; }







[data-theme="dark"] .hljs-property { color: #56b6c2 !important; }















/* Syntax highlight: hljs override — Light tema */







[data-theme="light"] .hljs { background: var(--cb-bg) !important; color: #383a42 !important; }







[data-theme="light"] .hljs-keyword,







[data-theme="light"] .hljs-selector-tag,







[data-theme="light"] .hljs-built_in { color: #a626a4 !important; }







[data-theme="light"] .hljs-string,







[data-theme="light"] .hljs-attr { color: #50a14f !important; }







[data-theme="light"] .hljs-number,







[data-theme="light"] .hljs-literal { color: #986801 !important; }







[data-theme="light"] .hljs-comment { color: #a0a1a7 !important; font-style: italic !important; }







[data-theme="light"] .hljs-function,







[data-theme="light"] .hljs-title { color: #4078f2 !important; }







[data-theme="light"] .hljs-variable,







[data-theme="light"] .hljs-name { color: #e45649 !important; }







[data-theme="light"] .hljs-type,







[data-theme="light"] .hljs-class { color: #c18401 !important; }







[data-theme="light"] .hljs-tag { color: #e45649 !important; }







[data-theme="light"] .hljs-attribute { color: #986801 !important; }







[data-theme="light"] .hljs-meta { color: #0184bc !important; }







[data-theme="light"] .hljs-property { color: #0184bc !important; }















/* Kod onizleme frame */







.code-preview-frame {







  border-top: 1px solid var(--cb-border) !important;







  background: var(--v3-bg) !important;







  border-radius: 0 0 12px 12px !important;







  overflow: hidden !important;







}















.code-preview-bar {







  display: flex !important;







  align-items: center !important;







  gap: 8px !important;







  padding: 8px 12px !important;







  background: var(--cb-header-bg) !important;







  border-bottom: 1px solid var(--cb-border) !important;







}















.code-preview-dots {







  display: flex !important;







  gap: 5px !important;







  flex-shrink: 0 !important;







}















.cpd { width: 10px !important; height: 10px !important; border-radius: 50% !important; }







.cpd-red    { background: #ff5f57 !important; }







.cpd-yellow { background: #febc2e !important; }







.cpd-green  { background: #28c840 !important; }















.code-preview-bar-label {







  flex: 1 !important;







  text-align: center !important;







  font-size: 0.72rem !important;







  color: var(--cb-btn-color) !important;







  font-family: 'Inter', Arial, sans-serif !important;







}















.code-preview-close {







  width: 22px !important;







  height: 22px !important;







  border-radius: 5px !important;







  border: none !important;







  background: transparent !important;







  color: var(--cb-btn-color) !important;







  cursor: pointer !important;







  display: flex !important;







  align-items: center !important;







  justify-content: center !important;







  transition: background 0.15s ease !important;







  flex-shrink: 0 !important;







}















.code-preview-close:hover {







  background: var(--cb-btn-hover-bg) !important;







  color: var(--cb-btn-hover-color) !important;







}















.code-preview-frame iframe {







  width: 100% !important;







  min-height: 280px !important;







  max-height: 480px !important;







  border: none !important;







  display: block !important;







  background: #fff !important;







}















/* Monaco / Kod editor popup */







.code-editor-overlay {







  position: fixed !important;







  inset: 0 !important;







  background: rgba(0,0,0,0.6) !important;







  backdrop-filter: none;







  -webkit-backdrop-filter: none;







  z-index: 99990 !important;







  display: none !important;







  align-items: center !important;







  justify-content: center !important;







  padding: 20px !important;







}















.code-editor-overlay.open {







  display: flex !important;







}















.code-editor-dialog {







  background: var(--v3-card) !important;







  border: 1px solid var(--cb-border) !important;







  border-radius: 16px !important;







  box-shadow: 0 20px 60px rgba(0,0,0,0.4) !important;







  width: 100% !important;







  max-width: 860px !important;







  max-height: 90vh !important;







  display: flex !important;







  flex-direction: column !important;







  overflow: hidden !important;







  animation: v3ModalIn 0.25s ease both !important;







}















.code-editor-header {







  display: flex !important;







  align-items: center !important;







  justify-content: space-between !important;







  padding: 14px 18px !important;







  background: var(--cb-header-bg) !important;







  border-bottom: 1px solid var(--cb-border) !important;







  flex-shrink: 0 !important;







}















.code-editor-title {







  display: flex !important;







  align-items: center !important;







  gap: 8px !important;







  font-size: 0.88rem !important;







  font-weight: 600 !important;







  color: var(--v3-text) !important;







}















.code-editor-header-actions {







  display: flex !important;







  align-items: center !important;







  gap: 6px !important;







}















.code-editor-header-actions button {







  display: inline-flex !important;







  align-items: center !important;







  gap: 5px !important;







  padding: 6px 12px !important;







  border-radius: 8px !important;







  border: 1px solid var(--cb-border) !important;







  background: transparent !important;







  color: var(--cb-btn-color) !important;







  font-size: 0.78rem !important;







  font-weight: 500 !important;







  cursor: pointer !important;







  transition: background 0.15s ease, color 0.15s ease !important;







  font-family: 'Inter', Arial, sans-serif !important;







}















.code-editor-header-actions button:hover {







  background: var(--cb-btn-hover-bg) !important;







  color: var(--cb-btn-hover-color) !important;







}















.code-editor-close {







  width: 30px !important;







  height: 30px !important;







  padding: 0 !important;







  border-radius: 8px !important;







  justify-content: center !important;







}















.code-editor-body {







  flex: 1 !important;







  overflow: hidden !important;







  display: flex !important;







  flex-direction: column !important;







  min-height: 0 !important;







}















#code-editor-textarea {







  flex: 1 !important;







  width: 100% !important;







  min-height: 360px !important;







  padding: 16px 18px !important;







  background: var(--cb-bg) !important;







  color: var(--cb-text) !important;







  border: none !important;







  outline: none !important;







  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important;







  font-size: 0.875rem !important;







  line-height: 1.7 !important;







  resize: none !important;







  tab-size: 2 !important;







  -moz-tab-size: 2 !important;







  scrollbar-width: thin !important;







  scrollbar-color: var(--cb-border) transparent !important;







}















#code-editor-preview-pane {







  border-top: 1px solid var(--cb-border) !important;







  background: #fff !important;







}















#code-editor-iframe {







  width: 100% !important;







  height: 280px !important;







  border: none !important;







  display: block !important;







}















.code-editor-footer {







  display: flex !important;







  align-items: center !important;







  justify-content: space-between !important;







  padding: 12px 18px !important;







  background: var(--cb-header-bg) !important;







  border-top: 1px solid var(--cb-border) !important;







  flex-shrink: 0 !important;







}















.code-editor-stats {







  font-size: 0.72rem !important;







  color: var(--cb-btn-color) !important;







  font-family: 'JetBrains Mono', monospace !important;







}















.btn-ghost-sm {







  padding: 7px 14px !important;







  border-radius: 8px !important;







  border: 1px solid var(--cb-border) !important;







  background: transparent !important;







  color: var(--v3-text2) !important;







  font-size: 0.82rem !important;







  font-weight: 500 !important;







  cursor: pointer !important;







  transition: background 0.15s ease !important;







  font-family: 'Inter', Arial, sans-serif !important;







}















.btn-ghost-sm:hover { background: var(--v3-hover) !important; }















.btn-primary-sm {







  padding: 7px 14px !important;







  border-radius: 8px !important;







  border: none !important;







  background: var(--v3-btn-bg) !important;







  color: var(--v3-btn-text) !important;







  font-size: 0.82rem !important;







  font-weight: 500 !important;







  cursor: pointer !important;







  transition: background 0.15s ease !important;







  font-family: 'Inter', Arial, sans-serif !important;







}















.btn-primary-sm:hover { background: var(--v3-btn-hover) !important; }















/* Mobil: buton etiketleri gizle */







@media (max-width: 640px) {







  .code-header { height: 40px !important; min-height: 40px !important; padding: 0 10px !important; }







  .btn-copy-code .btn-label,







  .btn-edit-code .btn-label,







  .btn-download-code .btn-label,







  .btn-preview-code .btn-label { display: none !important; }







  .btn-copy-code,







  .btn-edit-code,







  .btn-download-code,







  .btn-preview-code { padding: 5px 7px !important; }







  .code-lang-badge, .code-lang { font-size: 0.68rem !important; }







  pre code, .message-content pre code { font-size: 0.8rem !important; padding: 12px 14px !important; }







  .code-editor-dialog { max-width: 100% !important; max-height: 100vh !important; border-radius: 0 !important; }







  #code-editor-textarea { min-height: 260px !important; font-size: 0.8rem !important; }







}















/* Yükleme spinner */







.spinner {







  width: 20px !important;







  height: 20px !important;







  border: 2px solid var(--v3-border) !important;







  border-top-color: var(--v3-text) !important;







  border-radius: 50% !important;







  animation: v3Spin 0.7s linear infinite !important;







}















@keyframes v3Spin {







  to { transform: rotate(360deg); }







}















/* BoÅŸ durum */







.empty-state {







  display: flex !important;







  flex-direction: column !important;







  align-items: center !important;







  justify-content: center !important;







  gap: 12px !important;







  padding: 48px 24px !important;







  text-align: center !important;







  color: var(--v3-text3) !important;







}















.empty-state svg {







  opacity: 0.4 !important;







}















.empty-state h3 {







  font-size: 1rem !important;







  font-weight: 600 !important;







  color: var(--v3-text2) !important;







  margin: 0 !important;







}















.empty-state p {







  font-size: 0.84rem !important;







  color: var(--v3-text3) !important;







  margin: 0 !important;







  max-width: 320px !important;







}















/* PWA banner */







#pwa-promo-banner {







  border-radius: 14px !important;







  border: 1px solid var(--v3-border) !important;







  background: var(--v3-card) !important;







  box-shadow: var(--v3-shadow-md) !important;







}















/* Genel yardımcılar */







.hidden { display: none !important; }







.sr-only {







  position: absolute !important;







  width: 1px !important;







  height: 1px !important;







  padding: 0 !important;







  margin: -1px !important;







  overflow: hidden !important;







  clip: rect(0,0,0,0) !important;







  white-space: nowrap !important;







  border: 0 !important;







}















/* App layout */







.app-with-sidebar {







  display: flex !important;







  width: 100% !important;







  min-height: 100vh !important;







}















/* Sayfa main alanları */







.settings-main,







.profile-main,







.pricing-main,







.page-main {







  flex: 1 !important;







  overflow-y: auto !important;







  min-width: 0 !important;







  min-height: 0 !important;







  background: var(--v3-bg) !important;







}















/* Sayfa içerik konteyneri */







.page-content,







.settings-content,







.profile-content {







  max-width: 800px !important;







  margin: 0 auto !important;







  padding: 32px 24px !important;







}















@media (max-width: 768px) {







  .page-content,







  .settings-content,







  .profile-content {







    padding: 20px 16px !important;







  }







}















/* Sayfa başlığı */







.page-header {







  margin-bottom: 28px !important;







}















.page-header h1 {







  font-size: 1.4rem !important;







  font-weight: 700 !important;







  color: var(--v3-text) !important;







  margin: 0 0 6px !important;







}















.page-header p {







  font-size: 0.88rem !important;







  color: var(--v3-text3) !important;







  margin: 0 !important;







}















/* ── SON: Tüm popup/dropdown'lar için global z-index güvencesi ── */







[id$="-dropdown"]:not([style*="display: none"]),







[id$="-popup"]:not([style*="display: none"]),







[id$="-menu"]:not([style*="display: none"]),







.dropdown-open,







.popup-open {







  z-index: 9999 !important;







}















/* ══════════════════════════════════════════════════════════════







   21. UZUN CEVAP IÇERIK KARTI (ChatGPT tarzi)







   Esik: 600 karakter veya 8 satir -> .msg-content-card wrapper







══════════════════════════════════════════════════════════════ */















/* Kart wrapper */







.msg-content-card {







  position: relative !important;







  background: var(--v3-card) !important;







  border: 1px solid var(--v3-border) !important;







  border-radius: 12px !important;







  padding: 16px 48px 16px 16px !important;







  margin: 2px 0 !important;







  box-shadow: var(--v3-shadow-sm) !important;







  transition: box-shadow 0.18s ease, border-color 0.18s ease !important;







  word-break: break-word !important;







  overflow: visible !important;







}















.msg-content-card:hover {







  box-shadow: var(--v3-shadow-md) !important;







  border-color: var(--v3-border2) !important;







}















[data-theme="dark"] .msg-content-card {







  background: #1e1e1e !important;







  border-color: #2a2a2a !important;







}















[data-theme="dark"] .msg-content-card:hover {







  border-color: #3a3a3a !important;







}















/* Kart icindeki message-content */







.msg-content-card .message-content {







  padding: 0 !important;







  background: transparent !important;







  border: none !important;







  box-shadow: none !important;







  max-height: none !important;







  overflow: visible !important;







}















/* Kopyala butonu (sag ust kose) */







.msg-card-copy-btn {







  position: absolute !important;







  top: 10px !important;







  right: 10px !important;







  width: 30px !important;







  height: 30px !important;







  border-radius: 7px !important;







  border: 1px solid var(--v3-border) !important;







  background: var(--v3-surface) !important;







  color: var(--v3-text3) !important;







  cursor: pointer !important;







  display: flex !important;







  align-items: center !important;







  justify-content: center !important;







  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease !important;







  opacity: 0 !important;







  z-index: 2 !important;







  flex-shrink: 0 !important;







}















.msg-content-card:hover .msg-card-copy-btn {







  opacity: 1 !important;







}















.msg-card-copy-btn:hover {







  background: var(--v3-hover) !important;







  color: var(--v3-text) !important;







  border-color: var(--v3-border2) !important;







}















.msg-card-copy-btn.copied {







  color: var(--v3-accent) !important;







  border-color: var(--v3-accent) !important;







  background: rgba(16,163,127,0.10) !important;







  opacity: 1 !important;







}















/* Tooltip */







.msg-card-copy-btn::after {







  content: attr(data-tooltip) !important;







  position: absolute !important;







  top: calc(100% + 6px) !important;







  right: 0 !important;







  background: #050816 !important;







  color: #fff !important;







  font-size: 0.72rem !important;







  font-weight: 500 !important;







  padding: 4px 8px !important;







  border-radius: 6px !important;







  white-space: nowrap !important;







  pointer-events: none !important;







  opacity: 0 !important;







  transform: translateY(-4px) !important;







  transition: opacity 0.15s ease, transform 0.15s ease !important;







  z-index: 10 !important;







}















.msg-card-copy-btn.show-tooltip::after {







  opacity: 1 !important;







  transform: translateY(0) !important;







}















[data-theme="dark"] .msg-card-copy-btn::after {







  background: #e5e5e5 !important;







  color: #050816 !important;







}















/* Streaming sirasinda kart yok */







.msg-content-card.streaming {







  background: transparent !important;







  border: none !important;







  box-shadow: none !important;







  padding: 0 !important;







}















.msg-content-card.streaming .msg-card-copy-btn {







  display: none !important;







}















/* Kart ici tipografi */







.msg-content-card p:first-child { margin-top: 0 !important; }







.msg-content-card p:last-child  { margin-bottom: 0 !important; }















.msg-content-card h1,







.msg-content-card h2,







.msg-content-card h3 {







  margin-top: 1.2em !important;







  margin-bottom: 0.5em !important;







}















.msg-content-card h1:first-child,







.msg-content-card h2:first-child,







.msg-content-card h3:first-child {







  margin-top: 0 !important;







}















.msg-content-card ul,







.msg-content-card ol {







  padding-left: 1.4em !important;







  margin: 0.5em 0 !important;







}















.msg-content-card pre {







  margin: 12px 0 !important;







  border-radius: 8px !important;







  overflow: hidden !important;







}















/* ══════════════════════════════════════════════════════════════







   22. CHATGPT COMPOSER — Yeni input alanı sistemi







   Tüm .input-box yerini .composer-box alır







══════════════════════════════════════════════════════════════ */















/* Eski input-box'ı gizle, composer-box'ı göster */







.input-box {







  display: none !important;







}















/* Composer ana kutu */







.composer-box {







  width: 100% !important;







  max-width: 100% !important;







  box-sizing: border-box !important;







  border-radius: 20px !important;







  background: var(--v3-input-bg) !important;







  border: 1.5px solid var(--v3-border2) !important;







  box-shadow: 0 2px 16px rgba(0,0,0,0.08) !important;







  transition: border-color 0.2s ease, box-shadow 0.25s ease !important;







  overflow: visible !important;







  position: relative !important;







  min-width: 0 !important;







  z-index: 10 !important;







}















[data-theme="dark"] .composer-box {







  background: #ff353500 !important;







  border-color: rgba(255,255,255,0.12) !important;







  box-shadow: 0 2px 20px rgb(66 122 243) !important;







}















.composer-box:focus-within {







  border-color: rgba(120,120,120,0.5) !important;







  box-shadow: 0 4px 32px rgba(0,0,0,0.12), 0 0 0 3px rgba(120,120,120,0.08) !important;







}















[data-theme="dark"] .composer-box:focus-within {







  border-color: rgba(255,255,255,0.22) !important;







  box-shadow: 0 4px 32px rgba(0,0,0,0.5), 0 0 0 3px rgba(255,255,255,0.04) !important;







}















/* Textarea sarmalayici */







.composer-textarea-wrap {







  padding: 16px 18px 8px !important;







}















.composer-textarea-wrap textarea,







.composer-box #message-input {







  width: 100% !important;







  border: none !important;







  outline: none !important;







  background: transparent !important;







  color: var(--v3-text) !important;







  font-size: 0.95rem !important;







  font-family: 'Inter', Arial, sans-serif !important;







  line-height: 1.65 !important;







  resize: none !important;







  min-height: 28px !important;







  max-height: 240px !important;







  overflow-y: auto !important;







  padding: 0 !important;







  scrollbar-width: thin !important;







  display: block !important;







}















.composer-box #message-input::placeholder {







  color: var(--v3-text4) !important;







  font-size: 0.95rem !important;







}















/* Alt toolbar */







.composer-toolbar {







  display: flex !important;







  align-items: center !important;







  justify-content: space-between !important;







  padding: 8px 12px 12px !important;







  gap: 6px !important;







}















.composer-tools-left,







.composer-tools-right {







  display: flex !important;







  align-items: center !important;







  gap: 2px !important;







}















/* ── Öneri kartları (welcome screen) ── */







.suggestion-chip {







  display: flex !important;







  align-items: center !important;







  gap: 8px !important;







  padding: 10px 16px !important;







  background: var(--v3-surface) !important;







  border: 1px solid var(--v3-border) !important;







  border-radius: 12px !important;







  font-size: 0.84rem !important;







  font-weight: 500 !important;







  color: var(--v3-text2) !important;







  cursor: pointer !important;







  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;







  text-align: left !important;







  font-family: 'Inter', Arial, sans-serif !important;







}















.suggestion-chip:hover {







  background: var(--v3-surface2) !important;







  border-color: var(--v3-border2) !important;







  color: var(--v3-text) !important;







  transform: translateY(-2px) !important;







  box-shadow: var(--v3-shadow-md) !important;







}















.suggestion-chip-icon {







  font-size: 1rem !important;







  flex-shrink: 0 !important;







}















.suggestion-chip-text {







  white-space: nowrap !important;







}















/* ── ➕ Ekle dropdown ── */







.composer-add-wrap {







  position: relative !important;







}















.composer-add-btn {







  width: 32px !important;







  height: 32px !important;







  border-radius: 8px !important;







  border: 1px solid var(--v3-border) !important;







  background: transparent !important;







  color: var(--v3-text3) !important;







  cursor: pointer !important;







  display: flex !important;







  align-items: center !important;







  justify-content: center !important;







  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease !important;







  flex-shrink: 0 !important;







}















.composer-add-btn:hover {







  background: var(--v3-hover) !important;







  border-color: var(--v3-border2) !important;







  color: var(--v3-text) !important;







}















.composer-add-dropdown {







  position: absolute !important;







  bottom: calc(100% + 8px) !important;







  left: 0 !important;







  width: 240px !important;







  background: var(--v3-card) !important;







  border: 1px solid var(--v3-border) !important;







  border-radius: 14px !important;







  box-shadow: var(--v3-shadow-lg) !important;







  z-index: 9999 !important;







  padding: 6px !important;







  animation: v3FadeUp 0.18s ease both !important;







  display: none !important;







}















.composer-add-dropdown.open {







  display: block !important;







}















.composer-add-item {







  display: flex !important;







  align-items: center !important;







  gap: 10px !important;







  padding: 10px 12px !important;







  border-radius: 10px !important;







  border: none !important;







  background: transparent !important;







  color: var(--v3-text2) !important;







  font-size: 0.83rem !important;







  cursor: pointer !important;







  width: 100% !important;







  text-align: left !important;







  transition: background 0.15s ease, color 0.15s ease !important;







  font-family: 'Inter', Arial, sans-serif !important;







}















.composer-add-item:hover {







  background: var(--v3-hover) !important;







  color: var(--v3-text) !important;







}















.composer-add-item-icon {







  width: 30px !important;







  height: 30px !important;







  border-radius: 8px !important;







  background: var(--v3-surface2) !important;







  display: flex !important;







  align-items: center !important;







  justify-content: center !important;







  flex-shrink: 0 !important;







  color: var(--v3-text2) !important;







}















.composer-add-item-info {







  display: flex !important;







  flex-direction: column !important;







  gap: 1px !important;







}















.composer-add-item-name {







  font-weight: 500 !important;







  color: var(--v3-text) !important;







  font-size: 0.83rem !important;







}















.composer-add-item-desc {







  font-size: 0.7rem !important;







  color: var(--v3-text4) !important;







}















/* ── Mikrofon animasyonu ── */







.btn-mic-composer {







  position: relative !important;







}















.mic-icon-wrap,







.mic-wave-wrap {







  display: flex !important;







  align-items: center !important;







  justify-content: center !important;







  gap: 2px !important;







}















.mic-wave-bar {







  width: 3px !important;







  border-radius: 2px !important;







  background: var(--v3-accent) !important;







  animation: micWave 0.8s ease-in-out infinite !important;







}















.mic-wave-bar:nth-child(1) { height: 8px;  animation-delay: 0s; }







.mic-wave-bar:nth-child(2) { height: 14px; animation-delay: 0.1s; }







.mic-wave-bar:nth-child(3) { height: 18px; animation-delay: 0.2s; }







.mic-wave-bar:nth-child(4) { height: 14px; animation-delay: 0.3s; }







.mic-wave-bar:nth-child(5) { height: 8px;  animation-delay: 0.4s; }















@keyframes micWave {







  0%, 100% { transform: scaleY(0.5); opacity: 0.6; }







  50%       { transform: scaleY(1);   opacity: 1; }







}















.btn-mic-composer.recording {







  background: rgba(239,68,68,0.1) !important;







  color: #ef4444 !important;







}















/* ── Mod seçici dropdown ── */







.composer-mode-wrap {







  position: relative !important;







}















.composer-mode-btn {







  display: flex !important;







  align-items: center !important;







  gap: 5px !important;







  padding: 5px 10px !important;







  border-radius: 8px !important;







  border: 1px solid var(--v3-border) !important;







  background: transparent !important;







  color: var(--v3-text3) !important;







  font-size: 0.78rem !important;







  font-weight: 500 !important;







  cursor: pointer !important;







  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease !important;







  font-family: 'Inter', Arial, sans-serif !important;







  white-space: nowrap !important;







}















.composer-mode-btn:hover {







  background: var(--v3-hover) !important;







  border-color: var(--v3-border2) !important;







  color: var(--v3-text) !important;







}















.composer-mode-icon {







  font-size: 0.85rem !important;







  line-height: 1 !important;







}















.composer-mode-chevron {







  transition: transform 0.2s ease !important;







  opacity: 0.6 !important;







}















.composer-mode-btn[aria-expanded="true"] .composer-mode-chevron {







  transform: rotate(180deg) !important;







}















.composer-mode-dropdown {







  position: absolute !important;







  bottom: calc(100% + 8px) !important;







  right: 0 !important;







  width: 260px !important;







  background: var(--v3-card) !important;







  border: 1px solid var(--v3-border) !important;







  border-radius: 14px !important;







  box-shadow: var(--v3-shadow-lg) !important;







  z-index: 9999 !important;







  padding: 6px !important;







  animation: v3FadeUp 0.18s ease both !important;







  display: none !important;







}















.composer-mode-dropdown.open {







  display: block !important;







}















.composer-mode-header {







  font-size: 0.68rem !important;







  font-weight: 600 !important;







  color: var(--v3-text4) !important;







  text-transform: uppercase !important;







  letter-spacing: 0.06em !important;







  padding: 6px 12px 4px !important;







}















.composer-mode-option {







  display: flex !important;







  align-items: center !important;







  gap: 10px !important;







  padding: 10px 12px !important;







  border-radius: 10px !important;







  border: none !important;







  background: transparent !important;







  color: var(--v3-text2) !important;







  font-size: 0.83rem !important;







  cursor: pointer !important;







  width: 100% !important;







  text-align: left !important;







  transition: background 0.15s ease, color 0.15s ease !important;







  font-family: 'Inter', Arial, sans-serif !important;







}















.composer-mode-option:hover,







.composer-mode-option.active {







  background: var(--v3-hover) !important;







  color: var(--v3-text) !important;







}















.composer-mode-opt-icon {







  font-size: 1.1rem !important;







  width: 28px !important;







  text-align: center !important;







  flex-shrink: 0 !important;







}















.composer-mode-opt-info {







  display: flex !important;







  flex-direction: column !important;







  gap: 2px !important;







  flex: 1 !important;







  min-width: 0 !important;







}















.composer-mode-opt-name {







  font-weight: 500 !important;







  color: var(--v3-text) !important;







  font-size: 0.83rem !important;







}















.composer-mode-opt-desc {







  font-size: 0.7rem !important;







  color: var(--v3-text4) !important;







  line-height: 1.3 !important;







}















.composer-mode-opt-check {







  color: var(--v3-accent) !important;







  flex-shrink: 0 !important;







}















/* ── Gönder / Durdur butonu ── */







/* ── Gönder butonu — ChatGPT tarzı modern ── */







.btn-send {







  width: 36px !important;







  height: 36px !important;







  border-radius: 50% !important;







  border: none !important;







  cursor: pointer !important;







  display: flex !important;







  align-items: center !important;







  justify-content: center !important;







  transition: background 0.18s ease, transform 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease !important;







  flex-shrink: 0 !important;







  position: relative !important;







}















/* Dark tema: beyaz buton */







[data-theme="dark"] .btn-send:not(:disabled):not(.btn-stop) {







  background: #FFFFFF !important;







  color: #000000 !important;







  box-shadow: 0 2px 8px rgba(255,255,255,0.15) !important;







}















/* Light tema: siyah buton */







[data-theme="light"] .btn-send:not(:disabled):not(.btn-stop) {







  background: #000000 !important;







  color: #FFFFFF !important;







  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;







}















/* Varsayılan (tema belirsiz) */







.btn-send:not(:disabled):not(.btn-stop) {







  background: var(--v3-btn-bg, #000) !important;







  color: var(--v3-btn-text, #fff) !important;







}















.btn-send:hover:not(:disabled):not(.btn-stop) {







  transform: scale(1.08) !important;







  box-shadow: 0 4px 16px rgba(0,0,0,0.25) !important;







}















[data-theme="dark"] .btn-send:hover:not(:disabled):not(.btn-stop) {







  background: #F0F0F0 !important;







  box-shadow: 0 4px 16px rgba(255,255,255,0.2) !important;







}















[data-theme="light"] .btn-send:hover:not(:disabled):not(.btn-stop) {







  background: #222222 !important;







  box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;







}















.btn-send:disabled {







  background: rgba(128,128,128,0.2) !important;







  color: rgba(128,128,128,0.5) !important;







  cursor: not-allowed !important;







  opacity: 1 !important;







  box-shadow: none !important;







}















/* Durdur (stop) durumu */







.btn-send.btn-stop {







  background: #ef4444 !important;







  color: #fff !important;







  opacity: 1 !important;







  cursor: pointer !important;







  box-shadow: 0 2px 8px rgba(239,68,68,0.3) !important;







}















.btn-send.btn-stop:hover {







  background: #dc2626 !important;







  transform: scale(1.08) !important;







}















/* ── Responsive: Mobil ── */







@media (max-width: 768px) {







  .composer-box {







    border-radius: 16px !important;







  }















  .composer-toolbar {







    gap: 0px !important;







  }















  .composer-tools-left,







  .composer-tools-right {







    gap: 0px !important;







  }















  /* Mobilde bazı araçları gizle — taşma önleme */







  /* Butonları gizleme — toolbar scroll ile hepsi erişilebilir */







  .composer-tools-left .btn-tool {







    display: inline-flex !important;







  }















  .composer-add-dropdown {







    left: 0 !important;







    right: auto !important;







    width: 230px !important;







  }















  .composer-mode-dropdown {







    right: 0 !important;







    left: auto !important;







    width: 240px !important;







  }















  .suggestion-pills {







    grid-template-columns: repeat(2, 1fr) !important;







  }















  .suggestion-chip {







    padding: 9px 12px !important;







    font-size: 0.8rem !important;







  }







}















@media (max-width: 400px) {







  .suggestion-pills {







    grid-template-columns: 1fr !important;







  }















  .composer-mode-label {







    display: none !important;







  }







}















/* ── Mesaj "Daha fazla" dropdown ───────────────────────── */







.msg-more-dropdown {







  position: absolute;







  bottom: calc(100% + 4px);







  right: 0;







  background: var(--surface2, #050816);







  border: 1px solid var(--border, rgba(255,255,255,.1));







  border-radius: .5rem;







  padding: .3rem;







  min-width: 130px;







  z-index: 200;







  box-shadow: 0 4px 16px rgba(0,0,0,.3);







  display: flex;







  flex-direction: column;







  gap: .1rem;







}















.msg-more-dropdown button {







  display: flex;







  align-items: center;







  gap: .5rem;







  padding: .45rem .7rem;







  background: none;







  border: none;







  border-radius: .35rem;







  color: var(--text-secondary, #B0B0B0);







  font-size: .8rem;







  cursor: pointer;







  text-align: left;







  width: 100%;







  transition: background .12s, color .12s;







}















.msg-more-dropdown button:hover {







  background: var(--surface3, rgba(255,255,255,.07));







  color: var(--text, #ECECEC);







}















.message-actions {







  position: relative;







}















/* ── Follow-up Chips (AI yanıtı sonrası öneriler) ──────── */







.followup-chips {







  display: flex;







  flex-wrap: wrap;







  gap: .4rem;







  margin-top: .75rem;







  padding-top: .6rem;







  border-top: 1px solid var(--border, rgba(255,255,255,.08));







}















.followup-chip {







  display: inline-flex;







  align-items: center;







  gap: .35rem;







  padding: .35rem .75rem;







  background: var(--surface2, rgba(255,255,255,.05));







  border: 1px solid var(--border, rgba(255,255,255,.1));







  border-radius: 999px;







  color: var(--text-secondary, #B0B0B0);







  font-size: .78rem;







  cursor: pointer;







  transition: background .15s, color .15s, border-color .15s;







  white-space: nowrap;







}















.followup-chip:hover {







  background: var(--accent-muted, rgba(80,80,80,.1));







  border-color: var(--text3);







  color: var(--text3);







}















.followup-chip-icon {







  display: flex;







  align-items: center;







  flex-shrink: 0;







  opacity: .7;







}















.followup-chip:hover .followup-chip-icon {







  opacity: 1;







}















@media (max-width: 768px) {







  .followup-chips {







    gap: .3rem;







  }







  .followup-chip {







    font-size: .75rem;







    padding: .3rem .6rem;







  }







}















/* ── Blockquote (sohbet mesajları) ─────────────────────── */







.message-content blockquote,







.message-content .gx-blockquote {







  margin: .75rem 0;







  padding: .6rem 1rem;







  border-left: 3px solid var(--text3);







  background: rgba(80,80,80,.07);







  border-radius: 0 .4rem .4rem 0;







  color: var(--text-secondary, #B0B0B0);







  font-style: italic;







  line-height: 1.65;







}















.message-content blockquote p,







.message-content .gx-blockquote p {







  margin: 0;







}















.message-content blockquote strong,







.message-content .gx-blockquote strong {







  color: var(--text, #ECECEC);







  font-style: normal;







}















/* Suggestion chip icon SVG hizalama */







.suggestion-chip-icon svg {







  display: block;







  flex-shrink: 0;







}















/* Composer mode icon SVG hizalama */







.composer-mode-icon svg,







.composer-mode-opt-icon svg {







  display: block;







  flex-shrink: 0;







}







/* ── Space Orbs — Arka plan animasyonlu orb'lar ── */







.space-orbs {







  position: fixed !important;







  inset: 0 !important;







  pointer-events: none !important;







  z-index: 0 !important;







  overflow: hidden !important;







}















.space-orb {







  position: absolute !important;







  border-radius: 50% !important;







  filter: blur(80px) !important;







  opacity: 0 !important;







  animation: orbFloat 18s ease-in-out infinite !important;







}















[data-theme="dark"] .space-orb {







  opacity: 0.18 !important;







}















[data-theme="light"] .space-orb {







  opacity: 0.08 !important;







}















.space-orb:nth-child(1) {







  width: 500px !important;







  height: 500px !important;







  background: radial-gradient(circle, rgba(30,60,120,0.8) 0%, transparent 70%) !important;







  top: -100px !important;







  left: -100px !important;







  animation-delay: 0s !important;







  animation-duration: 20s !important;







}















.space-orb:nth-child(2) {







  width: 400px !important;







  height: 400px !important;







  background: radial-gradient(circle, rgba(60,20,100,0.7) 0%, transparent 70%) !important;







  top: 30% !important;







  right: -80px !important;







  animation-delay: -5s !important;







  animation-duration: 25s !important;







}















.space-orb:nth-child(3) {







  width: 350px !important;







  height: 350px !important;







  background: radial-gradient(circle, rgba(10,40,80,0.6) 0%, transparent 70%) !important;







  bottom: -80px !important;







  left: 30% !important;







  animation-delay: -10s !important;







  animation-duration: 22s !important;







}















.space-orb:nth-child(4) {







  width: 300px !important;







  height: 300px !important;







  background: radial-gradient(circle, rgba(80,30,60,0.5) 0%, transparent 70%) !important;







  bottom: 20% !important;







  right: 20% !important;







  animation-delay: -15s !important;







  animation-duration: 28s !important;







}















@keyframes orbFloat {







  0%, 100% { transform: translate(0, 0) scale(1); }







  25%       { transform: translate(30px, -20px) scale(1.05); }







  50%       { transform: translate(-20px, 30px) scale(0.95); }







  75%       { transform: translate(20px, 20px) scale(1.02); }







}















/* Masaüstünde de orb'lar görünsün */







@media (min-width: 769px) {







  [data-theme="dark"] .space-orb {







    opacity: 0.22 !important;







  }







  [data-theme="light"] .space-orb {







    opacity: 0.06 !important;







  }







}















/* ── GlomaxGPT v3 DARK TEMA — Uzay renkleri ── */







[data-theme="dark"] {







  --v3-bg:            #050816;







  --v3-sidebar-bg:    rgba(5,8,22,.95);







  --v3-surface:       rgba(8,20,40,.85);







  --v3-surface2:      rgba(10,25,50,.7);







  --v3-card:          rgb(26 26 26);







  --v3-input-bg:      rgb(26 26 26);







  --v3-border:        rgba(120,120,120,.15);







  --v3-border2:       rgba(100,100,100,.2);







  --v3-text:          #e8f4ff;







  --v3-text2:         #B0B0B0;







  --v3-text3:         #808080;







  --v3-accent:        #ECECEC;







  --v3-accent2:       #CCCCCC;







  --v3-accent-grad:   linear-gradient(135deg, #3A3A3A 0%, #050816 100%);







  --v3-glow:          0 0 24px rgba(80,80,80,.25);







}















/* ══════════════════════════════════════════════════════════







   23. COMPOSER TOOLBAR — Yeni Özellikler







   Ton seçici, karakter sayacı, temizle butonu,







   btn-tool-label, web arama etiketi







   Tüm cihazlarla uyumlu (mobile-first)







══════════════════════════════════════════════════════════ */















/* ── btn-tool içindeki metin etiketi ── */







.btn-tool-label {







  font-size: 0.72rem !important;







  font-weight: 500 !important;







  color: inherit !important;







  white-space: nowrap !important;







  line-height: 1 !important;







  /* Mobilde gizlenir */







  display: none !important;







}















/* Masaüstünde web arama etiketini göster */







@media (min-width: 640px) {







  .btn-web-search .btn-tool-label {







    display: inline !important;







  }







}















/* ── Karakter sayacı ── */







.composer-char-count {







  font-size: 0.7rem !important;







  color: var(--v3-text4) !important;







  font-family: 'Inter', Arial, sans-serif !important;







  white-space: nowrap !important;







  padding: 0 4px !important;







  min-width: 28px !important;







  text-align: right !important;







  transition: color 0.2s ease !important;







  user-select: none !important;







  flex-shrink: 0 !important;







}















.composer-char-count.warn {







  color: #f59e0b !important;







}















.composer-char-count.danger {







  color: #ef4444 !important;







  font-weight: 600 !important;







}















/* Boşken gizle */







.composer-char-count:empty {







  display: none !important;







}















/* ── Temizle butonu ── */







.btn-composer-clear {







  color: var(--v3-text4) !important;







  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease !important;







}















.btn-composer-clear:hover {







  background: rgba(239,68,68,0.1) !important;







  color: #ef4444 !important;







  transform: rotate(90deg) !important;







}















/* ── Ton seçici dropdown ── */







.composer-tone-wrap {







  position: relative !important;







}















.btn-tone-picker {







  display: flex !important;







  align-items: center !important;







  gap: 4px !important;







  padding: 5px 8px !important;







  border-radius: 8px !important;







  border: none !important;







  background: transparent !important;







  color: var(--v3-text3) !important;







  font-size: 0.78rem !important;







  font-weight: 500 !important;







  cursor: pointer !important;







  transition: background 0.18s ease, color 0.18s ease !important;







  font-family: 'Inter', Arial, sans-serif !important;







  white-space: nowrap !important;







  height: 32px !important;







}















.btn-tone-picker:hover {







  background: var(--v3-hover) !important;







  color: var(--v3-text) !important;







}















.btn-tone-picker.active-tone {







  color: var(--v3-text) !important;







  background: var(--v3-hover) !important;







}















.btn-tone-label {







  font-size: 0.72rem !important;







  font-weight: 500 !important;







  line-height: 1 !important;







}















/* Mobilde ton etiketini gizle */







@media (max-width: 639px) {







  .btn-tone-label {







    display: none !important;







  }







}















.composer-tone-dropdown {







  position: absolute !important;







  bottom: calc(100% + 8px) !important;







  left: 0 !important;







  width: 220px !important;







  background: var(--v3-card) !important;







  border: 1px solid var(--v3-border) !important;







  border-radius: 14px !important;







  box-shadow: var(--v3-shadow-lg) !important;







  z-index: 9999 !important;







  padding: 6px !important;







  animation: v3FadeUp 0.18s ease both !important;







  display: none !important;







  overflow: hidden !important;







}















.composer-tone-dropdown.open {







  display: block !important;







}















/* Mobilde sola hizala, taşmayı önle */







@media (max-width: 480px) {







  .composer-tone-dropdown {







    left: 0 !important;







    right: auto !important;







    width: 200px !important;







  }







}















.composer-tone-header {







  font-size: 0.68rem !important;







  font-weight: 600 !important;







  color: var(--v3-text4) !important;







  text-transform: uppercase !important;







  letter-spacing: 0.06em !important;







  padding: 6px 12px 4px !important;







}















.composer-tone-option {







  display: flex !important;







  align-items: center !important;







  gap: 10px !important;







  padding: 8px 10px !important;







  border-radius: 10px !important;







  border: none !important;







  background: transparent !important;







  color: var(--v3-text2) !important;







  font-size: 0.82rem !important;







  cursor: pointer !important;







  width: 100% !important;







  text-align: left !important;







  transition: background 0.15s ease, color 0.15s ease !important;







  font-family: 'Inter', Arial, sans-serif !important;







}















.composer-tone-option:hover,







.composer-tone-option.active {







  background: var(--v3-hover) !important;







  color: var(--v3-text) !important;







}















.composer-tone-opt-icon {







  font-size: 1rem !important;







  width: 24px !important;







  text-align: center !important;







  flex-shrink: 0 !important;







  line-height: 1 !important;







}















.composer-tone-opt-info {







  display: flex !important;







  flex-direction: column !important;







  gap: 1px !important;







  flex: 1 !important;







  min-width: 0 !important;







}















.composer-tone-opt-name {







  font-weight: 500 !important;







  color: var(--v3-text) !important;







  font-size: 0.82rem !important;







  white-space: nowrap !important;







  overflow: hidden !important;







  text-overflow: ellipsis !important;







}















.composer-tone-opt-desc {







  font-size: 0.68rem !important;







  color: var(--v3-text4) !important;







  line-height: 1.3 !important;







  white-space: nowrap !important;







  overflow: hidden !important;







  text-overflow: ellipsis !important;







}















/* ── Web arama aktif durumu ── */







.btn-web-search[aria-pressed="true"] {







  background: var(--v3-hover) !important;







  color: var(--v3-text) !important;







}















[data-theme="dark"] .btn-web-search[aria-pressed="true"] {







  background: rgba(80,120,255,0.12) !important;







  color: #7ba7ff !important;







}















[data-theme="light"] .btn-web-search[aria-pressed="true"] {







  background: rgba(30,80,200,0.08) !important;







  color: #1e50c8 !important;







}















/* ── Derin düşünce aktif durumu ── */







.btn-deep-think[aria-pressed="true"] {







  background: var(--v3-hover) !important;







  color: var(--v3-text) !important;







}















[data-theme="dark"] .btn-deep-think[aria-pressed="true"] {







  background: rgba(160,80,255,0.12) !important;







  color: #c084fc !important;







}















[data-theme="light"] .btn-deep-think[aria-pressed="true"] {







  background: rgba(120,40,200,0.08) !important;







  color: #7828c8 !important;







}















/* ── Composer toolbar responsive ── */















/* Küçük mobil (< 400px): sadece temel araçlar */







@media (max-width: 399px) {







  .composer-tone-wrap,







  .btn-deep-think .btn-deep-think-label {







    display: none !important;







  }















  .composer-toolbar {







    padding: 6px 8px 10px !important;







  }















  .composer-tools-left,







  .composer-tools-right {







    gap: 0 !important;







  }















  .btn-tool {







    width: 30px !important;







    height: 30px !important;







  }















  .composer-char-count {







    display: none !important;







  }







}















/* Orta mobil (400–639px) */







@media (min-width: 400px) and (max-width: 639px) {







  .composer-tone-wrap {







    display: none !important;







  }















  .composer-char-count {







    font-size: 0.65rem !important;







  }







}















/* Tablet (640–767px) */







@media (min-width: 640px) and (max-width: 767px) {







  .composer-tools-left {







    gap: 1px !important;







  }







}















/* Masaüstü (768px+) */







@media (min-width: 768px) {







  .composer-tools-left,







  .composer-tools-right {







    gap: 3px !important;







  }















  .composer-char-count {







    font-size: 0.72rem !important;







    min-width: 36px !important;







  }







}















/* ── Pano yapıştır toast bildirimi ── */







.composer-paste-toast {







  position: absolute !important;







  bottom: calc(100% + 10px) !important;







  left: 50% !important;







  transform: translateX(-50%) !important;







  background: var(--v3-card) !important;







  border: 1px solid var(--v3-border) !important;







  border-radius: 10px !important;







  padding: 8px 14px !important;







  font-size: 0.78rem !important;







  color: var(--v3-text2) !important;







  white-space: nowrap !important;







  box-shadow: var(--v3-shadow-md) !important;







  z-index: 9999 !important;







  animation: v3FadeIn 0.2s ease both !important;







  pointer-events: none !important;







}















/* ── Ton aktif göstergesi (toolbar butonu) ── */







.btn-tone-picker[data-active-tone]:not([data-active-tone="default"]) {







  color: var(--v3-text) !important;







}















[data-theme="dark"] .btn-tone-picker[data-active-tone]:not([data-active-tone="default"]) {







  background: rgba(255,255,255,0.06) !important;







}















[data-theme="light"] .btn-tone-picker[data-active-tone]:not([data-active-tone="default"]) {







  background: rgba(0,0,0,0.05) !important;







}















/* ── Composer toolbar divider ── */







.composer-toolbar-divider {







  width: 1px !important;







  height: 18px !important;







  background: var(--v3-border) !important;







  flex-shrink: 0 !important;







  margin: 0 2px !important;







  align-self: center !important;







}















/* ── Focus-visible erişilebilirlik ── */







.btn-tool:focus-visible,







.btn-tone-picker:focus-visible,







.composer-mode-btn:focus-visible,







.composer-add-btn:focus-visible,







.btn-send:focus-visible {







  outline: 2px solid var(--v3-accent) !important;







  outline-offset: 2px !important;







}















/* ── Tooltip (title attribute yerine CSS tooltip) ── */







.btn-tool[title],







.btn-tone-picker[title] {







  position: relative !important;







}















/* Sadece masaüstünde tooltip göster */







@media (hover: hover) and (pointer: fine) {







  .btn-tool[title]::after,







  .btn-tone-picker[title]::after {







    content: attr(title) !important;







    position: absolute !important;







    bottom: calc(100% + 6px) !important;







    left: 50% !important;







    transform: translateX(-50%) !important;







    background: var(--v3-card) !important;







    border: 1px solid var(--v3-border) !important;







    color: var(--v3-text2) !important;







    font-size: 0.7rem !important;







    font-weight: 500 !important;







    padding: 4px 8px !important;







    border-radius: 6px !important;







    white-space: nowrap !important;







    pointer-events: none !important;







    opacity: 0 !important;







    transform: translateX(-50%) translateY(4px) !important;







    transition: opacity 0.15s ease, transform 0.15s ease !important;







    z-index: 10000 !important;







    box-shadow: var(--v3-shadow-sm) !important;







  }















  .btn-tool[title]:hover::after,







  .btn-tone-picker[title]:hover::after {







    opacity: 1 !important;







    transform: translateX(-50%) translateY(0) !important;







  }







}















/* ══════════════════════════════════════════════════════════







   COMPOSER TOOLBAR — Yeni Özellikler







   Uzunluk Seçici | Dil Seçici | Hızlı Şablonlar







══════════════════════════════════════════════════════════ */















/* Ortak dropdown container */







.composer-length-wrap,







.composer-lang-wrap,







.composer-template-wrap {







  position: relative;







  flex-shrink: 0;







}















/* Ortak dropdown panel */







.composer-length-dropdown,







.composer-lang-dropdown,







.composer-template-dropdown {







  display: none;







  position: absolute;







  bottom: calc(100% + 8px);







  left: 0;







  background: var(--surface, #fff);







  border: 1px solid var(--border, #e5e7eb);







  border-radius: 12px;







  box-shadow: 0 8px 24px rgba(0,0,0,.12);







  z-index: 500;







  min-width: 200px;







  overflow: hidden;







  animation: composer-dd-in .15s ease;







}







[data-theme="dark"] .composer-length-dropdown,







[data-theme="dark"] .composer-lang-dropdown,







[data-theme="dark"] .composer-template-dropdown {







  background: #1e1e1e;







  border-color: rgba(255,255,255,.1);







  box-shadow: 0 8px 24px rgba(0,0,0,.4);







}







.composer-length-dropdown.open,







.composer-lang-dropdown.open,







.composer-template-dropdown.open { display: block; }















@keyframes composer-dd-in {







  from { opacity: 0; transform: translateY(6px); }







  to   { opacity: 1; transform: translateY(0); }







}















/* Dropdown başlık */







.composer-length-header,







.composer-lang-header,







.composer-template-header {







  font-size: .7rem;







  font-weight: 700;







  text-transform: uppercase;







  letter-spacing: .06em;







  color: var(--text3, #888);







  padding: 10px 14px 6px;







  border-bottom: 1px solid var(--border, #f0f0f0);







}







[data-theme="dark"] .composer-length-header,







[data-theme="dark"] .composer-lang-header,







[data-theme="dark"] .composer-template-header {







  border-color: rgba(255,255,255,.06);







}















/* Uzunluk seçenekleri */







.composer-length-option {







  display: flex;







  align-items: center;







  gap: 10px;







  width: 100%;







  padding: 9px 14px;







  background: none;







  border: none;







  cursor: pointer;







  text-align: left;







  transition: background .12s;







  color: var(--text, #050816);







}







[data-theme="dark"] .composer-length-option { color: #f0f0f0; }







.composer-length-option:hover { background: var(--bg-hover, rgba(0,0,0,.05)); }







.composer-length-option.active { background: rgba(124,58,237,.08); }







[data-theme="dark"] .composer-length-option.active { background: rgba(124,58,237,.15); }















.composer-length-opt-icon { font-size: 1rem; flex-shrink: 0; }







.composer-length-opt-info { display: flex; flex-direction: column; gap: 1px; }







.composer-length-opt-name { font-size: .8125rem; font-weight: 600; }







.composer-length-opt-desc { font-size: .72rem; color: var(--text3, #888); }















/* Dil seçenekleri */







.composer-lang-option {







  display: block;







  width: 100%;







  padding: 8px 14px;







  background: none;







  border: none;







  cursor: pointer;







  text-align: left;







  font-size: .8125rem;







  color: var(--text, #050816);







  transition: background .12s;







}







[data-theme="dark"] .composer-lang-option { color: #f0f0f0; }







.composer-lang-option:hover { background: var(--bg-hover, rgba(0,0,0,.05)); }







.composer-lang-option.active {







  background: rgba(124,58,237,.08);







  font-weight: 600;







  color: var(--primary, linear-gradient(135deg, #1b99ea, #546eef));







}







[data-theme="dark"] .composer-lang-option.active { background: rgba(124,58,237,.15); }















/* Şablon seçenekleri */







.composer-template-dropdown {







  min-width: 220px;







  max-height: 320px;







  overflow-y: auto;







}







.composer-template-option {







  display: block;







  width: 100%;







  padding: 8px 14px;







  background: none;







  border: none;







  cursor: pointer;







  text-align: left;







  font-size: .8125rem;







  color: var(--text, #050816);







  transition: background .12s;







  white-space: nowrap;







}







[data-theme="dark"] .composer-template-option { color: #f0f0f0; }







.composer-template-option:hover {







  background: var(--bg-hover, rgba(0,0,0,.05));







  color: var(--primary, linear-gradient(135deg, #1b99ea, #546eef));







}















/* Buton etiketleri — mobilde gizle */







.btn-length-label,







.btn-lang-label {







  font-size: .75rem;







  font-weight: 500;







  color: var(--text2, #555);







}







[data-theme="dark"] .btn-length-label,







[data-theme="dark"] .btn-lang-label { color: #aaa; }















/* Mobil: etiketleri gizle, sadece ikon göster */







@media (max-width: 640px) {







  .btn-length-label,







  .btn-lang-label {







    display: none;







  }







  /* Dropdown'ları ekranın altına sabitle */







  .composer-length-dropdown,







  .composer-lang-dropdown,







  .composer-template-dropdown {







    position: fixed !important;







    bottom: 80px !important;







    left: 8px !important;







    right: 8px !important;







    width: auto !important;







    min-width: unset !important;







    border-radius: 16px !important;







    z-index: 1000 !important;







  }







  .composer-template-dropdown {







    max-height: 50dvh !important;







  }







}















/* ══════════════════════════════════════════════════════════







   İÇ SAYFA TOPBAR — tb-* bileşenleri (inner-topbar.php)







══════════════════════════════════════════════════════════ */















/* Sayfa başlığı */







.tb-page-title {







  font-size: .9rem;







  font-weight: 600;







  color: var(--text, #050816);







  white-space: nowrap;







  overflow: hidden;







  text-overflow: ellipsis;







  max-width: 240px;







}







[data-theme="dark"] .tb-page-title { color: var(--text, #f0f0f0); }















/* Bildirim paneli — desktop */







.tb-notif-panel {







  display: none;







  position: absolute;







  top: calc(100% + 8px);







  right: 0;







  width: 340px;







  max-height: 480px;







  background: var(--surface, #fff);







  border: 1px solid var(--border, #e5e7eb);







  border-radius: 14px;







  box-shadow: 0 8px 32px rgba(0,0,0,.12);







  z-index: 1000;







  overflow: hidden;







  flex-direction: column;







}







[data-theme="dark"] .tb-notif-panel {







  background: #1e1e1e;







  border-color: rgba(255,255,255,.1);







  box-shadow: 0 8px 32px rgba(0,0,0,.4);







}







.tb-notif-panel.open { display: flex; }















.tb-notif-panel-header {







  display: flex;







  align-items: center;







  justify-content: space-between;







  padding: 14px 16px 10px;







  border-bottom: 1px solid var(--border, #e5e7eb);







  flex-shrink: 0;







}







[data-theme="dark"] .tb-notif-panel-header { border-color: rgba(255,255,255,.08); }















.tb-notif-panel-title {







  font-size: .875rem;







  font-weight: 700;







  color: var(--text, #050816);







}







[data-theme="dark"] .tb-notif-panel-title { color: #f0f0f0; }















.tb-notif-panel-actions {







  display: flex;







  align-items: center;







  gap: 8px;







}















.tb-notif-mark-all {







  display: flex;







  align-items: center;







  gap: 4px;







  font-size: .75rem;







  color: var(--primary, linear-gradient(135deg, #1b99ea, #546eef));







  background: none;







  border: none;







  cursor: pointer;







  padding: 2px 6px;







  border-radius: 6px;







  transition: background .15s;







}







.tb-notif-mark-all:hover { background: rgba(124,58,237,.08); }















.tb-notif-see-all {







  font-size: .75rem;







  color: var(--primary, linear-gradient(135deg, #1b99ea, #546eef));







  text-decoration: none;







  padding: 2px 6px;







  border-radius: 6px;







  transition: background .15s;







}







.tb-notif-see-all:hover { background: rgba(124,58,237,.08); }















.tb-notif-panel-close {







  background: none;







  border: none;







  cursor: pointer;







  color: var(--text3, #888);







  padding: 4px;







  border-radius: 6px;







  display: flex;







  align-items: center;







  transition: background .15s;







}







.tb-notif-panel-close:hover { background: var(--bg-hover, rgba(0,0,0,.06)); }















.tb-notif-panel-body {







  overflow-y: auto;







  flex: 1;







  min-height: 0;







}















.tb-notif-loading {







  display: flex;







  align-items: center;







  justify-content: center;







  padding: 32px;







}















.tb-notif-spinner {







  width: 24px;







  height: 24px;







  border: 2px solid var(--border, #e5e7eb);







  border-top-color: var(--primary, linear-gradient(135deg, #1b99ea, #546eef));







  border-radius: 50%;







  animation: tb-spin .7s linear infinite;







}







@keyframes tb-spin { to { transform: rotate(360deg); } }















.tb-notif-empty {







  display: flex;







  flex-direction: column;







  align-items: center;







  justify-content: center;







  padding: 32px 16px;







  gap: 10px;







  color: var(--text3, #888);







  font-size: .875rem;







}







.tb-notif-empty svg { opacity: .4; }















.tb-notif-list { padding: 4px 0; }















.tb-notif-item {







  display: flex;







  align-items: flex-start;







  gap: 12px;







  padding: 12px 16px;







  border-bottom: 1px solid var(--border, #f0f0f0);







  transition: background .12s;







}







[data-theme="dark"] .tb-notif-item { border-color: rgba(255,255,255,.06); }







.tb-notif-item:last-child { border-bottom: none; }







.tb-notif-item:hover { background: var(--bg-hover, rgba(0,0,0,.04)); }







.tb-notif-item.unread { background: rgba(124,58,237,.05); }







[data-theme="dark"] .tb-notif-item.unread { background: rgba(124,58,237,.1); }















.tb-notif-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }















.tb-notif-content { flex: 1; min-width: 0; }















.tb-notif-title {







  font-size: .8125rem;







  font-weight: 600;







  color: var(--text, #050816);







  margin-bottom: 2px;







  white-space: nowrap;







  overflow: hidden;







  text-overflow: ellipsis;







}







[data-theme="dark"] .tb-notif-title { color: #f0f0f0; }















.tb-notif-msg {







  font-size: .75rem;







  color: var(--text2, #555);







  line-height: 1.4;







  display: -webkit-box;







  -webkit-line-clamp: 2;







  -webkit-box-orient: vertical;







  overflow: hidden;







}







[data-theme="dark"] .tb-notif-msg { color: #aaa; }















.tb-notif-time {







  font-size: .7rem;







  color: var(--text3, #888);







  margin-top: 4px;







}















/* Bildirim kırmızı nokta */







.tb-notif-dot {







  position: absolute;







  top: 6px;







  right: 6px;







  width: 8px;







  height: 8px;







  background: #ef4444;







  border-radius: 50%;







  border: 2px solid var(--surface, #fff);







  animation: tb-pulse 2s ease-in-out infinite;







}







@keyframes tb-pulse {







  0%, 100% { transform: scale(1); opacity: 1; }







  50% { transform: scale(1.2); opacity: .8; }







}



/* ── Kullanıcı mesaj avatarı — profil fotoğrafı veya baş harf ── */

.message-avatar-user {

  width: 32px;

  height: 32px;

  border-radius: 50%;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  background: var(--surface2, #2c3560);

  border: 1px solid var(--border, rgba(255,255,255,.1));

  font-size: 11px;

  font-weight: 700;

  color: var(--text, #ececec);

  margin-left: 8px;

}

.message-avatar-user img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 50%;

  display: block;

}

/* Kullanıcı mesajında avatar sağda */

.message.user .message-inner {

  flex-direction: row-reverse;

}

.message.user .message-avatar-user {

  margin-left: 8px;

  margin-right: 0;

}

[data-theme="light"] .message-avatar-user {

  background: var(--surface2, #ebebeb);

  border-color: var(--border, rgba(0,0,0,.1));

  color: var(--text, #0d0d0d);

}