/* ============================================================================
   SantraLog DEMO — assets/demo.css
   Tanıtım sitesinin (santralog.com.tr) tasarım diliyle birebir aynı token'lar.
   Tüm bileşenler token'lara bağlıdır; .dark-scope kapsayıcısı token değerlerini
   koyu "kontrol odası" varyantına çevirir (canlı akış sayfası bunu kullanır).
   ========================================================================== */

/* ---------- token'lar (açık tema — siteyle aynı) ---------- */
:root{
  --bg:#ffffff; --bg2:#f4f7f8; --panel:#ffffff;
  --line:#e2e9eb; --line2:#d2dcdf;
  --txt:#0e1517; --dim:#4f6167; --dim2:#84969c;
  --sig:#0d9488; --sig-hi:#14b8a6; --sig-ink:#ffffff;
  --warn:#b45309; --err:#d2482e; --vio:#6d5bd0;
  --cond:'IBM Plex Sans Condensed',system-ui,sans-serif;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --wrap:1200px;
  --golge-panel:0 24px 60px -34px rgba(14,21,23,.22);
  --golge-kart:0 10px 30px -22px rgba(14,21,23,.16);
}

/* ---------- koyu varyant (.dark-scope kapsayıcısına uygulanır) ---------- */
.dark-scope{
  --bg:#0b1114; --bg2:#0a0f12; --panel:#0b1114;
  --line:#1b262c; --line2:#243239;
  --txt:#e9f0f0; --dim:#94a6ab; --dim2:#5f7278;
  --sig:#2dd4bf; --sig-hi:#5eead4; --sig-ink:#062a26;
  --warn:#f0b04e; --err:#f06a4d; --vio:#9d8df1;
  --golge-panel:0 24px 60px -30px rgba(0,0,0,.5);
  --golge-kart:0 10px 30px -18px rgba(0,0,0,.5);
}
.dark-scope{background:var(--bg);color:var(--txt)}

/* ---------- temel ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:400 16px/1.7 var(--sans);background:var(--bg);color:var(--txt);
     -webkit-font-smoothing:antialiased}
.num{font-variant-numeric:tabular-nums}
::selection{background:rgba(45,212,191,.25)}
a{color:inherit;text-decoration:none}
b,strong{font-weight:500}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
@media(max-width:640px){.wrap{padding:0 20px}}

/* ============================================================================
   ÜST BAR + DEMO NAVİGASYONU (index.html kabuğu)
   ========================================================================== */
.shell{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);
       backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
       border-bottom:1px solid var(--line)}
.topbar{display:flex;align-items:center;gap:18px;height:64px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand svg{display:block}
.brand .wm{font-family:var(--cond);font-weight:700;font-size:21px;letter-spacing:-.01em;line-height:1}
.brand .wm em{font-style:normal;color:var(--sig)}
.demobadge{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
           color:var(--warn);border:1px solid rgba(240,176,78,.5);background:rgba(240,176,78,.08);
           padding:4px 10px;border-radius:2px;white-space:nowrap}
.topbar .bosluk{flex:1}
.backlink{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--dim2);
          white-space:nowrap;transition:color .18s}
.backlink:hover{color:var(--sig)}
@media(max-width:760px){.demobadge{display:none}}

.dnav{display:flex;gap:2px;overflow-x:auto;border-top:1px solid var(--line);
      scrollbar-width:none}
.dnav::-webkit-scrollbar{display:none}
.dnav a{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
        color:var(--dim2);padding:11px 16px 10px;white-space:nowrap;flex:none;
        box-shadow:inset 0 -2px 0 transparent;transition:color .18s,box-shadow .18s}
.dnav a:hover{color:var(--sig)}
.dnav a.aktif{color:var(--txt);box-shadow:inset 0 -2px 0 var(--sig)}

/* ---------- görünüm alanı ---------- */
#view{min-height:62vh;padding:36px 0 84px}
.foot{border-top:1px solid var(--line);padding:20px 0 26px;
      font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--dim2)}
.foot b{color:var(--warn);font-weight:500}

/* ============================================================================
   SAYFA İSKELETİ (sayfa ajanları bunları kullanır)
   ========================================================================== */
.stack{display:flex;flex-direction:column;gap:22px}

.pg-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.pg-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--sig);
            text-transform:uppercase;margin-bottom:6px}
.pg-eyebrow::before{content:'';display:inline-block;width:6px;height:6px;background:var(--sig);
                    margin-right:9px;vertical-align:1px}
.pg-head h2{font-family:var(--cond);font-weight:600;font-size:clamp(26px,3vw,34px);
            letter-spacing:-.02em;line-height:1.05}
.pg-head h2 em{font-style:normal;color:var(--sig)}
.pg-sub{color:var(--dim);font-size:14px;max-width:640px;margin-top:6px}

/* ---------- panel (ürün çerçevesi) ---------- */
.panel{border:1px solid var(--line2);background:var(--panel);border-radius:3px;
       overflow:hidden;box-shadow:var(--golge-panel)}
.phead{display:flex;justify-content:space-between;align-items:center;gap:12px;
       padding:13px 18px;border-bottom:1px solid var(--line)}
.phead .t{font-family:var(--mono);font-size:10.5px;color:var(--dim2);letter-spacing:.1em}
.phead .on{color:var(--sig);display:flex;align-items:center;gap:7px;
           font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;white-space:nowrap}
.phead .on i{width:6px;height:6px;border-radius:50%;background:var(--sig);display:block;
             animation:pulse 2.2s ease-in-out infinite}
.phead .on.uyari{color:var(--warn)} .phead .on.uyari i{background:var(--warn)}
.phead .on.hata{color:var(--err)}   .phead .on.hata i{background:var(--err)}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
.pbody{padding:20px}

/* ---------- KPI hücreleri: tek çerçeveli ızgara ---------- */
.cells{display:grid;border:1px solid var(--line2);background:var(--panel);
       border-radius:3px;box-shadow:var(--golge-kart);overflow:hidden}
.cells.c2{grid-template-columns:repeat(2,1fr)}
.cells.c3{grid-template-columns:repeat(3,1fr)}
.cells.c4{grid-template-columns:repeat(4,1fr)}
.cell{padding:18px 20px;border-right:1px solid var(--line);min-width:0}
.cell:last-child{border-right:none}
.cell .v{font-family:var(--cond);font-weight:700;font-size:26px;line-height:1.05}
.cell .v span,.cell .v em{font-style:normal;color:var(--sig)}
.cell .l{font-family:var(--mono);font-size:9px;color:var(--dim2);letter-spacing:.1em;
         margin-top:5px;text-transform:uppercase}
.cell .a{font-size:11.5px;color:var(--dim);margin-top:7px;line-height:1.5}
@media(max-width:760px){
  .cells.c2,.cells.c3,.cells.c4{grid-template-columns:1fr}
  .cell{border-right:none;border-bottom:1px solid var(--line)}
  .cell:last-child{border-bottom:none}
}

/* panel içi KPI sırası (çerçeve panelin kendisi) */
.kpis{display:grid;border-bottom:1px solid var(--line)}
.kpis.c2{grid-template-columns:repeat(2,1fr)} .kpis.c3{grid-template-columns:repeat(3,1fr)}
.kpis.c4{grid-template-columns:repeat(4,1fr)}
.kpis>div{padding:16px 18px;border-right:1px solid var(--line);min-width:0}
.kpis>div:last-child{border-right:none}
.kpis .v{font-family:var(--cond);font-weight:700;font-size:24px}
.kpis .v span{color:var(--sig)}
.kpis .l{font-family:var(--mono);font-size:9px;color:var(--dim2);letter-spacing:.1em;
         margin-top:4px;text-transform:uppercase}
@media(max-width:640px){
  .kpis.c3,.kpis.c4{grid-template-columns:1fr 1fr}
  .kpis>div:nth-child(2n){border-right:none}
  .kpis>div{border-bottom:1px solid var(--line)}
  .kpis>div:nth-last-child(-n+2){border-bottom:none}
}

/* ---------- butonlar (site dili: 2px radius, mono uppercase) ---------- */
.btn{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
     text-transform:uppercase;padding:13px 24px;border-radius:2px;cursor:pointer;
     border:1px solid transparent;transition:all .18s;background:none;line-height:1}
.btn-p{background:var(--sig);color:var(--sig-ink);border-color:var(--sig)}
.btn-p:hover{background:var(--sig-hi);border-color:var(--sig-hi)}
.btn-s{background:transparent;color:var(--dim);border-color:var(--line2)}
.btn-s:hover{color:var(--sig);border-color:var(--sig)}
.btn-xs{padding:8px 14px;font-size:10px}
.btn[disabled]{opacity:.45;cursor:default;pointer-events:none}

/* ---------- filtre çipleri ---------- */
.chip{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
      padding:6px 12px;border:1px solid var(--line2);border-radius:2px;background:transparent;
      color:var(--dim);cursor:pointer;transition:all .18s;white-space:nowrap}
.chip:hover{border-color:var(--sig);color:var(--sig)}
.chip.on{border-color:var(--sig);color:var(--sig);background:rgba(45,212,191,.08)}
.chip.on.c-miss{border-color:var(--warn);color:var(--warn);background:rgba(240,176,78,.08)}
.chip.on.c-out{border-color:var(--vio);color:var(--vio);background:rgba(157,141,241,.08)}

/* ---------- form elemanları ---------- */
.inp,.sel{font-family:var(--mono);font-size:12px;color:var(--txt);background:var(--panel);
          border:1px solid var(--line2);border-radius:2px;padding:9px 12px;outline:none;
          transition:border-color .18s;min-width:0}
.inp::placeholder{color:var(--dim2)}
.inp:focus,.sel:focus{border-color:var(--sig)}
.sel{cursor:pointer}
.fld{display:flex;flex-direction:column;gap:6px}
.fld .fl{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--dim2);text-transform:uppercase}

.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.toolbar .buyu{flex:1;min-width:180px}

/* ---------- tablo (CDR) ---------- */
.tblwrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-family:var(--mono);font-size:9.5px;color:var(--dim2);letter-spacing:.1em;text-align:left;
        padding:10px 14px;border-bottom:1px solid var(--line);font-weight:400;white-space:nowrap}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover td{background:var(--bg2)}
.tbl .tm{font-family:var(--mono);font-size:11px;color:var(--dim2);white-space:nowrap}
.tbl .who b{font-weight:500;color:var(--txt);display:block;font-size:13.5px;line-height:1.3;white-space:nowrap}
.tbl .who span{font-family:var(--mono);font-size:10px;color:var(--dim2);white-space:nowrap}
.tbl .ext{font-family:var(--mono);font-size:11.5px;color:var(--dim);white-space:nowrap}
.tbl .dur{font-family:var(--mono);font-size:11.5px;color:var(--txt);white-space:nowrap}
.tbl tr.row-in{animation:rowin .5s cubic-bezier(.2,.7,.3,1)}
@keyframes rowin{from{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:none}}
@media(max-width:560px){.tbl .extcol,.tbl .durcol{display:none}
  .tbl th,.tbl td{padding-left:10px;padding-right:10px}}

/* ---------- tip rozetleri ---------- */
.tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;padding:3px 9px;border:1px solid;
     white-space:nowrap;border-radius:2px;display:inline-block;text-transform:uppercase}
.tag.in  {color:var(--sig); border-color:rgba(45,212,191,.4); background:rgba(45,212,191,.06)}
.tag.out {color:var(--vio); border-color:rgba(157,141,241,.4);background:rgba(157,141,241,.06)}
.tag.miss{color:var(--warn);border-color:rgba(240,176,78,.4); background:rgba(240,176,78,.06)}
.tag.int {color:var(--dim); border-color:var(--line2);         background:transparent}
.tag.err {color:var(--err); border-color:rgba(240,106,77,.4); background:rgba(240,106,77,.06)}
.tag.ok  {color:var(--sig); border-color:rgba(45,212,191,.4); background:rgba(45,212,191,.06)}

/* ---------- alt bar (kaçan sayacı vb.) ---------- */
.callbar{display:flex;justify-content:space-between;align-items:center;gap:12px;
         padding:11px 18px;border-top:1px solid var(--line);background:var(--bg2);flex-wrap:wrap}
.callbar span{font-family:var(--mono);font-size:10px;color:var(--dim2);letter-spacing:.08em}
.callbar .cb b{color:var(--warn);font-weight:500}

/* ---------- mini çubuk grafik (panel içi) ---------- */
.bars-mini{display:flex;align-items:flex-end;gap:3px;height:110px}
.bars-mini i{flex:1;background:linear-gradient(180deg,var(--sig-hi) 0%,var(--sig) 100%);
             display:block;min-height:3px;opacity:.8;border-radius:1px 1px 0 0}
.bars-mini i.today{opacity:1}
.bars-cap{display:flex;justify-content:space-between;margin-top:9px}
.bars-cap span{font-family:var(--mono);font-size:9px;color:var(--dim2);letter-spacing:.08em}

/* ---------- santral kanal ızgarası ---------- */
.rack{display:grid;grid-template-columns:repeat(12,1fr);gap:4px}
.rack i{height:24px;border:1px solid var(--line2);display:block;border-radius:1px}
.rack i.on {border-color:rgba(45,212,191,.45);background:rgba(45,212,191,.16)}
.rack i.off{border-color:rgba(240,176,78,.5); background:rgba(240,176,78,.1)}
.rack-cap{font-family:var(--mono);font-size:9px;color:var(--dim2);letter-spacing:.08em;margin-top:9px}

/* ---------- A/B/C/D tanılama kartları ---------- */
.diag{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:960px){.diag{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.diag{grid-template-columns:1fr}}
.dcard{border:1px solid var(--line2);background:var(--panel);padding:22px 20px;border-radius:3px;
       position:relative;overflow:hidden;box-shadow:var(--golge-kart)}
.dcard::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--dc)}
.dcard .letter{font-family:var(--cond);font-weight:700;font-size:44px;line-height:1;color:var(--dc)}
.dcard h4{font-family:var(--cond);font-weight:600;font-size:16.5px;margin:14px 0 7px;letter-spacing:-.01em}
.dcard p{color:var(--dim);font-size:12.5px;line-height:1.6}
.dcard .st{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);
           font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--dc)}
.dcard.a{--dc:var(--sig)} .dcard.b{--dc:var(--warn)}
.dcard.c{--dc:#d97316}     .dcard.d{--dc:var(--err)}

/* ---------- ısı matrisi ---------- */
.heatwrap{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center}
.heat-d{font-family:var(--mono);font-size:9.5px;color:var(--dim2);letter-spacing:.06em;
        text-align:right;padding-right:2px}
.heat{display:grid;grid-template-columns:repeat(12,1fr);gap:3px}
.heat i{aspect-ratio:1.35;display:block;border-radius:1px}
.heat-h{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;grid-column:2}
.heat-h span{font-family:var(--mono);font-size:8.5px;color:var(--dim2);text-align:center;letter-spacing:.02em}
.legend{display:flex;align-items:center;gap:9px;margin-top:16px;flex-wrap:wrap;
        font-family:var(--mono);font-size:9.5px;color:var(--dim2);letter-spacing:.08em}
.legend .sw{display:flex;gap:3px}
.legend .sw i{width:16px;height:12px;display:block;border-radius:1px}

/* ---------- rapor kartları ---------- */
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line2);
       border-radius:3px;overflow:hidden;background:var(--panel);box-shadow:var(--golge-kart)}
@media(max-width:900px){.rgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.rgrid{grid-template-columns:1fr}}
.rcell{padding:18px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
       transition:background .18s;cursor:pointer;min-width:0}
.rcell:hover{background:var(--bg2)}
.rcell .no{font-family:var(--mono);font-size:10px;color:var(--sig);letter-spacing:.12em}
.rcell h4{font-family:var(--cond);font-weight:600;font-size:17px;margin:8px 0 6px;letter-spacing:-.01em}
.rcell p{color:var(--dim);font-size:12.5px;line-height:1.6}
.rcell .kat{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:9px;
            letter-spacing:.1em;color:var(--dim2);text-transform:uppercase}

/* ---------- boş / hata durumu ---------- */
.empty{border:1px dashed var(--line2);background:var(--bg2);border-radius:3px;
       padding:44px 28px;text-align:center}
.empty .et{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--dim2);
           text-transform:uppercase;margin-bottom:10px}
.empty h3{font-family:var(--cond);font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:8px}
.empty p{color:var(--dim);font-size:13.5px;max-width:520px;margin:0 auto}
.empty code{font-family:var(--mono);font-size:11.5px;color:var(--sig);
            background:rgba(45,212,191,.08);padding:2px 7px;border-radius:2px}
.empty.hata{border-color:rgba(240,106,77,.5)}
.empty.hata .et{color:var(--err)}

/* ---------- SDU grafikleri (util.js) ---------- */
.chart-wrap{position:relative}
.sdu-svg{width:100%;height:auto;display:block}
.sdu-grid{stroke:var(--line);stroke-width:1;shape-rendering:crispEdges}
.sdu-lbl{fill:var(--dim2);font-family:var(--mono);font-size:10px}
.sdu-line{fill:none;stroke:var(--sig);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.sdu-area{fill:rgba(13,148,136,.10)}
.dark-scope .sdu-area{fill:rgba(45,212,191,.12)}
.sdu-bar{fill:var(--sig);opacity:.8}
.sdu-bar:hover,.sdu-bar.hi{opacity:1}
.sdu-dot{fill:var(--panel);stroke:var(--sig);stroke-width:2}
.sdu-tip{position:absolute;pointer-events:none;display:none;z-index:6;
         background:var(--txt);color:var(--bg);font-family:var(--mono);font-size:10.5px;
         letter-spacing:.04em;padding:5px 9px;border-radius:2px;white-space:nowrap;
         transform:translate(-50%,-130%)}
.sdu-tip b{color:var(--sig-hi);font-weight:500}

/* ---------- küçük yardımcılar ---------- */
.mono{font-family:var(--mono)}
.mut{color:var(--dim2)}
.teal{color:var(--sig)} .amber{color:var(--warn)} .mor{color:var(--vio)} .hata{color:var(--err)}
.mt8{margin-top:8px} .mt16{margin-top:16px} .mt24{margin-top:24px}

/* ---------- hareket azaltma ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}