/* Network Tool — arayüz stili.
   Açık, mat bir "operasyon panosu": kağıt rengi zemin, beyaz kartlar, LED renkleriyle durum.
   Yazı: IBM Plex Sans (metin) + IBM Plex Mono (adres, sayı). */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url(/ui/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url(/ui/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url(/ui/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url(/ui/ibm-plex-sans-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url(/ui/ibm-plex-sans-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url(/ui/ibm-plex-sans-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url(/ui/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url(/ui/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url(/ui/ibm-plex-mono-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url(/ui/ibm-plex-mono-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* Tek hareket eğrisi: hızlı çıkar, yumuşak durur (material 'standard decelerate'). Her geçiş bunu kullanır ki sayfa tek elden çıkmış hissettirsin. */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  /* Yalnızca "bırakıldı, yerine oturdu" anı için. Bu tek eğri hafifçe aşar (~%10); başka hiçbir
     yerde kullanılmaz ki aşım, bırakma anının kendi dili olarak kalsın. */
  --ease-settle: cubic-bezier(.34, 1.56, .64, 1);
  /* Ekseni etrafında dönen bir yüzey için: duruştan kalkar, duruşa oturur. Belirme eğrisi (--ease-out)
     dönüşün başını sert yapardı; ekranda yer değiştiren şeye giriş-çıkış eğrisi gerekir. Yalnızca
     grafik ↔ tablo çevirmede kullanılır. */
  --ease-turn: cubic-bezier(.77, 0, .175, 1);
  /* --ease-out'un aynadaki hali (denetim noktaları ters çevrilmiş). Yalnızca girdiği yoldan geri
     çıkan şeyler için: gidiş yavaşlayarak duruyorsa dönüş hızlanarak çıkmalı, yoksa aynı yol iki
     farklı hareket gibi okunur. */
  --ease-in: cubic-bezier(.64, 0, .78, .39);
  --paper: #F1F3F6;
  --card: #FFFFFF;
  --card-2: #F7F9FB;
  --line: #DDE2E9;
  --line-2: #ECF0F4;
  --ink: #16202E;
  --ink-2: #56637A;
  --ink-3: #677587;
  --blue: #2563EB;
  --blue-ink: #1E40AF;
  --blue-soft: #EFF6FF;
  --blue-line: #BFDBFE;
  --ok: #10B981;   --ok-soft: #ECFDF5;
  --warn: #F59E0B; --warn-soft: #FEF3C7;
  --bad: #EF4444;  --bad-soft: #FEF2F2;
  --off: #9CA3AF;  --off-soft: #F3F4F6;
  --ok-ink: #047857; --warn-ink: #B45309; --warn-ink-2: #92400E; --bad-ink: #B91C1C;
  /* Etki analizi: kırmızı/sarı sorunun, mavi aramanın; etki bu üçünden ayrı bir çift alır (topology3d COLOR.impactUp/Down ile aynı). */
  --impact-up: #C026D3; --impact-down: #0891B2; --impact-down-ink: #0E7490; --impact-root: #16202E;
  /* Yol izleme: etki ve sorun renklerinden ayrı bir mor (topology3d COLOR.path ile aynı). */
  --path: #7C3AED;
  /* Harita geçmişinin karşılaştırması (topology3d COLOR.diffNew / diffGone ile aynı): yeni yeşil çerçeve, kaybolan gri hayalet. */
  --diff-new: #16A34A; --diff-gone: #94A3B8;
  --notice-line: #FDE68A; --notice-ink: #92400E; --error-line: #FECACA; --error-ink: #991B1B;
  --on-accent: #FFFFFF;
  /* 3B sahnenin zemini (topology3d COLOR.stage ile ayni deger) ve sahnenin ustunde yuzen HTML
     panellerin zemini. Bu ikisi tema degiskeni DEGILDI: koyu temada beyaz kalip uzerlerindeki
     acik yaziyi yutuyorlardi. Bir renk iki temada da dogru olamaz, o yuzden belirtec oldular. */
  --stage: #EEF2F6;
  --panel-glass: rgba(255, 255, 255, .94);
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", Consolas, "Courier New", monospace;
  --r: 6px;
  --r-lg: 10px;
  --shadow: 0 4px 6px -1px rgba(22, 32, 46, .08), 0 2px 4px -2px rgba(22, 32, 46, .04);
}

* { box-sizing: border-box; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 10000; padding: 8px 14px; border-radius: var(--r); background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow); font-weight: 600; }
.skip-link:focus { top: 12px; text-decoration: none; }
#content:focus { outline: none; }
html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: 15px; font-weight: 600; }
h3 { font-size: 12px; font-weight: 500; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; }
code { font-family: var(--mono); font-size: 12.5px; background: var(--card-2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------------------------------------------------------------- yerleşim */
.app { display: grid; grid-template-columns: 224px 1fr; min-height: 100vh; }
.sidebar { background: var(--card); border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; border-bottom: 1px solid var(--line-2); }
.brand svg { width: 28px; height: 28px; flex: none; }
/* Şirket logosu kendi oranını korur; gömülü işaretle aynı yüksekliği paylaşır, eni serbest. */
.brand img.brand-logo { height: 28px; max-width: 132px; width: auto; flex: none; object-fit: contain; }
/* Yazı biçimli (geniş) logo adın yerine geçer, o yüzden şeridin tamamını kullanabilir. */
.brand.wordmark img.brand-logo { height: 32px; max-width: 100%; }
.brand.wordmark > div { display: none; }
.brand-name { font-weight: 600; font-size: 15px; line-height: 1.2; overflow-wrap: anywhere; }
.brand-sub { font-size: 12px; color: var(--ink-3); }
.nav { flex: 1; overflow: auto; padding: 10px 10px 16px; }
.nav-group { margin-top: 12px; padding: 0 8px 4px; font-size: 11px; font-weight: 500; color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; color: var(--ink-2); font-weight: 500; position: relative; }
.nav a:hover { background: var(--card-2); color: var(--ink); text-decoration: none; }
.nav a.active { background: transparent; color: var(--blue-ink); font-weight: 600; }
.nav a.active::before { content: ''; position: absolute; inset: 0; background: var(--blue-soft); border-radius: 8px; z-index: -1; animation: active-nav 0.3s var(--ease-settle) both; }
.nav a.active::after { content: ''; position: absolute; left: 0; top: 25%; bottom: 25%; width: 4px; background: var(--blue); border-radius: 0 4px 4px 0; animation: active-nav-bar 0.4s var(--ease-settle) both; }
@keyframes active-nav { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes active-nav-bar { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); } }
.nav a svg { width: 17px; height: 17px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.nav-badge { margin-left: auto; min-width: 20px; text-align: center; background: var(--bad); color: #fff; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 10px; }
.sidebar-foot { border-top: 1px solid var(--line); padding: 12px 16px 14px; font-size: 12.5px; color: var(--ink-2); display: grid; gap: 6px; }
.foot-row { display: flex; justify-content: space-between; gap: 8px; }
.foot-row b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.foot-counts { display: inline-flex; gap: 12px; }
.foot-counts .st { gap: 5px; }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 28px; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.topbar-right { display: flex; gap: 18px; align-items: center; font-size: 13px; color: var(--ink-2); }
/* 1024px'lik bir dizüstünde sağ grup 13px taşıyor, "Çıkış" kırpılıyordu. Rol adı kullanıcı adının yanında ikinci satır; ilk giden o. */
@media (max-width: 1180px) { .topbar-right { gap: 12px; } #user-role { display: none; } }
.content { padding: 22px 28px 48px; display: grid; gap: 18px; align-content: start; }

.grid { display: grid; gap: 18px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.wide-left { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.span-2 { grid-column: span 2; }
@media (max-width: 1100px) { .grid.three, .grid.wide-left { grid-template-columns: repeat(2, minmax(0, 1fr)); } .span-2 { grid-column: auto; } }
@media (max-width: 800px) { .app { grid-template-columns: 1fr; } .sidebar { position: relative; height: auto; } .grid.two, .grid.three, .grid.wide-left { grid-template-columns: 1fr; } .content, .topbar { padding-left: 16px; padding-right: 16px; } }

/* ---------------------------------------------------------------- LED ve durum */
.led { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--off); flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.led.ok { background: var(--ok); } .led.warn { background: var(--warn); } .led.bad { background: var(--bad); } .led.off { background: var(--off); }
.led.big { width: 22px; height: 22px; }
.led.blink { animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .led.blink { animation: none; } }
.st { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-weight: 500; }
.st .led { width: 9px; height: 9px; }
.st.ok { color: var(--ok-ink); } .st.bad { color: var(--bad-ink); } .st.warn { color: var(--warn-ink); } .st.off { color: var(--ink-2); }

.tag { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--off-soft); color: var(--ink-2); }
.tag.sev-INFORMATION, .tag.sev-NOT_CLASSIFIED, .tag.kind-INFO { background: var(--blue-soft); color: var(--blue-ink); }
.tag.sev-WARNING, .tag.sev-LOW { background: var(--warn-soft); color: var(--warn-ink-2); }
.tag.sev-AVERAGE, .tag.sev-MEDIUM { background: #FCE8D2; color: #8A3E00; }
.tag.sev-HIGH, .tag.kind-PROBLEM { background: var(--bad-soft); color: var(--bad-ink); }
.tag.sev-DISASTER, .tag.sev-CRITICAL { background: var(--bad); color: #fff; }
/* Bastirilmis sorun: belirti, siddet degil. Gri rozet, soluk satir, sol kenarlik da gri. */
.tag.sev-SUPPRESSED { background: var(--off-soft); color: var(--ink-2); }
.tag.sev-MAINT { background: var(--blue-soft); color: var(--blue-ink); }
.qr-box { display: inline-block; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 8px; line-height: 0; }
.qr-box svg { display: block; }
.totp-secret { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 1px; word-break: break-all; user-select: all; }
.totp-setup { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
@media (max-width: 560px) { .totp-setup { grid-template-columns: 1fr; } }
.otp-setup { display: grid; justify-items: center; gap: 6px; text-align: center; }
.otp-setup[hidden] { display: none; }
.otp-setup p { margin: 4px 0 0; }
.alert-item.suppressed { opacity: .72; border-left-color: var(--off) !important; }
.alert-item.suppressed .msg { font-weight: 400; }
.alert-item.maintenance { opacity: .78; border-left-color: var(--blue) !important; }
.alert-item.maintenance .msg { font-weight: 400; }
.mw-hosts { max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r); padding: 6px 10px; display: grid; gap: 4px; margin-top: 6px; }
.tag.kind-RESOLVED { background: var(--ok-soft); color: var(--ok-ink); }
.tag.kind-CLOSED { background: var(--off-soft); color: var(--ink-2); }
.tag.proto { font-family: var(--mono); font-size: 11.5px; }
.syslog-sev-0, .syslog-sev-1, .syslog-sev-2 { color: var(--bad); font-weight: 600; }
.syslog-sev-3 { color: #8A3E00; font-weight: 500; }
.syslog-sev-4 { color: var(--warn-ink-2); }
.syslog-sev-5, .syslog-sev-6 { color: var(--ink-2); }
.syslog-sev-7 { color: var(--ink-3); }

/* ---------------------------------------------------------------- kartlar */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; min-width: 0; box-shadow: var(--shadow); }
.card.flush { padding: 0; overflow: hidden; }
.card.flush .card-head { padding: 14px 20px 0; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.card-head .hint { font-size: 12.5px; color: var(--ink-3); }
.card-head .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* sağlık şeridi */
.health { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: 24px; align-items: center; padding: 20px 24px; border-left: 4px solid var(--off); }
.health.ok { border-left-color: var(--ok); } .health.warn { border-left-color: var(--warn); } .health.bad { border-left-color: var(--bad); }
.health-main { display: flex; align-items: center; gap: 16px; }
.health-main h2 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.health-main p { color: var(--ink-2); font-size: 13.5px; margin-top: 2px; }
.ports-note { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-3); display: flex; gap: 14px; flex-wrap: wrap; }
.ports-note span { display: inline-flex; align-items: center; gap: 6px; }
.ports-note i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ports-note[hidden] { display: none; }
/* Cihaz kareleri: koyu kare, altta durum renginde çizgi (kullanıcının seçimi). Önceki iki deneme: dolgu
   renkleri (17 karenin 16'sı sarıydı, renk bir şey söylemiyordu) ve yeşil çerçeve + sarı sayı rozeti (duvar
   kalabalıktı). Renk yalnız çizgide, yazı her durumda aynı zeminde okunur. Kareler eskiden .port sınıfını
   taşıyıp switch ön panelinin kurallarına eziliyordu; kendi sınıfları var. */
.dev-tiles { display: flex; flex-wrap: wrap; gap: 6px; align-content: center; }
.dev-tile, .dev-key { background: color-mix(in srgb, var(--ink) 7%, var(--card)); box-shadow: inset 0 -3px 0 var(--tile-line, var(--off)); }
.dev-tile { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; max-width: 140px; height: 28px; padding: 0 9px 2px; border-radius: var(--r); color: var(--ink); font: 500 12px/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dev-tile .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dev-tile .n { flex: none; color: var(--ink-2); font-weight: 600; }
/* Üzerine gelince (ya da klavyeyle odaklanınca) tam adres: ".2" yerinde kalır, "192.168.1" önüne açılır;
   kesilmiş ad tam hâline uzar. 120 ms bekler ki fare duvarın üstünden geçerken kareler peş peşe açılıp
   kapanmasın; kapanış beklemez. --pre önekin karakter sayısı: rakamlar tablo genişliğinde, nokta daha dar,
   yani ch cinsinden üst sınır; gereksiz büyük sınır kapanışı geciktirirdi. */
.dev-tile { transition: max-width .18s var(--ease-out), margin-left .18s var(--ease-out), margin-right .18s var(--ease-out); }
.dev-tile .pre { display: inline-block; max-width: 0; opacity: 0; overflow: hidden; vertical-align: top; transition: max-width .18s var(--ease-out), opacity .14s var(--ease-out); }
.dev-tile:is(:hover, :focus-visible) { position: relative; z-index: 1; max-width: 320px; transition-delay: .12s; }
.dev-tile:is(:hover, :focus-visible) .pre { max-width: var(--pre); opacity: 1; transition-delay: .12s; }
@media (prefers-reduced-motion: reduce) { .dev-tile, .dev-tile .pre { transition: none; } }
.dev-tile:hover { text-decoration: none; outline: 2px solid var(--blue); outline-offset: 2px; }
.dev-tile.ok, .dev-key.ok { --tile-line: var(--ok); }
/* Orta/düşük önemli sorun: soluk sarı çizgi; yüksek önemli sorunun tam sarısından ayrı okunsun. */
.dev-tile.mid, .dev-key.mid { --tile-line: color-mix(in srgb, var(--warn) 55%, var(--card)); }
.dev-tile.warn, .dev-key.warn { --tile-line: var(--warn); }
.dev-tile.warn .n { color: var(--warn-ink); }
.dev-tile.off, .dev-key.off { --tile-line: var(--line); color: var(--ink-3); }
/* Erişilemeyen yalnız renkle ayrılmasın: çizgisi kesik, yazısı kırmızı ve kalın. */
.dev-tile.bad, .dev-key.bad { box-shadow: none; background: repeating-linear-gradient(90deg, var(--bad) 0 6px, transparent 6px 9px) left bottom / 100% 3px no-repeat, color-mix(in srgb, var(--ink) 7%, var(--card)); }
.dev-tile.bad { color: var(--bad-ink); font-weight: 600; }
.ports-note i.dev-key { position: relative; width: 18px; height: 12px; }
@media (max-width: 900px) { .health { grid-template-columns: 1fr; } }

/* rakam listesi */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.figure { padding: 14px 20px; border-right: 1px solid var(--line-2); display: grid; gap: 2px; min-width: 0; }
.figure:last-child { border-right: none; }
.figure .label { font-size: 12.5px; color: var(--ink-2); }
.figure .value { font-size: 22px; font-weight: 500; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.figure .value small { font-size: 13px; font-weight: 400; color: var(--ink-2); margin-left: 3px; }
.figure .sub { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.figure.ok .value { color: var(--ok-ink); } .figure.bad .value { color: var(--bad-ink); } .figure.warn .value { color: var(--warn-ink); }

/* çubuk listesi */
.bars { display: grid; gap: 8px; }
.bar-row { display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(0, 2fr) auto; gap: 12px; align-items: center; font-size: 13px; }
.bar-row .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .who small { display: block; color: var(--ink-3); font-size: 11.5px; }
.bar-row .track { height: 8px; background: var(--line-2); border-radius: 4px; overflow: hidden; }
.bar-row .track i { display: block; height: 100%; background: var(--blue); border-radius: 4px; }
.bar-row .val { font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }

/* ---------------------------------------------------------------- tablolar */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
th { color: var(--ink-3); font-weight: 500; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; position: sticky; top: 0; background: var(--card); z-index: 1; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.wrap { white-space: normal; word-break: break-word; min-width: 160px; }
td .sub { display: block; font-size: 12px; color: var(--ink-3); }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--card-2); }
.table-wrap { overflow: auto; max-height: 520px; }
.table-wrap.tall { max-height: 70vh; }
.card.flush .table-wrap { border-top: 1px solid var(--line-2); margin-top: 12px; }
.empty { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; color: var(--ink-3); text-align: center; background: repeating-linear-gradient(45deg, var(--card-2) 0, var(--card-2) 2px, transparent 2px, transparent 10px); border-radius: var(--r-lg); border: 1px dashed var(--line-2); padding: 40px 20px; font-weight: 500; font-size: 13.5px; }
.empty b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 6px; font-size: 14.5px; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.small { font-size: 12.5px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; font-size: 13px; margin: 0; }
.kv dt { color: var(--ink-2); } .kv dd { margin: 0; word-break: break-all; }
.meter { height: 6px; background: var(--line-2); border-radius: 3px; overflow: hidden; min-width: 70px; }
.meter > i { display: block; height: 100%; background: var(--blue); }
.meter.warn > i { background: var(--warn); } .meter.hot > i { background: var(--bad); }

/* ---------------------------------------------------------------- düğme, form */
.btn { background: var(--card); border: 1px solid var(--line); color: var(--ink); padding: 6px 12px; border-radius: var(--r); cursor: pointer; font-size: 13px; font-weight: 500; line-height: 1.4; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { border-color: var(--ink-3); background: var(--card-2); }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.primary:hover { background: var(--blue-ink); }
.btn.danger { color: var(--bad-ink); }
.btn.danger:hover { border-color: var(--bad); background: var(--bad-soft); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--ink-2); }
/* Açılır menü: özet bir düğme, liste altında. Sayfanın ikincil araçları (harita, ping, traceroute) tek yerde. */
.dd { position: relative; display: inline-block; }
.dd > summary { list-style: none; cursor: pointer; }
.dd > summary::-webkit-details-marker { display: none; }
.dd > summary::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.dd[open] > summary { background: var(--card-2); }
.dd-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 170px; padding: 6px; display: grid; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .35); }
.dd-pop > a, .dd-pop > button { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; text-decoration: none; }
.dd-pop > a:hover, .dd-pop > button:hover, .dd-pop > a:focus-visible, .dd-pop > button:focus-visible { background: var(--card-2); }
.btn.quiet:hover { background: var(--card-2); color: var(--ink); }
.btn.sm { padding: 3px 9px; font-size: 12.5px; }
.btn[disabled] { opacity: .5; cursor: default; }
input[type=text], input[type=number], input[type=password], input[type=search], select, textarea { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 6px 10px; color: var(--ink); min-width: 0; }
/* Kart başlığındaki süzgeç kutusu: satırı büyütmesin, dar ekranda da kırpılmasın. */
input.filter { width: 190px; max-width: 42vw; font-size: 13px; padding: 4px 9px; }

/* Katlanır kart: seyrek dokunulan ayar (marka) sayfayı kaplamasın, tek satır yer tutsun. */
.card.fold > summary { cursor: pointer; display: flex; align-items: baseline; gap: 12px; list-style: none; }
.card.fold > summary::-webkit-details-marker { display: none; }
.card.fold > summary::before { content: "▸"; color: var(--ink-3); font-size: 11px; }
.card.fold[open] > summary::before { content: "▾"; }
.card.fold > summary .hint { font-size: 12.5px; color: var(--ink-3); }
.card.fold[open] > summary { margin-bottom: 14px; }
/* Yönetim'e taşınan tablolu kartlar (Kullanıcılar, API anahtarlarım): üst şerit ve alt not. */
.fold-bar { margin-bottom: 12px; }
.fold-foot { padding-top: 10px; }
.brand-edit { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 18px; align-items: start; }
.brand-logo-box { display: inline-flex; align-items: center; justify-content: center; min-width: 96px; height: 40px; padding: 0 10px; border: 1px dashed var(--line); border-radius: var(--r); }
.brand-logo-box img { max-height: 32px; max-width: 132px; object-fit: contain; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
input::placeholder { color: var(--ink-3); }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.seg button { background: transparent; border: none; padding: 4px 10px; color: var(--ink-2); cursor: pointer; font-size: 12.5px; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.active { background: var(--blue-soft); color: var(--blue-ink); font-weight: 500; }
.check { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-size: 13px; cursor: pointer; }

.chart-box { position: relative; height: 240px; }
.chart-box.tall { height: 320px; }
.chart-box.short { height: 160px; }

.host-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* 20 pikselde harf aralığı sıkılır; h1 ve genel bakış başlığı zaten öyleydi, bu üçüncüsü unutulmuştu. */
.host-head h2 { font-size: 20px; letter-spacing: -.01em; }
.host-head .addr { font-family: var(--mono); color: var(--ink-2); }
.host-head .spacer { flex: 1; }

.alerts { display: grid; gap: 8px; }
.alert-item { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--r); background: var(--card); }
.alert-item.sev-WARNING, .alert-item.sev-LOW { border-left-color: var(--warn); } .alert-item.sev-AVERAGE, .alert-item.sev-MEDIUM { border-left-color: #E07A1F; } .alert-item.sev-HIGH, .alert-item.sev-DISASTER, .alert-item.sev-CRITICAL { border-left-color: var(--bad); } .alert-item.sev-INFORMATION { border-left-color: var(--blue); }
.alert-item .msg { white-space: normal; font-weight: 500; }
.alert-item .meta { font-size: 12.5px; color: var(--ink-3); }
.alert-item.ack { opacity: .6; }
/* Genel bakıştaki sorun listesi dar sütuna düşünce (≤560px) düğmeler başlığın altına iner; yanında
   durduklarında başlık 145px'e sıkışıp 4-5 satıra kırılıyordu. */
.alerts.stack { container-type: inline-size; }
@container (max-width: 560px) {
  .alerts.stack .alert-item:not(.alert-group) { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .alerts.stack .alert-item > .row { grid-column: 2; justify-content: flex-start; }
}
.alert-group { display: block; padding: 0; }
.alert-group > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; cursor: pointer; list-style: none; }
.alert-group > summary::-webkit-details-marker { display: none; }
.alert-group > summary::after { content: ""; width: 7px; height: 7px; margin-right: 4px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(-45deg); transition: transform .16s var(--ease-out); }
.alert-group[open] > summary::after { transform: rotate(45deg); }
.alert-group > summary:hover .msg { color: var(--blue); }
.grp-body { padding: 0 14px 10px; }
.grp-hosts { list-style: none; margin: 0; padding: 0; }
.grp-hosts li { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-top: 1px solid var(--line-2); font-size: 13px; }
.grp-hosts li.ack { opacity: .6; }
/* Genel bakışta görülen satır soluklaşmaz: kesinti görüldü diye daha az önemli olmaz, "görüldü" yazısı yeter. */
.alerts.stack .alert-item.ack, .alerts.stack .grp-hosts li.ack { opacity: 1; }
.grp-hosts .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grp-foot { padding-top: 8px; }
.list-more:not(:empty) { margin-top: 10px; }
.card-head .lead { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
/* Yan yana kartlar boy eşitlemez: boş trafik kartı sorun listesinin boyuna (1277px) uzuyordu. */
.grid.top { align-items: start; }
#dash-traffic-row[hidden], .traffic-off[hidden] { display: none; }
.traffic-off { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding: 14px 20px; }
.traffic-off p { margin-top: 2px; font-size: 13px; color: var(--ink-3); max-width: 75ch; }
.flow-key { font-size: 12.5px; color: var(--ink-3); margin: 0 0 10px; max-width: 75ch; }
.event-item a.plain { color: inherit; }
.event-item a.plain:hover { color: var(--blue); }
@media (prefers-reduced-motion: reduce) { .alert-group > summary::after { transition: none; } }
.events { display: grid; }
.event-item { display: grid; grid-template-columns: 62px 74px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; align-items: center; }
.event-item:last-child { border-bottom: none; }
.event-item .t { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 12.5px; }

.toasts { position: fixed; right: 24px; bottom: 24px; display: grid; gap: 10px; z-index: 50; max-width: 360px; }
.toast { background: rgba(20, 26, 28, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; border: 1px solid rgba(255,255,255,0.1); border-radius: 999px; padding: 12px 20px; box-shadow: 0 12px 32px rgba(0,0,0,.15); animation: slide-toast .4s var(--ease-settle); font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; }
.toast .tag { background: rgba(255,255,255,.15); color: #fff; border-radius: 999px; padding: 2px 8px; font-size: 11px; }
.toast.error { background: rgba(220, 38, 38, 0.9); border-color: rgba(248, 113, 113, 0.4); }
@keyframes slide-toast { from { transform: translateY(24px) scale(0.9); opacity: 0; } to { transform: none; opacity: 1; } }

.skeleton { position: relative; overflow: hidden; background-color: var(--card-2); color: transparent !important; border-radius: var(--r); pointer-events: none; border: none !important; }
.skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); animation: shimmer 1.5s infinite; transform: translateX(-100%); }
[data-theme="dark"] .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent); }
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* z-index 95: grafik büyütme örtüsü 90'da duruyor ve panel düzenleyicisi oradan da açılabiliyor;
   40'ta kalsaydı kalem düğmesi modalı örtünün ARKASINA açardı. Yükleme çubuğu (100) üstte kalır. */
.modal-backdrop { position: fixed; inset: 0; background: rgba(22,32,46,.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 95; padding: 20px; }
.modal { background: var(--card); border-radius: var(--r-lg); width: min(720px, 100%); max-height: 92vh; overflow: auto; box-shadow: 0 24px 60px rgba(22,32,46,.3); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 2; }
.modal-head h2 { font-size: 17px; }
.modal-body { padding: 20px 22px 22px; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form .full { grid-column: 1 / -1; }
.field { display: grid; gap: 5px; align-content: start; font-size: 12.5px; color: var(--ink-2); font-weight: 500; }
.field input:not([type=checkbox]), .field select, .field textarea { width: 100%; font-weight: 400; }
input[type=checkbox] { accent-color: var(--blue); width: 15px; height: 15px; margin: 0; }
.field .help { font-weight: 400; color: var(--ink-3); }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
fieldset { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px 16px; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; }
legend { color: var(--ink); font-weight: 600; font-size: 13px; padding: 0 6px; }

.notice { padding: 10px 14px; border-radius: var(--r); background: var(--warn-soft); border: 1px solid var(--notice-line); color: var(--notice-ink); font-size: 13px; }
.notice.info { background: var(--blue-soft); border-color: var(--blue-line); color: var(--blue-ink); }
.notice.error { background: var(--bad-soft); border-color: var(--error-line); color: var(--error-ink); }
.notice code { background: rgba(255,255,255,.6); }
.pill { display: inline-block; background: var(--card-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-size: 12px; }
details.varbinds summary { cursor: pointer; color: var(--blue); font-size: 12.5px; }
details.varbinds table { margin-top: 6px; }
.help-list { display: grid; gap: 10px; font-size: 13px; }
.help-list p { color: var(--ink-2); }
.help-list b { color: var(--ink); font-weight: 500; }

/* ---------------------------------------------------------------- ağ haritası */
.topo-wrap { position: relative; height: calc(100vh - 150px); min-height: 500px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--stage); box-shadow: var(--shadow); }
.topo-wrap canvas { display: block; }
.topo-panel { position: absolute; background: var(--panel-glass); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px; font-size: 12.5px; box-shadow: var(--shadow); }
.topo-legend { left: 14px; right: 14px; bottom: 14px; padding: 6px 12px; }
.topo-legend > summary { cursor: pointer; color: var(--ink-2); font-size: 12px; list-style: none; padding: 2px 0; }
.topo-legend > summary::-webkit-details-marker { display: none; }
.topo-legend > summary::before { content: '▸'; display: inline-block; width: 12px; color: var(--ink-3); transition: transform .12s ease-out; }
.topo-legend[open] > summary::before { transform: rotate(90deg); }
.topo-legend .legend-body { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 8px 0 2px; }
.topo-legend h3 { margin-right: 2px; }
.topo-legend .legend-body > div { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); white-space: nowrap; }
.topo-legend svg { width: 16px; height: 16px; flex: none; }
.topo-legend .led { width: 10px; height: 10px; }
.topo-legend .sep { width: 1px; height: 18px; background: var(--line); }
.topo-legend .note { color: var(--ink-3); flex-basis: 100%; }
.topo-side { right: 14px; top: 14px; width: 280px; display: grid; gap: 8px; }
.topo-side .bars { gap: 6px; }
.topo-side .bar-row { grid-template-columns: minmax(0, 1fr) 54px auto; font-size: 12px; }
.topo-side .bar-row .who small { font-family: var(--mono); }
.topo-controls { position: absolute; left: 14px; top: 14px; right: 306px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.topo-controls .sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; flex: none; }
.topo-tip { position: absolute; pointer-events: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 12px; font-size: 12.5px; transform: translate(14px, 14px); display: none; z-index: 3; box-shadow: 0 6px 20px rgba(22,32,46,.15); min-width: 160px; }
.topo-tip b { display: block; font-size: 13.5px; }
.topo-tip .mono { color: var(--ink-2); }
.topo-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.topo-empty div { background: var(--panel-glass); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 24px; max-width: 420px; text-align: center; pointer-events: auto; }
@media (max-width: 900px) { .topo-side { display: none; } .topo-controls { right: 14px; } }

/* ---------------------------------------------------------------- yönetim */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 500; white-space: nowrap; }
.switch input { appearance: none; -webkit-appearance: none; width: 38px; height: 22px; border-radius: 11px; background: var(--off); position: relative; transition: background .2s var(--ease-out); margin: 0; cursor: pointer; flex: none; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .2s var(--ease-out); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch input:checked { background: var(--ok); }
.switch input:checked::after { left: 19px; }
.switch input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.master { display: flex; align-items: center; gap: 18px; padding: 18px 22px; }
.master .led { width: 14px; height: 14px; }
.master p { color: var(--ink-2); font-size: 13.5px; }
.master .spacer { flex: 1; }
.feature { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px; align-items: start; }
.feature h2 { display: flex; align-items: center; gap: 10px; }
.feature .desc { color: var(--ink-2); font-size: 13px; margin-top: 2px; }
.feature .req { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }
.feature .fields { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 10px; align-items: end; grid-column: 1 / -1; }
.feature .fields .field { min-width: 130px; }
.feature .fields input[type=text], .feature .fields input[type=number], .feature .fields select { width: 100%; }
.feature .fields .field.wide { min-width: 260px; }
.feature .state { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; font-size: 12.5px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-2); color: var(--ink-2); flex-wrap: wrap; }
.feature.off h2, .feature.off .desc { color: var(--ink-3); }
.savebar { position: sticky; bottom: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 18px; display: flex; gap: 12px; align-items: center; box-shadow: 0 6px 24px rgba(22,32,46,.12); z-index: 4; }
.savebar .spacer { flex: 1; }
.savebar .dirty { color: var(--warn-ink); font-size: 13px; }
.thresholds { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 16px; }

/* ---------------------------------------------------------------- HTTP */
/* Metod rozeti, Postman'in renk diliyle: GET yeşil, POST sarı, PUT mavi, PATCH mor, DELETE kırmızı,
   HEAD yeşil, OPTIONS pembe. Renk mürekkepte, zemin aynı rengin çok açık tonu; iki temada da
   4.5:1'in üstünde. Sabit genişlik yok: "GET" ile "OPTIONS" yan yana aynı hizada dursun diye
   min-width ve ortalama var. */
.method { display: inline-block; font-family: var(--mono); font-weight: 600; font-size: 11.5px; line-height: 18px; min-width: 44px; padding: 0 6px; border-radius: 4px; text-align: center; letter-spacing: .02em; vertical-align: middle; color: var(--ink-2); background: var(--off-soft); }
.method.m-get, .method.m-head { color: #14733F; background: #E2F4E9; }
.method.m-post { color: #7A5A00; background: #FBF0C9; }
.method.m-put { color: #1D4F9C; background: #E3ECFA; }
.method.m-patch { color: #5B3E9E; background: #EEE7FA; }
.method.m-delete { color: #A8322F; background: #FBE5E4; }
.method.m-options { color: #A6237A; background: #FAE3F1; }
[data-theme="dark"] .method.m-get, [data-theme="dark"] .method.m-head { color: #6BDD9A; background: #12301F; }
[data-theme="dark"] .method.m-post { color: #FFE47E; background: #3A2F0B; }
[data-theme="dark"] .method.m-put { color: #74AEF6; background: #182844; }
[data-theme="dark"] .method.m-patch { color: #C0A8E1; background: #2A2140; }
[data-theme="dark"] .method.m-delete { color: #F79A8E; background: #3F1A18; }
[data-theme="dark"] .method.m-options { color: #F15EB0; background: #3D1730; }
.status-2 { color: var(--ok-ink); font-weight: 600; } .status-3 { color: var(--blue); font-weight: 600; } .status-4 { color: var(--warn-ink); font-weight: 600; } .status-5 { color: var(--bad-ink); font-weight: 600; } .status-0 { color: var(--ink-3); }
.url { max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
.url b { font-weight: 500; }
.modal.wide { width: min(1180px, 100%); }
.http-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-bottom: 14px; font-size: 13px; color: var(--ink-2); }
.http-head .method { font-size: 13px; line-height: 22px; padding: 0 8px; }
.http-head .u { font-family: var(--mono); color: var(--ink); word-break: break-all; }
.http-detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.http-detail h3 { margin-bottom: 8px; }
.http-detail table { font-size: 12.5px; table-layout: fixed; }
.http-detail td { white-space: normal; word-break: break-all; padding: 5px 8px; }
.http-detail td:first-child { width: 36%; color: var(--ink-2); }
.http-detail pre { background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; font: 12px/1.5 var(--mono); white-space: pre-wrap; word-break: break-all; max-height: 380px; overflow: auto; margin: 8px 0 0; }
.http-detail .bodynote { font-size: 12px; color: var(--ink-3); margin-top: 6px; }
@media (max-width: 900px) { .http-detail { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- yeni cihazlar */
.nav-badge.info { background: var(--blue); }
.newdev { border-left: 4px solid var(--blue); }

/* ---------------------------------------------------------------- tasarım */
.design-wrap { position: relative; height: calc(100vh - 150px); min-height: 540px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--stage); box-shadow: var(--shadow); }
.design-wrap canvas { display: block; touch-action: none; }
.design-top { position: absolute; left: 14px; top: 14px; right: 330px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.design-top .name { width: 220px; }
.design-palette { position: absolute; left: 14px; top: 64px; width: 200px; display: grid; gap: 6px; }
.design-palette h3 { margin: 4px 0 0; }
.design-palette .btn { justify-content: flex-start; }
.design-palette .btn svg { width: 16px; height: 16px; }
.design-palette .seg { display: flex; }
.design-palette .seg button { flex: 1; }
.design-side { right: 14px; top: 14px; width: 300px; max-height: calc(100% - 28px); overflow: auto; display: grid; gap: 10px; }
.design-side .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: -4px -6px 0; padding: 0 6px; }
.design-side .tabs button { background: transparent; border: none; padding: 6px 8px; color: var(--ink-2); cursor: pointer; font-weight: 500; border-bottom: 2px solid transparent; font-size: 13px; }
.design-side .tabs button.active { color: var(--blue-ink); border-bottom-color: var(--blue); }
.design-side .form { grid-template-columns: 1fr; gap: 10px; }
.issues { display: grid; gap: 6px; }
.issue { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; padding: 7px 9px; border-radius: var(--r); background: var(--card-2); border: 1px solid var(--line-2); font-size: 12.5px; cursor: pointer; }
.issue:hover { border-color: var(--blue-line); }
.issue .led { margin-top: 4px; }
.issue.error { background: var(--bad-soft); } .issue.warn { background: var(--warn-soft); } .issue.info { background: var(--blue-soft); }
.check-sum { display: flex; gap: 10px; align-items: center; font-size: 13px; flex-wrap: wrap; }
.check-sum b { font-size: 16px; }
.design-legend { left: 14px; right: 14px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px 14px; align-items: center; font-size: 12.5px; }
.design-legend .note { color: var(--ink-3); flex-basis: 100%; }
@media (max-width: 1000px) { .design-side { display: none; } .design-top { right: 14px; } }

/* ---------------------------------------------------------------- genel arama */
.gsearch { position: relative; flex: 1; max-width: 460px; margin: 0 24px; }
.gsearch input { width: 100%; padding: 6px 12px 6px 32px; background: var(--card-2); border: 1px solid var(--line); border-radius: 999px; font-size: 13px; }
.gsearch input:focus { background: var(--card); }
.gsearch::before { content: ""; position: absolute; left: 11px; top: 9px; width: 13px; height: 13px; border: 2px solid var(--ink-3); border-radius: 50%; box-sizing: border-box; pointer-events: none; }
.gsearch::after { content: ""; position: absolute; left: 21px; top: 19px; width: 6px; height: 2px; background: var(--ink-3); transform: rotate(45deg); pointer-events: none; }
.search-pop { position: absolute; top: 40px; left: 0; width: min(780px, calc(100vw - 330px)); background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 14px 40px rgba(22,32,46,.18); z-index: 30; max-height: 70vh; overflow: auto; padding: 6px; }
.hit { display: grid; grid-template-columns: 58px minmax(180px, 1fr) auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: var(--r); cursor: default; }
.hit:hover, .hit.active { background: var(--card-2); }
.hit .kind { font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.hit .t { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hit .s { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hit .acts { display: flex; gap: 4px; }
.search-pop .none { padding: 12px; color: var(--ink-2); font-size: 13px; }
@media (max-width: 900px) { .gsearch { display: none; } }

/* ---------------------------------------------------------------- teşhis */
.tools-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1.3fr); gap: 18px; align-items: start; }
@media (max-width: 1000px) { .tools-grid { grid-template-columns: 1fr; } }
.job-head { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.job-head .target { font-family: var(--mono); font-size: 15px; font-weight: 500; }
.raw { margin-top: 12px; }
.raw pre { background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; font: 12px/1.5 var(--mono); white-space: pre-wrap; max-height: 300px; overflow: auto; margin: 6px 0 0; }
.tool-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.job-row { display: grid; gap: 2px; padding: 9px 14px; border-bottom: 1px solid var(--line-2); cursor: pointer; }
.job-row:hover { background: var(--card-2); }
.job-row .l1 { display: flex; gap: 8px; align-items: center; }
.job-row .l1 .mono { font-weight: 500; }
.job-row .l2 { font-size: 12px; color: var(--ink-3); white-space: normal; }

/* ---------------------------------------------------------------- harita kartı */
.topo-card { left: 14px; bottom: 84px; width: 300px; display: grid; gap: 6px; }
.topo-card h3 { color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; }
.topo-card .row { margin-top: 4px; }


/* ---------------------------------------------------------------- giriş ve kullanıcı */
.login { position: fixed; inset: 0; background: rgba(250, 251, 252, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 20px; }
[data-theme="dark"] .login { background: rgba(10, 14, 20, 0.7); }
.login-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 36px 40px 32px; width: min(420px, 100%); box-shadow: 0 32px 80px rgba(0,0,0,0.08); overflow: hidden; position: relative; }
[data-theme="dark"] .login-card { background: #0a0a0a; border-color: #222; box-shadow: 0 32px 80px rgba(0,0,0,0.6); }
.login-card .form { gap: 16px; }

/* Animated Form Transitions */
.login-card form:not([hidden]) { animation: login-slide-in 0.5s var(--ease-settle) both; }
@keyframes login-slide-in {
  0% { opacity: 0; transform: translateY(16px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Monochrome Premium Button */
.login-card .btn.primary { background: var(--ink); color: var(--card); border: none; font-weight: 600; justify-content: center; padding: 12px 16px; font-size: 14.5px; transition: transform 0.2s var(--ease-out), opacity 0.2s; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.login-card .btn.primary:hover { opacity: 0.85; transform: scale(1.02); }
[data-theme="dark"] .login-card .btn.primary { background: #ffffff; color: #000000; box-shadow: 0 4px 12px rgba(255,255,255,0.1); }
.login-card .btn { justify-content: center; padding: 12px 16px; font-size: 14.5px; }

/* Premium Inputs */
.login-card input { padding: 12px 14px; font-size: 15px; border-radius: 8px; border: 1px solid var(--line-2); transition: border-color 0.2s, box-shadow 0.2s; }
.login-card input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0,0,0,0.05); outline: none; }
[data-theme="dark"] .login-card input:focus { border-color: #ffffff; box-shadow: 0 0 0 3px rgba(255,255,255,0.1); }

/* OTP Specific Styling */
#otp-form input { letter-spacing: 0.3em; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 26px; text-align: center; font-weight: 700; padding: 14px; background: var(--card-2); }
.user-chip { display: inline-flex; align-items: center; gap: 8px; padding-left: 14px; border-left: 1px solid var(--line); }
.user-chip b { font-weight: 500; }
/* Yetki. Sayfanın alanında Yönetir yoksa değiştiren düğmeler görünmez; menü girdileri ve arama kutusu JS'te gizlenir
   (applyNav). Karar /auth/me'deki tablodandır; sunucu her isteği ayrıca denetler. */
body:not([data-superadmin="yes"]) [data-role="superadmin"] { display: none !important; }
#content[data-manage="no"] [data-role="admin"], #content[data-manage="no"] .btn.primary, #content[data-manage="no"] .btn.danger, #content[data-manage="no"] .savebar,
#content[data-manage="no"] [data-edit], #content[data-manage="no"] [data-ack], #content[data-manage="no"] [data-nd], #content[data-manage="no"] [data-add] { display: none !important; }
.nav [hidden], .gsearch[hidden], .nav-group[hidden] { display: none !important; }
/* Rol karşılaştırması ve rol düzenleyici */
.role-matrix td, .role-matrix th { vertical-align: top; }
.role-matrix tr.group td, .role-edit tr.group td { background: var(--card-2); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); font-weight: 600; }
.lvl { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; white-space: nowrap; border: 1px solid var(--line-2); color: var(--ink-3); }
.lvl-view { background: var(--blue-soft); color: var(--blue-ink); border-color: transparent; }
.lvl-manage { background: var(--blue); color: #fff; border-color: transparent; }
.role-edit { max-height: 56vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--r); }
.role-edit table { width: 100%; border-collapse: collapse; }
.role-edit td { padding: 8px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.role-edit td:last-child { width: 1%; white-space: nowrap; text-align: right; }
.lvl-pick button { min-width: 72px; }
/* Giriş odaklanılacak tek iştir: arkadaki kabuk hem bulanıklaşır hem geri çekilir. 2 piksel
   bulanıklık kenar çubuğunu okunur bırakıyordu ve ekran "içeridesiniz" gibi duruyordu. */
.app.locked { filter: blur(6px) saturate(.7); opacity: .55; pointer-events: none; }
/* Kimlik bilinene kadar kabuk hiç çizilmez. Yenilemede kenar çubuğu ve üst şerit önce boyanıp
   giriş örtüsü ancak /auth/me döndükten sonra geldiği için, arada oturum açıkmış gibi görünen
   bir kare oluşuyordu. visibility kullanılır: yer korunur, açılışta düzen sıçraması olmaz. */
.app.booting { visibility: hidden; }

/* ---------------------------------------------------------------- port paneli */
.panel-wrap { overflow-x: auto; padding: 6px 2px; }
.panel { display: inline-grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); gap: 6px 4px; padding: 14px; background: #2f3947; border-radius: 10px; border: 1px solid #1f2733; }
.panel.one-row { grid-template-rows: auto; }
.port { width: 34px; height: 30px; border-radius: 4px; background: #4a5566; border: 1px solid #1f2733; position: relative; cursor: pointer; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 3px; color: #dfe5ee; font: 500 9.5px var(--mono); }
.port::before { content: ""; position: absolute; top: 4px; left: 5px; right: 5px; height: 8px; border-radius: 2px; background: #1f2733; }
.port::after { content: ""; position: absolute; top: 5px; right: 6px; width: 5px; height: 5px; border-radius: 50%; background: #6b7686; }
.port.up::after { background: #34d075; box-shadow: 0 0 6px #34d075; }
.port.up.busy::after { background: #f4b942; box-shadow: 0 0 6px #f4b942; }
.port.err::after { background: #ff5f57; box-shadow: 0 0 6px #ff5f57; }
.port.admin-down { background: #3a3f48; opacity: .7; }
.port.selected { outline: 2px solid #8fb0e6; outline-offset: 1px; }
.port:hover { background: #5b6779; }
.port-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); margin-top: 8px; }
.port-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.port-detail { margin-top: 12px; border-top: 1px solid var(--line-2); padding-top: 12px; }
.tpl-warn td { background: var(--warn-soft); }

/* ---------------------------------------------------------------- raporlar ve yazdırma */
.report-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.report-head .spacer { flex: 1; }
.print-only { display: none; }
@media print {
  .sidebar, .topbar, .toasts, .savebar, .no-print, .login, .modal-backdrop { display: none !important; }
  .app { grid-template-columns: 1fr !important; }
  .content { padding: 0 !important; gap: 12px !important; }
  .card, .figures { break-inside: avoid; box-shadow: none !important; }
  .print-only { display: block; }
  body { background: #fff; }
}
.diff-new td:first-child { border-left: 4px solid var(--ok); } .diff-gone td:first-child { border-left: 4px solid var(--bad); } .diff-changed td:first-child { border-left: 4px solid var(--warn); }
.hidden-list { display: grid; gap: 6px; }
.hidden-list .row { justify-content: space-between; padding: 6px 10px; background: var(--card-2); border-radius: var(--r); }

/* ---------------------------------------------------------------- terminal ve yedekler */
.term-wrap { background: #0f1620; border-radius: var(--r); padding: 8px; height: 440px; }
.term-wrap .xterm { height: 100%; }
.term-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; font-size: 12.5px; color: var(--ink-2); }
.cfg-diff { font: 12px/1.5 var(--mono); background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r); max-height: 480px; overflow: auto; }
.cfg-diff div { padding: 0 10px; white-space: pre; }
.cfg-diff .add { background: var(--ok-soft); color: var(--ok-ink); } .cfg-diff .del { background: var(--bad-soft); color: var(--bad-ink); } .cfg-diff .ctx { color: var(--ink-2); } .cfg-diff .gap { color: var(--ink-3); background: var(--line-2); }
.cfg-text { font: 12px/1.5 var(--mono); background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; max-height: 480px; overflow: auto; white-space: pre; }

/* ---------------------------------------------------------------- sayfa geçişleri */
.loadbar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--blue); z-index: 100; transition: width .3s var(--ease-out), opacity .35s var(--ease-out); box-shadow: 0 0 8px rgba(29,79,156,.5); }
.loadbar.active { width: 70%; }
.loadbar.done { width: 100%; opacity: 0; }
.content { transition: opacity .18s var(--ease-out), transform .18s var(--ease-out); }
.content.leaving { opacity: 0; transform: translateY(4px); }
.content > * { animation: rise .34s var(--ease-out) backwards; }
.content > *:nth-child(2) { animation-delay: .05s; } .content > *:nth-child(3) { animation-delay: .1s; } .content > *:nth-child(4) { animation-delay: .15s; } .content > *:nth-child(n+5) { animation-delay: .2s; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.nav a { transition: background .18s var(--ease-out), color .18s var(--ease-out), transform .24s var(--ease-settle); }
.nav a:hover { transform: translateX(4px); }
.nav a.active { box-shadow: none; transform: translateX(4px); }
.card, .figures { transition: box-shadow .24s var(--ease-out), transform .24s var(--ease-out); }
.card:hover { box-shadow: 0 8px 16px rgba(22,32,46,.08), 0 4px 6px rgba(22,32,46,.04); transform: translateY(-2px); }
.btn { transition: background .14s var(--ease-out), border-color .14s var(--ease-out), transform .1s var(--ease-out), box-shadow .14s var(--ease-out); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 6px rgba(22, 32, 46, .08); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.modal-backdrop { animation: fade .2s var(--ease-out) backwards; }
.modal { animation: pop .24s var(--ease-out) backwards; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
::view-transition-old(root) { animation: 140ms var(--ease-out) both fade-out; }
::view-transition-new(root) { animation: 240ms var(--ease-out) both fade-in; }
@keyframes fade-out { to { opacity: 0; } } @keyframes fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .content, .content > *, .modal, .modal-backdrop, .loadbar, .chart-zoom, .chart-zoom-card { animation: none !important; transition: none !important; } }
.anom-row td { background: var(--warn-soft); }
.cable-note { color: var(--ink-3); }

[hidden] { display: none !important; }

/* Ekran okuyucuya görünür, göze görünmez. 3B sahnenin metin karşılığı buradan okunur. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- kubernetes düğüm kimliği */
/* Haritada bir node, durum halkası takmış bir rol altıgenidir. Tabloda da öyle olsun: aynı nesne,
   aynı dil. Renkler haritanın kendi durum paletinden gelir, yeni bir ton eklenmez. */
.k8s-ident { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; border-radius: 50%; border: 2px solid var(--off); background: var(--card); }
.k8s-ident.ok { border-color: var(--ok); }
.k8s-ident.warn { border-color: var(--warn); }
.k8s-ident.bad { border-color: var(--bad); }
/* Sessiz node haritada rengini yitirir; burada da yitirsin. */
.k8s-ident.bad svg { filter: grayscale(1); opacity: .65; }
.k8s-ident svg { width: 17px; height: 17px; display: block; }
.k8s-node-id { display: inline-flex; align-items: center; gap: 10px; }
/* 18 sütun yatay kayarken satırın kimliği kaybolmasın. */
#k8-table th:first-child, #k8-table td:first-child { position: sticky; left: 0; background: var(--card); }
#k8-table td:first-child { z-index: 1; }
#k8-table th:first-child { z-index: 3; }

/* ---------------------------------------------------------------- kubernetes node: hüküm şeridi ve bölümler */
/* İlk ekran bir hüküm verir: kim, ayakta mı, hangi kaynak sıkışmış, kaç sorun. Envanter aşağıda, katlı. */
.verdict { padding: 0; }
.verdict .verdict-top { display: flex; align-items: center; gap: 28px; padding: 14px 20px; flex-wrap: wrap; }
/* Sorun bandi: seridin altinda, tam genislikte, siddetin rengiyle. Sagdaki "Acik sorun" kutusu
   kac tane oldugunu soyler; bant HANGISI oldugunu soyler — aranmasi gereken tek sey buydu. */
/* Önem bandın zemin tonunda ve etiketinde; 4px'lik renkli sol kenar aynı şeyi üçüncü kez söylüyordu. */
.verdict-problem { display: flex; align-items: center; gap: 12px; padding: 11px 20px; border-top: 1px solid var(--line-2); border-radius: 0 0 var(--r-lg) var(--r-lg); background: var(--card-2); }
.verdict-problem .msg { font-weight: 500; color: inherit; text-decoration: none; }
.verdict-problem a.msg:hover { text-decoration: underline; text-underline-offset: 3px; }
.verdict-problem .impact { font-size: 13px; margin-top: 2px; }
.verdict-problem .meta { font-size: 12px; color: var(--ink-2); }
.verdict-problem .linky { margin-left: auto; white-space: nowrap; }
.verdict-problem.sev-LOW, .verdict-problem.sev-WARNING { background: var(--warn-soft); }
.verdict-problem.sev-MEDIUM, .verdict-problem.sev-AVERAGE { background: #FDF2E6; }
.verdict-problem.sev-HIGH, .verdict-problem.sev-CRITICAL, .verdict-problem.sev-DISASTER { background: var(--bad-soft); }
.verdict .verdict-id { display: flex; align-items: center; gap: 12px; min-width: 240px; }
.verdict .verdict-id .k8s-ident { width: 40px; height: 40px; }
.verdict .verdict-id .k8s-ident svg { width: 22px; height: 22px; }
.verdict .verdict-id b { font-size: 16px; font-weight: 500; }
/* Makinenin adı şeridin başlığı (h2: başlıkla gezinen ekran okuyucu en önemli bloğa iner); adres ve tip altında tek satır. */
.verdict .verdict-name { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; overflow-wrap: anywhere; }
.verdict .verdict-name.mono { font-size: 16px; font-weight: 500; }
.verdict .verdict-line { display: block; margin-top: 2px; }
.verdict .verdict-bn, .verdict .verdict-alerts { display: grid; gap: 2px; min-width: 0; }
.verdict .verdict-bn { flex: 1 1 260px; padding-left: 28px; border-left: 1px solid var(--line-2); }
.verdict .verdict-alerts { padding-left: 28px; border-left: 1px solid var(--line-2); }
.verdict .label { font-size: 12.5px; color: var(--ink-2); }
.verdict .value { font-size: 26px; font-weight: 500; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.verdict .value.bad { color: var(--bad-ink); } .verdict .value.ok { color: var(--ok-ink); }
.linky { background: none; border: 0; padding: 0; font: inherit; color: var(--blue-ink); cursor: pointer; text-decoration: underline; }
.linky:hover { color: var(--blue); }
/* "Ayrinti" tiklandiginda kartin kendisi bir kez yikanir: kaydirma bitince goz nereye bakacagini bilir. */
.card.flash { animation: wash 1.6s ease-out; }
.verdict .sub { font-size: 12px; color: var(--ink-3); }
.verdict .actions { margin-left: auto; display: flex; gap: 6px; }
/* Sessiz node haritada nabız gibi atar; şeritte de atsın. */
.verdict .k8s-ident.bad { animation: blink 1.4s ease-in-out infinite; }

.sec { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow); margin-top: 14px; }
/* Tutamaç başlık düğmesinin kardeşi: iç içe buton geçersiz HTML, ikisini bu satır bir arada tutar. */
.sec-top { display: flex; align-items: center; gap: 2px; padding-left: 10px; }
.sec-top .drag-handle { margin: 0; }
.sec-top .sec-head { padding-left: 8px; }
.sec-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 18px; background: none; border: 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer; border-radius: var(--r-lg); }
.sec-head:hover { background: var(--blue-soft); }
.sec-head:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.sec-title { font-size: 14px; font-weight: 500; }
.sec-caret { width: 8px; height: 8px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: rotate(-45deg); transition: transform .2s var(--ease-out); flex: none; margin-left: 2px; }
.sec[data-open] .sec-caret { transform: rotate(45deg); }
.sec-dot { width: 9px; height: 9px; }
.sec-meta { margin-left: auto; }
/* Yükseklik ölçmeden açılıp kapanan gövde: 0fr -> 1fr. Kapanış daha hızlı; giden şeyi kimse izlemez. */
.sec-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .2s var(--ease-out); }
.sec[data-open] .sec-body { grid-template-rows: 1fr; transition: grid-template-rows .26s var(--ease-out); }
.sec-inner { min-height: 0; overflow: hidden; display: grid; gap: 14px; padding: 0 18px; opacity: 0; transition: opacity .14s var(--ease-out); }
.sec[data-open] .sec-inner { padding: 4px 18px 18px; opacity: 1; transition: opacity .22s var(--ease-out) .08s; }
.sec-inner .grid.two[hidden] { display: none; }
.sec-inner .hint { font-size: 12px; color: var(--ink-3); }

/* Grafik iskeletten sonra bir kez belirir; yenilemede sessizce yeniden çizilir. Sıralı giriş yok: veri sırasız gelir. */
.chart-box { position: relative; }
.chart-box::before { content: ''; position: absolute; left: 36px; right: 8px; bottom: 28px; border-bottom: 1px solid var(--line-2); }
.chart-box canvas { position: relative; opacity: 0; transition: opacity .22s var(--ease-out); }
.chart-box canvas.ready { opacity: 1; }

/* Değişen değer: yalnızca arka plan yıkanır, metin yerinde ve okunur kalır. */
@keyframes wash { from { background-color: var(--blue-soft); } to { background-color: transparent; } }

/* Collector'ı yanıt vermeyen ortamın node'ları: silinmez, bayat damgasıyla soluk durur. Görülemeyen
   makine tam da endişe edilecek makinedir; listeden düşmesi onu gizlerdi. */
tr.stale td { opacity: .55; }
tr.stale td.k8s-node-cell { opacity: 1; }

/* --------------------------------------------------------------- grafik büyütme (çift tık)
   Panel örtünün içine TAŞINIR, kopyalanmaz; Chart.js yalnızca boyut değişimini görür. Orta hız:
   260 ms açılış, 200 ms kapanış — modal ile aynı aile, biraz daha geniş bir alan kapladığı için
   biraz daha yavaş. */
.chart-zoom { position: fixed; inset: 0; z-index: 90; background: rgba(10, 14, 20, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 28px; animation: fade .3s var(--ease-out) backwards; }
.chart-zoom-card { width: min(1400px, 100%); max-height: 100%; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 32px 80px rgba(0, 0, 0, .4); padding: 14px 20px 18px; display: flex; flex-direction: column; gap: 6px; animation: pop-zoom .34s var(--ease-settle) backwards; min-width: 0; }
@keyframes pop-zoom { from { opacity: 0; transform: scale(.92) translateY(12px); } to { opacity: 1; transform: none; } }
.chart-zoom-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.chart-zoom .zoomed { min-width: 0; }
.chart-zoom .zoomed .chart-box { height: min(70vh, 720px); }
.chart-zoom .zoomed .drag-handle { display: none; }          /* örtünün içinde sıralama yok */
/* Kapanış açılışla aynı sürede ve aynı eğrinin aynadaki hâliyle: kart girdiği noktaya, girdiği
   yoldan geri iner. transform-origin JS'te kaynağa göre yazılır ve kapanışta da geçerlidir. */
.chart-zoom.closing { animation: fade-out .26s var(--ease-in) forwards; }
.chart-zoom.closing .chart-zoom-card { animation: shrink-zoom .26s var(--ease-in) forwards; }
@keyframes shrink-zoom { to { opacity: 0; transform: scale(.96) translateY(8px); } }
.chart-box { cursor: zoom-in; }
.chart-zoom .chart-box { cursor: zoom-out; }
/* Panel kutuları dar ekranda taşmasın: ızgara hücresi küçülebilsin, uzun seri adları kırılsın. */
[data-i] { min-width: 0; }
[data-i] > h3 { min-width: 0; }
[data-i] > h3 > :not(.spacer):not(button) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-i] [data-legend] { display: flex; flex-wrap: wrap; gap: 2px 10px; overflow-wrap: anywhere; }
[data-i] .chart-box { overflow: hidden; }

/* --------------------------------------------------------------- adres dosyası: iz
   Sekiz kaynağın satırı aynı üç sütuna iner: ne zaman, hangi kaynak, ne oldu. Kaynak rengi kaynağın
   kimliğidir, satırın ağırlığı ise zaman sütununun rengi: kırmızı zaman = kötü haber. */
.trail { display: grid; }
.trail-item { display: grid; grid-template-columns: 88px 116px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; align-items: baseline; }
.trail-item:last-child { border-bottom: none; }
.trail-item .t { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }

.trail-item .c { min-width: 0; overflow-wrap: anywhere; }
.trail-item[data-http] { cursor: pointer; }
.trail-item[data-http]:hover .c { color: var(--blue-ink); }
/* Kaynak etiketi satırın nereden geldiğini söyler, durumunu değil: hepsi tek nötr biçim. Bağlantı ve HTTP etiketleri uyarı
   renginde olduğu için başarılı her satır uyarı gibi okunuyor, "Hepsi" turuncu bir duvara dönüyordu (critique, 2026-10-04).
   Renk yalnız sonuçta kalır: Reddedildi, 404, Sorun. */
.tag[class*="src-"] { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
/* Makine 360: katlanır bölümler ve içlerindeki alt başlıklar (grafik, tablo). */
.ad-secs > .card.fold > summary .hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Bölümler tek kartın satırları: altı ayrı kart üst üste "her yerde aynı kutu" görüntüsü veriyordu. İçi boş bölüm hiç
   çizilmez (hidden); ilk GÖRÜNEN satırdan sonrakiler ince bir çizgiyle ayrılır. */
.ad-secs { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.ad-secs > .card.fold { border: 0; border-radius: 0; box-shadow: none; margin: 0; padding: 13px 20px; background: none; }
.ad-secs > .card.fold:hover { transform: none; box-shadow: none; }
.ad-secs > .card.fold:not([hidden]) ~ .card.fold { border-top: 1px solid var(--line-2); }
.ad-secs > .card.fold[open] > summary { margin-bottom: 12px; }
/* İz'de art arda aynı satır: tek satır ve kaç kez olduğu. */
.trail-item .rep { margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pick-chip[hidden] { display: none; }
/* Bölüm içindeki kutucuklar (Makine 360 ajan özeti): sayfanın ana kutucuklarından bir kademe küçük. */
.figures.compact .value { font-size: 18px; }
/* Katlanan bölümün içindeki ölçüler kartın parçası, kartın içinde ikinci bir kart değil. */
.fold .figures.compact { box-shadow: none; background: transparent; border-color: var(--line-2); }
/* Hüküm şeridi dar ekranda: bloklar alt alta düşer, aradaki dikey çizgi ve girinti anlamını yitirir. */
@media (max-width: 720px) {
  .verdict .verdict-top { gap: 14px; padding: 14px 16px; }
  .verdict .verdict-id { min-width: 0; flex: 1 1 100%; }
  .verdict .verdict-bn, .verdict .verdict-alerts { padding-left: 0; border-left: 0; }
  .verdict .actions { margin-left: 0; flex-wrap: wrap; }
  .verdict-problem { flex-wrap: wrap; padding: 11px 16px; }
}
.ad-sub { font-size: 13px; font-weight: 500; color: var(--ink-2); margin: 4px 0 6px; }
/* Arayüz, şablon ve port geçmişi (hostHist): cihaz sayfası ve Makine 360. Seçiciler sarılır; dar ekranda alt alta düşer. */
.hh-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 10px; }
.hh-pick { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); min-width: 0; }
.hh-pick select { max-width: min(320px, 70vw); }
.hh-ports-wrap { padding: 0; }
.card.flush .hh-ports-wrap { padding: 8px 20px 14px; }
.hh-ports > summary { cursor: pointer; color: var(--ink-2); font-size: 12.5px; list-style: none; padding: 4px 0; }
.hh-ports > summary::-webkit-details-marker { display: none; }
.hh-ports > summary::before { content: '▸'; display: inline-block; width: 12px; color: var(--ink-3); }
.hh-ports[open] > summary::before { content: '▾'; }
.hh-note { margin: 4px 0 10px; }
.hh-port-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.hh-port-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.hh-port-head .hint { font-size: 12px; color: var(--ink-3); }
/* Açık/kapalı şeridi: 48 dilim; gri = o dilimde ölçüm yok (izleme kapalıydı ya da geçmiş henüz yazılmıyordu). */
.hh-band { display: flex; gap: 1px; height: 10px; border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.hh-band i { flex: 1; background: var(--off-soft); }
.hh-band i.ok { background: var(--ok); }
.hh-band i.warn { background: var(--warn); }
.hh-band i.bad { background: var(--bad); }
.chart-box.mini { height: 110px; }
@media (max-width: 720px) { .trail-item { grid-template-columns: 72px 1fr; } .trail-item .tag { grid-column: 2; justify-self: start; } .trail-item .c { grid-column: 1 / -1; } }

/* --------------------------------------------------------------- grafik /* Grafik ↔ tablo çevirme. */
.flip { perspective: 1400px; }
.flip-inner { position: relative; transform-style: preserve-3d; transition: transform .6s var(--ease-turn); }
[data-view="table"] .flip-inner { transform: rotateY(180deg); }
.flip-inner > .chart-box, .flip-inner > .chart-table { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.chart-table { position: absolute; inset: 0; transform: rotateY(180deg); display: flex; flex-direction: column; gap: 8px; background: var(--card); cursor: default; min-width: 0; }

.flip-stats { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11.5px; align-items: center; }
.flip-stats > span { background: var(--card-2); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.flip-stats > span .faint { color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin-left: 4px; }

.flip-rows { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--line); border-radius: var(--r); box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); }
.flip-rows table { font-size: 12px; width: 100%; border-collapse: separate; border-spacing: 0; }
.flip-rows th, .flip-rows td { padding: 6px 12px; border-bottom: 1px solid var(--line-2); }
.flip-rows th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; position: sticky; top: 0; z-index: 1; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--ink-2); border-bottom: 1px solid var(--line); }
[data-theme="dark"] .flip-rows th { background: rgba(23, 28, 36, 0.9); }
.flip-rows tr:hover td { background: var(--blue-soft); }
/* Kaydırılabilir bölge klavyeyle de kaydırılabilmeli: Chrome düz bir kaydırma kabına kendiliğinden
   odak vermez, tabindex JS'te değil işaretlemede durur (paintTable). Çerçeve içeriye çizilir ki
   kutunun köşe yuvarlaması bozulmasın. */
.flip-rows:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

.chart-table .empty { padding: 60px 18px; text-align: center; color: var(--ink-3); }
/* Bütün grafiklerde çevirme düğmesi: kart başlığında son öğeyle yan yana; başlığı olmayan grafikte kutunun köşesinde. */
.card-head .head-tools { display: flex; align-items: center; gap: 8px; }
.flip { position: relative; }
.flip-float { position: absolute; top: 4px; right: 4px; z-index: 2; }
/* Büyütülen sayfa kartı örtünün kartında ikinci bir kart gibi durmasın; uzun kart (ping sonucu) örtüde kaydırılır. */
.chart-zoom-card { overflow: auto; }
.chart-zoom-card > .card.zoomed { border: 0; box-shadow: none; padding: 0; margin: 0; background: none; }

.flip-btn { width: 28px; height: 28px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; border-radius: 50% !important; background: var(--card-2); border: 1px solid var(--line-2) !important; transition: all 0.2s var(--ease-out); color: var(--ink-2); }
.flip-btn:hover { background: var(--blue-soft); color: var(--blue-ink); border-color: var(--blue-line) !important; transform: scale(1.05); }
.flip-btn svg { width: 14px; height: 14px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.4s var(--ease-settle); }
.flip-btn:hover svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  /* Dönüş yok; tablo grafiğin üstünde 200 ms'de belirir. Sıfır değil: neyin neyle yer değiştirdiği yine görülsün. */
  .flip { perspective: none; }
  .flip-inner { transition: none; transform: none !important; }
  .chart-table { transform: none; opacity: 0; transition: opacity .2s var(--ease-out); }
  [data-view="table"] .chart-table { opacity: 1; }
  [data-view="table"] .chart-box { visibility: hidden; }
}

/* --------------------------------------------------------------- panel sürükleme
   Panellerin içinde Chart.js tuvalleri var ve Chart.js her tuval için bir ResizeObserver tutuyor.
   Yükseklik, top ya da grid konumu animasyonu yirmi tuvalde kare başına resize() tetikler; bu yüzden
   burada YALNIZCA transform ve opacity oynar — transform düzeni değiştirmediği için tuvale dokunmaz. */
.drag-handle { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 0;
  background: none; color: var(--ink-3); cursor: grab; flex: none; opacity: .45; border-radius: 4px;
  transition: opacity .18s var(--ease-out), background .18s var(--ease-out); touch-action: none; }
.drag-handle::before { content: ""; width: 2px; height: 2px; border-radius: 50%; background: currentColor;
  box-shadow: 0 -4px, 0 4px, 4px -4px, 4px 0, 4px 4px; margin-left: -2px; }
.drag-handle:focus-visible { opacity: 1; background: var(--blue-soft); }
@media (hover: hover) and (pointer: fine) { .drag-handle { opacity: 0; } [data-sort]:hover > * .drag-handle, [data-sort]:hover > .sec-top .drag-handle { opacity: .45; } .drag-handle:hover { opacity: 1; background: var(--blue-soft); } }
/* Eldeki panel: yükseltilir ve parmağı BİREBİR izler — buradaki transform'a geçiş konmaz,
   yoksa imlecin arkasında sürünür. Yavaşlatılacak olan bırakıştır, takip değil. */
.panel-drag { position: relative; z-index: 5; cursor: grabbing; box-shadow: 0 12px 28px rgba(22, 32, 46, .22);
  transition: box-shadow .18s var(--ease-out); transform-origin: top left; }
.panel-drag .drag-handle { opacity: 1; cursor: grabbing; }
/* Kardeşlerin boşluk açması ve elden çıkanın yuvasına oturması. Bilinçli olarak ağır: sıralama
   nadir yapılan bir düzenleme, acelesi yok. Sürüklerken panelin parmağı izlemesi bundan etkilenmez,
   orada hiç geçiş yoktur — yavaşlayan yalnızca bırakıştır. */
.panel-slide { transition: transform .38s var(--ease-out); }
.panel-settle { transition: transform .52s var(--ease-settle), box-shadow .52s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  /* Sıfır değil, yumuşak: yer değiştirme hâlâ görünür ama aşım yok, süre kısa. */
  .panel-slide, .panel-settle { transition: transform .16s var(--ease-out); }
  .panel-drag { box-shadow: 0 4px 12px rgba(22, 32, 46, .18); transition: none; }
}
.changed { animation: wash 1.2s ease-out; border-radius: 4px; }
/* Eşik aşımı: haritanın sonar halkası, bir kez. Eşiğin üstünde kalmak ise kutucuktaki led'in nabzı. */
@keyframes sonar { from { transform: scale(1); opacity: .6; } to { transform: scale(var(--sonar, 1.12)); opacity: 0; } }
.crossed { position: relative; }
.crossed::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--bad); pointer-events: none; animation: sonar 1.8s linear forwards; }
.figure.crossed { --sonar: 1.12; border-radius: 6px; }
.k8s-ident.crossed { --sonar: 3; }

@media (prefers-reduced-motion: reduce) {
  /* style.css'in reduced-motion kuralı bir liste, kalıtım yok: eklenen her sınıf buraya yazılır. */
  .sec-body, .sec-inner, .sec-caret, .chart-box canvas, .toast { transition: none !important; animation: none !important; }
  .chart-box canvas { opacity: 1; }
  .crossed::after { display: none; }
  .verdict .k8s-ident.bad, .sec-dot.blink { animation: none; }
  .alert-item.suppressed .led { animation: none; }
  .card.flash { animation: none; background-color: var(--blue-soft); }
  /* Değişim bilgidir, süs değil: hareket yerine 3 sn duran sabit bir yıkama (JS sınıfı kaldırır). */
  .changed { animation: none; background-color: var(--blue-soft); }
}

/* Grup seçici çipleri: kutunun altında var olan gruplar; seçili olan mavi. */
.pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.pick-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; transition: background .16s var(--ease-out), border-color .16s var(--ease-out), color .16s var(--ease-out), transform .12s var(--ease-out); }
.pick-chip i { font-style: normal; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pick-chip:hover { border-color: var(--blue); color: var(--blue-ink); }
.pick-chip:active { transform: scale(.97); }

/* --------------------------------------------------------------- basma geri bildirimi
   Geri bildirim bırakışta değil BASIŞTA gelir: parmak indiği anda bir şey olmazsa arayüz ölü
   hisseder, sayfanın değişmesini beklemek gecikmeyi görünür kılar. Düğmelerde bu zaten vardı;
   asıl tıklanan şeyler (tablo satırları, iz satırları, port kareleri, arama sonuçları, menü)
   sessizdi. Süre kasten kısa: 100 ms'in üstü basmayı değil animasyonu hissettirir.
   Satırlarda transform kullanılmaz — <tr> güvenilir biçimde dönüştürülemez, zemin kullanılır. */
tr.clickable td { transition: background .1s var(--ease-out); }
tr.clickable:active td { background: var(--blue-soft); }
.trail-item[data-http] { transition: background .1s var(--ease-out); border-radius: 6px; }
.trail-item[data-http]:active { background: var(--blue-soft); }
.hit { transition: background .1s var(--ease-out); }
.hit:active { background: var(--blue-soft); }
.port { transition: transform .1s var(--ease-out); }
.port:active { transform: scale(.92); }
.seg button:active { background: var(--card-2); }
.nav a:active { background: var(--card-2); }
.theme-btn:active, .drag-handle:active { transform: scale(.94); }
.chart-box { transition: transform .1s var(--ease-out); }
.chart-box:active { transform: scale(.995); }
@media (prefers-reduced-motion: reduce) {
  /* Ölçek hareketi kalkar, zemin geri bildirimi kalır: basıldığı yine görülmeli. */
  .port:active, .theme-btn:active, .drag-handle:active, .chart-box:active, .pick-chip:active { transform: none; }
}

/* --------------------------------------------------------------- saydamlık ve kontrast tercihleri
   Bulanık cam bir tercihtir, okunabilirlik değil. Sistem "saydamlığı azalt" diyorsa bulanıklık
   kalkar ve zemin katılaşır; "kontrastı arttır" diyorsa kenarlıklar mürekkebe yaklaşır. İkisi de
   azaltılmış hareketten bağımsız sinyallerdir ve ayrı ayrı gelebilir. */
@media (prefers-reduced-transparency: reduce) {
  .toast, .modal-backdrop, .search-pop, .login, .chart-zoom, .flip-rows th { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .toast { background: var(--ink); }
  .search-pop { background: var(--card); }
  .flip-rows th { background: var(--card); }
  .login { background: var(--paper); }
  [data-theme="dark"] .login { background: var(--paper); }
  .modal-backdrop, .chart-zoom { background: rgba(22, 32, 46, .92); }
  /* Arkadaki kabuk bulanıklıkla değil karartmayla geri çekilir. */
  .app.locked { filter: none; opacity: .35; }
}
/* --------------------------------------------------------------- parmakla kullanım
   Bu yoğun bir masaüstü panosu ve küçük düğmeler 24, sürükleme tutamağı 18 piksel; parmakla bunları
   vurmak şans işi. Her şeyi 44 piksele çıkarmak masaüstü düzenini bozardı, o yüzden büyüme yalnızca
   KABA işaretleyicide (dokunmatik) devreye girer. Görünmez bir isabet alanı yerine gerçek dolgu
   büyütülür: üst üste binen görünmez alanlar birbirinin tıklamasını çalar, panel başlığındaki üç
   düğme yan yana durduğu için bu somut bir risk. */
@media (pointer: coarse) {
  .btn.sm { padding: 9px 14px; font-size: 13.5px; }
  .flip-btn { padding: 9px 11px; }
  .drag-handle { width: 34px; height: 34px; }
  .theme-btn { width: 40px; height: 40px; }
  .seg button { padding: 9px 14px; }
  .pick-chip { padding: 8px 14px; }
  .nav a { padding: 11px 12px; }
}

@media (prefers-contrast: more) {
  .card, .login-card, .modal, .search-pop, .chart-zoom-card, .figures, .toolbar { border-color: var(--ink-3); }
  .btn, input, select, textarea { border-color: var(--ink-2); }
  .btn.quiet { border-color: var(--line); }
  th, td { border-bottom-color: var(--line); }
  .faint, .muted, .hint { color: var(--ink-2); }
  :focus-visible { outline-width: 3px; }
}
.pick-chip.on { background: var(--blue-soft); border-color: var(--blue); color: var(--blue-ink); }
.pick-chip.on i { color: inherit; }
.pick-chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .pick-chip { transition: none; } }

/* Kapasite tablosunda yakın tarih satırı hafifçe boyanır; rengi önem etiketi zaten söylüyor, satır yalnızca gözü oraya çeker. */
.sev-row-high td { background: var(--bad-soft, #fbe5e4); }
.sev-row-warn td { background: var(--warn-soft); }
tr.muted td { color: var(--ink-3); }
table.compact td { padding: 5px 8px; }
table.compact td:first-child { padding-left: 0; }

/* Telefon: kenar çubuğu tek satır (marka + Menü), gezinti düğmeyle açılır; pasif HA örneğinde üstte şerit. */
.nav-toggle { display: none; position: absolute; right: 12px; top: 12px; }
.ha-banner { background: var(--warn-ink-2); color: #fff; padding: 8px 28px; font-size: 13px; display: flex; gap: 12px; align-items: center; }
.ha-banner a { color: #fff; text-decoration: underline; }
.ha-banner .spacer { flex: 1; }
.ha-banner .btn.sm { color: #fff; background: transparent; border-color: rgba(255, 255, 255, .55); }
.admin-note { background: var(--blue-ink); }
/* Üst çubuktaki trafik kaynağı kaynağın seçildiği sayfaya gider; kaynak yokken "kullanılamıyor" yazısı çıkmaz sokaktı. */
#chip-capture { color: inherit; text-decoration: none; }
#chip-capture:hover { text-decoration: underline; }
/* Boş durumların başlangıç düğmeleri: pano, Cihazlar, harita. */
.start-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; justify-content: inherit; }
.empty .start-row { justify-content: center; }
@media (max-width: 800px) {
  .sidebar { position: relative; height: auto; }
  .nav-toggle { display: inline-flex; }
  .sidebar .nav, .sidebar .sidebar-foot { display: none; }
  .sidebar.open .nav { display: block; }
  .sidebar.open .sidebar-foot { display: grid; }
  .topbar { padding: 10px 14px; flex-wrap: wrap; }
  /* Üst çubuğun sağı tek satırdı ve sarmıyordu: 375px'te 609px'e taşıyor, tarayıcı bütün sayfayı ~%60'a küçültüyordu.
     Trafik kaynağı ve saat menünün altında zaten yazıyor, rol adı kullanıcı adının tekrarı; kalanlar sarar. */
  /* Telefonda ilk ekranda hüküm görünmüyordu: başlık satırı, zil/dil/tema satırı, kullanıcı satırı ve şerit ~650px yiyordu.
     Üst çubuk tek satır: başlık, arama, zil, Hesap, Çıkış. Dil ve tema giriş ekranından seçilir ve hatırlanır. */
  .topbar { flex-wrap: nowrap; gap: 8px; }
  .topbar h1 { font-size: 16px; white-space: nowrap; flex: 0 0 auto; }
  .gsearch { margin: 0; min-width: 0; flex: 1 1 auto; }
  .topbar-right { flex: 0 0 auto; gap: 8px; min-width: 0; }
  #chip-capture, #chip-time, #user-role, #user-name, .user-chip .led, .topbar-right .pref-row { display: none; }
  .user-chip { padding-left: 0; border-left: 0; gap: 4px; }
  .ha-banner { padding: 6px 12px; gap: 8px; }
  .ha-banner > span:first-child { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ha-banner > a { white-space: nowrap; }
  .verdict .verdict-bn .label { display: none; }
  .content { padding: 14px 12px 40px; gap: 12px; }
  .grid.two, .grid.three, .grid.wide-left { grid-template-columns: 1fr; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form { grid-template-columns: 1fr; }
  .ha-banner { padding: 8px 14px; }
}

/* Yoklama akışı tuvali: genişlik karta uyar, yükseklik sahnenin şerit sayısından gelir. */
canvas.packets { width: 100%; display: block; }
/* Yoklama akışının üstü: cihaz seçimi solda, genişlet/daralt sağda. */
.packets-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 6px; }
.packets-bar input { width: 250px; max-width: 100%; }
.packets-bar .spacer { flex: 1; }


/* ---------------------------------------------------------------- karanlık tema
   Aynı tasarım, aynı renk aileleri: mavi 215°, yeşil, kehribar, kırmızı hiç değişmez; yalnızca zemin
   koyulaşır ve vurgu renkleri koyu zeminde okunacak kadar açılır. Kartlar zemin üstünde bir ton açık,
   çizgiler karttan bir ton açık: açık temadaki katman sırası olduğu gibi korunur. */
[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0F1319;
  --card: #171C24;
  --card-2: #1C222B;
  --line: #2A323E;
  --line-2: #232A35;
  --ink: #E7EBF1;
  --ink-2: #AEB8C7;
  --ink-3: #8C97A8;
  --blue: #3B82F6;
  --blue-ink: #93C5FD;
  --blue-soft: #1E3A8A;
  --blue-line: #2563EB;
  --ok: #34D399;   --ok-soft: #064E3B;
  --warn: #FBBF24; --warn-soft: #78350F;
  --bad: #F87171;  --bad-soft: #7F1D1D;
  --off: #9CA3AF;  --off-soft: #374151;
  --ok-ink: #6EE7B7; --warn-ink: #FDE047; --warn-ink-2: #FDE047; --bad-ink: #FCA5A5;
  --impact-up: #E879F9; --impact-down: #22D3EE; --impact-down-ink: #67E8F9; --impact-root: #E7EBF1;
  --path: #A78BFA;
  --diff-new: #4ADE80; --diff-gone: #64748B;
  --notice-line: #B45309; --notice-ink: #FEF3C7; --error-line: #991B1B; --error-ink: #FEE2E2;
  --on-accent: #FFFFFF;
  --stage: #0F1319;
  --panel-glass: rgba(23, 28, 36, .92);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, .6), 0 2px 4px -2px rgba(0, 0, 0, .4);
}
[data-theme="dark"] .card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.35); }
[data-theme="dark"] .modal-backdrop { background: rgba(0,0,0,.6); }
[data-theme="dark"] .modal { box-shadow: 0 24px 60px rgba(0,0,0,.6); }
[data-theme="dark"] .toast { background: #E7EBF1; color: #0F1319; }
[data-theme="dark"] .toast .tag { background: rgba(0,0,0,.12); color: #0F1319; }
[data-theme="dark"] .notice code { background: rgba(0,0,0,.25); }
/* Orta siddet kendi renk ciftini tasidigi icin koyu temada da okunuyordu ama acik kavun rengi
   koyu tabloda yanip sonuyordu. Uyarinin kahverengisinden bir tik daha turuncu: iki siddet
   birbirine karismaz, ikisi de paletin icinde kalir. */
[data-theme="dark"] .tag.sev-AVERAGE, [data-theme="dark"] .tag.sev-MEDIUM { background: #7C2D12; color: #FDBA74; }
[data-theme="dark"] .verdict-problem.sev-MEDIUM, [data-theme="dark"] .verdict-problem.sev-AVERAGE { background: #40200C; }
[data-theme="dark"] .search-pop, [data-theme="dark"] .login-card { box-shadow: 0 20px 50px rgba(0,0,0,.55); }
[data-theme="dark"] .search-pop { background: rgba(23, 28, 36, 0.85); }
[data-theme="dark"] .modal-head { background: rgba(23, 28, 36, 0.85); }
[data-theme="dark"] .brand svg rect, [data-theme="dark"] .login-card .brand svg rect { fill: #5A8EE8; }
[data-theme="dark"] img, [data-theme="dark"] canvas.packets { color-scheme: dark; }
[data-theme="dark"] .health { background: var(--card); }
[data-theme="dark"] .loadbar { box-shadow: 0 0 8px rgba(90,142,232,.6); }
[data-theme="dark"] .nav-toggle, [data-theme="dark"] .btn { color: var(--ink); }
[data-theme="dark"] .btn.primary { color: var(--on-accent); }
[data-theme="dark"] .btn.danger { color: var(--bad-ink); }
[data-theme="dark"] .tag.sev-DISASTER, [data-theme="dark"] .tag.sev-CRITICAL, [data-theme="dark"] .nav-badge { color: var(--on-accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: light; } }

/* Tema ve dil düğmeleri (üst şerit ve giriş kartı) */
.pref-row { display: inline-flex; align-items: center; gap: 6px; }
.pref-row select { padding: 4px 8px; font-size: 12.5px; border-radius: 999px; background: var(--card-2); }
.theme-btn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--card-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; color: var(--ink-2); }
.theme-btn:hover { border-color: var(--blue); color: var(--blue); }
.theme-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-btn .sun { display: none; } [data-theme="dark"] .theme-btn .sun { display: block; } [data-theme="dark"] .theme-btn .moon { display: none; }
/* Dil ve tema, markanın SAĞINDA ve ayıraç çizgisinin ÜSTÜNDE durur. Önceden çizginin altına
   negatif kenar boşluğuyla çekiliyordu ve seçim kutusu çizginin üzerine biniyordu. Dar ekranda
   satır kırılır: iki denetim markanın altına iner, yine çizginin üstünde. */
.login-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
  padding-bottom: 18px; border-bottom: 1px solid var(--line-2); margin-bottom: 20px; }
.login-card .brand { padding: 0; border-bottom: none; flex: 1 1 auto; min-width: 0; }
.login-prefs { display: flex; align-items: center; flex: 0 0 auto; }


/* Tarayıcının kendi yüzeyleri de paletten: seçim, imleç, kaydırma çubuğu, tablo rakamları. */
::selection { background: var(--blue-soft); color: var(--ink); }
input, textarea { caret-color: var(--blue); }
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--off); background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }
table td { font-variant-numeric: tabular-nums; }
a { text-underline-offset: 2px; }

/* ---------------------------------------------------------------- kubernetes node: panel düzenleyici */
/* Seçilenler çip, mevcut olanlar gruplu onay kutusu; joker desen çipte farklı tonda durur ki gerçek ad sanılmasın. */
.mp-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 9px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-ink); font-family: var(--mono); font-size: 12px; font-weight: 500; }
.chip.pat { background: var(--warn-soft); color: var(--warn-ink-2); }
.chip button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; width: 18px; height: 18px; border-radius: 50%; padding: 0; }
.chip button:hover, .chip button:focus-visible { background: rgba(0,0,0,.1); outline: 0; }
.mp-list { max-height: 300px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r); padding: 8px 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1px 14px; align-content: start; }
.mp-list h4 { grid-column: 1 / -1; margin: 8px 0 2px; font: 600 11.5px var(--mono); letter-spacing: .03em; color: var(--ink-3); }
.mp-list h4:first-child { margin-top: 0; }
.mp-list .check { font-family: var(--mono); font-size: 12px; padding: 2px 0; font-weight: 400; }

/* denetim kaydı */
button.figure { font: inherit; color: inherit; text-align: left; background: transparent; border: none; border-right: 1px solid var(--line-2); cursor: pointer; }
button.figure:last-child { border-right: none; }
button.figure:hover { background: var(--card-2); }
button.figure:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.audit-bar select { max-width: 220px; }
.audit-bar input[type=search] { width: 240px; }
.audit-verify { margin-top: 12px; }
.audit-verify .notice { margin: 0; }
.audit-table td:first-child { white-space: nowrap; }
tr.au-row[aria-expanded="true"] td { background: var(--blue-soft); }
tr.au-row:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
tr.au-detail > td { background: var(--card-2); padding: 14px 20px 18px; white-space: normal; }
.au-detail-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px 28px; align-items: start; }
.au-detail-body .au-msg { grid-column: 1 / -1; margin: 0; }
.au-changes { width: 100%; }
.au-changes td { white-space: normal; word-break: break-word; vertical-align: top; }
.au-changes td.au-before { color: var(--ink-3); }
.au-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 5px 14px; margin: 0; font-size: 12.5px; }
.au-meta dt { color: var(--ink-3); }
.au-meta dd { margin: 0; word-break: break-word; }
.audit-foot { display: flex; align-items: center; gap: 10px; padding: 10px 20px; border-top: 1px solid var(--line-2); }
.audit-note { margin: 2px 4px 0; max-width: 100ch; }
@media (max-width: 760px) {
  .au-detail-body { grid-template-columns: 1fr; }
  .audit-bar select, .audit-bar input[type=search] { max-width: none; width: 100%; }
}
.au-transcript { grid-column: 1 / -1; }
.term-transcript { max-height: 60vh; margin: 12px 0 0; }
.au-transcript-meta { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); margin-bottom: 12px; }
@media (max-width: 760px) { .au-transcript-meta { grid-template-columns: max-content minmax(0, 1fr); } }

/* Servis ağacı */
.sv-members { display: grid; gap: 6px; margin-top: 6px; }
.sv-member { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sv-member .btn { margin-left: auto; }
.sv-add-row { gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.sv-add-row select { max-width: 100%; }
#sv-ref { min-width: min(220px, 100%); }
.sv-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; }

/* Ağ haritası: yönlü akış listesi */
.flow-list { display: grid; gap: 8px; }
.flow-row .tag { font-size: 11px; }
.flow-up { color: #1f8fd8; } .flow-down { color: #c87612; } .flow-err { color: var(--bad-ink); font-weight: 600; }

/* Yazılım haritası */
.sw-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
.sw-dot.ring { background: transparent; border: 2px solid var(--ok-ink); }
.sw-counts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 13px; }
.sw-ports { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.port-chip { font-family: var(--mono, monospace); font-size: 11.5px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line); background: var(--card); }
.port-chip i { font-style: normal; color: var(--ink-3); margin-left: 2px; }

/* Yazılım haritası: açıklama, kip ipucu, tablolar */
.sw-wrap { height: min(68vh, 760px); min-height: 420px; }
.sw-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.sw-steps > div { display: grid; gap: 4px; font-size: 13px; line-height: 1.45; }
.sw-role { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 4px; color: #fff; background: var(--c); white-space: nowrap; }
.port-chip.busy { border-color: var(--ok-ink); }
.sw-hint { position: absolute; left: 50%; transform: translateX(-50%); bottom: 14px; max-width: 90%; background: var(--card); border: 1px solid var(--line); padding: 6px 12px; border-radius: 6px; font-size: 13px; z-index: 6; }
.sw-kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 13px; margin: 8px 0; }
.sw-kv dt { color: var(--ink-2); }
tr.selected > td { background: color-mix(in srgb, var(--accent, #2f80c2) 12%, transparent); }

/* Yazılım haritası: araç kutusu (palet), teknoloji rozetleri, sağdaki kart. */
.sw-wrap { height: min(74vh, 820px); min-height: 480px; }
.sw-controls { left: 240px; right: 14px; }
.sw-wrap.pal-folded .sw-controls { left: 150px; }
#content[data-manage="no"] .sw-controls { left: 14px; }
.sw-palette { left: 14px; top: 14px; bottom: 14px; width: 214px; display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 8px; z-index: 4; }
.sw-palette.folded { bottom: auto; width: 124px; }
.sw-palette.folded .sw-pal-body { display: none; }
.sw-pal-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sw-pal-head h3 { margin: 0; }
.sw-pal-body { display: flex; flex-direction: column; gap: 6px; min-height: 0; flex: 1; }
.sw-pal-body input { width: 100%; }
.sw-pal-body p { margin: 0; }
#sw-pal-list { overflow-y: auto; overflow-x: hidden; min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; align-content: start; padding-right: 2px; }
.sw-pal-group summary { cursor: pointer; font-size: 12px; display: flex; align-items: center; gap: 6px; padding: 4px 2px; list-style: none; }
.sw-pal-group summary::-webkit-details-marker { display: none; }
/* Tek sütun kutuya sığar: "LDAP / Active Directory" gibi uzun bir ad sütunu genişletip portları kaydırma çubuğunun altına itiyordu. */
.sw-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; margin: 0 0 6px; }
.sw-tool { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 6px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ink); font: inherit; font-size: 12.5px; text-align: left; cursor: grab; transition: background .14s var(--ease-out), border-color .14s var(--ease-out), transform .12s var(--ease-out); }
.sw-tool:hover { background: var(--card); border-color: var(--line); }
.sw-tool:active { cursor: grabbing; transform: scale(.97); }
.sw-tool:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.sw-tool-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-tool i { flex: none; font-style: normal; font-family: var(--mono, monospace); font-size: 11px; color: var(--ink-3); }
.sw-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 18px; padding: 0 4px; border-radius: 4px; background: var(--c); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; vertical-align: middle; flex: none; line-height: 1; }
.sw-card { left: auto; right: 14px; top: var(--sw-card-top, 58px); bottom: auto; width: 320px; z-index: 5; }
.topo-card { max-height: calc(100% - 110px); overflow: auto; }
.topo-card { width: 340px; }
.topo-card .sw-kv { grid-template-columns: minmax(96px, auto) minmax(0, 1fr); }
/* Kartın üstü araç çubuğunun yüksekliğini izler (app.js --sw-card-top); alt sınır da onunla iner, yoksa uzun kartın düğme satırı
   haritanın kırpılan kenarının altında kalıyordu. */
.sw-card { max-height: calc(100% - var(--sw-card-top, 58px) - 14px); }
.topo-card .clickable { cursor: pointer; border-radius: 4px; }
.topo-card .clickable:hover, .flow-row.clickable:hover { background: var(--blue-soft); }
.flow-row.clickable { cursor: pointer; border-radius: 6px; padding: 4px; margin: -4px; }
@media (max-width: 700px) { .sw-controls, .sw-wrap.pal-folded .sw-controls { left: 14px; top: 58px; } .sw-card { top: var(--sw-card-top, 110px); max-height: calc(100% - var(--sw-card-top, 110px) - 14px); width: auto; left: 14px; } }
@media (prefers-reduced-motion: reduce) { .sw-tool { transition: none; } .sw-tool:active { transform: none; } }
/* Yazılım haritası: sağ tık menüsü, port yükü ve adres tabloları, gizlemeyi geri alma. */
.sw-menu { position: absolute; z-index: 9; min-width: 210px; max-width: 280px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 4px; display: grid; }
.sw-menu[hidden] { display: none; }
.sw-menu-head { padding: 6px 8px; font-size: 12.5px; border-bottom: 1px solid var(--line); margin-bottom: 4px; display: flex; gap: 6px; align-items: center; min-width: 0; }
.sw-menu-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-menu-item { text-align: left; background: transparent; border: 0; padding: 7px 10px; border-radius: 6px; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; }
.sw-menu-item:hover:not(:disabled), .sw-menu-item:focus-visible { background: var(--blue-soft); outline: none; }
.sw-menu-item.danger { color: var(--bad); }
.sw-menu-item:disabled { color: var(--ink-3); cursor: default; font-size: 12px; }
.sw-card { width: 390px; }
.sw-mini { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 4px; }
.sw-mini th, .sw-mini td { padding: 3px 4px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.sw-mini th { font-weight: 600; color: var(--ink-2); }
.sw-mini .num { text-align: right; white-space: nowrap; }
.sw-members { max-height: 240px; overflow: auto; }
.toast [data-undo-hide] { pointer-events: auto; margin-left: 8px; }

/* --------------------------------------------------------------- grafik lejantı
   Ham metrik adı yerine okunur ad, son değer, kısa açıklama; çok serili grafikte düğme (tıkla gizle). Çevrilen yüzün dışında
   durur. Koyu temada kart hafif ışıklı, değer ince parıltılı: göz önce sayıyı bulur. */
.chart-legend { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 6px; margin-top: 8px; color: var(--ink); font-size: 12px; }
.chart-legend:empty { display: none !important; }
.cl-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; padding: 6px 10px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--card-2); color: var(--ink); text-align: left; font: inherit; cursor: default; transition: border-color .15s var(--ease-out), opacity .15s var(--ease-out); }
button.cl-chip { cursor: pointer; }
button.cl-chip:hover { border-color: var(--line); }
button.cl-chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.cl-chip.off { opacity: .45; }
.cl-chip.off .cl-name > span { text-decoration: line-through; }
.cl-name { display: flex; align-items: center; gap: 6px; max-width: 100%; color: var(--ink-2); font-size: 11.5px; }
.cl-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-line { flex: none; }
.cl-val { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cl-hint { color: var(--ink-3); font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-solo { grid-column: 1 / -1; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; }
[data-theme="dark"] .cl-chip { background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01)); border-color: var(--line); }
[data-theme="dark"] .cl-val { text-shadow: 0 0 14px rgba(96, 165, 250, .28); }
@media print { .cl-chip { background: none; } }

/* Ajan güncellemeleri: ortam kartına bırakılan dosya (ajan ya da collector, Linux ya da Windows) ve sürüm blokları. */
.upd-drop-row { padding: 0 20px 12px; }
.file-pick {
  position: relative; display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 12px 14px; border: 1.5px dashed var(--line-2); border-radius: var(--r-lg); background: var(--card-2); cursor: pointer;
  transition: border-color .12s var(--ease-out), background-color .12s var(--ease-out);
}
.file-pick:hover, .file-pick.over, .file-pick:focus-within { border-color: var(--blue); background: var(--blue-soft); }
.file-pick.busy { border-style: solid; border-color: var(--blue-line); background: var(--blue-soft); cursor: progress; }
/* Girdi bütün alanı kaplar: tıklama da bırakılan dosya da ona düşer. */
.file-pick input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-pick .fp-icon { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: var(--card); border: 1px solid var(--line); color: var(--blue-ink); font-size: 18px; }
.file-pick .fp-text { display: grid; gap: 2px; min-width: 0; }
.file-pick .fp-text b { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-pick .fp-text small { color: var(--ink-2); font-size: 12.5px; }
.upd-block { padding: 0 20px 12px; }
.upd-block h3 { margin: 4px 0 6px; }
.upd-block p { margin: 0 0 6px; }
.upd-block .table-wrap { margin: 0; }
.upd-hours { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.upd-hours input[type="time"] { width: 104px; height: 30px; }
.upd-send select, .upd-send input[type="datetime-local"] { height: 30px; }
.upd-halt .btn { margin-left: 8px; }
/* Güncellemeler iki sayfa (ajanlar, collector); kartın içi numaralı bölümler: sürümler, kip, makineler. */
.upd-tabs button { padding: 6px 18px; font-size: 13.5px; }
.upd-sec { padding: 14px 20px 12px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.upd-sec > h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.upd-sec > h3 .n { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue-ink); font-size: 12px; font-weight: 600; }
.upd-sec > .toolbar { padding: 0; margin: 0; }
.upd-sec > .notice, .upd-sec > p { margin: 0; }
.upd-sec .table-wrap { margin: 0; }
.notice.warn { background: var(--warn-soft); border-color: var(--warn-line, var(--line)); color: var(--warn-ink); }

/* Haritada bul ve Sorunlar katmanı (iki harita ortak) */
/* Yalnız bul listesi açıkken (odak çubukta) kartın ve ipucunun üstüne çıkar; her zaman öyle olsa uzun ağ haritası kartının başlığı
   ve sahnenin üst kenarındaki ipuçları çubuğun altında kalıyordu. */
.topo-controls:focus-within { z-index: 7; }
.map-find { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.map-find input { width: 220px; max-width: 46vw; }
.map-find-n { font: 11.5px var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; min-width: 2.5em; }
.map-find-pop { position: absolute; top: calc(100% + 4px); left: 0; width: min(440px, 86vw); max-height: min(50vh, 360px); overflow: auto; z-index: 8; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 4px; }
.map-find-pop[hidden] { display: none; }
.map-find-pop .hit { grid-template-columns: 64px minmax(0, 1fr) auto; cursor: pointer; }
.map-find-pop .t .led { width: 8px; height: 8px; margin-right: 6px; }
.map-find-pop .none { padding: 8px 10px; font-size: 12px; color: var(--ink-2); }
.seg button:disabled { opacity: .45; cursor: default; }
.map-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--notice-line); background: var(--warn-soft); color: var(--warn-ink-2); font: 600 12px/18px var(--sans); cursor: pointer; }
.map-pill.bad { border-color: var(--error-line); background: var(--bad-soft); color: var(--bad-ink); }
.map-pill[hidden] { display: none; }
.map-pill .led { width: 8px; height: 8px; }
.led.find { background: var(--blue); }
.mh-why { display: grid; gap: 3px; margin: 4px 0; font-size: 12.5px; }
.mh-r, .mh-al { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.mh-r .led { width: 8px; height: 8px; align-self: center; }
.mh-r b { font-family: var(--mono); font-weight: 500; }
.mh-alerts { display: grid; gap: 3px; font-size: 12px; }
.mh-tip.bad { color: var(--bad-ink); } .mh-tip.warn { color: var(--warn-ink); }
.mh-list { display: grid; gap: 2px; }
.mh-row { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 8px; align-items: baseline; width: 100%; padding: 4px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.mh-row:hover, .mh-row:focus-visible { background: var(--blue-soft); }
.mh-row b, .mh-row .small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo-legend .lg { display: contents; }
.topo-legend .lg > div { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); white-space: nowrap; }
.topo-legend .lg > .note { display: block; white-space: normal; color: var(--ink-3); flex-basis: 100%; }
.topo-legend div.wrap { white-space: normal; flex-basis: 100%; }
.topo-wrap:not(.layer-problems) .lg-p, .topo-wrap.layer-problems .lg-t { display: none; }
.sw-legend { left: 240px; right: 420px; }
.sw-wrap.pal-folded .sw-legend { left: 150px; }
#content[data-manage="no"] .sw-legend { left: 14px; }
.sw-legend[hidden] { display: none; }
/* Lejant artık iki katmanda da görünür; ipucu onun üstünde durur. */
.sw-wrap .sw-hint { bottom: 64px; }
/* Sağdaki 420 px kartın yeridir; dizüstü ve tablet genişliğinde lejanta 60 px bırakıyordu. Açık kart (z-index 5) lejantın üstüne biner. */
@media (max-width: 1200px) { .sw-legend, .sw-wrap.pal-folded .sw-legend { right: 14px; } }
@media (max-width: 700px) { .map-find input { width: 150px; } .sw-legend, .sw-wrap.pal-folded .sw-legend { left: 14px; right: 14px; } }

/* ---------------------------------------------------------------- HTTP ayrıntısı, kurulamayan bağlantı, etki */
.hx { display: grid; gap: 4px; margin: 8px 0 2px; font-size: 12.5px; }
.hx-head { display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: baseline; }
.hx-bar { display: flex; gap: 1px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--line-2); }
.hx-bar > i { display: block; flex-basis: 0; min-width: 3px; }
.hx-bar .s2, .hx-bar .a-ok { background: var(--ok); } .hx-bar .s3 { background: var(--blue); } .hx-bar .s4 { background: var(--warn); }
.hx-bar .s5, .hx-bar .a-ref { background: var(--bad); } .hx-bar .s1 { background: var(--ink-3); }
/* Yanıtsız ve zaman aşımı çizgili: "hiçbir şey gelmedi" düz renkli bir yanıt sınıfıyla karışmasın. */
.hx-bar .s0 { background: repeating-linear-gradient(135deg, var(--off) 0 3px, var(--off-soft) 3px 6px); }
.hx-bar .a-to { background: repeating-linear-gradient(135deg, var(--bad) 0 3px, var(--bad-soft) 3px 6px); }
.hx-cls { display: flex; flex-wrap: wrap; gap: 2px 10px; font: 12px var(--mono); }
.hx-cls small { color: var(--ink-3); font-size: 11px; }
.hx-lat { display: flex; flex-wrap: wrap; gap: 2px 10px; } .hx-lat b { font-family: var(--mono); font-weight: 500; }
.hx-paths td.p { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brk { border-left: 3px dashed var(--bad); padding-left: 8px; }
.brk-hint { color: var(--bad-ink); font-weight: 500; font-size: 12px; }
.flow-brk { color: var(--bad-ink); font-weight: 600; white-space: nowrap; }
.port-chip.tried { text-decoration: line-through; border-style: dashed; border-color: var(--bad); color: var(--bad-ink); }
.imp-panel { right: 14px; top: 14px; width: 300px; max-height: calc(100% - 110px); overflow: auto; display: grid; gap: 6px; z-index: 4; }
.imp-panel[hidden] { display: none; }
/* Panel sağ sütunu geçici olarak alır. */
.topo-wrap.impact-on .topo-side { display: none; }
.sw-wrap .imp-panel { right: auto; left: 240px; top: var(--sw-card-top, 58px); max-height: calc(100% - var(--sw-card-top, 58px) - 80px); }
.sw-wrap.pal-folded .imp-panel { left: 150px; }
#content[data-manage="no"] .sw-wrap .imp-panel { left: 14px; }
.imp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.imp-sum { display: flex; gap: 6px; align-items: baseline; }
/* Sahnedeki halkalarla aynı biçim: etkilenen dolu (kesintisiz) halka, bağımlılık kesik halka, kök kendi renginde halka. */
.imp-key { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; vertical-align: middle; box-sizing: border-box; background: transparent; border: 2px solid var(--impact-up); }
.imp-key.down { border: 2px dashed var(--impact-down); }
.imp-key.root { border-color: var(--impact-root); }
.imp-list { display: grid; gap: 1px; }
.imp-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 6px; align-items: baseline; width: 100%; padding: 3px 4px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.imp-row:hover, .imp-row:focus-visible { background: var(--blue-soft); }
.imp-row.more { grid-template-columns: 1fr; color: var(--ink-2); }
.imp-main { min-width: 0; }
.imp-main b, .imp-main .small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-tags { display: inline-flex; gap: 4px; align-items: baseline; }
.imp-d { font: 600 11px var(--mono); text-align: right; } .imp-d.up, .imp-tip.up, .imp-in.up { color: var(--impact-up); } .imp-d.down, .imp-tip.down, .imp-in.down { color: var(--impact-down-ink); }
.imp-k { font-size: 11.5px; color: var(--ink-3); }
.imp-note { font-size: 12px; color: var(--ink-2); }
.imp-in { font-size: 12px; font-weight: 600; margin-top: 6px; }
/* 980 px: 340 px kart, 300 px panel ve boşluklar 280 px kenar çubuğuyla 962 px pencereden darda yan yana sığmaz. */
@media (max-width: 980px) { #topo-impact { top: auto; bottom: 60px; left: 14px; right: 14px; width: auto; max-height: 38%; } }
@media (max-width: 700px) { .sw-wrap .imp-panel { left: 14px; right: 14px; width: auto; top: auto; bottom: 60px; max-height: 38%; } }
/* Panel ve onu açan kart birlikte açıkken ayrı yer alır; yoksa kart panelin üstüne biner, panelin "Kapat"ı ya da kartın düğme satırı
   örtülürdü. Yazılım haritası 944 px'ten darsa (224 px kenar çubuğu ve 56 px boşlukla 1224 px pencere) sağ sütun bölünür: panel üstte,
   kart altta. Telefonda panel altta kalır, kart onun üstünde biter. Ağ haritasında panel alta indiğinde kart onun üstüne kalkar. */
@media (min-width: 701px) and (max-width: 1224px) {
  .sw-wrap.impact-on:has(.sw-card:not([hidden])) .imp-panel { left: auto; right: 14px; width: 390px; max-height: calc(55% - var(--sw-card-top, 58px) - 22px); }
  .sw-wrap.impact-on:has(.sw-card:not([hidden])) .sw-card { top: auto; bottom: 14px; max-height: 45%; }
}
@media (max-width: 700px) {
  .sw-wrap.impact-on:has(.sw-card:not([hidden])) .imp-panel { max-height: 30%; }
  .sw-wrap.impact-on:has(.sw-card:not([hidden])) .sw-card { max-height: calc(70% - 68px - var(--sw-card-top, 110px)); }
}
@media (max-width: 980px) { .topo-wrap.impact-on .topo-card { bottom: calc(38% + 68px); max-height: calc(62% - 94px); } }
/* Yol izleme (ağ haritası). Panel etki panelinin yerini ve biçimini paylaşır; ikisi aynı anda açık olmaz. Uç kutularının öneri listesi
   panelin içinde akar: panel kaydırılabilir olduğu için mutlak konumlu liste kesilirdi. */
.topo-wrap.path-on .topo-side { display: none; }
.path-panel .path-sel { display: grid; gap: 6px; }
.path-panel .path-sel[hidden], .path-panel .path-pick[hidden] { display: none; }
.path-panel .map-find { display: flex; flex-wrap: wrap; }
.path-panel .map-find input { flex: 1; width: auto; max-width: none; min-width: 0; }
.path-panel .map-find-pop { position: static; width: 100%; max-height: 220px; }
.path-body { display: grid; gap: 6px; }
.path-body:empty { display: none; }
.path-acts { display: inline-flex; gap: 2px; flex: none; }
.path-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 6px; align-items: baseline; width: 100%; padding: 3px 4px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.path-row:hover, .path-row:focus-visible { background: var(--blue-soft); }
.path-row.lost { cursor: default; }
.path-row.lost:hover { background: transparent; }
.path-n { font: 600 11px var(--mono); color: var(--path); text-align: right; }
.path-src { background: transparent; border: 1px solid var(--path); color: var(--path); }
.path-src.guess { border-style: dashed; color: var(--ink-2); }
.path-pick { padding: 6px 8px; border-radius: 6px; background: var(--blue-soft); }
.if-wrap { overflow-x: auto; }
.if-table { width: 100%; }
.if-table td, .if-table th { padding: 2px 6px; font-size: 12px; }
.if-row { margin-top: 2px; }
#topo-path-btn[aria-pressed="true"] { border-color: var(--path); color: var(--path); }
@media (max-width: 980px) {
  #topo-path { top: auto; bottom: 60px; left: 14px; right: 14px; width: auto; max-height: 38%; }
  .topo-wrap.path-on .topo-card { bottom: calc(38% + 68px); max-height: calc(62% - 94px); }
}
@media (max-width: 700px) { .topo-wrap .path-panel { left: 14px; right: 14px; width: auto; top: auto; bottom: 60px; max-height: 38%; } }

/* ---------------------------------------------------------------- harita geçmişi ve karşılaştırma (iki harita) */
/* Zaman çizelgesi lejantın üstünde tek satırdır, dar ekranda kırılır. Kart ve ipucu açıkken onun üstüne kalkar. */
.map-hist { left: 14px; right: 14px; bottom: 50px; padding: 6px 10px; z-index: 4; display: grid; gap: 2px; }
.map-hist[hidden] { display: none; }
.mh-row1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mh-mode { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); font: 600 12px/18px var(--sans); white-space: nowrap; }
.mh-mode .led { width: 8px; height: 8px; }
.mh-mode.live { color: var(--ok-ink); }
.mh-mode.past { color: var(--warn-ink-2); background: var(--warn-soft); border-color: var(--notice-line); }
.mh-mode.cmp { color: var(--blue-ink); background: var(--blue-soft); border-color: var(--blue-line); }
.mh-strip { position: relative; flex: 1 1 240px; min-width: 160px; height: 28px; border-radius: 6px; background: var(--card-2); border: 1px solid var(--line); }
.mh-strip svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 6px; }
/* Kaydırıcı şeridin üstünde saydamdır; tutamak şeridin boyu kadar ince bir çizgidir ki altındaki çizgi okunsun. */
.mh-strip input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.mh-strip input[type=range]::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.mh-strip input[type=range]::-moz-range-track { height: 100%; background: transparent; }
.mh-strip input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 6px; height: 28px; border-radius: 3px; background: var(--ok); border: 1px solid var(--card); box-shadow: 0 0 0 1px var(--ink-3); }
.mh-strip input[type=range]::-moz-range-thumb { width: 6px; height: 26px; border-radius: 3px; background: var(--ok); border: 1px solid var(--card); box-shadow: 0 0 0 1px var(--ink-3); }
.topo-wrap.hist-past .mh-strip input[type=range]::-webkit-slider-thumb { background: var(--warn); }
.topo-wrap.hist-past .mh-strip input[type=range]::-moz-range-thumb { background: var(--warn); }
.mh-strip input[type=range]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.mh-strip input[type=range]:disabled { cursor: default; }
.mh-line { fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-linejoin: round; }
.mh-brk { fill: var(--bad); }
.mh-chg { fill: var(--ink); }
.mh-hatch { fill: var(--line); }
.mh-coarse { fill: var(--line-2); }
.mh-flags { position: absolute; inset: 0; pointer-events: none; }
.mh-flag { position: absolute; top: -11px; transform: translateX(-50%); pointer-events: auto; padding: 0 4px; border: 1px solid var(--blue-line); border-radius: 4px; background: var(--card); color: var(--blue-ink); font: 600 11px/14px var(--sans); cursor: pointer; white-space: nowrap; }
.mh-when { min-width: 9em; font: 12px var(--mono); color: var(--ink-2); }
.mh-cap[hidden] { display: none; }
/* Liste düğmeye değil çubuğa göre yerleşir: satır kırılıp düğme başa düşünce düğmenin sağ kenarına bağlı liste soldan kırpılıyordu. */
.mh-diffwrap { position: static; display: inline-flex; }
.mh-diff.bad { border-color: var(--error-line); color: var(--bad-ink); }
/* Liste yukarı açılır: çubuk haritanın altında. */
.map-find-pop.mh-pop { top: auto; bottom: calc(100% + 6px); left: auto; right: 0; width: 460px; max-width: 100%; }
.mh-pop .hit { grid-template-columns: 18px minmax(0, 1fr) auto; cursor: pointer; }
.mh-pop-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 4px 6px 6px; font-size: 12.5px; }
.mh-pop-head .btn { margin-left: auto; }
.mh-key { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; flex: none; box-sizing: border-box; color: #fff; font: 700 10px/1 var(--sans); vertical-align: middle; }
/* Sahnedeki işaretlerin sabit renkleri (diffMaterials), iki temada da: koyu temanın açık belirteçleri üstünde beyaz ▲/▼ okunmuyordu. */
.mh-key.new { background: #16a34a; }
.mh-key.gone { background: transparent; border: 2px dashed var(--diff-gone); }
.mh-key.worse { background: #c27a00; }
.mh-key.worse.bad { background: #d0433f; }
.mh-key.better { background: #1e9a55; }
.mh-dline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 2px 0; font-size: 12.5px; }
.tag.mh-tag.new { background: var(--ok-soft); color: var(--ok-ink); }
.tag.mh-tag.gone { background: var(--off-soft); color: var(--ink-2); }
.tag.mh-tag.worse { background: var(--bad-soft); color: var(--bad-ink); }
.tag.mh-tag.better { background: var(--ok-soft); color: var(--ok-ink); }
.hist-line { color: var(--warn-ink); font-weight: 600; }
.topo-legend .mh-key { width: 14px; height: 14px; }
/* Geçmiş görünüm karıştırılmasın: sahnenin çevresinde sarı halka. Tuval kutunun zeminini örttüğü için içe gölge değil üst katman. */
.topo-wrap.hist-past::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--warn); border-radius: inherit; pointer-events: none; z-index: 3; }
/* Yalnız ağ haritasının kartı: yazılım kartı üstten asılıdır (.sw-card) ve alt sınır verilince boş kart bile tam boy uzuyordu. Boy sınırı
   alt kenarla birlikte iner, yoksa uzun kartın başlığı ve "Geçmiş görünüm" satırı haritanın üstünden taşıp kırpılıyordu. */
.topo-wrap.hist-open #topo-card { bottom: 150px; max-height: calc(100% - 176px); }
/* Açık lejant zaman çizelgesinin altında kalıyordu (Karşılaştırma bölümü dahil); açıkken üste çıkar. */
.topo-legend[open] { z-index: 5; }
/* Geçmiş kipte istenen anın kaydı yoksa sahnede canlı resim kalır; o an sanılmasın diye soluk. */
.topo-wrap.hist-none canvas { opacity: .25; filter: grayscale(1); }
.topo-wrap.hist-open .sw-hint { bottom: 150px; }
.topo-wrap.hist-open .imp-panel, .topo-wrap.hist-open .topo-side { max-height: calc(100% - 180px); overflow: auto; }
.sw-wrap.hist-open .sw-card { max-height: calc(100% - var(--sw-card-top, 58px) - 140px); }
.sw-wrap .map-hist { left: 240px; }
.sw-wrap.pal-folded .map-hist { left: 150px; }
/* Geçmiş görünümde araç kutusu kalkar (salt okunur); çubuklar onun yerini alır. */
.sw-wrap.pal-off .map-hist, .sw-wrap.pal-off .sw-controls, .sw-wrap.pal-off .sw-legend, .sw-wrap.pal-off .imp-panel, #content[data-manage="no"] .sw-wrap .map-hist { left: 14px; }
[id$="-hist-btn"].active { border-color: var(--warn); color: var(--warn-ink); }
/* Oynat, hemen yanındaki ◀/▶ (tek kayıt) düğmeleriyle karışmasın: mavi çerçeve, oynarken dolu. */
.mh-play { min-width: 2.4em; border-color: var(--blue-line); color: var(--blue-ink); }
.mh-play.active { background: var(--blue-soft); }
.mh-speeds button { font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .map-hist, .sw-wrap .map-hist, .sw-wrap.pal-folded .map-hist { left: 14px; right: 14px; }
  .mh-strip { flex-basis: 100%; order: 5; }
  .mh-when { min-width: 0; }
  .topo-wrap.hist-open #topo-card { bottom: 190px; max-height: calc(100% - 216px); }
}
/* Yol ya da etki paneli açıkken kartın yeri onlarındır (yukarıdaki 980 px kuralları); zaman çizelgesi bunu ezmesin. */
@media (max-width: 980px) {
  .topo-wrap.hist-open.path-on #topo-card, .topo-wrap.hist-open.impact-on #topo-card { bottom: calc(38% + 68px); max-height: calc(62% - 94px); }
}
@media (prefers-reduced-motion: reduce) { .map-hist * { transition: none !important; } }

/* --------------------------------------------------------------- menü bölümleri (katlanır)
   Altı bölüm; başlık düğmedir. Kapalı bölümde rozetli (görünür rozetli) bir sayfa varsa başlıktaki nokta yanar. */
.nav-sec[hidden] { display: none; }
button.nav-group { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit; padding: 6px 8px 4px; border-radius: 6px; }
button.nav-group:hover { color: var(--ink-2); }
button.nav-group:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
button.nav-group::after { content: ""; margin-left: auto; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .18s var(--ease-out); opacity: .7; }
.nav-sec.closed > button.nav-group::after { transform: rotate(-45deg); }
.nav-sec.closed > a { display: none; }
.nav-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bad); display: none; }
.nav-sec.closed:has(> a:not([hidden]) .nav-badge:not([hidden]):not(.info)) .nav-dot { display: inline-block; }
@media (prefers-reduced-motion: reduce) { button.nav-group::after { transition: none; } }

/* --------------------------------------------------------------- bildirim zili ve tek açılır baloncuk */
.bell-wrap { position: relative; display: inline-flex; }
.bell-btn { position: relative; }
.bell-count { position: absolute; top: -5px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad); color: #fff; font-size: 10.5px; font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.bell-pop { position: absolute; top: 40px; right: -8px; width: min(420px, calc(100vw - 32px)); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 14px 40px rgba(22,32,46,.18); z-index: 40; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: min(70vh, 560px); color: var(--ink); }
.bell-pop[hidden] { display: none; }
.bell-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 14px 8px; border-bottom: 1px solid var(--line-2); }
.bell-list { overflow: auto; padding: 4px; }
.bell-item { display: grid; grid-template-columns: 76px auto 1fr; gap: 8px; align-items: baseline; padding: 8px 10px; border-radius: var(--r); color: var(--ink); font-size: 13px; }
.bell-item:hover, .bell-item:focus-visible { background: var(--card-2); text-decoration: none; }
.bell-item .t { color: var(--ink-3); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bell-item.bad .t { color: var(--bad-ink); font-weight: 500; }
.bell-item .m { min-width: 0; overflow-wrap: anywhere; }
.bell-mode { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px 12px; border-top: 1px solid var(--line-2); font-size: 12.5px; color: var(--ink-2); }
.bell-mode select { font-size: 12.5px; max-width: 60%; }
[data-theme="dark"] .bell-pop { box-shadow: 0 20px 50px rgba(0,0,0,.55); }
.toast.note .msg { min-width: 0; }
.toast .note-open { pointer-events: auto; margin-left: auto; background: none; border: 0; padding: 0 0 0 8px; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
@media (max-width: 800px) { .bell-pop { position: fixed; top: 64px; right: 16px; } }
/* Makine 360 tek hüküm: "Dikkat" sarı (sorun var ama makine erişilebilir). İz başlığındaki kapsam seçici başlığın sağında. */
.verdict .value.warn { color: var(--warn-ink); }
.verdict .value.mid { color: #8A3E00; }
[data-theme="dark"] .verdict .value.mid { color: #FDBA74; }
#ad-alerts-card:focus { outline: none; }
#ad-alerts-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
#ad-scope i { font-style: normal; font-size: 11px; color: var(--ink-3); margin-left: 4px; font-variant-numeric: tabular-nums; }

/* Makine 360 kutucukları: yalnız söyleyecek bir şeyi olan kutucuk; sıfırlar tek sakin satırda. */
.ad-figs { display: grid; gap: 10px; }
.ad-figs[hidden] { display: none; }
.ad-figs .figure .sub { white-space: normal; }
/* Adres geçmişi katının içi tek sütun: iki tablo yan yana 580px'te iç kaydırma çubuklarıyla sıkışıyordu. */
.ad-bind-body { display: grid; gap: 14px; }
.ad-quiet { margin: 0 2px; font-size: 12.5px; color: var(--ink-2); }
.ad-quiet > span:first-child { color: var(--ink-3); }