/* ═══════════════════════════════════════════════════════════════════════════
   MEDYA SİYAH BEYAZ — YÖNETİM PANELİ TASARIMI
   Beşiktaş Renkleri: Kırmızı #e31b23 | Siyah #1a1a2e | Beyaz #fff
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CSS Variables ─────────────────────── */
:root {
  --msb-red: #e31b23;
  --msb-red-dark: #c41720;
  --msb-black: #1a1a2e;
  --msb-black-light: #16213e;
  --msb-surface: #f0f2f5;
  --msb-card: #ffffff;
  --msb-border: #e8ecf1;
  --msb-text: #1a1a2e;
  /* ⛔ 29.09.2026 — #8892a4 → #6b7080. ÖLÇÜM: eski ton beyaz zeminde
     3,14:1 veriyordu, yani WCAG AA'nın (4,5:1) ALTINDA; sayfadaki metin
     düğümlerinin %54'ü ≤11px olduğu için bu "küçük punto + soluk renk"
     bileşkesi etiketlerin neredeyse tamamını okunmaz yapıyordu (en kötüsü
     `.kpi-sub` 2,28:1). Yeni ton beyazda 4,94:1, `#fafbfc` tablo başlığında
     4,76:1, gövde zemininde 4,56:1 — üçü de AA'yı geçer.
     ⚠️ Denetlendi: canlıda `--msb-muted` kullanan 50 yaprak öğenin TAMAMI
     açık zeminde. Tek istisna `#f0f2f5` zeminliler (rozet + ⌘K ipucu,
     4,40:1'de kalıyordu) — onlara ayrıca `--msb-muted-on-tint` verildi.
     `.main-header .nav-link` kuralı ÖLÜ: `.main-header` görünümde
     `display:none !important` ile gizli. */
  --msb-muted: #6b7080;
  /* Koyu/açık tonlu (gri) zeminlerde AA'yı geçen ton: #f0f2f5 üstünde 5,43:1 */
  --msb-muted-on-tint: #5c6272;
  --msb-green: #22c55e;
  --msb-blue: #3b82f6;
  --msb-orange: #f97316;
  --msb-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --msb-shadow-lg: 0 10px 40px rgba(0,0,0,0.08);
  --msb-radius: 12px;
  --msb-radius-sm: 8px;
  --msb-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Body & Wrapper ────────────────────── */
body { font-family: 'Inter', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--msb-surface); }
.wrapper { overflow-x: hidden; }

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER — ÜST NAVBAR (Kompakt)
   ═══════════════════════════════════════════════════════════════════════════ */
.main-header {
  background: #fff !important;
  border-bottom: 1px solid var(--msb-border) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  height: 50px;
  padding: 0 16px;
}
.main-header .navbar-nav { align-items: center; }
.main-header .nav-link {
  color: var(--msb-muted) !important;
  font-weight: 500;
  font-size: 12px;
  padding: 6px 12px !important;
  border-radius: 6px;
  transition: var(--msb-transition);
}
.main-header .nav-link:hover { color: var(--msb-black) !important; background: var(--msb-surface); }
.main-header .nav-link i { font-size: 14px; }

/* Notification badge */
.navbar-badge {
  background: var(--msb-red) !important;
  font-size: 9px !important;
  font-weight: 700;
  padding: 2px 6px !important;
  border-radius: 10px;
  top: 3px !important;
  right: 2px !important;
  box-shadow: 0 0 0 2px #fff;
}

/* Header buttons */
.main-header .btn-outline-warning {
  color: var(--msb-orange) !important;
  border-color: #fed7aa !important;
  background: #fff7ed !important;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  padding: 6px 14px;
  transition: var(--msb-transition);
}
.main-header .btn-outline-warning:hover { background: #fed7aa !important; }
.main-header .btn-outline-danger {
  color: var(--msb-red) !important;
  border-color: #fecaca !important;
  background: #fff0f0 !important;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  padding: 6px 14px;
  transition: var(--msb-transition);
}
.main-header .btn-outline-danger:hover { background: #fecaca !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR — SOL MENÜ (Kompakt)
   ═══════════════════════════════════════════════════════════════════════════ */
.main-sidebar {
  background: linear-gradient(180deg, var(--msb-black) 0%, #0f0f23 100%) !important;
  border-right: none !important;
  width: 230px !important;
}
.main-sidebar .brand-link {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  padding: 12px 14px !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
.main-sidebar .brand-image {
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  border: 2px solid rgba(255,255,255,0.2);
}
.main-sidebar .brand-text {
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff !important;
}

/* User panel — kompakt */
.main-sidebar .user-panel {
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  padding: 10px 10px !important;
  margin: 0;
}
.main-sidebar .user-panel .image img {
  width: 32px !important;
  height: 32px !important;
  border: 2px solid var(--msb-red);
  box-shadow: 0 0 0 2px rgba(227,27,35,0.2);
}
.main-sidebar .user-panel .info a {
  color: #fff !important;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}
.main-sidebar .user-panel .info span {
  color: rgba(255,255,255,0.5) !important;
  font-size: 9px;
  letter-spacing: 0.5px;
}

/* Sidebar navigation — sıkı */
.sidebar { padding: 2px 6px; }
.nav-sidebar .nav-header {
  color: rgba(255,255,255,0.35) !important;
  font-size: 9px !important;
  letter-spacing: 1.5px;
  padding: 12px 10px 4px !important;
  font-weight: 700;
}
.nav-sidebar .nav-link {
  color: rgba(255,255,255,0.65) !important;
  border-radius: 6px !important;
  margin: 1px 0;
  padding: 7px 10px !important;
  font-size: 12px;
  font-weight: 500;
  transition: var(--msb-transition);
  position: relative;
}
.nav-sidebar .nav-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.06) !important;
}
.nav-sidebar .nav-link.active {
  color: #fff !important;
  background: linear-gradient(135deg, var(--msb-red), var(--msb-red-dark)) !important;
  box-shadow: 0 4px 12px rgba(227,27,35,0.35);
}
.nav-sidebar .nav-link.active::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  background: #fff;
  border-radius: 0 3px 3px 0;
}
.nav-sidebar .nav-icon { margin-right: 8px !important; font-size: 13px !important; width: 16px; text-align: center; }
.nav-sidebar .nav-link p { font-size: 12px; }
.nav-sidebar .nav-link i.right { font-size: 9px !important; color: rgba(255,255,255,0.3); }

/* Treeview submenu — kompakt */
.nav-treeview { background: rgba(0,0,0,0.2) !important; border-radius: 6px; margin: 1px 6px; }
.nav-treeview .nav-link {
  color: rgba(255,255,255,0.5) !important;
  font-size: 11px !important;
  padding: 6px 10px 6px 30px !important;
}
.nav-treeview .nav-link:hover { color: rgba(255,255,255,0.8) !important; background: rgba(255,255,255,0.03) !important; }
.nav-treeview .nav-link.active { color: #fff !important; background: rgba(227,27,35,0.3) !important; box-shadow: none; }
.nav-treeview .nav-link.active::before { left: 0; width: 2px; }

/* Badge in sidebar */
.nav-sidebar .badge-warning {
  background: var(--msb-orange) !important;
  color: #fff !important;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
}

/* Sidebar logout button */
.nav-sidebar .bg-danger {
  background: linear-gradient(135deg, var(--msb-red), var(--msb-red-dark)) !important;
  border-radius: 6px !important;
  margin-top: 12px;
  padding: 8px 10px !important;
}
.nav-sidebar .bg-danger:hover { box-shadow: 0 4px 16px rgba(227,27,35,0.4); }

/* Collapsed sidebar width */
.sidebar-mini.sidebar-collapse .main-sidebar { width: 50px !important; }
.sidebar-mini.sidebar-collapse .brand-text,
.sidebar-mini.sidebar-collapse .user-panel .info,
.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link p,
.sidebar-mini.sidebar-collapse .nav-sidebar .nav-header,
.sidebar-mini.sidebar-collapse .nav-treeview { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   CONTENT WRAPPER
   ═══════════════════════════════════════════════════════════════════════════ */
.content-wrapper { background: var(--msb-surface) !important; min-height: 100vh; margin-left: 230px !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD — KPI CARDS (Glass Morphism)
   ═══════════════════════════════════════════════════════════════════════════ */
.dash-wrap { padding: 20px; max-width: 1440px; }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.kpi-card {
  background: #fff;
  border-radius: 16px;
  padding: 22px 24px;
  border: 1px solid transparent;
  box-shadow: var(--msb-shadow);
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* Gradient accent bar at top */
.kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 16px 16px 0 0;
  transition: height 0.3s ease;
}
.kpi-card.news::before  { background: linear-gradient(90deg, #e31b23, #ff4444); }
.kpi-card.views::before { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.kpi-card.users::before { background: linear-gradient(90deg, #22c55e, #4ade80); }
.kpi-card.comms::before { background: linear-gradient(90deg, #f97316, #fb923c); }

/* Glow circle behind icon */
.kpi-card::after {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  opacity: 0.03;
  transition: all 0.4s ease;
}
.kpi-card.news::after  { background: #e31b23; }
.kpi-card.views::after { background: #3b82f6; }
.kpi-card.users::after { background: #22c55e; }
.kpi-card.comms::after { background: #f97316; }

.kpi-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--msb-shadow-lg);
  border-color: var(--msb-border);
}
.kpi-card:hover::after {
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  opacity: 0.06;
}
.kpi-card:hover::before { height: 4px; }

/* KPI icons */
.kpi-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.kpi-card:hover .kpi-icon { transform: scale(1.08); }
.kpi-icon.red    { background: linear-gradient(135deg, #fff0f0, #ffe0e0); color: #e31b23; }
.kpi-icon.blue   { background: linear-gradient(135deg, #eff6ff, #dbeafe); color: #3b82f6; }
.kpi-icon.green  { background: linear-gradient(135deg, #f0fdf4, #dcfce7); color: #22c55e; }
.kpi-icon.orange { background: linear-gradient(135deg, #fff7ed, #ffedd5); color: #f97316; }

.kpi-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--msb-black);
  font-family: 'Oswald', sans-serif;
  line-height: 1;
  letter-spacing: -0.5px;
}
.kpi-label { font-size: 12px; color: var(--msb-muted); margin-top: 5px; font-weight: 500; }
.kpi-sub {
  font-size: 11px;
  font-weight: 600;
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
  /* Kart içi metin alanı dar (~154 px); "Dün: 3.542 (%72,4) tekil 5.570"
     198 px istiyor. Sarmayı kontrolsüz bırakmak yerine AÇIKÇA sarıyoruz:
     `.kpi-sub-soft` `flex-basis:100%` alır ve daima kendi satırına geçer. */
  flex-wrap: wrap;
  letter-spacing: -0.2px;
}
/* ⛔ 29.09.2026 — yeşil #22c55e → #15803d. ÖLÇÜM: #22c55e beyaz zeminde
   2,28:1 veriyordu (sayfadaki EN DÜŞÜK kontrast; 11px metin için AA 4,5:1
   ister). #15803d aynı zeminde 5,01:1 — hâlâ açıkça yeşil ama okunur.
   ⚠️ `--msb-green` DEĞİŞTİRİLMEDİ: o değişken ikon dairelerinin ZEMİNİ
   olarak da kullanılıyor, karartmak tasarımı gereğinden fazla değiştirirdi.
   Yalnız METİN renkleri düzeltildi. */
.kpi-sub.up      { color: #15803d; }
.kpi-sub.down    { color: #e31b23; }
.kpi-sub.neutral { color: var(--msb-muted); }

/* İkinci metrik ("tekil 5.570") — bilerek KENDİ SATIRINDA ve bir punto
   küçük. `flex-basis:100%` düzeni kart genişliğinden bağımsız kılar.
   ⛔ Ayraç karakteri YOK: sarma noktası genişliğe göre değişseydi `·`
   bazen satır başında kalırdı ([[msb-yazar-seridi-okunma-esigi]]). */
.kpi-sub-soft {
  flex-basis: 100%;
  font-size: 10px;
  font-weight: 500;
  color: var(--msb-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEARCH BAR
   ═══════════════════════════════════════════════════════════════════════════ */
.search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  background: #fff;
  padding: 12px 20px;
  border-radius: var(--msb-radius);
  border: 1px solid var(--msb-border);
  box-shadow: var(--msb-shadow);
  transition: var(--msb-transition);
}
.search-bar:focus-within {
  border-color: var(--msb-red);
  box-shadow: 0 0 0 3px rgba(227,27,35,0.08);
}
.search-bar i { color: var(--msb-muted); font-size: 16px; }
.search-bar input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  color: var(--msb-black);
  background: transparent;
  font-family: inherit;
}
.search-bar input::placeholder { color: #c0c8d4; }
.search-bar button {
  background: linear-gradient(135deg, #e31b23, #c41720);
  color: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  font-family: inherit;
}
.search-bar button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(227,27,35,0.3); }
.search-bar .shortcut {
  font-size: 10px;
  background: #f0f2f5;
  padding: 3px 8px;
  border-radius: 6px;
  /* Gri zemin → AA için tint tonu (rozetle aynı gerekçe). */
  color: var(--msb-muted-on-tint);
  font-weight: 700;
  letter-spacing: 0.5px;
  border: 1px solid #e8ecf1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MAIN GRID
   ═══════════════════════════════════════════════════════════════════════════ */
.main-grid {
  display: grid;
  /* ⛔ `1fr` DEĞİL `minmax(0, 1fr)` (29.09.2026). Ölçüm: 412 px viewport'ta
     belge genişliği 454 px çıkıyordu, yani 42 px YATAY TAŞMA. Sebep: `1fr`'in
     asgari boyutu `auto`, o da içeriğin min-content genişliğine eşit; Chart.js
     tuvale 440 px satır içi genişlik yazınca kolon şişiyor ve grafiğin sağ
     ucu ekrandan taşıyordu. `body { overflow-x: hidden }` taşmayı GİZLİYOR,
     yok etmiyor — grafik mobilde kesik görünüyordu. Aynı tuzak projede iki kez
     kayıtlı: [[msb-news-detail-overflow-darkmode]], [[msb-news-create-ux]]. */
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  margin-bottom: 24px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════════════════ */
.dash-card {
  background: #fff;
  border-radius: var(--msb-radius);
  border: 1px solid var(--msb-border);
  box-shadow: var(--msb-shadow);
  overflow: hidden;
  transition: var(--msb-transition);
}
.dash-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.dash-card-head {
  padding: 16px 20px;
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fafbfc;
}
.dash-card-title {
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--msb-black);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.2px;
}
.dash-card-title i { color: var(--msb-red); font-size: 13px; width: 16px; text-align: center; }
.dash-card-body { padding: 20px; }
.dash-card-body.no-pad { padding: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   NEWS TABLE
   ═══════════════════════════════════════════════════════════════════════════ */
.news-table { width: 100%; border-collapse: collapse; }
.news-table th {
  font-size: 10px;
  font-weight: 700;
  color: var(--msb-muted);
  text-transform: uppercase;
  padding: 10px 14px;
  background: #fafbfc;
  border-bottom: 1px solid #f0f0f0;
  text-align: left;
  letter-spacing: 0.5px;
}
.news-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #fafafa;
  vertical-align: middle;
  font-size: 13px;
  color: var(--msb-black);
}
.news-table tr:last-child td { border-bottom: none; }
.news-table tr:hover td { background: #fafbfc; }
.news-thumb {
  width: 48px;
  height: 34px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: #1a1a2e;
}
.news-title-text { font-size: 13px; font-weight: 600; color: var(--msb-black); text-decoration: none; }
.news-title-text:hover { color: var(--msb-red); }
.status-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.2px;
}
.status-live  { background: #f0fdf4; color: #166534; }
/* #f5f5f5 zemin → `--msb-muted` 4,44:1 (kıl payı AA altı) → tint tonu. */
.status-draft { background: #f5f5f5; color: var(--msb-muted-on-tint); border: 1px solid #eee; }
.action-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  text-decoration: none;
  transition: var(--msb-transition);
  border: 1px solid #eee;
  color: var(--msb-muted);
  background: #fff;
}
.action-btn:hover {
  background: var(--msb-red);
  color: #fff;
  border-color: var(--msb-red);
  box-shadow: 0 2px 8px rgba(227,27,35,0.2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACTIVITY FEED
   ═══════════════════════════════════════════════════════════════════════════ */
.activity-list { max-height: 420px; overflow-y: auto; }
.activity-list::-webkit-scrollbar { width: 4px; }
.activity-list::-webkit-scrollbar-thumb { background: #e8ecf1; border-radius: 2px; }
.activity-item {
  display: flex;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid #f8f8f8;
  align-items: flex-start;
  transition: var(--msb-transition);
}
.activity-item:hover { background: #fafbfc; }
.activity-item:last-child { border-bottom: none; }
.activity-dot {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.activity-dot.edit    { background: linear-gradient(135deg, #eff6ff, #dbeafe); color: #3b82f6; }
.activity-dot.comment { background: linear-gradient(135deg, #f0fdf4, #dcfce7); color: #22c55e; }
.activity-body { flex: 1; min-width: 0; }
.activity-title { font-size: 13px; font-weight: 600; color: var(--msb-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-title a { color: var(--msb-black); text-decoration: none; }
.activity-title a:hover { color: var(--msb-red); }
.activity-meta { font-size: 11px; color: var(--msb-muted); margin-top: 2px; }
.activity-text { font-size: 12px; color: #666; margin-top: 3px; line-height: 1.4; }
.activity-time { font-size: 10px; color: #c0c8d4; white-space: nowrap; font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════════════════
   HEALTH LIST
   ═══════════════════════════════════════════════════════════════════════════ */
.health-list { list-style: none; padding: 0; margin: 0; }
.health-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border-bottom: 1px solid #f8f8f8;
  font-size: 13px;
  transition: var(--msb-transition);
}
.health-item:hover { background: #fafbfc; }
.health-item:last-child { border-bottom: none; }
.health-item a {
  color: var(--msb-black);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.health-item a:hover { color: var(--msb-red); }
.health-item a i { width: 16px; text-align: center; }
.health-count {
  background: #f0f2f5;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 11px;
  margin-left: auto;
  min-width: 24px;
  text-align: center;
}
.health-count.warn  { background: #fff7ed; color: #c2410c; }
.health-count.good  { background: #f0fdf4; color: #166534; }
.health-count.bad   { background: #fff0f0; color: #dc2626; }
.health-count.info  { background: #eff6ff; color: #1d4ed8; }

/* Health grid (SEO section) */
.health-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 16px 20px;
}
.health-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--msb-black);
  font-family: 'Oswald', sans-serif;
}
.health-label { font-size: 11px; color: var(--msb-muted); margin-top: 2px; }
.health-good { color: #166534 !important; }
.health-warn { color: #dc2626 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   CATEGORY BAR
   ═══════════════════════════════════════════════════════════════════════════ */
.cat-bar-wrap {
  display: flex;
  height: 20px;
  border-radius: 10px;
  overflow: hidden;
  gap: 2px;
}
.cat-bar {
  height: 100%;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ⚠️ 29.09.2026 — Lejant YENİDEN KURULDU. Eskiden `flex-wrap` ile yan yana
   akan satır içi öğelerdi ve sayılar `(1467)` gibi ayraçsız yazılıyordu.
   Kart sol (geniş) kolona taşındığı için artık satır düzeni kullanılıyor:
   ad solda, YÜZDE + sayı sağda hizalı → 6 kategori alt alta taranabilir.
   Çubuk da 10 → 14 px: 6 rengi lejantla eşleştirmek için fazla inceydi. */
/* Not: çubuk yüksekliği 20px KALDI. İlk taslakta "10px, çok ince" diye
   not düşmüştüm; ekran görüntüsünden yanlış okumuşum — kural zaten 20px.
   Gerekçe yanlış çıkınca değişiklik de yapılmadı. */
.cat-legend { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.cat-legend-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--msb-text); font-weight: 500;
}
.cat-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.cat-legend-name {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cat-legend-val {
  flex: 0 0 auto; font-size: 12px; font-weight: 700;
  color: var(--msb-black); font-variant-numeric: tabular-nums;
}
.cat-legend-cnt { font-weight: 500; color: var(--msb-muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   SPARKLINE
   ═══════════════════════════════════════════════════════════════════════════ */
.sparkline-wrap { display: flex; align-items: flex-end; gap: 3px; height: 52px; padding: 0 8px; }
.sparkline-bar {
  flex: 1;
  background: linear-gradient(180deg, #e31b23, #ff4444);
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.75;
  cursor: pointer;
}
.sparkline-bar:hover { opacity: 1; filter: brightness(1.1); }

/* 08.10.2026 — "veri yok" ile "0 okuma" ve "ölçek dışı" ayrımı.
   Gerekçe ve ölçüm: app/Views/admin/dashboard.php'deki sparkline bloğu. */
.sparkline-bar.is-future { background: var(--msb-border); opacity: 0.5; }
.sparkline-bar.is-zero   { opacity: 0.28; }
.sparkline-bar.is-clipped {
  background: linear-gradient(180deg, #8f0f16, #e31b23);
  opacity: 1;
  position: relative;
}
.sparkline-bar.is-clipped::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 3px;
  height: 2px;
  background: rgba(255, 255, 255, 0.92);
}
.sparkline-label {
  display: flex;
  justify-content: space-between;
  padding: 8px 8px 0;
  font-size: 10px;
  color: var(--msb-muted);
  font-weight: 600;
}
/* Kapsam notu (29.09.2026): sparkline `analytics_logs`'tan (yalnız haber
   detayı), KPI kartı `visitors`'tan (tüm sayfalar) besleniyor. İki sayı
   aynı ekranda çelişmesin diye kapsam burada yazılı. */
.sparkline-note {
  padding: 10px 8px 0;
  margin-top: 8px;
  border-top: 1px solid var(--msb-border);
  font-size: 10px;
  line-height: 1.5;
  color: var(--msb-muted);
}
.sparkline-note strong { color: var(--msb-text); }

/* ═══════════════════════════════════════════════════════════════════════════
   ONLINE USERS
   ───────────────────────────────────────────────────────────────────────────
   29.09.2026 — Eski `.online-avatar` daireleri KALDIRILDI. Bilgi taşımıyordu:
   her daire makale başlığının ilk harfiydi ve 8 dairenin 6'sı aynı harfti.
   Yerine satır listesi: canlılık noktası + tıklanabilir sayfa + göreli zaman.
   ═══════════════════════════════════════════════════════════════════════════ */
.online-list { list-style: none; margin: 0; padding: 6px 0; }
.online-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--msb-border);
}
.online-row:last-child { border-bottom: 0; }
.online-row:hover { background: #fafbfc; }

/* Canlılık noktası: son 60 saniyede görülenler yeşil ve nabız atar,
   daha eskiler sessiz gri — "şu anda" ile "5 dk önce" karışmasın. */
.online-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd2dc;
}
.online-dot.fresh { background: var(--msb-green); animation: pulse-green 2s infinite; }
@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
  50% { box-shadow: 0 0 0 4px rgba(34,197,94,0); }
}

.online-page {
  flex: 1 1 auto;
  min-width: 0;              /* flex çocuğu: ellipsis için ŞART, yoksa taşar */
  font-size: 12px;
  font-weight: 600;
  color: var(--msb-text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.online-page:hover { color: var(--msb-red); text-decoration: none; }
.online-time { flex: 0 0 auto; font-size: 10px; color: var(--msb-muted); font-weight: 600; }
.online-more {
  display: block;
  padding: 9px 20px;
  font-size: 11px;
  font-weight: 700;
  color: var(--msb-muted);
  text-decoration: none;
  border-top: 1px solid var(--msb-border);
}
.online-more:hover { color: var(--msb-red); text-decoration: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   CHART
   ═══════════════════════════════════════════════════════════════════════════ */
.chart-wrap { padding: 16px; }

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */
.main-footer {
  background: #fff !important;
  border-top: 1px solid var(--msb-border) !important;
  padding: 14px 24px !important;
  font-size: 12px;
  color: var(--msb-muted);
}
.main-footer a { color: var(--msb-red); text-decoration: none; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════
   TOAST NOTIFICATION (Override)
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes slideInRight {
  from { transform: translateX(120%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOutRight {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(120%); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE OVERRIDES (for AdminLTE dark components)
   ═══════════════════════════════════════════════════════════════════════════ */
.dropdown-menu {
  border-radius: var(--msb-radius-sm) !important;
  border: 1px solid var(--msb-border) !important;
  box-shadow: var(--msb-shadow-lg) !important;
  overflow: hidden;
}
.dropdown-item { font-size: 13px; padding: 10px 16px; color: var(--msb-black); }
.dropdown-item:hover { background: #fafbfc; color: var(--msb-red); }
.dropdown-item i { color: var(--msb-muted); width: 18px; }
.dropdown-header { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--msb-muted); }
.dropdown-footer { font-size: 12px; font-weight: 600; color: var(--msb-red); text-align: center; }

/* Modal */
.modal-content { border-radius: var(--msb-radius); border: none; box-shadow: var(--msb-shadow-lg); }
.modal-header { border-bottom: 1px solid var(--msb-border); }

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .main-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dash-wrap { padding: 12px; }
  .kpi-card { padding: 16px 18px; }
  .kpi-value { font-size: 22px; }
  .kpi-icon { width: 44px; height: 44px; font-size: 20px; border-radius: 10px; }
  .health-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD HEADER
   ═══════════════════════════════════════════════════════════════════════════ */
.dash-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 16px;
}
.dash-header-left { flex: 1; }
.dash-title {
  font-family: 'Oswald', sans-serif;
  font-size: 24px;
  font-weight: 800;
  margin: 0;
  color: var(--msb-black);
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-title-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #e31b23, #c41720);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
}
.dash-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--msb-muted);
  margin-top: 6px;
  font-weight: 500;
}
.dash-live-dot {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  animation: pulse-green 2s infinite;
}
.dash-meta-sep { color: #d1d5db; }
.dash-header-right {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.dash-btn-primary {
  background: linear-gradient(135deg, #e31b23, #c41720);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(227,27,35,0.2);
}
.dash-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(227,27,35,0.35);
  color: #fff;
  text-decoration: none;
}
.dash-btn-secondary {
  background: #fff;
  color: var(--msb-black);
  border: 1px solid var(--msb-border);
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.dash-btn-secondary:hover {
  background: #f8f9fa;
  border-color: #d1d5db;
  color: var(--msb-black);
  text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD HEADER EXTRAS
   ═══════════════════════════════════════════════════════════════════════════ */
.dash-card-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dash-card-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 20px;
  background: #f0f2f5;
  /* Gri zemin → `--msb-muted` burada 4,40:1'de kalırdı, AA altı. */
  color: var(--msb-muted-on-tint);
  /* 29.09.2026 — rozet KISA bir etikettir; sarması gerekmez. Sarmadığı için
     başlıkla aynı satırda kalır ve kart başlığı daha az kırılır.
     `flex: 0 0 auto` de şart: başlık uzunken rozet daralıp iki satıra düşüyordu. */
  white-space: nowrap;
  flex: 0 0 auto;
}
.dash-card-badge.live {
  background: #f0fdf4;
  color: #166534;
  animation: pulse-green 2s infinite;
}
.dash-card-badge.online {
  background: #eff6ff;
  color: #1d4ed8;
}
.dash-card-link {
  font-size: 11px;
  color: var(--msb-red);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.2s;
}
.dash-card-link:hover { color: #c41720; text-decoration: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   CHART CARD
   ═══════════════════════════════════════════════════════════════════════════ */
.dash-card-chart { border: 1px solid var(--msb-border); }
.dash-card-chart .chart-wrap { padding: 20px 24px; }

/* ═══════════════════════════════════════════════════════════════════════════
   NEWS TABLE (ENHANCED)
   ═══════════════════════════════════════════════════════════════════════════ */
.news-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.news-thumb-placeholder {
  width: 48px;
  height: 34px;
  border-radius: 6px;
  background: #f0f2f5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  font-size: 12px;
  flex-shrink: 0;
}
.views-count {
  font-weight: 700;
  font-size: 12px;
  color: var(--msb-black);
}
.views-today {
  /* #22c55e beyazda 2,28:1 idi → AA altı. Bkz. `.kpi-sub.up` gerekçesi. */
  color: #15803d;
  font-size: 10px;
  display: block;
  font-weight: 600;
}
.col-num { width: 85px; text-align: right; }
.col-status { width: 70px; text-align: center; }
.col-date { width: 90px; font-size: 11px; color: var(--msb-muted); }
.col-action { width: 50px; text-align: center; }
.empty-row {
  text-align: center;
  color: #bbb;
  padding: 30px !important;
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACTIVITY FEED (ENHANCED)
   ═══════════════════════════════════════════════════════════════════════════ */
.empty-activity {
  padding: 40px;
  text-align: center;
  color: #ccc;
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEALTH ICONS
   ═══════════════════════════════════════════════════════════════════════════ */
.health-icon-ok { color: #22c55e; }
.health-icon-neutral { color: #888; }
.health-icon-warn { color: #f97316; }
.health-icon-bad { color: #e31b23; }

/* ═══════════════════════════════════════════════════════════════════════════
   SPARKLINE
   ═══════════════════════════════════════════════════════════════════════════ */
.sparkline-section { padding: 12px 16px 16px; }

/* ═══════════════════════════════════════════════════════════════════════════
   SEO MINI GRID
   ═══════════════════════════════════════════════════════════════════════════ */
.seo-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 16px 20px;
}
.seo-mini-item {
  background: #fafbfc;
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  transition: var(--msb-transition);
}
.seo-mini-item:hover { background: #f0f2f5; }
.seo-mini-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--msb-black);
  font-family: 'Oswald', sans-serif;
  line-height: 1;
}
.seo-mini-value.val-ok { color: #166534; }
.seo-mini-value.val-warn { color: #dc2626; }
.seo-mini-label {
  font-size: 11px;
  color: var(--msb-muted);
  margin-top: 4px;
  font-weight: 500;
}
.seo-indexnow {
  margin: 0 20px 16px;
  padding: 10px 14px;
  background: #fafbfc;
  border-radius: 8px;
  font-size: 11px;
  color: var(--msb-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.seo-indexnow i { color: var(--msb-red); }
.seo-url-count {
  margin-left: auto;
  font-weight: 700;
  color: var(--msb-black);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CATEGORY LEGEND
   ═══════════════════════════════════════════════════════════════════════════ */
/* `.cat-count` 29.09.2026'da KALDIRILDI: lejant yeniden kurulunca
   (`cat-legend-val` + `cat-legend-cnt`) hiçbir görünüm kullanmıyordu. */

/* ═══════════════════════════════════════════════════════════════════════════
   KPI INFO WRAPPER
   ═══════════════════════════════════════════════════════════════════════════ */
.kpi-info { min-width: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   MAIN LEFT/RIGHT
   ═══════════════════════════════════════════════════════════════════════════ */
/* `min-width: 0` ŞART (29.09.2026): esnek/grid çocuğunun varsayılan asgari
   genişliği `auto`'dur ve içeriğinden (Chart.js tuvali) küçülemez; bu yüzden
   kolon daralmıyor, taşıyordu. Bkz. `.main-grid` üstündeki ölçüm notu. */
.main-left, .main-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.main-left > *, .main-right > * { min-width: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE (UPDATED)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .dash-header { flex-direction: column; }
  .dash-header-right { width: 100%; }
}
@media (max-width: 768px) {
  .dash-title { font-size: 19px; }
  .dash-title-icon { width: 34px; height: 34px; font-size: 14px; }
  .dash-btn-primary, .dash-btn-secondary { font-size: 12px; padding: 8px 14px; }
  .seo-mini-grid { grid-template-columns: 1fr 1fr; }
  .col-date, .col-status { display: none; }
}