/* Gözcü — arayüz stilleri */

:root {
  --bg:        #f4f5f7;
  --surface:   #ffffff;
  --surface-2: #f9fafb;
  --border:    #e3e6ea;
  --text:      #1a1d21;
  --text-dim:  #656d76;
  --accent:    #2f6df6;
  --accent-dim:#dbe6ff;
  --ok:        #15803d;
  --warn:      #b45309;
  --danger:    #c02626;
  --radius:    10px;
  --shadow:    0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
}

/* Tema üç durumludur: sistem (varsayılan), açık, koyu.
   Karanlık palet iki kapsamda tanımlanır:
     - media sorgusu işletim sistemi ayarını karşılar. :not([data-theme="light"])
       koruması sayesinde kullanıcının "açık" seçimi sistem karanlığını yener.
     - [data-theme="dark"] kapsamı kullanıcının açık seçimini karşılar ve
       sistem aydınlıkken de koyu temayı verir.
   Tek yönlü tanımlansaydı seçim iki yönden birinde çalışmazdı. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0f1115;
    --surface:   #171a20;
    --surface-2: #1d2129;
    --border:    #2a2f38;
    --text:      #e6e8eb;
    --text-dim:  #9aa3ae;
    --accent:    #5b8dff;
    --accent-dim:#1d2b4d;
    --ok:        #4ade80;
    --warn:      #fbbf24;
    --danger:    #f87171;
    --shadow:    0 1px 2px rgba(0,0,0,.4);
  }
}

:root[data-theme="dark"] {
    --bg:        #0f1115;
    --surface:   #171a20;
    --surface-2: #1d2129;
    --border:    #2a2f38;
    --text:      #e6e8eb;
    --text-dim:  #9aa3ae;
    --accent:    #5b8dff;
    --accent-dim:#1d2b4d;
    --ok:        #4ade80;
    --warn:      #fbbf24;
    --danger:    #f87171;
    --shadow:    0 1px 2px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* =========================================================================
   Yan menü
   Menü yatay bir şeritteyken sayfa sayısı arttıkça sığmıyordu. Dikey menüde
   her bölüm kendi satırında ve yeni ekran eklemek yerleşimi bozmuyor.

   Menü her iki temada da KOYU. Sayfa zemininden ayrı bir yüzey olması
   "burası gezinme, orası içerik" ayrımını renkle değil YÜZEYLE anlatıyor;
   açık temada da sabit kalması panelin kimliğini koruyor.
   ========================================================================= */
:root {
  --menu-w:      248px;
  --menu-w-dar:  68px;
  --side-bg:     #141b2d;
  --side-bg-2:   #1b2439;
  --side-text:   #e7eaf2;
  --side-dim:    #8f99b0;
  --side-line:   rgba(255,255,255,.09);
  --side-hover:  rgba(255,255,255,.06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --side-bg:   #0c0f16;
    --side-bg-2: #141922;
    --side-line: rgba(255,255,255,.07);
  }
}
:root[data-theme="dark"] {
  --side-bg:   #0c0f16;
  --side-bg-2: #141922;
  --side-line: rgba(255,255,255,.07);
}

:root[data-menu="dar"] { --menu-w: var(--menu-w-dar); }

.kabuk { display: flex; min-height: 100vh; }

.yanmenu {
  position: fixed; inset: 0 auto 0 0; z-index: 30;
  width: var(--menu-w); flex: 0 0 var(--menu-w);
  display: flex; flex-direction: column;
  background: var(--side-bg);
  border-right: 1px solid var(--side-line);
  transition: width .16s ease;
}
.icerik { flex: 1; min-width: 0; margin-left: var(--menu-w); transition: margin-left .16s ease; }
@media (prefers-reduced-motion: reduce) {
  .yanmenu, .icerik { transition: none; }
}

/* --- logo ve daraltma --- */
.yanmenu-ust {
  display: flex; align-items: center; gap: 10px;
  height: 60px; padding: 0 14px 0 18px;
  border-bottom: 1px solid var(--side-line);
}
.marka {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  color: var(--side-text); font-weight: 650; font-size: 17px; letter-spacing: -.01em;
}
.marka:hover { text-decoration: none; }
.marka-im {
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: 7px;
  background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #12d1a0));
  position: relative;
}
/* Markanın içindeki göz: panelin adı Gözcü, imi de bakan bir göz olsun. */
.marka-im::after {
  content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff;
}
.marka-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.daralt, .btn-ikon, .menu-dugme, .menu-kapat {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: 0 0 auto; padding: 0;
  border: 1px solid transparent; border-radius: 8px;
  background: none; color: var(--side-dim); cursor: pointer;
}
.daralt:hover, .btn-ikon:hover, .menu-dugme:hover, .menu-kapat:hover {
  background: var(--side-hover); color: var(--side-text); text-decoration: none;
}
.daralt svg, .btn-ikon svg, .menu-dugme svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.daralt { margin-left: auto; }
/* Betik yüklenmediyse düğme hiçbir şey yapmaz; o zaman görünmesin. */
.daralt:not([data-ready]) { display: none; }
:root[data-menu="dar"] .daralt svg { transform: rotate(180deg); }

/* --- menü satırları --- */
.yanmenu-nav { flex: 1; overflow-y: auto; padding: 14px 10px; }
.bolum-ad {
  margin: 14px 0 6px; padding: 0 10px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--side-dim); opacity: .8;
}
.yanmenu-nav .bolum-ad:first-child { margin-top: 0; }

.menu-sat {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; margin-bottom: 2px; border-radius: 9px;
  color: var(--side-dim); font-size: 14px; font-weight: 500;
  white-space: nowrap;
}
.menu-sat:hover { background: var(--side-hover); color: var(--side-text); text-decoration: none; }
/* Seçili satır yalnız renkle değil: soldaki çubuk ve kalın yazı da var. */
.menu-sat.active {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: #fff; font-weight: 600;
}
.menu-sat.active::before {
  content: ""; position: absolute; left: -10px; top: 7px; bottom: 7px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
}
.menu-ikon {
  width: 17px; height: 17px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.menu-ad { overflow: hidden; text-overflow: ellipsis; }

/* --- alt: hesap --- */
.yanmenu-alt {
  border-top: 1px solid var(--side-line);
  padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
}
.hesap-ozet { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.hesap-ozet:hover { text-decoration: none; }
.hesap-ozet:hover .hesap-ad { color: #fff; }
.avatar {
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 28%, var(--side-bg-2));
  color: #fff; font-size: 13px; font-weight: 650;
}
.hesap-metin { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.hesap-ad {
  font-size: 13px; font-weight: 560; color: var(--side-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hesap-rol { font-size: 11px; color: var(--side-dim); }
.hesap-islem { display: flex; gap: 2px; flex: 0 0 auto; }

/* Tema düğmesi menünün içinde: kendi rengini değil menünün rengini alsın. */
.yanmenu-alt .btn-theme {
  width: 30px; height: 30px; padding: 0; border: 1px solid transparent;
  border-radius: 8px; background: none; color: var(--side-dim); cursor: pointer;
}
.yanmenu-alt .btn-theme:hover { background: var(--side-hover); color: var(--side-text); }
.tema-ikon {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
/* `hidden` NİTELİĞİ SVG'DE İŞE YARAMIYOR. Tarayıcının varsayılan
   `[hidden]{display:none}` kuralı HTML ad alanındaki öğelere uygulanıyor;
   SVG öğesinde nitelik duruyor, `el.hidden` true dönüyor ama öğe yine
   çiziliyor. Üç tema ikonu birden görünüyordu. Kural elle yazılmalı. */
.tema-ikon[hidden] { display: none; }

/* --- daraltılmış menü --- */
:root[data-menu="dar"] .marka-ad,
:root[data-menu="dar"] .menu-ad,
:root[data-menu="dar"] .bolum-ad,
:root[data-menu="dar"] .hesap-metin { display: none; }
:root[data-menu="dar"] .yanmenu-ust { padding: 0 12px; justify-content: center; gap: 0; }
:root[data-menu="dar"] .marka { display: none; }
:root[data-menu="dar"] .daralt { margin: 0; }
:root[data-menu="dar"] .yanmenu-nav { padding: 12px 8px; }
:root[data-menu="dar"] .menu-sat { justify-content: center; padding: 10px 0; }
:root[data-menu="dar"] .menu-sat.active::before { left: -8px; }
:root[data-menu="dar"] .yanmenu-alt { flex-direction: column; padding: 12px 8px; gap: 8px; }
:root[data-menu="dar"] .hesap-ozet { flex: 0 0 auto; }
/* İki düğme 68px'e yan yana sığmıyor; alt alta geçiyorlar. */
:root[data-menu="dar"] .hesap-islem { flex-direction: column; gap: 4px; }

/* --- telefonda üstte şerit, menü çekmece --- */
.menu-ac, .menu-dugme, .menu-kapat, .menu-perde, .ust-serit { display: none; }

/* --- yerleşim ------------------------------------------------------------ */
.container { max-width: 1180px; margin: 0 auto; padding: 28px 24px 64px; }

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
}
.page-head h1 { margin: 0; font-size: 22px; letter-spacing: -.02em; font-weight: 640; }
.page-head p  { margin: 4px 0 0; color: var(--text-dim); font-size: 14px; }

/* --- kart ---------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-body { padding: 20px 22px; }

/* --- boş durum ----------------------------------------------------------- */
.empty { text-align: center; padding: 56px 24px; }
.empty .icon { font-size: 34px; opacity: .55; }
.empty h2 { margin: 14px 0 6px; font-size: 17px; font-weight: 600; }
.empty p  { margin: 0 auto; max-width: 460px; color: var(--text-dim); font-size: 14px; }

/* --- tablo --------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th {
  text-align: left; padding: 11px 16px; font-size: 11.5px; font-weight: 620;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim);
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.data td { padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.data td.nowrap { white-space: nowrap; }
table.data tr:last-child td { border-bottom: 0; }
table.data tr:hover td { background: var(--surface-2); }

/* --- rozet --------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 99px;
  font-size: 12px; font-weight: 560; line-height: 1.7;
  background: var(--surface-2); color: var(--text-dim);
  border: 1px solid var(--border);
  /* Dar sutunda "200 gün" -> "200" / "gün" diye bolunuyordu; rozet tek
     satirlik bir etikettir, hicbir zaman kirilmamali. */
  white-space: nowrap;
}
.badge.ok     { color: var(--ok);     border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.badge.warn   { color: var(--warn);   border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.badge.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }

/* --- düğme --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 15px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 14px; font-weight: 540; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn-primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.btn-primary:hover { filter: brightness(1.07); background: var(--accent); }
.btn-link {
  border: 0; background: none; color: var(--text-dim); padding: 6px 8px;
}
.btn-link:hover { color: var(--text); background: none; }
.btn-block { width: 100%; }

/* --- form ---------------------------------------------------------------- */
.field { margin-bottom: 16px; }
.field label {
  display: block; margin-bottom: 6px;
  font-size: 13.5px; font-weight: 560; color: var(--text);
}
.field .hint { display: block; margin-top: 6px; font-size: 12.5px; color: var(--text-dim); }
.input {
  width: 100%; padding: 10px 13px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 14.5px;
}
.input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* --- bildirim ------------------------------------------------------------ */
.alert {
  padding: 11px 15px; border-radius: 8px; font-size: 14px;
  border: 1px solid var(--border); background: var(--surface-2);
  margin-bottom: 18px;
}
.alert-error   { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent);
                 background: color-mix(in srgb, var(--danger) 8%, transparent); }
.alert-success { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent);
                 background: color-mix(in srgb, var(--ok) 8%, transparent); }

/* --- ortalanmış giriş ekranı --------------------------------------------- */
.auth-wrap {
  min-height: 100dvh; display: grid; place-items: center; padding: 24px;
}
.auth-box { width: 100%; max-width: 388px; }
.auth-head { text-align: center; margin-bottom: 22px; }
.auth-head .logo {
  font-size: 21px; font-weight: 660; letter-spacing: -.02em;
  display: inline-flex; align-items: center; gap: 9px;
}
.auth-head .logo .dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent);
}
.auth-head p { margin: 7px 0 0; color: var(--text-dim); font-size: 14px; }
.auth-foot { text-align: center; margin-top: 18px; font-size: 12.5px; color: var(--text-dim); }

.muted { color: var(--text-dim); }
.mono  { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }

/* Uzun alan adlari satira sigmayinca dort parcaya bolunuyordu. Tek satirda
   tutup tasan kismi ucnokta ile kes; tam hali title ozniteliginde. */
.site-cell { min-width: 0; }
.site-cell .name   { font-weight: 580; }
.site-cell .domain { color: var(--text-dim); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
                     font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                     max-width: 260px; }

/* =========================================================================
   Durum renkleri — sabit, temaya göre değişmez.
   Renk hiçbir zaman tek başına anlam taşımaz: her zaman bir etiketle gelir.
   ========================================================================= */
:root {
  --status-good:     #0ca30c;
  --status-warning:  #fab219;
  --status-serious:  #ec835a;
  --status-critical: #d03b3b;
}

.dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  flex: 0 0 auto;
}
.dot-good     { background: var(--status-good); }
.dot-warning  { background: var(--status-warning); }
.dot-serious  { background: var(--status-serious); }
.dot-critical { background: var(--status-critical); }
.dot-idle     { background: var(--text-dim); opacity: .5; }

.badge-sub { color: var(--text-dim); font-weight: 400; margin-left: 2px; }

/* --- sparkline ----------------------------------------------------------- */
.spark { display: block; }
.spark-up   { fill: var(--accent); }
.spark-down { fill: var(--status-critical); }
.spark path { transition: opacity .1s; }
.spark:hover path { opacity: .55; }
.spark path:hover { opacity: 1; }

/* --- istatistik kutuları ------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
         background: var(--border); border-radius: var(--radius); overflow: hidden;
         border: 1px solid var(--border); }
.stat { background: var(--surface); padding: 16px 18px; }
.stat .label { font-size: 11.5px; font-weight: 620; text-transform: uppercase;
               letter-spacing: .05em; color: var(--text-dim); }
.stat .value { font-size: 24px; font-weight: 600; letter-spacing: -.02em; margin-top: 5px;
               font-variant-numeric: tabular-nums; }
.stat .sub   { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; }

/* --- açılır form (JS'siz) ------------------------------------------------ */
details.adder { margin-bottom: 20px; }
details.adder > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: 8px; border: 1px solid var(--accent);
  background: var(--accent); color: #fff; font-size: 14px; font-weight: 540;
}
details.adder > summary::-webkit-details-marker { display: none; }
details.adder > summary:hover { filter: brightness(1.07); }
details.adder[open] > summary { background: var(--surface); color: var(--text); border-color: var(--border); }
details.adder .card { margin-top: 12px; }

.form-row { display: grid; grid-template-columns: 2fr 1.4fr 1fr auto; gap: 14px; align-items: end; }
/* Dar ekranda tek sütun. `display:block` şart: bazı formlarda sütun sayısı
   satır içi stille yazılı ve satır içi stil bu kuraldan güçlü — grid açık
   kalırsa 220px'lik sabit sütun 390px'e sığmayıp sayfayı taşırıyor. */
@media (max-width: 900px) {
  .form-row { display: block; }
  .form-row > * + * { margin-top: 14px; }
}
.form-row .field { margin-bottom: 0; }

/* --- alarm listesi ------------------------------------------------------- */
.alert-row { display: flex; align-items: flex-start; gap: 11px; padding: 12px 16px;
             border-bottom: 1px solid var(--border); }
.alert-row:last-child { border-bottom: 0; }
.alert-row .dot { margin-top: 6px; }
.alert-row .msg { flex: 1; font-size: 14px; }
.alert-row .site { font-weight: 580; }
.alert-row .when { color: var(--text-dim); font-size: 12.5px; white-space: nowrap; }

/* --- site detay ---------------------------------------------------------- */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }
.card h3 { margin: 0; padding: 14px 18px; font-size: 13px; font-weight: 620;
           text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim);
           border-bottom: 1px solid var(--border); background: var(--surface-2); }
dl.kv { margin: 0; padding: 6px 18px 14px; }
dl.kv div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0;
            border-bottom: 1px solid var(--border); font-size: 14px; }
dl.kv div:last-child { border-bottom: 0; }
dl.kv dt { color: var(--text-dim); }
dl.kv dd { margin: 0; text-align: right; }

.back { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim);
        font-size: 13.5px; margin-bottom: 10px; }

.danger-zone { margin-top: 28px; padding: 16px 18px; border: 1px solid var(--border);
               border-radius: var(--radius); display: flex; align-items: center;
               justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.btn-danger { border-color: color-mix(in srgb, var(--status-critical) 40%, transparent);
              color: var(--status-critical); }
.btn-danger:hover { background: color-mix(in srgb, var(--status-critical) 8%, transparent); }

/* =========================================================================
   Telefon görünümü
   Bir izleme paneli telefondan bakılan bir şeydir. Tablo formu dar ekranda
   yatay kaydırma üretiyordu: kullanıcı "site kapalı mı" sorusunu görmek için
   sağa kaydırmak zorunda kalıyordu. Dar ekranda her satır kendi kartına
   dönüşür; başlık satırı gizlenir, etiketler hücrelerin soluna geçer.
   ========================================================================= */
@media (max-width: 900px) {

  .container { padding: 20px 14px 48px; }

  /* Menü çekmeceye dönüşüyor; üstte ince bir şerit ve hamburger kalıyor.
     Açma/kapama gizli bir onay kutusuyla, CSS ile: betik yüklenmese de
     menüye ulaşılabilmeli. */
  .kabuk { display: block; }
  .icerik { margin-left: 0; }

  .ust-serit {
    display: flex; align-items: center; gap: 12px;
    height: 54px; padding: 0 14px;
    background: var(--side-bg); border-bottom: 1px solid var(--side-line);
    position: sticky; top: 0; z-index: 20;
  }
  .menu-dugme { display: inline-flex; }

  .yanmenu {
    width: 264px; --menu-w: 264px;
    transform: translateX(-100%);
    transition: transform .18s ease;
    box-shadow: 0 0 40px rgba(0,0,0,.4);
  }
  .menu-ac:checked ~ .kabuk .yanmenu { transform: translateX(0); }

  .menu-kapat { display: inline-flex; margin-left: auto; font-size: 15px; }
  .daralt { display: none; }

  /* Perde: açıkken menünün dışına dokununca kapansın. */
  .menu-perde {
    display: block; position: fixed; inset: 0; z-index: 25;
    background: rgba(0,0,0,.45); opacity: 0; pointer-events: none;
    transition: opacity .18s ease;
  }
  .menu-ac:checked ~ .kabuk .menu-perde { opacity: 1; pointer-events: auto; }

  /* Dar menü tercihi telefonda geçersiz: zaten çekmece. */
  :root[data-menu="dar"] .marka-ad,
  :root[data-menu="dar"] .menu-ad,
  :root[data-menu="dar"] .bolum-ad,
  :root[data-menu="dar"] .hesap-metin { display: revert; }
  :root[data-menu="dar"] .marka { display: flex; }
  :root[data-menu="dar"] .yanmenu-ust { padding: 0 14px 0 18px; justify-content: flex-start; gap: 10px; }
  :root[data-menu="dar"] .menu-sat { justify-content: flex-start; padding: 9px 11px; }
  :root[data-menu="dar"] .yanmenu-alt { flex-direction: row; padding: 12px 14px; }

  @media (prefers-reduced-motion: reduce) {
    .yanmenu, .menu-perde { transition: none; }
  }

  table.data thead { display: none; }
  table.data, table.data tbody, table.data tr, table.data td { display: block; width: 100%; }

  table.data tr {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
  }
  table.data tr:last-child { border-bottom: 0; }
  table.data tr:hover td { background: transparent; }

  table.data td {
    padding: 0; border: 0;
    display: flex; align-items: center; justify-content: space-between;
    gap: 4px 14px; min-height: 30px;
    /* Uzun içerikli hücrede etiket ve metin yan yana sığmıyor; metin alt
       satıra insin. Sarma olmadan hücre kendi genişliğini aşıp sayfayı
       yana taşırıyordu. */
    flex-wrap: wrap;
  }
  table.data td > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

  /* Etiket, başlık satırı yerine hücrenin soluna geçer */
  table.data td[data-label]::before {
    content: attr(data-label);
    font-size: 11.5px; font-weight: 620; text-transform: uppercase;
    letter-spacing: .05em; color: var(--text-dim);
    flex: 0 0 auto;
  }

  /* İlk hücre satırın başlığı: etiketsiz, tam genişlik */
  table.data td:first-child {
    display: block; margin-bottom: 10px;
  }
  table.data td:first-child::before { content: none; }
  .site-cell .domain { max-width: 100%; }

  /* Grafik dar ekranda satırı taşırmasın */
  table.data td .spark { max-width: 60%; height: 26px; }

  .stats { grid-template-columns: repeat(2, 1fr); }
  .page-head h1 { font-size: 20px; }
  .danger-zone { flex-direction: column; align-items: stretch; }
}

/* Hiçbir ekranda sayfa yana kaymamalı */
body { overflow-x: hidden; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 900px) { .table-wrap { overflow-x: visible; } }

.site-cell .name { font-weight: 580; color: var(--accent); }
.site-cell .name:hover { text-decoration: underline; }


/* DNS değerleri: her kayıt kendi satırında, kelime ortasından bölünmeden */
.dns-values { max-width: 65%; }
.dns-values > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* --- tema düğmesi -------------------------------------------------------- */
.btn-theme {
  border: 1px solid var(--border); background: var(--surface);
  width: 32px; height: 32px; padding: 0; border-radius: 8px;
  font-size: 15px; line-height: 1; color: var(--text-dim);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex: 0 0 auto;
}
.btn-theme:hover { background: var(--surface-2); color: var(--text); }
/* Betik çalışmadıysa düğme hiçbir işe yaramaz; o zaman görünmesin. */
.btn-theme:not([data-ready]) { display: none; }

/* --- SEO puan grafiği ---------------------------------------------------- */
.score-line { display: block; overflow: visible; }
.score-line .axis { stroke: var(--border); stroke-width: 1; }
.score-line .line { fill: none; stroke: var(--accent); stroke-width: 2;
                    stroke-linejoin: round; stroke-linecap: round; }
/* Yüzey renginde halka: nokta çizginin üstünden geçerken de okunur kalır */
.score-line .ring { fill: var(--surface); }
.score-line .dot  { fill: var(--accent); }
.score-line .tip  { fill: var(--text-dim); font-size: 11px; font-weight: 600;
                    font-family: inherit; }

/* --- SEO puanı ----------------------------------------------------------- */
.score-big { font-size: 34px; font-weight: 640; letter-spacing: -.02em;
             font-variant-numeric: tabular-nums; line-height: 1.1; }
.score-big .max { font-size: 15px; font-weight: 500; color: var(--text-dim); }
.score-good     { color: var(--status-good); }
.score-warning  { color: var(--status-warning); }
.score-serious  { color: var(--status-serious); }
.score-critical { color: var(--status-critical); }
.score-idle     { color: var(--text-dim); }

/* --- sorun grupları ------------------------------------------------------ */
.issue-group { border-bottom: 1px solid var(--border); }
.issue-group:last-child { border-bottom: 0; }
.issue-group > summary {
  list-style: none; cursor: pointer; padding: 12px 18px;
  display: flex; align-items: center; gap: 11px;
}
.issue-group > summary::-webkit-details-marker { display: none; }
.issue-group > summary:hover { background: var(--surface-2); }
.issue-group .label { flex: 1; font-size: 14px; font-weight: 540; }
.issue-group .count {
  font-size: 12.5px; font-weight: 620; color: var(--text-dim);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.issue-group .chev { color: var(--text-dim); font-size: 11px; transition: transform .15s; }
.issue-group[open] .chev { transform: rotate(90deg); }
.issue-samples { padding: 4px 18px 16px 42px; }
.issue-samples li { font-size: 13px; margin-bottom: 7px; word-break: break-word; }
.issue-samples .detail { color: var(--text-dim); }
.issue-samples .more { color: var(--text-dim); font-size: 12.5px; list-style: none; margin-left: -14px; }

/* --- Google kaynağı bağlantıları ----------------------------------------
   Bulgunun hemen altında duran, ölçülü bir "kim demiş?" satırı: rapordaki
   asıl veriyi bastırmasın diye küçük ve soluk, ama bağlantısı belirgin. */
.gdoc {
  margin: 0 18px 10px 42px; padding: 9px 12px;
  background: var(--surface-2); border-left: 2px solid var(--accent);
  border-radius: 0 7px 7px 0; font-size: 12.5px; color: var(--text-dim);
}
.gdoc-note { display: block; margin-bottom: 4px; }
/* "Ne yapmalı" satırı kaynağın altında ve biraz daha koyu: kullanıcı belgeyi
   açmadan da ilk adımı görebilmeli, kaynak notu ise bağlamı veriyor. */
.gdoc-fix { display: block; margin-bottom: 5px; color: var(--text); }
.gdoc a { font-weight: 540; }
.gdoc-card { margin-top: 20px; border-left: 2px solid var(--accent); }
.doc-list { margin: 0; padding: 0; list-style: none; }
.doc-list li { padding: 9px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.doc-list li:first-child { border-top: 0; padding-top: 0; }
.doc-list li > a { font-weight: 540; }
.doc-list .muted { font-size: 12.5px; margin-top: 2px; }

@media (max-width: 700px) {
  .gdoc { margin-left: 18px; }
}

.link-target { color: var(--text-dim); }

a.badge { text-decoration: none; }
a.badge:hover { background: var(--surface); border-color: var(--accent); text-decoration: none; }

/* =========================================================================
   Google verisi — grafikler
   Kategorik renkler sabit sırayla atanır, döngüye sokulmaz. Her çubuk kendi
   adı ve değeriyle doğrudan etiketli olduğu için gösterge kutusu gerekmiyor
   ve renk hiçbir zaman tek başına anlam taşımıyor.
   ========================================================================= */
:root {
  --cat-1: #2a78d6;  /* mavi   */
  --cat-2: #eb6834;  /* turuncu */
  --cat-3: #1baf7a;  /* deniz mavisi */
  --cat-4: #eda100;  /* sarı   */
  --cat-5: #e87ba4;  /* magenta */
  --cat-6: #008300;  /* yeşil  */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cat-1: #3987e5; --cat-2: #d95926; --cat-3: #199e70;
    --cat-4: #c98500; --cat-5: #d55181; --cat-6: #008300;
  }
}
:root[data-theme="dark"] {
  --cat-1: #3987e5; --cat-2: #d95926; --cat-3: #199e70;
  --cat-4: #c98500; --cat-5: #d55181; --cat-6: #008300;
}

/* --- trafik çizgisi ------------------------------------------------------ */
.tline { display: block; width: 100%; }
.tline .grid { stroke: var(--border); stroke-width: 1; }
.tline .line { fill: none; stroke: var(--accent); stroke-width: 2;
               stroke-linejoin: round; stroke-linecap: round;
               vector-effect: non-scaling-stroke; }
.tline .ring { fill: var(--surface); }
.tline .dot  { fill: var(--accent); }
.tline .axis-label { fill: var(--text-dim); font-size: 10px; text-anchor: end;
                     font-family: inherit; }
.tline .hit  { fill: transparent; }
.tline .hit:hover { fill: color-mix(in srgb, var(--accent) 8%, transparent); }

/* --- kaynak çubukları ---------------------------------------------------- */
.sbars { display: flex; flex-direction: column; gap: 13px; }
.sbar-head { display: flex; justify-content: space-between; align-items: baseline;
             font-size: 13.5px; margin-bottom: 5px; }
.sbar-val { font-variant-numeric: tabular-nums; font-weight: 560; }
.sbar-track { height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.sbar-fill  { height: 100%; border-radius: 99px; }
.sbar-fill.s1 { background: var(--cat-1); }
.sbar-fill.s2 { background: var(--cat-2); }
.sbar-fill.s3 { background: var(--cat-3); }
.sbar-fill.s4 { background: var(--cat-4); }
.sbar-fill.s5 { background: var(--cat-5); }
.sbar-fill.s6 { background: var(--cat-6); }

/* --- değişim göstergesi -------------------------------------------------- */
.trend { font-size: 13px; font-weight: 560; }
.trend-up   { color: var(--status-good); }
.trend-down { color: var(--status-critical); }

.kv-inline { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13.5px; }
.kv-inline > div { display: flex; flex-direction: column; gap: 2px; }
.kv-inline dt { color: var(--text-dim); font-size: 12px; }
.kv-inline dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.pager { display: flex; align-items: center; justify-content: center; gap: 14px;
         margin-top: 20px; font-size: 13.5px; }

/* --- kayıt görüntüleyici ------------------------------------------------- */
.logtabs { display: flex; gap: 6px; flex-wrap: wrap; }
.logtab {
  padding: 6px 12px; border-radius: 7px; font-size: 13px; color: var(--text-dim);
  border: 1px solid var(--border); background: var(--surface);
  display: inline-flex; gap: 7px; align-items: baseline; white-space: nowrap;
}
.logtab:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.logtab.active { background: var(--accent-dim); color: var(--accent); border-color: transparent; }
.logtab .muted { font-size: 11.5px; }
.logbox {
  margin: 0; padding: 16px 18px; max-height: 62vh; overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.65; white-space: pre-wrap; word-break: break-word;
  background: var(--surface-2); border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
}

/* --- çalışma oranı çubukları --------------------------------------------- */
.ubars { display: block; max-width: 100%; height: auto; }
.ubars .ubar-up   { fill: var(--status-good); }
.ubars .ubar-down { fill: var(--status-critical); }
.ubars path { transition: opacity .1s; }
.ubars:hover path { opacity: .5; }
.ubars path:hover { opacity: 1; }

/* --- hesap: iki adımlı doğrulama ------------------------------------------ */

.totp-setup { display: grid; grid-template-columns: 232px 1fr; gap: 24px; align-items: start; }
@media (max-width: 720px) { .totp-setup { grid-template-columns: 1fr; } }

/* QR beyaz zeminde kalmalı: koyu temada ters çevrilirse okuyucular okuyamıyor. */
.totp-qr { background: #fff; padding: 16px; border-radius: var(--radius);
           border: 1px solid var(--border); line-height: 0; }
.totp-qr img { display: block; width: 200px; height: 200px; }

.totp-secret { display: inline-block; margin-top: 8px; padding: 8px 12px;
               background: var(--surface-2); border: 1px solid var(--border);
               border-radius: 8px; font-size: 15px; letter-spacing: .12em;
               user-select: all; }

/* Kod alanı: rakamlar arasında nefes payı, yanlış okumayı azaltıyor. */
.code-input { letter-spacing: .35em; font-size: 20px; text-align: center; }

.recovery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
                 gap: 10px; margin: 16px 0; }
.recovery-code { display: block; padding: 10px 12px; text-align: center;
                 background: var(--surface-2); border: 1px solid var(--border);
                 border-radius: 8px; font-size: 15px; letter-spacing: .08em;
                 user-select: all; }

hr.sep { border: 0; border-top: 1px solid var(--border); margin: 22px 0; }

/* --- sayfa hızı ----------------------------------------------------------- */

.sub-head { margin: 0 0 4px; font-size: 13px; font-weight: 640; letter-spacing: .01em;
            text-transform: uppercase; color: var(--text-dim); }

.ring-row { display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-start; }

.ring-stat { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 96px; }
.ring-stat svg { display: block; }
.ring-stat .track { fill: none; stroke: var(--border); stroke-width: 6; }
/* Halka kalınlığı ve uç yuvarlaması sabit; durumu renk DEĞİL, ortadaki sayı
   ve altındaki etiket taşıyor. Renk yalnızca ikinci bir ipucu. */
.ring-stat .value { fill: none; stroke-width: 6; stroke-linecap: round;
                    stroke: var(--text-dim); }
.ring-good    .value { stroke: var(--status-good); }
.ring-average .value { stroke: var(--status-warning); }
.ring-poor    .value { stroke: var(--status-critical); }
.ring-unknown .value { stroke: var(--border); }
.ring-num { font-size: 20px; font-weight: 640; fill: var(--text);
            font-variant-numeric: tabular-nums; }
.ring-label { font-size: 12px; color: var(--text-dim); text-align: center; line-height: 1.3; }

.vital-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }

.vital { border: 1px solid var(--border); border-radius: var(--radius);
         padding: 12px 14px; background: var(--surface-2); }
.vital-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.vital-label { font-weight: 640; font-size: 13px; }
/* Ölçüt adı Google'ın tanım belgesine gider ama kartın en sesli öğesi
   olmamalı: kartta okunacak asıl şey değer ve derecelendirme. Bu yüzden
   bağlantı mavisi değil metin rengi, altında ipucu veren noktalı çizgi. */
.vital-label a { color: inherit; border-bottom: 1px dotted var(--text-dim); }
.vital-label a:hover { color: var(--accent); border-bottom-color: var(--accent); text-decoration: none; }
.vital-value { font-size: 16px; font-variant-numeric: tabular-nums; }
.vital-bar { height: 4px; border-radius: 2px; background: var(--border);
             margin: 9px 0 7px; overflow: hidden; }
.vital-bar > span { display: block; height: 100%; border-radius: 2px;
                    background: var(--text-dim); }
.vital-good    .vital-bar > span { background: var(--status-good); }
.vital-average .vital-bar > span { background: var(--status-warning); }
.vital-poor    .vital-bar > span { background: var(--status-critical); }
.vital-foot { display: flex; justify-content: space-between; gap: 8px;
              font-size: 12px; line-height: 1.4; }
/* Durumun yazısı her zaman görünür: renk tek başına anlam taşımıyor. */
.vital-rating { font-weight: 600; }
.vital-good    .vital-rating { color: var(--status-good); }
.vital-average .vital-rating { color: var(--status-warning); }
.vital-poor    .vital-rating { color: var(--status-critical); }
.vital-unknown .vital-rating { color: var(--text-dim); }

.trend-box { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
             margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border);
             font-size: 12.5px; }

/* Tablo içindeki eylem düğmeleri satırı şişirmesin. */
.btn-sm { padding: 5px 10px; font-size: 12.5px; }

/* --- genel bakış: site başına kritik sorun kırılımı ----------------------- */
.issue-types { list-style: none; padding: 0; margin: 0 0 14px; }
.issue-types li { display: flex; justify-content: space-between; align-items: baseline;
                  gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--border);
                  font-size: 13.5px; }
.issue-types li:last-child { border-bottom: 0; }
.issue-types .mono { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12.5px; }
.issue-body { padding: 4px 18px 16px 18px; }

/* --- site alt sayfa şeridi ------------------------------------------------ */
.site-tabs { display: flex; gap: 2px; flex-wrap: wrap; margin: 0 0 20px;
             border-bottom: 1px solid var(--border); }
.site-tabs a { padding: 9px 14px; font-size: 13.5px; color: var(--text-dim);
               text-decoration: none; border-bottom: 2px solid transparent;
               margin-bottom: -1px; white-space: nowrap; }
.site-tabs a:hover { color: var(--text); text-decoration: none; }
/* Aktif sekme yalnız renkle değil, altındaki çizgi ve kalın yazıyla da belli. */
.site-tabs a.active { color: var(--text); font-weight: 620;
                      border-bottom-color: var(--accent); }

/* --- anahtar kelime konum seyri ------------------------------------------ */
/* Y ekseni ters çizilir: yukarı giden çizgi sıralamada yükselme demek. */
.pos-spark { display: block; overflow: visible; }
.pos-spark .line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pos-up   .line { stroke: var(--status-good); }
.pos-down .line { stroke: var(--status-critical); }
.pos-flat .line { stroke: var(--text-dim); }

/* --- sıralama takibi kotası ---------------------------------------------- */
.quota-box { border: 1px solid var(--border); border-radius: var(--radius);
             padding: 12px 14px; background: var(--surface-2); margin-top: 14px; }
.quota-head { display: flex; justify-content: space-between; align-items: baseline;
              gap: 10px; font-size: 13.5px; }
.quota-bar { height: 6px; border-radius: 3px; background: var(--border);
             margin: 9px 0 7px; overflow: hidden; }
.quota-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.quota-foot { font-size: 12.5px; }

/* Gerçek sıra: bulunduysa kalın, bulunamadıysa soluk. Renk tek başına
   anlam taşımıyor — "ilk 100'de yok" yazısı da duruyor. */
.serp-pos { font-variant-numeric: tabular-nums; font-weight: 640; }
.serp-none { color: var(--text-dim); font-weight: 400; font-size: 12.5px; }
.kw-source { font-size: 11px; padding: 1px 6px; border-radius: 999px;
             border: 1px solid var(--border); color: var(--text-dim); white-space: nowrap; }

/* --- gizli ayar alanları --------------------------------------------------- */
.secret-row { display: flex; gap: 8px; align-items: stretch; }
.secret-row .input { flex: 1; min-width: 0; }
/* Maskeli metinde noktalar arasında nefes payı: kaç karakter olduğu okunmasın
   ama alan boş mu dolu mu bir bakışta belli olsun. */
.secret-row input[type="password"] { letter-spacing: .12em; }
.secret-toggle { flex: 0 0 auto; white-space: nowrap; }

/* --- rakip analizi --------------------------------------------------------- */

/* Başlatma kartı: sol tarafta ne olacağının açıklaması, sağda düğme.
   Kotanın kaç sorgu harcanacağı düğmeye basılmadan ÖNCE okunmalı. */
.rakip-baslat { display: flex; flex-wrap: wrap; gap: 18px 24px;
                align-items: center; justify-content: space-between; }
.rakip-baslat h2 { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
.rakip-baslat p { margin: 0; max-width: 62ch; }
.rakip-baslat form { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.onay { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-dim); }

/* Özet sayılar. Sayı büyük, etiketi altında — renk yok, çünkü buradaki
   dört değerin hiçbiri "iyi" ya da "kötü" değil, hepsi sayım. */
.rakip-ozet { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
              gap: 1px; background: var(--border); border: 1px solid var(--border);
              border-radius: var(--radius); overflow: hidden; margin: 22px 0 14px; }
.rakip-ozet > div { background: var(--surface); padding: 16px 18px;
                    display: flex; flex-direction: column; gap: 3px; }
.rakip-ozet .n { font-size: 26px; font-weight: 650; font-variant-numeric: tabular-nums;
                 line-height: 1.1; }
.rakip-ozet .l { font-size: 12.5px; color: var(--text-dim); }

.bolum-basligi { font-size: 17px; font-weight: 600; margin: 30px 0 12px; }

/* Bulgu kartları. Sol kenardaki şerit önem derecesini taşıyor ama tek
   başına değil: yanındaki rozette de yazıyor (renk hiçbir zaman tek
   başına anlam taşımaz). */
.bulgu-listesi { display: flex; flex-direction: column; gap: 10px; }
.bulgu { background: var(--surface); border: 1px solid var(--border);
         border-left-width: 3px; border-radius: var(--radius); padding: 15px 18px;
         box-shadow: var(--shadow); }
.bulgu h3 { margin: 0; font-size: 15px; font-weight: 600; }
/* Birleşik bulgularda ayrıntı kelime kelime satırlara bölünüyor; satır
   sonları korunmazsa hepsi tek paragrafa yapışıyor ve okunmuyor. */
.bulgu p { margin: 9px 0 0; color: var(--text-dim); font-size: 13.5px;
           line-height: 1.65; max-width: 78ch; white-space: pre-line; }
.bulgu-bas { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.bulgu-olcum { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 9px;
               font-size: 13px; font-variant-numeric: tabular-nums; }
.bulgu-olcum b { color: var(--text-dim); font-weight: 500; }

.rozet { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
         padding: 2px 7px; border-radius: 999px; white-space: nowrap; flex: 0 0 auto; }

.bulgu.sev-op   { border-left-color: var(--accent); }
.bulgu.sev-gap  { border-left-color: var(--warn); }
.bulgu.sev-ok   { border-left-color: var(--ok); }
.bulgu.sev-info { border-left-color: var(--border); }
.rozet.sev-op   { background: var(--accent-dim); color: var(--accent); }
.rozet.sev-gap  { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.rozet.sev-ok   { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.rozet.sev-info { background: var(--surface-2); color: var(--text-dim); }

/* Karşılaştırma tablosunda kendi satırın: kalın çerçeve değil, hafif bir
   zemin. Tablonun içinde kaybolmasın ama diğerlerini de bastırmasın. */
.benim-satirim > td { background: var(--accent-dim); }

/* İlerleme çubuğu. Yüzde tek başına yetmiyor, üstünde hangi aşamada
   olduğu da yazıyor — "sessiz başarısızlık en kötüsü". */
.ilerleme-cubugu { height: 8px; border-radius: 4px; background: var(--border);
                   overflow: hidden; margin-top: 10px; }
.ilerleme-cubugu > span { display: block; height: 100%; border-radius: 4px;
                          background: var(--accent); transition: width .4s ease; }
@media (prefers-reduced-motion: reduce) { .ilerleme-cubugu > span { transition: none; } }

/* Rakip listesindeki iki düğme dar ekranda alt alta düşüp satırı üç kat
   uzatıyordu; yan yana kalsınlar. */
.rakip-islem form { display: flex; gap: 12px; justify-content: flex-end; }
@media (max-width: 900px) {
  .rakip-islem { justify-content: flex-end; }
  .rakip-islem form { justify-content: flex-start; }
}

/* Bildirim türü listesi: iki sütun, dar ekranda tek. */
.bildirim-listesi { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
                    gap: 8px 22px; margin-top: 4px; }
.bildirim-listesi .onay { font-size: 13.5px; color: var(--text); }

/* --- sistem denetimi ------------------------------------------------------- */
/* Ekranın en üstünde duruyor ama alarm gibi kırmızı değil: bu panelin KENDİ
   sağlığı, sitelerin değil. Karışmasın diye ayrı bir kimliği var. */
.denetim-karti { margin-bottom: 20px; border-left: 3px solid var(--warn); }
.denetim-karti.denetim-kritik { border-left-color: var(--danger); }
.denetim-karti h2 { margin: 0 0 4px; font-size: 17px; font-weight: 620; }
.denetim-karti > .card-body > p.muted { margin: 0 0 14px; font-size: 13.5px; max-width: 72ch; }

.denetim-listesi { list-style: none; margin: 0; padding: 0;
                   display: flex; flex-direction: column; gap: 12px; }
.denetim-listesi li { display: flex; gap: 12px; align-items: flex-start; }
.denetim-listesi strong { font-size: 14.5px; font-weight: 600; }
.denetim-listesi p { margin: 3px 0 0; font-size: 13.5px; color: var(--text-dim);
                     line-height: 1.6; max-width: 78ch; }
.denetim-cozum { color: var(--text-dim); }
.denetim-cozum b { color: var(--text); font-weight: 560; }

.denetim-etiket { flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .04em;
                  text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
                  white-space: nowrap; margin-top: 1px; }
.denetim-critical .denetim-etiket { background: color-mix(in srgb, var(--danger) 15%, transparent);
                                    color: var(--danger); }
.denetim-warning  .denetim-etiket { background: color-mix(in srgb, var(--warn) 16%, transparent);
                                    color: var(--warn); }
.denetim-info     .denetim-etiket { background: var(--surface-2); color: var(--text-dim); }

@media (max-width: 600px) {
  .denetim-listesi li { flex-direction: column; gap: 5px; }
}

/* --- Fırsat listesi ------------------------------------------------------
   Kazanç rozeti başlığın sağına yaslanıyor: liste değere göre sıralı ve göz
   sayıyı tararken başlık metnini okumak zorunda kalmamalı. Durum yalnız
   renkle anlatılmıyor — tür rozeti her satırda metin olarak da duruyor. */
.kazanc { margin-left: auto; font-size: 13px; font-weight: 620;
          color: var(--ok); white-space: nowrap; flex: 0 0 auto;
          font-variant-numeric: tabular-nums; }

/* Alt şerit: kaynak bağlantısı, bağlam ve gizleme aynı hizada. */
.firsat-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
              margin-top: 12px; padding-top: 10px;
              border-top: 1px solid var(--border); font-size: 12.5px;
              color: var(--text-dim); }
.firsat-alt form { margin: 0 0 0 auto; }
.firsat-alt .btn-link { padding: 0; font-size: 12.5px; }
.firsat-dagilim { margin: 10px 0 18px; font-size: 12.5px; color: var(--text-dim); }

/* --- Doğrulama kutusu ----------------------------------------------------
   Rapor ekranında ayrı duruyor: "sonuca güvenme, kendin bak" bir kenar notu
   değil, panelin verdiği sözün parçası. */
.dogrulama-kutusu { margin: 22px 0; }
.dogrulama-butonlar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }