/* LTLearner · Okul paneli ve veli "Okul penceresi" — site/app/okul.css
   Yetişkin arayüzü: yaş bandı CSS'i kullanılmaz; renk ve yazı tipi app.css belirteçlerinden. Beceri dili TUĞLA: dolu tuğla = ustalık/etkin gün.
   Dokunma hedefi en az 44 px; odak halkası belirgin; hareket azaltma tercihine uyulur. Sıralama/karşılaştırma görseli yok. */
.ok { display: grid; gap: 18px; max-width: 820px; margin: 0 auto; }
.ok *, .ok *::before, .ok *::after { box-sizing: border-box; }
.ok p { margin: 0; line-height: 1.5; text-wrap: pretty; }
.ok-ust { display: grid; gap: 8px; }
.ok-baslik { font-size: clamp(1.7rem, 5.2vw, 2.5rem); overflow-wrap: anywhere; }
.ok-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 2px; }
.ok-h2 { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 1.22rem; letter-spacing: -0.02em; line-height: 1.2; margin: 0; color: var(--metin); }
.ok-h2 svg { flex: none; color: var(--isik); }
.ok-h3, .ok-blok h3 { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; margin: 4px 0 0; color: var(--metin); }
.ok-h3 svg { color: var(--isik); }
.ok-yardim { display: block; font-size: 0.86rem; color: var(--soluk); line-height: 1.45; }
.ok-giris-metin { color: var(--metin-yumusak); }
.ok-kart { background: var(--yuzey); border: 1px solid var(--kenar); border-radius: var(--r-kart); padding: 14px 16px; display: grid; gap: 6px; color: var(--metin); }
.ok-bos { text-align: center; justify-items: center; border-style: dashed; color: var(--soluk); padding: 22px 16px; }
.ok-kapali { border-style: dashed; color: var(--soluk); }
.ok-demo { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: var(--r-hap); font: 600 0.8rem/1 var(--sans); color: var(--murekkep); background: var(--kum); }
.ok-bolum { display: grid; gap: 12px; padding-top: 6px; }
.ok-bas { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.ok-blok { display: grid; gap: 10px; background: var(--yuzey); border: 1px solid var(--kenar); border-radius: var(--r-bolum); padding: 16px; }

/* düğmeler */
.ok-dugme { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; min-width: 48px; padding: 0 22px; border-radius: var(--r-hap); font: 600 1rem/1 var(--sans); cursor: pointer; text-decoration: none; border: 1px solid transparent; transition: background 160ms var(--ease), border-color 160ms var(--ease), transform 160ms var(--ease); width: max-content; max-width: 100%; }
.ok-dugme.birincil { background: var(--kum); color: var(--murekkep); }
.ok-dugme.birincil:hover { background: var(--kum-koyu); transform: translateY(-1px); }
.ok-dugme.ikincil { background: transparent; color: var(--metin); border-color: var(--kenar-2); }
.ok-dugme.ikincil:hover { background: var(--yuzey-2); border-color: var(--kenar-3); }
.ok-dugme.hayalet { background: transparent; color: var(--soluk); padding: 0 14px; }
.ok-dugme.hayalet:hover { color: var(--metin); background: var(--yuzey-2); }
.ok-dugme.tehlike { background: transparent; color: var(--hata); border-color: rgba(255, 107, 107, 0.45); }
.ok-dugme.tehlike:hover { background: rgba(255, 107, 107, 0.08); }
.ok-dugme:disabled { opacity: 0.5; cursor: default; transform: none; }
.ok-dugme:focus-visible, .ok-cip:focus-visible, .ok-satir:focus-visible, .ok-geri:focus-visible, .ok-anahtar input:focus-visible + .ok-anahtar-kutu { outline: 2px solid var(--kum); outline-offset: 3px; }
.ok-eylem { display: flex; flex-wrap: wrap; gap: 10px; }
.ok-alt-eylem { display: flex; justify-content: flex-end; }
.ok-geri { display: inline-flex; align-items: center; min-height: 44px; width: max-content; color: var(--soluk); text-decoration: none; font-weight: 500; padding: 0 4px; }
.ok-geri::before { content: "‹"; margin-right: 8px; font-size: 1.3rem; line-height: 1; }
.ok-geri:hover { color: var(--metin); }

/* çipler (açılır liste yerine) */
.ok-rol, .ok-siniflar { display: flex; flex-wrap: wrap; gap: 8px; }
.ok-cip { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 16px; border-radius: var(--r-hap); border: 1px solid var(--kenar-2); background: transparent; color: var(--metin-yumusak); font: 500 0.95rem/1 var(--sans); cursor: pointer; }
.ok-cip.sec { border-color: var(--kum); color: var(--kum); background: rgba(244, 217, 166, 0.1); }
.ok-cip:hover:not(.sec):not(.duz) { background: var(--yuzey-2); }
.ok-cip.duz { min-height: 30px; padding: 0 12px; font-size: 0.82rem; cursor: default; color: var(--metin-yumusak); }

/* form */
.ok-form { display: grid; gap: 14px; }
.ok-iki { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ok-alan { display: grid; gap: 6px; min-width: 0; }
.ok-alan > label { font-size: 0.9rem; font-weight: 600; color: var(--metin-yumusak); }
.ok-alan input[type="text"] { width: 100%; min-height: 48px; background: var(--zemin-2); color: var(--metin); border: 1px solid var(--kenar-2); border-radius: var(--r-kart); padding: 12px 14px; font: 400 1rem/1.3 var(--sans); -webkit-user-select: text; user-select: text; }
.ok-alan input#ok-vkod, .ok-alan input#ok-kod { letter-spacing: 0.12em; font-family: var(--display); font-weight: 600; text-transform: uppercase; }
.ok-alan input:focus { outline: none; border-color: var(--kum); background: var(--yuzey); box-shadow: 0 0 0 3px rgba(244, 217, 166, 0.14); }
.hata-metin.ok-hata { min-height: 1.2em; }
.ok-onay { display: flex; align-items: flex-start; gap: 12px; min-height: 48px; padding: 8px 0; cursor: pointer; line-height: 1.4; }
.ok-onay input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--kum); cursor: pointer; }

/* sınıf nabzı: kutular */
.ok-kutular { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ok-kutu { display: grid; gap: 6px; align-content: start; background: var(--yuzey); border: 1px solid var(--kenar); border-radius: var(--r-kart); padding: 14px; min-width: 0; }
.ok-kutu-et { font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--soluk); }
.ok-kutu-sayi { display: flex; align-items: center; gap: 8px; font: 700 1.8rem/1 var(--display); letter-spacing: -0.03em; color: var(--metin); }
.ok-yon { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--kenar-2); }
.ok-yon svg { width: 16px; height: 16px; }
.ok-yon.y-yukari { color: var(--iyi); border-color: rgba(46, 194, 126, 0.5); }
.ok-yon.y-asagi { color: var(--kum); border-color: rgba(244, 217, 166, 0.5); }
.ok-yon.y-ayni { color: var(--soluk); }

/* tuğla ısı haritası */
.ok-isi { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ok-isi li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 40px; padding: 4px 0; border-bottom: 1px solid var(--kenar); }
.ok-isi li:last-child { border-bottom: 0; }
.ok-isi-ad { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--metin-yumusak); font-weight: 500; overflow-wrap: anywhere; }
.ok-nokta { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--alan); box-shadow: 0 0 10px -2px var(--alan); }
.ok-tuglalar { display: inline-flex; gap: 4px; }
.ok-tuglalar i { width: 20px; height: 14px; border-radius: 3px; border: 1px dashed var(--kenar-3); background: transparent; }
.ok-tuglalar i.d { border: 0; background: var(--alan); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.28); }
.ok-bant { font-size: 0.8rem; color: var(--soluk); min-width: 70px; text-align: right; }
.ok-bant.b-guclu, .ok-bant.b-oturuyor { color: var(--metin-yumusak); }

/* takılan kazanımlar */
.ok-tak, .ok-kaz { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ok-tak li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--kenar); border-radius: var(--r-kart); background: var(--zemin-2); }
.ok-tak-ad, .ok-kaz li { display: grid; gap: 2px; min-width: 0; }
.ok-tak-ad b, .ok-kaz b { font: 600 0.92rem/1.2 var(--display); color: var(--metin); letter-spacing: 0.01em; }
.ok-tak-ad span, .ok-kaz span { font-size: 0.86rem; color: var(--soluk); overflow-wrap: anywhere; }
.ok-tak-say { display: grid; justify-items: end; gap: 4px; font-size: 0.85rem; color: var(--metin-yumusak); }
.ok-mini { display: inline-flex; flex-wrap: wrap; gap: 2px; max-width: 120px; justify-content: flex-end; }
.ok-mini i { width: 8px; height: 6px; border-radius: 1.5px; background: var(--kenar-2); }
.ok-mini i.d { background: var(--kum); }
.ok-kaz li { position: relative; padding: 8px 12px 8px 34px; border: 1px solid var(--kenar); background: var(--zemin-2); border-radius: var(--r-kucuk); --km: var(--kenar-3); }
.ok-kaz li::before { content: ""; position: absolute; left: 12px; top: 13px; width: 12px; height: 9px; border-radius: 2px; background: var(--km); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.28); }
.ok-kaz li.d-takildi { --km: var(--kum); }
.ok-kaz li.d-yolda { --km: var(--isik-koyu); }
.ok-kaz li.d-usta { --km: var(--iyi); }
.ok-h3.d-takildi { color: var(--kum); } .ok-h3.d-usta { color: var(--iyi); }

/* kilitli (k < 5) */
.ok-kilit { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 18px; border: 1px dashed var(--kenar-3); border-radius: var(--r-bolum); background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(255, 255, 255, 0.015) 10px 20px); }
.ok-kilit > svg { width: 28px; height: 28px; color: var(--kum); }
.ok-kilit div { display: grid; gap: 6px; }
.ok-kod-kart { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid rgba(244, 217, 166, 0.35); border-radius: var(--r-kart); background: rgba(244, 217, 166, 0.05); }
.ok-kod-kart > div { display: grid; gap: 4px; min-width: 0; }
.ok-kod { font: 700 1.5rem/1.1 var(--display); letter-spacing: 0.14em; color: var(--kum); -webkit-user-select: all; user-select: all; }

/* destek kartları ve listeler */
.ok-destekler, .ok-liste, .ok-gecmis, .ok-madde, .ok-oneriler, .ok-katilim, .ok-gormez-liste { margin: 0; padding: 0; list-style: none; }
.ok-destekler { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.ok-destek { align-content: start; gap: 10px; border-color: rgba(244, 217, 166, 0.35); }
.ok-kisi { display: flex; align-items: center; gap: 10px; }
.ok-kisi svg { width: 40px; height: 40px; flex: none; }
.ok-nedenler { display: flex; flex-wrap: wrap; gap: 6px; }
.ok-neden { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: var(--r-hap); font-size: 0.82rem; color: var(--kum); border: 1px solid rgba(244, 217, 166, 0.4); background: rgba(244, 217, 166, 0.06); }
.ok-oneri { color: var(--metin-yumusak); font-size: 0.92rem; }
.ok-oneriler { display: grid; gap: 6px; }
.ok-oneriler li { padding-left: 16px; position: relative; color: var(--metin-yumusak); }
.ok-oneriler li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 7px; height: 7px; border-radius: 2px; background: var(--kum); }
.ok-destek-blok { border-color: rgba(244, 217, 166, 0.35); }
.ok-destek-blok .ok-h2 svg { color: var(--kum); }
.ok-liste { display: grid; gap: 8px; }
.ok-satir { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px; border: 1px solid var(--kenar); border-radius: var(--r-kart); background: var(--yuzey); color: var(--metin); text-decoration: none; transition: border-color 160ms var(--ease), background 160ms var(--ease); }
.ok-satir:hover { border-color: var(--kenar-3); background: var(--yuzey-2); }
.ok-satir svg:first-child { width: 36px; height: 36px; }
.ok-satir > span { display: grid; gap: 2px; min-width: 0; }
.ok-satir small { color: var(--soluk); font-size: 0.84rem; overflow-wrap: anywhere; }
.ok-satir > svg:last-child { color: var(--soluk); }

/* katılım düzeni */
.ok-katilim { display: grid; gap: 8px; }
.ok-katilim li { display: grid; grid-template-columns: minmax(96px, auto) auto 1fr; align-items: center; gap: 12px; }
.ok-hafta { font-size: 0.88rem; color: var(--metin-yumusak); }
.ok-gunler { display: inline-flex; gap: 3px; }
.ok-gunler i { width: 16px; height: 12px; border-radius: 3px; border: 1px dashed var(--kenar-3); }
.ok-gunler i.d { border: 0; background: var(--isik-koyu); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25); }
.ok-dk { font-size: 0.84rem; color: var(--soluk); text-align: right; }

/* görmediklerimiz şeridi */
.ok-gormez { display: grid; gap: 10px; padding: 16px; border-radius: var(--r-bolum); border: 1px solid rgba(91, 242, 230, 0.22); background: linear-gradient(180deg, rgba(91, 242, 230, 0.05), transparent); }
.ok-gormez-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.ok-gormez-liste li { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: var(--r-hap); border: 1px solid var(--kenar-2); color: var(--metin-yumusak); font-size: 0.86rem; }
.ok-gormez-liste svg { width: 15px; height: 15px; color: var(--soluk); }

/* veli penceresi: kule, anahtar, önizleme, geçmiş */
.ok-pencere { border-top: 1px solid var(--kenar); padding-top: 18px; }
.ok-pencere-ust { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: center; }
.ok-kule { display: grid; gap: 6px; }
.ok-kat { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 14px; border-radius: var(--r-kucuk); border: 1px dashed var(--kenar-3); color: var(--soluk); font-size: 0.88rem; }
.ok-kat b { font-family: var(--display); font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; }
.ok-kat em { font-style: normal; font-size: 0.78rem; }
.ok-kat.acik { border-style: solid; color: var(--metin); }
.ok-kat.k2.acik { border-color: rgba(244, 217, 166, 0.6); background: rgba(244, 217, 166, 0.08); }
.ok-kat.k1.acik { border-color: rgba(91, 242, 230, 0.45); background: rgba(91, 242, 230, 0.06); }
.ok-kat.k0 { border-color: rgba(255, 107, 107, 0.35); color: var(--soluk); background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(255, 107, 107, 0.04) 8px 16px); }
.ok-anahtar-kap { display: grid; gap: 6px; }
.ok-anahtar { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; font-weight: 600; }
.ok-anahtar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ok-anahtar-kutu { position: relative; width: 52px; height: 30px; border-radius: 999px; background: var(--yuzey-3); border: 1px solid var(--kenar-2); transition: background 200ms var(--ease); flex: none; }
.ok-anahtar-kutu::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--metin-yumusak); transition: transform 220ms var(--ease), background 200ms var(--ease); }
.ok-anahtar input:checked + .ok-anahtar-kutu { background: rgba(244, 217, 166, 0.35); border-color: var(--kum); }
.ok-anahtar input:checked + .ok-anahtar-kutu::after { transform: translateX(22px); background: var(--kum); }
.ok-anahtar input:disabled + .ok-anahtar-kutu { opacity: 0.5; }
.ok-onizleme { position: relative; display: grid; gap: 12px; padding: 34px 14px 14px; border-radius: var(--r-bolum); border: 1px solid rgba(244, 217, 166, 0.4); background: var(--zemin-2); }
.ok-onizleme-et { position: absolute; top: 10px; left: 14px; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kum); }
.ok-onizleme-bas { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.ok-onizleme-bas b { font: 700 1.2rem/1.1 var(--display); }
.ok-onizleme-bas span { color: var(--soluk); font-size: 0.86rem; }
.ok-gecmis { display: grid; gap: 6px; }
.ok-gecmis li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: var(--r-kucuk); background: var(--zemin-2); border: 1px solid var(--kenar); font-size: 0.88rem; color: var(--metin-yumusak); }
.ok-gecmis li span:first-child { display: grid; gap: 1px; min-width: 0; }
.ok-gecmis small { color: var(--soluk); font-size: 0.78rem; }
.ok-gecmis time { color: var(--soluk); font-size: 0.8rem; white-space: nowrap; }
.ok-iki-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ok-madde { display: grid; gap: 6px; margin-top: 6px; }
.ok-madde li { padding-left: 18px; position: relative; color: var(--metin-yumusak); font-size: 0.92rem; }
.ok-madde li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 2px; background: var(--isik-koyu); }
.ok-madde.yok li::before { background: transparent; border: 1.5px solid var(--hata); }
.ok-okul-on { border-color: rgba(91, 242, 230, 0.35); }
.ok-ayar .ok-liste { margin-top: 4px; }

@media (max-width: 640px) {
  .ok-kutular { grid-template-columns: 1fr; }
  .ok-pencere-ust, .ok-iki-liste { grid-template-columns: 1fr; }
  .ok-gecmis li { grid-template-columns: 1fr auto; }
  .ok-gecmis li span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 420px) {
  .ok-iki { grid-template-columns: 1fr; }
  .ok-isi li { grid-template-columns: minmax(0, 1fr) auto; }
  .ok-isi .ok-bant { grid-column: 1 / -1; text-align: left; min-width: 0; margin-top: -4px; }
  .ok-tuglalar i { width: 16px; }
  .ok-katilim li { grid-template-columns: 1fr auto; }
  .ok-katilim .ok-dk { grid-column: 1 / -1; text-align: left; }
  .ok-eylem .ok-dugme { flex: 1 1 100%; width: auto; }
  .ok-kod { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) { .ok *, .ok *::before, .ok *::after { transition: none !important; animation: none !important; } }