/* NEONET AP Paneli — arayüz stilleri.
   Tek dosyada toplanır; bölümler yorum başlıklarıyla ayrılmıştır. */
/* Renkler logodan geliyor: lacivert #11102b gövde, turuncu #ec7908 vurgu.
   Sol menü HER İKİ temada da lacivert — panelin kimliği orada duruyor, tema
   değiştirince marka değişmesin diye menünün kendi değişkenleri var. */
:root{
  --navy:#11102b; --navy-2:#1b1a3d; --orange:#ec7908;
  /* sol menü — temadan bağımsız */
  --nav-bg:#11102b; --nav-bg-2:#1b1a3d; --nav-fg:#f2f4f9; --nav-fg-2:#a8adc6;
  --nav-line:#272648; --nav-accent:#f9a03f;

  --bg:#0e1217; --bg-2:#151b23; --bg-3:#1c242e; --line:#26303c;
  --fg:#e6edf3; --fg-2:#9aa7b4; --fg-3:#6b7986;
  --ok:#2ea043; --ok-bg:#0f2a17; --warn:#d89614; --warn-bg:#2c2008;
  --crit:#e5534b; --crit-bg:#2d1414; --info:#4c8eda; --info-bg:#101f30;
  --accent:#58a6ff; --shadow:0 8px 30px rgba(0,0,0,.55);
  --skel:linear-gradient(90deg,var(--bg-3) 25%,var(--bg-2) 37%,var(--bg-3) 63%);
  --th-bg:#1b1a3d; --th-bg-2:#262450; --th-fg:#d9dcea; --th-line:#ec7908;
  --zebra:#121820;
}
/* Açık tema: sayfa açık gri, kutular beyaz. Her yeri beyaz yapmak kartların
   sınırını yok ediyordu; zemin gri olunca beyaz kart kendiliğinden ayrılıyor. */
:root[data-theme="light"]{
  --bg:#eceff4; --bg-2:#ffffff; --bg-3:#f2f5f9; --line:#dde3ea;
  --fg:#16192a; --fg-2:#4e5766; --fg-3:#79828f;
  --ok:#1a7f37; --ok-bg:#e6f4ea; --warn:#9a6700; --warn-bg:#fdf3d7;
  --crit:#c93c37; --crit-bg:#fdecea; --info:#0b64c0; --info-bg:#e7f0fb;
  --accent:#2b3a8f; --shadow:0 6px 22px rgba(17,16,43,.10);
  /* v5.30: tablo başlık şeridi ve zebra — kutular canlı dursun */
  --th-bg:#1b1a3d; --th-bg-2:#262450; --th-fg:#d9dcea; --th-line:#ec7908;
  --zebra:#f7f9fc;
  --skel:linear-gradient(90deg,#e6eaf1 25%,#f6f8fb 37%,#e6eaf1 63%);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font:14px/1.5 Roboto,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}
button,select,input,textarea{font:inherit;color:inherit}
.btn{background:var(--bg-3);border:1px solid var(--line);border-radius:7px;padding:6px 12px;cursor:pointer}
.btn:hover{border-color:var(--accent)}
.btn:disabled{opacity:.5;cursor:default}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.pri:hover{filter:brightness(1.08)}
.btn.danger{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 45%,transparent)}
.btn.sm{padding:3px 9px;font-size:12.5px}
input,select,textarea{background:var(--bg-3);border:1px solid var(--line);border-radius:7px;padding:6px 10px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
label.f{display:block;margin-bottom:10px}
label.f span{display:block;font-size:12px;color:var(--fg-2);margin-bottom:3px}
label.f .hint{font-size:11.5px;color:var(--fg-3);margin-top:3px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.spacer{flex:1}
.sub{color:var(--fg-3);font-size:11.5px}
.mut{color:var(--fg-2)}
.dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
.dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)}
.dot.crit{background:var(--crit)} .dot.off{background:var(--fg-3)}
.pill{display:inline-block;padding:1px 7px;border-radius:999px;font-size:11.5px;font-weight:600}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.crit{background:var(--crit-bg);color:var(--crit)}
.pill.info{background:var(--info-bg);color:var(--info)}
.pill.na{background:var(--bg-3);color:var(--fg-3)}
.g-ok{color:var(--ok)} .g-warn{color:var(--warn)} .g-crit{color:var(--crit);font-weight:600}
.g-na{color:var(--fg-3)}
.tag{display:inline-block;padding:1px 6px;border-radius:5px;background:var(--bg-3);
  border:1px solid var(--line);font-size:11px;color:var(--fg-2)}

/* ---- giriş ekranı: solda geniş marka alanı (akan fiber ışıkları), sağda
   zemine oturan form. Mobilde tek sütuna iner, marka üstte ince şerit olur. */
#login{display:grid;grid-template-columns:70% 30%;min-height:100vh;min-height:100dvh}

.loginbrand{position:relative;overflow:hidden;
  background:
    radial-gradient(1000px 700px at 20% 15%, rgba(236,121,8,.22), transparent 62%),
    radial-gradient(800px 600px at 80% 90%, rgba(88,166,255,.16), transparent 62%),
    linear-gradient(145deg,#08081a 0%,#11102b 45%,#1d1c45 100%);
  display:flex;align-items:flex-end;padding:48px 56px}

.loginbrand::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;z-index:3;
  background:linear-gradient(90deg,transparent,var(--orange),transparent);opacity:.75}
.loginbrand::after{content:"";position:absolute;width:620px;height:620px;
  right:-200px;bottom:-240px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(236,121,8,.26),transparent 65%);
  filter:blur(50px);animation:brandpulse 7s ease-in-out infinite}
@keyframes brandpulse{0%,100%{opacity:.55;transform:scale(1)}
                      50%   {opacity:.95;transform:scale(1.08)}}

.loginfiber{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.loginfiber .beam{stroke-dasharray:150 1200;animation:beamrun linear infinite}
.loginfiber .b1{animation-duration:9s}
.loginfiber .b2{animation-duration:12s;animation-delay:-3s}
.loginfiber .b3{animation-duration:10.5s;animation-delay:-6s}
.loginfiber .b4{animation-duration:14s;animation-delay:-2s}
@keyframes beamrun{from{stroke-dashoffset:1350}to{stroke-dashoffset:0}}
.loginfiber .np{filter:drop-shadow(0 0 6px currentColor);opacity:.9}

/* text-transform:uppercase KULLANILMIYOR: sayfa lang="tr" olduğu için tarayıcı
   "i" harfini "İ" yapıyordu (MONİTORİNG). Metin HTML'de zaten büyük harf.
   Akan hatlardan biri yazının üstünden geçtiği için gölge var. */
.loginbrandtext{position:relative;z-index:2}
.loginbrandtext strong{display:block;color:#fff;font-weight:500;font-size:19px;
  letter-spacing:.34em;line-height:1.4;
  text-shadow:0 2px 20px rgba(8,8,26,.95), 0 0 8px rgba(8,8,26,.7);
  font-family:"Segoe UI Semilight","Segoe UI",Inter,ui-sans-serif,system-ui,sans-serif}

.loginforms{display:flex;align-items:center;justify-content:center;
  padding:32px 28px;background:var(--bg)}

/* Alanlar: büyük, zemine gömülü, solunda ikon */
#login .f{display:block;margin-bottom:12px}
#login .f > span{display:none}
#login input{height:54px;width:100%;border:1px solid transparent;border-radius:9px;
  background:var(--bg-3);padding:0 16px;font-size:15px}
#login input::placeholder{color:var(--fg-3)}
#login input:focus{outline:none;border-color:var(--orange);background:var(--bg-2)}
#login .f.ico{position:relative}
#login .f.ico input{padding-left:48px}
#login .f.ico::before{content:"";position:absolute;left:16px;top:50%;
  width:18px;height:18px;transform:translateY(-50%);pointer-events:none;
  background-repeat:no-repeat;background-size:contain;opacity:.6}
#login .ico-user::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7986'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4.4 3.6-8 8-8s8 3.6 8 8z'/%3E%3C/svg%3E")}
#login .ico-lock::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7986'%3E%3Cpath d='M17 9V7a5 5 0 0 0-10 0v2H5v12h14V9zM9 7a3 3 0 0 1 6 0v2H9z'/%3E%3C/svg%3E")}

#loginForm .linkbtn.forgot{display:block;width:auto;margin:4px 0 20px auto;
  text-align:right;font-size:12.5px;color:var(--fg-3);text-decoration:none;
  background:none;border:0;padding:0;cursor:pointer}
#loginForm .linkbtn.forgot:hover{color:var(--fg-2)}

/* Giriş düğmesi logo laciverti */
#login .btn.pri{width:100%;height:52px;font-weight:600;font-size:15px;
  border-radius:9px;background:var(--navy);border-color:var(--navy);color:#fff}
#login .btn.pri:hover{background:var(--navy-2);border-color:var(--navy-2)}

/* Form altındaki ikincil bağlantılar: düğme gibi değil, sade metin */
#login .linkbtn.backlink{display:inline-block;width:auto;margin:14px auto 0;
  background:none;border:0;padding:4px 2px;cursor:pointer;
  font-size:13px;color:var(--fg-3);text-decoration:none}
#login .linkbtn.backlink:hover{color:var(--orange)}
#login .loginfoot{justify-content:center;gap:18px;margin-top:4px}
#login .codebox{text-align:center;letter-spacing:.5em;font-size:18px}

/* Sağ taraf ZEMİNE oturur — kart, çerçeve, gölge yok. Kutu içinde kutu
   görüntüsü oluşuyordu. Üstteki turuncu şerit de kaldırıldı. */
#login .card{background:none;border:0;border-top:0;border-radius:0;
  box-shadow:none;padding:0;width:100%;max-width:340px}
#login .card::before,#login .card::after{display:none}
#login .logo{display:block;height:58px;width:auto;margin:0 auto 42px}
#login h1{display:none}
/* v5.39: `p` TÜMÜYLE gizlenmiyor. 2FA ve parola sıfırlama ekranlarındaki
   açıklama satırı ("kod şu numaraya gönderildi") bilgi taşıyor; onu gizlemek
   kullanıcıyı kodun nereye gittiğini bilmeden bırakıyordu. Yalnızca giriş
   formundaki tanıtım cümlesi kalkıyor. */
#loginForm p{display:none}
#twofaForm p,#forgotForm p{margin:0 0 20px;color:var(--fg-3);font-size:12.5px;
  text-align:center}
#twofaForm h1,#forgotForm h1{display:block;margin:0 0 6px;font-size:16px;
  text-align:center;color:var(--fg-2);font-weight:600}

/* --- mobil: tek sütun, marka üstte şerit --- */
@media(max-width:860px){
  #login{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .loginbrand{padding:18px 22px;min-height:120px;align-items:flex-end}
  .loginbrand::after{display:none}
  .loginbrandtext strong{font-size:13px;letter-spacing:.26em}
  .loginforms{padding:34px 22px;align-items:flex-start}
  #login .card{max-width:420px;margin-top:8px}
  #login .logo{height:46px;margin-bottom:30px}
  #login input{height:50px;font-size:16px}   /* 16px: iOS yakınlaştırmasın */
}
@media(max-width:400px){
  .loginbrand{min-height:96px;padding:14px 18px}
  #login .logo{height:40px;margin-bottom:24px}
}
@media(prefers-reduced-motion:reduce){
  .loginfiber .beam,.loginbrand::after,.loginfiber .np{animation:none}
}

/* ---- logo ---- */
.logo{height:26px;width:auto;display:block;flex:none}
#nav .logo{height:48px}
.logo-light{display:none}
.logo-mark{display:none}
:root[data-theme="light"] .logo-dark{display:none}
:root[data-theme="light"] .logo-light{display:block}
.brandwrap{display:flex;align-items:center;gap:11px;min-width:0}
.brandwrap .divider{width:1px;height:20px;background:var(--line);flex:none}
.brandwrap .title{font-weight:600;font-size:13.5px;color:var(--fg-2);white-space:nowrap}
.brandwrap .ver{font-size:11px;color:var(--fg-3);font-variant-numeric:tabular-nums}
/* Sürüm artık logonun yanında değil, menü altlığında duruyor */
.navfoot .ver{font-size:11px;color:var(--fg-3);font-variant-numeric:tabular-nums;
  white-space:nowrap}

/* ---- kabuk: solda menü, üstte arama + kullanıcı ---- */
#app{display:flex;height:100vh}
#nav{width:280px;flex:none;background:var(--nav-bg);border-right:1px solid var(--nav-line);
  display:flex;flex-direction:column;min-height:0;position:relative;color:var(--nav-fg)}
#nav::after{content:"";position:absolute;top:0;bottom:0;right:-1px;width:2px;
  background:linear-gradient(180deg,#f07c1a,#e8571a 32%,transparent 72%);opacity:.8}
/* Logo ortada — yanında sürüm yazısı yok, o menü altlığına indi */
#nav .brandwrap{padding:20px 16px 18px;border-bottom:1px solid var(--nav-line);
  justify-content:center;gap:10px}
/* Menü lacivert olduğu için orada her zaman beyaz yazılı logo durur */
#nav .logo-light{display:none !important}
#nav .logo-dark{display:block !important}
nav{display:flex;flex-direction:column;gap:4px;padding:14px 12px;overflow-y:auto;flex:1}
/* v5.30: sol menü BÜYÜK HARF. Türkçe'de CSS'in text-transform'u i -> I yapar
   (İ değil); bu yüzden metinler büyük harfe JS tarafında, Türkçe kurala göre
   çevrilir. Burada yalnızca harf aralığı ve boyut ayarlanır. */
nav button{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  background:none;border:1px solid transparent;border-radius:11px;padding:11px 14px;
  cursor:pointer;color:var(--nav-fg-2);font-size:13.5px;font-weight:500;
  letter-spacing:.055em;position:relative;
  transition:background .13s,color .13s,border-color .13s}
nav button:hover{color:var(--nav-fg);background:var(--nav-bg-2)}
nav button.on{background:var(--nav-bg-2);
  border-color:color-mix(in srgb,var(--nav-accent) 40%,transparent);color:var(--nav-fg);
  font-weight:700}
nav button .lbl{flex:1;min-width:0}
/* Seçili satırın solunda ince turuncu şerit — hangi ekranda olduğunuz uzaktan belli */
nav button.on::before{content:"";position:absolute;left:-12px;top:50%;
  transform:translateY(-50%);width:4px;height:24px;border-radius:0 4px 4px 0;
  background:var(--nav-accent);box-shadow:0 0 10px color-mix(in srgb,var(--nav-accent) 55%,transparent)}
nav button .ic{width:24px;height:24px;flex:none;display:flex;align-items:center;
  justify-content:center;opacity:.72;transition:opacity .13s}
nav button:hover .ic{opacity:.95}
nav button.on .ic{opacity:1;color:var(--nav-accent)}
.svgic{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
nav button .caret{margin-left:auto;font-size:11px;opacity:.55;transition:transform .16s}
nav button.open .caret{transform:rotate(90deg)}
.subitems{display:flex;flex-direction:column;gap:3px;margin:4px 0 8px 25px;
  border-left:2px solid var(--nav-line);padding-left:11px}
.subitems button{padding:8px 12px;font-size:12.5px;font-weight:500;border-radius:9px;
  gap:11px;letter-spacing:.05em}
.subitems button .ic{width:19px;height:19px;opacity:.6}
.subitems button.on{background:var(--nav-bg-2);border-color:transparent;
  color:var(--nav-accent);font-weight:700}
.subitems button.on::before{display:none}
.subitems button.on .ic{opacity:1;color:var(--nav-accent)}
.subitems .svgic{stroke-width:1.8}
nav .navsep{font-size:11px;text-transform:uppercase;letter-spacing:.09em;font-weight:800;
  color:var(--nav-fg-2);padding:18px 14px 7px;opacity:.72;
  border-top:1px solid var(--nav-line);margin-top:8px}
nav .navsep:first-child{border-top:none;margin-top:0;padding-top:4px}
.navfoot{border-top:1px solid var(--nav-line);padding:12px 14px;display:flex;gap:8px;
  align-items:center;color:var(--nav-fg-2)}
.navfoot .ver{color:var(--nav-fg-2) !important}
.navfoot .iconbtn{color:var(--nav-fg-2)}
.navfoot .iconbtn:hover{color:var(--nav-fg)}
.shell{flex:1;min-width:0;display:flex;flex-direction:column}
header{display:flex;gap:14px;align-items:center;padding:9px 16px;background:var(--bg-2);
  border-bottom:1px solid var(--line);flex:none;position:relative;z-index:30}
.brand{font-weight:700;letter-spacing:-.01em}
.who{font-size:12.5px;color:var(--fg-2)}
.iconbtn{background:none;border:0;color:var(--fg-2);cursor:pointer;font-size:19px;line-height:1;padding:2px 6px}
.iconbtn:hover{color:var(--fg)}
/* v5.36: üst çubuktaki ikon düğmeleri (pano kart düzenleme) — çanla AYNI
   ölçü ve çerçeve. `.svgic` varsayılanı width:100%, ölçü verilmezse ikon
   devasa büyüyor ve başlık çubuğunu üç kat uzatıyor. */
.hdricon{display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;padding:0;border-radius:9px;
  border:1px solid var(--line);background:var(--bg-3)}
.hdricon .svgic{width:20px;height:20px;stroke-width:1.9}
.hdricon:hover{border-color:var(--accent);background:var(--bg-2)}
.iconbtn.on{color:var(--orange)}
.hdricon.on{border-color:var(--orange);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 20%,transparent)}
main{flex:1;min-height:0;display:flex}

/* ---- global arama ---- */
.search{position:relative;flex:1;max-width:460px}
.search input{width:100%;padding-left:30px}
.search .mag{position:absolute;left:10px;top:50%;transform:translateY(-50%);
  color:var(--fg-3);font-size:13px;pointer-events:none}
.sresults{position:absolute;top:calc(100% + 5px);left:0;right:0;background:var(--bg-2);
  border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow);
  max-height:340px;overflow-y:auto;padding:5px;z-index:40}
.sresults .hit{display:flex;gap:9px;align-items:center;padding:7px 9px;border-radius:8px;cursor:pointer}
.sresults .hit:hover,.sresults .hit.on{background:var(--bg-3)}
.sresults .hit .nm{font-weight:600;font-size:13px}
.sresults .hit .mt{font-size:11.5px;color:var(--fg-3)}
.sresults .empty{padding:14px;text-align:center;color:var(--fg-3);font-size:12.5px}

/* ---- kullanıcı menüsü ---- */
.usermenu{position:relative}
.userbtn{display:flex;align-items:center;gap:9px;background:none;border:1px solid var(--line);
  border-radius:9px;padding:5px 10px 5px 6px;cursor:pointer;color:var(--fg)}
.userbtn:hover{background:var(--bg-3)}
.avatar{width:27px;height:27px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,#f07c1a,#e8571a);color:#fff;font-weight:700;font-size:12px}
.userbtn .un{font-size:12.5px;font-weight:600;line-height:1.25}
.userbtn .ur{font-size:11px;color:var(--fg-3);line-height:1.25}
.udrop{position:absolute;right:0;top:calc(100% + 7px);width:270px;background:var(--bg-2);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;z-index:40}
.udrop .head{padding:11px 11px 10px;border-bottom:1px solid var(--line);margin-bottom:5px}
.udrop .head .nm{font-weight:600}
.udrop .head .mt{font-size:11.5px;color:var(--fg-3);margin-top:3px;word-break:break-word}
.udrop button{display:block;width:100%;text-align:left;background:none;border:0;
  border-radius:8px;padding:8px 11px;cursor:pointer;color:var(--fg-2);font-size:13px}
.udrop button:hover{background:var(--bg-3);color:var(--fg)}
.udrop button.danger{color:var(--crit)}
.udrop hr{border:0;border-top:1px solid var(--line);margin:5px 0}

/* ---- cihaz listesi ---- */
#side{width:290px;flex:none;border-right:1px solid var(--line);background:var(--bg-2);
  display:flex;flex-direction:column;min-height:0}
#side .top{padding:10px;border-bottom:1px solid var(--line);display:flex;
  flex-direction:column;gap:7px}
#side .frow{display:grid;gap:7px}
/* v5.33 — kenar listedeki kutular da süzgeç çubuklarıyla AYNI ölçüde. Arama
   kutusu 14px, seçim kutuları 12px'ti; yan yana durdukları hâlde birbirini
   tutmuyordu ("şube kutuları farklı görünüyor" şikâyetinin bir ayağı buydu). */
#side .top input,#side .frow select{font-size:13px;line-height:1.25;
  height:34px;padding:6px 10px;box-sizing:border-box}
#side .cnt{font-size:11.5px;color:var(--fg-3);display:flex;gap:8px;align-items:center}
#side .cnt button{background:none;border:0;color:var(--accent);cursor:pointer;
  font-size:11.5px;padding:0;text-decoration:underline}
#devlist{overflow-y:auto;flex:1;padding:6px}
.grp{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--fg-3);
  padding:10px 8px 4px}
.dev{display:flex;gap:9px;align-items:flex-start;padding:8px 9px;border-radius:8px;cursor:pointer;
  border:1px solid transparent}
.dev:hover{background:var(--bg-3)}
.dev.on{background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:var(--accent)}
.dev .nm{font-weight:600;font-size:13.5px}
.dev.off .nm{color:var(--fg-3);text-decoration:line-through}
.dev .mt{font-size:11.5px;color:var(--fg-3);margin-top:2px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.dev .up{display:inline-flex;align-items:center;gap:3px;color:var(--fg-2)}
.vbadge{font-size:10px;letter-spacing:.02em;padding:1px 5px;
  border-radius:4px;border:1px solid var(--line);color:var(--fg-3);flex:none}
.vbadge.ubnt{color:#4c8eda;border-color:color-mix(in srgb,#4c8eda 40%,transparent)}
.vbadge.camb{color:#34a853;border-color:color-mix(in srgb,#34a853 40%,transparent)}
.vbadge.mimo{color:#b96ad9;border-color:color-mix(in srgb,#b96ad9 40%,transparent)}
/* Cihaz Ekle — sağ üstteki kategori ekleme düğmeleri */
.addrow{display:flex;gap:6px;flex-wrap:wrap}
.vbadge.mt{color:#e08a3c;border-color:color-mix(in srgb,#e08a3c 40%,transparent)}

.vbadge.role-router{color:#9b7ce8;border-color:color-mix(in srgb,#9b7ce8 45%,transparent)}
.vbadge.role-switch{color:#3fb5a6;border-color:color-mix(in srgb,#3fb5a6 45%,transparent)}
.vbadge.role-link{color:#d9a441;border-color:color-mix(in srgb,#d9a441 45%,transparent)}
.vbadge.role-ap{color:#5a9ee6;border-color:color-mix(in srgb,#5a9ee6 45%,transparent)}

/* ---- kategori sekmeleri / kaynak seçici ---- */
.subnav{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 14px;padding-bottom:10px;
  border-bottom:1px solid var(--line)}
.subnav button{background:none;border:1px solid transparent;border-radius:8px;
  padding:6px 13px;cursor:pointer;color:var(--fg-2);font-size:13px}
.subnav button:hover{color:var(--fg);background:var(--bg-3)}
.subnav button.on{background:var(--bg-3);border-color:var(--line);color:var(--fg);font-weight:600}
.subnav .cnt2{font-size:11px;color:var(--fg-3);margin-left:4px;font-variant-numeric:tabular-nums}
.subnav button.on .cnt2{color:var(--accent)}
.segbar{display:inline-flex;gap:2px;padding:3px;border-radius:9px;background:var(--bg-3);
  border:1px solid var(--line);margin-bottom:12px}
.segbar button{background:none;border:0;border-radius:6px;padding:5px 13px;cursor:pointer;
  color:var(--fg-2);font-size:12.5px}
.segbar button.on{background:var(--bg-2);color:var(--fg);font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.18)}
/* toplanmayan yetenek rozeti üstü çizili görünür */
.tag.off{opacity:.45;text-decoration:line-through}
/* özet kartları */
.statcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.card2{background:var(--bg-2);border:1px solid var(--line);border-radius:11px;padding:11px 13px}
/* ---- Frekans Listesi spektrumu ---- */
.fqwrap{border:1px solid var(--line);border-radius:11px;padding:12px 14px;
  background:var(--bg-2);overflow-x:auto}
.fqlane{display:flex;align-items:center;gap:12px;min-width:640px;
  padding:3px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 45%,transparent)}
.fqlane:last-child{border-bottom:0}
.fqlane.fqhead{border-bottom:1px solid var(--line);padding-bottom:6px;margin-bottom:4px}
.fqname{width:168px;flex:none;display:flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:600;color:var(--fg-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fqdot{width:9px;height:9px;border-radius:3px;flex:none;display:inline-block;
  margin-right:5px;vertical-align:middle}
.fqtrack{position:relative;flex:1;height:30px;min-width:460px}
.fqhead .fqtrack{height:16px}
.fqgrid{position:absolute;top:0;bottom:0;width:1px;
  background:color-mix(in srgb,var(--line) 60%,transparent)}
.fqscale{position:relative;height:16px;font-size:10px;color:var(--fg-3);
  font-variant-numeric:tabular-nums}
.fqscale span{position:absolute;transform:translateX(-50%);white-space:nowrap}
/* Kanalın kapladığı alan — genişlik kanal genişliğinden gelir */
.fqblock{position:absolute;top:8px;bottom:3px;border-radius:3px;cursor:pointer;
  background:color-mix(in srgb,var(--c) 55%,transparent);
  border:1px solid var(--c);min-width:2px}
.fqblock:hover{background:var(--c);z-index:3}
.fqblock.clash{border-color:var(--crit);border-width:2px;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--crit) 35%,transparent)}
/* Frekans etiketi — kutu dar olduğu için üstünde, ortalanmış durur */
.fqtag{position:absolute;top:-2px;transform:translateX(-50%);cursor:pointer;
  font-size:10px;font-weight:700;font-variant-numeric:tabular-nums;
  white-space:nowrap;color:var(--c);padding:0 3px;border-radius:3px;
  background:var(--bg-2);z-index:2}
.fqtag i{font-style:normal;font-weight:500;opacity:.65;font-size:9px}
.fqtag.clash{color:var(--crit)}
.fqtag:hover{z-index:4;background:var(--bg-3)}

/* Cihaz künyesi şeridi — uptime, model, sürüm, CPU */
.infostrip{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-bottom:13px;
  padding:11px 14px;background:var(--bg-2);border:1px solid var(--line);border-radius:11px}
.infostrip .ic2{display:flex;flex-direction:column;gap:2px;min-width:0}
.infostrip .k{font-size:10.5px;letter-spacing:.04em;color:var(--fg-3);
  font-weight:600}
.infostrip .v{font-size:13px;font-weight:600;color:var(--fg-2);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.infostrip .v.big{font-size:15.5px;color:var(--fg)}
/* Port tablosu — bağlı olmayan satır soluk */
table.ports tr.off td{opacity:.62}
/* Tıklanabilir özet kartı — kendi kategori sayfasına götürür */
.card2.go{cursor:pointer;transition:border-color .12s,background .12s}
.card2.go:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  background:var(--bg-3)}
.card2.go:hover .v{color:var(--accent)}
.card2 .k{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-3)}
.card2 .v{font-size:20px;font-weight:650;margin-top:3px;font-variant-numeric:tabular-nums}
.card2 .v.sm{font-size:14px;font-weight:600;padding-top:5px}
.pager{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:12px}
/* ---- topoloji ağacı ---- */
.tree{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:6px}
.tnode{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;
  cursor:pointer;min-width:0}
.tnode:hover{background:var(--bg-3)}
.tnode.off .tn{color:var(--fg-3);text-decoration:line-through}
.tnode .tw{width:13px;flex:none;color:var(--fg-3);font-size:11px}
.tnode .tn{font-weight:600;font-size:13.5px;white-space:nowrap}
.tnode.a{cursor:default}
.tnode.a:hover{background:var(--bg-3)}
.tcount{font-size:11px;color:var(--fg-3);background:var(--bg-3);border:1px solid var(--line);
  border-radius:999px;padding:0 7px;font-variant-numeric:tabular-nums}
.tkids{margin-left:19px;border-left:1px solid var(--line);padding-left:8px}
.tacts{opacity:0;transition:opacity .12s}
.tnode:hover .tacts{opacity:1}
.cardlist{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.cardrow{display:flex;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--line);
  border-radius:9px;background:var(--bg-3)}
/* ---- yetki matrisi ---- */
.matrix{overflow:auto;max-height:70vh}
.matrix table{min-width:640px}
.matrix th.role{text-align:center;min-width:120px;vertical-align:top;padding-top:10px}
/* v5.36: rol adı BAŞLIK ŞERİDİNİN üstünde duruyor; şerit her iki temada da
   lacivert. Rengi var(--fg) ile vermek açık temada siyah yazı demekti ve
   lacivert zeminde okunmuyordu. Başlık şeridinin kendi rengi kullanılır. */
.matrix th.role .rn{font-size:13px;text-transform:none;letter-spacing:0;
  color:#fff;font-weight:700}
/* Aynı sebeple başlıktaki ikincil satır ("3 kullanıcı · hazır") — .sub'un
   genel rengi açık zemin içindir. */
th .sub,.matrix th.role .sub{color:var(--th-fg);opacity:.75}
.matrix td.cb{text-align:center}
.matrix td.cb input{width:auto;cursor:pointer}
.matrix tbody tr{cursor:default}
/* v5.36: grup başlığı da belirgin olsun — fg-3 açık temada soluk kalıyordu */
.matrix .grouprow td{background:var(--bg-3);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--fg);font-weight:700;
  border-bottom:1px solid var(--line)}
.matrix td.lock{opacity:.5}
.scopetree{max-height:320px;overflow-y:auto;border:1px solid var(--line);border-radius:10px;
  padding:6px;background:var(--bg-3)}
.scopetree label{display:flex;gap:8px;align-items:center;padding:5px 8px;border-radius:7px;
  cursor:pointer;font-size:13px}
.scopetree label:hover{background:var(--bg-2)}
.scopetree input{width:auto}
.scopetree .lvl2{margin-left:22px}
.scopetree .inherit{color:var(--fg-3);font-size:11.5px}
/* kritiklik eşiği kutuları */
.hnum{width:92px;font-variant-numeric:tabular-nums;text-align:right}
.hnum.warn{border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
.hnum.crit{border-color:color-mix(in srgb,var(--crit) 45%,var(--line))}
.hnum.dirty{outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:-2px}
/* Tablo içinden cihaz yönetimine giden ad */
.devlink{cursor:pointer;border-bottom:1px dotted var(--fg-3)}
.devlink:hover{color:var(--accent);border-bottom-color:var(--accent)}
/* Abonenin IP'si — CPE arayüzünü yeni sekmede açar */
.iplink{color:var(--accent);text-decoration:none;border-bottom:1px dotted transparent}
.iplink:hover{border-bottom-color:var(--accent)}
td .iplink::after{content:"↗";font-size:9px;margin-left:3px;opacity:0;
  transition:opacity .12s;vertical-align:super}
tr:hover td .iplink::after{opacity:.65}
/* Detay panelinde şema seçtiren küçük http/https düğmeleri */
.opener{margin-left:8px;display:inline-flex;gap:4px}
.opener a{font-size:10.5px;padding:1px 6px;border-radius:5px;text-decoration:none;
  border:1px solid var(--line);color:var(--fg-3);background:var(--bg-3)}
.opener a:hover{border-color:var(--accent);color:var(--accent)}
tr.sev-error td:first-child{box-shadow:inset 3px 0 0 var(--crit)}
tr.sev-warning td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
/* frekans kutusu */
.freqbox{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start;margin-top:12px;
  padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:var(--bg-3)}
.freqbox .fcur{min-width:150px}
.freqbox .fbig{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--accent);line-height:1.15;margin:2px 0 3px}
.freqbox .fpick{flex:1;min-width:300px}
/* kanal / spektrum grafiği */
.chanchart{display:flex;gap:4px;align-items:flex-end;overflow-x:auto;padding:10px 2px 0;
  background:var(--bg-3);border:1px solid var(--line);border-radius:11px}
.chan{flex:1;min-width:46px;max-width:96px;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:0 2px 8px;border-radius:8px}
.chan:hover{background:var(--bg-2)}
.chan.cur{background:color-mix(in srgb,var(--accent) 16%,transparent);
  outline:1px solid color-mix(in srgb,var(--accent) 50%,transparent)}
.cbar{height:110px;width:100%;display:flex;align-items:flex-end;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--line) 50%,transparent));
  border-radius:5px;overflow:hidden}
.cfill{width:100%;border-radius:5px 5px 0 0}
.cfill.ok{background:color-mix(in srgb,var(--ok) 70%,transparent)}
.cfill.warn{background:color-mix(in srgb,var(--warn) 75%,transparent)}
.cfill.crit{background:color-mix(in srgb,var(--crit) 75%,transparent)}
.clabel{font-size:10.5px;font-variant-numeric:tabular-nums;color:var(--fg-2)}
.chan.cur .clabel{color:var(--accent);font-weight:700}
.cmeta{font-size:10px;color:var(--fg-3)}
/* port tablosu */
.portgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px}
.port{border:1px solid var(--line);border-radius:9px;padding:9px 10px;background:var(--bg-2)}
.port.up{border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.port.down{opacity:.62}
.port .pn{font-weight:600;font-size:12.5px;display:flex;align-items:center;gap:6px}
.port .ps{font-size:11px;color:var(--fg-3);margin-top:3px}
.port .pc{font-size:11px;margin-top:4px;font-variant-numeric:tabular-nums}

/* ---- içerik ---- */
#content{flex:1;min-width:0;overflow-y:auto;padding:14px}
.panelhead{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:12px}
.panelhead h2{margin:0;font-size:17px}
.infoline{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
  background:var(--bg-3);border:1px solid var(--line);font-size:12px;color:var(--fg-2);cursor:pointer}
.chip:hover{border-color:var(--accent)}
.chip.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--fg)}
.chip b{color:var(--fg);font-variant-numeric:tabular-nums}
.filterbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
/* v5.32 — SÜZGEÇ KUTULARI TEK TİP.
   Şikâyet: "bazılarında kalın punto, bazılarında kutu farklı, bazıları diğerinden
   küçük ya da büyük." Sebebi, kutuların kiminin <label class="sub"> içinde
   olması (12px miras punto), kiminin serbest durmasıydı; yükseklikleri de
   dolgu farkından kaymıştı. Burası ölçüyü TEK yerde sabitliyor: aynı yükseklik,
   aynı punto, aynı dolgu — sarmalayıcı ne olursa olsun. */
.filterbar input,.filterbar select,.filterbar button,
.filterbar label.sub > select,.filterbar label.sub > input{
  font-size:13px;line-height:1.25;height:34px;padding:6px 10px;
  font-weight:400;box-sizing:border-box}
.filterbar label.sub{display:flex;align-items:center;gap:6px;margin:0;
  font-size:12px;white-space:nowrap}
.filterbar input[type=search]{max-width:240px;min-width:170px}
/* v5.36 — ARAMA KUTUSU SAĞDA VE BELİRGİN.
   Şikâyet: "arama kutuları sayfa sağa yaslanık ve belirgin olsun". Kutu
   süzgeçlerin arasına karışmış, diğer kutularla aynı görünüyordu. Artık
   süzgeç çubuğunun SAĞ ucunda duruyor (işaretler markupta `spacer`dan
   sonraya taşındı), daha geniş, çerçevesi belirgin ve içinde büyüteç var.
   margin-left:auto, çubukta `spacer` olmasa da kutuyu sağa iter. */
.filterbar .fsearch,.chips .fsearch{
  margin-left:auto;min-width:240px;max-width:340px;flex:0 1 300px;
  border:1.5px solid var(--accent);border-radius:9px;
  background:var(--bg-2) no-repeat 9px center;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' \
stroke='%237b8699' stroke-width='2' stroke-linecap='round'>\
<circle cx='11' cy='11' r='7'/><path d='M20 20l-4.3-4.3'/></svg>");
  background-size:15px 15px;padding-left:29px}
.filterbar .fsearch:focus,.chips .fsearch:focus{
  outline:none;border-color:var(--orange);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 22%,transparent)}
.chips .fsearch{height:34px;font-size:13px}
/* Sağ uçtaki kutudan sonra gelen sayaç ve düğmeler bitişik dursun */
.filterbar .fsearch ~ *{margin-left:0}
@media(max-width:820px){
  .filterbar .fsearch,.chips .fsearch{margin-left:0;flex:1 1 100%;max-width:none}
}
.filterbar select{max-width:200px;min-width:150px}
.filterbar input[type=checkbox]{width:auto;height:auto;min-width:0}
.filterbar input[type=datetime-local],.filterbar input[type=date]{min-width:185px}
.filterbar button{height:34px;white-space:nowrap}
.tablewrap{overflow-x:auto;background:var(--bg-2);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.16)}
.tablewrap table{border-radius:12px;overflow:hidden}
table{border-collapse:collapse;width:100%}
/* v5.30: tablolar CANLI. Başlık şeridi lacivert, satırlar zebra, üstüne
   gelince belirgin vurgu. Tek yerde tanımlı — bütün ekranlar aynı görünür. */
th,td{padding:9px 11px;text-align:left;white-space:nowrap;
  border-bottom:1px solid var(--line)}
th{position:sticky;top:0;background:var(--th-bg);color:var(--th-fg);
  font-size:11px;letter-spacing:.07em;font-weight:700;
  cursor:pointer;user-select:none;z-index:5;
  border-bottom:2px solid var(--th-line);white-space:nowrap}
th:hover{color:#fff;background:var(--th-bg-2)}
th .ar{opacity:.6;font-size:10px}
tbody tr{cursor:pointer;transition:background .1s}
tbody tr:nth-child(even){background:var(--zebra)}
tbody tr:hover{background:color-mix(in srgb,var(--accent) 10%,var(--bg-2))}
tbody tr:last-child td{border-bottom:0}
tbody tr.sel{background:color-mix(in srgb,var(--accent) 16%,transparent);
  box-shadow:inset 3px 0 0 var(--accent)}
td.num{text-align:right;font-variant-numeric:tabular-nums}
/* Registration table: IP'den sonraki sütunlar ortalanır */
td.ctr, th.ctr{text-align:center}
td.ctr{font-variant-numeric:tabular-nums}
.name{font-weight:600}
.state{padding:44px 20px;text-align:center;color:var(--fg-3)}
.sec > .state{padding:22px 18px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px}
.state h3{margin:0 0 6px;color:var(--fg-2);font-size:15px}
.state.err{color:var(--crit)}
.spin{display:inline-block;width:15px;height:15px;border:2px solid var(--line);
  border-top-color:var(--accent);border-radius:50%;animation:sp .7s linear infinite;vertical-align:-3px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---- cihaz yönetim ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
.cards.wide{grid-template-columns:1fr;margin-top:12px}
.card{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:14px 15px}
.card h3{margin:0 0 4px;font-size:13.5px}
.card .desc{font-size:12px;color:var(--fg-3);margin-bottom:11px}
.card.danger{border-color:color-mix(in srgb,var(--crit) 40%,var(--line))}
.card .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.out{margin-top:11px;background:var(--bg-3);border:1px solid var(--line);border-radius:8px;
  padding:9px 11px;font-size:12.5px}
.out.ok{border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}
.out.err{border-color:color-mix(in srgb,var(--crit) 45%,var(--line));color:var(--crit)}
.out pre{margin:7px 0 0;white-space:pre-wrap;word-break:break-word;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;
  color:var(--fg-2);max-height:220px;overflow:auto}
.stat{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px}
.stat div{font-size:12px;color:var(--fg-3)}
.stat b{display:block;font-size:16px;color:var(--fg);font-variant-numeric:tabular-nums}
.logline{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px}
.topic{font-size:10.5px;color:var(--fg-3)}
.topic.err{color:var(--crit)} .topic.warn{color:var(--warn)}
.diff{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px}
.diff .from{color:var(--crit);text-decoration:line-through;opacity:.8}
.diff .to{color:var(--ok)}
.mgpick{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.mgpick select{max-width:340px}

/* ---- yan panel / modal ---- */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:40}
.navscrim{z-index:65}
aside{position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--bg-2);
  border-left:1px solid var(--line);box-shadow:var(--shadow);z-index:50;overflow-y:auto}
aside .head{position:sticky;top:0;background:var(--bg-2);border-bottom:1px solid var(--line);
  padding:14px 16px;display:flex;gap:10px;align-items:flex-start;z-index:2}
aside h2{margin:0;font-size:17px}
aside .body{padding:14px 16px 40px}
.sec{margin-bottom:18px}
.sec h3{margin:0 0 8px;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--fg-3)}
#logs tbody tr{cursor:default}
#logs tbody tr:hover{background:transparent}
.kv{display:grid;grid-template-columns:1fr auto;gap:3px 14px;font-size:13px}
.kv dt{color:var(--fg-2);min-width:0;overflow:hidden;text-overflow:ellipsis}
.kv dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.issue{padding:8px 10px;border-radius:7px;margin-bottom:6px;font-size:13px;
  background:var(--bg-3);border-left:3px solid var(--fg-3)}
.issue.crit{border-color:var(--crit);background:var(--crit-bg)}
.issue.warn{border-color:var(--warn);background:var(--warn-bg)}
.issue.info{border-color:var(--info);background:var(--info-bg)}
/* ---- hız testi ---- */
/* Tablo satırındaki ikon: satırın kendi tıklamasını bozmasın diye buton,
   ama düz metin gibi dursun. Test sürerken döner. */
.speedbtn{background:none;border:0;padding:1px 4px;cursor:pointer;color:var(--fg-2);
  line-height:0;vertical-align:middle;border-radius:5px}
.speedbtn:hover{background:var(--bg-3);color:var(--accent)}
.speedbtn .svgic{width:17px;height:17px}
/* .svgic varsayilani width:100% — düğme içinde kullanılınca devasa büyüyordu */
.btn .svgic{width:15px;height:15px;vertical-align:-3px;margin-right:3px}
#drawerSpeed{display:inline-flex;align-items:center;gap:2px;white-space:nowrap;
  vertical-align:middle}
.speedbtn.busy{animation:sp .9s linear infinite;color:var(--accent)}
.speednums{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.speednums > div{background:var(--bg-3);border:1px solid var(--line);border-radius:9px;
  padding:10px 12px;text-align:center}
.speednums b{display:block;font-size:26px;font-weight:650;margin-top:2px;
  font-variant-numeric:tabular-nums;line-height:1.1}
.speednums b i{font-style:normal;font-size:12px;font-weight:500;color:var(--fg-3);margin-left:4px}
/* ---- ağ haritası ---- */
/* Girinti --d ile veriliyor; her seviye bir basamak içeri kayar ve sol
   kenarda zinciri gösteren ince bir çizgi kalır. */
.nmwrap{border:1px solid var(--line);border-radius:10px;background:var(--bg-2);
  padding:6px;overflow:auto;max-height:76vh}
.nmsvg{display:block}
.nmedge{fill:none;stroke:var(--line);stroke-width:1.6}
.nmbox{cursor:default}
/* Alt cihazı olan kutu: tıklayınca dal açılır (v5.18) */
.nmbox.haskids{cursor:pointer}
/* Cihaz yönetimine gidiş ayrı düğme — kutuya tıklayınca cihaza girilmiyor */
.nmopen{cursor:pointer}
.nmopen rect{fill:var(--bg-2);stroke:var(--line)}
.nmopen text{fill:var(--fg-3);font-size:11px}
.nmopen:hover rect{stroke:var(--accent)}
.nmopen:hover text{fill:var(--accent)}
.nmbox > rect:first-child{fill:var(--bg-3);stroke:var(--line);stroke-width:1}
.nmbox:hover > rect:first-child{stroke:var(--accent)}
.nmbox.off{opacity:.55}
.nmbname{fill:var(--fg);font-size:12.5px;font-weight:650}
.nmbsub{fill:var(--fg-3);font-size:10.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.nmboff{fill:var(--fg-3);font-size:10px}
.nmtogglebox{cursor:pointer}
.nmtogglebox rect{fill:var(--bg-2);stroke:var(--line)}
.nmtogglebox text{fill:var(--fg-2);font-size:12px}
.nmtogglebox:hover rect{stroke:var(--accent)}
.nmtogglebox:hover text{fill:var(--accent)}
.nmlegend{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:0 0 10px;
  font-size:12px;color:var(--fg-2)}
.nmlegend i{display:inline-block;width:10px;height:10px;border-radius:3px;
  margin-right:5px;vertical-align:-1px}
/* Cihaz ekleme penceresindeki zincir etiketleri */
.nmtag{font-size:10.5px;padding:1px 7px;border-radius:20px;border:1px solid var(--line);
  color:var(--fg-2);white-space:nowrap}
.nmtag.router{border-color:var(--accent);color:var(--accent)}
.nmtag.switch{border-color:var(--info);color:var(--info)}
.nmtag.link{border-color:var(--warn);color:var(--warn)}
.nmtag.ap{border-color:var(--ok);color:var(--ok)}
/* Cihaz ekleme penceresindeki zincir basamakları */
.chaingrid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.chainpath{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:2px 0 4px;
  padding:8px 10px;background:var(--bg-3);border-radius:8px;font-size:12px}
.chainarrow{color:var(--fg-3)}
@media (max-width:640px){ .chaingrid{grid-template-columns:1fr} }

/* ---- iş emri ---- */
.wobtn{background:none;border:0;padding:1px 4px;cursor:pointer;color:var(--fg-2);
  line-height:0;vertical-align:middle;border-radius:5px}
.wobtn:hover{background:var(--bg-3);color:var(--accent)}
.wobtn .svgic{width:17px;height:17px}
.clickcard{cursor:pointer}
.clickcard:hover{border-color:var(--accent)}
/* Katlanabilir ayar bloğu — günlük kullanımda kapalı durur */
.collapsebox{border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  background:var(--bg-2)}
.collapsebox > summary{cursor:pointer;list-style:none;font-size:13px}
.collapsebox > summary::-webkit-details-marker{display:none}
.collapsebox > summary::before{content:'▸ ';color:var(--fg-3)}
.collapsebox[open] > summary::before{content:'▾ '}
/* Bu kontrolde yeni düşen olay — göz hemen yakalasın */
tr.justnow td{background:var(--warn-bg)}
tr.justnow .tag{border-color:var(--warn);color:var(--warn)}
.btn.sm.danger{color:var(--crit);border-color:var(--crit);padding:3px 8px;font-weight:600}
.btn.sm.danger:hover{background:var(--crit-bg)}
/* Az örnekli testte çubuklar gereksiz yere yayılmasın */
#stOut .bars{justify-content:flex-start;margin-top:10px}
#stOut .bars .b{max-width:16px;min-width:6px}
.bars{display:flex;align-items:flex-end;gap:3px;height:54px}
.bars .b{flex:1;background:var(--accent);border-radius:2px 2px 0 0;min-height:1px;opacity:.75}
.barlbl{display:flex;gap:3px;font-size:10px;color:var(--fg-3);margin-top:3px}
.barlbl span{flex:1;text-align:center}
details summary{cursor:pointer;color:var(--fg-2);font-size:12.5px}
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-start;justify-content:center;
  padding:40px 16px;overflow-y:auto}
.modal .card{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;
  width:min(520px,100%);box-shadow:var(--shadow)}
.modal .card > h3{margin:0;padding:14px 16px;border-bottom:1px solid var(--line);font-size:15px}
.modal .card > .bd{padding:16px}
.modal .card > .ft{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;align-items:center}
.msg{padding:8px 10px;border-radius:7px;font-size:12.5px;margin-bottom:12px}
.msg.ok{background:var(--ok-bg);color:var(--ok)}
.msg.err{background:var(--crit-bg);color:var(--crit)}
.msg.warn{background:var(--warn-bg);color:var(--warn)}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:80;
  background:var(--bg-3);border:1px solid var(--line);border-radius:8px;padding:9px 14px;
  box-shadow:var(--shadow);font-size:13px}
.toast.err{border-color:var(--crit);color:var(--crit)}
[hidden]{display:none!important}
/* ---- daraltılmış (ikon) menü ---- */
.navburger{display:none;font-size:20px}
#nav{transition:width .16s ease}
#app.mini #nav{width:60px}
#app.mini #nav .brandwrap{padding:14px 8px;justify-content:center;overflow:hidden}
#app.mini #nav .ver{display:none}
/* Daraltılmış menüde yazılı logo yerine yuvarlak işaret — 60px'e sığar */
#app.mini #nav .logo-dark,
#app.mini #nav .logo-light{display:none !important}
#app.mini #nav .logo-mark{display:block;height:34px;width:34px}
#app.mini nav{padding:10px 6px}
#app.mini nav button{justify-content:center;padding:11px 0;gap:0}
#app.mini nav button .ic{width:22px;height:22px}
#app.mini nav button.on::before{left:-6px}
/* ikon modunda etiket ve alt başlıklar gizlenir, imleçle isim balonu çıkar.
   Etiket .lbl içinde: düz metin düğümü olsaydı CSS ile gizlenemezdi. */
#app.mini nav button > :not(.ic){display:none}
#app.mini nav button .lbl{display:none}
#app.mini .subitems{display:none}
#app.mini .navfoot{flex-direction:column;gap:8px;padding:9px 4px}
#app.mini .navfoot .sub,
#app.mini .navfoot .ver{display:none}
#app.mini nav button{position:relative}
#app.mini nav button:hover::after{content:attr(data-label);position:absolute;left:calc(100% + 8px);
  top:50%;transform:translateY(-50%);background:var(--bg-3);border:1px solid var(--line);
  border-radius:7px;padding:5px 9px;font-size:12.5px;white-space:nowrap;z-index:60;
  box-shadow:var(--shadow);color:var(--fg)}
#navToggle{transition:transform .16s ease}
#app.mini #navToggle{transform:rotate(180deg)}

@media(max-width:820px){
  main{flex-direction:column}
  #side{width:100%;max-height:40vh;border-right:0;border-bottom:1px solid var(--line)}
  #content{padding:12px}
  .navburger{display:block}
  /* Menü mobilde üstte durmaz; hamburgerle açılan çekmece olur */
  #nav{position:fixed;top:0;bottom:0;left:0;z-index:70;width:238px;
    transform:translateX(-100%);transition:transform .18s ease;box-shadow:var(--shadow)}
  #app.navopen #nav{transform:none}
  #app.mini #nav{width:238px}          /* mobilde ikon modu anlamsız */
  /* Mobil çekmecede menü tam genişlikte — yazılı logo geri gelir */
  #app.mini #nav .logo-mark{display:none}
  #app.mini #nav .logo-dark{display:block;height:40px;width:auto}
  :root[data-theme="light"] #app.mini #nav .logo-dark{display:none}
  :root[data-theme="light"] #app.mini #nav .logo-light{display:block;height:40px;width:auto}
  #app.mini nav button{justify-content:flex-start;padding:9px 11px;gap:10px}
  #app.mini nav button > :not(.ic){display:inline}
  #app.mini nav button .lbl{display:inline}
  #app.mini .subitems{display:flex}
  #app.mini .navfoot{flex-direction:row;padding:9px 10px}
  #app.mini .navfoot .ver{display:inline}
  #navToggle{display:none}
  header{padding:8px 10px;gap:8px}
  .search{max-width:none}
  .userbtn span:not(.avatar){display:none}
  .userbtn{padding:5px 6px}
  .statcards{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .filterbar{gap:6px}
  .filterbar select,.filterbar input{min-width:0;flex:1 1 140px}
  .row2{grid-template-columns:1fr!important}
  .udrop{width:min(280px,92vw)}
  aside#drawer{width:100%}
}
@media(max-width:520px){
  .statcards{grid-template-columns:1fr 1fr}
  #content{padding:10px}
  .sec{padding:10px}
}
/* Port Alarmları — seçili tür kartı (v5.13) */
.card2.go.on{border-color:var(--accent);background:var(--bg-3)}
.card2.go.on .v{color:var(--accent)}

/* Ağ Haritası — router seçim kartları (v5.16) */
.nmpick{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.nmpickcard{display:flex;flex-direction:column;gap:3px;align-items:flex-start;
  padding:13px 15px;border:1px solid var(--line);border-radius:11px;
  background:var(--bg-2);cursor:pointer;text-align:left;
  transition:border-color .12s,background .12s,transform .12s}
.nmpickcard:hover{border-color:var(--accent);background:var(--bg-3);transform:translateY(-1px)}
.nmpickname{font-weight:600;font-size:14px;color:var(--fg-1)}
.nmpickcard:hover .nmpickname{color:var(--accent)}
.nmpickhost{font-size:12px;color:var(--fg-3)}
.nmpickcount{font-size:12px;color:var(--fg-2);margin-top:3px}
/* Kapalı dal işareti daha belirgin — açılacak yer gözden kaçmasın */
.nmtogglebox.closed rect{fill:var(--accent);stroke:var(--accent)}
.nmtogglebox.closed text{fill:var(--bg-1);font-weight:700}

/* Dashboard kartları — v5.16 sade görünüm */
.dcard{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px 16px;margin-bottom:14px}
.dcardhead{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.dcardhead h3{margin:0;font-size:14.5px;font-weight:650;letter-spacing:-.01em;flex:1}
.dcardhead .btn{flex:none;opacity:.75}
.dcard:hover .dcardhead .btn{opacity:1}
.dcard .statcards{margin-bottom:12px}
.dcard > .state{background:transparent;border:0;padding:16px 0}
.dcard .tablewrap{border-radius:10px}
.dcardbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:10px}

/* ---- açık temada kabartma ----------------------------------------------
   Zemin açık gri, kutular beyaz. Çerçeve tek başına yeterince ayırmıyordu;
   çok hafif bir gölge kutuyu zeminden kaldırıyor. Koyu temada gölge yok —
   orada zaten zemin koyu, kutu açık. */
:root[data-theme="light"] .card,
:root[data-theme="light"] .card2,
:root[data-theme="light"] .sec,
:root[data-theme="light"] .tree,
:root[data-theme="light"] .tblwrap,
:root[data-theme="light"] .dcard{box-shadow:0 1px 2px rgba(17,16,43,.05),
  0 4px 12px rgba(17,16,43,.04)}
:root[data-theme="light"] header{box-shadow:0 1px 3px rgba(17,16,43,.05)}
/* Beyaz kutunun İÇİNDEKİ kutu da beyaz olunca ikisi tek parça görünüyordu.
   İç kutular açık gri: sayı kutuları dış karttan ayrılsın. */
:root[data-theme="light"] .dcard .card2,
:root[data-theme="light"] .card .card2,
:root[data-theme="light"] .sec .card2{background:var(--bg-3);box-shadow:none}
/* v5.30: başlık şeridi artık her temada lacivert — üst satır burada ezilmesin */

/* ---- yükleniyor: ne beklediğinizi söyleyen kutu ------------------------
   Sol düğüm panel, sağ düğüm cihaz; aradaki ışık paketin yolculuğu. Metin
   ne yapıldığını yazar, altındaki iskelet gelecek içeriğin yerini tutar ki
   sayfa dolunca zıplamasın. */
.loadbox{display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:34px 20px 22px;text-align:center}
.loadwire{display:flex;align-items:center;gap:0;height:16px}
.lw-node{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent);
  animation:lwpulse 1.6s ease-out infinite}
.lw-node.lw-b{background:var(--orange);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--orange) 45%,transparent);
  animation-delay:.8s}
.lw-line{position:relative;width:132px;height:2px;border-radius:2px;
  background:var(--line);overflow:hidden}
.lw-line i{position:absolute;top:0;left:-34%;width:34%;height:100%;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--orange),transparent);
  animation:lwrun 1.25s cubic-bezier(.45,0,.55,1) infinite}
@keyframes lwrun{to{left:100%}}
@keyframes lwpulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent)}
  70%{box-shadow:0 0 0 8px transparent}
  100%{box-shadow:0 0 0 0 transparent}}
.loadtext{font-size:14px;font-weight:600;color:var(--fg-2)}
.loadhint{font-size:11.5px;color:var(--fg-3);max-width:420px}
.loaddots{display:inline-flex;gap:3px;margin-left:4px;vertical-align:1px}
.loaddots i{width:3px;height:3px;border-radius:50%;background:var(--fg-3);
  animation:lwdot 1.1s ease-in-out infinite}
.loaddots i:nth-child(2){animation-delay:.15s}
.loaddots i:nth-child(3){animation-delay:.3s}
@keyframes lwdot{0%,60%,100%{opacity:.25} 30%{opacity:1}}

/* iskelet satırlar — gelecek tablonun yerini tutar */
.skel{border-radius:8px;background:var(--skel);background-size:400% 100%;
  animation:skshine 1.35s ease-in-out infinite}
@keyframes skshine{0%{background-position:100% 0} 100%{background-position:0 0}}
.skelrows{display:flex;flex-direction:column;gap:8px;padding:0 2px 8px}
.sk-row{height:38px}
.sk-row:nth-child(odd){opacity:.85}
.skelcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;
  padding-bottom:8px}
.sk-card{height:78px}
@media (prefers-reduced-motion: reduce){
  .lw-line i,.lw-node,.loaddots i,.skel{animation:none}
  .lw-line i{left:33%}
}

/* ---- yazdırma başlığı (ekranda gizli) ---- */
.printhead{display:none}

/* ---- yazdırma: ağ ağacı kâğıda --------------------------------------
   Ekranda ne varsa değil, DİYAGRAM basılır. Menü, üst çubuk, süzgeçler ve
   düğmeler kâğıtta işe yaramaz. Diyagram SVG olduğu için viewBox'ı koruyup
   genişliği sayfaya vermek yeterli: tarayıcı ağacı sayfaya sığdırır. */
@media print{
  /* Kâğıt boyu ve yönü panelden seçiliyor; kuralı page-netmap.js yazıyor
     (nmApplyPaper). Burada sabit bir @page bırakmak o seçimi eziyordu. */
  html,body{background:#fff !important;color:#000 !important;height:auto}
  body{padding:0 2mm}
  #nav,#navscrim,header,#side,.filterbar,.subnav,.panelhead,.nmlegend,
  .toast,.modal,.udrop,.sresults{display:none !important}
  #app,main,.shell,#content{display:block !important;height:auto !important;
    overflow:visible !important;padding:0 !important;margin:0 !important}
  .printhead{display:flex !important;align-items:center;gap:12px;
    border-bottom:1.5px solid #11102b;padding-bottom:8px;margin-bottom:10px}
  .printhead .logo{height:30px}
  .printhead .ph-title{font-size:15px;font-weight:700;color:#11102b}
  .printhead .ph-sub{font-size:11px;color:#444}
  .nmwrap{overflow:visible !important;padding:0 !important;border:0 !important;
    background:#fff !important}
  .nmsvg{width:100% !important;height:auto !important;max-height:172mm}
  /* max-height'ı seçilen kâğıda göre nmApplyPaper() ezer */
  /* Kâğıtta ince gri çizgi ve açık dolgu okunmaz — kontrastı yükseltiyoruz */
  .nmsvg text{fill:#11102b !important}
  .nmsvg .nmedge{stroke:#666 !important}
  /* Kâğıtta tıklanacak bir şey yok: aç/kapat ve cihaza git düğmeleri gizlenir.
     Kutunun içindeki ad ise dar kırpmadan kurtulsun diye geniş kırpmaya döner. */
  .nmopen,.nmtogglebox{display:none !important}
  .printhead{padding-left:2mm}
  .sec{page-break-inside:avoid;border:0 !important;background:#fff !important;
    box-shadow:none !important}
}

/* ---- giriş ekranı: kod kutusu ve bağlantı düğmeleri ---- */
.codebox{text-align:center;font-size:24px;letter-spacing:.42em;font-weight:700;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;padding:10px 8px;
  text-indent:.42em}
.linkbtn{background:none;border:0;color:var(--accent);cursor:pointer;font-size:12.5px;
  padding:6px 2px;text-decoration:underline;text-underline-offset:2px}
.linkbtn:hover{filter:brightness(1.15)}
.linkbtn:disabled{opacity:.55;cursor:default}
#loginForm .linkbtn{display:block;width:100%;text-align:center;margin-top:8px}
.loginfoot{display:flex;justify-content:space-between;gap:10px;margin-top:8px}

/* Log tablosunda router satırı gözle ayrılsın (v5.23) */
.devlink.isrouter{font-weight:700}

/* Ağ haritası router seçimi — şube başlıkları (v5.23) */
.nmbranch{margin-bottom:16px}
.nmbranchhead{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;
  color:var(--fg-2);padding:0 2px 7px;border-bottom:1px solid var(--line);
  margin-bottom:10px}
.nmbranchhead .svgic{width:16px;height:16px;flex:none}
.nmbranchhead .sub{margin-left:auto;font-weight:600}
.nmpickcount{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.nmpickname{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* ---- kaydırma çubukları (v5.23) --------------------------------------
   Tarayıcının varsayılan çubuğu kalın ve gri; panelde her tablo, her liste
   kendi çubuğunu gösterdiği için ekran çizgilerle doluyordu. İnce, yumuşak
   ve yalnızca gerektiğinde görünür. */
* {
  scrollbar-width: thin;                       /* Firefox */
  scrollbar-color: var(--scroll) transparent;
}
:root{ --scroll:#c3cbd6; --scroll-hover:#a3aebd; }
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:99px;
  border:3px solid transparent;background-clip:content-box;min-height:36px}
::-webkit-scrollbar-thumb:hover{background:var(--scroll-hover);
  border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}
/* Sol menü koyu zeminde: çubuk da koyu kalsın */
#nav, #nav *{scrollbar-color:#3a3960 transparent}
#nav ::-webkit-scrollbar-thumb{background:#3a3960}
#nav ::-webkit-scrollbar-thumb:hover{background:#4b4a78}

/* ---- port alarmı bildirim çanı (v5.23) ---- */
.bellbtn{position:relative;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:9px}
.bellbtn .svgic{width:19px;height:19px}
.bellbtn:hover{background:var(--bg-3)}
.bellbtn.has{color:var(--crit)}
.bellbtn.has .svgic{animation:bellring 2.4s ease-in-out 1}
@keyframes bellring{
  0%,60%,100%{transform:rotate(0)}
  8%{transform:rotate(11deg)} 16%{transform:rotate(-9deg)}
  24%{transform:rotate(7deg)} 32%{transform:rotate(-5deg)} 40%{transform:rotate(0)}}
.belldot{position:absolute;top:1px;right:0;min-width:16px;height:16px;padding:0 4px;
  border-radius:99px;background:var(--crit);color:#fff;font-size:10.5px;font-weight:700;
  line-height:16px;text-align:center;box-shadow:0 0 0 2px var(--bg-2)}
.alarmdrop{width:340px;padding:0;overflow:hidden}
.adhead{display:flex;align-items:baseline;gap:8px;padding:11px 13px;
  border-bottom:1px solid var(--line)}
.adhead .sub{margin-left:auto}
.adlist{max-height:330px;overflow-y:auto}
.aditem{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;
  background:none;border:0;border-bottom:1px solid var(--line);padding:9px 13px;
  cursor:pointer;color:inherit}
.aditem:hover{background:var(--bg-3)}
.aditem:last-child{border-bottom:0}
.adline{display:flex;align-items:center;gap:7px}
.adport{font-size:12px;font-weight:600}
.adwhen{margin-left:auto}
.addev{font-size:12.5px;color:var(--fg-2)}
.adempty{padding:20px 13px;text-align:center;color:var(--fg-3);font-size:12.5px}
.adfoot{display:flex;align-items:center;gap:8px;padding:9px 11px;
  border-top:1px solid var(--line);background:var(--bg-3)}

/* Seçim kutusunda router grubu belirgin olsun (v5.24) */
optgroup[label^="◆"]{font-weight:800;color:var(--accent)}
optgroup{font-weight:700;color:var(--fg-2)}
optgroup option{font-weight:400;color:var(--fg)}
optgroup[label^="◆"] option{font-weight:700}

/* Bildirim çanı — daha belirgin (v5.24).
   Eski hâli üst çubukta kayboluyordu: ikonu büyüttük, çerçeve verdik,
   alarm varken zemin de kırmızıya dönüyor ve rozet daha büyük. */
.bellbtn{width:38px;height:38px;border:1px solid var(--line);background:var(--bg-3)}
.bellbtn .svgic{width:21px;height:21px;stroke-width:1.9}
.bellbtn:hover{border-color:var(--accent);background:var(--bg-2)}
.bellbtn.has{color:#fff;background:var(--crit);border-color:var(--crit);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--crit) 22%,transparent)}
.bellbtn.has:hover{background:var(--crit);filter:brightness(1.08)}
.bellbtn.has .svgic{animation:bellring 2.2s ease-in-out 2}
/* v5.37: ısrarlı uyarı — yeni alarmın ilk 10 saniyesi. Çan yanıp söner;
   gözü ekranda olmayan biri de fark etsin. */
.bellbtn.urgent{background:var(--crit);border-color:var(--crit);color:#fff;
  animation:bellflash 1s ease-in-out infinite}
.bellbtn.urgent .svgic{animation:bellring 1.1s ease-in-out infinite}
@keyframes bellflash{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--crit) 55%,transparent)}
  50%    {box-shadow:0 0 0 9px color-mix(in srgb,var(--crit) 0%,transparent)}}
@media(prefers-reduced-motion:reduce){
  .bellbtn.urgent,.bellbtn.urgent .svgic{animation:none}}
.belldot{top:-5px;right:-5px;min-width:19px;height:19px;font-size:11.5px;
  line-height:19px;border:2px solid var(--bg-2);box-shadow:none;
  background:var(--navy);color:#fff;font-variant-numeric:tabular-nums}

/* ---- v5.25: kritiklik hassasiyeti kartları */
.lvlpick{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:10px;margin-top:10px}
.lvlcard{text-align:left;background:var(--bg-2);border:2px solid var(--line);
  border-radius:12px;padding:12px 14px;cursor:pointer;transition:.12s}
.lvlcard:hover:not(:disabled){border-color:var(--accent)}
.lvlcard:disabled{opacity:.6;cursor:default}
.lvlcard.on{border-color:var(--accent);background:var(--bg-3)}
.lvlcard .lvlt{font-weight:800;font-size:15px;margin-bottom:4px}
.lvlcard .lvlnum{margin-top:8px;font-size:11px;opacity:.8}


/* ---- v5.25: dar ekranda sol menü biraz geri çekilsin.
   280 px geniş ekranda gösterişli, 1366 px dizüstünde tabloyu daraltmasın. */
@media (max-width:1500px){ #nav{width:252px} nav button{font-size:15px;padding:11px 13px} }
@media (max-width:1280px){ #nav{width:228px} nav button{font-size:14.5px;padding:10px 12px}
  nav button .ic{width:21px;height:21px} .subitems button{font-size:13.5px;padding:7px 10px} }

/* ---- v5.25: PoE bütçesi */
.poebar{position:relative;height:20px;border-radius:6px;background:var(--bg-3);
  overflow:hidden;min-width:120px}
.poebar i{position:absolute;inset:0 auto 0 0;display:block;border-radius:6px;
  transition:width .3s}
.poebar i.ok{background:var(--ok)} .poebar i.warn{background:var(--warn)}
.poebar i.crit{background:var(--crit)}
/* Yüzde yazısı çubuğun üstünde durur. mix-blend-mode denendi, turuncu zeminde
   okunmuyordu; düz beyaz + gölge her renkte okunur. */
.poebar span{position:relative;display:block;text-align:center;line-height:20px;
  font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55)}
.poeports{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0 10px}
.poeport{display:inline-flex;gap:6px;align-items:baseline;padding:4px 9px;
  border:1px solid var(--line);border-radius:7px;font-size:12px;background:var(--bg-2)}
.poeport.on{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,var(--bg-2))}
.poeport b{font-weight:700}
tr.poedetail td{padding-top:0;border-top:none}
input.poebudget{width:92px;text-align:center}

/* ---- v5.25: kablo testi sonucu */
.cablebox{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;margin:4px 0 10px}
.cablebox .pairs{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.cablebox .pair{padding:5px 10px;border-radius:7px;font-size:12.5px;
  border:1px solid var(--line);background:var(--bg)}
.cablebox .pair.ok{border-color:var(--ok);
  background:color-mix(in srgb,var(--ok) 10%,var(--bg))}
.cablebox .pair.bad{border-color:var(--crit);
  background:color-mix(in srgb,var(--crit) 12%,var(--bg));font-weight:600}
tr.cableres td{border-top:none;padding-top:0}

/* ---- v5.25: konfigürasyon denetimi */
tr.cfgdetail td{background:var(--bg-2);padding:10px 14px}
tr[data-cfgdev]{cursor:pointer}

/* ---- v5.26: Haritada Göster */
.geowrap{border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--bg-2)}
#geoMap{height:calc(100vh - 330px);min-height:420px;width:100%}
.geolegend{display:flex;gap:12px;align-items:center;font-size:12px;color:var(--fg-2)}
.geolegend span{display:inline-flex;gap:5px;align-items:center}
.geolegend i{width:11px;height:11px;border-radius:50%;display:inline-block;
  border:1.5px solid #fff;box-shadow:0 0 0 1px var(--line)}
.geopop{font-size:12.5px;line-height:1.55;min-width:190px}
.geopop-t{font-weight:800;font-size:13.5px;margin-bottom:5px;display:flex;
  gap:7px;align-items:center;flex-wrap:wrap}
.geopop b{font-weight:700}
/* Leaflet kendi yazı tipini dayatıyor; panelinkiyle aynı dursun */
.leaflet-container{font:inherit}
@media print{ .geowrap{page-break-inside:avoid} #geoMap{height:520px} }

/* ===================================== yazdırma barınağı + iş emri (v5.35)
   Pencere içeriği yazdırma kuralında gizli (.modal{display:none}); iş emrini
   basmak için ayrı bir barınak gerekiyor. Ekranda hep gizli, yazdırırken
   sayfanın TEK görünen parçası. */
#printHost{display:none}
@media print{
  body.printing #app,body.printing #modalHost,body.printing .scrim{display:none !important}
  body.printing #printHost{display:block !important}
  #printHost[hidden]{display:none !important}
}
.wosheet{color:#000;font-size:12px}
.wosheet .wohead{display:flex;align-items:center;gap:12px;
  border-bottom:1.5px solid #11102b;padding-bottom:8px;margin-bottom:12px}
.wosheet .wohead img{height:34px}
.wosheet .wo-t{font-size:16px;font-weight:700;color:#11102b}
.wosheet .wo-s{font-size:11px;color:#444}
.wosheet h4{margin:14px 0 6px;font-size:12.5px;text-transform:uppercase;
  letter-spacing:.06em;color:#11102b;border-bottom:1px solid #bbb;padding-bottom:3px}
.wosheet table{width:100%;border-collapse:collapse;margin-bottom:4px}
.wosheet td,.wosheet th{border:1px solid #999;padding:5px 7px;text-align:left;
  font-size:11.5px;vertical-align:top}
.wosheet th{background:#eceaf6;font-weight:600;width:150px}
.wosheet .wobox{border:1px solid #999;min-height:70px;padding:7px;
  white-space:pre-wrap;font-size:11.5px}
/* Saha imzası: kâğıdın işe yaraması için gereken tek şey */
.wosheet .wosign{display:flex;gap:18px;margin-top:22px}
.wosheet .wosign div{flex:1;border-top:1px solid #000;padding-top:5px;
  font-size:11px;color:#333}
.wosheet .wopage{page-break-after:always}
.wosheet .wopage:last-child{page-break-after:auto}
/* v5.36: liste olarak yazdırma — tek çizelge, satır satır. Başlık hücresi
   dar olsun diye th genişlik kilidi burada kaldırılıyor; satırlar sayfa
   sonunda ikiye bölünmesin. */
.wosheet .wolist thead th{width:auto;text-align:left}
.wosheet .wolist td,.wosheet .wolist th{font-size:10.5px;padding:3px 5px}
.wosheet .wolist tr{page-break-inside:avoid}
.wosheet .wolist thead{display:table-header-group}
.wosheet .wolist .wo-s{font-size:9.5px}
/* Seçili satır ekranda belli olsun */
tr.rowsel > td{background:var(--info-bg)}

/* ---- v5.26: veri boşluğu şeridi */
.covwrap{border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  background:var(--bg-2);margin:0 0 12px}
.covstrip{display:flex;gap:1px;align-items:flex-end;height:46px;margin-top:10px;
  background:repeating-linear-gradient(45deg,var(--bg-3),var(--bg-3) 4px,
    transparent 4px,transparent 8px);border-radius:6px;padding:2px;overflow:hidden}
.covstrip i{flex:1;min-width:2px;border-radius:2px 2px 0 0;display:block;
  height:var(--h,0);align-self:flex-end}
.covstrip i.on{background:var(--accent);opacity:.85}
/* Boş saat: çubuk yok, altta kırmızı bir iz kalır — "burada veri yoktu" */
.covstrip i.off{height:100%;background:color-mix(in srgb,var(--crit) 16%,transparent);
  border-radius:2px}
.covstrip i:hover{outline:1px solid var(--fg-3)}
.covaxis{display:flex;font-size:11px;color:var(--fg-3);margin-top:4px}

/* ---- v5.27: Cihaz Bağlantı İşlemleri penceresi */
/* .modal .card width'i 520px — connbox bunu EZMELİ, yoksa form satırı
   üç parçaya bölünür ve Bağlantı Listesi'nin "İşlem" sütunu taşar. */
.modal .card.connbox{width:min(1040px,100%)}
.connbox .bd{padding:16px 18px}
.connhead{display:flex;justify-content:space-between;align-items:center;gap:16px;
  background:color-mix(in srgb,var(--accent) 7%,var(--bg-2));
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  border-radius:10px;padding:12px 16px;margin-bottom:14px;flex-wrap:wrap}
.connhead b{display:inline-block;min-width:112px;font-weight:700}
.connhead .sep{color:var(--fg-3);margin-right:6px}
/* Görseldeki gibi TEK SATIR: Tip · Ip · Port · Kullanıcı Adı · Şifre · düğmeler */
.connform{display:grid;grid-template-columns:1.15fr 1.25fr .62fr 1.1fr 1.1fr auto;
  gap:10px 12px;align-items:end;margin-bottom:12px}
.connform .f{margin:0;min-width:0}
.connbtns{display:flex;gap:8px;align-items:flex-end}
.connbtns .btn{min-width:92px}
.btn.warn{background:#f0a019;border-color:#f0a019;color:#fff}
.btn.warn:hover{filter:brightness(1.06)}
.btn.ok{background:#17a673;border-color:#17a673;color:#fff}
.btn.ok:hover{filter:brightness(1.06)}
.connlist-t{margin:16px 0 8px;font-size:14.5px;font-weight:800}
/* v5.36: zemini açığa çeken bu tabloda yazı rengi de açık kalıyordu
   (th'ın genel rengi lacivert şerit içindir) — açık temada görünmüyordu. */
.conntbl th{background:var(--bg-3);color:var(--fg);border-bottom:1px solid var(--line)}
.conntbl th .sub{color:var(--fg-3);opacity:1}
.conntbl tr.off{opacity:.55}
.connact{display:flex;gap:6px}
.ib{width:30px;height:28px;border-radius:7px;border:1.5px solid var(--line);
  background:var(--bg-2);cursor:pointer;font-size:13px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center}
.ib:hover{filter:brightness(1.05)}
.ib.edit{border-color:#17a673;color:#17a673}
.ib.test{border-color:#4c8eda;color:#4c8eda}
.ib.del{border-color:var(--crit);color:var(--crit)}
/* AKTİF/PASİF anahtarı — görseldeki hap biçimi */
.tgl{display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;
  background:var(--bg-3);border-radius:999px;padding:3px 4px 3px 10px;
  font-size:11px;font-weight:800;color:var(--fg-3);letter-spacing:.03em}
.tgl i{width:17px;height:17px;border-radius:50%;background:#fff;flex:none;
  box-shadow:0 1px 3px rgba(0,0,0,.3);transition:.15s}
.tgl.on{background:color-mix(in srgb,var(--accent) 22%,var(--bg-3));
  color:var(--accent)}
@media (max-width:1080px){ .connform{grid-template-columns:repeat(3,1fr)} }
@media (max-width:820px){ .connform{grid-template-columns:1fr 1fr} }
.connchips{display:flex;gap:4px;flex-wrap:wrap}
.connchips .tag{font-size:10.5px;padding:1px 6px}

/* ---- v5.27: denetim kaydı — eski/yeni değer sütunları */
.audittbl .auditold{color:var(--fg-3);text-decoration:line-through;
  text-decoration-color:color-mix(in srgb,var(--crit) 55%,transparent)}
.audittbl .auditnew{color:var(--fg);font-weight:600}
.audittbl td{vertical-align:top}

/* ================================================= v5.29: Komuta Merkezi
   Dashboard'un yeni düzeni. Üstte tek cümlelik hüküm, altında iş listesi.
   Sol menü gibi, durum bandı da HER İKİ temada lacivert kalır — panelin
   kimliği orada duruyor. */
.hero{background:linear-gradient(118deg,var(--navy) 0%,var(--navy-2) 52%,#262450 100%);
  border-radius:14px;padding:13px 18px;color:#f2f4f9;display:flex;gap:20px;
  align-items:center;margin-bottom:12px;box-shadow:0 6px 20px rgba(17,16,43,.20);
  position:relative;overflow:hidden;flex-wrap:wrap}
.hero::after{content:"";position:absolute;right:-70px;top:-70px;width:280px;height:280px;
  border-radius:50%;background:radial-gradient(circle,rgba(236,121,8,.22),transparent 68%);
  pointer-events:none}
.hero-crit::after{background:radial-gradient(circle,rgba(229,83,75,.26),transparent 68%)}
.hero-ok::after{background:radial-gradient(circle,rgba(46,160,67,.2),transparent 68%)}
.hero .ring{width:72px;height:72px;flex:none;position:relative}
.hero .ring svg{width:72px;height:72px}
.hero .ring b{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;font-size:19px;font-weight:800;line-height:1}
.hero .ring b i{font-size:7px;font-weight:700;font-style:normal;color:#a8adc6;
  letter-spacing:.08em;margin-top:2px}
.hero .heromsg{min-width:280px;flex:1}
.hero h1{margin:0 0 3px;font-size:17px;letter-spacing:-.01em;line-height:1.3;
  font-weight:700}
.hero .lead{color:#c3c8dd;font-size:12.5px;max-width:560px;line-height:1.4}
.hero .chips{display:flex;gap:8px;position:relative;z-index:1;flex-wrap:wrap}
.hchip{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:10px;padding:7px 12px;min-width:104px}
.hchip .k{font-size:9.5px;color:#a8adc6;letter-spacing:.07em;font-weight:700}
.hchip .v{font-size:19px;font-weight:800;margin-top:1px;line-height:1.1;
  font-variant-numeric:tabular-nums}
.hchip .d{font-size:10.5px;color:#8e93ad}
.hchip.bad .v{color:#ff8b82} .hchip.warn .v{color:#f9a03f} .hchip.good .v{color:#5dd47f}

.dgrid{display:grid;grid-template-columns:1.5fr 1fr;gap:12px;align-items:start}
.dgrid > div{min-width:0}
@media (max-width:1180px){ .dgrid{grid-template-columns:1fr} }
.dcardhead .dnote{color:var(--fg-3);font-size:11.5px;margin-left:auto;padding-right:10px}

/* iş listesi */
.actlist{margin:-6px -14px -10px}
.act{display:flex;gap:11px;align-items:center;padding:9px 14px;
  border-left:3px solid transparent;border-bottom:1px solid var(--line);cursor:pointer}
.act:last-of-type{border-bottom:0}
.act:hover{background:var(--bg-3)}
.act.crit{border-left-color:var(--crit);
  background:linear-gradient(90deg,var(--crit-bg),transparent 42%)}
.act.warn{border-left-color:var(--warn);
  background:linear-gradient(90deg,var(--warn-bg),transparent 42%)}
.act.info{border-left-color:var(--info)}
.act .ico{width:34px;height:34px;border-radius:10px;flex:none;display:flex;
  align-items:center;justify-content:center;font-size:16px;background:var(--bg-3)}
.act.crit .ico{background:var(--crit-bg);color:var(--crit)}
.act.warn .ico{background:var(--warn-bg);color:var(--warn)}
.act .txt{flex:1;min-width:0}
.act .txt b{font-size:13.5px}
.act .txt .m{color:var(--fg-2);font-size:12.3px;margin-top:2px}
.act .meta{text-align:right;flex:none;font-size:11.5px;color:var(--fg-3);min-width:100px}
.act .meta .imp{display:block;font-weight:800;font-size:13px;color:var(--fg)}
.actmore{padding:10px 16px;font-size:12px;color:var(--fg-3)}
.ok-state{color:var(--ok)}

/* filo çubukları */
.fleetbox{margin:0 -4px}
.fleetrow{display:flex;align-items:center;gap:11px;padding:8px 0}
.fleetrow .nm{width:96px;font-size:12.5px;font-weight:600}
.fleetrow .bar{flex:1;height:9px;border-radius:999px;background:var(--bg-3);
  overflow:hidden;display:flex}
.fleetrow .bar i{display:block;height:100%}
.fleetrow .bar i.ok{background:var(--ok)} .fleetrow .bar i.warn{background:var(--warn)}
.fleetrow .bar i.crit{background:var(--crit)} .fleetrow .bar i.off{background:var(--fg-3)}
.fleetrow .num{width:64px;text-align:right;font-size:12.5px;font-weight:700;
  font-variant-numeric:tabular-nums}
.fleetrow .num s{text-decoration:none;color:var(--fg-3);font-weight:500}
.fleetnote{margin-top:9px;padding-top:9px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--fg-3)}

/* veri akışı */
.flowbox .flowrow{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:12.6px}
.flowbox .flowrow .nm{flex:1}
.flowbox .flowrow + .flowrow{border-top:1px solid var(--line)}

/* 24 saat nabzı */
.spark{display:flex;align-items:flex-end;gap:3px;height:70px;margin:2px 0 6px}
.spark i{flex:1;background:var(--accent);border-radius:2px 2px 0 0;opacity:.72;min-height:2px}
.spark i.hot{background:var(--crit);opacity:1}
.sparkx{display:flex;justify-content:space-between;font-size:10.5px;color:var(--fg-3)}

/* şube şeridi */
.branchstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;margin:12px 0}
.bcard{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;
  padding:13px 15px;cursor:pointer;transition:border-color .12s}
.bcard:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.bcard .t{font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:7px}
.bcard .n{font-size:21px;font-weight:800;margin:6px 0 1px;font-variant-numeric:tabular-nums}
.bcard .s{font-size:11.5px;color:var(--fg-3);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.bcard.flat{cursor:default}
.bcard.flat:hover{border-color:var(--line)}

/* ================================================ v5.30: canlı kutular
   Kartlar, rozetler ve durum kutuları daha belirgin. Hepsi tek yerde:
   bir ekran için değil, panelin tamamı için geçerli. */
.card, .card2, .dcard, .tablewrap, .sec{
  box-shadow:0 1px 3px rgba(17,16,43,.07), 0 6px 18px rgba(17,16,43,.05)}
.dcard{border-radius:14px;overflow:hidden}
.dcardhead{background:linear-gradient(180deg,var(--bg-3),var(--bg-2));
  border-bottom:2px solid var(--line);padding:11px 14px}
.dcardhead h3{letter-spacing:.01em}
.card2{border-left:4px solid var(--line);transition:border-color .12s,transform .1s}
.card2.go:hover{transform:translateY(-1px)}
.card2 .k{font-weight:700;letter-spacing:.06em}
.card2 .v{font-weight:800;letter-spacing:-.02em}
/* Durum rengi olan kutular kenarından belli olsun */
.card2:has(.v.g-crit){border-left-color:var(--crit)}
.card2:has(.v.g-warn){border-left-color:var(--warn)}
.card2:has(.v.g-ok){border-left-color:var(--ok)}
.statcards .card2.on{border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,var(--bg-2))}

/* Rozetler dolgulu ve okunur */
.pill{padding:2px 9px;letter-spacing:.015em;font-weight:700}
.tag{font-weight:600;letter-spacing:.02em}
.msg{border-left:4px solid transparent;font-size:13px;padding:10px 12px}
.msg.ok{border-left-color:var(--ok)}
.msg.err{border-left-color:var(--crit)}
.msg.warn{border-left-color:var(--warn)}
.msg.info{border-left-color:var(--info)}

/* Başlıklar */
h2{letter-spacing:-.015em}
h3{letter-spacing:-.01em}
.panelhead h2{font-weight:700}
.subnav button{letter-spacing:.02em;font-weight:500}
.subnav button.on{background:color-mix(in srgb,var(--accent) 12%,var(--bg-2));
  border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent);
  font-weight:700}
.btn{font-weight:500}
.btn.pri{box-shadow:0 1px 2px color-mix(in srgb,var(--accent) 40%,transparent)}

/* son olaylar şeridi (v5.30) */
.evlist{margin:-6px -14px -10px}
.ev{display:flex;gap:10px;align-items:center;padding:7px 14px;
  border-bottom:1px solid var(--line);cursor:pointer;font-size:12.6px}
.ev:last-child{border-bottom:0}
.ev:hover{background:color-mix(in srgb,var(--accent) 8%,var(--bg-2))}
.ev .tm{color:var(--fg-3);width:52px;flex:none;font-size:11.5px}
.ev .st{width:8px;height:8px;border-radius:50%;flex:none}
.ev .st.crit{background:var(--crit)} .ev .st.warn{background:var(--warn)}
.ev .st.info{background:var(--info)} .ev .st.ok{background:var(--ok)}
.ev .nm{font-weight:700;width:150px;flex:none;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ev .ms{flex:1;min-width:0;color:var(--fg-2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
#brandHome{cursor:pointer}
#brandHome:hover{opacity:.85}
#brandHome:focus-visible{outline:2px solid var(--nav-accent);outline-offset:4px;border-radius:8px}
/* Dashboard başlığı kalktı (v5.30) — üst satır yalnızca kapsam ve düğmeler */
.dashhead{margin-bottom:10px;min-height:0}
.dashhead .sub{font-size:12px}
.wobtn.poe{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent);
  font-size:14px}
.wobtn.poe:hover{background:var(--warn-bg)}

/* Tarih / saat kutuları (v5.30) — kutunun her yeri tıklanabilir, takvim
   simgesi belirgin. Varsayılan görünüm soluk ve küçücüktü. */
input[type=date],input[type=datetime-local],input[type=time],input[type=month]{
  cursor:pointer;font-variant-numeric:tabular-nums;letter-spacing:.01em;
  background:var(--bg-2);border:1.5px solid var(--line);padding:7px 10px}
input[type=date]:hover,input[type=datetime-local]:hover,
input[type=time]:hover,input[type=month]:hover{border-color:var(--accent)}
input[type=date]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator{
  cursor:pointer;opacity:.85;padding:3px;border-radius:5px;
  filter:invert(16%) sepia(37%) saturate(2400%) hue-rotate(216deg) brightness(92%)}
input[type=date]::-webkit-calendar-picker-indicator:hover,
input[type=datetime-local]::-webkit-calendar-picker-indicator:hover{
  background:color-mix(in srgb,var(--accent) 16%,transparent)}
/* Yetki matrisinde elle değiştirilen hücre (v5.31) */
.matrix td.cb.edited{background:color-mix(in srgb,var(--accent) 14%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent)}

/* ===================================================== şube süzgeci (v5.31)
   Her süzgeç çubuğunda aynı kutu duruyor; seçim yapılmışken göze çarpması
   lazım — yoksa "liste neden eksik" sorusu kutuya bakmadan sorulur. */
/* Şube kutusu diğer kutularla AYNI ölçüdedir; farkı yalnızca seçim yapılmışken
   belli olur — "liste neden eksik" sorusunun cevabı kutuya bakmadan sorulmasın.
   Seçili değilken hiçbir ayrıcalığı yok: tek tip kuralını o da izler. */
/* Yatay süzgeç çubuğunda kutular yan yana durur, genişlik sınırlanır. Kenar
   listede ise alt alta dizilirler: orada şube kutusunu dar bırakmak onu
   komşularından farklı gösteriyordu — sütunun tamamını kaplar. */
.filterbar .branchsel{min-width:160px;max-width:200px}
#side .branchsel{width:100%;max-width:none}
select.branchsel.on{border-color:var(--accent);
  box-shadow:inset 3px 0 0 var(--accent);font-weight:600}
/* Şube kutusu kenar listede de ayrıcalıklı değil: ölçüsü komşularıyla aynı,
   farkı yalnızca seçim yapılmışken belli olur. */
#side select#fBranch{font-size:13px}

/* ---- Sistem → Logo / Görünüm (v5.39) ---------------------------------- */
/* Koyu tema logosu açık zeminde görünmez, açık tema logosu koyu zeminde
   kaybolur. Bu yüzden her yuva KENDİ zemininde önizlenir — "yüklendi mi,
   doğru dosya mı" sorusu ekranda cevaplanabilsin. */
.brandgrid{display:grid;gap:14px;margin-top:14px;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.brandslot{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
  padding:14px 14px 12px;display:flex;flex-direction:column;gap:10px}
.brandslot .bshead .sub{color:var(--fg-3);font-size:12px;margin-top:3px;line-height:1.45}
.brandslot .tag{font-size:11px;color:var(--fg-3);border:1px solid var(--line);
  border-radius:20px;padding:1px 8px;margin-left:7px;white-space:nowrap}
.brandslot .tag.on{color:var(--orange);border-color:var(--orange)}
.bsprev{display:flex;align-items:center;justify-content:center;min-height:96px;
  border:1px dashed var(--line);border-radius:9px;padding:14px;background:var(--bg-3)}
.bsprev img{max-width:100%;max-height:72px;width:auto;height:auto}
.bsprev.dark{background:#11102b;border-color:#2a2a55}
.bsprev.sq img{max-height:56px}
.bsmeta{color:var(--fg-3);font-size:12px;min-height:16px}
.bsact{display:flex;gap:8px;flex-wrap:wrap}
.bsact .btn{flex:1 1 auto}
@media(max-width:560px){
  .bsact{flex-direction:column}
}