/* ==========================================================================
   Akademik Takip — portal stil katmanı (v11)
   Tasarım yönü: "kayıt defteri". Serif başlık, sans arayüz, mono yalnız sayı.
   Karanlık tema [data-theme="dark"] ile ya da sistem tercihiyle çalışır.
   Ham renk YALNIZ token katmanında yazılır; aşağıdaki bölümler token kullanır.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Token katmanı
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Yüzeyler: zemin belirgin gri, kart beyaz — kart zeminden ayrışır. */
  --paper:        #EDE4D8;
  --surface:      #FBF8F3;
  --surface-sunk: #F3EDE3;
  --surface-hover:#F7F1E8;

  /* Mürekkep */
  --ink:          #37312B;
  --ink-muted:    #6A625A;
  --ink-faint:    #948A80;

  /* Çizgiler */
  --rule:         #E3D9CB;
  --rule-strong:  #CFC2B0;

  /* Aksan: kurumsal indigo. Tek aksan, tek iş. */
  --accent:       #0B6076;
  --accent-hover: #084C5E;
  --accent-wash:  #DCEEF3;
  --accent-t1:    #D2E9F0;
  --accent-t2:    #9ED2E1;
  --accent-t3:    #4796AF;
  --cizgi-hafif:  #E8DFD2;

  /* Sekme seridi alan renkleri — dolgu uzerine yazi gelir, hepsi AA */
  --alan-genel:      #37312B;  --alan-genel-yazi: #F0E9E2;
  --alan-iletisim:   #243B7A;  --alan-iletisim-yazi: #FFFFFF;
  --alan-ic:         #0B6076;  --alan-ic-yazi:    #FFFFFF;
  --alan-dis:        #A9381F;  --alan-dis-yazi:   #FFFFFF;
  --alan-olcum:      #6B4095;  --alan-olcum-yazi: #FFFFFF;
  --alan-referans:   #1E5B45;  --alan-referans-yazi: #FFFFFF;
  /* ALTINCI ALAN: ILETISIM. Oteki bes alan "bu ogrenci hakkinda ne
     dogru" sorusunu cevapliyor; bu alan tek basina "UCUNCU BIR TARAFA
     ne soyledik" diyor. Farkli tur oldugu icin kendi rengi var.
     OLCEREK secildi. Yedi aday denendi; yalniz iki lacivert hem beyaz
     yazida 4.5:1'i hem de mevcut bes alandan 1.20x luminans ayrimini
     gecti (renk korlugunde ayrisma esigi). Reddedilenler ve en yakin
     alana luminans orani: sarap x1.19, bordo x1.19, bakir x1.08,
     magenta x1.02, zeytin x1.01 — hepsi gorsel olarak ayrisiyor ama
     deuteranopide oteki alanlara YAPISIYOR.
     Secilen: beyaz yazi 10.60:1, en yakin alandan (genel) x1.54. */
  --on-accent:    #FFFFFF;

  /* Rol renkleri */
  --warn:         #9A4507;
  --warn-wash:    #FAEEDC;
  --ok:           #136B34;
  --ok-wash:      #E1F0E5;
  --danger:       #A81036;
  --danger-wash:  #FAE4EA;

  /* Vurgu: mercan. YALNIZ dolgu, cubuk, gosterge — beyaz uzerinde
     kontrasti 2.9:1, METIN RENGI OLARAK KULLANILMAZ. */
  --vurgu:        #F97066;
  --vurgu-wash:   #FCEDEA;
  --vurgu-deep:   #A9381F;

  /* Veri serisi renkleri. UC HUE ILE KAPANIYOR: teal + turuncu +
     macenta, renk korlugunde ayrismayan ciftlerin hicbirine dusmuyor
     (yesil-kirmizi, mavi-mor, yesil-mavi, mavi-gri...). Dorduncu bir
     hue denendi; yesil, mor, gri-mavi ve hardal hepsi en az bir yasak
     cifte takiliyor. Kategorik seri UCTE kapanir.
     Kontrastlar olculdu: beyaz kart uzerinde 5.93 ve 6.04. */
  --turuncu:      #9C3407;
  --turuncu-wash: #F9E9DC;
  --macenta:      #A61551;
  --macenta-wash: #F8E6ED;

  --focus:        #0B6076;

  /* Tipografi */
  --font-display: 'Bricolage Grotesque', 'Archivo', system-ui, sans-serif;
  --font-ui:      'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num:     'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --t-meta:  0.75rem;
  --t-label: 0.8125rem;
  --t-body:  0.9375rem;
  --t-lead:  1.0625rem;
  --t-h3:    clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --t-h2:    clamp(1.25rem, 1.12rem + 0.65vw, 1.625rem);
  --t-h1:    clamp(1.75rem, 1.45rem + 1.5vw, 2.625rem);
  --t-num:   clamp(2rem, 1.6rem + 1.8vw, 2.875rem);

  --opsz-display: 96;
  --opsz-title:   48;
  --opsz-small:   14;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --radius:  6px;
  --radius-card: 10px;
  --control-h: 38px;

  /* Yükselti: çerçeve + katmanlı gölge + üstte ince ışık = kabartma his.
     Karanlık temada gölge yerine daha güçlü kenarlık devreye girer. */
  /* Kart artik saf beyaz DEGIL (#FBF8F3): ustteki ic isik %90 beyazken
     kartin kendi renginden acik kaliyor ve ince bir cizgi gibi
     goruluyordu. %55'e indi. Golge de yumusadi; govde kontrasti
     16.4:1'den 12.1:1'e inince eski golge fazla sert kaliyor. */
  --shadow-card:
    0 1px 1px rgb(55 49 43 / 0.04),
    0 3px 8px rgb(55 49 43 / 0.06),
    0 10px 20px rgb(55 49 43 / 0.045),
    inset 0 1px 0 rgb(255 255 255 / 0.55);
  --card-border: 1px solid var(--rule-strong);

  /* --- ANLAMSAL TAKMA AD KATMANI (Spectrum'un alias tier'i) ---
     Adobe Spectrum tokenlari uc katmanda tutuyor: global (ham deger),
     semantic/alias (AMACA gore adlandirilmis, globale referans veren) ve
     component. Bu depoda global katman vardi (--ok, --warn, --danger),
     ama ekranlar dogrudan onlari cagiriyordu: "yaklasan tarih kirmizi"
     karari CSS'in icine gomuluydu ve iki ekran ayni durumu farkli renkle
     cizebilirdi.
     Asagidakiler AMACI adlandiriyor ve HAM DEGER TASIMIYOR — hepsi
     globale referans. Aciliyet olcegi degisirse tek yerden degisir.
     Kaynak: spectrum.adobe.com/page/design-tokens */
  --durum-acil:        var(--danger);
  --durum-acil-zemin:  var(--danger-wash);
  --durum-yakin:       var(--warn);
  --durum-yakin-zemin: var(--warn-wash);
  --durum-uzak:        var(--ink-muted);
  --durum-uzak-zemin:  var(--surface-sunk);
  --durum-iyi:         var(--ok);

  /* VERI SERISI. Durumdan AYRI bir eksen: durum bir yargidir (acil,
     iyi), seri bir kimliktir (bu cizgi hedef, su cizgi gerceklesen).
     Ikisini ayni ada bagmak, ayni ekranda turuncunun hem "dikkat" hem
     "hedef" demesine yol acardi. */
  --veri-gerceklesen:   var(--accent);
  --veri-hedef:         var(--turuncu);
  --veri-hedef-zemin:   var(--turuncu-wash);
  --veri-ikincil:       var(--macenta);
  --veri-ikincil-zemin: var(--macenta-wash);

  /* KAYIT DURUMU. --durum-iyi ve --durum-uzak zaten vardi; eksik olan
     "devam ediyor". Serit uzerinde bu eksen renk YANINDA sekille de
     ciziliyor, cunku --ok (yesil) ile --accent (teal) Power BI'in
     ayrismayan cift listesinde "green and blue" olarak geciyor. */
  --durum-devam:        var(--accent);
  --durum-devam-zemin:  var(--accent-wash);
  --durum-iyi-zemin:    var(--ok-wash);

  /* ZAMAN EKSENI. Ucuncu bir eksen: durum bir YARGI (acil, iyi), veri
     bir KIMLIK (hedef, gerceklesen), eksen bir KONUM. "bugun" cizgisi
     --danger ile ciziliydi, yani Pano'nun aciliyet kirmizisiyla ayni
     renkteydi; ayni portalda kirmizi hem "acil" hem "bugun" derse
     ikisi de zayiflar. Bugun bir yargi degil, eksenin baslangicidir. */
  --eksen-cizgi:        var(--rule);
  --eksen-simdi:        var(--ink);

  /* Kart yuzeyi ve ust kenar isigi. Begenilen .hd-kart dilinin tokene
     cikmis hali; artik butun kartlar ayni reçeteyi okuyor. */
  --surface-kart:
    linear-gradient(180deg, var(--surface) 0%, var(--surface) 46%,
      color-mix(in srgb, var(--surface-sunk) 70%, var(--surface)) 100%);
  --shadow-ust-isik: rgb(255 255 255 / 0.55);
  --shadow-card-hover:
    0 0 0 1px rgb(55 49 43 / 0.03),
    0 2px 4px rgb(55 49 43 / 0.055),
    0 14px 28px -12px rgb(55 49 43 / 0.17),
    inset 0 1px 0 rgb(255 255 255 / 0.6);

  /* --- BILESEN KATMANI (Spectrum'un ucuncu tier'i) ---
     Bir bilesenin kendi olculeri. Ham deger tasiyabilirler ama renkleri
     yine anlamsal/global katmandan alirlar. Neden ayri: ray yuksekligi
     iki ayri kuralda 6px olarak yaziliydi ve birini degistiren otekini
     bulamiyordu. Bilesen tokeni "bu olcu bu bilesene ait" der; global
     bir aralik basamagi olmadigini da soyler. */
  /* Secili pencere dugmesinin yuzeyi. Yukaridaki alias'lardan FARKI:
     referansi tema basina degisiyor, yani yalniz :root'a yazilirsa koyu
     temada yanlis yuzeyi okur. Bu yuzden uc blokta da duruyor. */
  --eksen-secim:     var(--surface);

  --olcu-ray-h:      11px;
  --olcu-ray-h-kucuk: 6px;
  --olcu-ad-en:      minmax(5rem, 8rem);
  --olcu-ad-en-kucuk: minmax(4.5rem, 7rem);
  --olcu-satir-py:   0.4rem;
  --olcu-gecis:      400ms;   /* --dur'dan uzun: dolgu buyume hareketi */
  --kpi-sayi-boy:      1.75rem;      /* kartli varyant */
  --kpi-py:            var(--space-3);
  --kpi-px:            var(--space-4);
  /* TEK SAYI BASAMAGI. Onceden panoda dort ayri sayi boyu vardi ve
     hicbiri bir kurala oturmuyordu: 1.75rem, --t-lead (1.0625rem),
     1.125rem ve 2rem. Ikisi arasindaki fark okunmuyor ama tutarsizlik
     olarak birikiyordu. Ray ve panel ici sayilar artik tek basamak. */
  --kpi-sayi-boy-ray:  1.375rem;
  --kart-kalkma:       2px;
  /* Takvim seridi. --tk-etiket yerel olarak .tk-serit icinde duruyordu;
     dort kural onu okuyor ve yeni tik katmani da okuyacak. */
  --tk-etiket-en:      9.5rem;
  --tk-ayak:           1.5rem;   /* "bugun" etiketinin oturdugu alt bant */
  --tk-nokta-c:        16px;

  --dur: 140ms;
  --ease: cubic-bezier(0.2, 0, 0.13, 1);

  /* Perde: modal/panel arka planı için karartma. */
  --scrim: rgba(19, 26, 36, .45);
}

[data-theme="dark"] {
  --eksen-secim: var(--surface-hover);

  /* Veri serisi renkleri, koyu zemin karsiliklari. Kontrast olculdu:
     yuzey (#211B16) uzerinde 10.10 ve 9.39. */
  --turuncu:      #EBAE72;
  --turuncu-wash: #38281A;
  --macenta:      #EC96BE;
  --macenta-wash: #37222C;

  /* Kart yuzeyi: yon AYNI, deger TERS. Isik iki temada da yukaridan
     geliyor; degisen yalniz hangi ucun daha aydinlik oldugu. */
  --surface-kart:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-hover) 55%, var(--surface)) 0%,
      var(--surface) 48%, var(--surface-sunk) 100%);
  /* Alacakaranlik zemininde (#2E3238) golge, neredeyse siyah bir
     zemindekinden DAHA AZ is goruyor: kart ile sayfa arasindaki fark
     1.18:1. Isi kenarlik yapiyor, golge yalniz destekliyor. */
  --shadow-ust-isik: rgb(255 255 255 / 0.10);
  --shadow-card-hover:
    0 0 0 1px var(--rule-strong),
    0 8px 22px rgb(0 0 0 / 0.38),
    inset 0 1px 0 rgb(255 255 255 / 0.07);

  color-scheme: dark;

  --paper:        #23262B;
  --surface:      #2E3238;
  --surface-sunk: #26292E;
  --surface-hover:#373C43;

  --ink:          #D8DADE;
  --ink-muted:    #9AA0A8;
  --ink-faint:    #767C85;

  --rule:         #3A3E45;
  --rule-strong:  #4A4F58;

  --accent:       #5FBFD8;
  --accent-hover: #84D2E6;
  --accent-wash:  #1E3B44;
  --accent-t1:    #1B333B;
  --accent-t2:    #2F6A7C;
  --accent-t3:    #4A9BB3;
  --cizgi-hafif:  #343840;

  /* Koyu temada dolgular acilir, yazi koyulasir: aktif kutucuk parlar */
  --alan-genel:      #D8DADE;  --alan-genel-yazi: #17130F;
  --alan-ic:         #5FBFD8;  --alan-ic-yazi:    #0B1B20;
  --alan-dis:        #F0A08F;  --alan-dis-yazi:   #2A0F0A;
  --alan-olcum:      #C0A0E8;  --alan-olcum-yazi: #241333;
  --alan-referans:   #7FD3AC;  --alan-referans-yazi: #0A1F16;
  --alan-iletisim:   #9FB0F0;  --alan-iletisim-yazi: #101A38;
  --on-accent:    #10201F;

  --warn:         #E0A050;
  --warn-wash:    #3A2C17;
  --ok:           #6FC98D;
  --ok-wash:      #1E3527;
  --danger:       #F08098;
  --danger-wash:  #3B2028;

  --vurgu:        #F49384;
  --vurgu-wash:   #3B2521;
  --vurgu-deep:   #F0A08F;

  --focus:        #5FBFD8;

  --shadow-card:
    0 1px 1px rgb(0 0 0 / 0.4),
    0 4px 12px rgb(0 0 0 / 0.45),
    inset 0 1px 0 rgb(255 255 255 / 0.05);
  --card-border:  1px solid var(--rule-strong);

  --scrim: rgba(10, 7, 5, .62);
}

@media (prefers-color-scheme: dark) {

  :root:not([data-theme="light"]) {
    --eksen-secim: var(--surface-hover);

    /* Veri serisi renkleri, koyu zemin karsiliklari. Kontrast olculdu:
       yuzey (#211B16) uzerinde 10.10 ve 9.39. */
    --turuncu:      #EBAE72;
    --turuncu-wash: #38281A;
    --macenta:      #EC96BE;
    --macenta-wash: #37222C;

    /* Kart yuzeyi: yon AYNI, deger TERS. Isik iki temada da yukaridan
       geliyor; degisen yalniz hangi ucun daha aydinlik oldugu. */
    --surface-kart:
      linear-gradient(180deg,
        color-mix(in srgb, var(--surface-hover) 55%, var(--surface)) 0%,
        var(--surface) 48%, var(--surface-sunk) 100%);
    /* Alacakaranlik zemininde (#2E3238) golge, neredeyse siyah bir
       zemindekinden DAHA AZ is goruyor: kart ile sayfa arasindaki fark
       1.18:1. Isi kenarlik yapiyor, golge yalniz destekliyor. */
    --shadow-ust-isik: rgb(255 255 255 / 0.10);
    --shadow-card-hover:
      0 0 0 1px var(--rule-strong),
      0 8px 22px rgb(0 0 0 / 0.38),
      inset 0 1px 0 rgb(255 255 255 / 0.07);
    color-scheme: dark;
    --paper:        #23262B;
    --surface:      #2E3238;
    --surface-sunk: #26292E;
    --surface-hover:#373C43;
    --ink:          #D8DADE;
    --ink-muted:    #9AA0A8;
    --ink-faint:    #767C85;
    --rule:         #3A3E45;
    --rule-strong:  #4A4F58;
    --accent:       #5FBFD8;
    --accent-hover: #84D2E6;
    --accent-wash:  #1E3B44;
    --accent-t1:    #1B333B;
    --accent-t2:    #2F6A7C;
    --accent-t3:    #4A9BB3;
    --cizgi-hafif:  #343840;
    /* Koyu temada dolgular acilir, yazi koyulasir: aktif kutucuk parlar */
    --alan-genel:      #D8DADE;  --alan-genel-yazi: #17130F;
    --alan-ic:         #5FBFD8;  --alan-ic-yazi:    #0B1B20;
    --alan-dis:        #F0A08F;  --alan-dis-yazi:   #2A0F0A;
    --alan-olcum:      #C0A0E8;  --alan-olcum-yazi: #241333;
    --alan-referans:   #7FD3AC;  --alan-referans-yazi: #0A1F16;
    --alan-iletisim:   #9FB0F0;  --alan-iletisim-yazi: #101A38;
    --on-accent:    #10201F;
    --warn:         #E0A050;
    --warn-wash:    #3A2C17;
    --ok:           #6FC98D;
    --ok-wash:      #1E3527;
    --danger:       #F08098;
    --danger-wash:  #3B2028;
    --vurgu:        #F49384;
  --vurgu-wash:   #3B2521;
  --vurgu-deep:   #F0A08F;

  --focus:        #5FBFD8;
    --shadow-card:
      0 1px 1px rgb(0 0 0 / 0.4),
      0 4px 12px rgb(0 0 0 / 0.45),
      inset 0 1px 0 rgb(255 255 255 / 0.05);
    --card-border:  1px solid var(--rule-strong);

    --scrim: rgba(10, 7, 5, .62);
  }
}

/* --------------------------------------------------------------------------
   2. Sıfırlama
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video, canvas { display: block; max-width: 100%; }
input, button, select, textarea { font: inherit; color: inherit; }
p, h1, h2, h3, h4 { overflow-wrap: break-word; }

a { color: var(--accent); text-decoration: none; text-underline-offset: 0.15em; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   3. Tipografi — serif yalnız başlıkta, mono yalnız sayıda
   -------------------------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-variation-settings: 'opsz' var(--opsz-title);
  color: var(--ink);
}

h1 {
  font-size: var(--t-h1);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variation-settings: 'opsz' var(--opsz-display);
}
h2 { font-size: var(--t-h2); margin-bottom: var(--space-3); }
h3 { font-size: var(--t-h3); letter-spacing: -0.005em; }

h2 small, h3 small {
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  font-weight: 400;
  color: var(--ink-faint);
  margin-left: 0.5ch;
}

.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--ink-muted); max-width: 62ch; }
.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); font-size: var(--t-meta); }

.num, .sayi {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   4. Düzen
   -------------------------------------------------------------------------- */

.govde {
  max-width: 76rem;
  margin-inline: auto;
  padding: var(--space-5) var(--space-4) var(--space-6);
}

.kartlar {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

.gizli { display: none !important; }

.divider, .yonetim-kutu {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
}

/* --------------------------------------------------------------------------
   5. Üst şerit
   -------------------------------------------------------------------------- */

.ust {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}

.ust .marka {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-weight: 500;
  color: var(--ink);
}

.ust .marka .isaret {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.75rem;
  font-family: var(--font-ui);
  font-weight: 600;
}

.ust .sag {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--t-label);
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   6. Kart
   -------------------------------------------------------------------------- */

.kart, .ozet-kart, .an-kart, .oz2-kart, .rm-kart, .giris-kutu {
  background: var(--surface);
  border: var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-4) var(--space-5);
}

.kart.genis, .an-genis, .oz2-kart.genis2, .ozet-kart.genis2 { grid-column: 1 / -1; }

.kart-baslik, .card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.kart-baslik small, .card__note {
  font-size: var(--t-meta);
  color: var(--ink-faint);
  font-weight: 400;
}

.kart-p { font-size: var(--t-body); margin: var(--space-2) 0; }

/* Bölüm etiketi: küçük, kalın, sakin — mono ve büyük harf değil. */
/* ---- Haftalik ders girisi ----
   Kayitlar kartinin ICINDE durur: tablo ile formu ayri kartlara koymak
   "veri girilemiyor" hissi veriyordu. */
.hafta-kutu { margin-top: var(--space-4); padding-top: var(--space-4);
  border-top: 1px solid var(--rule); }
.hafta-kutu .uni-not { margin-bottom: var(--space-3); }
.hf-ust { display: grid; gap: var(--space-3) var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin-bottom: var(--space-4); }
.hf-ust label { display: grid; gap: 4px; font-size: var(--t-meta);
  font-weight: 500; color: var(--ink-muted); }
.hf-ust input { width: 100%; height: var(--control-h); padding: 0 0.625rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: var(--radius); }

/* Dersler obeklenir; her obek kendi ince cercevesinde durur. 11 kutu duz
   bir izgaraya dizilince satirlar 7+4 diye kiriliyor ve hangi derslerin bir
   arada oldugu okunmuyordu. */
.hf-obek { border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--space-3); margin: 0 0 var(--space-3); min-width: 0; }
.hf-obek legend { padding: 0 var(--space-2); font-size: var(--t-label);
  font-weight: 700; color: var(--alan, var(--accent)); }
/* Obegin soru sayisi baslikta ama ONUN KADAR yuksek sesle degil: baslik
   ne calisildigini, sayi ne kadar agirlikta oldugunu soyler. */
.hf-obek-soru { font-size: var(--t-meta); font-weight: 500;
  font-family: var(--font-num); color: var(--ink-muted); }
.hf-izgara { display: grid; gap: var(--space-2) var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
.hf-ders { display: grid; gap: 3px; }
.hf-ad { font-size: var(--t-meta); color: var(--ink-muted); overflow-wrap: anywhere; }
.hf-ders input { width: 100%; height: 34px; padding: 0 0.5rem;
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: var(--radius); }
.hf-ders input::-webkit-outer-spin-button,
.hf-ders input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hf-ders input { -moz-appearance: textfield; appearance: textfield; }
.hf-ders input:focus, .hf-ust input:focus { outline: 2px solid var(--focus);
  outline-offset: 1px; border-color: var(--accent); }
/* Dolu kutu bos kutudan ayirt edilir — 11 kutuda gozle taramayi kolaylastirir. */
.hf-ders input:not(:placeholder-shown), .hf-ders input[value]:not([value=""]) {
  border-color: var(--rule-strong); background: var(--surface-sunk); font-weight: 600; }

.hf-alt { display: flex; align-items: center; justify-content: flex-end;
  gap: var(--space-4); margin-top: var(--space-4); padding-top: var(--space-3);
  border-top: 1px solid var(--rule); }
.hf-toplam { font-size: var(--t-label); color: var(--ink-muted); margin-right: auto; }
.hf-toplam b { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-lead); font-weight: 600; color: var(--ink); }
.hf-durum { font-size: var(--t-meta); color: var(--ink-muted); margin: var(--space-2) 0 0;
  text-align: right; }
.hf-durum:empty { display: none; }
.hf-durum.tamam { color: var(--ok); }
.hf-durum.hata { color: var(--danger); }

/* Ogrenilebilirlik ayarlari: katsayi gizli sabit degil, gorunur ve
   duzenlenebilir. Yalniz verisi olan konular listelenir. */
.ay-blok { margin: 0 0 var(--space-4); }
.ay-liste { display: grid; gap: 2px;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.ay-satir { display: grid; grid-template-columns: 1fr 4.5rem; align-items: center;
  gap: var(--space-2); padding: var(--space-2) var(--space-3);
  background: var(--surface-sunk); border-radius: var(--radius); }
.ay-ad { font-size: var(--t-meta); color: var(--ink); overflow-wrap: anywhere; }
.ay-ad small { display: block; font-size: 10px; color: var(--ink-faint); }
.ay-giris { width: 100%; height: 30px; padding: 0 0.4rem; text-align: right;
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: var(--radius); }
.ay-giris::-webkit-outer-spin-button, .ay-giris::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0; }
.ay-giris { -moz-appearance: textfield; appearance: textfield; }
.ay-deger { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  text-align: right; color: var(--ink); }

/* Pencere secici: analiz hangi denemeleri kapsiyor. */
.ka-pencere { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-3); font-size: var(--t-meta); color: var(--ink-muted); }
.ka-pencere .alt-sekme { font-size: var(--t-meta); padding: 3px 10px; }
.ka-pencere .faint { margin-left: auto; }

/* Egilim: yon OLCUMDEN ZAYIF kanittir; veri yoksa nokta kalir, ok cizilmez. */
.ka-egilim { display: inline-grid; place-items: center; width: 1.3rem;
  font-size: var(--t-meta); }
.ka-egilim.yukseldi { color: var(--ok); }
.ka-egilim.dustu { color: var(--danger); }
.ka-egilim.ayni { color: var(--ink-faint); }
.ka-egilim.yok { color: var(--rule-strong); }

/* ---- Deneme analizi ---- */
.da-kapsama { font-size: var(--t-label); color: var(--ink-muted);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
  background: var(--accent-wash); border-radius: var(--radius); }
.da-kapsama.eksik { background: var(--warn-wash); }
.da-kapsama b { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  color: var(--ink); }
.da-eksik-liste { display: block; margin-top: 3px; font-size: var(--t-meta);
  color: var(--ink-muted); }

.da-bolumler { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.da-bolum { padding: var(--space-3); background: var(--surface-sunk);
  border: 1px solid var(--rule); border-radius: var(--radius); }
.da-bolum-bas { display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-3); margin-bottom: var(--space-2); }
.da-bolum-ad { font-weight: 600; font-size: var(--t-label); color: var(--ink); }
.da-bolum-net { font-size: var(--t-meta); color: var(--ink-muted); white-space: nowrap; }
.da-bolum-net b { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-label); color: var(--ink); }
/* Yigilmis cubuk: dogru / yanlis / bos tek satirda, oran gozle okunur. */
.da-yigin { display: flex; height: 10px; border-radius: 999px; overflow: hidden;
  background: var(--surface); }
.da-yigin > span { display: block; height: 100%; }
.da-d { background: var(--ok); }
.da-y { background: var(--danger); }
.da-b { background: var(--warn); }
.da-bolum-alt { display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-2); font-size: var(--t-meta); color: var(--ink-muted); }
.da-p { display: inline-block; width: 8px; height: 8px; border-radius: 2px;
  margin-right: 4px; }

.da-konular { display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.da-konu-grup { padding: var(--space-3); background: var(--surface-sunk);
  border: 1px solid var(--rule); border-radius: var(--radius); }
.da-konu-grup h5 { font-family: var(--font-ui); font-size: var(--t-meta);
  font-weight: 600; color: var(--ink-muted); margin: 0 0 var(--space-2); }
.da-konu-grup ul { margin: 0; padding-left: 18px; font-size: var(--t-label);
  line-height: 1.7; color: var(--ink); }
.da-tekrar { font-family: var(--font-num); color: var(--danger); }

.da-fark { display: grid; gap: 2px; margin-bottom: var(--space-2); }
.da-fark-satir { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr 1.4rem;
  align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3);
  background: var(--surface-sunk); border-radius: var(--radius);
  font-size: var(--t-meta); color: var(--ink-muted); }
.da-fark-ad { color: var(--ink); }
.da-fark-deger b { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  color: var(--ink); }
.da-fark-ok { text-align: right; }
.da-fark-satir.artti .da-fark-ok { color: var(--danger); }
.da-fark-satir.azaldi .da-fark-ok { color: var(--ok); }
.da-fark-satir.ayni .da-fark-ok { color: var(--ink-faint); }

/* ---- LinkedIn düzeni: kimlik başlığı + bölüm kartları ---- */
.li-bas-kart { display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-5); margin-bottom: var(--space-4);
  background: var(--surface); border: var(--card-border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.li-avatar { display: grid; place-items: center; width: 5rem; height: 5rem; flex: none;
  font-family: var(--font-display); font-size: 1.9rem; font-weight: 600;
  color: var(--alan-yazi, var(--on-accent)); background: var(--alan, var(--accent));
  border-radius: 50%; }
.li-bas-govde { min-width: 0; }
.li-isim { font-family: var(--font-display); font-size: var(--t-h2);
  font-weight: 600; margin: 0; color: var(--ink); }
.li-baslik { font-size: var(--t-lead); color: var(--ink); margin: 2px 0 0; }
.li-meta { font-size: var(--t-meta); color: var(--ink-muted); margin: 3px 0 0; }
.li-meta a { color: var(--accent); }

.li-bolum { padding: var(--space-4) var(--space-5); margin-bottom: var(--space-3);
  background: var(--surface); border: var(--card-border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
/* Bolum basligi sitenin MEVCUT mimarisini izler (.ul-bolum h4, .uni-blok h4):
   ui yazi tipi, kucuk punto, harf araligi, sonuk renk. Onceden display
   serifiyle --t-h3 idi; ust uste bes bolumde bes yuksek sesli baslik
   cikiyordu ve asil icerik — ogrencinin adi, etkinlikleri — onlarin
   altinda eziliyordu. Baslik burada bir ETIKET, manset degil.

   BUYUK HARF YOK. O mimarideki h4'ler uppercase, ama onlar kisa etiket;
   bunlar cumle ve icinde 'i' var: CSS'in buyuk harfi Turkce'de i -> I
   yapar, "DENEYIM" cikar; dogrusu "DENEYİM"dir. Ayirt etmeyi punto,
   harf araligi ve renk ustleniyor. */
.li-bolum-bas { display: flex; align-items: baseline;
  gap: var(--space-3); margin-bottom: var(--space-4); }
.li-bolum-bas h4 { order: 1; flex: none; font-family: var(--font-ui);
  font-size: var(--t-label); font-weight: 600; letter-spacing: .06em;
  color: var(--ink-muted); margin: 0; }
/* Basligi satirin sonuna baglayan ince cizgi: bolumun nerede basladigini
   gozle takip ettirir, belge hissi verir. */
.li-bolum-bas::after { content: ''; order: 2; flex: 1 1 auto;
  height: 1px; background: var(--rule); }
.li-bolum-not { order: 3; flex: none; font-size: var(--t-meta);
  color: var(--ink-faint); white-space: nowrap; }

/* Sekmenin ust satiri: baslik solda, Yazdir SAG UST kosede. Cerceve YOK —
   altindaki bolumlerin her biri zaten kart, hepsini bir .kart'a sarmak
   ic ice cerceve olurdu.

   IZGARA, flex degil. Flex + space-between iken dugme baslik blogunun
   kardesiydi ve daralinca alt satira dusuyordu. Burada dugmenin sutunu
   (2) sabit; baslik ne kadar uzarsa uzasin dugme sag ustte kalir. */
.pr-ust { display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 2px var(--space-4); margin-bottom: var(--space-5); }
.pr-ust h2 { grid-column: 1; font-family: var(--font-display);
  font-size: var(--t-h2); font-weight: 600; margin: 0; color: var(--ink); }
.pr-ust p { grid-column: 1; font-size: var(--t-meta);
  color: var(--ink-muted); margin: 0; }
.pr-ust .pr-yazdir { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }

/* Yazdir: hap bicimli, ince cizgili, ikonu vurgu renginde. Uzerine
   gelince vurgu rengiyle dolar — sayfadaki tek eylem oldugu icin
   sessiz durmasi, ama arandiginda hemen bulunmasi gerekiyor. */
.pr-yazdir { display: inline-flex; align-items: center; gap: 0.5rem;
  height: 2.25rem; padding: 0 1.05rem; font: inherit;
  font-size: var(--t-label); font-weight: 600;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--rule-strong); border-radius: 999px;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.pr-yazdir .ikon { font-size: 1rem; color: var(--accent);
  transition: color var(--dur) var(--ease); }
.pr-yazdir:hover { background: var(--accent); color: var(--on-accent);
  border-color: transparent; box-shadow: 0 3px 10px rgb(0 0 0 / 0.12); }
.pr-yazdir:hover .ikon { color: currentColor; }
.pr-yazdir:active { box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); }
.pr-yazdir:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Dar ekranda dugme kendi satirina iner ve sola yaslanir; 2.25rem'lik
   hedefi daraltmaktansa satir vermek daha iyi. */
@media (max-width: 480px) {
  .pr-ust { grid-template-columns: minmax(0, 1fr); }
  .pr-ust .pr-yazdir { grid-column: 1; grid-row: auto;
    justify-self: start; margin-top: var(--space-3); }
}

/* Giriş satırı: solda işaret yuvası, sağda gövde. Girişler arası ince çizgi. */
.li-liste { list-style: none; margin: 0; padding: 0; }
.li-oge { display: flex; gap: var(--space-3); padding: var(--space-3) 0;
  border-top: 1px solid var(--rule); }
.li-oge:first-child { border-top: 0; padding-top: 0; }
.li-oge.one-cikan .li-isaret { background: var(--alan, var(--accent));
  color: var(--alan-yazi, var(--on-accent)); border-color: transparent; }
.li-isaret { display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  flex: none; font-family: var(--font-num); font-size: var(--t-label);
  font-weight: 600; color: var(--ink-muted);
  background: var(--surface-sunk); border: 1px solid var(--rule);
  border-radius: var(--radius); }
.li-isaret.odul { color: var(--warn); font-size: 1.1rem; }
.li-isaret.puan { color: var(--accent); }
.li-govde { min-width: 0; flex: 1; }
.li-bas { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.li-ad { font-weight: 600; font-size: var(--t-body); color: var(--ink); }
.li-puan { margin-left: auto; font-family: var(--font-num);
  font-variant-numeric: tabular-nums; font-size: var(--t-lead);
  font-weight: 600; color: var(--ink); }
.li-alt { font-size: var(--t-label); color: var(--ink); }
.li-aciklama { font-size: var(--t-label); color: var(--ink-muted);
  margin: var(--space-2) 0 0; line-height: 1.6; }

@media (max-width: 560px) {
  .li-bas-kart { flex-direction: column; align-items: flex-start; text-align: left; }
  .li-avatar { width: 3.5rem; height: 3.5rem; font-size: 1.3rem; }
}

/* Etkinlik ayrinti formlari: her etkinlik kendi katlanir bloğunda. */
.bp-etkinlikler { display: grid; gap: var(--space-2); }
.bp-etk .yf { margin-top: var(--space-3); }
/* Sınıf kutuları. Etiketler SARMIYOR: "9. sınıf" iki satıra bölününce
   kutu ile yazı hizadan çıkıyor ve altı kutu altı farklı yükseklikte
   duruyordu. Kutular da tarayıcı varsayılanı kadar iri değil. */
.bp-siniflar { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
  font-size: var(--t-label); color: var(--ink); }
.bp-siniflar .satir-ici { display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap; cursor: pointer; padding: 4px 9px;
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--surface); transition: background var(--dur) var(--ease),
    border-color var(--dur) var(--ease); }
.bp-siniflar .satir-ici:hover { border-color: var(--rule-strong); }
/* İşaretli sınıf DOLGUYLA da belli: onay kutusu küçük ve gözden
   kaçıyor, hangi sınıfların seçili olduğu tek bakışta okunmalı. */
.bp-siniflar .satir-ici:has(input:checked) {
  background: var(--accent-wash); border-color: var(--accent); }
.bp-siniflar input[type="checkbox"] { width: 15px; height: 15px; margin: 0;
  accent-color: var(--accent); flex: none; }
.yf textarea { width: 100%; min-height: 8rem; padding: 0.5rem 0.625rem;
  font: inherit; line-height: 1.6; resize: vertical;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: var(--radius); }
.yf textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px;
  border-color: var(--accent); }

/* ---- Basvuru profili ----
   Tamlik cubugu bir sus degil: altinda hangi alanin eksik oldugu ve NEDEN
   gerektigi yazar. Yuzde tek basina "ne yapmaliyim" sorusunu cevaplamaz. */
.pr-tamlik { padding: var(--space-4); margin-bottom: var(--space-4);
  background: var(--surface-sunk); border: 1px solid var(--rule);
  border-radius: var(--radius-card); }
.pr-tamlik-bas { display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-3); margin-bottom: var(--space-2); }
.pr-tamlik-ad { font-weight: 600; font-size: var(--t-label); color: var(--ink); }
.pr-tamlik-sayi { font-size: var(--t-meta); color: var(--ink-muted); white-space: nowrap; }
.pr-tamlik-sayi b { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-lead); color: var(--ink); }
.pr-ray { height: 8px; background: var(--surface); border-radius: 999px; overflow: hidden; }
.pr-ray > span { display: block; height: 100%; background: var(--alan, var(--accent));
  border-radius: 999px; transition: width var(--dur) var(--ease); }
.pr-eksik { margin: var(--space-3) 0 0; padding-left: 18px; font-size: var(--t-label);
  line-height: 1.6; }
.pr-eksik li { margin-bottom: 3px; }
.pr-neden { display: block; font-size: var(--t-meta); color: var(--ink-faint); }
.pr-tamam { margin: var(--space-3) 0 0; font-size: var(--t-label); color: var(--ok); }
/* Tamamlananlar: ilerleme gorunur olsun ama yapilacak isin onune gecmesin —
   sessiz cipler, eksik listesinin altinda. */
.pr-tamamlar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px dashed var(--rule); }
.pr-tamamlar-ad { font-size: var(--t-meta); color: var(--ink-faint);
  margin-right: var(--space-1); }
.pr-cip { font-size: var(--t-meta); color: var(--ok);
  background: var(--ok-wash); border-radius: 999px; padding: 2px 9px; }

/* Not: .pr-etkinlik*, .pr-yillik ve .pr-oduller siniflari SILINDI. LinkedIn
   duzenine gecerken yerlerini .li-oge / .li-liste aldi; hicbir js ya da
   html onlari kullanmiyordu. Olu kural, sonraki okuyucuya iki ayri desen
   varmis izlenimi verir. */
.pr-rozet { font-size: 10px; font-weight: 600; color: var(--alan-yazi, var(--on-accent));
  background: var(--alan, var(--accent)); border-radius: 999px; padding: 1px 8px; }
.pr-anlati { font-size: var(--t-body); line-height: 1.7; color: var(--ink);
  padding: var(--space-3) var(--space-4); background: var(--surface-sunk);
  border-left: 3px solid var(--alan, var(--accent)); border-radius: var(--radius);
  white-space: pre-wrap; }

/* ---- Konu haritasi girisi ----
   Once konu secilir, sonra o konuya ait soru numaralarina tiklanir.
   Ayni konunun hucreleri ayni tonu alir; renk anahtari gerekmez cunku
   hucrenin uzerinde konu adi yazar. */
.hm-ust { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-4);
  margin: var(--space-3) 0; }
.hm-ust label { display: grid; gap: 4px; font-size: var(--t-meta);
  font-weight: 500; color: var(--ink-muted); }
.hm-ust select { height: var(--control-h); padding: 0 0.625rem; max-width: 24rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: var(--radius); }
.hm-sayim { margin-left: auto; font-size: var(--t-label); color: var(--ink-muted); }
.hm-sayim b { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  color: var(--ink); }

.hm-izgara { display: grid; gap: 4px; margin-bottom: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); }
.hm-hucre { display: grid; gap: 1px; padding: var(--space-2); text-align: left;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); cursor: pointer; font: inherit; min-height: 3.2rem;
  transition: border-color var(--dur) var(--ease); }
.hm-hucre:hover { border-color: var(--alan, var(--accent)); }
.hm-hucre:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.hm-no { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-meta); color: var(--ink-faint); }
.hm-ad { font-size: 10.5px; line-height: 1.2; color: var(--ink);
  overflow-wrap: anywhere; }
.hm-hucre.dolu { background: var(--surface-sunk); }
.hm-hucre.dolu[data-ton="0"] { border-left: 3px solid var(--accent); }
.hm-hucre.dolu[data-ton="1"] { border-left: 3px solid var(--vurgu-deep); }
.hm-hucre.dolu[data-ton="2"] { border-left: 3px solid var(--ok); }
.hm-hucre.dolu[data-ton="3"] { border-left: 3px solid var(--warn); }
.hm-hucre.dolu[data-ton="4"] { border-left: 3px solid var(--alan-olcum); }
.hm-hucre.dolu[data-ton="5"] { border-left: 3px solid var(--accent-hover); }
.hm-hucre.dolu[data-ton="6"] { border-left: 3px solid var(--danger); }
.hm-hucre.dolu[data-ton="7"] { border-left: 3px solid var(--ink-muted); }
.hm-hucre.secili { outline: 2px solid var(--alan, var(--accent)); outline-offset: -2px; }
.hm-dagilim { margin-bottom: var(--space-4); }
.hm-dagilim h5 { font-family: var(--font-ui); font-size: var(--t-meta);
  font-weight: 600; color: var(--ink-muted); margin: 0 0 var(--space-2); }

/* ---- Konu analizi ----
   Isi haritasi: satir = konu, sutun = hata nedeni. Renk yogunlugu adettir;
   ayri bir renk anahtari gerekmez, hucrede sayi da yazar. */
.ka-matris { width: 100%; border-collapse: collapse; font-size: var(--t-meta); }
.ka-matris th, .ka-matris td { padding: var(--space-2); border: 1px solid var(--rule);
  text-align: center; }
.ka-matris thead th { font-weight: 500; color: var(--ink-muted);
  vertical-align: bottom; }
.ka-matris thead th span { display: inline-block; max-width: 5.5rem;
  overflow-wrap: anywhere; line-height: 1.25; }
.ka-matris tbody th { text-align: left; font-weight: 600; color: var(--ink);
  white-space: nowrap; }
.ka-matris tbody th small { display: block; font-weight: 400;
  font-size: 10px; color: var(--ink-faint); }
.ka-hucre { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: color-mix(in srgb, var(--danger) calc(var(--yogunluk) * 55%), transparent); }
.ka-toplam { font-family: var(--font-num); font-weight: 600;
  background: var(--surface-sunk); }

/* Dogruluk: nokta gozlenen oran, cizgi guven araligi. Aralik gizlenmez —
   10 soruda +-%28 ile 100 soruda +-%9 ayni guvende degildir. */
.ka-liste { display: grid; gap: var(--space-2); }
.ka-satir { display: grid;
  grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr) 8.5rem 1.3rem;
  align-items: center; gap: var(--space-3); }
.ka-ad { font-size: var(--t-label); color: var(--ink); overflow-wrap: anywhere; }
.ka-ad small { display: block; font-size: 10px; color: var(--ink-faint); }
.ka-olcek { position: relative; height: 10px; background: var(--surface-sunk);
  border-radius: 999px; }
.ka-dolgu { position: absolute; inset-block: 0; left: 0; background: var(--danger);
  border-radius: 999px; opacity: .75; }
.ka-deger { font-size: var(--t-meta); color: var(--ink-muted); text-align: right; }
.ka-deger b { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-label); color: var(--ink); }
.ka-deger small { display: block; font-size: 10px; }
.ka-yetersiz { font-size: var(--t-meta); color: var(--ink-muted);
  margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3);
  background: var(--surface-sunk); border-radius: var(--radius); }

/* Oncelik: neden secildigi ACIKCA yazar. */
.ka-oncelik { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4);
  padding-left: 1.4rem; }
.ka-oncelik li { padding: var(--space-3); background: var(--surface-sunk);
  border: 1px solid var(--rule); border-radius: var(--radius); }
.ka-oncelik-bas { display: flex; align-items: baseline; gap: var(--space-2);
  flex-wrap: wrap; }
.ka-rozet { font-size: 10px; color: var(--ink-faint); background: var(--surface);
  border-radius: 999px; padding: 1px 7px; }
.ka-oncelik-neden { font-size: var(--t-meta); color: var(--ink-muted); margin-top: 2px; }
.ka-oncelik-neden b { font-family: var(--font-num); color: var(--ink); }
.ka-oncelik-eylem { font-size: var(--t-meta); color: var(--ink); margin-top: 4px;
  padding-top: 4px; border-top: 1px dashed var(--rule); }
/* Ince konular: olcum unitede, calisma hedefi burada. */
.ka-oncelik-ince { font-size: var(--t-meta); color: var(--ink-muted); margin-top: 4px; }
.ka-oncelik-ince b { color: var(--ink); font-weight: 600; }

@media (max-width: 640px) {
  .ka-satir { grid-template-columns: 1fr auto; gap: 2px var(--space-2); }
  .ka-deger { text-align: left; }
}

/* ---- Soru kaydi izgarasi ----
   Hiz tasarimi: ogrenci YALNIZ yanlis ve boslari isaretler. Isaretsiz hucre
   dogru sayilir ve sessiz durur; goz yalniz isaretlilere gider. */
.sk-ust { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-4);
  margin-bottom: var(--space-4); }
.sk-ust label { display: grid; gap: 4px; font-size: var(--t-meta);
  font-weight: 500; color: var(--ink-muted); }
.sk-ust select { height: var(--control-h); padding: 0 0.625rem; max-width: 22rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: var(--radius); }
.sk-sayim { margin-left: auto; font-size: var(--t-label); color: var(--ink-muted);
  white-space: nowrap; }
.sk-sayim b { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  color: var(--ink); }
.sk-net { display: inline-block; margin-left: var(--space-2); padding: 1px 8px;
  background: var(--accent-wash); border-radius: 999px; color: var(--ink);
  font-family: var(--font-num); font-variant-numeric: tabular-nums; }

.sk-izgara { display: grid; gap: 4px; margin-bottom: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(2.6rem, 1fr)); }
.sk-hucre { position: relative; aspect-ratio: 1; display: grid; place-items: center;
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-meta); color: var(--ink-muted);
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.sk-hucre:hover { border-color: var(--alan, var(--accent)); }
.sk-hucre:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sk-isaret { position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 1.1rem; font-weight: 700; }
.sk-hucre.sk-yanlis { background: var(--danger-wash); border-color: var(--danger);
  color: var(--danger); }
.sk-hucre.sk-bos { background: var(--warn-wash); border-color: var(--warn);
  color: var(--warn); }
.sk-hucre.sk-yanlis .sk-isaret, .sk-hucre.sk-bos .sk-isaret { opacity: .35; }

.sk-ipucu { font-size: var(--t-label); color: var(--ink-muted);
  padding: var(--space-3) var(--space-4); background: var(--surface-sunk);
  border: 1px dashed var(--rule-strong); border-radius: var(--radius); margin: 0; }

.sk-ayrinti { display: grid; gap: var(--space-2); }
.sk-satir { display: grid; grid-template-columns: 2.2rem minmax(10rem, 18rem) 1fr;
  align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-sunk); border: 1px solid var(--rule);
  border-radius: var(--radius); }
.sk-no { display: grid; place-items: center; height: 1.8rem; border-radius: var(--radius);
  font-family: var(--font-num); font-weight: 600; font-size: var(--t-meta); }
.sk-no.sk-yanlis { background: var(--danger-wash); color: var(--danger); }
.sk-no.sk-bos { background: var(--warn-wash); color: var(--warn); }
.sk-konu { height: 32px; padding: 0 0.5rem; font-size: var(--t-label); min-width: 0;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: var(--radius); }
.sk-nedenler { display: flex; flex-wrap: wrap; gap: 4px; }
.sk-neden { padding: 3px 9px; font-size: var(--t-meta); color: var(--ink-muted);
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 999px; cursor: pointer; }
.sk-neden:hover { border-color: var(--alan, var(--accent)); color: var(--ink); }
.sk-neden.secili { background: var(--alan, var(--accent));
  color: var(--alan-yazi, var(--on-accent)); border-color: transparent; font-weight: 600; }
.sk-bos-not { font-size: var(--t-meta); color: var(--ink-faint); }

@media (max-width: 640px) {
  .sk-satir { grid-template-columns: 2.2rem 1fr; }
  .sk-nedenler { grid-column: 2; }
}

/* Izgara solda, ozet panel sagda. Panel yapiskan: uzun listede kaydirirken
   dagilim gorunmeye devam eder. */
.sk-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 17rem;
  gap: var(--space-5); align-items: start; }
.sk-sol { min-width: 0; }
.sk-panel { position: sticky; top: var(--space-4);
  padding: var(--space-4); background: var(--surface-sunk);
  border: 1px solid var(--rule); border-radius: var(--radius-card); }
.sk-panel h4 { font-family: var(--font-ui); font-size: var(--t-label);
  font-weight: 600; color: var(--ink); margin: 0 0 var(--space-1); }
.sk-panel h5 { font-family: var(--font-ui); font-size: var(--t-meta);
  font-weight: 600; color: var(--ink-muted); margin: var(--space-4) 0 var(--space-2); }
.sk-panel-sayi { font-size: var(--t-meta); color: var(--ink-muted); margin: 0; }
.sk-panel-sayi b { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-lead); color: var(--ink); }

.sk-cubuklar { display: grid; gap: 3px; }
.sk-cubuk { display: grid; grid-template-columns: 1fr 3.5rem 1.4rem;
  align-items: center; gap: var(--space-2); font-size: var(--t-meta);
  color: var(--ink-muted); }
.sk-cubuk-ad { overflow-wrap: anywhere; }
.sk-cubuk-ray { height: 6px; background: var(--surface); border-radius: 999px;
  overflow: hidden; }
.sk-cubuk-ray > span { display: block; height: 100%; background: var(--danger);
  border-radius: 999px; }
.sk-cubuk-ray > span.konu { background: var(--accent); }
.sk-cubuk-sayi { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  text-align: right; color: var(--ink); }
.sk-eylem { font-size: 11px; color: var(--ink-faint); margin: 0 0 var(--space-2) 0; }
.sk-yok { font-size: var(--t-meta); color: var(--ink-faint); margin: var(--space-1) 0 0; }
.sk-vurgu { font-size: var(--t-meta); color: var(--ink); margin: var(--space-3) 0 0;
  padding: var(--space-2); background: var(--vurgu-wash);
  border-radius: var(--radius); }
.sk-uyari { font-size: 11px; color: var(--ink-faint); margin: var(--space-3) 0 0;
  padding-top: var(--space-2); border-top: 1px dashed var(--rule); }

@media (max-width: 900px) {
  .sk-duzen { grid-template-columns: 1fr; }
  .sk-panel { position: static; }
}

/* ---- YKS Degerlendirme ----
   Calisma ve net YAN YANA iki ray. Tek bir kompozit skora indirgenmez:
   "yavas ama dogru" ile "hizli ama yanlis" ayni sayiya dusmesin. */
.dg-liste { display: grid; gap: var(--space-3); }
.dg-satir { padding: var(--space-3) var(--space-4);
  background: var(--surface-sunk); border: 1px solid var(--rule);
  border-radius: var(--radius-card); }
.dg-bas { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.dg-ad { font-weight: 600; font-size: var(--t-body); color: var(--ink); }
.dg-tur { font-size: var(--t-meta); font-weight: 500; color: var(--ink-faint);
  background: var(--surface); border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.dg-dersler { font-size: var(--t-meta); color: var(--ink-faint); }

.dg-olcu { display: grid; grid-template-columns: 5rem minmax(0, 32rem) auto;
  align-items: center; gap: var(--space-3); margin-top: var(--space-2);
  justify-content: start; }
.dg-etiket { font-size: var(--t-meta); color: var(--ink-muted); }
.dg-ray { height: 8px; background: var(--surface); border-radius: 999px;
  overflow: hidden; min-width: 0; }
.dg-dolgu { display: block; height: 100%; background: var(--accent);
  border-radius: 999px; }
.dg-dolgu.net { background: var(--vurgu-deep); }
.dg-deger { font-size: var(--t-meta); color: var(--ink-muted); white-space: nowrap; }
.dg-deger b { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-label); color: var(--ink); }

.dg-eksik { margin-top: var(--space-4); padding-top: var(--space-3);
  border-top: 1px dashed var(--rule); }
.dg-eksik h4 { font-family: var(--font-ui); font-size: var(--t-meta);
  font-weight: 600; color: var(--ink-muted); margin: 0 0 var(--space-2); }
.dg-eksik ul { margin: 0; padding-left: 18px; font-size: var(--t-meta);
  color: var(--ink-muted); line-height: 1.7; }

@media (max-width: 640px) {
  .dg-olcu { grid-template-columns: 4.5rem 1fr; }
  .dg-deger { grid-column: 2; text-align: right; }
}

/* ---- Haftalik kayit listesi ----
   Tablo degil, hafta bloklari. Ders etiketinin DOLGUSU o dersin haftadaki
   payidir: ayri bir renk anahtari olmadan hangi dersin agir bastigi gorunur. */
.hk-liste { display: grid; gap: var(--space-3); }
.hk-hafta { padding: var(--space-3) var(--space-4);
  background: var(--surface-sunk); border: 1px solid var(--rule);
  border-radius: var(--radius-card); }
.hk-bas { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-3); }
.hk-tarih { font-weight: 600; font-size: var(--t-body); color: var(--ink);
  white-space: nowrap; }
.hk-toplam { font-size: var(--t-meta); color: var(--ink-muted); white-space: nowrap; }
.hk-toplam b { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-lead); font-weight: 600; color: var(--ink);
  letter-spacing: -0.02em; margin-right: 3px; }

.hk-dersler { display: flex; flex-wrap: wrap; gap: 6px; }
.hk-ders {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 3px 9px;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 999px; font-size: var(--t-meta); color: var(--ink-muted);
}
/* Dolgu METNIN ALTINDA kalir; oran degistikce yazi yerinden oynamaz. */
.hk-dolgu { position: absolute; inset-block: 0; left: 0;
  background: var(--accent-wash); z-index: 0; }
.hk-ders-ad, .hk-ders-sayi { position: relative; z-index: 1; }
.hk-ders-sayi { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--ink); }
.hk-yok { font-size: var(--t-meta); color: var(--ink-faint); margin: 0; }
.hk-not { font-size: var(--t-label); color: var(--ink-muted);
  margin: var(--space-3) 0 0; padding-top: var(--space-2);
  border-top: 1px dashed var(--rule); }

/* ---- Ulkelere gore universiteler ---- */
.uni-ulke-grup { margin-bottom: var(--space-5); }
.uni-ulke-grup .ozet-baslik { margin-bottom: var(--space-3); }
.uni-ulke-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: var(--space-2);
}
.uni-ulke {
  display: grid; gap: 2px; text-align: left;
  padding: var(--space-3);
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); font: inherit; cursor: pointer;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.uni-ulke:hover { border-color: var(--alan, var(--accent)); transform: translateY(-1px); }
.uni-ulke:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Okulu da rehberi de olmayan ulke: gorunur ama tiklanmaz. Doluymus gibi
   gostermek yerine durumu oldugu gibi soylenir. */
.uni-ulke.bos { background: none; border-style: dashed; cursor: default; }
.uni-ulke.bos:hover { border-color: var(--rule); transform: none; }
.uni-ulke-ad { font-weight: 600; font-size: var(--t-label); color: var(--ink); }
.uni-ulke.bos .uni-ulke-ad { font-weight: 500; color: var(--ink-muted); }
.uni-ulke-alt { font-size: var(--t-meta); color: var(--ink-faint); }
.uni-ulke-alt b { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  color: var(--ink-muted); }

.uni-ulke-rozet { display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--t-meta); color: var(--ink); background: var(--accent-wash);
  border-radius: 999px; padding: 2px 4px 2px 10px; }
.uni-rozet-kapat { border: 0; background: none; cursor: pointer; font-size: 14px;
  line-height: 1; color: var(--ink-muted); padding: 0 4px; border-radius: 999px; }
.uni-rozet-kapat:hover { color: var(--danger); }
.uni-rozet-kapat:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* ---- Bolum basliklari: KUTU DEGIL, CAPA ----
   Kart zaten kutudur; basligi da kutuya almak kutu icinde kutu yapar —
   kenarlik ekler, anlam eklemez. Bunun yerine solda ince bir alan cizgisi
   basligi altindaki icerige baglar. Renk sekme seridinden miras gelir,
   boylece "hangi alandayim" bilgisi ekran boyunca surer. */
.sekme-icerik       { --alan: var(--alan-genel); --alan-yazi: var(--alan-genel-yazi); }
[data-alan="genel"] { --alan: var(--alan-genel); --alan-yazi: var(--alan-genel-yazi); }
[data-alan="ic"]    { --alan: var(--alan-ic); --alan-yazi: var(--alan-ic-yazi); }
[data-alan="dis"]   { --alan: var(--alan-dis); --alan-yazi: var(--alan-dis-yazi); }
[data-alan="olcum"] { --alan: var(--alan-olcum); --alan-yazi: var(--alan-olcum-yazi); }
[data-alan="referans"] { --alan: var(--alan-referans); --alan-yazi: var(--alan-referans-yazi); }
/* KARANLIK TEMADA luminans ayrimi ARANMADI ve bu bilincli: o palet
   pastel ve hue uzerine kurulu, mevcut alanlar da kendi aralarinda
   ayrismiyor (ic 0.4465 / dis 0.4565 = x1.02). Olcutu yalniz yeni renge
   uygulamak tutarsiz olurdu. Ayrim orada HUE'den geliyor: secilen mavi
   (~225deg) teal (193) ile lavanta (272) arasindaki en genis bosluga
   oturuyor. Yazi kontrasti yine olculdu: 8.10:1. */
[data-alan="iletisim"] { --alan: var(--alan-iletisim); --alan-yazi: var(--alan-iletisim-yazi); }

.ozet-baslik, .db-baslik h3, .rm-baslik, .ul-baslik, .tur-bolum-baslik,
.oz2-etiket, .kart-baslik h2, .kart-baslik h3 {
  position: relative;
  padding-left: 11px;
}
/* .kart-baslik h3 eklendi: Takvim bolum basliklari h2'den h3'e indi ve
   bu satir olmadan alan cizgisi dort karttan SESSIZCE duserdi. Depoda
   .kart-baslik icinde h3 kullanan baska yer yok, yani mevcut hicbir
   ekran degismiyor. */
.ozet-baslik::before, .db-baslik h3::before, .rm-baslik::before,
.ul-baslik::before, .tur-bolum-baslik::before, .oz2-etiket::before,
.kart-baslik h2::before, .kart-baslik h3::before {
  content: '';
  position: absolute;
  left: 0; top: .15em; bottom: .15em;
  width: 3px;
  border-radius: 2px;
  background: var(--alan, var(--accent));
}

.ozet-baslik, .oz2-etiket, .eyebrow {
  font-family: var(--font-ui);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
  text-transform: none;
}

.ozet-baslik small, .oz2-meta, .ozet-alt, .oz2-govde {
  font-weight: 400;
  font-size: var(--t-meta);
  color: var(--ink-muted);
}
.ozet-baslik small { margin-left: 0.5ch; color: var(--ink-faint); }
.ozet-alt b, .oz2-govde b { color: var(--ink); font-weight: 500; }

/* --------------------------------------------------------------------------
   7. Sayı ve metrik
   -------------------------------------------------------------------------- */

.ozet-sayi, .oz2-metrik, .oz2-metrik2 {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--ink);
}

.oz2-metrik { font-size: var(--t-num); margin-top: var(--space-3); }
.oz2-metrik2 { font-size: 1.75rem; margin-top: var(--space-3); }
.ozet-sayi { font-size: 1.5rem; margin: var(--space-1) 0; }

.oz2-metrik small, .oz2-metrik2 small, .ozet-sayi small {
  font-family: var(--font-ui);
  font-size: var(--t-label);
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0;
  margin-left: 0.4ch;
}

.oz2-ust { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }

.oz2-buyuk, .oz2-alt {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  margin-top: var(--space-3);
}
.oz2-kucukler, .ozet-izgara, .an-izgara {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  margin-top: var(--space-3);
}

.oz2-kart[data-sekme], .ozet-kart[data-sekme] { cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.oz2-kart[data-sekme]:hover, .ozet-kart[data-sekme]:hover { border-color: var(--rule-strong); background: var(--surface-hover); }

.oz2-cizgi { width: 100%; height: 56px; margin-top: var(--space-3); }
.oz2-eksen, .cizgi-alt, .rail-legend {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-num);
  font-size: var(--t-meta);
  color: var(--ink-faint);
  margin-top: var(--space-1);
}

.oz2-liste { list-style: none; display: grid; gap: var(--space-2); font-size: var(--t-label); color: var(--ink-muted); margin-top: var(--space-3); }

/* Sayı yuvaları da kartın içine oyulmuş durur. */
.metric, .puan-satir {
  background: var(--surface-sunk);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 3px rgb(19 26 36 / 0.05);
  padding: var(--space-3) var(--space-4);
}
[data-theme="dark"] .metric, [data-theme="dark"] .puan-satir { box-shadow: inset 0 1px 4px rgb(0 0 0 / 0.35); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .metric,
  :root:not([data-theme="light"]) .puan-satir { box-shadow: inset 0 1px 4px rgb(0 0 0 / 0.35); }
}

/* --------------------------------------------------------------------------
   8. İlerleme rayı — imza öge
   -------------------------------------------------------------------------- */

.ilerleme, .oz2-bar, .sn-bar, .rail {
  height: 4px;
  border-radius: 2px;
  background: var(--surface-sunk);
  overflow: hidden;
  margin-top: var(--space-3);
}

.ilerleme span, .oz2-bar span, .sn-bar span, .rail__fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
  transition: width 400ms var(--ease);
}

/* Haftalık tempo çubukları */
.barlar { display: flex; gap: var(--space-2); align-items: flex-end; height: 120px; }
.bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: var(--space-1); }
.bar span { width: 100%; background: var(--accent); border-radius: 2px 2px 0 0; min-height: 3px; }
.bar small { font-family: var(--font-num); font-size: var(--t-meta); color: var(--ink-faint); }

.mini-barlar, .oz2-mini { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-top: var(--space-3); }
.mini-barlar span, .oz2-mini span { flex: 1; background: var(--surface-sunk); border-radius: 2px; min-height: 3px; }
.mini-barlar span { background: var(--accent); }
.oz2-mini span.aktif { background: var(--accent); }
.mini-cizgi { width: 100%; height: 44px; margin-top: var(--space-2); }
.mini-bos { height: 44px; }
.cizgi { width: 100%; height: 96px; }

/* --------------------------------------------------------------------------
   9. Form
   -------------------------------------------------------------------------- */

.form { display: grid; gap: var(--space-3); max-width: 26rem; }
.form label { display: grid; gap: var(--space-1); font-size: var(--t-label); color: var(--ink-muted); }

.yf { display: grid; gap: var(--space-3); align-items: end; margin-top: var(--space-3); }
.yf label { display: grid; gap: var(--space-1); min-width: 0; font-size: var(--t-label); color: var(--ink-muted); }
.yf label > span, .field > label {
  display: block;
  min-height: 1.4em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

input[type="text"], input[type="url"], input[type="number"], input[type="date"],
input[type="email"], input[type="password"], select, textarea,
.form input, .form select, .form textarea, .yf input, .yf select,
.uni-filtre input:not([type="checkbox"]), .uni-filtre select {
  width: 100%;
  height: var(--control-h);
  padding: 0 0.625rem;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

textarea, .form textarea { height: auto; min-height: 5rem; padding: 0.5rem 0.625rem; line-height: 1.55; }

input[type="number"], input[type="date"] {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

input::placeholder, textarea::placeholder { color: var(--ink-faint); font-family: var(--font-ui); }
input:hover, select:hover, textarea:hover { border-color: var(--ink-faint); }

input:focus-visible, select:focus-visible, textarea:focus-visible,
.form input:focus, .form select:focus, .form textarea:focus,
.yf input:focus, .yf select:focus,
.uni-filtre input:focus, .uni-filtre select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

select {
  appearance: none;
  padding-right: 2rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.05rem) 55%, calc(100% - 0.7rem) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.55; cursor: pointer; }
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1.4); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1.4); }
}

/* Sayi cevirici oklari yalniz uzerine gelince/odaklaninca cikip icerigi
   kaydiriyor, satirlar bu yuzden dagilmis gorunuyordu. Ok tuslari calismaya
   devam eder. */
.puan-alanlar input { width: 100%; min-width: 0; height: 32px; font-size: var(--t-label);
  font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.pa-girdi input::-webkit-outer-spin-button,
.pa-girdi input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pa-girdi input { -moz-appearance: textfield; appearance: textfield; }
.liste-oge select, .yf .kucuk, select.kucuk { height: 30px; font-size: var(--t-label); padding: 0 0.5rem; }

.kayit-notu { font-family: var(--font-num); font-size: var(--t-meta); color: var(--ink-faint); align-self: center; white-space: nowrap; }
.kayit-notu.degisti { color: var(--warn); }

/* --------------------------------------------------------------------------
   10. Buton — kart başına en fazla bir dolu buton
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: var(--control-h);
  padding: 0 0.875rem;
  font-size: var(--t-label);
  font-weight: 500;
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.btn:hover { background: var(--accent-hover); }
.btn:active { transform: translateY(1px); }

.btn.ikincil {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn.ikincil:hover { background: var(--surface-hover); border-color: var(--ink-faint); }

.btn.cizgili {
  background: transparent;
  color: var(--accent);
  border-color: var(--rule-strong);
}
.btn.cizgili:hover { background: var(--accent-wash); border-color: var(--accent); }

.btn.sessiz, .tema-btn {
  background: transparent;
  border-color: transparent;
  color: var(--ink-muted);
}
.btn.sessiz:hover, .tema-btn:hover { background: var(--surface-hover); color: var(--ink); }

.btn.tehlike { background: transparent; border-color: var(--rule-strong); color: var(--danger); }
.btn.tehlike:hover { background: var(--danger-wash); border-color: var(--danger); }

.btn.kucuk { height: 30px; padding: 0 0.625rem; font-size: var(--t-meta); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--accent); }
.btn.ikincil[disabled]:hover { background: var(--surface); }

.tema-serbest { position: fixed; top: 14px; right: 16px; z-index: 50; }

/* --------------------------------------------------------------------------
   11. Defter satırları — iç içe kart yerine ince çizgili satır
   -------------------------------------------------------------------------- */

.liste { list-style: none; display: flex; flex-direction: column; }

/* Ogrenci listesi ustu: ac/kapa dugmesi ile arama kutusu yan yana.
   Dar ekranda arama alta sarar, kutu satiri doldurur. */
.ogr-ust { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.ogr-ust input { flex: 1 1 160px; min-width: 0; }

.liste li, .liste-oge {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-body);
  color: var(--ink);
}
.liste li:last-child, .liste-oge:last-child { border-bottom: 0; }

.liste li small, .liste-oge .tarih {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-label);
  color: var(--ink-muted);
  margin-left: auto;
  white-space: nowrap;
}

.liste-oge .metin { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* DURUM KUTUSU SATIRI YUTUYORDU. Genel kural `select { width: 100% }`
   diyor — formlarda dogru, esnek bir SATIRDA degil: kutunun esneme
   tabani satirin tamami oluyor. `.metin` ise `flex: 1`, yani tabani
   SIFIR, ustelik `min-width: 0` ile sifira kadar kuculebiliyor. Yer
   kavgasini her zaman kutu kazaniyordu ve KILOMETRE TASLARI EKRANDA
   ADSIZ duruyordu: yalnizca ikon, tarih ve bir acilir kutu. Bolumun
   ne ise yaradigi anlasilamiyordu cunku ne oldugu yazmiyordu.
   Kutu kendi genisligi kadar yer alir; artan yer basligindir. */
.liste-oge select { width: auto; flex: 0 0 auto; max-width: 12rem; }
.liste-oge .kalan { font-family: var(--font-num); color: var(--warn); }
.liste-oge.bitti .metin, .liste li.bitti {
  color: var(--ink-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.tablo { width: 100%; border-collapse: collapse; font-size: var(--t-body); }
.tablo th {
  text-align: left;
  font-family: var(--font-ui);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-muted);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--rule-strong);
}
.tablo td {
  padding: 0.625rem var(--space-3);
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}
.tablo tbody tr { transition: background var(--dur) var(--ease); }
.tablo tbody tr:hover td, .ks-satir:hover td { background: var(--surface-hover); }
.ks-satir { cursor: pointer; }
.ks-riskli td { background: var(--danger-wash); }
.ks-risk { color: var(--danger); font-weight: 600; }
.ks-iyi { color: var(--ok); }
.ks-yatay, .ks-veri { color: var(--ink-faint); }

/* --------------------------------------------------------------------------
   12. Rozet ve durum
   -------------------------------------------------------------------------- */

.rozet, .oz2-rozet, .tur-rozet, .badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: 0;
  border: 0;
  border-radius: 999px;
  background: var(--surface-sunk);
  color: var(--ink-muted);
}
.rozet { margin-left: var(--space-2); }
.oz2-rozet { margin-left: var(--space-2); vertical-align: 0.35em; }

.rozet.r-bitti, .rozet.r-tamamlandi, .rozet.r-kabul, .oz2-rozet.artis, .badge--ok { background: var(--ok-wash); color: var(--ok); }
.oz2-rozet.dusus, .badge--danger { background: var(--danger-wash); color: var(--danger); }
.rozet.r-devam, .badge--warn { background: var(--warn-wash); color: var(--warn); }
.oz2-rozet.notr { background: var(--surface-sunk); color: var(--ink-muted); }
.rozet-link, .badge--accent { background: var(--accent-wash); color: var(--accent); }
.tur-rozet { background: var(--accent-wash); color: var(--accent); font-weight: 600; }

.turuncu, .kimlik-alt b { color: var(--accent); }

/* --------------------------------------------------------------------------
   13. Kimlik başlığı
   -------------------------------------------------------------------------- */

.kimlik {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.kimlik-govde { min-width: 0; }

.kimlik-monogram {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-card);
  background: var(--accent-wash);
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.kimlik-ad {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variation-settings: 'opsz' var(--opsz-title);
}
.kimlik-ad small {
  font-family: var(--font-ui);
  font-size: var(--t-label);
  font-weight: 400;
  color: var(--ink-muted);
  letter-spacing: 0;
  margin-left: 0.5ch;
}
.kimlik-alt { font-size: var(--t-label); color: var(--ink-muted); margin-top: 0.1rem; }
.kimlik-satir { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   14. Sekmeler
   --------------------------------------------------------------------------
   ÖBEK RENGİ SÜS DEĞİL: aynı alanı paylaşan sekmeler aynı rengi taşır
   (profil.js SEKMELER üçüncü alan) ve şerit sekiz ayrı düğme değil
   dört öbek olarak okunur.

   NOKTA KALKTI, AYRAÇ GELDİ. Pasif sekmelerde alan yalnız küçük bir
   renk noktasıyla belliydi: renk TEK KANALDI ve renk körü kullanıcı
   öbekleri hiç göremiyordu. Öbek sınırına konan ince dikey ayraç aynı
   bilgiyi YAPIYLA taşıyor; renk de aktif sekmenin dolgusunda duruyor.
   Ayraç elle işaretlenmiyor — profil.js komşu sekmelerin alanını
   karşılaştırıp data-obek-basi koyuyor, yani sekme sırası değişince
   ayraç da kendiliğinden doğru yere kayar. */

.sekmeler {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 4px;
  background: var(--surface-sunk);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.sekmeler::-webkit-scrollbar { display: none; }

.sekme {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 15px;
  font-size: var(--t-label);
  font-weight: 500;
  color: var(--ink-muted);
  background: none;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

/* Öbek sınırı. Ayraç sekmenin SOLUNDA ve dolgu alanının DIŞINDA:
   içeride olsaydı aktif hap onu yutardı ve öbek sınırı tam da
   bakılan yerde kaybolurdu. */
.sekme[data-obek-basi] { margin-left: 10px; }
.sekme[data-obek-basi]::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 17px;
  background: var(--rule-strong);
}

.sekme:hover:not(.aktif) { color: var(--ink); background: var(--surface); }

/* Aktif sekme DOLU ve alanının renginde. Gölge kartlarınkinden daha
   sığ: şeridin içinde duran küçük bir yüzey, ayrı bir kart değil. */
/* Sekme rozeti: yaklasan gorusme sayisi.
   Kullanici 22 Agustos 2026: "gorusme ayarladim, ogrenciye ulasmadi."
   Portalda bildirim yok; ogrenci portala girdiginde gormeli ve sekme
   oteki dokuzun arasinda sessizce duruyordu.
   RENK TEK KANAL DEGIL: rakamin kendisi ve title/aria metni de
   bildiriyor, rozet gorulmese bile bilgi kaybolmuyor. */
.sekme-rozet { display: inline-flex; align-items: center;
  justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  margin-left: 6px; border-radius: 999px; background: var(--accent);
  color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; vertical-align: middle; }
.sekme.aktif .sekme-rozet { background: #fff; color: var(--accent); }

.sekme.aktif {
  color: var(--alan-genel-yazi);
  background: var(--alan-genel);
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.16), 0 3px 8px rgb(0 0 0 / 0.10);
}
.sekme[data-alan="ic"].aktif    { background: var(--alan-ic);    color: var(--alan-ic-yazi); }
.sekme[data-alan="dis"].aktif   { background: var(--alan-dis);   color: var(--alan-dis-yazi); }
.sekme[data-alan="olcum"].aktif { background: var(--alan-olcum); color: var(--alan-olcum-yazi); }
.sekme[data-alan="referans"].aktif { background: var(--alan-referans); color: var(--alan-referans-yazi); }

.sekme:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .sekme { transition: none; } }

.sekme-icerik { padding-top: var(--space-5); }
.sekme-icerik:empty { display: none; }

/* Tür seçici (TYT / AYT / YDT) */
.tur-secim { display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
.tur-pill {
  height: 30px;
  padding: 0 var(--space-3);
  font-size: var(--t-label);
  font-weight: 500;
  color: var(--ink-muted);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tur-pill:hover:not(.aktif) { border-color: var(--ink-faint); color: var(--ink); }
.tur-pill.aktif { background: var(--accent-wash); border-color: var(--accent); color: var(--accent); font-weight: 600; }

.tur-bolum-baslik {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-1);
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 600;
  color: var(--ink);
}
.tur-bolum-baslik small { font-family: var(--font-ui); font-size: var(--t-meta); color: var(--ink-faint); font-weight: 400; }
.tur-bolum-baslik::after { content: ''; flex: 1; height: 1px; background: var(--rule); }

/* --------------------------------------------------------------------------
   15. İçgörü kutusu / uyarı / boş durum
   -------------------------------------------------------------------------- */

.ic-kart {
  background: var(--surface);
  border: var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-4) var(--space-5);
}

.ic-satir, .callout {
  border-inline-start: 3px solid var(--rule-strong);
  border-radius: 0;
  background: var(--surface-sunk);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-2);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
}
.ic-satir b { font-weight: 600; }
.ic-oncelik { border-inline-start-color: var(--accent); background: var(--accent-wash); }
.ic-iyi { border-inline-start-color: var(--ok); }
.ic-takip, .ic-not { border-inline-start-color: var(--rule-strong); }

/* Zayıf alanlar kartı bilgilendirir; sarı uyarı yüzeyi yalnız gerçek uyarıda. */
.an-uyari {
  background: var(--surface);
  border: var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
}
.uyari {
  background: var(--warn-wash);
  border: 1px solid transparent;
  border-inline-start: 3px solid var(--warn);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  font-size: var(--t-label);
  color: var(--ink);
}

/* Başvuru hunisi satırı */
.huni-satir {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-label);
  color: var(--ink-muted);
}
.huni-satir:last-child { border-bottom: 0; }
.huni-satir b { color: var(--ink); }
.huni-ray { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: var(--surface-sunk); overflow: hidden; }
.huni-ray span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.hata {
  background: var(--danger-wash);
  border: 1px solid transparent;
  border-inline-start: 3px solid var(--danger);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  font-size: var(--t-label);
  color: var(--ink);
}

/* Boş yuva: dolduğunda grafiğin oturacağı yer. Kartın üstünde DEĞİL, içinde
   oyulmuş gibi durur — içe gölge + kılcal çerçeve + çok soluk çapraz doku. */
.bos, .bos-davet, .empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--surface-sunk);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  font-size: var(--t-label);
  color: var(--ink-muted);
}
.bos { min-height: 0; }
.bos-davet, .empty { max-width: 52ch; }
.bos-davet .simge { display: none; }

@media (prefers-color-scheme: dark) {
}

/* --------------------------------------------------------------------------
   16. Grafik çerçevesi
   -------------------------------------------------------------------------- */

svg text { font-family: var(--font-ui); }
svg .sayi-etiket, svg text.mono { font-family: var(--font-num); }

.rm-kart {
  background: var(--surface);
  border: var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-4) var(--space-4) var(--space-3);
  margin-top: var(--space-4);
}
.rm-ust { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.rm-baslik {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--ink);
}
.rm-gosterge { display: flex; align-items: center; gap: var(--space-2); font-size: var(--t-meta); color: var(--ink-faint); }
.rm-skala { width: 70px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent-wash), var(--accent)); }
.rm-kaydir { overflow-x: auto; }
.rm-alt {
  font-size: var(--t-meta);
  color: var(--ink-faint);
  text-align: center;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
}

.sn-izgara { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-3); margin-top: var(--space-3); }
.sn-kartlar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); align-content: start; align-items: start; }

.puan-izgara { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-5); margin-top: var(--space-3); }
.puan-grup { font-size: var(--t-label); font-weight: 600; color: var(--ink); margin: var(--space-3) 0 var(--space-1); }
.puan-alanlar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); }
/* Etiket USTTE: yan yana dururken etiket genisligi kutunun baslangicini
   kaydiriyordu ("Turkce" 44px, "Edebiyat-Sosyal 1" 108px). Ustte olunca tum
   kutular ayni x'ten baslar. Birim sutunu SABIT genislikte — yoksa /40 ile
   /100 farki kutu genisligini degistirirdi. */
.puan-alanlar label { font-size: var(--t-meta); color: var(--ink-muted); display: block; }
.pa-ad { display: block; margin-bottom: 3px; }
.pa-girdi { display: grid; grid-template-columns: 1fr 2.2rem; align-items: center; gap: var(--space-1); }
.pa-girdi small { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.puan-sonuc { display: grid; gap: var(--space-2); align-content: start; }
.puan-satir { display: flex; justify-content: space-between; align-items: center; font-size: var(--t-label); color: var(--ink-muted); }
.puan-satir b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
.puan-satir.vurgu { background: var(--accent-wash); }
.puan-satir.vurgu b { color: var(--accent); }

/* --------------------------------------------------------------------------
   17. Pano — Analiz sekmesinin yoğun KPI ızgarası
   12 sütunluk ray; kutular 3/6/12 sütun kaplar, dar ekranda tek sütuna iner.
   -------------------------------------------------------------------------- */

/* Durum karti: dort ayri dar kart yerine tek kartta izgara. */
.db-ozet-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--space-3) var(--space-4); }


/* Tazelik: veri eskiyse pano dogru ama guncel degildir, bunu soyler. */
.db-tazelik { font-family: var(--font-num); font-size: var(--t-meta);
  color: var(--ink-muted); background: var(--surface-sunk);
  border-radius: 999px; padding: 1px 8px; margin-right: var(--space-2); }
.db-tazelik.eski { color: var(--warn); background: var(--warn-wash); }

.pn-lejant { display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-2); font-size: var(--t-meta); color: var(--ink-muted); }
.pn-lejant-oge { display: inline-flex; align-items: center; gap: 5px; }
.pn-lejant-oge i { width: 9px; height: 9px; border-radius: 50%; flex: none; }

.pn-izgara {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-3);
}

.pn-kutu {
  grid-column: span 3;
  min-width: 0;
  background: var(--surface);
  border: var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-3) var(--space-4) var(--space-4);
}
.pn-s3  { grid-column: span 3; }
.pn-s4  { grid-column: span 4; }
.pn-s6  { grid-column: span 6; }
.pn-s12 { grid-column: span 12; }

.pn-etiket {
  font-size: var(--t-label);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.pn-etiket small { font-family: var(--font-ui); font-size: var(--t-meta); font-weight: 400; color: var(--ink-faint); margin-left: 0.5ch; }

.pn-govde { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.pn-sol { min-width: 0; }
.pn-sag { flex: 0 0 auto; }

.pn-sayi {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--ink);
}
.pn-sayi small { font-family: var(--font-ui); font-size: var(--t-label); font-weight: 500; color: var(--ink-muted); letter-spacing: 0; }
.pn-bolu { font-size: 1.125rem; color: var(--ink-faint); }

.pn-alt { font-size: var(--t-meta); color: var(--ink-muted); margin-top: var(--space-2); line-height: 1.45; }
.pn-alt b { color: var(--ink); font-weight: 600; }

.pn-delta {
  display: inline-flex;
  align-items: center;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-family: var(--font-num);
  font-size: var(--t-meta);
  font-weight: 500;
  background: var(--surface-sunk);
  color: var(--ink-muted);
}
.pn-delta.artis { background: var(--ok-wash); color: var(--ok); }
.pn-delta.dusus { background: var(--danger-wash); color: var(--danger); }

.pn-halka { width: 64px; height: 64px; }
.pn-kivilcim { width: 110px; height: 30px; }

/* Tıklanabilir kutu ilgili sekmeye götürür. */
.pn-kutu[data-sekme] { cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.pn-kutu[data-sekme]:hover { border-color: var(--accent); background: var(--surface-hover); }

/* Pano ızgarasındaki içgörü satırları kutunun içinde yaşar. */
.pn-kutu .ic-satir:first-of-type { margin-top: 0; }

/* Ders sıralaması: ad + oranlı ray + değer. Satırlar kutu yüksekliğine yayılır. */
.pn-kutu { display: flex; flex-direction: column; }
/* ---- OLCU SATIRI (bilesen) ----
   Figma'da "component + variant properties". Uc sutunlu otomatik duzen:
   ad KENDINE GORE (hug, ust sinirli), ray KALANI DOLDURUR (fill), deger
   kendine gore. Bu yuzden uzun ders adi rayi ezmez, kisa ad da bosluk
   birakmaz. Olculer --olcu-* bilesen tokenlarindan; onceden 6px iki ayri
   kurala elle yazilmisti. */
.olcu-liste { display: flex; flex-direction: column; justify-content: center; flex: 1; }
.olcu {
  display: grid;
  grid-template-columns: var(--olcu-ad-en) 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--olcu-satir-py) 0;
  border-bottom: 1px solid var(--rule);
}
.olcu:last-child { border-bottom: 0; }
.olcu-ad { font-size: var(--t-label); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* RAY: arkada OLCEK CIZGILERI var. Onceden duz bir oluktu ve dolgunun
   %50'ye mi %70'e mi geldigi gozle kestirilemiyordu; artik ceyreklerde
   ince isaretler duruyor. Cizgiler dolgunun ALTINDA kaliyor, olcuyu
   bozmuyorlar. */
.olcu-ray { height: var(--olcu-ray-h); border-radius: calc(var(--olcu-ray-h) / 2);
  background:
    repeating-linear-gradient(90deg,
      transparent 0 calc(25% - 1px), var(--rule) calc(25% - 1px) 25%),
    var(--surface-sunk);
  box-shadow: inset 0 1px 2px rgb(19 26 36 / 0.07);
  overflow: hidden; position: relative; }
/* Dolgu: dikey gecis + ucta parlaklik. Derinlik GEOMETRIDEN degil
   ISIKTAN; uzunluk gercek oranda kaliyor. */
.olcu-dolgu { display: block; height: 100%; border-radius: inherit;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 72%, white) 0%,
      var(--accent) 55%,
      color-mix(in srgb, var(--accent) 88%, black) 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .28),
    0 1px 2px -1px color-mix(in srgb, var(--accent) 55%, transparent);
  transition: width var(--olcu-gecis) var(--ease); }
/* Dolgunun ucunda ince bir isik: cubugun nerede bittigi keskinlesiyor. */
.olcu-dolgu::after { content: ""; position: absolute; top: 0; bottom: 0;
  right: 0; width: 2px; border-radius: inherit;
  background: rgb(255 255 255 / .45); }

.olcu-deger { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-label); font-weight: 600; color: var(--ink);
  display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.olcu-net { font-size: var(--t-lead); line-height: 1; letter-spacing: -.02em; }
.olcu-deger small { color: var(--ink-faint); font-weight: 400; }

/* DEGISIM ROZETI: bir onceki denemeye gore. Yalniz iki olcum varsa
   cikar; sifir yazmak "ayni kaldi" demek olurdu, oysa karsilastiracak
   olcum olmayabilir. */
.olcu-degisim { font-size: var(--t-meta); font-weight: 600; line-height: 1;
  padding: 2px 6px; border-radius: 999px; }
.olcu-degisim.artis { color: var(--durum-iyi);
  background: color-mix(in srgb, var(--durum-iyi) 13%, transparent); }
.olcu-degisim.dusus { color: var(--durum-yakin); background: var(--durum-yakin-zemin); }
.olcu-degisim.ayni { color: var(--ink-faint); background: var(--surface-sunk); }

/* Satir uzerine gelince adi one cikar: uzun listede goz kaymasin. */
.olcu { transition: background var(--dur) var(--ease); border-radius: var(--radius); }
.olcu:hover { background: var(--surface-hover); }
@media (prefers-reduced-motion: reduce) {
  .olcu, .olcu-dolgu { transition: none; }
}

/* Varyant: kompakt — dar kutuda ayni bilesen, kucuk olculerle. */
.olcu.kompakt { grid-template-columns: var(--olcu-ad-en-kucuk) 1fr auto;
  padding: calc(var(--olcu-satir-py) * 0.75) 0; }
.olcu.kompakt .olcu-ray { height: var(--olcu-ray-h-kucuk);
  border-radius: calc(var(--olcu-ray-h-kucuk) / 2); }
.olcu.kompakt .olcu-ad, .olcu.kompakt .olcu-deger { font-size: var(--t-meta); }
/* Kompakt varyant dar bir kutuda duruyor: buyuk sayi ve ic isik orada
   gurultu yapiyor, ikisi de kapali. Olcek cizgileri de fazla siklasir. */
.olcu.kompakt .olcu-net { font-size: var(--t-label); }
.olcu.kompakt .olcu-ray { background: var(--surface-sunk); }
.olcu.kompakt .olcu-dolgu::after { display: none; }
.olcu.kompakt:hover { background: none; }

/* Varyant: olculmedi — SIFIR DEGIL. Ray bos kalir (dolgu hic cizilmez),
   satir soluk, deger yerinde "—" ve neden. Sifir dolgu cizilseydi
   "hic dogru yapamadi" diye okunurdu. */
.olcu.olculmedi .olcu-ad { color: var(--ink-muted); }
.olcu.olculmedi .olcu-ray { background: transparent;
  border: 1px dashed var(--rule-strong); box-shadow: none; }
.olcu-yok { color: var(--ink-faint); margin-right: 3px; }
.olcu.olculmedi .olcu-deger { font-weight: 500; }

[data-theme="dark"] .olcu-ray { box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.35); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .olcu-ray { box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.35); }
}
[data-theme="dark"] .olcu.olculmedi .olcu-ray { box-shadow: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .olcu.olculmedi .olcu-ray { box-shadow: none; }
}

@media (max-width: 68rem) {
  .pn-kutu, .pn-s3, .pn-s4 { grid-column: span 6; }
  .pn-s6, .pn-s12 { grid-column: span 12; }
}
@media (max-width: 40rem) {
  .pn-kutu, .pn-s3, .pn-s4, .pn-s6 { grid-column: span 12; }
}

/* --------------------------------------------------------------------------
   18. Dashboard sekmesi — solda ray · ortada grafikler · sağda ray
   Tüm bölümlerin verisi tek ekranda; dar ekranda raylar üste/alta iner.
   -------------------------------------------------------------------------- */

/* ---- KPI KARTI (bilesen) ----
   Power BI'in "card visual"i: tek sayi, etiketi, alt satiri. Panoda IKI
   AYRI SINIF AILESI ayni isi yapiyordu (.db-ray-kutu ve .db-ozet-oge);
   yapi ayni, fark yalniz cerceve ve puntoydu. Birlestirildi.

   Varyantlar: varsayilan = kartli (sol serit) · .duz (panel ici)
   Davranis:   [data-sekme] -> tiklanir

   Tiklanma davranisi da iki ailede AYRI yaziliydi: biri [role="button"]
   seciciyle, oteki [data-sekme] ile, hover'lari farkli. Odak kuralini
   yalniz biri kendi ustune aliyordu; otekini yukaridaki genel
   :focus-visible kurali kurtariyordu. Simdi ikisi de ayni kurali
   aliyor ve bu tesadufe kalmiyor. */
.kpi {
  display: grid;
  gap: var(--space-1);
  align-content: start;
  background: var(--surface);
  border: var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--kpi-py) var(--kpi-px);
}
.kpi-etiket { font-size: var(--t-meta); font-weight: 600; color: var(--ink-muted); }
.kpi-deger {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--kpi-sayi-boy);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.kpi-alt { font-size: var(--t-meta); color: var(--ink-faint); }

/* Varyant: tiklanir. GORUNUM sinifla, DAVRANIS data-sekme ile — ikisi
   ayri. Stil dogrudan [data-sekme]'ye bagli olsaydi bilesen ornegi
   uydurma bir sekme adi yazmak zorunda kalirdi (ve sekme denetimi bunu
   kirik baglanti diye bildirirdi). */
.kpi.tiklanir { cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.kpi.tiklanir:hover { border-color: var(--accent); background: var(--surface-hover); }
.kpi.tiklanir:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .kpi.tiklanir { transition: none; } }

.db-kutu {
  min-width: 0;
  background: var(--surface);
  border: var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
}
.db-genis { grid-column: 1 / -1; }

.db-baslik {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.db-baslik h3 { font-size: var(--t-h3); }
.db-not { font-family: var(--font-ui); font-size: var(--t-meta); color: var(--ink-faint); }

.db-halkalar { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.db-halka-oge { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; text-align: center; }
.db-halka-ad { font-size: var(--t-label); font-weight: 600; color: var(--ink); margin-top: var(--space-1); }

.db-takvim { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: var(--space-2) var(--space-4); }
.db-takvim-satir {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--rule);
}
.db-takvim-gun {
  flex: 0 0 auto;
  min-width: 3.25rem;
  padding: var(--space-1) var(--space-2);
  background: var(--accent-wash);
  border-radius: var(--radius);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--accent);
  text-align: center;
}
.db-takvim-gun small { display: block; font-family: var(--font-ui); font-size: 0.625rem; font-weight: 400; color: var(--ink-faint); }
.db-takvim-ad { font-size: var(--t-label); color: var(--ink); min-width: 0; }

/* --- ACILIYET: RENK TEK KANAL DEGIL ---
   11 gun ile 125 gun ayni gorunuyordu. Power BI'in kosullu
   bicimlendirmesi bunu kurallarla cozer; erisilebilirlik kilavuzu ise
   rengin TEK kanal olmasini yasakliyor ("Use text or icons to
   supplement or replace the color"). Bu yuzden her satirda hem renk hem
   METIN ETIKETI var; renk korlugunde ya da tek renkli ciktida bilgi
   kaybolmuyor.
   Renkler ham deger degil, anlamsal takma adlar (Spectrum alias tier). */
.db-takvim-satir.acil .db-takvim-gun {
  background: var(--durum-acil-zemin); color: var(--durum-acil); }
.db-takvim-satir.yakin .db-takvim-gun {
  background: var(--durum-yakin-zemin); color: var(--durum-yakin); }
.db-takvim-satir.uzak .db-takvim-gun {
  background: var(--durum-uzak-zemin); color: var(--durum-uzak); }
/* Acil olan satir ayrica sol kenardan isaretli: goz once oraya gidiyor. */
.db-takvim-satir.acil { box-shadow: inset 2px 0 0 var(--durum-acil); padding-left: 8px; }

.db-takvim-etiket { display: inline-block; margin-left: 6px; padding: 0 6px;
  border-radius: 999px; font-size: var(--t-meta); font-weight: 600;
  background: var(--durum-uzak-zemin); color: var(--durum-uzak);
  vertical-align: 1px; }
.db-takvim-satir.acil .db-takvim-etiket {
  background: var(--durum-acil-zemin); color: var(--durum-acil); }
.db-takvim-satir.yakin .db-takvim-etiket {
  background: var(--durum-yakin-zemin); color: var(--durum-yakin); }
.db-takvim-not { grid-column: 1 / -1; font-size: var(--t-meta);
  color: var(--ink-muted); line-height: 1.5; margin: var(--space-3) 0 0;
  max-width: 78ch; }
.db-takvim-not b { color: var(--ink); }

/* --- OLCUMU OLMAYAN GOSTERGE ---
   Sifir dolu bir halka "hedefin %0'i tamamlandi" diye okunuyordu; oysa
   hedef HIC girilmemisti. Yerine olcumun yoklugunu soyleyen bir yuva ve
   ne girilecegini yazan bir davet var. */
.db-halka-yok { width: 64px; height: 64px; border-radius: 50%;
  border: 2px dashed var(--rule-strong); display: grid; place-items: center;
  color: var(--ink-faint); font-size: 1.25rem; font-family: var(--font-num); }
.db-halka-oge.olcumsuz .db-halka-ad { color: var(--ink-muted); }
.db-halka-davet { font-size: var(--t-meta); color: var(--ink-muted);
  max-width: 14rem; line-height: 1.45; }



/* --------------------------------------------------------------------------
   19. İkonlar — emoji kullanılmaz, currentColor beslemeli SVG
   -------------------------------------------------------------------------- */

.ikon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}
.ikon-sm { font-size: 0.875rem; }
.ikon-lg { font-size: 1.25rem; }
.ikonlu { display: inline-flex; align-items: center; gap: 0.45em; }

/* --------------------------------------------------------------------------
   20. Giriş ekranı ve yardımcılar
   -------------------------------------------------------------------------- */

.giris-kutu { max-width: 25rem; margin: 9vh auto 0; padding: var(--space-6); }
.giris-kutu h1 { margin-bottom: var(--space-2); }
.giris-kutu .alt { font-size: var(--t-label); color: var(--ink-muted); margin-bottom: var(--space-5); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 48rem) {
  .sn-izgara, .sn-kartlar, .puan-izgara { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .govde { padding-inline: var(--space-3); }
  .kart, .ozet-kart, .an-kart, .oz2-kart, .ic-kart { padding: var(--space-4); }
  .yf { grid-template-columns: 1fr !important; }
  .sekmeler { gap: var(--space-3); }
}

/* --------------------------------------------------------------------------
   21. Grafik renkleri
   Grafikler renklerini artik JS'te var(--token) olarak yaziyor; satir ici
   SVG belgenin icinde oldugu icin degiskenler cozulur ve tema degisimi
   kendiliginden calisir. Eskiden burada duran hex->hex esleme tablosu
   (her yeni renk icin iki ayri yerde elle guncelleme) kaldirildi.
   -------------------------------------------------------------------------- */

/* ---- Yonetim hucresi: KART DEGIL, sessiz eylem seridi ----
   Kart paketinde durdugu icin kartin icine ikinci bir kart ciziyordu —
   kutu icinde kutu, hem de projenin kendisinden daha agir. Tablolarda ayni
   sinif <td> olarak kullaniliyor; orada da hucreye kart stili biniyordu. */
.yonetim-hucre:empty { display: none; }

div.yonetim-hucre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: auto;            /* kartlar farkli boyda olsa da serit altta hizalanir */
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
}
div.yonetim-hucre select { width: auto; height: 30px; font-size: var(--t-label); }
/* Duzenle SOL UCTA, silme sag ucta. Hucre sagda demirledigi icin
   dugmeyi otoyla sola itiyoruz. Duzeltme ile yok etme ayni yerde
   yan yana durmasin: karti duzeltmek isteyen elin sil dugmesine
   degmesi icin bir sebep kalmiyor. */
div.yonetim-hucre .pjDuzenle { margin-right: auto; }

td.yonetim-hucre { white-space: nowrap; }
td.yonetim-hucre select { width: auto; }

/* Kart icerigi dikey akar; eylem seridi margin-top:auto ile dibe oturur. */
.kartlar > .kart { display: flex; flex-direction: column; }
/* Izgaradaki kart basligi sayfa basligi degildir: bir kademe kucuk. */
.kartlar > .kart > h2 { font-size: var(--t-h3); }

/* Silme sessiz durur, uzerine gelince ne oldugunu soyler. */
.btn.ikincil:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-wash); }

/* ---- Kocun yonetim kartlari ----
   Koc cogu zaman veri OKUMAYA gelir, ara sira ekler. Uc form birden acik
   dururken sayfa bir form duvarina donusuyor, asil icerik (kilometre taslari,
   takvim) altta eziliyordu. Formlar artik katli durur; kart acilista listeyi
   gosterir, ekleme bir adim geride bekler. */
.yonetim-kart .kart-baslik { display: block; margin-bottom: var(--space-3); }
/* h3 de listede: yonetim kartlarinin basligi <h2>'den <h3>'e indi
   (sayfanin <h2>'si artik .pr-ust'te) ve kural yalniz h2'yi
   tutuyordu — punto sessizce merdivenden cikardi. */
.yonetim-kart .kart-baslik h2,
.yonetim-kart .kart-baslik h3 { font-size: var(--t-h3); }
.yonetim-kart .kart-baslik small { display: block; margin-top: 2px; padding-left: 11px; }

.yk-katla { margin-bottom: var(--space-2); }
.yk-katla > summary {
  display: inline-flex; align-items: center; gap: var(--space-2);
  list-style: none; cursor: pointer; user-select: none;
}
.yk-katla > summary::-webkit-details-marker { display: none; }
/* Acilir-kapanir oldugu ok ile belli olur; metin dilden bagimsiz kalir. */
.yk-katla > summary::after {
  content: ''; width: 6px; height: 6px; margin-left: 2px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--dur) var(--ease);
}
.yk-katla[open] > summary::after { transform: rotate(-135deg) translate(-1px, -1px); }
.yk-katla > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Eylem satiri: dugme alanlarla ayni izgarada dururken satirin sag ucunu
   dagitiyor ve etiketlerle farkli hizaya dusuyordu. Kendi satirina alinir. */
.yf > button[type="submit"], .yf-eylem {
  grid-column: 1 / -1;
  margin-top: var(--space-1);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
}
.yf > button[type="submit"] { justify-self: end; }
.yf-eylem { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); }

/* Liste formdan ayri bir sey: aralarinda nefes olmali. */
.yk-liste { margin-top: var(--space-4); }

@media (prefers-reduced-motion: reduce) { .yk-katla > summary::after { transition: none; } }

/* ---- v6: Universiteler sekmesi ---- */
.alt-serit { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 14px;
  border-bottom: 1px solid var(--rule); padding-bottom: 8px; }
.alt-sekme { font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--surface); color: var(--ink-muted); cursor: pointer; }
.alt-sekme:hover { background: var(--surface-hover); }
.alt-sekme.aktif { background: var(--alan, var(--accent));
  border-color: var(--alan, var(--accent)); color: var(--alan-yazi, var(--on-accent)); }
.alt-sekme:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Filtre cubugu: ALANLAR ustte tek izgarada, secenek ve eylem altta.
   Onceden onay kutusu ve "Filtreleri temizle" alanlarla ayni izgaradaydi —
   biri etiketsiz, digeri alan degil eylem oldugu icin satir dagiliyordu. */
.uni-filtre { margin-bottom: var(--space-4); }
.uni-filtre-alanlar {
  display: grid;
  gap: var(--space-3) var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  align-items: start;
}
.uni-filtre label { display: grid; gap: 4px; font-size: var(--t-meta);
  font-weight: 500; color: var(--ink-muted); }
.uni-filtre-alt {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
}
.uni-filtre label.satir-ici { display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--t-label); color: var(--ink); }
.uni-ipucu { font-size: var(--t-meta); color: var(--ink-faint); flex: 1 1 16rem; }
.uni-filtre-alt .btn { margin-left: auto; }
.uni-filtre-alt .btn ~ .btn { margin-left: 0; }

/* Mono bu sistemde SAYI icindir; tum cumleye uygulanmisti. */
.uni-sayac { font-size: var(--t-label); color: var(--ink-muted); margin: 0 0 var(--space-4); }
.uni-sayac b { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-lead); color: var(--ink); }

.uni-kartlar { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.uni-kart { position: relative; border: 1px solid var(--rule); border-radius: 14px; padding: 14px;
  background: var(--surface); cursor: pointer; transition: border-color .15s, transform .15s; }
.uni-kart:hover { border-color: var(--accent); transform: translateY(-2px); }
.uni-kart:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.uni-sec { position: absolute; top: 10px; right: 10px; }
.uni-kart-bas { display: flex; justify-content: space-between; align-items: start;
  gap: 8px; padding-right: 26px; }
.uni-kart-bas h3 { font-family: var(--font-display); font-size: 17px; margin: 0; line-height: 1.25; }
.uni-kart-yer { font-size: var(--t-meta); color: var(--ink-muted); margin: 2px 0 8px; }
.uni-kart-ozet { font-size: 13px; color: var(--ink-muted); margin: 0 0 10px; }
.uni-kart-veri { display: flex; gap: 14px; margin: 0; flex-wrap: wrap; }
.uni-kart-veri dt { font-family: var(--font-num); font-size: 10.5px; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: .04em; margin: 0; }
.uni-kart-veri dd { font-family: var(--font-num); font-size: 14px; font-weight: 600;
  color: var(--ink); margin: 0; }

/* v6: okul detay paneli */
.uni-panel { position: fixed; inset: 0; background: var(--scrim);
  display: flex; justify-content: center; align-items: flex-start;
  padding: 24px 16px; overflow-y: auto; z-index: 60; }
.uni-panel-ic { position: relative; background: var(--surface); border-radius: 16px;
  border: 1px solid var(--rule); max-width: 760px; width: 100%; padding: 22px; }
.uni-panel-kapat { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
  border-radius: 999px; border: 1px solid var(--rule); background: var(--surface);
  font-size: 18px; line-height: 1; cursor: pointer; color: var(--ink-muted); }
.uni-panel-kapat:hover { background: var(--surface-hover); }
.uni-detay-bas { display: flex; justify-content: space-between; align-items: start;
  gap: 12px; flex-wrap: wrap; padding-right: 36px; }
.uni-detay-bas h3 { font-family: var(--font-display); font-size: var(--t-h2); margin: 0; }
.uni-detay-ozet { font-size: 14px; color: var(--ink-muted); line-height: 1.55; }
/* Olculer GERCEK izgaradir. Onceden flex-wrap idi: her satir kendi icinde
   paketleniyor, sutunlar satirlar arasinda hizalanmiyordu. Panelin dagi ik
   gorunmesinin birinci sebebi buydu. */
.uni-olculer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-3) var(--space-4);
  margin: var(--space-3) 0 var(--space-4);
}
/* Etiket: ulke rehberindeki kunye ile ayni dil. BUYUK HARFE cevrilmez —
   Turkce'de CSS donusumu riskli ve gereksiz bagiriyordu. */
.uni-olculer dt { font-family: var(--font-ui); font-size: var(--t-meta);
  font-weight: 500; color: var(--ink-muted); margin: 0 0 2px; }
.uni-olculer dd { font-family: var(--font-ui); font-size: var(--t-body);
  font-weight: 500; color: var(--ink); margin: 0; }
/* Mono YALNIZ sayida. */
.uni-olculer dd.sayi { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-weight: 600; letter-spacing: -0.01em; }

/* Esik matrisi: GPA/SAT/ACT satir, min/medyan/rekabetci sutun. */
.uni-esik { width: 100%; border-collapse: collapse; margin: var(--space-3) 0 var(--space-4); }
.uni-esik th, .uni-esik td { padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--rule); text-align: right; }
.uni-esik thead th { font-size: var(--t-meta); font-weight: 500; color: var(--ink-muted); }
.uni-esik tbody th { text-align: left; font-size: var(--t-label); font-weight: 600; color: var(--ink); }
.uni-esik td.sayi { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-body); font-weight: 600; color: var(--ink); }
.uni-esik tbody tr:last-child th, .uni-esik tbody tr:last-child td { border-bottom: 0; }

.uni-kaynak { font-size: var(--t-meta); color: var(--ink-faint); margin: 0 0 var(--space-4); }
.uni-detay-eylem { margin: 0 0 var(--space-4); }
.uni-olculer dd .btn { margin-left: var(--space-2); vertical-align: baseline; }
/* Eksik alan: tire tek basina cikmaz, yanina nereden girilecegi yazilir. */
.uni-olculer dd.eksik { display: flex; align-items: center; gap: var(--space-2);
  color: var(--ink-faint); font-weight: 400; }
.uni-olculer dd.eksik .faint { font-size: var(--t-meta); }
/* Sinavin hangi alana ait oldugu etiketle belli olur: ayni satirda SAT ile
   Goethe yan yana gelebiliyor. */
.uni-alan-etiket { font-size: 10px; font-weight: 500; color: var(--ink-faint);
  background: var(--surface-sunk); border-radius: 999px; padding: 0 6px;
  margin-left: 4px; vertical-align: 1px; }
.uni-blok { border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 12px; }
.uni-blok h4 { font-family: var(--font-ui); font-size: 13px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-muted); margin: 0 0 8px; }
.uni-blok ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.6; }
.uni-not { font-size: 13px; color: var(--ink-muted); margin: 6px 0 0; }
.uni-tarih { list-style: none; padding: 0; }
.uni-tarih li { font-size: 13px; padding: 4px 0; border-bottom: 1px dashed var(--rule); }
.uni-sinif { margin-bottom: 10px; }

@media (max-width: 640px) {
  .uni-filtre { grid-template-columns: 1fr; }
  .uni-kartlar { grid-template-columns: 1fr; }
  .uni-panel { padding: 12px 8px; }
  .uni-panel-ic { padding: 16px; }
}

/* v6: Bana Uygun */
.uni-butce { border: 1px solid var(--rule); border-radius: 14px; padding: 18px; background: var(--surface); }
.uni-butce h3 { font-family: var(--font-display); font-size: 18px; margin: 0 0 6px; }
.form.satir { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin-top: 10px; }
.uni-profil { border: 1px solid var(--rule); border-radius: 12px; padding: 12px; background: var(--surface-sunk); }
.uni-grup { margin-top: 18px; }
.uni-grup-bas { font-family: var(--font-ui); font-size: 14px; display: flex; align-items: center;
  gap: 8px; margin: 0 0 10px; padding-left: 10px; border-left: 3px solid var(--rule); }
.uni-grup-adet { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-meta); font-weight: 600; color: var(--ink-muted);
  background: var(--surface-sunk); border-radius: 999px; padding: 1px 8px; }
.uni-grup-bas.g-yuksek { border-left-color: var(--ok); color: var(--ok); }
.uni-grup-bas.g-dengeli { border-left-color: var(--accent); color: var(--accent); }
.uni-grup-bas.g-zorlayici { border-left-color: var(--warn); color: var(--warn); }
.uni-grup-bas.g-veriyok { border-left-color: var(--rule-strong); color: var(--ink-faint); }
.uni-gerekce { margin: 8px 0 0; padding-left: 16px; font-size: 12.5px;
  color: var(--ink-muted); line-height: 1.55; }
.uni-uyari { font-size: 12.5px; color: var(--warn); margin: 8px 0 0; }

/* v6: karsilastirma */
.uni-tablo-kaydir { overflow-x: auto; }
.uni-karsilastir th[scope="row"] { text-align: left; font-family: var(--font-ui);
  font-size: 12.5px; color: var(--ink-muted); white-space: nowrap; }
.uni-karsilastir td { font-size: 13px; vertical-align: top; }

/* ---- v7: Yurt Disi Sinavlari ---- */
.ul-not { font-size: 13px; color: var(--ink-muted); margin: 0 0 12px; }
.ul-baslik { font-family: var(--font-display); font-size: 20px; margin: 0 0 12px; }
.ul-bolum { border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 14px; }
.ul-bolum h4 { font-family: var(--font-ui); font-size: 13px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-muted); margin: 0 0 8px; }
.ul-bolum h5 { font-family: var(--font-ui); font-size: 12.5px; color: var(--ink);
  margin: 12px 0 6px; }
.ul-ozet { font-size: 13.5px; color: var(--ink-muted); line-height: 1.6; margin: 0 0 8px; }
/* Kunye: etiket + deger. Etiket ONCEDEN mono 11.5px idi — mono bu sistemde
   SAYI icindir; etiketlere uygulaninca ozenle yazilmis Turkce basliklar da
   ham JSON anahtari gibi gorunuyordu. Etiket sutunu ayrica dar oldugu icin
   uzun anahtarlar degerin uzerine tasiyordu. */
.ul-kunye { display: grid; gap: 0; margin: 0 0 var(--space-4); }
.ul-kunye > div {
  display: grid;
  grid-template-columns: minmax(11rem, 34%) 1fr;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--rule);
}
.ul-kunye > div:last-child { border-bottom: 0; }
.ul-kunye dt {
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  font-weight: 500;
  color: var(--ink-muted);
  margin: 0;
  overflow-wrap: anywhere;   /* uzun anahtar tasmaz, kirilir */
}
.ul-kunye dd { font-size: var(--t-label); color: var(--ink); margin: 0; min-width: 0;
  overflow-wrap: anywhere; }
/* Ic ice kunye: kendi kutusu olmaz, yalniz iceri cekilir. */
.ul-kunye dd > .ul-kunye { margin: var(--space-1) 0 0; }

@media (max-width: 640px) {
  .ul-kunye > div { grid-template-columns: 1fr; gap: 2px; }
}
.ul-liste { margin: 0 0 8px; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.ul-alt-blok { border: 1px solid var(--rule); border-radius: var(--radius-card);
  padding: 10px 12px; margin-bottom: 8px; background: var(--surface-sunk); }
.ul-tablo-kaydir { overflow-x: auto; margin-bottom: 10px; }
.ul-rehber { margin-top: 4px; }

.ul-secici { border: 1px solid var(--rule); border-radius: var(--radius-card);
  padding: 12px 14px; margin-bottom: 14px; background: var(--surface-sunk); }
.ul-secici h4 { font-family: var(--font-ui); font-size: 13px; margin: 0 0 8px; }
.ul-secici-kutular { display: flex; flex-wrap: wrap; gap: 12px; }
.ul-secim { display: flex; align-items: center; gap: 6px; font-size: 13px; }

.ul-bos { border: 1px dashed var(--rule-strong); border-radius: var(--radius-card);
  padding: 20px; text-align: center; }
.ul-bos h3 { font-family: var(--font-display); font-size: 17px; margin: 0 0 6px; }

.ul-katalog { margin-top: 14px; border-top: 1px solid var(--rule); padding-top: 10px; }
.ul-katalog summary { font-family: var(--font-ui); font-size: 12.5px; cursor: pointer;
  color: var(--ink-muted); }
.ul-katalog-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 6px 0; border-bottom: 1px dashed var(--rule); font-size: 13px; }
.ul-esik { font-family: var(--font-num); font-size: 12px; color: var(--ink); }

.ul-uyum { list-style: none; padding: 0; margin: 0 0 10px; }
.ul-uyum li { display: flex; align-items: start; gap: 8px; padding: 5px 0;
  border-bottom: 1px dashed var(--rule); font-size: 13px; }

@media (max-width: 640px) {
  .ul-kunye > div { grid-template-columns: 1fr; gap: 2px; }
  .ul-secici-kutular { flex-direction: column; gap: 8px; }
}


/* ---- Profil basligi: kimlik + sekmeler tek birim ----
   Kural: CHROME (gezinti/baslik) = yalniz kenarlik, golge YOK.
   VERI karti = golgeli. Boylece bilgi tasiyan yuzey one cikar. */
.profil-bas {
  background: var(--surface);
  border: var(--card-border);
  border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-4) 0;
  margin-bottom: var(--space-4);
}

.kimlik-ad {
  font-weight: 600;
}

.kimlik-ad small {
  color: var(--ink-muted);
}

/* Sekme seridi baslik biriminin alt kenarina oturur */
.profil-bas .sekmeler {
  margin: var(--space-3) 0 0;
  border-bottom: 0;
}

.sekmeler-sar {
  position: relative;
  margin: var(--space-4) 0 0;
}
/* Tasma maskesi seridin kendi zeminiyle ayni olmali, kartinkiyle degil. */
.sekmeler-sar::after {
  content: ''; position: absolute; inset-block: 0; right: 0;
  /* Yarıçap ŞERİDİNKİYLE aynı: şerit tam hap iken 999px idi, 14px
     olunca maske köşede şeridin dışına taşıyordu. */
  width: 3rem; border-radius: 0 14px 14px 0;
  background: linear-gradient(to left, var(--surface-sunk) 35%, transparent);
  opacity: 0; transition: opacity var(--dur) var(--ease); pointer-events: none;
}
.sekmeler-sar.tasiyor::after { opacity: 1; }

/* ---- Yazdırma ----
   Kağıda giden şey BAŞVURU PROFİLİ'dir, portal değil: site başlığı, sekme
   şeridi, düğmeler ve düzenleme formları basılmaz.

   Tamlık kutusu BASILIR. Eksik alanları çıktıdan gizlemek, portalın
   "eksik veri gizlenmez" kuralına aykırı olurdu; kâğıda bakan koç ya da
   veli neyin girilmediğini de görmeli.

   Renkler burada yeniden tanımlanır: koyu tema açıkken yazdırılırsa
   sayfa koyu zeminli çıkar, mürekkep yakar ve okunmaz. Baskı her zaman
   açık zeminlidir. */
@media print {
  :root, :root[data-theme="dark"] {
    color-scheme: light;
    --paper: #FFFFFF; --surface: #FFFFFF; --surface-sunk: #F7F7F5;
    --surface-hover: #FFFFFF;
    --ink: #14110F; --ink-muted: #4A4442; --ink-faint: #6B6462;
    --rule: #DDDAD6; --rule-strong: #BFBAB4;
    --shadow-card: none;
  }
  .ust, .sekmeler-sar, #profilYazdir, #profilFormAlani,
  #geriBtn, .yonetim-kart { display: none !important; }
  body { background: #FFFFFF; }
  .govde { max-width: none; padding: 0; }
  .pr-ust { margin-bottom: var(--space-3); }

  .li-bas-kart, .li-bolum, .pr-tamlik { box-shadow: none; }
  /* Tek bir GİRİŞ sayfa sonunda ikiye bölünmesin. Bölümün kendisi
     bölünebilir: uzun etkinlik listesini tek sayfaya zorlamak, önceki
     sayfanın yarısını boş bırakır. */
  .li-oge, .li-bas-kart, .pr-tamlik { break-inside: avoid; }
  .li-bolum-bas { break-after: avoid; }

  /* Bağlantı adresini metne ekleme: CV bağlantısı satırı iki katına çıkar. */
  a[href]::after { content: none; }
}

/* ---- Özet: odak halkası, boş hafta, eskimiş kayıt ----
   İmleç işaretini yukarıdaki .oz2-kart[data-sekme] kuralı zaten veriyor.
   Kilometre taşı kartından data-sekme KALDIRILDI — gideceği bir sekme
   yok, yol haritası aynı sayfada; böylece imleci de yok. Aynı görünüp
   farklı davranan kart, tıklayıp hiçbir şey olmaması demekti.
   .tiklanir burada yalnız ODAK HALKASINI taşır; kartlar artık tabindex'li
   ve klavyeyle geziliyor. */
.oz2-kart.tiklanir { cursor: pointer; }
.oz2-kart.tiklanir:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Kayıt GİRİLMEMİŞ hafta: dolu değil, çizgili taban. Sıfır soru çözülen
   hafta ince bir çubukla görünür — boş, sıfır DEĞİLDİR. */
.oz2-mini span.yok {
  align-self: stretch; background: none;
  border-bottom: 2px dotted var(--rule-strong); border-radius: 0;
}
.oz2-mini-not { font-size: var(--t-meta); color: var(--ink-faint); margin-top: 6px; }

/* Son kayıt bu haftaya ait değilse yaşı söylenir, gizlenmez. */
.oz2-eski {
  font-size: var(--t-meta); color: var(--warn);
  margin-top: 4px;
}
/* Kilometre taşı sayacı: Özet'te ayrı bir karttaydı, yol haritası zaten
   aynı maddeleri çiziyordu. Başlığın yanında sessiz bir sayaç yeter. */
.rm-sayac {
  font-family: var(--font-ui); font-size: var(--t-meta); font-weight: 500;
  color: var(--ink-muted); background: var(--surface-sunk);
  border: 1px solid var(--rule); border-radius: 999px;
  padding: 2px 9px; margin-left: var(--space-2); white-space: nowrap;
}

/* TAKVIM SEKMESI KAPSAYICISI.
   Dort <section class="kart genis"> dogrudan .sekme-icerik icine
   basiliyordu. .sekme-icerik izgara DEGIL, yalniz padding-top tasiyor;
   dolayisiyla .kart.genis'in grid-column kurali oluydu, kartlar
   arasinda sifir bosluk vardi ve iki 1px cerceve yan yana cift cizgi
   uretiyordu. Ekranin en gorunur kusuru buydu.

   Ikinci ve daha onemli isi: ".tk-" oneki IKI ekran tarafindan
   paylasiliyor. Takvim sekmesi .tk-serit / .tk-sira ailesini, Yillik
   Takvim (program-saf.js) .tk-izgara / .tk-ay ailesini kullaniyor.
   Asagidaki punto kurallari .tk-sayfa ile YALNIZ birinciyi hedefliyor. */
.tk-sayfa { display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4); align-items: start; }

/* Bolum basligi sayfa basligindan bir kademe asagi. Ekranda bes tane
   --t-h2 duruyordu ve hicbiri otekinden agir degildi, yani hiyerarsi
   yoktu. Simdi tek --t-h2 var: sayfa basligi. */
.tk-sayfa .kart-baslik h3 { line-height: 1.25; }

/* .uni-not odunc alinmisti: adi baska ekranin, puntosu ham 13px,
   max-width'i yok. Genis kartta satir 150 karakteri asiyordu. */
.tk-sayfa .tk-not, .tk-serit .tk-not {
  font-size: var(--t-label); line-height: 1.55; color: var(--ink-muted);
  max-width: 68ch; margin: var(--space-3) 0 0; }
.tk-sayfa .tk-not b, .tk-serit .tk-not b { color: var(--ink); font-weight: 600; }

/* Kirpma bildirimi yatay kaydirma kutusunun icinde ama sola yapisik:
   saga kaydirinca kaybolmamali. */
.tk-kirpma { position: sticky; left: 0; }

/* .faint yerine: ayni renk, merdivendeki punto. .faint --t-meta
   tasiyordu ve sekmeden besinci bir basamak uretiyordu. */
.tk-sayfa .tk-alt { font-size: var(--t-label); color: var(--ink-muted); }

/* Merdiven dort duzeye iniyor: --t-h2 (sayfa basligi, bir kez),
   --t-h3 (dort bolum basligi), --t-body (kayit adi), --t-label
   (aciklama, eksen, rozet, sayac). --t-meta sekmeden CIKIYOR. */
.tk-sayfa .tk-sec,
.tk-sayfa .tk-sinif,
.tk-sayfa .tk-sira-alt,
.tk-sayfa .tk-sira-durum,
.tk-sayfa .tk-yok,
.tk-sayfa .kart-baslik small { font-size: var(--t-label); }
.tk-sayfa .pr-ust p { font-size: var(--t-label); }

/* Kademe 3: geri cekilmis. Golge YUKSELTI demek; bu kart yukselmiyor.
   Pano'daki .db-davet recetesi. */
.tk-sayfa .kart.tk-ek { background: var(--surface-sunk);
  border: 1px solid var(--rule); box-shadow: none; }
.tk-sayfa .kart.tk-ek::before { display: none; }

/* --------------------------------------------------------------------------
   Takvim sekmesi — tek şerit, iki pencere
   Konumlandırma yüzde ile: aynı çizim hem beş yıllık "Yolculuk"ta hem
   tek yıllık "Bu yıl"da çalışır. İki ayrı çizim yazmak, birinde
   düzeltilen kusurun ötekinde kalması demekti.
   -------------------------------------------------------------------------- */
.tk-pencere { display: inline-flex; background: var(--surface-sunk);
  border: 1px solid var(--rule); border-radius: 999px; padding: 3px; }
.tk-sec { font: inherit; font-size: var(--t-meta); font-weight: 600;
  color: var(--ink-muted); background: none; border: 0; cursor: pointer;
  padding: 5px 14px; border-radius: 999px; white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
/* Secili pencere: golge ham rgb(0 0 0 / .07) idi ve temaya bagli
   degildi. Koyu zeminde %7 siyah hicbir sey yapmiyor, geriye kalan tek
   ayrim yuzey farkiydi (1.13:1) ve dugme pratikte gorunmuyordu. Uc
   kanal: yuzey, halka, metin. Dorduncusu aria-pressed. */
.tk-sec.secili { color: var(--ink); background: var(--eksen-secim);
  box-shadow: inset 0 0 0 1px var(--rule-strong), 0 1px 2px rgb(0 0 0 / .07); }
.tk-sec:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Dar ekranda şerit yatay kayar; sayfa gövdesi kaymaz. */
/* Serit min-width: 40rem ile her dar pencerede yatay kayiyor ve icinde
   odaklanabilir oge olmadigi icin klavye kullanicisi sag tarafi hic
   goremiyordu (WCAG 2.1.1). role="region" + tabindex="0" ile kutu
   odaklanabilir. */
.tk-kaydir { overflow-x: auto; }
.tk-kaydir:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Serit kendi DUZ zeminini tasiyor. Sebep geometrik: noktanin oyma
   halkasi --surface, kart yuzeyi ise artik gradyan (.isikli). Tabla
   olmadan her noktanin etrafinda ince bir hale kalirdi. */
.tk-serit { min-width: 40rem; background: var(--surface);
  border-radius: var(--radius); }

/* Sınıf bandı: türetilmiş olduğu kartın altında yazılı. */
.tk-sinif-bandi { position: relative; height: 1.5rem;
  margin-left: var(--tk-etiket-en); margin-bottom: 4px; }
.tk-sinif { position: absolute; top: 0; height: 1.5rem; display: grid;
  place-items: center; font-size: var(--t-meta); font-weight: 600;
  color: var(--ink-muted); background: var(--surface-sunk);
  border-left: 1px solid var(--rule); overflow: hidden; white-space: nowrap; }
.tk-sinif.simdiki { color: var(--alan-yazi, var(--on-accent));
  background: var(--alan, var(--accent)); border-left-color: transparent; }

/* Eksen etiketi grafigin OKUMA ANAHTARI, susu degil: --ink-faint
   acikta 3.19:1, koyuda 3.06:1 ile esigin altindaydi. */
.tk-eksen { position: relative; height: 1.1rem; margin-left: var(--tk-etiket-en);
  color: var(--ink-muted); }
.tk-eksen span { position: absolute; transform: translateX(-50%); }

/* Govdeye bir AYAK verildi: "bugun" cizgisi bottom:1.2rem ile altinci
   seridi tam ortasindan kesiyordu ve etiketi o yarim satirdaki
   noktalarin ustune biniyordu. Iki bagli sihirli sayi, ustelik 0.05rem
   ayrismis. Ikisi de artik tek tokenden turuyor. */
.tk-govde { position: relative; padding-bottom: var(--tk-ayak); }

/* OLCEK CIZGILERI: eksen etiketleriyle ayni diziden (takvim-saf.js).
   Sabit %8.333 raster yalniz on iki aylik pencerede dogruydu. */
.tk-tikler { position: absolute; z-index: 0; pointer-events: none;
  inset: 0 0 var(--tk-ayak) var(--tk-etiket-en); }
.tk-tikler span { position: absolute; top: 0; bottom: 0; width: 0;
  border-left: 1px solid var(--eksen-cizgi); }

/* BUGUN eksenin ORIJINI, bir aciliyet degil. Kirmizidan murekkebe
   gecti: ayni portalda kirmizi hem "acil" (--durum-acil) hem "bugun"
   derse ikisi de zayiflar. Renk TEK KANAL degil; 2px genislik, etiketli
   hap ve ekrandaki en yuksek kontrast birlikte tasiyor. */
.tk-bugun { position: absolute; top: 0; bottom: var(--tk-ayak); width: 0;
  border-left: 2px solid var(--eksen-simdi); z-index: 2; pointer-events: none;
  left: calc(var(--tk-etiket-en) + (100% - var(--tk-etiket-en)) * var(--o, 0)); }
.tk-bugun b { position: absolute; bottom: calc(var(--tk-ayak) * -0.9); left: 0;
  transform: translateX(-50%); white-space: nowrap;
  font-size: var(--t-label); font-weight: 600;
  color: var(--surface); background: var(--eksen-simdi);
  border-radius: 999px; padding: 1px 8px; }

/* Satirlar tik katmaninin USTUNDE. */
.tk-satir { position: relative; z-index: 1; display: flex; align-items: center;
  gap: 0; border-top: 1px solid var(--rule); }
.tk-satir:first-child { border-top: 0; }
.tk-ad { width: var(--tk-etiket-en); flex: none; padding: 9px 12px 9px 0;
  font-size: var(--t-body); color: var(--ink-muted); cursor: pointer; }
.tk-ad:hover { color: var(--accent); }
.tk-ad:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Raster kalkti: cizgileri artik .tk-tikler ciziyor ve konumlari eksen
   etiketleriyle ayni diziden geliyor. */
.tk-hat { position: relative; flex: 1; height: 2.4rem; background: none; }
/* "kayit yok" bos ile sifir ayrimini tasiyor, silik olamaz. */
.tk-yok { position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  color: var(--ink-muted); }

/* DURUM SEKLE DE TASINIYOR. Onceden yalniz renk vardi: --ok (yesil) ile
   --accent (teal) Power BI'in ayrismayan cift listesinde "green and
   blue" olarak geciyor ve nokta hicbir metin tasimiyordu. Uc kanal:
   sekil, renk, lejanttaki kelime. */
.tk-nokta, .tk-aralik { position: absolute; top: 50%; transform: translateY(-50%); }
.tk-nokta { width: var(--tk-nokta-c); height: var(--tk-nokta-c);
  margin-left: calc(var(--tk-nokta-c) / -2); border-radius: 50%;
  border: 2px solid var(--surface); }

/* HER ISARETIN KENDI RENGINDEN BIR HALESI VAR.
   Sekil zaten uc durumu ayiriyordu ama 11px'lik bir isaret 2.4rem'lik
   satirda okunacak buyuklukte degildi: uc sekil de "kucuk koyu benek"
   olarak gorunuyordu, yani kanal KAGIT UZERINDE vardi EKRANDA yoktu.
   Isaret 16px'e cikti ve cevresine kendi renginin sulu tonundan bir
   halka eklendi — isgal ettigi alan ~11px'ten ~24px'e cikiyor.
   Hale RENK EKLEMIYOR, VAR OLAN RENGI BUYUTUYOR: uc sekil, uc renk,
   lejanttaki uc kelime aynen duruyor.

   HIYERARSI KORUNUYOR. Uculu esit sesle bagirmiyor: tamamlanmis is en
   agir (dolu daire + yesil hale), devam eden orta (dolu baklava + teal
   hale), planli en hafif (bos halka + notr hale). Planli bir kayit bir
   basari degil; onu tamamlanmis kadar parlak cizmek yargi uretirdi. */

/* bitti: dolu daire. Kapali siluet, kapanmis is. */
.tk-nokta.d-bitti { background: var(--durum-iyi);
  box-shadow: 0 0 0 4px var(--durum-iyi-zemin); }

/* devam: baklava. Kenar 11.5px cunku 45 derece donmus karenin kosegeni
   16.3px eder ve 16px daireyle AYNI gorsel agirlikta kalir. transform
   TAMAMEN yeniden yaziliyor, yoksa ustteki translateY donmeyi siler.
   HALE ICIN AYRI SAYI: golge yayilimi KENARA eklenir, kosegen onu
   1.414 ile carpar. Dairede 4px hale 24px'lik bir ayak izi verirken
   baklavada ayni 4px 27.6px olurdu. 1px yuzey + 3px hale: kenar 19.5px,
   kosegen 27.6/1.414... yani 24.7px — daireyle ayni buyuklukte. */
.tk-nokta.d-devam { width: 11.5px; height: 11.5px; margin-left: -5.75px;
  border-radius: 1px; background: var(--durum-devam);
  box-shadow: 0 0 0 1px var(--surface), 0 0 0 3px var(--durum-devam-zemin);
  transform: translateY(-50%) rotate(45deg); }

/* plan: ici bos halka. Dolgu yok, cember var. Cember 2px'ten 3px'e
   cikti: 16px'lik dairede 2px bir tel gibi kaliyordu. */
.tk-nokta.d-plan { background: var(--surface);
  box-shadow: inset 0 0 0 3px var(--durum-uzak), 0 0 0 4px var(--surface-sunk); }

/* Aralik cubuklarinda ikinci kanal DOKU: nokta sekli cubukta islemez.
   Yukseklik 8px'ten 11px'e: noktalar buyurken cubuk incecik kalirsa
   suren bir is bitmis bir isten daha az onemli gorunur. */
.tk-aralik { height: 11px; border-radius: 999px; }
.tk-aralik.d-bitti { background: var(--durum-iyi); }
.tk-aralik.d-devam { background: repeating-linear-gradient(135deg,
  var(--durum-devam) 0 3px,
  color-mix(in srgb, var(--durum-devam) 45%, transparent) 3px 6px); }
.tk-aralik.d-plan { background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--durum-uzak); }

/* Lejant GERCEK siniflarla cizilir, kopya markup degil: tasarim sistemi
   sayfasinin ilkesi. Boylece cizim ile gosterge bagimsiz eskiyemez. */
.tk-lejant { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  list-style: none; margin: var(--space-3) 0 0; padding: 0;
  font-size: var(--t-label); color: var(--ink-muted); }
/* Bosluk 6px degil 10px: isaretin halesi artik 4px disariya tasiyor
   ve 6px'te kelimeye degiyordu. */
.tk-lejant li { display: inline-flex; align-items: center; gap: 10px; }
.tk-lejant .tk-nokta { position: static; flex: none; margin-left: 0;
  transform: none; }
.tk-lejant .tk-nokta.d-devam { transform: rotate(45deg); }

/* Sıradakiler listesi */
.tk-sira { list-style: none; margin: 0; padding: 0; }
.tk-sira li { display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) 0; border-top: 1px solid var(--rule); cursor: pointer; }
.tk-sira li:first-child { border-top: 0; }
.tk-sira li:hover { background: var(--surface-hover); }
.tk-sira li:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
/* width 3.25rem sabitti ve siradakiler() ust tarih siniri koymuyor:
   9. siniftaki bir ogrencinin 12. sinif teslimi 1000 gunu asar ve dort
   hane 52px'lik sutuna sigmaz. */
.tk-sira-gun { flex: none; width: auto; min-width: 4rem; text-align: right;
  font-family: var(--font-num); font-variant-numeric: tabular-nums; }
/* Portalin TEK sayi basamagi. --t-lead burada portalda baska hicbir
   yerde olmayan besinci bir basamak uretiyordu. font-weight ACIK
   yazili: <b> varsayilani 700, ama IBM Plex Mono icin yalniz 400/500/600
   yuklu; tarayici faux-bold sentezliyordu ve bunu hicbir denetim
   yakalamaz. */
.tk-sira-gun b { font-size: var(--kpi-sayi-boy-ray); font-weight: 600;
  line-height: 1.1; letter-spacing: -0.04em; color: var(--ink); }
.tk-sira-gun small { display: block; font-family: var(--font-ui);
  font-size: var(--t-label); color: var(--ink-muted); }
.tk-sira-govde { flex: 1; min-width: 0; }
.tk-sira-ad { display: block; font-size: var(--t-body); font-weight: 600; color: var(--ink); }
.tk-sira-alt { display: block; font-size: var(--t-meta); color: var(--ink-muted); }
.tk-sira-durum { flex: none; font-size: var(--t-meta); font-weight: 600;
  border-radius: 999px; padding: 2px 10px; }
.tk-sira-durum.d-bitti { color: var(--ok); background: var(--ok-wash); }
.tk-sira-durum.d-devam { color: var(--accent); background: var(--accent-wash); }
.tk-sira-durum.d-plan { color: var(--ink-muted); background: var(--surface-sunk); }

/* Yoğun haftalar: portalın başka hiçbir ekranı bunu söylemiyor. */
/* border-left box-sizing altinda kartin BUTUN icerigini 3px saga itiyor
   ve --radius-card kavisinde sol koselerde kama uretiyordu. Pano ayni
   isi .db-takvim-satir.acil'de inset golgeyle cozmus; yeni dil icat
   edilmiyor. */
.tk-cakisma { border-left: 0;
  box-shadow: var(--shadow-card), inset 3px 0 0 var(--durum-yakin); }
.tk-cak-liste { margin: 0; padding-left: 18px; font-size: var(--t-label);
  line-height: 1.7; color: var(--ink); }

.tk-tarihsiz { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.tk-tarihsiz li { display: flex; justify-content: space-between; gap: var(--space-3);
  padding: 8px 0; border-top: 1px solid var(--rule); cursor: pointer; }
.tk-tarihsiz li:hover { background: var(--surface-hover); }
.tk-tarihsiz li:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

@media (max-width: 560px) {
  .tk-serit { --tk-etiket: 7rem; }
  .tk-ad { font-size: var(--t-meta); }
}

/* [hidden] güvencesi: Akademik alt sekmelerinde iki panel de DOM'da kalır
   (koç formları onları arıyor), görünürlük hidden ile değişir. Sonradan
   eklenen bir display kuralı hidden'ı sessizce ezmesin. */
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Günlük kayıt ızgarası ve üç görünüm
   Kayıt gün+ders bazında tutulur; haftalık ve toplam TÜRETİLİR. Boş hücre
   "kayıt yok", 0 "çalıştım soru çözmedim" — ikisi ayrı gösterilir.
   -------------------------------------------------------------------------- */
.gk-ust { display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-2); }
.gk-aralik { font-size: var(--t-meta); color: var(--ink-muted); margin: 2px 0 0; }
.gk-gezinti { display: flex; gap: 6px; flex-wrap: wrap; }

/* KURAL LISTESI. Onceden uc ayri kural (sinav ayrimi, toplu sutunu, bos
   hucre) tek bir 13px paragrafa siksmisti; sekiz satirlik gri bir duvardi
   ve hicbiri okunmuyordu. Her kural kendi satirinda, kalin bir bas
   cumleyle basliyor: goz once o cumleleri tariyor, ayrintiyi yalniz
   gereken kural icin okuyor. */
.gk-kural { list-style: none; margin: var(--space-3) 0 0; padding: 0;
  display: grid; gap: var(--space-2); font-size: var(--t-label);
  line-height: 1.55; color: var(--ink-muted); max-width: 78ch; }
.gk-kural li { padding-left: var(--space-3); position: relative; }
.gk-kural li::before { content: ""; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--rule-strong); }
.gk-kural b { color: var(--ink); font-weight: 600; }
.gk-kural .btn { margin-left: var(--space-2); vertical-align: baseline; }

/* Satir ici style="" yerine sinif: bicimlendirme stil.css'te durur. */
.gk-uyari { margin: var(--space-3) 0 0; }

.gk-kaydir { overflow-x: auto; margin-top: var(--space-3); }
.gk-izgara { width: 100%; min-width: 34rem; border-collapse: collapse;
  font-size: var(--t-label); }
.gk-izgara th, .gk-izgara td { border-bottom: 1px solid var(--rule);
  padding: 4px 5px; text-align: center; }
.gk-izgara thead th { font-size: var(--t-meta); color: var(--ink-muted);
  font-weight: 600; padding-bottom: 6px; }
.gk-gun { display: block; }
.gk-tarih { display: block; font-family: var(--font-num);
  font-size: 10px; color: var(--ink-faint); }
/* DERS SUTUNU YAPISKAN. Izgara 10 sutuna cikinca dar ekranda yatay
   kayiyor; Toplu sutununa ulasmak icin saga kaydirilinca ders adi
   ekrandan cikiyor ve hangi satira sayi yazildigi gorunmuyordu. */
.gk-ders-bas, .gk-ders { text-align: left; width: 9.5rem; font-weight: 600;
  color: var(--ink); position: sticky; left: 0; z-index: 1;
  background: var(--surface); box-shadow: 1px 0 0 var(--rule); }
.gk-toplam-bas { width: 4rem; }

/* Izgara sinav ekseninde ayrilinca 11 satirdan 21'e cikti. Gun basliklari
   ekrandan kayiyor ve AYT satirlarini doldururken hangi sutunun hangi gun
   oldugu okunamiyordu: baslik satiri da YAPISKAN. */
.gk-izgara thead th { position: sticky; top: 0; z-index: 2;
  background: var(--surface); }
/* Kose hucresi iki yonde birden yapiskan: ustteki z-index'i gecmeli. */
.gk-izgara thead .gk-ders-bas { z-index: 3; }

/* Obek satiri artik ALAN AYRIMI ve bu tablonun asil gezinme ekseni:
   ogrenci once "TYT mi AYT mi" diye bakiyor. Silik gri bir etiket bu isi
   goremiyordu. Satir dikeyde yapiskan DEGIL — dort obek birden yapissa
   tablonun ustu surekli dolu olurdu. */
.gk-grup td { text-align: left; font-size: var(--t-label); font-weight: 700;
  color: var(--ink); letter-spacing: .02em;
  background: var(--surface-sunk); padding: 9px 10px;
  border-bottom: 1px solid var(--rule);
  border-left: 3px solid var(--accent); }
/* Ilk obek disindaki her oturum ustunde nefes payi: bloklar birbirine
   yapismasin. */
.gk-grup + tr td, .gk-grup + tr th { padding-top: 7px; }
/* Obek satiri butun tabloyu kapladigi icin yatay kaydirmada basligi
   ekrandan cikiyordu. Etiket yapiskan; soru sayisi ONUN YANINDA duruyor,
   saga yaslanmiyor — yaslansaydi kaydirinca o da gorunmez olurdu. */
.gk-grup-ad { position: sticky; left: 10px; display: inline-flex;
  align-items: baseline; gap: var(--space-2); }
.gk-grup-soru { font-weight: 500; font-family: var(--font-num);
  color: var(--ink-muted); font-size: var(--t-meta); }
.gk-hucre { width: 100%; min-width: 2.6rem; padding: 4px 2px; text-align: center;
  font: inherit; font-family: var(--font-num);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius); }
.gk-hucre:focus { outline: 2px solid var(--focus); outline-offset: 1px;
  border-color: var(--accent); }
/* Gelecek günler girilebilir kalır (plan yapılabilir) ama soluk durur. */
.gk-gelecek { opacity: .55; }
.gk-satir-toplam { font-family: var(--font-num); font-weight: 600; color: var(--ink); }
.gk-izgara tfoot th, .gk-izgara tfoot td { border-top: 2px solid var(--rule-strong);
  border-bottom: 0; padding-top: 7px; font-family: var(--font-num); font-weight: 600; }
/* "Günlük toplam" etiketi de yapiskan: ders sutunu duruyorken bu satirin
   basligi kayip olsaydi alttaki sayilarin ne oldugu okunmazdi. */
.gk-izgara tfoot th { text-align: left; font-family: var(--font-ui);
  position: sticky; left: 0; z-index: 1; background: var(--surface);
  box-shadow: 1px 0 0 var(--rule); }
.gk-eylem { display: flex; align-items: center; justify-content: flex-end;
  gap: var(--space-3); margin-top: var(--space-3); }

/* Günlük görünüm: 30 sütun */
.gs-cubuklar { display: flex; align-items: flex-end; gap: 2px; height: 5rem;
  margin-top: var(--space-3); }
.gs-cubuk { flex: 1; background: var(--accent); border-radius: 2px 2px 0 0;
  min-height: 3px; }
.gs-cubuk.bugun { background: var(--vurgu, var(--accent)); }
.gs-cubuk.yok { align-self: stretch; background: none;
  border-bottom: 2px dotted var(--rule-strong); border-radius: 0; }
.gs-eksen { display: flex; justify-content: space-between; margin-top: 4px;
  font-size: var(--t-meta); color: var(--ink-faint); }

/* Toplam görünüm */
.tp-baslik { font-family: var(--font-ui); font-size: var(--t-label);
  font-weight: 600; letter-spacing: .06em; color: var(--ink-muted);
  margin: var(--space-4) 0 var(--space-2); }
.tp-liste { display: grid; gap: 6px; }
.tp-satir { display: grid; grid-template-columns: 7rem 1fr auto;
  align-items: center; gap: var(--space-3); font-size: var(--t-label); }
.tp-satir.simdiki .tp-ad { color: var(--accent); font-weight: 700; }
.tp-ad { color: var(--ink); font-weight: 600; }
.tp-ray { height: 10px; background: var(--surface-sunk); border-radius: 999px;
  overflow: hidden; }
.tp-ray > span { display: block; height: 100%; background: var(--alan, var(--accent));
  border-radius: 999px; }
.tp-sayi { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  color: var(--ink); min-width: 4.5rem; text-align: right; }


/* Haftalık liste: tablo değil kart yığını. Ders kırılımı düz metin
   olarak "Fizik 502 · Yabancı Dil 452 · …" diye akıyordu; hangi sayının
   hangi derse ait olduğu ancak dikkatle okununca çıkıyordu. Kutucuk
   ad ile sayıyı görsel olarak bağlar. */
.hk-liste { display: grid; gap: var(--space-3); }
.hk-hafta { padding: var(--space-3) var(--space-4);
  background: var(--surface-sunk); border: 1px solid var(--rule);
  border-radius: var(--radius-card); }
.hk-bas { display: flex; align-items: baseline; flex-wrap: wrap;
  gap: var(--space-3); }
.hk-tarih { font-weight: 600; font-size: var(--t-body); color: var(--ink);
  min-width: 4.5rem; }
.hk-toplam { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-lead); font-weight: 600; color: var(--ink); }
.hk-toplam small { font-family: var(--font-ui); font-size: var(--t-meta);
  font-weight: 400; color: var(--ink-faint); margin-left: 4px; }
.hk-gun { font-size: var(--t-meta); color: var(--ink-muted); }
.hk-eylem { margin-left: auto; display: flex; gap: 6px; }
.hk-sil:hover { color: var(--danger); border-color: var(--danger); }

.hk-cipler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); }
.hk-cip { display: inline-flex; align-items: stretch; overflow: hidden;
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--surface); font-size: var(--t-meta); }
.hk-cip-ad { padding: 3px 9px; color: var(--ink); }
.hk-cip-sayi { padding: 3px 9px; font-family: var(--font-num);
  font-variant-numeric: tabular-nums; font-weight: 600;
  color: var(--alan-yazi, var(--on-accent)); background: var(--alan, var(--accent)); }
.hk-yok { font-size: var(--t-meta); color: var(--ink-faint);
  margin: var(--space-2) 0 0; }

/* --------------------------------------------------------------------------
   Proje kartları
   Kartlar boş duruyordu çünkü sql/025'in alanları (rol, kurum, süre,
   sınıf) bu ekranda hiç gösterilmiyordu. Önce veri göründü; renk sonra.

   RENK TÜRE BAĞLI ve anlam taşır: aynı türdeki projeler aynı rengi
   paylaşır, kartlar altı ayrı kutu değil türlere göre okunur. Süsleme
   değil ayırt etme.
   -------------------------------------------------------------------------- */
.pj-izgara { align-items: stretch; }
.pj-kart {
  --pj: var(--ink-muted);
  --pj-wash: var(--surface-sunk);
  display: flex; flex-direction: column;
  border-left: 3px solid var(--pj);
}
/* TUR RENGI: UC HUE, durum renkleri YOK.
   Onceden bes hue vardi ve ucu DURUM rengiydi: --ok (yesil), --warn
   (turuncu), --danger (kirmizi). Bu yalniz cok renkli degil, YANLIS
   anlam tasiyordu — yesil kart "iyi", kirmizi kart "hatali" gibi
   okunuyordu; oysa Araştırma ile iGEM arasinda iyi-kotu iliskisi yok.
   Durum rengi DURUM icindir (rozetlerde oyle kullaniliyor).
   Ayrica yesil-kirmizi renk korlugunde ayirt edilemeyen bir cift.

   Yerine veri serisi paleti: teal + turuncu + macenta, uc hue
   (CLAUDE.md kategorik seri tavani). Alti tur ucten fazla oldugu icin
   renk TEK BASINA turu ayirt edemez ve etmemeli — tur adi zaten her
   kartta yazili chip olarak duruyor. Renk gruplar, ad soyler. */
.pj-kart[data-tur="robotik"],
.pj-kart[data-tur="igem"]      { --pj: var(--veri-gerceklesen); --pj-wash: var(--accent-wash); }
.pj-kart[data-tur="erasmus"],
.pj-kart[data-tur="sosyal"]    { --pj: var(--veri-hedef); --pj-wash: var(--veri-hedef-zemin); }
.pj-kart[data-tur="arastirma"] { --pj: var(--veri-ikincil); --pj-wash: var(--veri-ikincil-zemin); }
/* 'diger' varsayılanda kalır — uydurma renk verilmez. */

/* ONE CIKAN: halka DEGIL. Dort kart da one cikan isaretlendiginde
   dort kalin renkli halka olusuyordu ve hicbiri one cikmiyordu.
   Ustelik "öne çıkan" chip'i zaten kartta yazili; halka onu ikinci
   kez soyluyordu. Yukselti tek kanal: golge biraz daha derin. */
.pj-kart.one-cikan { border-left-width: 5px; box-shadow: var(--shadow-card-hover); }

.pj-bas { display: flex; gap: var(--space-3); align-items: flex-start;
  margin-bottom: var(--space-3); }
.pj-isaret { display: grid; place-items: center; flex: none;
  width: 2.75rem; height: 2.75rem; border-radius: var(--radius);
  font-family: var(--font-num); font-size: var(--t-label); font-weight: 700;
  color: var(--pj); background: var(--pj-wash); }
.pj-baslik { min-width: 0; }
.pj-baslik h2 { font-size: var(--t-h3); margin: 0 0 5px; }
.pj-baslik h2::before { content: none; }   /* kart-baslik çubuğu burada yok */
.pj-etiketler { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.pj-tur { font-size: var(--t-meta); font-weight: 600; color: var(--pj);
  background: var(--pj-wash); border-radius: 999px; padding: 2px 9px; }
.pj-one { font-size: 10px; font-weight: 700; letter-spacing: .04em;
  color: var(--on-accent); background: var(--pj);
  border-radius: 999px; padding: 2px 8px; }

.pj-rol { font-size: var(--t-label); font-weight: 600; color: var(--ink);
  margin: 0 0 var(--space-2); }

/* Ölçüler künye biçiminde: etiket solda, değer sağda. */
.pj-olcu { display: grid; gap: 4px; margin: var(--space-3) 0 0;
  font-size: var(--t-meta); }
.pj-olcu > div { display: grid; grid-template-columns: 3.2rem 1fr;
  gap: var(--space-2); align-items: baseline; }
.pj-olcu dt { color: var(--ink-faint); }
.pj-olcu dd { margin: 0; color: var(--ink); }
.pj-siniflar { display: flex; flex-wrap: wrap; gap: 4px; }
/* Punto merdiveninde 10px diye bir basamak YOK; --t-meta en kucuk
   basamak ve chip onunla da okunuyor. Uydurma basamak, merdiveni
   sessizce besinci bir kademeye acar. */
.pj-sinif { font-size: var(--t-meta); color: var(--ink-muted);
  background: var(--surface-sunk); border: 1px solid var(--rule);
  border-radius: 999px; padding: 1px 7px; }

.pj-baglanti { display: inline-block; margin-top: var(--space-3);
  font-size: var(--t-meta); color: var(--pj); }

/* Eksik alanlar gizlenmez ama kartı boğmaz: tek satır, düzeltmenin
   nerede yapılacağını söyler. */
.pj-eksik { font-size: var(--t-meta); color: var(--ink-faint);
  margin: var(--space-3) 0 0; }
.pj-git { font: inherit; font-size: inherit; font-weight: 600;
  color: var(--accent); background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline; }
.pj-git:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Eylemler her kartta AYNI hizada: kartlar farklı uzunlukta olsa da
   düğmeler alta yapışır. Önceden içeriğin bittiği yerde duruyorlardı. */
.pj-kart .yonetim-hucre { margin-top: auto; padding-top: var(--space-3); }

/* Başvurularım: Üniversiteler'in alt görünümü. Kart sarmalayıcı yok —
   #uniIcerik zaten bir .kart genis içinde. */
.uni-basvuru > .tablo { margin-top: var(--space-3); }

/* --------------------------------------------------------------------------
   Uluslararası program katalogları
   Üçü şu an boş. Boş ekran "içerik yok" demekle yetinmez: neyin eksik
   olduğunu, hangi alanların gerektiğini ve neden bilerek boş olduğunu
   söyler. Yoksa kullanıcı sekmeyi bir daha açmaz.
   -------------------------------------------------------------------------- */
.pg-ust { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-3); }
.pg-ust h3 { font-family: var(--font-ui); font-size: var(--t-label);
  font-weight: 600; letter-spacing: .06em; color: var(--ink-muted); margin: 0; }
.pg-sayi { font-size: var(--t-meta); color: var(--ink-faint); }
.pg-tablo { width: 100%; }

.pg-liste { list-style: none; margin: 0; padding: 0; }
.pg-oge { padding: var(--space-3) 0; border-top: 1px solid var(--rule); }
.pg-oge:first-child { border-top: 0; }
.pg-bas { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.pg-ad { font-weight: 600; font-size: var(--t-body); color: var(--ink); }
.pg-kurum { font-size: var(--t-meta); color: var(--ink-muted); }
.pg-kunye { display: grid; gap: 3px; margin: var(--space-2) 0 0;
  font-size: var(--t-meta); }
.pg-kunye > div { display: grid; grid-template-columns: 5.5rem 1fr;
  gap: var(--space-2); }
.pg-kunye dt { color: var(--ink-faint); }
.pg-kunye dd { margin: 0; color: var(--ink); }
.pg-kaynak { display: inline-block; margin-top: 6px;
  font-size: var(--t-meta); color: var(--accent); }
.pg-kaynaksiz { display: inline-block; margin-top: 6px;
  font-size: var(--t-meta); color: var(--warn); }

/* Boş katalog: uyarı değil davet — ama neden boş olduğunu saklamaz. */
.pg-bos { padding: var(--space-4) var(--space-5);
  background: var(--surface-sunk); border: 1px dashed var(--rule-strong);
  border-radius: var(--radius-card); font-size: var(--t-label);
  line-height: 1.7; color: var(--ink-muted); }
.pg-bos p { margin: 0 0 var(--space-3); }
.pg-bos p:last-child { margin-bottom: 0; }
.pg-bos-bas { font-size: var(--t-body); color: var(--ink); }
.pg-gereken { padding: var(--space-3); background: var(--surface);
  border-left: 3px solid var(--accent); border-radius: var(--radius); }
.pg-neden { font-size: var(--t-meta); color: var(--ink-faint); }
.pg-bos code { font-family: var(--font-num); font-size: .92em;
  background: var(--surface); padding: 1px 5px; border-radius: 3px; }

/* Sınav künyesi: tablo değil kart listesi. "Kim yapıyor" ve "Ne işe
   yarar" birer cümle; dört sütunlu tabloda satırlar kırılıp okunmaz
   hale geliyordu. */
.sv-liste { list-style: none; margin: 0; padding: 0; }
.sv-oge { padding: var(--space-4) 0; border-top: 1px solid var(--rule); }
.sv-oge:first-child { border-top: 0; padding-top: 0; }
.sv-bas { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.sv-ad { font-size: var(--t-body); font-weight: 700; color: var(--ink); }
.sv-esik { font-family: var(--font-num); font-size: var(--t-meta);
  color: var(--accent); background: var(--accent-wash);
  border-radius: 999px; padding: 2px 9px; }
.sv-esik.yok { font-family: var(--font-ui); color: var(--ink-faint);
  background: var(--surface-sunk); }
.sv-kaynak-ulke { margin-left: auto; font-size: var(--t-meta); color: var(--ink-faint); }
.sv-kunye { display: grid; gap: 5px; margin: var(--space-3) 0 0;
  font-size: var(--t-label); }
.sv-kunye > div { display: grid; grid-template-columns: 7.5rem 1fr;
  gap: var(--space-3); align-items: baseline; }
.sv-kunye dt { font-size: var(--t-meta); color: var(--ink-faint); }
.sv-kunye dd { margin: 0; color: var(--ink); line-height: 1.6; }
@media (max-width: 560px) {
  .sv-kunye > div { grid-template-columns: 1fr; gap: 2px; }
  .sv-kaynak-ulke { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   Diploma kataloğu
   Şema yirmiden fazla alan taşıyor; hepsini düz kartta basmak okunmaz
   olurdu. Her kayıt katlanır: özet satırında karar için gereken dört
   şey, içinde tam künye.
   -------------------------------------------------------------------------- */
.dp-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.dp-kart { background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-card); }
.dp-kart[open] { border-color: var(--rule-strong); box-shadow: var(--shadow-card); }
.dp-kart > summary { display: flex; align-items: baseline; flex-wrap: wrap;
  gap: var(--space-2); padding: var(--space-3) var(--space-4); cursor: pointer;
  list-style: none; }
.dp-kart > summary::-webkit-details-marker { display: none; }
.dp-kart > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.dp-kisa { font-weight: 700; font-size: var(--t-body); color: var(--ink); }
.dp-ad { font-size: var(--t-meta); color: var(--ink-muted); flex: 1; min-width: 10rem; }

/* Hukuki nitelik rengi ANLAM taşır: tam diploma ile ders sertifikası
   karıştırılırsa öğrenci lise bitirme belgesi sandığı şeyle mezun olamaz. */
.dp-tur { font-size: var(--t-meta); font-weight: 600; border-radius: 999px;
  padding: 2px 9px; white-space: nowrap; }
.dp-tur.t-tam_lise_diplomasi { color: var(--ok); background: var(--ok-wash); }
.dp-tur.t-grup_odulu { color: var(--accent); background: var(--accent-wash); }
.dp-tur.t-ders_bazli_sertifika { color: var(--warn); background: var(--warn-wash); }
.dp-tur.t-on_basamak { color: var(--ink-muted); background: var(--surface-sunk); }
.dp-tur.t-kopru_programi, .dp-tur.t-mesleki_nitelik {
  color: var(--vurgu-deep); background: var(--vurgu-wash); }

.dp-guven { font-size: 10px; font-weight: 600; border-radius: 999px;
  padding: 2px 8px; white-space: nowrap; }
.dp-guven.g-yuksek { color: var(--ok); background: var(--ok-wash); }
.dp-guven.g-orta { color: var(--warn); background: var(--warn-wash); }
.dp-guven.g-dusuk { color: var(--danger); background: var(--danger-wash); }

.dp-govde { padding: 0 var(--space-4) var(--space-4); }
.dp-kapilar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-3); }
.dp-kapi { font-size: var(--t-meta); border-radius: var(--radius);
  padding: 3px 9px; border: 1px solid var(--rule); }
.dp-kapi.d-var { color: var(--ok); background: var(--ok-wash); border-color: transparent; }
.dp-kapi.d-sinirli { color: var(--warn); background: var(--warn-wash); border-color: transparent; }
.dp-kapi.d-yok { color: var(--ink-muted); background: var(--surface-sunk); }
.dp-kapi.d-belirsiz, .dp-kapi.d-notr { color: var(--ink-muted); background: var(--surface-sunk); }
.dp-tur-not { font-size: var(--t-meta); color: var(--ink-muted); margin: 0 0 var(--space-3); }

.dp-kunye { display: grid; gap: 5px; margin: 0 0 var(--space-4); font-size: var(--t-label); }
.dp-kunye > div { display: grid; grid-template-columns: 8.5rem 1fr;
  gap: var(--space-3); align-items: baseline; }
.dp-kunye dt { font-size: var(--t-meta); color: var(--ink-faint); }
.dp-kunye dd { margin: 0; color: var(--ink); line-height: 1.6; }

.dp-blok { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3);
  background: var(--surface-sunk); border-radius: var(--radius);
  font-size: var(--t-label); line-height: 1.6; }
.dp-blok h4 { font-family: var(--font-ui); font-size: var(--t-meta);
  font-weight: 600; letter-spacing: .06em; color: var(--ink-muted);
  margin: 0 0 var(--space-2); }
.dp-blok p { margin: 0 0 var(--space-2); }
.dp-blok p:last-child { margin-bottom: 0; }
/* Türkiye denkliği ile uluslararası tanınırlık AYRI bloklar — şemanın
   kırmızı çizgisi. Karıştırılırsa "dünyada tanınıyor" diye MEB denkliği
   olduğu sanılır. */
.dp-denklik { border-left: 3px solid var(--accent); }
.dp-denk { font-weight: 600; border-radius: 999px; padding: 1px 8px;
  margin-right: 6px; font-size: var(--t-meta); }
.dp-denk.d-denk { color: var(--ok); background: var(--ok-wash); }
.dp-denk.d-denk_degil { color: var(--danger); background: var(--danger-wash); }
.dp-denk.d-dolayli { color: var(--warn); background: var(--warn-wash); }
.dp-denk.d-belirsiz { color: var(--ink-muted); background: var(--surface); }
.dp-ayrim { font-size: var(--t-meta); color: var(--ink-faint); }
.dp-taninirlik { display: grid; gap: 3px; margin: var(--space-2) 0; }
.dp-taninirlik > div { display: grid; grid-template-columns: 8rem 1fr; gap: var(--space-2); }
.dp-taninirlik dt { font-size: var(--t-meta); color: var(--ink-faint); }
.dp-taninirlik dd { margin: 0; }
.dp-ucret { border-left: 3px solid var(--warn); }
.dp-ucret-not { font-size: var(--t-meta); color: var(--ink-muted); }
.dp-not { border-left: 3px solid var(--vurgu); }

.dp-alt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  padding-top: var(--space-3); border-top: 1px solid var(--rule);
  font-size: var(--t-meta); }
.dp-tarih { color: var(--ink-faint); }
.dp-kaynak-sar { display: inline-flex; align-items: center; gap: 5px; }
.dp-kaynak { color: var(--accent); }
/* Kaynak açılıp doğrulanmadı — saklanmıyor. */
.dp-dogrulanmadi { font-size: 10px; color: var(--warn);
  background: var(--warn-wash); border-radius: 999px; padding: 1px 6px; }

.dp-plan { margin-top: var(--space-4); font-size: var(--t-label); }
.dp-plan > summary { cursor: pointer; font-weight: 600; color: var(--ink-muted);
  padding: var(--space-2) 0; }
.dp-plan ul { margin: var(--space-2) 0 0; padding-left: 18px; line-height: 1.7; }
.dp-plan li { margin-bottom: var(--space-2); }

@media (max-width: 620px) {
  .dp-kunye > div, .dp-taninirlik > div { grid-template-columns: 1fr; gap: 1px; }
}

/* --------------------------------------------------------------------------
   Tempo panelleri — günlük · haftalık · toplam yan yana
   Eski tek panelde viewBox 480x90, genişlik %100'dü: kap 1700px olunca
   üç haftalık kayıt üç dev çubuğa dönüşüyordu. Artık SVG kendi ölçeğini
   koruyor (preserveAspectRatio) ve panel genişliği sınırlı.
   -------------------------------------------------------------------------- */
.tg-izgara { display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
.tg-panel { padding: var(--space-4); background: var(--surface);
  border: var(--card-border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.tg-bas { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-2); margin-bottom: var(--space-3); }
.tg-bas h4 { font-family: var(--font-ui); font-size: var(--t-label);
  font-weight: 600; letter-spacing: .06em; color: var(--ink-muted); margin: 0; }
.tg-alt { font-size: var(--t-meta); color: var(--ink-faint); white-space: nowrap; }
/* Çubuklar yayılmasın: SVG kendi genişliğini korur, kap büyürse solda
   kalır. width:100% vermek eski hatanın ta kendisiydi. */
.tg-svg { display: block; width: 100%; max-width: 22rem; height: auto; }
.tg-not { margin-top: auto; padding-top: var(--space-3);
  font-size: var(--t-meta); color: var(--ink-muted); line-height: 1.6; }
.tg-not b { color: var(--ink); font-family: var(--font-num); }
.tg-bos { font-size: var(--t-meta); color: var(--ink-faint);
  padding: var(--space-4) 0; margin: 0; }

/* Sınav kataloğu — diploma kartlarıyla aynı desen, tür rengi farklı.
   Tür ile hedef sistem AYRI eksenler (şemanın kırmızı çizgisi):
   gruplama türe göre, hedef sistem kayıt içinde ayrı blokta. */
.sv-obek { margin-bottom: var(--space-4); }
.sv-obek-bas { display: flex; align-items: baseline; gap: var(--space-2);
  margin: 0 0 var(--space-2); font-size: var(--t-label); font-weight: 600; }
.sv-turr { font-size: var(--t-meta); font-weight: 600; border-radius: 999px;
  padding: 2px 9px; white-space: nowrap; }
.sv-turr.r-kabul { color: var(--accent); background: var(--accent-wash); }
/* Lise girisi KABULDEN AYRI RENK. SSAT ve ISEE bir kabul sinavi ama
   universiteye degil liseye; SAT ile ayni rozeti paylassalardi ailenin
   en sik yaptigi karistirma ekranda pekismis olurdu. */
.sv-turr.r-lise { color: var(--macenta); background: var(--macenta-wash); }
.sv-turr.r-dil { color: var(--ok); background: var(--ok-wash); }
.sv-turr.r-yetenek { color: var(--vurgu-deep); background: var(--vurgu-wash); }
.sv-turr.r-bolum { color: var(--warn); background: var(--warn-wash); }
.sv-turr.r-olimpiyat { color: var(--danger); background: var(--danger-wash); }
.sv-turr.r-seviye, .sv-turr.r-diger { color: var(--ink-muted); background: var(--surface-sunk); }
.sv-amac { font-size: var(--t-label); color: var(--ink); margin: 0 0 var(--space-3);
  line-height: 1.6; }
/* Eşik bloğu ayrı çerçevede: "tipik aralık, kesin sayı değil" uyarısı
   künyenin içinde kaybolmamalı. */
.sv-esik { border-left: 3px solid var(--accent); }

/* Araştırma programları — erişilebilirlik en görünür bilgi.
   Şemanın üçüncü kırmızı çizgisi: vize desteği olmayan ABD programı,
   tam burslu olsa dahi Türkiye'den pratikte kapalı olabilir. Bu künyenin
   içinde kalırsa koç öğrenciyi aylarca boşa hazırlar. */
.ar-erisim { font-size: var(--t-meta); font-weight: 700; border-radius: 999px;
  padding: 2px 9px; white-space: nowrap; }
.ar-erisim.e-acik { color: var(--ok); background: var(--ok-wash); }
.ar-erisim.e-kosullu { color: var(--warn); background: var(--warn-wash); }
.ar-erisim.e-pratikte_kapali { color: var(--danger); background: var(--danger-wash); }
.ar-maliyet { font-size: var(--t-meta); font-weight: 600; border-radius: 999px;
  padding: 2px 9px; white-space: nowrap; }
.ar-maliyet.m-ucretsiz_stipendli, .ar-maliyet.m-ucretsiz {
  color: var(--ok); background: var(--ok-wash); }
.ar-maliyet.m-ihtiyac_bursu { color: var(--accent); background: var(--accent-wash); }
.ar-maliyet.m-ucretli { color: var(--ink-muted); background: var(--surface-sunk); }

.ar-erisim-blok { border-left: 3px solid var(--rule-strong); }
.ar-erisim-blok.e-acik { border-left-color: var(--ok); }
.ar-erisim-blok.e-kosullu { border-left-color: var(--warn); }
.ar-erisim-blok.e-pratikte_kapali { border-left-color: var(--danger); }
/* Kural türevi uyarılar: elle yazılmıyor, kayıt türünden çıkıyor. */
.ar-uyari { border-left: 3px solid var(--danger); background: var(--danger-wash); }
.ar-uyari h4 { color: var(--danger); }
.ar-sira-not { font-size: var(--t-meta); }

/* Hedef ülke seçici: bütün ülkeler, gruplu. Rehberi olan ile olmayan
   aynı listede — hedef ile rehber ayrı şeyler. Önceden yalnız rehberi
   olan (tek ülke) seçilebiliyordu. */
.ul-secici-grup { margin-top: var(--space-3); }
.ul-secici-grup h5 { font-family: var(--font-ui); font-size: var(--t-meta);
  font-weight: 600; letter-spacing: .05em; color: var(--ink-faint);
  margin: 0 0 6px; }
.ul-secim.rehberli { font-weight: 600; }
.ul-rozet { font-size: 10px; font-weight: 600; color: var(--ok);
  background: var(--ok-wash); border-radius: 999px; padding: 1px 6px; }
/* Rehberi olmayan ülke şeritte GÖRÜNÜR ama soluk — seçim geçerli,
   eksik olan rehber. */
.alt-sekme.rehbersiz { color: var(--ink-faint); border-style: dashed; }
.alt-sekme.rehbersiz small { font-size: 10px; }
.alt-sekme.rehbersiz.aktif { background: var(--surface-sunk);
  color: var(--ink-muted); border-color: var(--rule-strong); }
.bp-ulke-grup { margin-top: var(--space-2); }
.bp-ulke-baslik { display: block; font-size: var(--t-meta);
  color: var(--ink-faint); margin-bottom: 4px; }

/* Arşiv kaydı: emekliye ayrılmış sınav. Aktiflerle aynı biçimde
   göstermek öğrenciyi artık var olmayan bir sınava hazırlanmaya iter —
   internetteki hazırlık içeriğinin çoğu hâlâ onları anlatıyor. */
.sv-kart.arsiv { border-style: dashed; opacity: .9; }
.sv-kart.arsiv .dp-kisa { color: var(--ink-muted); }
.sv-arsiv { font-size: 10px; font-weight: 700; letter-spacing: .04em;
  color: var(--on-accent); background: var(--danger);
  border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.sv-arsiv-blok { border-left: 3px solid var(--danger); background: var(--danger-wash); }
.sv-arsiv-blok h4 { color: var(--danger); }

/* Yarışma kataloğu — gruplama kategoriye göre, sıralama Türkiye'den
   katılım yoluna göre. 96 yarışmanın dörtte biri Türkiye'den kapalı;
   sadece kategoriye göre dizseydik STEM'e bakan öğrenci
   başvuramayacağını ilk sırada görürdü. */
.yr-yol { font-size: var(--t-meta); font-weight: 700; border-radius: 999px;
  padding: 2px 9px; white-space: nowrap; }
.yr-yol.y-dogrudan_online { color: var(--ok); background: var(--ok-wash); }
.yr-yol.y-ulusal_partner { color: var(--accent); background: var(--accent-wash); }
.yr-yol.y-okul_kaydi { color: var(--warn); background: var(--warn-wash); }
.yr-yol.y-kosullu { color: var(--ink-muted); background: var(--surface-sunk); }
.yr-yol.y-kapali { color: var(--danger); background: var(--danger-wash); }
.yr-kart.arsiv { border-style: dashed; }
.yr-yol-blok { border-left: 3px solid var(--rule-strong); }
.yr-yol-blok.y-dogrudan_online { border-left-color: var(--ok); }
.yr-yol-blok.y-ulusal_partner { border-left-color: var(--accent); }
.yr-yol-blok.y-okul_kaydi { border-left-color: var(--warn); }
.yr-yol-blok.y-kosullu { border-left-color: var(--rule-strong); }
.yr-yol-blok.y-kapali { border-left-color: var(--danger); background: var(--danger-wash); }
/* Ödül önce değil sonra: öğrenci ödüle göre değil ürettiği işe göre
   seçmeli (şemanın üçüncü kırmızı çizgisi). Çıktının altında ve soluk. */
.yr-uretim { border-left: 3px solid var(--vurgu); }
.yr-odul { font-size: var(--t-meta); color: var(--ink-muted); margin-top: 6px; }

/* Kaynağı doğrulanamayan kayıt: silinmiyor (doğrulanması gerektiği
   bilgisi de kaybolmasın) ama öneri olarak sunulmuyor. */
.yr-kaynaksiz-rozet { font-size: 10px; font-weight: 700;
  color: var(--on-accent); background: var(--warn);
  border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.yr-kaynaksiz { border-left: 3px solid var(--warn); background: var(--warn-wash); }
.yr-kaynaksiz h4 { color: var(--warn); }

/* Yarışma olmayan kayıt: MEB araştırma izni bir izin süreci, TÜBİTAK
   4006 okula destek programı. İkisi de 2204-A yolunun parçası olduğu
   için katalogda duruyor — ama yarışma gibi göstermek öğrenciye
   "kazanılacak bir şey" sandırırdı. */
.yr-degil-rozet { font-size: 10px; font-weight: 700; color: var(--ink-muted);
  background: var(--surface-sunk); border: 1px solid var(--rule-strong);
  border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.yr-degil { border-left: 3px solid var(--ink-faint); }
.yr-degil h4 { color: var(--ink); }

/* Uyarı kaydı: yarışma açık, güncel ve gerçek — ama öğrencinin sandığı
   şey değil. Konservatuvar düzeyi, pazarlama kanalı, prestij algısı.
   Bunlar "kapalı" ya da "arşiv" ile anlatılamıyor. */
.yr-uyari-rozet { font-size: 10px; font-weight: 700; color: var(--on-accent);
  background: var(--vurgu); border-radius: 999px; padding: 2px 9px;
  white-space: nowrap; }
.yr-uyari-blok { border-left: 3px solid var(--vurgu); background: var(--vurgu-wash); }
.yr-uyari-blok h4 { color: var(--vurgu-deep); }

/* Yarışma stratejisi (Y10) — liste değil, listeyi kullanma kuralı.
   Katalogun en üstünde duruyor çünkü ilk kural bir diskalifiye kuralı:
   sırası yanlış olan proje TÜBİTAK'tan eleniyor ve sonradan
   düzeltilemiyor. Kayıtların arasına gömülseydi öğrenci onu ancak
   elendikten sonra okurdu. */
.yr-strateji { border: 1px solid var(--rule-strong); border-radius: var(--radius-card);
  background: var(--surface-sunk); padding: 14px 16px; margin: 14px 0 20px; }
.yr-strateji-bas { display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap; margin-bottom: 6px; }
.yr-strateji-bas h4 { margin: 0; font-size: var(--t-h3); }
.yr-kurallar { display: grid; gap: 10px; margin: 12px 0; }

/* Ağırlık, kuralın kendi metninden türetildi. Aynı renkte basmak
   "elenirsin" ile "böyle daha iyi olur"u eşitlerdi. */
.yr-kural { border: 1px solid var(--rule); border-left-width: 4px;
  border-radius: var(--radius-card); background: var(--surface); padding: 11px 13px; }
.yr-kural.a-diskalifiye { border-left-color: var(--danger); background: var(--danger-wash); }
.yr-kural.a-geri_alinamaz { border-left-color: var(--warn); background: var(--warn-wash); }
.yr-kural.a-olcut { border-left-color: var(--rule-strong); }
.yr-kural h5 { margin: 0 0 6px; font-size: var(--t-body); display: flex;
  align-items: center; gap: 8px; flex-wrap: wrap; }
.yr-agirlik { font-size: 10px; font-weight: 700; border-radius: 999px;
  padding: 2px 9px; white-space: nowrap; cursor: help; }
.yr-agirlik.a-diskalifiye { color: var(--on-accent); background: var(--danger); }
.yr-agirlik.a-geri_alinamaz { color: var(--on-accent); background: var(--warn); }
.yr-agirlik.a-olcut { color: var(--ink-muted); background: var(--surface-sunk);
  border: 1px solid var(--rule-strong); }
.yr-kural-metin { margin: 0 0 6px; font-size: var(--t-meta); color: var(--ink-muted); }
.yr-kural-sonuc { margin: 0; font-size: var(--t-body); }

/* Atıf: kuralın işaret ettiği katalog kaydı. Kayıt bulunamazsa
   gizlenmiyor — kural var olmayan bir yarışmayı gösteriyorsa bu
   katalogun eksiği, saklanacak şey değil. */
.yr-atiflar { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.yr-atif { font-size: var(--t-meta); color: var(--accent);
  background: var(--accent-wash); border-radius: var(--radius); padding: 2px 8px; }
.yr-atif.yok { color: var(--danger); background: var(--danger-wash);
  text-decoration: line-through; }

.yr-yil-izgara { display: grid; gap: 10px; margin-top: 10px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.yr-yil-kutu { border: 1px solid var(--rule); border-radius: var(--radius-card);
  background: var(--surface); padding: 10px 12px; }
.yr-yil-kutu.aktif { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-wash); }
.yr-yil-kutu h5 { margin: 0 0 2px; font-size: var(--t-body); font-weight: 700; }
.yr-simdi { font-size: 10px; font-weight: 700; color: var(--on-accent);
  background: var(--accent); border-radius: 999px; padding: 2px 8px; }
.yr-odak { margin: 0 0 8px; font-size: var(--t-label); color: var(--ink-muted); }
.yr-yil-kutu ul { margin: 0; padding-left: 18px; font-size: var(--t-label); }
.yr-yil-kutu li { margin-bottom: 5px; }
.yr-red ul { font-size: var(--t-meta); }

/* Birleşik yıllık takvim — dört ailenin takvimi tek çizelgede.
   Çakışmalar en üstte, çünkü kaynağın kendi amacı bu. Ay kutularını
   okuyup "yoğun ama yönetilebilir" diyen koç, aynı haftaya düşen iki
   son başvuruyu aşağıdaki bir listede görmezdi. */
.tk-cakismalar { border: 1px solid var(--danger); border-left-width: 4px;
  border-radius: var(--radius-card); background: var(--danger-wash);
  padding: 12px 15px; margin: 12px 0 16px; }
.tk-cakismalar h4 { margin: 0 0 8px; font-size: var(--t-h3); color: var(--danger); }
.tk-cakismalar ul { margin: 0; padding-left: 18px; }
.tk-cakismalar li { margin-bottom: 6px; }
.tk-cak-ay { display: inline-block; font-size: 10px; font-weight: 700;
  color: var(--on-accent); background: var(--danger); border-radius: 999px;
  padding: 2px 8px; margin-right: 6px; white-space: nowrap; }
.tk-ozet { margin: 10px 0 0; font-size: var(--t-meta); color: var(--ink-muted); }

.tk-izgara { display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

/* Yoğunluk sol kenarda; renk değil KALINLIK taşıyor ki renk körü
   kullanıcı için de okunur kalsın — yoğunluk adı zaten yazılı. */
.tk-ay { border: 1px solid var(--rule); border-left: 4px solid var(--rule-strong);
  border-radius: var(--radius-card); background: var(--surface); padding: 11px 13px; }
.tk-ay.y-dusuk { border-left-color: var(--ok); }
.tk-ay.y-orta { border-left-color: var(--accent); }
.tk-ay.y-yuksek { border-left-color: var(--warn); }
.tk-ay.y-en_yuksek { border-left-color: var(--danger); }
.tk-ay.cakismali { box-shadow: 0 0 0 2px var(--danger-wash); }
.tk-ay-bas { display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 6px; }
.tk-ay-bas h5 { margin: 0; font-size: var(--t-h3); }
.tk-yogunluk { font-size: 10px; font-weight: 700; border-radius: 999px;
  padding: 2px 8px; white-space: nowrap; color: var(--on-accent); }
.tk-yogunluk.y-dusuk { background: var(--ok); }
.tk-yogunluk.y-orta { background: var(--accent); }
.tk-yogunluk.y-yuksek { background: var(--warn); }
.tk-yogunluk.y-en_yuksek { background: var(--danger); }

/* Aile sayaçları: aynı aya kaç AYRI aileden iş düştüğü, çakışma
   riskinin en kaba ölçüsü. Tek aileden beş kalem yönetilebilir. */
.tk-aileler { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.tk-aile { font-size: 10px; font-weight: 700; border-radius: var(--radius);
  padding: 2px 7px; }
.tk-kalemler { margin: 0; padding-left: 16px; font-size: var(--t-meta); }
.tk-kalemler li { margin-bottom: 5px; }
.tk-etiket { display: inline-block; font-size: 10px; font-weight: 700;
  border-radius: var(--radius); padding: 1px 6px; margin-right: 5px; }
.tk-aile.a-sinav, .tk-etiket.a-sinav { color: var(--accent); background: var(--accent-wash); }
.tk-aile.a-yarisma, .tk-etiket.a-yarisma { color: var(--vurgu-deep); background: var(--vurgu-wash); }
.tk-aile.a-arastirma, .tk-etiket.a-arastirma { color: var(--ok); background: var(--ok-wash); }
.tk-aile.a-yazi, .tk-etiket.a-yazi { color: var(--warn); background: var(--warn-wash); }
/* "Kural" bir olay değil; sayaçlara girmiyor, listede de nötr duruyor. */
.tk-etiket.a-not { color: var(--ink-muted); background: var(--surface-sunk);
  border: 1px solid var(--rule-strong); }
.tk-kalemler li.a-not { color: var(--ink-muted); font-style: italic; }
.tk-ay-cakisma { margin-top: 9px; padding: 8px 10px; border-radius: var(--radius);
  background: var(--danger-wash); font-size: var(--t-meta); }
.tk-ay-cakisma ul { margin: 4px 0 0; padding-left: 16px; }

/* Ön koşul — uyarıdan farklı. Uyarı "bu senin sandığın şey değil" der;
   ön koşul "girmeden önce şunu çözmen gerekiyor" der. Kayıt doğru
   anlaşılmış olsa bile ön koşul çözülmeden başvuru yapılamıyor, o
   yüzden yol bloğunun içinde duruyor: ikisi de yol rozetinin
   söylediğini koşula bağlıyor. */
.yr-onkosul-rozet { font-size: 10px; font-weight: 700; color: var(--on-accent);
  background: var(--warn); border-radius: 999px; padding: 2px 9px;
  white-space: nowrap; }
.yr-onkosul { margin-top: 8px; padding: 8px 10px; border-radius: var(--radius);
  background: var(--warn-wash); border-left: 3px solid var(--warn); }

/* Yarışma Programları içindeki ikinci düzey şerit. Katalog ile takvim
   ayrı sorular ("girsin mi" / "ne zaman"); aynı ekranda toplanınca 106
   kayıt ve strateji kuralları takvimi boğuyordu. Üst şeride sekizinci
   görünüm olarak eklenseydi ikisinin aynı sekmenin parçası olduğu
   kaybolurdu — bu yüzden içeride, girintili ve daha ince. */
.alt-serit.ikincil { margin: 0 0 12px; padding-left: 10px;
  border-left: 3px solid var(--rule-strong); }
.alt-serit.ikincil .alt-sekme { font-size: var(--t-meta); }

/* Takvim ekranindaki puntolar tek bir merdivene oturuyor:
     bolum basligi  --t-h2   (Ay ay / Sınıfa göre / Mevsim dağılımı)
     obek basligi   --t-h3   (Sonbahar, Yıl boyunca açık…)
     kayit adi      --t-body 600
     meta ve metin  --t-label
   Onceden bolum ve obek basligi AYNI puntodaydi, o yuzden hangisinin
   otekini kapsadigi okunmuyordu. */
.yr-yil-plan { margin: 22px 0; }
.yr-yil-plan h4, .yt-aylik h4, .yt-mevsim h4 {
  margin: 0 0 10px; font-size: var(--t-h2); }
.yt-mevsim { margin-top: 22px; }
.yt-ay-izgara { display: grid; gap: 10px; margin-bottom: 8px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.yt-ay { border: 1px solid var(--rule); border-radius: var(--radius-card);
  background: var(--surface); padding: 10px 12px; }
.yt-ay h5 { margin: 0 0 6px; font-size: var(--t-body); font-weight: 700; }
.yt-ay ul { margin: 0; padding-left: 16px; font-size: var(--t-label); }
.yt-ay li { margin-bottom: 5px; }

/* Türetilmiş öbekler. Önceden üç ayrı şablondu: mevsim satırlarında yol
   rozeti vardı, ötekilerde yoktu; ad kalın gövde puntosunda, takvim
   metni iki kademe küçüktü ve adın bittiği yerden başlıyordu — yani
   hiçbir sütun hizalanmıyordu. Tek kabuk ve ÜÇ SÜTUNLU IZGARA: rozet,
   ad ve takvim metni her satırda aynı yerde başlıyor.

   Punto iki kademe değil BİR kademe fark ediyor (--t-body / --t-label).
   İki kademe ayrı iki listeymiş gibi okunuyordu. */
.yt-obek { border-left: 3px solid var(--rule-strong); padding: 2px 0 2px 12px;
  margin-bottom: 16px; }
.yt-obek.o-mevsim { border-left-color: var(--accent); }
.yt-obek.o-surekli { border-left-color: var(--ink-faint); }
.yt-obek.o-cok_yilli { border-left-color: var(--warn); }
.yt-obek.o-yok { border-left-color: var(--ink-faint); }
.yt-obek.o-belirsiz { border-left-color: var(--danger); }

.yt-obek-bas { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  margin-bottom: 4px; }
.yt-obek-bas h5 { margin: 0; font-size: var(--t-h3); }
.yt-yan { font-size: var(--t-meta); color: var(--ink-muted); }
.yt-sayi { margin-left: auto; font-size: var(--t-meta); font-weight: 700;
  color: var(--ink-muted); background: var(--surface-sunk);
  border-radius: 999px; padding: 1px 9px; }
.yt-aciklama { margin: 0 0 8px; font-size: var(--t-label); color: var(--ink-muted);
  max-width: 78ch; }

.yt-liste { list-style: none; margin: 0; padding: 0; }
/* Sabit rozet sütunu + ad + takvim. Rozet sütunu artakalan öbeklerinde
   de duruyor: yol bilgisi orada da geçerli ve sütunu boş bırakmak
   listeyi iki farklı şekle sokuyordu. */
.yt-satir { display: grid; align-items: baseline; gap: 4px 12px;
  grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1.35fr);
  padding: 7px 0; border-bottom: 1px solid var(--rule); }
.yt-satir:last-child { border-bottom: 0; }
.yt-yol { justify-self: start; }
.yt-ad { font-size: var(--t-body); font-weight: 600; }
.yt-metin { font-size: var(--t-label); color: var(--ink-muted); }

/* Dar ekranda üç sütun sıkışıyor: rozet ile ad aynı satıra, takvim
   metni altına geçiyor. */
@media (max-width: 720px) {
  .yt-satir { grid-template-columns: 150px minmax(0, 1fr); }
  .yt-metin { grid-column: 1 / -1; }
}

/* EduBahçe — dal morfolojisi.
   Tuval KOYU ve sayfanın geri kalanından ayrı bir yüzey. Sebep süs
   değil: ağacın renk rampası (turkuaz → yeşil → kehribar → mor) tek bir
   ölçüyü, güncelliği taşıyor ve bu rampa açık zeminde birbirine
   yaklaşıyor. Koyu zemin dört basamağı da ayırt edilebilir tutuyor.

   Zemin ışığı ağacın DİBİNDEN geliyor (bottom center), tepeden değil:
   kök tavanı bu modelin sınırlayıcı ölçüsü ve ışık da oradan yükseliyor.
   Önceki düz gradyan halenin geniş halkasıyla yarışıyordu. */
.ag-sahne { border: 1px solid rgba(255,255,255,.07); border-radius: var(--radius-card);
  overflow: hidden; margin-bottom: 10px;
  /* Zemin rengi SVG'nin kendi gokyuzuyle ayni: tuval artik gradyanini
     kendi ciziyor ve kabin gradyani onunla yarisiyordu. */
  background: #070B11; }
.ag-tuval { display: block; width: 100%; height: auto; }
.ag-tuval text { font-family: ui-monospace, Menlo, Consolas, monospace; }
/* Dal ucundaki ölçüm etiketleri okunmalı ama ağacı bastırmamalı. */
.ag-tuval .ag-dal text { opacity: .92; }
.ag-tuval .ag-dal.belirsiz text { opacity: .74; }

.ag-lejant { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.ag-cip { display: flex; align-items: center; gap: 5px; font-size: var(--t-meta);
  color: var(--ink-muted); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 3px 7px; }
.ag-cip i { width: 7px; height: 7px; border-radius: 50%; display: block; }

/* Ağaç paneli — punto merdiveni ve satır uzunluğu.
   Önceki hâlde bölüm başlığı, gövde ve açıklama neredeyse aynı boydaydı
   ve metin kabın tamamına yayılıyordu (140 karaktere varan satırlar).
   Okunur satır 65–75 karakter; açıklamalara max-width verildi.
     bölüm başlığı  --t-h3
     kayıt adı      --t-body 600
     açıklama       --t-label
     etiket/sayaç   --t-meta */
.ag-bolum { border: 1px solid var(--rule); border-radius: var(--radius-card);
  background: var(--surface); padding: 15px 17px; margin-bottom: 14px; }
.ag-bolum h3 { margin: 0 0 4px; font-size: var(--t-h3); }
.ag-alt { margin: 0 0 12px; font-size: var(--t-label); color: var(--ink-muted);
  max-width: 72ch; }

/* Dal satırı: kimlik · üç ölçüm · tanı.
   ÜÇ OKUMA AYRI HÜCREDE. Önceden "0 · 0a · 0" diye tek dizeydi; modelin
   kendi kuralı "üç okuma her yerde ayrı taşınır" diyor, tek dizede
   birleştirmek bunu görsel olarak çiğniyordu.

   Ad sütunu ARTIK ESNEMİYOR. 1.1fr verilmişti ve ad ile ölçümler
   arasında geniş bir boşluk açılıyordu; iki grup birbirinden kopuk
   duruyordu. Sabit bir aralıkla sınırlandı. */
.ag-dal-liste { list-style: none; margin: 0; padding: 0; }
.ag-satir { display: grid; gap: 8px 18px; align-items: center;
  grid-template-columns: minmax(150px, 230px) auto minmax(0, 1fr);
  padding: 10px 0 10px 12px; border-bottom: 1px solid var(--rule);
  border-left: 3px solid var(--rule); transition: background .15s; }
.ag-satir:last-child { border-bottom: 0; }
.ag-satir:hover { background: var(--surface-sunk); }
/* Sol şerit tanının rengini taşır: satırı okumadan durum görünür. */
.ag-satir.t-eksik { border-left-color: var(--rule-strong); }
.ag-satir.t-filiz { border-left-color: #9BB0A6; }
.ag-satir.t-kurumus { border-left-color: #8C86B8; }
.ag-satir.t-ince { border-left-color: #FF7A59; }
.ag-satir.t-savruk { border-left-color: #E8B84B; }
.ag-satir.t-saglikli { border-left-color: #2E9E8B; }

.ag-kimlik { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.ag-ad { font-size: var(--t-body); font-weight: 600; }
.ag-kod { font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 10px; color: var(--ink-faint); letter-spacing: .08em;
  border: 1px solid var(--rule); border-radius: 3px; padding: 1px 5px; }

/* Ölçüm hücresi: değer üstte, adı altta. Üç hücre de AYNI şekilde —
   önceden derinlikte üçüncü bir satır vardı ve hücreler farklı
   boyda duruyordu. */
.ag-olcum { display: flex; gap: 6px; }
.ag-hucre { min-width: 84px; padding: 7px 10px; border-radius: var(--radius);
  background: var(--surface-sunk); border: 1px solid var(--rule);
  text-align: center; }
/* ÜÇ DURUM, ÜÇ GÖRÜNÜM. "Ölçtük, 0 çıktı" ile "hiç ölçmedik" aynı
   şey değil ve bu ekranda ikisi de "0" olarak çıkıyordu.
     ölçüldü      → dolu hücre
     ölçüldü, 0   → soluk değer, düz çerçeve
     ölçülmedi    → tire, kesikli çerçeve */
.ag-hucre.bos .ag-deger { color: var(--ink-faint); }
.ag-hucre.olculmedi { background: transparent; border-style: dashed; }
.ag-hucre.olculmedi .ag-deger { color: var(--ink-faint); font-weight: 500; }
.ag-hucre.olculmedi .ag-etiket { color: var(--ink-faint); }
.ag-deger { display: block; font-size: var(--t-body); font-weight: 700;
  line-height: 1.25; }
.ag-birim { font-style: normal; font-size: var(--t-meta); font-weight: 500;
  color: var(--ink-muted); margin-left: 2px; }
.ag-etiket { display: block; font-size: 10px; color: var(--ink-muted);
  letter-spacing: .04em; margin-top: 1px; }

/* Tanı artık rozet: satırın en belirleyici bilgisiydi ama en zayıf
   okunan oydu — küçük, renkli bir kelime. */
.ag-yorum { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ag-tani { font-size: var(--t-meta); font-weight: 700; letter-spacing: .03em;
  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
  border: 1px solid currentColor; }
.ag-tani.t-eksik { color: #6B7480; background: var(--surface-sunk); }
.ag-tani.t-filiz { color: #5E7A6B; background: var(--ok-wash); }
.ag-tani.t-kurumus { color: #6A63A0; background: var(--vurgu-wash); }
.ag-tani.t-ince { color: #C4482A; background: var(--danger-wash); }
.ag-tani.t-savruk { color: #9A7414; background: var(--warn-wash); }
.ag-tani.t-saglikli { color: #1F7A6B; background: var(--ok-wash); }
.ag-yorum-metin { font-size: var(--t-label); color: var(--ink-muted);
  max-width: 44ch; }

/* Hayalet dal notu: aynı tanım listesi deseni, tek görsel dil. */
.ag-hayalet-not { margin-top: 12px; padding: 11px 13px; border-radius: var(--radius);
  background: var(--surface-sunk); border: 1px dashed var(--rule-strong); }
.ag-hayalet-not p { margin: 0 0 8px; font-size: var(--t-label); max-width: 74ch; }
.ag-hayalet-not dl { margin: 0; }
.ag-hayalet-not dl > div { display: grid; gap: 2px 14px; padding: 5px 0;
  grid-template-columns: 150px minmax(0, 1fr); }
.ag-hayalet-not dt { font-size: var(--t-label); font-weight: 600; }
.ag-hayalet-not dd { margin: 0; font-size: var(--t-label); color: var(--ink-muted); }

/* Eksik ölçüm bölümü.
   Terimler artık ROZET: hepsi aynı renkte, tek bir aile olarak okunuyor.
   Önceden düz mono metindi ve iki alt satır (kök, ağaçta yok) turuncu
   yazıydı; üç ayrı görsel dil aynı listede duruyordu.

   Bölüm bir HATA değil bir DURUM: kesikli çerçeve onu "bozuk" değil
   "kaynağını bekliyor" diye okutuyor. */
.ag-bekleyen { border-style: dashed; background: var(--surface-sunk); }
.ag-bekleyen-bas { display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap; margin-bottom: 4px; }
.ag-bekleyen-bas h3 { margin: 0; color: var(--ink-muted); }
.ag-sayac { margin-left: auto; font-size: var(--t-meta); font-weight: 700;
  color: var(--warn); background: var(--warn-wash); border-radius: 999px;
  padding: 2px 10px; white-space: nowrap; }

/* Terim | gerekçe. Madde işaretli liste hepsini aynı ağırlıkta
   okutuyordu; tanım listesi terimi öne çıkarıp gerekçeyi ikinci
   düzleme alıyor. */
.ag-eksik { margin: 0; }
.ag-eksik > div { display: grid; gap: 4px 16px; padding: 9px 0;
  grid-template-columns: 128px minmax(0, 1fr); border-bottom: 1px solid var(--rule); }
.ag-eksik > div:last-child { border-bottom: 0; }
.ag-eksik dt { margin: 0; }
.ag-eksik dd { margin: 0; font-size: var(--t-label); color: var(--ink-muted);
  max-width: 68ch; line-height: 1.55; }
.ag-eksik dd b { color: var(--ink); }

/* Rozet: hepsi aynı renk. Küçük harf ve mono kalıyor çünkü bunlar alan
   adı; Türkçe’de büyük harfe çevirmek ayrıca risklidir (i → I). */
.ag-rozet { display: inline-block; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--t-meta); font-weight: 600; letter-spacing: .02em;
  color: var(--vurgu-deep); background: var(--vurgu-wash);
  border: 1px solid var(--vurgu); border-radius: var(--radius);
  padding: 3px 9px; white-space: nowrap; }

/* Eksik ÖLÇÜ ile onun EKRANDAKİ SONUCU ayrı şeyler; ikisi tek listede
   olsaydı "kök ölçülmedi" de bir veri alanı sanılırdı. */
.ag-sonuc { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule-strong); }
.ag-sonuc h4 { margin: 0 0 2px; font-size: var(--t-label); font-weight: 700;
  color: var(--ink-muted); }

/* Etiketli uyarı satırı: dar bir terim sütunu, yanında gerekçe.
   Eksik ölçüm bölümü yeniden yazılırken bu kural yanlışlıkla silinmiş
   ve kök bölümündeki "tavana girmez" satırı öksüz kalmıştı: etiket
   üstte, metin altında ve kabın tamamına yayılmış. */
.ag-uyari-satir { display: grid; gap: 4px 16px; align-items: baseline;
  grid-template-columns: 128px minmax(0, 1fr);
  padding: 10px 0 0; margin-top: 12px; border-top: 1px solid var(--rule); }
.ag-uyari-bas { display: inline-block; justify-self: start;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--t-meta); font-weight: 600; color: var(--vurgu-deep);
  background: var(--vurgu-wash); border: 1px solid var(--vurgu);
  border-radius: var(--radius); padding: 3px 9px; white-space: nowrap; }
.ag-uyari-satir p { margin: 0; font-size: var(--t-label); color: var(--ink-muted);
  max-width: 68ch; line-height: 1.55; }
.ag-uyari-satir p b { color: var(--ink); }

@media (max-width: 820px) {
  .ag-satir { grid-template-columns: 1fr; }
  .ag-hayalet-not dl > div { grid-template-columns: 1fr; }
  .ag-eksik > div, .ag-uyari-satir { grid-template-columns: 1fr; }
}

/* Kök bölümü — dayanıklılık ölçeği.
   Satır şeridi puan bandını taşıyor: zayıf, orta, güçlü. Üç bant çünkü
   ölçek 0-100 doğrusal ve HİÇBİR NORM BİLGİSİ TAŞIMIYOR; daha ince
   bir ayrım, olmayan bir normu varmış gibi gösterirdi. */
.ag-kok .ag-satir.k-yok { border-left-color: var(--rule-strong); }
.ag-kok .ag-satir.k-zayif { border-left-color: #C4482A; }
.ag-kok .ag-satir.k-orta { border-left-color: var(--warn); }
.ag-kok .ag-satir.k-guclu { border-left-color: #2E9E8B; }
.ag-sayac.olcum { color: var(--ok); background: var(--ok-wash); }

.ag-olcek-yonetim { margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--rule-strong); display: grid; gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.ag-olcek-kimlik { font-size: var(--t-label); display: flex; flex-direction: column;
  gap: 3px; max-width: 68ch; }
.ag-olcek-kimlik .faint { font-size: var(--t-meta); }
/* Türkçe uyarlamanın lise doğrulaması yok. Bu bir çekince ve ölçeği
   açan koç onu okumadan açmamalı. */
.ag-riziko { font-size: var(--t-meta); color: var(--warn);
  background: var(--warn-wash); border-radius: var(--radius);
  padding: 5px 9px; margin-top: 3px; }
.ag-olcek-yonetim > p { grid-column: 1 / -1; margin: 0; font-size: var(--t-meta); }
/* Ölçek açılamıyorsa sebebi ve gerekenler yazılı: kilitli bir düğme
   göstermek "neden" sorusunu cevapsız bırakırdı. */
.ag-olcek-engel { grid-column: 1 / -1; font-size: var(--t-label);
  border: 1px dashed var(--danger); border-radius: var(--radius);
  background: var(--danger-wash); padding: 10px 12px; max-width: 78ch; }

/* Taslak form damgası. Puanın çıktığı HER yerde görünür; bir yerde
   görünüp başka yerde görünmeseydi sayı, kaynağından kopmuş olarak
   dolaşmaya başlardı. */
.ag-taslak-rozet { font-size: 10px; font-weight: 700; color: var(--on-accent);
  background: var(--warn); border-radius: 999px; padding: 2px 9px;
  white-space: nowrap; }
.ag-taslak-not { margin: 0 0 12px; font-size: var(--t-label);
  border-left: 3px solid var(--warn); background: var(--warn-wash);
  border-radius: var(--radius); padding: 9px 12px; max-width: 74ch; }

/* Dayanıklılık ölçeği formu — öğrenci ekranı.
   Otuz madde alt alta. Okunabilirliği taşıyan iki karar: madde metni
   ile seçenekler AYNI satırda (göz aşağı inerken sütun kaymıyor), ve
   yanıtlanan madde işaretli kalıyor (nerede kaldığını arayıp bulmak
   zorunda değil). */
.ol-form { border: 1px solid var(--rule); border-radius: var(--radius-card);
  background: var(--surface); padding: 15px 17px; margin-top: 14px; }
.ol-ust { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.ol-ust h3 { margin: 0; font-size: var(--t-h3); }
.ol-ilerleme { margin-left: auto; font-size: var(--t-meta); font-weight: 700;
  color: var(--accent); background: var(--accent-wash); border-radius: 999px;
  padding: 2px 10px; white-space: nowrap; }
.ol-yonerge { margin: 0 0 10px; font-size: var(--t-label); color: var(--ink-muted);
  max-width: 72ch; }
/* Vinyet bir SENARYO, madde değil: ayrı bir yüzeyde durmalı yoksa
   öğrenci onu da işaretlenecek bir cümle sanır. */
.ol-vinyet { margin: 0 0 14px; padding: 11px 14px; border-left: 3px solid var(--accent);
  background: var(--surface-sunk); border-radius: var(--radius);
  font-size: var(--t-body); max-width: 76ch; }

.ol-liste { list-style: none; counter-reset: madde; margin: 0; padding: 0; }
/* Ucuncu sutun GERI AL dugmesi. Radio tarayicida geri alinamadigi icin
   her satirin kendi geri alma yolu var; sutun eklendi ki dugme
   secenekleri asagi itmesin. */
.ol-madde { display: grid; gap: 6px 14px; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto auto; counter-increment: madde;
  padding: 9px 0 9px 34px; border-bottom: 1px solid var(--rule); position: relative; }
.ol-madde:last-child { border-bottom: 0; }
/* Numara maddenin sırasını verir, sırası da gerçekten bilgi: öğrenci
   "kaçıncıdayım" diye soruyor. */
.ol-madde::before { content: counter(madde); position: absolute; left: 0;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--t-meta);
  color: var(--ink-faint); }
.ol-madde.dolu::before { color: var(--ok); font-weight: 700; }
.ol-madde.kaydediliyor { opacity: .55; }
.ol-metin { font-size: var(--t-body); }

.ol-secenekler { display: flex; gap: 4px; }
.ol-sec { cursor: pointer; }
.ol-sec input { position: absolute; opacity: 0; width: 0; height: 0; }
.ol-kutu { display: grid; place-items: center; width: 34px; height: 34px;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  font-size: var(--t-label); color: var(--ink-muted); transition: all .12s; }
.ol-sec:hover .ol-kutu { border-color: var(--accent); color: var(--ink); }
.ol-sec input:checked + .ol-kutu { background: var(--accent); color: var(--on-accent);
  border-color: var(--accent); font-weight: 700; }
/* Klavye kullanıcısı için odak görünür olmalı; input gizli olduğu için
   kutuya taşınıyor. */
.ol-sec input:focus-visible + .ol-kutu { outline: 2px solid var(--accent);
  outline-offset: 2px; }
.ol-uc-not { margin: 10px 0 0; font-size: var(--t-meta); color: var(--ink-muted); }

.ol-kapali, .ol-koc-not { margin-top: 14px; padding: 11px 13px;
  border: 1px dashed var(--rule-strong); border-radius: var(--radius);
  background: var(--surface-sunk); font-size: var(--t-label);
  color: var(--ink-muted); max-width: 74ch; }

@media (max-width: 620px) {
  .ol-madde { grid-template-columns: minmax(0, 1fr) auto; }
  /* Madde metni kendi satirini alir; secenekler ve geri al dugmesi
     altta yan yana durur. Dugme metnin altina duserse hangi maddeye
     ait oldugu okunmuyordu. */
  .ol-madde .ol-metin { grid-column: 1 / -1; }
}

/* Ölçek anahtarı. Düz bir düğme "aç/kapat" durumunu yalnız YAZIYLA
   taşıyordu; koç metni okumadan hangi durumda olduğunu göremiyordu.
   Anahtar durumu ŞEKİLLE gösteriyor, yazı da onu doğruluyor.
   role="switch" + aria-checked: ekran okuyucu da durumu alır. */
.ol-anahtar { display: inline-flex; align-items: center; gap: 11px;
  border: 1px solid var(--rule-strong); border-radius: 999px;
  background: var(--surface); padding: 7px 16px 7px 9px; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
  transition: border-color .16s, background .16s, box-shadow .16s; }
.ol-anahtar:hover { border-color: var(--accent); }
.ol-anahtar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ol-anahtar.acik { border-color: var(--ok); background: var(--ok-wash);
  box-shadow: inset 0 0 0 1px var(--ok-wash); }

.ol-anahtar-yuva { position: relative; width: 42px; height: 24px; flex: none;
  border-radius: 999px; background: var(--rule-strong);
  transition: background .18s; }
.ol-anahtar.acik .ol-anahtar-yuva { background: var(--ok); }
.ol-anahtar-top { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--surface);
  box-shadow: 0 1px 3px rgba(0,0,0,.28);
  transition: transform .18s cubic-bezier(.3,1.4,.5,1); }
.ol-anahtar.acik .ol-anahtar-top { transform: translateX(18px); }

.ol-anahtar-yazi { display: flex; flex-direction: column; line-height: 1.25; }
.ol-anahtar-yazi b { font-size: var(--t-label); }
.ol-anahtar-yazi i { font-style: normal; font-size: var(--t-meta);
  color: var(--ink-muted); }
.ol-anahtar[disabled] { opacity: .55; cursor: progress; }

@media (prefers-reduced-motion: reduce) {
  .ol-anahtar, .ol-anahtar-yuva, .ol-anahtar-top { transition: none; }
}

/* Koç ekranına düşen kayıt. */
/* Kayıt KATLANIR: otuz satır sürekli açık dururken ekranın geri kalanını
   (kök puanları, ağaç, ölçek yönetimi) aşağı ittiriyordu. Özet satırı
   kapalıyken de bilgi taşıyor — kaç madde, kaç düzeltme. */
.ol-kayit { border: 1px solid var(--rule); border-radius: var(--radius-card);
  background: var(--surface); margin-top: 14px; }
.ol-kayit-bas { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 13px 17px; cursor: pointer; list-style: none; }
.ol-kayit-bas::-webkit-details-marker { display: none; }
.ol-kayit-baslik { font-size: var(--t-h3); font-weight: 600; }
/* "aç" / "kapat" yazısı durumu söylüyor; üçgen işaret tek başına
   yeterince okunur değil ve tarayıcıdan tarayıcıya değişiyor. */
.ol-kayit-ac { margin-left: auto; font-size: var(--t-meta); color: var(--accent);
  border: 1px solid var(--rule-strong); border-radius: 999px; padding: 2px 10px; }
.ol-kayit[open] .ol-kayit-ac::after { content: none; }
.ol-kayit[open] .ol-kayit-ac { color: var(--ink-muted); }
.ol-kayit[open] .ol-kayit-bas { border-bottom: 1px solid var(--rule); }
.ol-kayit-govde { padding: 13px 17px 16px; }
.ol-kayit-ust { display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 6px; }
.ol-kayit-ust p { flex: 1; margin: 0; }
.ol-sil { flex: none; }
.ol-rozet { font-size: var(--t-meta); font-weight: 700; border-radius: 999px;
  padding: 2px 10px; white-space: nowrap; }
.ol-rozet.devam { color: var(--warn); background: var(--warn-wash); }
.ol-rozet.bitti { color: var(--ok); background: var(--ok-wash); }
.ol-rozet.duzeltme { color: var(--vurgu-deep); background: var(--vurgu-wash); }

.ol-kayit-liste { list-style: none; margin: 10px 0 0; padding: 0; }
.ol-kayit-satir { display: grid; gap: 4px 12px; align-items: center;
  grid-template-columns: 28px minmax(0, 1fr) 46px auto auto;
  padding: 7px 0; border-bottom: 1px solid var(--rule); }
.ol-kayit-satir:last-child { border-bottom: 0; }
/* Düzeltilmiş satır görünür kalır: bu yanıt öğrencinin kendi işareti
   değil ve okuyanın bunu bilmesi gerekiyor. */
.ol-kayit-satir.duzeltilmis { background: var(--vurgu-wash);
  box-shadow: inset 3px 0 0 var(--vurgu); padding-left: 8px; }
.ol-kayit-no { font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--t-meta); color: var(--ink-faint); }
.ol-kayit-metin { font-size: var(--t-label); }
.ol-ters { font-style: normal; font-size: 10px; margin-left: 6px;
  color: var(--ink-muted); border: 1px solid var(--rule-strong);
  border-radius: 3px; padding: 0 4px; }
.ol-kayit-boyut { font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 10px; color: var(--ink-muted); text-align: center; }
.ol-damga { grid-column: 2 / -1; font-size: 10px; font-weight: 700;
  color: var(--vurgu-deep); }
.ol-bitti { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--ok-wash); border-left: 3px solid var(--ok);
  font-size: var(--t-label); max-width: 74ch; }

@media (max-width: 700px) {
  .ol-kayit-satir { grid-template-columns: 28px minmax(0, 1fr); }
  .ol-kayit-satir .ol-secenekler, .ol-kayit-boyut { grid-column: 1 / -1; }
}

/* Ölçek önizlemesi — koç ekranı.
   KAPALI açılır: kayıt ve puanlar bu ekranın asıl işi; otuz madde
   sürekli açık dursaydı onları aşağı iterdi.
   Radio YOK, yalnız metin: görmek ile doldurmak ayrı şeyler. */
.ol-onizleme { border: 1px solid var(--rule); border-radius: var(--radius-card);
  background: var(--surface); margin-top: 14px; }
/* Onizleme, kayit ve dal tanilari AYNI DUZEYDE uc kart. Basliklari da
   ayni boyda olmali; onceden bu baslik --t-label, otekiler --t-h3 idi
   ve uc kart uc ayri hiyerarsi gosteriyordu. */
.ol-onizleme > summary { cursor: pointer; padding: 13px 17px;
  font-size: var(--t-h3); font-weight: 600; display: flex;
  align-items: center; gap: 9px; flex-wrap: wrap; list-style: none; }
.ol-onizleme > summary::-webkit-details-marker { display: none; }
.ol-onizleme > summary::marker { color: var(--ink-muted); }
.ol-onizleme[open] > summary { border-bottom: 1px solid var(--rule); }
/* AÇ/KAPAT İŞARETİ. Başlık tıklanabilir olduğunu tek başına
   söylemiyordu — imleç değişiyor ama fare üstüne gelmeden bu görünmez.
   YAZI SABİT, durumu OK gösteriyor: metin markup'ta duruyor (seçilebilir,
   kopyalanabilir) ve CSS content'e taşınmıyor — .yk-katla ile aynı desen. */
.ol-onizleme-ac { margin-left: auto; display: inline-flex; align-items: center;
  gap: 7px; font-size: var(--t-label); font-weight: 600; color: var(--accent); }
.ol-onizleme-ac::after {
  content: ''; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--dur) var(--ease);
}
.ol-onizleme[open] .ol-onizleme-ac::after { transform: rotate(-135deg) translate(-1px, -1px); }
@media (prefers-reduced-motion: reduce) { .ol-onizleme-ac::after { transition: none; } }
.ol-onizleme-not { font-weight: 500; font-size: var(--t-meta);
  color: var(--ink-muted); border: 1px solid var(--rule-strong);
  border-radius: 999px; padding: 1px 9px; }
.ol-onizleme-govde { padding: 12px 16px 16px; }
.ol-onizleme-liste { list-style: none; counter-reset: onz; margin: 12px 0 0; padding: 0; }
.ol-onizleme-liste li { display: grid; gap: 6px 12px; align-items: center;
  grid-template-columns: 28px minmax(0, 1fr) 46px auto auto;
  padding: 6px 0; border-bottom: 1px solid var(--rule); }
/* Kutular GORUNUR ama CALISMAZ: koç formun gerçek hâlini görmeli,
   ama işaretleyememeli. <input> değil <span> oldukları için tıklama ve
   klavye zaten ulaşmıyor; soluk görünüm bunu göze de söylüyor. */
.ol-secenekler.pasif { opacity: .45; pointer-events: none; }
.ol-secenekler.pasif .ol-kutu { width: 28px; height: 28px; font-size: var(--t-meta); }
.ol-onizleme-liste li:last-child { border-bottom: 0; }

/* GEÇİCİ test modu. Kaldırılacak — bu blok da o gün silinir.
   Kesikli turuncu çerçeve "bu normal bir ekran değil" diyor: koçun
   kendi doldurduğu bir ölçek geçerli bir ölçüm değildir ve ekranın
   bunu her bakışta hatırlatması gerekiyor. */
.ol-onizleme.test { border-color: var(--warn); border-style: dashed; }
.ol-onizleme-not.test { color: var(--on-accent); background: var(--warn);
  border-color: var(--warn); font-weight: 700; }
.ol-test-uyari { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius);
  background: var(--warn-wash); border-left: 3px solid var(--warn);
  font-size: var(--t-label); max-width: 74ch; line-height: 1.55; }
.ol-test-uyari code { font-size: var(--t-meta); background: var(--surface-sunk);
  border-radius: 3px; padding: 1px 5px; }

/* Kayıt geri bildirimi. Anında kayıtta kullanıcının elinde hiçbir kanıt
   yoktu: işareti koydu ama yazıldı mı bilmiyordu. Satır bir kez yeşil
   yanıp sönüyor, sayaç da artıyor. */
@keyframes ol-kaydedildi {
  from { background: var(--ok-wash); }
  to { background: transparent; }
}
.ol-onizleme-liste li.yeni, .ol-madde.yeni { animation: ol-kaydedildi .9s ease-out; }
.ol-onizleme-liste li.kaydedildi .ol-kayit-no { color: var(--ok); font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .ol-onizleme-liste li.yeni, .ol-madde.yeni { animation: none; }
}

/* Form altı şerit: kaç madde kaydedildi ve neden kaydet düğmesi yok. */
.ol-serit { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
.ol-serit-sayac { font-size: var(--t-label); font-weight: 600;
  color: var(--ok); background: var(--ok-wash); border-radius: 999px;
  padding: 4px 12px; white-space: nowrap; }
.ol-serit-not { font-size: var(--t-meta); color: var(--ink-muted); max-width: 52ch; }
.ol-bitir { margin-left: auto; }

/* Tek maddenin yanıtını silme. Bütün kaydı silmek çok kaba: bir maddeyi
   yanlış işaretlemiş olmak otuz maddeyi feda ettirmemeli.
   Kendi düğme stilini KURMUYOR, .btn ailesini kullanıyor; yalnızca
   kare orana çekiliyor çünkü içinde yalnız ikon var. */
.ol-satir-sil { width: 30px; padding: 0; }
.ol-satir-sil:hover:not(:disabled) { color: var(--danger); background: var(--danger-wash); }
/* Bos maddede geri alinacak bir sey yok. Dugme GIZLENMIYOR, soluyor:
   gizlenseydi satirlar bir dolup bir bosaldikca hizalama oynardi ve
   ogrenci dugmenin nerede oldugunu her seferinde yeniden ararsi. */
.ol-satir-sil:disabled { opacity: .28; cursor: default; }

/* Olcegi bitirme onayi. Once son maddeye isaret konar konmaz olcek
   kendiliginden kapaniyordu ve otuzuncu maddeye yanlis tiklamak
   duzeltilemez oluyordu. Serit bitirmeden once bir duraklama veriyor. */
.ol-onay { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  margin-top: 12px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--ok-wash); border-left: 3px solid var(--ok);
  font-size: var(--t-label); line-height: 1.55; max-width: 74ch; }
.ol-onay .ol-bitir { margin-left: auto; }

/* Ders bazında hata nedeni değişimi.
   Yığılmış alan seçildi çünkü soru "hangi neden kaç tane" değil,
   "yanlışların BİLEŞİMİ değişti mi". Altı ayrı çizgi üst üste binince
   hiçbiri okunmuyordu. */
.ka-seri-sar { display: grid; gap: 14px; }
.ka-seri-lejant { display: flex; flex-wrap: wrap; gap: 5px; }
.ka-seri-cip { display: flex; align-items: center; gap: 5px; font-size: var(--t-meta);
  color: var(--ink-muted); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 3px 8px; }
.ka-seri-cip i { width: 9px; height: 9px; border-radius: 2px; display: block; }

.ka-seri-ders { border: 1px solid var(--rule); border-radius: var(--radius-card);
  background: var(--surface); padding: 12px 14px; }
.ka-seri-bas { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  margin-bottom: 8px; }
.ka-seri-bas h5 { margin: 0; font-size: var(--t-body); font-weight: 700; }
/* TUVAL GENISLIGI ARTIK VERIDEN GELIYOR (konu-analiz-saf.js): tarih
   araligi tuvale gerilmiyor, gun sayisiyla orantili yer kapliyor. Bu
   yuzden grafik width:100% ile ESNETILMEZ — esnetilse orantı bozulur ve
   iki deneme kac gun arayla girilirse girilsin ayni gorunurdu.
   Yukseklik sabit kaliyor: dersler birbiriyle karsilastirilabilsin. */
.ka-seri-kaydir { overflow-x: auto; margin: 0 -2px; padding: 0 2px; }
.ka-seri { display: block; height: 168px; width: auto; max-width: none; }
/* Sutunun arkasindaki yatak: yiginin nerede bittigi degil, %100'un
   nerede oldugu gorunur. Oransal grafikte yigin her zaman tavana
   dayanir, ama yatak sutunun sinirlarini belli eder. */
.ka-seri-yatak { fill: var(--surface-sunk); }
/* Dilimler arasinda sac teli ayrim: bitisik iki renk tek blok gibi
   okunmasin. Kontur yuzey rengiyle, yani araya bosluk giriyor. */
.ka-seri-dilim { stroke: var(--surface); stroke-width: .75; }
.ka-seri-izgara { stroke: var(--rule); stroke-width: 1; }
.ka-seri-taban { stroke: var(--rule-strong); stroke-width: 1; }
/* Eksen yazilari CSS'ten: SVG icinde font-size yazmak, kabin punto
   olcegiyle bagini koparirdi. */
.ka-seri-eksen { font-size: 9.5px; fill: var(--ink-muted);
  font-family: ui-monospace, Menlo, Consolas, monospace; }
.ka-seri-eksen.sonuc { fill: var(--ink-faint); }
/* Sutun uzerine gelince oteki sutunlar soluyor: karsilastirma tek
   sutuna odaklanmayi kolaylastiriyor. */
.ka-seri:hover .ka-sutun { opacity: .45; transition: opacity .12s; }
.ka-seri .ka-sutun:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ka-seri .ka-sutun { transition: none; } }
.ka-seri-not { margin: 8px 0 0; font-size: var(--t-label); max-width: 60ch; }
.ka-seri-az { margin: 0; font-size: var(--t-label); color: var(--ink-muted); }

/* Konu çelişkisi: harita ile kayıtta seçilen konu farklı. Sessizce
   harita uygulanıp geçilseydi, koçun bilerek yaptığı bir seçimin
   ezildiği hiçbir yerde görünmezdi. */
.sk-celiski { font-size: var(--t-label); display: flex; flex-wrap: wrap;
  align-items: baseline; gap: 6px; max-width: 78ch; }
.sk-celiski-oge { font-size: var(--t-meta); font-weight: 600;
  background: var(--warn-wash); color: var(--warn);
  border-radius: var(--radius); padding: 2px 8px; }

/* Toplam kırılım: kapalı açılır. Bu ekranın asıl işi GİRİŞ; derse ve
   sınıfa göre dağılım okuma işidir ve sürekli açık dursa ızgarayı
   aşağı iterdi. Grafikler zaten yukarıdaki tempo panelinde. */
.kr-katla { margin-top: 14px; border-top: 1px solid var(--rule); padding-top: 10px; }
.kr-katla > summary { cursor: pointer; font-size: var(--t-label); font-weight: 600;
  color: var(--ink-muted); padding: 4px 0; }
.kr-katla[open] > summary { color: var(--ink); margin-bottom: 8px; }

/* Toplu giriş sütunu: gün gün girmek istemeyen için ders bazında
   haftalık toplam. Gün girilmiş derste kutu ÇİZİLMEZ, çünkü çift
   sayma kuralı gereği o değer okunmazdı ve kullanıcı girdisinin
   kaybolduğunu göremezdi. */
.gk-toplu-bas { text-align: center; font-size: var(--t-meta); }
.gk-toplu-bas span { display: block; font-size: 10px; font-weight: 400;
  color: var(--ink-faint); }
.gk-toplu { width: 100%; min-width: 68px; text-align: center;
  border: 1px dashed var(--rule-strong); border-radius: var(--radius);
  padding: 5px 4px; font: inherit; background: var(--surface-sunk); }
.gk-toplu:focus { outline: 2px solid var(--accent); outline-offset: 1px;
  border-style: solid; border-color: var(--accent); background: var(--surface); }
/* Gün girişi olan derste toplu kutusu da var ama UYARI RENGINDE:
   ikisi toplanmaz, toplu değer yazılırsa günler silinir. Kutuyu hiç
   çizmemek sütunu yarım gösteriyordu; renksiz çizmek ise çakışmayı
   kaydetme anına saklardı. */
.gk-toplu.cakisan { border-color: var(--warn); border-style: solid;
  background: var(--warn-wash); }
.gk-toplu.cakisan:focus { border-color: var(--warn); outline-color: var(--warn); }

/* ---- Deneme kaydi: BOLUM NETI IZGARASI ---- */
/* Deneme once toplam netiyle ekleniyor, sonra "Dersler" dugmesine basilip
   bolum netleri tek tek giriliyordu: ders adini yaz, neti yaz, Ekle'ye bas,
   tekrarla. Bir TYT denemesi bes ayri islem demekti. Bolumler zaten
   biliniyor; izgara hepsini bir anda gosteriyor. Koc ve ogrenci ekrani ayni
   izgarayi kullanir (deneme-giris-saf.js). */
.dn-bolum-alan { display: grid; gap: var(--space-2); }
.dn-bolum-baslik { font-size: var(--t-label); font-weight: 600; color: var(--ink); }
.dn-bolumler { display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
.dn-bolum { display: grid; gap: 3px; min-width: 0; }
/* Maksimum netin ADIN YANINDA olmasi bir olcu: "40" gorunce kullanici
   yazdigi sayinin makul olup olmadigini yazarken anliyor, kaydettikten
   sonra degil. */
.dn-bolum-ad { font-size: var(--t-meta); color: var(--ink-muted);
  overflow-wrap: anywhere; }
.dn-bolum-ad small { font-family: var(--font-num); color: var(--ink-faint);
  margin-left: 3px; }
.dn-bolum-net { width: 100%; font: inherit; font-family: var(--font-num);
  text-align: center; padding: 7px 6px; border: 1px solid var(--rule);
  border-radius: var(--radius); background: var(--surface); color: var(--ink); }
.dn-bolum-net:focus { outline: 2px solid var(--focus); outline-offset: 1px;
  border-color: var(--accent); }
.dn-bolum-yok { font-size: var(--t-label); color: var(--ink-muted); margin: 0; }
/* Toplamin nereden geldigini (ya da neden gelmedigini) soyleyen satir.
   Kilitli bir alanin neden kilitli oldugu yazmazsa kusur gibi okunur. */
.dn-toplam-not { font-size: var(--t-meta); color: var(--ink-muted);
  line-height: 1.5; margin: 0; max-width: 78ch; }
.dn-toplam-not b { color: var(--ink); }
/* Toplam alani bolumler tamken kilitleniyor; kilitli oldugu GORUNMELI,
   yoksa kullanici yazamamasini kusur sanir. */
#dnNet[readonly], #denemeNet[readonly] {
  background: var(--surface-sunk); color: var(--ink-muted); cursor: not-allowed; }

/* Duzeltme paneli basligi ve eylem satiri */
.dn-duz-baslik { display: flex; align-items: baseline; gap: var(--space-2);
  font-size: var(--t-label); color: var(--ink); margin-bottom: var(--space-2); }
.dn-duz-tur { font-size: var(--t-meta); font-weight: 500; color: var(--ink-muted);
  border: 1px solid var(--rule); border-radius: 999px; padding: 1px 8px; }
.dn-duz-eylem { display: flex; align-items: center; justify-content: flex-end;
  gap: var(--space-3); margin-top: var(--space-3); }

/* ================= HEDEF ve GERCEKLESEN (Power BI KPI gorseli) ==========
   Yapi Power BI'in KPI gorselinden: callout value (buyuk sayi), target
   label (hedef), distance to goal (mesafe cumlesi), trend axis (arkadaki
   kivilcim). Kaynak: learn.microsoft.com/power-bi/visuals/
   power-bi-visualization-kpi

   UC BOYUTLU GEOMETRI YOK — Power BI'in kendi kilavuzu iki yerde
   yasakliyor ("Avoid visuals that are hard to read, such as 3D charts").
   Derinlik ISIKTAN geliyor: katmanli golge, yumusak gecis, ic parlaklik.
   Uzunluklar tek eksende ve gercek oranda kaliyor. */
.hd-panel { display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.hd-kart { position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid var(--rule); border-radius: var(--radius-card);
  padding: var(--space-3);
  /* Uc katmanli golge: sac teli kenar + yakin temas + genis yayilim.
     Tek golge duz bir kart verir; uc katman yuzeyin kagittan bir tik
     yukarida durdugunu hissettirir. */
  box-shadow:
    0 0 0 1px rgb(0 0 0 / .015),
    0 1px 2px rgb(0 0 0 / .05),
    0 6px 16px -8px rgb(0 0 0 / .16);
}
.hd-kart.ulasti { border-color: color-mix(in srgb, var(--ok) 35%, var(--rule)); }
/* Uzerine gelince bir tik yukari: derinlik hissi hareketle pekisiyor,
   ama olcu degismiyor — kalkan kart, uzayan cubuk degil. */
/* .hd-kart TIKLANMIYOR, o yuzden kalkmasi kaldirildi: kalkan kart
   "beni tikla" der ve tutamayacagi bir vaat verir. Yerine ortak kenar
   isigi kaldi. */

/* Egilim, sayinin ARKASINDA ve onunla yarismadan. Power BI'da "Trend
   axis" ayni yerde durur. */
/* Kivilcim kartin ARKASINDA ama kart arka planinin ONUNDE durmali.
   z-index:-1 kullanilsaydi izole yiginda kartin kendi arka planinin
   altina duser ve hic gorunmezdi; icerik yukari alinarak cozuluyor. */
.hd-kivilcim-yuva { position: absolute; inset: auto 0 0 0; height: 46px;
  z-index: 0; opacity: .5; pointer-events: none; }
.hd-bas, .hd-sayilar, .hd-ray, .hd-mesafe, .hd-alt { position: relative; z-index: 1; }
.hd-kivilcim { width: 100%; height: 100%; display: block; }
.hd-kivilcim-cizgi { stroke: var(--accent); stroke-width: 1.6;
  vector-effect: non-scaling-stroke; }
.hd-kivilcim-alan { fill: var(--accent); opacity: .1; }
.hd-kivilcim-uc { fill: var(--accent); }
.hd-kivilcim.ulasti .hd-kivilcim-cizgi, .hd-kivilcim.ulasti .hd-kivilcim-uc {
  stroke: var(--ok); fill: var(--ok); }
.hd-kivilcim.ulasti .hd-kivilcim-alan { fill: var(--ok); }

.hd-bas { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-2); margin-bottom: 6px; }
.hd-tur { font-size: var(--t-label); font-weight: 700; color: var(--ink);
  letter-spacing: .02em; }
.hd-adet { font-size: var(--t-meta); color: var(--ink-faint); }

.hd-sayilar { display: flex; align-items: baseline; gap: var(--space-2);
  flex-wrap: wrap; margin-bottom: 8px; }
/* Callout value: kartin tek kahramani. Geri kalan her sey ondan kucuk. */
.hd-deger { font-family: var(--font-num); font-size: 2rem; font-weight: 700;
  line-height: 1; color: var(--ink); letter-spacing: -.02em; }
.hd-deger small { font-size: var(--t-meta); font-weight: 500;
  color: var(--ink-faint); margin-left: 3px; letter-spacing: 0; }
.hd-degisim { font-family: var(--font-num); font-size: var(--t-meta);
  font-weight: 600; padding: 1px 6px; border-radius: 999px; }
.hd-degisim.artis { color: var(--ok);
  background: color-mix(in srgb, var(--ok) 12%, transparent); }
.hd-degisim.dusus { color: var(--warn); background: var(--warn-wash); }
.hd-hedef { margin-left: auto; font-size: var(--t-meta); color: var(--ink-muted); }
.hd-hedef b { font-family: var(--font-num); color: var(--ink); }

/* Kiyas rayi. Ray = sinavin toplam sorusu, dolgu = son net, dikey cizgi
   = hedef. Power BI kilavuzu karsilastirma icin cubuk oneriyor. */
.hd-ray { margin: 0 0 8px; }
.hd-ray-tuval { display: block; width: 100%; height: 14px; }
.hd-ray-yatak { fill: var(--surface-sunk); stroke: var(--rule); stroke-width: .5; }
.hd-gecis-ust { stop-color: color-mix(in srgb, var(--accent) 78%, white); }
.hd-gecis-alt { stop-color: var(--accent); }
.hd-ray-dolgu.ulasti { filter: none; }
.hd-kart.ulasti .hd-gecis-ust { stop-color: color-mix(in srgb, var(--ok) 78%, white); }
.hd-kart.ulasti .hd-gecis-alt { stop-color: var(--ok); }
/* Hedef isareti ray dolgusunun USTUNDE ve daha uzun: karar olcumun
   onunde durur, arkasinda kaybolmaz. */
.hd-ray-hedef { fill: var(--ink); }

.hd-mesafe { font-size: var(--t-label); color: var(--ink-muted);
  margin: 0 0 2px; line-height: 1.45; }
.hd-kart.ulasti .hd-mesafe { color: var(--ok); font-weight: 600; }
.hd-kart.uzak .hd-mesafe { color: var(--ink); }
.hd-oran { font-family: var(--font-num); color: var(--ink-faint); font-weight: 500; }
.hd-alt { font-size: var(--t-meta); color: var(--ink-faint); margin: 0; }
.hd-not { font-size: var(--t-meta); color: var(--ink-muted); line-height: 1.5;
  margin: var(--space-3) 0 0; max-width: 78ch; }
.hd-not b { color: var(--ink); }

/* ================= TASARIM SISTEMI SAYFASI (tasarim-sistemi.html) ======
   Figma'nin degisken/koleksiyon/kip/takma ad yapisini depoda gosteren
   sayfa. Ornekler var(--token) ile ciziliyor; buradaki hicbir kural token
   DEGERINI kopyalamaz. */
.ts-sayfa { max-width: 68rem; margin: 0 auto; padding: var(--space-6) var(--space-4); }
.ts-bas h1 { margin: 0 0 var(--space-2); }
.ts-alt { font-size: var(--t-body); color: var(--ink-muted); line-height: 1.6;
  max-width: 68ch; margin: 0 0 var(--space-4); }
.ts-eylem { display: flex; gap: var(--space-2); flex-wrap: wrap;
  margin-bottom: var(--space-6); }

.ts-mimari { background: var(--surface); border: var(--card-border);
  border-radius: var(--radius-card); padding: var(--space-4);
  margin-bottom: var(--space-5); box-shadow: var(--shadow-card); }
.ts-mimari h2 { margin: 0 0 var(--space-2); font-size: var(--t-h3); }
.ts-mimari p { font-size: var(--t-label); color: var(--ink-muted);
  line-height: 1.6; max-width: 68ch; margin: 0 0 var(--space-3); }
.ts-tablo { width: 100%; border-collapse: collapse; font-size: var(--t-label); }
.ts-tablo th, .ts-tablo td { text-align: left; padding: 6px 10px 6px 0;
  border-bottom: 1px solid var(--rule); }
.ts-tablo th { font-size: var(--t-meta); color: var(--ink-faint);
  font-weight: 600; text-transform: none; }
.ts-tablo td:first-child { color: var(--ink-muted); width: 12rem; }
.ts-mimari-not { margin-top: var(--space-3) !important; }

.ts-koleksiyon { background: var(--surface); border: var(--card-border);
  border-radius: var(--radius-card); padding: var(--space-4);
  margin-bottom: var(--space-4); box-shadow: var(--shadow-card); }
.ts-kol-bas { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); margin-bottom: 4px; }
.ts-kol-bas h3 { margin: 0; font-size: var(--t-h3); }
.ts-kol-adet { font-size: var(--t-meta); color: var(--ink-faint);
  font-family: var(--font-num); }
.ts-kol-not { font-size: var(--t-label); color: var(--ink-muted);
  line-height: 1.55; margin: 0 0 var(--space-3); max-width: 72ch; }

.ts-izgara { display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.ts-token { display: grid; gap: 3px; min-width: 0; }
.ts-ad { font-family: var(--font-num); font-size: var(--t-meta); color: var(--ink);
  overflow-wrap: anywhere; }
.ts-deger, .ts-takma, .ts-karanlik { font-size: var(--t-meta); color: var(--ink-faint);
  overflow-wrap: anywhere; }
.ts-takma code { color: var(--accent); }

/* Ornekler. Zemin/punto/genislik hep var(--token) ile geliyor. */
.ts-renk { display: block; height: 40px; border-radius: var(--radius);
  border: 1px solid var(--rule); }
.ts-tip-ornek { display: block; line-height: 1.1; color: var(--ink);
  font-family: var(--font-display); }
.ts-aralik-ornek { display: block; height: 12px; background: var(--accent);
  border-radius: 2px; min-width: 2px; }
.ts-golge-ornek { display: block; height: 40px; border-radius: var(--radius);
  background: var(--surface); }
.ts-bicim-ornek { display: block; height: 40px; background: var(--accent-wash);
  border: 1px solid var(--accent-t2); }

.ts-bilesen { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.ts-varyant { display: grid; gap: 4px; justify-items: start; }

/* Denetim once geliyor: bir sey kiriksa once o gorunmeli. */
.ts-denetim { border-color: var(--warn); }
.ts-denetim.temiz { border-color: var(--rule-strong); }
.ts-denetim-blok { font-size: var(--t-label); margin-bottom: var(--space-3); }
.ts-denetim-blok ul { margin: 4px 0 0; padding-left: 1.1rem; color: var(--ink-muted); }
.ts-denetim-blok li { margin-bottom: 2px; }

/* Tasarim sistemi ornek yerlesimleri. Bilesenin dogal genisligine gore
   iki duzen: yatayda karsilastirilanlar izgarada, dikey okunanlar alt
   alta. */
.ts-ornek.izgara { display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); align-items: start; }
.ts-ornek.dikey { display: grid; gap: var(--space-4); max-width: 34rem; }
.ts-ornek > div { display: grid; gap: 4px; }

/* ================= PANO: KADEME, YUZEY, ISIK =========================
   Uc tasarim agentinin ortak teshisi: panoda on bir kutu var ve on biri
   de ayni zemin, ayni cerceve, ayni golge. Goz nereye bakacagini
   bilmiyordu. Ucu de bagimsiz olarak "her panele renk ver" fikrini
   REDDETTI: kirmizi bu panoda zaten aciliyet demek, dekoratif kirmizi
   girerse takvim rozetinin anlami zayiflar.
   Cozum kademe: kahraman / birincil / geri cekilmis. Fark ISIK ve
   PUNTODAN geliyor, renkten degil. */

/* --- Ortak kart yuzeyi ---
   Begenilen .hd-kart dili tokene cikti; artik butun kartlar ayni
   receteyi okuyor. Yeni bir dil icat edilmedi. */
.db-kutu,
.kpi,
.hd-kart,
.isikli {
  position: relative;
  background: var(--surface-kart);
}

/* Ust kenarda 1px isik. Kartin RENGI degil, yalniz kenari degisiyor.
   Parlak nokta --isik-x'te; varsayilani orta. */
.db-kutu::before,
.kpi::before,
.hd-kart::before,
.isikli::before {
  content: "";
  position: absolute;
  inset: 0 8px auto 8px;          /* kose yuvarlagina girmesin */
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%,
    var(--shadow-ust-isik) var(--isik-x, 50%), transparent 100%);
}

/* --- Kademe 1: kahraman ---
   Panonun cevapladigi asil soru "hedefe ne kadar kaldi". Kahraman bir
   PANEL DEGIL, bir ROL: cizilen ilk oncelikli panele veriliyor. Veri
   yoksa rol de yok, pano bugunku gibi cizilir. */
.db-kutu.db-kahraman {
  grid-column: 1 / -1;
  padding: var(--space-5);
  border-color: var(--rule-strong);
  box-shadow:
    0 0 0 1px rgb(0 0 0 / .015),
    0 2px 4px rgb(0 0 0 / .06),
    0 14px 28px -12px rgb(0 0 0 / .18),
    inset 0 1px 0 rgb(255 255 255 / .9);
}
.db-kahraman .db-baslik { margin-bottom: var(--space-4); }
.db-kahraman .db-baslik h3 { font-size: var(--t-h2); }
.db-kahraman .hd-deger { font-size: var(--t-num); }
.db-kahraman .hd-panel { gap: var(--space-4); }

/* --- Kademe 3: ray ve davet, geri cekilir ---
   Golge YUKSELTI demek. On bir kutu ayni yukseklikteyken hicbiri
   yukselmis sayilmiyordu. Ray artik kagidin icinde oyulmus duruyor. */
.oz-sayaclar .kpi {
  background: var(--surface-sunk);
  border: 1px solid var(--rule);
  box-shadow: none;
  padding: var(--space-2) var(--space-3);
}
.oz-sayaclar .kpi-deger { font-size: var(--kpi-sayi-boy-ray); }
.oz-sayaclar .kpi.tiklanir:hover { background: var(--surface); border-color: var(--accent); }
.db-kutu.db-davet {
  background: var(--surface-sunk);
  border: 1px solid var(--rule);
  box-shadow: none;
}
.db-davet::before { display: none; }

/* Ray obek etiketi. Buyuk harfe CSS ile CEVRILMIYOR (madde 1.2). */


/* Panel ici duz KPI ve takvim gunu ayni sayi basamagina oturdu. */
.db-takvim-gun { font-size: var(--kpi-sayi-boy-ray); }

/* --- Kalkma YALNIZ tiklanabilir kartlarda ---
   Hareket bir vaattir: kalkan kart "beni tikla" der. .db-kutu
   tiklanmiyor, kalkmiyor. .hd-kart da tiklanmiyor; kalkmasi kaldirildi
   ve yerine kenar isigi birakildi. */
@media (hover: hover) {
  .kpi.tiklanir, .pn-kutu[data-sekme] {
    transition: transform var(--dur) var(--ease),
      box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .kpi.tiklanir:hover, .pn-kutu[data-sekme]:hover {
    transform: translateY(calc(-1 * var(--kart-kalkma)));
    box-shadow: var(--shadow-card-hover);
    border-color: var(--accent);
  }
}
/* Odak, hover ile AYNI dili konusur: ayni eylem iki giris yolundan ayni
   gorunmeli. --isik-x ortaya kilitleniyor ki imlec baska yerde gezerken
   odak kartinin isigi kaymasin. */
.kpi.tiklanir:focus-visible, .pn-kutu[data-sekme]:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
  border-color: var(--accent); box-shadow: var(--shadow-card-hover);
  --isik-x: 50%;
}
@media (prefers-reduced-motion: reduce) {
  .kpi.tiklanir, .pn-kutu[data-sekme] { transition: none; }
  .kpi.tiklanir:hover, .pn-kutu[data-sekme]:hover { transform: none; }
  .db-kutu, .kpi, .hd-kart, .isikli { --isik-x: 50%; }
}

/* --- Veri serisi renkleri ---
   Hedef isareti artik turuncu: teal dolgu uzerinde ayrisiyor. Ikinci
   sinav turunun kivilcimi macenta. Ucu de metin etiketiyle destekli,
   renk tek kanal degil. */
.hd-ray-hedef { fill: var(--veri-hedef); }
.hd-kart:nth-child(2) .hd-kivilcim-cizgi,
.hd-kart:nth-child(2) .hd-kivilcim-uc { stroke: var(--veri-ikincil); fill: var(--veri-ikincil); }
.hd-kart:nth-child(2) .hd-kivilcim-alan { fill: var(--veri-ikincil); }
.db-halka-oge:nth-child(2) .pn-halka circle:last-of-type { stroke: var(--veri-ikincil); }

/* ================= BEN BİR AĞACIM: BAHÇE =============================
   Mimari degisti: tek agac ve bes dal yerine BES AYRI BITKI ve uc
   toprak katmani. Sebep, bes alanin birbirinden DALLANMAMASI; akademi
   ile sanat ayni govdeden cikmiyor, yan yana duran bes olcum. Ayni sey
   ARS-30'un uc alt boyutu icin de gecerli.

   RENKLER TOKENDEN. Kaynak tasarimda iki sabit palet ve ham hex vardi;
   buraya oyle tasinmadi. Bahce portalin temasini kendiliginden takip
   ediyor ve iki tema icin iki palet bakimi gerekmiyor. */
:root {
  --bh-gok:        var(--surface-sunk);
  --bh-yer:        color-mix(in srgb, var(--warn) 8%, var(--surface-sunk));
  --bh-govde:      var(--durum-iyi);
  --bh-yaprak:     color-mix(in srgb, var(--durum-iyi) 78%, var(--surface));
  --bh-yaprak-ac:  color-mix(in srgb, var(--durum-iyi) 52%, var(--surface));
  --bh-cicek:      var(--veri-hedef);
  --bh-meyve:      var(--vurgu-deep);
  --bh-toprak-1:   color-mix(in srgb, var(--warn) 22%, var(--surface-sunk));
  --bh-toprak-2:   color-mix(in srgb, var(--warn) 34%, var(--surface-sunk));
  --bh-toprak-3:   color-mix(in srgb, var(--warn) 46%, var(--surface-sunk));
  --bh-sahne-y:    560px;
}

.pr-bahce { display: grid; gap: var(--space-4); }
.bh-duzen { display: grid; gap: var(--space-4); align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem); }
.bh-sahne, .bh-yan { background: var(--surface-kart); border: var(--card-border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--space-3); }
.bh-tuval { display: block; width: 100%; height: auto; }

.bh-gok { fill: var(--bh-gok); }
.bh-yer { fill: var(--bh-yer); }
.bh-eksen-cizgi { stroke: var(--eksen-cizgi); stroke-width: 1; stroke-dasharray: 2 5; }
/* AY ÇENTİKLERİ YALNIZ OLUKTA, tuvalin içinde değil: kırk çizgiyi
   tuval boyunca çekmek bitkilerin üzerini tarardı. Cetvelin kenarında
   duran kısa çentikler aynı bilgiyi gürültü üretmeden veriyor.
   Altı ayda bir uzun çentik — okul yılı Eylül'de başladığı için altıncı
   ay ŞUBAT, yani ikinci dönemin başı. */
.bh-centik { stroke: var(--eksen-cizgi); stroke-width: 1; opacity: .5; }
/* Ay adı YALNIZ YER VARSA yazılıyor (bahce-saf.js: ay başına 11
   pikselden az düşüyorsa hiç yazılmıyor). Üst üste binen bir etiket
   cetveli okunmaz yapar; yarıya kesik bir ay adı da ay adı değildir. */
.bh-ay-etiket { font-size: 8px; fill: var(--ink-faint);
  font-family: var(--font-num); letter-spacing: .02em; }
.bh-centik.donem { opacity: .9; }
.bh-eksen-etiket, .bh-zemin-etiket { font-size: 9px; fill: var(--ink-muted);
  font-family: var(--font-num); }
.bh-zemin-etiket { letter-spacing: 1.2px; font-size: 8px; }

/* Bitki. Her gorsel degisken TEK bir olcuye bagli; ayrintisi
   bahce-saf.js yorumunda. */
.bh-govde, .bh-sap { stroke: var(--bh-govde); }
.bh-govde { fill: var(--bh-govde); stroke: none; }
.bh-sap { stroke-width: 1.4; stroke-linecap: round; }
.bh-yaprak { fill: var(--bh-yaprak); }
.bh-yaprak.acik { fill: var(--bh-yaprak-ac); }
.bh-damar { stroke: var(--surface); stroke-width: 1; opacity: .6; }
.bh-cicek circle { fill: var(--surface); stroke: var(--bh-cicek); stroke-width: 2; }
.bh-cicek-oz { fill: var(--bh-cicek) !important; stroke: none !important; }
.bh-meyve circle { fill: var(--bh-meyve); }
.bh-meyve-isik { fill: #fff; opacity: .42; }
.bh-sacak { stroke: var(--ink-faint); opacity: .5; }
.bh-golge { fill: var(--ink); opacity: .12; }

/* KAYIT YOK: tohum, kesik cizgili. "Zayif" demiyoruz, "bilinmiyor"
   diyoruz; kesik cizgi de bunu soyluyor. */
.bh-tohum path { fill: var(--bh-toprak-1); stroke: var(--ink-faint);
  stroke-width: 1.1; stroke-dasharray: 3 3; }
.bh-hayalet { stroke: var(--ink-faint); stroke-width: 1.6;
  stroke-dasharray: 4 4; opacity: .55; fill: none !important; }

.bh-vurus { fill: transparent; }
.bh-etiket-zemin { fill: var(--surface); opacity: .92; }
.bh-etiket { font-size: 10.5px; fill: var(--ink); }
.bh-etiket.bos { fill: var(--ink-muted); }

/* Toprak katmanlari. Kalinlik = puan, kesik ust sinir = eksik madde.
   Renk SIRA bildirir, yargi degil: 60/40 gibi bir kesme noktasi bu
   olcekte dogrulanmadi (TR uyarlamasi taslak). */
.bh-katman.k0 .bh-katman-dolgu { fill: var(--bh-toprak-1); }
.bh-katman.k1 .bh-katman-dolgu { fill: var(--bh-toprak-2); }
.bh-katman.k2 .bh-katman-dolgu { fill: var(--bh-toprak-3); }
.bh-katman-kesik { stroke: var(--ink-muted); stroke-width: 1.1;
  stroke-dasharray: 5 4; opacity: .7; }
.bh-katman.olculmedi .bh-katman-dolgu { opacity: .45; }
.bh-katman-kod { font-size: 9.5px; fill: var(--ink); font-family: var(--font-num); }
.bh-katman-puan { font-size: 9px; fill: var(--ink-muted); font-family: var(--font-num); }
.bh-anakaya { stroke: var(--rule-strong); stroke-width: 1.4; }

/* Vurgu: uzerine gelinen oge one cikar, otekiler soluklasir. Hareket
   yok, yalniz opaklik; azaltilmis harekette de calisir. */
.bh-alan, .bh-katman { cursor: pointer; }
.bh-alan:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bh-tuval.secim .bh-alan:not(.secili),
.bh-tuval.secim .bh-katman:not(.secili) { opacity: .4; }

/* Yan panel. Butun paneller cizilir, biri acik durur: secim bir CSS
   sinifi, veri degil. */
.bh-panel { display: none; }
.bh-panel.acik { display: block; }
.bh-yan:not(:has(.bh-panel.acik)) .bh-varsayilan { display: block; }
.bh-panel-ad { font-size: var(--t-h3); font-weight: 700; color: var(--ink); }
.bh-panel-alt { font-size: var(--t-meta); letter-spacing: .08em;
  color: var(--ink-muted); text-transform: none; margin-bottom: var(--space-4); }
.bh-panel-metin { font-size: var(--t-label); line-height: 1.65;
  color: var(--ink); margin: var(--space-3) 0 0; }
.bh-panel-ayrac { height: 1px; background: var(--rule); margin: var(--space-4) 0 var(--space-3); }
.bh-panel-baslik { font-size: var(--t-meta); letter-spacing: .08em;
  color: var(--ink-muted); }

.bh-olcu { margin-bottom: var(--space-4); }
.bh-olcu-ust { display: flex; justify-content: space-between;
  font-size: var(--t-meta); margin-bottom: 6px; color: var(--ink-muted); }
.bh-olcu-ust span:last-child { color: var(--ink); font-family: var(--font-num); }
.bh-olcu-ray { position: relative; height: 6px; border-radius: 3px; background: var(--surface-sunk);
  box-shadow: inset 0 1px 2px rgb(19 26 36 / .07); overflow: hidden; }
.bh-olcu-dolgu { display: block; height: 100%; border-radius: inherit; }
.bh-olcu-dolgu.sure { background: var(--bh-govde); }
.bh-olcu-dolgu.yaprak { background: var(--bh-yaprak); }
.bh-olcu-dolgu.kanit { background: var(--bh-meyve); }

/* --- Lejant ---
   Gorsel degiskenler duzyazi bir paragrafta anlatiliyordu ve paragraf
   tuvalin altindaydi; bakan kisi hicbir sekli cozemiyordu. Ornekler
   cizimin KENDI yollarindan geliyor (bahce-saf.js lejantHtml), yani
   tuval degisince lejant da degisiyor. */
.bh-lejant { display: grid; gap: 16px 26px; margin-top: 14px;
  padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface-sunk);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
/* Sutun icerigi tasarsa grid hucresini genisletmesin. */
.bh-lj-grup { min-width: 0; }
/* Kisaltmalar sekiz satir: dar sutunda tek tek alt alta dusuyordu.
   Yer varsa iki sutun kaplasin. */
.bh-lj-kod { grid-column: span 2; }
@media (max-width: 900px) { .bh-lj-kod { grid-column: auto; } }
.bh-lj-baslik { margin: 0 0 8px; font-size: var(--t-meta); font-weight: 700;
  letter-spacing: .08em; color: var(--ink-muted); }
.bh-lj-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.bh-lj-oge { display: grid; grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px; align-items: center; }
/* Ornek kutusu SABIT olculu: farkli en-boy oranlarindaki ornekler
   (yaprak genis, tohum dar) hizadan cikmasin. */
.bh-lj-ornek { display: flex; align-items: center; justify-content: center;
  width: 34px; height: 26px; }
.bh-lj-ornek svg { max-width: 100%; max-height: 100%; }
.bh-lj-metin { font-size: var(--t-meta); color: var(--ink-muted); line-height: 1.45; }
.bh-lj-metin b { color: var(--ink); font-weight: 600; }
.bh-lj-metin b::after { content: ' — '; font-weight: 400; color: var(--ink-muted); }
.bh-lj-not { margin: 9px 0 0; font-size: var(--t-meta); color: var(--ink-muted);
  line-height: 1.45; }

/* Kisaltmalar. Sekiz uc harfli kod ekranda hicbir yerde acilmiyordu. */
.bh-lj-sozluk { margin: 0; display: grid; gap: 5px 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.bh-lj-sozluk > div { display: grid; grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px; align-items: baseline; }
.bh-lj-sozluk dt { font-family: var(--font-num); font-size: var(--t-meta);
  font-weight: 700; color: var(--ink); }
.bh-lj-sozluk dd { margin: 0; font-size: var(--t-meta); color: var(--ink-muted); }
.bh-olcu-dolgu.puan { background: var(--accent); }
.bh-olcu-dolgu.madde { background: var(--ink-muted); }
/* Olculmemis olcu: ray BOS kalir, dolgu hic cizilmez. Sifir genislikte
   bir dolgu "hic yok" diye okunurdu; oysa olculmedi. */
.bh-olcu.olculmedi .bh-olcu-ray { background: none;
  border: 1px dashed var(--rule-strong); box-shadow: none; }

.bh-not { font-size: var(--t-label); line-height: 1.55; color: var(--ink-muted);
  max-width: 78ch; margin: var(--space-3) 0 0; }
.bh-not b { color: var(--ink); }
.bh-not.bh-eksik { border-left: 0;
  box-shadow: inset 3px 0 0 var(--durum-yakin); padding-left: var(--space-3); }

@media (max-width: 60rem) {
  .bh-duzen { grid-template-columns: 1fr; }
}
/* Alanin kaynagi: "bu alanda neden kayit yok" sorusunun cevabi. Eksik
   veri gizlenmez, NEDENI yazilir. */
.bh-panel-kaynak { font-size: var(--t-meta); line-height: 1.55;
  color: var(--ink-muted); margin: var(--space-3) 0 0; }
.bh-panel-kaynak b { color: var(--ink); }
/* Yildizlar VERI TASIMAZ, kimlik tasir: konumlari ogrencinin seed'inden
   uretiliyor, yani iki ogrenci ayni bahceyi gormuyor. Acik temada
   neredeyse gorunmez, koyu temada belirginlesir. */

/* ==========================================================
   TAKVIMIM — Yurt Dışı Programları / Takvimim alt sekmeleri
   ==========================================================
   Dort program ailesi ayni satir bicimini paylasir: ad, tarih, rozet.
   .tk-sira'dan AYRI bir aile: orası gun sayisini kahraman yapan bir
   liste (dev rakam + alt satir), burasi dort sutunlu bir kayit
   dokumu. Ayni sinifi zorlamak, .tk-sira-gun'un 4rem'lik sayi
   sutununu tarihsiz kayitlarda bos birakirdi. */
.kartlar.tkm-kpi { margin-bottom: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); }

.tkm-liste { list-style: none; margin: 0; padding: 0; }
.tkm-satir { display: grid; gap: 2px var(--space-3);
  grid-template-columns: 1fr auto auto;
  grid-template-areas: 'ad tarih rozet' 'not not not';
  align-items: center; padding: var(--space-3) 0;
  border-top: 1px solid var(--rule); }
.tkm-satir:first-child { border-top: 0; }
.tkm-ad { grid-area: ad; font-size: var(--t-body); font-weight: 600;
  color: var(--ink); min-width: 0; }
/* Tarih tabular-nums: alt alta gelen tarihler sutun halinde hizalansin.
   Orantili rakamla "11 Eki" ve "1 Kas" farkli genislikte durur ve goz
   tarihleri karsilastiramaz. */
.tkm-tarih { grid-area: tarih; font-family: var(--font-num);
  font-variant-numeric: tabular-nums; font-size: var(--t-meta);
  color: var(--ink-muted); white-space: nowrap; }
.tkm-rozet { grid-area: rozet; }
.tkm-not { grid-area: not; font-size: var(--t-meta); color: var(--ink-muted);
  line-height: 1.5; }
/* Tarihsiz kayitlarin basligi. Kayitlar GIZLENMIYOR, ayriliyor —
   baslik bu ayrimin gorunur tek isareti oldugu icin kaybolmamali. */
.tkm-alt-baslik { font-size: var(--t-label); font-weight: 600;
  color: var(--ink-muted); margin: var(--space-4) 0 0; }

@media (max-width: 40rem) {
  .tkm-satir { grid-template-columns: 1fr auto;
    grid-template-areas: 'ad rozet' 'tarih tarih' 'not not'; }
  .tkm-tarih { white-space: normal; }
}

/* ==========================================================
   PROJE PANOSU — Projeler / Genel Bakış
   ==========================================================
   Yatay bar, dairesel degil: karsilastirilacak sey UZUNLUK oldugunda
   bar aci okumaktan daha dogru okunur. Renk TEK KANAL DEGIL — her
   satirda sayi da yaziyor, yani renk goremeyen de siralamayi okur. */
.kartlar.pp-ikili { grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); }

.pp-liste { list-style: none; margin: 0; padding: 0; display: grid;
  gap: var(--space-2); }
/* Ad sutunu SABIT genislikte: barlarin sol ucu hizalanmazsa uzunluk
   karsilastirmasi bozulur, cunku goz bar boyunu degil bitis noktasini
   okur. */
.pp-bar { display: grid; grid-template-columns: 7.5rem 1fr 2.5rem;
  gap: var(--space-3); align-items: center; }
.pp-bar-ad { font-size: var(--t-label); color: var(--ink-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-bar-yol { height: 0.7rem; border-radius: 999px;
  background: var(--surface-sunk); overflow: hidden; }
.pp-bar-dolgu { display: block; height: 100%; border-radius: 999px;
  width: calc(var(--o, 0) * 100%); background: var(--accent); }
/* Sayi tabular-nums ve saga dayali: alt alta gelen adetler basamak
   basamak hizalansin. */
.pp-bar-sayi { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-label); font-weight: 600; color: var(--ink);
  text-align: right; }

@media (max-width: 40rem) {
  .pp-bar { grid-template-columns: 5.5rem 1fr 2.2rem; gap: var(--space-2); }
}

/* ==========================================================
   ÜNİVERSİTE PANOSU — Üniversiteler / Genel Bakış
   ==========================================================
   Uyum listesi: her madde bir SORU cevabi, sus degil. Rozetler ulke
   adlarini tasir; renk yok cunku uc kume (kapsanan, basvurusuz,
   hedefsiz) arasindaki fark renkle degil CUMLEYLE anlatiliyor. */
.kartlar.up-kpi { margin-bottom: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); }

.up-uyum { list-style: none; margin: 0; padding: 0; display: grid;
  gap: var(--space-3); }
.up-uyum > li { font-size: var(--t-body); line-height: 1.6; color: var(--ink);
  padding-left: var(--space-3); border-left: 2px solid var(--rule); }
.up-uyum .faint { display: block; font-size: var(--t-meta); line-height: 1.5; }

/* ==========================================================
   PROGRAM PANOSU — Yurt Dışı Programları / Genel Bakış
   ==========================================================
   Parti cubugu bir ILERLEME degil KAPSAM olcusu: "kac parti girildi".
   Renk tek kanal degil — yaninda "3 / 10 parti" yaziyor ve bekleyen
   parti kodlari metin olarak listeleniyor. */
.kartlar.pgp-kpi { margin-bottom: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); }

.pgp-liste { list-style: none; margin: 0; padding: 0; display: grid;
  gap: var(--space-4); }
.pgp-satir { display: grid; gap: var(--space-2); }
.pgp-bas { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); }
.pgp-ad { font-size: var(--t-body); font-weight: 600; color: var(--ink); }
.pgp-sayi { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-meta); color: var(--ink-muted); white-space: nowrap; }
.pgp-parti { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3);
  align-items: center; }
.pgp-yol { height: 0.6rem; border-radius: 999px; background: var(--surface-sunk);
  overflow: hidden; }
.pgp-dolgu { display: block; height: 100%; border-radius: 999px;
  width: calc(var(--o, 0) * 100%); background: var(--accent); }
.pgp-oran { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-meta); color: var(--ink-muted); white-space: nowrap; }
.pgp-not { font-size: var(--t-meta); line-height: 1.55; color: var(--ink-muted);
  margin: 0; }
.pgp-not b { color: var(--ink); }

.pgp-uyum { list-style: none; margin: 0; padding: 0; display: grid;
  gap: var(--space-3); }
.pgp-uyum > li { font-size: var(--t-body); line-height: 1.6; color: var(--ink);
  padding-left: var(--space-3); border-left: 2px solid var(--rule); }
.pgp-uyum .faint { display: block; font-size: var(--t-meta); line-height: 1.5; }

/* Takvimim satirlarindaki yonetim yuvasi. .yonetim-hucre DEGIL: o
   sinif tablo hucresi icin tanimli, burasi bir liste satiri. */
.tkm-satir.tkm-yonetimli { grid-template-columns: 1fr auto auto auto;
  grid-template-areas: 'ad tarih rozet yonetim' 'not not not not'; }
.tkm-yonetim { grid-area: yonetim; display: flex; gap: var(--space-2); }
.tkm-yonetim:empty { display: none; }
.tkm-form-alani { margin-top: var(--space-3); }

@media (max-width: 40rem) {
  .tkm-satir.tkm-yonetimli { grid-template-columns: 1fr auto;
    grid-template-areas: 'ad rozet' 'tarih yonetim' 'not not'; }
}

/* ==========================================================
   PORTFOY PANOSU — uc kademe
   ==========================================================
   Golge YUKSELTI demek (Dashboard'da kurulan kural). Uc kademe:
     1 kahraman  — tek olcu, --t-num, tam kart golgesi
     2 iki panel — karsilastirma gorselleri, normal kart
     3 dokum     — eksik listesi ve odul, cerceve yok, kagidin icinde
   On bir kutu ayni yukseklikteyken hicbiri yukselmis sayilmiyordu. */
.pp-sayfa { display: grid; gap: var(--space-4); }
.pp-sayfa > .kartlar { margin: 0; }

/* --- Kademe 1: kahraman --- */
.pp-kahraman { padding: var(--space-5); }
.pp-hero { display: grid; gap: var(--space-5);
  grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: center; }
.pp-hero-ana { display: grid; gap: 2px; }
/* text-transform YOK: Türkçe'de 'i' harfi tarayıcıda yanlış büyüyor.
   Büyük harf gerekirse metin öyle YAZILIR (CLAUDE.md §1.2). */
.pp-hero-etiket { font-size: var(--t-meta); font-weight: 600;
  color: var(--ink-muted); }
/* Sayfanin TEK buyuk sayisi. --t-num portalda kahraman olcu icin
   ayrilmis basamak; ikinci bir yerde kullanmak hiyerarsiyi duzler. */
.pp-hero-deger { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-num); font-weight: 600; line-height: 1;
  letter-spacing: -.03em; color: var(--ink); }
.pp-hero-alt { font-size: var(--t-label); color: var(--ink-muted); }

/* Yan olculer: kahramanin YANINDA ama ondan kucuk. Ayni boyda
   olsalardi dordu de kahraman olurdu, yani hicbiri olmazdi. */
.pp-yan { list-style: none; margin: 0; padding: 0 0 0 var(--space-5);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: var(--space-4); border-left: 1px solid var(--rule); }
.pp-yan > li { display: grid; gap: 1px; align-content: start; min-width: 0; }
.pp-yan-ad { font-size: var(--t-meta); font-weight: 600; color: var(--ink-muted); }
.pp-yan-sayi { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--kpi-sayi-boy); font-weight: 600; line-height: 1.1;
  letter-spacing: -.02em; color: var(--ink); }
.pp-yan-alt { font-size: var(--t-meta); color: var(--ink-faint); }

@media (max-width: 52rem) {
  .pp-hero { grid-template-columns: 1fr; gap: var(--space-4); }
  .pp-yan { padding: var(--space-4) 0 0; border-left: 0;
    border-top: 1px solid var(--rule); }
}
@media (max-width: 34rem) {
  .pp-yan { grid-auto-flow: row; gap: var(--space-3); }
}

/* --- Kademe 2: sinif omurgasi ---
   SIRALI EKSEN DIKEY SUTUN ister: goz soldan saga bir zaman cizgisi
   okur. Tur dagilimi (sirasiz kategori) yatay bar kaliyor; ikisini
   ayni gorselle cizmek, sinifi "hangisi daha buyuk" gibi okuturdu. */
.pp-omurga { list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: var(--space-2); align-items: end; }
.pp-omurga-oge { display: grid; gap: 4px; justify-items: center; }
.pp-omurga-sayi { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-label); font-weight: 600; color: var(--ink); }
/* Yuva sabit yukseklikte: sutunlar ayni tabandan kalkmazsa boy
   karsilastirmasi bozulur. */
.pp-omurga-yuva { width: 100%; height: 4.5rem; display: flex; align-items: flex-end;
  background: var(--surface-sunk); border-radius: var(--radius); }
.pp-omurga-sutun { width: 100%; border-radius: var(--radius);
  background: var(--accent); min-height: 2px;
  height: calc(var(--o, 0) * 100%); }
/* Sifir basamak GORUNUR kalir: yoksa "9'da bir sey yok" ile "9 diye
   bir basamak yok" ayirt edilemez. Sutun yerine taban cizgisi. */
.pp-omurga-oge.bos .pp-omurga-sutun { background: var(--rule); height: 2px; }
.pp-omurga-oge.bos .pp-omurga-sayi { color: var(--ink-faint); }
.pp-omurga-ad { font-size: var(--t-meta); color: var(--ink-muted); }

/* --- Kademe 3: dokum, geri cekilir ---
   Eksigi olmayan kart SESSIZLESIR: is listesi bos oldugunda gozu
   cekmemeli. Renk tek kanal degil, onay ikonu ve cumle de var. */
.pp-tamam { background: var(--ok-wash); border-color: transparent; }
.pp-tamam .kart-baslik { margin-bottom: var(--space-3); }
.pp-tamam-satir { display: flex; align-items: center; gap: var(--space-2);
  margin: 0; font-size: var(--t-body); color: var(--ink); }
.pp-tamam-satir .ikon { color: var(--ok); flex: none; }

/* Projelerim ve Ödül Kaydı da .pp-sayfa kullanir: uc alt sekmenin
   ustu ayni ritimle acilsin. Sarmalayici bir izgara oldugu icin
   ic kartlarin kendi ust bosluklari kalkiyor. */
.pp-sayfa > .yonetim-kart,
.pp-sayfa > div > .yonetim-kart { margin-top: 0; }
.pp-sayfa .pj-izgara { margin: 0; }

/* Etkinlik ayrintilarindaki katlanir ozetler DIKEY YIGIN degil,
   akan bir sira: dort kayit alt alta dort minik hap olarak
   duruyordu ve liste gibi okunmuyordu. */
.bp-etkinlikler { display: grid; gap: var(--space-2); }
.bp-etk > summary { width: 100%; justify-content: space-between; }
.bp-etk > summary::after { margin-left: auto; }

/* AÇIK ETKİNLİK KENDİ ÇERÇEVESİNDE.
   İki etkinlik aynı anda açıkken alanlar kesintisiz akıyordu ve tek
   bir uzun form gibi görünüyordu: hangi başlığın hangi kayda ait
   olduğu ancak yukarı kaydırıp özete bakınca anlaşılıyordu. Açık blok
   artık kendi zemini ve kenarlığıyla duruyor. */
.bp-etk[open] {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface-sunk);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}
.bp-etk[open] > summary { margin-bottom: var(--space-2); }
/* Açık bloğun içindeki alanlar kartın kendi zemininde: iç ve dış
   yüzey aynı renk olsaydı çerçeve tek başına kalırdı. */
.bp-etk[open] .yf input, .bp-etk[open] .yf select,
.bp-etk[open] .yf textarea { background: var(--surface); }

/* Sütunlar İÇERİĞE göre. Önce dört sabit sütun yazılıydı ve genişlikler
   satırdaki alan sayısıyla tutmuyordu. */
.bp-etk-yf { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
/* Kaydet düğmesi KENDİ SATIRINDA ve ayraçla: alanların arasında bir
   sütunu kaplayınca hangi alanları kaydettiği belirsiz kalıyordu.
   Hizalamayı .yf-eylem zaten yapıyor, burada yalnız satır genişliği
   ve ayraç ekleniyor. */
.bp-etk .yf-eylem { grid-column: 1 / -1;
  padding-top: var(--space-2); border-top: 1px solid var(--rule); }

/* Özet satırı bir DÜĞME değil bir LİSTE SATIRI: tam genişlikte,
   başlık solda, rozet ve ok sağda. Düğme ailesinin dolgu ve yazı
   ölçülerini kullanıyor ama sola dayalı okunuyor. */
.bp-etk > summary { padding: 8px 12px; font-weight: 600; }
.bp-etk[open] > summary { background: var(--surface); }

/* ==========================================================
   ÖDÜL VE KABUL KAYITLARI
   ==========================================================
   Bir odul ya da kabul bir KUNYEDIR: adi one cikar, kosullari
   (tur, katalog, seviye) yaninda kucuk durur, yili sagda demirler.
   Onceden duz bir satirdi ve sayfanin asil icerigi en zayif
   parcasiydi.

   RENK TURU TASIR ve burada tasiyabilir: yalniz IKI deger var
   (odul / kabul), uc hue tavaninin altinda. Yine de tek kanal
   degil — ikon ve chip metni de ayirt ediyor. Renkler VERI SERISI
   paletinden: bir odul "iyi", bir kabul "uyari" degildir, o yuzden
   durum renkleri kullanilmiyor (proje turlerinde de ayni duzeltme
   yapildi). */
.ok-liste { list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-2); }

.ok-oge {
  --ok-renk: var(--veri-hedef);
  --ok-zemin: var(--veri-hedef-zemin);
  display: grid; align-items: center; gap: var(--space-3);
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  padding: var(--space-3);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ok-renk);
  border-radius: var(--radius-card);
  background: var(--surface);
}
/* Duzenleme panosu satirin TAMAMINI kaplar: alanlar dort sutunun
   birine sikissaydi acilan form okunmazdi. Kapali dururken yalniz
   ozet dugmesi gorunuyor, yani liste sade kaliyor. */
.ok-duzen { grid-column: 1 / -1; }
.ok-duzen[open] { margin-top: var(--space-2); padding-top: var(--space-2);
  border-top: 1px solid var(--rule); }

.ok-oge.ok-kabul {
  --ok-renk: var(--veri-gerceklesen);
  --ok-zemin: var(--accent-wash);
}

/* Ikon yuvasi: turun rengini tasiyan tek dolu yuzey. Kartin
   tamamini boyamak, dort kayitta dort renkli blok uretirdi. */
.ok-isaret { display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: var(--radius);
  background: var(--ok-zemin); color: var(--ok-renk); }

.ok-govde { min-width: 0; display: grid; gap: 3px; }
.ok-ad { margin: 0; font-size: var(--t-body); font-weight: 600; color: var(--ink); }
.ok-etiketler { margin: 0; display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center; }
.ok-etiketler > span { font-size: var(--t-meta); font-weight: 600;
  border-radius: 999px; padding: 2px 9px; }
.ok-tur { color: var(--ok-renk); background: var(--ok-zemin); }
.ok-katalog { color: var(--ink-muted); background: var(--surface-sunk); }
/* Katalogla eslesmeyen kayit GIZLENMEZ, isaretlenir: cerceveli ve
   dolgusuz — "kayit gecerli ama bagi yok" demenin gorsel karsiligi. */
.ok-serbest { color: var(--ink-faint); background: transparent;
  box-shadow: inset 0 0 0 1px var(--rule); }
.ok-seviye { color: var(--ink); background: var(--surface-sunk); }
/* Derece SIRALI DEGIL, o yuzden derecelere gore renk yok: renk
   verilseydi "birincilik yesil, katilim gri" gibi bir buyukluk
   iddiasi kurulurdu (bkz. sql/035). Tek bir vurgu bicimi, ayni
   agirlikta. */
.ok-derece { color: var(--ink); background: var(--surface-sunk);
  box-shadow: inset 0 0 0 1px var(--rule-strong); }
/* Bahce alani (sql/037). Odul hangi alana bagli — bu bag olmadan
   odul bahcede hic gorunmuyordu ve derinlik olculemiyordu. Rozet
   seviye/derece ile ayni agirlikta: alan bir BUYUKLUK degil, bir
   yer bildiriyor. */
.ok-dal { color: var(--ink); background: var(--vurgu-wash);
  box-shadow: inset 0 0 0 1px var(--rule); }
.ok-aciklama { margin: 0; font-size: var(--t-meta); color: var(--ink-muted); }

/* Yil sagda demirler ve tabular: alt alta gelen yillar hizalansin. */
.ok-yil { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-label); font-weight: 600; color: var(--ink-muted);
  white-space: nowrap; }
.ok-yilsiz { font-family: var(--font-ui); font-weight: 400;
  font-size: var(--t-meta); color: var(--ink-faint); }

@media (max-width: 44rem) {
  .ok-oge { grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: 'isaret govde sil' 'yil yil yil'; }
  .ok-isaret { grid-area: isaret; }
  .ok-govde { grid-area: govde; }
  .ok-yil { grid-area: yil; }
  .ok-oge > .btn { grid-area: sil; }
}

/* Form: ad kutusu en genis alan, cunku 183 program oneriliyor ve
   secenek metinleri uzun. */
.ok-form { grid-template-columns: minmax(7rem, 1fr) minmax(15rem, 3fr)
  minmax(8rem, 1fr) minmax(8rem, 1fr) minmax(5.5rem, 1fr); }
@media (max-width: 52rem) {
  .ok-form { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
  .ok-form-ad { grid-column: 1 / -1; }
}
/* --- Kanit dosyalari (.kn-*) ---
   Kullanici 22 Agustos 2026: "kanit olarak dosya eklenebilsin".
   Portal bugune kadar yalniz METIN tutuyordu; "TUBITAK ikincilik"
   yazan satirin arkasinda belge yoktu.

   KANIT DUZENLEME PANOSUNUN ICINDE: kart yuzunde gosterseydik on
   kayitlik liste dosya adlariyla dolar, kaydin kendisi okunmaz olurdu.

   Tur rozeti RENK TEK KANAL DEGIL: "PDF", "JPEG", "Word" kelimesi
   rozetin uzerinde yaziyor. */
.ok-form-aciklama { grid-column: 1 / 4; }
.ok-form-kanit { grid-column: 4 / -1; }
@media (max-width: 52rem) {
  .ok-form-aciklama, .ok-form-kanit { grid-column: 1 / -1; }
}

.kn-alan { grid-column: 1 / -1; margin-top: var(--space-3);
  padding-top: var(--space-3); border-top: 1px solid var(--rule); }
.kn-baslik { margin: 0 0 var(--space-2); font-size: var(--t-label);
  font-weight: 700; color: var(--ink-muted); }
.kn-bos { margin: 0 0 var(--space-2); font-size: var(--t-meta);
  color: var(--ink-faint); }

.kn-liste { list-style: none; margin: 0 0 var(--space-2); padding: 0;
  display: flex; flex-direction: column; gap: 4px; }
.kn-oge { display: flex; align-items: center; gap: var(--space-2);
  padding: 5px 8px; border: 1px solid var(--rule); border-radius: 8px;
  background: var(--surface); font-size: var(--t-meta); }
.kn-tur { flex: none; padding: 1px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  background: var(--surface-sunk); color: var(--ink-muted); }
.kn-tur.kn-resim { background: var(--accent-wash); color: var(--accent-ink); }
.kn-ad { flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.kn-boyut { flex: none; color: var(--ink-muted);
  font-variant-numeric: tabular-nums; }

.kn-secici input[type="file"] { font: inherit; font-size: var(--t-meta);
  color: var(--ink-muted); }
.kn-not { font-size: var(--t-meta); color: var(--ink-faint); }

/* --- Kart yuzundeki kanit kutucuklari ---
   Kullanici 23 Agustos 2026: "yuklenen her kanit bu ekranda sigacak bir
   kutucuk kadar eklensin, tiklandiginda buyusun." Kanit yalniz duzenleme
   panosunda goruluyordu; panoyu acmadan bir kaydin belgesi olup olmadigi
   bilinmiyordu ve asil soru bu.

   RESIM YOKKEN ROZET KALIYOR: imza gelmezse ya da onizleme uretilmemisse
   kirik resim simgesi degil, tur adi gorunur. */
.kn-serit { display: flex; gap: 4px; align-items: center; }
.kn-kutucuk { position: relative; width: 40px; height: 40px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule); border-radius: 8px;
  background: var(--surface-sunk); cursor: pointer; overflow: hidden;
  font: inherit; font-size: 10px; font-weight: 700; line-height: 1;
  color: var(--ink-muted); }
.kn-kutucuk:hover { border-color: var(--accent); }
.kn-kutucuk:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.kn-kucuk { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; }
/* Resim gelince rozet onun ustunde kucuk bir seride donuyor: dosyanin
   turu resmin uzerinde de okunabilir kalsin. */
.kn-kutucuk-resim .kn-rozet { position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1px 2px; font-size: 8px; text-align: center;
  background: rgba(16, 26, 36, 0.72); color: #fff; }
.kn-kalan { font-size: 12px; color: var(--ink); }
@media (max-width: 40rem) { .kn-serit { display: none; } }

/* --- Buyutme penceresi ---
   <dialog> kullaniliyor: Esc ile kapanma, odak hapsi ve arka planin
   erisilemez olmasi tarayicidan geliyor. Elle yazsaydik ucunu de eksik
   yapardik. */
.kn-buyut { width: min(92vw, 900px); max-height: 90vh; padding: 0;
  border: 1px solid var(--rule); border-radius: var(--radius-card);
  background: var(--surface); color: var(--ink); }
.kn-buyut::backdrop { background: rgba(16, 26, 36, 0.66); }
.kn-buyut-ust { display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border-bottom: 1px solid var(--rule); }
.kn-buyut-ad { flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-label); }
.kn-buyut-govde { padding: var(--space-3); overflow: auto; }
.kn-buyut-govde img { display: block; max-width: 100%; max-height: 72vh;
  margin: 0 auto; border-radius: 8px; }



/* Esit degerler bar yerine ETIKET olur: bar bir karsilastirma
   gorselidir, karsilastirilacak fark yoksa yalniz yer kaplar. */
.pp-etiketler { list-style: none; margin: 0; padding: 0; display: flex;
  flex-wrap: wrap; gap: var(--space-2); }
.pp-etiketler > li { display: inline-flex; align-items: baseline;
  gap: var(--space-2); padding: 4px 10px; border-radius: 999px;
  background: var(--surface-sunk); }
.pp-etiket-ad { font-size: var(--t-label); color: var(--ink-muted); }
.pp-etiket-sayi { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-label); color: var(--ink); }

/* Etkinlik ayrintilarinda EKSIK ALAN isareti.
   Renk TEK KANAL DEGIL: ozet satirinda eksik alanlarin ADI da yazili
   ve isaretli etikete "(eksik)" metni ekleniyor — renk goremeyen de
   hangi alanin bos oldugunu okur. */
.bp-rozet { font-size: var(--t-meta); font-weight: 600;
  border-radius: 999px; padding: 2px 10px;
  color: var(--warn); background: var(--warn-wash); }
.bp-rozet.bp-tam { color: var(--ok); background: var(--ok-wash); }

.bp-etk .bp-eksik > input,
.bp-etk fieldset.bp-eksik { border-color: var(--warn); }
/* Isaret CSS content DEGIL, isaretin kendisi metin olarak markup'ta:
   secilebilir, kopyalanabilir ve her okuyucuda okunur. */
.bp-eksik-not { font-size: var(--t-meta); font-weight: 600;
  color: var(--warn); }

/* Kabul seciliyken seviye kutusu kapanir. Kaybolmuyor, SOLUYOR:
   kaybolsaydi form her tur degisiminde zipladigi icin hangi alanin
   gittigi anlasilmazdi. disabled ayrica HTML'de, yani goruntu ile
   davranis ayni seyi soyluyor. */
.yf label.pasif { opacity: .5; }

/* ==========================================================
   ÖZET — Dashboard buraya karıştı
   ==========================================================
   Uc sutunlu .db-duzen KALKTI: Ozet zaten kendi kartlarini tam
   genislikte diziyor ve panelleri 11rem'lik iki rayin arasina
   sikistirmak, ayni ekranda iki farkli izgara ritmi uretiyordu.
   Paneller Ozet'in ritmine girdi.

   .db-kutu, .db-kahraman, .db-halkalar, .db-takvim gibi ic
   siniflar OLDUGU GIBI calisiyor — yalnizca sarmalayici degisti. */
.oz-olcum {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
/* Sayaclar: Ozet'in kucuk kartlariyla ayni ritim, yani ayni
   minmax. Farkli olsaydi iki sira kutu ayni ekranda iki ayri
   genislikte durur ve akraba olduklari kaybolurdu. */
.oz-sayaclar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}
/* Obek etiketi butun satiri kaplar: sayaclar iki ayri bilgi sinifi
   (calisma hacmi / durum) ve etiketsiz tek sirada dizilseler bu
   ayrim kaybolurdu. Eski dikey rayda .db-ray-etiket ayni isi
   yapiyordu; izgaraya gecince span degisti. */
.oz-sayac-baslik { grid-column: 1 / -1; font-size: var(--t-meta);
  font-weight: 600; color: var(--ink-muted); margin-top: var(--space-2); }
.oz-sayac-baslik:first-child { margin-top: 0; }

.oz-takvim { margin-top: var(--space-4); }
/* Yaklasan tarihler artik tam genislikte: onceden 11rem'lik sag
   rayda dar bir sutundu ve uzun basvuru adlari kirpiliyordu. */
.oz-takvim .db-kutu { width: 100%; }

@media (max-width: 60rem) {
  .oz-olcum { grid-template-columns: 1fr; }
  /* Tek sutunda "iki sutunu kapla" bir sey soylemiyor; kural
     kalkmasa panel kendi sarmalayicisinda garip bir span tasirdi. */
  .oz-olcum .db-genis { grid-column: auto; }
}

/* ==========================================================
   MESLEKLER — BLS referans kataloğu
   ==========================================================
   Bu sekme REFERANSTIR: hicbir sey kaydedilmiyor, ogrenciye ozel
   tek bir alan yok. Gorsel dili de buna gore sakin. */
.ms-sayfa { display: grid; gap: var(--space-4); }

/* ABD uyarisi KALICI ve ustte. Ucret dolar, istihdam ABD istihdami;
   Almanya hedefleyen bir ogrenci icin yaniltici olur. Uyariyi bir
   kez gosterip gizlemek, sonraki ziyarette kaybolmasi demekti. */
.ms-uyari { margin: 0; padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--warn); border-radius: var(--radius);
  background: var(--warn-wash); color: var(--ink);
  font-size: var(--t-label); line-height: 1.55; }

/* --- Yön şeridi --- */
.ms-yon { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: var(--space-3); }
.ms-yon-oge { display: grid; gap: 2px; padding: var(--space-3);
  border-radius: var(--radius); background: var(--surface-sunk);
  border-left: 3px solid var(--ink-faint); }
.ms-yon-sayi { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--kpi-sayi-boy); font-weight: 600; line-height: 1.1; color: var(--ink); }
.ms-yon-ad { font-size: var(--t-meta); font-weight: 600; color: var(--ink-muted); }
.ms-yon-pay { font-size: var(--t-meta); color: var(--ink-faint); }

/* Yon rengi VERI SERISI paletinden, durum renginden DEGIL: bir
   meslegin daralmasi "hata" degil, bir olgudur. Yesil-kirmizi
   ciftinden de kaciniliyor (renk korlugunde ayirt edilemez);
   ustelik her satirda ad da yazili, renk tek kanal degil. */
.y-buyuyor { border-left-color: var(--veri-gerceklesen); }
.y-sabit { border-left-color: var(--ink-faint); }
.y-daraliyor { border-left-color: var(--veri-hedef); }
.y-yok { border-left-color: var(--rule); }

/* --- Bölgeler (Aşama 2) --- */
.kartlar.ms-bolgeler { grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); }

/* --- Eğitim kesiti --- */
.ms-egitim { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.ms-egitim-satir { display: grid; align-items: baseline; gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr) 3rem auto;
  padding: var(--space-2) 0; border-top: 1px solid var(--rule); }
.ms-egitim-satir:first-child { border-top: 0; }
.ms-egitim-ad { font-size: var(--t-body); color: var(--ink); }
.ms-egitim-sayi { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-label); font-weight: 600; text-align: right; color: var(--ink); }
.ms-egitim-yon { font-size: var(--t-meta); color: var(--ink-muted); }
.ms-egitim-yon .artis { color: var(--veri-gerceklesen); }
.ms-egitim-yon .dusus { color: var(--veri-hedef); }

/* --- Harita: alan düzeyinde --- */
.ms-harita { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.ms-alan, .ms-harita-basliklar { display: grid; align-items: center;
  gap: var(--space-3);
  grid-template-columns: 12rem minmax(0, 1fr) 3.5rem 6.5rem 5.5rem; }
.ms-harita-basliklar { font-size: var(--t-meta); font-weight: 600;
  color: var(--ink-faint); padding-bottom: var(--space-2);
  margin-bottom: var(--space-2); border-bottom: 1px solid var(--rule); }
.ms-harita-basliklar > span:nth-child(3),
.ms-harita-basliklar > span:nth-child(5) { text-align: right; }
.ms-alan-ad { font-size: var(--t-label); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Cubuk MUTLAK SAYI tasiyor: yuzdeyle cizilseydi 1 meslekli alan ile
   49 meslekli alan ayni agirlikta gorunurdu. */
.ms-alan-cubuk { display: flex; height: 0.7rem; border-radius: 999px;
  overflow: hidden; background: var(--surface-sunk); }
.ms-cb { display: block; height: 100%; width: calc(var(--o, 0) * 100%); }
.ms-cb-buyuyor { background: var(--veri-gerceklesen); }
.ms-cb-sabit { background: var(--ink-faint); }
.ms-cb-daraliyor { background: var(--veri-hedef); }
.ms-alan-sayi { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-label); font-weight: 600; text-align: right; color: var(--ink); }
.ms-alan-not { font-size: var(--t-meta); color: var(--ink-muted); text-align: right; }
/* Paydasi kucuk alan: orani KIRILGAN ve bu soleniyor. */
.ms-alan.kirilgan .ms-alan-ad { color: var(--ink-muted); }
.ms-kirilgan-im { font-style: italic; color: var(--ink-faint); }

.ms-lejant { list-style: none; margin: var(--space-3) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  font-size: var(--t-meta); color: var(--ink-muted); }
.ms-lejant > li { display: inline-flex; align-items: center; gap: 6px; }
.ms-nokta { width: 10px; height: 10px; border-radius: 3px; }

/* --- Keşfet --- */
.ms-suzgec { display: grid; gap: var(--space-3); align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  margin-bottom: var(--space-4); }
.ms-suzgec label { display: grid; gap: var(--space-1);
  font-size: var(--t-label); color: var(--ink-muted); }
.ms-sz-arama { grid-column: span 2; }

/* SUTUN GENISLIKLERI TEK YERDE. Baslik satiri ile her kayit satiri
   AYRI izgara kaplari; sutun tanimi ikisine de ayni degiskenlerden
   veriliyor, yoksa biri degisince oteki sessizce kayar (tam olarak
   bu oldu: baslik yedi sutun, satir dokuz cocuk tasiyordu).

   ALIGNMENT DA TEK YERDE: sayisal sutunlar saga dayali ve BASLIKLARI
   DA oyle. Onceden baslik sola, deger saga dayaliydi ve goz ikisini
   ayni sutun sanmiyordu. */
.ms-basliklar, .ms-satir {
  display: grid;
  gap: var(--space-2) var(--space-3);
  align-items: baseline;
  grid-template-columns:
    minmax(0, 2.4fr)   /* meslek */
    minmax(0, 1.3fr)   /* kategori */
    minmax(0, 1.3fr)   /* egitim */
    5.5rem             /* ucret */
    minmax(0, 1.2fr)   /* projeksiyon */
    2.25rem            /* AI */
    5.5rem;            /* eylemler */
}
.ms-basliklar { font-size: var(--t-meta); font-weight: 600; color: var(--ink-faint);
  padding-bottom: var(--space-2); border-bottom: 1px solid var(--rule); }
.ms-basliklar .sag { text-align: right; }

.ms-liste { list-style: none; margin: 0; padding: 0; }
.ms-satir { padding: var(--space-3) 0; border-top: 1px solid var(--rule); }
.ms-satir:first-child { border-top: 0; }

/* PUNTO MERDIVENI: tabloda IKI basamak var, uc degil.
     ad          --t-body 600   satirin capasi
     geri kalan  --t-meta       yardimci alanlar
   Onceden ad --t-label idi ve kategori/egitim ile neredeyse ayni
   agirliktaydi; 342 satirda goz neye tutunacagini bilmiyordu. */
.ms-ad { font-size: var(--t-body); font-weight: 600; color: var(--ink);
  line-height: 1.35; }
.ms-kategori, .ms-egitim-hucre { font-size: var(--t-meta); color: var(--ink-muted);
  line-height: 1.4; }
.ms-ucret { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-meta); color: var(--ink); text-align: right; }

/* Projeksiyon IKI SATIR: ustte sayi, altta BLS'in kendi sozu.
   Yan yanayken "+%5 Ortalamanın üstünde" sutunu tasiyor ve cumlenin
   ortasindan boluyordu; satir yuksekligi de iki katina cikiyordu. */
.ms-projeksiyon { display: grid; gap: 0; }
.ms-pr-sayi { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-meta); font-weight: 600; }
.ms-pr-soz { font-size: var(--t-meta); color: var(--ink-faint); line-height: 1.3; }
/* Yon rengi YALNIZ sayida; sozel karsilik zaten metin olarak yazili,
   yani renk tek kanal degil. */
.ms-projeksiyon.y-buyuyor .ms-pr-sayi { color: var(--veri-gerceklesen); }
.ms-projeksiyon.y-daraliyor .ms-pr-sayi { color: var(--veri-hedef); }
.ms-projeksiyon.y-sabit .ms-pr-sayi,
.ms-projeksiyon.y-yok .ms-pr-sayi { color: var(--ink-muted); }

/* BLS bağlantısı ve "Neden?" TEK HUCREDE: ikisi de eylem, ikisi de
   dar. Ayri sutunlarda dururken sekiz sutunluk bir izgara cikiyor ve
   baslik satiriyla hizalamak icin bos bir baslik gerekiyordu. */
.ms-eylem { display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px; font-size: var(--t-meta); }
/* BLS bağlantısı sekmenin ALAN rengini alıyor, genel vurguyu değil:
   "hangi alandayım" bilgisi ekran boyunca sürsün. Yedek olarak
   --accent duruyor — bu kural Meslekler dışında kullanılmıyor ama
   alan tanımsızsa bağlantı renksiz kalmasın.
   Kontrast ölçüldü: açık temada 7.52:1, karanlıkta 7.25:1. */
.ms-eylem > a { color: var(--alan, var(--accent)); }

/* "Neden?" dugmesi ve gerekce kutusu. Skoru gorup nedenini
   soramamak, tahmini sorgulanamaz kilardi. */
.ms-ac { font: inherit; font-size: var(--t-meta); font-weight: 600;
  color: var(--accent); background: none; border: 0; padding: 0;
  cursor: pointer; text-align: left; }
.ms-ac:hover { text-decoration: underline; }
.ms-ac:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px;
  border-radius: var(--radius); }
/* Kutu butun satiri kaplar: metin dar bir sutunda okunmaz. */
.ms-gerekce { grid-column: 1 / -1; margin-top: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius);
  background: var(--surface-sunk); }
.ms-gerekce-metin { margin: 0; font-size: var(--t-meta); line-height: 1.6;
  color: var(--ink); }
.ms-gerekce-kunye { margin: var(--space-2) 0 0; font-size: var(--t-meta);
  color: var(--ink-faint); }
.ms-gerekce-yok { margin: 0; font-size: var(--t-meta); color: var(--ink-muted); }
/* Cevrilmemis kayit GIZLENMEZ, isaretlenir: Ingilizcesi gorunur ve
   ceviri bekledigi yazar. Gizlemek, var olan bir metni yokmus gibi
   gostermek olurdu. */
.ms-cevrilmedi { font-weight: 600; color: var(--warn); }

/* AI sutunu: sayi ve YUKSEK isareti. Renk tek kanal degil — sutun
   basligi "AI 0-10" diyor ve sayi zaten okunuyor. Yuksek olanlar
   ayrica koyulasiyor, yani renk goremeyen de agirligi ayirt eder. */
.ms-etkilenme { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-meta); color: var(--ink-muted); text-align: right; }
.ms-etkilenme.yuksek { color: var(--veri-ikincil); font-weight: 600; }
.ms-alan-ai { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-meta); color: var(--ink-muted); text-align: right; }
.ms-ai-sayi { color: var(--veri-ikincil); font-weight: 600; }

@media (max-width: 64rem) {
  .ms-alan { grid-template-columns: 9rem minmax(0, 1fr) 3rem 3.5rem; }
  .ms-alan-not, .ms-harita-basliklar { display: none; }
  .ms-basliklar { display: none; }
  .ms-satir { grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: 'ad ai eylem' 'kat proj proj'
      'egt ucret ucret' 'ger ger ger'; }
  .ms-ad { grid-area: ad; }
  .ms-kategori { grid-area: kat; }
  .ms-egitim-hucre { grid-area: egt; }
  .ms-ucret { grid-area: ucret; }
  .ms-projeksiyon { grid-area: proj; justify-items: end; }
  .ms-etkilenme { grid-area: ai; }
  .ms-eylem { grid-area: eylem; flex-direction: row; gap: var(--space-2); }
  .ms-gerekce { grid-area: ger; }
  .ms-ad { grid-area: ad; }
  .ms-kategori { grid-area: kat; }
  .ms-egitim-hucre { grid-area: egt; }
  .ms-ucret { grid-area: ucret; }
}

/* ==========================================================
   ISI HARİTASI — treemap
   ==========================================================
   Alan = istihdam, renk = secilen olcu. Iki ayri kanal.

   RENKLER TOKENDEN TURETILIYOR, ham hex yok: color-mix ile veri
   serisi paletinden karistiriliyor. YESIL-KIRMIZI CIFTI YOK — renk
   korlugunde ayirt edilemeyen bir cift ve bu depoda yasakli
   (CLAUDE.md). Iraksak olcek teal <-> turuncu. */
.ms-isi-sar { margin-top: var(--space-3); border-radius: var(--radius);
  overflow: hidden; background: var(--surface-sunk); }
.ms-isi { display: block; width: 100%; height: auto; }
.ms-kutu rect { stroke: var(--surface); stroke-width: 1; transition: none; }
.ms-kutu text { font-family: var(--font-ui); font-size: 9px;
  fill: var(--ink); pointer-events: none; }
.ms-kutu:hover rect, .ms-kutu:focus-visible rect {
  stroke: var(--ink); stroke-width: 1.5; }
.ms-kutu:focus-visible { outline: none; }

/* Olculmemis kutu: olcegin UCUNA konmuyor, kendi rengi var.
   Cizgili degil duz gri — cizgi baska bir anlam tasidigi izlenimi
   verirdi. */
.ms-kv-yok, .ms-kutu.ms-kv-yok rect { fill: var(--rule); }

/* KOVA DURAKLARI KONTRASTLA SECILDI, gozle degil.
   Her durakta ya koyu ya beyaz metin 4.5:1'i geciyor (CLAUDE.md).
   Onceki rampada iki durak HICBIR metin rengiyle 4.5'e ulasmiyordu:
   iraksak olcegin %65 teali (koyu 3.95 / beyaz 3.25) ve artan
   olceklerin %60'i (koyu 3.84 / beyaz 3.34). Ustelik iraksak olcegin
   en koyu turuncusuna koyu metin yaziliyordu — 1.78:1, okunmaz.

   Bu yuzden 50-78 arasi bos: o aralikta hicbir metin rengi gecmiyor.
   Rampa orada atliyor, cunku okunmayan bir ara ton eklemektense
   basamagi atlamak dogru. */

/* --- Iraksak olcek: projeksiyon (turuncu <- 0 -> teal) --- */
.ms-olcek-projeksiyon .ms-kv1 rect, .ms-olcek-projeksiyon li.ms-kv1 .ms-lejant-kutu
  { fill: var(--veri-hedef); background: var(--veri-hedef); }
.ms-olcek-projeksiyon .ms-kv2 rect, .ms-olcek-projeksiyon li.ms-kv2 .ms-lejant-kutu
  { fill: color-mix(in oklab, var(--veri-hedef) 55%, var(--surface));
    background: color-mix(in oklab, var(--veri-hedef) 55%, var(--surface)); }
.ms-olcek-projeksiyon .ms-kv3 rect, .ms-olcek-projeksiyon li.ms-kv3 .ms-lejant-kutu
  { fill: var(--surface-sunk); background: var(--surface-sunk); }
.ms-olcek-projeksiyon .ms-kv4 rect, .ms-olcek-projeksiyon li.ms-kv4 .ms-lejant-kutu
  { fill: color-mix(in oklab, var(--veri-gerceklesen) 30%, var(--surface));
    background: color-mix(in oklab, var(--veri-gerceklesen) 30%, var(--surface)); }
.ms-olcek-projeksiyon .ms-kv5 rect, .ms-olcek-projeksiyon li.ms-kv5 .ms-lejant-kutu
  { fill: color-mix(in oklab, var(--veri-gerceklesen) 55%, var(--surface));
    background: color-mix(in oklab, var(--veri-gerceklesen) 55%, var(--surface)); }
.ms-olcek-projeksiyon .ms-kv6 rect, .ms-olcek-projeksiyon li.ms-kv6 .ms-lejant-kutu
  { fill: var(--veri-gerceklesen); background: var(--veri-gerceklesen); }
/* Yalniz iki ucta zemin koyu. */
.ms-olcek-projeksiyon .ms-kv1 text,
.ms-olcek-projeksiyon .ms-kv6 text { fill: var(--on-accent); }

/* --- Artan olcekler: 10 / 26 / 42 (koyu metin) - 80 / 90 / 100 (beyaz) --- */
.ms-olcek-etkilenme .ms-kv1 rect, .ms-olcek-etkilenme li.ms-kv1 .ms-lejant-kutu
  { fill: color-mix(in oklab, var(--veri-ikincil) 10%, var(--surface));
    background: color-mix(in oklab, var(--veri-ikincil) 10%, var(--surface)); }
.ms-olcek-etkilenme .ms-kv2 rect, .ms-olcek-etkilenme li.ms-kv2 .ms-lejant-kutu
  { fill: color-mix(in oklab, var(--veri-ikincil) 26%, var(--surface));
    background: color-mix(in oklab, var(--veri-ikincil) 26%, var(--surface)); }
.ms-olcek-etkilenme .ms-kv3 rect, .ms-olcek-etkilenme li.ms-kv3 .ms-lejant-kutu
  { fill: color-mix(in oklab, var(--veri-ikincil) 42%, var(--surface));
    background: color-mix(in oklab, var(--veri-ikincil) 42%, var(--surface)); }
.ms-olcek-etkilenme .ms-kv4 rect, .ms-olcek-etkilenme li.ms-kv4 .ms-lejant-kutu
  { fill: color-mix(in oklab, var(--veri-ikincil) 80%, var(--surface));
    background: color-mix(in oklab, var(--veri-ikincil) 80%, var(--surface)); }
.ms-olcek-etkilenme .ms-kv5 rect, .ms-olcek-etkilenme li.ms-kv5 .ms-lejant-kutu
  { fill: color-mix(in oklab, var(--veri-ikincil) 90%, var(--surface));
    background: color-mix(in oklab, var(--veri-ikincil) 90%, var(--surface)); }
.ms-olcek-etkilenme .ms-kv6 rect, .ms-olcek-etkilenme li.ms-kv6 .ms-lejant-kutu
  { fill: var(--veri-ikincil); background: var(--veri-ikincil); }

.ms-olcek-ucret .ms-kv1 rect, .ms-olcek-ucret li.ms-kv1 .ms-lejant-kutu,
.ms-olcek-egitim .ms-kv1 rect, .ms-olcek-egitim li.ms-kv1 .ms-lejant-kutu
  { fill: color-mix(in oklab, var(--accent) 10%, var(--surface));
    background: color-mix(in oklab, var(--accent) 10%, var(--surface)); }
.ms-olcek-ucret .ms-kv2 rect, .ms-olcek-ucret li.ms-kv2 .ms-lejant-kutu,
.ms-olcek-egitim .ms-kv2 rect, .ms-olcek-egitim li.ms-kv2 .ms-lejant-kutu
  { fill: color-mix(in oklab, var(--accent) 26%, var(--surface));
    background: color-mix(in oklab, var(--accent) 26%, var(--surface)); }
.ms-olcek-ucret .ms-kv3 rect, .ms-olcek-ucret li.ms-kv3 .ms-lejant-kutu,
.ms-olcek-egitim .ms-kv3 rect, .ms-olcek-egitim li.ms-kv3 .ms-lejant-kutu
  { fill: color-mix(in oklab, var(--accent) 42%, var(--surface));
    background: color-mix(in oklab, var(--accent) 42%, var(--surface)); }
.ms-olcek-ucret .ms-kv4 rect, .ms-olcek-ucret li.ms-kv4 .ms-lejant-kutu,
.ms-olcek-egitim .ms-kv4 rect, .ms-olcek-egitim li.ms-kv4 .ms-lejant-kutu
  { fill: color-mix(in oklab, var(--accent) 80%, var(--surface));
    background: color-mix(in oklab, var(--accent) 80%, var(--surface)); }
.ms-olcek-ucret .ms-kv5 rect, .ms-olcek-ucret li.ms-kv5 .ms-lejant-kutu,
.ms-olcek-egitim .ms-kv5 rect, .ms-olcek-egitim li.ms-kv5 .ms-lejant-kutu
  { fill: color-mix(in oklab, var(--accent) 90%, var(--surface));
    background: color-mix(in oklab, var(--accent) 90%, var(--surface)); }
.ms-olcek-ucret .ms-kv6 rect, .ms-olcek-ucret li.ms-kv6 .ms-lejant-kutu,
.ms-olcek-egitim .ms-kv6 rect, .ms-olcek-egitim li.ms-kv6 .ms-lejant-kutu
  { fill: var(--accent); background: var(--accent); }

/* Artan olceklerde son uc durak koyu zemin. */
.ms-olcek-etkilenme .ms-kv4 text, .ms-olcek-etkilenme .ms-kv5 text,
.ms-olcek-etkilenme .ms-kv6 text,
.ms-olcek-ucret .ms-kv4 text, .ms-olcek-ucret .ms-kv5 text,
.ms-olcek-ucret .ms-kv6 text,
.ms-olcek-egitim .ms-kv4 text, .ms-olcek-egitim .ms-kv5 text,
.ms-olcek-egitim .ms-kv6 text { fill: var(--on-accent); }

/* --- Ölçü şeridi ve lejant --- */
.ms-olcek-serit { display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: var(--space-2); }
.ms-tahmin-im { font-weight: 400; font-size: var(--t-meta); opacity: .75; }

.ms-lejant-isi { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-3); margin-top: var(--space-3);
  font-size: var(--t-meta); color: var(--ink-muted); }
.ms-lejant-ad { font-weight: 600; color: var(--ink); }
.ms-lejant-kovalar { list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 2px; }
.ms-lejant-kovalar > li { display: inline-flex; align-items: center; gap: 4px; }
.ms-lejant-kutu { width: 22px; height: 12px; border-radius: 2px;
  border: 1px solid var(--rule); }
.ms-lejant-metin { margin-right: var(--space-2); }
.ms-lejant-yok { display: inline-flex; align-items: center; gap: 4px; }

/* Bahçedeki tek tek öğeler: yaprak, çiçek, meyve. Her birinin kendi
   <title>'ı var — tarayıcının kendi ipucu, ek JS yok, ekran okuyucu
   için de erişilebilir ad üretiyor. İmleç "burada okunacak bir şey
   var" diyor; bir bitkinin üzerinde gezerken bunu keşfetmenin başka
   yolu yok. */
.bh-oge { cursor: help; }
.bh-oge:hover .bh-yaprak, .bh-oge:hover .bh-cicek circle,
.bh-oge:hover .bh-meyve circle { filter: brightness(1.12); }

/* Panelde aynı bilgi OKUNUR duruyor: <title> yalnız fareyle geliyor,
   dokunmatikte ve klavyede ulaşılmaz. */
.bh-oge-liste { list-style: none; margin: 0 0 var(--space-2); padding: 0;
  display: grid; gap: 5px; }
.bh-oge-liste li { display: grid; gap: 0 8px;
  grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  font-size: var(--t-meta); line-height: 1.45; }
.bh-oge-liste b { color: var(--ink); font-weight: 600; min-width: 0;
  overflow-wrap: anywhere; }
.bh-oge-liste span { color: var(--ink-muted); white-space: nowrap;
  font-family: var(--font-num); }
/* Ödül satırı meyvenin rengiyle işaretli: panelde okunan satır ile
   tuvalde görülen şekil aynı şeyi söylesin. */
.bh-oge-liste.odul b { border-left: 3px solid var(--bh-meyve);
  padding-left: 7px; display: inline-block; }

/* --- Gruplu kategori kutusu ---
   AÇIK HÂLDEKİ LİSTEYİ İŞLETİM SİSTEMİ ÇİZİYOR. CSS'in oraya erişimi
   sınırlı ve tarayıcıya göre değişiyor: Chrome ve Edge optgroup/option
   üzerinde renk, ağırlık ve boşluğu uyguluyor; Safari neredeyse
   hiçbirini. Bu yüzden buradaki kurallar bir SÜS DEĞİL, HİYERARŞİ:
   uygulanmazsa liste yine okunur kalır, uygulanırsa grup başlığı ile
   seçenek birbirinden ayrılır.

   RENK KODLAMASI YOK. Beş alana beş renk vermek cazipti ama bahçede
   alanlar renkle ayrılmıyor (hepsi yeşil bitki); burada ayırsaydık
   portalda başka hiçbir yerde karşılığı olmayan bir kodlama
   uydurmuş olurduk. */
.yf optgroup, select optgroup {
  font-weight: 700;
  font-style: normal;          /* tarayıcı varsayılanı italik yapıyor */
  color: var(--ink);
  background: var(--surface-sunk);
  padding: 4px 0;
}
.yf optgroup option, select optgroup option {
  font-weight: 400;
  color: var(--ink);
  background: var(--surface);
  padding: 3px 0 3px 6px;
}
option:checked, option:hover { background: var(--accent); color: var(--on-accent); }

/* Kapalıyken hangi fidana düştüğü GÖRÜNMÜYOR — açık listede grup
   başlığı var ama kapanınca kayboluyor. Bu satır onu geri getiriyor
   ve seçim değiştikçe güncelleniyor (basvuru.js turHedefiBagla). */
/* SATIR HİZASI: yer ÖDENİR, ÇALINMAZ.
   `.yf` alanları alt kenara hizalıyor (align-items: end). Satır akışta
   kalsaydı Tür hücresi uzar ve kutusu aşağı kaçardı; akıştan çıkarılıp
   yalnız o hücreye alt pay verilince bu kez kutusu YUKARI kaçtı —
   ekranda Tür kutusu öbürlerinden bir satır yüksek duruyordu.
   Alt pay artık o formdaki BÜTÜN alanlara veriliyor: payları eşit,
   kutuları aynı çizgide, ipucu kendi payının içine sarkıyor. */
.yf:has(.yf-hedef) > label { padding-bottom: 1.5em; }
.yf label:has(> .yf-hedef) { position: relative; }
/* `bottom: 0`, `top: 100%` DEGIL. top:100% dolgu kutusunun ALT KENARI
   demek: ayrilan pay ne kadar buyurse ipucu o kadar asagi kayiyor ve
   altindaki satirin etiketine biniyordu (Tur'un ipucu, Bitis'in
   etiketinin uzerine). bottom:0 ipucunu ayrilan payin ICINE oturtuyor. */
.yf-hedef {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  font-size: var(--t-meta);
  color: var(--ink-muted);
  line-height: 1.4;
  min-height: 1.4em;           /* seçim değişince satır zıplamasın */
}
.yf-hedef b { color: var(--ink); font-weight: 600; }
/* Bahçede görünmeyen kategori (bugün yalnız "Diğer") uyarı tonunda:
   kayıt kabul ediliyor ama bir fidana düşmüyor ve bunun görülmesi
   gerekiyor. Renk TEK KANAL DEĞİL — yazı da bunu söylüyor. */
.yf-hedef.yok { color: var(--warn); }

/* --- EduBahçe: bugün çizgisi ve kalan süre ---
   Çizginin ÜSTÜ kalan süre: öğrencinin başvuru dönemine kadar hâlâ
   elinde olan aylar. Bu çizgi olmadan cetvelin üstündeki boşluk
   "yetersizlik" gibi okunuyordu; oysa bir kısmı HENÜZ YAŞANMAMIŞ
   zaman. İkisi ayrı şeyler ve ekranın bunu söylemesi gerekiyor. */
.bh-kalan { fill: var(--ink); opacity: .04; }
.bh-bugun line { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 4; }
.bh-bugun-etiket { font-size: 9px; fill: var(--accent); font-weight: 600;
  letter-spacing: .02em; }
/* İkinci satır (kalan süre) daha hafif: "bugün" işaretin adı, kalan
   süre onun açıklaması. */
.bh-bugun-etiket.alt { font-weight: 500; font-family: var(--font-num); }

/* --- EduBahçe: hedef hayaleti (sql/039) ---
   Hedef, bitkinin OLMAYAN KISMI olarak çiziliyor: gerçek bitkinin
   tepesinden hedef boya kadar kesik bir gövde, eksik meyveler boş
   halka. Tamamı değil YALNIZ EKSİK OLAN — hedefin zaten tutulan
   kısmını bir kez daha çizmek gürültü olurdu ve ekran "ne yapmalı"
   yerine "ne var" derdi. Hedefe ulaşıldıysa hayalet hiç çizilmiyor. */
/* Hayalet grubu tiklamayi ENGELLEMEZ: gercek bitkinin yapraklarinin
   ustunde duruyor ve kendi <title>'i var, ama fare olaylari altindaki
   yaprak ve meyveye gecmeli — yoksa "bu yaprak hangi proje" ipucu
   hayaletin altinda kalirdi. */
.bh-hedef { pointer-events: none; }
.bh-hedef-govde { stroke: var(--ink-muted); stroke-width: 1.4;
  stroke-dasharray: 4 4; opacity: .55; }
.bh-hedef-cizgi { stroke: var(--ink-muted); stroke-width: 1.2;
  stroke-dasharray: 3 3; opacity: .6; }
/* Yakın hedef (bu yıl) daha belirgin: önce o geliyor ve öğrencinin
   şimdi bakması gereken durak o. Uzak hedef arkada duruyor. */
.bh-hedef-cizgi.yakin { stroke: var(--accent); stroke-width: 1.6;
  stroke-dasharray: 5 3; opacity: .85; }
.bh-hedef-meyve circle { stroke: var(--bh-meyve); stroke-width: 1.4;
  stroke-dasharray: 3 2.5; opacity: .7; }
/* Bitkinin üzerine gelince hedef netleşiyor: hayalet sürekli tam
   görünürlükte olsaydı gerçek bitkiyle yarışırdı. */
.bh-alan:hover .bh-hedef-govde, .bh-alan:focus-within .bh-hedef-govde { opacity: .9; }
.bh-alan:hover .bh-hedef-meyve circle,
.bh-alan:focus-within .bh-hedef-meyve circle { opacity: 1; }
/* Hedefi olan alan işaretli: hedefsiz alanla aynı görünmesin. */
.bh-alan.hedefli .bh-etiket { font-weight: 700; }

/* --- Koçun hedefleri: başlık ve çubuklar ---
   Hedefli ölçüler hedefsizlerden ayırt edilemiyordu: "1 / 8 ay" bir
   hedef olduğunu söylüyor ama KİMİN koyduğunu söylemiyordu. İlerleme
   sayacı da en altta, çubuklardan uzakta duruyordu. */
.bh-hedef-bas { display: grid; grid-template-columns: 1fr auto;
  gap: 0 var(--space-2); align-items: baseline;
  margin: var(--space-4) 0 var(--space-3);
  padding-top: var(--space-3); border-top: 1px solid var(--rule); }
.bh-hedef-bas-ad { font-size: var(--t-meta); font-weight: 700;
  letter-spacing: .06em; color: var(--ink-muted); }
.bh-hedef-bas-alt { grid-column: 1 / -1; font-size: var(--t-meta);
  color: var(--ink-faint); }
.bh-hedef-sayac { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-meta); font-weight: 700; color: var(--ink-muted);
  background: var(--surface-sunk); border-radius: 999px; padding: 2px 9px; }
.bh-hedef-sayac.tam { color: var(--ok); background: var(--ok-wash); }

/* İKİ UFUK TEK ÇUBUKTA (bullet chart): ölçek en uzak hedef, dolgu
   bugünkü değer, ÇENTİK yakın hedef. İki ayrı çubuk aynı ölçüyü iki
   kez gösterirdi ve "8 ay" iki farklı oranda görünürdü. */
.bh-olcu-isaret { position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: var(--ink); border-radius: 1px; transform: translateX(-1px); }
.bh-ufuk-satir { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 4px; }
.bh-ufuk-not { font-size: var(--t-meta); color: var(--ink-muted); }
/* Ulaşılan ufuk renkle VE yazıyla belli: renk tek kanal olamaz. */
.bh-ufuk-not.tam { color: var(--ok); font-weight: 600; }

/* HEDEFLİ ÇUBUK NÖTR, ulaşınca yeşil.
   Hedefsiz çubuk ölçünün kendi rengini taşır (gövde, yaprak, meyve) —
   orada renk BÜYÜKLÜĞÜ değil NEYİ saydığını söylüyor. Hedefli çubukta
   aynı renkler bir YARGIYA dönüşüyordu: 1/4 meyve koyu kırmızı bir
   çubuk olarak "kötü" diye okunuyor, oysa tamamlanmamış olmak kötü
   değil. İlerleme tek renk, bitince yeşil. */
.bh-olcu.hedefli .bh-olcu-dolgu { background: var(--ink-muted); }
.bh-olcu.hedefli .bh-olcu-ray { background: var(--surface-sunk);
  box-shadow: inset 0 0 0 1px var(--rule); }
.bh-olcu.tam .bh-olcu-dolgu { background: var(--ok); }
.bh-olcu.tam .bh-olcu-not { color: var(--ok); font-weight: 600; }

/* Koçun hedef girme ızgarası. Beş alan yan yana: hedefler birbirine
   göre konur, tek tek değil — bir alana on iki ay yazarken ötekine ne
   yazdığını görmek gerekir. */
/* Katlanan formun ilk satırı özet düğmesine yapışmasın. */
.yk-katla[open] > .pg-neden { margin-top: var(--space-2); }
/* YAN YANA DEGIL ALT ALTA. Alti alan bir izgaraydi ve her kutu ~15rem
   kaliyordu; icindeki bes sutunluk tablo sigmadigi icin HER ALANIN
   ALTINDA AYRI BIR YATAY KAYDIRMA CUBUGU vardi. Alt alta dizilince
   acilan alan kartin butun genisligini aliyor ve cubuk kalmiyor. */
.bhh-liste { display: grid; gap: var(--space-2); }
.bhh-alan { border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); min-width: 0; margin-bottom: 0; }
.bhh-alan[open] { border-color: var(--rule-strong); }
/* Ozet satiri bir DUGME degil bir SATIR: tam genislikte, kod solda,
   durum sagda, ok en sagda. Secici `.bhh-alan > .bhh-ozet` cunku
   `.yk-katla > summary` (0,1,1) inline-flex diyor; iki sinifli secici
   (0,2,0) onu asiyor ve dosyadaki siraya bagli kalmiyoruz. */
.bhh-alan > .bhh-ozet { display: flex; width: 100%; gap: var(--space-2);
  align-items: center; padding: var(--space-2) var(--space-3);
  font-size: var(--t-label); }
.bhh-alan > .bhh-ozet::after { margin-left: 0; }
.bhh-alan > .bhh-ozet:hover { background: var(--surface-sunk); }
.bhh-alan[open] > .bhh-ozet { border-bottom: 1px solid var(--rule); }
/* Tablo ve kaydet satiri ozetin hizasinda kalsin. */
.bhh-alan > .bhh-tablo, .bhh-alan > .yf-eylem { padding: var(--space-3); }
.bhh-ad { font-weight: 600; color: var(--ink); }
/* Sayac oku sagdan ONCE gelsin diye bosluk burada aciliyor. */
.bhh-say { margin-left: auto; font-size: var(--t-meta); color: var(--ok);
  white-space: nowrap; }
/* "hedef yok" bir eksiklik degil bir DURUM: uyari tonu degil, silik. */
.bhh-say.yok { color: var(--ink-faint); }
/* IZGARA DEĞİL TABLO. Beş alan × altı kademe × dört ölçü = yüz yirmi
   kutu; her kutuyu kendi etiketiyle yazmak sayfayı okunmaz yapıyordu.
   Tabloda etiket satır ve sütun başlığında bir kez duruyor ve koç
   trajektoriyi YAZARKEN görüyor. */
.bhh-tablo { width: 100%; border-collapse: collapse; display: block;
  overflow-x: auto; }
.bhh-tablo th, .bhh-tablo td { padding: 4px 5px; text-align: left;
  vertical-align: middle; }
.bhh-tablo thead th { font-size: var(--t-meta); font-weight: 600;
  color: var(--ink-muted); line-height: 1.25; white-space: nowrap; }
.bhh-tablo tbody th { font-size: var(--t-meta); font-weight: 600;
  color: var(--ink); white-space: nowrap; padding-right: var(--space-2); }
.bhh-tablo input, .bhh-tablo select { height: 30px; padding: 0 6px;
  font-size: var(--t-label); min-width: 4.5rem; }
.bhh-tablo input { font-family: var(--font-num); }
/* TOPLAM satırı ayrı: bir sınıf değil, uç değer. Üstünde ayraç. */
.bhh-tablo tr.toplam th, .bhh-tablo tr.toplam td {
  border-top: 1px solid var(--rule-strong); padding-top: 8px; }
.bhh-tablo tr.toplam th { color: var(--ink); font-weight: 700; }
/* Birim etiketin İÇİNDE: ayrı bir satır olsaydı ızgara iki katına
   çıkardı ve beş alan yan yana sığmazdı. */
.bhh-birim { font-style: normal; font-weight: 400; color: var(--ink-faint); }
/* Alan kodu tabular: beş kutu alt alta dizildiğinde kodlar hizalansın. */
.bhh-kod { font-family: var(--font-num); font-size: var(--t-meta);
  font-weight: 700; letter-spacing: .04em; color: var(--ink-muted);
  background: var(--surface-sunk); border-radius: 4px; padding: 2px 6px; }
/* Derinlik bir SAYI değil bir KADEME: sayı kutusu yerine seçim kutusu,
   çünkü "3" yazmak koça hiçbir şey söylemez, "Ulusal" söyler. Yüksekliği
   yanındaki sayı kutularıyla aynı kalmalı. */
.bhh-hedef_derinlik { height: var(--control-h); }

/* Denemenin BAHÇEDEKİ ROLÜ (sql/043). Rozet renkle VE yazıyla:
   renk tek kanal olamaz. Meyve rengi bahçedekiyle aynı, yaprak da —
   listede okunan rol ile tuvalde görülen şekil aynı şeyi söylesin. */
.dn-rol { display: inline-block; font-size: var(--t-meta); font-weight: 600;
  border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
/* YAPRAK ROZETI --bh-yaprak DEGIL --ok-wash: yaprak rengi bir SVG
   DOLGU rengi ve uzerine hic yazi konmamisti. Rozet olarak
   kullanildiginda koyu yaziyla 3.09:1 veriyordu — 4.5 esiginin
   altinda. Olculdu, degistirildi. */
.dn-rol-yaprak { color: var(--ok); background: var(--ok-wash); }
.dn-rol-meyve { color: var(--on-accent); background: var(--bh-meyve); }
.dn-rol-sure { color: var(--ink-muted); background: var(--surface-sunk); }

/* Deneme listesinin kesme neti. Eşik BU LİSTEDEKİ rolleri belirliyor,
   o yüzden ayarı da burada: "veri görüldüğü yerde girilir". */
.dn-esik { display: flex; align-items: center; gap: var(--space-2) var(--space-3);
  flex-wrap: wrap; margin-top: var(--space-3); padding: var(--space-3);
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface-sunk); }
.dn-esik-ad { font-size: var(--t-meta); font-weight: 700; letter-spacing: .06em;
  color: var(--ink-muted); }
.dn-esik label { display: flex; align-items: center; gap: 7px;
  font-size: var(--t-label); color: var(--ink); }
.dn-esik input { width: 5.5rem; height: 30px; padding: 0 8px;
  font-family: var(--font-num); font-size: var(--t-label); }
/* Not kendi satırına düşer: dar ekranda kutuların arasına sıkışınca
   hangi kutuya ait olduğu belirsizleşiyordu. */
.dn-esik-not { flex: 1 1 100%; font-size: var(--t-meta); color: var(--ink-muted);
  line-height: 1.45; }

/* --------------------------------------------------------------------------
   Kabul Modeli — okulun kendi CDS C7 beyanı
   -------------------------------------------------------------------------- */
/* YÜZDE İMASI VEREN GÖRSEL YOK. C7 SIRALI bir ölçek: "çok önemli"nin
   "önemli"den ÜSTTE olduğu söylenebilir, KAÇ KAT olduğu söylenemez.
   Çubuk tam da o ikinci iddiayı görsel olarak yapardı; nokta dizisi
   ADET gösterir — dört kutudan üçü dolu — ve adet sıralamanın kendisi.
   Bu yüzden bu bölümde hiçbir kademe göstergesine genişlik yazılmaz. */
.km-blok h4 { display: flex; align-items: baseline; gap: var(--space-2); }
/* Doğrulaması zayıf kayıt işaretli: katalogdaki "kaynak yok" rozetiyle
   aynı iş. Rozet RENK DEĞİL METİN taşıyor. */
.km-guven { font-size: var(--t-meta); font-weight: 600; color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border-radius: 999px; padding: 1px 8px; }

/* Açılış bulgusu: on sekiz satırlık tablo kendini okutmaz, en değerli
   bilgi tarama gerektirmemeli. Cümle VERİDEN türüyor (sayım), yorum
   değil. */
.km-bulgu { margin: 0 0 var(--space-4); padding: var(--space-3);
  font-size: var(--t-body); line-height: 1.55; color: var(--ink);
  background: var(--surface-sunk); border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0; }
.km-bulgu b { font-weight: 600; }

.km-obek { margin-bottom: var(--space-4); }
.km-obek h5 { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-2); margin: 0 0 var(--space-2);
  font-size: var(--t-label); font-weight: 600; color: var(--ink); }
/* Öbeğin gerekçesi başlığın yanında: üç kutunun neden böyle bölündüğü
   sorusu ekranda cevapsız kalmaz. */
.km-obek-neden { font-size: var(--t-meta); font-weight: 400; color: var(--ink-muted); }

.km-liste { margin: 0; display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.km-satir { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-2) var(--space-3); padding: 7px var(--space-3);
  background: var(--surface); }
.km-satir dt { flex: 1 1 11rem; min-width: 0; font-size: var(--t-label);
  color: var(--ink-muted); }
.km-satir dd { display: flex; align-items: baseline; gap: var(--space-2);
  margin: 0; white-space: nowrap; }
/* Noktalar tabular: satırlar alt alta dizildiğinde diziler hizalansın. */
.km-nokta { font-family: var(--font-num); font-size: 0.9em; letter-spacing: .12em;
  color: var(--ink-faint); }
.km-kademe { font-size: var(--t-label); color: var(--ink-muted);
  min-width: 8.5rem; }

/* EN ÜST KADEME ÜÇ KANALDA: nokta adedi (dört dolu), kalın yazı, ve
   kademenin kendi kelimesi. Renk DÖRDÜNCÜ kanal, tek başına değil. */
.km-satir.ust { background: var(--ok-wash); }
.km-satir.ust dt { color: var(--ink); font-weight: 600; }
.km-satir.ust .km-nokta { color: var(--ok); }
.km-satir.ust .km-kademe { color: var(--ok); font-weight: 600; }

/* Boş bırakılmış satır SİLİK, çünkü ölçülmemiş — ama görünmez değil:
   "okul bunu boş bıraktı" da bir bilgidir. */
.km-satir.bos dt, .km-satir.bos .km-kademe { color: var(--ink-faint); }
.km-neden { flex: 1 1 100%; margin: 2px 0 0; font-size: var(--t-meta);
  color: var(--ink-muted); line-height: 1.45; white-space: normal; }

.km-alt { margin-bottom: var(--space-4); }
.km-alt h5 { display: flex; align-items: baseline; gap: var(--space-2);
  margin: 0 0 var(--space-2); font-size: var(--t-label);
  font-weight: 600; color: var(--ink); }
.km-yil { font-family: var(--font-num); font-size: var(--t-meta);
  font-weight: 500; color: var(--ink-faint); }
.km-ayirt { margin: 0; padding-left: 1.1rem; font-size: var(--t-label);
  line-height: 1.6; color: var(--ink); }
.km-ayirt li { margin-bottom: 3px; }
.km-kunye { margin: var(--space-2) 0 0; font-size: var(--t-meta);
  color: var(--ink-muted); line-height: 1.5; }
.km-kunye b { color: var(--ink); font-weight: 600; }
.km-son { padding-top: var(--space-3); border-top: 1px solid var(--rule); }

/* Portfolyo: okul projeyi nasıl teslim alıyor. Slot sayısı bir SAYI
   değil bir SINIR — o yüzden ölçü satırı değil, cümlenin içinde. */
.km-slot { margin: 0 0 var(--space-2); font-size: var(--t-body); color: var(--ink); }
.km-slot b { font-family: var(--font-num); font-weight: 700; }
.km-kanal { margin: var(--space-3) 0 0; display: grid; gap: var(--space-3); }
.km-kanal dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2);
  margin-bottom: 2px; font-size: var(--t-label); font-weight: 600; color: var(--ink); }
.km-kanal dd { margin: 0; font-size: var(--t-label); line-height: 1.55;
  color: var(--ink-muted); }
.km-sinir { font-size: var(--t-meta); font-weight: 400; color: var(--ink-faint);
  background: var(--surface-sunk); border-radius: 4px; padding: 1px 6px; }
/* Kanalı OLMAYAN alan da bilgi: oraya yapılan yatırımın başvuruda
   gösterilecek yeri yok. Uyarı tonunda, çünkü boşa emek riski. */
.km-yok-liste { margin: var(--space-3) 0 0; padding-left: 1.1rem;
  font-size: var(--t-label); line-height: 1.55; color: var(--warn); }

/* --------------------------------------------------------------------------
   Veli aylık raporu
   -------------------------------------------------------------------------- */
/* BU EKRAN VELİYE GİDİYOR ve kâğıda basılıyor. Üç sonucu var:
   (1) "kayıt yok" silik değil OKUNUR olmalı — ölçülmemiş bir ayı görünmez
       kılmak, onu sıfır göstermekle aynı kapıya çıkar.
   (2) Yazdırma bloğu (@media print) zaten karanlık temayı aydınlatıyor;
       burada ayrı bir yazdırma paleti KURULMUYOR.
   (3) Renk sekmenin ALANINDAN geliyor (--alan-iletisim, lacivert). Rapor
       kendi paletini kurmuyor: portalda hangi sekmedeysen belgenin rengi de
       o. Bölüm başlıklarındaki dikey çubuk o rengi taşıyor. */
.vr-rapor { --vr-vurgu: var(--alan-iletisim);
  max-width: 46rem; display: flex; flex-direction: column; gap: var(--space-5); }

/* Künye başlığa yapışık, bölümlerden ayrık: ikisi bir öbek. */
.vr-bas { display: flex; flex-direction: column; gap: 4px;
  padding-bottom: var(--space-4); border-bottom: 2px solid var(--vr-vurgu); }
.vr-bas h2 { margin: 0; font-size: clamp(1.4rem, 3.5vw, 1.9rem);
  line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; color: var(--ink); }
.vr-kunye { margin: 0; font-size: var(--t-meta); color: var(--ink-muted); line-height: 1.5; }

/* Eksikler şeridi koç notundan ÖNCE ve gözden kaçmayacak tonda. */
.vr-eksik-serit { padding: var(--space-3) var(--space-4);
  font-size: var(--t-label); line-height: 1.55; color: var(--ink);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border-left: 3px solid var(--warn); border-radius: 0 var(--radius) var(--radius) 0; }
.vr-eksik-serit b { color: var(--warn); }

/* BÖLÜM BAŞLIĞI: solunda alanın rengini taşıyan kısa bir çubuk. Süs
   değil — belgeyi tarayan göz bölüm sınırlarını bununla buluyor. */
.vr-bolum { display: flex; flex-direction: column; gap: var(--space-3); }
.vr-bolum h3 { display: flex; align-items: center; gap: var(--space-2);
  margin: 0; font-size: var(--t-h3); letter-spacing: -0.005em; color: var(--ink); }
.vr-bolum h3::before { content: ""; flex: none; width: 3px; height: 1.1em;
  background: var(--vr-vurgu); border-radius: 2px; }
.vr-obek { display: flex; flex-direction: column; gap: var(--space-2); }
.vr-obek h4 { margin: 0; font-size: var(--t-meta); font-weight: 600;
  letter-spacing: .05em; color: var(--ink-muted); }

/* "Kayıt yok" SİLİK DEĞİL. */
.vr-yok { margin: 0; padding: var(--space-3) var(--space-4);
  font-size: var(--t-label); line-height: 1.55; color: var(--ink);
  background: var(--surface-sunk); border-radius: var(--radius); }
.vr-yok b { color: var(--ink); font-weight: 600; }

.vr-kapsam { margin: 0; font-size: var(--t-body); line-height: 1.6; color: var(--ink); }
.vr-kapsam b { font-weight: 600; }
.vr-not { margin: 0; font-size: var(--t-meta); color: var(--ink-muted); line-height: 1.5; }
.vr-vurgu { margin: 0; font-size: var(--t-body); color: var(--ink); }
.vr-vurgu b { font-family: var(--font-num); font-weight: 700; color: var(--vr-vurgu); }

/* Ölçüler kart gibi: sayı büyük, etiket küçük, rakamlar tabular. */
.vr-olculer { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: var(--space-2); margin: 0; }
.vr-olculer > div { padding: var(--space-3);
  background: var(--surface-sunk); border-radius: var(--radius); }
.vr-olculer dt { margin: 0 0 2px; font-size: var(--t-meta); color: var(--ink-muted); }
.vr-olculer dd { margin: 0; font-size: var(--t-body); color: var(--ink); }
.vr-olculer dd.sayi { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }

/* Tablo taşarsa KENDİ kutusunda kayar; sayfa yana kaymaz. */
.vr-tablo { width: 100%; border-collapse: collapse; font-size: var(--t-label); }
.vr-tablo th { text-align: left; padding: 0 var(--space-3) 6px 0;
  font-size: var(--t-meta); font-weight: 600; color: var(--ink-muted);
  border-bottom: 1px solid var(--rule-strong); white-space: nowrap; }
.vr-tablo th i { font-style: normal; font-weight: 400; color: var(--ink-faint); }
.vr-tablo td { padding: 7px var(--space-3) 7px 0;
  border-bottom: 1px solid var(--rule); color: var(--ink); vertical-align: middle; }
.vr-tablo tr:last-child td { border-bottom: 0; }
.vr-tablo td.sayi, .vr-tablo th.sayi { font-family: var(--font-num);
  font-variant-numeric: tabular-nums; text-align: right; padding-right: 0; }

/* Hedef tablosu: her ölçü bir mermi çubuğu taşıyor, sütunlar eşit. */
.vr-hedef-tablo { table-layout: fixed; }
.vr-hedef-tablo th:first-child, .vr-hedef-tablo td:first-child { width: 4.5rem; }
.vr-kademe { font-size: var(--t-meta); color: var(--ink-muted); }
/* MERMİ ÇUBUĞU: ölçek = hedef, dolgu = bugünkü değer. Uzunluk burada
   oran gibi okunuyor ve oran GERÇEKTEN var (gerçekleşen/hedef) — C7
   tablosunda çubuğun yasak olmasının sebebi orada oran OLMAMASIYDI. */
.vr-mermi { display: block; height: 6px; border-radius: 999px;
  background: var(--surface-sunk); overflow: hidden; }
.vr-mermi i { display: block; height: 100%; border-radius: 999px;
  background: var(--vr-vurgu); }
.vr-mermi.tam i { background: var(--ok); }
.vr-mermi-not { display: block; margin-top: 3px; font-family: var(--font-num);
  font-variant-numeric: tabular-nums; font-size: var(--t-meta); color: var(--ink); }
.vr-mermi-hedef { color: var(--ink-faint); }
.vr-hbos { font-size: var(--t-meta); color: var(--ink-faint); }

/* Ders dağılımı: parçaların toplamı bütün olduğu için çubuk meşru.
   Pasta değil — "çubuk daireyi yener" (CLAUDE.md 3). */
.vr-dagilim { display: flex; flex-direction: column; gap: 6px; }
.vr-dag-satir { display: grid; grid-template-columns: minmax(6rem, 10rem) 1fr auto auto;
  align-items: center; gap: var(--space-3); font-size: var(--t-label); }
.vr-dag-ad { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vr-dag-cubuk { height: 8px; border-radius: 999px; background: var(--surface-sunk); overflow: hidden; }
.vr-dag-cubuk i { display: block; height: 100%; border-radius: 999px;
  background: var(--vr-vurgu); min-width: 2px; }
.vr-dag-sayi { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--ink); }
.vr-dag-oran { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-meta); color: var(--ink-muted); min-width: 2.6rem; text-align: right; }

.vr-liste { margin: 0; padding-left: 1.1rem; font-size: var(--t-label);
  line-height: 1.65; color: var(--ink); }
.vr-etiket { font-size: var(--t-meta); color: var(--ink-muted);
  background: var(--surface-sunk); border-radius: 4px; padding: 1px 6px;
  white-space: nowrap; }

/* Koçun notu belgenin en insani parçası: okuma satırı dar tutuluyor ve
   alanın rengiyle hafifçe zeminleniyor. */
.vr-bolum[data-modul="koc_notu"] { padding: var(--space-4);
  background: color-mix(in srgb, var(--alan-iletisim) 6%, transparent);
  border-radius: var(--radius-card); }
.vr-not-govde { margin: 0; max-width: 60ch; font-size: var(--t-body);
  line-height: 1.7; color: var(--ink); }
.vr-alt { padding-top: var(--space-3); border-top: 1px solid var(--rule); }

/* Modül seçimi: her satır modülün NEREDEN beslendiğini de söyler. */
.vr-modul-secim { display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.vr-modul { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-2); padding: 7px var(--space-3); background: var(--surface);
  font-size: var(--t-label); cursor: pointer; }
.vr-modul:hover { background: var(--surface-hover); }
.vr-modul.zorunlu { background: var(--surface-sunk); cursor: default; }
.vr-modul input { width: auto; flex: none; margin: 0; }
.vr-modul-ad { color: var(--ink); font-weight: 500; }
.vr-modul-kaynak { margin-left: auto; font-family: var(--font-num);
  font-size: var(--t-meta); color: var(--ink-faint); }

/* Rapor kartının araç şeridi ve koç alanları */
.vr-arac { display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--space-3); margin-bottom: var(--space-3); }
.vr-donem { display: grid; gap: var(--space-1); font-size: var(--t-label);
  color: var(--ink-muted); }
.vr-donem select { width: auto; min-width: 8rem; }
.vr-gecmis { margin-bottom: var(--space-3); color: var(--ink-muted);
  font-size: var(--t-meta); }
.vr-moduller { margin-bottom: var(--space-3); }
/* Önizleme ÇERÇEVELİ: koç baktığı şeyin "velinin göreceği belge"
   olduğunu görsün. Ayrı bir koç görünümü YOK. */
.vr-onizleme { padding: var(--space-4); margin-bottom: var(--space-3);
  background: var(--surface); border: 1px solid var(--rule-strong);
  border-radius: var(--radius-card); }
.vr-not-alan { display: grid; gap: var(--space-1); margin-bottom: var(--space-2);
  font-size: var(--t-label); color: var(--ink-muted); }
.vr-takip-durum { margin-left: auto; font-size: var(--t-meta);
  color: var(--ink-muted); white-space: nowrap; }
/* Eksik olan uyarı tonunda: koçun bunu görmesi gerekiyor. */
.vr-takip-durum.eksik { color: var(--warn); font-weight: 600; }
.vr-kart { margin-bottom: var(--space-4); }

/* YAZDIRMADA araç şeridi çıkmaz: seçici ve düğme kâğıtta işe yaramaz.
   Ayrı bir yazdırma paleti kurulmuyor — @media print zaten karanlık
   temayı aydınlatıyor ve rapor onu olduğu gibi kullanıyor. */
@media print {
  .vr-yazdirma-disi { display: none; }
  .vr-kart { border: 0; padding: 0; }
  .vr-rapor { max-width: none; }
  .vr-bolum { break-inside: avoid; }
}

/* --------------------------------------------------------------------------
   Çevrimiçi görüşme (Jitsi)
   -------------------------------------------------------------------------- */
/* Renk sekmenin ALANINDAN geliyor (--alan-iletisim), Veli Raporu'yla aynı:
   ikisi de dışarıyla iletişim. Görüşme kendi paleti kurmuyor. */
.gr-test-not { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4);
  font-size: var(--t-label); line-height: 1.55; color: var(--ink);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border-left: 3px solid var(--warn); border-radius: 0 var(--radius) var(--radius) 0; }
.gr-test-not code { font-family: var(--font-num); font-size: 0.92em; }

/* "Şimdi açık" öbeği listenin ÜSTÜNDE: katılınabilecek bir görüşme
   varsa aranmamalı. */
.gr-acik-obek { margin-bottom: var(--space-4); }
.gr-acik-obek h3 { margin: 0 0 var(--space-2); font-size: var(--t-label);
  font-weight: 600; letter-spacing: .04em; color: var(--alan-iletisim); }

.gr-liste { display: flex; flex-direction: column; }
.gr-satir { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-3); padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule); font-size: var(--t-label); }
.gr-satir:last-child { border-bottom: 0; }
/* Katılınabilir görüşme zeminle de ayrışıyor: durum tek kanalda değil. */
.gr-acik-obek .gr-satir.acik { padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--alan-iletisim) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--alan-iletisim) 25%, transparent);
  border-radius: var(--radius); }
.gr-zaman { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--ink); white-space: nowrap; }
.gr-tur { color: var(--ink-muted); white-space: nowrap; }
.gr-konu { flex: 1 1 8rem; min-width: 0; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Durum RENKLE DEĞİL kelimeyle de taşınıyor; renk dördüncü kanal. */
.gr-durum { font-size: var(--t-meta); border-radius: 999px; padding: 1px 8px;
  white-space: nowrap; background: var(--surface-sunk); color: var(--ink-muted); }
.gr-durum.d-acik { background: var(--ok-wash); color: var(--ok); font-weight: 600; }
.gr-durum.d-iptal { color: var(--warn); }
/* Sebep tam satır: kısaltılırsa "neden katılamıyorum" cevapsız kalır. */
.gr-neden { flex: 1 1 100%; margin: 0; font-size: var(--t-meta);
  color: var(--ink-muted); line-height: 1.5; }

/* Görüşme paneli: tam ekran, çünkü video başka bir şeye bakılırken
   izlenmiyor. Portalın modal deseniyle aynı (uni-panel). */
.gr-panel { position: fixed; inset: 0; z-index: 60; display: flex;
  background: color-mix(in srgb, #000 72%, transparent); }
.gr-panel-ic { display: flex; flex-direction: column; flex: 1; margin: 0;
  background: var(--paper); }
.gr-panel-bas { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--rule); }
.gr-panel-ad { font-weight: 600; color: var(--ink); }
.gr-panel-bas .btn { margin-left: auto; }
.gr-test { font-size: var(--t-meta); font-weight: 600; color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border-radius: 999px; padding: 1px 8px; }
.gr-tuval { flex: 1; min-height: 0; background: var(--surface-sunk); }
.gr-tuval iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Yazdırmada görüşme paneli çıkmaz. */
@media print { .gr-panel { display: none; } }

/* Koç eylemleri satırın sağında, Katıl düğmesinden SONRA: birincil eylem
   katılmak, düzenleme ikincil. */
.gr-eylem { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }

/* Sınav müfredatı: bölüm/ders listesi. Ölçü sütunu SAYI taşıyor ama
   YÜZDE taşımıyor — alan başına soru dağılımı yayımlanmıyor ve
   uydurulmuyor. */
.sv-mufredat .sv-muf-ozet { margin: 0 0 var(--space-3); font-size: var(--t-body);
  color: var(--ink); line-height: 1.6; }
.sv-muf-liste { display: grid; gap: 1px; margin: 0;
  background: var(--rule); border: 1px solid var(--rule);
  border-radius: var(--radius); overflow: hidden; }
.sv-muf-obek { padding: var(--space-3); background: var(--surface); }
.sv-muf-obek dt { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-2); margin-bottom: 3px; }
.sv-muf-ad { font-size: var(--t-label); font-weight: 600; color: var(--ink); }
/* Ölçü tabular: öbekler alt alta dizildiğinde sayılar hizalansın. */
.sv-muf-olcu { margin-left: auto; font-family: var(--font-num);
  font-variant-numeric: tabular-nums; font-size: var(--t-meta);
  color: var(--ink-muted); background: var(--surface-sunk);
  border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.sv-muf-obek dd { margin: 0; font-size: var(--t-label); line-height: 1.6;
  color: var(--ink-muted); }

/* --- Koçun Programı: haftalık bırakma ızgarası ---------------------
   Izgara GERCEKTEN TABLO: satir saat, sutun gun. div izgarasi
   yazsaydik ekran okuyucu "14:00 salı" bagini kuramazdi.
   Renk TEK KANAL DEGIL: her hucre durumu ayrica kelime tasiyor
   ("boş", "dolu", "geçti") ve gorusme kartinda tur adi yazili. */
.kp-ust { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px; }
.kp-hafta { font-weight: 700; font-size: var(--t-body); }
.kp-sayac { color: var(--ink-muted); font-size: var(--t-label); }
.kp-ayar { display: flex; align-items: center; gap: 6px;
  font-size: var(--t-label); color: var(--ink-muted); }
.kp-ayar select { font: inherit; padding: 4px 6px; border: 1px solid var(--rule);
  border-radius: 8px; background: var(--surface); color: var(--ink); }

/* Ogrenci cipleri: surukleme kaynagi VE tiklanabilir secim. */
.kp-ogrenciler { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px; }
.kp-ogrenci { display: flex; align-items: baseline; gap: 8px; width: 100%;
  text-align: left; font: inherit; cursor: grab;
  padding: 8px 10px; border: 1px solid var(--rule); border-radius: 10px;
  background: var(--surface); color: var(--ink); }
.kp-ogrenci:hover { background: var(--surface-hover); }
.kp-ogrenci.secili { border-color: var(--accent); background: var(--accent-wash);
  color: var(--accent); font-weight: 700; }
.kp-ogrenci:active { cursor: grabbing; }
.kp-ogrenci-ad { flex: 1; min-width: 0; }
.kp-ogrenci-sinif { font-size: var(--t-meta); color: var(--ink-faint); }
.kp-ogrenci.secili .kp-ogrenci-sinif { color: var(--accent); }

.kp-kaydir { overflow-x: auto; }
.kp-izgara { border-collapse: collapse; width: 100%; min-width: 640px; }
.kp-izgara th, .kp-izgara td { border: 1px solid var(--rule); padding: 0; }
.kp-izgara thead th { padding: 6px 4px; font-size: var(--t-meta);
  background: var(--surface-sunk); }
.kp-izgara thead th.kp-bugun { background: var(--accent-wash); color: var(--accent); }
.kp-gun-kisa { display: block; font-weight: 700; }
.kp-gun-tarih { display: block; color: var(--ink-muted); font-weight: 400; }
.kp-saat, .kp-saat-basi { width: 56px; font-size: var(--t-meta);
  color: var(--ink-muted); font-weight: 400; text-align: right;
  padding: 0 6px; vertical-align: top; }
.kp-hucre { height: 38px; }

/* Bos hucre bir BUTON: klavyeyle gezilebilsin, Enter ile birakilabilsin. */
.kp-bos { display: block; width: 100%; height: 100%; min-height: 36px;
  border: 0; background: transparent; cursor: pointer; }
.kp-bos:hover, .kp-bos:focus-visible { background: var(--accent-wash); }
.kp-izgara.kp-tasima .kp-bos { background:
  repeating-linear-gradient(45deg, transparent, transparent 5px,
    var(--surface-sunk) 5px, var(--surface-sunk) 10px); }
.kp-izgara.kp-tasima .kp-bos:hover { background: var(--accent-wash); }
.kp-bos.kp-hedef { background: var(--accent-wash);
  outline: 2px solid var(--accent); outline-offset: -2px; }

.kp-hucre.kp-gecmis { background: var(--surface-sunk); }
.kp-isaret { display: block; text-align: center; font-size: var(--t-meta);
  color: var(--ink-faint); line-height: 36px; }
.kp-hucre.kp-dolu { background: var(--surface); }

.kp-gorusme { height: 100%; padding: 3px 6px; border-left: 3px solid var(--accent);
  background: var(--accent-wash); font-size: var(--t-meta); line-height: 1.25;
  overflow: hidden; }
.kp-gorusme.g-veli { border-left-color: var(--ok); background: var(--ok-wash); }
.kp-g-ad { display: block; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-g-sure { color: var(--ink-muted); }
.kp-g-tur { display: none; }

.kp-yardim { color: var(--ink-muted); font-size: var(--t-label);
  margin: 0 0 10px; max-width: 62ch; }
.kp-durum { font-size: var(--t-label); min-height: 1.4em; }

/* ============================================================
   HAFTALIK DERS PROGRAMI (.dp-*)
   ============================================================
   Soldan ders cipi alinip sagdaki hafta izgarasina birakiliyor.
   Olculer ve renkler .kp-* (Kocun Programi) ile AYNI aileden: iki izgara
   da ayni ekranin parcasi gibi okunsun, kullanici iki ayri dil ogrenmesin.

   Program TARIHSIZ oldugu icin burada "bugun" vurgusu YOK; sablonun
   bugunle isi olmaz. Kocun izgarasinda o vurgu var cunku orada gercek
   gorusmeler var. */

.dp-duzen { display: grid; grid-template-columns: 220px 1fr; gap: 14px;
  align-items: start; margin-top: 10px; }
@media (max-width: 860px) { .dp-duzen { grid-template-columns: 1fr; } }

.dp-palet { display: flex; flex-direction: column; gap: 10px; }
.dp-obek h4 { margin: 0 0 5px; font-size: var(--t-meta); font-weight: 700;
  color: var(--ink-muted); text-transform: none; }
.dp-cipler { display: flex; flex-wrap: wrap; gap: 5px; }

/* Cip bir BUTON: klavyeyle gezilebilsin, Enter ile secilebilsin.
   Secim RENKLE DEGIL aria-pressed ile de bildiriliyor (saf katman). */
.dp-cip { font: inherit; font-size: var(--t-meta); line-height: 1.2;
  padding: 5px 9px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--surface); color: var(--ink); cursor: grab; }
.dp-cip:hover, .dp-cip:focus-visible { border-color: var(--accent);
  background: var(--accent-wash); }
.dp-cip.secili { border-color: var(--accent); background: var(--accent-wash);
  color: var(--accent); font-weight: 700; }
.dp-cip:active { cursor: grabbing; }

/* min-width:0 SUS DEGIL: izgara kapsayicisinin overflow-x kaydirmasi
   ancak boyle calisiyor. Olmadan izgara sutunu tablonun genisligine
   kadar buyur, kaydirma hic olusmaz ve palet ezilir. */
.dp-sag { min-width: 0; }
.dp-izgara-kap { overflow-x: auto; }
.dp-izgara { border-collapse: collapse; width: 100%; min-width: 620px;
  table-layout: fixed; }
.dp-izgara thead th:first-child, .dp-izgara tbody th { width: 56px; }
.dp-izgara th, .dp-izgara td { border: 1px solid var(--rule); padding: 0; }
.dp-izgara thead th { padding: 6px 4px; font-size: var(--t-meta);
  background: var(--surface-sunk); }
.dp-izgara tbody th { width: 56px; font-size: var(--t-meta);
  color: var(--ink-muted); font-weight: 400; text-align: right;
  padding: 0 6px; }
.dp-izgara td { height: 34px; }

/* Bos hucre buton; metni "boş" yaziyor ama gorsel olarak soluk duruyor
   ki dolu hucreler one ciksin. Kelime yine de orada: renk tek kanal
   olamaz, ekran okuyucu da "boş" duyuyor. */
.dp-slot { display: block; width: 100%; height: 100%; min-height: 32px;
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: var(--t-meta); color: transparent; }
.dp-slot:hover, .dp-slot:focus-visible { background: var(--accent-wash);
  color: var(--ink-faint); }
.dp-izgara.dp-tasima .dp-slot { background:
  repeating-linear-gradient(45deg, transparent, transparent 5px,
    var(--surface-sunk) 5px, var(--surface-sunk) 10px); }
.dp-izgara.dp-tasima .dp-slot:hover { background: var(--accent-wash); }
.dp-slot.dp-hedef { background: var(--accent-wash);
  outline: 2px solid var(--accent); outline-offset: -2px; }

.dp-dolu { background: var(--accent-wash);
  border-left: 3px solid var(--accent) !important;
  position: relative; }
.dp-dolu.dp-hedef { outline: 2px solid var(--accent); outline-offset: -2px; }
.dp-ders { display: block; padding: 4px 20px 4px 6px; font-size: var(--t-meta);
  line-height: 1.2; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Kaldirma dugmesi hucrenin sagina yaslanir; erisilebilir adini saf
   katman yaziyor ("Pazartesi 09:00 — TYT Temel Matematik kaldır"). */
.dp-sil { position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px; line-height: 1; padding: 0;
  border: 0; border-radius: 4px; background: transparent;
  color: var(--ink-faint); font: inherit; font-size: 14px; cursor: pointer; }
.dp-sil:hover, .dp-sil:focus-visible { background: var(--danger-wash);
  color: var(--danger); }

/* Salt okunur gorunumde bos hucre buton degil, yalniz yazi. */
.dp-bos { background: var(--surface); }
.dp-yok { display: block; text-align: center; font-size: var(--t-meta);
  color: var(--ink-faint); line-height: 32px; }

.dp-ozet { margin-top: 10px; }
.dp-toplam { margin: 0 0 6px; font-size: var(--t-label); }
.dp-dagilim { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px 14px; }
.dp-dagilim li { display: flex; gap: 6px; align-items: baseline;
  font-size: var(--t-meta); color: var(--ink-muted); }
.dp-dagilim b { color: var(--ink); }

.dp-durum { font-size: var(--t-label); min-height: 1.4em; margin: 0; }

/* ============================================================
   DERS DENGESI (.dd-*)
   ============================================================
   Son TYT denemesi, ogrencinin kendi tabaniyla (onceki denemelerin
   ortalamasi) ayni eksenlerde. Yanindaki "Ders performansı" cubuklari
   "ne kadar" der; bu panel "bu benim normalim mi" der.

   TABAN ZEMINDIR, SIMDI ONDEDIR: kesikli ince cizgi geride, dolu sekil
   onde. Tersi olsaydi karsilastirilan sey one cikar, karsilastirma
   kaybolurdu.

   SEKIL ANCAK BUTUN DERSLER OLCULMUSSE DOLDURULUR (.dolu). Dolgu,
   "hepsi olculdu" demenin kendisi; eksik olcumde yalniz cizgi kaliyor
   ve eksik eksen rayin ucunda ici bos bir isaretle duruyor. */

/* TEK SUTUN: yarim genislikteki kartta iki sutun denendi ve fark
   listesine 170px kaliyordu, ders adlari kirpiliyordu. Cizim ustte,
   liste altta iki sutun halinde - hem ad tam yaziliyor hem cizim
   buyuyor. */
.dd-kap { margin-top: 6px; }

.dd-svg { width: 100%; max-width: 100%; height: auto; display: block;
  margin: 0 auto; }

.dd-izgara { fill: none; stroke: var(--rule); stroke-width: 1; }

/* Taban: geride, kesikli, renksiz. Karsilastirilan zemin. */
.dd-taban { fill: none; stroke: var(--ink-faint); stroke-width: 1.4;
  stroke-dasharray: 4 4; }

/* Simdi: onde, aksan. Dolgu yalniz olcum TAM ise. */
.dd-simdi { fill: none; stroke: var(--accent); stroke-width: 2;
  stroke-linejoin: round; }
.dd-simdi.dolu { fill: var(--accent); fill-opacity: 0.14; }

.dd-nokta { fill: var(--accent); }
/* Olculmemis eksen: ici BOS ve rayin UCUNDA. Merkezde olsaydi "sifir"
   demis olurduk; dolu olsaydi olculmus gibi gorunurdu. */
.dd-eksik { fill: var(--surface); stroke: var(--ink-faint);
  stroke-width: 1.2; stroke-dasharray: 2 2; }

.dd-etiket { font-size: 9px; fill: var(--ink-muted); }
.dd-etiket.eksik { fill: var(--ink-faint); }

/* --- Yan taraf: fark listesi ---
   Sekli gozle olcmek yerine SAYIYLA da soyleniyor. Renk tek kanal
   degil: her satirda hem yon kelimesi ("üstünde"/"altında") hem sayi
   var, renk yalnizca hizlandirici. */
.dd-yan { min-width: 0; }
.dd-fark { list-style: none; margin: 8px 0 6px; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px 14px; }
.dd-fark li { display: grid; grid-template-columns: 1fr auto auto;
  gap: 6px; align-items: baseline; font-size: var(--t-meta); }
.dd-fark span { color: var(--ink); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.dd-fark b { font-variant-numeric: tabular-nums; }
.dd-fark small { color: var(--ink-muted); }
.dd-fark li.dd-ust b { color: var(--ok); }
.dd-fark li.dd-alt b { color: var(--danger); }
.dd-fark li.dd-ayni b { color: var(--ink-muted); }

.dd-not { margin: 4px 0 0; font-size: var(--t-meta); color: var(--ink-muted);
  line-height: 1.4; }

/* --- Hafta gezgini ve kopyalama (.dp-hafta-ust, .dp-kopyala-*) ---
   Program artik haftaya bagli (sql/052). Gezgin TEK ve programin
   ustunde: asagidaki olcum ayni haftaya bakiyor. Iki ayri gezgin
   olsaydi izgarada bir hafta, olcumde baska bir hafta acik kalabilirdi.

   Kopyalama dugmesi SAYIYI YAZIYOR ("8 saat") ve yalniz kopyalanacak
   bir sey varsa cikiyor; hicbir sey yapmayan bir dugme kullaniciya
   kendi verisi hakkinda yanlis bilgi verirdi. */
.dp-hafta-ust { margin: 4px 0 10px; }
.dp-kopyala-yer { display: inline-flex; align-items: center; gap: 8px;
  margin-left: auto; flex-wrap: wrap; }
.dp-kopyala-not { font-size: var(--t-meta); color: var(--ink-muted); }
.cs-hafta-not { color: var(--ink-muted); font-size: var(--t-meta); }
@media (max-width: 700px) { .dp-kopyala-yer { margin-left: 0; } }

/* ============================================================
   CALISMA SURESI (.cs-*)  — plan ve gerceklesen
   ============================================================
   Ders programinin ALTINDA: ust yarida "plandaki saati isaretle",
   alt yarida olcum. Plan yukarida, gerceklesen asagida - okuma sirasi
   plandan gercege.

   KARSILASTIRMA CUBUKLA, PASTAYLA DEGIL. Power BI kilavuzu:
   "Bar and column charts are better for comparing values because humans
   can compare values side by side."
   https://learn.microsoft.com/en-us/power-bi/create-reports/desktop-tips-and-tricks-for-creating-reports

   IKI RAY AYNI OLCEKTE. Farkli eksenlerde cizmek iki cubugu
   karsilastirilamaz yapardi; ustteki plan, alttaki gerceklesen. */

.cs-kart { margin-top: 14px; }
.cs-ust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 8px 0 12px; }
.cs-ust b { font-size: var(--t-body); }

.cs-duzen { display: grid; grid-template-columns: 300px 1fr; gap: 18px;
  align-items: start; }
@media (max-width: 900px) { .cs-duzen { grid-template-columns: 1fr; } }

/* --- Isaretleme listesi --- */
.cs-uygulama { display: flex; flex-direction: column; gap: 10px; }
.cs-gun h4 { margin: 0 0 4px; font-size: var(--t-meta); font-weight: 700;
  color: var(--ink-muted); display: flex; gap: 8px; align-items: baseline; }
.cs-gun h4 small { font-weight: 400; color: var(--ink-faint); }
.cs-gun ul { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 3px; }
.cs-onay { display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border: 1px solid var(--rule); border-radius: 8px;
  background: var(--surface); font-size: var(--t-meta); cursor: pointer; }
.cs-onay:hover { border-color: var(--accent); }
/* Isaretli satir RENKLE DEGIL kutucukla da bildiriliyor; kutucuk zaten
   isaretin kendisi, renk yalnizca hizlandirici. */
.cs-onay.isaretli { background: var(--accent-wash); border-color: var(--accent); }
.cs-saat { font-family: ui-monospace, monospace; color: var(--ink-muted); }
.cs-ders { font-weight: 700; color: var(--ink); }
.cs-onay.oksuz { border-style: dashed; border-color: var(--warn); background: var(--warn-wash); }
.cs-oksuz { margin-left: auto; font-size: var(--t-meta); color: var(--warn); white-space: nowrap; }
.cs-oksuz-blok h4 { color: var(--warn); }
.cs-oksuz-not { margin: 0 0 6px; font-size: var(--t-meta); color: var(--ink-muted); line-height: 1.45; }

/* --- Olcum --- */
.cs-buyuk { margin: 0 0 4px; display: flex; gap: 8px; align-items: baseline;
  flex-wrap: wrap; }
.cs-buyuk b { font-size: 1.5rem; font-weight: 700; color: var(--ink); }
.cs-buyuk small { color: var(--ink-muted); font-size: var(--t-label); }
/* Olcum yoksa BUYUK SAYI YAZILMAZ: 0 yazmak, kaydetmemis ogrenciyi
   calismamis saymaktir. */
.cs-buyuk.cs-yok { font-size: var(--t-label); color: var(--ink-muted); }
.cs-ayrim { margin: 0 0 10px; font-size: var(--t-label); color: var(--ink-muted); }

.cs-liste { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px; }
.cs-satir { display: grid; grid-template-columns: 96px 1fr 92px 140px;
  gap: 10px; align-items: center; font-size: var(--t-meta); }
@media (max-width: 700px) {
  .cs-satir { grid-template-columns: 1fr 1fr; }
  .cs-raylar { grid-column: 1 / -1; }
}
.cs-ad { font-weight: 700; color: var(--ink); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

.cs-raylar { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cs-ray { display: block; height: 9px; border-radius: 5px;
  background: var(--surface-sunk); position: relative; overflow: hidden; }
.cs-ray-plan { height: 7px; }
.cs-ray-olcum { height: 11px; }
.cs-cubuk { display: block; height: 100%; border-radius: 5px; }
/* Plan soluk ve kesik desenli: hedef, olculen degil. */
.cs-plan { background: repeating-linear-gradient(90deg,
  var(--ink-faint) 0 4px, transparent 4px 7px); opacity: 0.7; }
.cs-olcum { background: var(--accent); }

.cs-sayi { display: flex; flex-direction: column; text-align: right; }
.cs-sayi b { font-variant-numeric: tabular-nums; color: var(--ink); }
.cs-sayi small { color: var(--ink-muted); }

/* Hedefe uzaklik CUMLE olarak; renk tek kanal degil, kelime de var
   ("eksik" / "fazla" / "planda"). */
.cs-fark { display: flex; flex-direction: column; gap: 2px; }
.cs-fark .cs-alt { color: var(--danger); }
.cs-fark .cs-ust { color: var(--ok); }
.cs-fark .cs-tam { color: var(--ink-muted); }
.cs-yok { color: var(--ink-faint); }
.cs-kirilim { color: var(--ink-muted); }

.cs-not { margin: 10px 0 0; font-size: var(--t-meta); color: var(--ink-muted);
  line-height: 1.45; }

/* --- Donem seridi: Gunluk / Haftalik / Aylik / Toplam ---
   Sekme, olcum sutununun USTUNDE ve isaretleme listesinin degil:
   isaretleme haftalik bir is, donem yalnizca olcumun penceresini
   degistiriyor. Sekmeyi listenin ustune koysaydik "aylik isaretleme"
   diye olmayan bir sey vaat ederdik.

   AKTIF SEKME RENKLE DEGIL agirlikla ve zeminle de bildiriliyor;
   aria-selected okuyucuya ayrica soyluyor. */
.cs-olcum-kap { min-width: 0; }
.cs-donem { display: inline-flex; gap: 2px; margin: 0 0 10px;
  border: 1px solid var(--rule); border-radius: 999px; padding: 2px;
  background: var(--surface-sunk); }
.cs-donem-sekme { font: inherit; font-size: var(--t-meta); line-height: 1.2;
  padding: 4px 12px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-muted); cursor: pointer; }
.cs-donem-sekme:hover { color: var(--ink); }
.cs-donem-sekme.aktif { background: var(--surface); color: var(--ink);
  font-weight: 700; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.cs-donem-sekme:focus-visible { outline: 2px solid var(--accent);
  outline-offset: 1px; }

/* ============================================================
   SINAV KARTI: IKI SEKME (.sv-sekme) ve YOL HARITASI (.yh-*)
   ============================================================
   Sekmeler sinav adinin SAGINDA, summary satirinda. Solda "Sinav
   kilavuzu" (bu sinav nedir), sagda "Yol haritasi" (nasil hazirlanilir).
   Yol haritasi olmayan sinavda sekme hic cizilmiyor.

   Durum RENK TEK KANAL DEGIL: aktif sekme aria-pressed tasiyor. */

.sv-sekmeler { display: inline-flex; gap: 2px; margin-left: 10px;
  border: 1px solid var(--rule); border-radius: 999px; padding: 2px;
  background: var(--surface-sunk); }
.sv-sekme { font: inherit; font-size: var(--t-meta); line-height: 1.2;
  padding: 3px 10px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-muted); cursor: pointer; }
.sv-sekme:hover { color: var(--ink); }
.sv-sekme.aktif { background: var(--surface); color: var(--ink);
  font-weight: 700; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.sv-sekme:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.sv-panel[hidden] { display: none; }
.yh { display: flex; flex-direction: column; gap: 8px; }
.yh-ust { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.yh-ust b { font-size: var(--t-body); }
.yh-sure { font-size: var(--t-meta); color: var(--ink-muted); }
.yh-gerekce { margin: 0 0 4px; font-size: var(--t-meta);
  color: var(--ink-muted); line-height: 1.5; max-width: 70ch; }

.yh-bolum { border: 1px solid var(--rule); border-radius: 8px;
  background: var(--surface); }
.yh-bolum > summary { display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; padding: 8px 10px; cursor: pointer;
  font-size: var(--t-meta); }
.yh-bolum[open] > summary { border-bottom: 1px solid var(--rule); }
.yh-no { display: inline-grid; place-items: center; width: 20px; height: 20px;
  border-radius: 50%; background: var(--surface-sunk);
  color: var(--ink-muted); font-size: var(--t-meta); font-weight: 700; }
.yh-ad { font-weight: 700; color: var(--ink); }
.yh-zaman { color: var(--ink-muted); }

/* DOGRULANMIS BILGI ile MENTOR TASARIMI ayri gorunur. Kaynak belgenin
   kendi kurali: "Kayda aktarirken bu ayrim korunmalidir." Rozet renk tek
   kanal degil, kelimeyle de yaziyor. */
.yh-kaynak { margin-left: auto; font-size: var(--t-meta);
  padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.yh-kaynak.k-dogrulanmis { background: var(--ok-wash); color: var(--ok); }
.yh-kaynak.k-mentor { background: var(--surface-sunk); color: var(--ink-muted);
  border: 1px dashed var(--rule); }

.yh-govde { padding: 10px; display: flex; flex-direction: column; gap: 8px;
  font-size: var(--t-meta); line-height: 1.55; }
.yh-amac { margin: 0; color: var(--ink); font-weight: 700; }
.yh-adimlar, .yh-borclar { margin: 0; padding-left: 20px;
  display: flex; flex-direction: column; gap: 5px; color: var(--ink-muted); }
.yh-adimlar li, .yh-borclar li { max-width: 78ch; }
.yh-cikti { margin: 0; color: var(--ink); }
.yh-kilit { margin: 0; padding: 6px 10px; border-radius: 6px;
  background: var(--warn-wash); color: var(--warn); }
.yh-yorum { margin: 0; padding: 6px 10px; border-radius: 6px;
  background: var(--surface-sunk); color: var(--ink-muted); max-width: 78ch; }

/* Dogrulama borcu: bos birakilmaz, uydurulmaz. Gri ve "dogrulama
   bekliyor" ibaresiyle gorunur. */
.yh-borclar b { display: block; color: var(--ink); }
.yh-bekliyor { display: inline-block; margin: 2px 0; padding: 1px 7px;
  border-radius: 999px; background: var(--warn-wash); color: var(--warn);
  font-size: var(--t-meta); }
.yh-borclar small { display: block; color: var(--ink-faint); }
.yh-kapandi { display: inline-block; margin: 2px 0; padding: 1px 7px;
  border-radius: 999px; background: var(--ok-wash); color: var(--ok);
  font-size: var(--t-meta); }
.yh-bulgu { display: block; margin: 3px 0; color: var(--ink);
  line-height: 1.5; max-width: 78ch; }
.yh-borclar li.kapandi b { color: var(--ink-muted); }

.yh-veli { margin: 0; padding: 8px 12px; border-left: 3px solid var(--accent);
  background: var(--accent-wash); border-radius: 0 6px 6px 0; }
.yh-veli p { margin: 0 0 6px; max-width: 74ch; }
.yh-veli p:last-child { margin-bottom: 0; }

.yh-sss { margin-top: 4px; border-style: dashed; }
.yh-sorular { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.yh-sorular dt { font-weight: 700; color: var(--ink); }
.yh-sorular dd { margin: 2px 0 0; color: var(--ink-muted); max-width: 78ch; }

/* ============================================================
   STRATEJILER (st-) — yalniz koc ekraninda
   ============================================================
   Yol haritasi (yh-) ailesiyle ayni dili konusuyor ve ayni jetonlari
   kullaniyor: kaynak rozeti kelimeyle de yaziyor, dogrulama borcu gri
   ve "bekliyor" ibaresi tasiyor. Ikisi ayni ayrimi cizdigi icin
   gorunumleri de ayni olmali; farkli cizseydik koc iki ekranda ayni
   seyi iki ayri sey sanirdi. */
.st-kok { display: flex; flex-direction: column; gap: 10px; }
.st-ust h3 { margin: 0; }
.st-alt { margin: 2px 0 0; color: var(--ink-muted);
  font-size: var(--t-meta); max-width: 74ch; }
.st-kimlik { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 8px 0 0; font-size: var(--t-meta); color: var(--ink-muted); }
.st-kapsam { color: var(--ink); }
.st-tarih { color: var(--ink-faint); }
/* CANLI TASLAK rozetle yaziyor: belge kendini boyle tanimliyor ve
   surumun kesin bilgi olmadigini ekranin soylemesi gerekiyor. */
.st-taslak { background: var(--warn-wash); color: var(--warn); }
.st-ozet-metin { margin: 0; max-width: 78ch; line-height: 1.6; }
.st-neden { margin: 0; padding-left: 20px; font-size: var(--t-meta);
  color: var(--ink-muted); line-height: 1.55; }
.st-neden li { max-width: 78ch; }

.st-katman { margin: 14px 0 2px; padding-top: 10px;
  border-top: 1px solid var(--rule); font-size: var(--t-body); }

.st-tablo { margin-top: 6px; font-size: var(--t-meta); }
.st-tablo caption { text-align: left; padding: 0 0 6px;
  color: var(--ink-muted); font-size: var(--t-meta); }
.st-tablo th[scope="row"] { color: var(--ink); font-weight: 700;
  white-space: nowrap; vertical-align: top; }
.st-tablo td { vertical-align: top; line-height: 1.5; }
.st-satir-alt { color: var(--ink-faint); }
/* VARSAYILAN ONERI vurgulu: belge "AP varsayilan oneri olmayi hak eder"
   diyor ve bu tabloda kaybolacak bir cumle degil. */
.st-varsayilan td, .st-varsayilan th { background: var(--accent-wash); }

.st-rehber { color: var(--ink-muted); }
.st-rehber-yok { color: var(--warn); }
.st-dogrulandi { display: inline-block; padding: 1px 7px; border-radius: 999px;
  background: var(--ok-wash); color: var(--ok); font-size: var(--t-meta); }
.st-bekliyor { display: inline-block; padding: 1px 7px; border-radius: 999px;
  background: var(--warn-wash); color: var(--warn); font-size: var(--t-meta); }

.st-bolum { border: 1px solid var(--rule); border-radius: 8px;
  background: var(--surface); margin-top: 6px; }
.st-bolum > summary { display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; padding: 8px 10px; cursor: pointer;
  font-size: var(--t-meta); }
.st-bolum[open] > summary { border-bottom: 1px solid var(--rule); }
.st-ad { font-weight: 700; color: var(--ink); }
.st-ozet { color: var(--ink-muted); }
.st-govde { padding: 10px; display: flex; flex-direction: column; gap: 8px;
  font-size: var(--t-meta); line-height: 1.55; }
.st-govde p { margin: 0; max-width: 78ch; }

/* Kaynak rozeti yh-kaynak ile ayni bicimde. k-eksik kirmizi degil uyari
   rengi: eksik bir alan hata degil, kapatilmamis bir is. */
.st-kaynak { margin-left: auto; font-size: var(--t-meta);
  padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.st-kaynak.k-kurum_beyani { background: var(--ok-wash); color: var(--ok); }
.st-kaynak.k-mentor { background: var(--surface-sunk); color: var(--ink-muted);
  border: 1px dashed var(--rule); }
.st-kaynak.k-eksik { background: var(--warn-wash); color: var(--warn); }

.st-zincir { padding: 8px 10px; border-radius: 6px;
  background: var(--surface-sunk); }
.st-zincir b { display: block; margin-bottom: 4px; color: var(--ink); }
.st-zincir ol { margin: 0; padding-left: 20px; }
.st-zincir li { max-width: 78ch; }
.st-okullar { color: var(--ink-muted); }
.st-ayrim { max-width: 78ch; }
.st-not { margin: 8px 0 0; color: var(--ink-muted);
  font-size: var(--t-meta); line-height: 1.55; max-width: 78ch; }

.st-siniflar { display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.st-sinif { border: 1px solid var(--rule); border-radius: 8px;
  padding: 10px; background: var(--surface); }
.st-sinif h4 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 6px; font-size: var(--t-meta); }
.st-sinif p { margin: 0; font-size: var(--t-meta); line-height: 1.55; }
.st-sinif-no { display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface-sunk); color: var(--ink-muted);
  font-size: var(--t-meta); font-weight: 700; }
.st-isler { margin: 6px 0 0; padding-left: 20px; font-size: var(--t-meta);
  line-height: 1.55; color: var(--ink-muted); }
/* KAPANAN bu blogun asil bilgisi: gec kalindigini gosteren tek alan.
   Govdeye karisirsa kaybolur, bu yuzden kendi kutusunda. */
.st-kapanan { margin-top: 8px; padding: 6px 10px; border-radius: 6px;
  background: var(--danger-wash); }
.st-kapanan b { display: block; margin-bottom: 3px; color: var(--danger);
  font-size: var(--t-meta); }
.st-kapanan ul { margin: 0; padding-left: 18px; font-size: var(--t-meta);
  color: var(--danger); line-height: 1.5; }
.st-uyari { margin-top: 8px; }
.st-varsayim { margin-top: 8px; max-width: 82ch; }
.st-varsayim p { margin: 4px 0 0; line-height: 1.55; }

.st-matris td { vertical-align: top; }
.st-hucre { margin: 0; padding-left: 16px; line-height: 1.5; }
/* BOS HUCRE "yok" der ve bunu YAZAR. Bos birakilsaydi olculmemis bir
   alanla ayni gorunurdu (CLAUDE.md 3.1). */
.st-hucre-bos { color: var(--ink-faint); font-style: italic; }
.st-hucre-eksik { background: var(--warn-wash); color: var(--warn); }

.st-profiller { display: flex; flex-direction: column; gap: 8px; }
.st-profil { border: 1px solid var(--rule); border-radius: 8px; padding: 10px;
  background: var(--surface); }
.st-profil h4 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 6px; font-size: var(--t-meta); }
.st-profil p { margin: 0 0 5px; font-size: var(--t-meta); line-height: 1.55;
  max-width: 82ch; }
.st-profil-kod { display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-wash); color: var(--accent);
  font-weight: 700; font-size: var(--t-meta); }
.st-durum { color: var(--ink-muted); }
.st-plan { color: var(--ink); }
.st-gizli { padding: 6px 10px; border-radius: 6px;
  background: var(--surface-sunk); color: var(--ink-muted); }
/* TIKANDIGI YER katlanmiyor ve son sirada duruyor: modelin nerede cevap
   veremedigini soyleyen tek alan. */
.st-tikanma { padding: 6px 10px; border-radius: 6px;
  background: var(--warn-wash); color: var(--warn); }

.st-once { margin: 0; padding-left: 20px; font-size: var(--t-meta);
  line-height: 1.6; }
.st-once li { max-width: 82ch; margin-bottom: 5px; }
.st-once b { color: var(--ink); }
.st-kurallar { margin: 0; padding-left: 20px; font-size: var(--t-meta);
  line-height: 1.6; }
.st-kurallar li { max-width: 82ch; margin-bottom: 4px; }

/* KOCA OZEL NOT: bu sekmenin yalniz koc ekraninda olmasinin gerekcesi.
   Urunun ucret cizgisini soyluyor; ogrenciye ya da veliye gosterilecek
   bir metin degil. */
.st-kocluk { padding: 8px 12px; border-left: 3px solid var(--accent);
  background: var(--accent-wash); border-radius: 0 6px 6px 0; }
.st-kocluk b { display: block; margin-bottom: 4px; }
.st-kocluk p { margin: 0; font-size: var(--t-meta); line-height: 1.55;
  max-width: 82ch; }

.st-borc-blok { border-style: dashed; }
.st-borclar { margin: 0; padding-left: 20px; line-height: 1.6; }
.st-borclar li { max-width: 82ch; margin-bottom: 5px; }
.st-kaynaklar { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 0;
  font-size: var(--t-meta); color: var(--ink-muted); }
.st-kaynak-oge { display: inline-flex; align-items: center; gap: 5px; }

/* Kopru programinin kurs tablosu ve basvuru basamaklari. Iki alan da
   yalniz Studienkolleg kaydinda dolu; bos kayitta blok hic cizilmiyor
   ki bos bir baslik "veri yok" gibi durmasin. */
.dp-kurslar { overflow-x: auto; }
.dp-kurs-not { margin: 0 0 8px; font-size: var(--t-meta);
  color: var(--ink-muted); max-width: 78ch; line-height: 1.5; }
.dp-kurs-tablo { font-size: var(--t-meta); }
.dp-kurs-tablo th[scope="row"] { color: var(--ink); font-weight: 700;
  white-space: nowrap; vertical-align: top; }
.dp-kurs-tablo td { vertical-align: top; line-height: 1.5; }
.dp-basamaklar ol { margin: 0; padding-left: 20px; font-size: var(--t-meta);
  line-height: 1.6; }
.dp-basamaklar li { max-width: 82ch; margin-bottom: 5px; }

/* ============================================================
   STRATEJILER: IKI DUZEYLI GEZINME
   ============================================================
   Ilk surumde her sey tek kartta ve acik ciziliyordu: iki bin piksellik
   bir duvardi. Simdi ust duzeyde kayit seridi (.st-serit), alt duzeyde
   katlanabilir katman bloklari (.st-katman-blok) var. Serit, sinav
   kartindaki .sv-sekme ile ayni bicimde ciziliyor; koc ayni hareketi
   iki ekranda ayri ayri ogrenmiyor. */
.st-serit { display: inline-flex; gap: 2px; margin-bottom: 12px;
  padding: 2px; background: var(--surface-sunk); border-radius: 8px; }
.st-sekme { font: inherit; font-size: var(--t-meta); line-height: 1.2;
  padding: 6px 14px; border: 0; border-radius: 6px; background: none;
  color: var(--ink-muted); cursor: pointer; }
.st-sekme:hover { color: var(--ink); }
.st-sekme.aktif { background: var(--surface); color: var(--ink);
  font-weight: 700; box-shadow: 0 1px 2px rgb(0 0 0 / 8%); }
.st-sekme:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.st-panel[hidden] { display: none; }

/* Katlanabilir katman. IPUCU kapali blogun icinde ne oldugunu soyleyen
   tek sey; olmasaydi katlama saklamaktan ibaret kalirdi. */
.st-katman-blok { border: 1px solid var(--rule); border-radius: 8px;
  background: var(--surface); margin-top: 10px; }
.st-katman-blok > summary { display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap; padding: 10px 12px; cursor: pointer; }
.st-katman-blok[open] > summary { border-bottom: 1px solid var(--rule); }
.st-katman-ad { font-weight: 700; color: var(--ink); font-size: var(--t-body); }
.st-ipucu { color: var(--ink-faint); font-size: var(--t-meta); }
.st-katman-govde { padding: 12px; display: flex; flex-direction: column;
  gap: 10px; overflow-x: auto; }
.st-alt-baslik { margin: 6px 0 0; font-weight: 700; color: var(--ink);
  font-size: var(--t-meta); }

/* TEMSILI PROFIL UYARISI en ustte ve govdeye karismiyor: bu kayit gercek
   bir ogrencinin dosyasi degil ve koc onu oyle aktarmamali. */
.st-temsili { max-width: 82ch; }

.st-olay { border: 1px solid var(--rule); border-radius: 8px;
  background: var(--surface); margin-top: 10px; }
.st-olay > summary { display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; padding: 10px 12px; cursor: pointer;
  font-size: var(--t-meta); }
.st-olay[open] > summary { border-bottom: 1px solid var(--rule); }
.st-olay-no { display: inline-grid; place-items: center; width: 22px;
  height: 22px; border-radius: 50%; background: var(--accent-wash);
  color: var(--accent); font-weight: 700; font-size: var(--t-meta); }
.st-olay-bas { margin: 6px 0 0; font-size: var(--t-meta); color: var(--ink); }

/* Profil ozeti etiketleri: belgede de kutucuk halindeydi ve bir profilin
   ne kadar dagildigi ilk bakista buradan gorunuyor. */
.st-etiketler { display: flex; flex-wrap: wrap; gap: 5px; }
.st-etiket { padding: 3px 9px; border-radius: 999px;
  background: var(--surface-sunk); color: var(--ink-muted);
  font-size: var(--t-meta); border: 1px solid var(--rule); }

.st-kalibrasyon { padding: 8px 12px; border-left: 3px solid var(--warn);
  background: var(--warn-wash); border-radius: 0 6px 6px 0; }
.st-kalibrasyon b { display: block; margin-bottom: 4px; color: var(--warn); }
.st-kalibrasyon p { margin: 0; line-height: 1.55; max-width: 82ch; }
.st-hamleler { margin: 0; padding-left: 20px; line-height: 1.6; }
.st-hamleler li { max-width: 82ch; margin-bottom: 6px; }
.st-hamleler b { color: var(--ink); }
.st-ulke-tablo th[scope="row"] { white-space: nowrap; }
/* ASIL ZORLUK ve DERS katlanmiyor: olayin en zor uygulanan tavsiyesi ve
   sonucu. Govdeye karisirsa okunmadan gecilir. */
.st-zorluk { max-width: 82ch; }
.st-zorluk b { display: block; margin-bottom: 4px; }
.st-zorluk p { margin: 0; line-height: 1.55; }
.st-ders { padding: 8px 12px; border-left: 3px solid var(--ok);
  background: var(--ok-wash); border-radius: 0 6px 6px 0; }
.st-ders b { display: block; margin-bottom: 4px; color: var(--ok); }
.st-ders p { margin: 0; line-height: 1.55; max-width: 82ch; }

.st-ortak { margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--rule); }
.st-ortak h4 { margin: 0 0 8px; font-size: var(--t-body); }
.st-ortak-liste { margin: 0; padding-left: 20px; font-size: var(--t-meta);
  line-height: 1.6; }
.st-ortak-liste li { max-width: 82ch; margin-bottom: 6px; }
.st-ortak-liste b { color: var(--ink); }
.st-kapanis { margin: 10px 0 0; color: var(--ink-muted);
  font-size: var(--t-meta); line-height: 1.55; max-width: 82ch; }

/* Ornek olay: serbest bolumler, need-blind listesi ve terim sozlugu. */
.st-maddeler { margin: 0; padding-left: 20px; line-height: 1.6; }
.st-maddeler li { max-width: 82ch; margin-bottom: 5px; }

/* NEED-BLIND LISTESI iki olayda birden geciyor; kayitta bir kez duruyor
   ve burada bir kez ciziliyor. Katalog bagi yarim ve ekran bunu her
   satirda soyluyor: bag atsaydik yarisi olu bag olurdu. */
.st-nb { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--rule);
  border-radius: 8px; background: var(--surface-sunk); }
.st-nb > b { display: inline; color: var(--ink); }
.st-nb-liste { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0;
  padding: 0; list-style: none; }
.st-nb-liste li { display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--rule); font-size: var(--t-meta); }
.st-nb-ad { font-weight: 700; color: var(--ink); }
.st-nb-var { color: var(--ok); }
.st-nb-yok { color: var(--ink-faint); }
.st-nb-uyari { margin-top: 8px; max-width: 82ch; }

.st-sozluk { border-style: dashed; }
.st-terimler { margin: 0; }
.st-terimler dt { font-weight: 700; color: var(--ink); margin-top: 8px; }
.st-terimler dt:first-child { margin-top: 0; }
.st-terimler dd { margin: 2px 0 0; color: var(--ink-muted);
  line-height: 1.55; max-width: 82ch; }
.st-acilim { font-weight: 400; color: var(--ink-faint); }
/* Katalog kaydi olan terim sozlukte TEKRARLANMIYOR; ibare nereye
   bakilacagini soyluyor. */
.st-terim-katalog { display: inline-block; padding: 1px 7px;
  border-radius: 999px; background: var(--ok-wash); color: var(--ok);
  font-size: var(--t-meta); }

/* ============================================================
   YOL HARITASI DURUMU: her sinavin hazirlik programi olmaz
   ============================================================
   Dort durum ayri ciziliyor. Hepsini ayni cizmek, giremeyecegi bir
   sinava hazirlanan ogrenci uretirdi. */
.yh-durum { font-size: var(--t-meta); padding: 2px 9px; border-radius: 999px;
  white-space: nowrap; }
.yh-durum.d-aktif { background: var(--ok-wash); color: var(--ok); }
.yh-durum.d-kosullu { background: var(--warn-wash); color: var(--warn); }
.yh-durum.d-yonlendirme { background: var(--accent-wash); color: var(--accent); }
.yh-durum.d-bilgi { background: var(--surface-sunk); color: var(--ink-muted);
  border: 1px dashed var(--rule); }

/* KAPI: hazirligin onunde duran esik. Kapali ise ne yapilacagi da
   yazili; yazmasaydik ogrenci kapida kalirdi. */
.yh-kapi { padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--warn); background: var(--warn-wash); }
.yh-kapi > b { display: block; margin-bottom: 6px; color: var(--warn); }
.yh-kapi ol { margin: 0; padding-left: 20px; font-size: var(--t-meta);
  line-height: 1.6; }
.yh-kapi li { max-width: 82ch; margin-bottom: 5px; }
.yh-kapi-alt { margin: 8px 0 0; font-size: var(--t-meta); line-height: 1.55;
  max-width: 82ch; }

/* YONLENDIRME: fazlar bu sinava degil, baska bir yola ait. */
.yh-yonlendirme { max-width: 84ch; }
.yh-yonlendirme > b { display: block; margin-bottom: 4px; }
.yh-yonlendirme p { margin: 0 0 6px; line-height: 1.55; }
.yh-hedef { color: var(--ink); }

/* HAZIRLIK YOK: bos bolum listesi bir eksiklik degil. Ekran nedenini
   yaziyor; bos birakilsaydi "veri girilmemis" gibi okunurdu. */
.yh-neden { max-width: 84ch; }
.yh-neden > b { display: block; margin-bottom: 6px; }
.yh-neden ol { margin: 0; padding-left: 20px; font-size: var(--t-meta);
  line-height: 1.6; }
.yh-neden li { max-width: 82ch; margin-bottom: 6px; }
.yh-dogru-yol { margin: 8px 0 0; font-size: var(--t-meta); line-height: 1.55;
  max-width: 82ch; }

/* Proje bazli olay rozeti. Profil bazli olaylarla ayni listede duruyorlar
   ama ayni soruyu sormuyorlar: biri "bu ogrenci kim", digeri "bu proje ne
   satin alir". Rozet olmasaydi koc yanlis yerde cevap arardi. */
.st-eksen { padding: 2px 9px; border-radius: 999px;
  background: var(--accent-wash); color: var(--accent);
  font-size: var(--t-meta); white-space: nowrap; }

/* Kapanan dogrulama: silinmez, isaretlenir. Bulgusu da ekranda durur;
   silseydik neyin nasil dogrulandigi kaybolurdu. */
.st-kapanan-blok { border-style: solid; }
.st-bulgu { display: block; margin: 3px 0; color: var(--ink);
  line-height: 1.5; max-width: 82ch; }
.st-borclar small { display: block; color: var(--ink-faint); }

/* ============================================================
   KEŞFET: ilgi envanteri sonuçları (kesfet-saf.js)
   Altıgen ve çubuklar LİTERATÜRDEN: RIASEC'in standart gösterimi üç
   harfli kod + altıgen profil + puan çubukları. Üç boyut yok, pasta
   yok, tek vurgu rengi (Power BI kuralları).
   ============================================================ */
.kf-ust { margin: 0 0 var(--space-4); }
.kf-ust h2 { margin: 0 0 4px; }
.kf-ust p { margin: 0; color: var(--ink-muted); font-size: var(--t-label); }

.kf-sonuc { border: 1px solid var(--rule); border-radius: 10px;
  background: var(--surface); padding: var(--space-4);
  margin-bottom: var(--space-4); }
.kf-sonuc-bas { display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; }
.kf-tarih { color: var(--ink-muted); font-size: var(--t-meta); }
.kf-eylemler { margin-left: auto; display: inline-flex; gap: 6px; }
.kf-rozet { font-size: var(--t-meta); font-weight: 600; padding: 2px 9px;
  border-radius: 999px; white-space: nowrap;
  color: var(--ink-muted); background: var(--surface-sunk); }
.kf-rozet.k-portal_ici { color: var(--accent); background: var(--accent-wash); }
.kf-rozet.k-disaridan { color: var(--turuncu); background: var(--turuncu-wash); }
.kf-rozet.g-yuksek { color: var(--ok); background: var(--ok-wash); }
.kf-rozet.g-orta { color: var(--warn); background: var(--warn-wash); }
.kf-rozet.g-dusuk { color: var(--danger); background: var(--danger-wash); }
.kf-rozet.l-kamu_mali { color: var(--ok); background: var(--ok-wash); }
.kf-rozet.l-telifli { color: var(--warn); background: var(--warn-wash); }
.kf-rozet.l-belirsiz { color: var(--danger); background: var(--danger-wash); }
.kf-rozet.p-dogrudan_uygulanabilir { color: var(--accent); background: var(--accent-wash); }
.kf-rozet.p-sadece_referans { color: var(--ink-muted); background: var(--surface-sunk); }
.kf-rozet.p-yonlendirme { color: var(--macenta); background: var(--macenta-wash); }

/* Görünürlük şeridi: koçun ilk bakışta görmesi gereken tek durum. */
.kf-gorunurluk { margin: 6px 0 0; font-size: var(--t-meta); }
.kf-gorunurluk.kapali { color: var(--ink-muted); }
.kf-gorunurluk.acik { color: var(--ok); font-weight: 600; }

/* Üç harfli kod: KPI anatomisi. Büyük değer, küçük etiket. */
.kf-kod { display: flex; align-items: baseline; gap: 6px;
  margin: var(--space-3) 0 0; flex-wrap: wrap; }
.kf-kod-harf { font-size: 2rem; font-weight: 800; line-height: 1;
  color: var(--accent); background: var(--accent-wash);
  border-radius: 8px; padding: 6px 10px; }
.kf-kod-aciklama { color: var(--ink-muted); font-size: var(--t-label); }

.kf-gorsel { display: flex; gap: var(--space-4); align-items: center;
  flex-wrap: wrap; margin-top: var(--space-3); }
.kf-altigen { width: 190px; height: 190px; flex: 0 0 auto; }
.kf-cerceve { fill: none; stroke: var(--rule-strong); stroke-width: 1.5; }
.kf-profil { fill: var(--accent-wash); stroke: var(--accent);
  stroke-width: 2; fill-opacity: .85; }
.kf-harf { font: 700 13px var(--font-ui, sans-serif); fill: var(--ink-faint); }
.kf-harf.vurgulu { fill: var(--accent); }

.kf-cubuklar { flex: 1 1 260px; min-width: 240px; display: flex;
  flex-direction: column; gap: 6px; }
.kf-cubuk-satir { display: grid; grid-template-columns: 9.5rem 1fr 2.5rem;
  align-items: center; gap: 8px; }
.kf-cubuk-ad { font-size: var(--t-meta); color: var(--ink); }
.kf-cubuk-yol { display: block; height: 12px; border-radius: 6px;
  background: var(--surface-sunk); overflow: hidden; }
.kf-cubuk-dolgu { display: block; height: 100%; border-radius: 6px;
  background: var(--accent); }
.kf-cubuk-deger { font-size: var(--t-meta); color: var(--ink-muted);
  text-align: right; font-variant-numeric: tabular-nums; }

.kf-okuma { margin: 8px 0 0; font-size: var(--t-meta);
  color: var(--ink-muted); }
.kf-yorum { margin: 8px 0 0; font-size: var(--t-label); color: var(--ink); }
.kf-not { margin: 8px 0 0; font-size: var(--t-label); color: var(--ink); }

.kf-katalog { margin-top: var(--space-5); border: 1px dashed var(--rule-strong);
  border-radius: 10px; padding: var(--space-3) var(--space-4); }
.kf-katalog > summary { cursor: pointer; }

.kf-form-sar { margin-top: var(--space-4); border: 1px solid var(--rule);
  border-radius: 10px; padding: var(--space-3) var(--space-4);
  background: var(--surface); }
.kf-form-sar > summary { cursor: pointer; }
.kf-form { display: flex; flex-direction: column; gap: var(--space-3);
  margin-top: var(--space-3); }
.kf-form label { display: flex; flex-direction: column; gap: 4px;
  font-size: var(--t-label); }
.kf-puan-izgara { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--space-2); }
.kf-form-alt { display: flex; align-items: center; gap: var(--space-3); }

/* Keşfet: O*NET uygulama formu. Madde satırı iki parça: metin (TR
   büyük, EN küçük ve soluk; taslak çevirinin şeffaflık koşulu) ve beş
   yanıt. Dolu satır sol kenar çizgisiyle işaretlenir: 60 maddelik
   formda "nerede kalmıştım" sorusunun cevabı kaydırmadan görünür. */
.kf-uygulama { margin-top: var(--space-3); }
.kf-yonerge { margin: 0 0 var(--space-3); font-size: var(--t-label);
  line-height: 1.6; color: var(--ink); }
.kf-maddeler { list-style: none; margin: var(--space-3) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-2); }
.kf-madde { border: 1px solid var(--rule); border-left: 3px solid var(--rule);
  border-radius: 8px; padding: var(--space-2) var(--space-3);
  display: flex; flex-direction: column; gap: 6px; }
.kf-madde.dolu { border-left-color: var(--ok); }
.kf-madde-metin { font-size: var(--t-label); color: var(--ink);
  display: flex; flex-direction: column; }
.kf-madde-en { color: var(--ink-faint); font-size: var(--t-meta); }
.kf-madde-yanitlar { display: flex; flex-wrap: wrap; gap: 4px; }
.kf-yanit { display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--t-meta); color: var(--ink-muted);
  border: 1px solid var(--rule); border-radius: 999px; padding: 3px 9px;
  cursor: pointer; }
.kf-yanit:has(input:checked) { color: var(--accent);
  border-color: var(--accent); background: var(--accent-wash); }
.kf-yanit input { accent-color: var(--accent); margin: 0; }

/* ============================================================
   ÖĞRENCİ EKRANI: YAZDIRMA KAPALI + FİLİGRAN
   Ekran görüntüsü web'de ENGELLENEMEZ (görüntüyü işletim sistemi alır);
   yapılabilen caydırmaktır. Filigran her görüntüye öğrencinin adını
   işler: sızıntı kimden çıktıysa görünür. Yazdırma ise gerçekten
   kapatılabilir: yazdırma ortamında gövde çizilmez, tek satır gerekçe
   basılır. Koç ekranı ETKİLENMEZ; Başvuru Profili'nin Yazdır düğmesi
   oradan çalışmaya devam eder.
   ============================================================ */
.filigran { position: fixed; inset: 0; z-index: 9999;
  pointer-events: none; background-repeat: repeat;
  color: var(--ink); opacity: .05; }

@media print {
  body.yazdirma-kapali > * { display: none !important; }
  body.yazdirma-kapali::before {
    content: 'Bu sayfanın yazdırılması kapalıdır. Belgeye ihtiyacınız varsa koçunuzdan isteyin.';
    display: block; padding: 40px; font-size: 14pt; color: #000; }
}

/* Bildirim karti (bildirim.js): ogrenci ekraninda, profil ustunde. */
.bl-kart { margin-bottom: 14px; }
.bl-kart h3 { margin: 0 0 8px; }
.bl-kart p { margin: 0 0 10px; font-size: var(--t-label); line-height: 1.6; }
.bl-durum.acik { color: var(--ok); font-weight: 600; }
.bl-eylemler { display: flex; gap: 8px; flex-wrap: wrap; }