/* Araçlar UI */
.tools-hero{padding:3.2rem 0 1.5rem}
.tools-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.tool-card .card-icon{margin-bottom:.4rem}
.tool-panel{max-width:720px;margin:0 auto 2rem;border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(165deg,rgba(20,29,52,.7),rgba(9,14,28,.9));padding:1.6rem}
.tool-panel label{display:block;font-size:.86rem;font-weight:700;margin-bottom:.35rem;color:var(--ink-2)}
.tool-panel input,.tool-panel select{width:100%;background:rgba(10,16,30,.7);border:1px solid var(--line-2);border-radius:12px;color:var(--ink);padding:.85rem 1rem;font:inherit;margin-bottom:1rem}
.tool-panel input:focus,.tool-panel select:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(245,166,35,.15)}
.tool-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.tool-actions{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.tool-note{font-size:.85rem;color:var(--ink-3);margin-top:.9rem}
.tool-result{margin-top:1.6rem;display:none}
.tool-result.show{display:block}
.tool-loading{display:none;align-items:center;gap:.7rem;color:var(--ink-2);font-weight:600;margin-top:1rem}
.tool-loading.show{display:flex}
.tool-loading .spin{width:18px;height:18px;border:2px solid var(--line-2);border-top-color:var(--amber);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.score-ring{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;margin:0 auto 1.2rem;background:conic-gradient(var(--amber) calc(var(--p)*1%),rgba(148,163,196,.15) 0);position:relative}
.score-ring::before{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--bg-2)}
.score-ring strong{position:relative;font-size:2rem;font-weight:900}
.score-ring span{position:relative;display:block;font-size:.72rem;color:var(--ink-3);text-align:center;margin-top:-.2rem}
.check-list{list-style:none;display:grid;gap:.65rem}
.check-list li{display:grid;grid-template-columns:28px 1fr;gap:.7rem;padding:.85rem 1rem;border:1px solid var(--line);border-radius:12px;background:rgba(10,16,30,.45)}
.check-list .ok{color:#4ade80;font-weight:900}
.check-list .bad{color:#fb7185;font-weight:900}
.check-list strong{display:block;font-size:.95rem;margin-bottom:.15rem}
.check-list p{margin:0;font-size:.86rem;color:var(--ink-2)}
.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:1rem 0}
.metric-box{border:1px solid var(--line);border-radius:12px;padding:1rem;background:rgba(10,16,30,.5)}
.metric-box b{display:block;font-size:1.1rem;margin-bottom:.25rem}
.metric-box span{font-size:.8rem;color:var(--ink-3)}
.rank-big{text-align:center;padding:1.4rem;border-radius:var(--r-lg);border:1px solid var(--line);background:rgba(10,16,30,.55);margin-bottom:1.2rem}
.rank-big .pos{font-size:clamp(2.5rem,8vw,4rem);font-weight:900;background:linear-gradient(92deg,var(--amber),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.rank-big .miss{font-size:1.4rem;font-weight:800;color:var(--ink-2)}
.top-hosts{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.8rem}
.top-hosts span{font-size:.78rem;border:1px solid var(--line-2);border-radius:999px;padding:.25rem .7rem;color:var(--ink-2)}
.top-hosts span.hit{border-color:var(--amber);color:var(--amber)}
@media (max-width:720px){
  .tools-grid,.tool-row,.metric-grid{grid-template-columns:1fr}
}