/* ==================================================================
   Kelimelik — WordPress arayüzü
   Bütün kurallar .klm-app altında; tema stilleriyle çakışmasın diye
   yazı tipi, renk ve kutu modeli burada yeniden kuruluyor.
   ================================================================== */

.klm-app {
  --klm-ink:    #14202e;
  --klm-paper:  #fbfaf7;
  --klm-card:   #ffffff;
  --klm-slate:  #5b6b7c;
  --klm-pale:   #8b9aa8;
  --klm-rule:   #e3e7ea;
  --klm-marker: #ffd23f;
  --klm-wash:   #fff4c4;
  --klm-green:  #2f7d5d;
  --klm-gwash:  #e4f2ea;
  --klm-red:    #b3453a;
  --klm-rwash:  #f8e8e6;

  --klm-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --klm-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  font-family: var(--klm-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--klm-ink) !important;
  background: var(--klm-paper);
  border-radius: 10px;
  overflow-x: hidden; /* Sola sağa kaymayı önler */
  max-width: 100%;
}

/* Tam ekran modu aktif edildiğinde eklenecek tasarım */
.klm-app.is-fullscreen {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important; /* telefonda araç çubukları hesaba katılsın, alt kısım menünün altında kalmasın */
  box-sizing: border-box; /* alt menü boşluğu (padding) yüksekliğe dahil olsun, ekran dışına taşmasın */
  max-width: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  z-index: 999999;
  
  /* Kaydırma kilidi SADECE tam ekranda devreye girmeli */
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.klm-app *,
.klm-app *::before,
.klm-app *::after { box-sizing: border-box; }

/* Sıfırlama kuralları :where() ile sıfır özgüllükte tutuluyor: tema
   stillerini eziyorlar ama aşağıdaki bileşen sınıflarını ezmiyorlar. */

:where(.klm-app) :where(p, h1, h2, h3) { margin: 0; }

:where(.klm-app) :where(button) {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  margin: 0;
  text-align: inherit;
  text-transform: none;
  box-shadow: none;
  letter-spacing: normal;
}

:where(.klm-app) :where(input, select) {
  font: inherit;
  color: inherit;
  margin: 0;
  box-shadow: none;
}

/* Bazı temalar input/select metnini arka planla aynı renge boyuyor
   (görünmez metin sorunu) — burada gerçek özgüllükle sabitliyoruz. */
.klm-app input,
.klm-app select {
  color: var(--klm-ink) !important;
  background: var(--klm-card) !important;
}

:where(.klm-app) :where(a) { color: var(--klm-ink) !important; text-decoration: none; }

:where(.klm-app) :where(article, section, div, span) { float: none; }

/* Bazı temalar div/p/span/li/a gibi genel etiketleri !important ile
   boyuyor; iç içe kutularımız (klm-head, klm-card, vb.) kendi rengini
   tanımlamadığı için o zaman mirası kaybediyor. Burada .klm-app
   içindeki HER elemana açık bir varsayılan renk veriyoruz — aynı
   özgüllükteki (tek sınıf) daha özel renk kuralları dosyada bundan
   sonra geldiği için eşitlik durumunda onlar kazanır. */
.klm-app * {
  color: var(--klm-ink) !important;
}

.klm-app :focus-visible { outline: 2px solid var(--klm-ink); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .klm-app * { transition: none !important; animation: none !important; }
}

.klm-gate {
  --klm-ink: #14202e;
  --klm-rule: #e3e7ea;
  --klm-marker: #ffd23f;
}

.klm-boot, .klm-gate {
  padding: 46px 24px;
  text-align: center;
  color: #5b6b7c !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------- sekme çubuğu ---------- */

.klm-tabs {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--klm-ink);
  padding: 8px 10px;
}

.klm-tabs-scroll {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}

.klm-tabs-scroll::-webkit-scrollbar { display: none; }

.klm-tabs-scroll::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 22px;
  background: linear-gradient(to right, transparent, var(--klm-ink));
  pointer-events: none;
}

.klm-burger { display: none; }
.klm-sidebar-overlay { display: none; }

.klm-tabs-status {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.klm-brand {
  flex-shrink: 0;
  font-family: var(--klm-serif);
  font-size: 19px;
  color: #fff !important;
  padding: 0 14px 0 6px;
  white-space: nowrap;
  background-image: linear-gradient(var(--klm-marker), var(--klm-marker));
  background-size: calc(100% - 20px) 7px;
  background-position: 6px calc(100% - 3px);
  background-repeat: no-repeat;
}

.klm-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 6px;
  color: #aebbc7 !important;
  background: none !important;
  white-space: nowrap;
  transition: background 120ms, color 120ms;
}

.klm-tab:hover { background: rgba(255,255,255,.07) !important; color: #eef3f7 !important; }
.klm-tab.is-on { background: rgba(255,255,255,.12) !important; color: #fff !important; }

/* Alıştırmalar açılır menüsü — 6 ayrı sekme yerine tek, mobil dostu buton */

.klm-tab-dd { position: relative; display: inline-flex; }

.klm-tab-dd-btn { display: flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 6px; color: #aebbc7 !important; background: none !important; white-space: nowrap; transition: background 120ms, color 120ms; }
.klm-tab-dd-btn:hover { background: rgba(255,255,255,.07) !important; color: #eef3f7 !important; }
.klm-tab-dd-btn.is-on { background: rgba(255,255,255,.12) !important; color: #fff !important; }
#klm-practice-label, #klm-guest-dd-label { color: inherit !important; }

.klm-tab-dd-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 160px;
  background: #ffffff !important;
  border: 1px solid #e3e7ea;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(20, 32, 46, 0.08);
  padding: 4px;
  z-index: 99999;
}
.klm-tab-dd-menu.is-open { display: block; }

.klm-tab-dd-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13.5px;
  color: #14202e !important;
  background: #ffffff !important;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease;
}
.klm-tab-dd-item:hover {
  background: #f4f6f8 !important;
}
.klm-tab-dd-item.is-on {
  background: #fff4c4 !important;
  color: #14202e !important;
  font-weight: 600;
}

@media (max-width: 640px) {
  .klm-tab-dd-menu {
    position: fixed;
    top: 92px;
    left: 12px;
    right: 12px;
    min-width: 0;
  }
}

.klm-badge {
  font-size: 12px;
  color: var(--klm-pale) !important;
  font-variant-numeric: tabular-nums;
}

.klm-badge[data-hot="1"] {
  background: var(--klm-marker);
  color: var(--klm-ink) !important;
  border-radius: 20px;
  padding: 1px 7px;
  font-weight: 600;
}

/* Eskiden bu öğe, hiçbir stilin (mobil medya sorgusu dahil, çünkü
   !important yoktu) geçemediği bir satır-içi display:none ile kalıcı
   olarak gizli kalıyordu — "🌐 Sözlük" (tüm listelerle çalış) düğmesi
   hiçbir cihazda tıklanamıyordu. Artık normal bir görünür öğe. */
.klm-scope-dd { position: relative; display: inline-flex; }

.klm-scope-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 6px;
  color: #aebbc7 !important; background: none !important;
  border: 0; white-space: nowrap; font-size: 16px;
  font-family: inherit; transition: background 120ms, color 120ms;
}
.klm-scope-btn:hover { background: rgba(255,255,255,.07) !important; color: #eef3f7 !important; }
.klm-scope-btn.is-on { background: rgba(255,255,255,.12) !important; color: #fff !important; }
.klm-scope-btn .klm-badge { font-size: 12px; color: var(--klm-pale) !important; font-variant-numeric: tabular-nums; }

.klm-scope-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  max-width: 280px;
  max-height: 320px;
  overflow-y: auto;
  background: #ffffff !important; /* Tema rengini ezip bembeyaz yapar */
  border: 1px solid #e3e7ea;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(20, 32, 46, 0.08); /* Soldaki menüyle aynı gölge */
  padding: 4px;
  z-index: 99999;
}
.klm-scope-dd.is-open .klm-scope-menu { display: block; }
/* Masaüstünde .klm-tabs-scroll'un kırpmasından kaçmak için menü root'a
   taşınıyor (bkz. app.js) ve artık .klm-scope-dd'nin içinde değil; o yüzden
   görünürlüğü kendi .is-open sınıfından da gelebilmeli (Alıştırmalar
   menüsüyle aynı desen). */
.klm-scope-menu.is-open { display: block; }

.klm-scope-wrap { margin: 0; }

/* Kategori Başlığı Tasarımı */
.klm-scope-group-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--klm-pale) !important; /* Gri renk */
  background: transparent !important; /* Tema buton rengini ezer */
  border: none;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background 120ms;
}
.klm-scope-group-btn:hover { background: #f9fafa !important; }

/* Listelerin Konteyneri */
.klm-scope-items {
  display: none;
  padding: 4px 0;
  background: transparent !important;
}

/* Liste İsimleri Tasarımı */
.klm-scope-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px 8px 24px; /* Kategori altında olduğunu belli etmek için girinti */
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--klm-ink) !important;
  background: transparent !important; /* Tema buton rengini ezer */
  border: 0;
  cursor: pointer;
  transition: background 120ms ease;
}
.klm-scope-item:hover { background: #f4f6f8 !important; }
.klm-scope-item.is-on {
  background: var(--klm-wash) !important;
  color: var(--klm-ink) !important;
  font-weight: 600;
}

/* En Üstteki "Tüm Kelimelerle Çalış" Butonu */
.klm-scope-item--all {
  padding-left: 12px;
  font-weight: 600;
  border-bottom: 1px solid #f0f0f0;
  border-radius: 4px 4px 0 0;
  margin-bottom: 4px;
}

@media (max-width: 640px) {
  .klm-scope-btn { max-width: 150px; }
  .klm-scope-menu {
    max-width: 85vw;
    max-height: 280px;
  }
}

/* Tam ekran butonunun tasarımı. NOT: bu blok bilerek .klm-app * renk
   sıfırlamasından SONRA duruyor — aynı özgüllükte (tek sınıf) olduğu için
   dosyada önce gelen bir kural sıfırlamaya kaybeder. */
.klm-fs-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 6px;
  color: #c0cdd9 !important;
  font-size: 15px;
  padding: 6px 10px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.klm-fs-btn:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}

/* Mobilde kredi + sepet, "⋯" arkasına gizlenir (aşağıdaki medya sorgusuna
   bakınız); masaüstünde bu, düz görünmez bir sarmalayıcıdan ibarettir. */
.klm-status-toggle {
  display: none;
  background: none;
  border: none;
  color: #aebbc7 !important;
  font-size: 20px;
  line-height: 1;
  padding: 6px 6px;
  cursor: pointer;
}
.klm-status-extra { display: flex; align-items: center; gap: 2px; }

.klm-credits {
  font-size: 12.5px;
  color: #aebbc7 !important;
  white-space: nowrap;
  padding: 0 6px;
  font-variant-numeric: tabular-nums;
}
.klm-credits[data-low="2"] { color: var(--klm-marker) !important; }
.klm-credits[data-low="1"] { color: #e08a8a !important; }

.klm-streak {
  font-size: 12.5px;
  color: #aebbc7 !important;
  white-space: nowrap;
  padding: 0 4px;
}
.klm-streak[data-on="1"] { color: var(--klm-marker) !important; }

.klm-drill--wide { max-width: 760px; }

.klm-match {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
}

.klm-match-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.klm-match-card {
  padding: 14px 16px;
  border: 1px solid var(--klm-rule);
  background: var(--klm-card) !important;
  color: var(--klm-ink) !important;
  border-radius: 6px;
  text-align: left;
  transition: border-color 120ms, background 120ms;
}
.klm-match-card:hover:not(:disabled) { border-color: var(--klm-ink); }
.klm-match-card:disabled { cursor: default; }
.klm-match-card[data-state="sel"] { border-color: var(--klm-ink); background: var(--klm-wash) !important; }
.klm-match-card[data-state="ok"] { background: var(--klm-gwash) !important; border-color: var(--klm-green); opacity: .7; }
.klm-match-card[data-state="no"] { background: var(--klm-rwash) !important; border-color: var(--klm-red); }

@media (max-width: 640px) {
  .klm-match { gap: 0 8px; }
  .klm-match-card { padding: 11px 10px; font-size: 14px; }
}

.klm-gear {
  color: #7e8d9b !important;
  padding: 8px 10px;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
.klm-gear:hover { color: #fff !important; }

/* ---------- görünümler ---------- */

.klm-view { display: none; }
.klm-view.is-on { display: block; }

.klm-head {
  padding: 22px 26px 16px;
  border-bottom: 1px solid var(--klm-rule);
}

.klm-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.klm-head h2 {
  font-family: var(--klm-serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.015em;
}

.klm-addbar { display: flex; gap: 7px; }

.klm-addbar input {
  width: 190px;
  max-width: 45vw;
  padding: 9px 12px;
  border: 1px solid var(--klm-rule);
  border-radius: 6px;
  background: var(--klm-card);
}

.klm-addctx { margin-top: 10px; }

.klm-ctx-box {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 9px 12px;
  border: 1px solid var(--klm-rule);
  border-radius: 6px;
  background: var(--klm-card) !important;
  color: var(--klm-ink) !important;
  font-family: var(--klm-sans);
  font-size: 14px;
  resize: vertical;
}

.klm-list-select {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 9px 12px;
  border: 1px solid var(--klm-rule);
  border-radius: 6px;
  background: var(--klm-card) !important;
  color: var(--klm-ink) !important;
  font-family: var(--klm-sans);
  font-size: 14px;
}

/* ---------- listeler ---------- */

.klm-list-card .klm-word { font-size: 19px !important; }

.klm-list-group { margin-bottom: 6px; }

.klm-list-group-title {
  font-family: var(--klm-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--klm-slate) !important;
  padding: 18px 26px 4px;
  margin: 0 !important;
  border-top: 1px solid var(--klm-rule);
}

.klm-list-group:first-child .klm-list-group-title { border-top: none; padding-top: 4px; }

.klm-list-detail-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 26px 6px;
}

.klm-list-detail-head h3 {
  font-family: var(--klm-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--klm-ink) !important;
}

@media (max-width: 640px) {
  .klm-list-group-title { padding: 16px 16px 4px; }
  .klm-list-detail-head { padding: 16px 16px 4px; flex-wrap: wrap; }
}

.klm-filters {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 14px;
  flex-wrap: wrap;
}

.klm-search {
  flex: 1 1 auto;
  width: 100%;
  min-width: 120px;
  max-width: 260px;
  height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--klm-rule);
  border-radius: 6px;
  background: var(--klm-card);
}

.klm-chips { display: flex; gap: 4px; flex-wrap: wrap; }

.klm-chip {
  padding: 6px 11px;
  border-radius: 20px;
  color: var(--klm-slate) !important;
  background: none !important;
  font-size: 14px;
}
.klm-chip:hover { background: #eef0ed !important; }
.klm-chip.is-on { background: var(--klm-ink) !important; color: #fff !important; }

/* ---------- butonlar ---------- */

.klm-btn {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 6px;
  background: var(--klm-ink) !important;
  color: #fff !important;
  text-decoration: none;
  transition: opacity 120ms;
}
.klm-btn:hover { opacity: .86; color: #fff !important; }
.klm-btn:disabled { opacity: .4; cursor: default; }

.klm-btn--marker { background: var(--klm-marker) !important; color: var(--klm-ink) !important; font-weight: 550; }
.klm-btn--marker:hover { color: var(--klm-ink) !important; }

.klm-btn--ghost {
  background: none !important;
  color: var(--klm-ink) !important;
  border: 1px solid var(--klm-rule);
}
.klm-btn--ghost:hover { background: #f0f1ee !important; opacity: 1; }

/* ---------- sözlük ---------- */

.klm-entries { padding: 4px 26px 40px; }

.klm-entry {
  padding: 20px 22px;
  margin-bottom: 16px;
  background: var(--klm-card) !important;
  border: 1px solid var(--klm-rule);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(20, 32, 46, 0.03);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 22px;
  transition: border-color 150ms, box-shadow 150ms;
}
.klm-entry:hover { border-color: #d1d8df; box-shadow: 0 6px 16px rgba(20, 32, 46, 0.06); }

.klm-entry-main { min-width: 0; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; }

.klm-entry-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}

.klm-word {
  font-family: var(--klm-serif);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--klm-ink) !important;
}

.klm-ipa { color: var(--klm-slate) !important; font-size: 14px; }
.klm-pos { font-family: var(--klm-serif); font-style: italic; color: var(--klm-slate) !important; }

.klm-star { 
  color: var(--klm-pale) !important; 
  font-size: 18px; 
  padding: 0 4px; 
  background: transparent !important; /* Tema rengini ezer */
  box-shadow: none !important;
  transition: transform 150ms ease, color 150ms ease;
}
.klm-star[data-on="1"] { color: #e0a800 !important; }
.klm-star:hover { transform: scale(1.2); }
.klm-star:active { transform: scale(0.9); }

.klm-meaning { margin-top: 6px !important; font-size: 16px; max-width: 100%; color: var(--klm-ink) !important; line-height: 1.5; }
.klm-meaning-en { margin-top: 2px !important; color: var(--klm-slate) !important; font-size: 14px; max-width: 100%; }

.klm-ex {
  margin-top: 12px;
  padding-left: 14px;
  border-left: 3px solid var(--klm-wash);
  max-width: 100%;
}
.klm-ex .en { font-family: var(--klm-serif); font-size: 16px; color: var(--klm-ink) !important; }
.klm-ex .tr { color: var(--klm-slate) !important; font-size: 14px; margin-top: 2px; }

.klm-nuance { margin-top: 10px !important; font-size: 13.5px; color: var(--klm-slate) !important; max-width: 100%; }

.klm-tags { margin-top: 10px; display: flex; gap: 5px; flex-wrap: wrap; }
.klm-tag { font-size: 12.5px; color: var(--klm-slate) !important; background: #f1f2ef; border-radius: 3px; padding: 2px 7px; }
.klm-tag--list { background: var(--klm-wash); color: #7a5c00 !important; font-weight: 550; }

.klm-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font-size: 12.5px;
  color: var(--klm-pale) !important;
  text-align: right;
  white-space: nowrap;
}

.klm-state { font-size: 12px; padding: 2px 8px; border-radius: 20px; background: #f1f2ef; color: var(--klm-slate) !important; }
.klm-state[data-s="new"] { background: var(--klm-wash); color: #7a5c00 !important; }
.klm-state[data-s="due"] { background: var(--klm-marker); color: var(--klm-ink) !important; font-weight: 550; }

.klm-acts { display: flex; gap: 7px; }

.klm-link {
  color: var(--klm-slate) !important;
  font-size: 12.5px;
  padding: 0;
  border-bottom: 1px solid var(--klm-rule);
  border-radius: 0;
  background: transparent !important; /* Tema rengini ezer */
  box-shadow: none !important;
  transition: color 150ms, border-color 150ms;
}
.klm-link:hover { 
  color: var(--klm-ink) !important; 
  border-color: var(--klm-ink) !important; 
  background: transparent !important; 
}
.klm-link--danger:hover { color: var(--klm-red) !important; border-color: var(--klm-red) !important; }

.klm-pending { margin-top: 6px !important; font-size: 14px; color: var(--klm-slate) !important; font-style: italic; }
.klm-pending--err { color: var(--klm-red) !important; font-style: normal; }

/* ---------- boş durum ---------- */

.klm-empty { padding: 64px 26px; max-width: 44ch; margin: 0 auto; text-align: center; }
.klm-empty h3 { font-family: var(--klm-serif); font-size: 23px; font-weight: 600; margin-bottom: 9px !important; }
.klm-empty p { color: var(--klm-slate) !important; margin-bottom: 18px !important; }

/* ---------- alıştırmalar ---------- */

.klm-drill { max-width: 620px; margin: 0 auto; padding: 30px 24px 56px; }

.klm-drill-top {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--klm-slate) !important;
  margin-bottom: 10px;
}

.klm-progress { height: 3px; background: var(--klm-rule); border-radius: 2px; overflow: hidden; margin-bottom: 28px; }
.klm-progress span { display: block; height: 100%; background: var(--klm-marker); transition: width 240ms ease; }

.klm-card {
  background: var(--klm-card);
  border: 1px solid var(--klm-rule);
  border-radius: 10px;
  padding: 34px 26px;
  text-align: center;
}

.klm-prompt {
  font-family: var(--klm-serif);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
  word-break: break-word;
  color: var(--klm-ink) !important;
}

.klm-sub { color: var(--klm-slate) !important; margin-top: 7px !important; }
.klm-hint { margin-top: 22px !important; color: var(--klm-pale) !important; font-size: 13.5px; }
.klm-rule { height: 1px; background: var(--klm-rule); margin: 24px 0 20px; }

.klm-answer { text-align: left; }
.klm-answer .m { font-family: var(--klm-serif); font-size: 19px; color: var(--klm-ink) !important; }
.klm-answer .me { color: var(--klm-slate) !important; font-size: 14.5px; margin-top: 3px !important; }
.klm-answer .klm-ex { margin-top: 16px; }

.klm-grades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 20px; }

.klm-grade {
  border: 1px solid var(--klm-rule);
  background: var(--klm-card) !important;
  color: var(--klm-ink) !important;
  border-radius: 6px;
  padding: 11px 4px 9px;
  text-align: center;
  transition: border-color 120ms, background 120ms;
}
.klm-grade:hover { border-color: var(--klm-ink) !important; }
.klm-grade b { display: block; font-weight: 550; font-size: 14px; color: var(--klm-ink) !important; }
.klm-grade small { color: var(--klm-pale) !important; font-size: 11.5px; }
.klm-grade[data-q="0"]:hover { background: var(--klm-rwash); border-color: var(--klm-red) !important; }
.klm-grade[data-q="5"]:hover { background: var(--klm-gwash); border-color: var(--klm-green) !important; }

.klm-reveal { width: 100%; margin-top: 20px; padding: 14px; }

.klm-choices { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }

.klm-choice {
  text-align: left;
  padding: 14px 16px;
  border: 1px solid var(--klm-rule);
  background: var(--klm-card) !important;
  color: var(--klm-ink) !important;
  border-radius: 6px;
  transition: border-color 120ms, background 120ms;
}
.klm-choice:hover:not(:disabled) { border-color: var(--klm-ink) !important; }
.klm-choice:disabled { cursor: default; }
.klm-choice[data-r="ok"] { background: var(--klm-gwash) !important; border-color: var(--klm-green) !important; }
.klm-choice[data-r="no"] { background: var(--klm-rwash) !important; border-color: var(--klm-red) !important; }
.klm-choice[data-r="dim"] { opacity: .45; }

.klm-verdict {
  margin-top: 20px;
  padding: 16px 18px;
  border: 1px solid var(--klm-rule);
  border-radius: 6px;
  background: var(--klm-card);
}
.klm-verdict h3 { font-size: 15px; font-weight: 600; margin-bottom: 6px !important; }
.klm-verdict h3[data-r="ok"] { color: var(--klm-green) !important; }
.klm-verdict h3[data-r="no"] { color: var(--klm-red) !important; }

/* ---------- boşluk doldurma ---------- */

.klm-cloze { font-family: var(--klm-serif); font-size: 23px; line-height: 1.55; text-align: left; color: var(--klm-ink) !important; }

.klm-blank {
  display: inline-block;
  min-width: 4.5em;
  border-bottom: 3px solid var(--klm-marker);
  margin: 0 4px -2px;
}

.klm-cloze-tr { margin-top: 12px !important; font-family: var(--klm-sans); font-size: 14px; color: var(--klm-slate) !important; text-align: left; }

.klm-cloze-in { display: flex; gap: 8px; margin-top: 22px; }

.klm-cloze-in input {
  flex: 1;
  min-width: 0;
  padding: 13px 15px;
  border: 1px solid var(--klm-rule);
  border-radius: 6px;
  background: var(--klm-card);
  font-family: var(--klm-serif);
  font-size: 19px;
}

/* ---------- yüzen hızlı ekle ---------- */

.klm-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--klm-marker) !important;
  color: var(--klm-ink) !important;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(20, 32, 46, .3);
  z-index: 500;
  transition: transform 120ms, box-shadow 120ms;
}
.klm-fab:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(20, 32, 46, .35); }
.klm-fab:active { transform: scale(.96); }

.klm-fab-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 32, 46, .45);
  z-index: 600;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
.klm-fab-overlay.is-on { display: flex; }

.klm-fab-sheet {
  background: var(--klm-card) !important;
  width: 100%;
  max-width: 480px;
  border-radius: 16px 16px 0 0;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 28px rgba(0, 0, 0, .22);
}

@media (min-width: 641px) {
  .klm-fab-overlay { align-items: center; padding: 20px; }
  .klm-fab-sheet { border-radius: 14px; }
}

.klm-fab-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.klm-fab-head h3 {
  font-family: var(--klm-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--klm-ink) !important;
}
.klm-fab-close {
  font-size: 18px;
  color: var(--klm-slate) !important;
  padding: 6px 10px;
  min-width: 40px;
  min-height: 40px;
}

.klm-fab-sheet input[type="text"] {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--klm-rule);
  border-radius: 8px;
  background: var(--klm-paper) !important;
  color: var(--klm-ink) !important;
  font-size: 16px;
  margin-bottom: 10px;
}

.klm-fab-sheet .klm-ctx-box { margin-top: 4px; margin-bottom: 4px; font-size: 16px; }
.klm-fab-sheet .klm-list-select { font-size: 16px; margin-top: 4px; margin-bottom: 4px; }

.klm-fab-actions { display: flex; gap: 10px; margin-top: 16px; }
.klm-fab-actions .klm-btn { flex: 1; padding: 13px; text-align: center; }

@media (max-width: 640px) {
  .klm-fab { right: 16px; bottom: 16px; width: 52px; height: 52px; font-size: 26px; }
}

/* ---------- bildirim ---------- */

.klm-toast {
  position: fixed;
  left: 50%;
  top: 84px; /* Ekranın altından alıp üst kısmına taşıdık */
  bottom: auto;
  transform: translate(-50%, -16px);
  background: var(--klm-ink, #14202e);
  color: #fff !important;
  padding: 11px 18px;
  border-radius: 40px;
  font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms, transform 160ms;
  z-index: 100000;
  max-width: 90vw;
}
.klm-toast.is-up { opacity: 1; transform: translate(-50%, 0); }

/* ---------- telefon ---------- */

@media (max-width: 640px) {
  .klm-app { border-radius: 0; font-size: 16px; }

  .klm-tabs { padding: 12px 16px; justify-content: space-between; }
  .klm-brand { order: 2; margin: 0 auto; padding: 0; }
  .klm-tabs-status { order: 3; position: relative; }

  /* Kredi ve 🧺 sepeti dar ekranda çubuğu taşırıp sağa kaybolduğu için
     "⋯" arkasında açılır bir kutuya alınıyor. */
  .klm-status-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .klm-status-extra {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: var(--klm-ink);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: 10px;
    min-width: 150px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    z-index: 100005;
  }
  .klm-status-extra.is-open { display: flex; }
  .klm-status-extra .klm-credits { padding: 4px 2px; }
  .klm-status-extra .klm-pool-btn { display: flex; align-items: center; gap: 4px; padding: 4px 2px; }
  
  .klm-burger {
    display: block; order: 1; background: none; border: none; color: #fff !important; 
    font-size: 22px; padding: 4px; cursor: pointer; line-height: 1;
  }
  
  .klm-sidebar-overlay {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.6);
    z-index: 100000; opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
  }
  .klm-sidebar-overlay.is-open { opacity: 1; pointer-events: auto; }
  
  .klm-tabs-scroll {
    position: fixed; top: 0; left: 0; width: 280px; height: 100vh;
    background: var(--klm-ink); z-index: 100001; flex-direction: column; 
    align-items: stretch; padding: 24px 16px; gap: 8px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 4px 0 24px rgba(0,0,0,0.3);
    overflow-y: auto; overflow-x: hidden;
    transform: translateX(-100%); /* Başlangıçta ekranın solunda saklı */
  }
  .klm-tabs-scroll.is-open { transform: translateX(0); /* Çekmece açılır */ }
  .klm-tabs-scroll::after { display: none; }
  
  .klm-tab { justify-content: flex-start; padding: 14px 16px; font-size: 16px; width: 100%; }
  .klm-scope-dd, .klm-tab-dd { width: 100%; display: flex; flex-direction: column; }
  .klm-scope-btn, .klm-tab-dd-btn { width: 100%; justify-content: space-between; padding: 14px 16px; }
  
  /* Mobilde menü dropdown'larını dışarı değil, aşağıya doğru (akordeon) açtırıyoruz */
  .klm-scope-menu, .klm-tab-dd-menu {
    position: static; width: 100%; max-width: none; box-shadow: none; border: none; 
    background: rgba(0,0,0,0.2) !important; margin-top: 4px; border-radius: 8px;
  }
  .klm-scope-item, .klm-tab-dd-item { color: #eef3f7 !important; background: transparent !important; }
  .klm-scope-item:hover, .klm-tab-dd-item:hover { background: rgba(255,255,255,0.05) !important; }
  .klm-scope-item.is-on, .klm-tab-dd-item.is-on { background: rgba(255,255,255,0.15) !important; color: #fff !important; }
  
  .klm-scope-group-btn { color: #aebbc7 !important; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .klm-scope-group-btn:hover { background: transparent !important; }
  .klm-scope-item--all { border-bottom: 1px solid rgba(255,255,255,0.1); }

  .klm-head { padding: 18px 16px 14px; }
  .klm-head h2 { font-size: 22px; }
  .klm-entries { padding: 4px 16px 90px; }
  .klm-drill { padding: 22px 16px 90px; }
  .klm-card { padding: 26px 18px; }
  .klm-prompt { font-size: 30px; }
  .klm-cloze { font-size: 20px; }

  .klm-entry { grid-template-columns: minmax(0, 1fr); padding: 16px 14px; gap: 10px; }
  .klm-side { align-items: flex-start; text-align: left; flex-direction: row; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
  .klm-entry-main { min-width: 0; width: 100%; word-break: break-word; overflow: hidden; }

  /* dokunma hedeflerini buyut: parmakla tiklamak metin okumaktan zor */
  .klm-tab { padding: 10px 14px; }
  .klm-link { font-size: 14px; padding: 6px 2px; }
  .klm-acts { gap: 14px; row-gap: 8px; }
  .klm-star { font-size: 20px; padding: 6px; }
  .klm-chip { padding: 8px 13px; }
  .klm-grade { padding: 14px 6px 12px; }
  .klm-choice { padding: 16px; }
  .klm-match-card { min-height: 44px; display: flex; align-items: center; }

  .klm-grades { grid-template-columns: repeat(2, 1fr); }
  .klm-addbar { width: 100%; flex-wrap: wrap; }
  .klm-addbar input { flex: 1 1 100%; max-width: none; width: auto; order: 1; }
  .klm-addbar #klm-paste-go { order: 2; flex: 1; }
  .klm-addbar #klm-manual-go { order: 3; flex: 1; }
  .klm-search { max-width: none; }
  .klm-cloze-in { flex-direction: column; }
  .klm-match { grid-template-columns: 1fr; gap: 16px 0; }
}

/* yönetim ekranında gövde genişliği */
.klm-wrap .klm-app { margin-top: 18px; border: 1px solid var(--klm-rule); }
/* --- Modern Modal --- */
.klm-modal-overlay {
  display: none; 
  position: fixed; inset: 0; background: rgba(20, 32, 46, 0.65);
  z-index: 1000000; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; transition: opacity 150ms;
}
.klm-modal-overlay.is-open { display: flex; opacity: 1; }
.klm-modal-box {
  background: var(--klm-card) !important; width: 100%; max-width: 380px;
  border-radius: 12px; padding: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  transform: scale(0.95); transition: transform 150ms;
}
.klm-modal-overlay.is-open .klm-modal-box { transform: scale(1); }
.klm-modal-box h3 { margin-bottom: 16px !important; font-family: var(--klm-serif); font-size: 20px; color: var(--klm-ink) !important; }
.klm-modal-acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* Kompakt Liste Görünümü (Sözlük) - Genişletilmiş Kart Hariç Tutuldu */
.klm-entries.is-compact .klm-entry:not(.is-expanded) .klm-meaning,
.klm-entries.is-compact .klm-entry:not(.is-expanded) .klm-meaning-en,
.klm-entries.is-compact .klm-entry:not(.is-expanded) .klm-ex,
.klm-entries.is-compact .klm-entry:not(.is-expanded) .klm-nuance,
.klm-entries.is-compact .klm-entry:not(.is-expanded) .klm-tags,
.klm-entries.is-compact .klm-entry:not(.is-expanded) .klm-manual-ex-box,
.klm-entries.is-compact .klm-entry:not(.is-expanded) [data-act="write-ex"],
.klm-entries.is-compact .klm-entry:not(.is-expanded) [data-act="more-ex"] {
  display: none !important;
}

.klm-entries.is-compact .klm-entry:not(.is-expanded) {
  padding: 14px 16px;
  gap: 8px 16px;
  cursor: pointer;
  border-radius: 10px;
  transition: background 150ms, border-color 150ms;
  margin-bottom: 12px;
}

.klm-entries.is-compact .klm-entry:not(.is-expanded):hover {
  background: #f8f9fa !important;
  border-color: #c9d2db;
}

.klm-entries.is-compact .klm-entry:not(.is-expanded) .klm-entry-head {
  margin-bottom: 0;
}

.klm-entries.is-compact .klm-entry:not(.is-expanded) .klm-side {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0;
}

/* Tıklanıp Açılmış (Genişletilmiş) Kartın Vurgulanması */
.klm-entries.is-compact .klm-entry.is-expanded {
  background: var(--klm-card);
  border-radius: 10px;
  padding: 20px;
  margin: 12px -20px;
  box-shadow: 0 4px 14px rgba(20, 32, 46, 0.08);
  border: 1px solid var(--klm-marker);
}

@media (max-width: 640px) {
  .klm-entries.is-compact .klm-entry.is-expanded {
    margin: 12px -10px;
    padding: 16px;
  }
}

/* Listelerim Sayfası - Tıklanabilir Liste Başlığı */
.klm-list-title-btn {
  font-size: 19px; 
  text-align: left; 
  cursor: pointer; 
  background: none; 
  border: none; 
  padding: 0; 
  color: var(--klm-ink) !important; 
  transition: color 150ms ease;
  font-family: var(--klm-serif);
  font-weight: 600;
  letter-spacing: -.01em;
}
.klm-list-title-btn:hover {
  color: var(--klm-marker) !important; /* Üzerine gelince sarı/turuncu olur */
}

/* ==================================================================
   Listelerim Sayfası - Yeni Tasarım (Çipler ve Akordeon)
   ================================================================== */
.klm-cat-chips {
  display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 4px 0; margin-top: 4px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.klm-cat-chips::-webkit-scrollbar { display: none; }
.klm-cat-chip {
  white-space: nowrap; padding: 7px 14px; border-radius: 20px; font-size: 14px; font-weight: 500;
  background: var(--klm-card) !important; border: 1px solid var(--klm-rule); color: var(--klm-slate) !important;
  cursor: pointer; transition: all 0.2s ease;
}
.klm-cat-chip:hover { background: #f0f1ee !important; color: var(--klm-ink) !important; }
.klm-cat-chip.is-on { background: var(--klm-ink) !important; color: #fff !important; border-color: var(--klm-ink); }

.klm-list-group-title.is-accordion {
  cursor: pointer; user-select: none; transition: background 0.2s; border-radius: 6px; padding: 12px 14px; margin: 0 -14px !important;
}
.klm-list-group-title.is-accordion:hover { background: rgba(20, 32, 46, 0.04); }
.klm-accordion-icon { transition: transform 0.3s ease; display: inline-block; font-size: 16px; margin-left: 8px; color: var(--klm-pale) !important; }
.klm-accordion-content { padding-top: 8px; }
/* ==================================================================
   v1.5 eklemeleri: geri al düğmeli bildirim, seviye rozeti,
   istatistik ekranı
   ================================================================== */

.klm-toast.has-action.is-up { pointer-events: auto; }
.klm-toast { display: flex; align-items: center; gap: 14px; }
.klm-toast-act {
  border: 0;
  background: transparent;
  color: #ffd23f !important;
  font: inherit;
  font-weight: 650;
  text-transform: none;
  letter-spacing: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* CEFR rozeti (A1–C2) */
.klm-cefr {
  display: inline-block;
  font-family: var(--klm-sans);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .04em;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 4px;
  vertical-align: 2px;
  background: var(--klm-gwash);
  color: var(--klm-green) !important;
}
.klm-cefr[data-l="B1"], .klm-cefr[data-l="B2"] { background: var(--klm-wash); color: #7a5b00 !important; }
.klm-cefr[data-l="C1"], .klm-cefr[data-l="C2"] { background: var(--klm-rwash); color: var(--klm-red) !important; }

/* İstatistik */
.klm-stats { max-width: 760px; margin: 0 auto; padding: 4px 0 40px; }

.klm-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.klm-stat {
  background: var(--klm-card);
  border: 1px solid var(--klm-rule);
  border-radius: 10px;
  padding: 14px 14px 12px;
}
.klm-stat-v { font-family: var(--klm-serif); font-size: 28px; font-weight: 600; line-height: 1.1; color: var(--klm-ink) !important; }
.klm-stat-l { font-size: 12.5px; color: var(--klm-slate) !important; margin-top: 4px; }
.klm-stat-s { font-size: 11.5px; color: var(--klm-pale) !important; margin-top: 2px; }

.klm-panel {
  background: var(--klm-card);
  border: 1px solid var(--klm-rule);
  border-radius: 10px;
  padding: 16px 18px 18px;
  margin-bottom: 14px;
}
.klm-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.klm-panel-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--klm-ink) !important; }
.klm-progress--lg { height: 8px; margin-bottom: 0; border-radius: 4px; }
.klm-progress--lg span { border-radius: 4px; }

.klm-goal-set { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--klm-slate) !important; }
.klm-goal-set input {
  width: 64px;
  padding: 5px 8px;
  border: 1px solid var(--klm-rule);
  border-radius: 6px;
  font: inherit;
  color: var(--klm-ink) !important;
  background: var(--klm-paper);
}

.klm-stack { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--klm-rule); }
.klm-stack-seg[data-k="fresh"],   .klm-dot[data-k="fresh"]    { background: #c5cfd8; }
.klm-stack-seg[data-k="learning"], .klm-dot[data-k="learning"] { background: var(--klm-marker); }
.klm-stack-seg[data-k="mature"],  .klm-dot[data-k="mature"]   { background: var(--klm-green); }
.klm-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--klm-slate) !important; }
.klm-legend b { color: var(--klm-ink) !important; font-weight: 600; }
.klm-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }

.klm-bars { display: flex; align-items: flex-end; gap: 8px; height: 150px; }
.klm-bars--dense { gap: 4px; }
.klm-bar { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.klm-bar-n { font-size: 11px; color: var(--klm-slate) !important; height: 14px; line-height: 14px; }
.klm-bar-col { width: 100%; flex: 1; display: flex; align-items: flex-end; background: linear-gradient(var(--klm-rule), var(--klm-rule)) center bottom / 1px 100% no-repeat; min-height: 0; }
.klm-bar-fill { display: block; width: 100%; background: var(--klm-marker); border-radius: 4px 4px 0 0; min-height: 2px; position: relative; overflow: hidden; }
.klm-bar-ok { position: absolute; left: 0; right: 0; bottom: 0; background: var(--klm-green); display: block; }
.klm-bar-l { font-size: 10.5px; color: var(--klm-pale) !important; white-space: nowrap; }
.klm-bars--dense .klm-bar-l { font-size: 9px; }
.klm-bars--dense .klm-bar-n { font-size: 9.5px; }

@media (max-width: 640px) {
  .klm-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .klm-panel { padding: 14px; }
  .klm-toast { top: 72px; }
}

/* "Öğrenildi" rozeti (üst üste 3 doğru) */
.klm-learned {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--klm-sans);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .02em;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 4px;
  vertical-align: 2px;
  background: var(--klm-gwash);
  color: var(--klm-green) !important;
  white-space: nowrap;
}

/* İstatistik: liste bazlı öğrenilen kırılımı */
.klm-lrows { display: flex; flex-direction: column; }
.klm-lrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--klm-rule);
}
.klm-lrow:last-child { border-bottom: none; }
.klm-lrow-name {
  flex: 0 0 34%;
  max-width: 34%;
  font-size: 13px;
  color: var(--klm-ink) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.klm-lrow-bar {
  flex: 1;
  height: 9px;
  border-radius: 5px;
  background: var(--klm-rule);
  overflow: hidden;
  display: block;
}
.klm-lrow-bar span { display: block; height: 100%; background: var(--klm-green); border-radius: 5px; }
.klm-lrow-n {
  flex: 0 0 auto;
  min-width: 58px;
  text-align: right;
  font-size: 12px;
  color: var(--klm-slate) !important;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .klm-lrow-name { flex-basis: 44%; max-width: 44%; }
}

/* İstatistik: "sistem nasıl çalışıyor" bilgi notu */
.klm-info {
  border: 1px solid var(--klm-rule);
  border-radius: 10px;
  background: var(--klm-card);
  margin-bottom: 14px;
  overflow: hidden;
}
.klm-info summary {
  cursor: pointer;
  padding: 13px 16px;
  font-family: var(--klm-sans);
  font-weight: 650;
  font-size: 13.5px;
  color: var(--klm-ink) !important;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.klm-info summary::-webkit-details-marker { display: none; }
.klm-info summary::after {
  content: '▾';
  margin-left: auto;
  opacity: .5;
  font-size: 12px;
  transition: transform .15s ease;
}
.klm-info[open] summary::after { transform: rotate(180deg); }
.klm-info[open] summary { border-bottom: 1px solid var(--klm-rule); }
.klm-info-body {
  padding: 4px 18px 16px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--klm-slate) !important;
}
.klm-info-body h4 {
  margin: 14px 0 5px;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--klm-ink) !important;
  font-family: var(--klm-sans);
}
.klm-info-body h4:first-child { margin-top: 12px; }
.klm-info-body p { margin: 0 0 8px; }
.klm-info-body dl { margin: 0; }
.klm-info-body dt { font-weight: 650; color: var(--klm-ink) !important; margin-top: 6px; }
.klm-info-body dd { margin: 1px 0 0; }

/* Alıştırmalarda: "Sözlük > Seç > Birlikte çalış" ile kurulan, farklı
   listelerden elle seçilmiş geçici çalışma seti bildirimi. */
.klm-custom-pool-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--klm-gwash);
  font-size: 13.5px;
  color: var(--klm-ink) !important;
}
.klm-custom-pool-bar b { color: var(--klm-green) !important; }

/* İstatistik: "tüm kategoriler / belli bir kategori" kapsam seçici */
.klm-stats-scope {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--klm-slate) !important;
}
.klm-stats-scope select {
  padding: 7px 10px;
  border: 1px solid var(--klm-rule);
  border-radius: 7px;
  font: inherit;
  font-size: 13px;
  color: var(--klm-ink) !important;
  background: var(--klm-paper);
  cursor: pointer;
}

/* 🧺 Birlikte çalışma sepeti: üst çubuktaki sayaç, kelime kartındaki
   ekle/çıkar ikonu, ve sepet yönetim penceresindeki liste. */
.klm-pool-btn {
  border: none;
  background: transparent !important;
  color: #aebbc7 !important;
  font-size: 12.5px;
  white-space: nowrap;
  padding: 4px 6px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.klm-pool-btn[data-on="1"] { color: var(--klm-marker) !important; }
.klm-pool-btn:hover { opacity: 0.85; }

.klm-pool-toggle {
  color: var(--klm-pale) !important;
  font-size: 16px;
  padding: 0 4px;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0.55;
  transition: transform 150ms ease, opacity 150ms ease;
}
.klm-pool-toggle[data-on="1"] { opacity: 1; }
.klm-pool-toggle:hover { transform: scale(1.15); }
.klm-pool-toggle:active { transform: scale(0.9); }

.klm-pool-list { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; }
.klm-pool-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--klm-rule);
}
.klm-pool-item:last-child { border-bottom: none; }
.klm-pool-item-term { font-weight: 600; color: var(--klm-ink) !important; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.klm-pool-item-list { font-size: 12px; color: var(--klm-slate) !important; white-space: nowrap; }
.klm-pool-item-x {
  border: none;
  background: transparent !important;
  color: var(--klm-pale) !important;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}
.klm-pool-item-x:hover { color: var(--klm-red) !important; }

/* ---------- Cümle kurma (kelime sıralama) ---------- */
.klm-flow-target {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 52px;
  padding: 14px;
  background: var(--klm-wash);
  border: 2px dashed var(--klm-rule);
  border-radius: 10px;
  margin-top: 14px;
  align-items: center;
}
.klm-flow-placed {
  display: inline-block;
  padding: 6px 12px;
  background: var(--klm-marker) !important;
  color: var(--klm-ink) !important;
  border-radius: 6px;
  font-weight: 650;
  font-size: 15px;
  animation: klmPopIn 180ms ease;
}
.klm-flow-pool { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.klm-flow-chip {
  background: var(--klm-card);
  color: var(--klm-ink) !important;
  border: 1px solid var(--klm-rule);
  border-radius: 8px;
  padding: 9px 14px;
  font-family: var(--klm-serif);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}
.klm-flow-chip:hover:not(:disabled) { border-color: var(--klm-ink); }
.klm-flow-chip:disabled { cursor: default; }
.klm-flow-chip.is-wrong { background: var(--klm-rwash) !important; border-color: var(--klm-red) !important; animation: klmShake 300ms ease; }

@keyframes klmPopIn { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes klmShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ---------- Kaydırmalı boşluk ---------- */
.klm-slider-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--klm-slate) !important;
}
.klm-slider-bar b { color: var(--klm-ink) !important; }
.klm-slider-bar input[type="range"] { flex: 1; max-width: 220px; accent-color: var(--klm-marker); }
.klm-slider-target {
  margin-top: 16px;
  font-family: var(--klm-serif);
  font-size: 19px;
  line-height: 2.1;
  color: var(--klm-ink) !important;
  text-align: left;
}
.klm-slider-word { display: inline; }
.klm-slider-wrap { display: inline; white-space: nowrap; }
.klm-slider-in {
  border: none;
  border-bottom: 2px solid var(--klm-marker);
  border-radius: 0;
  padding: 0 2px;
  font-family: var(--klm-serif);
  font-size: 19px;
  font-weight: 600;
  text-align: center;
  color: var(--klm-ink) !important;
  background: var(--klm-wash);
}
.klm-slider-in.is-ok { border-color: var(--klm-green); background: var(--klm-gwash); color: var(--klm-green) !important; }
.klm-slider-in.is-no { border-color: var(--klm-red); background: var(--klm-rwash); color: var(--klm-red) !important; text-decoration: line-through; }
.klm-slider-correct { color: var(--klm-green) !important; font-weight: 700; margin-left: 6px; }

/* ---------- Hata avcısı ---------- */
.klm-proof-target {
  margin-top: 16px;
  font-family: var(--klm-serif);
  font-size: 19px;
  line-height: 2.1;
  color: var(--klm-ink) !important;
  text-align: left;
}
.klm-proof-word {
  display: inline-block;
  padding: 1px 4px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 150ms ease;
}
.klm-proof-word:hover { background: var(--klm-wash); }
.klm-proof-word.is-locked { pointer-events: none; }
.klm-proof-word.is-locked input { pointer-events: auto; }
.klm-proof-word input {
  border: none;
  border-bottom: 2px solid var(--klm-marker);
  border-radius: 0;
  padding: 0 2px;
  font-family: var(--klm-serif);
  font-size: 19px;
  font-weight: 600;
  text-align: center;
  color: var(--klm-ink) !important;
  background: var(--klm-wash);
}

/* ---------- Otomatik Tekrar (dinleyerek akış) ---------- */
.klm-oto-settings {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
  font-size: 12.5px;
  color: var(--klm-slate) !important;
}
.klm-oto-check { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.klm-oto-check input { accent-color: var(--klm-marker); width: 15px; height: 15px; cursor: pointer; }
.klm-oto-gap { display: flex; align-items: center; gap: 8px; }
.klm-oto-gap b { color: var(--klm-ink) !important; }
.klm-oto-gap input[type="range"] { width: 100px; accent-color: var(--klm-marker); }
.klm-oto-settings .klm-link { margin-left: auto; }

.klm-oto-card {
  background: var(--klm-card);
  border: 1px solid var(--klm-rule);
  border-radius: 14px;
  padding: 28px 26px 22px;
  text-align: center;
}

.klm-oto-segs {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  max-height: 46vh;
  overflow-y: auto;
  padding: 2px;
}

.klm-oto-seg {
  width: 100%;
  max-width: 460px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--klm-wash);
  cursor: pointer;
  transition: background 150ms ease, box-shadow 150ms ease;
  animation: klmOtoIn 260ms ease;
}
.klm-oto-seg:hover { background: var(--klm-gwash); }

@keyframes klmOtoIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.klm-oto-seg--word {
  background: transparent;
  padding: 6px 16px 14px;
}
.klm-oto-word {
  font-family: var(--klm-serif);
  font-size: 34px;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--klm-ink) !important;
}
.klm-oto-seg--word:hover { background: transparent; }

.klm-oto-seg--meaning { font-family: var(--klm-serif); font-size: 19px; color: var(--klm-ink) !important; }
.klm-oto-seg--ex { font-family: var(--klm-serif); font-style: italic; font-size: 16px; color: var(--klm-slate) !important; }
.klm-oto-seg--ex-tr { font-size: 14px; color: var(--klm-pale) !important; margin-top: -6px; }

.klm-oto-seg.is-active {
  background: var(--klm-gwash);
  box-shadow: inset 3px 0 0 var(--klm-green);
}
.klm-oto-seg--word.is-active { box-shadow: none; }
.klm-oto-seg--word.is-active .klm-oto-word {
  position: relative;
}
.klm-oto-seg--word.is-active .klm-oto-word::after {
  content: '🔊';
  font-size: 15px;
  margin-left: 10px;
  vertical-align: middle;
  animation: klmOtoPulse 1.1s ease-in-out infinite;
}
.klm-oto-seg--meaning.is-active::after,
.klm-oto-seg--ex.is-active::after,
.klm-oto-seg--ex-tr.is-active::after {
  content: '🔊';
  font-size: 12px;
  margin-left: 8px;
  animation: klmOtoPulse 1.1s ease-in-out infinite;
}

@keyframes klmOtoPulse {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}

.klm-oto-bar {
  height: 4px;
  background: var(--klm-rule);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 22px;
}
.klm-oto-bar span { display: block; height: 100%; width: 0%; background: var(--klm-marker); }

.klm-oto-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 24px;
}
.klm-oto-ctrl {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--klm-rule);
  background: var(--klm-card);
  color: var(--klm-ink) !important;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 120ms ease, background 120ms ease;
}
.klm-oto-ctrl:hover { transform: scale(1.06); background: var(--klm-wash); }
.klm-oto-ctrl:active { transform: scale(0.94); }
.klm-oto-ctrl--main {
  width: 60px;
  height: 60px;
  background: var(--klm-marker) !important;
  border: none;
  font-size: 22px;
  box-shadow: 0 6px 16px rgba(255, 210, 63, 0.35);
}

@media (max-width: 640px) {
  .klm-oto-card { padding: 22px 14px 18px; }
  .klm-oto-word { font-size: 27px; }
  .klm-oto-seg { max-width: 100%; }
  .klm-oto-settings { justify-content: center; }
  .klm-oto-settings .klm-link { margin-left: 0; width: 100%; text-align: center; }
  .klm-oto-ctrl { width: 52px; height: 52px; }
  .klm-oto-ctrl--main { width: 66px; height: 66px; }
}

/* Otomatik Tekrar: İngilizce/Türkçe ses seçimi */
.klm-oto-voices {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 18px;
  font-size: 12.5px;
  color: var(--klm-slate) !important;
}
.klm-oto-voice { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; min-width: 0; }
.klm-oto-voice label { white-space: nowrap; }
.klm-oto-voice select {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid var(--klm-rule);
  border-radius: 6px;
  font: inherit;
  font-size: 12.5px;
  color: var(--klm-ink) !important;
  background: var(--klm-paper);
}
.klm-oto-voice select:disabled { opacity: 0.6; }

@media (max-width: 640px) {
  .klm-oto-voices { flex-direction: column; gap: 8px; }
}

/* Kelimeleri Çalış: kart üstündeki yıldız düğmesi */
.klm-oto-card { position: relative; }
.klm-oto-star {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 22px;
  color: var(--klm-pale) !important;
  cursor: pointer;
  transition: transform 150ms ease, color 150ms ease;
  z-index: 1;
}
.klm-oto-star[data-on="1"] { color: #e0a800 !important; }
.klm-oto-star:hover { transform: scale(1.15); }
.klm-oto-star:active { transform: scale(0.9); }

/* ---------- Misafir (üye olmayan) SEO widget'ı ---------- */
.klm-guest-app {
  max-width: 900px;
  margin: 28px auto;
  border: 1px solid var(--klm-rule);
  border-radius: 14px;
  overflow: hidden;
  overflow: clip; /* sticky çalışabilsin diye (hidden kaydırma kabı oluşturur) */
  background: var(--klm-paper);
  box-shadow: 0 2px 10px rgba(20, 32, 46, 0.06);
}

.klm-guest-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--klm-wash), #fff);
  border-bottom: 1px solid var(--klm-rule);
}
.klm-guest-cta span {
  flex: 1 1 320px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--klm-ink) !important;
}
.klm-guest-cta b { color: var(--klm-ink) !important; }
.klm-guest-cta .klm-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.klm-guest-tabs { border-radius: 0; }
.klm-guest-tabs .klm-tabs-scroll { padding: 2px 0; }

.klm-guest-app .klm-drill { padding: 24px 20px 40px; }

@media (max-width: 640px) {
  .klm-guest-app { margin: 16px 0; border-radius: 10px; }
  .klm-guest-app .klm-tabs-scroll { position: static !important; transform: none !important; width: 100% !important; height: auto !important; padding: 10px 0 !important; background: transparent; box-shadow: none; }
  .klm-guest-cta { padding: 14px; }
  .klm-guest-cta span { font-size: 13px; }
  .klm-guest-app .klm-drill { padding: 18px 12px 32px; }
}

/* [kelimelik_liste_dizini] — .klm-app sarmalayıcısının DIŞINDA
   yaşayabilir (düz bir sayfa içeriği), o yüzden değişkenlere yedek
   değerler verildi. */
.klm-seo-index h3 {
  font-family: var(--klm-serif, Georgia, serif);
  font-size: 19px;
  margin: 28px 0 8px;
  color: inherit;
}
.klm-seo-index h3:first-child { margin-top: 0; }
.klm-seo-index ul { margin: 0 0 6px; padding-left: 22px; }
.klm-seo-index li { margin-bottom: 6px; }
.klm-seo-index a {
  color: var(--klm-green, #2f7d5d);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.klm-seo-index a:hover { opacity: 0.8; }

/* Yazı içeriğindeki kelime önizleme tablosu (klm_build_seo_post_content) —
   bu da .klm-app dışında, düz makale içeriği olarak render olur. */
.klm-seo-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 20px;
  font-size: 15px;
}
.klm-seo-table th, .klm-seo-table td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--klm-rule, #e3e7ea);
}
.klm-seo-table th {
  font-family: var(--klm-serif, Georgia, serif);
  color: inherit;
}
.klm-seo-table td { color: inherit; }
.klm-seo-table td strong { color: inherit; }


/* ==========================================================
   v1.6 — Liste paylaşımı / moderasyon / mobil akordeon
   ========================================================== */

.klm-list-group {
  margin: 0 0 14px;
  border: 1px solid var(--klm-rule);
  border-radius: 12px;
  overflow: hidden;
  background: var(--klm-paper);
}

.klm-list-group-title.is-accordion {
  margin: 0 !important;
  padding: 15px 18px !important;
  border-top: 0 !important;
  background: var(--klm-card);
  border-bottom: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.klm-list-group-title.is-accordion:hover {
  background: #f7f8f6;
}

.klm-group-meta {
  font-family: var(--klm-sans);
  font-size: 12px;
  font-weight: 500;
  opacity: .55;
  margin-left: 7px;
}

.klm-accordion-content {
  padding: 10px 14px 2px;
}

.klm-share-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  line-height: 1.2;
  font-weight: 600;
}

.klm-share-badge.is-pending {
  background: #fff1c9;
  color: #866000 !important;
}

.klm-share-badge.is-approved {
  background: #e4f4eb;
  color: #26714d !important;
}

.klm-share-badge.is-rejected {
  background: #fbe8e6;
  color: #a23f37 !important;
}

.klm-share-badge.is-private {
  background: #eef0f2;
  color: var(--klm-slate) !important;
}

.klm-share-badge.is-owned {
  background: var(--klm-wash);
  color: #765b00 !important;
}

.klm-share-note {
  margin-top: 10px;
  padding: 9px 11px;
  border-left: 3px solid var(--klm-marker);
  border-radius: 6px;
  background: var(--klm-wash);
  font-size: 13px;
  line-height: 1.5;
  color: var(--klm-slate) !important;
}

.klm-pending-count {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #fff1c9;
  color: #866000 !important;
  font-family: var(--klm-sans);
  font-size: 11px;
  font-weight: 600;
}

.klm-list-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.klm-stat-learned {
  color: var(--klm-green) !important;
  font-weight: 600;
}

.klm-stat-due {
  color: #a23f37 !important;
  font-weight: 600;
}

.klm-stat-sep {
  opacity: .3;
}

.klm-list-word-count {
  font-size: 14px;
  font-weight: 600;
  color: var(--klm-ink) !important;
}

/* Mobil */
@media (max-width: 640px) {

  .klm-list-group {
    margin-bottom: 10px;
    border-radius: 10px;
  }

  .klm-list-group-title.is-accordion {
    padding: 13px 13px !important;
    font-size: 15px;
  }

  .klm-accordion-content {
    padding: 7px 8px 1px;
  }

  .klm-list-card {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 15px;
    margin-bottom: 9px;
    border-radius: 10px;
  }

  .klm-list-card .klm-side {
    width: 100%;
    align-items: flex-start;
    text-align: left;
    white-space: normal;
  }

  .klm-list-card .klm-acts {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
  }

  .klm-list-card .klm-acts .klm-link {
    padding: 5px 0;
  }

  .klm-list-card .klm-list-title-btn {
    font-size: 18px;
    line-height: 1.25;
  }

  .klm-share-note {
    font-size: 12.5px;
  }

  .klm-pending-count {
    margin-left: 4px;
    font-size: 10px;
  }
}
/* ==========================================================
   Admin liste içerik inceleme
   ========================================================== */

.klm-admin-list-review {
  width: 100%;
  margin-top: 14px;
  grid-column: 1 / -1;
}

.klm-admin-review-panel {
  border-top: 1px solid var(--klm-rule);
  padding-top: 14px;
}

.klm-admin-review-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--klm-card);
  font-size: 13px;
}

.klm-admin-review-toolbar span {
  opacity: .6;
}

.klm-admin-review-word {
  padding: 14px 2px;
  border-bottom: 1px solid var(--klm-rule);
}

.klm-admin-review-word:last-child {
  border-bottom: 0;
}

.klm-admin-review-word-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.klm-admin-review-number {
  flex: 0 0 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--klm-wash);
  font-family: var(--klm-sans);
  font-size: 12px;
  font-weight: 700;
}

.klm-admin-review-main {
  min-width: 0;
  flex: 1;
}

.klm-admin-review-examples {
  margin-top: 10px;
}

.klm-admin-review-loading {
  padding: 18px;
  text-align: center;
  color: var(--klm-slate);
}

@media (max-width: 640px) {

  .klm-admin-review-word-top {
    gap: 8px;
  }

  .klm-admin-review-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .klm-admin-review-word {
    padding: 12px 0;
  }

  .klm-admin-list-review {
    margin-top: 10px;
  }
}
.klm-source-category {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 400;
  opacity: .58;
  white-space: normal;
}

@media (max-width: 640px) {
  .klm-source-category {
    display: inline;
    font-size: 11.5px;
  }
}
/* ==================================================================
   v2 arayüz — sade üst çubuk, mobil alt menü, açılır paneller,
   yeni sözlük başlığı ve kelime kartı. Bu blok dosyanın EN SONUNDA
   durmalı: eski kuralları (özellikle .klm-app * renk sıfırlamasını ve
   eski mobil çekmece kurallarını) bilerek eziyor.
   ================================================================== */

.klm-app svg, .klm-app svg * { color: inherit !important; }
.klm-app .klm-ic { width: 18px; height: 18px; flex-shrink: 0; display: block; }

.klm-app button { -webkit-tap-highlight-color: transparent; }

/* ---------- ortak düğmeler ---------- */
.klm-app .klm-btn2 {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 40px; padding: 0 16px; border-radius: 10px;
  font-size: 14.5px; font-weight: 550; line-height: 1; white-space: nowrap;
  border: 1px solid transparent;
  transition: background 140ms, border-color 140ms, transform 80ms, opacity 140ms;
}
.klm-app .klm-btn2:active { transform: translateY(1px); }
.klm-app .klm-btn2:disabled { opacity: .45; cursor: default; transform: none; }
.klm-app .klm-btn2--primary { background: var(--klm-marker) !important; color: var(--klm-ink) !important; box-shadow: 0 1px 0 rgba(20,32,46,.12); }
.klm-app .klm-btn2--primary:hover:not(:disabled) { background: #ffcb1f !important; }
.klm-app .klm-btn2--ghost { background: var(--klm-card) !important; color: var(--klm-ink) !important; border-color: var(--klm-rule); }
.klm-app .klm-btn2--ghost:hover:not(:disabled) { border-color: #c9d2db; background: #f7f8f6 !important; }
.klm-app .klm-btn2--danger { background: var(--klm-card) !important; color: var(--klm-red) !important; border-color: #ecc9c5; }
.klm-app .klm-btn2--danger:hover:not(:disabled) { background: var(--klm-rwash) !important; }
.klm-app .klm-btn2--sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 9px; }
.klm-app .klm-btn2 .klm-ic { width: 17px; height: 17px; }

.klm-app .klm-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  color: var(--klm-slate) !important; background: transparent !important;
  transition: background 140ms, color 140ms;
}
.klm-app .klm-icon-btn:hover { background: #f1f2ef !important; color: var(--klm-ink) !important; }
.klm-app .klm-icon-btn .klm-ic { width: 20px; height: 20px; }

/* ---------- üst çubuk ---------- */
.klm-app .klm-topbar {
  display: flex; align-items: center; gap: 14px;
  background: var(--klm-ink) !important;
  padding: 10px 14px 10px 18px;
  border-radius: 10px 10px 0 0;
  min-height: 60px;
}
.klm-app.is-fullscreen .klm-topbar { border-radius: 0; }

.klm-app .klm-brand2 {
  flex-shrink: 0;
  font-family: var(--klm-serif); font-size: 20px; letter-spacing: -.01em;
  color: #fff !important;
  padding-bottom: 1px;
  background-image: linear-gradient(var(--klm-marker), var(--klm-marker));
  background-size: 100% 6px; background-position: 0 88%; background-repeat: no-repeat;
  margin-right: 6px;
}

.klm-app .klm-topnav { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }

.klm-app .klm-topnav .klm-nav-item {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 12px; border-radius: 9px;
  font-size: 14.5px; white-space: nowrap;
  color: #aebbc7 !important; background: transparent !important;
  transition: background 140ms, color 140ms;
}
.klm-app .klm-topnav .klm-nav-item span { color: inherit !important; }
.klm-app .klm-topnav .klm-nav-item .klm-ic { width: 17px; height: 17px; opacity: .85; }
.klm-app .klm-topnav .klm-nav-item .klm-ic:last-child:not(:first-child) { width: 14px; height: 14px; opacity: .55; margin-left: -3px; }
.klm-app .klm-topnav .klm-nav-item:hover { background: rgba(255,255,255,.07) !important; color: #eef3f7 !important; }
.klm-app .klm-topnav .klm-nav-item.is-on,
.klm-app .klm-topnav .klm-nav-item.is-active { background: rgba(255,255,255,.12) !important; color: #fff !important; }

.klm-app .klm-scope-pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 10px 0 12px; max-width: 260px; min-width: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.13);
  color: #dfe7ee !important; font-size: 13.5px;
  transition: background 140ms, border-color 140ms;
}
.klm-app .klm-scope-pill:hover, .klm-app .klm-scope-pill.is-active { background: rgba(255,255,255,.13) !important; }
.klm-app .klm-scope-pill.is-scoped { border-color: rgba(255,210,63,.55); }
.klm-app .klm-scope-pill .klm-ic { width: 16px; height: 16px; opacity: .8; }
.klm-app .klm-scope-pill .klm-ic:last-child { width: 14px; height: 14px; opacity: .55; }
.klm-app .klm-scope-pill-name { color: inherit !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.klm-app .klm-scope-pill.is-scoped .klm-scope-pill-name { color: #fff !important; font-weight: 550; }
.klm-app .klm-scope-pill-n {
  flex-shrink: 0; font-size: 11.5px; font-variant-numeric: tabular-nums;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(255,255,255,.12); color: #c7d2dc !important;
}

.klm-app .klm-topbar-status { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.klm-app .klm-topbar .klm-streak {
  font-size: 13px; padding: 0 6px; white-space: nowrap; color: #aebbc7 !important;
}
.klm-app .klm-topbar .klm-streak[data-on="1"] { color: var(--klm-marker) !important; }
.klm-app .klm-topbar .klm-pool-btn {
  display: inline-flex; align-items: center; gap: 4px;
  height: 32px; padding: 0 10px; border-radius: 999px;
  background: rgba(255,255,255,.06) !important; color: #aebbc7 !important; font-size: 13px;
}
.klm-app .klm-topbar .klm-pool-btn span { color: inherit !important; }
.klm-app .klm-topbar .klm-pool-btn[data-on="0"] { opacity: .6; }
.klm-app .klm-topbar .klm-pool-btn[data-on="1"] { color: var(--klm-marker) !important; background: rgba(255,210,63,.12) !important; }
.klm-app .klm-topbar .klm-icon-btn { color: #c0cdd9 !important; }
.klm-app .klm-topbar .klm-icon-btn:hover,
.klm-app .klm-topbar .klm-icon-btn.is-active,
.klm-app .klm-topbar .klm-icon-btn.is-on { background: rgba(255,255,255,.1) !important; color: #fff !important; }

@media (max-width: 1280px) and (min-width: 761px) {
  .klm-app .klm-topnav .klm-nav-item .klm-ic:first-child { display: none; }
  .klm-app .klm-topnav .klm-nav-item { padding: 0 10px; }
  .klm-app .klm-scope-pill { max-width: 190px; }
  .klm-app .klm-brand2 { display: none; }
}

/* ---------- açılır paneller (masaüstü: menü, mobil: alttan sayfa) ---------- */
.klm-app .klm-pop-backdrop {
  display: none; position: fixed; inset: 0; z-index: 100003;
  background: transparent !important;
}
.klm-app .klm-pop-backdrop.is-open { display: block; }

.klm-app .klm-pop {
  position: fixed; z-index: 100004;
  width: 300px; max-height: min(72vh, 540px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--klm-card) !important;
  border: 1px solid var(--klm-rule); border-radius: 14px;
  box-shadow: 0 18px 48px rgba(20,32,46,.16), 0 2px 6px rgba(20,32,46,.06);
  padding: 8px;
  visibility: hidden; opacity: 0; transform: translateY(-6px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
}
.klm-app .klm-pop.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity 140ms ease, transform 140ms ease; }
.klm-app .klm-pop--practice { width: 480px; }
.klm-app .klm-pop--more { width: 270px; }

.klm-app .klm-pop-grip { display: none; }
.klm-app .klm-pop-title { padding: 8px 10px 8px; font-size: 13px; font-weight: 600; color: var(--klm-slate) !important; }

.klm-app .klm-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.klm-app .klm-mode {
  display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto;
  column-gap: 8px; align-items: center; text-align: left;
  padding: 10px 10px; border-radius: 10px;
  background: transparent !important; border: 1px solid transparent;
  transition: background 120ms, border-color 120ms;
}
.klm-app .klm-mode:hover { background: #f5f6f3 !important; }
.klm-app .klm-mode.is-on { background: var(--klm-wash) !important; border-color: rgba(255,210,63,.7); }
.klm-app .klm-mode-e { grid-row: 1 / span 2; font-size: 21px; line-height: 1; text-align: center; }
.klm-app .klm-mode-t { font-size: 14px; font-weight: 600; color: var(--klm-ink) !important; line-height: 1.25; }
.klm-app .klm-mode-d { font-size: 12px; color: var(--klm-slate) !important; line-height: 1.3; }

.klm-app .klm-menu { display: flex; flex-direction: column; gap: 1px; }
.klm-app .klm-menu-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 12px; border-radius: 10px; font-size: 14.5px; text-align: left;
  color: var(--klm-ink) !important; background: transparent !important; text-decoration: none;
}
.klm-app .klm-menu-item span { color: inherit !important; }
.klm-app .klm-menu-item .klm-ic { color: var(--klm-slate) !important; }
.klm-app .klm-menu-item:hover { background: #f4f5f2 !important; }
.klm-app .klm-menu-item.is-on { background: var(--klm-wash) !important; }
.klm-app .klm-show-sm { display: none !important; }

.klm-app .klm-pop-credits {
  display: flex; justify-content: space-between; align-items: center;
  margin: 2px 2px 8px; padding: 11px 13px; border-radius: 10px;
  background: var(--klm-paper) !important; font-size: 13px; color: var(--klm-slate) !important;
}
.klm-app .klm-pop-credits span { color: inherit !important; }
.klm-app .klm-pop-credits #klm-credits { padding: 0; font-size: 14px; font-weight: 650; color: var(--klm-ink) !important; }
.klm-app .klm-pop-credits #klm-credits[data-low="2"] { color: #a07400 !important; }
.klm-app .klm-pop-credits #klm-credits[data-low="1"] { color: var(--klm-red) !important; }

/* liste seçici (kapsam) menüsü — eski koyu mobil çekmece kurallarını ezer */
.klm-app .klm-pop .klm-scope-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 9px 12px 9px 22px; border-radius: 9px; font-size: 14px;
  color: var(--klm-ink) !important; background: transparent !important; border: 0;
}
.klm-app .klm-pop .klm-scope-item:hover { background: #f4f5f2 !important; }
.klm-app .klm-pop .klm-scope-item.is-on { background: var(--klm-wash) !important; font-weight: 600; }
.klm-app .klm-pop .klm-scope-item--all { padding-left: 12px; font-weight: 550; margin: 0; border: 0; border-radius: 9px; }
.klm-app .klm-pop .klm-scope-n { font-size: 12px; font-weight: 500; color: var(--klm-pale) !important; font-variant-numeric: tabular-nums; }
.klm-app .klm-pop .klm-scope-wrap { border-top: 1px solid var(--klm-rule); margin-top: 4px; padding-top: 4px; }
.klm-app .klm-pop .klm-scope-group-btn {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 9px 12px; border: 0; border-radius: 9px;
  font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0;
  color: var(--klm-slate) !important; background: transparent !important;
}
.klm-app .klm-pop .klm-scope-group-btn span { color: inherit !important; }
.klm-app .klm-pop .klm-scope-group-btn:hover { background: #f7f8f6 !important; }
.klm-app .klm-pop .klm-scope-items { background: transparent !important; margin: 0; padding: 0 0 4px; }

/* ---------- sözlük başlığı ---------- */
.klm-app .klm-dict-head { padding: 24px 26px 14px; }

.klm-app .klm-dict-titlerow { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.klm-app .klm-dict-titlewrap { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }

.klm-app .klm-dict-title {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%;
  margin-left: -8px; padding: 2px 8px; border-radius: 10px;
  background: transparent !important; transition: background 120ms;
}
.klm-app .klm-dict-title:hover, .klm-app .klm-dict-title.is-active { background: #f1f2ee !important; }
.klm-app .klm-dict-title h2 {
  font-family: var(--klm-serif); font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15;
  color: var(--klm-ink) !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.klm-app .klm-dict-title .klm-ic { width: 20px; height: 20px; color: var(--klm-pale) !important; margin-top: 4px; }

.klm-app .klm-dict-cat {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  background: #eef1f3 !important; color: var(--klm-slate) !important;
  font-size: 12.5px; font-weight: 550; white-space: nowrap; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
}
.klm-app .klm-dict-cat::before { content: '📂'; font-size: 12px; }
.klm-app .klm-dict-cat[hidden] { display: none !important; }

.klm-app .klm-dict-meta { flex-basis: 100%; font-size: 13.5px; color: var(--klm-slate) !important; margin: 2px 0 0 !important; }
.klm-app .klm-dict-meta b { color: var(--klm-ink) !important; font-weight: 650; }
.klm-app .klm-dict-meta .klm-dot-sep { color: var(--klm-pale) !important; margin: 0 3px; }
.klm-app .klm-dict-meta .klm-meta-due { color: #9a6a00 !important; font-weight: 600; }

.klm-app .klm-dict-actions { display: flex; gap: 8px; flex-shrink: 0; padding-bottom: 2px; }

/* araç çubuğu: arama + görünüm + seç */
.klm-app .klm-toolbar { display: flex; align-items: center; gap: 8px; margin-top: 20px; }

.klm-app .klm-searchbox {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 12px; border-radius: 11px;
  border: 1px solid var(--klm-rule); background: var(--klm-card) !important;
  color: var(--klm-pale) !important; cursor: text;
  transition: border-color 140ms, box-shadow 140ms;
}
.klm-app .klm-searchbox:focus-within { border-color: #9aa8b5; box-shadow: 0 0 0 3px rgba(255,210,63,.35); }
.klm-app .klm-searchbox input {
  flex: 1; min-width: 0; height: 100%; border: 0 !important; outline: none;
  background: transparent !important; font-size: 15px; padding: 0; box-shadow: none !important;
}
.klm-app .klm-searchbox input::-webkit-search-cancel-button { opacity: .5; }

.klm-app .klm-seg {
  display: inline-flex; gap: 2px; padding: 3px; height: 42px; flex-shrink: 0;
  border: 1px solid var(--klm-rule); border-radius: 11px; background: var(--klm-card) !important;
}
.klm-app .klm-seg-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0 11px;
  border-radius: 8px; font-size: 13.5px;
  color: var(--klm-slate) !important; background: transparent !important;
  transition: background 120ms, color 120ms;
}
.klm-app .klm-seg-btn span { color: inherit !important; }
.klm-app .klm-seg-btn .klm-ic { width: 16px; height: 16px; }
.klm-app .klm-seg-btn:hover { color: var(--klm-ink) !important; }
.klm-app .klm-seg-btn.is-on { background: var(--klm-ink) !important; color: #fff !important; }

.klm-app .klm-tool-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 13px; flex-shrink: 0;
  border: 1px solid var(--klm-rule); border-radius: 11px; font-size: 13.5px;
  color: var(--klm-slate) !important; background: var(--klm-card) !important;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.klm-app .klm-tool-btn span { color: inherit !important; }
.klm-app .klm-tool-btn .klm-ic { width: 16px; height: 16px; }
.klm-app .klm-tool-btn:hover { color: var(--klm-ink) !important; border-color: #c9d2db; }
.klm-app .klm-tool-btn.is-on { background: var(--klm-ink) !important; border-color: var(--klm-ink); color: #fff !important; }

.klm-app .klm-dict-head .klm-chips { margin-top: 12px; gap: 6px; }
.klm-app .klm-dict-head .klm-chip {
  padding: 6px 12px; border-radius: 999px; font-size: 13.5px; white-space: nowrap;
  border: 1px solid var(--klm-rule); background: var(--klm-card) !important; color: var(--klm-slate) !important;
}
.klm-app .klm-dict-head .klm-chip span { color: inherit !important; }
.klm-app .klm-dict-head .klm-chip:hover { border-color: #c9d2db; color: var(--klm-ink) !important; }
.klm-app .klm-dict-head .klm-chip.is-on { background: var(--klm-ink) !important; border-color: var(--klm-ink); color: #fff !important; }

/* ---------- toplu seçim çubuğu ---------- */
.klm-app .klm-bulk-bar {
  position: sticky; top: 8px; z-index: 20;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 8px 8px 14px; margin: 0 0 14px;
  background: var(--klm-card) !important; border: 1px solid var(--klm-rule); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(20,32,46,.08);
}
.klm-app .klm-bulk-bar.has-sel { border-color: rgba(255,210,63,.9); }
.klm-app .klm-bulk-all { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 550; cursor: pointer; }
.klm-app .klm-bulk-count { font-size: 13px; color: var(--klm-slate) !important; flex: 1; }
.klm-app .klm-bulk-acts { display: flex; gap: 6px; }
.klm-app .klm-bulk-bar input[type="checkbox"],
.klm-app .klm-word-cb { width: 19px; height: 19px; accent-color: var(--klm-ink); cursor: pointer; flex-shrink: 0; margin: 0; }

/* ---------- kelime kartı (sözlük) ---------- */
.klm-app #klm-entries { padding: 2px 26px 48px; }

.klm-app #klm-entries .klm-entry {
  border-radius: 14px; padding: 18px 20px; margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(20,32,46,.04);
}
.klm-app #klm-entries .klm-entry:hover { box-shadow: 0 6px 18px rgba(20,32,46,.06); }
.klm-app #klm-entries .klm-entry.is-selected { border-color: var(--klm-marker); background: #fffdf3 !important; }
.klm-app #klm-entries .klm-entry-main { overflow: visible; }

.klm-app #klm-entries .klm-entry-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: nowrap; }
.klm-app #klm-entries .klm-entry-head .klm-word-cb { margin-top: 7px; }
.klm-app #klm-entries .klm-entry-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 9px; min-width: 0; flex: 1; }
.klm-app #klm-entries .klm-entry-tools { display: flex; align-items: center; gap: 0; flex-shrink: 0; margin: -4px -8px 0 0; }

.klm-app .klm-speak, .klm-app .klm-speak-sm {
  background: transparent !important; border: 0; padding: 0 3px; line-height: 1; cursor: pointer;
  opacity: .55; transition: opacity 120ms, transform 120ms;
}
.klm-app .klm-speak { font-size: 16px; }
.klm-app .klm-speak-sm { font-size: 13px; }
.klm-app .klm-speak:hover, .klm-app .klm-speak-sm:hover { opacity: 1; transform: scale(1.1); }

.klm-app #klm-entries .klm-entry-tools .klm-pool-toggle,
.klm-app #klm-entries .klm-entry-tools .klm-star,
.klm-app .klm-entry-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border-radius: 9px;
}
.klm-app #klm-entries .klm-entry-tools .klm-pool-toggle:hover,
.klm-app #klm-entries .klm-entry-tools .klm-star:hover,
.klm-app .klm-entry-icon:hover { background: #f2f3f0 !important; transform: none; }
.klm-app .klm-entry-icon { color: var(--klm-pale) !important; background: transparent !important; }
.klm-app .klm-entry-icon .klm-ic { width: 19px; height: 19px; }

.klm-app .klm-more { position: relative; }
.klm-app .klm-more-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 30;
  min-width: 190px; padding: 5px;
  background: var(--klm-card) !important; border: 1px solid var(--klm-rule); border-radius: 12px;
  box-shadow: 0 14px 36px rgba(20,32,46,.16);
}
.klm-app .klm-more.is-up .klm-more-menu { top: auto; bottom: calc(100% + 4px); }
.klm-app .klm-more.is-open .klm-more-menu { display: block; }
.klm-app .klm-more.is-open .klm-entry-icon { background: #f2f3f0 !important; color: var(--klm-ink) !important; }
.klm-app .klm-more-menu button {
  display: block; width: 100%; text-align: left; padding: 9px 11px; border-radius: 8px;
  font-size: 14px; color: var(--klm-ink) !important; background: transparent !important; white-space: nowrap;
}
.klm-app .klm-more-menu button:hover { background: #f4f5f2 !important; }
.klm-app .klm-more-menu button.is-danger { color: var(--klm-red) !important; }
.klm-app .klm-more-menu button.is-danger:hover { background: var(--klm-rwash) !important; }

.klm-app .klm-ex .tr:empty, .klm-app .klm-cloze-tr:empty { display: none; }

.klm-app .klm-entry-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.klm-app .klm-pill {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 11px; border-radius: 999px;
  font-size: 12.5px; color: var(--klm-slate) !important;
  background: #f4f5f2 !important; border: 1px solid transparent;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.klm-app .klm-pill:hover:not(:disabled) { background: var(--klm-card) !important; border-color: var(--klm-rule); color: var(--klm-ink) !important; }
.klm-app .klm-pill:disabled { opacity: .6; cursor: default; }

.klm-app #klm-entries .klm-side { gap: 6px; font-size: 12px; }
.klm-app #klm-entries .klm-host { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }

/* cümle ekleme kutusu */
.klm-app .klm-manual-ex-box {
  margin-top: 14px; padding: 14px; border-radius: 12px;
  background: #fbfaf4 !important; border: 1px solid #efe6c4;
}
.klm-app .klm-mex-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--klm-slate) !important; margin: 0 0 5px; }
.klm-app .klm-mex-label + input, .klm-app .klm-mex-trwrap { margin-bottom: 12px; }
.klm-app .klm-opt { font-weight: 400; color: var(--klm-pale) !important; margin-left: 4px; }
.klm-app .klm-manual-ex-box input[type="text"] {
  display: block; width: 100%; height: 42px; padding: 0 12px;
  border: 1px solid var(--klm-rule); border-radius: 10px;
  font-size: 15px; outline: none; transition: border-color 120ms, box-shadow 120ms;
}
.klm-app .klm-manual-ex-box .klm-mex-en { font-family: var(--klm-serif); font-size: 16px; }
.klm-app .klm-manual-ex-box input[type="text"]:focus { border-color: #9aa8b5; box-shadow: 0 0 0 3px rgba(255,210,63,.3); }
.klm-app .klm-mex-trwrap { position: relative; }
.klm-app .klm-mex-trwrap input[type="text"] { padding-right: 48px; }
.klm-app .klm-ai-btn {
  position: absolute; right: 5px; top: 5px; width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--klm-wash) !important; color: #8a6400 !important;
  transition: background 120ms, transform 120ms;
}
.klm-app .klm-ai-btn:hover { background: var(--klm-marker) !important; color: var(--klm-ink) !important; }
.klm-app .klm-ai-btn .klm-ic { width: 17px; height: 17px; }
.klm-app .klm-ai-btn.is-busy .klm-ic { animation: klmSpin 900ms linear infinite; }
@keyframes klmSpin { to { transform: rotate(360deg); } }
.klm-app .klm-mex-acts { display: flex; justify-content: flex-end; gap: 8px; }

/* liste görünümü */
.klm-app #klm-entries.is-compact .klm-entry:not(.is-expanded) { padding: 12px 16px; margin-bottom: 8px; border-radius: 12px; }
.klm-app #klm-entries.is-compact .klm-entry:not(.is-expanded) .klm-entry-foot,
.klm-app #klm-entries.is-compact .klm-entry:not(.is-expanded) .klm-host { display: none !important; }
.klm-app #klm-entries.is-compact .klm-entry:not(.is-expanded) .klm-word { font-size: 20px; }
.klm-app #klm-entries.is-compact .klm-entry.is-expanded { margin: 10px 0 14px; padding: 18px 20px; border-color: var(--klm-marker); box-shadow: 0 10px 28px rgba(20,32,46,.08); }

/* ---------- kelime ekle penceresi ---------- */
.klm-app .klm-fab-overlay { z-index: 100006; background: rgba(20,32,46,.5) !important; }
.klm-app .klm-fab-sheet { border-radius: 18px; padding: 20px 22px 22px; max-width: 460px; }
.klm-app .klm-fab-head { margin-bottom: 14px; }
.klm-app .klm-fab-head h3 { font-size: 22px; }
.klm-app .klm-fab-close { min-width: 38px; min-height: 38px; }

.klm-app .klm-add-field {
  display: flex; align-items: stretch;
  border: 1.5px solid var(--klm-rule); border-radius: 12px; background: var(--klm-paper) !important;
  transition: border-color 140ms, box-shadow 140ms; overflow: hidden;
}
.klm-app .klm-add-field:focus-within { border-color: #9aa8b5; box-shadow: 0 0 0 3px rgba(255,210,63,.35); }
.klm-app .klm-fab-sheet .klm-add-field input[type="text"] {
  flex: 1; min-width: 0; margin: 0; border: 0 !important; border-radius: 0;
  background: transparent !important; outline: none;
  padding: 14px 14px; font-family: var(--klm-serif); font-size: 20px;
}
.klm-app .klm-add-paste {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 0 14px; font-size: 13px; color: var(--klm-slate) !important;
  background: transparent !important; border-left: 1px solid var(--klm-rule);
}
.klm-app .klm-add-paste span { color: inherit !important; }
.klm-app .klm-add-paste:hover { color: var(--klm-ink) !important; background: #f3f2ec !important; }
.klm-app .klm-add-paste .klm-ic { width: 17px; height: 17px; }

.klm-app .klm-link2 { display: inline-block; margin-top: 10px; padding: 4px 0; font-size: 13.5px; color: var(--klm-slate) !important; background: transparent !important; }
.klm-app .klm-link2:hover { color: var(--klm-ink) !important; }
.klm-app .klm-fab-sheet .klm-ctx-box { border-radius: 10px; font-size: 15px; }
.klm-app .klm-add-label { display: block; margin: 14px 0 6px; font-size: 12.5px; font-weight: 600; color: var(--klm-slate) !important; }
.klm-app .klm-fab-sheet .klm-list-select { margin-top: 0; height: 44px; border-radius: 10px; font-size: 15px; }
.klm-app .klm-fab-actions { margin-top: 18px; gap: 10px; }
.klm-app .klm-fab-actions .klm-btn2 { flex: 1; height: 46px; }
.klm-app .klm-fab-actions .klm-btn2--primary { flex: 1.6; }

.klm-app .klm-fab { font-size: 0; }
.klm-app .klm-fab .klm-ic { width: 26px; height: 26px; }
.klm-app[data-view="sozluk"] .klm-fab { display: none; }

/* modal (onay pencereleri) */
.klm-app .klm-modal-box { border-radius: 16px; max-width: 420px; }
.klm-app .klm-modal-note { background: var(--klm-paper) !important; padding: 11px 13px; border-radius: 10px; margin-bottom: 14px; font-size: 14px; }
.klm-toast { z-index: 1000001; }

/* ---------- mobil alt menü ---------- */
.klm-app .klm-bottomnav { display: none; }

/* ==================================================================
   MOBİL (≤760px)
   ================================================================== */
@media (max-width: 760px) {
  .klm-app { border-radius: 0; padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

  /* üst çubuk: marka + liste hapı + seri + sepet */
  .klm-app .klm-topbar { gap: 8px; padding: 10px 12px; min-height: 56px; border-radius: 0; }
  .klm-app .klm-topnav, .klm-app .klm-more-top { display: none !important; }
  .klm-app .klm-brand2 { font-size: 18px; margin-right: 2px; }
  .klm-app .klm-scope-pill { flex: 1; max-width: none; justify-content: flex-start; }
  .klm-app .klm-scope-pill-name { flex: 1; text-align: left; }
  .klm-app .klm-topbar .klm-streak { font-size: 12.5px; padding: 0 2px; }
  .klm-app .klm-topbar .klm-pool-btn { padding: 0 8px; }

  /* alt menü */
  .klm-app .klm-bottomnav {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100001;
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding: 0 6px env(safe-area-inset-bottom, 0px);
    background: rgba(255,255,255,.94) !important;
    -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
    border-top: 1px solid var(--klm-rule);
    box-shadow: 0 -6px 20px rgba(20,32,46,.06);
  }
  .klm-app .klm-bottomnav .klm-nav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    height: 56px; border-radius: 12px; font-size: 11px; font-weight: 550;
    color: var(--klm-pale) !important; background: transparent !important;
  }
  .klm-app .klm-bottomnav .klm-nav-item span { color: inherit !important; }
  .klm-app .klm-bottomnav .klm-nav-item .klm-ic { width: 22px; height: 22px; }
  .klm-app .klm-bottomnav .klm-nav-item.is-on,
  .klm-app .klm-bottomnav .klm-nav-item.is-active { color: var(--klm-ink) !important; }
  .klm-app .klm-bottomnav .klm-nav-item.is-on .klm-ic { stroke-width: 2.2; }
  .klm-app .klm-bottomnav-add {
    justify-self: center; width: 52px; height: 52px; margin-top: -18px; border-radius: 17px;
    display: flex; align-items: center; justify-content: center;
    background: var(--klm-marker) !important; color: var(--klm-ink) !important;
    box-shadow: 0 6px 18px rgba(20,32,46,.22), 0 0 0 5px var(--klm-paper);
    transition: transform 100ms;
  }
  .klm-app .klm-bottomnav-add:active { transform: scale(.94); }
  .klm-app .klm-bottomnav-add .klm-ic { width: 26px; height: 26px; stroke-width: 2.2; }
  .klm-app .klm-fab { display: none !important; }

  /* paneller → alttan açılan sayfa */
  .klm-app .klm-pop-backdrop { background: rgba(20,32,46,.45) !important; }
  .klm-app .klm-pop,
  .klm-app .klm-pop--practice,
  .klm-app .klm-pop--more {
    left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto;
    max-height: 84vh; border-radius: 22px 22px 0 0; border: 0;
    padding: 6px 12px calc(18px + env(safe-area-inset-bottom, 0px));
    opacity: 1; transform: translateY(100%);
    transition: transform 260ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 260ms;
    box-shadow: 0 -12px 40px rgba(20,32,46,.2);
  }
  .klm-app .klm-pop.is-open { transform: none; transition: transform 260ms cubic-bezier(.2,.8,.2,1); }
  .klm-app .klm-pop-grip { display: block; width: 40px; height: 4px; border-radius: 4px; background: #d6dce1 !important; margin: 6px auto 8px; }
  .klm-app .klm-pop-title { font-size: 15px; color: var(--klm-ink) !important; padding: 4px 6px 12px; font-family: var(--klm-serif); font-weight: 600; }
  .klm-app .klm-mode { padding: 12px 10px; background: #f6f7f4 !important; }
  .klm-app .klm-modes { gap: 8px; }
  .klm-app .klm-menu-item { padding: 14px 12px; font-size: 15.5px; }
  .klm-app .klm-show-sm { display: flex !important; }
  .klm-app .klm-hide-sm { display: none !important; }
  .klm-app .klm-pop .klm-scope-item { padding: 12px 12px 12px 22px; font-size: 15px; }
  .klm-app .klm-pop .klm-scope-item--all { padding-left: 12px; }
  .klm-app .klm-pop .klm-scope-group-btn { padding: 12px; font-size: 14px; }

  /* sözlük başlığı */
  .klm-app .klm-dict-head { padding: 18px 16px 10px; }
  .klm-app .klm-dict-actions { display: none; }
  .klm-app .klm-dict-title h2 { font-size: 25px; }
  .klm-app .klm-toolbar { margin-top: 14px; gap: 6px; }
  .klm-app .klm-searchbox { height: 44px; }
  .klm-app .klm-searchbox input { font-size: 16px; } /* iOS'ta yakınlaştırmayı engeller */
  .klm-app .klm-seg { height: 44px; }
  .klm-app .klm-tool-btn { height: 44px; padding: 0 12px; }
  .klm-app .klm-seg-btn { padding: 0 10px; }
  .klm-app .klm-tl-label { display: none; }
  .klm-app #klm-select-toggle.is-on .klm-tl-label { display: inline; }
  .klm-app .klm-chips--scroll {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 12px -16px 0; padding: 0 16px 2px;
  }
  .klm-app .klm-chips--scroll::-webkit-scrollbar { display: none; }
  .klm-app .klm-dict-head .klm-chip { padding: 7px 13px; flex-shrink: 0; }

  /* kartlar */
  .klm-app #klm-entries { padding: 2px 12px 24px; }
  .klm-app #klm-entries .klm-entry { padding: 14px 14px 12px; border-radius: 14px; gap: 8px; }
  .klm-app #klm-entries .klm-word { font-size: 21px; }
  .klm-app #klm-entries .klm-entry-tools { margin-right: -6px; }
  .klm-app #klm-entries .klm-side {
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    margin-top: 2px; padding-top: 10px; border-top: 1px dashed var(--klm-rule);
  }
  .klm-app #klm-entries.is-compact .klm-entry:not(.is-expanded) .klm-side { border-top: 0; padding-top: 0; }
  .klm-app #klm-entries.is-compact .klm-entry.is-expanded { padding: 16px 14px; }
  .klm-app .klm-pill { height: 34px; padding: 0 12px; font-size: 13px; }
  .klm-app .klm-manual-ex-box input[type="text"] { font-size: 16px; height: 46px; }
  .klm-app .klm-ai-btn { top: 7px; }
  .klm-app .klm-mex-acts .klm-btn2 { flex: 1; height: 42px; }
  .klm-app .klm-bulk-bar { top: 6px; padding: 8px 8px 8px 12px; gap: 8px; }
  .klm-app .klm-bulk-count { font-size: 12.5px; }
  .klm-app .klm-hide-xs { display: none; }

  /* kelime ekle: alttan açılan sayfa */
  .klm-app .klm-fab-overlay { align-items: flex-end; padding: 0; }
  .klm-app .klm-fab-sheet {
    max-width: none; border-radius: 22px 22px 0 0;
    padding: 6px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    animation: klmSheetUp 240ms cubic-bezier(.2,.8,.2,1);
  }
  .klm-app .klm-fab-sheet .klm-pop-grip { margin-bottom: 4px; }
  .klm-app .klm-fab-head { margin-bottom: 10px; }

  /* diğer ekranlar: alt menünün altında kalmasınlar */
  .klm-app .klm-entries, .klm-app .klm-drill { padding-bottom: 32px; }
  .klm-toast { top: auto !important; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}
@keyframes klmSheetUp { from { transform: translateY(40%); opacity: .4; } to { transform: none; opacity: 1; } }

@media (min-width: 761px) {
  .klm-app .klm-fab-sheet .klm-pop-grip { display: none; }
}

@media (max-width: 380px) {
  .klm-app .klm-brand2 { display: none; }
  .klm-app .klm-topbar .klm-streak { max-width: 64px; overflow: hidden; text-overflow: ellipsis; }
}

/* Yapışkan (sticky) toplu seçim çubuğu için: overflow-x:hidden bir
   kaydırma kutusu oluşturup sticky'yi bozuyordu; clip bunu yapmaz. */
@supports (overflow: clip) {
  .klm-app { overflow-x: clip; }
}
@media (max-width: 760px) {
  .klm-app .klm-topbar .klm-streak { max-width: 96px; overflow: hidden; text-overflow: ellipsis; }
}
.klm-app .klm-streak-x { color: inherit !important; }
@media (max-width: 760px) {
  .klm-app .klm-streak-x { display: none; }
}
@media (max-width: 480px) {
  .klm-app .klm-brand2 { display: none; }
}

/* ==================================================================
   v2.1 — alıştırma çubuğu, filtre menüsü, ✓/✗ işaretleri, Kelimeleri
   Çalış düzeni, Ayarlar ekranı, rehber, kategori çipleri
   ================================================================== */

/* ---------- alıştırma üst çubuğu ---------- */
.klm-app .klm-drill { padding-top: 22px; }
.klm-app .klm-drill-bar {
  display: flex; align-items: center; gap: 10px; min-height: 40px; margin-bottom: 10px;
}
.klm-app .klm-drill-name {
  flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--klm-slate) !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.klm-app .klm-drill-count { font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--klm-ink) !important; font-weight: 650; white-space: nowrap; }
.klm-app .klm-drill-count i { font-style: normal; color: var(--klm-pale) !important; margin: 0 2px; font-weight: 400; }
.klm-app .klm-top-next-slot:empty { display: none; }
.klm-app .klm-top-next {
  height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; font-weight: 650;
  background: var(--klm-ink) !important; color: #fff !important; white-space: nowrap;
  animation: klmPopIn 180ms ease;
}
.klm-app .klm-top-next:hover { opacity: .88; }
.klm-app .klm-progress { margin-bottom: 22px; height: 4px; }

/* filtre düğmesi + menü */
.klm-app .klm-pf { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; }
.klm-app .klm-pf-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px 0 9px;
  border: 1px solid var(--klm-rule); border-radius: 999px; background: var(--klm-card) !important;
  font-size: 13px; color: var(--klm-slate) !important; white-space: nowrap;
}
.klm-app .klm-pf-btn span { color: inherit !important; }
.klm-app .klm-pf-btn b { font-weight: 650; font-size: 12px; color: var(--klm-ink) !important; background: #f1f2ef; border-radius: 999px; padding: 1px 7px; }
.klm-app .klm-pf-btn .klm-ic { width: 15px; height: 15px; }
.klm-app .klm-pf-btn:hover, .klm-app .klm-pf.is-open .klm-pf-btn { border-color: #b9c3cc; color: var(--klm-ink) !important; }
.klm-app .klm-pf-btn.is-filtered { border-color: rgba(255,210,63,.9); background: var(--klm-wash) !important; color: var(--klm-ink) !important; }
.klm-app .klm-pf-btn.is-filtered b { background: var(--klm-marker); }
.klm-app .klm-pf-btn.is-pool { cursor: default; border-color: var(--klm-green); background: var(--klm-gwash) !important; color: var(--klm-green) !important; }
.klm-app .klm-pf-x { width: 30px; height: 30px; border-radius: 50%; font-size: 13px; color: var(--klm-slate) !important; background: #f1f2ef !important; }
.klm-app .klm-pf-menu {
  display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; min-width: 220px; padding: 5px;
  background: var(--klm-card) !important; border: 1px solid var(--klm-rule); border-radius: 12px;
  box-shadow: 0 14px 36px rgba(20,32,46,.16);
}
.klm-app .klm-pf.is-open .klm-pf-menu { display: block; }
.klm-app .klm-pf-item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%;
  padding: 10px 11px; border-radius: 8px; font-size: 14px; background: transparent !important; color: var(--klm-ink) !important;
}
.klm-app .klm-pf-item span { color: inherit !important; }
.klm-app .klm-pf-item b { font-size: 12.5px; font-weight: 600; color: var(--klm-pale) !important; font-variant-numeric: tabular-nums; }
.klm-app .klm-pf-item:hover:not(:disabled) { background: #f4f5f2 !important; }
.klm-app .klm-pf-item.is-on { background: var(--klm-wash) !important; font-weight: 600; }
.klm-app .klm-pf-item:disabled { opacity: .4; cursor: default; }

/* ---------- ✓ / ✗ işaretleri ---------- */
.klm-app .klm-choice { position: relative; padding-right: 46px; }
.klm-app .klm-choice[data-r="ok"]::after,
.klm-app .klm-choice[data-r="no"]::after {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; line-height: 1; color: #fff !important;
  animation: klmPopIn 180ms ease;
}
.klm-app .klm-choice[data-r="ok"]::after { content: '✓'; background: var(--klm-green); }
.klm-app .klm-choice[data-r="no"]::after { content: '✕'; background: var(--klm-red); }
.klm-app .klm-verdict h3[data-r="ok"]::before { content: '✓ '; }
.klm-app .klm-verdict h3[data-r="no"]::before { content: '✕ '; }

/* ---------- Kelimeleri Çalış: kart ve kontroller önde ---------- */
.klm-app .klm-oto-card { padding: 22px 22px 18px; }
.klm-app .klm-oto-controls {
  position: sticky; bottom: 12px; z-index: 5;
  margin: 16px auto 0; width: max-content; padding: 8px 14px; gap: 16px;
  background: rgba(255,255,255,.92) !important; border: 1px solid var(--klm-rule); border-radius: 999px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(20,32,46,.1);
}
.klm-app .klm-oto-bar { margin-top: 16px; }
.klm-app .klm-oto-more {
  margin-top: 20px; border: 1px solid var(--klm-rule); border-radius: 12px; background: var(--klm-card) !important;
}
.klm-app .klm-oto-more summary {
  list-style: none; cursor: pointer; padding: 13px 16px; font-size: 14px; font-weight: 600;
  display: flex; align-items: baseline; gap: 8px;
}
.klm-app .klm-oto-more summary::-webkit-details-marker { display: none; }
.klm-app .klm-oto-more summary span { font-size: 12.5px; font-weight: 400; color: var(--klm-pale) !important; }
.klm-app .klm-oto-more summary::after { content: '▾'; margin-left: auto; color: var(--klm-pale) !important; transition: transform 150ms; }
.klm-app .klm-oto-more[open] summary::after { transform: rotate(180deg); }
.klm-app .klm-oto-more-body { padding: 4px 16px 14px; border-top: 1px solid var(--klm-rule); }
.klm-app .klm-oto-more-body .klm-oto-settings { margin: 12px 0; }
.klm-app .klm-oto-more-body .klm-oto-voices { margin-bottom: 0; }

.klm-app .klm-slider-note { font-size: 11.5px; color: var(--klm-pale) !important; }

@media (max-width: 760px) {
  .klm-app .klm-drill { padding: 14px 14px 28px; }
  .klm-app .klm-drill-bar { gap: 8px; margin-bottom: 8px; }
  .klm-app .klm-drill-name { font-size: 12.5px; }
  .klm-app .klm-pf-btn { height: 32px; font-size: 12.5px; }
  .klm-app .klm-pf-menu { min-width: 230px; }
  .klm-app .klm-pf-item { padding: 12px; font-size: 15px; }
  .klm-app .klm-progress { margin-bottom: 14px; }
  .klm-app .klm-card { padding: 22px 16px; }
  .klm-app .klm-choices { margin-top: 14px; }

  .klm-app .klm-oto-card { padding: 16px 12px 14px; border-radius: 14px; }
  .klm-app .klm-oto-segs { max-height: none; gap: 10px; }
  .klm-app .klm-oto-seg { padding: 10px 12px; }
  .klm-app .klm-oto-seg--word { padding: 2px 30px 8px; }
  .klm-app .klm-oto-word { font-size: 28px; }
  .klm-app .klm-oto-star { top: 10px; right: 10px; }
  .klm-app .klm-oto-controls { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); margin-top: 12px; padding: 6px 12px; }
  .klm-app .klm-oto-ctrl { width: 48px; height: 48px; }
  .klm-app .klm-oto-ctrl--main { width: 58px; height: 58px; }
  .klm-app .klm-oto-more { margin-top: 14px; }
}

/* ---------- rehber ---------- */
.klm-app .klm-guide-overlay { z-index: 100007; }
.klm-app .klm-guide-sheet { max-width: 640px; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; }
.klm-app .klm-guide-lead { font-size: 14.5px; color: var(--klm-slate) !important; margin: 0 0 14px !important; line-height: 1.55; }
.klm-app .klm-guide-lead b { color: var(--klm-ink) !important; }
.klm-app .klm-guide-sec { border: 1px solid var(--klm-rule); border-radius: 12px; margin-bottom: 8px; background: var(--klm-card) !important; }
.klm-app .klm-guide-sec summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: 13px 14px; font-size: 15px; font-weight: 600;
}
.klm-app .klm-guide-sec summary::-webkit-details-marker { display: none; }
.klm-app .klm-guide-sec summary::after { content: '▾'; margin-left: auto; color: var(--klm-pale) !important; transition: transform 150ms; }
.klm-app .klm-guide-sec[open] summary::after { transform: rotate(180deg); }
.klm-app .klm-guide-sec[open] { border-color: #d9dfe4; }
.klm-app .klm-guide-ic { width: 30px; height: 30px; border-radius: 9px; background: #f4f5f2; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.klm-app .klm-guide-txt { padding: 0 16px 14px 54px; font-size: 14px; line-height: 1.6; color: var(--klm-slate) !important; }
.klm-app .klm-guide-txt p { margin: 0 0 9px !important; }
.klm-app .klm-guide-txt b, .klm-app .klm-guide-txt dt { color: var(--klm-ink) !important; }
.klm-app .klm-guide-txt a { color: var(--klm-ink) !important; text-decoration: underline; text-decoration-color: var(--klm-marker); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.klm-app .klm-guide-dl { margin: 0 0 10px; }
.klm-app .klm-guide-dl dt { font-weight: 650; margin-top: 8px; }
.klm-app .klm-guide-dl dd { margin: 1px 0 0; }
@media (max-width: 760px) {
  .klm-app .klm-guide-sheet { max-height: 90vh; }
  .klm-app .klm-guide-txt { padding: 0 14px 14px 14px; }
}

/* ---------- Ayarlar ---------- */
.klm-app .klm-settings { max-width: 720px; margin: 0 auto; padding: 18px 26px 48px; display: flex; flex-direction: column; gap: 14px; }
.klm-app .klm-set-card { background: var(--klm-card) !important; border: 1px solid var(--klm-rule); border-radius: 16px; padding: 18px 20px; }
.klm-app .klm-set-card--flat { padding: 6px; display: flex; flex-direction: column; }
.klm-app .klm-set-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.klm-app .klm-set-ic { width: 38px; height: 38px; border-radius: 11px; background: #f4f5f2; display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }
.klm-app .klm-set-head h3 { font-size: 16.5px; font-weight: 650; margin: 1px 0 3px !important; }
.klm-app .klm-set-head p { font-size: 13.5px; color: var(--klm-slate) !important; line-height: 1.5; }
.klm-app .klm-stepper { display: flex; align-items: center; gap: 8px; }
.klm-app .klm-step-btn { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--klm-rule); font-size: 20px; background: var(--klm-card) !important; display: inline-flex; align-items: center; justify-content: center; }
.klm-app .klm-step-btn:hover { background: #f4f5f2 !important; }
.klm-app .klm-stepper input { width: 84px; height: 42px; text-align: center; font-size: 18px; font-weight: 650; border: 1px solid var(--klm-rule); border-radius: 12px; }
.klm-app .klm-step-unit { font-size: 13.5px; color: var(--klm-slate) !important; }
.klm-app .klm-goal-presets { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.klm-app .klm-chip2 { height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--klm-rule); font-size: 13.5px; background: var(--klm-card) !important; }
.klm-app .klm-chip2.is-on { background: var(--klm-ink) !important; color: #fff !important; border-color: var(--klm-ink); }
.klm-app .klm-credit-meter { display: flex; align-items: center; gap: 12px; }
.klm-app .klm-credit-bar { flex: 1; height: 10px; border-radius: 6px; background: #eef0ed; overflow: hidden; }
.klm-app .klm-credit-bar span { display: block; height: 100%; background: var(--klm-marker); border-radius: 6px; }
.klm-app .klm-credit-meter b { font-variant-numeric: tabular-nums; font-size: 14px; }
.klm-app .klm-set-sub { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--klm-rule); }
.klm-app .klm-set-sub h4 { font-size: 14.5px; font-weight: 650; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.klm-app .klm-set-sub p { font-size: 13.5px; color: var(--klm-slate) !important; line-height: 1.55; margin: 0 0 8px !important; }
.klm-app .klm-badge2 { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--klm-gwash); color: var(--klm-green) !important; }
.klm-app .klm-steps { margin: 0 0 12px; padding-left: 20px; font-size: 13.5px; color: var(--klm-slate) !important; line-height: 1.6; }
.klm-app .klm-steps b { color: var(--klm-ink) !important; }
.klm-app .klm-steps kbd { font-size: 11.5px; padding: 1px 5px; border: 1px solid var(--klm-rule); border-radius: 4px; background: var(--klm-paper); }
.klm-app .klm-bookmarklet {
  display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 20px; border-radius: 12px; cursor: grab;
  background: var(--klm-marker) !important; color: var(--klm-ink) !important; font-weight: 650; font-size: 15px;
  box-shadow: 0 2px 0 rgba(20,32,46,.15); border: 2px dashed rgba(20,32,46,.25);
}
.klm-app .klm-set-note { font-size: 12.5px !important; color: var(--klm-pale) !important; margin-top: 8px !important; }
.klm-app .klm-set-adv summary { list-style: none; cursor: pointer; display: flex; align-items: center; }
.klm-app .klm-set-adv summary::-webkit-details-marker { display: none; }
.klm-app .klm-set-adv summary h4 { margin: 0; }
.klm-app .klm-set-adv summary::after { content: '▾'; margin-left: auto; color: var(--klm-pale) !important; transition: transform 150ms; }
.klm-app .klm-set-adv[open] summary { margin-bottom: 10px; }
.klm-app .klm-set-adv[open] summary::after { transform: rotate(180deg); }
.klm-app .klm-copyfield { display: flex; align-items: center; gap: 4px; border: 1px solid var(--klm-rule); border-radius: 10px; padding: 3px 3px 3px 12px; background: var(--klm-paper) !important; }
.klm-app .klm-copyfield input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; height: 36px; outline: none; }
.klm-app .klm-copyfield .klm-icon-btn { width: 36px; height: 36px; }
.klm-app .klm-security { margin-top: 14px; padding: 14px; border-radius: 12px; background: #fbf6f5 !important; border: 1px solid #f0dcd9; }
.klm-app .klm-security b { font-size: 14px; }
.klm-app .klm-security p { margin: 6px 0 12px !important; font-size: 13px; }
.klm-app .klm-export { display: flex; gap: 8px; flex-wrap: wrap; }
.klm-app .klm-export a { text-decoration: none; }
.klm-app .klm-set-link {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; border-radius: 11px;
  font-size: 14.5px; text-align: left; text-decoration: none; background: transparent !important; color: var(--klm-ink) !important;
}
.klm-app .klm-set-link span { color: inherit !important; }
.klm-app .klm-set-link .klm-ic { color: var(--klm-slate) !important; }
.klm-app .klm-set-link:hover { background: #f4f5f2 !important; }
@media (max-width: 760px) {
  .klm-app .klm-settings { padding: 12px 12px 28px; gap: 12px; }
  .klm-app .klm-set-card { padding: 16px 14px; border-radius: 14px; }
  .klm-app .klm-export a { flex: 1 1 100%; }
  .klm-app .klm-stepper input { font-size: 18px; }
}

/* ---------- Listelerim: kategori çipleri + işlem çubuğu ---------- */
.klm-app #klm-list-cat-chips.klm-cat-chips {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 0 2px; margin-top: 4px; overflow: visible;
}
.klm-app .klm-cat-chip {
  display: inline-flex; align-items: center; gap: 7px; max-width: 240px;
  height: 34px; padding: 0 6px 0 13px; border-radius: 999px; font-size: 13.5px; font-weight: 500;
  border: 1px solid var(--klm-rule); background: var(--klm-card) !important; color: var(--klm-slate) !important;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.klm-app .klm-cat-chip-l { color: inherit !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.klm-app .klm-cat-chip b { flex-shrink: 0; font-size: 11.5px; font-weight: 650; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: #f1f2ef; color: var(--klm-slate) !important; }
.klm-app .klm-cat-chip:hover { border-color: #c3ccd4; color: var(--klm-ink) !important; }
.klm-app .klm-cat-chip.is-on { background: var(--klm-ink) !important; border-color: var(--klm-ink); color: #fff !important; }
.klm-app .klm-cat-chip.is-on b { background: rgba(255,255,255,.18); color: #fff !important; }
.klm-app .klm-cat-chip--add { padding: 0 13px; border-style: dashed; color: var(--klm-slate) !important; }
.klm-app .klm-cat-chip--add:hover { background: var(--klm-wash) !important; border-color: var(--klm-marker); }

.klm-app .klm-cat-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 14px 26px 6px; padding: 12px 14px; border-radius: 14px;
  background: var(--klm-card) !important; border: 1px solid var(--klm-rule);
}
.klm-app .klm-cat-bar-info { display: flex; flex-direction: column; min-width: 0; }
.klm-app .klm-cat-bar-name { font-family: var(--klm-serif); font-size: 18px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.klm-app .klm-cat-bar-meta { font-size: 12.5px; color: var(--klm-slate) !important; }
.klm-app .klm-cat-bar-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.klm-app .klm-cat-ic { border: 0 !important; width: 32px; height: 32px; border-radius: 8px !important; display: inline-flex; align-items: center; justify-content: center; font-size: 14px !important; padding: 0 !important; }
.klm-app .klm-cat-ic:hover { background: #f1f2ef !important; }

@media (max-width: 760px) {
  .klm-app #klm-list-cat-chips.klm-cat-chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
    margin: 4px -16px 0; padding: 12px 16px 4px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 24px), transparent 100%);
  }
  .klm-app #klm-list-cat-chips.klm-cat-chips::-webkit-scrollbar { display: none; }
  .klm-app .klm-cat-chip { flex-shrink: 0; scroll-snap-align: start; height: 36px; max-width: 70vw; }
  .klm-app .klm-cat-bar { margin: 10px 12px 4px; }
  .klm-app .klm-cat-bar-acts { width: 100%; }
  .klm-app .klm-cat-bar-acts .klm-btn2 { flex: 1; }
}
@media (hover: none) {
  .klm-app .klm-proof-word:hover { background: transparent; }
}
.klm-app .klm-list-group--solo .klm-entries { padding-top: 6px; }

/* Yapay zekası kapalı üye: alt menünün ortasında "Hazır listeler" */
.klm-app .klm-bottomnav-add--lib .klm-ic { width: 24px; height: 24px; stroke-width: 2; }
.klm-app .klm-set-card--note { background: var(--klm-wash) !important; border-color: rgba(255,210,63,.7); }
.klm-app .klm-set-card--note .klm-set-ic { background: #fff; }
.klm-app .klm-empty .klm-btn2 { margin-top: 4px; }

/* Üst çubuk: menü öğeleri liste hapının altına taşmasın */
.klm-app .klm-topnav { overflow: hidden; }
.klm-app .klm-scope-pill { flex-shrink: 1; }
@media (max-width: 1000px) and (min-width: 761px) {
  .klm-app .klm-topbar .klm-streak-x { display: none; }
  .klm-app .klm-scope-pill { max-width: 200px; }
}
@media (max-width: 960px) and (min-width: 761px) {
  .klm-app .klm-topnav .klm-nav-item { padding: 0 8px; font-size: 13.5px; }
  .klm-app .klm-scope-pill { max-width: 150px; }
}
.klm-app .klm-lang-pending { font-size: 12.5px; color: #8a6400 !important; background: var(--klm-wash) !important; display: inline-block; padding: 3px 9px; border-radius: 999px; margin: 6px 0 2px !important; }

/* ---------- Misafir widget: aynı kategorideki listeler arasında geçiş ---------- */
.klm-guest-app .klm-gsw { padding: 10px 14px; background: #1c2a3a !important; border-top: 1px solid rgba(255,255,255,.06); }
.klm-guest-app .klm-gsw-btn {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "cat meta" "name meta";
  align-items: center; column-gap: 12px; width: 100%; text-align: left;
  padding: 10px 14px; border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.14);
  transition: background .14s, border-color .14s;
}
.klm-guest-app .klm-gsw-btn:hover, .klm-guest-app.klm-gsw-open .klm-gsw-btn { background: rgba(255,255,255,.12) !important; border-color: rgba(255,210,63,.6); }
.klm-guest-app .klm-gsw-cat { grid-area: cat; font-size: 12px; color: #aebbc7 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.klm-guest-app .klm-gsw-name { grid-area: name; font-size: 16px; font-weight: 650; color: #fff !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.klm-guest-app .klm-gsw-meta { grid-area: meta; font-size: 12.5px; color: #c7d2dc !important; white-space: nowrap; }
.klm-guest-app .klm-gsw-meta b { color: var(--klm-marker) !important; }

.klm-guest-app .klm-gsw-bg { display: none; position: fixed; inset: 0; z-index: 100003; background: transparent !important; }
.klm-guest-app.klm-gsw-open .klm-gsw-bg { display: block; }
.klm-guest-app .klm-gsw-sheet {
  position: fixed; z-index: 100004; width: 360px; max-height: min(70vh, 520px); display: flex; flex-direction: column;
  padding: 8px; border-radius: 14px; background: var(--klm-card) !important; border: 1px solid var(--klm-rule);
  box-shadow: 0 18px 48px rgba(20,32,46,.18); visibility: hidden; opacity: 0; transform: translateY(-6px);
  transition: opacity .14s, transform .14s, visibility 0s linear .14s;
}
.klm-guest-app.klm-gsw-open .klm-gsw-sheet { visibility: visible; opacity: 1; transform: none; transition: opacity .14s, transform .14s; }
.klm-guest-app .klm-gsw-grip { display: none; }
.klm-guest-app .klm-gsw-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 8px; font-size: 14px; }
.klm-guest-app .klm-gsw-x { width: 32px; height: 32px; border-radius: 9px; background: #f1f2ef !important; color: var(--klm-slate) !important; }
.klm-guest-app .klm-gsw-body { overflow-y: auto; overscroll-behavior: contain; }
.klm-guest-app .klm-gsw-row { display: flex; align-items: center; gap: 4px; }
.klm-guest-app .klm-gsw-item {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 12px; border-radius: 10px; text-align: left; background: transparent !important; color: var(--klm-ink) !important; font-size: 14.5px;
}
.klm-guest-app .klm-gsw-item span { color: inherit !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.klm-guest-app .klm-gsw-item small { flex-shrink: 0; font-size: 12px; color: var(--klm-pale) !important; }
.klm-guest-app .klm-gsw-item:hover { background: #f4f5f2 !important; }
.klm-guest-app .klm-gsw-item.is-cur { background: var(--klm-wash) !important; font-weight: 650; }
.klm-guest-app .klm-gsw-item[data-glist="all"] { font-weight: 650; }
.klm-guest-app .klm-gsw-open { width: 34px; height: 34px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; color: var(--klm-pale) !important; text-decoration: none !important; }
.klm-guest-app .klm-gsw-open:hover { background: #f4f5f2 !important; color: var(--klm-ink) !important; }
.klm-guest-app .klm-gsw-sep { font-size: 12px; font-weight: 600; color: var(--klm-pale) !important; padding: 10px 12px 4px; border-top: 1px solid var(--klm-rule); margin-top: 4px; }
.klm-guest-app .klm-gsw-all { display: block; text-align: center; margin-top: 6px; padding: 11px; border-radius: 10px; background: #f4f5f2 !important; color: var(--klm-ink) !important; font-weight: 600; font-size: 14px; text-decoration: none !important; }

@media (max-width: 760px) {
  .klm-guest-app .klm-gsw { padding: 8px 10px; }
  .klm-guest-app .klm-gsw-btn { padding: 9px 12px; }
  .klm-guest-app .klm-gsw-name { font-size: 15px; }
  .klm-guest-app .klm-gsw-bg { background: rgba(20,32,46,.45) !important; }
  .klm-guest-app .klm-gsw-sheet {
    left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto; max-height: 82vh;
    border-radius: 22px 22px 0 0; border: 0; padding: 6px 12px calc(14px + env(safe-area-inset-bottom, 0px));
    opacity: 1; transform: translateY(105%); transition: transform .26s cubic-bezier(.2,.8,.2,1), visibility 0s linear .26s;
  }
  .klm-guest-app.klm-gsw-open .klm-gsw-sheet { transform: none; transition: transform .26s cubic-bezier(.2,.8,.2,1); }
  .klm-guest-app .klm-gsw-grip { display: block; width: 40px; height: 4px; border-radius: 4px; background: #d6dce1 !important; margin: 6px auto 8px; }
  .klm-guest-app .klm-gsw-item { padding: 14px 12px; font-size: 15.5px; }
}
.klm-guest-app a.klm-gsw-item, .klm-guest-app span.klm-gsw-item { text-decoration: none !important; }
.klm-guest-app a.klm-gsw-item small { color: var(--klm-slate) !important; }
.klm-guest-app span.klm-gsw-item.is-cur small { color: #8a6400 !important; }

/* ---------- kelimeleri indir ---------- */
.klm-app .klm-exp-formats { display: flex; flex-direction: column; gap: 8px; }
.klm-app .klm-exp-opt {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--klm-rule); background: var(--klm-card) !important; transition: border-color .12s, background .12s;
}
.klm-app .klm-exp-opt:hover { border-color: #c3ccd4; }
.klm-app .klm-exp-opt:has(input:checked) { border-color: var(--klm-marker); background: var(--klm-wash) !important; }
.klm-app .klm-exp-opt input { margin-top: 3px; accent-color: var(--klm-ink); width: 17px; height: 17px; flex-shrink: 0; }
.klm-app .klm-exp-opt span { display: flex; flex-direction: column; gap: 2px; }
.klm-app .klm-exp-opt b { font-size: 14.5px; }
.klm-app .klm-exp-opt small { font-size: 12.5px; color: var(--klm-slate) !important; }
@media (min-width: 761px) {
  .klm-app .klm-exp-formats--inline { flex-direction: row; }
  .klm-app .klm-exp-formats--inline .klm-exp-opt { flex: 1; }
}

/* ---------- v2.2 sade menü ---------- */
.klm-app .klm-topbar .klm-streak { background: transparent !important; border-radius: 999px; height: 32px; padding: 0 10px; cursor: pointer; transition: background .14s; }
.klm-app .klm-topbar .klm-streak:hover { background: rgba(255,255,255,.08) !important; }
.klm-app .klm-topbar .klm-streak:empty { display: none; }
.klm-app .klm-topbar .klm-pool-btn[data-on="0"] { display: none; } /* sepet boşken gizli */
.klm-app .klm-menu-sep { height: 1px; background: var(--klm-rule); margin: 6px 8px; }

/* Listeler: iki sekme */
.klm-app .klm-ltabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: #eef0ec !important; }
.klm-app .klm-ltab {
  height: 36px; padding: 0 16px; border-radius: 9px; font-size: 15px; font-weight: 600;
  color: var(--klm-slate) !important; background: transparent !important; white-space: nowrap; transition: background .12s, color .12s;
}
.klm-app .klm-ltab:hover { color: var(--klm-ink) !important; }
.klm-app .klm-ltab.is-on { background: var(--klm-card) !important; color: var(--klm-ink) !important; box-shadow: 0 1px 3px rgba(20,32,46,.12); }
.klm-app #klm-v-listelerim .klm-head-row, .klm-app #klm-v-paylasilan .klm-head-row { align-items: center; gap: 10px; flex-wrap: wrap; }

/* Liste kartı eylemleri: tek düğme + ⋯ */
.klm-app .klm-list-card .klm-acts { display: inline-flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
.klm-app .klm-list-card .klm-open-btn { height: 32px; }
.klm-app .klm-lmore .klm-entry-icon { font-size: 20px; line-height: 1; color: var(--klm-slate) !important; }
.klm-app .klm-lmore .klm-more-menu { min-width: 210px; }

@media (max-width: 760px) {
  .klm-app .klm-ltabs { flex: 1; }
  .klm-app .klm-ltab { flex: 1; padding: 0 10px; font-size: 14.5px; }
  .klm-app #klm-v-listelerim .klm-head-row #klm-list-new { width: 100%; order: 3; height: 40px; }
  .klm-app .klm-list-card .klm-side { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .klm-app .klm-list-card .klm-acts { margin-left: auto; }
}
.klm-app .klm-more.is-left .klm-more-menu { left: 0; right: auto; }
.klm-app .klm-list-group { overflow: visible; } /* ⋯ menüsü kırpılmasın */

/* ---------- Hazır listeyi defterime ekle ---------- */
.klm-app .klm-copy-q { font-size: 14px; color: var(--klm-slate) !important; margin: 0 0 10px !important; line-height: 1.5; }
.klm-app .klm-copy-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; max-height: 190px; overflow-y: auto; }
.klm-app .klm-copy-cat {
  height: 36px; padding: 0 14px; border-radius: 999px; font-size: 14px; border: 1px solid var(--klm-rule);
  background: var(--klm-card) !important; color: var(--klm-ink) !important; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.klm-app .klm-copy-cat:hover { border-color: #c3ccd4; }
.klm-app .klm-copy-cat.is-on { background: var(--klm-ink) !important; border-color: var(--klm-ink); color: #fff !important; }
.klm-app .klm-copy-cat--new { border-style: dashed; color: var(--klm-slate) !important; }
.klm-app .klm-copy-cat--new.is-on { border-style: solid; }
.klm-app .klm-copy-new { margin-top: 8px; }
.klm-app .klm-copy-new[hidden] { display: none; }
.klm-app .klm-copy-new input { height: 46px; font-size: 16px; border-radius: 10px; }
.klm-toast { width: max-content; max-width: min(92vw, 460px); }

/* Kısa karşılık önde, açıklama altında ve daha küçük */
.klm-app .klm-explain { font-size: 13.5px; line-height: 1.45; color: var(--klm-slate) !important; margin: 3px 0 4px !important; }
.klm-app .klm-answer .klm-explain { margin-top: 4px !important; }
.klm-app .klm-oto-seg.is-sub { font-size: 14px; color: var(--klm-slate) !important; padding-top: 4px; }

@media (max-width: 760px) {
  .klm-app .klm-drill-bar { flex-wrap: wrap; row-gap: 6px; }
}

/* ---------- Beceri rozetleri: ✓ Test · ✓ Yazma · ○ Dinleme ---------- */
.klm-app .klm-sks { display: inline-flex; gap: 3px; flex-wrap: nowrap; vertical-align: middle; }
.klm-app .klm-sk {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.5;
  background: #f1f2ef !important; color: var(--klm-pale) !important; border: 1px solid transparent;
}
.klm-app .klm-sk b { font-weight: 800; font-size: 11px; }
.klm-app .klm-sk[data-on="1"] { background: var(--klm-gwash) !important; color: var(--klm-green) !important; border-color: rgba(47,125,93,.25); }
.klm-app .klm-sks.is-full .klm-sk { background: var(--klm-green) !important; color: #fff !important; }
.klm-app .klm-sks--big .klm-sk { font-size: 13px; padding: 4px 10px; }
.klm-app .klm-meta-learned { color: var(--klm-green) !important; font-weight: 600; }

/* ---------- Alıştırma menüsü ---------- */
.klm-app .klm-mode--main { grid-column: 1 / -1; background: var(--klm-wash) !important; border-color: rgba(255,210,63,.7); }
.klm-app .klm-mode--main .klm-mode-t { font-size: 15.5px; }
.klm-app .klm-mode-sk { font-style: normal; font-size: 12px; margin-left: 2px; }
.klm-app .klm-learn-today { margin: 8px 0 0 !important; padding-top: 8px; border-top: 1px dashed var(--klm-rule); font-size: 13.5px; color: var(--klm-slate) !important; }
.klm-app .klm-learn-today.is-done { color: var(--klm-green) !important; }
.klm-app .klm-goal-presets small { font-weight: 500; opacity: .7; }
/* ---------- 🗣️ Konuşma öğretmeni ---------- */
.klm-app #klm-d-ogretmen { max-width: 1040px; }
.klm-app #klm-d-ogretmen #klm-coach-pick { max-width: 620px; margin: 0 auto; }
.klm-app #klm-coach-box { container-type: inline-size; } /* öğretmenin geniş ekranda iki sütunlu düzeni için */
.klm-app .klm-coach-h { margin: 4px 0 -4px !important; font-size: 15px; }
.klm-app .klm-lmodes--3 { grid-template-columns: repeat(3, 1fr); }
.klm-app .klm-coach-preview { padding: 12px 14px; border: 1px dashed var(--klm-rule); border-radius: 12px; background: var(--klm-card) !important; }
.klm-app .klm-coach-ph { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 14px; }
.klm-app .klm-cchips { display: flex; flex-wrap: wrap; gap: 5px; }
.klm-app .klm-cchip { padding: 3px 9px; border-radius: 999px; background: var(--klm-wash) !important; color: var(--klm-ink) !important; font-size: 13px; font-weight: 600; }
.klm-app #klm-coach-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: var(--klm-card) !important; border: 1px solid var(--klm-rule); font-size: 14px; }
.klm-app #klm-coach-bar[hidden], .klm-app #klm-coach-pick[hidden] { display: none !important; }
.klm-app #klm-coach-bar .klm-cchips--sm { flex: 1 1 260px; }
.klm-app .klm-cchips--sm .klm-cchip { font-size: 11.5px; padding: 2px 7px; }
@media (max-width: 760px) {
  .klm-app .klm-lmodes--3 { grid-template-columns: 1fr 1fr; }
}
.klm-app .klm-modes-sep { grid-column: 1 / -1; margin: 8px 8px 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--klm-pale) !important; }
.klm-app .klm-modes-note { grid-column: 1 / -1; margin: 6px 6px 2px !important; font-size: 12px; line-height: 1.45; color: var(--klm-slate) !important; }

/* ---------- 🎯 Öğren ---------- */
.klm-app .klm-learn-setup, .klm-app .klm-learn-done { display: flex; flex-direction: column; gap: 16px; }
.klm-app .klm-learn-overview { padding: 16px 18px; border: 1px solid var(--klm-rule); border-radius: 12px; background: var(--klm-card) !important; }
.klm-app .klm-learn-overview .klm-progress { margin: 10px 0 8px; }
.klm-app .klm-progress--lg { height: 8px !important; border-radius: 4px; }
.klm-app .klm-progress--lg span { background: var(--klm-green) !important; }
.klm-app .klm-learn-big { font-size: 15px; color: var(--klm-slate) !important; }
.klm-app .klm-learn-big b { font-size: 28px; color: var(--klm-ink) !important; font-family: var(--klm-serif); margin-right: 2px; }
.klm-app .klm-learn-rule { font-size: 14px; line-height: 1.55; color: var(--klm-slate) !important; margin: 0 !important; }
.klm-app .klm-learn-warn { font-size: 13.5px; padding: 10px 12px; border-radius: 10px; background: var(--klm-rwash) !important; color: var(--klm-red) !important; margin: 0 !important; }
.klm-app .klm-lmodes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.klm-app .klm-lmode {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--klm-rule);
  background: var(--klm-card) !important; color: var(--klm-ink) !important; cursor: pointer;
}
.klm-app .klm-lmode b { font-size: 14.5px; }
.klm-app .klm-lmode small { font-size: 12.5px; color: var(--klm-slate) !important; }
.klm-app .klm-lmode em { font-style: normal; font-size: 12px; color: var(--klm-pale) !important; }
.klm-app .klm-lmode.is-on { border-color: var(--klm-ink); background: var(--klm-wash) !important; }
.klm-app .klm-lmode:disabled { opacity: .45; cursor: default; }
.klm-app .klm-learn-go { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.klm-app .klm-learn-start { align-self: stretch; font-size: 17px; font-weight: 700; padding: 15px 20px; text-align: center; }
.klm-app .klm-learn-go-note { margin: 0 !important; text-align: center; font-size: 13px; color: var(--klm-slate) !important; }
.klm-app .klm-learn-allset { text-align: center; padding: 14px; border-radius: 12px; background: var(--klm-gwash) !important; }
.klm-app .klm-learn-allset h3 { font-size: 17px; margin-bottom: 6px !important; }
.klm-app .klm-learn-allset p { font-size: 13.5px; color: var(--klm-slate) !important; margin: 0 0 12px !important; }

.klm-app .klm-lstrip { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: -14px 0 18px; }
.klm-app .klm-lstrip-w { display: inline-flex; gap: 2px; padding: 3px; border-radius: 6px; background: #f1f2ef !important; }
.klm-app .klm-lstrip-w i { display: block; width: 7px; height: 7px; border-radius: 2px; background: #d6dbe0 !important; }
.klm-app .klm-lstrip-w i[data-on="1"] { background: var(--klm-green) !important; }
.klm-app .klm-lstrip-w.is-done { background: var(--klm-gwash) !important; }
.klm-app .klm-lstrip-n { margin-left: 4px; font-size: 12px; color: var(--klm-slate) !important; }

.klm-app .klm-lkind { display: inline-block; margin-bottom: 12px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: #f1f2ef !important; color: var(--klm-slate) !important; }
.klm-app .klm-lkind[data-k="test"] { background: #e8f0fb !important; color: #2b5d9b !important; }
.klm-app .klm-lkind[data-k="write"] { background: var(--klm-wash) !important; color: #7a5c00 !important; }
.klm-app .klm-lkind[data-k="listen"] { background: #f1e9fb !important; color: #6a3fa0 !important; }
.klm-app .klm-lagain { display: inline-block; margin-left: 6px; font-size: 12px; color: var(--klm-red) !important; font-weight: 600; }
.klm-app .klm-prompt--tr { font-family: var(--klm-sans); font-size: 26px; line-height: 1.3; }
.klm-app .klm-prompt .klm-speak { vertical-align: middle; }
.klm-app .klm-choice-k { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 10px; border-radius: 6px; font-size: 12px; font-weight: 700; background: #f1f2ef !important; color: var(--klm-slate) !important; }
.klm-app .klm-listen-btns { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.klm-app .klm-listen-play { font-size: 20px; padding: 15px 26px; }
.klm-app .klm-learn-idk { display: block; margin: 12px auto 0; font-size: 14px; color: var(--klm-slate) !important; }
.klm-app .klm-cloze-in input.is-ok { border-color: var(--klm-green) !important; background: var(--klm-gwash) !important; }
.klm-app .klm-cloze-in input.is-no { border-color: var(--klm-red) !important; background: var(--klm-rwash) !important; }
.klm-app .klm-learn-verdict.is-learned { border-color: var(--klm-green); background: var(--klm-gwash) !important; }
.klm-app .klm-learn-cheer { font-size: 15px; margin: 6px 0 !important; color: var(--klm-green) !important; }
.klm-app .klm-learn-mean { font-size: 14.5px; margin: 4px 0 8px !important; }
.klm-app .klm-learn-wsk { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 0 6px; font-size: 13px; color: var(--klm-slate) !important; }
.klm-app .klm-learn-wsk > span:first-child { font-weight: 600; color: var(--klm-ink) !important; }
.klm-app .klm-learn-done h3 { font-size: 22px; margin: 0 !important; }
.klm-app .klm-learn-sum { font-size: 15px; margin: 0 !important; color: var(--klm-slate) !important; }
.klm-app .klm-ldone { display: flex; flex-direction: column; border: 1px solid var(--klm-rule); border-radius: 12px; overflow: hidden; }
.klm-app .klm-ldone-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 10px 14px; border-top: 1px solid var(--klm-rule); background: var(--klm-card) !important; }
.klm-app .klm-ldone-row:first-child { border-top: 0; }
.klm-app .klm-ldone-row.is-new { background: #f5fbf7 !important; }
.klm-app .klm-ldone-w { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; }
.klm-app .klm-ldone-w b { font-size: 15.5px; }
.klm-app .klm-ldone-w small { font-size: 13px; color: var(--klm-slate) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.klm-app .klm-ldone-tag { font-size: 12.5px; font-weight: 700; color: var(--klm-green) !important; }
.klm-app .klm-learn-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.klm-app .klm-learn-acts .klm-learn-allset { flex: 1 1 100%; margin: 0 !important; }
.klm-app .klm-grades--2 { grid-template-columns: 1fr 1fr !important; }
.klm-app .klm-elim-skip { margin-top: 4px; font-weight: 600; }
.klm-app .klm-ctx { font-family: var(--klm-serif); font-size: 23px; line-height: 1.55; color: var(--klm-ink) !important; margin: 4px 0 10px !important; }
.klm-app .klm-ctx-mark { background: var(--klm-marker) !important; color: var(--klm-ink) !important; padding: 0 4px; border-radius: 4px; font-weight: 600; }
.klm-app .klm-ctx-q { font-size: 14px; color: var(--klm-slate) !important; }
.klm-app .klm-ctx-q i { font-family: var(--klm-serif); }
.klm-app .klm-ctx-tr { font-style: italic; }
@media (max-width: 760px) { .klm-app .klm-ctx { font-size: 19px; } }
.klm-app .klm-learn-exit { margin-left: 10px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--klm-rule) !important; background: var(--klm-card) !important; color: var(--klm-slate) !important; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.klm-app .klm-learn-exit:hover { color: var(--klm-ink) !important; border-color: var(--klm-ink) !important; }
.klm-app .klm-learn-other { align-self: center; font-size: 14px; color: var(--klm-slate) !important; }
.klm-app .klm-skill-stats { margin-top: 12px; }
@media (max-width: 760px) {
  .klm-app .klm-lmodes { grid-template-columns: 1fr 1fr; gap: 6px; }
  .klm-app .klm-lmode { padding: 10px 11px; gap: 2px; }
  .klm-app .klm-lmode b { font-size: 13.5px; }
  .klm-app .klm-lmode small { display: none; }
  .klm-app .klm-sk { padding: 2px 6px; font-size: 11px; }
  .klm-app .klm-prompt--tr { font-size: 22px; }
  .klm-app .klm-lstrip { margin-top: -6px; }
}

/* ---------- 📰 Yazı ve SEO ekranı ---------- */
.klm-app .klm-seo-overlay { z-index: 100008; }
.klm-app .klm-seo-sheet { max-width: 620px; max-height: 90vh; overflow-y: auto; overscroll-behavior: contain; }
.klm-app .klm-seo-meta { font-size: 13px; color: var(--klm-slate) !important; margin: -4px 0 14px; }
.klm-app .klm-seo-meta a { color: var(--klm-ink) !important; font-weight: 600; }
.klm-app .klm-seo-label { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 14px 0 6px; font-size: 13px; font-weight: 650; color: var(--klm-ink) !important; }
.klm-app .klm-seo-label small { font-weight: 400; color: var(--klm-pale) !important; font-size: 12px; }
.klm-app .klm-seo-count { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--klm-pale) !important; font-variant-numeric: tabular-nums; }
.klm-app .klm-seo-count.is-ok { color: var(--klm-green) !important; }
.klm-app .klm-seo-count.is-short, .klm-app .klm-seo-count.is-long { color: #b7791f !important; }
.klm-app .klm-seo-in {
  display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--klm-rule); border-radius: 10px;
  font: inherit; font-size: 15px; line-height: 1.45; background: var(--klm-card) !important; transition: border-color .12s, box-shadow .12s, background .3s;
}
.klm-app .klm-seo-in:focus { outline: none; border-color: #9aa8b5; box-shadow: 0 0 0 3px rgba(255,210,63,.3); }
.klm-app .klm-seo-in.is-filled, .klm-app #klm-seo-slug.is-filled { background: var(--klm-wash) !important; }
.klm-app textarea.klm-seo-in { resize: vertical; min-height: 64px; }
.klm-app .klm-seo-suggest-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.klm-app .klm-seo-suggest-row .klm-btn2 { height: 38px; }
.klm-app .klm-seo-suggest-row .is-busy .klm-ic { animation: klmSpin 900ms linear infinite; }
.klm-app .klm-seo-hint { font-size: 12.5px; color: var(--klm-pale) !important; }
.klm-app .klm-seo-sugs { margin-top: 10px; padding: 12px; border-radius: 12px; background: #fbfaf4 !important; border: 1px solid #efe6c4; display: flex; flex-direction: column; gap: 10px; }
.klm-app .klm-seo-sugs[hidden] { display: none; }
.klm-app .klm-seo-sg > b { display: block; font-size: 12px; color: var(--klm-slate) !important; margin-bottom: 5px; }
.klm-app .klm-seo-sg > div { display: flex; flex-wrap: wrap; gap: 6px; }
.klm-app .klm-seo-chip {
  text-align: left; padding: 7px 11px; border-radius: 10px; font-size: 13.5px; line-height: 1.35;
  border: 1px solid var(--klm-rule); background: var(--klm-card) !important; color: var(--klm-ink) !important;
}
.klm-app .klm-seo-chip:hover { border-color: var(--klm-marker); }
.klm-app .klm-seo-chip.is-on { border-color: var(--klm-ink); background: var(--klm-wash) !important; }
.klm-app .klm-seo-chip--block { width: 100%; }
.klm-app .klm-seo-chip small { color: var(--klm-pale) !important; font-size: 11px; margin-left: 4px; }
.klm-app .klm-seo-tips ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--klm-slate) !important; line-height: 1.5; }
.klm-app .klm-seo-slug { display: flex; align-items: center; border: 1px solid var(--klm-rule); border-radius: 10px; overflow: hidden; background: var(--klm-card) !important; }
.klm-app .klm-seo-slug span { padding: 0 8px 0 12px; font-size: 12.5px; color: var(--klm-pale) !important; white-space: nowrap; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.klm-app .klm-seo-slug input { flex: 1; min-width: 0; border: 0 !important; outline: none; padding: 10px 12px 10px 0; font-size: 14.5px; background: transparent !important; }
.klm-app .klm-seo-preview { margin-top: 16px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--klm-rule); background: #fff !important; font-family: Arial, sans-serif; }
.klm-app .klm-seo-pv-url { font-size: 12.5px; color: #4d5156 !important; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.klm-app .klm-seo-pv-title { font-size: 19px; line-height: 1.3; color: #1a0dab !important; margin-bottom: 3px; }
.klm-app .klm-seo-pv-desc { font-size: 13.5px; line-height: 1.5; color: #4d5156 !important; }
.klm-app .klm-seo-pv-desc.is-empty { font-style: italic; color: var(--klm-pale) !important; }
.klm-app .klm-seo-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 13.5px; cursor: pointer; }
.klm-app .klm-seo-check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--klm-ink); flex-shrink: 0; }
.klm-app .klm-seo-check small { color: var(--klm-pale) !important; }
@media (max-width: 760px) {
  .klm-app .klm-seo-sheet { max-height: 94vh; }
  .klm-app .klm-seo-in { font-size: 16px; }
}
.klm-app .klm-explain-in { font-size: .82em; font-weight: 400; color: var(--klm-slate) !important; }

/* ---------- Misafir widget: 📖 Kelimeler listesi ---------- */
.klm-app .klm-wl-search { margin: 0 0 12px; }
.klm-app .klm-wl { display: flex; flex-direction: column; gap: 8px; }
.klm-app .klm-wl-row {
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--klm-rule); background: var(--klm-card) !important;
  cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.klm-app .klm-wl-row:hover { border-color: #d3d9de; }
.klm-app .klm-wl-row.is-open { border-color: var(--klm-marker); box-shadow: 0 6px 18px rgba(20,32,46,.06); }
.klm-app .klm-wl-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.klm-app .klm-wl-head .klm-word { font-size: 20px; }
.klm-app .klm-wl-chev { margin-left: auto; color: var(--klm-pale) !important; transition: transform .15s; font-size: 13px; }
.klm-app .klm-wl-row.is-open .klm-wl-chev { transform: rotate(180deg); }
.klm-app .klm-wl-row .klm-meaning { margin: 4px 0 2px !important; font-size: 15.5px; }
.klm-app .klm-wl-row .klm-ex { margin-top: 6px; }
.klm-app .klm-wl-more { display: none; }
.klm-app .klm-wl-row.is-open .klm-wl-more { display: block; }
.klm-app .klm-wl-next { text-align: center; margin: 18px 0 4px !important; font-size: 14px; color: var(--klm-slate) !important; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .klm-app .klm-wl-row { padding: 11px 12px; }
  .klm-app .klm-wl-head .klm-word { font-size: 18px; }
}
.klm-app .klm-wl-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.klm-app .klm-wl-tools .klm-wl-search { flex: 1; min-width: 180px; margin: 0; }
.klm-app .klm-wl-seg .klm-seg-btn { font-size: 13px; padding: 0 12px; }
.klm-app .klm-wl-all { font-size: 13px; }
.klm-app .klm-wl-list { border: 1px solid var(--klm-rule); border-radius: 12px; background: var(--klm-card) !important; overflow: hidden; }
.klm-app .klm-wl-lrow { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.3fr); align-items: baseline; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--klm-rule); }
.klm-app .klm-wl-lrow:first-child { border-top: 0; }
.klm-app .klm-wl-lrow:nth-child(even) { background: #fbfbf9 !important; }
.klm-app .klm-wl-en { font-family: var(--klm-serif); font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.klm-app .klm-wl-tr { font-size: 14.5px; color: var(--klm-slate) !important; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .klm-app .klm-wl-tools .klm-wl-search { flex-basis: 100%; }
  .klm-app .klm-wl-seg { flex: 1; }
  .klm-app .klm-wl-seg .klm-seg-btn { flex: 1; justify-content: center; }
  .klm-app .klm-wl-lrow { grid-template-columns: auto 1fr; row-gap: 2px; padding: 10px 12px; }
  .klm-app .klm-wl-lrow .klm-wl-tr { grid-column: 2; }
}

/* ---------- Liste silme penceresi ---------- */
.klm-app .klm-del-opts { display: flex; flex-direction: column; gap: 8px; }
.klm-app .klm-del-sub { display: flex; flex-direction: column; gap: 8px; margin: -2px 0 4px 28px; }
.klm-app .klm-del-sub[hidden] { display: none; }
.klm-app .klm-del-sub .klm-list-select, .klm-app .klm-del-sub .klm-search { margin: 0; height: 42px; }
.klm-app .klm-del-sub [hidden] { display: none; }
.klm-app .klm-exp-opt--danger b { color: var(--klm-red) !important; }
.klm-app .klm-exp-opt--danger:has(input:checked) { border-color: #e6b3ad; background: var(--klm-rwash) !important; }
.klm-app .klm-modal-acts .klm-btn.klm-btn--danger { background: var(--klm-red) !important; color: #fff !important; border-color: var(--klm-red) !important; }
.klm-app .klm-modal-box { max-height: 90vh; overflow-y: auto; }

/* ---------- Bildiklerini ele (eleme) ---------- */
.klm-app .klm-elim-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; padding: 10px 12px; border-radius: 14px; background: var(--klm-wash) !important; border: 1px solid #f0dc8c; font-size: 14px; color: var(--klm-ink) !important; }
.klm-app .klm-elim-banner[hidden] { display: none; }
.klm-app .klm-elim-banner-acts { display: inline-flex; align-items: center; gap: 6px; }
.klm-app .klm-known-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 8px 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--klm-gwash, #e4f2ea) !important; font-size: 13.5px; color: var(--klm-ink) !important; }
.klm-app .klm-meta-known { display: inline; padding: 0 !important; border: 0 !important; background: none !important; font: inherit; font-weight: 650; color: var(--klm-green, #2f7d5d) !important; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.klm-app .klm-chip--known[hidden] { display: none; }
.klm-app .klm-known-badge { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--klm-gwash, #e4f2ea); color: var(--klm-green, #2f7d5d); font-size: 12px; font-weight: 700; }
.klm-app .klm-stat-known { color: var(--klm-green, #2f7d5d); }

.klm-app .klm-elim-overlay { z-index: 100010; }
.klm-app .klm-elim-overlay[data-ready] .klm-fab-sheet { animation: none; }
.klm-app .klm-elim-sheet { max-width: 520px; max-height: 92vh; overflow-y: auto; overscroll-behavior: contain; }
.klm-app .klm-elim-prog { height: 6px; border-radius: 6px; background: #eceee9; overflow: hidden; margin: 2px 0 10px; }
.klm-app .klm-elim-prog span { display: block; height: 100%; background: var(--klm-marker); transition: width .25s; }
.klm-app .klm-elim-count { display: flex; justify-content: space-between; font-size: 13px; color: var(--klm-slate) !important; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.klm-app .klm-elim-hero { display: flex; gap: 10px; margin-bottom: 10px; }
.klm-app .klm-elim-num { flex: 1; padding: 12px 14px; border-radius: 14px; background: #f4f5f2 !important; text-align: center; }
.klm-app .klm-elim-num b { display: block; font-size: 30px; line-height: 1.1; color: var(--klm-ink) !important; }
.klm-app .klm-elim-num span { font-size: 13px; color: var(--klm-slate) !important; }
.klm-app .klm-elim-num.is-known { background: var(--klm-gwash, #e4f2ea) !important; }
.klm-app .klm-elim-num.is-known b { color: var(--klm-green, #2f7d5d) !important; }
.klm-app .klm-elim-lead { margin: 0 0 14px !important; font-size: 14.5px; line-height: 1.55; color: var(--klm-slate) !important; }
.klm-app .klm-elim-lead b { color: var(--klm-ink) !important; }
.klm-app .klm-elim-modes { display: flex; flex-direction: column; gap: 8px; }
.klm-app .klm-elim-mode { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 14px !important; border-radius: 14px; border: 1px solid var(--klm-rule) !important; background: var(--klm-card) !important; text-align: left; color: var(--klm-ink) !important; transition: border-color .12s, background .12s; }
.klm-app .klm-elim-mode:hover:not(:disabled) { border-color: var(--klm-marker) !important; background: #fffdf3 !important; }
.klm-app .klm-elim-mode:disabled { opacity: .45; }
.klm-app .klm-elim-mode .ic { font-size: 24px; line-height: 1; width: 36px; text-align: center; flex-shrink: 0; }
.klm-app .klm-elim-mode b { display: block; font-size: 16px; margin-bottom: 2px; }
.klm-app .klm-elim-mode small { font-size: 13px; line-height: 1.4; color: var(--klm-slate) !important; }
.klm-app .klm-elim-restore, .klm-app .klm-elim-link { display: inline-block; margin-top: 12px; padding: 6px 4px !important; font-size: 13.5px; font-weight: 600; color: var(--klm-slate) !important; background: none !important; border: 0 !important; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.klm-app .klm-elim-link:disabled { opacity: .4; cursor: default; }
.klm-app .klm-elim-empty { padding: 26px 10px; text-align: center; font-size: 16px; }
.klm-app .klm-elim-card { padding: 26px 16px 20px; margin-bottom: 14px; border-radius: 18px; background: #f7f8f5 !important; text-align: center; border: 1px solid var(--klm-rule); }
.klm-app .klm-elim-card--q { padding: 20px 16px 14px; margin-bottom: 10px; }
.klm-app .klm-elim-word { font-family: var(--klm-serif); font-size: 34px; font-weight: 700; line-height: 1.15; color: var(--klm-ink) !important; overflow-wrap: anywhere; }
.klm-app .klm-elim-word .klm-speak-sm { font-size: 18px; vertical-align: middle; margin-left: 6px; }
.klm-app .klm-elim-sub { margin-top: 6px; font-size: 14px; color: var(--klm-slate) !important; }
.klm-app .klm-elim-mean { margin-top: 14px; font-size: 20px; font-weight: 600; color: var(--klm-ink) !important; }
.klm-app .klm-elim-peek { margin-top: 14px; padding: 8px 14px !important; border-radius: 999px; border: 1px dashed #c3ccd4 !important; background: transparent !important; font-size: 14px; color: var(--klm-slate) !important; }
.klm-app .klm-elim-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.klm-app .klm-elim-btn { height: 56px; border-radius: 16px; font-size: 16px; font-weight: 700; border: 2px solid transparent !important; padding: 0 10px !important; }
.klm-app .klm-elim-btn--keep { background: var(--klm-card) !important; border-color: var(--klm-rule) !important; color: var(--klm-ink) !important; }
.klm-app .klm-elim-btn--known { background: var(--klm-green, #2f7d5d) !important; color: #fff !important; }
.klm-app .klm-elim-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.klm-app .klm-elim-foot .klm-elim-link { margin-top: 0; }
.klm-app .klm-elim-hint { font-size: 12px; color: var(--klm-pale) !important; }
.klm-app .klm-elim-q { margin: 0 0 8px !important; font-size: 13.5px; color: var(--klm-slate) !important; text-align: center; }
.klm-app .klm-elim-opts { display: flex; flex-direction: column; gap: 8px; }
.klm-app .klm-elim-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px !important; border-radius: 14px; border: 1.5px solid var(--klm-rule) !important; background: var(--klm-card) !important; text-align: left; font-size: 16px; color: var(--klm-ink) !important; }
.klm-app .klm-elim-opt i { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: #f1f2ef; font-size: 13px; font-style: normal; font-weight: 700; color: var(--klm-slate); }
.klm-app .klm-elim-opt:hover:not(:disabled) { border-color: #b9c3cc !important; }
.klm-app .klm-elim-opt.is-ok { border-color: var(--klm-green, #2f7d5d) !important; background: var(--klm-gwash, #e4f2ea) !important; }
.klm-app .klm-elim-opt.is-bad { border-color: var(--klm-red, #b3412f) !important; background: #fbe9e7 !important; }
.klm-app .klm-elim-opt.is-dim { opacity: .5; }
.klm-app .klm-elim-fb { margin-top: 10px; padding: 10px 12px; border-radius: 12px; font-size: 14.5px; font-weight: 600; }
.klm-app .klm-elim-fb[hidden] { display: none; }
.klm-app .klm-elim-fb.is-ok { background: var(--klm-gwash, #e4f2ea); color: var(--klm-green, #2f7d5d); }
.klm-app .klm-elim-fb.is-bad { background: #fbe9e7; color: #8f2f22; }
.klm-app .klm-elim-next { margin-left: 8px; padding: 6px 12px !important; border-radius: 999px; background: var(--klm-ink) !important; color: #fff !important; font-size: 13px; font-weight: 700; }
.klm-app .klm-elim-skip { padding: 10px 14px !important; border-radius: 12px; border: 1px dashed #c3ccd4 !important; background: transparent !important; font-size: 14.5px; font-weight: 600; color: var(--klm-slate) !important; }
.klm-app .klm-elim-skip[hidden] { display: none; }
.klm-app .klm-elim-final { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.klm-app .klm-elim-final .klm-elim-link { align-self: center; }
@media (max-width: 760px) {
  .klm-app .klm-elim-overlay .klm-fab-sheet { border-radius: 22px 22px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .klm-app .klm-elim-word { font-size: 30px; }
  .klm-app .klm-elim-hint { display: none; }
}

/* ---------- Seçim modu: sadece İngilizce; 👁 ile anlam 1 sn görünür ---------- */
.klm-app .klm-peek-btn { display: none; }
.klm-app .klm-entries.is-pickmode .klm-peek-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0 !important; margin-left: 2px;
  border-radius: 50%; border: 1px solid var(--klm-rule) !important; background: var(--klm-card) !important; color: var(--klm-slate) !important; flex-shrink: 0;
  transition: background .12s, color .12s, border-color .12s;
}
.klm-app .klm-entries.is-pickmode .klm-peek-btn svg { width: 18px; height: 18px; display: block; flex-shrink: 0; }
.klm-app .klm-entries.is-pickmode .klm-peek-btn:hover { border-color: var(--klm-marker) !important; color: var(--klm-ink) !important; }
.klm-app .klm-entries.is-pickmode .klm-entry.is-peek .klm-peek-btn { background: var(--klm-marker) !important; border-color: var(--klm-marker) !important; color: var(--klm-ink) !important; }

/* anlam, örnek, not, etiket, araçlar ve istatistik gizli; yalnızca kelime satırı kalır */
.klm-app .klm-entries.is-pickmode .klm-entry .klm-meaning,
.klm-app .klm-entries.is-pickmode .klm-entry .klm-meaning-en,
.klm-app .klm-entries.is-pickmode .klm-entry .klm-ex,
.klm-app .klm-entries.is-pickmode .klm-entry .klm-nuance,
.klm-app .klm-entries.is-pickmode .klm-entry .klm-tags,
.klm-app .klm-entries.is-pickmode .klm-entry .klm-manual-ex-box,
.klm-app .klm-entries.is-pickmode .klm-entry .klm-pending,
.klm-app .klm-entries.is-pickmode .klm-entry .klm-lang-pending,
.klm-app .klm-entries.is-pickmode .klm-entry .klm-entry-foot,
.klm-app .klm-entries.is-pickmode .klm-entry .klm-side,
.klm-app .klm-entries.is-pickmode .klm-entry .klm-entry-tools,
.klm-app .klm-entries.is-pickmode .klm-entry .klm-ipa,
.klm-app .klm-entries.is-pickmode .klm-entry .klm-cefr,
.klm-app .klm-entries.is-pickmode .klm-entry .klm-tag--list,
.klm-app .klm-entries.is-pickmode .klm-entry .klm-sks { display: none !important; }
.klm-app .klm-entries.is-pickmode .klm-entry { padding-top: 10px; padding-bottom: 10px; cursor: pointer; }
.klm-app .klm-entries.is-pickmode .klm-entry .klm-word { font-size: 20px; }
.klm-app .klm-entries.is-pickmode .klm-entry.is-selected { background: #fffdf3 !important; border-color: var(--klm-marker) !important; }

/* 👁 basılınca yalnızca anlam, 1 saniyelik azalan çubukla görünür */
.klm-app .klm-entries.is-pickmode .klm-entry.is-peek .klm-meaning { display: block !important; margin: 6px 0 0 !important; padding: 8px 12px; border-radius: 10px; background: var(--klm-wash) !important; font-size: 17px; font-weight: 600; color: var(--klm-ink) !important; position: relative; overflow: hidden; }
.klm-app .klm-entries.is-pickmode .klm-entry.is-peek .klm-meaning::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--klm-marker); animation: klmPeekBar 1s linear forwards; }
@keyframes klmPeekBar { from { width: 100%; } to { width: 0; } }
.klm-app .klm-pick-hint { margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: #f4f5f2 !important; font-size: 13px; color: var(--klm-slate) !important; line-height: 1.45; }
.klm-app .klm-pick-hint b { color: var(--klm-ink) !important; }

/* ---------- Listelerim: işlem yapılan liste kısa süre vurgulanır ---------- */
.klm-app .klm-list-card.is-flash { animation: klmFlash 2.2s ease-out; }
@keyframes klmFlash {
  0%, 35% { box-shadow: 0 0 0 3px var(--klm-marker), 0 10px 26px rgba(20,32,46,.14); background: #fffbe6 !important; }
  100% { box-shadow: 0 0 0 0 rgba(255,210,63,0); }
}

/* ziyaretçi karşılama (giriş duvarı yerine) */
.klm-guesthub{max-width:1040px;margin:0 auto}
.klm-guesthub-hero{background:var(--klm-card,#fff);border:1px solid #e3e5e0;border-radius:18px;padding:22px 20px;margin-bottom:18px;text-align:center}
.klm-guesthub-hero h2{margin:0 0 6px;font-size:26px}
.klm-guesthub-hero p{margin:6px 0;color:#34404d}
.klm-guesthub-sub{font-size:14px;color:#5b6b7c !important}
.klm-guesthub-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.klm-guesthub-acts .klm-btn{text-decoration:none}

/* ---------- Misafir widget: çalışma türü şeridi (her zaman görünür) ---------- */
.klm-guest-app .klm-tabs-scroll { display: none !important; } /* eski açılır menü; yerine şerit var */
.klm-guest-app .klm-tabs { justify-content: space-between; }
.klm-gact {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 20;
  background: #fff;
  border-bottom: 1px solid var(--klm-rule);
  box-shadow: 0 6px 12px -10px rgba(20, 32, 46, .35);
  padding: 8px 0 0;
}
.klm-gact-lab { padding: 0 14px 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--klm-slate) !important; }
.klm-gact-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 14px 10px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  /* sağda "devamı var" ipucu */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.klm-gact-row::-webkit-scrollbar { display: none; }
.klm-gact-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1.5px solid var(--klm-rule) !important;
  background: #fff !important;
  color: var(--klm-ink) !important;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .08s;
}
.klm-gact-chip:hover { border-color: var(--klm-ink) !important; }
.klm-gact-chip:active { transform: scale(.97); }
.klm-gact-chip.is-on { background: var(--klm-marker) !important; border-color: var(--klm-marker) !important; font-weight: 750; box-shadow: 0 1px 0 rgba(20,32,46,.18); }
@media (min-width: 900px) {
  /* geniş ekranda hepsi alt alta sarılarak görünsün */
  .klm-gact-row { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; }
}

/* Geniş görünüm açıkken sayfa kaydırması kilitli */
html.klm-lock, html.klm-lock body { overflow: hidden !important; }

/* ---------- Görünüm kontrolleri (Geniş / Tam ekran / çıkış) – her yerde aynı ---------- */
.klm-vctl { display: inline-flex; gap: 4px; padding: 3px; background: #0f2f33; border-radius: 999px; flex: none; }
.klm-vbtn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px; color: #e6f4f1; font: 600 12.5px/1 inherit; cursor: pointer; white-space: nowrap; }
.klm-vbtn:hover { background: rgba(255,255,255,.14); }
.klm-vbtn:focus-visible { outline: 2px solid #ffd54a; outline-offset: 1px; }
.klm-vbtn .klm-vi { display: inline-flex; width: 16px; height: 16px; }
.klm-vbtn .klm-vi svg { width: 16px; height: 16px; }
.klm-vbtn.is-exit { background: #ffd54a; color: #1b1b1b; }
.klm-app[data-view="full"] #klm-wide-btn, #klm-guest-app[data-view="full"] #klm-wide-btn { display: none; }
/* Üst çubuk sade kalsın: görünüm düğmeleri her ekranda yalnızca ikon (adı üzerine gelince görünür) */
.klm-vbtn .klm-vl { display: none !important; }
.klm-vbtn { width: 32px; padding: 0 !important; justify-content: center; }
.klm-vctl .klm-vbtn { color: #e6f4f1 !important; background: transparent; }
.klm-vctl .klm-vbtn:hover { background: rgba(255,255,255,.14); }
.klm-vctl .klm-vbtn.is-exit { background: #ffd54a !important; color: #1b1b1b !important; }
.klm-vctl .klm-vbtn svg, .klm-vctl .klm-vbtn .klm-vi { color: inherit !important; }
.klm-vctl .klm-vl { color: inherit !important; font: inherit; }

/* ==================================================================
   Öğrenilen dil: dil hapı, dil menüsü, özel harf düğmeleri, artikel notu
   ================================================================== */
.klm-app .klm-study-pill {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  height: 36px; padding: 0 9px 0 10px; border-radius: 999px;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.13);
  color: #dfe7ee !important; font-size: 13.5px;
  transition: background 140ms;
}
.klm-app .klm-study-pill:hover, .klm-app .klm-study-pill.is-active { background: rgba(255,255,255,.13) !important; }
.klm-app .klm-study-pill .klm-study-flag { font-size: 17px; line-height: 1; }
.klm-app .klm-study-pill-name { color: inherit !important; white-space: nowrap; }
.klm-app .klm-study-pill .klm-ic { width: 14px; height: 14px; opacity: .55; }
.klm-app .klm-pop--study { width: 250px; }
.klm-app .klm-pop--study .klm-study-flag { font-size: 20px; line-height: 1; width: 24px; text-align: center; }
.klm-app .klm-pop--study .klm-study-cur { margin-left: auto; color: var(--klm-green) !important; }
.klm-app .klm-pop--study .klm-modes-note { margin: 6px 10px 4px; }
.klm-app .klm-study-choices { display: flex; flex-wrap: wrap; gap: 8px; }

.klm-app .klm-charkeys { margin: 10px 0 2px; }
.klm-app .klm-kb-body { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.klm-app .klm-kb-row { display: flex; flex-wrap: nowrap; justify-content: center; gap: 6px; max-width: 100%; }
.klm-app .klm-charkeys--full .klm-kb-body { padding: 8px 0 4px; align-items: stretch; }
.klm-app .klm-charkeys--full .klm-kb-row { width: 100%; }
.klm-app .klm-charkeys--full .klm-kb-row { gap: 5px; }
.klm-app .klm-charkeys--full .klm-charkey { min-width: 0; flex: 1 1 0; max-width: 44px; padding: 0; }
.klm-app .klm-charkeys--full .klm-charkey--fn { flex: 1.5 1 0; max-width: 64px; }
.klm-app .klm-charkeys--full .klm-charkey--space { flex: 6 1 0; max-width: 260px; }
.klm-app .klm-charkeys.is-collapsed .klm-kb-body { display: none; }
.klm-app .klm-kb-toggle {
  display: flex; align-items: center; gap: 6px; margin: 0 auto; padding: 5px 12px; border-radius: 999px;
  background: transparent !important; border: 1px solid var(--klm-rule); color: var(--klm-ink) !important;
  font-size: 13px; cursor: pointer;
}
.klm-app .klm-kb-toggle:hover { background: var(--klm-wash) !important; }
.klm-app .klm-charkey--fn { background: var(--klm-wash) !important; font-size: 16px; }
.klm-app .klm-charkey--fn[aria-pressed="true"] { background: var(--klm-green) !important; color: #fff !important; border-color: transparent; }
.klm-app .klm-charkeys.is-upper .klm-charkey[data-ch] { text-transform: none; }
.klm-app .klm-charkey {
  min-width: 38px; height: 38px; padding: 0 8px; border-radius: 10px;
  background: var(--klm-card) !important; border: 1px solid var(--klm-rule);
  color: var(--klm-ink) !important; font-size: 17px; line-height: 1; cursor: pointer;
  box-shadow: 0 1px 0 var(--klm-rule);
}
.klm-app .klm-charkey:hover { background: var(--klm-wash) !important; border-color: rgba(255,210,63,.7); }
.klm-app .klm-charkey:active { transform: translateY(1px); box-shadow: none; }
.klm-app .klm-charkey:disabled { opacity: .45; cursor: default; }
.klm-app .klm-art-note { background: var(--klm-rwash) !important; border-radius: 10px; padding: 8px 12px !important; }

@media (max-width: 1280px) and (min-width: 761px) {
  .klm-app .klm-study-pill-name { display: none; }
}
@media (max-width: 760px) {
  .klm-app .klm-study-pill { height: 34px; padding: 0 6px 0 8px; gap: 3px; }
  .klm-app .klm-study-pill-name { display: none; }
  .klm-app .klm-pop--study { left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto; max-height: 84vh; border-radius: 22px 22px 0 0; border: 0; padding: 6px 12px calc(18px + env(safe-area-inset-bottom, 0px)); opacity: 1; transform: translateY(100%); transition: transform 260ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 260ms; box-shadow: 0 -12px 40px rgba(20,32,46,.2); }
  .klm-app .klm-pop--study.is-open { transform: none; transition: transform 260ms cubic-bezier(.2,.8,.2,1); }
  .klm-app .klm-charkey { min-width: 40px; height: 40px; }
  .klm-app .klm-charkeys--full .klm-charkey { height: 44px; font-size: 18px; min-width: 0; }
}

/* ---------- Liste seviyesi (A1–C2) ---------- */
.klm-app .klm-list-lvl { margin-left: 6px; vertical-align: middle; cursor: help; }
.klm-app .klm-lvl-chips { margin-top: 8px; align-items: center; }
.klm-app .klm-lvl-chips-l { font-size: 12.5px; color: var(--klm-slate) !important; margin-right: 2px; white-space: nowrap; }
.klm-app .klm-lvl-chips[hidden] { display: none !important; }

/* Kalıbın ana dildeki anlamı */
.klm-app .klm-tag .klm-tag-m { font-style: normal; opacity: .72; }
/* Kalıplar her zaman küçük, yan yana etiket (tema stilleri satıra çevirmesin) */
.klm-app .klm-tags { display: flex !important; flex-wrap: wrap !important; gap: 5px !important; }
.klm-app .klm-tags > .klm-tag { display: inline-block !important; width: auto !important; flex: 0 0 auto !important; }

/* ---------- ✏️ Kelime düzenleyici ---------- */
.klm-app .klm-modal-box.is-wide { max-width: 680px; }
.klm-app .klm-ed { display: flex; flex-direction: column; gap: 4px; }
.klm-app .klm-ed-l { display: block; margin: 10px 0 5px; font-size: 13px; font-weight: 600; color: var(--klm-slate) !important; }
.klm-app .klm-ed .klm-search, .klm-app .klm-ed .klm-ctx-box { width: 100%; max-width: none; margin: 0; }
.klm-app .klm-ed-head { display: grid; grid-template-columns: 130px 1fr; gap: 8px; }
.klm-app .klm-ed-grid { display: grid; grid-template-columns: 1fr 1fr 110px; gap: 8px; }
.klm-app .klm-ed-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.klm-app .klm-ed-row { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--klm-rule); border-radius: 10px; background: var(--klm-paper) !important; }
.klm-app .klm-ed-row--inline { flex-direction: row; }
.klm-app .klm-ed-row--inline > input { flex: 1; min-width: 0; }
.klm-app .klm-ed-pair { display: flex; gap: 6px; align-items: center; flex: 1; min-width: 0; }
.klm-app .klm-ed-pair input { flex: 1; min-width: 0; }
.klm-app .klm-ed-x { flex: none; width: 34px; height: 34px; border-radius: 8px; background: transparent !important; color: var(--klm-pale) !important; border: 1px solid var(--klm-rule); cursor: pointer; }
.klm-app .klm-ed-x:hover { color: var(--klm-red) !important; border-color: var(--klm-red); }
.klm-app .klm-ed-aibox { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--klm-wash) !important; }
.klm-app .klm-ed-aibtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
@media (max-width: 760px) {
  .klm-app .klm-ed-grid { grid-template-columns: 1fr 1fr; }
  .klm-app .klm-ed-row--inline { flex-direction: column; }
}
.klm-app .klm-ed .klm-ai-btn { position: static; flex: none; width: 34px; height: 34px; }

/* Öğren: "Turdan çık" şeridin solunda, Devam'dan uzakta */
.klm-app .klm-lstrip .klm-learn-exit { margin: 0 10px 0 0; padding: 3px 10px; font-size: 12px; flex: none; }

/* Ödev bağlantısıyla gelen üyeye hazır liste notu */
.klm-assign-note { margin: 12px 16px 4px; padding: 12px 14px; border-radius: 12px; background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a5f; font-size: 14px; line-height: 1.5; }

/* 🖨️ PDF / yazdır seçenekleri (indir penceresi) */
.klm-print-opts { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--klm-rule, #e3e6ea); border-radius: 12px; }
.klm-print-row { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 8px; }
.klm-print-row:last-child { margin-bottom: 0; }
.klm-print-row label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.klm-print-row small { color: var(--klm-slate, #5b6b7c); }
#klm-exp-print[hidden] { display: none; }

/* Herkese açık liste: üst çubuktaki PDF bağlantısı (Geniş / Tam ekran düğmelerinin yanında) */
.klm-guest-app a.klm-gpdf { text-decoration: none !important; }
.klm-guest-app a.klm-gpdf .klm-vi { font-style: normal; font-size: 14px; line-height: 1; }

/* Görünür "⬇ İndir" düğmeleri */
.klm-dl-btn { white-space: nowrap; }

/* Ana menüde ⬇ İndir: simge diğer menü simgeleriyle aynı genişlikte */
.klm-menu-item .klm-menu-ic-txt { display: inline-flex; width: 18px; justify-content: center; font-size: 15px; line-height: 1; }

/* ---------- 🖼️ Kelime resimleri ---------- */
.klm-app .klm-wimg { float: right; width: 150px; margin: 2px 0 8px 16px; padding: 0; }
.klm-app .klm-wimg img { display: block; width: 150px; height: 150px; object-fit: cover; border-radius: 12px; background: #f1f3f5; border: 1px solid var(--klm-rule, #e3e6ea); }
.klm-app .klm-wimg figcaption { font-size: 10px; line-height: 1.25; color: var(--klm-pale, #8b9aa8); margin-top: 3px; max-height: 2.6em; overflow: hidden; word-break: break-word; }
.klm-app .klm-wimg figcaption a { color: inherit !important; text-decoration: none !important; }
.klm-app .klm-wimg figcaption a:hover { text-decoration: underline !important; }
.klm-app .klm-wimg.is-drill { float: none; width: auto; max-width: 220px; margin: 4px auto 10px; text-align: center; }
.klm-app .klm-wimg.is-drill img { width: 100%; height: auto; max-height: 200px; aspect-ratio: auto; object-fit: contain; background: none; border: 0; }
.klm-app .klm-wimg.is-drill figcaption { text-align: center; }
.klm-app .klm-entry-main::after, .klm-app .klm-wl-row::after, .klm-app .klm-admin-review-main::after { content: ""; display: block; clear: both; }
@media (max-width: 600px) { .klm-app .klm-wimg { width: 112px; margin-left: 12px; } .klm-app .klm-wimg img { width: 112px; height: 112px; } }
.klm-app .klm-img-btn { border: 0; background: none; cursor: pointer; font-size: 15px; padding: 2px 6px; border-radius: 8px; opacity: .7; }
.klm-app .klm-img-btn:hover { opacity: 1; background: rgba(0,0,0,.05); }

/* Resim seçici */
.klm-imgp-ov { position: fixed; inset: 0; z-index: 1000002; background: rgba(15,23,42,.55); display: none; align-items: center; justify-content: center; padding: 16px; }
.klm-imgp-ov.is-open { display: flex; }
.klm-imgp { background: var(--klm-card, #fff); color: var(--klm-ink, #14202e); width: min(860px, 100%); max-height: calc(100vh - 32px); overflow: auto; border-radius: 18px; padding: 16px 18px 18px; box-shadow: 0 24px 64px rgba(0,0,0,.3); }
.klm-imgp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.klm-imgp-head b { font-size: 18px; }
.klm-imgp-head small { display: block; color: var(--klm-slate, #5b6b7c); }
.klm-imgp-x { border: 0; background: none; font-size: 18px; cursor: pointer; padding: 4px 8px; color: var(--klm-slate, #5b6b7c); }
.klm-imgp-cur { display: flex; gap: 12px; align-items: center; padding: 8px; border: 1px solid var(--klm-rule, #e3e6ea); border-radius: 12px; margin-bottom: 10px; }
.klm-imgp-cur img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }
.klm-imgp-cur small { display: block; color: var(--klm-slate, #5b6b7c); font-size: 12px; margin: 2px 0 4px; }
.klm-imgp-none { color: var(--klm-slate, #5b6b7c); font-size: 14px; margin: 8px 0; }
.klm-imgp-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.klm-imgp-tab { border: 1px solid var(--klm-rule, #d5dbe0); background: transparent; color: inherit; border-radius: 999px; padding: 6px 12px; font-size: 13.5px; cursor: pointer; }
.klm-imgp-tab.is-on { background: var(--klm-ink, #14202e) !important; color: #fff !important; border-color: transparent !important; }
.klm-imgp-tab[disabled] { opacity: .4; cursor: not-allowed; }
.klm-imgp-search { display: flex; gap: 8px; margin-bottom: 10px; }
.klm-imgp-search input { flex: 1; max-width: none !important; }
.klm-imgp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.klm-imgp-it { position: relative; border: 2px solid transparent; background: #f4f5f7; border-radius: 12px; padding: 0; cursor: pointer; overflow: hidden; text-align: left; }
.klm-imgp-it:hover { border-color: var(--klm-marker, #ffd23f); }
.klm-imgp-it img { display: block; width: 100%; height: 120px; object-fit: cover; }
.klm-imgp-it small { display: block; font-size: 10.5px; line-height: 1.3; padding: 4px 6px; color: #4b5b6c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.klm-imgp-it.is-busy { opacity: .5; pointer-events: none; }
.klm-imgp-it.is-busy::after { content: "⏳ kaydediliyor…"; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255,255,255,.7); font-size: 13px; font-weight: 600; }
.klm-imgp-lic { font-size: 12px; color: var(--klm-pale, #8b9aa8); margin: 10px 0 0; }
.klm-imgp-ai textarea, .klm-imgp-up input[type=file] { width: 100%; }
@media (max-width: 600px) { .klm-imgp-grid { grid-template-columns: repeat(2, 1fr); } .klm-imgp-it img { height: 110px; } }

/* Liste görünümünde resim yalnızca kart açıkken (anlam görünürken) */
.klm-entries.is-compact .klm-entry:not(.is-expanded) .klm-wimg { display: none !important; }
.klm-app .klm-wimg img { cursor: zoom-in; transition: transform .15s ease; }
.klm-app .klm-wimg img:hover { transform: scale(1.03); }

/* Büyütülmüş resim: koyu zemin, resim ve yazı tek bir beyaz kartta (alttaki sayfayla karışmasın) */
.klm-zoom { position: fixed !important; inset: 0 !important; z-index: 1000003 !important; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(10,16,28,.9) !important; cursor: zoom-out; }
.klm-zoom.is-open { display: flex !important; animation: klmZoomIn .16s ease; }
@keyframes klmZoomIn { from { opacity: 0; } to { opacity: 1; } }
.klm-zoom figure { margin: 0 !important; padding: 10px 10px 12px !important; max-width: min(560px, 92vw); text-align: center; background: #fff !important; border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.45); animation: klmZoomPop .18s ease; }
@keyframes klmZoomPop { from { transform: scale(.88); } to { transform: scale(1); } }
.klm-zoom img { display: block; width: auto; height: auto; max-width: 100%; max-height: 68vh; margin: 0 auto; border-radius: 12px; }
.klm-zoom figcaption { margin-top: 8px; color: #14202e !important; }
.klm-zoom figcaption b { display: block; font-size: 20px; line-height: 1.3; }
.klm-zoom-mean { display: block; font-size: 17px; color: #2b5a87 !important; margin-top: 2px; }
.klm-zoom figcaption small { display: block; font-size: 12px; color: #5b6b7c !important; margin-top: 2px; }
.klm-zoom-x { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: #fff !important; color: #14202e !important; font-size: 18px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.3); }

.klm-imgp-err { margin: 8px 0; padding: 10px 12px; border-radius: 10px; background: #fff4f2; color: #9a2b1a; font-size: 14px; }

.klm-imgp-all { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--klm-slate, #5b6b7c); margin: -2px 0 10px; cursor: pointer; }
.klm-imgp-it small b { color: #14202e; font-weight: 600; }

/* 📚 Ödev / paylaşım bağlantısı: "Derse çalış" penceresi */
.klm-app .klm-assign-ok { margin: 10px 0 12px; line-height: 1.5; }
.klm-app .klm-assign-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 4px; }
.klm-app .klm-assign-opt { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid rgba(0,0,0,.14); border-radius: 12px; background: rgba(0,0,0,.02); }
.klm-app .klm-assign-opt:hover { border-color: currentColor; }
.klm-app .klm-assign-opt b { font-size: 14px; }
.klm-app .klm-assign-opt small { font-size: 12px; opacity: .7; }
@media (max-width: 480px) { .klm-app .klm-assign-acts { grid-template-columns: 1fr; } }
.klm-guesthub-assign { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; padding: 12px 16px; border-radius: 14px; background: #fff4c4; border: 1px solid #f0d77a; font-size: 15px; }
.klm-guesthub-assign span { font-size: 13px; opacity: .8; flex-basis: 100%; }
.klm-app .klm-assign-copy { margin-right: 6px; }
.klm-app label.klm-assign-opt.is-on { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; background: rgba(255, 210, 63, .18); }

/* ==========================================================
   2.14.0 — Listeler Soruluk tarzı: sade başlıklar + numaralı satırlar
   (Listelerim ve Hazır listeler)
   ========================================================== */
.klm-app .klm-list-group { border: 0 !important; background: transparent !important; border-radius: 0 !important; overflow: visible !important; margin: 0 0 4px !important; }
.klm-app .klm-list-group-title.is-accordion { background: transparent !important; padding: 10px 4px 8px !important; font-family: var(--klm-sans) !important; font-size: 16px !important; font-weight: 700 !important; color: var(--klm-ink) !important; border: 0 !important; border-radius: 8px; cursor: pointer; }
.klm-app .klm-list-group-title.is-accordion:hover { background: rgba(20, 32, 46, .04) !important; }
.klm-app .klm-list-group-title .klm-group-meta, .klm-app .klm-list-group-title span[style*="opacity"] { color: var(--klm-pale) !important; opacity: 1 !important; font-weight: 500 !important; font-size: 13px !important; }
.klm-app .klm-accordion-icon { color: var(--klm-pale); font-size: 13px; transition: transform .15s; }
.klm-app .klm-group-flag { margin: -4px 4px 4px !important; }

.klm-app .klm-rows { counter-reset: klmrow; display: grid; gap: 6px; padding: 2px 0 14px !important; }
.klm-app .klm-rows[style*="none"] { display: none !important; }
.klm-app .klm-rows > .klm-list-card {
  counter-increment: klmrow;
  display: flex !important; align-items: center; gap: 12px;
  margin: 0 !important; padding: 10px 12px 10px 14px !important;
  background: var(--klm-card) !important; border: 1px solid var(--klm-rule) !important; border-radius: 12px !important;
  box-shadow: none !important; transition: border-color .12s, box-shadow .12s;
}
.klm-app .klm-rows > .klm-list-card:hover { border-color: var(--klm-ink) !important; box-shadow: 0 6px 16px -12px rgba(20, 32, 46, .45) !important; }
.klm-app .klm-rows > .klm-list-card::before {
  content: counter(klmrow); flex: none; width: 26px; height: 26px; border-radius: 99px; display: grid; place-items: center;
  font: 700 12px/1 var(--klm-sans); background: var(--klm-paper); color: var(--klm-pale); border: 1px solid var(--klm-rule);
}
.klm-app .klm-rows > .klm-list-card .klm-entry-main { flex: 1; min-width: 0; }
.klm-app .klm-rows > .klm-list-card .klm-entry-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 !important; }
.klm-app .klm-rows > .klm-list-card .klm-list-title-btn { font-family: var(--klm-sans) !important; font-size: 15.5px !important; font-weight: 650 !important; line-height: 1.3 !important; color: var(--klm-ink) !important; padding: 0 !important; text-align: left; }
.klm-app .klm-rows > .klm-list-card .klm-list-title-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.klm-app .klm-rows > .klm-list-card .klm-source-category { font-weight: 400; font-size: 12px; color: var(--klm-pale); }
.klm-app .klm-rows > .klm-list-card .klm-list-lvl { font-size: 11px !important; padding: 3px 8px !important; border-radius: 99px !important; }
.klm-app .klm-rows > .klm-list-card .klm-nuance { margin: 3px 0 0 !important; font-size: 12.5px !important; color: var(--klm-pale) !important; line-height: 1.4; }
.klm-app .klm-rows > .klm-list-card .klm-list-stats { display: flex; flex-wrap: wrap; gap: 2px 6px; }
.klm-app .klm-rows > .klm-list-card .klm-lrow-bar { display: block; height: 4px; max-width: 240px; margin-top: 6px; border-radius: 99px; }
.klm-app .klm-rows > .klm-list-card .klm-side { flex: none; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; margin: 0 !important; text-align: right; white-space: nowrap; }
.klm-app .klm-rows > .klm-list-card .klm-list-word-count { color: var(--klm-pale); font-size: 12.5px; }
.klm-app .klm-rows > .klm-list-card .klm-acts { display: flex !important; align-items: center; gap: 6px; flex-wrap: nowrap; }
.klm-app .klm-rows > .klm-list-card .klm-share-badge { font-size: 11.5px; }
.klm-app .klm-rows > .klm-list-card.is-flash { border-color: var(--klm-marker) !important; box-shadow: 0 0 0 3px var(--klm-wash) !important; }

@media (max-width: 640px) {
  .klm-app .klm-rows > .klm-list-card { flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px !important; }
  .klm-app .klm-rows > .klm-list-card .klm-entry-main { flex: 1 1 calc(100% - 40px); }
  .klm-app .klm-rows > .klm-list-card .klm-side { width: 100%; padding-left: 36px; flex-wrap: wrap !important; white-space: normal; justify-content: flex-start; }
  .klm-app .klm-rows > .klm-list-card .klm-list-word-count { margin-right: auto; }
}
.klm-app .klm-rows[style*="block"] { display: grid !important; }
.klm-app .klm-pub-card .klm-side .klm-btn { padding: 6px 12px !important; font-size: 13px !important; min-height: 0 !important; border-radius: 9px !important; }
.klm-app .klm-pub-card .klm-side .klm-btn2--sm { padding: 6px 12px !important; font-size: 13px !important; }
.klm-app .klm-rows > .klm-list-card .klm-list-word-count { font-weight: 500 !important; color: var(--klm-pale) !important; font-size: 12.5px !important; }
@media (max-width: 640px) {
  .klm-app .klm-rows > .klm-list-card .klm-side { flex-wrap: nowrap !important; }
  .klm-app .klm-rows > .klm-list-card .klm-acts { margin-left: auto; }
}
.klm-app .klm-rows > .klm-list-card .klm-list-word-count { white-space: nowrap !important; text-align: left; }

/* 2.14.1 — menüde "Çalış" öne çıksın: masaüstünde sarı düğme, mobilde sarı simge + koyu yazı */
.klm-app .klm-topnav #klm-practice-btn {
  background: var(--klm-marker) !important; color: var(--klm-ink) !important;
  font-weight: 750; padding: 0 14px 0 12px; margin: 0 4px;
  box-shadow: 0 2px 0 rgba(0,0,0,.18), 0 6px 16px -8px rgba(255,210,63,.7);
}
.klm-app .klm-topnav #klm-practice-btn .klm-ic { opacity: 1 !important; stroke-width: 2.3; }
.klm-app .klm-topnav #klm-practice-btn .klm-ic:last-child:not(:first-child) { opacity: .7 !important; }
.klm-app .klm-topnav #klm-practice-btn:hover { background: #ffdc5c !important; color: var(--klm-ink) !important; transform: translateY(-1px); }
.klm-app .klm-topnav #klm-practice-btn:active { transform: translateY(0); }
.klm-app .klm-topnav #klm-practice-btn .klm-ic:first-child { display: inline-block !important; }
.klm-app .klm-bottomnav #klm-practice-btn-m { color: var(--klm-ink) !important; font-weight: 750; }
.klm-app .klm-bottomnav #klm-practice-btn-m .klm-ic {
  width: 34px !important; height: 26px !important; padding: 3px 7px; box-sizing: content-box; margin-bottom: -2px;
  background: var(--klm-marker); border-radius: 99px; stroke-width: 2.3;
}

/* 🧩 Kelime grupları (2.15.0) */
.klm-app .klm-grpbar { background: var(--klm-card); border-bottom: 1px solid var(--klm-rule); padding: 8px 14px 10px; }
.klm-app .klm-grpbar[hidden] { display: none; }
.klm-app .klm-grpbar-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font: 700 13px/1.3 var(--klm-sans); color: var(--klm-ink); margin-bottom: 6px; }
.klm-app .klm-grpbar-h small { font-weight: 500; color: var(--klm-pale); }
.klm-app .klm-grpbar-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.klm-app .klm-gchip { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-width: 64px; padding: 6px 8px 5px; border: 1px solid var(--klm-rule); border-radius: 10px; background: var(--klm-paper); color: var(--klm-ink); cursor: pointer; font: 500 12px/1.15 var(--klm-sans); text-align: left; }
.klm-app .klm-gchip:hover { border-color: var(--klm-slate); }
.klm-app .klm-gchip-t { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.klm-app .klm-gchip-t b { font-size: 14px; }
.klm-app .klm-gchip-t small { color: var(--klm-pale); font-size: 11px; }
.klm-app .klm-gchip-n { font-size: 11px; color: var(--klm-slate); white-space: nowrap; }
.klm-app .klm-gbar { display: flex; height: 5px; border-radius: 99px; background: var(--klm-rule); overflow: hidden; }
.klm-app .klm-gbar i { display: block; height: 100%; }
.klm-app .klm-gbar i.is-l { background: var(--klm-green); }
.klm-app .klm-gbar i.is-m { background: #e0a526; }
.klm-app .klm-gchip.is-done { background: var(--klm-gwash); border-color: #a9d3bd; }
.klm-app .klm-gchip.is-done .klm-gchip-n { color: var(--klm-green); font-weight: 700; }
.klm-app .klm-gchip.is-on { background: var(--klm-ink); border-color: var(--klm-ink); color: #fff; }
.klm-app .klm-gchip.is-on .klm-gchip-t small, .klm-app .klm-gchip.is-on .klm-gchip-n { color: rgba(255,255,255,.75); }
.klm-app .klm-gchip.is-on .klm-gbar { background: rgba(255,255,255,.25); }
.klm-app .klm-gchip--all .klm-gchip-t b { font-size: 13px; }
/* liste kartında */
.klm-app .klm-lgroups { margin-top: 8px; }
.klm-app .klm-lgroups-h { font: 600 12.5px/1.3 var(--klm-sans); color: var(--klm-slate); margin-bottom: 5px; cursor: default; }
.klm-app .klm-lgroups-h small { font-weight: 500; color: var(--klm-pale); }
.klm-app details.klm-lgroups > summary { cursor: pointer; list-style: none; }
.klm-app details.klm-lgroups > summary::-webkit-details-marker { display: none; }
.klm-app .klm-lgroups-more { color: #2563eb; font-weight: 500; margin-left: 4px; }
.klm-app details.klm-lgroups[open] .klm-lgroups-more { display: none; }
.klm-app .klm-lgroups-row { display: flex; flex-wrap: wrap; gap: 5px; }
.klm-app .klm-lgroups .klm-gchip { min-width: 58px; padding: 5px 7px 4px; }
.klm-app .klm-gchip.is-on, .klm-app .klm-gchip.is-on .klm-gchip-t, .klm-app .klm-gchip.is-on .klm-gchip-t b { color: #fff !important; }
.klm-app .klm-gchip.is-on .klm-gchip-t small, .klm-app .klm-gchip.is-on .klm-gchip-n { color: rgba(255,255,255,.78) !important; }

/* 🧩 Gruplar — telefon düzeni ve kısayollar (2.15.1) */
.klm-app .klm-gpill { display: none; }
.klm-app .klm-grpbar-h .klm-gpicks { margin-left: auto; display: inline-flex; gap: 6px; flex-wrap: wrap; }
.klm-app .klm-gpick { border: 1px solid var(--klm-rule); background: var(--klm-paper); color: var(--klm-ink); border-radius: 99px; padding: 4px 10px; font: 600 12px/1.2 var(--klm-sans); cursor: pointer; }
.klm-app .klm-gpick:hover:not(:disabled) { border-color: var(--klm-slate); }
.klm-app .klm-gpick:disabled { opacity: .45; cursor: default; }
.klm-app .klm-gpick.is-all { border: 0; background: var(--klm-gwash); color: var(--klm-green); cursor: default; }
.klm-app .klm-pop--grp { width: 520px; }
.klm-app .klm-gsheet-sum { margin: 0 6px 8px; font: 500 13px/1.4 var(--klm-sans); color: var(--klm-slate); }
.klm-app .klm-gsheet-sum b { color: var(--klm-ink); }
.klm-app .klm-gsheet-picks { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 6px 10px; }
.klm-app .klm-gsheet-picks .klm-gpick { padding: 8px 12px; font-size: 13.5px; }
.klm-app .klm-gsheet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; padding: 0 6px; }
.klm-app .klm-gsheet-grid .klm-gchip { min-width: 0; padding: 8px 9px 7px; }
.klm-app .klm-gsheet-key { display: flex; align-items: center; gap: 6px; margin: 10px 6px 4px; font-size: 11.5px; color: var(--klm-pale); }
.klm-app .klm-gsheet-key i { display: inline-block; width: 10px; height: 6px; border-radius: 3px; background: var(--klm-rule); margin-left: 6px; }
.klm-app .klm-gsheet-key i.is-l { background: var(--klm-green); margin-left: 0; }
.klm-app .klm-gsheet-key i.is-m { background: #e0a526; }
@media (max-width: 760px) {
  .klm-app .klm-grpbar { padding: 6px 12px; }
  .klm-app .klm-grpbar-full { display: none; }
  .klm-app .klm-gpill { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 6px 12px; border: 1px solid var(--klm-rule); border-radius: 99px; background: var(--klm-paper); color: var(--klm-ink); font: 500 13px/1.2 var(--klm-sans); cursor: pointer; text-align: left; }
  .klm-app .klm-gpill-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .klm-app .klm-gpill-t small { color: var(--klm-pale); }
  .klm-app .klm-gpill .klm-gbar { flex: 1 1 auto; min-width: 40px; }
  .klm-app .klm-gpill-n { font-size: 12px; color: var(--klm-slate); font-variant-numeric: tabular-nums; }
  .klm-app .klm-gpill-c { color: var(--klm-pale); }
  .klm-app .klm-pop--grp { width: auto; }
  .klm-app .klm-gsheet-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
  .klm-app .klm-gsheet-grid .klm-gchip { min-height: 58px; }
  /* liste kartında soldaki sıra numarası telefonda yer kaplamasın */
  .klm-app .klm-rows > .klm-list-card::before { display: none; }
  .klm-app .klm-lgroups-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
  .klm-app .klm-lgroups .klm-gchip { min-width: 0; min-height: 50px; }
}

/* 2.15.2 — üst çubuk dar alana sığsın (JS fitTopbar sırayla is-fit1…5 ekler) */
.klm-app .klm-topnav .klm-ns { display: none; }
.klm-app .klm-menu-fit { display: none !important; }
.klm-app .klm-topbar.is-fit1 .klm-brand2 { display: none; }
.klm-app .klm-topbar.is-fit1 .klm-topnav .klm-nav-item:not(#klm-practice-btn) .klm-ic:first-child { display: none; }
.klm-app .klm-topbar.is-fit1 .klm-topnav .klm-nav-item { padding: 0 9px; }
.klm-app .klm-topbar.is-fit2 .klm-topnav .klm-nl { display: none; }
.klm-app .klm-topbar.is-fit2 .klm-topnav .klm-ns { display: inline; }
.klm-app .klm-topbar.is-fit3 .klm-pool-btn[data-on="0"] { display: none !important; }
.klm-app .klm-topbar.is-fit3 .klm-vctl { display: none !important; }
.klm-app.klm-fit-vctl .klm-menu-fit--vctl { display: flex !important; }
.klm-app .klm-topbar[class*="is-fit"] .klm-scope-pill.is-scoped { min-width: 130px; }

.klm-app .klm-topbar.is-fit3 { gap: 8px; }
.klm-app .klm-topbar.is-fit4 .klm-nav-pub { display: none !important; }
.klm-app .klm-topbar.is-fit5 .klm-nav-lists { display: none !important; }
.klm-app.klm-fit-pub .klm-menu-fit--pub,
.klm-app.klm-fit-lists .klm-menu-fit--lists { display: flex !important; }
@media (max-width: 760px) { .klm-app .klm-menu-fit { display: none !important; } }
@media (min-width: 761px) {
  .klm-app .klm-topbar .klm-topnav { flex: 0 0 auto; margin-right: auto; }
  .klm-app .klm-topbar .klm-scope-pill { flex: 0 1 auto; }
}
/* 2.16.0 — ziyaretçi ana panelde çalışıyor */
.klm-guesthub--study .klm-guesthub-back{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 12px;font-size:14px}
.klm-guesthub--study .klm-guesthub-back > a{font-weight:700;text-decoration:none;color:#14202e;background:#fff;border:1px solid #e3e5e0;border-radius:99px;padding:7px 14px}
.klm-guesthub--study .klm-guesthub-back span{color:#5b6b7c}
.klm-app .klm-ai-ic{width:16px;height:16px;flex:none}