@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════════
   AuroraWAF — BİLEŞENLER
   ───────────────────────────────────────────────────────────────────────────
   aurora.css'ten SONRA yüklenir. Token'lar oradan gelir.

   Devralınan sınıf adları (custom-card, btn-primary-light, bg-*-transparent,
   avatar, stat-card …) KORUNUR — 45 view onlara bağlı — ama görünümleri
   tamamen burada tanımlanır. Hazır temanın stil dosyası artık yüklenmiyor.

   BÖLÜMLER
     1  Kartlar
     2  Butonlar
     3  Rozetler & etiketler
     4  Tablolar
     5  Formlar
     6  Avatarlar
     7  Uyarılar
     8  Açılır menü / modal / ipucu
     9  Progress
    10  Kod blokları
    11  Panel bileşenleri (KPI, durum listesi, dağılım, ülke listesi, harita…)
    12  Sayfaya özel (domain, geo, ddos, abuse, live, docs, rapor)
    13  Kimlik doğrulama ekranları
    14  Yazdırma
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ 1) KARTLAR ════════════════════════════════════════════════════════ */
.card,
.custom-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-bottom: var(--gutter);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r4);
  /* shield: katmanlı gölge + üst iç parlaklık. Kartın "işlenmiş"
     görünmesini sağlayan şey bu ikili. */
  box-shadow: var(--sh2), var(--hair-top);
  transition: border-color var(--d2) var(--e-io), box-shadow var(--d2) var(--e-io);
}
.card:hover { border-color: var(--line-2); box-shadow: var(--sh3), var(--hair-top); }

.card-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 14px var(--s5);
  background: transparent;
  border-bottom: 1px solid var(--line-soft);
}
.card-header.justify-content-between { justify-content: space-between; }
.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: var(--t-14);
  font-weight: 560;
  letter-spacing: var(--tr-tighter);
  color: var(--fg);
}
.card-title i { font-size: 13px; color: var(--accent); }
.card-body { flex: 1 1 auto; padding: var(--s5); }
.card-body.p-0 { padding: 0 !important; }
.card-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 15px 22px;
  background: transparent;
  border-top: 1px solid var(--line-soft);
}

/* Eşit yükseklikli kart satırı */
.row-equal > [class*="col-"] { display: flex; }
.row-equal > [class*="col-"] > .card { width: 100%; }

/* Devralınan kurdele bileşeni — panelde kullanılmıyor, kalıntısı gizlenir */
.ribbone, .ribbone-top-right, .power-ribbone, .power-ribbone-top-left { display: none !important; }

/* ═══ 2) BUTONLAR ═══════════════════════════════════════════════════════ */
.btn {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--text);
  --btn-bd: var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 16px;
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 550;
  line-height: 1.35;
  letter-spacing: -0.008em;
  white-space: nowrap;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-sm);
  cursor: pointer;
  user-select: none;
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), transform var(--t-fast);
}
.btn:hover { background: var(--surface-3); border-color: var(--line-strong); color: var(--text); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.disabled { opacity: .5; pointer-events: none; }
.btn i { font-size: 12px; }
.btn-sm { padding: 5px 10px; font-size: var(--fs-sm); border-radius: var(--r-xs); }
.btn-sm i { font-size: 11px; }
.btn-lg { padding: 11px 20px; font-size: 14.5px; }
.btn-icon { width: 34px; padding: 0; }

/* Birincil — TEK dolu aksan buton. Sayfada en fazla bir tane olmalı. */
.btn-primary {
  --btn-bg: var(--accent);
  --btn-fg: var(--on-accent);
  --btn-bd: var(--accent);
  font-weight: 650;
}
.btn-primary:hover { --btn-bg: var(--accent-2); --btn-bd: var(--accent-2); color: var(--on-accent); }

/* "…-light" varyantları: yumuşak zemin + renkli metin (ikincil eylemler) */
.btn-primary-light   { --btn-bg: var(--accent-a08);  --btn-fg: var(--accent-2); --btn-bd: var(--accent-a22); }
.btn-primary-light:hover   { --btn-bg: var(--accent-a14);  color: var(--accent-2); --btn-bd: var(--accent-a40); }
.btn-success-light   { --btn-bg: var(--ok-a12);      --btn-fg: var(--ok);       --btn-bd: var(--ok-a28); }
.btn-success-light:hover   { --btn-bg: rgba(63,207,142,.20);  color: var(--ok); }
.btn-danger-light    { --btn-bg: var(--danger-a12);  --btn-fg: var(--danger);   --btn-bd: var(--danger-a28); }
.btn-danger-light:hover    { --btn-bg: rgba(242,85,90,.20);   color: var(--danger); }
.btn-warning-light   { --btn-bg: var(--warn-a12);    --btn-fg: var(--warn);     --btn-bd: var(--warn-a28); }
.btn-warning-light:hover   { --btn-bg: rgba(240,178,63,.20);  color: var(--warn); }
.btn-info-light      { --btn-bg: var(--info-a12);    --btn-fg: var(--info);     --btn-bd: var(--info-a28); }
.btn-info-light:hover      { --btn-bg: rgba(91,156,248,.20);  color: var(--info); }
.btn-secondary-light { --btn-bg: var(--violet-a12);  --btn-fg: var(--violet);   --btn-bd: rgba(167,139,250,.28); }

/* Dolu durum butonları */
.btn-success { --btn-bg: var(--ok);     --btn-fg: #fff; --btn-bd: var(--ok); font-weight: 650; }
.btn-danger  { --btn-bg: var(--danger); --btn-fg: #fff;    --btn-bd: var(--danger); font-weight: 650; }
.btn-warning { --btn-bg: var(--warn);   --btn-fg: #fff; --btn-bd: var(--warn); font-weight: 650; }
.btn-light   { --btn-bg: var(--surface-2); --btn-fg: var(--text-2); --btn-bd: var(--line); }
.btn-dark    { --btn-bg: #1f2430; --btn-fg: #fff; --btn-bd: #1f2430; }
.btn-outline-primary { --btn-bg: transparent; --btn-fg: var(--accent); --btn-bd: var(--accent-a40); }

/* Segment düğme grubu (zaman aralığı seçicileri) */
.btn-group { display: inline-flex; }
.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child { border-start-start-radius: var(--r-sm); border-end-start-radius: var(--r-sm); }
.btn-group > .btn:last-child  { border-start-end-radius: var(--r-sm);   border-end-end-radius: var(--r-sm); }
.btn-group > .btn + .btn { margin-inline-start: -1px; }
.btn-group > .btn.active { --btn-bg: var(--accent-a14); --btn-fg: var(--accent-2); --btn-bd: var(--accent-a40); z-index: 1; }

.btn-close {
  width: 26px; height: 26px;
  padding: 0;
  display: grid; place-items: center;
  color: var(--text-3);
  background: transparent;
  border: 0;
  border-radius: var(--r-xs);
  cursor: pointer;
  opacity: 1;
  transition: background var(--t-fast), color var(--t-fast);
}
.btn-close::before { content: '\00d7'; font-size: 19px; line-height: 1; }
.btn-close:hover { background: var(--surface-3); color: var(--text); }

/* ═══ 3) ROZETLER & ETİKETLER ═══════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.004em;
  white-space: nowrap;
  border-radius: var(--r-xs);
  border: 1px solid transparent;
}
.badge i { font-size: 9.5px; }

.bg-primary-transparent   { color: var(--accent-2); background: var(--accent-a08);  border-color: var(--accent-a22); }
.bg-secondary-transparent { color: var(--violet);   background: var(--violet-a12);  border-color: rgba(167,139,250,.26); }
.bg-success-transparent   { color: var(--ok);       background: var(--ok-a12);      border-color: var(--ok-a28); }
.bg-danger-transparent    { color: var(--danger);   background: var(--danger-a12);  border-color: var(--danger-a28); }
.bg-warning-transparent   { color: var(--warn);     background: var(--warn-a12);    border-color: var(--warn-a28); }
.bg-info-transparent      { color: var(--info);     background: var(--info-a12);    border-color: var(--info-a28); }
.bg-light, .badge.bg-light {
  color: var(--text-3);
  background: var(--surface-2);
  border-color: var(--line);
}
.badge.bg-light.text-muted { color: var(--text-3) !important; }
.bg-primary   { color: var(--on-accent); background: var(--accent); }
.bg-success   { color: #fff; background: var(--ok); }
.bg-danger    { color: #fff;    background: var(--danger); }
.bg-warning   { color: #fff; background: var(--warn); }
.bg-secondary { color: var(--text-2); background: var(--surface-3); }
.bg-white-transparent { color: var(--text); background: var(--surface-2); }

/* Durum noktası */
.au-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.au-dot--ok   { background: var(--ok);     box-shadow: 0 0 0 3px var(--ok-a12); }
.au-dot--warn { background: var(--warn);   box-shadow: 0 0 0 3px var(--warn-a12); }
.au-dot--down { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-a12); }
@keyframes au-pulse-soft { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.au-live { animation: au-pulse-soft 1.9s ease-in-out infinite; }

/* Bayrak ikonları (flag-icons) — köşe yumuşatma */
.fi { border-radius: 2px; }

/* ═══ 4) TABLOLAR ═══════════════════════════════════════════════════════ */
/**
 * TABLOLAR — Bootstrap ile birlikte yaşamanın doğru yolu.
 *
 * Bootstrap `.table` içinde `--bs-table-color` gibi değişkenler tanımlar ve
 * bunları `.table > :not(caption) > * > *` seçicisiyle uygular. O seçici
 * benim `.table { color: … }` kuralımdan DAHA ÖZGÜL olduğu için hücre rengi
 * benim token'ımı değil Bootstrap'ın varsayılanını (saf siyah) alıyordu.
 * Tarayıcıda ölçtüm: hücre rengi rgb(0,0,0) çıkıyordu.
 *
 * Çözüm renk kavgası değil: Bootstrap'ın KENDİ değişkenlerini token'larımıza
 * bağlıyoruz. Böylece striped/hover gibi tüm Bootstrap tablo varyantları da
 * kendiliğinden doğru renge geliyor.
 */
.table {
  --bs-table-color: var(--text-2);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--line-soft);
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: var(--text-2);
  --bs-table-striped-bg: var(--surface-2);
  --bs-table-hover-color: var(--text);
  --bs-table-hover-bg: var(--surface-2);
  --bs-table-active-color: var(--text);
  --bs-table-active-bg: var(--surface-3);

  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.table > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 11px 16px;
  font-size: var(--t-10);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  /* --text-4 kullanılıyordu; açık zeminde 2.5:1'e düşüyor ve başlıklar
     okunmuyordu. --text-3 hem kart hem vurgulu alan üzerinde AA geçer. */
  color: var(--text-3);
  text-align: start;
  white-space: nowrap;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.table > thead > tr > th:first-child { border-start-start-radius: 0; }
.table > tbody > tr > td {
  padding: 13px 16px;
  vertical-align: middle;
  /* Rengi AÇIKÇA yazıyoruz: Bootstrap'ın hücre seçicisi daha özgül olduğu
     için `.table { color: … }` tek başına yetmiyor. */
  color: var(--text-2);
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
}
/* Vurgulu hücreler token'lardan renk alsın */
.table > tbody > tr > td.fw-semibold,
.table > tbody > tr > td .fw-semibold { color: var(--text); }
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table > tbody > tr { transition: background var(--t-fast); }
.table > tbody > tr:hover > td { background: var(--surface-2); }
.table .text-end { text-align: end; }
.table-responsive { width: 100%; overflow-x: auto; }
/* Uzun metin kolonu kırpma */
.au-trunc { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ═══ 5) FORMLAR ════════════════════════════════════════════════════════ */
.form-label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
}
.form-text, .form-hint {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-xs);
  color: var(--text-4);
}
.form-control,
.form-select,
textarea.form-control {
  display: block;
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  font-family: var(--font);
  font-size: var(--fs-body);
  color: var(--text);
  background-color: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.form-control::placeholder { color: var(--text-4); opacity: 1; }
.form-control:focus, .form-select:focus {
  background-color: var(--surface);
  border-color: var(--accent-dim);
  box-shadow: var(--ring);
}
.form-control:disabled, .form-control[readonly] {
  color: var(--text-3);
  background: var(--surface);
  cursor: not-allowed;
}
textarea.form-control { min-height: 92px; resize: vertical; line-height: 1.6; }

/* Açılır liste oku.
   `background-repeat: no-repeat` AÇIKÇA yazılmalı; kısayol `background:`
   kullanan kurallar repeat'i varsayılana döndürüp oku yatayda döşüyordu. */
.form-select {
  padding-inline-end: 32px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237b8089' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 11px 9px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.form-select option { color: var(--text); background: var(--surface-2); }

.form-control-sm, .form-select-sm {
  min-height: 30px;
  height: 30px;
  padding: 0 10px;
  font-size: var(--fs-sm);
  border-radius: var(--r-xs);
}
.form-select-sm { padding-inline-end: 26px; background-position: right 8px center; background-size: 10px 8px; }

/* Girdi grubu */
.input-group { display: flex; width: 100%; }
.input-group > .form-control, .input-group > .form-select { flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group-text {
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: var(--fs-sm);
  color: var(--text-3);
  background: var(--surface-3);
  border: 1px solid var(--line);
}
.input-group > :first-child { border-start-end-radius: 0; border-end-end-radius: 0; }
.input-group > :last-child  { border-start-start-radius: 0; border-end-start-radius: 0; }
.input-group > :not(:first-child) { margin-inline-start: -1px; }
.input-group > :first-child:not(:last-child) { border-start-start-radius: var(--r-sm); border-end-start-radius: var(--r-sm); }
.input-group > :last-child:not(:first-child) { border-start-end-radius: var(--r-sm); border-end-end-radius: var(--r-sm); }

/* Onay kutusu / radyo / anahtar */
.form-check { display: flex; align-items: center; gap: 8px; min-height: auto; padding: 0; margin: 0; }
.form-check-input {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.form-check-input[type="radio"] { border-radius: 50%; }
.form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2304191c' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m3 8 3.5 3.5L13 5'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px;
}
.form-check-input:focus-visible { box-shadow: var(--ring); }
.form-check-label { font-size: var(--fs-body); color: var(--text-2); cursor: pointer; }
.form-switch { display: flex; align-items: center; gap: 9px; }
.form-switch .form-check-input {
  width: 34px; height: 19px;
  border-radius: var(--r-pill);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%237b8089'/%3e%3c/svg%3e");
  background-position: left 2px center;
  background-repeat: no-repeat;
  transition: background-color var(--t-fast), background-position var(--t);
}
.form-switch .form-check-input:checked {
  background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2304191c'/%3e%3c/svg%3e");
  background-position: right 2px center;
  background-size: auto;
}

/* Panelin kendi toggle bileşeni (js-toggle) */
.toggle {
  position: relative;
  flex: 0 0 auto;
  width: 38px; height: 21px;
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.toggle > span {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  width: 15px; height: 15px;
  background: var(--text-4);
  border-radius: 50%;
  transition: transform var(--t), background var(--t-fast);
}
.toggle.on { background: var(--accent-a22); border-color: var(--accent-a40); }
.toggle.on > span { transform: translateX(17px); background: var(--accent); }
.toggle-success.on { background: var(--ok-a12); border-color: var(--ok-a28); }
.toggle-success.on > span { background: var(--ok); }
.toggle-warning.on { background: var(--warn-a12); border-color: var(--warn-a28); }
.toggle-warning.on > span { background: var(--warn); }

/* 2FA kod kutusu */
.otp-box {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .5em;
  text-align: center;
  text-indent: .5em;
}

/* ═══ 6) AVATARLAR ══════════════════════════════════════════════════════ */
.avatar {
  position: relative;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-xs { width: 26px; height: 26px; font-size: 11px; border-radius: var(--r-xs); }
.avatar-sm { width: 30px; height: 30px; font-size: 12px; border-radius: var(--r-xs); }
.avatar-md { width: 42px; height: 42px; font-size: 15px; }
.avatar-lg { width: 52px; height: 52px; font-size: 18px; border-radius: var(--r); }
.avatar-xl { width: 68px; height: 68px; font-size: 24px; border-radius: var(--r); }
.avatar-rounded { border-radius: 50%; }

/* ═══ 7) UYARILAR ═══════════════════════════════════════════════════════ */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 15px;
  margin-bottom: 16px;
  font-size: var(--fs-body);
  border: 1px solid transparent;
  border-radius: var(--r);
}
.alert > i { margin-top: 2px; font-size: 13px; }
.alert-success { color: #0b5c41; background: var(--ok-a12);     border-color: var(--ok-a28); }
.alert-danger  { color: #96202d; background: var(--danger-a12); border-color: var(--danger-a28); }
.alert-warning { color: #71490a; background: var(--warn-a12);   border-color: var(--warn-a28); }
.alert-info    { color: #144b96; background: var(--info-a12);   border-color: var(--info-a28); }
.alert-link { color: inherit; font-weight: 650; text-decoration: underline; }
.alert .btn-close { margin-inline-start: auto; color: inherit; opacity: .7; }
.alert .btn-close:hover { opacity: 1; background: rgba(18,20,26,.07); }

/* ═══ 8) AÇILIR MENÜ / MODAL ════════════════════════════════════════════ */
.dropdown-menu {
  min-width: 220px;
  padding: 6px;
  font-size: var(--fs-body);
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 11px;
  font-size: var(--fs-body);
  color: var(--text-2);
  background: transparent;
  border: 0;
  border-radius: var(--r-xs);
  text-align: start;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface-3); color: var(--text); }
.dropdown-item.text-danger:hover { background: var(--danger-a12); color: var(--danger); }
.dropdown-divider { height: 1px; margin: 5px 2px; background: var(--line); border: 0; }
.dropdown-header { padding: 9px 11px; }
.main-header-dropdown { min-width: 250px; }
/* Genişlik AÇILIR MENÜYE verilir, zil düğmesinin sarmalayıcısına değil.
   Eskiden `.notifications-dropdown` seçicisi topbar'daki sarmalayıcı
   `div.header-element.notifications-dropdown`a da uyuyordu: 34 px'lik zil
   330 px yer kaplıyor, mobilde (390 px) üst bar taşıyor, hamburger menü ve
   profil düğmesi ekran dışına itilip tıklanamıyordu. */
.notifications-dropdown-menu { width: 330px; max-width: calc(100vw - 24px); }

/* Denetim günlüğü "Detay" hücresi: `text-nowrap` tabloda sıkışıp kelime kelime
   kırılıyor, tek kayıt satırı 6-8 satır yüksekliğe çıkıyordu. Sabit aralıkta
   genişlik + en fazla 2 satır; tam metin title ile görünür. */
.au-cell-detail { min-width: 260px; max-width: 440px; white-space: normal; }
.au-cell-detail > span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.modal-content {
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.modal-header, .modal-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
}
.modal-header { border-bottom: 1px solid var(--line-soft); }
.modal-footer { border-top: 1px solid var(--line-soft); justify-content: flex-end; }
.modal-title { font-size: 15px; font-weight: 650; }
.modal-body { padding: 18px; }
/* --scrim saydamligi ZATEN icinde tasiyor (aydinlikta rgba(16,20,34,.44)).
   Bootstrap'in .show kuralindaki .42 ile carpilmasin: 1 birakiliyor, yoksa
   ortu yok denecek kadar soluk kaliyordu. */
.modal-backdrop { background: var(--scrim); }
.modal-backdrop.show { opacity: 1; }

/* SweetAlert2 uyumu */
.swal2-popup {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  color: var(--text) !important;
  font-family: var(--font) !important;
}
.swal2-title { color: var(--text) !important; font-size: 17px !important; font-weight: 650 !important; }
.swal2-html-container { color: var(--text-2) !important; font-size: var(--fs-body) !important; }

/* ═══ 9) PROGRESS ═══════════════════════════════════════════════════════ */
.progress {
  height: 6px;
  overflow: hidden;
  background: var(--surface-3);
  border-radius: var(--r-pill);
}
.progress-sm { height: 4px; }
.progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: var(--r-pill);
  transition: width var(--t);
}
.progress-bar.bg-success { background: var(--ok); }
.progress-bar.bg-warning { background: var(--warn); }
.progress-bar.bg-danger  { background: var(--danger); }
.progress-bar.bg-info    { background: var(--info); }

/* ═══ 10) KOD BLOKLARI ══════════════════════════════════════════════════ */
.code-block, pre.code-block {
  padding: 14px 16px;
  overflow: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: #24292f;
  background: #f7f8fa;
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.code-label {
  margin: 14px 0 5px;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-4);
}

/* ═══ 11) PANEL BİLEŞENLERİ ═════════════════════════════════════════════ */

/* ── KPI kutusu ──────────────────────────────────────────────────────
   Dört kart HER ZAMAN aynı yükseklikte olmalı. Alt açıklama iki satıra
   sabitlenir; aksi halde metin uzunluğuna göre kartlar kayıyordu.     */
.kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 132px;
  padding: var(--s5);
  overflow: hidden;
}
/* shield: karonun sağ üstünde yumuşak ton sızması. Durum rengini
   sayıya bulaştırmadan kartın kimliğini veriyor. */
.kpi::after {
  content: "";
  position: absolute;
  inset-block-start: -50%;
  inset-inline-end: -28%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--tone-rgb, var(--accent-rgb)), .16), transparent 68%);
  pointer-events: none;
}
.kpi--ok      { --tone-rgb: var(--ok-rgb); }
.kpi--warn    { --tone-rgb: var(--warn-rgb); }
.kpi--risk    { --tone-rgb: var(--danger-rgb); }
.kpi--info    { --tone-rgb: var(--accent-rgb); }
.kpi--neutral { --tone-rgb: var(--neutral-rgb); }
.kpi > * { position: relative; z-index: 1; }
.kpi__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--t-11);
  font-weight: 550;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  /* --fg-3, --fg-4 DEĞİL. --fg-4 (#9aa2b4) beyaz üzerinde ~2.9:1 kontrast
     veriyor; metin için 4.5:1 gerekiyor. --fg-3 (#6b7488) ~4.9:1.
     --fg-4 yalnızca ikon/dekor için ayrıldı. Ayrıca .stat-card etiketleri
     .text-muted üzerinden zaten --fg-3 alıyordu; ikisi böylece eşitlendi. */
  color: var(--fg-3);
}
.kpi__chip {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  font-size: 13px;
  border-radius: var(--r2);
  /* shield: ton renginin hem zemini hem kenarı hem ikonu boyar */
  background: rgba(var(--tone-rgb, var(--accent-rgb)), .13);
  color: rgb(var(--tone-rgb, var(--accent-rgb)));
  border: 1px solid rgba(var(--tone-rgb, var(--accent-rgb)), .2);
}
.kpi__value {
  font-size: var(--t-28);
  font-weight: 580;
  line-height: 1.05;
  letter-spacing: var(--tr-display);
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.kpi__note {
  margin-top: auto;
  min-height: 34px;
  font-size: var(--fs-sm);
  line-height: 1.42;
  color: var(--text-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Durum yalnızca ikon çipinde renklenir — sayılar hep aynı renk kalır ki
   göz kartları birbirleriyle karşılaştırabilsin. */
.kpi--ok      .kpi__chip { color: var(--ok);      background: var(--ok-a12);     border-color: var(--ok-a28); }
/* a14 (=%12) — a08 (=%7) DEĞİL: diğer üç ton %12 kullanıyordu, aksan çipi
   tek başına daha soluk kalıyordu. */
.kpi--info    .kpi__chip { color: var(--accent);  background: var(--accent-a14); border-color: var(--accent-a22); }
.kpi--warn    .kpi__chip { color: var(--warn);    background: var(--warn-a12);   border-color: var(--warn-a28); }
.kpi--risk    .kpi__chip { color: var(--danger);  background: var(--danger-a12); border-color: var(--danger-a28); }
.kpi--neutral .kpi__chip {
  color: var(--neutral);
  background: rgba(var(--neutral-rgb), .12);
  border-color: rgba(var(--neutral-rgb), .24);
}

/* ── .stat-card → .kpi ile AYNI dile getirildi ────────────────────────
   SORUN: özet kartları üç ayrı yapıda yazılmıştı. Panel'de .kpi (renkli
   34px ikon çipi + ton ışığı + büyük sayı), Analitik/DDoS/SSL/Abuse/
   Güvenlik'te .stat-card (soluk %10 opaklıkta köşe ikonu), Trafik/
   Proxmox/aurologic'te Bootstrap .avatar. Aynı panelde üç farklı özet
   kartı görünüyordu — kullanıcının "renk uyumu berbat" dediği şey
   büyük ölçüde buydu.

   ÇÖZÜM: .stat-card'ın 5 sayfadaki MARKUP'INA dokunmadan görünümü
   .kpi ile eşitlendi. Trafik/Proxmox/aurologic ise doğrudan .kpi
   yapısına taşındı (yapıları zaten ona yakındı).

   Ton rengi ikonun text-* sınıfından :has() ile okunuyor; böylece her
   varyant için ayrı kural yazmak gerekmiyor. :has() desteklenmeyen çok
   eski tarayıcıda varsayılan aksan tonu geçerli olur — bozulma olmaz. */
.stat-card {
  position: relative;
  overflow: hidden;
  --tone-rgb: var(--accent-rgb);
}
.stat-card .card-body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 132px;
  padding: var(--s5);
  padding-inline-end: 68px;   /* çipe yer aç */
}
.stat-card:has(.stat-corner-icon.text-primary) { --tone-rgb: var(--accent-rgb); }
.stat-card:has(.stat-corner-icon.text-info)    { --tone-rgb: var(--info-rgb); }
.stat-card:has(.stat-corner-icon.text-success) { --tone-rgb: var(--ok-rgb); }
.stat-card:has(.stat-corner-icon.text-warning) { --tone-rgb: var(--warn-rgb); }
.stat-card:has(.stat-corner-icon.text-danger)  { --tone-rgb: var(--danger-rgb); }

/* Ton sızması — .kpi::after ile BİREBİR aynı geometri.
   Kart öğesine değil .card-body'ye bağlı: .kpi de card-body'nin kendisi,
   yani ton ışığı ancak burada aynı ölçüde çıkıyor. Karta bağlandığında
   kartın daha büyük kutusundan dolayı çok daha iri ve köşeli görünüyordu. */
.stat-card .card-body { overflow: hidden; }
.stat-card .card-body::after {
  content: "";
  position: absolute;
  inset-block-start: -50%;
  inset-inline-end: -28%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--tone-rgb), .16), transparent 68%);
  pointer-events: none;
}
/* DİKKAT: .stat-corner-icon HARİÇ. Bu kural önce ':not' olmadan yazılmıştı
   ve `position: relative` ile çipin `position: absolute`ünü eziyordu
   (özgüllük 0,2,1 > 0,1,0). Sonuç: çip sol üste düşüp etiketin üstüne
   biniyordu — ekran görüntüsünde görüldü. */
.stat-card .card-body > *:not(.stat-corner-icon) { position: relative; z-index: 1; }

/* Köşe ikonu artık soluk dekor değil, .kpi__chip ile aynı 34px çip.
   Rengi text-* sınıfından geliyor; zemin ve kenar currentColor'dan
   türetiliyor, yani her renk varyantı kendiliğinden doğru. */
.stat-corner-icon {
  position: absolute;
  inset-inline-end: var(--s5);
  inset-block-start: var(--s5);
  z-index: 1;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  font-size: 13px;
  opacity: 1;
  border-radius: var(--r2);
  /* %12 / %22 — .kpi__chip ton kurallarıyla aynı oranlar */
  background: color-mix(in srgb, currentColor 12%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  pointer-events: none;
}

/* Etiket → .kpi__label ile aynı "eyebrow" */
.stat-card .card-body > p,
.stat-card .card-body > .text-muted {
  margin: 0;
  font-size: var(--t-11);
  font-weight: 550;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--fg-4);
}

/* Değer → .kpi__value ile aynı. 580 ağırlık ve tabular-nums, 700 DEĞİL:
   shield imzası ara ağırlık; 700 kaba duruyor. */
/* !important gerekli: bu başlıklarda .fw-semibold ve .fs-* yardımcıları var,
   ikisi de Bootstrap/devralınan tarafta !important ile geliyor. Ölçümde
   ağırlık 580 yerine 600 çıkıyordu (Panel 580, Analitik 600). */
.stat-card h3, .stat-card h4 {
  margin: 0;
  font-size: var(--t-28) !important;
  font-weight: 580 !important;
  line-height: 1.1;
  letter-spacing: var(--tr-display);
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}

/* ── Durum listesi ──────────────────────────────────────────────────── */
.statlist { display: flex; flex-direction: column; }
.statlist__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
  font-size: var(--fs-body);
  border-bottom: 1px solid var(--line-soft);
}
.statlist__row:first-child { padding-top: 0; }
.statlist__row:last-child { padding-bottom: 0; border-bottom: 0; }
.statlist__key { display: flex; align-items: center; gap: 9px; color: var(--text-2); }
.statlist__key i { width: 15px; text-align: center; font-size: 12px; color: var(--text-4); }
.statlist__val { font-weight: 650; color: var(--text); }

/* ── Koruma durumu şeridi ───────────────────────────────────────────── */
.protect {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.protect__icon {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  font-size: 14px;
  border-radius: var(--r-sm);
}
.protect--on  .protect__icon { color: var(--ok);     background: var(--ok-a12); }
.protect--off .protect__icon { color: var(--danger); background: var(--danger-a12); }
.protect__title { font-size: var(--fs-body); font-weight: 650; color: var(--text); line-height: 1.3; }
.protect__sub   { font-size: var(--fs-sm); color: var(--text-3); line-height: 1.35; }

/* ── Dağılım dökümü ─────────────────────────────────────────────────
   Halka grafiğin yerini aldı: gerçek veride bir kalem diğerlerini
   ezdiğinde (275'e 9) halka tek renk bir daireye dönüşüp bilgi
   vermiyordu. Çubuk dökümü her oranda okunur.                        */
.card-body:has(> .breakdown) { display: flex; flex-direction: column; }
.breakdown {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  /**
   * justify-content: space-evenly DEĞİL.
   *
   * Kart yanındaki kartla eşit yükseklikte olduğu için (h-100), satır sayısı
   * azken space-evenly boşluğu satır aralarına dağıtıyordu: 3 satırlık bir
   * kartta satırlar arasında ~100px uçurum oluşuyor ve liste dağılmış
   * görünüyordu (Alarmlar sayfasında 3 senaryo, Panel'de 4 satır).
   * Şimdi satırlar üstten sabit aralıkla diziliyor; artan yer altta tek
   * parça boşluk olarak kalıyor — bu, satırları germekten çok daha derli.
   */
  justify-content: flex-start;
  gap: 18px;
}
.breakdown__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}
.breakdown__name { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-body); color: var(--text-2); }
.breakdown__name i { width: 14px; text-align: center; font-size: 11.5px; color: var(--text-4); }
.breakdown__num { font-size: var(--fs-sm); color: var(--text-3); white-space: nowrap; }
.breakdown__num b { color: var(--text); font-weight: 700; }
.breakdown__pct { margin-inline-start: 7px; font-size: var(--fs-xs); }
.breakdown__track {
  height: 6px;
  overflow: hidden;
  background: var(--surface-3);
  border-radius: var(--r-pill);
}
.breakdown__track > span { display: block; height: 100%; border-radius: var(--r-pill); }
/* Çubuğun altındaki ikincil satır (ör. IP'nin AS adı). Tek satıra sabit:
   bazı AS adları çok uzun ve satırı sarınca çubuk aralıkları kayıyor. */
.breakdown__sub {
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-xs);
  color: var(--text-4);
}
/* Bayrak simgesi, .breakdown__name içindeki ikonla aynı yeri kaplasın */
.breakdown__name .fi { width: 14px; flex: none; border-radius: 2px; }
.breakdown__track .b-warn { background: var(--warn); }
.breakdown__track .b-risk { background: var(--danger); }
.breakdown__track .b-ok   { background: var(--ok); }
.breakdown__track .b-info { background: var(--accent); }

/* ── Ülke listesi ───────────────────────────────────────────────────── */
/**
 * ÖZGÜLLÜK NOTU: seçici `.table > tbody > tr > td` kadar özgül olmalı.
 * Önce yalnızca `.countrylist td` yazılmıştı; genel tablo kuralı (13px dolgu)
 * onu eziyor, satırlar 52px'e çıkıyor ve 8 satırlık liste yandaki haritadan
 * ~150px uzun kalıyordu — kartın altında ölü alan oluşuyordu.
 */
.table.countrylist > tbody > tr > td {
  padding: 7px 12px;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--line-soft);
}
.table.countrylist > tbody > tr:last-child > td { border-bottom: 0; }
.table.countrylist > tbody > tr:hover > td { background: transparent; }
.cl-code { font-weight: 650; color: var(--text-2); }
.cl-num  { font-weight: 700; color: var(--text); }
.cl-unit { font-size: var(--fs-xs); color: var(--text-3); }
.cl-bar { height: 3px; margin-top: 5px; overflow: hidden; background: var(--surface-3); border-radius: 2px; }
.cl-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.country-list-table td { padding-block: 5px !important; }

/* ── Harita ─────────────────────────────────────────────────────────
   DİKKAT: burada `.jvm-region { fill: … }` TANIMLANMAZ. Bir kez
   denendi ve ülke yoğunluğunu gösteren tüm veri renklerini ezip
   haritayı tek düze gri bir lekeye çevirdi. Taban rengi haritanın
   kendi `regionStyle.initial` ayarından gelir.                      */
.au-map {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
}
.jvm-container { background: transparent !important; }
.jvm-region { transition: fill-opacity var(--t-fast); }
.jvm-tooltip {
  padding: 6px 10px;
  font-family: var(--font);
  font-size: var(--fs-sm);
  color: #ffffff;
  background: #1f2430;
  border: 1px solid #1f2430;
  border-radius: var(--r-xs);
  box-shadow: var(--shadow);
}
.jvm-zoom-btn {
  width: 22px; height: 22px;
  line-height: 20px;
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  box-shadow: none;
  inset-inline-start: 10px !important;
}
.jvm-zoom-btn:hover { color: var(--text); background: var(--surface-3); }

/* ── Boş durum ──────────────────────────────────────────────────────── */
.au-empty { padding: 34px 20px; text-align: center; color: var(--text-3); }
.au-empty__icon {
  width: 50px; height: 50px;
  margin: 0 auto 13px;
  display: grid; place-items: center;
  font-size: 19px;
  color: var(--text-4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.au-empty__title { margin-bottom: 4px; font-size: 14px; font-weight: 650; color: var(--text-2); }
.au-empty__text { margin-bottom: 16px; font-size: var(--fs-sm); color: var(--text-3); }
.au-empty__text:last-child { margin-bottom: 0; }

/* Yan kolondaki kısa kart, kolon yüksekliğini doldurur */
.col-side-fill { display: flex; }
.col-side-fill > .card { width: 100%; }
.col-side-fill > .card > .card-body { display: flex; flex-direction: column; }
.au-fill-center {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  font-size: var(--fs-body);
  color: var(--text-3);
}

/* ═══ 12) SAYFAYA ÖZEL ══════════════════════════════════════════════════ */

/* Domain işlem butonları — eşit genişlik, hizalı */
.domain-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.domain-actions .btn { justify-content: center; }

/* Geo ülke seçici */
.geo-row { cursor: pointer; transition: background var(--t-fast); }
.geo-row:hover { background: var(--surface-2); }
.geo-row .fi { font-size: 15px; }

/* Layer 4 / DDoS atak tablosu — uzun "Tür" metni sarsın */
.ddos-table td:nth-child(2), .ddos-table th:nth-child(2) {
  white-space: normal;
  min-width: 210px;
  max-width: 330px;
  line-height: 1.4;
}

/* Canlı yenileme göstergesi */
.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  font-size: var(--fs-sm);
  color: var(--ok);
  background: var(--ok-a12);
  border: 1px solid var(--ok-a28);
  border-radius: var(--r-pill);
}
.live-dot {
  width: 8px; height: 8px;
  flex: 0 0 auto;
  background: var(--ok);
  border-radius: 50%;
  animation: au-live-pulse 1.9s ease-out infinite;
}
@keyframes au-live-pulse {
  0%   { box-shadow: 0 0 0 0 var(--ok-a28); }
  70%  { box-shadow: 0 0 0 8px rgba(63,207,142,0); }
  100% { box-shadow: 0 0 0 0 rgba(63,207,142,0); }
}
/* Canlı akışta yeni gelen satır */
@keyframes au-row-in { from { background: var(--accent-a14); } to { background: transparent; } }
.live-new > td { animation: au-row-in 1.6s var(--ease); }

/* Abuse */
.abuse-unread > td { box-shadow: inset 2px 0 0 var(--warn); }
.abuse-dot { width: 7px; height: 7px; flex-shrink: 0; display: inline-block; background: var(--warn); border-radius: 50%; }
.abuse-body { font-size: var(--fs-sm); color: var(--text-3); line-height: 1.6; }

/* Rapor yazdırma görünümü */
.no-print { }

/* ═══ 13) KİMLİK DOĞRULAMA EKRANLARI ════════════════════════════════════ */
body.authentication-page { background: var(--surface); }
body.authentication-page::before { display: none; }

/**
 * Giriş ekranı sol paneli açık temada da KOYU kalır.
 * Bu bilinçli: iki tarafı da beyaz yapmak giriş ekranını sıradan bir
 * forma indiriyor. Koyu marka paneli + beyaz form, yıllardır değişmeyen
 * bir desen — Stripe, Linear, Cloudflare hesap ekranları böyle.
 */
.auth-hero {
  position: relative;
  flex: 0 0 46%;
  max-width: 46%;
  overflow: hidden;

  /* Bu panel HER ZAMAN koyu. Bu yüzden aksan üçlüsü burada shield'in KOYU
     mod değerlerine geçilir. Aydınlık mod aksanları (#4f46e5 / #7c3aed /
     #0891b2) koyu zeminde soluk kalıyor; başlıktaki gradyan metin
     okunmuyordu. Kapsam yalnızca bu panel — sayfanın geri kalanı aydınlık. */
  --accent:     #6366f1;
  --accent-2:   #8b5cf6;
  --accent-hi:  #818cf8;
  --accent-rgb: 99, 102, 241;
  --live:       #22d3ee;

  background:
    radial-gradient(120% 95% at 18% 0%, #1c1b3f 0%, transparent 58%),
    radial-gradient(100% 85% at 92% 100%, #121527 0%, transparent 60%),
    #0a0c14;
  border-inline-end: 1px solid var(--line);
}
.auth-hero-bg { position: absolute; inset: 0; }
.auth-hero-bg .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .40;
  animation: au-float 20s ease-in-out infinite;
}
/* Lekeler de yukarıdaki kapsamlı aksan üçlüsünden gelir — sabit hex yok. */
.auth-hero-bg .b1 { width: 360px; height: 360px; top: -70px; left: -50px;   background: var(--accent);   animation-delay: 0s; }
.auth-hero-bg .b2 { width: 300px; height: 300px; top: 32%;  right: -60px;   background: var(--accent-hi); animation-delay: -5s; }
.auth-hero-bg .b3 { width: 280px; height: 280px; bottom: 6%; left: 14%;     background: var(--accent-2);  animation-delay: -10s; }
.auth-hero-bg .b4 { width: 220px; height: 220px; bottom: -50px; right: 20%; background: var(--live);      animation-delay: -15s; }
@keyframes au-float {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  33%      { transform: translate3d(24px,-20px,0) scale(1.08); }
  66%      { transform: translate3d(-18px,16px,0) scale(.94); }
}
.auth-hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.038) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(78% 58% at 50% 40%, #000 0%, transparent 76%);
  -webkit-mask-image: radial-gradient(78% 58% at 50% 40%, #000 0%, transparent 76%);
}
.auth-hero-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(88% 68% at 50% 45%, transparent 28%, rgba(3,4,5,.78) 100%);
}
.auth-hero-title {
  font-size: 31px !important;
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.035em;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}

.login-shield { position: relative; width: 256px; height: 256px; display: grid; place-items: center; }
.login-shield .ring {
  position: absolute; inset: 0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  animation: au-ring 4.6s ease-out infinite;
}
.login-shield .r1 { inset: 24%; animation-delay: 0s; }
.login-shield .r2 { inset: 12%; animation-delay: .9s; }
.login-shield .r3 { inset: 0;   animation-delay: 1.8s; }
@keyframes au-ring {
  0%   { transform: scale(.86); opacity: .9; }
  100% { transform: scale(1.16); opacity: 0; }
}
.login-shield .shield-glow {
  position: absolute;
  width: 182px; height: 182px;
  background: var(--brand-grad);
  border-radius: 50%;
  filter: blur(46px);
  opacity: .42;
}
.login-shield .shield-core {
  position: relative;
  z-index: 2;
  width: 122px; height: 122px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 32px;
  box-shadow: 0 24px 60px -22px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: blur(8px);
}
.login-shield .shield-core img { width: 80px; height: 80px; display: block; }

.auth-form-pane {
  background: var(--surface);
  border-inline-start: 0;
}
.auth-form-pane .btn-primary { width: 100%; padding: 11px 18px; font-size: 14px; }
.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
@media (max-width: 767.98px) {
  .auth-hero { display: none !important; }
  .auth-form-pane { background: var(--surface); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-hero-bg .blob, .login-shield .ring, .live-dot { animation: none !important; }
}

/* ═══ 13b) TASARIM YENİLEME (v4) ════════════════════════════════════════
   Kullanıcı isteği: "tasarım daha güzel olmalı". Bu bölüm bileşenlerin
   ÜSTÜNE yazılır (geri almak için bölümü silmek yeterli). İçerik:
     · zemin ışıması biraz daha belirgin ve iki tonlu
     · kart başlık ikonları ton renginde küçük çip
     · KPI kartları: köşe ışığı artık yuvarlak köşeden TAŞMIYOR (eskiden kare
       kesik görünüyordu), gradyan ikon çipi, alt ton çizgisi, hafif yükselme
     · Panel'deki ülke haritası kartı baştan (lejant, Türkçe ülke adları, pay,
       harita <-> liste vurgusu, okunur zoom düğmeleri ve ipucu kutusu)
     · Güvenlik dağılımı kartında "en sık saldırı türleri"                     */

body::before {
  background:
    radial-gradient(72rem 34rem at 10% -14%, rgba(var(--accent-rgb), .075), transparent 62%),
    radial-gradient(60rem 30rem at 94% -20%, rgba(124, 58, 237, .055), transparent 60%);
}

/* Kart başlık ikonu: kendi renginde (text-primary / -success …) küçük çip */
.card-title > i.fas:first-child,
.card-title > i.fa-solid:first-child {
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  margin-inline-end: 2px !important;
  font-size: 12px;
  border-radius: var(--r2);
  background: color-mix(in srgb, currentColor 11%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent);
}

/* ── KPI / özet kartları ─────────────────────────────────────────── */
/* Köşe ışığı kartın YUVARLAK köşesine göre kırpılsın. card-body'nin kendi
   köşesi kareydi; ışık kartın köşesinden dışarı taşıp kesik görünüyordu. */
.kpi,
.stat-card .card-body { border-radius: inherit; }
.kpi::after,
.stat-card .card-body::after {
  inset-block-start: -46%;
  inset-inline-end: -20%;
  width: 58%;
  background: radial-gradient(circle, rgba(var(--tone-rgb, var(--accent-rgb)), .14), transparent 66%);
}
/* Alt ton çizgisi — kartın durumunu sayıya bulaştırmadan belli eder */
.kpi::before,
.stat-card .card-body::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(var(--tone-rgb, var(--accent-rgb)), .55) 35%, rgba(var(--tone-rgb, var(--accent-rgb)), .12) 85%, transparent);
  pointer-events: none;
}
.kpi .kpi__chip,
.stat-card .stat-corner-icon {
  width: 38px; height: 38px;
  font-size: 14px;
  color: #fff !important;
  border: 0;
  border-radius: var(--r3);
  background: linear-gradient(135deg, rgba(var(--tone-rgb, var(--accent-rgb)), 1), rgba(var(--tone-rgb, var(--accent-rgb)), .74));
  box-shadow: 0 8px 18px -8px rgba(var(--tone-rgb, var(--accent-rgb)), .8), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.card:has(> .kpi),
.stat-card {
  transition: transform var(--d2) var(--e-out), box-shadow var(--d2) var(--e-io), border-color var(--d2) var(--e-io);
}
.card:has(> .kpi):hover,
.stat-card:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .card:has(> .kpi):hover, .stat-card:hover { transform: none; }
}

/* ── Ülke haritası kartı ─────────────────────────────────────────── */
.geo-card .card-body { display: flex; flex-direction: column; gap: 16px; }
.geo-head-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm);
  color: var(--text-3);
  white-space: nowrap;
}
.geo-head-meta b { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }
.geo-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-4); }
.geo-map {
  position: relative;
  padding: 10px 10px 8px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r4);
  background: linear-gradient(180deg, var(--surface-2), var(--surface) 85%);
}
.geo-map .au-map { background: transparent; border: 0; border-radius: var(--r3); }
.geo-legend {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 6px 2px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.geo-legend__bar {
  flex: 0 0 150px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--accent-a22);
  box-shadow: inset 0 0 0 1px rgba(16, 20, 34, .05);
}
.geo-legend__max { margin-inline-start: auto; }
.geo-legend__max b { color: var(--text-2); font-weight: 650; font-variant-numeric: tabular-nums; }

/* jsvectormap kendi CSS'i bizden SONRA yükleniyor (siyah 15px kareler,
   mor ipucu). Özgüllük bu yüzden bir kademe yüksek tutuldu. */
.geo-map .jvm-zoom-btn {
  width: 28px; height: 28px;
  padding: 0;
  display: grid; place-items: center;
  font-size: 15px; line-height: 1;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r2);
  box-shadow: var(--sh1);
  inset-inline-start: 12px !important;
  transition: background var(--d1) var(--e-io), color var(--d1) var(--e-io);
}
.geo-map .jvm-zoom-btn.jvm-zoomin  { top: 12px; }
.geo-map .jvm-zoom-btn.jvm-zoomout { top: 46px; }
.geo-map .jvm-zoom-btn:hover { color: var(--accent); background: var(--surface-2); }
body .jvm-tooltip {
  padding: 8px 11px;
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: #fff;
  background: rgba(16, 20, 34, .92);
  border: 0;
  border-radius: var(--r2);
  box-shadow: 0 10px 30px -10px rgba(16, 20, 34, .45);
  backdrop-filter: blur(6px);
}

.geo-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 2px;
}
.geo-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px;
  border-radius: var(--r2);
  outline: none;
  cursor: default;
  transition: background var(--d1) var(--e-io);
}
.geo-row:hover,
.geo-row.is-hot { background: var(--accent-a08); }
.geo-row:focus-visible { background: var(--accent-a08); box-shadow: var(--ring); }
.geo-row__rank {
  flex: none;
  width: 16px;
  font-size: var(--fs-xs);
  font-weight: 650;
  text-align: center;
  color: var(--fg-4);
  font-variant-numeric: tabular-nums;
}
.geo-row__flag {
  flex: none;
  font-size: 15px;
  border-radius: 3px;
  background-size: cover;
  box-shadow: 0 0 0 1px var(--line);
}
.geo-row__main { flex: 1; min-width: 0; }
.geo-row__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.geo-row__name {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-body);
  font-weight: 560;
  color: var(--text);
}
.geo-row__val { flex: none; font-size: var(--fs-body); color: var(--text-3); font-variant-numeric: tabular-nums; }
.geo-row__val b { color: var(--text); font-weight: 650; }
.geo-row__pct { margin-inline-start: 6px; font-size: var(--fs-xs); color: var(--fg-4); }
.geo-row__bar { height: 4px; margin-top: 6px; overflow: hidden; border-radius: var(--r-pill); background: var(--surface-3); }
.geo-row__bar > span {
  display: block; height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
}
@media (max-width: 575.98px) {
  .geo-list { grid-template-columns: 1fr; }
  .geo-legend__bar { flex-basis: 90px; }
  .geo-head-meta .badge { display: none; }
}

/* Eşit yükseklikli satırda durum listesi kartı boydan boya dolsun: kart
   haritayla aynı boya uzayınca son satırla alt düğmeler arasında ~90px
   boşluk kalıyordu. Satırlar eşit pay alıp dikeyde ortalanır. */
.row-equal .card-body:has(> .statlist) { display: flex; flex-direction: column; }
.row-equal .card-body > .statlist { flex: 1 1 auto; }
.row-equal .card-body > .statlist > .statlist__row { flex: 1 1 auto; }

/* ── En sık saldırı türleri (Güvenlik Dağılımı kartı) ────────────── */
.topscen { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--line-2); }
.topscen__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
}
.topscen__head span { font-size: var(--fs-xs); font-weight: 450; color: var(--fg-4); }
.topscen__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name num" "bar bar";
  column-gap: 10px;
  row-gap: 5px;
  padding: 7px 0;
}
.topscen__name {
  grid-area: name;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.topscen__num { grid-area: num; font-size: var(--fs-sm); font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
.topscen__bar { grid-area: bar; height: 4px; overflow: hidden; border-radius: var(--r-pill); background: var(--surface-3); }
.topscen__bar > span {
  display: block; height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(var(--warn-rgb), .75), var(--danger));
}

/* ── v4.1 ────────────────────────────────────────────────────────── */

/* stat-card: değerin ALTINDAKİ açıklama da büyük harfli "eyebrow" kuralına
   takılıyordu ("ŞU ANDA ENGELLENEN IP KARARI"). Artık Panel'deki
   .kpi__note gibi düz yazı. .text-muted :is() içinde — özgüllük (0,3,1)
   olsun, eyebrow kuralını (0,3,0) yensin. */
.stat-card .card-body > :is(h3, h4) ~ :is(span, small, p, div, .text-muted) {
  margin: 2px 0 0;
  font-weight: 450;
  line-height: 1.42;
  letter-spacing: 0;
  text-transform: none;
}

/* Panel KPI'ları telefonda 2×2 (markup: col-6). Ölçüler sıkılaştırıldı ki
   dar kartta etiket + çip + sayı rahat sığsın; yatay boşluk dikey boşlukla
   (--gutter: 14px) eşitlendi. */
@media (max-width: 575.98px) {
  .row.kpi-row { --bs-gutter-x: 14px; }
  .kpi-row .kpi { min-height: 0; gap: 8px; padding: 14px; }
  .kpi-row .kpi .kpi__chip { width: 30px; height: 30px; font-size: 12px; border-radius: var(--r2); }
  .kpi-row .kpi__label { font-size: var(--t-10); letter-spacing: .06em; }
  .kpi-row .kpi__value { font-size: var(--t-24, 1.5rem); }
  .kpi-row .kpi__note { min-height: 31px; font-size: var(--t-11); line-height: 1.4; }
}

/* Telefonda kart başlığı SARAR. Başlık + filtre düğmeleri tek satıra
   sığmayınca (Trafik → Son İstekler: tümü/blok/challenge/WAF) sayfa 27px
   yana taşıyordu; mobil tarayıcı yerleşimi 417px'e genişletip üst bardaki
   profil düğmesini ekran dışına itiyordu. Sığan başlıklar etkilenmez. */
@media (max-width: 575.98px) {
  .card-header { flex-wrap: wrap; row-gap: 10px; }
}

/* Yapışkan yan kart (Güvenlik → Manuel IP Ban): uzun ban listesi
   kaydırılırken form görünür kalır. Yalnızca iki sütun yan yanayken. */
@media (min-width: 1200px) {
  .au-sticky { position: sticky; top: calc(var(--header-h) + var(--gutter)); }
}

/* ── Sıralı liste (Analitik: domain / senaryo / kaynak IP) ───────────
   Eskiden düz tablo + sayı rozeti; artık Panel'deki ülke listesiyle aynı
   dil: sıra çipi, ad, sayı + pay, ince oran çubuğu. */
.an-list-body { padding: 8px 12px 12px; }
.row-equal .an-list-body { display: flex; flex-direction: column; }
.row-equal .an-list-body > .au-empty { margin-block: auto; }
.rank-list { display: flex; flex-direction: column; gap: 2px; }
.rank-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 8px;
  border-radius: var(--r2);
  transition: background var(--d1) var(--e-io);
}
.rank-row:hover { background: var(--accent-a08); }
.rank-row__idx {
  flex: none;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  font-size: var(--fs-xs);
  font-weight: 650;
  color: var(--fg-3);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  font-variant-numeric: tabular-nums;
}
.rank-row:nth-child(-n+3) .rank-row__idx { color: var(--accent); background: var(--accent-a08); border-color: var(--accent-a22); }
.rank-row__main { flex: 1; min-width: 0; }
.rank-row__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rank-row__name {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-body);
  font-weight: 560;
  color: var(--text);
}
.rank-row__name.is-mono { font-family: var(--f-mono); font-size: var(--fs-sm); font-weight: 500; }
.rank-row__ns { color: var(--fg-4); font-weight: 400; }
.rank-row__flag {
  margin-inline-end: 8px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--line);
  vertical-align: -1px;
}
.rank-row__val { flex: none; font-size: var(--fs-body); color: var(--text-3); font-variant-numeric: tabular-nums; }
.rank-row__val b { color: var(--text); font-weight: 650; }
.rank-row__pct { margin-inline-start: 6px; font-size: var(--fs-xs); color: var(--fg-4); }
.rank-row__bar { height: 4px; margin-top: 7px; overflow: hidden; border-radius: var(--r-pill); background: var(--surface-3); }
.rank-row__bar > span {
  display: block; height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
}
/* Saldırgan tarafı (senaryo / kaynak IP): Panel'deki "en sık saldırı
   türleri" ile aynı turuncu → kırmızı */
.rank-list--risk .rank-row__bar > span { background: linear-gradient(90deg, rgba(var(--warn-rgb), .75), var(--danger)); }
.rank-list--risk .rank-row:nth-child(-n+3) .rank-row__idx { color: var(--danger); background: var(--danger-a12); border-color: var(--danger-a28); }

/* ═══ 14) YAZDIRMA ══════════════════════════════════════════════════════ */
@media print {
  :root { --gutter: 0px; }
  body { background: #fff !important; color: #000 !important; }
  body::before, .app-sidebar, .app-header, .footer,
  .scrollToTop, .no-print, .btn-list, #responsive-overlay { display: none !important; }
  .main-content, .app-content { margin: 0 !important; padding: 0 !important; }
  .card, .custom-card {
    background: #fff !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
  .card-header, .card-footer { border-color: #ddd !important; }
  .card-title, h1, h2, h3, h4, h5, h6 { color: #000 !important; }
  .table { color: #000 !important; }
  .table > thead > tr > th { color: #000 !important; background: #f2f2f2 !important; border-color: #ccc !important; }
  .table > tbody > tr > td { border-color: #e5e5e5 !important; }
  .text-muted { color: #555 !important; }
}