/* DKT Pro — Ortak stil
 * Renk paleti:
 *   Zemin: #FAFAF7 (klinik-sıcak beyaz)
 *   Kart: #FFFFFF
 *   Metin: #1A1A1A
 *   İkincil metin: #6B6B6B
 *   Sınır: #E8E5DE
 *   Ana aksan: #6B4EA8 (mor)
 *   Başarı: #4A9B7F
 *   Uyarı: #C97B3B
 *   Hata: #B23A48
 */

:root {
  --bg: #FAFAF7;
  --card: #FFFFFF;
  --ink: #1A1A1A;
  --ink-2: #6B6B6B;
  --line: #E8E5DE;
  --accent: #6B4EA8;
  --accent-soft: #EFEAFB;
  --success: #37745F;
  --warn: #965C2C;
  --error: #B23A48;
  --radius: 8px;
  --radius-sm: 4px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.06);
  --topbar-yukseklik: 0px;

  /* Tipografi ölçeği — 11/12/14/18/24px; ekranlardaki 9 dağınık font-size
     değeri (10-24px) en yakın basamağa yuvarlanarak bu 5 token'a indirildi. */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 14px;
  --fs-lg: 18px;
  --fs-xl: 24px;

  /* Boşluk ölçeği — 4px'lik adımlarla 8px-tabanlı grid (1=4px … 8=32px).
     padding/margin/gap değerleri en yakın 4px katına yuvarlanarak (eşitlikte
     yukarı) bu token'lara indirildi. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;

  /* Boyut rozet renkleri (ana panel + rapor) — şiddet/aciliyete göre 4
     basamak: normal → izlem → sınırda müdahale (yumuşak) → net müdahale
     (tam kırmızı). "sınırda" tonu, eşiğe yeni giren (seviye ==
     guclugu_baslat_seviye) bulguları net müdahaleden (seviye daha yüksek)
     görsel olarak ayırmak için var — bkz. index.html rozetSinifi(). */
  --rozet-gelisimsel: var(--accent);
  --rozet-gelisimsel-bg: var(--accent-soft);
  --rozet-normal: var(--success);
  --rozet-normal-bg: #E8F5EF;
  --rozet-izlem: var(--warn);
  --rozet-izlem-bg: #F5EDE3;
  --rozet-mudahale-sinir: #C9707A;
  --rozet-mudahale-sinir-bg: #FBF1EE;
  --rozet-mudahale: var(--error);
  --rozet-mudahale-bg: #FBEEEF;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.55;
}

/* Layout */
.app {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-6);
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0 var(--space-6);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-6);
}

.header h1 {
  font-size: var(--fs-xl);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

.header .subtitle {
  color: var(--ink-2);
  font-size: var(--fs-base);
  margin-top: var(--space-1);
}

/* Ortak üst bar (shared/topbar.js) */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  background: var(--card);
  border-bottom: 1px solid var(--line);
  padding: var(--space-2) var(--space-6);
  margin: 0 calc(-1 * var(--space-6)) var(--space-4);
  box-shadow: var(--shadow-sm);
}
.topbar-sol { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-base); }
.topbar-marka { font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.topbar-marka:hover { color: var(--accent); }
.topbar-ayrac { color: var(--ink-2); opacity: 0.6; }
.topbar-sayfa { color: var(--ink-2); font-weight: 500; }
.topbar-sag { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.topbar-ogrenci { font-size: var(--fs-base); }

.topbar-senkron {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-xs);
  color: var(--ink-2);
  cursor: default;
}
.topbar-senkron-nokta {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
}
.topbar-senkron-nokta.bekliyor { background: var(--warn); }
.topbar-senkron-nokta.gri { background: var(--ink-2); }
.topbar-senkron-sayi {
  display: inline-block;
  min-width: 14px;
  padding: 0 3px;
  text-align: center;
  background: var(--warn);
  color: #fff;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
}

/* Sticky yan panel — topbar yüksekliğine göre ofsetlenir */
.sticky-panel {
  position: sticky;
  top: calc(var(--topbar-yukseklik, 0px) + 16px);
}

/* "Canlı Analiz" paneli zemin/kenarlık — önceden 10 boyut ekranında ayrı
   ayrı tanımlıydı, tek yerden yönetilsin diye buraya taşındı. */
.sag-panel .card.sticky-panel { background: #F8F5FC; border-color: #E3DBF3; }

/* Boyut ekranlarındaki "hedef sözcük" başlığı (SST/fonoloji/ifade edici
   dil ölçüm ekranları) — önceden 3 ayrı class adıyla (aynı CSS ile) ayrı
   ayrı tanımlıydı, tek yerden yönetilsin diye buraya taşındı. */
.sst-kelime, .fon-sozcuk, .madde-sozcuk { font-weight: 700; font-size: 20px; color: var(--ink); letter-spacing: -0.01em; }

/* Sticky topbar (+ varsa uyarı bandı), scrollIntoView/anchor ile ekrana
   gelen kartların başlığını örtmesin diye kartlar için scroll payı.
   #rapor-panel de dahil — o bir .card DEĞİL, .card'ı SARAN dış kutu ve
   boyut ekranlarındaki "Raporu Önizle" scrollIntoView() hedefi budur. */
.card, #rapor-panel { scroll-margin-top: calc(var(--topbar-yukseklik, 0px) + var(--space-4)); }

.breadcrumb {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  color: var(--ink-2);
  font-size: var(--fs-base);
  margin-bottom: var(--space-4);
}
.breadcrumb a { color: var(--ink-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { opacity: 0.5; }

/* Kartlar */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.card + .card { margin-top: var(--space-4); }

.card h2 {
  font-size: var(--fs-lg);
  font-weight: 600;
  margin: 0 0 var(--space-3);
  letter-spacing: -0.005em;
}

.card h3 {
  font-size: var(--fs-base);
  font-weight: 600;
  margin: var(--space-5) 0 var(--space-2);
  color: var(--ink);
}

/* Grid */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.grid-sidebar {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--space-6);
}

@media (max-width: 900px) {
  .grid-2, .grid-sidebar { grid-template-columns: 1fr; }
  /* Sağdaki sticky canlı analiz paneli tek sütuna inince EN ÜSTE alınır
     (topbar'ın hemen altında sabit kalır), form altında kaydırılır. */
  .grid-sidebar { display: flex; flex-direction: column; }
  .grid-sidebar .sag-panel { order: -1; }
}

/* Form */
label { display: block; font-size: var(--fs-base); font-weight: 500; margin-bottom: var(--space-1); color: var(--ink); }

input[type="text"], input[type="date"], input[type="number"], select, textarea {
  width: 100%;
  padding: var(--space-2) var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--fs-base);
  background: white;
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

textarea { min-height: 80px; resize: vertical; }

.field { margin-bottom: var(--space-4); }
.field-inline { display: flex; gap: var(--space-3); }
.field-inline .field { flex: 1; }

/* Butonlar */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: white;
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
}
.btn:hover { border-color: var(--ink-2); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.btn-primary:hover { background: #59409A; border-color: #59409A; }

.btn-ghost { border-color: transparent; }
.btn-ghost:hover { background: var(--accent-soft); color: var(--accent); }

/* Yıkıcı eylem (Sil, Tümünü temizle) — soluk/kırmızımsı, dolu accent kadar
   ağır değil; hover'da anlamı netleşsin diye biraz koyulaşır. */
.btn-tehlike { border-color: var(--rozet-mudahale-bg); color: var(--error); background: transparent; }
.btn-tehlike:hover { background: var(--rozet-mudahale-bg); border-color: var(--error); }

.btn-sm { padding: var(--space-1) var(--space-2); font-size: var(--fs-base); min-height: 44px; }

/* Kapatma ikonu (✕) — rapor önizleme ve modal başlık çubuklarında ortak. */
.kapat-btn {
  border: none; background: var(--bg); color: var(--ink-2);
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-lg); line-height: 1; cursor: pointer; flex-shrink: 0;
}
.kapat-btn:hover { background: var(--line); color: var(--ink); }

/* Bağlam-içi yardım ipucu (shared/ipucu.js) — metrik/kademe adlarının
   yanında küçük ⓘ; tıklayınca kısa açıklama balonu açılır. */
.ipucu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; padding: 0;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink-2);
  font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer;
  margin-left: var(--space-1); flex-shrink: 0; vertical-align: middle;
  transition: all 0.12s ease;
}
.ipucu-btn:hover, .ipucu-btn.aktif { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.ipucu-popover {
  position: absolute; z-index: 400; max-width: 280px;
  background: var(--ink); color: white; font-size: var(--fs-sm); line-height: 1.5;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none; transform: translateY(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.ipucu-popover.acik { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* Küçük görsel önizlemesi — hedef sözcük/etkinlik satırlarında (48px).
   Tıklanınca .gorsel-modal-ortu ile büyük gösterilir (shared/gorsel_modal.js). */
.gorsel-onizleme {
  width: 48px; height: 48px; border-radius: var(--radius-sm); object-fit: cover;
  cursor: pointer; border: 1px solid var(--line); flex-shrink: 0; background: white;
}
.gorsel-onizleme:hover { border-color: var(--accent); }

/* Görsel yükleme alanı (dosya seç + sürükle-bırak) — shared/gorsel_yukleme.js
   ile birlikte modules/ayarlar/gorseller.html ve etkinlik-uretici'de kullanılır. */
.gorsel-yukleme-alani {
  display: flex; align-items: center; gap: var(--space-2);
  border: 1.5px dashed var(--line); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4); font-size: var(--fs-sm); color: var(--ink-2);
  cursor: pointer; transition: all 0.12s ease; min-height: 44px; width: fit-content;
}
.gorsel-yukleme-alani:hover, .gorsel-yukleme-alani.surukleniyor { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.gorsel-yukleme-alani input[type="file"] { display: none; }

/* Görsel büyük gösterim modalı (shared/gorsel_modal.js) — çocuğa gösterim
   için sade, dikkat dağıtmayan: tek görsel + tek kapatma ikonu. */
.gorsel-modal-ortu {
  position: fixed; inset: 0; z-index: 300; background: rgba(20,18,28,0.94);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
.gorsel-modal-ortu.acik { opacity: 1; pointer-events: auto; }
.gorsel-modal-img { max-width: 92vw; max-height: 92vh; border-radius: var(--radius); object-fit: contain; }
.gorsel-modal-kapat {
  position: absolute; top: var(--space-5); right: var(--space-5);
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.15); color: white; font-size: var(--fs-lg); cursor: pointer;
}
.gorsel-modal-kapat:hover { background: rgba(255,255,255,0.3); }

.button-row {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-5);
}

/* Seviye seçici — anlatı için özel */
.seviye-liste {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.seviye {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: white;
}
.seviye:hover { border-color: var(--accent); }
.seviye.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

.seviye-baslik {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}
.seviye-numara {
  font-weight: 600;
  color: var(--accent);
  font-size: var(--fs-sm);
  letter-spacing: 0.05em;
}
.seviye-ad { font-weight: 600; font-size: var(--fs-base); }
.seviye-yas {
  margin-left: auto;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  background: var(--bg);
  padding: var(--space-1) var(--space-2);
  border-radius: 100px;
}
.seviye-kriter { font-size: var(--fs-base); color: var(--ink-2); }

/* Checkbox grubu (story grammar) */
.checkbox-liste { display: flex; flex-direction: column; gap: var(--space-2); }
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.checkbox-row:hover { background: var(--bg); }
/* İşaretli satır bir bakışta görülsün: hafif accent zemin + sol şerit. */
.checkbox-row:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.checkbox-row input[type="checkbox"] {
  width: 21px;
  height: 21px;
  margin-top: 1px;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.checkbox-row .cbx-ad { font-weight: 500; font-size: var(--fs-base); }
.checkbox-row .cbx-tanim { font-size: var(--fs-sm); color: var(--ink-2); }

/* Ek Gözlemler — çoklu seçim chip grubu (shared/boyut_ui.js, tüm boyut
   ekranlarında ortak). Seçili chip dolu accent renge döner; işaretsizken
   hayalet (soluk kenar). */
.bui-chip-grup { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bui-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  min-height: 44px;
  min-width: 44px;
  border: 1.5px solid var(--line);
  border-radius: 100px;
  cursor: pointer;
  background: white;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: all 0.12s ease;
}
.bui-chip:hover { border-color: var(--ink-2); color: var(--ink); }
.bui-chip:has(.bui-chip-cb:checked) {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  font-weight: 600;
}
.bui-chip-cb { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; }

/* Boyut listesi (modules/degerlendirme/index.html) — tıklanabilir kart satırı,
   altı çizili link görünümü yerine başlık koyu / açıklama soluk / sağda ok. */
.boyut-liste { display: flex; flex-direction: column; gap: var(--space-2); }
.boyut-kart {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}
.boyut-kart:hover { border-color: var(--accent); background: var(--accent-soft); }
.boyut-kart-ad { font-weight: 700; font-size: var(--fs-base); color: var(--ink); }
.boyut-kart-aciklama { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 2px; }
.boyut-kart-ok { color: var(--ink-2); flex-shrink: 0; }
.boyut-kart.devre-disi { cursor: not-allowed; opacity: 0.55; pointer-events: none; }
.boyut-kart.devre-disi:hover { border-color: var(--line); background: white; }

/* Öğrenci listesi */
.ogrenci-liste { display: flex; flex-direction: column; gap: var(--space-2); }
.ogrenci-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: white;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ogrenci-row:hover { border-color: var(--accent); }
.ogrenci-row.selected { border-color: var(--accent); background: var(--accent-soft); }
.ogrenci-ad { font-weight: 500; }
.ogrenci-detay { font-size: var(--fs-sm); color: var(--ink-2); }
.ogrenci-son-degerlendirme { font-size: var(--fs-xs); color: var(--ink-2); margin-top: var(--space-1); }

/* Boyut seviye rozetleri */
.rozet-satir { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
.rozet {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-2);
  border-radius: 100px;
}
.rozet-gelisimsel { background: var(--rozet-gelisimsel-bg); color: var(--rozet-gelisimsel); }
.rozet-normal     { background: var(--rozet-normal-bg);     color: var(--rozet-normal); }
.rozet-izlem      { background: var(--rozet-izlem-bg);      color: var(--rozet-izlem); }
.rozet-mudahale-sinir { background: var(--rozet-mudahale-sinir-bg); color: var(--rozet-mudahale-sinir); }
.rozet-mudahale   { background: var(--rozet-mudahale-bg);   color: var(--rozet-mudahale); }
.rozet-yok        { background: var(--bg); color: var(--ink-2); border: 1px dashed var(--line); }

/* Yönerge kutusu */
.yonerge {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
}
.yonerge strong { color: var(--accent); }

/* Kapanır yönerge/referans bloğu — terapist ekranı açtığında iş alanını
   görsün, okuma duvarını değil; varsayılan KAPALI (<details> open yok). */
.bilgi-detay > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--ink-2);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  user-select: none;
}
.bilgi-detay > summary::-webkit-details-marker { display: none; }
.bilgi-detay > summary::after {
  content: '▾';
  margin-left: auto;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  transition: transform 0.15s ease;
}
.bilgi-detay[open] > summary::after { transform: rotate(180deg); }
.bilgi-detay[open] > summary { color: var(--ink); }
.bilgi-detay-govde { margin-top: var(--space-4); }

/* Doğum tarihi eksik uyarı bandı (shared/topbar.js) — sarı, topbar'ın hemen altında */
.uyari-bant {
  background: #FBF1E3;
  border-left: 3px solid var(--warn);
  color: #8A5321;
  padding: var(--space-2) var(--space-4);
  margin: 0 calc(-1 * var(--space-6)) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 500;
}

/* Etiket */
.tag {
  display: inline-block;
  font-size: var(--fs-xs);
  padding: var(--space-1) var(--space-2);
  border-radius: 100px;
  background: var(--bg);
  color: var(--ink-2);
  border: 1px solid var(--line);
  margin-right: var(--space-1);
}
.tag-accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.tag-success { background: #E8F5EF; color: var(--success); border-color: transparent; }
.tag-yakinda { background: #F5F0E8; color: var(--warn); border-color: transparent; }

/* Rapor önizleme */
.rapor {
  font-family: Georgia, "Times New Roman", serif;
  background: white;
  padding: var(--space-8);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  line-height: 1.7;
  max-width: 800px;
  margin: 0 auto;
}
.rapor h2 { font-size: var(--fs-lg); border-bottom: 2px solid var(--ink); padding-bottom: var(--space-2); }
.rapor h3 { font-size: var(--fs-base); color: var(--accent); margin-top: var(--space-6); }
.rapor .rapor-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-4);
  font-size: var(--fs-base);
  margin: var(--space-4) 0;
}
.rapor .rapor-meta dt { font-weight: 600; color: var(--ink-2); }
.rapor .rapor-meta dd { margin: 0; }

/* Kurum başlığı (data/kurum.js) */
.kurum-basligi {
  text-align: center;
  border-bottom: 2px solid var(--ink);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-5);
}
.kurum-basligi .kurum-logo { max-height: 56px; margin-bottom: var(--space-2); }
.kurum-basligi .kurum-ad { font-size: var(--fs-lg); font-weight: 700; }
.kurum-basligi .kurum-detay { margin-top: var(--space-1); }

/* Stepper (ilerleme çubuğu) — shared/stepper.js */
.stepper {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-4);
  padding: var(--space-1) var(--space-1);
}
.stepper-adim { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.stepper-daire {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-base); font-weight: 700;
  color: var(--ink-2);
  background: white;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.stepper-adim.tamamlandi .stepper-daire {
  background: var(--success); border-color: var(--success); color: white;
}
.stepper-etiket { font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; }
.stepper-adim.tamamlandi .stepper-etiket { color: var(--ink); font-weight: 500; }
.stepper-cizgi { flex: 1; min-width: 16px; height: 2px; background: var(--line); margin: 0 8px; }

/* Katlanabilir kartlar (stepper ile birlikte kullanılır) */
/* flex/justify-content KULLANILMIYOR: bazı başlıklar (ör. fonoloji "2 · ...
   (N/M işaretlendi)") içinde canlı güncellenen <span> sayaçlar barındırır;
   flex bunların satır-içi akışını bozar. Chevron bunun yerine mutlak
   konumlandırılır. */
/* Tıklanabilir alan ≥44px olsun diye padding kullanılır (display:flex
   KULLANILMIYOR — h2 içindeki canlı <span> sayaçların satır-içi akışını
   bozar, bkz. fonemPaterni notu aşağıda). */
.card.card-katlanabilir h2 {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding: var(--space-3) var(--space-6) var(--space-3) 0;
  margin-top: calc(-1 * var(--space-3));
}
.card.card-katlanabilir h2::after {
  content: '▾';
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  transition: transform 0.15s ease;
}
.card.card-katlanabilir.kapali h2::after { transform: translateY(-50%) rotate(-90deg); }
/* !important: kartlar içindeki bazı öğeler inline style="display:flex" kullanıyor */
.card.card-katlanabilir.kapali > *:not(h2) { display: none !important; }

/* Boş durum */
.empty {
  text-align: center;
  padding: var(--space-8);
  color: var(--ink-2);
  font-size: var(--fs-base);
}
.empty .empty-title { font-weight: 500; color: var(--ink); margin-bottom: var(--space-1); }

/* Boş durum yol haritası (ana panel ilk açılış) */
.yol-haritasi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.yol-adim {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-base);
  color: var(--ink);
}
.yol-no {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  flex-shrink: 0;
}
.yol-ok { color: var(--ink-2); }

/* Yardımcı */
.muted { color: var(--ink-2); }
.small { font-size: var(--fs-sm); }
.mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); }
.mb-2 { margin-bottom: var(--space-2); } .mb-4 { margin-bottom: var(--space-4); }
.text-right { text-align: right; }
.hidden { display: none !important; }

/* ————————————————————————————————————————————————————————
   KVKK belge görüntüleme (modules/ayarlar/kvkk_*.html + onam adımı)
   ———————————————————————————————————————————————————————— */
.kvkk-belge {
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--ink);
}
.kvkk-belge h2 { font-size: 1.15rem; margin: var(--space-6) 0 var(--space-2); }
.kvkk-belge h3 { font-size: 1rem; margin: var(--space-4) 0 var(--space-2); }
.kvkk-belge h4, .kvkk-belge h5, .kvkk-belge h6 {
  font-size: var(--fs-base); margin: var(--space-3) 0 var(--space-1);
}
.kvkk-belge p { margin: var(--space-2) 0; }
.kvkk-belge ul, .kvkk-belge ol { margin: var(--space-2) 0 var(--space-2) var(--space-5); }
.kvkk-belge li { margin: var(--space-1) 0; }
.kvkk-belge hr { border: none; border-top: 1px solid var(--line); margin: var(--space-5) 0; }
.kvkk-belge blockquote {
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  background: var(--bg);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius-sm);
}
.kvkk-belge code {
  background: var(--bg); padding: 1px 4px; border-radius: 3px; font-size: var(--fs-sm);
}
/* Geniş tablolar sayfayı yatay kaydırmasın — kendi kabında kayar. */
.kvkk-tablo-sar { overflow-x: auto; margin: var(--space-3) 0; }
.kvkk-tablo { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.kvkk-tablo th, .kvkk-tablo td {
  border: 1px solid var(--line);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: top;
}
.kvkk-tablo th { background: var(--bg); font-weight: 500; }
/* Doldurulmamış yer tutucu — gözden kaçmasın */
.kvkk-eksik {
  background: #F5E8E8; color: #A5453B;
  padding: 1px 5px; border-radius: 3px; font-weight: 500;
}
.kvkk-kutu-liste { list-style: none; margin-left: 0; }
.kvkk-kutu { font-size: 1.1em; margin-right: var(--space-1); }
/* Uzun belgeler için kaydırılabilir okuma alanı (onam adımında kullanılır) */
.kvkk-kaydir {
  max-height: 340px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--space-4); background: white;
}
/* Onam rozeti (öğrenci kartı) */
.onam-rozet { display: inline-flex; align-items: center; gap: 4px; }
.onam-rozet.eksik { background: #F5E8E8; color: #A5453B; border-color: transparent; }
/* Onam onay satırları (shared/onam_akisi.js) */
.onam-satir {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3); margin-bottom: var(--space-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer; font-size: var(--fs-sm); line-height: 1.6;
}
.onam-satir:hover { background: var(--bg); }
.onam-satir:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); }
.onam-satir input[type="checkbox"] {
  width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0;
  accent-color: var(--accent); cursor: pointer;
}
.onam-satir span { flex: 1; }

/* Tıbbi cihaz feragati — giriş ekranı + yardım sayfası (Adım 5) */
.tibbi-feragat {
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: #FBF0EC;
  border-left: 3px solid var(--error);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink);
}
.tibbi-feragat strong { color: var(--error); display: block; margin-bottom: 2px; }