:root{
  --navy:#17468f;--sky:#1c9ad6;--teal:#35b8a6;--lime:#9fcf63;--flow:#0f2550;
  --bg:#f3f6fb;--surface:#fff;--surface-2:#f5f8fc;--line:#dbe3ef;--line-2:#c3cfe2;
  --ink:#13213b;--ink-2:#44536f;--muted:#66748f;
  --accent:#17468f;--accent-ink:#fff;--ok:#0b7a63;--warn:#9a6400;--bad:#c2410c;
  --glow-a:rgba(28,154,214,.16);--glow-b:rgba(53,184,166,.14);
  --g1:#17468f;--g2:#1a84c4;--g3:#1c9c8a;
  --term-bg:#0d1526;--term-ink:#d7e2f5;
  --shadow:0 1px 2px rgba(19,33,59,.06),0 10px 28px -14px rgba(19,33,59,.22);
  --mono:ui-monospace,"SFMono-Regular","SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --r:12px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --flow:#fff;--bg:#0a1224;--surface:#111a2c;--surface-2:#162036;--line:#1e2c47;--line-2:#32456c;
  --ink:#e8eef8;--ink-2:#b0bdd6;--muted:#8291b0;
  --accent:#4fb3e8;--accent-ink:#04131f;--ok:#3fd2b4;--warn:#e9b04c;--bad:#ff8a5c;
  --glow-a:rgba(15,34,68,.95);--glow-b:rgba(45,212,191,.12);
  --g1:#1c9ad6;--g2:#35b8a6;--g3:#9fcf63;
  --term-bg:#060b15;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 34px -16px rgba(0,0,0,.7);
}}
:root[data-theme="dark"]{
  --flow:#fff;--bg:#0a1224;--surface:#111a2c;--surface-2:#162036;--line:#1e2c47;--line-2:#32456c;
  --ink:#e8eef8;--ink-2:#b0bdd6;--muted:#8291b0;
  --accent:#4fb3e8;--accent-ink:#04131f;--ok:#3fd2b4;--warn:#e9b04c;--bad:#ff8a5c;
  --glow-a:rgba(15,34,68,.95);--glow-b:rgba(45,212,191,.12);
  --g1:#1c9ad6;--g2:#35b8a6;--g3:#9fcf63;
  --term-bg:#060b15;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 34px -16px rgba(0,0,0,.7);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--vt-bar-h,0px) + 72px)}
body{margin:0;color:var(--ink);font:15px/1.55 var(--sans);overflow-x:hidden;
  background:radial-gradient(1100px 480px at 12% -8%,var(--glow-a),transparent 60%),radial-gradient(800px 460px at 100% 0,var(--glow-b),transparent 60%),var(--bg);
  background-repeat:no-repeat}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.mono{font-family:var(--mono);font-size:.9em}
h1{font-size:clamp(28px,5.2vw,46px);line-height:1.1;margin:14px 0 12px;letter-spacing:-.025em}
h2{font-size:19px;margin:0 0 4px}
h3{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;font-weight:600}
h3 small{text-transform:none;letter-spacing:0;font-weight:400;font-size:12px;margin-left:6px}
button{font-family:inherit}
[hidden]{display:none!important}
/* İki dil aynı sayfada: her metin .l[lang] içinde iki kez yazılır, yalnızca <html lang> ile eşleşen görünür. */
.l{display:none!important}
html[lang="tr"] .l[lang="tr"],html[lang="en"] .l[lang="en"]{display:inline!important}

/* ---------- üst başlık */
#vt-bar{height:38px;background:#0f1b2d}
.top{position:sticky;top:var(--vt-bar-h,0px);z-index:20;-webkit-backdrop-filter:saturate(160%) blur(12px);backdrop-filter:saturate(160%) blur(12px);background:color-mix(in srgb,var(--bg) 78%,transparent);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--muted);min-width:0}
.brand img{display:block;height:30px;width:auto}
.brand-tag{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-left:1px solid var(--line-2);padding-left:10px;white-space:nowrap}
.top-right{display:flex;align-items:center;gap:8px}
.pill{border:1px solid var(--line-2);border-radius:999px;padding:3px 10px;color:var(--ink-2);white-space:nowrap}
.ctl{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:999px;cursor:pointer;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font:600 13px var(--sans);text-decoration:none}
.ctl:hover{border-color:var(--sky)}
.ctl svg{width:16px;height:16px}
.ctl .sun{display:none}
:root[data-theme="dark"] .ctl .sun{display:block}
:root[data-theme="dark"] .ctl .moon{display:none}

/* ---------- marka şeridi: logodaki beş katmanın renkleri */
.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--navy),var(--sky),var(--teal),var(--lime),#f2e56b);opacity:.85}

/* ---------- giriş */
.hero{padding:36px 0 8px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;border:1px solid var(--line-2);background:color-mix(in srgb,var(--surface) 70%,transparent);font:600 13px var(--sans);color:var(--accent)}
.pulse{width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:pulse 2s infinite}
.grad{background:linear-gradient(90deg,var(--g1),var(--g2) 55%,var(--g3));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{max-width:660px;color:var(--ink-2);margin:0 0 18px;font-size:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--surface) 80%,transparent);border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-size:13px;min-width:0}
.chip{border-left:3px solid var(--sky)}
.chip:nth-child(2){border-left-color:var(--teal)}
.chip:nth-child(3){border-left-color:var(--lime)}
.chip i{font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-style:normal;white-space:nowrap}
.chip b{font-family:var(--mono);font-weight:600;overflow-wrap:anywhere}
.chip span{color:var(--ink-2)}
.chip button,.mini{border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink-2);border-radius:7px;padding:3px 9px;font:12px var(--sans);cursor:pointer}
.chip button:hover,.mini:hover{border-color:var(--sky);color:var(--ink)}

/* ---------- kartlar */
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);margin:18px 0;overflow:hidden}
.tool::before,.speed::before,.netpanel::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--navy),var(--sky),var(--teal),var(--lime));opacity:.9}

/* ---------- sorgu: üç adım */
.tool{padding:6px 0}
.step{display:flex;gap:14px;padding:16px 18px;position:relative}
.step+.step{border-top:1px dashed var(--line)}
.step-n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:700 13px var(--mono);color:#fff;background:linear-gradient(135deg,var(--navy),var(--sky));box-shadow:0 6px 14px -8px var(--sky)}
.step:nth-child(2) .step-n{background:linear-gradient(135deg,var(--sky),var(--teal))}
.step:nth-child(3) .step-n{background:linear-gradient(135deg,var(--teal),#7fbf4d)}
.step-body{flex:1;min-width:0}
.step-title{font-size:15px;margin:3px 0 10px}
.locs{display:flex;flex-wrap:wrap;gap:10px}
.loc{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:9px;align-items:center;padding:10px 14px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink);cursor:pointer;text-align:left;min-width:190px;transition:border-color .15s,transform .15s,box-shadow .15s}
.loc:hover{border-color:var(--sky);transform:translateY(-1px)}
.loc b{font-size:14px}
.loc small{grid-column:2;font-size:12px;color:var(--muted)}
.loc-dot{width:9px;height:9px;border-radius:50%;background:var(--line-2);grid-row:1/3;transition:background .15s}
.loc.off{opacity:.6}
.loc.off .loc-dot,.loc.off.on .loc-dot{background:var(--bad);animation:none}
.loc.off small{color:var(--bad)}
.eyebrow.degraded .pulse{background:#e9a23b;animation:none}
.ex.me{border-style:solid;border-color:var(--sky);color:var(--accent);font-family:var(--sans);font-weight:600}
.mini.on{border-color:var(--sky);color:var(--accent);background:color-mix(in srgb,var(--sky) 12%,transparent)}
.foot a{color:var(--accent);text-decoration:none}
.foot a:hover{text-decoration:underline}
.loc.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent),0 6px 18px -10px var(--sky)}
.loc.on .loc-dot{background:#34d399;animation:pulse 2s infinite}
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tab{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink-2);padding:8px 14px;border-radius:999px;font:600 14px var(--sans);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.tab svg{width:16px;height:16px}
.tab:hover{border-color:var(--sky);color:var(--ink)}
.tab svg{color:var(--sky)}
.tab.on{background:linear-gradient(135deg,var(--navy),var(--sky));border-color:transparent;color:#fff;box-shadow:0 8px 18px -10px var(--sky)}
.tab.on svg{color:#fff}
.tool-desc{margin:10px 0 0;color:var(--ink-2);font-size:13.5px;min-height:1.5em}
.row{display:flex;gap:8px;flex-wrap:wrap}
.row input,.row select{flex:1 1 260px;min-width:0;height:48px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink);padding:0 14px;font-size:15px;transition:border-color .15s,box-shadow .15s}
/* Kayıt tipi seçici: en uzun seçenek ("Sağlık raporu") kesilmeden sığmalı. */
.row select{flex:0 0 auto;width:auto;min-width:168px;padding-right:34px;cursor:pointer}
.row input:focus,.row select:focus{outline:0;border-color:var(--sky);box-shadow:0 0 0 3px color-mix(in srgb,var(--sky) 25%,transparent)}
.btn:focus-visible,.tab:focus-visible,.loc:focus-visible,.ex:focus-visible,.ctl:focus-visible,.mini:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.shake{animation:shake .35s}
.seg{display:flex;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;height:48px}
.seg button{border:0;background:var(--surface-2);color:var(--ink-2);padding:0 13px;font:600 12px var(--mono);cursor:pointer}
.seg button.on{background:linear-gradient(135deg,var(--navy),var(--sky));color:#fff}
.seg button:disabled{opacity:.4;cursor:not-allowed}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:12px;border:1px solid transparent;background:linear-gradient(135deg,var(--navy),var(--sky) 70%,var(--teal));color:#fff;padding:0 22px;font:600 15px var(--sans);cursor:pointer;transition:transform .12s,box-shadow .15s,filter .15s}
.btn:hover:not(:disabled){filter:brightness(1.08);box-shadow:0 8px 20px -10px var(--sky)}
.btn:active:not(:disabled){transform:scale(.97)}
.btn:disabled{cursor:default}
.btn.ghost{background:none;color:var(--accent);border-color:var(--line-2)}
.btn svg{width:16px;height:16px}
.spin{display:none;width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite}
.run.busy .spin{display:block}
.run.busy svg{display:none}
.examples{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;font-size:13px;color:var(--muted)}
#examples{display:contents}
.ex{border:1px dashed var(--line-2);background:none;color:var(--ink-2);border-radius:999px;padding:4px 11px;font-size:12.5px;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.ex:hover{border-style:solid;border-color:var(--sky);color:var(--ink);background:var(--surface-2)}
.hint{color:var(--muted);font-size:12.5px;margin:10px 0 0}

/* ---------- sonuç */
.result{position:relative}
.progress{position:absolute;inset:0 0 auto 0;height:3px;overflow:hidden;opacity:0;transition:opacity .2s}
.progress i{position:absolute;top:0;bottom:0;width:38%;border-radius:3px;background:linear-gradient(90deg,transparent,var(--sky),var(--teal),transparent);animation:slide 1.15s ease-in-out infinite}
.is-running .progress{opacity:1}
.empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:40px 18px 44px;color:var(--muted);text-align:center}
.empty b{color:var(--ink);font-size:16px}
.empty>span{max-width:440px}
.empty-art{display:flex;align-items:flex-end;gap:5px;height:34px;margin-bottom:8px}
.empty-art span{width:7px;border-radius:3px;background:linear-gradient(180deg,var(--sky),var(--teal));opacity:.55;animation:eq 1.6s ease-in-out infinite}
.empty-art span:nth-child(1){height:40%}.empty-art span:nth-child(2){height:75%;animation-delay:.15s}.empty-art span:nth-child(3){height:100%;animation-delay:.3s}.empty-art span:nth-child(4){height:60%;animation-delay:.45s}.empty-art span:nth-child(5){height:35%;animation-delay:.6s}

.route{display:flex;align-items:center;gap:14px;padding:18px 18px 16px;background:linear-gradient(180deg,var(--surface-2),transparent)}
.node{display:flex;align-items:center;gap:10px;min-width:0}
.node b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw}
.node small{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw}
.node.dst{text-align:right}
.dot{flex:none;width:12px;height:12px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 22%,transparent)}
.node.dst .dot{background:var(--line-2);box-shadow:0 0 0 4px color-mix(in srgb,var(--line-2) 30%,transparent);transition:background .3s,box-shadow .3s}
.is-running .node.src .dot{animation:pulse 1.2s infinite}
.is-done .node.dst .dot{background:var(--sky);box-shadow:0 0 0 4px color-mix(in srgb,var(--sky) 25%,transparent)}
.is-done #routeState{color:var(--ok);font-weight:600}
.is-fail .node.dst .dot{background:var(--bad);box-shadow:0 0 0 4px color-mix(in srgb,var(--bad) 22%,transparent)}
.is-fail #routeState{color:var(--bad);font-weight:600}
.stick{display:flex;align-items:center;gap:12px;padding-top:8px;padding-bottom:9px;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);animation:stickIn .18s ease-out}
.stick>span{font:600 12.5px var(--sans);color:var(--muted);white-space:nowrap}
.loc-switch{display:flex;flex-wrap:wrap;gap:8px}
.locpill{display:inline-flex;align-items:center;gap:8px;padding:5px 13px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface-2);color:var(--ink-2);font:13px var(--sans);cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.locpill i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.locpill b{font-weight:600;color:var(--ink)}
.locpill small{font-size:12px;color:var(--muted)}
.locpill:hover{border-color:var(--sky)}
.locpill.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);cursor:default}
.locpill.on i{background:#34d399}
.locpill.off i{background:var(--bad)}
@keyframes stickIn{from{opacity:0;transform:translateY(-6px)}}
.wire{position:relative;flex:1;min-width:40px;height:2px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 12px)}
.wire i{position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--sky);box-shadow:0 0 10px var(--sky);opacity:0}
.is-running .wire i{animation:packet 1.5s linear infinite}
.is-running .wire i:nth-child(2){animation-delay:.5s}
.is-running .wire i:nth-child(3){animation-delay:1s}
.is-done .wire{background:linear-gradient(90deg,var(--teal),var(--sky))}
.is-fail .wire{background:repeating-linear-gradient(90deg,var(--bad) 0 6px,transparent 6px 12px);opacity:.6}

.res-head{display:flex;align-items:center;gap:10px;padding:10px 18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);flex-wrap:wrap}
.cmd{flex:1 1 240px;overflow-wrap:anywhere;color:var(--ink-2)}
.cmd:empty::before{content:"…";color:var(--muted)}
.stat{color:var(--muted);font-variant-numeric:tabular-nums}
.is-running .stat{color:var(--accent)}
.res-actions{display:flex;gap:6px}
.error{margin:16px 18px;padding:12px 14px;border-radius:12px;border:1px solid var(--bad);color:var(--bad);background:color-mix(in srgb,var(--bad) 8%,transparent);animation:rowIn .3s ease-out}
#chainWrap,#chartWrap,#pingWrap{padding:16px 18px 6px;border-bottom:1px solid var(--line)}
#dnsWrap,#whoisWrap{border-bottom:1px solid var(--line)}
.blk-title{margin:0;padding:16px 20px 8px;display:flex;align-items:center;gap:8px;color:var(--ink-2)}
.blk-title::before{content:"";width:14px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--sky),var(--teal),var(--lime))}
#reportWrap{border-bottom:1px solid var(--line)}
/* ---- rapor başlığı: puan halkası */
.rep-hero{display:flex;align-items:center;gap:22px;padding:22px 20px;border-bottom:1px solid var(--line);
  background:radial-gradient(520px 200px at 0 0,color-mix(in srgb,var(--lv) 22%,transparent),transparent 70%),var(--surface-2);--lv:var(--ok)}
.rep-hero[data-level="warn"]{--lv:#e9a23b}
.rep-hero[data-level="fail"]{--lv:var(--bad)}
.ring{position:relative;flex:none;width:118px;height:118px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:9}
.ring-bg{stroke:var(--line)}
.ring-fg{stroke:var(--lv);stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray .9s cubic-bezier(.2,.8,.2,1),stroke .3s;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--lv) 60%,transparent))}
.ring-in{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring-in b{font:800 34px/1 var(--sans);color:var(--lv);letter-spacing:-.02em}
.ring-in span{font:600 11.5px var(--mono);color:var(--muted);margin-top:3px}
.rep-head{min-width:0;flex:1}
.rep-kicker{font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--lv)}
.rep-domain{margin:2px 0 2px;font-size:22px;font-weight:700;letter-spacing:-.01em;text-transform:none;color:var(--ink);overflow-wrap:anywhere}
.rep-verdict{margin:0 0 12px;font-size:15px;font-weight:600;color:var(--ink-2)}
.rep-pills{display:flex;flex-wrap:wrap;gap:8px}
.pl{display:inline-flex;align-items:baseline;gap:6px;padding:6px 13px;border-radius:999px;font-size:13px;font-weight:600;border:1px solid}
.pl b{font:800 16px var(--mono)}
.pl-ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.pl-warn{color:var(--warn);background:color-mix(in srgb,#e9a23b 14%,transparent);border-color:color-mix(in srgb,#e9a23b 45%,transparent)}
.pl-fail{color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,transparent);border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
/* ---- bölüm gezinme çipleri */
.rep-nav{display:flex;gap:8px;padding:12px 20px;overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:none}
.rep-nav::-webkit-scrollbar{display:none}
.nav-chip{flex:none;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:10px;font-size:13px;font-weight:600;text-decoration:none;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line-2);--lv:var(--ok);transition:transform .15s,border-color .15s}
.nav-chip svg{width:15px;height:15px;color:var(--lv)}
.nav-chip::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--lv)}
.nav-chip:hover{transform:translateY(-1px);border-color:var(--lv);color:var(--ink)}
.nav-chip[data-level="warn"],.rep-sec[data-level="warn"]{--lv:#e9a23b}
.nav-chip[data-level="fail"],.rep-sec[data-level="fail"]{--lv:var(--bad)}
/* ---- bölümler ve denetimler */
.rep-sec{--lv:var(--ok);border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--vt-bar-h,0px) + 70px)}
.rep-sec:last-child{border-bottom:0}
.rep-sec.in,.chk.in{animation:rowIn .35s ease-out}
.rep-sec-head{display:flex;align-items:center;gap:12px;padding:16px 20px 12px;background:linear-gradient(90deg,color-mix(in srgb,var(--lv) 10%,transparent),transparent 60%);border-left:4px solid var(--lv)}
.sec-ico{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--navy),var(--sky));box-shadow:0 6px 14px -8px var(--sky)}
.sec-ico svg{width:19px;height:19px}
.rep-sec-head h3{margin:0;font:700 16px var(--sans);letter-spacing:0;text-transform:none;color:var(--ink);flex:1}
.sec-chip{font:700 12px var(--mono);padding:4px 10px;border-radius:999px;color:var(--lv);background:color-mix(in srgb,var(--lv) 14%,transparent);border:1px solid color-mix(in srgb,var(--lv) 40%,transparent);white-space:nowrap}
.chk{display:flex;gap:14px;padding:13px 20px;border-top:1px solid var(--line);border-left:4px solid transparent;transition:background .15s}
.chk:hover{background:color-mix(in srgb,var(--sky) 5%,transparent)}
.chk-ico{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:800 14px var(--mono);color:#fff;margin-top:1px}
.s-ok .chk-ico{background:linear-gradient(135deg,#19b892,#0e9f7e)}
.s-ok .chk-ico::before{content:"\2713"}
.s-warn .chk-ico{background:linear-gradient(135deg,#f3b04a,#e08a1a)}
.s-warn .chk-ico::before{content:"!"}
.s-fail .chk-ico{background:linear-gradient(135deg,#ff7a52,#dc4b22);animation:pulseBad 1.8s ease-out 2}
.s-fail .chk-ico::before{content:"\2715"}
.s-info .chk-ico{background:linear-gradient(135deg,var(--sky),var(--navy))}
.s-info .chk-ico::before{content:"i"}
.s-warn{background:color-mix(in srgb,#e9a23b 8%,transparent);border-left-color:#e9a23b}
.s-fail{background:color-mix(in srgb,var(--bad) 9%,transparent);border-left-color:var(--bad)}
.chk-body{min-width:0;flex:1}
.chk-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chk-head b{font-size:15px}
.chk-tag{font:700 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:6px}
.s-ok .chk-tag{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}
.s-warn .chk-tag{color:var(--warn);background:color-mix(in srgb,#e9a23b 20%,transparent)}
.s-fail .chk-tag{color:var(--bad);background:color-mix(in srgb,var(--bad) 16%,transparent)}
.s-info .chk-tag{color:var(--accent);background:color-mix(in srgb,var(--sky) 14%,transparent)}
.chk-text{margin:4px 0 0;color:var(--ink);font-size:14px;max-width:none}
.s-ok .chk-text{color:var(--ink-2)}
.chk-body ul{list-style:none;margin:9px 0 0;padding:10px 12px;border-radius:10px;background:var(--term-bg);color:var(--term-ink);border:1px solid var(--line);font-size:12.5px;overflow-x:auto}
.chk-body li{white-space:pre;line-height:1.75}
.t-ip{color:#6fc3f2}
.t-kw{color:#9fdc7a;font-weight:600}
.why{margin:9px 0 0;padding:8px 12px;border-radius:0 9px 9px 0;border-left:3px solid var(--teal);background:color-mix(in srgb,var(--teal) 9%,transparent);font-size:13px;color:var(--ink-2);max-width:none}
.why b{color:var(--ok)}
.s-warn .why{border-left-color:#e9a23b;background:color-mix(in srgb,#e9a23b 10%,transparent)}
.s-warn .why b{color:var(--warn)}
.s-fail .why{border-left-color:var(--bad);background:color-mix(in srgb,var(--bad) 9%,transparent)}
.s-fail .why b{color:var(--bad)}
/* ---- whois özeti */
.who-hero{padding:22px 20px;border-bottom:1px solid var(--line);
  background:radial-gradient(560px 220px at 100% 0,color-mix(in srgb,var(--teal) 20%,transparent),transparent 70%),radial-gradient(460px 200px at 0 0,color-mix(in srgb,var(--sky) 20%,transparent),transparent 70%),var(--surface-2)}
.who-kind{display:inline-block;font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:linear-gradient(90deg,var(--navy),var(--sky));padding:3px 10px;border-radius:999px}
.who-name{margin:8px 0 2px;font-size:clamp(22px,4.2vw,32px);font-weight:800;letter-spacing:-.02em;text-transform:none;overflow-wrap:anywhere;background:linear-gradient(90deg,var(--g1),var(--g2),var(--g3));-webkit-background-clip:text;background-clip:text;color:transparent}
.who-sub{margin:0;color:var(--ink-2);font-weight:600}
.who-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:16px}
.who-stat{padding:12px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--sky);box-shadow:var(--shadow)}
.who-stat:nth-child(2){border-top-color:var(--teal)}
.who-stat:nth-child(3){border-top-color:var(--lime)}
.who-stat:nth-child(4){border-top-color:#e9c84a}
.who-stat span{display:block;font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.who-stat b{font:800 26px var(--sans);letter-spacing:-.02em;overflow-wrap:anywhere}
.who-stat i{font-style:normal;font-size:13px;color:var(--muted);margin-left:5px}
.who-stat.l-ok b{color:var(--ok)}.who-stat.l-warn b{color:var(--warn)}.who-stat.l-bad b{color:var(--bad)}
.who-stat.in{animation:popIn .4s cubic-bezier(.2,.8,.2,1) backwards}
.who-stat:nth-child(2).in{animation-delay:.07s}.who-stat:nth-child(3).in{animation-delay:.14s}.who-stat:nth-child(4).in{animation-delay:.21s}
.life{padding:16px 18px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.life-row{display:flex;justify-content:space-between;gap:6px 16px;flex-wrap:wrap;font-size:13.5px;font-weight:600}
.life-bar{height:12px;border-radius:99px;background:var(--line);margin:10px 0 8px;overflow:hidden}
.life-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--navy),var(--sky),var(--teal),var(--lime));box-shadow:0 0 12px color-mix(in srgb,var(--teal) 55%,transparent);transition:width .9s cubic-bezier(.2,.8,.2,1)}
.life[data-level="soon"] .life-bar i{background:#e9a23b}
.life[data-level="dead"] .life-bar i{background:var(--bad)}
.life-note{margin:0;font-size:13px;color:var(--ink-2)}
.life[data-level="soon"] .life-note{color:var(--warn)}
.life[data-level="dead"] .life-note{color:var(--bad)}
.statuses{list-style:none;margin:0;padding:0 18px 12px}
.statuses li{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;padding:6px 0;border-top:1px dashed var(--line);font-size:13.5px}
.statuses li:first-child{border-top:0}
.statuses code{padding:3px 10px;border-radius:999px;font-weight:700;color:var(--lv);background:color-mix(in srgb,var(--lv) 13%,transparent);border:1px solid color-mix(in srgb,var(--lv) 40%,transparent)}
.statuses li{--lv:#e9a23b}
.statuses .st-good{--lv:var(--ok)}
.statuses .st-bad{--lv:var(--bad)}
.statuses code::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lv);margin-right:7px}
.statuses span{color:var(--ink-2)}
.extra{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
#whoisExtra,#whoisStatus{border-bottom:1px solid var(--line)}
.netpanel{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.netpanel>div{padding:18px 18px 16px;border-right:1px solid var(--line)}
.netpanel h3{color:var(--accent)}
.netpanel>div:last-child{border-right:0}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:13.5px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.kv a{color:var(--accent);text-decoration:none}
.kv a:hover{text-decoration:underline}
.atlas{display:inline-flex;align-items:center;gap:7px}
.st-dot{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.st-dot.ok{background:#34d399;animation:pulse 2s infinite}
.st-dot.bad{background:var(--bad)}
.recs{width:100%;border-collapse:collapse;font-size:13.5px}
.recs td{padding:10px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.recs tr:last-child td{border-bottom:0}
.recs td:first-child{width:1%;white-space:nowrap}
.recs .val{overflow-wrap:anywhere}
.recs .val small{display:block;color:var(--muted);font-size:12px}
.recs .ttl{white-space:nowrap;text-align:right;font:12px var(--mono);color:var(--muted)}
.recs tr.in,.fact.in{animation:rowIn .3s ease-out}
.recs tr:hover td{background:color-mix(in srgb,var(--sky) 6%,transparent)}
.rtype{display:inline-block;min-width:54px;text-align:center;padding:3px 8px;border-radius:7px;font:700 11.5px var(--mono);letter-spacing:.04em;color:var(--accent);background:color-mix(in srgb,var(--sky) 14%,transparent);border:1px solid color-mix(in srgb,var(--sky) 35%,transparent)}
.rtype.t-mx,.rtype.t-ns,.rtype.t-soa{color:var(--ok);background:color-mix(in srgb,var(--teal) 14%,transparent);border-color:color-mix(in srgb,var(--teal) 35%,transparent)}
.rtype.t-txt,.rtype.t-caa{color:var(--warn);background:color-mix(in srgb,#e9a23b 14%,transparent);border-color:color-mix(in srgb,#e9a23b 35%,transparent)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0;margin:0}
.fact{padding:11px 18px;border-bottom:1px solid var(--line);min-width:0}
.fact{border-left:3px solid transparent;transition:background .15s,border-color .15s}
.fact:hover{background:color-mix(in srgb,var(--sky) 6%,transparent);border-left-color:var(--sky)}
.fact dt{font:700 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:3px}
.fact dd{margin:0;font-size:13.5px}
.fact dd span{display:block;overflow-wrap:anywhere}
.error.soft{border-color:var(--line-2);color:var(--ink-2);background:var(--surface-2)}
#mapWrap{border-bottom:1px solid var(--line);background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--sky) 9%,transparent),transparent 70%),var(--surface-2)}
.map-box{position:relative}
#map,#idleMap{display:block;width:100%;height:auto}
#map .land,#idleMap .land{fill:none;stroke:var(--line-2);stroke-linecap:round;opacity:.75}
.arc{fill:none;stroke-width:2.4;stroke-linecap:round}
.arc.in{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .75s cubic-bezier(.3,.7,.3,1) forwards}
.arc.dashed{stroke-dasharray:.03 .03;opacity:.8}
.arc-glow{fill:none;stroke-width:9;stroke-linecap:round;opacity:.13}
.flow{fill:none;stroke:var(--flow,#fff);stroke-width:3;stroke-linecap:round;stroke-dasharray:.004 .196;animation:flow 2.6s linear infinite}
.pt{stroke:var(--surface-2);stroke-width:2;fill:#e9a23b}
.pt.src{fill:var(--teal)}
.pt.dst{fill:var(--sky)}
.halo{fill:none;stroke:var(--sky);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:halo 2s ease-out infinite}
.halo.src{stroke:var(--teal)}
.halo.mid{stroke:#e9a23b}
.hit{fill:transparent;cursor:pointer;outline:none}
.hit:focus-visible{stroke:var(--sky);stroke-width:2}
#map .lbl,#idleMap .lbl{font:600 12px var(--mono);fill:var(--ink);paint-order:stroke;stroke:var(--surface-2);stroke-width:4px;stroke-linejoin:round}
.map-tip{position:absolute;z-index:3;transform:translateX(-50%);min-width:150px;max-width:260px;padding:9px 11px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);box-shadow:0 12px 30px -14px rgba(0,0,0,.55);font-size:12.5px;pointer-events:none}
.map-tip b{display:block;margin-bottom:3px;font-size:13px}
.map-tip span{display:block;font-family:var(--mono);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.map-tip span i{font-style:normal;color:var(--accent);font-weight:700}
.map-tip small{display:block;color:var(--muted);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.map-note{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0;padding:10px 18px;border-top:1px solid var(--line);background:var(--surface);font-size:12.5px;color:var(--ink-2)}
.map-nets{display:flex;flex-wrap:wrap;gap:6px 14px;min-width:0}
.map-nets .net{display:inline-flex;align-items:center;gap:6px;max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.map-nets .net i{flex:none;width:14px;height:4px;border-radius:2px}
.map-nets .net b{font:600 12px var(--mono);color:var(--ink)}
.map-note .map-hint{margin-left:auto;color:var(--muted)}
#idleMap{max-width:620px;margin:-14px auto 6px;-webkit-mask-image:radial-gradient(ellipse 60% 62% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 60% 62% at 50% 50%,#000 55%,transparent 100%)}
#pingWrap{padding-bottom:16px}
.chain{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;padding-bottom:10px}
.as{border:1px solid var(--line-2);border-radius:10px;padding:8px 12px;background:var(--surface-2);min-width:150px;max-width:240px}
.as:first-child{border-color:var(--teal)}
.as:last-child{border-color:var(--sky)}
.as{border-top:3px solid var(--sky)}
.as:first-child{border-top-color:var(--teal)}
.as b{display:block;font:600 12px var(--mono);color:var(--accent)}
.as span{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.as i{font-style:normal;font-size:12px;color:var(--muted)}
.as.in,.tile.in{animation:popIn .35s cubic-bezier(.2,.8,.2,1)}
.arrow{align-self:center;color:var(--muted)}
#chart{width:100%;height:170px;display:block}
#chart .grid{stroke:var(--line);stroke-width:1}
#chart .area{fill:var(--sky);opacity:.14}
#chart .curve{fill:none;stroke:var(--sky);stroke-width:2;vector-effect:non-scaling-stroke}
#chart text{fill:var(--muted);font:10px var(--mono)}

.ping-bars{display:flex;align-items:flex-end;gap:8px;height:130px;padding-bottom:22px}
.bar{position:relative;flex:1;max-width:64px;height:100%;display:flex;align-items:flex-end}
.bar i{display:block;width:100%;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--sky),var(--teal));transition:height .3s ease}
.bar.in i{animation:grow .4s cubic-bezier(.2,.8,.2,1)}
.bar.lost i{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--bad) 55%,transparent) 0 5px,transparent 5px 10px);border:1px dashed var(--bad)}
.bar span{position:absolute;bottom:-20px;left:0;right:0;text-align:center;font:11px var(--mono);color:var(--muted)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-top:8px}
.tile{border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:var(--surface-2)}
.tile span{display:block;font:600 10.5px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.tile b{font:600 20px var(--mono)}
.tile i{font-style:normal;font-size:12px;color:var(--muted);margin-left:4px}
.tile.ok b{color:var(--ok)}
.tile.warn b{color:var(--warn)}

.table-wrap{overflow-x:auto}
.hops{width:100%;border-collapse:collapse;font-size:13.5px}
.hops th{text-align:left;font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:10px 18px;border-bottom:1px solid var(--line)}
.hops td{padding:9px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.hops .num{text-align:right;white-space:nowrap;font-family:var(--mono)}
.hops td.n{text-align:left;width:1%;white-space:nowrap}
.hops td small{display:block;color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.hops .asn{font:600 12px var(--mono);color:var(--accent);margin-right:6px}
.hops .dim{color:var(--muted)}
.hops .lossy{color:var(--warn)}
.has-tip{cursor:help;border-bottom:1px dotted currentColor;outline:none}
.has-tip:focus-visible{border-bottom-style:solid;color:var(--ink)}
.tipbox{position:fixed;z-index:50;max-width:min(320px,calc(100vw - 16px));padding:10px 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);color:var(--ink-2);box-shadow:0 14px 34px -14px rgba(0,0,0,.6);font-size:12.5px;line-height:1.5;pointer-events:none}
.hops tr.in{animation:rowIn .35s ease-out}
.waiting{display:flex;align-items:center;gap:10px;padding:14px 18px;color:var(--ink-2);font-size:13.5px}
.dots{display:inline-flex;gap:4px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--sky);animation:bounce 1s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
.hops-note{padding:0 18px 14px}
.term{margin:0;background:var(--term-bg);color:var(--term-ink);padding:16px 18px;overflow-x:auto;white-space:pre;min-height:60px;max-height:520px;font-size:12.5px;line-height:1.6}
.is-running .term::after{content:"▋";color:var(--sky);animation:blink 1s steps(1) infinite}

/* ---------- hız testi */
.speed-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 18px 14px;flex-wrap:wrap}
.speed-head .hint{margin:0}
.st{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:8px 26px;align-items:center;padding:8px 22px 18px;border-top:1px solid var(--line);
  background:radial-gradient(420px 220px at 18% 100%,color-mix(in srgb,var(--sky) 16%,transparent),transparent 70%)}
.st-gauge{position:relative;max-width:320px;width:100%;margin:0 auto}
.st-gauge svg{display:block;width:100%;height:auto;overflow:visible}
.g-bg,.g-fg{fill:none;stroke-width:16;stroke-linecap:round}
.g-bg{stroke:var(--line)}
.g-fg{stroke:url(#stGrad);stroke-dasharray:0 100;transition:stroke-dasharray .35s ease-out;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--sky) 55%,transparent))}
.g-ticks text{fill:var(--muted);font:10px var(--mono)}
.st-read{position:absolute;left:0;right:0;bottom:6%;text-align:center;line-height:1.1}
.st-read span{display:block;font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.st-read b{display:block;font:800 clamp(38px,7vw,54px)/1.05 var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums;background:linear-gradient(90deg,var(--g1),var(--g2));-webkit-background-clip:text;background-clip:text;color:transparent}
.st-read i{font-style:normal;font-size:13px;color:var(--muted)}
.st[data-phase="up"] .st-read b{background-image:linear-gradient(90deg,var(--g2),var(--g3))}
.st[data-phase="ping"] .st-read b{animation:blink 1s steps(2) infinite}
.st-side{min-width:0}
.st-steps{display:flex;gap:8px;list-style:none;margin:0 0 12px;padding:0;flex-wrap:wrap}
.st-steps li{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;color:var(--muted);border:1px solid var(--line-2);background:var(--surface-2);transition:color .2s,border-color .2s,background .2s}
.st-steps .st-dot{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.st-steps li.on{color:var(--ink);border-color:var(--sky);background:color-mix(in srgb,var(--sky) 12%,transparent)}
.st-steps li.on .st-dot{background:var(--sky);animation:pulse 1.1s infinite}
.st-steps li.done{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.st-steps li.done .st-dot{background:var(--ok)}
#stChart{display:block;width:100%;height:120px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line)}
#stChart .grid{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
#stChart .curve{fill:none;stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
#stChart .curve.down{stroke:var(--sky)}
#stChart .curve.up{stroke:var(--teal)}
#stChart .area.down{fill:var(--sky);opacity:.16}
#stChart .area.up{fill:var(--teal);opacity:.16}
.st-legend{display:flex;gap:16px;margin:8px 0 0;font-size:12.5px;color:var(--ink-2)}
.st-legend>span::before{content:"";display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle;background:var(--sky)}
.st-legend .lg-u::before{background:var(--teal)}
.st-how{border-top:1px solid var(--line);border-bottom:0;padding:12px 22px}
.st-how summary{color:var(--accent)}
.st-how ol{margin:10px 0 6px;padding-left:20px;color:var(--ink-2);font-size:13.5px;max-width:760px}
.st-how li{margin:4px 0}
.st-how li b{color:var(--ink)}
.st-how p{font-size:13px;color:var(--muted)}
.gauges{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gauges div{padding:14px 18px;border-right:1px solid var(--line);transition:background .2s}
.gauges div:last-child{border-right:0}
.gauges div.live{background:color-mix(in srgb,var(--sky) 9%,transparent)}
.gauges div.live b{color:var(--accent)}
.gauges div:nth-child(1) b{color:var(--sky)}
.gauges div:nth-child(2) b{color:var(--teal)}
.gauges span{display:block;font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.gauges b{display:block;font:600 26px var(--mono);margin:4px 0 0;font-variant-numeric:tabular-nums}
.gauges i{font-style:normal;font-size:12px;color:var(--muted)}
.speed-cols{display:grid;grid-template-columns:1fr 1fr}
.speed-cols>div{padding:16px 18px}
.speed-cols>div+div{border-left:1px solid var(--line)}
.files{display:flex;flex-wrap:wrap;gap:8px}
.files a{border:1px solid var(--line-2);border-radius:9px;padding:6px 14px;font:600 13px var(--mono);color:var(--ink);text-decoration:none;background:var(--surface-2)}
.files a:hover{border-color:var(--sky)}
.code{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:8px 10px;margin-bottom:8px}
.code code{font:12.5px var(--mono);overflow-wrap:anywhere}

/* ---------- hata sayfaları */
.errpage{max-width:560px;margin:0 auto;padding:12vh 0 10vh;text-align:center}
.err-code{display:block;font:800 clamp(84px,22vw,150px)/1 var(--sans);letter-spacing:-.05em;background:linear-gradient(90deg,var(--g1),var(--g2),var(--g3));-webkit-background-clip:text;background-clip:text;color:transparent}
.errpage h1{font-size:clamp(22px,4vw,30px);margin:8px 0 10px}
.errpage .lead{margin:0 auto 26px}
.errpage .btn{text-decoration:none}

/* ---------- SSS ve alt bilgi */
.loc.cmp .loc-dot{border-radius:3px;background:linear-gradient(90deg,var(--teal) 0 45%,transparent 45% 55%,var(--sky) 55%)}
.loc.cmp.on .loc-dot{animation:none}
.locpill.cmp i{border-radius:2px;background:linear-gradient(90deg,var(--teal) 0 45%,transparent 45% 55%,var(--sky) 55%)}
.cmp{padding:14px 18px 6px}
.cmp-verdict{margin-bottom:12px;padding:10px 14px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface-2);font-weight:600;color:var(--ink-2)}
.cmp-verdict.won{border-color:color-mix(in srgb,var(--teal) 60%,var(--line-2));background:color-mix(in srgb,var(--teal) 10%,var(--surface-2));color:var(--ink)}
.cmp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;align-items:start}
.cmp-col{min-width:0;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);overflow:hidden}
.cmp-col.best{border-color:var(--teal);box-shadow:0 10px 26px -18px var(--teal)}
.cmp-col.bad{border-color:color-mix(in srgb,var(--bad) 55%,var(--line-2))}
.cmp-head{display:flex;align-items:center;gap:10px;padding:12px 14px 4px}
.cmp-head b{display:block;font-size:15px}
.cmp-head small{display:block;font-size:12px;color:var(--muted)}
.cmp-col.live .dot{animation:pulse 1.2s infinite}
.cmp-col.bad .dot{background:var(--bad);box-shadow:0 0 0 4px color-mix(in srgb,var(--bad) 22%,transparent)}
.cmp-badge{margin-left:auto;font:700 10.5px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ok);background:color-mix(in srgb,var(--teal) 16%,transparent);border-radius:999px;padding:3px 9px}
.cmp-sum{margin:0;padding:0 14px 10px 36px;font:600 13px var(--mono);color:var(--ok)}
.cmp-col.live .cmp-sum{color:var(--muted)}
.cmp-col.bad .cmp-sum{color:var(--bad);font-family:var(--sans)}
.cmp-col .ping-bars{height:104px;padding:0 14px 22px;gap:5px}
.cmp-col .tiles{grid-template-columns:repeat(2,minmax(0,1fr));margin:8px 14px 14px}
.cmp-chain{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px}
.cmp-as{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border:1px solid var(--line-2);border-radius:999px;font:600 11.5px var(--mono);color:var(--ink-2)}
.cmp-as i{width:10px;height:4px;border-radius:2px}
.cmp-arrow{align-self:center;color:var(--muted);font-size:12px}
.cmp-col .hops{display:block;border-top:1px solid var(--line)}
.cmp-col .hops tbody{display:block}
.cmp-col .hops tr{display:grid;grid-template-columns:minmax(26px,auto) minmax(0,1fr) auto;column-gap:8px;padding:9px 14px;border-bottom:1px solid var(--line)}
.cmp-col .hops tr:last-child{border-bottom:0}
.cmp-col .hops td{display:block;padding:0;border:0}
.cmp-col .hops td.n{grid-row:1/3;width:auto;padding-top:1px}
.cmp-col .hops td.addr{grid-column:2;grid-row:1;min-width:0;overflow-wrap:anywhere}
.cmp-col .hops td.lat{grid-column:3;grid-row:1}
.cmp-col .hops td.net{grid-column:2;grid-row:2;font-size:12.5px;color:var(--ink-2);margin-top:2px}
.cmp-col .hops td.net small{display:inline;margin-left:6px}
.cmp-col .hops td.loss{grid-column:3;grid-row:2;font-size:12px;margin-top:2px}
.cmp-col .hops td.noresp{grid-column:2/4}
.cmp-col .hops td.lat small{display:none}
.more{margin:44px 0 8px;padding-top:30px;border-top:1px solid var(--line)}
.more-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:18px}
.more-eyebrow{margin:0;font:700 11.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--sky)}
.more-head h2{margin:4px 0 2px}
.more-sub{margin:0;font-size:14px;color:var(--muted)}
.all-link{display:inline-flex;align-items:center;gap:6px;font:600 14px var(--sans);color:var(--accent);text-decoration:none;border:1px solid var(--line-2);border-radius:999px;padding:8px 14px;background:var(--surface)}
.all-link svg{width:16px;height:16px}
.all-link:hover{border-color:var(--sky)}
.more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mtool{position:relative;display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:12px;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line-2);box-shadow:0 10px 24px -18px rgba(16,40,70,.45);transition:transform .18s,border-color .18s,box-shadow .18s}
.mtool:hover{transform:translateY(-2px);border-color:var(--sky);box-shadow:0 16px 32px -18px color-mix(in srgb,var(--sky) 70%,transparent)}
.mtool-top{display:flex;align-items:center;justify-content:space-between}
.mtool-ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--navy),var(--sky));box-shadow:0 6px 14px -8px var(--sky)}
.mtool-ic svg{width:20px;height:20px}
.mtool-arrow{width:18px;height:18px;color:var(--muted);transition:transform .18s,color .18s}
.mtool:hover .mtool-arrow{transform:translateX(3px);color:var(--sky)}
.mtool b{display:block;font-size:15.5px;line-height:1.3}
.mtool .d{display:block;font-size:13px;line-height:1.45;color:var(--muted);margin-top:2px}
.mtool .u{display:block;font:12px/1.4 var(--mono);color:var(--accent);margin-top:auto}
.mtool.hub{grid-column:1/-1;background:linear-gradient(135deg,#0b1446,#1a4f8a);border-color:transparent;color:#fff}
.mtool.hub .d{color:#c7d2fe}
.mtool.hub .u{color:#9fd4f6}
.mtool.hub .mtool-arrow{color:#c7d2fe}
.mtool.hub .mtool-ic{background:rgba(255,255,255,.14);box-shadow:none}
@media (max-width:700px){.more-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.more-grid{grid-template-columns:1fr}}
.faq{margin:32px 0}
.faq h2{margin-bottom:10px;display:flex;align-items:center;gap:10px}
.faq h2::before,.speed-head h2::before{content:"";width:6px;height:20px;border-radius:3px;background:linear-gradient(180deg,var(--sky),var(--teal),var(--lime))}
.speed-head h2{display:flex;align-items:center;gap:10px}
summary::marker{color:var(--sky)}
details[open]>summary{color:var(--accent)}
details{border-bottom:1px solid var(--line);padding:13px 2px}
summary{cursor:pointer;font-weight:600}
details p{margin:8px 0 2px;color:var(--ink-2);max-width:760px}
.foot{position:relative;border-top:1px solid var(--line);padding:18px 0 30px;color:var(--muted);font-size:13px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between}

/* ---------- hareket */
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}70%{box-shadow:0 0 0 9px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes slide{0%{left:-38%}100%{left:100%}}
@keyframes packet{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(100% - 8px);opacity:0}}
@keyframes rowIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleY(.1);transform-origin:bottom}to{transform:none;transform-origin:bottom}}
@keyframes bounce{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-4px);opacity:1}}
@keyframes blink{50%{opacity:0}}
@keyframes pulseBad{0%{box-shadow:0 0 0 0 rgba(241,90,41,.55)}100%{box-shadow:0 0 0 12px rgba(241,90,41,0)}}
@keyframes halo{0%{transform:scale(.45);opacity:.9}100%{transform:scale(1.7);opacity:0}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes flow{to{stroke-dashoffset:-.2}}
@keyframes eq{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.empty-art span{transform-origin:bottom}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .wire i{display:none}
  .is-running .progress i{left:0;width:100%;opacity:.5}
}

/* ---------- telefon */
@media (max-width:640px){
  .wrap{padding:0 14px}
  .top-in{height:54px}
  .brand img{height:26px}
  .pill{display:none}
  .ctl{height:34px;padding:0 10px}
  .hero{padding:22px 0 4px}
  .lead{font-size:15px}
  .chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -14px;padding:0 14px 6px;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .card{border-radius:14px;margin:14px 0}
  .step{padding:14px;gap:10px}
  .step-n{width:24px;height:24px;font-size:12px}
  .locs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .loc{min-width:0;padding:10px 12px}
  .loc b{font-size:14.5px}
  .loc small{font-size:11.5px}
  /* Parmakla rahat basılsın: küçük düğmeler en az 34px yüksekliğinde. */
  .chip button,.mini{min-height:32px;padding:4px 12px;font-size:12.5px}
  .ex{min-height:34px;padding:5px 13px;font-size:13px}
  .faq summary{padding:6px 0}
  .chk-body summary{padding:5px 0}
  .chip{padding:5px 6px 5px 10px}
  .tabs{flex-wrap:nowrap;overflow-x:auto;margin:0 -14px;padding:0 14px 2px;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:none;padding:8px 13px}
  .row input{flex:1 1 100%;font-size:16px}
  .row select{flex:1 1 100%;min-width:0;font-size:16px}
  .seg{flex:none}
  .btn.run{flex:1 1 120px}
  .route{padding:16px 14px 14px;gap:10px}
  .node b{font-size:14px;max-width:28vw}
  .node small{max-width:28vw}
  /* Sonuç özeti ("ort 9.6 ms · %0 kayıp") kesilmesin: hedef tarafı genişler ve alt satıra sarabilir. */
  /* Kaynak tarafında veri merkezi adı kesilmesin, alt satıra sarsın. */
  .node.src small{white-space:normal;overflow:visible;max-width:30vw}
  .node.dst b{max-width:46vw}
  .node.dst small{max-width:46vw;white-space:normal;overflow:visible}
  .wire{min-width:22px}
  .res-head{padding:10px 14px}
  .res-actions{width:100%}
  .res-actions .mini{flex:1;padding:6px 0}
  .cmp{padding:12px 14px 4px}
  .locpill.cmp{flex:0 0 auto;padding:5px 12px}
  .stick>span{display:none}
  .stick{padding-top:7px;padding-bottom:8px}
  .locpill{min-height:32px;flex:1;justify-content:center}
  .locpill small{display:none}
  .loc-switch{flex:1}
  #chainWrap,#chartWrap,#pingWrap{padding:14px 14px 6px}
  .map-note{padding:10px 14px}
  .blk-title{padding:12px 14px 6px}
  .life{padding:14px}
  .rep-hero{padding:18px 14px;gap:14px}
  .ring{width:92px;height:92px}
  .ring-in b{font-size:27px}
  .rep-domain{font-size:18px}
  .rep-verdict{font-size:14px;margin-bottom:10px}
  .pl{padding:5px 10px;font-size:12.5px}
  .rep-nav{padding:10px 14px}
  .rep-sec-head{padding:14px 14px 10px}
  .sec-ico{width:32px;height:32px}
  .chk{padding:12px 14px 12px 10px;gap:10px}
  .chk-ico{width:24px;height:24px;font-size:12px}
  .who-hero{padding:18px 14px}
  .who-stats{grid-template-columns:1fr 1fr}
  .who-stat b{font-size:22px}
  .statuses{padding:0 14px 10px}
  .extra{grid-template-columns:1fr}
  .netpanel{grid-template-columns:1fr}
  .netpanel>div{padding:14px;border-right:0;border-bottom:1px solid var(--line)}
  .netpanel>div:last-child{border-bottom:0}
  .recs td{padding:9px 14px}
  .recs td:first-child{padding-right:0}
  .recs .ttl{display:none}
  .fact{padding:10px 14px}
  .facts{grid-template-columns:1fr}
  .map-note .map-hint{margin-left:0;flex-basis:100%}
  #pingWrap{padding-bottom:14px}
  .chain{flex-wrap:nowrap;overflow-x:auto;margin:0 -14px;padding:0 14px 10px}
  .as{flex:none;min-width:140px}
  .ping-bars{gap:5px;height:110px}
  .tiles{grid-template-columns:1fr 1fr}
  .tiles .tile:first-child:nth-last-child(odd){grid-column:1/-1}
  #chart{height:140px}
  /* Durak tablosu telefonda kart satırlarına dönüşür. */
  .hops thead{display:none}
  .hops,.hops tbody{display:block}
  .hops tr{display:grid;grid-template-columns:minmax(26px,auto) minmax(0,1fr) auto;column-gap:8px;padding:10px 14px;border-bottom:1px solid var(--line)}
  .hops td{display:block;padding:0;border:0}
  .hops td.n{grid-row:1/3;width:auto;padding-top:1px}
  .hops td.addr{grid-column:2;grid-row:1}
  .hops td.lat{grid-column:3;grid-row:1}
  .hops td.net{grid-column:2;grid-row:2;font-size:12.5px;color:var(--ink-2);margin-top:2px}
  .hops td.net small{display:inline;margin-left:6px}
  .hops td.loss{grid-column:3;grid-row:2;font-size:12px;margin-top:2px}
  .hops td.noresp{grid-column:2/4}
  .hops td.lat small{display:none}
  .waiting,.hops-note{padding-left:14px;padding-right:14px}
  .term{padding:14px;font-size:11.5px}
  .speed-head{padding:16px 14px 12px}
  .st{grid-template-columns:1fr;padding:6px 14px 16px;gap:14px}
  .st-gauge{max-width:270px}
  .st-how{padding:10px 14px}
  .st-how summary{padding:7px 0}
  #stChart{height:96px}
  .speed-head .btn{width:100%}
  .gauges{grid-template-columns:repeat(2,1fr)}
  .gauges div{padding:12px 14px}
  .gauges div:nth-child(2){border-right:0}
  .gauges div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .gauges b{font-size:22px}
  .speed-cols{grid-template-columns:1fr}
  .speed-cols>div{padding:14px}
  .speed-cols>div+div{border-left:0;border-top:1px solid var(--line)}
  .code code{font-size:11.5px}
}
@media (max-width:380px){
  .brand-tag{display:none}
}
@media (max-width:340px){
  .locs{grid-template-columns:1fr}
}