/* Sistem Durumu — sakin dijital tema, goz yormayan */
#page-sistem{max-width:none !important;padding-bottom:24px}

/* Ust baslik: sade, animasyonsuz */
.sys-hero{
  position:relative;
  margin-bottom:16px;padding:20px 24px;
  border:1px solid rgba(70,140,190,.32);border-radius:14px;
  background:linear-gradient(135deg,#0a2436,#071a2a);
  box-shadow:0 10px 28px rgba(0,6,20,.3);
}
.sys-hero-glow{display:none}
.sys-hero-inner{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.sys-hero-icon{
  width:56px;height:56px;flex:0 0 56px;display:grid;place-items:center;border-radius:14px;font-size:26px;
  background:rgba(95,184,247,.12);border:1px solid rgba(95,184,247,.32);color:#8ec8f0;
}
.sys-kicker{display:block;color:#6fb8d8;font-size:10px;font-weight:800;letter-spacing:2.2px}
.sys-hero-inner h2{margin:4px 0 3px;font-size:26px;color:#eef8ff;letter-spacing:-.3px;font-weight:800}
.sys-hero-inner p{margin:0;color:#8fa8b6;font-size:12.5px}
.sys-live-pill{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  padding:7px 15px;border-radius:999px;
  background:rgba(37,224,166,.09);border:1px solid rgba(37,224,166,.3);
  color:#7fe3c0;font-size:10.5px;font-weight:800;letter-spacing:1.2px;
}
.sys-live-pill i{width:7px;height:7px;border-radius:50%;background:#25e0a6;animation:none;opacity:.85}

/* Izgara */
.sys-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.sys-loading{padding:60px;text-align:center;color:#7e9dae;font-size:13.5px;grid-column:1/-1}

/* Kart: statik, sade */
.sys-card{
  display:flex;flex-direction:column;gap:12px;
  padding:16px 17px 14px;border-radius:13px;
  border:1px solid rgba(60,130,180,.26);
  background:linear-gradient(160deg,#08283e,#051826);
  box-shadow:0 8px 22px rgba(0,6,20,.24);
  transition:border-color .2s ease;
  animation:none;
}
.sys-card:hover{border-color:rgba(95,184,247,.45)}
.sys-card.cpu,.sys-card.ram,.sys-card.disk,.sys-card.temp,
.sys-card.portal,.sys-card.wa,.sys-card.db,.sys-card.swap,.sys-card.net,.sys-card.up{
  border-color:rgba(60,130,180,.26);
}

.sys-card-head{display:flex;align-items:center;gap:9px}
.sys-card-icon{
  width:30px;height:30px;display:grid;place-items:center;border-radius:8px;font-size:15px;
  background:rgba(255,255,255,.04);border:1px solid rgba(120,180,210,.18);
}
.sys-card-head small{color:#8fb3c6;font-size:10px;font-weight:800;letter-spacing:1.1px}
.sys-card-foot{color:#7f9cad;font-size:11px;line-height:1.5}
.sys-card-foot b{color:#d6eaf5;font-weight:700}

/* Halkalar */
.sys-ring-wrap{position:relative;display:grid;place-items:center;padding:4px 0}
.sys-ring{width:96px;height:96px;transform:rotate(-90deg)}
.sys-ring-bg{fill:none;stroke:rgba(255,255,255,.07);stroke-width:8}
.sys-ring-fg{
  fill:none;stroke-width:8;stroke-linecap:round;
  transition:stroke-dashoffset .8s cubic-bezier(.25,.8,.3,1),stroke .4s ease;
}
.sys-ring-val{
  position:absolute;display:flex;align-items:baseline;gap:1px;
  color:#eef8ff;font-variant-numeric:tabular-nums;
}
.sys-ring-val b{font-size:25px;font-weight:800;letter-spacing:-1px;line-height:1}
.sys-ring-val small{font-size:12px;font-weight:700;color:#8fa8b6}

/* Buyuk deger */
.sys-big{display:flex;align-items:baseline;gap:4px;font-variant-numeric:tabular-nums}
.sys-big b{font-size:30px;font-weight:800;color:#eef8ff;letter-spacing:-1.2px;line-height:1}
.sys-big small{font-size:13px;font-weight:700;color:#8fa8b6}

/* Sicaklik */
.sys-temp{display:flex;align-items:baseline;gap:3px;font-variant-numeric:tabular-nums}
.sys-temp b{font-size:34px;font-weight:800;letter-spacing:-1.5px;line-height:1;transition:color .4s ease}
.sys-temp small{font-size:14px;font-weight:700;color:#8fa8b6}

/* Bar */
.sys-bar{height:7px;border-radius:5px;background:rgba(255,255,255,.06);overflow:hidden}
.sys-bar i{display:block;height:100%;border-radius:5px;width:0;transition:width .8s cubic-bezier(.25,.8,.3,1)}

/* Duz metin */
.sys-text{color:#eef8ff;font-size:15px;font-weight:700;line-height:1.4}

/* Ag satirlari */
.sys-net{display:flex;flex-direction:column;gap:5px;font-size:11.5px}
.sys-net-row{display:flex;justify-content:space-between;gap:8px;align-items:center}
.sys-net-row i{color:#7f9cad;font-style:normal;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sys-net-row b{color:#cfe6f2;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Durum */
.sys-state{font-size:14.5px;font-weight:800;letter-spacing:.2px}
.sys-state.ok{color:#25d99f}
.sys-state.bad{color:#ff6b7d}

/* Bilgi izgarasi */
.sys-card.full{grid-column:1/-1}
.sys-info-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.sys-info-grid>div small{display:block;color:#7f9cad;font-size:9.5px;font-weight:800;letter-spacing:.8px;margin-bottom:4px}
.sys-info-grid>div b{color:#dff0fa;font-size:13px;font-weight:700;overflow-wrap:anywhere}

@media(max-width:1400px){
  .sys-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sys-info-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1000px){
  .sys-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sys-info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .sys-grid{grid-template-columns:1fr}
  .sys-hero{padding:16px}
  .sys-hero-inner h2{font-size:22px}
  .sys-live-pill{margin-left:0}
  .sys-info-grid{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  .sys-ring-fg,.sys-bar i,.sys-temp b{transition:none}
}