/* ==========================================================================
   _tool-enhance.css — Ortak görsel iyileştirme katmanı (55 statik araç)
   Inline <style>'lardan SONRA yüklenir. Renk temasını DEĞİŞTİRMEZ; mevcut
   CSS değişkenlerini kullanır. Sadece kontrast / boyut / durum / responsive.
   ========================================================================== */

/* ---------- 1. Slider (input[type=range]) kontrast + dokunma hedefi ------- */
input[type=range]{
  height:8px !important;
  background:var(--color-border-secondary) !important;
  border-radius:5px !important;
  border:0.5px solid var(--color-border-primary) !important;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:20px !important;
  height:20px !important;
  border-radius:50% !important;
  background:var(--color-text-info) !important;
  border:3px solid var(--color-background-primary,#fff) !important;
  box-shadow:0 1px 4px rgba(0,0,0,0.30) !important;
  cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:20px !important;
  height:20px !important;
  border-radius:50% !important;
  background:var(--color-text-info) !important;
  border:3px solid var(--color-background-primary,#fff) !important;
  box-shadow:0 1px 4px rgba(0,0,0,0.30) !important;
  cursor:pointer;
}
input[type=range]:focus-visible{
  outline:2px solid var(--color-text-info) !important;
  outline-offset:3px !important;
}

/* ---------- 2. Preset / sekme aktif durum vurgusu ------------------------- */
.zt-preset-btn.active,
[class*="preset-btn"].active,
[class*="preset"].selected,
button.active[class*="preset"]{
  background:var(--color-text-info) !important;
  color:var(--color-background-primary,#fff) !important;
  border:1.5px solid var(--color-text-info) !important;
  font-weight:600 !important;
  box-shadow:0 1px 3px rgba(0,0,0,0.18) !important;
  transform:translateY(-1px);
}
.zt-tabs button.active,
[class*="tabs"] button.active,
[class*="tab-"].active{
  font-weight:600 !important;
  box-shadow:inset 0 -2px 0 0 var(--color-text-info) !important;
}

/* ---------- 3. Sonuç kartları (result-card) elevation + tabular-nums ------ */
[class*="result-card"]{
  border:1px solid var(--color-border-tertiary) !important;
  box-shadow:0 1px 2px rgba(0,0,0,0.05) !important;
}
[class*="result-card"] .value,
[class*="result-card"] [class*="value"]{
  font-variant-numeric:tabular-nums !important;
  font-feature-settings:"tnum" 1;
}

/* ---------- 4. Responsive: diyagram ezilmesin, iki sütun -> tek sütun ----- */
@media (max-width:640px){
  /* Chart.js konteyner min yükseklik koru (relative + canvas) */
  div[style*="position:relative"][style*="height"]{
    min-height:200px;
  }
  /* yan yana grid/flex layout'lar tek sütuna */
  [style*="grid-template-columns"]{
    grid-template-columns:1fr !important;
  }
  /* sonuç kartı grid'leri tek/çift sütun toleransı */
  [class*="results-grid"],
  [class*="result-grid"]{
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr)) !important;
  }
}

/* ---------- 5. Erişilebilirlik: genel focus-visible ---------------------- */
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible{
  outline:2px solid var(--color-text-info) !important;
  outline-offset:2px !important;
}