/* ═══════════════════════════════════════════════════════════════════════
   HIZ TESTİ — Enstrüman Paneli
   Ölçüm motoru: @cloudflare/speedtest (vendor/cloudflare-speedtest.js)
   ═══════════════════════════════════════════════════════════════════════ */

.st-hidden{display:none!important}

/* ── Panel ──────────────────────────────────────────────────────────── */
.st-panel{
  position:relative;overflow:hidden;
  max-width:860px;margin:0 auto;
  padding:28px 32px 26px;
  border-radius:24px;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(0,173,239,.16), transparent 55%),
    linear-gradient(165deg, #16123f 0%, #0d0b2e 55%, #1a1550 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 60px rgba(13,11,46,.35);
  color:#fff;
}
.st-panel::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:22px 22px;
}
.st-panel > *{position:relative}

/* ── Üst bilgi çubuğu ───────────────────────────────────────────────── */
.st-meta{
  display:flex;align-items:center;gap:28px;flex-wrap:wrap;
  padding-bottom:18px;margin-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.st-meta__item{display:flex;flex-direction:column;gap:2px;min-width:0}
.st-meta__item--status{margin-left:auto;flex-direction:row;align-items:center;gap:8px}
.st-meta__label{
  font-size:10px;font-weight:var(--fw-bold,700);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.42);
}
.st-meta__value{
  font-size:14px;font-weight:var(--fw-semibold,600);color:rgba(255,255,255,.92);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.st-dot{
  width:9px;height:9px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.35);
  transition:background .3s;
}
.st-dot--run{background:#00ADEF;animation:stPulse 1.2s ease-in-out infinite}
.st-dot--done{background:#22c55e;box-shadow:0 0 10px rgba(34,197,94,.6)}
.st-dot--error{background:#ef4444;box-shadow:0 0 10px rgba(239,68,68,.6)}
@keyframes stPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(0,173,239,.5)}
  50%{box-shadow:0 0 0 7px rgba(0,173,239,0)}
}

/* ── Gösterge ───────────────────────────────────────────────────────── */
.st-gauge{
  position:relative;
  width:min(400px, 82vw);margin:6px auto 0;
  aspect-ratio:1/1;
}
.st-gauge__svg{width:100%;height:100%;display:block}
.st-arc-bg,.st-arc-fill{
  fill:none;stroke-width:10;stroke-linecap:round;
  transform:rotate(135deg);transform-origin:160px 160px;
}
.st-arc-bg{
  stroke:rgba(255,255,255,.09);
  stroke-dasharray:612.61 816.81; /* 270° / tam çevre (r=130) */
}
.st-arc-fill{
  stroke:url(#stArcGrad);
  filter:drop-shadow(0 0 8px rgba(0,173,239,.55));
  transition:stroke .4s;
}
.st-panel--ul .st-arc-fill{
  stroke:url(#stArcGradUl);
  filter:drop-shadow(0 0 8px rgba(143,134,232,.55));
}
.st-ticks line{stroke:rgba(255,255,255,.28);stroke-width:2;stroke-linecap:round}
.st-ticks text{
  fill:rgba(255,255,255,.45);font-size:11px;font-weight:600;
  text-anchor:middle;dominant-baseline:middle;
  font-variant-numeric:tabular-nums;
}

.st-gauge__center{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
}

/* Başlat butonu */
.st-go{
  position:relative;
  width:46%;aspect-ratio:1/1;border-radius:50%;
  background:rgba(0,173,239,.06);
  border:2px solid rgba(0,173,239,.8);
  color:#fff;cursor:pointer;
  font-family:inherit;font-size:clamp(18px,2.4vw,24px);
  font-weight:var(--fw-extrabold,800);letter-spacing:.12em;
  transition:background .25s, box-shadow .25s, transform .15s;
}
.st-go:hover{
  background:rgba(0,173,239,.16);
  box-shadow:0 0 34px rgba(0,173,239,.45), inset 0 0 24px rgba(0,173,239,.12);
}
.st-go:active{transform:scale(.97)}
.st-go__ring{
  position:absolute;inset:-2px;border-radius:50%;
  border:2px solid rgba(0,173,239,.55);
  animation:stGoPulse 2.2s ease-out infinite;pointer-events:none;
}
@keyframes stGoPulse{
  0%{transform:scale(1);opacity:.8}
  70%,100%{transform:scale(1.22);opacity:0}
}

/* Canlı değer */
.st-live{display:flex;flex-direction:column;align-items:center;gap:2px}
.st-live__phase{
  font-size:11px;font-weight:var(--fw-bold,700);letter-spacing:.22em;
  color:rgba(255,255,255,.5);
}
.st-panel--ul .st-live__phase{color:rgba(196,189,245,.75)}
.st-live__value{
  font-size:clamp(44px,7vw,64px);line-height:1;
  font-weight:var(--fw-black,900);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
.st-live__unit{
  font-size:14px;font-weight:var(--fw-semibold,600);
  color:rgba(255,255,255,.55);
}

/* ── Aşama göstergesi ───────────────────────────────────────────────── */
.st-steps{
  display:flex;justify-content:center;gap:10px;
  margin:-24px 0 20px;flex-wrap:wrap;
}
.st-step{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:100px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  font-size:12.5px;font-weight:var(--fw-semibold,600);
  color:rgba(255,255,255,.5);
  transition:color .3s, border-color .3s, background .3s;
}
.st-step__dot{
  width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.28);transition:background .3s;
}
.st-step.is-active{
  color:#fff;border-color:rgba(0,173,239,.5);background:rgba(0,173,239,.1);
}
.st-step.is-active .st-step__dot{background:#00ADEF;animation:stPulse 1.2s ease-in-out infinite}
.st-step.is-done{color:rgba(255,255,255,.78)}
.st-step.is-done .st-step__dot{background:#22c55e}

/* ── Sonuç kutuları ─────────────────────────────────────────────────── */
.st-tiles{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
}
.st-tile{
  padding:14px 16px;border-radius:14px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(4px);
}
.st-tile__head{
  display:flex;align-items:center;gap:7px;
  font-size:12px;font-weight:var(--fw-semibold,600);
  color:rgba(255,255,255,.55);margin-bottom:6px;
}
.st-tile__head svg{width:15px;height:15px;flex-shrink:0}
.st-tile--dl .st-tile__head{color:#6fd6ff}
.st-tile--ul .st-tile__head{color:#c4bdf5}
.st-tile__value{
  font-size:24px;font-weight:var(--fw-extrabold,800);line-height:1.1;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.st-tile__value small{
  font-size:12px;font-weight:var(--fw-semibold,600);
  color:rgba(255,255,255,.45);margin-left:5px;
}

/* ── İkincil metrik + aksiyonlar ────────────────────────────────────── */
.st-sub{
  margin:14px 0 0;text-align:center;
  font-size:13px;color:rgba(255,255,255,.55);
}
.st-sub strong{color:rgba(255,255,255,.88);font-variant-numeric:tabular-nums}

.st-actions{display:flex;justify-content:center;margin-top:18px}
.st-restart{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 28px;border-radius:100px;
  background:#00ADEF;border:none;color:#fff;cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:var(--fw-bold,700);
  box-shadow:0 10px 28px rgba(0,173,239,.35);
  transition:transform .15s, box-shadow .25s, background .25s;
}
.st-restart:hover{background:#0098d4;transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,173,239,.45)}
.st-restart:active{transform:translateY(0)}

.st-note{
  margin:18px 0 0;text-align:center;
  font-size:12px;color:rgba(255,255,255,.38);
}

/* ── Giriş animasyonu ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference){
  .st-meta,.st-gauge,.st-steps,.st-tiles,.st-note{
    animation:stRise .6s cubic-bezier(.16,1,.3,1) both;
  }
  .st-gauge{animation-delay:.08s}
  .st-steps{animation-delay:.16s}
  .st-tiles{animation-delay:.24s}
  .st-note{animation-delay:.32s}
  @keyframes stRise{
    from{opacity:0;transform:translateY(14px)}
    to{opacity:1;transform:translateY(0)}
  }
}

/* ── Mobil ──────────────────────────────────────────────────────────── */
@media (max-width:720px){
  .st-panel{padding:20px 18px 22px;border-radius:18px}
  .st-meta{gap:16px}
  .st-meta__item--status{margin-left:0;width:100%;order:-1;padding-bottom:2px}
  .st-tiles{grid-template-columns:repeat(2,1fr)}
  .st-steps{margin-top:-12px}
  .st-live__value{font-size:44px}
}