/* FAZ P1a — Öğretim planları alanı (EduPage "Öğretim Planları" paritesi).
 *
 * Kapsam kuralı: her seçici `.op-` ya da `.pki-` ile başlar. Ortak `au-*`
 * sınıfları burada YENİDEN TANIMLANMAZ — aurora.css'in kaskadıyla yarışmak
 * başka ekranları bozardı.
 *
 * Cihaz (telefon) düzeni `cihaz.css`in `body.edulive-cihaz` bandındadır;
 * buradaki medya sorgusu yalnız dar ekran için, cihaz-özel değil.
 */

/* ── Kurs kartları (SS1 "Bir Ders Seçin") ───────────────────────────── */
.op-kartlar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.op-kart {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--au-line, #dde2e9);
  border-radius: 12px;
  background: var(--au-surface, #fff);
}

/* Plansız kurs GÖRSEL olarak da ayrılır: EduPage'de de bu satır kırmızıdır.
   Yalnız metinle söylemek, 30 kurslu listede fark edilmezdi. */
.op-kart--plansiz { border-color: var(--au-uyari-kenar, #e0a03a); }

.op-kart__ust {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.op-kart__ad {
  flex: 1 1 160px;
  min-width: 0;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.op-kart__bilgi { margin: 0; display: grid; gap: 4px; font-size: .85rem; }
.op-kart__bilgi > div { display: flex; gap: 6px; }
.op-kart__bilgi dt { margin: 0; color: var(--au-dim, #5b6577); }
.op-kart__bilgi dd { margin: 0; font-weight: 500; }

.op-kart__eylem { display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap; }

/* ── Konu ızgarası (SS5 "Plan konularını düzenle") ──────────────────── */

/* Izgara geniştir; SAYFA değil KENDİ KABI kayar (kabul ölçütü K16). */
.pki-kaydir { overflow-x: auto; }

.pki-tablo { width: 100%; min-width: 860px; border-collapse: collapse; }

.pki-tablo th,
.pki-tablo td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--au-line, #dde2e9);
  vertical-align: middle;
  text-align: left;
}

.pki-tablo thead th {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--au-dim, #5b6577);
  font-weight: 600;
}

/* Ünite satırı ızgarada GÖRSEL OLARAK ayrı okunur (EduPage'de de öyle). */
.pki-tablo .pki-unite td { background: var(--au-surface-2, #eef1f6); font-weight: 600; }

.pki-ay { width: 40px; text-align: center; font-size: .75rem; color: var(--au-dim, #5b6577); }
.pki-sayi { width: 72px; text-align: right; font-variant-numeric: tabular-nums; }
.pki-sira { width: 92px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pki-eylem { width: 108px; white-space: nowrap; text-align: right; }

.pki-giris { width: 100%; min-width: 0; }
.pki-giris--sayi { text-align: right; }

.pki-tablo tfoot td {
  font-weight: 600;
  background: var(--au-surface-2, #eef1f6);
  border-top: 2px solid var(--au-line-strong, #c3ccd9);
}

.pki-ekle td { padding-block: 4px; }
.pki-bayat { font-weight: 400; font-size: .8rem; margin-left: 6px; }
.pki-bos { margin-top: 12px; }

/* Sıra/silme düğmeleri: dokunma hedefi 44px (kabul ölçütü K3). */
.au-ikon-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: inherit;
}

.au-ikon-btn:hover,
.au-ikon-btn:focus-visible { border-color: var(--au-line-strong, #c3ccd9); }
.au-ikon-btn--sil { color: var(--au-hata, #b3352c); }
.au-ikon-btn:disabled { opacity: .4; cursor: default; }

/* Ekran okuyucuya açık, göze kapalı metin. */
.au-gizli {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Bilgi/uyarı/hata kutuları — ton dışında `au-card`ın aynısı. */
.au-card--uyari { border-color: var(--au-uyari-kenar, #e0a03a); }
.au-card--hata { border-color: var(--au-hata, #b3352c); }

/* ── Dar ekran: ızgara satırları KARTA döner (Tur 50 deseni) ────────── */
@media (max-width: 720px) {
  .pki-tablo { min-width: 0; }
  .pki-tablo thead { display: none; }
  .pki-tablo tbody tr { display: grid; gap: 4px; padding: 10px 0; }
  .pki-tablo tbody td { display: grid; grid-template-columns: 96px 1fr; gap: 8px; border: 0; }
  .pki-tablo tbody td::before {
    content: attr(data-etiket);
    color: var(--au-dim, #5b6577);
    font-size: .8rem;
  }
  /* Boş hücreler kartta yer kaplamasın. */
  .pki-tablo tbody td:empty { display: none; }
  .pki-eylem { text-align: left; width: auto; }
}

/* ── Plan ayarları (P1b) ─────────────────────────────────────────────── */

.op-ayar { display: grid; gap: 12px; }

.op-ayar__baslik {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.op-ayar__satir { display: grid; gap: 4px; }

.op-ayar__etiket { font-size: .85rem; font-weight: 500; }

.op-ayar__sayi { max-width: 160px; }

.op-ayar__ipucu { margin: 0; font-size: .82rem; }

.op-ayar__eylem {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-block: 4px 12px;
}

/* Ay kutuları — okul yılı sırasında 10 kutu. `auto-fit` ile dar ekranda
   kendiliğinden sarar; sabit sütun sayısı telefonda taşma üretirdi (K2). */
.op-aylar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 8px;
}

.op-ay { display: grid; gap: 2px; }

.op-ay__etiket { display: flex; align-items: baseline; gap: 4px; font-size: .78rem; }

.op-ay__roma { font-weight: 600; }

.op-ay__ad { color: var(--au-dim, #5b6577); }

.op-ay__giris { width: 100%; min-width: 0; text-align: right; }

.op-radyo { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }

.op-radyo__oge {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--au-line, #dde3ec);
  border-radius: 8px;
  cursor: pointer;
}

.op-radyo__oge:hover { border-color: var(--au-line-strong, #c3ccd9); }

.op-radyo__oge span { display: grid; gap: 2px; font-size: .88rem; }

.op-radyo__oge input { margin-top: 3px; }

.op-revizyon { min-width: 520px; }

.op-egitmen { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: .88rem; }

/* K13 — cihaz kabuğunda tarayıcı indirmesi çalışmaz (BlazorWebView blob/`<a download>`
   akışını açmaz): dışa aktarma düğmesi telefonda gizlenir, masaüstü webde durur. */
body.edulive-cihaz .op-cihazda-gizli { display: none; }

/* ── Kazanım Cepte (P1c) ─────────────────────────────────────────────── */

.op-kisayol { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }

.kc-secim, .kc-plan, .kc-haftalar, .kc-hafta, .kc-meb, .kc-agac { display: grid; gap: 10px; }

.kc-plan__ust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.kc-cipler { display: flex; gap: 8px; flex-wrap: wrap; }

/* Dokunma hedefi 44 px (K3) — telefonda ders/hafta seçimi tek elle yapılır. */
.kc-cip {
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid var(--au-line, #dde3ec);
  border-radius: 10px;
  background: var(--au-surface, #fff);
  color: inherit;
  cursor: pointer;
  display: grid;
  gap: 1px;
  text-align: left;
  font: inherit;
}

.kc-cip:hover:not(:disabled),
.kc-cip:focus-visible { border-color: var(--au-line-strong, #c3ccd9); }

.kc-cip.is-etkin {
  border-color: var(--marka-500, #2f6fed);
  background: color-mix(in srgb, var(--marka-500, #2f6fed) 8%, transparent);
  font-weight: 600;
}

.kc-cip:disabled { opacity: .5; cursor: default; }

.kc-cip--hafta { min-width: 116px; font-variant-numeric: tabular-nums; }

.kc-cip__no { font-size: .9rem; }

.kc-cip__alt { font-size: .75rem; color: var(--au-dim, #5b6577); }

.kc-konular { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: .9rem; }

.kc-alanlar { margin: 0; display: grid; gap: 10px; }

.kc-alanlar > div { display: grid; gap: 2px; }

.kc-alanlar dt { margin: 0; font-size: .78rem; font-weight: 600; color: var(--au-dim, #5b6577); }

.kc-alanlar dd { margin: 0; font-size: .9rem; white-space: pre-wrap; }

.kc-damga { font-size: .78rem; }

/* Ağaç bileşeni scoped CSS taşır — sayfa tarafından yalnız `::deep` ile ezilir. */
.kc-agac-kap { max-height: 520px; overflow: auto; }

.kc-agac-kap ::deep .app-tree__row {
  padding-inline-start: calc(12px + var(--tree-depth, 0) * 20px);
}

.kc-dugum { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; min-width: 0; }

.kc-dugum__kod {
  padding: 1px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--marka-500, #2f6fed) 10%, transparent);
  color: var(--marka-600, #1f53c4);
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}

.kc-dugum__ad { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 720px) {
  .kc-cip--hafta { min-width: 0; flex: 1 1 46%; }
  .kc-agac-kap { max-height: 380px; }
}

/* ── Plan oluşturma sihirbazı (P2) ───────────────────────────────────── */

.op-tablo-metin {
  width: 100%;
  min-width: 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .82rem;
  resize: vertical;
}

.op-esleme {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.op-esleme__satir { display: grid; gap: 4px; }

.op-unite-secim {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.op-unite-secim label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--au-line, #dde3ec);
  border-radius: 8px;
  cursor: pointer;
  min-height: 44px;
}

.op-unite-secim label:hover { border-color: var(--au-line-strong, #c3ccd9); }

.op-unite-secim__ad { font-weight: 500; }

.op-uyarilar {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: .85rem;
  color: var(--au-dim, #5b6577);
}

@media (max-width: 720px) {
  .op-esleme { grid-template-columns: 1fr; }
}

/* ── Kazanım ataması (P3) ────────────────────────────────────────────── */

.ka-paneller {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
  gap: 12px;
  align-items: start;
}

.ka-panel { display: grid; gap: 10px; min-width: 0; }

.ka-konular { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }

.ka-unite {
  margin-top: 8px;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--au-dim, #5b6577);
}

.ka-konu {
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ka-konu:hover:not(:disabled),
.ka-konu:focus-visible { border-color: var(--au-line, #dde3ec); }

.ka-konu.is-etkin {
  border-color: var(--marka-500, #2f6fed);
  background: color-mix(in srgb, var(--marka-500, #2f6fed) 8%, transparent);
  font-weight: 600;
}

.ka-atanan { display: grid; gap: 8px; }

.ka-cipler { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }

.ka-cip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 10px;
  border: 1px solid var(--au-line, #dde3ec);
  border-radius: 8px;
  font-size: .88rem;
  min-width: 0;
}

.ka-cip > span:first-of-type { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

.ka-metin { display: flex; gap: 8px; }

.ka-metin .app-input { flex: 1 1 auto; min-width: 0; }

.ka-ata { min-height: 32px; padding: 2px 10px; font-size: .8rem; }

.ka-ata.is-atandi {
  border-color: var(--marka-500, #2f6fed);
  color: var(--marka-600, #1f53c4);
}

.ka-kovalar, .ka-belirsiz { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: .9rem; }

@media (max-width: 720px) {
  .ka-paneller { grid-template-columns: 1fr; }
  .ka-metin { flex-direction: column; }
}

/* ── İşlenme + ilerleme (P4a) ────────────────────────────────────────── */

.isl-ozet { display: grid; gap: 10px; }

.isl-ozet__govde {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

/* EduPage halkası: işlenen KONU / konu sayısı. Tek renk conic-gradient —
   JS'siz, cihaz kabuğunda da aynı çizilir. */
.isl-halka {
  --isl-yuzde: 0;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: conic-gradient(
    var(--basari, #85ae9a) calc(var(--isl-yuzde) * 1%),
    var(--au-surface-2, #eef1f6) 0
  );
}

.isl-halka__ic {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--au-surface, #fff);
  line-height: 1.15;
  text-align: center;
}

.isl-halka__oran { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.isl-halka__yuzde { font-size: .8rem; color: var(--au-dim, #5b6577); }

.isl-sayilar {
  flex: 1 1 280px;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px 16px;
}

.isl-sayilar > div { display: grid; gap: 2px; }
.isl-sayilar dt { margin: 0; font-size: .78rem; color: var(--au-dim, #5b6577); }
.isl-sayilar dd {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.isl-eksi { color: var(--danger-metin, #d71c45); }

.isl-durum { margin: 0; font-weight: 600; }
.isl-durum--onde { color: var(--basari-metin, #3a5749); }
.isl-durum--geride { color: var(--danger-metin, #d71c45); }
.isl-durum--tam { color: inherit; }

.isl-eksik { margin: 0; }
.isl-not { margin: 0; font-size: .85rem; }

.isl-paneller {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 12px;
}

.isl-form, .isl-gecmis { display: grid; gap: 12px; min-width: 0; }

.isl-form__satir {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.isl-konular {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 2px;
  min-width: 0;
}

.isl-konular legend { padding: 0; margin-bottom: 4px; font-weight: 600; }

.isl-unite {
  margin: 8px 0 2px;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--au-dim, #5b6577);
}

/* Satırın tamamı dokunma hedefi (K3 ≥44px). */
.isl-konu {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}

.isl-konu:hover { border-color: var(--au-line, #dde3ec); }

.isl-konu.is-secili {
  border-color: var(--marka-500, #3e5288);
  background: color-mix(in srgb, var(--marka-500, #3e5288) 8%, transparent);
}

.isl-konu__ad { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

.isl-sayac {
  flex: 0 0 auto;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  color: var(--au-dim, #5b6577);
}

.isl-sayac.is-tamam,
.pki-islenen.is-tamam { color: var(--basari-metin, #3a5749); font-weight: 600; }

.isl-ek { font-weight: 600; }
.isl-ek__alan { width: 100%; resize: vertical; }

.isl-suzgec { margin: 0; font-size: .9rem; }

.isl-dersler { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }

.isl-ders {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--au-line, #dde3ec);
  border-radius: 10px;
}

.isl-ders__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.isl-ders__bas .isl-iptal-grup { margin-left: auto; }
.isl-ders__not { margin: 0; font-size: .88rem; overflow-wrap: anywhere; }

.isl-ders__konular { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }

.isl-ders__konular > li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.isl-ders__konular > li > span:first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

/* İptal edilen kayıt SİLİNMEZ, soluk kalır. */
.isl-ders.is-iptal,
.isl-ders__konular > li.is-iptal { opacity: .6; }
.isl-ders__konular > li.is-iptal > span:first-child { text-decoration: line-through; }

.isl-rozet {
  padding: 1px 8px;
  border: 1px solid var(--au-line, #dde3ec);
  border-radius: 999px;
  font-size: .72rem;
  color: var(--au-dim, #5b6577);
}

.isl-onay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--danger, #e11d48);
  border-radius: 8px;
  font-size: .88rem;
}

.isl-onay > span { flex: 1 1 200px; }
.isl-onay-kap { display: block !important; }

@media (max-width: 720px) {
  .isl-paneller { grid-template-columns: 1fr; }
}

/* ── Kazanım Cepte v2 — kurs planı ekseni (P4b) ─────────────────────── */

.kc-kurs-ozet { margin: 0; overflow-wrap: anywhere; }
.kc-sayi { font-weight: 600; font-variant-numeric: tabular-nums; }
.kc-kurs-neden { margin: 0; }
.kc-kurs-neden a,
.kc-hafta-sebep a { margin-left: 4px; }

.kc-cip__bu {
  align-self: flex-start;
  padding: 0 6px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 600;
  color: var(--au-surface, #fff);
  background: var(--marka-500, #3e5288);
}

.kc-alt-baslik {
  margin: 6px 0 2px;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--au-dim, #5b6577);
}

.kc-hafta-kazanimlar > li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.kc-hafta-kazanimlar > li > span:first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

/* EduPage "Karşılaştır": planda (mavi çerçeve) / işlendi (yeşil dolgu). Renk
   tek başına bilgi taşımaz — rozette kelime de yazar (WCAG 1.4.1). */
.kc-rozet {
  flex: 0 0 auto;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
}

.kc-rozet--planda {
  border-color: var(--marka-500, #3e5288);
  color: var(--marka-600, #1f53c4);
}

.kc-rozet--islendi {
  border-color: var(--basari, #85ae9a);
  background: color-mix(in srgb, var(--basari, #85ae9a) 22%, transparent);
  color: var(--basari-metin, #3a5749);
}

.kc-uyari { margin: 8px 0 0; font-size: .85rem; }

/* ── Hazırlıklar + Kütüphanem (P5) ───────────────────────────────────── */

.op-serbest { margin: 8px 0; }

.hz-paneller {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
  gap: 12px;
  align-items: start;
}

.hz-konular { display: grid; gap: 2px; min-width: 0; }

.hz-unite {
  margin: 8px 0 2px;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--au-dim, #5b6577);
}

/* Satırın tamamı dokunma hedefi (K3 ≥44px). */
.hz-konu {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.hz-konu:hover,
.hz-konu:focus-visible { border-color: var(--au-line, #dde3ec); }

.hz-konu.is-etkin {
  border-color: var(--marka-500, #3e5288);
  background: color-mix(in srgb, var(--marka-500, #3e5288) 8%, transparent);
  font-weight: 600;
}

.hz-konu--serbest { margin-top: 10px; border-top: 1px dashed var(--au-line, #dde3ec); border-radius: 0 0 8px 8px; }

.hz-konu__ad { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

.hz-sayac {
  flex: 0 0 auto;
  min-width: 24px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  background: var(--au-surface-2, #eef1f6);
}

.hz-icerik { display: grid; gap: 12px; min-width: 0; }
.hz-bos { margin: 0; }

.hz-kartlar, .hz-sonuclar, .kt-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }

.hz-kart {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--au-line, #dde3ec);
  border-radius: 10px;
  min-width: 0;
}

.hz-kart.is-kayip { border-style: dashed; }

.hz-kart__ust, .kt-satir__ust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.hz-kart__ad, .kt-satir__ad { flex: 1 1 200px; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.hz-kart__metin { margin: 0; font-size: .9rem; white-space: pre-wrap; overflow-wrap: anywhere; }

.hz-kart__eylem {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}

.hz-alan { display: grid; gap: 2px; font-size: .78rem; color: var(--au-dim, #5b6577); }
.hz-alan .app-input { min-width: 140px; }

.hz-gorunurluk.is-acik {
  border-color: var(--basari, #85ae9a);
  color: var(--basari-metin, #3a5749);
}

.hz-rozet {
  padding: 1px 8px;
  border: 1px solid var(--au-line, #dde3ec);
  border-radius: 999px;
  font-size: .72rem;
  white-space: nowrap;
  color: var(--au-dim, #5b6577);
}

.hz-rozet--kayip { border-color: var(--danger, #e11d48); color: var(--danger-metin, #d71c45); }
.kt-rozet--atanmis { border-color: var(--basari, #85ae9a); color: var(--basari-metin, #3a5749); }

.hz-onay {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--danger, #e11d48);
  border-radius: 8px;
  font-size: .85rem;
}

.hz-ekle { display: grid; gap: 10px; padding-top: 10px; border-top: 1px solid var(--au-line, #dde3ec); }

.hz-sekmeler { display: flex; flex-wrap: wrap; gap: 6px; }

.hz-sekme {
  min-height: 40px;
  padding: 4px 12px;
  border: 1px solid var(--au-line, #dde3ec);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.hz-sekme.is-etkin {
  border-color: var(--marka-500, #3e5288);
  background: color-mix(in srgb, var(--marka-500, #3e5288) 10%, transparent);
  font-weight: 600;
}

.hz-kutuphane, .hz-form { display: grid; gap: 8px; }

.hz-suzgec, .kt-arama {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.hz-suzgec .app-input, .kt-arama .app-input { flex: 1 1 180px; min-width: 0; }

.hz-atanmamis { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }

.hz-sonuc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--au-line, #dde3ec);
  min-width: 0;
}

.hz-sonuc__ad { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.hz-etiket { font-weight: 600; }
.hz-metin { width: 100%; resize: vertical; }

.kt-suzgec { display: grid; gap: 10px; margin-bottom: 12px; }
.kt-turler { display: flex; flex-wrap: wrap; gap: 6px; }
.kt-satir { display: grid; gap: 8px; }
.kt-ekle { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }

@media (max-width: 720px) {
  .hz-paneller { grid-template-columns: 1fr; }
}

/* ── Taslak plan şeridi + yönetici görünümleri (P6) ──────────────────── */
.op-taslak {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-color: var(--au-uyari-kenar, #e0a03a);
}
.op-taslak__metin { margin: 0; flex: 1 1 320px; }
.op-taslak__yarim { margin: 0; flex-basis: 100%; }

.op-bolum-baslik {
  margin: 16px 0 8px;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--au-dim, #5b6577);
}

.op-plansiz-ozet { margin-bottom: 12px; }

/* Bugün şeridi (P6b): saat · kurs · plan durumu; satırlar karta değil listeye. */
.op-bugun { display: grid; gap: 8px; margin-top: 16px; }
.op-bugun__baslik { margin: 0; }
.op-bugun__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.op-bugun__ders {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-height: 44px;
  padding: 6px 0;
  border-bottom: 1px solid var(--au-line, #dde3ec);
}
.op-bugun__saat { font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 96px; }
.op-bugun__ad { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.op-bugun__ders--bagsiz .op-bugun__ad { color: var(--au-dim, #5b6577); }
.op-bugun-bos { margin: 12px 0 0; }
.op-zil { display: grid; gap: 6px; margin-top: 12px; }
.op-zil__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.op-zil__kurs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.op-zil__hata { margin: 0; }

.op-kaynak {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.op-kaynak__metin { margin: 0; flex: 1 1 320px; }

/* Yönetim tabloları: sayfa değil KENDİ KABI kayar; dar ekranda karta döner. */
.op-tablo-kap { overflow-x: auto; margin-top: 12px; }
.op-tablo { width: 100%; min-width: 640px; border-collapse: collapse; }
.op-tablo th,
.op-tablo td {
  padding: 8px;
  border-bottom: 1px solid var(--au-line, #dde2e9);
  text-align: left;
  vertical-align: middle;
}
.op-tablo thead th {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--au-dim, #5b6577);
  font-weight: 600;
}
.op-sayi { text-align: right; font-variant-numeric: tabular-nums; }

.yp-suzgec {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 12px;
}
.yp-alan { display: grid; gap: 4px; font-size: .8rem; color: var(--au-dim, #5b6577); min-width: 180px; }
.yp-alan .app-input { min-height: 44px; }

.yp-sayaclar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 0 0 12px;
}
.yp-sayaclar > div { display: grid; gap: 2px; }
.yp-sayaclar dt { margin: 0; font-size: .78rem; color: var(--au-dim, #5b6577); }
.yp-sayaclar dd { margin: 0; font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.yp-sayac--eksik dd { color: var(--au-hata, #b3352c); }

/* Kırmızı satır: renk + "zorunlu" kelimesi birlikte (WCAG 1.4.1). */
.yp-satir--eksik td { background: color-mix(in srgb, var(--au-hata, #b3352c) 7%, transparent); }
.yp-satir--eksik td:first-child { box-shadow: inset 3px 0 0 var(--au-hata, #b3352c); }
.yp-lead--lead_yok,
.yp-lead--coklu_lead { color: var(--au-hata, #b3352c); }

.yp-kurallar { display: grid; gap: 10px; margin-top: 16px; }
.yp-kural-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.yp-kural {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--au-line, #dde3ec);
}
.yp-kural__ad { display: grid; flex: 1 1 200px; min-width: 0; }
.yp-kural-gerekce { flex: 2 1 240px; min-width: 0; }
.yp-kural-bilgi { margin: 0; }

.kk-agac { list-style: none; margin: 12px 0 0; padding: 0; display: grid; }
.kk-dugum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  padding: 8px 0 8px calc(min(var(--kk-derinlik, 0), 6) * 16px);
  border-bottom: 1px solid var(--au-line, #dde3ec);
}
.kk-dugum:not(.kk-dugum--kazanim) { font-weight: 600; }
.kk-dugum__ad { display: flex; gap: 8px; flex: 1 1 280px; min-width: 0; overflow-wrap: anywhere; }
.kk-kod { font-variant-numeric: tabular-nums; color: var(--au-dim, #5b6577); white-space: nowrap; }
.kk-dugum__olcu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kk-sayi { font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--au-dim, #5b6577); }
.kk-cubuk {
  position: relative;
  width: 120px;
  height: 8px;
  border-radius: 4px;
  background: var(--au-surface-2, #eef1f6);
  overflow: hidden;
}
.kk-cubuk__planda,
.kk-cubuk__islendi { position: absolute; inset: 0 auto 0 0; border-radius: 4px; }
.kk-cubuk__planda { background: color-mix(in srgb, var(--marka-500, #2f6fed) 45%, transparent); }
.kk-cubuk__islendi { background: var(--basari, #85ae9a); }
.kk-rozet--islendi { border-color: var(--basari, #85ae9a); color: var(--basari-metin, #3a5749); }
.kk-rozet--planda { border-color: var(--marka-500, #2f6fed); }
.kk-rozet--yok,
.kk-rozet--plansiz { color: var(--au-dim, #5b6577); }

/* Öğrenci sonucu: edindi / kısmen / edinemedi — renk + kelime (WCAG 1.4.1). */
.kk-sonuc {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-left: 4px;
}
.kk-sonuc__cubuk {
  display: flex;
  width: 140px;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--au-surface-2, #eef1f6);
}
.kk-sonuc__parca--edindi { background: var(--basari, #85ae9a); }
.kk-sonuc__parca--kismen { background: var(--au-uyari-kenar, #e0a03a); }
.kk-sonuc__parca--edinemedi { background: var(--au-hata, #b3352c); }
.kk-sonuc__metin { font-size: .8rem; font-variant-numeric: tabular-nums; }
.kk-sonuc--yok,
.kk-sonuc--az { color: var(--au-dim, #5b6577); }

.dp-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dp-plan { display: grid; gap: 8px; }
.dp-plan__ust { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px; }
.dp-plan__ad { margin: 0; font-size: 1.05rem; }
.dp-plan__ust p { margin: 2px 0 0; }
.dp-sayaclar { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-size: .85rem; }
.dp-sayaclar > div { display: flex; gap: 6px; }
.dp-sayaclar dt { margin: 0; color: var(--au-dim, #5b6577); }
.dp-sayaclar dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.dp-plan__eylem { display: flex; flex-wrap: wrap; gap: 8px; }
.dp-son-is-metni,
.dp-inceleme { margin: 0; }
.gp-arama-alani { flex: 2 1 240px; }
.gp-ozet { margin: 0; color: var(--au-dim, #5b6577); font-size: .85rem; overflow-wrap: anywhere; }
.gp-hata,
.gp-bilgi { display: grid; gap: 8px; justify-items: start; }
.gp-hata p,
.gp-bilgi p { margin: 0; }
.gp-daha { margin-top: 12px; }

.dp-plansiz { display: grid; gap: 8px; margin-top: 12px; justify-items: start; }
.dp-plansiz__liste { margin: 0; padding-left: 18px; }

@media (max-width: 720px) {
  .op-tablo { min-width: 0; }
  .op-tablo thead { display: none; }
  .op-tablo tbody tr { display: grid; gap: 4px; padding: 10px 0; }
  .op-tablo tbody td { display: grid; grid-template-columns: 110px 1fr; gap: 8px; border: 0; text-align: left; }
  .op-tablo tbody td::before {
    content: attr(data-etiket);
    color: var(--au-dim, #5b6577);
    font-size: .8rem;
  }
  .yp-alan { min-width: 0; flex: 1 1 100%; }
  .kk-dugum { padding-left: calc(min(var(--kk-derinlik, 0), 3) * 10px); }
  .kk-cubuk { width: 100%; }
}