/* ============================================================
   A1 / A2 kelime listesi sayfaları — tema tabloları, arama ve filtre
   ============================================================ */

/* Üstte kalan arama + tema şeridi */
/* Menü yapışkan (z-index 50, yüksekliği --nav-h'ye yazılıyor); arama şeridi
   onun altına yapışsın, üstüne binmesin. */
/* 10px yukarı çekip üst boşluğu o kadar büyütüyoruz: menü ile şerit arasından
   bir satırın sızdığı ince aralık böyle kapanıyor. */
.vk-arac{position:sticky;top:calc(var(--nav-h,104px) - 10px);z-index:30;background:#fff;
  border-bottom:2px solid var(--ink,#141633);padding:22px 0 10px;margin-bottom:8px}
.vk-arac .wrap{display:flex;flex-direction:column;gap:10px}
.vk-ara{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vk-ara input{flex:1;min-width:220px;font:inherit;font-size:1rem;
  background:#fff;border:2px solid var(--ink,#141633);border-radius:12px;
  padding:11px 14px;box-shadow:3px 3px 0 rgba(20,22,51,.16);color:var(--ink,#141633)}
.vk-ara input:focus{outline:none;box-shadow:3px 3px 0 var(--coral,#FF5A4E)}
.vk-sayac{font-size:.86rem;font-weight:700;color:#5A5D7C;white-space:nowrap}

.vk-temalar{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.vk-cip{flex:none;font:inherit;font-size:.85rem;font-weight:700;cursor:pointer;
  background:#fff;border:2px solid rgba(20,22,51,.16);border-radius:999px;
  padding:6px 13px;color:#3B3E5E;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.vk-cip:hover{border-color:var(--ink,#141633)}
.vk-cip[aria-pressed="true"]{background:var(--ink,#141633);border-color:var(--ink,#141633);color:#fff}

.vk-efsane{margin:0;font-size:.8rem;color:#9A9DB8}
.vk-efsane .vk-cok{margin:0 4px 0 0}

/* Tema bölümü */
.vk-tema{margin:0 0 34px}
.vk-tema-bas{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin:0 0 12px;padding-bottom:8px;border-bottom:2px solid rgba(20,22,51,.14)}

/* Tema başlıkları artık açılır-kapanır kutu (<details><summary>).
   Başlığın kendisi dokunma hedefi olduğu için telefonda en az 48px yüksek
   olmalı; yanındaki ok kutunun açık mı kapalı mı olduğunu gösteriyor. */
details.vk-tema>summary.vk-tema-bas{cursor:pointer;list-style:none;user-select:none;
  align-items:center;min-height:48px;padding:6px 4px 10px;border-radius:10px;
  transition:background .15s}
details.vk-tema>summary.vk-tema-bas::-webkit-details-marker{display:none}
details.vk-tema>summary.vk-tema-bas:hover{background:rgba(62,221,174,.10)}
details.vk-tema>summary.vk-tema-bas:focus-visible{outline:3px solid var(--cobalt,#2140F0);outline-offset:2px}
details.vk-tema>summary.vk-tema-bas::after{content:'';margin-left:auto;flex:none;
  width:11px;height:11px;border-right:2.5px solid #6C6F92;border-bottom:2.5px solid #6C6F92;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease}
details.vk-tema[open]>summary.vk-tema-bas::after{transform:rotate(-135deg) translate(-2px,-2px)}
/* Yazdırırken kapalı kutular da dökülsün — kâğıda eksik liste çıkmasın. */
@media print{details.vk-tema>:not(summary){display:block!important}
  details.vk-tema>summary.vk-tema-bas::after{display:none}}
.vk-tema-bas h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:1.35rem;letter-spacing:-.02em;margin:0;color:var(--ink,#141633)}
.vk-tema-bas small{font-size:.82rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:#9A9DB8}

/* Kelime tablosu */
.vk-tab{width:100%;border-collapse:collapse;font-size:.95rem}
.vk-tab th{text-align:left;font-size:.74rem;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:#9A9DB8;padding:0 10px 7px;border-bottom:2px solid rgba(20,22,51,.1)}
.vk-tab td{padding:9px 10px;border-bottom:1px solid rgba(20,22,51,.09);vertical-align:top;line-height:1.45}
.vk-tab tr:hover td{background:rgba(62,221,174,.10)}
/* Sütun biçimleri sıraya göre veriliyor: her satıra sınıf yazmak 1.700 satırlık
   listede sayfayı gereksiz yere yüz kilobayt büyütüyordu. */
.vk-tab td:nth-child(1){width:26%}
.vk-tab td:nth-child(1) b{font-weight:700;color:var(--ink,#141633)}
.vk-ipa{display:block;font-size:.8rem;color:#9A9DB8;margin-top:2px}
.vk-tab td:nth-child(2){width:24%;color:#3B3E5E}
.vk-tur{display:block;font-size:.74rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:#B4B7CC;margin-top:2px}
.vk-tab td:nth-child(3){color:#3B3E5E}
.vk-tab td:nth-child(3) i{font-style:italic}
.vk-tab td:nth-child(3) small{display:block;font-size:.85rem;color:#8A8DA8;margin-top:2px}

/* Çok kullanılan kelime işareti */
.vk-cok{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--coral,#FF5A4E);margin-left:6px;vertical-align:middle}

.vk-gizli{display:none}
.vk-bos{display:none;padding:24px 0;font-weight:700;color:#5A5D7C}
.vk-bos.vk-goster{display:block}

/* Küçük bilgi kutusu (nasıl çalışılır) */
.vk-not{font-size:.92rem;color:#5A5D7C;line-height:1.7;margin:0 0 22px}
.vk-not b{color:var(--ink,#141633)}

@media(max-width:760px){
  .vk-tab,.vk-tab tbody,.vk-tab tr,.vk-tab td{display:block;width:auto}
  /* Sütun genişlikleri masaüstü için verilmişti; telefonda satırlar alt alta
     geldiği için genişliği kaldırmazsak kelimeler harf harf kırılıyor. */
  .vk-tab td:nth-child(1),.vk-tab td:nth-child(2),.vk-tab td:nth-child(3){width:auto}
  .vk-tab thead{display:none}
  .vk-tab tr{border-bottom:1px solid rgba(20,22,51,.12);padding:10px 0}
  .vk-tab td{border:0;padding:1px 0}
  .vk-tab tr:hover td{background:none}
  .vk-tab td:nth-child(1) b{font-size:1.05rem}
  .vk-tab td:nth-child(2){font-weight:700;color:var(--ink,#141633)}
  .vk-tab td:nth-child(3){font-size:.9rem;margin-top:4px}
  .vk-arac{padding:10px 0 8px}
}