/*


 * GlomaxGPT — Kapsamlı Tasarım Yenilemesi v1.0


 * ============================================================


 * Bu dosya mevcut CSS'leri override eder, silmez.


 * Yükleme sırası: en son CSS dosyası olmalıdır.


 * ============================================================


 *


 * Renk Paleti:


 *   Ana arka plan:        #0F1115


 *   Sol menü/paneller:    #151820


 *   Kartlar/mesaj alanı:  #1D212B


 *   Hover/seçili:         #252B36


 *   Kenarlıklar:          #303744


 *   Ana metin:            #EEF1F6


 *   İkincil metin/ikonlar:#ADB6C5


 *   Marka vurgu:          #818CF8


 *   Vurgu hover:          #A5B4FC


 * ============================================================


 */





/* ============================================================


   1. FOUC & TEMA — Dark-only, beyaz parlamasını engelle


============================================================ */





html {


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


}





html[data-theme="dark"],


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


  color-scheme: dark !important;


}





html[data-theme="light"] {


  color-scheme: light !important;


}





body {


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


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


}





/* ── Tema toggle butonları: her zaman erişilebilir ── */


.btn-theme-toggle,


[data-theme-set] {


  display: inline-flex !important;


}





/* ── Logo: tema uyumu ── */


html[data-theme="light"] .logo-dark-only  { display: none !important; }


html[data-theme="light"] .logo-light-only { display: block !important; }


html:not([data-theme="light"]) .logo-dark-only  { display: block !important; }


html:not([data-theme="light"]) .logo-light-only { display: none  !important; }





/* ============================================================


   2. LAYOUT — Genel app shell


============================================================ */





.app-with-sidebar {


  display: flex !important;


  height: 100dvh !important;


  overflow: hidden !important;


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


}





/* ── Main content ── */


#main,


.main-content,


#main-content {


  flex: 1 !important;


  min-width: 0 !important;


  display: flex !important;


  flex-direction: column !important;


  height: 100dvh !important;


  overflow: hidden !important;


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


}





/* ============================================================


   3. SİDEBAR — Tema Uyumlu


============================================================ */





#sidebar,


.sidebar,


aside.sidebar,


aside#sidebar {


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


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


  width: 260px !important;


  min-width: 260px !important;


}





#sidebar.collapsed,


.sidebar.collapsed {


  width: 60px !important;


  min-width: 60px !important;


}





/* ── Sidebar üst alan ── */


.sidebar-top {


  padding: 14px 12px 10px !important;


  border-bottom: none !important;


}





/* ── Logo ── */


.sidebar-logo {


  color: #EEF1F6 !important;


}





.gx-brand-base { color: #EEF1F6; }


.gx-brand-gpt  { color: #818CF8; }





/* ── Sidebar nav items ── */


.sidebar-nav,


#sidebar-main-nav {


  padding: 4px 8px !important;


}





.sidebar-nav-item {


  padding: 8px 10px !important;


  border-radius: 8px !important;


  color: var(--text-secondary, #ADB6C5) !important;


  font-size: 13.5px !important;


  font-weight: 400 !important;


  gap: 10px !important;


  transition: background 0.14s, color 0.14s !important;


  margin-bottom: 1px !important;


}





.sidebar-nav-item:hover {


  background: var(--sidebar-hover, #252B36) !important;


  color: var(--text-primary, #EEF1F6) !important;


}





.sidebar-nav-item.active {


  background: var(--sidebar-active, #252B36) !important;


  color: var(--text-primary, #EEF1F6) !important;


  font-weight: 500 !important;


}





.sidebar-nav-item svg {


  color: var(--text-muted, #6B7A92) !important;


  flex-shrink: 0 !important;


  width: 16px !important;


  height: 16px !important;


}





.sidebar-nav-item:hover svg,


.sidebar-nav-item.active svg {


  color: var(--text-secondary, #ADB6C5) !important;


}





/* ── Aktif nav item sol çizgi vurgusu ── */


.sidebar-nav-item.active {


  position: relative;


}





/* ── Klavye odağı ── */


.sidebar-nav-item:focus-visible {


  outline: 2px solid var(--accent, #818CF8) !important;


  outline-offset: -2px !important;


}





/* ── Beta badge ── */


.sb-badge-beta {


  font-size: 0.6rem !important;


  padding: 1px 5px !important;


  border-radius: 4px !important;


  background: rgba(129,140,248,0.15) !important;


  color: var(--accent, #818CF8) !important;


  font-weight: 600 !important;


  letter-spacing: 0.02em !important;


  margin-left: auto !important;


  white-space: nowrap !important;


  flex-shrink: 0 !important;


}





/* ── Icon butonlar ── */


.sidebar-icon-btn {


  color: var(--text-muted, #6B7A92) !important;


  border-radius: 7px !important;


  transition: background 0.14s, color 0.14s !important;


}





.sidebar-icon-btn:hover {


  background: var(--bg-hover, #252B36) !important;


  color: var(--text-primary, #EEF1F6) !important;


}





/* ── Sidebar arama kutusu ── */


#conv-search {


  background: none !important;


  border: none !important;


  outline: none !important;


  color: var(--text-primary, #EEF1F6) !important;


  font-size: 12px !important;


}





#conv-search::placeholder { color: var(--text-placeholder, #5A6A82) !important; }





/* ── Arama wrapper ── */


div:has(> #conv-search) {


  background: var(--bg-input, var(--surface, #1D212B)) !important;


  border: 1px solid var(--border-default, #303744) !important;


  border-radius: 8px !important;


}





/* ── Sohbet listesi ── */


.sidebar-conversations {


  flex: 1 !important;


  overflow-y: auto !important;


}





/* ── Konuşma öğeleri ── */


.conv-item,


.conversation-item,


[class*="conv-item"] {


  border-radius: 8px !important;


  color: var(--text-secondary, #ADB6C5) !important;


  font-size: 13px !important;


  transition: background 0.14s !important;


}





.conv-item:hover,


.conversation-item:hover {


  background: var(--sidebar-hover, #1D212B) !important;


  color: var(--text-primary, #EEF1F6) !important;


}





.conv-item.active,


.conversation-item.active {


  background: var(--sidebar-active, #252B36) !important;


  color: var(--text-primary, #EEF1F6) !important;


}





/* Konuşma grubu başlıkları */


.conv-group-label,


[class*="date-group"] {


  font-size: 11px !important;


  font-weight: 600 !important;


  color: var(--text-muted, #4A5568) !important;


  text-transform: uppercase !important;


  letter-spacing: 0.06em !important;


  padding: 8px 10px 3px !important;


}





/* ── Kullanım çubuğu ── */


.sb-usage-bar-wrap {


  padding: 8px 12px !important;


}





.sb-usage-bar-track {


  background: var(--surface2, #1E2330) !important;


  border-radius: 3px !important;


  height: 3px !important;


  overflow: hidden !important;


}





.sb-usage-bar-fill {


  border-radius: 3px !important;


  height: 100% !important;


  transition: width 0.3s ease !important;


}





.sb-usage-bar-label {


  font-size: 11px !important;


  color: #ADB6C5 !important;


}





/* ── Upgrade butonu ── */


.sb-upgrade-btn {


  display: flex !important;


  align-items: center !important;


  gap: 8px !important;


  padding: 8px 12px !important;


  border-radius: 8px !important;


  background: rgba(129,140,248,0.1) !important;


  border: 1px solid rgba(129,140,248,0.2) !important;


  color: #818CF8 !important;


  font-size: 12.5px !important;


  font-weight: 600 !important;


  margin: 4px 8px !important;


  transition: background 0.15s !important;


  text-decoration: none !important;


}





.sb-upgrade-btn:hover {


  background: rgba(129,140,248,0.18) !important;


  color: #A5B4FC !important;


  text-decoration: none !important;


}





/* ── Yenile/abonelik uyarısı ── */


.sb-renew-btn {


  display: flex !important;


  align-items: center !important;


  gap: 8px !important;


  padding: 8px 12px !important;


  border-radius: 8px !important;


  background: rgba(245,158,11,0.1) !important;


  border: 1px solid rgba(245,158,11,0.2) !important;


  color: #F59E0B !important;


  font-size: 12px !important;


  font-weight: 500 !important;


  margin: 4px 8px !important;


  transition: background 0.15s !important;


  text-decoration: none !important;


}





.sb-renew-btn.urgent {


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


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


  color: #EF4444 !important;


}





/* ── Footer kullanıcı alanı ── */


.sidebar-footer {


  padding: 6px 8px 10px !important;


  border-top: 1px solid var(--border-subtle, #1E2330) !important;


  flex-shrink: 0 !important;


}





.sidebar-user-item {


  display: flex !important;


  align-items: center !important;


  gap: 10px !important;


  padding: 8px 10px !important;


  border-radius: 10px !important;


  cursor: pointer !important;


  transition: background 0.14s !important;


}





.sidebar-user-item:hover { background: var(--sidebar-hover, #1D212B) !important; }





.user-avatar {


  width: 34px !important;


  height: 34px !important;


  border-radius: 50% !important;


  background: var(--surface2, #252B36) !important;


  display: flex !important;


  align-items: center !important;


  justify-content: center !important;


  font-size: 13px !important;


  font-weight: 700 !important;


  color: var(--text-primary, #EEF1F6) !important;


  flex-shrink: 0 !important;


}





.user-avatar-initials {


  background: linear-gradient(135deg, var(--accent, #818CF8), #A5B4FC) !important;


}





.user-name {


  font-size: 13px !important;


  font-weight: 500 !important;


  color: var(--text-primary, #EEF1F6) !important;


  white-space: nowrap !important;


  overflow: hidden !important;


  text-overflow: ellipsis !important;


}





.user-plan {


  font-size: 11px !important;


  color: var(--text-muted, #6B7A92) !important;


}





/* ── Kullanıcı menüsü ── */


.user-menu {


  position: absolute !important;


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


  left: 8px !important;


  right: 8px !important;


  background: var(--bg-surface, #1D212B) !important;


  border: 1px solid var(--border-default, #303744) !important;


  border-radius: 12px !important;


  padding: 5px !important;


  z-index: 9999 !important;


  box-shadow: 0 -8px 32px rgba(0,0,0,0.3) !important;


}





.user-menu-item {


  display: flex !important;


  align-items: center !important;


  gap: 10px !important;


  padding: 8px 10px !important;


  border-radius: 8px !important;


  font-size: 13px !important;


  color: var(--text-secondary, #ADB6C5) !important;


  cursor: pointer !important;


  transition: background 0.12s, color 0.12s !important;


  text-decoration: none !important;


}





.user-menu-item:hover {


  background: var(--bg-hover, #252B36) !important;


  color: var(--text-primary, #EEF1F6) !important;


  text-decoration: none !important;


}





.user-menu-item svg { color: var(--text-muted, #6B7A92) !important; }


.user-menu-item:hover svg { color: var(--text-secondary, #ADB6C5) !important; }





.user-menu-danger { color: #EF4444 !important; }


.user-menu-danger:hover { background: rgba(239,68,68,0.1) !important; color: #EF4444 !important; }





.user-menu-divider {


  height: 1px !important;


  background: var(--border-subtle, #1E2330) !important;


  margin: 4px 0 !important;


}





/* ── "Daha fazla" popup ── */


.sb-more-popup {


  position: fixed !important;


  background: var(--bg-surface, #1D212B) !important;


  border: 1px solid var(--border-default, #303744) !important;


  border-radius: 12px !important;


  padding: 6px !important;


  box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important;


  z-index: 9999 !important;


  min-width: 220px !important;


  max-width: 260px !important;


  max-height: 70vh !important;


  overflow-y: auto !important;


}





.sb-more-item {


  display: flex !important;


  align-items: center !important;


  gap: 10px !important;


  padding: 7px 10px !important;


  border-radius: 7px !important;


  font-size: 13px !important;


  color: var(--text-secondary, #ADB6C5) !important;


  cursor: pointer !important;


  transition: background 0.12s, color 0.12s !important;


  text-decoration: none !important;


}





.sb-more-item:hover {


  background: var(--bg-hover, #252B36) !important;


  color: var(--text-primary, #EEF1F6) !important;


  text-decoration: none !important;


}





.sb-more-item.active { background: var(--bg-hover, #252B36) !important; color: var(--text-primary, #EEF1F6) !important; }


.sb-more-item.sb-locked { opacity: 0.5 !important; }





.sb-more-section-label {


  font-size: 10px !important;


  font-weight: 700 !important;


  color: var(--text-muted, #4A5568) !important;


  text-transform: uppercase !important;


  letter-spacing: 0.08em !important;


  padding: 6px 10px 3px !important;


}





.sb-more-divider {


  height: 1px !important;


  background: var(--border-subtle, #1E2330) !important;


  margin: 4px 0 !important;


}





/* ── Sidebar collapsed: expanded btn ── */


.sidebar-expand-btn {


  background: none !important;


  border: none !important;


  cursor: pointer !important;


  display: flex !important;


  align-items: center !important;


  justify-content: center !important;


  width: 44px !important;


  height: 44px !important;


  margin: 10px auto !important;


  border-radius: 10px !important;


  color: var(--text-muted, #6B7A92) !important;


  transition: background 0.14s, color 0.14s !important;


}





.sidebar-expand-btn:hover {


  background: var(--bg-hover, #252B36) !important;


  color: var(--text-primary, #EEF1F6) !important;


}





/* ── Misafir CTA ── */


.sidebar-guest-auth--modern {


  padding: 8px !important;


}





.sgcta-card {


  display: flex !important;


  align-items: flex-start !important;


  gap: 10px !important;


  padding: 12px !important;


  background: rgba(129,140,248,0.08) !important;


  border: 1px solid rgba(129,140,248,0.15) !important;


  border-radius: 10px !important;


  margin-bottom: 8px !important;


}





.sgcta-text strong {


  display: block !important;


  font-size: 13px !important;


  font-weight: 600 !important;


  color: var(--text-primary, #EEF1F6) !important;


  margin-bottom: 3px !important;


}





.sgcta-text span {


  font-size: 12px !important;


  color: var(--text-muted, #6B7A92) !important;


  line-height: 1.4 !important;


}





.guest-auth-row {


  display: flex !important;


  gap: 6px !important;


}





.btn-sidebar-login-sm {


  flex: 1 !important;


  display: flex !important;


  align-items: center !important;


  justify-content: center !important;


  gap: 6px !important;


  padding: 8px 12px !important;


  border-radius: 8px !important;


  background: var(--bg-input, var(--surface, #1D212B)) !important;


  border: 1px solid var(--border-default, #303744) !important;


  color: var(--text-secondary, #ADB6C5) !important;


  font-size: 12.5px !important;


  font-weight: 500 !important;


  text-decoration: none !important;


  transition: background 0.14s, color 0.14s !important;


}





.btn-sidebar-login-sm:hover {


  background: var(--bg-hover, #252B36) !important;


  color: var(--text-primary, #EEF1F6) !important;


  text-decoration: none !important;


}





.btn-sidebar-register-sm {


  flex: 1 !important;


  display: flex !important;


  align-items: center !important;


  justify-content: center !important;


  gap: 6px !important;


  padding: 8px 12px !important;


  border-radius: 8px !important;


  background: #818CF8 !important;


  border: none !important;


  color: #FFFFFF !important;


  font-size: 12.5px !important;


  font-weight: 600 !important;


  text-decoration: none !important;


  transition: background 0.14s !important;


}





.btn-sidebar-register-sm:hover {


  background: #A5B4FC !important;


  color: #FFFFFF !important;


  text-decoration: none !important;


}





/* ── Sidebar overlay ── */


.sidebar-overlay,


#sidebar-overlay {


  position: fixed !important;


  inset: 0 !important;


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


  z-index: 9998 !important;


  display: none !important;


}





/* ── Klasör paneli ── */


.gx-folder-panel {


  padding: 4px 8px !important;


  flex-shrink: 0 !important;


}





.gx-folder-header {


  display: flex !important;


  align-items: center !important;


  justify-content: space-between !important;


  padding: 4px 2px !important;


}





/* ============================================================


   4. TOPBAR — Desktop gizli, mobil görünür


============================================================ */





.topbar,


header.topbar,


#topbar {


  background: transparent !important;


  border-bottom: none !important;


  height: 48px !important;


  min-height: 48px !important;


  padding: 0 8px !important;


}





/* Topbar butonları */


.btn-icon,


.topbar .btn-icon {


  color: #6B7A92 !important;


  border-radius: 8px !important;


  width: 34px !important;


  height: 34px !important;


  transition: background 0.14s, color 0.14s !important;


}





.btn-icon:hover {


  background: #252B36 !important;


  color: #EEF1F6 !important;


}





/* Topbar: kullanıcı avatar */


.tb-user-avatar-btn {


  border-color: #303744 !important;


  background: #252B36 !important;


}





.tb-user-avatar-btn:hover {


  border-color: #818CF8 !important;


}





.tb-user-initial {


  color: #EEF1F6 !important;


  font-weight: 700 !important;


}





/* Topbar bildirim dot */


.tb-notif-dot { background: #EF4444 !important; }





/* Topbar login/register butonları */


.btn-topbar-login {


  background: #1D212B !important;


  border: 1px solid #303744 !important;


  color: #ADB6C5 !important;


  border-radius: 8px !important;


  padding: 6px 14px !important;


  font-size: 13.5px !important;


  font-weight: 500 !important;


  transition: background 0.14s, color 0.14s !important;


}





.btn-topbar-login:hover {


  background: #252B36 !important;


  color: #EEF1F6 !important;


}





.btn-topbar-register {


  background: #818CF8 !important;


  color: #FFFFFF !important;


  border: none !important;


  border-radius: 8px !important;


  padding: 6px 14px !important;


  font-size: 13.5px !important;


  font-weight: 600 !important;


  transition: background 0.14s !important;


}





.btn-topbar-register:hover {


  background: #A5B4FC !important;


  color: #FFFFFF !important;


}





/* Topbar dropdown menüsü */


.tb-more-dropdown {


  background: #1D212B !important;


  border: 1px solid #303744 !important;


  border-radius: 12px !important;


  box-shadow: 0 12px 40px rgba(0,0,0,0.6) !important;


}





.tb-more-item {


  color: #ADB6C5 !important;


  border-radius: 8px !important;


  transition: background 0.12s, color 0.12s !important;


}





.tb-more-item:hover {


  background: #252B36 !important;


  color: #EEF1F6 !important;


}





.tb-more-danger, .tb-more-item.tb-more-danger { color: #EF4444 !important; }


.tb-more-item.tb-more-danger:hover { background: rgba(239,68,68,0.1) !important; }





.tb-more-divider {


  background: #1E2330 !important;


  height: 1px !important;


  margin: 4px 0 !important;


}





/* Topbar bildirim paneli */


.tb-notif-panel {


  background: #1D212B !important;


  border: 1px solid #303744 !important;


  border-radius: 14px !important;


  box-shadow: 0 12px 40px rgba(0,0,0,0.6) !important;


}





.tb-notif-panel-title { color: #EEF1F6 !important; }


.tb-notif-panel-header { border-bottom-color: #1E2330 !important; }


.tb-notif-title { color: #EEF1F6 !important; }


.tb-notif-msg { color: #ADB6C5 !important; }


.tb-notif-time { color: #6B7A92 !important; }


.tb-notif-item:hover { background: #252B36 !important; }


.tb-notif-item.unread { background: rgba(129,140,248,0.06) !important; }





/* Topbar dışa aktarma dropdown */


.tb-export-dropdown {


  background: #1D212B !important;


  border: 1px solid #303744 !important;


  border-radius: 12px !important;


  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;


}





.tb-export-option {


  color: #ADB6C5 !important;


  border-radius: 8px !important;


  transition: background 0.12s, color 0.12s !important;


}





.tb-export-option:hover {


  background: #252B36 !important;


  color: #EEF1F6 !important;


}





/* Topbar klavye kısayolları */


.tb-shortcuts-box {


  background: #1D212B !important;


  border: 1px solid #303744 !important;


  border-radius: 14px !important;


}





.tb-shortcuts-header { border-bottom-color: #1E2330 !important; color: #EEF1F6 !important; }





kbd {


  background: #252B36 !important;


  border: 1px solid #303744 !important;


  color: #ADB6C5 !important;


  border-radius: 5px !important;


  padding: 2px 6px !important;


  font-size: 11px !important;


  font-family: inherit !important;


}





/* Topbar arama kutusu */


.tb-search-box {


  background: #1D212B !important;


  border-color: #303744 !important;


  border-radius: 10px !important;


}





.tb-search-input { color: #EEF1F6 !important; }


.tb-search-input::placeholder { color: #5A6A82 !important; }


.tb-search-count { color: #6B7A92 !important; }





/* Topbar dil seçici */


.tb-lang-menu {


  background: #1D212B !important;


  border: 1px solid #303744 !important;


  border-radius: 10px !important;


  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;


}





.tb-lang-option { color: #ADB6C5 !important; border-radius: 7px !important; }


.tb-lang-option:hover { background: #252B36 !important; color: #EEF1F6 !important; }


.tb-lang-option.active { color: #818CF8 !important; }


.tb-lang-code { color: #ADB6C5 !important; font-size: 11px !important; font-weight: 600 !important; }





/* ── Mobil header ── */


.mobile-page-header {


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


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


}





.mobile-hamburger {


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


}





.mobile-header-btn {


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


  border-radius: 8px !important;


  transition: background 0.14s, color 0.14s !important;


}





.mobile-header-btn:hover {


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


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


}





/* ── Mobil hamburger favikon ── */


#tb-mobile-favicon-img {


  border-radius: 6px !important;


}





/* ============================================================


   5. SOHBET ALANI


============================================================ */





.chat-messages,


#chat-messages {


  flex: 1 !important;


  overflow-y: auto !important;


  overflow-x: hidden !important;


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


  padding-bottom: 0 !important;


}





/* ── Mesaj wrapper max-width ── */


.msg-wrapper,


.message-wrapper,


[class*="msg-wrapper"],


[class*="message-wrapper"] {


  max-width: 800px !important;


  margin-left: auto !important;


  margin-right: auto !important;


  width: 100% !important;


  padding-left: 16px !important;


  padding-right: 16px !important;


}





/* ── Kullanıcı balonu ── */


.msg-wrapper.user .msg-bubble,


.message-wrapper.user .msg-bubble,


.user-message .msg-bubble {


  background: var(--user-bubble-bg, var(--bg-surface)) !important;


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


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


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


  padding: 10px 16px !important;


  font-size: 0.9375rem !important;


  line-height: 1.65 !important;


  max-width: 80% !important;


  margin-left: auto !important;


  word-break: break-word !important;


}





/* ── AI balonu ── */


.msg-wrapper.ai .msg-bubble,


.msg-wrapper.assistant .msg-bubble,


.ai-message .msg-bubble,


.assistant-message .msg-bubble {


  background: transparent !important;


  border: none !important;


  padding: 2px 0 !important;


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


  font-size: 0.9375rem !important;


  line-height: 1.65 !important;


}





/* ── Avatar ── */


.msg-avatar.ai,


.ai-avatar {


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


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


  color: var(--accent) !important;


}





.msg-avatar.user,


.user-avatar-msg {


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


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


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


}





/* ── Model etiketi ── */


.msg-model-label { color: #6B7A92 !important; font-size: 11px !important; }





/* ── Mesaj aksiyon butonları ── */


.msg-action-btn {


  color: #6B7A92 !important;


  border-radius: 6px !important;


  transition: background 0.12s, color 0.12s !important;


}





.msg-action-btn:hover {


  background: #252B36 !important;


  color: #EEF1F6 !important;


}





/* ── AI yazıyor göstergesi ── */


.typing-indicator,


.gx-thinking-indicator,


[class*="typing"],


[class*="thinking"] {


  color: #6B7A92 !important;


  padding: 8px 0 !important;


  font-size: 14px !important;


  display: flex !important;


  align-items: center !important;


  gap: 6px !important;


}





/* "Düşünüyor" öncesi noktalar — yapı ile uyumlu nötr nabız.


   Durum metni (.gx-typing-label) kendi parıltısını taşır, nokta değildir. */


.gx-typing-dots {


  display: flex !important;


  align-items: center !important;


  gap: 5px !important;


}





.gx-typing-dots .gx-dot {


  background: currentColor !important;


  border-radius: 50% !important;


  width: 5px !important;


  height: 5px !important;


  display: inline-block !important;


  opacity: .35 !important;


  animation: gxDotPulse 1.4s ease-in-out infinite !important;


}





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


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





@keyframes gxDotPulse {


  0%, 70%, 100% { opacity: .30; transform: scale(.85); }


  35%           { opacity: 1;   transform: scale(1); }


}





@media (prefers-reduced-motion: reduce) {


  .gx-typing-dots .gx-dot { animation: none !important; opacity: .6 !important; }


}





/* ── Kaynak kutuları ── */


.gx-source-card,


.source-card,


[class*="source-card"],


[class*="source-item"] {


  background: #1D212B !important;


  border: 1px solid #303744 !important;


  border-radius: 10px !important;


  color: #ADB6C5 !important;


  font-size: 13px !important;


  padding: 8px 12px !important;


  margin: 4px 0 !important;


  transition: background 0.14s !important;


  text-decoration: none !important;


}





.gx-source-card:hover,


.source-card:hover {


  background: #252B36 !important;


  color: #EEF1F6 !important;


  text-decoration: none !important;


}





/* ── Welcome / boş durum ekranı ── */


.welcome-screen,


.empty-state,


#welcome-screen,


[class*="welcome"] {


  display: flex !important;


  flex-direction: column !important;


  align-items: center !important;


  justify-content: center !important;


  flex: 1 !important;


  padding: 40px 20px !important;


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


}





.welcome-title,


.gx-welcome-title {


  font-size: clamp(20px, 4vw, 28px) !important;


  font-weight: 700 !important;


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


  margin-bottom: 8px !important;


  text-align: center !important;


}





.welcome-subtitle,


.gx-welcome-subtitle {


  font-size: 15px !important;


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


  text-align: center !important;


  margin-bottom: 32px !important;


}





/* ── Örnek soru kartları ── */


.suggestion-card,


.prompt-suggestion,


[class*="suggestion"],


[class*="prompt-card"] {


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


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


  border-radius: 12px !important;


  padding: 12px 16px !important;


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


  font-size: 13.5px !important;


  cursor: pointer !important;


  transition: background 0.14s, border-color 0.14s !important;


  text-align: left !important;


}





.suggestion-card:hover,


.prompt-suggestion:hover {


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


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


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


}





/* ============================================================


   6. MESAJ YAZMA ALANI


============================================================ */





#input-area,


.input-area,


.chat-input-area {


  padding: 8px 16px 20px !important;


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


  flex-shrink: 0 !important;


}





/* Güvenli ekran boşluğu (iOS) */


@supports (padding-bottom: env(safe-area-inset-bottom)) {


  #input-area,


  .input-area,


  .chat-input-area {


    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;


  }


}





/* ── Input container ── */


#chat-input-container,


.gx-gemini-bar,


.chat-input-container,


[class*="input-container"] {


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


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


  border-radius: 16px !important;


  padding: 10px 14px !important;


  max-width: 800px !important;


  margin: 0 auto !important;


  width: 100% !important;


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


  transition: border-color 0.2s !important;


}





#chat-input-container:focus-within,


.gx-gemini-bar:focus-within {


  border-color: #818CF8 !important;


}





/* ── Textarea ── */


#message-input,


.gx-gemini-bar textarea,


.chat-input,


[class*="message-input"] {


  background: transparent !important;


  border: none !important;


  outline: none !important;


  color: #EEF1F6 !important;


  font-size: 15px !important;


  line-height: 1.55 !important;


  resize: none !important;


  width: 100% !important;


  max-height: 240px !important;


  overflow-y: auto !important;


  caret-color: #818CF8 !important;


  padding: 0 !important;


}





#message-input::placeholder,


.gx-gemini-bar textarea::placeholder,


.chat-input::placeholder {


  color: #5A6A82 !important;


}





/* ── Input buton satırı ── */


.input-actions,


.gx-input-actions,


.chat-input-actions {


  display: flex !important;


  align-items: center !important;


  justify-content: space-between !important;


  padding-top: 8px !important;


  border-top: 1px solid #252B36 !important;


  margin-top: 8px !important;


}





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


#send-btn,


.gx-send-btn,


.send-button {


  background: #818CF8 !important;


  color: #FFFFFF !important;


  border-radius: 8px !important;


  width: 34px !important;


  height: 34px !important;


  min-width: 34px !important;


  display: flex !important;


  align-items: center !important;


  justify-content: center !important;


  flex-shrink: 0 !important;


  transition: background 0.14s !important;


  cursor: pointer !important;


  border: none !important;


}





#send-btn:hover,


.gx-send-btn:hover,


.send-button:hover {


  background: #A5B4FC !important;


}





#send-btn:disabled,


.gx-send-btn:disabled,


.send-button:disabled {


  background: #252B36 !important;


  color: #4A5568 !important;


  cursor: not-allowed !important;


  opacity: 1 !important;


}





/* ── Input ikon butonları ── */


.input-icon-btn,


[class*="attach-btn"],


[class*="mic-btn"],


[class*="tool-btn"] {


  color: #6B7A92 !important;


  border-radius: 7px !important;


  width: 32px !important;


  height: 32px !important;


  display: flex !important;


  align-items: center !important;


  justify-content: center !important;


  transition: background 0.12s, color 0.12s !important;


  background: none !important;


  border: none !important;


  cursor: pointer !important;


}





.input-icon-btn:hover {


  background: #252B36 !important;


  color: #ADB6C5 !important;


}





.input-icon-btn.active {


  color: #818CF8 !important;


  background: rgba(129,140,248,0.1) !important;


}





/* ── Model seçici ── */


.model-selector,


.gx-model-selector,


#model-selector {


  display: flex !important;


  align-items: center !important;


  gap: 5px !important;


  color: #ADB6C5 !important;


  background: none !important;


  border: none !important;


  cursor: pointer !important;


  font-size: 13px !important;


  font-weight: 500 !important;


  border-radius: 7px !important;


  padding: 4px 8px !important;


  transition: background 0.12s, color 0.12s !important;


}





.model-selector:hover {


  background: #252B36 !important;


  color: #EEF1F6 !important;


}





/* ── Model dropdown ── */


.model-dropdown,


.speed-picker,


#model-dropdown {


  background: #1D212B !important;


  border: 1px solid #303744 !important;


  border-radius: 12px !important;


  padding: 6px !important;


  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;


  z-index: 9999 !important;


}





.model-option,


.speed-option {


  display: flex !important;


  align-items: center !important;


  gap: 10px !important;


  padding: 8px 10px !important;


  border-radius: 8px !important;


  color: #ADB6C5 !important;


  font-size: 13px !important;


  cursor: pointer !important;


  transition: background 0.12s, color 0.12s !important;


}





.model-option:hover,


.speed-option:hover {


  background: #252B36 !important;


  color: #EEF1F6 !important;


}





.model-option.active,


.speed-option.active,


.model-option.selected {


  color: #818CF8 !important;


}





.model-option.active::after {


  content: "✓" !important;


  margin-left: auto !important;


  color: #818CF8 !important;


}





/* ── Char sayacı ── */


.char-counter,


[class*="char-count"] {


  font-size: 11px !important;


  color: #4A5568 !important;


}





.char-counter.warning { color: #F59E0B !important; }


.char-counter.error   { color: #EF4444 !important; }





/* ── Ses kayıt ── */


.recording-indicator {


  color: #EF4444 !important;


  animation: recordingPulse 1s infinite !important;


}





@keyframes recordingPulse {


  0%, 100% { opacity: 1; }


  50% { opacity: 0.4; }


}





/* ============================================================


   7. DURUM VE HATA GÖSTERİMLERİ


============================================================ */





/* Başarı */


.status-success,


[class*="success-msg"],


.alert-success {


  background: rgba(16,185,129,0.12) !important;


  border: 1px solid rgba(16,185,129,0.25) !important;


  border-radius: 8px !important;


  color: #10B981 !important;


  padding: 10px 14px !important;


}





/* Hata */


.status-error,


[class*="error-msg"],


.alert-error,


.alert-danger {


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


  border: 1px solid rgba(239,68,68,0.25) !important;


  border-radius: 8px !important;


  color: #EF4444 !important;


  padding: 10px 14px !important;


}





/* Uyarı */


.status-warning,


[class*="warning-msg"],


.alert-warning {


  background: rgba(245,158,11,0.12) !important;


  border: 1px solid rgba(245,158,11,0.25) !important;


  border-radius: 8px !important;


  color: #F59E0B !important;


  padding: 10px 14px !important;


}





/* Bilgi */


.status-info,


.alert-info {


  background: rgba(59,130,246,0.12) !important;


  border: 1px solid rgba(59,130,246,0.25) !important;


  border-radius: 8px !important;


  color: #3B82F6 !important;


  padding: 10px 14px !important;


}





/* ── Toast bildirimleri ── */


.toast {


  background: #252B36 !important;


  border: 1px solid #303744 !important;


  border-radius: 10px !important;


  color: #EEF1F6 !important;


  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;


}





/* ── Kotası dolmuş uyarıları ── */


.quota-banner,


.limit-banner,


[class*="quota-warn"] {


  background: rgba(245,158,11,0.1) !important;


  border: 1px solid rgba(245,158,11,0.2) !important;


  border-radius: 10px !important;


  color: #F59E0B !important;


  padding: 10px 16px !important;


  font-size: 13px !important;


}





/* ── Kod bloğu header ── */


.code-header,


.code-block-header,


[class*="code-header"] {


  background: #161B22 !important;


  border-bottom: 1px solid #30363D !important;


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


  padding: 6px 12px !important;


  display: flex !important;


  align-items: center !important;


  justify-content: space-between !important;


}





.code-lang-label {


  font-size: 11px !important;


  color: #6B7A92 !important;


  font-weight: 600 !important;


  text-transform: uppercase !important;


  letter-spacing: 0.04em !important;


}





.copy-code-btn {


  font-size: 11px !important;


  color: #6B7A92 !important;


  cursor: pointer !important;


  padding: 2px 8px !important;


  border-radius: 5px !important;


  background: none !important;


  border: none !important;


  transition: background 0.12s, color 0.12s !important;


}





.copy-code-btn:hover {


  background: #252B36 !important;


  color: #ADB6C5 !important;


}





/* ── Satır içi kod ── */


:not(pre) > code {


  background: #1D212B !important;


  color: #A5B4FC !important;


  padding: 2px 6px !important;


  border-radius: 4px !important;


  font-size: 0.85em !important;


  border: 1px solid #303744 !important;


}





/* ── Tablo — sadece mesaj içeriğindeki tablolar ── */


/* Genel table/th/td seçicileri kaldırıldı — admin ve diğer sayfaları bozuyordu */


.msg-bubble table,


.gx-msg-content table {


  border-collapse: collapse;


  width: 100%;


  border-radius: 8px;


  overflow: hidden;


  display: block;


  overflow-x: auto;


  max-width: 100%;


}





.msg-bubble th,


.gx-msg-content th {


  background: #252B36;


  color: #EEF1F6;


  font-weight: 600;


  padding: 10px 14px;


  text-align: left;


  border-bottom: 1px solid #303744;


  font-size: 13px;


}





.msg-bubble td,


.gx-msg-content td {


  padding: 8px 14px;


  color: #ADB6C5;


  border-bottom: 1px solid #1E2330;


  font-size: 13.5px;


}





.msg-bubble tr:last-child td,


.gx-msg-content tr:last-child td { border-bottom: none; }


.msg-bubble tr:hover td,


.gx-msg-content tr:hover td { background: rgba(37,43,54,0.5); }





/* ── Bağlantılar ── */


.msg-bubble a {


  color: #818CF8 !important;


  text-decoration: underline !important;


  text-underline-offset: 2px !important;


}





.msg-bubble a:hover { color: #A5B4FC !important; }





/* ── Blockquote ── */


.msg-bubble blockquote {


  border-left: 3px solid #818CF8 !important;


  margin: 0.75em 0 !important;


  padding: 0.5em 1em !important;


  background: rgba(129,140,248,0.06) !important;


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


  color: #ADB6C5 !important;


}





/* ── HR ── */


hr {


  border: none !important;


  border-top: 1px solid #1E2330 !important;


  margin: 1em 0 !important;


}





/* ============================================================


   8. MODAL VE OVERLAY


============================================================ */





.modal-overlay,


[class*="modal-overlay"] {


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


  backdrop-filter: blur(4px) !important;


  -webkit-backdrop-filter: blur(4px) !important;


}





.modal-box,


.modal-content,


[class*="modal-box"] {


  background: #1D212B !important;


  border: 1px solid #303744 !important;


  border-radius: 14px !important;


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


}





.modal-header,


.modal-title {


  color: #EEF1F6 !important;


  border-bottom: 1px solid #1E2330 !important;


}





.modal-close-btn {


  color: #6B7A92 !important;


  border-radius: 7px !important;


}





.modal-close-btn:hover {


  background: #252B36 !important;


  color: #EEF1F6 !important;


}





/* ============================================================


   9. ADMIN / DASHBOARD sayfaları


============================================================ */





/* Admin tabloları */


.admin-table th { background: #1D212B !important; color: #EEF1F6 !important; }


.admin-table td { background: #151820 !important; color: #ADB6C5 !important; border-color: #1E2330 !important; }


.admin-table tr:hover td { background: #1D212B !important; }





/* Admin kartlar */


.stat-card, .info-card, .admin-card {


  background: #1D212B !important;


  border: 1px solid #303744 !important;


  border-radius: 12px !important;


  color: #EEF1F6 !important;


}





.stat-value { color: #EEF1F6 !important; font-weight: 700 !important; }


.stat-label { color: #6B7A92 !important; font-size: 13px !important; }





/* Admin navigasyon */


.admin-nav,


.admin-sidebar,


.admin-menu {


  background: #151820 !important;


  border-right-color: #1E2330 !important;


}





/* ============================================================


   10. GENEL FORMLAR / AUTH SAYFALAR


============================================================ */





/* Auth sayfaları */


.auth-card,


.login-card,


.register-card {


  background: #1D212B !important;


  border: 1px solid #303744 !important;


  border-radius: 16px !important;


}





.auth-title { color: #EEF1F6 !important; }


.auth-subtitle { color: #6B7A92 !important; }





.form-group label {


  color: #ADB6C5 !important;


  font-size: 13.5px !important;


  font-weight: 500 !important;


}





/* ── Form input genel stilleri ── */


/* NOT: width:100% burada kullanılmıyor — bileşen düzeyinde tanımlanır */


input[type="text"],


input[type="email"],


input[type="password"],


input[type="number"],


input[type="search"],


input[type="tel"],


textarea,


select {


  background: #151820 !important;


  border: 1px solid #303744 !important;


  border-radius: 8px !important;


  color: #EEF1F6 !important;


  font-size: 14px !important;


  padding: 9px 12px !important;


  color-scheme: dark !important;


  transition: border-color 0.15s !important;


}





input[type="text"]:focus,


input[type="email"]:focus,


input[type="password"]:focus,


textarea:focus,


select:focus {


  border-color: #818CF8 !important;


  box-shadow: 0 0 0 2px rgba(129,140,248,0.15) !important;


  outline: none !important;


}





input::placeholder,


textarea::placeholder {


  color: #5A6A82 !important;


}





/* Select koyu renk */


select {


  color-scheme: dark !important;


}





select option {


  background: #1D212B !important;


  color: #EEF1F6 !important;


}





/* Checkbox & Radio */


input[type="checkbox"],


input[type="radio"] {


  accent-color: #818CF8 !important;


  color-scheme: dark !important;


}





/* Mesaj yazma alanı textarea — override input stilini */


#message-input,


.gx-gemini-bar textarea,


.chat-input,


[class*="message-input"] {


  background: transparent !important;


  border: none !important;


  outline: none !important;


  padding: 0 !important;


  border-radius: 0 !important;


  box-shadow: none !important;


}





/* ── Birincil buton genel ── */


/* button[type="submit"] genel seçicisi kaldırıldı — admin formlarını bozuyordu */


.btn-primary,


.submit-btn {


  background: #818CF8 !important;


  color: #FFFFFF !important;


  border: none !important;


  border-radius: 8px !important;


  padding: 9px 18px !important;


  font-weight: 600 !important;


  cursor: pointer !important;


  transition: background 0.14s !important;


}





.btn-primary:hover,


.submit-btn:hover {


  background: #A5B4FC !important;


}





/* ── İkincil buton ── */


.btn-secondary {


  background: #1D212B !important;


  border: 1px solid #303744 !important;


  color: #ADB6C5 !important;


  border-radius: 8px !important;


  padding: 8px 16px !important;


  font-weight: 500 !important;


  cursor: pointer !important;


  transition: background 0.14s !important;


}





.btn-secondary:hover {


  background: #252B36 !important;


  color: #EEF1F6 !important;


}





/* ── Danger buton ── */


.btn-danger,


.btn-delete {


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


  border: 1px solid rgba(239,68,68,0.25) !important;


  color: #EF4444 !important;


  border-radius: 8px !important;


  padding: 8px 16px !important;


  cursor: pointer !important;


  transition: background 0.14s !important;


}





.btn-danger:hover { background: rgba(239,68,68,0.2) !important; }





/* ============================================================


   11. PRICING / PLAN SAYFASI


============================================================ */





.plan-card,


.pricing-card {


  background: #1D212B !important;


  border: 1px solid #303744 !important;


  border-radius: 16px !important;


  padding: 24px !important;


  transition: border-color 0.2s !important;


}





.plan-card:hover,


.pricing-card:hover {


  border-color: #818CF8 !important;


}





.plan-card.popular,


.plan-card.featured {


  border-color: #818CF8 !important;


  background: linear-gradient(135deg, rgba(129,140,248,0.08), #1D212B) !important;


}





.plan-price,


.pricing-price {


  color: #EEF1F6 !important;


  font-weight: 700 !important;


  font-size: 2rem !important;


}





.plan-name,


.pricing-name {


  color: #ADB6C5 !important;


  font-weight: 600 !important;


}





.plan-feature {


  color: #ADB6C5 !important;


  font-size: 13.5px !important;


  display: flex !important;


  align-items: center !important;


  gap: 8px !important;


  padding: 4px 0 !important;


}





.plan-feature .check-icon { color: #10B981 !important; }


.plan-feature .x-icon { color: #4A5568 !important; }





/* ============================================================


   12. MOBİL RESPONSIVE


============================================================ */





@media (max-width: 768px) {





  /* Sidebar overlay aktif */


  body.sidebar-open #sidebar-overlay,


  body.sidebar-open .sidebar-overlay {


    display: block !important;


    opacity: 1 !important;


  }





  /* Sidebar açık */


  body.sidebar-open #sidebar,


  body.sidebar-open .sidebar {


    transform: translateX(0) !important;


    visibility: visible !important;


  }





  /* Input alanı mobilden üste çıkmasın */


  #input-area,


  .input-area {


    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;


  }





  /* Mesaj genişliği */


  .msg-wrapper,


  .message-wrapper {


    padding-left: 10px !important;


    padding-right: 10px !important;


  }





  .msg-wrapper.user .msg-bubble,


  .message-wrapper.user .msg-bubble {


    max-width: 90% !important;


  }





  /* Model seçici kısalt */


  .model-selector-label { display: none !important; }





  /* Topbar düzeni */


  .topbar { padding: 0 8px !important; }





}





/* ============================================================


   13. GENEL TEMIZLIK — eski açık tema kalıntılarını gizle


============================================================ */





/* Açık tema ikonlarını gizle */


.sun-icon, .moon-icon,


[class*="sun-icon"], [class*="moon-icon"],


#icon-sun, #icon-moon,


#mobile-icon-sun, #mobile-icon-moon {


  display: none !important;


}





/* Açık tema light-only öğeleri gizle */


.logo-light-only,


[class*="light-only"],


[data-theme-show="light"] {


  display: none !important;


}





/* Koyu tema dark-only öğeleri göster */


.logo-dark-only,


[class*="dark-only"],


[data-theme-show="dark"] {


  display: block !important;


}





/* Geçiş animasyonlarını sadece belirli öğelerde uygula — genel * seçicisi animasyonları bozar */


/* Kaldırıldı: genel * transition kuralı — her bileşen kendi transition'ını tanımlar */





/* Hareket azaltma tercihi */


@media (prefers-reduced-motion: reduce) {


  *, *::before, *::after {


    animation-duration: 0.01ms !important;


    animation-iteration-count: 1 !important;


    transition-duration: 0.01ms !important;


  }


}





/* ============================================================


   14. SCROLL VE OVERFLOW


============================================================ */





/* Yatay kaydırmayı engelle */


body { overflow-x: hidden !important; }





/* Chat mesajlarında taşmayı engelle */


.msg-bubble pre,


.msg-content pre {


  max-width: 100% !important;


  overflow-x: auto !important;


}





/* Uzun bağlantılar */


.msg-bubble a {


  word-break: break-all !important;


  overflow-wrap: anywhere !important;


}





/* Tablo overflow */


.msg-bubble table {


  display: block !important;


  overflow-x: auto !important;


  max-width: 100% !important;


}





/* ============================================================


   15. TABlet (769–1024px)


============================================================ */





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


  #sidebar, .sidebar {


    width: 220px !important;


    min-width: 220px !important;


  }





  .msg-wrapper,


  .message-wrapper {


    padding-left: 14px !important;


    padding-right: 14px !important;


  }


}





/* ============================================================


   16. PRINT


============================================================ */





@media print {


  #sidebar, .sidebar { display: none !important; }


  #input-area, .input-area { display: none !important; }


  .topbar { display: none !important; }


  body { background: white !important; color: black !important; }


}





/* ============================================================


   17. EK DÜZELTMELER — Tespit edilen sorunlar


============================================================ */





/* ── Mobile header stil düzeltmeleri ── */


.mobile-page-header {


  display: flex !important;


  align-items: center !important;


  justify-content: space-between !important;


  padding: 0 12px !important;


  height: 52px !important;


  min-height: 52px !important;


  background: #151820 !important;


  border-bottom: 1px solid #1E2330 !important;


  flex-shrink: 0 !important;


  position: sticky !important;


  top: 0 !important;


  z-index: 100 !important;


  width: 100% !important;


}





@media (min-width: 769px) {


  .mobile-page-header { display: none !important; }


}





.mph-left {


  display: flex;


  align-items: center;


  gap: 8px;


  flex: 1;


  min-width: 0;


  overflow: hidden;


}





.mph-right {


  display: flex;


  align-items: center;


  gap: 4px;


  flex-shrink: 0;


}





.mobile-hamburger {


  display: flex;


  align-items: center;


  justify-content: center;


  width: 38px;


  height: 38px;


  border-radius: 8px;


  background: none;


  border: none;


  cursor: pointer;


  color: #ADB6C5;


  flex-shrink: 0;


  transition: background 0.14s, color 0.14s;


}





.mobile-hamburger:hover {


  background: #252B36;


  color: #EEF1F6;


}





.mobile-header-btn {


  display: flex;


  align-items: center;


  justify-content: center;


  width: 36px;


  height: 36px;


  border-radius: 8px;


  background: none;


  border: none;


  cursor: pointer;


  color: #ADB6C5;


  text-decoration: none;


  transition: background 0.14s, color 0.14s;


  flex-shrink: 0;


}





.mobile-header-btn:hover {


  background: #252B36;


  color: #EEF1F6;


  text-decoration: none;


}





.mobile-header-login-btn {


  padding: 5px 12px;


  border-radius: 7px;


  background: #1D212B;


  border: 1px solid #303744;


  color: #ADB6C5;


  font-size: 12.5px;


  font-weight: 500;


  text-decoration: none;


  white-space: nowrap;


  transition: background 0.14s;


}





.mobile-header-login-btn:hover {


  background: #252B36;


  color: #EEF1F6;


  text-decoration: none;


}





.mobile-header