/* Kelimelik — kelime çalışmaları dizini (site tarafı, hafif) */
.klmd, .klmd-crumbs, .klmd-fab, .klmd-sheet, .klmd-allbtn {
  --d-ink: #14202e; --d-marker: #ffd23f; --d-wash: #fff6d6; --d-paper: #faf9f5;
  --d-card: #ffffff; --d-rule: #e6e8e3; --d-slate: #5b6b7c; --d-pale: #8b98a5;
  box-sizing: border-box;
}
.klmd *, .klmd-sheet *, .klmd-crumbs * { box-sizing: border-box; }
.klmd { margin: 8px 0 28px; color: var(--d-ink); }
.klmd a, .klmd-crumbs a, .klmd-sheet a, .klmd-allbtn a { text-decoration: none !important; box-shadow: none !important; }

.klmd-hero { margin-bottom: 14px; }
.klmd-hero-sub { font-size: 13px; font-weight: 600; color: var(--d-slate); margin: 0 0 4px !important; }
.klmd-hero-txt { font-size: 16px; color: var(--d-slate); margin: 0 !important; }

/* arama + çipler */
.klmd-bar { position: sticky; top: var(--klmd-top, 0px); z-index: 5; background: inherit; padding: 8px 0 10px; }
.klmd-search {
  display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; margin: 0 0 10px;
  background: var(--d-card); border: 1px solid var(--d-rule); border-radius: 12px; cursor: text;
}
.klmd-search:focus-within { border-color: #9aa8b5; box-shadow: 0 0 0 3px rgba(255,210,63,.35); }
.klmd-search svg { width: 18px; height: 18px; fill: none; stroke: var(--d-pale); stroke-width: 1.8; stroke-linecap: round; flex-shrink: 0; }
.klmd-search input { flex: 1; min-width: 0; height: 100%; border: 0 !important; outline: none; background: transparent !important; box-shadow: none !important; font-size: 16px; padding: 0 !important; margin: 0 !important; color: var(--d-ink); }
.klmd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.klmd-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 6px 0 13px; border-radius: 999px;
  border: 1px solid var(--d-rule); background: var(--d-card); color: var(--d-slate) !important;
  font: inherit; font-size: 14px; line-height: 1; cursor: pointer; white-space: nowrap; transition: background .12s, color .12s, border-color .12s;
}
.klmd-chip b { 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(--d-slate); }
.klmd-chip:hover { border-color: #c3ccd4; color: var(--d-ink) !important; }
.klmd-chip.is-on { background: var(--d-ink); border-color: var(--d-ink); color: #fff !important; }
.klmd-chip.is-on b { background: rgba(255,255,255,.18); color: #fff; }
.klmd-chips--links { margin: 4px 0 18px; }

/* bölüm + kartlar */
.klmd-sec { margin-top: 26px; }
.klmd-sec[hidden] { display: none; }
.klmd-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.klmd-sec-title { font-size: 21px !important; line-height: 1.25 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; color: var(--d-ink); }
.klmd-sec-link { font-size: 13.5px; font-weight: 600; color: var(--d-slate) !important; white-space: nowrap; }
.klmd-sec-link:hover { color: var(--d-ink) !important; }
.klmd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.klmd-card {
  position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 150px;
  padding: 16px 16px 14px; border-radius: 16px; background: var(--d-card); border: 1px solid var(--d-rule);
  color: var(--d-ink) !important; transition: transform .15s ease, box-shadow .15s ease, border-color .15s;
}
.klmd-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(20,32,46,.09); border-color: #d6dce1; }
.klmd-card[hidden] { display: none; }
.klmd-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.klmd-count { font-size: 12.5px; color: var(--d-pale); font-variant-numeric: tabular-nums; }
.klmd-lv { font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: #eef1f3; color: var(--d-slate); letter-spacing: .02em; }
.klmd-lv[data-l="A"] { background: #e4f2ea; color: #2f7d5d; }
.klmd-lv[data-l="B"] { background: var(--d-wash); color: #8a6400; }
.klmd-lv[data-l="C"] { background: #fbe9e7; color: #a4432f; }
.klmd-card-title { font-size: 17px; font-weight: 700; line-height: 1.3; }
.klmd-sample { font-size: 13.5px; color: var(--d-slate); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-style: italic; }
.klmd-go { margin-top: auto; align-self: flex-start; font-size: 13.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: var(--d-marker); color: var(--d-ink); }
.klmd-card:hover .klmd-go { background: #ffcb1f; }
.klmd-empty { padding: 28px 0; text-align: center; color: var(--d-slate); }
.klmd--related { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--d-rule); }
.klmd-allbtn { text-align: center; margin: 20px 0 8px !important; }
.klmd-allbtn a { display: inline-block; padding: 12px 20px; border-radius: 12px; background: var(--d-ink); color: #fff !important; font-weight: 700; }

/* konum çubuğu */
.klmd-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 16px; font-size: 13.5px; }
.klmd-crumbs a { color: var(--d-slate) !important; padding: 4px 10px; border-radius: 999px; background: #f1f2ef; }
.klmd-crumbs a:hover { color: var(--d-ink) !important; background: var(--d-wash); }
.klmd-sep { color: var(--d-pale); }

/* alttan açılan menü */
.klmd-fab {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 99990;
  display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px; border: 0; border-radius: 999px;
  background: var(--d-ink); color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  box-shadow: 0 10px 28px rgba(20,32,46,.28);
}
.klmd-fab:active { transform: scale(.97); }
.klmd-sheet-bg { position: fixed; inset: 0; z-index: 99991; background: rgba(20,32,46,.45); opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s linear .2s; }
.klmd-sheet {
  position: fixed; z-index: 99992; left: 0; right: 0; bottom: 0; max-height: 84vh; display: flex; flex-direction: column;
  background: var(--d-card); color: var(--d-ink); border-radius: 22px 22px 0 0; padding: 6px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -12px 40px rgba(20,32,46,.2); transform: translateY(105%); visibility: hidden;
  transition: transform .26s cubic-bezier(.2,.8,.2,1), visibility 0s linear .26s;
}
.klmd-open .klmd-sheet { transform: none; visibility: visible; transition: transform .26s cubic-bezier(.2,.8,.2,1); }
.klmd-open .klmd-sheet-bg { opacity: 1; visibility: visible; transition: opacity .2s; }
.klmd-grip { width: 40px; height: 4px; border-radius: 4px; background: #d6dce1; margin: 6px auto 8px; }
.klmd-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 10px; font-size: 17px; }
.klmd-x { width: 36px; height: 36px; border: 0; border-radius: 10px; background: #f1f2ef; color: var(--d-slate); font-size: 15px; cursor: pointer; }
.klmd-search--sheet { margin-bottom: 8px; }
.klmd-sheet-body { overflow-y: auto; overscroll-behavior: contain; flex: 1; margin: 0 -4px; padding: 0 4px; }
.klmd-acc { border-bottom: 1px solid var(--d-rule); }
.klmd-acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 4px; font-weight: 700; font-size: 15.5px; }
.klmd-acc summary::-webkit-details-marker { display: none; }
.klmd-acc summary b { margin-left: auto; font-size: 12px; font-weight: 650; color: var(--d-slate); background: #f1f2ef; border-radius: 999px; padding: 2px 8px; }
.klmd-acc summary::after { content: '▾'; color: var(--d-pale); transition: transform .15s; }
.klmd-acc[open] summary::after { transform: rotate(180deg); }
.klmd-acc ul { list-style: none; margin: 0 0 10px !important; padding: 0 !important; }
.klmd-acc li { margin: 0 !important; padding: 0 !important; }
.klmd-acc li::before { display: none !important; }
.klmd-acc a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 12px; border-radius: 10px; color: var(--d-ink) !important; font-size: 15px; }
.klmd-acc a:hover { background: #f4f5f2; }
.klmd-acc a.is-cur { background: var(--d-wash); font-weight: 700; }
.klmd-acc a small { color: var(--d-pale); font-size: 12.5px; flex-shrink: 0; }
.klmd-acc a[hidden] { display: none; }
.klmd-sheet-all { display: block; text-align: center; margin-top: 10px; padding: 13px; border-radius: 12px; background: var(--d-ink); color: #fff !important; font-weight: 700; }
html.klmd-lock, html.klmd-lock body { overflow: hidden; }

/* masaüstü: menü sağda panel olarak açılır */
@media (min-width: 761px) {
  .klmd-sheet { left: auto; top: 0; right: 0; bottom: 0; width: 380px; max-height: none; border-radius: 0; transform: translateX(105%); padding-top: 14px; }
  .klmd-grip { display: none; }
}

@media (max-width: 760px) {
  .klmd-bar { margin: 0 -2px; }
  .klmd-chips:not(.klmd-chips--links) {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
  }
  .klmd-chips::-webkit-scrollbar { display: none; }
  .klmd-chip { height: 36px; flex-shrink: 0; }
  .klmd-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .klmd-card { min-height: 0; padding: 13px 12px 12px; border-radius: 14px; gap: 6px; }
  .klmd-card-title { font-size: 15.5px; }
  .klmd-sample { font-size: 12.5px; }
  .klmd-go { font-size: 12.5px; padding: 5px 10px; }
  .klmd-sec-title { font-size: 18px !important; }
  .klmd-fab { left: 50%; right: auto; transform: translateX(-50%); }
  .klmd-fab:active { transform: translateX(-50%) scale(.97); }
}
@media (max-width: 360px) {
  .klmd-grid { grid-template-columns: 1fr; }
}
.klmd-sec-acts { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.klmd-sec-all { font-size: 13.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: var(--d-ink); color: #fff !important; white-space: nowrap; }
.klmd-sec-all:hover { opacity: .88; }
@media (max-width: 760px) {
  .klmd-sec-head { flex-wrap: wrap; }
  .klmd-sec-acts { width: 100%; justify-content: space-between; }
}

/* ---------- kategori sayfası (kendi şablonumuz) ---------- */
.klmd-page { --d-ink: #14202e; --d-marker: #ffd23f; --d-wash: #fff6d6; --d-card: #fff; --d-rule: #e6e8e3; --d-slate: #5b6b7c; --d-pale: #8b98a5; color: var(--d-ink); }
.klmd-wrap { max-width: 1120px; margin: 0 auto; padding: 28px 20px 48px; box-sizing: border-box; }
.klmd-bar[hidden] { display: none; }
.klmd-head {
  position: relative; overflow: hidden; margin: 6px 0 20px; padding: 26px 26px 24px; border-radius: 20px;
  background: var(--d-ink); color: #fff;
}
.klmd-head::after {
  content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,210,63,.35), rgba(255,210,63,0) 70%); pointer-events: none;
}
.klmd-title { margin: 0 0 8px !important; padding: 0 !important; font-size: clamp(26px, 4vw, 38px) !important; line-height: 1.15 !important; color: #fff !important; letter-spacing: -.01em; }
.klmd-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px !important; font-size: 14.5px; color: #c7d2dc; }
.klmd-stats b { color: var(--d-marker); font-size: 16px; }
.klmd-dot { opacity: .5; }
.klmd-desc, .klmd-desc p { margin: 0 !important; font-size: 15.5px; line-height: 1.55; color: #dfe7ee; max-width: 720px; }
.klmd-page .klmd-crumbs { margin-bottom: 12px; }

.klmd-subcats { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin: 0 0 22px; }
.klmd-subcat {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  padding: 14px 16px; border-radius: 14px; border: 1px solid var(--d-rule); background: var(--d-card);
  color: var(--d-ink) !important; text-decoration: none !important; transition: border-color .14s, transform .14s, box-shadow .14s;
}
.klmd-subcat:hover { border-color: var(--d-marker); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(20,32,46,.07); }
.klmd-subcat-ic { grid-row: 1 / span 2; font-size: 22px; }
.klmd-subcat-name { font-weight: 700; font-size: 15.5px; }
.klmd-subcat-n { font-size: 12.5px; color: var(--d-slate); }

.klmd-page .klmd { margin-top: 0; }
.klmd-page .klmd-sec:first-of-type { margin-top: 6px; }

@media (max-width: 760px) {
  .klmd-wrap { padding: 16px 14px 36px; }
  .klmd-head { padding: 20px 18px 18px; border-radius: 16px; margin-bottom: 16px; }
  .klmd-desc, .klmd-desc p { font-size: 14.5px; }
  .klmd-subcats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .klmd-subcat { padding: 12px; }
  .klmd-subcat-name { font-size: 14.5px; }
}

/* 2.16.2 — Kelimelik ana paneli (ziyaretçi): çalışmalar grup grup, satır listesi */
.klm-dir-rows .klmd-grid { display: flex; flex-direction: column; gap: 0; background: var(--d-card, #fff); border: 1px solid var(--d-rule, #e3e5e0); border-radius: 16px; overflow: hidden; counter-reset: klmdrow; }
.klm-dir-rows .klmd-card { counter-increment: klmdrow; flex-direction: row; align-items: center; gap: 12px; min-height: 0; padding: 12px 16px; border: 0; border-radius: 0; border-bottom: 1px solid var(--d-rule, #eef0f2); background: transparent; }
.klm-dir-rows .klmd-card:last-child { border-bottom: 0; }
.klm-dir-rows .klmd-card::before { content: counter(klmdrow); flex: none; width: 26px; height: 26px; border-radius: 99px; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--d-pale, #8b9aa8); background: #f4f5f2; }
.klm-dir-rows .klmd-card:hover { transform: none; box-shadow: none; background: #fbfaf7; }
.klm-dir-rows .klmd-card-title { order: 1; flex: 1 1 auto; min-width: 0; font-size: 16px; }
.klm-dir-rows .klmd-sample { order: 2; flex: 0 1 34%; -webkit-line-clamp: 1; font-size: 13px; }
.klm-dir-rows .klmd-card-top { order: 3; flex: none; gap: 8px; }
.klm-dir-rows .klmd-go { order: 4; margin: 0; align-self: center; padding: 6px 12px; }
@media (max-width: 640px) {
  .klm-dir-rows .klmd-card { flex-wrap: wrap; gap: 4px 10px; padding: 11px 12px; }
  .klm-dir-rows .klmd-card::before { display: none; }
  .klm-dir-rows .klmd-card-title { flex: 1 1 100%; font-size: 15.5px; }
  .klm-dir-rows .klmd-sample { display: none; }
  .klm-dir-rows .klmd-card-top { order: 2; }
  .klm-dir-rows .klmd-go { order: 3; margin-left: auto; padding: 5px 11px; font-size: 13px; }
}
/* ▶ son çalışılan */
.klm-guest-recent { margin: 0 0 18px; }
.klm-guest-recent[hidden] { display: none; }
.klm-recent-main { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: center; padding: 16px 18px; border-radius: 16px; background: #14202e; color: #fff !important; text-decoration: none !important; }
.klm-recent-main .klm-recent-k { grid-column: 1; font-size: 12.5px; font-weight: 700; color: #ffd23f; letter-spacing: .02em; }
.klm-recent-main b { grid-column: 1; font-size: 19px; line-height: 1.3; }
.klm-recent-main small { grid-column: 1; color: #aebbc7; font-size: 13px; }
.klm-recent-go { grid-column: 2; grid-row: 1 / span 3; background: #ffd23f; color: #14202e; font-weight: 800; padding: 10px 18px; border-radius: 99px; white-space: nowrap; }
.klm-recent-more { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; font-size: 13.5px; color: #5b6b7c; }
.klm-recent-more a { padding: 5px 12px; border-radius: 99px; background: #fff; border: 1px solid #e3e5e0; color: #14202e !important; text-decoration: none !important; font-weight: 600; }