:root{
  --osb-cyan:#16c7d9;
  --osb-blue:#0b2494;
  --osb-orange:#f28c28;
  --esbas-red:#ed0033;
}
.login-esbas,.brand-esbas-logo,.osb-wall-esbas-logo{display:block;object-fit:contain;background:#fff;border-radius:10px;border:1px solid rgba(11,36,148,.18);box-shadow:0 8px 22px rgba(0,0,0,.16)}
.login-esbas{width:210px;max-width:82%;max-height:72px;padding:12px 16px}
.brand-esbas-logo{width:180px;max-width:100%;height:50px;padding:8px 12px;margin-bottom:3px}
.osb-wall-esbas-logo{width:118px;height:44px;padding:7px 9px;flex:0 0 auto}
.brand-osb-logo,.login-osb{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  color:#fff;background:linear-gradient(145deg,#087596,#063550 72%);
  border:1px solid rgba(255,255,255,.18);box-shadow:0 8px 22px rgba(0,0,0,.2);
  font-weight:900;letter-spacing:.08em
}
.brand-osb-logo{width:74px;height:46px;border-radius:10px;font-size:18px}
.login-osb{width:108px;height:72px;border-radius:14px;font-size:24px}
.brand-osb-logo small,.login-osb small{display:block;font-size:8px;letter-spacing:.03em;font-weight:650;opacity:.78}
.demo-live-indicator{border-color:rgba(22,199,217,.32)!important;background:rgba(22,199,217,.08)!important}
.demo-pulse{background:var(--osb-cyan)!important;box-shadow:0 0 0 0 rgba(22,199,217,.65)!important}
.osb-scope-ribbon{display:flex;gap:8px;align-items:center;margin:0 0 10px;padding:8px 12px;border:1px solid #d8e7ec;border-radius:10px;background:linear-gradient(90deg,#eefbfc,#f8fbfc);color:#31566b;font-size:12px}
.osb-scope-ribbon strong{color:#063d59}.osb-scope-ribbon span{padding-left:8px;border-left:1px solid #c7dde4}
@media(max-width:760px){.login-esbas{width:180px}.osb-scope-ribbon{overflow:auto;white-space:nowrap}.scada-btn{display:none!important}}

/* ESB merkezli haritanın ağ kesintisinde de sunum görünümünü koruyan yerel şeması. */
#mapBoard.map-board{background-color:#dbe6e5!important;background-image:linear-gradient(28deg,transparent 46%,rgba(255,255,255,.9) 47% 51%,transparent 52%),linear-gradient(96deg,transparent 42%,rgba(255,255,255,.85) 43% 47%,transparent 48%),linear-gradient(145deg,#c8ddd3 0 34%,#9fc9bb 35% 68%,#cfe0d7 69%)!important}
#mapBoard.map-board:before{content:"EGE SERBEST BÖLGESİ · GAZİEMİR"!important;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-6deg);width:46%;height:72%;display:grid;place-items:center;border:4px solid rgba(11,36,148,.34);border-radius:44% 30% 38% 28%;background:rgba(255,255,255,.24);color:rgba(11,36,148,.5);font-size:clamp(14px,2vw,28px);font-weight:900;letter-spacing:.08em;text-align:center}
.osm-tile.tile-error{opacity:0}
.osm-zone-label{position:absolute;z-index:7;left:50%;top:12px;transform:translateX(-50%);padding:7px 12px;border:1px solid rgba(255,255,255,.55);border-radius:999px;background:rgba(3,27,50,.82);box-shadow:0 4px 14px rgba(0,0,0,.22);color:#fff;font-size:11px;font-weight:900;letter-spacing:.06em;pointer-events:none;white-space:nowrap}

/* Büyük Ekran / SCADA: haritasız 12 bağımsız fabrika kartı */
body.scada-wall{overflow:hidden!important}
.osb-scada-wall{position:fixed;inset:0;z-index:10000;display:none;grid-template-rows:auto minmax(0,1fr);gap:10px;padding:12px;background:#061624;color:#f4fbff;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
body.scada-wall .osb-scada-wall{display:grid}
.osb-wall-topbar{display:grid;grid-template-columns:minmax(360px,1.35fr) minmax(420px,1.45fr) auto auto;align-items:center;gap:16px;min-height:66px;padding:8px 12px;border:1px solid #1d435d;border-radius:12px;background:linear-gradient(135deg,#0a2d45,#082035)}
.osb-wall-brand{display:flex;align-items:center;gap:12px;min-width:0}.osb-wall-logo{display:grid;place-items:center;width:54px;height:44px;border-radius:9px;background:linear-gradient(145deg,#087596,#063550);border:1px solid #36bad3;color:#fff;font-size:18px;font-weight:900;letter-spacing:.08em}.osb-wall-brand h1{margin:0;font-size:20px;line-height:1.1}.osb-wall-brand p{margin:4px 0 0;color:#8eb3c9;font-size:12px}.osb-wall-summary{display:flex;flex-wrap:wrap;justify-content:center;gap:7px}.osb-wall-summary span{padding:6px 9px;border:1px solid currentColor;border-radius:999px;font-size:12px;font-weight:800;text-transform:uppercase}.osb-wall-summary .normal{color:#45d394}.osb-wall-summary .warning{color:#ffca63}.osb-wall-summary .critical{color:#ff6b76}.osb-wall-summary .offline{color:#93a7b4}.osb-wall-summary .idle{color:#69b7df}.osb-wall-clock{display:flex;flex-direction:column;text-align:right;white-space:nowrap}.osb-wall-clock strong{font-size:22px;font-variant-numeric:tabular-nums}.osb-wall-clock span{color:#8eb3c9;font-size:11px}.osb-wall-exit{min-height:42px;padding:0 14px;border:1px solid #f2a653;border-radius:9px;background:#f28c28;color:#1d2730;font-weight:900;cursor:pointer}
.osb-wall-grid{min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:10px;overflow-y:auto;overscroll-behavior:contain}
.osb-wall-card{min-width:0;min-height:0;display:grid;grid-template-rows:auto minmax(42px,auto) minmax(0,1fr) auto;gap:7px;padding:10px;border:2px solid #28516b;border-radius:12px;background:linear-gradient(155deg,#102d42,#0b2132);box-shadow:0 8px 24px #0004;overflow:hidden;cursor:pointer}.osb-wall-card.state-warning{border-color:#d79b28}.osb-wall-card.state-critical{border-color:#ea5260;box-shadow:0 0 0 1px #ea526055,0 8px 24px #0005}.osb-wall-card.state-offline{border-color:#647887;filter:saturate(.65)}.osb-wall-card.state-idle{border-color:#397b9e}
.osb-wall-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-width:0}.osb-wall-card h2{margin:0;color:#fff;font-size:clamp(14px,1vw,18px);line-height:1.18;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.osb-wall-card header p{margin:3px 0 0;color:#8eb3c9;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.osb-wall-status{flex:0 0 auto;padding:4px 7px;border-radius:999px;background:#234359;color:#dcecf5;font-size:10px;font-weight:900;text-transform:uppercase}.state-normal .osb-wall-status{background:#124e38;color:#79e7b3}.state-warning .osb-wall-status{background:#654b16;color:#ffd47d}.state-critical .osb-wall-status{background:#6f2029;color:#ffadb4}.state-offline .osb-wall-status{background:#3c4d58;color:#c6d0d6}.state-idle .osb-wall-status{background:#164c69;color:#a7ddf7}
.osb-wall-alert{min-width:0;display:flex;flex-direction:column;justify-content:center;padding:6px 8px;border-left:4px solid #3fbc82;border-radius:6px;background:#0c3c2d;overflow:hidden}.osb-wall-alert.warning{border-left-color:#f0b744;background:#4d3914}.osb-wall-alert.critical{border-left-color:#ff6875;background:#5a1c23}.osb-wall-alert.offline{border-left-color:#899ba7;background:#344550}.osb-wall-alert.idle{border-left-color:#5fb2dc;background:#163e54}.osb-wall-alert strong,.osb-wall-alert span{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.osb-wall-alert strong{font-size:11px}.osb-wall-alert span{margin-top:2px;color:#c8d8e2;font-size:10px}
.osb-wall-measures{min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:6px}.osb-wall-measure{min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(22px,1fr) auto;align-items:center;column-gap:5px;row-gap:1px;padding:5px 7px;border:1px solid #2b526b;border-radius:8px;background:#071b2a;overflow:hidden}.osb-wall-measure>span{grid-column:1;grid-row:1;min-width:0;color:#91b9cf;font-size:11px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.osb-wall-measure>small{grid-column:2;grid-row:1;color:#8eb3c9;font-size:9px;white-space:nowrap}.osb-wall-measure>strong{grid-column:1/3;grid-row:2;justify-self:center;min-width:0;max-width:100%;color:#fff;font-size:clamp(21px,1.75vw,29px);line-height:.95;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:clip}.osb-wall-measure>em{grid-column:1/3;grid-row:3;min-width:0;color:#759db4;font-size:8px;font-style:normal;line-height:1.05;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.osb-wall-measure.is-alarm{border-color:#ff6875;background:#4a1720}.osb-wall-measure.is-alarm>strong{color:#ff8590}.osb-wall-card>footer{display:flex;justify-content:space-between;gap:8px;color:#8eb3c9;font-size:10px;white-space:nowrap}
@media(min-width:2200px){.osb-scada-wall{padding:18px;gap:14px}.osb-wall-grid{gap:14px}.osb-wall-card{padding:15px;gap:10px}.osb-wall-card h2{font-size:22px}.osb-wall-card header p,.osb-wall-measure>span{font-size:14px}.osb-wall-alert strong{font-size:14px}.osb-wall-alert span{font-size:12px}.osb-wall-measure>strong{font-size:42px}.osb-wall-measure>small,.osb-wall-card>footer{font-size:12px}.osb-wall-measure>em{font-size:11px}}
@media(max-width:1180px){.osb-wall-topbar{grid-template-columns:1fr auto auto}.osb-wall-summary{display:none}.osb-wall-grid{grid-template-columns:repeat(3,minmax(250px,1fr));grid-template-rows:none;grid-auto-rows:minmax(190px,1fr)}}
@media(max-width:820px){.osb-scada-wall{padding:8px}.osb-wall-topbar{grid-template-columns:1fr auto}.osb-wall-clock{display:none}.osb-wall-brand h1{font-size:16px}.osb-wall-brand p{display:none}.osb-wall-grid{grid-template-columns:repeat(2,minmax(220px,1fr));grid-auto-rows:210px}}
@media(max-height:680px) and (min-width:1181px){.osb-wall-grid{grid-template-rows:none;grid-auto-rows:190px}}
@media(max-height:800px) and (min-width:1181px){.osb-scada-wall{padding:8px;gap:8px}.osb-wall-topbar{min-height:56px;padding:5px 9px}.osb-wall-esbas-logo{width:104px;height:38px;padding:6px 8px}.osb-wall-brand h1{font-size:18px}.osb-wall-card{padding:7px;gap:5px}.osb-wall-card h2{font-size:14px}.osb-wall-card header p{font-size:9px}.osb-wall-alert{min-height:34px;padding:4px 6px}.osb-wall-alert strong{font-size:10px}.osb-wall-alert span{font-size:9px}.osb-wall-measures{gap:4px}.osb-wall-measure{grid-template-rows:auto minmax(19px,1fr) auto;padding:3px 5px;row-gap:0}.osb-wall-measure>span{font-size:9px}.osb-wall-measure>strong{font-size:22px}.osb-wall-measure>small{font-size:7px}.osb-wall-measure>em{font-size:7px}.osb-wall-card>footer{font-size:8px}}