/* 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; }
/* İm EK KADAK logosunun baykuş başı (`assets/marka/gozcu-im.png`). Logonun
   tamamı dikey; 26 px yükseklikte "EK KADAK" yazısı okunmuyor, baş okunuyor.
   Dosya `<img>` ile geliyor, CSS arka planıyla değil: `asset()` sürüm
   damgası yalnız şablonda basılabiliyor, damgasız resim eskide kalır. */
.marka-im { width: 31px; height: 26px; flex: 0 0 auto; object-fit: contain; display: block; }
.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ı --- */
/* Menü beş bölüme ve on dört satıra çıktı; aralıklar buna göre sıkıldı.
   Ölçüldü: 860 px yükseklikte tamamı kaydırmasız sığıyor, altında şerit
   kendi içinde kayıyor (`overflow-y: auto`) — hiçbir girdi erişilemez
   olmuyor. Dokunma hedefi 32 px'in altına indirilmedi. */
.yanmenu-nav { flex: 1; overflow-y: auto; padding: 10px 10px; }
.bolum-ad {
  margin: 11px 0 4px; 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: 8px 11px; margin-bottom: 1px; 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); }
.alert-warning { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent);
                 background: color-mix(in srgb, var(--warn) 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; flex-direction: column; align-items: center; gap: 12px;
}
.auth-logo { display: block; height: 120px; width: auto; }
.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); }
/* Kurulum bulgularında "kritik": uyarıdan ayrı bir renk gerekiyordu, mavi
   vurgu rengi burada yanlış okunuyordu (kritik değil "bilgi" gibi). */
.rozet.sev-crit { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }

/* 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); }

/* --- İstek üzerine yapay zekâ açıklaması ----------------------------------
   Fırsatın altında katlanır duruyor: kart hâlâ ölçümü anlatıyor, bu metin
   onun yorumu. Tanım listesi kalıbı başlık/açıklama çiftini tabloya
   çevirmeden okunur kılıyor. */
.ai-liste { margin: 0; }
.ai-liste dt { font-weight: 600; margin-top: 10px; }
.ai-liste dt:first-child { margin-top: 0; }
.ai-liste dd { margin: 3px 0 0; color: var(--text-dim); }

/* Yalnız ekran okuyucu için. Görsel etiketi olmayan bir form alanının
   adı yine de okunabilmeli. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
           overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- Dizin kapsama hunisi -------------------------------------------------
   Aşama sırası BİLGİDİR: sayfa aramada görünmek için dördünü sırayla
   geçmek zorunda ve numara bu zorunluluğu anlatıyor. Ölçülemeyen aşama
   tire ile gösteriliyor; sıfırla karıştırılmamalı. */
/* Aşamalar dikey bir hat üzerinde: numaralar bir çizgiyle bağlı, çünkü
   sıra BİLGİDİR (sayfa dördünü sırayla geçmek zorunda). Çubuk boyu en
   büyük ölçülen aşamaya göre; ölçülemeyen aşama çubuk çizmez ve sayısı
   yerine "ölçülemedi" yazar — sıfırla karışmasın. Düşüş rozeti renkle
   birlikte eksi işaretiyle de okunuyor. */
.huni2 { list-style: none; margin: 4px 0 18px; padding: 0; }
.huni2-asama { position: relative; display: grid; grid-template-columns: 30px 1fr;
               gap: 0 14px; padding: 0 0 16px; }
.huni2-asama:last-child { padding-bottom: 0; }
.huni2-asama:not(:last-child)::before { content: ""; position: absolute; left: 14px; top: 30px;
               bottom: 2px; width: 2px; background: var(--border); }
.huni2-no { width: 30px; height: 30px; border-radius: 50%; display: inline-flex;
            align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
            background: var(--accent-dim); color: var(--accent); position: relative; z-index: 1; }
.huni2-asama.huni2-yok .huni2-no { background: var(--surface-2); color: var(--text-dim);
            border: 1px dashed var(--border); }
.huni2-govde { min-width: 0; }
.huni2-satir { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-height: 30px; }
.huni2-ad { font-weight: 600; font-size: 14.5px; }
.huni2-sayi { margin-left: auto; font-size: 20px; font-weight: 680; letter-spacing: -.01em;
              font-variant-numeric: tabular-nums; }
.huni2-asama.huni2-yok .huni2-sayi { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.huni2-dusus { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
               color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent);
               font-variant-numeric: tabular-nums; }
.huni2-cubuk { height: 8px; border-radius: 999px; background: var(--surface-2);
               border: 1px solid var(--border); overflow: hidden; margin-top: 6px; }
.huni2-cubuk span { display: block; height: 100%; border-radius: 999px;
                    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #fff)); }
.huni2-asama.huni2-yok .huni2-cubuk { border-style: dashed; background: transparent; }
.huni2-not { margin: 6px 0 0; font-size: 12.5px; color: var(--text-dim); line-height: 1.55; max-width: 80ch; }

/* Kopuşlar: başlık kartın kendi "h3" şeridini (büyük harf, gri zemin)
   devralmasın diye h3 DEĞİL — eski tasarım tam olarak bu yüzden kutu
   içinde kutu görünüyordu. */
.huni2-kopus-baslik { margin: 22px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .05em;
                      text-transform: uppercase; color: var(--text-dim); }
.kopus { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px;
         background: var(--surface); margin-top: 10px; }
.kopus-bas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kopus-ad { font-weight: 620; font-size: 14.5px; }
.kopus-sayi { margin-left: auto; font-size: 12.5px; font-weight: 700; padding: 3px 10px;
              border-radius: 999px; color: var(--warn);
              background: color-mix(in srgb, var(--warn) 14%, transparent);
              font-variant-numeric: tabular-nums; white-space: nowrap; }
.kopus-ne { margin: 6px 0 10px; font-size: 13px; color: var(--text-dim); line-height: 1.6; max-width: 80ch; }
.kopus-adresler { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.kopus-adresler li { min-width: 0; max-width: 100%; }
.kopus-adresler a { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
                    white-space: nowrap; font-size: 12.5px; padding: 4px 10px; border-radius: 7px;
                    background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
                    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.kopus-adresler a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.kopus-tumu { margin-top: 8px; }
.kopus-tumu > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent);
                        list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.kopus-tumu > summary::-webkit-details-marker { display: none; }
.kopus-tumu > summary::after { content: "▾"; font-size: 11px; transition: transform .15s; }
.kopus-tumu[open] > summary::after { transform: rotate(180deg); }
.kopus-tumu[open] > summary { margin-bottom: 8px; }
.kopus-tumu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .kopus-tumu > summary::after { transition: none; } }

/* Kırık linkin geçtiği sayfa — sorun listesinde hedefin altında. */
.link-kaynak { margin-top: 4px; font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 4px 8px;
               align-items: baseline; }
.link-kaynak-etiket { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
                      color: var(--text-dim); }
.link-kaynak-tumu { color: var(--text-dim); }

@media (max-width: 560px) {
  .huni2-sayi { font-size: 17px; }
  .kopus-sayi { margin-left: 0; }
}

/* --- Haftalık plan --------------------------------------------------------
   Sıra numarası bilgidir, süs değil: liste değer sırasına göre dizili ve
   "kaçıncı iş" sorusunun cevabı ekranda okunabilmeli. */
.plan-sira { display: inline-flex; align-items: center; justify-content: center;
             min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px;
             background: var(--surface-2); border: 1px solid var(--border);
             font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
             color: var(--text-dim); }

/* --- Eski (arşivlenmiş) fırsatlar ----------------------------------------
   Anlık bir fırsat bir sonraki turda üretilmiyor ama olmamış sayılmaz.
   Güncel listeyi kirletmesin diye katlanır, kaybolmasın diye silinmez.
   Kartlar soluk: bakılacak iş değil, geçmiş kaydı. Durum yalnız renkle
   değil "Eski fırsatlar" başlığıyla da anlatılıyor. */
.eski-firsatlar { margin-top: 26px; border-top: 1px solid var(--border); padding-top: 14px; }
.eski-firsatlar > summary { cursor: pointer; font-size: 13px; font-weight: 600;
                            color: var(--accent); list-style: none; padding: 6px 0; }
.eski-firsatlar > summary::-webkit-details-marker { display: none; }
.eski-firsatlar > summary::before { content: '+ '; }
.eski-firsatlar[open] > summary::before { content: '− '; }
.eski-firsatlar > p { margin: 4px 0 14px; }
.bulgu-eski { opacity: .72; }
.bulgu-eski h3 { font-weight: 500; }

/* --- Karar ve sonuç hafızası ---------------------------------------------
   Karar vermek fırsatın bir parçası, ayrı bir ekran değil: kullanıcı öneriyi
   okuduğu yerde karar veriyor. Ek alanlar (ne değişti, neden, ne zaman)
   katlanır duruyor, çünkü en sık verilen karar "yoksay" ve o tek tık. */
.karar-ver { margin-top: 12px; }
.karar-ver > summary { cursor: pointer; font-size: 12.5px; color: var(--accent);
                       list-style: none; padding: 4px 0; }
.karar-ver > summary::-webkit-details-marker { display: none; }
.karar-ver > summary::before { content: '+ '; font-weight: 600; }
.karar-ver[open] > summary::before { content: '− '; }
.karar-form { margin-top: 10px; padding: 14px; border: 1px solid var(--border);
              border-radius: 10px; background: var(--surface-2); }
.karar-form .field { margin-bottom: 12px; }
.karar-form textarea.input { resize: vertical; }
/* İki tarih yan yana; dar ekranda `display` değiştiriliyor, sütun sayısı
   değil — satır içi ızgara medya sorgusunu yeniyor (bkz. CLAUDE.md §6). */
.karar-tarihler { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.karar-dugmeler { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

.karar-ozeti { margin-top: 12px; padding-top: 10px;
               border-top: 1px solid var(--border); font-size: 12.5px; }
.karar-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.karar-alan, .karar-not, .karar-olcum, .karar-kanit { margin: 8px 0 0; }
.karar-not { color: var(--text); }
.karar-olcum { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.karar-kanit { color: var(--text-dim); }

@media (max-width: 900px) {
  .karar-tarihler { display: block; }
  .karar-tarihler .field { margin-bottom: 12px; }
}

/* --- 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; }

/* --- İçerik farkı -----------------------------------------------------
   "Ana sayfa içeriği değişti" alarmının cevabı. Eklenen ve kaldırılan
   ayrı renkte; renk TEK başına anlatmıyor, + ve − işareti de var
   (bkz. CLAUDE.md §6 "durum yalnız renkle anlatılmaz"). */
.icerik-fark { margin: 0; padding-left: 0; list-style: none; font-size: 13.5px; }
.icerik-fark li { padding: 6px 10px 6px 24px; position: relative;
                  border-radius: 6px; margin-bottom: 4px; overflow-wrap: anywhere; }
.icerik-fark li::before { position: absolute; left: 8px; font-weight: 700; }
.icerik-eklendi li { background: color-mix(in srgb, var(--status-good) 12%, transparent); }
.icerik-eklendi li::before { content: '+'; color: var(--status-good); }
.icerik-silindi li { background: color-mix(in srgb, var(--status-critical) 12%, transparent); }
.icerik-silindi li::before { content: '−'; color: var(--status-critical); }

/* =========================================================================
   Tek seferlik analiz
   ========================================================================= */

.page-head-islem { display: flex; gap: 8px; flex-wrap: wrap; }

/* "Ölçülemedi" bir boşluk değil, bir BULGU: kutu içinde ve gerekçesiyle
   duruyor. Boş bırakılsa kullanıcı "yok" diye okur ve müşteriye yanlış
   şey söyler. Renk tek başına anlam taşımıyor; metin zaten yazıyor. */
.olculemedi { margin: 0; font-size: 13.5px; color: var(--text-dim);
              background: var(--surface-2); border: 1px dashed var(--border);
              border-radius: var(--radius); padding: 12px 14px; }

/* Tür seçimi: radyo düğmesi üstte kalsın, açıklama satırları yanına aksın. */
.analiz-tur { align-items: flex-start; margin-bottom: 10px; line-height: 1.55;
              color: var(--text); font-size: 13.5px; }
.analiz-tur input { margin-top: 3px; flex: none; }
.analiz-tur .muted, .analiz-tur .uyari-metin { display: block; font-size: 12.5px;
                                               margin-top: 2px; }

.uyari-metin { color: var(--warn); }

/* Rakip tablosundaki rozetler alt alta binmesin. */
.analiz-etiketler { display: flex; flex-wrap: wrap; gap: 5px; }

/* Yazdırma: menü ve düğmeler kâğıda gitmez. Sıfır maliyet kuralı gereği PDF
   üretici kütüphane yok; tarayıcının kendi "PDF olarak kaydet"i kullanılıyor. */
@media print {
  .yanmenu, .ust-serit, .page-head-islem { display: none !important; }
  .kabuk, .container { display: block; max-width: none; padding: 0; }
  .card { break-inside: avoid; box-shadow: none; }
}

/* --- site sayfalarının ortak başı ---------------------------------------
   Her site sekmesinde aynı: kimlik, anlık durum, sekmeler. Eskiden her sekme
   kendi başlığını çiziyordu; iki sekmede site adı hiç yazmıyordu. */
.site-bas { margin-bottom: 20px; }
.site-yol { display: flex; gap: 6px; align-items: center; font-size: 13px;
            color: var(--text-dim); margin-bottom: 6px; }
.site-yol a { color: var(--text-dim); }
.site-yol a:hover { color: var(--text); }
.site-bas-satir { display: flex; justify-content: space-between; align-items: flex-start;
                  gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.site-kimlik { min-width: 0; }
.site-kimlik h1 { margin: 0; font-size: 22px; letter-spacing: -.02em; font-weight: 660;
                  overflow-wrap: anywhere; }
.site-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
            margin-top: 6px; font-size: 13.5px; }
.site-alt > a.mono { color: var(--text-dim); }
.site-alt > a.mono:hover { color: var(--accent); }
.site-bas .site-tabs { margin-bottom: 0; }

/* Sekme rozeti: sayı ya da kısa kelime. Renk tek başına anlam taşımıyor —
   rozette her zaman metin var, üzerine gelince açıklaması çıkıyor. */
.sekme-rozet { display: inline-block; margin-left: 6px; padding: 0 7px; min-width: 20px;
               border-radius: 999px; font-size: 11.5px; line-height: 18px; font-weight: 640;
               text-align: center; vertical-align: 1px;
               background: var(--surface-2); color: var(--text-dim);
               border: 1px solid var(--border); }
.sekme-kritik { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent);
                background: color-mix(in srgb, var(--danger) 10%, transparent); }
.sekme-uyari  { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent);
                background: color-mix(in srgb, var(--warn) 10%, transparent); }
.sekme-bilgi  { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent);
                background: color-mix(in srgb, var(--accent) 9%, transparent); }
.sekme-iyi    { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent);
                background: color-mix(in srgb, var(--ok) 9%, transparent); }

/* Sekmenin kendi başlığı artık bir ALT başlık: site adı ortak başta. */
.page-head.sekme-bas { margin-bottom: 18px; }
.page-head.sekme-bas h2 { margin: 0; font-size: 17px; font-weight: 640; letter-spacing: -.01em; }

/* --- Genel durum: özet kutuları -----------------------------------------
   Sekiz kutu, her biri bir sekmeye kapı. Durum sol kenar çizgisi + nokta +
   yazıyla veriliyor; yalnız renge dayanmıyor. */
.ozet-kutular { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
                margin-bottom: 20px; }
.ozet-kutu { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px;
             background: var(--surface); border: 1px solid var(--border);
             border-left: 3px solid var(--border); border-radius: var(--radius);
             box-shadow: var(--shadow); color: var(--text); text-decoration: none;
             transition: border-color .12s ease, transform .12s ease; min-width: 0; }
.ozet-kutu:hover { text-decoration: none; border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.ozet-kutu:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ozet-kutu.ton-iyi    { border-left-color: var(--status-good); }
.ozet-kutu.ton-uyari  { border-left-color: var(--status-warning); }
.ozet-kutu.ton-kritik { border-left-color: var(--status-critical); }
.ozet-etiket { font-size: 11.5px; font-weight: 640; letter-spacing: .05em; text-transform: uppercase;
               color: var(--text-dim); }
.ozet-deger { font-size: 22px; font-weight: 660; letter-spacing: -.02em;
              font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden;
              text-overflow: ellipsis; }
.ozet-alt { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-dim);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ozet-alt .dot { flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .ozet-kutu { transition: none; } }

/* --- Genel durum: iki sütun ---------------------------------------------
   Solda zamanla olan şeyler, sağda değişmeyen altyapı bilgisi. */
.site-izgara { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 20px;
               align-items: start; }
.site-ana, .site-yan { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.calisma-oranlari { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 12px;
                    font-size: 13.5px; font-variant-numeric: tabular-nums; }
.calisma-oranlari strong { margin-left: 4px; }

/* Katlanır kart: başlığı tıklanınca açılıyor. */
details.katlanir > summary { list-style: none; cursor: pointer; }
details.katlanir > summary::-webkit-details-marker { display: none; }
details.katlanir > summary h3 { display: flex; align-items: center; gap: 6px; }
details.katlanir > summary h3::before { content: "▸"; font-size: 11px; color: var(--text-dim);
                                        transition: transform .12s ease; }
details.katlanir[open] > summary h3::before { transform: rotate(90deg); }
details.katlanir > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

@media (max-width: 1180px) {
  .ozet-kutular { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-izgara { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .ozet-kutular { gap: 8px; }
  .ozet-kutu { padding: 12px; }
  .ozet-deger { font-size: 19px; }
}
/* Yanıt süresi (40 çubuk ≈ 400 px) ve 90 günlük çalışma grafiği sabit
   genişlikle çiziliyor; 390 px'lik telefonda sayfayı yana taşırıyordu
   (ölçüldü: 435 px). İkisinin de viewBox'ı var, kutuya sığacak kadar
   küçülmeleri yeterli. */
.site-ana svg.spark, .site-ana svg.ubars { max-width: 100%; height: auto; }

/* Görsel olarak gizli ama ekran okuyucuya açık metin (durum etiketi gibi). */
.gorunmez { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
            overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- üst site sekmeleri -------------------------------------------------
   Tarayıcı sekmesi gibi: etkin sekme sayfanın zeminiyle birleşiyor, adlar
   daralınca kısalıyor. Şerit masaüstünde sayfa kayarken üstte kalıyor —
   amacı her an siteler arasında geçmek. */
.sekme-seridi { position: sticky; top: 0; z-index: 15;
                display: flex; align-items: flex-end; gap: 6px;
                padding: 8px 24px 0; background: var(--surface-2);
                border-bottom: 1px solid var(--border); }
.sekme-liste { display: flex; align-items: flex-end; gap: 4px; min-width: 0; flex: 0 1 auto;
               overflow-x: auto; scrollbar-width: thin; }
/* Sekme içeriği kadar geniş, en çok 220 px; sabit tabanla daraltılınca yer
   varken bile adlar kırpılıyordu ("ornek-iki.c…"). Sığmazsa şerit kayıyor. */
.sekme { display: flex; align-items: center; flex: 0 0 auto; min-width: 0; max-width: 220px;
         height: 36px; padding: 0 4px 0 12px; margin-bottom: -1px;
         border: 1px solid transparent; border-bottom: 0; border-radius: 9px 9px 0 0;
         color: var(--text-dim); font-size: 13.5px; }
.sekme:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--text); }
.sekme.aktif { background: var(--bg); border-color: var(--border); color: var(--text); font-weight: 600; }
.sekme.gecici { border-style: dashed; border-bottom: 0; }
.sekme-bag { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1;
             color: inherit; text-decoration: none; height: 100%; }
.sekme-bag:hover { text-decoration: none; }
.sekme-bag:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
.sekme-bag .dot { flex: 0 0 auto; }
.sekme-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sekme form { margin: 0; display: flex; }
.sekme-kapat { width: 22px; height: 22px; margin-left: 2px; padding: 0; border: 0; border-radius: 6px;
               background: transparent; color: var(--text-dim); font-size: 16px; line-height: 1;
               cursor: pointer; opacity: .55; }
.sekme:hover .sekme-kapat, .sekme.aktif .sekme-kapat, .sekme-kapat:focus-visible { opacity: 1; }
.sekme-kapat:hover { background: var(--surface-2); color: var(--text); }
.sekme-kapat:focus-visible, .sekme-sabitle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sekme-sabitle { margin-left: 6px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 6px;
                 background: var(--surface); color: var(--accent); font-size: 12px; cursor: pointer; }

.sekme-ekle { position: relative; flex: 0 0 auto; margin-bottom: 5px; }
.sekme-ekle > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px;
                        height: 28px; min-width: 28px; padding: 0 8px; border-radius: 7px;
                        cursor: pointer; color: var(--text-dim); font-size: 19px; line-height: 1; }
.sekme-ekle > summary::-webkit-details-marker { display: none; }
.sekme-ekle > summary:hover, .sekme-ekle[open] > summary { background: var(--surface); color: var(--text); }
.sekme-ekle > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sekme-ekle-yazi { font-size: 13.5px; }
.sekme-arama { position: absolute; top: calc(100% + 6px); left: 0; width: 340px; max-width: calc(100vw - 32px);
               display: flex; flex-wrap: wrap; gap: 8px; padding: 12px;
               background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
               box-shadow: 0 8px 24px rgba(16,24,40,.14); z-index: 30; }
.sekme-arama .input { flex: 1 1 200px; min-width: 0; }
.sekme-arama .hint { flex-basis: 100%; margin: 0; }

@media (max-width: 900px) {
  /* Telefonda üstteki marka şeridi 54 px ve o da yapışık; sekmeler onun altında. */
  .sekme-seridi { top: 54px; padding: 6px 10px 0; }
  .sekme { max-width: 170px; }
  /* Kutu "+" düğmesine göre açılınca ekranın solundan taşıyordu (düğme
     ortada kalıyor). Telefonda şeridin kendisine göre, tam genişlikte. */
  .sekme-ekle { position: static; }
  .sekme-arama { left: 10px; right: 10px; width: auto; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .sekme, .sekme-kapat { transition: none; } }

/* ---- Site süzgeci: siteler arası ekranların başında ortak şerit ---- */
.suzgec { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
  margin: 0 0 16px; }
.suzgec-ac { flex: 1 1 320px; min-width: 0; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); }
.suzgec-ac > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline;
  gap: 8px; padding: 9px 14px; font-size: 13.5px; min-width: 0; }
.suzgec-ac > summary::-webkit-details-marker { display: none; }
.suzgec-ac > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px;
  border-radius: var(--radius); }
.suzgec-etiket { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-dim); }
.suzgec-adlar { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0; flex: 1 1 auto; }
.suzgec-degistir { margin-left: auto; color: var(--accent); font-size: 12.5px; white-space: nowrap; }
.suzgec-ac[open] .suzgec-degistir { visibility: hidden; }
.suzgec-panel { border-top: 1px solid var(--border); padding: 12px 14px; }
.suzgec-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px 14px; margin-bottom: 12px; }
.suzgec-kutu { display: flex; align-items: center; gap: 8px; font-size: 13.5px; min-width: 0; }
.suzgec-kutu span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suzgec-dugmeler { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.suzgec-not { font-size: 12px; }
.suzgec-kaldir { padding: 9px 4px; font-size: 13px; }
.suzgec-uyari { margin: -6px 0 16px; padding: 8px 14px; font-size: 13px; border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  background: color-mix(in srgb, var(--warn) 8%, transparent); }

/* ---- Hafta seçici ve karşılaştırma ---- */
.hafta-sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px 14px;
  align-items: end; margin: 0 0 16px; }
.hafta-sec .field { margin: 0; }
.hafta-kisayol { grid-column: 1 / -1; display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; }
@media (max-width: 640px) {
  .hafta-sec { grid-template-columns: minmax(0, 1fr); }
}
.gorunum-serit { margin-bottom: 16px; }
.seyir { display: flex; gap: 3px; flex-wrap: wrap; }
.seyir span { display: inline-block; min-width: 26px; padding: 1px 4px; border-radius: 4px; text-align: center;
  font-size: 11.5px; font-variant-numeric: tabular-nums; background: var(--surface-2); color: var(--text-dim); }
.seyir span.var { color: var(--text); }
.seyir span.uc { outline: 1px solid var(--accent); }
.kars-hucre { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kars-hucre .deger { font-variant-numeric: tabular-nums; font-weight: 600; }
.kars-hucre .once { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.kars-hucre .fark { font-size: 12px; font-variant-numeric: tabular-nums; }
.kars-hucre .not { font-size: 11.5px; color: var(--text-dim); }
table.kars th.olcut { white-space: nowrap; }
table.kars td.olcut-ad { min-width: 150px; }
table.kars td.olcut-ad .muted { display: block; font-size: 11.5px; font-weight: 400; }

/* --- Tarama kapsamı -------------------------------------------------------
   Kip seçimi büyük, dokunulabilir hedefler; seçili olan çerçeve VE kalın
   yazıyla belli (yalnız renkle değil). */
.kapsam-secim { border: 1px solid var(--border); border-radius: var(--radius);
                padding: 12px 16px 14px; margin: 16px 0 0; }
.kapsam-secim legend { padding: 0 6px; font-size: 13px; font-weight: 620; }
.kapsam-modlar { display: flex; flex-wrap: wrap; gap: 8px; }
.kapsam-mod { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px;
              border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
              font-size: 13.5px; background: var(--surface); }
.kapsam-mod:has(input:checked) { border-color: var(--accent); font-weight: 620;
              background: var(--accent-dim); }
.kapsam-mod input { accent-color: var(--accent); }
.kapsam-oneri { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.kapsam-oneri-satir { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
              padding: 10px 14px; border-radius: 8px; font-size: 13px;
              background: color-mix(in srgb, var(--warn) 9%, transparent);
              border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.kapsam-oneri-satir span { flex: 1 1 320px; }
.kapsam-serit { margin: 14px 0 0; font-size: 13px; color: var(--text-dim); }
.kapsam-serit-etiket { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
              padding: 2px 8px; border-radius: 999px; background: var(--accent-dim); color: var(--accent);
              margin-right: 6px; }
/* Üstteki yapışkan site sekmeleri kartın başını örtmesin. */
#tarama-ayarlari { scroll-margin-top: 120px; }

/* Mülk keşfinin durumu — düğme "kuyruğa alındı" dedikten sonra ekran susmasın. */
.kesif-durum { margin: 14px 0 0; font-size: 13.5px; display: flex; gap: 8px;
               align-items: baseline; flex-wrap: wrap; }