/*
 * MONO — Siyah Kenar Çubuklu Beyaz/Işık Teması
 * Tamamen farklı: Açık arka plan, siyah sidebar, minimal, pro tasarım
 * Font: Inter
 */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

/* ═══════════════════════════════════════════════════
   1. KÖK DEĞİŞKENLER
═══════════════════════════════════════════════════ */
:root {
  /* Renkler */
  --m-black:      #09090b;
  --m-black2:     #18181b;
  --m-black3:     #27272a;
  --m-gray1:      #ffffff;
  --m-gray2:      #f1f1f1;
  --m-gray3:      #a1a1aa;
  --m-gray4:      #71717a;
  --m-gray5:      #52525b;
  --m-white:      #ffffff;
  --m-accent:     #18181b;    /* vurgu = siyah */
  --m-accent-alt: #3f3f46;
  --m-red:        #dc2626;
  --m-green:      #16a34a;
  --m-blue:       #2563eb;
  --m-amber:      #d97706;

  /* Sidebar: tam siyah */
  --m-sb-bg:      #ffffff;
  --m-sb-text:    #52525b;
  --m-sb-active:  #09090b;
  --m-sb-hover:   #f5f5f5;
  --m-sb-border:  #e5e5e5;
  --m-sb-accent:  #09090b;

  /* İçerik alanı: beyaz/açık */
  --m-bg:         #ffffff;
  --m-bg-card:    #ffffff;
  --m-border:     #e4e4e7;
  --m-text:       #09090b;
  --m-text-sub:   #000000;
  --m-text-muted: #000000;

  /* Radii & shadow */
  --m-r:          10px;
  --m-r-sm:       7px;
  --m-shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --m-shadow:     0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
  --m-shadow-lg:  0 12px 40px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.07);

  /* Base vars override */
  --pro-bg:           var(--m-bg);
  --pro-bg-card:      var(--m-bg-card);
  --pro-bg-elevated:  var(--m-gray1);
  --pro-border:       var(--m-border);
  --pro-border-strong:var(--m-gray2);
  --pro-accent:       var(--m-accent);
  --pro-accent-hover: var(--m-black2);
  --pro-accent-deep:  var(--m-black);
  --pro-glow:         var(--m-gray3);
  --pro-text:         var(--m-text);
  --pro-text-muted:   var(--m-text-muted);
  --pro-success:      var(--m-green);
  --pro-info:         var(--m-blue);
  --pro-warning:      var(--m-amber);
  --pro-danger:       var(--m-red);
  --pro-radius:       var(--m-r);
  --pro-radius-sm:    var(--m-r-sm);
  --pro-shadow:       var(--m-shadow);
  --pro-shadow-sm:    var(--m-shadow-sm);
  --sidebar-width:    260px;
  --topbar-height:    56px;
}

/* ═══════════════════════════════════════════════════
   2. BODY & GLOBAL
═══════════════════════════════════════════════════ */
body.app-body {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  -webkit-font-smoothing: antialiased !important;
  background: var(--m-bg) !important;
  color: var(--m-text) !important;
  min-height: 100vh;
  overflow-x: hidden;
}

body.app-body::before,
body.app-body::after {
  display: none !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif !important;
  color: var(--m-text) !important;
  font-weight: 700 !important;
}

a { color: var(--m-text) !important; }
a:hover { color: var(--m-black3) !important; }

body.app-body .text-muted { color: var(--m-text-muted) !important; }
body.app-body .text-primary { color: var(--m-accent) !important; }
body.app-body .text-secondary,
body.app-body small,
body.app-body .small {
  color: #000000 !important;
}

/* ═══════════════════════════════════════════════════
   3. LAYOUT
═══════════════════════════════════════════════════ */
.app-layout {
  display: flex !important;
  min-height: 100vh !important;
  background: var(--m-bg) !important;
}

.app-main {
  background: var(--m-bg) !important;
}

/* ═══════════════════════════════════════════════════
   4. SIDEBAR — TAM SİYAH
═══════════════════════════════════════════════════ */
.app-sidebar {
  background: var(--m-sb-bg) !important;
  border-right: 1px solid #e5e5e5 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.app-sidebar::after { display: none !important; }

/* Logo */
.sidebar-header {
  padding: 1.2rem 1.3rem !important;
  border-bottom: 1px solid #e5e5e5 !important;
}

.sidebar-logo {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #09090b !important;
  text-decoration: none !important;
}

.sidebar-logo:hover { color: #27272a !important; }

/* Nav */
.sidebar-nav { padding: 1rem 0.75rem !important; }

.sidebar-link {
  display: flex !important;
  align-items: center !important;
  gap: 0.7rem !important;
  padding: 0.55rem 0.85rem !important;
  color: #3f3f46 !important;
  border-radius: var(--m-r-sm) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.83rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  margin-bottom: 2px !important;
  border: 1px solid transparent !important;
  transition: all 0.15s ease !important;
  position: relative;
  text-decoration: none !important;
}

.app-sidebar .sidebar-link i {
  color: #3f3f46 !important;
  width: 1rem !important;
  font-size: 0.85rem !important;
}

.sidebar-link:hover:not(.active) {
  background: #f5f5f5 !important;
  color: #09090b !important;
  border-color: #e5e5e5 !important;
}

.app-sidebar .sidebar-link:hover:not(.active) i {
  color: #09090b !important;
}

.sidebar-link.active {
  background: #ffffff !important;
  color: #09090b !important;
  font-weight: 600 !important;
  border-color: #e5e5e5 !important;
}

.app-sidebar .sidebar-link.active i {
  color: #09090b !important;
}

.sidebar-link.active::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 20% !important;
  bottom: 20% !important;
  width: 3px !important;
  border-radius: 0 3px 3px 0 !important;
  background: #09090b !important;
  box-shadow: none !important;
}

/* Sidebar section labels */
.sidebar-section-label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #3f3f46 !important;
  padding: 0.75rem 0.9rem 0.35rem !important;
}

/* GEO Block */
.app-sidebar .sidebar-link.sidebar-link--geo-promo:not(.active) span {
  color: #fb923c !important;
}

/* Telegram block */
.telegram-section {
  margin: 10px 0 4px !important;
  padding: 9px 13px !important;
  border-radius: var(--m-r-sm) !important;
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  color: #09090b !important;
  font-weight: 600 !important;
  font-size: 0.83rem !important;
  outline: 0 !important;
  width: 100% !important;
  text-align: left !important;
}

.telegram-section:hover {
  background: #f5f5f5 !important;
}

.telegram-menu a {
  color: #3f3f46 !important;
  font-size: 0.8rem !important;
}

.telegram-menu a:hover { color: #09090b !important; }

/* Sidebar footer */
.sidebar-footer {
  border-top: 1px solid #e5e5e5 !important;
  padding: 0.85rem 0.75rem !important;
}

.sidebar-user { color: #52525b !important; text-decoration: none !important; }
.sidebar-user-name { color: #09090b !important; font-size: 0.83rem !important; font-weight: 500 !important; }

.sidebar-user-img {
  border: 2px solid #e5e5e5 !important;
  border-radius: 50% !important;
}

/* Dropdown (sidebar) */
.app-sidebar .dropdown-menu,
.profile-dropdown {
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: var(--m-r-sm) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.08) !important;
}

.app-sidebar .dropdown-item {
  color: #3f3f46 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.83rem !important;
}

.app-sidebar .dropdown-item:hover {
  background: #f5f5f5 !important;
  color: #09090b !important;
}

.app-sidebar .dropdown-item.active {
  background: #f5f5f5 !important;
  color: #09090b !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════
   5. TOPBAR — BEYAZ
═══════════════════════════════════════════════════ */
.app-topbar {
  background: #ffffff !important;
  border-bottom: 1px solid var(--m-border) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 1px 0 var(--m-border) !important;
}

.app-menu-toggle span {
  background: var(--m-black3) !important;
}
.app-menu-toggle:hover span { background: var(--m-black) !important; }

.breadcrumb-text {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.78rem !important;
  color: var(--m-text-muted) !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
}

/* ═══════════════════════════════════════════════════
   6. CONTENT AREA
═══════════════════════════════════════════════════ */
.app-content {
  background: var(--m-bg) !important;
}

.content-inner {
  background: var(--m-bg) !important;
}

/* ═══════════════════════════════════════════════════
   7. DASHBOARD CARDS — BEYAZ KARTlar
═══════════════════════════════════════════════════ */
.dashboard-card {
  background: var(--m-bg-card) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-r) !important;
  box-shadow: var(--m-shadow-sm) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: relative;
  overflow: hidden;
}

.dashboard-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: var(--m-black) !important;
  pointer-events: none !important;
}

.dashboard-card::after { display: none !important; }

.dashboard-card:hover {
  border-color: var(--m-gray2) !important;
  box-shadow: var(--m-shadow) !important;
  transform: none !important;
}

/* Card heading */
.card-heading {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--m-text-muted) !important;
  margin-bottom: 1.25rem !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 1px solid var(--m-border) !important;
}

.card-heading::before { display: none !important; }

/* ═══════════════════════════════════════════════════
   8. STAT CARDS
═══════════════════════════════════════════════════ */
.stat-card {
  background: var(--m-bg-card) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-r) !important;
  box-shadow: var(--m-shadow-sm) !important;
  padding: 1.35rem 1.4rem !important;
  position: relative !important;
  overflow: hidden !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Siyah sol kenar çizgisi */
.stat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--m-black);
  border-radius: 0 2px 2px 0;
}

.stat-card::after { display: none !important; }

.dashboard-section .stats-grid > .stat-card:hover {
  border-color: var(--m-gray2) !important;
  box-shadow: var(--m-shadow) !important;
  transform: translateY(-2px) !important;
}

.stat-icon {
  background: var(--m-gray1) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-r-sm) !important;
  width: 44px !important;
  height: 44px !important;
  box-shadow: none !important;
}

.stat-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.09em !important;
  color: var(--m-text-muted) !important;
}

.stat-value {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.85rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  color: var(--m-text) !important;
  line-height: 1.1 !important;
}

.stat-card small.text-muted {
  font-size: 0.7rem !important;
  color: var(--m-text-muted) !important;
  font-family: 'Inter', sans-serif !important;
}

/* ═══════════════════════════════════════════════════
   9. PLAN BAR
═══════════════════════════════════════════════════ */
.user-plan-bar {
  background: var(--m-bg-card) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-r) !important;
  box-shadow: var(--m-shadow-sm) !important;
  backdrop-filter: none !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.78rem !important;
}

/* ═══════════════════════════════════════════════════
   10. TABLES
═══════════════════════════════════════════════════ */
.methods-table thead th,
body.app-body .table thead th,
body.app-body .thead-light th {
  background: var(--m-gray1) !important;
  color: var(--m-text-muted) !important;
  border-color: var(--m-border) !important;
  border-bottom: 2px solid var(--m-black) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body.app-body .table td,
body.app-body .table tbody th {
  border-color: var(--m-border) !important;
  color: var(--m-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.84rem !important;
  background: var(--m-bg-card) !important;
}

body.app-body .table-hover tbody tr:hover td,
.methods-table tbody tr:hover td {
  background: var(--m-gray1) !important;
}

.method-name {
  color: var(--m-text) !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════
   11. NEWS
═══════════════════════════════════════════════════ */
.news-item {
  border-bottom: 1px solid var(--m-border) !important;
  padding-bottom: 1rem !important;
  margin-bottom: 1rem !important;
}

.news-date {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.65rem !important;
  color: var(--m-text-muted) !important;
  letter-spacing: 0.05em !important;
}

.news-title {
  color: var(--m-text) !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  font-family: 'Inter', sans-serif !important;
}

.news-text {
  color: var(--m-text-sub) !important;
  font-size: 0.82rem !important;
}

.news-icon {
  background: var(--m-gray1) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-r-sm) !important;
}

/* ═══════════════════════════════════════════════════
   12. NETWORK STATUS / METHODS
═══════════════════════════════════════════════════ */
#methods-status-block {
  background: var(--m-bg-card) !important;
  border: 1px solid var(--m-border) !important;
  box-shadow: var(--m-shadow-sm) !important;
}

#methods-status-block .ms-title {
  color: var(--m-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
}

#methods-status-block .ms-title i { color: var(--m-text-muted) !important; }

.ms-summary {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.65rem !important;
  color: var(--m-text-muted) !important;
}

.ns-card {
  background: var(--m-bg-card) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-r) !important;
  box-shadow: var(--m-shadow-sm) !important;
}

.ns-type-pill {
  background: var(--m-gray1) !important;
  color: var(--m-text-muted) !important;
  border: 1px solid var(--m-border) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.62rem !important;
}

.ns-title-dot {
  background: var(--m-black) !important;
  box-shadow: none !important;
}

.ns-progress-fill {
  background: var(--m-black) !important;
}

.ns-status-pill {
  background: var(--m-gray1) !important;
  color: var(--m-text-sub) !important;
}

.ns-status-pill-dot { background: var(--m-black) !important; }

.ms-row {
  background: var(--m-bg-card) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-r-sm) !important;
}

.ms-row:hover {
  background: var(--m-gray1) !important;
  border-color: var(--m-gray2) !important;
}

.ms-row-name {
  color: var(--m-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;
}

.ms-bar.status-green  { background: #16a34a !important; }
.ms-bar.status-orange { background: #d97706 !important; }
.ms-bar.status-red    { background: #dc2626 !important; }

.ms-badge.status-green  { background: #dcfce7 !important; color: #15803d !important; font-weight: 600 !important; }
.ms-badge.status-orange { background: #fef3c7 !important; color: #b45309 !important; font-weight: 600 !important; }
.ms-badge.status-red    { background: #fee2e2 !important; color: #b91c1c !important; font-weight: 600 !important; }

/* ═══════════════════════════════════════════════════
   13. ONLINE PILLS
═══════════════════════════════════════════════════ */
.online-pill {
  background: var(--m-gray1) !important;
  border: 1px solid var(--m-border) !important;
  color: var(--m-text-muted) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.62rem !important;
  border-radius: 999px !important;
}

/* ═══════════════════════════════════════════════════
   14. PROGRESS BARS
═══════════════════════════════════════════════════ */
.progress {
  background: var(--m-gray2) !important;
  border-radius: 999px !important;
  height: 6px !important;
}

.progress-bar {
  background: var(--m-black) !important;
}

/* ═══════════════════════════════════════════════════
   15. BUTTONS
═══════════════════════════════════════════════════ */
body.app-body .btn-primary,
body.login-page .btn-primary {
  background: var(--m-black) !important;
  border-color: var(--m-black) !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  border-radius: var(--m-r-sm) !important;
  box-shadow: none !important;
}

body.app-body .btn-primary:hover,
body.login-page .btn-primary:hover {
  background: var(--m-black2) !important;
  border-color: var(--m-black2) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2) !important;
}

body.app-body .btn-secondary {
  background: var(--m-bg-card) !important;
  border-color: var(--m-border) !important;
  color: var(--m-text) !important;
}

body.app-body .btn-secondary:hover {
  background: var(--m-gray1) !important;
  border-color: var(--m-gray2) !important;
}

body.app-body .btn-danger {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #fff !important;
}

body.app-body .btn-success {
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: #fff !important;
}

body.app-body .badge-primary {
  background: var(--m-black) !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════
   16. BOOTSTRAP CARDS
═══════════════════════════════════════════════════ */
body.app-body .card,
body.app-body .card-box {
  background: var(--m-bg-card) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-r) !important;
  box-shadow: var(--m-shadow-sm) !important;
  color: var(--m-text) !important;
  backdrop-filter: none !important;
}

body.app-body .card-header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--m-border) !important;
  color: var(--m-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
}

body.app-body .card-body {
  background: var(--m-bg-card) !important;
  color: var(--m-text) !important;
}

/* ═══════════════════════════════════════════════════
   17. ALERTS
═══════════════════════════════════════════════════ */
body.app-body .alert-success,
body.login-page .alert-success {
  background: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
  color: #15803d !important;
  border-radius: var(--m-r-sm) !important;
}

body.app-body .alert-danger,
body.login-page .alert-danger {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #b91c1c !important;
  border-radius: var(--m-r-sm) !important;
}

body.app-body .alert-warning {
  background: #fffbeb !important;
  border-color: #fde68a !important;
  color: #b45309 !important;
  border-radius: var(--m-r-sm) !important;
}

body.app-body .alert-info {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #1d4ed8 !important;
  border-radius: var(--m-r-sm) !important;
}

/* ═══════════════════════════════════════════════════
   18. FORM CONTROLS
═══════════════════════════════════════════════════ */
body.app-body .form-control,
body.login-page .form-control {
  background: #ffffff !important;
  border: 1px solid var(--m-border) !important;
  color: var(--m-text) !important;
  border-radius: var(--m-r-sm) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.875rem !important;
  box-shadow: var(--m-shadow-sm) !important;
}

body.app-body .form-control:focus,
body.login-page .form-control:focus {
  border-color: var(--m-black) !important;
  box-shadow: 0 0 0 3px rgba(9,9,11,0.1) !important;
  background: #ffffff !important;
}

body.app-body .form-control::placeholder { color: var(--m-text-muted) !important; }

body.app-body label,
body.login-page label {
  color: var(--m-text-sub) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  font-family: 'Inter', sans-serif !important;
}

body.app-body select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2371717a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.6rem center !important;
  background-size: 1.2em !important;
}

/* Hub form */
.hub-form-card .hub-form .form-control {
  background: #ffffff !important;
  border-color: var(--m-border) !important;
  color: var(--m-text) !important;
}

.hub-form-card .hub-form .form-control:focus {
  border-color: var(--m-black) !important;
  box-shadow: 0 0 0 3px rgba(9,9,11,0.1) !important;
}

.hub-form-card .btn-hit {
  background: var(--m-black) !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  border: none !important;
  letter-spacing: 0.02em !important;
}

.hub-form-card .btn-hit:hover {
  background: #18181b !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
}

.hub-bulk-input, .api-input {
  background: #ffffff !important;
  border: 1px solid var(--m-border) !important;
  color: var(--m-text) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.8rem !important;
}

.btn-bulk {
  background: var(--m-gray1) !important;
  border-color: var(--m-border) !important;
  color: var(--m-text-sub) !important;
  font-weight: 600 !important;
}

.btn-bulk:hover {
  background: var(--m-gray2) !important;
  border-color: var(--m-gray3) !important;
  color: var(--m-text) !important;
}

/* Range slider */
.hub-concurrents-slider {
  background: var(--m-gray2) !important;
}
.hub-concurrents-slider::-webkit-slider-thumb {
  background: var(--m-black) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25) !important;
}
.hub-concurrents-slider::-moz-range-thumb {
  background: var(--m-black) !important;
}

/* ═══════════════════════════════════════════════════
   19. BLOCK (LEGACY BOOTSTRAP THEME)
═══════════════════════════════════════════════════ */
body.app-body .block,
body.app-body .block-themed,
body.app-body .block-rounded {
  background: var(--m-bg-card) !important;
  border: 1px solid var(--m-border) !important;
  box-shadow: var(--m-shadow-sm) !important;
  backdrop-filter: none !important;
}

body.app-body .block-header,
body.app-body .bg-gd-primary,
body.app-body .bg-corporate-dark {
  background: var(--m-gray1) !important;
  border-bottom: 1px solid var(--m-border) !important;
  color: var(--m-text) !important;
}

body.app-body .block-title {
  color: var(--m-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════
   20. BADGES
═══════════════════════════════════════════════════ */
body.app-body .badge-secondary { background: var(--m-gray2) !important; color: var(--m-text-sub) !important; }
body.app-body .badge-success   { background: #dcfce7 !important; color: #15803d !important; }
body.app-body .badge-warning   { background: #fef3c7 !important; color: #b45309 !important; }
body.app-body .badge-danger    { background: #fee2e2 !important; color: #b91c1c !important; }
body.app-body .badge-info      { background: #eff6ff !important; color: #1d4ed8 !important; }

/* ═══════════════════════════════════════════════════
   21. PRICING SAYFASI
═══════════════════════════════════════════════════ */
.pricing-card {
  background: var(--m-bg-card) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-r) !important;
  box-shadow: var(--m-shadow-sm) !important;
  backdrop-filter: none !important;
}

.pricing-card::before {
  background: var(--m-black) !important;
  height: 3px !important;
  opacity: 1 !important;
}

.pricing-card:hover {
  border-color: var(--m-gray3) !important;
  box-shadow: var(--m-shadow-lg) !important;
  transform: translateY(-4px) !important;
}

.pricing-card-icon-wrap {
  background: var(--m-gray1) !important;
  border: 1px solid var(--m-border) !important;
}

.pricing-card-icon { color: var(--m-text) !important; }

.btn-pricing {
  background: var(--m-black) !important;
  border: none !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

.btn-pricing:hover {
  background: var(--m-black2) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;
}

/* ═══════════════════════════════════════════════════
   22. FAQ SAYFASI
═══════════════════════════════════════════════════ */
.faq-cta-icon { color: var(--m-text) !important; }
.faq-col-title i { color: var(--m-text) !important; }
.faq-trigger { color: var(--m-text) !important; font-family: 'Inter', sans-serif !important; font-weight: 600 !important; }
.faq-trigger[aria-expanded="true"] { color: var(--m-black) !important; }
.faq-trigger:hover { background: var(--m-gray1) !important; }

.faq-accordion-item {
  background: var(--m-bg-card) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-r-sm) !important;
}

.faq-accordion-body { color: var(--m-text-sub) !important; }

/* ═══════════════════════════════════════════════════
   23. LOGIN / REGISTER SAYFASI
═══════════════════════════════════════════════════ */
body.login-page {
  background: var(--m-gray1) !important;
  font-family: 'Inter', sans-serif !important;
}

.login-left {
  background: #ffffff !important;
  border-right: none !important;
}

.login-right {
  background: var(--m-white) !important;
}

.login-brand-title {
  color: #09090b !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-size: 1.4rem !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

.login-form-title {
  color: var(--m-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.5rem !important;
  letter-spacing: -0.03em !important;
}

.login-form-subtitle { color: var(--m-text-muted) !important; }
.login-brand-desc { color: #52525b !important; }

.login-form .form-control {
  background: #ffffff !important;
  border: 1px solid var(--m-border) !important;
  color: var(--m-text) !important;
}

.login-form .form-control:focus {
  border-color: var(--m-black) !important;
  box-shadow: 0 0 0 3px rgba(9,9,11,0.1) !important;
}

.btn-login {
  background: var(--m-black) !important;
  border: none !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

.btn-login:hover {
  background: #18181b !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
}

.login-signup { color: var(--m-text-muted) !important; }
.login-signup a { color: var(--m-text) !important; font-weight: 600 !important; }
.login-signup a:hover { color: var(--m-black2) !important; }

/* ═══════════════════════════════════════════════════
   24. PROFILE / HESAP
═══════════════════════════════════════════════════ */
.account-info-row {
  border-bottom: 1px solid var(--m-border) !important;
  padding: 0.75rem 0 !important;
}

.account-info-label {
  color: var(--m-text-muted) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  font-family: 'Inter', sans-serif !important;
}

.account-info-value {
  color: var(--m-text) !important;
  font-weight: 500 !important;
  font-family: 'Inter', sans-serif !important;
}

.card-heading-accent {
  border-left: 3px solid var(--m-black) !important;
  padding-left: 0.75rem !important;
}

/* ═══════════════════════════════════════════════════
   25. CHARTIST
═══════════════════════════════════════════════════ */
.ct-chart .ct-series-a .ct-line  { stroke: #09090b !important; stroke-width: 2px !important; }
.ct-chart .ct-series-a .ct-point { stroke: #09090b !important; }
.ct-chart .ct-series-a .ct-area  { fill: rgba(9,9,11,0.06) !important; }
#chart-attacks .ct-series-a .ct-line  { stroke: #09090b !important; }
#chart-attacks .ct-series-a .ct-point { stroke: #09090b !important; }
#chart-attacks .ct-series-a .ct-area  { fill: rgba(9,9,11,0.06) !important; }
.ct-chart .ct-grid { stroke: var(--m-border) !important; }
.ct-chart .ct-label {
  fill: var(--m-text-muted) !important;
  color: var(--m-text-muted) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.65rem !important;
}

/* ═══════════════════════════════════════════════════
   26. PAGINATION
═══════════════════════════════════════════════════ */
body.app-body .page-link {
  background: var(--m-bg-card) !important;
  border-color: var(--m-border) !important;
  color: var(--m-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.82rem !important;
}

body.app-body .page-item.active .page-link {
  background: var(--m-black) !important;
  border-color: var(--m-black) !important;
  color: #fff !important;
}

body.app-body .page-link:hover {
  background: var(--m-gray1) !important;
  border-color: var(--m-gray2) !important;
  color: var(--m-text) !important;
}

/* ═══════════════════════════════════════════════════
   27. FOOTER
═══════════════════════════════════════════════════ */
.app-footer {
  background: var(--m-bg-card) !important;
  border-top: 1px solid var(--m-border) !important;
  color: var(--m-text-muted) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.75rem !important;
}

/* ═══════════════════════════════════════════════════
   28. SCROLLBAR — MİNİMAL
═══════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb {
  background: var(--m-gray2);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--m-gray3); }
::-webkit-scrollbar-track { background: transparent; }

/* Sidebar kendi scrollbar'ı */
.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.18);
}

/* ═══════════════════════════════════════════════════
   29. MS DOT STATUS
═══════════════════════════════════════════════════ */
.ms-row-name .ms-dot.status-green  { background: #16a34a !important; }
.ms-row-name .ms-dot.status-orange { background: #d97706 !important; }
.ms-row-name .ms-dot.status-red    { background: #dc2626 !important; }

/* ═══════════════════════════════════════════════════
   30. MOBILE
═══════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .app-sidebar.open {
    box-shadow: 4px 0 32px rgba(0,0,0,0.18) !important;
  }
}

/* ═══════════════════════════════════════════════════
   31. YARDIMCI SINIFLARI OVERRIDE
═══════════════════════════════════════════════════ */
body.app-body .bg-dark { background: var(--m-black) !important; }
body.app-body .bg-light { background: var(--m-gray1) !important; }
body.app-body .border { border-color: var(--m-border) !important; }
body.app-body .text-dark { color: var(--m-text) !important; }
body.app-body .text-white { color: #ffffff !important; }

/* Dividers */
body.app-body hr {
  border-color: var(--m-border) !important;
  opacity: 1 !important;
}

/* Input groups */
body.app-body .input-group-text {
  background: #ffffff !important;
  border-color: var(--m-border) !important;
  color: var(--m-text-sub) !important;
  font-family: 'Inter', sans-serif !important;
}

/* Nav tabs */
body.app-body .nav-tabs .nav-link {
  color: var(--m-text-muted) !important;
  border-color: transparent transparent var(--m-border) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.84rem !important;
}

body.app-body .nav-tabs .nav-link.active {
  color: var(--m-text) !important;
  background: var(--m-bg-card) !important;
  border-color: var(--m-border) var(--m-border) var(--m-bg-card) !important;
  font-weight: 700 !important;
}

/* Modal */
body.app-body .modal-content {
  background: var(--m-bg-card) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-r) !important;
  color: var(--m-text) !important;
}

body.app-body .modal-header {
  border-bottom: 1px solid var(--m-border) !important;
  background: var(--m-gray1) !important;
}

body.app-body .modal-footer {
  border-top: 1px solid var(--m-border) !important;
}

body.app-body .modal-title {
  color: var(--m-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
}

/* Tooltips */
body.app-body .tooltip-inner {
  background: var(--m-black) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.75rem !important;
}

/* ═══════════════════════════════════════════════════
   32. REDUCED MOTION
═══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 0.01ms !important; }
}

/* Global readability: lightweight text color defaults */
body,
body p,
body span,
body label,
body td,
body th,
body small,
body .text-muted,
body .text-secondary {
  color: #000000 !important;
}

body input::placeholder,
body textarea::placeholder {
  color: #000000 !important;
  opacity: 1 !important;
}