/* =====================================================================
   KELİMELER — MASAÜSTÜ DÜZENİ (29 Eyl 2026)
   =====================================================================
   Ölçüldü (canlı, 1440): kart başlığı sayfa başlığını tekrarlıyordu;
   sayaç düğmelerle hizasız; "İlk 400" 45px'lik panel; durum (yeni /
   yolda / öğrenildi) açılır listede gizli; tür rozetleri 10px.
   Tablo davranışı (sütunların sırayla gizlenmesi, süzgeç satırı)
   DEĞİŞMEDİ. İşaretleme telefonla ortak; yeni parçalar telefonda gizli.
   ===================================================================== */
.kl-durum { display: none; }

@media (min-width: 941px) {
  .kl-kart > h2, .kl-kart > .sub, .kl-kart > .kl-400 { display: none; }
  .kl-kart > .filters { margin: 0 0 var(--sp-3); flex-wrap: nowrap; }
  .kl-kart > .filters > input { flex: 1 1 auto; min-width: 0; }
  .kl-kart > .filters > .btn { min-height: var(--ctrl-h); }
  /* durum hapları varken açılır liste gereksiz — <select> DOM'da kalır (değerin tek kaynağı) */
  .kl-kart > .filters > .dd:has(#fst), .kl-kart > .filters > #fst { display: none; }
  /* satır kuralı çocuklara 44px veriyor — sayaç kutunun ORTASINDA */
  .kl-kart > .filters > .kl-sayac {
    display: inline-flex; align-items: center; flex: none; margin-left: var(--sp-2);
    font-size: var(--fs-base); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums;
    opacity: 1;   /* .u-dim saydamlık veriyor — renk doğru ölçülse de ekranda soluktu */
  }
  .kl-kart .kl-sayac b { color: var(--text); font-weight: 600; margin-right: 3px; }

  /* ---------- durum hapları: ilerleme dilinin üç bandı ---------- */
  .kl-durum { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-4); }
  .kl-hap {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    min-height: var(--ctrl-h-sm); padding: 0 var(--sp-3) 0 var(--sp-2);
    border: 1px solid var(--line); border-radius: var(--r-full); background: transparent;
    font: 500 var(--fs-base)/1 var(--font-ui); color: var(--text); cursor: pointer;
    transition: border-color var(--mo-hizli) var(--mo-cikis), background-color var(--mo-hizli) var(--mo-cikis);
  }
  .kl-hap[data-klst=""] { padding-left: var(--sp-3); }
  .kl-hap b { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
  .kl-hap:hover { border-color: var(--btn-line); background: var(--card2); }
  .kl-hap.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
  .kl-hap.on b { color: var(--text); }
  .kl-hap .bant { width: 22px; height: 22px; }

  /* ---------- tablo ölçeği ---------- */
  .kl-kart table.words .pos-badge { font-size: var(--fs-xs); }
  .kl-kart table.words td { font-size: var(--fs-base); }
  /* sıralama oku bir kontrol göstergesi — saydamlıkla 2,01:1 kalıyordu (en az 3:1) */
  .kl-kart .th-ok { opacity: 1; color: var(--muted); }
  .kl-kart th.th-sort.on .th-ok { color: var(--accent); }   /* aktif sıralama saydamlıkla değil renkle ayrılır */
}

/* =====================================================================
   KELİMELER — TELEFON VE TABLET (30 Eyl 2026)
   =====================================================================
   Olculdu: 320'de arama kutusu 26px'e eziliyordu (arama + iki dugme tek
   satir); dort sutun + sutun suzgec satiri sigmiyor, kutu noktalari
   kesiliyor, tablo kendi icinde 12–25px yatay kayiyordu; kart basligi
   ekran basligini tekrarliyordu; durum haplari telefonda yoktu.
   Telefonda tablo SATIR LISTESI olur (ayni DOM): kelime + Turkce solda,
   tur rozeti + kutu sagda. Siralama basliklari yatay hap serididir;
   sutun suzgecleri "Suzgecler" acilinca iki sutunlu izgarada gelir.
   Tablet (601–940): tablo sigiyor — yalniz baslik ve haplar. */
@media (max-width: 940px) {
  .kl-kart > h2 { display: none; }
  .kl-durum {
    display: flex; flex-wrap: nowrap; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(-1 * var(--sp-4)) var(--sp-3); padding: 0 var(--sp-4);
  }
  .kl-durum::-webkit-scrollbar { display: none; }
  .kl-hap {
    flex: none; display: inline-flex; align-items: center; gap: var(--sp-2);
    min-height: 40px; padding: 0 var(--sp-3) 0 var(--sp-2);
    border: 1px solid var(--line); border-radius: var(--r-full); background: var(--card);
    font: 500 var(--fs-sm)/1 var(--font-ui); color: var(--text); cursor: pointer;
  }
  .kl-hap[data-klst=""] { padding-left: var(--sp-3); }
  .kl-hap b { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
  .kl-hap.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
  .kl-hap .bant { width: 22px; height: 22px; }
  /* durum haplari varken acilir liste gereksiz — <select> DOM'da kalir */
  .kl-kart > .filters > .dd:has(#fst) { display: none; }
  .kl-kart th.th-sort { white-space: nowrap; }
  .kl-kart table.words th:nth-child(8) { min-width: 64px; }   /* "D / Y" iki satira kiriliyordu */
}
@media (max-width: 600px) {
  /* arama tam satir, iki dugme altta esit */
  /* duyarli.css'teki ortak "tek satir" kuralindan (0,3,0) daha ozgul */
  .kl-kart > .filters.suz-katli.suz-kapali, .kl-kart > .filters.suz-katli { flex-wrap: wrap; }
  .kl-kart > .filters > #fq { flex: 1 1 100%; }
  .kl-kart > .filters.suz-katli > .btn, .kl-kart > .filters.suz-katli.suz-kapali > .suz-ac { flex: 1 1 0; justify-content: center; }
  .kl-kart > .filters > .kl-sayac { display: none; }
  .kl-kart > .kl-400 { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); margin-bottom: var(--sp-3); }

  .kl-kart .tbl-wrap { overflow: visible; max-height: none; border: 0; background: none; }
  .kl-kart table.words, .kl-kart table.words thead, .kl-kart table.words tbody { display: block; width: 100%; }
  /* siralama: baslik satiri yatay hap seridi */
  .kl-kart table.words thead tr:first-child {
    display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(-1 * var(--sp-4)) var(--sp-2); padding: 0 var(--sp-4) var(--sp-1);
  }
  .kl-kart table.words thead tr:first-child::-webkit-scrollbar { display: none; }
  .kl-kart table.words thead tr:first-child > th { display: none; }
  .kl-kart table.words thead tr:first-child > th.th-sort:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(7)) {
    display: inline-flex; align-items: center; gap: var(--sp-1); flex: none; position: static;
    min-height: 40px; padding: 0 var(--sp-3); width: auto;
    border: 1px solid var(--line); border-radius: var(--r-full); background: var(--card);
    font-size: var(--fs-xs); letter-spacing: var(--ls-kas);
  }
  .kl-kart table.words thead tr:first-child > th.th-sort.on { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
  /* sutun suzgecleri: yalniz "Suzgecler" acikken, iki sutunlu izgara */
  .kl-kart table.words tr.th-filters { display: none; }
  .kl-kart:has(.filters.suz-katli:not(.suz-kapali)) table.words tr.th-filters {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-3);
  }
  .kl-kart table.words tr.th-filters > th {
    display: block; position: static; width: auto; padding: 0; border: 0; background: none;
  }
  .kl-kart table.words tr.th-filters > th:is(:nth-child(1), :nth-child(2), :nth-child(8), :nth-child(9)) { display: none; }
  .kl-kart table.words tr.th-filters .dd, .kl-kart table.words tr.th-filters .dd-btn { width: 100%; min-height: 40px; }
  /* uc liste "Hepsi" yaziyordu — hangisi ne, etiketsiz belli degildi */
  .kl-kart table.words tr.th-filters > th::before {
    display: block; margin: 0 0 var(--sp-1) var(--sp-1);
    font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-kas); text-transform: uppercase; color: var(--muted);
  }
  .kl-kart table.words tr.th-filters > th:nth-child(3)::before { content: 'Tür'; }
  .kl-kart table.words tr.th-filters > th:nth-child(4)::before { content: 'Düzensiz fiil'; }
  .kl-kart table.words tr.th-filters > th:nth-child(5)::before { content: 'Ortam'; }
  .kl-kart table.words tr.th-filters > th:nth-child(6)::before { content: 'Seviye'; }
  .kl-kart table.words tr.th-filters > th:nth-child(7)::before { content: 'Kutu'; }

  /* satir: kelime + Turkce solda, tur + kutu sagda */
  .kl-kart table.words tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-3); row-gap: 2px;
    padding: var(--sp-2) var(--sp-1); border-bottom: 1px solid var(--line-kart);
  }
  .kl-kart table.words tbody tr:nth-child(even) td { background: none; }
  .kl-kart table.words tbody td { display: none; padding: 0; border: 0; width: auto; }
  .kl-kart table.words tbody td:nth-child(1) { display: block; grid-column: 1; grid-row: 1; font-size: var(--fs-md); font-weight: 600; }
  .kl-kart table.words tbody td:nth-child(2) { display: block; grid-column: 1; grid-row: 2; color: var(--muted); font-size: var(--fs-sm); }
  .kl-kart table.words tbody td:nth-child(3) { display: flex; justify-content: flex-end; grid-column: 2; grid-row: 1; }
  .kl-kart table.words tbody td:nth-child(7) { display: flex; justify-content: flex-end; align-items: center; grid-column: 2; grid-row: 2; }
  .kl-kart table.words tbody td[colspan] { display: block; grid-column: 1 / -1; }
  .kl-kart table.words .box-dots i { width: 6px; height: 6px; }
}