/* 🔀 Karma alıştırma (karma.js). Renkler temanın değişkenlerinden (--card, --ink, --line, --primary, --ok/--bad/--warn): açık, koyu, Tek Adım ve öteki
   temalar kendiliğinden uyar. Dokunma alanı en az 44 px. 320 px telefonda ve «Çok büyük» yazıda (yazi-boyutu.js, bütün ekran 1.3×) yana taşma yok:
   her satır sarılır, uzun konu adları ve cümleler kelime ortasından da kırılabilir. */
.km-kok { display:flex; flex-direction:column; gap:12px; min-width:0; max-width:100%; }
.km-kok .card { min-width:0; }
.km-kok h2 { margin:0 0 6px; font-size:22px; }
.km-kok h3 { margin:0 0 8px; font-size:17px; }
.km-kok p { margin:6px 0; overflow-wrap:anywhere; }
.km-kucuk { font-size:14px; }
.km-sinir-not { color:var(--muted); font-size:15px; }
.km-sinir-not b { color:var(--ink); }
.km-gizli { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.km-satir-bas { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.km-sayi { font-weight:900; color:var(--muted); }
.km-bos-not { color:var(--muted); }
.km-ince { margin-top:10px; }
.km-ince svg, .km-kume-ik svg, .km-gerekce svg { width:20px; height:20px; flex:0 0 auto; }

/* seçili konular: çip + çıkar (×) düğmesi */
.km-cip-satir { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 4px; }
.km-cip { display:inline-flex; align-items:center; max-width:100%; min-height:44px; background:var(--card); color:var(--ink); border:2px solid var(--primary); border-radius:22px; padding-left:12px; font-weight:700; font-size:15px; }
.km-cip > span { overflow-wrap:anywhere; padding:6px 0; min-width:0; }
.km-cip button { flex:0 0 44px; min-width:44px; min-height:44px; border:0; background:none; color:var(--muted); font-size:22px; line-height:1; border-radius:22px; cursor:pointer; }
.km-cip button:focus-visible { outline:3px solid var(--primary); outline-offset:-3px; }

.km-ara input { width:100%; min-height:48px; }
.km-bolum { display:flex; flex-direction:column; gap:8px; }
.km-bolum h3 { margin:6px 0 0; }
.km-liste { display:flex; flex-direction:column; gap:8px; }
.km-konu, .km-kume { display:flex; align-items:center; gap:10px; width:100%; min-height:52px; text-align:left; background:var(--card); color:var(--ink); border:2px solid var(--line); border-radius:14px; padding:8px 12px; font:inherit; cursor:pointer; }
.km-konu.on { border-color:var(--primary); box-shadow:inset 0 0 0 1px var(--primary); }
.km-konu[aria-disabled="true"] { opacity:.55; }
.km-konu-tik { flex:0 0 28px; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid var(--line); font-weight:900; color:var(--muted); }
.km-konu.on .km-konu-tik { background:var(--primary); border-color:var(--primary); color:var(--koci-on-primary, #fff); }
.km-konu-tx { display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
.km-konu-tx b { overflow-wrap:anywhere; font-size:16px; }
.km-konu-tx small { color:var(--muted); font-size:13px; overflow-wrap:anywhere; }
.km-kume-ik { flex:0 0 auto; display:flex; }
.km-seviye { border-top:1px solid var(--line); }
.km-seviye summary { min-height:44px; display:flex; align-items:center; gap:8px; cursor:pointer; padding:4px 2px; }
.km-seviye summary small { color:var(--muted); }
.km-seviye > .km-liste { padding:4px 0 10px; }

.km-devam { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.km-devam > div { display:flex; flex-direction:column; flex:1 1 160px; min-width:0; }
.km-devam small { color:var(--muted); overflow-wrap:anywhere; }
.km-devam .btn { flex:1 1 140px; width:auto; margin-top:0; }

.km-hizli:disabled { opacity:.5; cursor:default; }
.km-bulundu { background:var(--warn-bg); color:var(--ink); border:2px solid var(--warn); border-radius:12px; padding:8px 12px; font-size:15px; }
.km-uyarla { display:flex; gap:8px; align-items:flex-start; font-weight:700; }
.km-uyarla svg { width:20px; height:20px; flex:0 0 auto; }
.km-seviye-rozet { border:2px solid var(--line); border-radius:10px; padding:2px 8px; font-size:13px; font-weight:800; color:var(--muted); }

/* soru */
.km-soru-ust { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.km-etiket { background:var(--bg2, var(--line)); color:var(--ink); border-radius:16px; padding:6px 12px; font-weight:800; font-size:14px; overflow-wrap:anywhere; max-width:100%; }
.km-sayac { font-weight:900; color:var(--muted); font-size:16px; }
.km-soru-konular { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.km-soru-konular .km-etiket { font-size:13px; padding:4px 10px; }
/* seçici başı: Koçi konuşuyor («Karıştırmak istediğin konuları seç») */
.km-koci-satir { display:flex; align-items:flex-start; gap:12px; }
.km-koci { flex:0 0 64px; width:64px; min-height:64px; display:flex; align-items:center; justify-content:center; }
.km-koci .mascot, .km-koci svg { width:64px; height:64px; }
.km-balon { position:relative; flex:1 1 auto; min-width:0; background:var(--bg2, var(--bg)); border:2px solid var(--line); border-radius:16px; padding:10px 12px; }
.km-balon h2 { font-size:19px; margin:0 0 4px; }
.km-balon p { font-size:14px; margin:0; color:var(--muted); }
@media (max-width: 360px) { .km-koci-satir { flex-direction:column; align-items:center; } .km-balon { width:100%; } }
.km-tur-ad { color:var(--muted); font-size:14px; margin-top:0 !important; }
.km-tur-ad b { color:var(--primary); }
.km-q { font-size:20px; line-height:1.55; font-weight:700; }
.km-bosluk { display:inline-block; width:3.2em; max-width:40%; border-bottom:3px solid var(--primary); vertical-align:baseline; margin:0 2px; }
.km-bosluk-in { display:inline-block; width:8.5em; max-width:100%; min-height:44px; font-size:18px; padding:6px 8px; margin:2px 4px; vertical-align:baseline; }
.km-siklar { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.km-sik { width:100%; min-height:48px; overflow-wrap:anywhere; font:inherit; font-size:17px; cursor:pointer; }
.km-sik.picked { border-color:var(--primary); box-shadow:0 3px 0 var(--primary); }
.km-sik.km-elendi { opacity:.5; text-decoration:line-through; }
.km-sik.km-ok { border-color:var(--ok); background:var(--ok-bg); color:var(--ink); }
.km-sik.km-bad { border-color:var(--bad); background:var(--bad-bg); color:var(--ink); }
.km-banka { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.km-doldur { min-height:44px; min-width:44px; max-width:100%; overflow-wrap:anywhere; font:inherit; cursor:pointer; }
.km-tr { color:var(--muted); font-size:15px; }
.km-tr-buyuk { font-size:19px; font-weight:700; line-height:1.45; }
.km-yanlis-cumle { font-size:18px; line-height:1.5; font-weight:600; }
.km-yanlis-ik { color:var(--bad); font-weight:900; }
.km-kok textarea { width:100%; min-height:88px; resize:vertical; font-size:18px; line-height:1.4; margin-top:6px; }
.km-alt .btn { margin-top:0; }
.km-donut { border-radius:14px; padding:12px 14px; border:2px solid var(--line); background:var(--card); color:var(--ink); }
.km-donut > b { display:block; overflow-wrap:anywhere; }
.km-donut.ok { border-color:var(--ok); background:var(--ok-bg); }
.km-donut.bad { border-color:var(--bad); background:var(--bad-bg); }
.km-donut.uyari { border-color:var(--warn); background:var(--warn-bg); }
.km-donut.notr { border-style:dashed; }
.km-gerekce { display:flex; gap:8px; align-items:flex-start; }
.km-en { font-weight:700; }
.km-senin s { color:var(--muted); }
.km-dinle { display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; min-width:44px; min-height:44px; border:0; border-radius:22px; background:transparent; color:var(--primary); font-size:18px; cursor:pointer; }
.km-dinle svg { width:22px; height:22px; }
/* 🔤 «Neden bought?» (fiil halleri 2. aşama): cevaptan sonra küçük, kapalı açılır blok — halNedeni satırları */
.km-fiil-neden { margin-top:8px; border-top:1px dashed var(--line); padding-top:6px; }
.km-fiil-neden > summary { display:flex; align-items:center; gap:8px; min-height:44px; cursor:pointer; list-style:none; font-weight:700; }
.km-fiil-neden > summary::-webkit-details-marker { display:none; }
.km-fiil-neden > summary::after { content:"›"; margin-left:auto; font-size:20px; color:var(--muted); transition:transform .15s; }
.km-fiil-neden[open] > summary::after { transform:rotate(90deg); }
.km-fiil-neden > summary small { color:var(--muted); font-weight:500; }
.km-fiil-neden > summary svg { width:20px; height:20px; flex:0 0 auto; }
.km-fiil-neden ul { margin:2px 0 4px; padding-left:22px; }
.km-fiil-neden li { margin:3px 0; font-size:15px; line-height:1.4; }

/* sonuç */
.km-buyuk { font-size:28px; font-weight:900; margin:4px 0 !important; }
.km-puanlar { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:16px; }
.km-puanlar li { display:flex; flex-direction:column; gap:6px; min-width:0; }
.km-puanlar b { overflow-wrap:anywhere; }
.km-puan { font-weight:900; }
.km-cubuk { height:10px; background:var(--line); border-radius:6px; overflow:hidden; }
.km-cubuk i { display:block; height:100%; background:var(--ok); border-radius:6px; }
.km-cubuk.zayif i { background:var(--warn); }
.km-sonuc > .btn { margin-top:0; }

.km-kok button:focus-visible, .km-kok summary:focus-visible { outline:3px solid var(--primary); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { .km-kok * { transition:none !important; } }

/* ayar: tek ekran (375 px), her seçim bir satır; yardım ve zorluk üçer düğme (Riven 22 Eki) */
.km-ayar-kart { display:flex; flex-direction:column; gap:10px; }
.km-ayar-kart h2 { margin:0; }
.km-link { background:none; border:0; color:var(--primary); font:inherit; font-weight:700; font-size:14px; text-decoration:underline; min-height:44px; padding:0 4px; cursor:pointer; }
.km-ayar-satir { display:flex; flex-direction:column; gap:4px; min-width:0; }
.km-etk { font-size:13px; font-weight:800; color:var(--muted); }
.km-segler { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.km-seg { flex:1 1 auto; min-width:44px; min-height:44px; padding:6px 10px; border:2px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); font:inherit; font-size:14px; font-weight:800; cursor:pointer; white-space:nowrap; }
.km-seg.on { border-color:var(--primary); background:var(--primary); color:var(--koci-on-primary, #fff); }
.km-seg:disabled { opacity:.45; cursor:default; }
.km-seg3 .km-seg { flex:1 1 0; }
.km-serbest-in { flex:0 1 84px; width:84px; min-height:44px; padding:6px 8px; font-size:15px; }
/* soru içi yardım */
.km-yardim { margin-top:10px; display:flex; flex-direction:column; gap:4px; border-top:1px dashed var(--line); padding-top:8px; }
.km-yardim-satir { display:flex; gap:8px; align-items:flex-start; font-size:15px; margin:2px 0 !important; }
.km-yardim-satir svg { width:18px; height:18px; flex:0 0 auto; margin-top:2px; }
.km-yardim-al { display:block; margin:8px 0 0 auto; color:var(--muted); font-weight:600; }
.km-ipucu { display:flex; align-items:center; justify-content:center; gap:6px; }
.km-cizgi { text-decoration:underline wavy var(--bad); text-underline-offset:4px; text-decoration-thickness:2px; }
.km-yardim-ozet { font-weight:700; }
/* kelime taşları ve trafik ışığı (Cümle Akademisi renkleri: --kti-*, her temada; renk + şekil + rakam) */
.km-kurulan { display:flex; flex-wrap:wrap; gap:6px; min-height:52px; align-items:center; border:2px dashed var(--line); border-radius:12px; padding:6px; margin:8px 0; }
.km-tas { min-height:44px; min-width:44px; max-width:100%; padding:6px 12px; border:2px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); font:inherit; font-size:16px; font-weight:700; overflow-wrap:anywhere; cursor:pointer; display:inline-flex; align-items:center; gap:4px; }
.km-tas i { font-style:normal; font-size:12px; }
.km-a1 { color:var(--kti-k, #c2353f); background:var(--kti-kz, #fde8ea); border-color:currentColor; }
.km-a2 { color:var(--kti-s, #8f5a00); background:var(--kti-sz, #fff1d2); border-color:currentColor; }
.km-a3 { color:var(--kti-y, #1d7a45); background:var(--kti-yz, #e1f4e7); border-color:currentColor; }
.km-isik-tr { line-height:2.1; }
.km-isik-p { border:2px solid var(--line); border-radius:10px; padding:2px 8px; font-weight:700; display:inline-flex; gap:4px; align-items:center; }
.km-isik-p i { font-style:normal; font-size:12px; }
.km-isik-ak { display:inline-block; border:0; background:none; font-weight:700; margin-right:6px; }
.km-isik-p.km-bitisik { margin-left:1px; }
/* ayar sıkıştırma: 375 px'te bütün seçimler ve Başlat tek ekranda (konu çipleri ikişer, adlar kısalır; tam ad title / aria-label'da) */
.km-ayar .km-ayar-kart { padding:14px; gap:8px; }
.km-cip-sik { margin:0; gap:6px; }
.km-cip-sik .km-cip { max-width:calc(50% - 3px); font-size:13px; padding-left:10px; }
.km-cip-sik .km-cip > span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.km-ayar .km-segler { gap:4px; }
.km-ayar .km-seg { padding:6px; font-size:13px; flex:1 1 auto; }   /* dar ekran + büyük yazıda yazı kırpılmaz, düğme alt satıra geçer */
.km-ayar .km-adet { flex:1 1 44px; min-width:44px; }
.km-ayar .km-serbest-in { flex:0 1 64px; width:64px; }
.km-ayar-not { margin:0 !important; }
@media (max-width: 340px) { .km-cip-sik .km-cip { max-width:100%; } }
/* ⛔ çelişen konular (veriden): seçiliyle aynı soruda olmayan aday soluk, «+» kapalı, altında küçük kırmızı not; ayar ekranında çip altında aynı not */
.km-konu.km-celisik { opacity:.6; cursor:not-allowed; }
.km-konu.km-celisik .km-konu-tik { border-style:dashed; }
.km-kok .km-celiski { display:block; color:var(--bad); font-size:12.5px; font-weight:700; overflow-wrap:anywhere; }
.km-cip.km-cip-celisik { border-color:var(--bad); }
.km-celiski-liste { display:flex; flex-direction:column; gap:2px; }
/* 🤝 «Bunlarla iyi gider»: canlı ortak soru sayısı, yeşil öneri çipleri, listede ortak soru sayısı */
.km-kok .km-tam-sayi { margin:2px 0 4px !important; font-size:14px; font-weight:700; min-height:0; }
.km-tam.ok { color:var(--ok); }
.km-tam.uyari { color:var(--warn); }
.km-uyum { display:flex; flex-direction:column; gap:4px; margin:6px 0 8px; }
.km-uyum-cipler { display:flex; flex-wrap:wrap; gap:6px; }
.km-uyum-cip { display:inline-flex; align-items:center; gap:6px; min-height:44px; max-width:100%; padding:6px 12px; border:2px solid var(--ok); border-radius:22px; background:var(--ok-bg); color:var(--ink); font:inherit; font-size:14px; font-weight:700; overflow-wrap:anywhere; text-align:left; cursor:pointer; }
.km-uyum-cip i { font-style:normal; font-weight:900; color:var(--ok); }
.km-ortak { color:var(--ok); font-weight:700; }
/* ─── 2. paket (Riven 22 Eki) ─────────────────────────────────────────────── */
/* taş modu: bütün taşlar yerleşmeden Kontrol et kapalı («1 taş dışarıda kaldı») */
.km-tas-not { margin:0 0 6px !important; text-align:center; }
/* 🔁 tekrar çipi (aralıklı tekrardan gelen soru) ve sonuç özeti */
.km-tekrar-cip { display:inline-flex; align-items:center; gap:4px; border:2px solid var(--warn); border-radius:10px; padding:2px 8px; font-size:13px; font-weight:800; color:var(--ink); background:var(--warn-bg); }
.km-tekrar-cip svg, .km-tekrar-ozet svg { width:16px; height:16px; }
.km-tekrar-ozet { display:flex; gap:6px; align-items:center; font-weight:700; }
/* ✍️ kendi cümlen: konu çipleri, «Konular ne istiyor?», kapsama satırı, sonuçta cümle listesi */
.km-serbest-konular { list-style:none; padding:0; margin:4px 0 6px; }
.km-serbest-konular .km-cip { padding:4px 12px; min-height:36px; font-size:14px; }
.km-kurallar { border:1px dashed var(--line); border-radius:12px; padding:6px 10px; margin:6px 0; }
.km-kurallar summary { min-height:40px; display:flex; align-items:center; font-weight:700; cursor:pointer; }
.km-kurallar ul { margin:4px 0 6px; padding-left:18px; font-size:14px; } .km-kurallar li { margin:4px 0; overflow-wrap:anywhere; }
.km-kapsam { font-weight:800; }
.km-cumleler { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.km-cumleler li { display:flex; gap:8px; align-items:flex-start; overflow-wrap:anywhere; }
.km-cumleler li > span:first-child { flex:0 0 1.2em; font-weight:900; } .km-c-dogru > span:first-child { color:var(--ok); } .km-c-yanlis > span:first-child { color:var(--bad); } .km-c-kismen > span:first-child { color:var(--warn); }
/* 🖨️ çalışma kâğıdı (karma-yazdir.js): ekranda önizleme, kâğıtta A4 */
.ky-araclar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .ky-araclar .btn { flex:1 1 160px; width:auto; margin-top:0; } .ky-araclar p { flex:1 1 100%; margin:0; }
.ky-kagit { background:#fff; color:#1f2a44; border:2px solid var(--line); border-radius:14px; padding:16px; font-size:15px; line-height:1.5; overflow-wrap:anywhere; }
.ky-bas { display:block; margin-bottom:8px; } .ky-bas small { color:#555; }
.ky-ad { display:flex; flex-wrap:wrap; gap:8px 16px; margin:8px 0 12px; font-weight:700; } .ky-ad .ky-cizgi { flex:1 1 120px; }
.ky-yonerge { margin:2px 0; font-size:13px; color:#444; }
.ky-liste, .ky-anahtar-liste { list-style:none; padding:0; margin:10px 0 0; display:flex; flex-direction:column; gap:12px; }
.ky-soru { display:flex; gap:8px; break-inside:avoid; } .ky-soru > div { flex:1 1 auto; min-width:0; }
.ky-no { flex:0 0 2em; font-weight:900; } .ky-q { margin:0 0 4px; font-weight:600; } .ky-tr { display:block; color:#555; font-size:13px; margin-bottom:4px; }
.ky-cizgi { display:block; height:1.6em; border-bottom:1px solid #777; margin:4px 0; }
.ky-bosluk { display:inline-block; width:4em; border-bottom:2px solid #1f2a44; vertical-align:baseline; margin:0 3px; }
.ky-siklar { list-style:none; padding:0; margin:4px 0 0; display:flex; flex-wrap:wrap; gap:4px 16px; } .ky-siklar li { display:inline-flex; align-items:center; gap:6px; }
.ky-kutu { display:inline-block; width:12px; height:12px; border:1.5px solid #1f2a44; border-radius:3px; }
.ky-sik-satir { display:flex; flex-wrap:wrap; gap:4px 16px; margin:2px 0 0; font-size:14px; }
.ky-yanlis { color:#b3261e; font-weight:900; }
.ky-anahtar { margin-top:18px; padding-top:12px; border-top:2px dashed #999; break-before:page; page-break-before:always; }
.ky-anahtar h2 { margin:0 0 4px; font-size:18px; } .ky-anahtar-liste li { display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline; } .ky-anahtar-liste small { flex:1 1 100%; color:#555; }
@media print {
  .ky-kok .ky-araclar, .ky-kok .km-kucuk { display:none !important; }
  body:has(.ky-kok) .top, body:has(.ky-kok) .nav, body:has(.ky-kok) .kn-menu, body:has(.ky-kok) #nav, body:has(.ky-kok) .alt-menu { display:none !important; }
  .ky-kagit { border:0; border-radius:0; padding:0; font-size:11.5pt; color:#000; }
  .ky-anahtar { break-before:page; page-break-before:always; }
  @page { size:A4; margin:14mm; }
}