/* 📘 Düzensiz fiiller · fiil halleri (fiil-halleri.js; Riven 22 Eki). Önek fh-. Onaylı tasarım: public/onizleme/fiil-tasarim.html (1 · Liste, 2 · Kart, 3 · Tablo).
   Renkler uygulamanın değişkenlerinden (--card, --ink, --muted, --line, --primary, --bg): bütün temalarda (açık, koyu, Tek Adım, Sakin…) aynı düzen.
   V1 mavi · V2 turuncu · V3 yeşil: temel renk metin rengiyle karışır (color-mix) → koyu zeminde açık, açık zeminde koyu ton (okunurluk). Yazdırma: yazdir-belge.css (yb-). */
.fh-kok, .fh-halleri { --fh-v1:#3b7dd8; --fh-v2:#b8690c; --fh-v3:#1d8a55; --fh-zemin:rgba(127,127,127,.12); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .fh-kok, .fh-halleri { --fh-v1:color-mix(in srgb, #4d8ff0 68%, var(--ink)); --fh-v2:color-mix(in srgb, #ea8f1c 68%, var(--ink)); --fh-v3:color-mix(in srgb, #25a86a 68%, var(--ink));
    --fh-zemin:color-mix(in srgb, var(--ink) 8%, var(--card)); --fh-zemin2:color-mix(in srgb, var(--ink) 4%, var(--card)); }
}
/* ——— ortak satır: kelime kartı, sözlük, Kartlar, Bugünün 10'u («Halleri: buy · bought · bought») ——— */
.fh-halleri { margin:6px 0 2px; font-size:15px; line-height:1.7; }
.fh-satir { margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:2px 4px; }
.fh-et { color:var(--muted); font-weight:700; font-size:13px; margin-right:2px; }
.fh-b { display:inline-flex; align-items:center; gap:2px; }
.fh-nok { color:var(--muted); padding:0 2px; }
.fh-ya { color:var(--muted); padding:0 1px; }
.fh-halleri .speak.small.fh-ses { width:32px; height:32px; min-width:32px; font-size:15px; box-shadow:0 2px 0 var(--primary-dk); margin:0 1px; vertical-align:middle; }
.fh-halleri .kdk-ses.fh-ses { width:auto; height:auto; min-width:28px; min-height:28px; padding:2px 4px; font-size:14px; }
.fh-kalin { font-weight:800; }
.fh-halleri mark { background:var(--warn-bg, #fff1c7); color:inherit; border-radius:4px; padding:0 2px; }
.fh-duzenli, .fh-anlam { color:var(--muted); font-size:12px; font-weight:600; }
.fh-hal-not, .fh-halleri .fh-not { display:block; color:var(--muted); font-size:13px; margin-top:2px; }
.fh-sozluk-not { background:var(--warn-bg, #fff6df); border-color:var(--warn, #e5b04d); }
.fh-sozluk-not .muted { font-size:13px; }

/* ——— ekran iskeleti: kartlar arası eşit 10 px ——— */
.fh-kok { display:flex; flex-direction:column; gap:10px; min-width:0; max-width:100%; }
.fh-kok > * { margin:0; }
.fh-kok h2 { margin:0 0 6px; font-size:20px; }
.fh-kucuk { font-size:13px; margin:0; }
.fh-c2 { color:var(--fh-v2); font-weight:700; } .fh-c3 { color:var(--fh-v3); font-weight:700; }
.fh-ok { color:var(--fh-v3); } .fh-yok { color:var(--bad); }
.fh-not { color:var(--muted); font-size:12px; text-align:center; }
.fh-link { background:none; border:0; padding:4px 0; color:var(--primary); font:inherit; font-weight:700; text-decoration:underline; cursor:pointer; }
.fh-b-birincil, .fh-b-ikincil, .fh-b-tekrar, .fh-b-bildi { min-height:48px; border-radius:14px; font:inherit; font-size:15px; font-weight:800; cursor:pointer; padding:0 12px; }
.fh-b-birincil { flex:1 1 0; border:0; background:var(--primary); color:var(--koci-on-primary, #fff); box-shadow:0 3px 0 var(--primary-dk); }
.fh-b-ikincil { flex:1 1 0; border:1px solid var(--line); background:var(--fh-zemin); color:var(--ink); }
.fh-kok button:focus-visible, .fh-kok input:focus-visible, .fh-kok tr:focus-visible { outline:3px solid var(--primary); outline-offset:2px; }
/* seviye segmenti (A1 · A1–A2 · A1–B1 · Hepsi; altında sayı) */
.fh-seg { display:flex; gap:4px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:4px; }
.fh-seg button { flex:1 1 0; min-width:0; min-height:44px; border:0; border-radius:10px; background:transparent; color:var(--muted); font:inherit; font-size:13px; font-weight:700; line-height:1.15; padding:4px 2px; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; }
.fh-seg button small { font-size:10.5px; font-weight:600; opacity:.85; }
.fh-seg button.on { background:var(--primary); color:var(--koci-on-primary, #fff); }
/* «Bildiğin N/M» */
.fh-ilerleme { display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:10px 12px; font-size:13px; color:var(--muted); }
.fh-ilerleme b { color:var(--ink); white-space:nowrap; }
.fh-cubuk { flex:1; height:8px; background:var(--fh-zemin); border-radius:6px; overflow:hidden; }
.fh-cubuk i { display:block; height:100%; border-radius:6px; background:linear-gradient(90deg, var(--fh-v3), var(--fh-v1)); }
/* arama + tablo */
.fh-ara-satir { display:flex; gap:8px; }
.fh-ara { flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:0 12px; min-height:46px; color:var(--muted); }
.fh-ara:focus-within { border-color:var(--primary); }
.fh-kok .fh-ara input { flex:1; min-width:0; width:auto; margin:0; padding:10px 0; border:0; border-radius:0; background:transparent; color:var(--ink); font:inherit; font-size:14px; box-shadow:none; outline:none; }
.fh-tablo-git { flex:0 0 auto; min-height:46px; padding:0 12px; border-radius:14px; border:1px solid var(--line); background:var(--card); color:var(--ink); font:inherit; font-weight:700; font-size:13px; white-space:nowrap; cursor:pointer; }

/* ——— 1 · Liste: aile başlığı, satır (V1 + Türkçe · V2 › V3 · 🔊) ——— */
#fhListe { display:flex; flex-direction:column; gap:10px; }
.fh-grup-kap { display:flex; flex-direction:column; gap:6px; }
.fh-grup { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:2px 2px 0; font-size:13px; font-weight:700; }
.fh-grup b { color:var(--ink); } .fh-grup span { background:var(--fh-zemin); border-radius:8px; padding:2px 8px; font-size:11px; color:var(--muted); font-weight:700; }
.fh-sat-kap { background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.fh-sat-kap.acik { border-color:var(--primary); box-shadow:inset 0 0 0 1px var(--primary); }
.fh-sat { display:grid; grid-template-columns:minmax(0, 1fr) 44px; align-items:center; }
.fh-sat-ana { position:relative; display:grid; grid-template-columns:96px minmax(0, 1fr); align-items:center; gap:8px; min-width:0; min-height:56px; padding:8px 0 8px 12px; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.fh-v1 { display:flex; flex-direction:column; min-width:0; }
.fh-v1 b { font-size:16px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fh-v1 small { font-size:12px; line-height:1.3; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fh-hal { display:flex; align-items:center; gap:5px; min-width:0; flex-wrap:nowrap; }
.fh-hal > i { flex:0 0 auto; color:var(--muted); font-style:normal; font-size:12px; }
.fh-pill { flex:0 1 auto; min-width:0; padding:5px 8px; border-radius:9px; background:var(--fh-zemin); font-weight:700; font-size:14px; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fh-pill.v2 { color:var(--fh-v2); box-shadow:inset 0 0 0 1px currentColor; }
.fh-pill.v3 { color:var(--fh-v3); box-shadow:inset 0 0 0 1px currentColor; }
.fh-pill sup { font-size:9px; margin-left:1px; opacity:.8; }
.fh-kok .fh-s { font-size:13px; } .fh-kok .fh-xs { font-size:12px; }
.fh-tik { position:absolute; top:4px; right:0; font-size:11px; font-weight:800; color:var(--fh-v3); }
.fh-ses-yuvarlak { width:32px; height:32px; flex:0 0 auto; justify-self:center; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:var(--fh-zemin); color:var(--fh-v1); font-size:14px; cursor:pointer; }
.fh-bos { padding:12px; text-align:center; }
/* açılan örnekler */
.fh-ornek { display:flex; flex-direction:column; gap:8px; padding:10px 12px 12px; border-top:1px solid var(--line); background:var(--fh-zemin2, transparent); }
.fh-o p { margin:0; font-size:14px; line-height:1.45; color:var(--ink); overflow-wrap:anywhere; }
.fh-o small { display:block; margin-top:1px; color:var(--muted); font-size:12.5px; line-height:1.35; }
.fh-o-et { display:inline-block; min-width:24px; margin-right:6px; padding:1px 5px; border-radius:6px; font-size:10.5px; font-weight:800; text-align:center; vertical-align:1px; color:var(--card); }
.fh-o-et.v1, .fh-n.n1 { background:var(--fh-v1); } .fh-o-et.v2, .fh-n.n2 { background:var(--fh-v2); } .fh-o-et.v3, .fh-n.n3 { background:var(--fh-v3); }
.fh-kok b.v1 { color:var(--fh-v1); } .fh-kok b.v2 { color:var(--fh-v2); } .fh-kok b.v3 { color:var(--fh-v3); }
.fh-neden { margin-top:3px; }
.fh-neden summary { display:inline-block; font-size:12px; font-weight:800; color:var(--primary); cursor:pointer; list-style:none; padding:2px 0; }
.fh-neden summary::-webkit-details-marker { display:none; }
.fh-neden summary::before { content:"▸ "; } .fh-neden[open] summary::before { content:"▾ "; }
.fh-neden ul { margin:4px 0 0; padding-left:18px; font-size:12.5px; line-height:1.4; color:var(--muted); text-align:left; }
.fh-neden li { margin:2px 0; }
.fh-ornek .fh-not { text-align:left; }
/* altta sabit iki düğme */
.fh-alt-dugme { position:sticky; bottom:-20px; z-index:2; display:flex; gap:8px; padding:14px 0 26px; margin:2px 0 -20px; background:linear-gradient(to bottom, transparent, var(--bg) 30%); }   /* #screen alt boşluğu 20 px: çubuk ekranın dibine otursun */
.fh-alt-dugme .fh-b-ikincil { flex:0 0 46%; }

/* ——— 2 · Kart ——— */
.fh-nokta { display:flex; justify-content:center; gap:6px; margin:2px 0; }
.fh-nokta i { width:7px; height:7px; border-radius:50%; background:var(--fh-zemin); }
.fh-nokta i.gecti { background:var(--muted); opacity:.55; }
.fh-nokta i.on { width:18px; border-radius:5px; background:var(--primary); }
.fh-kart { display:flex; flex-direction:column; gap:12px; padding:20px 16px; border:1px solid var(--line); border-radius:24px; background:var(--card); text-align:center; box-shadow:0 8px 24px rgba(0,0,0,.16); }
.fh-sev { align-self:center; padding:3px 9px; border-radius:8px; background:var(--fh-zemin); color:var(--muted); font-size:11px; font-weight:700; }
.fh-kok .fh-buyuk { font-size:40px; font-weight:800; letter-spacing:-.5px; line-height:1.1; overflow-wrap:anywhere; }
.fh-kok .fh-buyuk.fh-s { font-size:32px; } .fh-kok .fh-buyuk.fh-xs { font-size:26px; }
.fh-kart-tr { color:var(--muted); font-size:15px; }
.fh-uc { display:flex; flex-direction:column; gap:10px; margin-top:2px; }
.fh-hal-sat { display:flex; align-items:center; gap:12px; width:100%; min-height:58px; padding:10px 12px; border:0; border-radius:14px; background:var(--fh-zemin); color:inherit; font:inherit; text-align:left; }
.fh-hal-sat b { flex:1; min-width:0; font-size:21px; overflow-wrap:anywhere; }
button.fh-hal-sat { cursor:pointer; } button.fh-hal-sat.gizli b { color:var(--muted); font-weight:600; font-size:14px; }
button.fh-hal-sat:disabled { opacity:.55; cursor:default; }
.fh-hal-sat .fh-ses-yuvarlak { background:var(--card); }
.fh-n { flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800; color:var(--card); }
.fh-kart-ornek { text-align:left; }
.fh-kart-ornek p { margin:0; font-size:14px; line-height:1.45; } .fh-kart-ornek small { color:var(--muted); font-size:12.5px; }
.fh-kartb { display:flex; gap:8px; }
.fh-b-tekrar { flex:1 1 0; border:1.5px solid var(--bad); background:var(--card); color:var(--bad); }
.fh-b-bildi { flex:1 1 0; border:0; background:var(--fh-v3); color:var(--card); }
.fh-sonuc-sayi { font-size:17px; margin:4px 0; }
/* ——— Yaz ——— */
.fh-yaz-soru { display:flex; align-items:center; justify-content:center; gap:10px; }
.fh-form { display:flex; flex-direction:column; gap:8px; text-align:left; }
.fh-alan { display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:700; }
.fh-kok .fh-alan input { margin:0; font-size:18px; } .fh-alan input.ok { border-color:var(--ok); } .fh-alan input.bad { border-color:var(--bad); }
.fh-yaz-kart > .fh-kucuk { text-align:left; }
.fh-donut { padding:10px 12px; border-radius:14px; border:2px solid var(--line); text-align:left; display:flex; flex-direction:column; gap:6px; }
.fh-donut.ok { border-color:var(--ok); background:var(--ok-bg, transparent); } .fh-donut.bad { border-color:var(--bad); background:var(--bad-bg, transparent); }
.fh-donut p { margin:0; } .fh-dogrusu { font-size:17px; }
.fh-yanlis-liste { margin:4px 0 0; padding-left:18px; } .fh-yanlis-liste li { margin:4px 0; overflow-wrap:anywhere; } .fh-yanlis-liste small { color:var(--muted); }
.fh-sonuc .fh-kartb { margin-top:10px; }
/* 🔤 karma köprüsü (2. aşama): açık satırda «Bu fiille alıştırma», tur / sonuç sonunda «Bu seviyenin fiilleriyle karma soru» */
.fh-ornek .fh-alistir { flex:0 0 auto; align-self:flex-start; min-height:44px; padding:0 16px; }
.fh-seviye-karma { display:block; min-height:44px; margin:10px auto 0; text-align:center; }

/* ——— 3 · Tablo: renkli başlık, harf atlama, sabit sütunlar, hoparlörsüz ——— */
.fh-yaz-dugme { display:flex; gap:8px; }
.fh-yaz-dugme button { min-height:44px; font-size:14px; }
.fh-yaz-diger { font-size:13px; }
.fh-harf { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:1px 0 3px; }
.fh-harf::-webkit-scrollbar { display:none; }
.fh-harf button { flex:0 0 auto; min-width:34px; min-height:34px; padding:0 9px; border:0; border-radius:8px; background:var(--fh-zemin); color:var(--muted); font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.fh-harf button.on { background:var(--primary); color:var(--koci-on-primary, #fff); }
.fh-tablo-kap { background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.fh-tablo { width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; font-size:13.5px; }
.fh-tablo col.c1 { width:23%; } .fh-tablo col.c2 { width:24%; } .fh-tablo col.c3 { width:25%; } .fh-tablo col.c4 { width:28%; }
.fh-tablo th { padding:10px 8px; text-align:left; font-size:10.5px; letter-spacing:.05em; line-height:1.2; color:var(--muted); background:var(--fh-zemin); overflow-wrap:anywhere; }
.fh-tablo th.c1 { color:var(--fh-v1); } .fh-tablo th.c2 { color:var(--fh-v2); } .fh-tablo th.c3 { color:var(--fh-v3); }
.fh-tablo td { padding:9px 8px; border-top:1px solid var(--line); vertical-align:top; overflow-wrap:anywhere; line-height:1.3; }
.fh-tablo td.v1 { font-weight:800; } .fh-tablo td.v2 { color:var(--fh-v2); font-weight:600; } .fh-tablo td.v3 { color:var(--fh-v3); font-weight:600; }
.fh-tablo td.tr { color:var(--muted); font-size:12.5px; } .fh-tablo td.tr small { font-size:11px; }
.fh-tablo tr.alt td { background:var(--fh-zemin2, transparent); }
.fh-tablo tr[data-fh-oku] { cursor:pointer; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.fh-tablo tr.okunuyor td { background:var(--fh-zemin); }
.fh-tablo tr[id] { scroll-margin-top:12px; }

/* ——— dar telefon (≤ 360 px: 320'lik iPhone SE) ——— */
@media (max-width:360px) {
  .fh-sat-ana { grid-template-columns:84px minmax(0, 1fr); gap:6px; padding-left:10px; }
  .fh-sat { grid-template-columns:minmax(0, 1fr) 40px; }
  .fh-pill { padding:4px 6px; font-size:13px; } .fh-kok .fh-pill.fh-s { font-size:12px; } .fh-kok .fh-pill.fh-xs { font-size:11px; }
  .fh-v1 b { font-size:15px; } .fh-kok .fh-v1 b.fh-s { font-size:13px; } .fh-kok .fh-v1 b.fh-xs { font-size:12px; }
  .fh-hal { gap:3px; }
  .fh-seg button { font-size:12px; }
  .fh-tablo { font-size:12.5px; } .fh-tablo th { padding:8px 5px; font-size:9.5px; } .fh-tablo td { padding:8px 5px; } .fh-tablo td.tr { font-size:11.5px; }
  .fh-kok .fh-buyuk { font-size:34px; }
  .fh-alt-dugme button, .fh-yaz-dugme button { font-size:13px; padding:0 6px; white-space:nowrap; }
  .fh-tablo th { font-size:9px; letter-spacing:.02em; overflow-wrap:normal; word-break:keep-all; }
}

/* Liste kartı: V1/V2/V3, mobilde de ayrı ve okunaklı dinleme düğmeleri. */
.fh-kart-sesleri { width:100%; max-width:360px; }
.fh-kart-haller { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:6px 0; }
.fh-kart-hal { display:flex; flex-direction:column; align-items:stretch; gap:5px; min-width:0; }
.fh-kart-hal > small { font-size:11px; font-weight:700; color:var(--muted); }
.fh-kart-hal .speak.fh-kart-ses { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:100%; min-width:0; min-height:60px; height:auto; padding:8px 4px; border-radius:12px; font-size:15px; line-height:1.3; overflow-wrap:anywhere; box-sizing:border-box; }

.kart-kullanim-ac { font-size:14px; min-height:42px; margin:0; }
.kart-kullanim { width:100%; text-align:left; font-size:14px; line-height:1.5; user-select:text; }
.kart-kullanim[hidden] { display:none; }
.kart-kullanim-ornek { padding:10px; background:var(--bg); border-radius:10px; }
.kart-kullanim-ornek > b { display:inline; font-size:15px; }
.kart-kullanim h4 { margin:12px 0 4px; font-size:13px; color:var(--muted); }
.kart-kullanim .dict-yer-sat { text-align:left; white-space:normal; width:100%; min-height:44px; }