/* Mim Bytes YSİ — ürüne özgü stiller (app.css ortak tabanın üstüne). Tokenler tokens.css'te, ham HEX yok. */
.ok { color: var(--mb-success); } .warn { color: var(--mb-warning); } .bad { color: var(--mb-danger); }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--mb-text-muted); flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 2px; background: var(--mb-accent); display: inline-block; }
.legend i.c2 { background: var(--mb-chart-2); } .legend i.c3 { background: var(--mb-chart-3); } .legend i.c4 { background: var(--mb-chart-4); }
.legend i.warn { background: var(--mb-warning); } .legend i.bad { background: var(--mb-danger); }

/* giriş görseli: bina + sensör düğümleri + sismik iz */
.net .bld { fill: var(--mb-bg-elevated); stroke: var(--mb-border-strong); stroke-width: 1.2; }
.net .fl { stroke: var(--mb-border-default); stroke-width: 1; }
.net .sn { fill: var(--mb-accent); }
.net .sn.ring { fill: none; stroke: var(--mb-accent); stroke-width: 1.2; opacity: .6; transform-origin: center; transform-box: fill-box; animation: ring 2.6s ease-out infinite; }
@keyframes ring { 0% { transform: scale(.4); opacity: .8; } 100% { transform: scale(2.6); opacity: 0; } }
.net .seis { fill: none; stroke: var(--mb-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.net .seis.dim { stroke: var(--mb-border-strong); stroke-width: 1; }
.net .gnd { stroke: var(--mb-border-strong); stroke-width: 1.4; }
.net .hub { fill: var(--mb-accent-subtle); stroke: var(--mb-accent); stroke-width: 1.2; }

/* durum renkleri */
.lv-normal { --lv: var(--mb-success); } .lv-uyari { --lv: var(--mb-warning); } .lv-alarm { --lv: var(--mb-danger); } .lv-off { --lv: var(--mb-text-disabled); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lv, var(--mb-text-disabled)); display: inline-block; flex: none; }
.dot.live { animation: dotpulse 2s ease-out infinite; }
@keyframes dotpulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lv) 55%, transparent); } 100% { box-shadow: 0 0 0 7px transparent; } }
.stat.lv-alarm::before { background: var(--mb-danger); } .stat.lv-uyari::before { background: var(--mb-warning); }
.stat .val.bad { color: var(--mb-danger); } .stat .val.warn { color: var(--mb-warning); }

/* yapı kartları */
.ygrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--mb-space-5); }
.ycard { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; cursor: pointer; position: relative; overflow: hidden; }
.ycard::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--lv, var(--mb-accent)) 0%, transparent 70%); }
.ycard:hover { border-color: var(--mb-accent-border); transform: translateY(-2px); }
.ycard .head { display: flex; align-items: flex-start; gap: 12px; }
.ycode { width: 44px; height: 44px; border-radius: var(--mb-radius-md); display: grid; place-items: center; background: var(--mb-accent-subtle); border: 1px solid var(--mb-accent-border); color: var(--mb-accent-text); flex: none; }
.ycode svg { width: 22px; height: 22px; }
.ycard h3 { font-size: 16px; font-weight: 600; line-height: 1.25; }
.ycard .meta { font-size: 12px; color: var(--mb-text-muted); margin-top: 3px; }
.ycard .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ycard .foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; color: var(--mb-text-muted); border-top: 1px solid var(--mb-border-subtle); padding-top: 12px; }
.ycard .foot .spark { width: 110px; height: 28px; }
.tchips { display: flex; gap: 6px; flex-wrap: wrap; }
.tchip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--mb-radius-xs); background: var(--mb-bg-inset); border: 1px solid var(--mb-border-subtle); font: 500 11px var(--mb-font-mono); color: var(--mb-text-secondary); }

/* sensör kartları */
.sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--mb-space-4); }
.scard { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; position: relative; }
.scard:hover { border-color: var(--mb-accent-border); transform: translateY(-2px); }
.scard.off { opacity: .62; }
.scard .top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.scard .top b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.scard .loc { font-size: 12px; color: var(--mb-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: -6px; }
.scard .v { display: flex; align-items: baseline; gap: 6px; }
.scard .v b { font: 600 26px/1.1 var(--mb-font-mono); letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--lv, var(--mb-text-primary)); }
.scard .v small { font-size: 13px; color: var(--mb-text-muted); font-weight: 500; }
.scard .v .ago { margin-left: auto; font: 500 11px var(--mb-font-mono); color: var(--mb-text-muted); }
.scard .spark { width: 100%; height: 36px; }
.spark path { fill: none; stroke: var(--lv, var(--mb-accent)); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.spark .area { fill: var(--lv, var(--mb-accent)); opacity: .12; stroke: none; }
.spark .thr { stroke: var(--mb-warning); stroke-dasharray: 3 3; stroke-width: 1; opacity: .7; }

/* büyük grafik */
.chart-wrap { position: relative; }
.lchart { width: 100%; height: 300px; display: block; }
.lchart.tall { height: 360px; }
.lchart .gl { stroke: var(--mb-chart-grid); }
.lchart .ax { font: 500 11px var(--mb-font-mono); fill: var(--mb-chart-axis); }
.lchart .ln { fill: none; stroke: var(--mb-chart-1); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.lchart .ln.c2 { stroke: var(--mb-chart-2); } .lchart .ln.c3 { stroke: var(--mb-chart-3); } .lchart .ln.c4 { stroke: var(--mb-chart-4); }
.lchart .band { fill: var(--mb-chart-1); opacity: .14; }
.lchart .ar { fill: var(--mb-chart-1); opacity: .10; }
.lchart .thr { stroke-dasharray: 5 4; stroke-width: 1.2; }
.lchart .thr.w { stroke: var(--mb-warning); } .lchart .thr.a { stroke: var(--mb-danger); }
.lchart .thrl { font: 600 10px var(--mb-font-mono); }
.lchart .thrl.w { fill: var(--mb-warning); } .lchart .thrl.a { fill: var(--mb-danger); }
.lchart .cur { stroke: var(--mb-border-strong); stroke-dasharray: 2 3; }
.lchart .pt { fill: var(--mb-bg-elevated); stroke: var(--mb-chart-1); stroke-width: 2; }
.ctip { position: absolute; pointer-events: none; background: var(--mb-bg-overlay); border: 1px solid var(--mb-border-default); border-radius: var(--mb-radius-sm); padding: 8px 10px; font-size: 12px; box-shadow: var(--mb-elev-3); display: none; z-index: 3; white-space: nowrap; }
.ctip b { font: 600 14px var(--mb-font-mono); display: block; }
.ctip span { color: var(--mb-text-muted); }
.chart-stats { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--mb-text-muted); }
.chart-stats b { font: 600 14px var(--mb-font-mono); color: var(--mb-text-primary); margin-left: 6px; }
.live-tag { display: inline-flex; align-items: center; gap: 8px; font: 500 12px var(--mb-font-mono); color: var(--mb-text-muted); }

/* sensör tablosu */
.stbl td .nm { font-weight: 600; } .stbl td .sub { font-size: 12px; color: var(--mb-text-muted); }
.stbl tbody tr { cursor: pointer; }
.val-cell { font: 600 15px var(--mb-font-mono); font-variant-numeric: tabular-nums; }
.val-cell small { font-size: 12px; color: var(--mb-text-muted); font-weight: 500; margin-left: 4px; }

/* olay akışı */
.grid-2, .grid-3 { align-items: start; }
.feed-box { max-height: 460px; overflow: auto; }
.feed .ic.alarm { color: var(--mb-danger); border-color: var(--mb-danger-border); background: var(--mb-danger-subtle); }
.feed .ic.uyari { color: var(--mb-warning); border-color: var(--mb-warning-border); background: var(--mb-warning-subtle); }
.feed .ic.normal { color: var(--mb-success); }
.feed .ic.bilgi { color: var(--mb-accent-text); }
.feed .msg { font-size: 14px; line-height: 1.4; }

/* detay başlığı */
.detail-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.detail-head .big { font: 600 34px/1.1 var(--mb-font-mono); letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--lv, var(--mb-text-primary)); }
.detail-head .big small { font-size: 16px; color: var(--mb-text-muted); margin-left: 6px; font-weight: 500; }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 10px 16px; font-size: 14px; }
.kv dt { color: var(--mb-text-muted); } .kv dd { margin: 0; }
.triax { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.triax div { background: var(--mb-bg-inset); border: 1px solid var(--mb-border-subtle); border-radius: var(--mb-radius-sm); padding: 10px 12px; }
.triax span { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--mb-text-muted); }
.triax b { display: block; font: 600 18px var(--mb-font-mono); margin-top: 2px; font-variant-numeric: tabular-nums; }
.grid-3 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--mb-space-6); }
@media (max-width: 1100px) { .grid-3 { grid-template-columns: 1fr; } }
pre.code { margin: 0; padding: 14px 16px; border-radius: var(--mb-radius-sm); background: var(--mb-bg-sunken); border: 1px solid var(--mb-border-subtle); font: 400 12.5px/1.6 var(--mb-font-mono); overflow: auto; color: var(--mb-text-secondary); white-space: pre; }
pre.code b { color: var(--mb-accent-text); font-weight: 500; }
.keybox { display: flex; gap: 8px; align-items: center; }
.keybox code { flex: 1; font: 500 13px var(--mb-font-mono); padding: 10px 12px; background: var(--mb-bg-sunken); border: 1px solid var(--mb-border-subtle); border-radius: var(--mb-radius-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--mb-radius-sm); border-left: 3px solid var(--mb-accent); background: var(--mb-accent-subtle); font-size: 13px; color: var(--mb-text-secondary); }
.sim-note svg { width: 18px; height: 18px; flex: none; color: var(--mb-accent-text); margin-top: 1px; }
.fl-stack { display: flex; flex-direction: column-reverse; gap: 4px; }
.fl-row { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: center; }
.fl-row .lbl { font: 600 11px var(--mb-font-mono); color: var(--mb-text-muted); text-align: right; }
.fl-row .cells { display: flex; gap: 6px; flex-wrap: wrap; }
.fcell { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: var(--mb-radius-sm); background: var(--mb-bg-inset); border: 1px solid var(--mb-border-subtle); font-size: 12px; cursor: pointer; }
.fcell:hover { border-color: var(--mb-accent-border); }
.fcell b { font: 600 12px var(--mb-font-mono); }