/* Altyapı canlı durum panosu (kompakt + canlı). Animasyonlar yalnızca gerçek veri akışına bağlıdır. */
.od-pano[hidden]{display:none}
.od-pano{padding-top:6px;padding-bottom:20px}
.odp{position:relative;overflow:hidden;padding:20px 24px 18px;border-radius:20px;background:linear-gradient(160deg,#0d1330 0%,#17214d 58%,#2a2370 135%);color:#fff;box-shadow:0 18px 48px rgba(20,28,70,.26)}
.odp-bg i{position:absolute;border-radius:50%;filter:blur(38px);pointer-events:none;will-change:transform}
.odp-bg i:nth-child(1){width:320px;height:320px;left:-90px;bottom:-150px;background:radial-gradient(circle,rgba(47,214,107,.34),transparent 70%);animation:odpdrift1 16s ease-in-out infinite alternate}
.odp-bg i:nth-child(2){width:300px;height:300px;right:-70px;top:-150px;background:radial-gradient(circle,rgba(129,140,248,.45),transparent 70%);animation:odpdrift2 21s ease-in-out infinite alternate}
@keyframes odpdrift1{to{transform:translate(110px,-40px) scale(1.2)}}
@keyframes odpdrift2{to{transform:translate(-100px,50px) scale(1.15)}}
.odp>*:not(.odp-bg){position:relative;z-index:1}

.odp-head{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap}
.odp-title{display:flex;flex-direction:column;gap:3px}
.odp-eyebrow{color:#9fb0ff;font:800 11px Manrope,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.odp h2{margin:0;color:#fff;font:800 clamp(20px,2.3vw,24px)/1.2 Manrope,sans-serif}
.odp-spec{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;flex:1 1 auto;justify-content:center}
.odp-spec li{padding:5px 11px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);color:#e7ebff;font:700 12px Manrope,sans-serif}
.odp-spec li[hidden]{display:none}
.odp-pill{position:relative;display:inline-flex;align-items:center;gap:9px;padding:7px 13px;border-radius:99px;background:rgba(47,214,107,.13);border:1px solid rgba(47,214,107,.35);color:#bff3d2;font:800 12.5px Manrope,sans-serif;white-space:nowrap}
.odp-pill i{position:relative;width:8px;height:8px;border-radius:50%;background:#2fd66b}
.odp-pill i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #2fd66b;opacity:0;animation:odpripple 2s ease-out infinite}
.odp-pill small{min-width:54px;color:rgba(255,255,255,.62);font:600 12px Manrope,sans-serif}
@keyframes odpripple{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.9);opacity:0}}

.odp-beat{height:2px;margin:12px 0 14px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.odp-beat em{display:block;height:100%;width:100%;transform-origin:left center;transform:scaleX(0);background:linear-gradient(90deg,#2fd66b,#5eead4);animation:odpbeat 30s linear forwards}
@keyframes odpbeat{to{transform:scaleX(1)}}

.odp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.odp-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto;gap:2px 12px;align-items:center;padding:13px 14px 8px;border-radius:15px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11);overflow:hidden;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.odp-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.28);box-shadow:0 10px 26px rgba(0,0,0,.28)}
.odp-card.flash{animation:odpflash .9s ease-out}
@keyframes odpflash{0%{box-shadow:0 0 0 0 rgba(94,234,212,.55);border-color:rgba(94,234,212,.7)}100%{box-shadow:0 0 0 10px rgba(94,234,212,0)}}
.odp-ring{width:46px;height:46px;grid-row:1/3}
.odp-ring circle{fill:none;stroke-width:4}
.odp-ring .t{stroke:rgba(255,255,255,.12)}
.odp-ring .v{stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1)}
.odp-ring .c-cpu{stroke:#2fd66b}.odp-ring .c-mem{stroke:#60a5fa}.odp-ring .c-disk{stroke:#f472b6}
.odp-bars{grid-row:1/3;display:flex;align-items:flex-end;gap:3px;width:46px;height:46px}
.odp-bars span{flex:1;min-height:3px;border-radius:2px;background:linear-gradient(180deg,#d8b4fe,#a855f7);transition:height .8s cubic-bezier(.2,.8,.2,1)}
.odp-info h3{margin:0;color:rgba(255,255,255,.68);font:800 11px Manrope,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.odp-val{display:flex;align-items:baseline;gap:4px;color:#fff;font:800 26px/1.1 Manrope,sans-serif}
.odp-val small{color:rgba(255,255,255,.7);font:700 13px Manrope,sans-serif}
.odp-sub{grid-column:2;color:rgba(255,255,255,.66);font-size:12px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.odp-spark{position:relative;grid-column:1/-1;height:28px;margin:4px -14px 0}
.odp-spark svg{display:block;width:100%;height:100%}
.odp-spark .l{fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.odp-spark .a{stroke:none;opacity:.16}
.odp-spark.draw .l{stroke-dasharray:1;stroke-dashoffset:1;animation:odpdraw 1.6s ease-out forwards}
@keyframes odpdraw{to{stroke-dashoffset:0}}
.odp-spark .c-cpu.l{stroke:#2fd66b}.odp-spark .c-cpu.a{fill:#2fd66b}
.odp-spark .c-mem.l{stroke:#60a5fa}.odp-spark .c-mem.a{fill:#60a5fa}
.odp-spark .c-net.l{stroke:#c084fc}.odp-spark .c-net.a{fill:#c084fc}
.odp-dot{position:absolute;right:14px;width:7px;height:7px;margin:-3.5px -3.5px 0 0;border-radius:50%;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.8)}
.odp-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(255,255,255,.7);opacity:0;animation:odpripple 2s ease-out infinite}

.odp-strip{display:flex;flex-wrap:wrap;gap:6px 26px;margin-top:12px;padding-top:11px;border-top:1px solid rgba(255,255,255,.1)}
.odp-stat{display:flex;align-items:baseline;gap:9px}
.odp-stat span{color:rgba(255,255,255,.66);font:700 12.5px Manrope,sans-serif}
.odp-stat b{color:#fff;font:800 19px Manrope,sans-serif}
.odp-stat b small{color:rgba(255,255,255,.6);font:700 13px Manrope,sans-serif}

.odp-servers{margin-top:10px}
.odp-servers[hidden]{display:none}
.odp-srvgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}
.odp-s{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;gap:1px 9px;align-items:center;padding:9px 12px 10px;border-radius:12px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);overflow:hidden;transition:background .25s ease,transform .25s ease}
.odp-s:hover{background:rgba(255,255,255,.09);transform:translateY(-2px)}
.odp-s i{grid-row:1/3;width:8px;height:8px;border-radius:50%;background:#2fd66b;box-shadow:0 0 0 0 rgba(47,214,107,.6)}
.odp-s.up i{animation:odpdot 2s infinite}
.odp-s.down i{background:#f87171}
@keyframes odpdot{70%{box-shadow:0 0 0 7px rgba(47,214,107,0)}100%{box-shadow:0 0 0 0 rgba(47,214,107,0)}}
.odp-s .n{color:#fff;font:800 13px Manrope,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.odp-s .m{grid-column:2;color:rgba(255,255,255,.6);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.odp-s .c{grid-column:3;grid-row:1/3;color:#fff;font:800 12.5px Manrope,sans-serif;white-space:nowrap}
.odp-s .b{position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(90deg,#2fd66b,#5eead4);transition:width .8s ease}

/* ilk görünüşte sırayla belirme */
.odp.odp-in .odp-card,.odp.odp-in .odp-strip,.odp.odp-in .odp-servers{animation:odpin .6s cubic-bezier(.2,.8,.2,1) both}
.odp.odp-in .odp-card:nth-child(2){animation-delay:.07s}
.odp.odp-in .odp-card:nth-child(3){animation-delay:.14s}
.odp.odp-in .odp-card:nth-child(4){animation-delay:.21s}
.odp.odp-in .odp-strip{animation-delay:.3s}
.odp.odp-in .odp-servers{animation-delay:.38s}
@keyframes odpin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media (max-width:1060px){.odp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.odp-spec{justify-content:flex-start;flex-basis:100%;order:3}}
@media (max-width:560px){
  .odp{padding:14px 13px 12px;border-radius:16px}
  .odp-head{gap:8px 12px}
  .odp-beat{margin:10px 0 10px}
  .odp-grid{gap:8px}
  .odp-card{grid-template-columns:auto minmax(0,1fr);padding:10px 11px;gap:0 9px}
  .odp-ring,.odp-bars{width:34px;height:34px}
  .odp-val{font-size:21px}
  .odp-info h3{font-size:10.5px}
  .odp-sub{font-size:11px}
  .odp-spark{display:none}
  .odp-spec .mod{display:none}
  .odp-strip{gap:4px 16px;margin-top:10px;padding-top:9px}
  .odp-stat{flex:1 1 40%}
  .odp-stat b{font-size:17px}
  .odp-srvgrid{grid-template-columns:1fr 1fr;gap:6px}
  .odp-s{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto;padding:8px 9px}
  .odp-s i{grid-row:auto}
  .odp-s .m{display:none}
  .odp-s .c{grid-row:auto;grid-column:3;font-size:11.5px}
  .odp-s .n{font-size:12px}
}
@media (max-width:340px){.odp-srvgrid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.odp *,.odp *::after{animation:none!important;transition:none!important}.odp-beat em{transform:none}.odp-ring .v{transition:none}}