/* Karakter sayaci: kart duzeni, sinir cubuklari. Genis ekranda metin kutusu kaydirirken yerinde kalir. */
#ks-girdi { min-height: 260px; font-family: inherit; font-size: 15px; line-height: 1.6; }
.ks-kartlar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ks-kartlar .arac-sonuc { padding: 14px 16px; }
.ks-kartlar .arac-sonuc > strong { font-size: 24px; }
.ks-ozet { margin: 0; font-size: 13px; color: var(--muted); min-height: 1px; }
.ks-sinirlar { display: grid; gap: 10px; }
.ks-sinir { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.ks-sinir-ust { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.ks-sinir-ust strong { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.ks-cubuk { height: 6px; margin: 8px 0 6px; border-radius: 99px; background: var(--surface2); overflow: hidden; }
.ks-cubuk span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--muted); transition: width .15s; }
.ks-sinir[data-durum=ok] .ks-cubuk span { background: #34d399; }
.ks-sinir[data-durum=uyari] .ks-cubuk span { background: #f5a524; }
.ks-sinir[data-durum=hata] .ks-cubuk span { background: #f87171; }
.ks-sinir[data-durum=hata] .ks-sinir-ust strong { color: #f87171; }
.ks-sinir small { font-size: 12px; color: var(--muted); }
.ks-baslik-satir { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.ks-baslik-satir .arac-onay { font-size: 13px; }
.ks-baslik-satir .arac-onay small { display: inline; color: var(--muted); }
.ks .arac-tablo th:first-child, .ks .arac-tablo td:first-child { width: 48px; white-space: nowrap; color: var(--muted); }
.ks .arac-tablo td { overflow-wrap: anywhere; }
@media (min-width: 961px) {
  #ks-form { position: sticky; top: 96px; }
  #ks-girdi { min-height: 440px; }
}
@media (max-width: 560px) {
  .ks-kartlar { gap: 8px; }
  .ks-kartlar .arac-sonuc { padding: 10px; border-radius: 10px; }
  .ks-kartlar .arac-sonuc > span { font-size: 11px; }
  .ks-kartlar .arac-sonuc > strong { font-size: 19px; margin-top: 4px; }
  .ks-kartlar .arac-sonuc > small { font-size: 11px; line-height: 1.35; }
  .ks .arac-tablo th, .ks .arac-tablo td { padding: 9px 10px; }
}
@media (prefers-reduced-motion: reduce) { .ks-cubuk span { transition: none; } }