/* =====================================================================
   WAF Panel — Dashtic teması üzerine EK içerik stilleri.
   Kabuk (sidebar/header/footer) tamamen gerçek Dashtic'tir; buradaki
   sınıflar yalnızca içerik view'larındaki bileşenleri (kart, tablo,
   rozet, form, stat, login) Dashtic diline uyumlu tamamlar.
   Accent = Dashtic primary (indigo). Switcher'dan canlı değiştirilebilir.
   ===================================================================== */
:root {
  --accent:        rgb(var(--primary-rgb, 68 84 195));
  --accent2:       #363f9c;
  --accent-rgb:    var(--primary-rgb, 68, 84, 195);
  --accent-soft:   rgba(var(--primary-rgb, 68, 84, 195), .1);
  --secondary:     #f72d66;
  --wtext:         #424e79;
  --wmuted:        #728096;
  --wborder:       #eff0f6;
}

/* ── Cards (içerik) ──────────────────────────────────────────────── */
.card-title { font-size: 14px; font-weight: 600; color: var(--wtext); }
.card-sub { font-size: 12px; color: var(--wmuted); font-weight: 400; margin-top: 2px; }
.card-link { font-size: 12px; font-weight: 600; color: var(--accent); }
.card-link:hover { color: var(--accent2); }

/* ── Page head (view içi başlık) ─────────────────────────────────── */
.page-head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head h1 { font-size: 20px; font-weight: 600; margin: 0; color: var(--wtext); }
.page-head .muted { color: var(--wmuted); font-size: 13px; margin: 4px 0 0; font-weight: 400; }

/* ── Stat card ───────────────────────────────────────────────────── */
.stat-icon { width: 44px; height: 44px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-size: 18px; }
.stat-value { font-size: 24px; font-weight: 700; color: var(--wtext); }
.stat-label { font-size: 12px; color: var(--wmuted); font-weight: 500; margin-top: 2px; }

.soft-orange  { background: rgba(252,115,3,.12);  color: #fc7303; }
.soft-blue    { background: rgba(69,170,242,.12);  color: #45aaf2; }
.soft-violet  { background: rgba(170,76,242,.12);  color: #aa4cf2; }
.soft-rose    { background: rgba(247,45,102,.12);  color: #f72d66; }
.soft-emerald { background: rgba(45,206,137,.12);  color: #2dce89; }
.soft-amber   { background: rgba(236,180,3,.14);   color: #d99e00; }
.soft-slate   { background: rgba(68,84,195,.1);    color: #4454c3; }
.soft-primary { background: var(--accent-soft);    color: var(--accent); }

/* ── Buttons (Dashtic tabanlı; ince tamamlama) ───────────────────── */
.btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid transparent; padding: 8px 15px; border-radius: 7px;
  font-size: 13.5px; font-weight: 500; transition: all .2s; line-height: 1.3; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent2); border-color: var(--accent2); color: #fff; }
.btn-light { background: #fff; border-color: var(--wborder); color: var(--wtext); }
.btn-light:hover { border-color: var(--accent); color: var(--accent); }
.btn-dark { background: #343a40; color: #fff; }
.btn-danger { background: rgba(247,45,102,.1); border-color: rgba(247,45,102,.2); color: var(--secondary); }
.btn-danger:hover { background: var(--secondary); border-color: var(--secondary); color: #fff; }
.btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: 6px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ── Status badge ────────────────────────────────────────────────── */
.status { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px;
  font-weight: 600; padding: 3px 10px; border-radius: 30px; white-space: nowrap; }
.status i { font-size: 7px; }
.status-green  { background: rgba(45,206,137,.14); color: #1fa971; }
.status-red    { background: rgba(247,45,102,.12); color: #f72d66; }
.status-amber  { background: rgba(236,180,3,.16);  color: #c99400; }
.status-blue   { background: rgba(69,170,242,.14); color: #2b8fd8; }
.status-slate  { background: rgba(68,84,195,.1);   color: #4454c3; }
.status-violet { background: rgba(170,76,242,.12); color: #aa4cf2; }

/* ── Progress (view içi özel yapı: track + fill) ─────────────────── */
.progress-bar { height: 6px; border-radius: 30px; background: var(--wborder); overflow: hidden; display: block; }
.progress-fill { height: 100%; border-radius: 30px; transition: width 1s ease; display: block; }
.fill-orange  { background: #fc7303; } .fill-blue { background: #45aaf2; }
.fill-emerald { background: #2dce89; } .fill-rose { background: #f72d66; }
.fill-violet  { background: #aa4cf2; } .fill-amber { background: #ecb403; }
.fill-primary { background: var(--accent); }

/* ── Avatar (içerik: baş harf) ───────────────────────────────────── */
.avatar-initial { width: 34px; height: 34px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
  color: #fff; flex-shrink: 0; background: linear-gradient(135deg, var(--accent), #6d7ce0); }

/* ── Tables (içerik özel .tbl) ───────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl thead th { text-align: left; padding: 0 14px 12px; color: var(--wmuted);
  font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .02em;
  border-bottom: 1px solid var(--wborder); white-space: nowrap; }
.tbl tbody td { padding: 13px 14px; border-bottom: 1px solid var(--wborder); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: rgba(68,84,195,.03); }
.tbl .t-strong { font-weight: 600; color: var(--wtext); }
.tbl .t-muted { color: var(--wmuted); font-weight: 400; }

/* ── Forms (içerik özel sınıflar) ────────────────────────────────── */
.field { margin-bottom: 18px; }
.field > label { display: block; font-size: 13px; font-weight: 600; color: var(--wtext); margin-bottom: 7px; }
.input, .select, textarea.input {
  width: 100%; padding: 10px 13px; background: #fff; border: 1px solid var(--wborder);
  border-radius: 7px; font-size: 14px; color: var(--wtext); transition: border-color .2s; }
.input:focus, .select:focus, textarea.input:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft); }
.field-hint { font-size: 12px; color: var(--wmuted); margin-top: 6px; }
.check-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border: 1px solid var(--wborder); border-radius: 7px; background: #fff; cursor: pointer; }
.check-row input { width: 16px; height: 16px; accent-color: var(--accent); }
.form-actions { display: flex; gap: 10px; margin-top: 22px; }

/* ── Empty state ─────────────────────────────────────────────────── */
.empty { text-align: center; padding: 54px 20px; color: var(--wmuted); }
.empty i { font-size: 40px; color: #b7bdd2; margin-bottom: 14px; }
.empty h3 { font-size: 16px; font-weight: 700; color: var(--wtext); margin: 0 0 6px; }

/* ── Code block ──────────────────────────────────────────────────── */
.code-block { background: #1c2447; color: #dbe1ff; border-radius: 8px; padding: 16px;
  overflow-x: auto; font-family: ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.6; }

/* ── Grids ───────────────────────────────────────────────────────── */
.grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }

/* ── Bayrak (flag-icons) ─────────────────────────────────────────── */
.fi { border-radius: 3px; box-shadow: 0 0 1px rgba(0,0,0,.25); }

/* ── Auth (login) ────────────────────────────────────────────────── */
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 20px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--accent) 0%, #363f9c 55%, #051846 100%); }
.auth-shell::before { content: ''; position: absolute; top: -120px; right: -80px;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.12) 0%, transparent 70%); }
.auth-card { width: 400px; max-width: 94vw; background: #fff; border-radius: 16px;
  padding: 36px 34px; box-shadow: 0 25px 60px rgba(5,10,40,.4); position: relative; z-index: 1; }
.auth-brand { width: 56px; height: 56px; border-radius: 15px; margin: 0 auto 18px;
  background: linear-gradient(135deg, var(--accent), #6d7ce0); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  box-shadow: 0 10px 24px rgba(var(--accent-rgb), .4); }

/* ── Sidebar marka yazısı ────────────────────────────────────────── */
.brand-wordmark { font-weight: 700; font-size: 15px; color: var(--wtext); white-space: nowrap; }
[data-theme-mode="dark"] .brand-wordmark { color: #edf0f5; }
.app-sidebar[data-icon-overlay] .brand-wordmark,
[data-toggled="icon-overlay-close"] .brand-wordmark,
[data-toggled="icon-text"] .brand-wordmark { display: none; }


/* ── Login dekoratif kalkan ──────────────────────────────────────── */
.login-shield { position: relative; width: 300px; height: 300px;
  display: flex; align-items: center; justify-content: center; }
.login-shield .ring { position: absolute; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16); }
.login-shield .r1 { width: 300px; height: 300px; animation: loginPulse 4s ease-out infinite; }
.login-shield .r2 { width: 230px; height: 230px; animation: loginPulse 4s ease-out infinite .8s; }
.login-shield .r3 { width: 168px; height: 168px; border-color: rgba(255,255,255,.24); }
.login-shield .shield-core { padding: 22px 26px; border-radius: 24px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
  box-shadow: 0 10px 40px rgba(0,0,0,.25); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.22); }
.login-shield .shield-core img { width: 190px; max-width: 60vw; height: auto; display: block; }
@keyframes loginPulse {
  0%   { transform: scale(.85); opacity: .8; }
  70%  { transform: scale(1.08); opacity: 0; }
  100% { transform: scale(1.08); opacity: 0; }
}
.login-pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #2dce89;
  box-shadow: 0 0 0 0 rgba(45,206,137,.7); animation: loginDot 1.8s infinite; }
@keyframes loginDot {
  0%   { box-shadow: 0 0 0 0 rgba(45,206,137,.7); }
  70%  { box-shadow: 0 0 0 8px rgba(45,206,137,0); }
  100% { box-shadow: 0 0 0 0 rgba(45,206,137,0); }
}

/* ── Login aurora arka plan (logo ile uyumlu ateş+mavi) ──────────── */
.auth-hero {
  width: 46%;
  background: radial-gradient(120% 120% at 30% 15%, #182357 0%, #0c1236 55%, #070a24 100%);
}
.auth-hero-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.auth-hero-bg .blob { position: absolute; border-radius: 50%; filter: blur(72px);
  opacity: .55; mix-blend-mode: screen; will-change: transform; }
.auth-hero-bg .b1 { width: 360px; height: 360px; background: #818cf8; top: -70px; left: -50px;
  animation: heroDrift1 15s ease-in-out infinite; }
.auth-hero-bg .b2 { width: 320px; height: 320px; background: #2f6fe0; bottom: -90px; right: -50px;
  animation: heroDrift2 18s ease-in-out infinite; }
.auth-hero-bg .b3 { width: 280px; height: 280px; background: #7a5cf0; top: 34%; left: 34%;
  animation: heroDrift3 20s ease-in-out infinite; }
.auth-hero-bg .b4 { width: 240px; height: 240px; background: #fb5b51; bottom: 16%; left: -40px;
  animation: heroDrift2 22s ease-in-out infinite reverse; }
@keyframes heroDrift1 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(70px,50px) scale(1.15);} }
@keyframes heroDrift2 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-60px,-40px) scale(1.1);} }
@keyframes heroDrift3 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(40px,-60px) scale(1.2);} }

.auth-hero-grid { position: absolute; inset: 0; z-index: 1; opacity: .35;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(circle at center, #000 25%, transparent 78%);
          mask-image: radial-gradient(circle at center, #000 25%, transparent 78%); }
.auth-hero-vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(4,6,20,.55) 100%); }
.auth-hero-title { color: #fff; letter-spacing: .2px;
  text-shadow: 0 2px 20px rgba(0,0,0,.35); }

/* Logonun arkasında çift renk parıltı */
.login-shield .shield-glow { position: absolute; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle at 38% 42%, rgba(249,115,22,.55), transparent 60%),
              radial-gradient(circle at 65% 60%, rgba(47,111,224,.55), transparent 62%);
  filter: blur(26px); z-index: 0; animation: heroDrift3 12s ease-in-out infinite; }
/* Halkaları markaya göre renklendir */
.login-shield .ring { border-color: rgba(255,255,255,.14); }
.login-shield .r1 { border-color: rgba(249,115,22,.25); }
.login-shield .r2 { border-color: rgba(47,111,224,.30); }
.login-shield .shield-core {
  position: relative; z-index: 1;
  background: linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 50px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04) inset,
              0 0 60px rgba(249,115,22,.15); }

/* Logonun arkasındaki cam dikdörtgeni kaldır — sadece logo görünsün */
.login-shield .shield-core {
  background: none !important; border: none !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  padding: 0 !important; }
.login-shield .shield-core img { width: 210px; }

/* ── Dashboard hoşgeldin banner ──────────────────────────────────── */
.dash-welcome { border: none;
  background: linear-gradient(120deg, #4454c3 0%, #363f9c 55%, #051846 100%) !important; }
.dash-welcome .avatar { border-radius: 16px; }
.bg-white-transparent { background: rgba(255,255,255,.16) !important; color: #fff; }

/* ── İçerik görünürlük güvencesi (Dashtic .page flex-center düzeltmesi) ── */
.page { justify-content: flex-start !important; }
.main-content.app-content { display: block !important; visibility: visible !important; opacity: 1 !important; }
.app-content > .container-fluid { display: block !important; visibility: visible !important; opacity: 1 !important; }

/* ================================================================
   KÖKTEN DÜZELTME — Dashtic .page flex düzenini nötrle, içerik alanını
   garantili göster. (Boş içerik sorunu için kesin çözüm.)
   ================================================================ */
.page { display: block !important; min-height: 100vh !important; justify-content: initial !important; }
.app-header { position: fixed !important; inset-block-start: 0 !important; z-index: 100 !important; }
.app-sidebar { position: fixed !important; inset-block-start: 0 !important; inset-inline-start: 0 !important; z-index: 101 !important; height: 100vh !important; }
.main-content.app-content {
  display: block !important;
  position: static !important;
  transform: none !important;
  float: none !important;
  margin-inline-start: 250px !important;
  margin-block-start: 64px !important;
  margin-block-end: 0 !important;
  padding: 24px !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  min-height: calc(100vh - 64px) !important;
  max-height: none !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.app-content > .container-fluid {
  display: block !important;
  position: static !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.app-content > .container-fluid > * { visibility: visible !important; opacity: 1 !important; }
@media (max-width: 900px) {
  .main-content.app-content { margin-inline-start: 0 !important; }
}

/* ── Koyu tema uyumu (içerik bileşenleri) ────────────────────────── */
[data-theme-mode="dark"] {
  --wtext: #e6e9f5;
  --wmuted: rgba(255,255,255,.55);
  --wborder: rgba(255,255,255,.12);
}
[data-theme-mode="dark"] .input,
[data-theme-mode="dark"] .select,
[data-theme-mode="dark"] textarea.input,
[data-theme-mode="dark"] .check-row {
  background: rgba(255,255,255,.04);
  color: var(--wtext);
}
[data-theme-mode="dark"] .btn-light { background: rgba(255,255,255,.06); color: var(--wtext); }
[data-theme-mode="dark"] .tbl tbody tr:hover { background: rgba(255,255,255,.04); }
[data-theme-mode="dark"] .code-block { background: #0b1020; }

/* ── Stat kart köşe ikonu (Dashtic card-custom-icon esintili) ────── */
.stat-card { position: relative; overflow: hidden; }
.stat-corner-icon { position: absolute; inset-inline-end: 1.1rem; inset-block-start: 1.1rem; font-size: 1.9rem; opacity: .16; }
.progress.progress-sm { height: 6px; }

/* Ülke listesi tablosu — sıkı satırlar (10 ülke sığsın) */
.country-list-table td { padding-top: .3rem !important; padding-bottom: .3rem !important; }

/* Koyu hoşgeldin kartı içindeki light badge'leri okunur yap (tek tip görünüm) */
.dash-welcome .badge.bg-success-transparent { background: rgba(45,206,137,.28) !important; color: #d6f7e6 !important; }
.dash-welcome .badge.bg-danger-transparent  { background: rgba(247,45,102,.28) !important; color: #ffd9e2 !important; }
.dash-welcome .badge.bg-warning-transparent { background: rgba(236,180,3,.30) !important; color: #ffeeb0 !important; }

/* ── Sidebar logo alanı (AuroraWAF amblem + beyaz yazı, koyu zemin) ── */
.main-sidebar-header { background: #0f1830 !important; border-block-end: 1px solid rgba(255,255,255,.07) !important; overflow: hidden; }
.main-sidebar-header .header-logo { display: flex; align-items: center; }
.main-sidebar-header .brand-mark { height: 34px; width: auto; flex-shrink: 0; }
.main-sidebar-header .brand-text { color: #fff; font-weight: 700; font-size: 13.5px; letter-spacing: .4px; white-space: nowrap; display: inline-flex; align-items: center; }
.main-sidebar-header .brand-text b { font-weight: 800; margin-inline-start: 4px; }
.main-sidebar-header .brand-ver { font-size: 9.5px; font-weight: 700; background: rgba(255,255,255,.16); color: #fff;
  padding: 1px 6px; border-radius: 20px; margin-inline-start: 6px; }
/* Daraltılmış menüde yalnızca amblem */
[data-toggled="icon-overlay-close"] .main-sidebar-header .brand-text,
[data-toggled="icon-text-close"] .main-sidebar-header .brand-text,
[data-toggled="detached-close"] .main-sidebar-header .brand-text { display: none; }

/* ============================================================
   Sidebar menü — temiz & modern (Dashtic üzerine ince ayar)
   ============================================================ */
.app-sidebar .main-menu { padding: 10px 12px !important; }
.app-sidebar .slide { margin: 1px 0 !important; padding: 0 !important; }
.app-sidebar .slide__category {
  padding: 16px 14px 6px !important; font-size: 10.5px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .07em !important; color: #9aa3c0 !important; }
.app-sidebar .slide__category .category-name { color: #9aa3c0 !important; }

.app-sidebar .side-menu__item {
  display: flex !important; align-items: center !important; gap: 12px !important;
  padding: 10px 14px !important; border-radius: 10px !important; margin: 0 !important;
  color: #53608c !important; font-weight: 500 !important; font-size: 13.5px !important;
  transition: background .18s, color .18s !important; position: relative; }
.app-sidebar .side-menu__item:hover {
  background: rgba(var(--primary-rgb), .08) !important; color: rgb(var(--primary-rgb)) !important; }

.app-sidebar .side-menu__icon {
  width: 20px !important; min-width: 20px !important; height: auto !important; margin: 0 !important;
  text-align: center; font-size: 15px !important; color: inherit !important; opacity: .75; fill: currentColor; }
.app-sidebar .side-menu__item:hover .side-menu__icon { opacity: 1; }
.app-sidebar .side-menu__label { font-size: 13.5px !important; line-height: 1.2; }

/* Aktif öğe — dolu primary pill + gölge */
.app-sidebar .side-menu__item.active,
.app-sidebar .slide.active > .side-menu__item {
  background: linear-gradient(90deg, rgb(var(--primary-rgb)), #5a68d4) !important;
  color: #fff !important; font-weight: 600 !important;
  box-shadow: 0 8px 18px rgba(var(--primary-rgb), .32) !important; }
.app-sidebar .side-menu__item.active .side-menu__icon { color: #fff !important; opacity: 1; }
.app-sidebar .side-menu__item.active .side-menu__label { color: #fff !important; }

/* Koyu tema sidebar uyumu */
[data-theme-mode="dark"] .app-sidebar .side-menu__item { color: rgba(255,255,255,.72) !important; }
[data-theme-mode="dark"] .app-sidebar .side-menu__item:hover { background: rgba(255,255,255,.06) !important; color: #fff !important; }
[data-theme-mode="dark"] .app-sidebar .slide__category,
[data-theme-mode="dark"] .app-sidebar .slide__category .category-name { color: rgba(255,255,255,.4) !important; }

/* ── Domain işlem butonları — eşit genişlik & hizalı ─────────────── */
.domain-actions .btn { justify-content: center; }
.domain-actions .btn-primary-light { min-width: 124px; }  /* Backendler */
.domain-actions .btn-info-light    { min-width: 106px; }  /* Düzenle */
.domain-actions .btn-warning-light { min-width: 120px; }  /* WAF Aç/Kapat */
.domain-actions .btn-danger-light  { min-width: 74px;  }  /* Sil */

/* ── Geo ülke seçici satırları ───────────────────────────────────── */
.geo-row { cursor: pointer; transition: background .15s; }
.geo-row:hover { background: rgba(var(--primary-rgb), .05); }
.geo-row:last-child { border-bottom: 0 !important; }
.geo-row .fi { font-size: 16px; border-radius: 3px; }


/* ── Layer 4 / DDoS atak tablosu: uzun "Tür" metni sarsın, taşma olmasın ── */
.ddos-table td:nth-child(2),
.ddos-table th:nth-child(2) { white-space: normal; min-width: 220px; max-width: 340px; }
.ddos-table td:nth-child(2) { line-height: 1.35; }


/* ── Layer 4: canlı otomatik yenileme göstergesi ───────────────── */
.live-indicator {
  background: rgba(45, 206, 137, 0.08);
  border: 1px solid rgba(45, 206, 137, 0.28);
  border-radius: 999px;
  padding: 5px 14px;
}
.live-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #2dce89; flex: 0 0 auto;
  animation: livePulse 1.8s ease-out infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(45, 206, 137, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(45, 206, 137, 0); }
  100% { box-shadow: 0 0 0 0 rgba(45, 206, 137, 0); }
}


/* ── Abuse: okunmamış satır + yeni nokta ───────────────────────── */
.abuse-unread { background: rgba(249, 115, 22, 0.06); }
.abuse-row:hover { background: rgba(68, 84, 195, 0.05); }
.abuse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #818cf8; display: inline-block; flex-shrink: 0;
}


/* =====================================================================
   SIDEBAR YENİDEN TASARIM v3 — Beyaz & rafine
   Beyaz zemin, ikonlar yuvarlak kare rozet içinde, canlı aksan rengi.
   Aksanı değiştirmek için sadece --sb-accent / --sb-accent-soft yeter.
   ===================================================================== */
.app-sidebar {
  --sb-accent: #0ea5e9;              /* aksan (cyan/sky) — istenirse değiştir */
  --sb-accent-soft: rgba(14,165,233,.12);
  background: #ffffff !important;
  border-inline-end: 1px solid #eef1f6 !important;
  box-shadow: 2px 0 16px rgba(15,23,42,.04) !important;
}
.app-sidebar .main-sidebar,
.app-sidebar .main-menu-container { background: transparent !important; }

/* Kategori başlıkları */
.app-sidebar .slide__category,
.app-sidebar .slide__category .category-name {
  color: #aab2c5 !important;
  letter-spacing: .09em !important;
  font-size: 10px !important;
}

/* Menü öğeleri — sade ikon (kutu yok), okunur metin */
.app-sidebar .main-menu { padding: 10px 12px !important; }
.app-sidebar .slide { margin: 2px 0 !important; }
.app-sidebar .side-menu__item {
  color: #4b5468 !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  gap: 12px !important;
  position: relative;
  transition: background .16s, color .16s !important;
  box-shadow: none !important;
}
.app-sidebar .side-menu__icon {
  width: 20px !important; min-width: 20px !important; height: auto !important;
  background: transparent !important; border-radius: 0 !important;
  color: #9aa2b5 !important; font-size: 16px !important; opacity: 1 !important;
  margin: 0 !important; text-align: center;
  transition: color .16s !important;
}
.app-sidebar .side-menu__label { color: inherit !important; }

.app-sidebar .side-menu__item:hover { background: #f4f6fb !important; color: #1f2637 !important; }
.app-sidebar .side-menu__item:hover .side-menu__icon { color: var(--sb-accent) !important; }

/* Aktif öğe — yumuşak aksan zemin, KOYU okunur metin, aksan ikon + sol çubuk */
.app-sidebar .side-menu__item.active,
.app-sidebar .slide.active > .side-menu__item {
  background: var(--sb-accent-soft) !important;
  color: #14324a !important;                 /* koyu, okunur */
  font-weight: 600 !important;
  box-shadow: none !important;
}
.app-sidebar .side-menu__item.active .side-menu__label { color: #14324a !important; }
.app-sidebar .side-menu__item.active .side-menu__icon { color: var(--sb-accent) !important; }
.app-sidebar .side-menu__item.active::before {
  content: '';
  position: absolute;
  inset-inline-start: -12px;
  inset-block: 8px;
  width: 3px; border-radius: 0 4px 4px 0;
  background: var(--sb-accent);
}

/* Logo alanı koyu kalır (logo beyaz yazılı) */
.main-sidebar-header { background: #0f1830 !important; border-block-end: 1px solid #eef1f6 !important; }
.main-sidebar-header .brand-ver { background: var(--sb-accent) !important; color: #fff !important; }

/* İnce scrollbar */
#sidebar-scroll::-webkit-scrollbar { width: 6px; }
#sidebar-scroll::-webkit-scrollbar-thumb { background: #d8dde8 !important; border-radius: 6px; }

/* Koyu tema modunda sidebar */
[data-theme-mode="dark"] .app-sidebar { background: #111827 !important; border-inline-end-color: rgba(255,255,255,.06) !important; }
[data-theme-mode="dark"] .app-sidebar .side-menu__item { color: rgba(255,255,255,.72) !important; }
[data-theme-mode="dark"] .app-sidebar .side-menu__icon { background: transparent !important; color: rgba(255,255,255,.6) !important; }
[data-theme-mode="dark"] .app-sidebar .side-menu__item.active { color: #fff !important; }
[data-theme-mode="dark"] .app-sidebar .side-menu__item.active .side-menu__label { color: #fff !important; }
[data-theme-mode="dark"] .app-sidebar .side-menu__item:hover { background: rgba(255,255,255,.05) !important; color: #fff !important; }