/* Derinlik teması bileşenleri (PLAN §12).
   Renkler yalnızca tokens.css'ten gelir; burada çıplak hex yoktur. */

/* --- Üst banner --- */
.banner {
  background: var(--accent-soft-bg);
  border-bottom: 1px solid var(--accent-soft-border);
  font-size: 13.5px;
}
.banner__ic {
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px var(--space-5);
  color: var(--text-2);
}
.banner--warning .banner__ic { color: var(--warn); }
.banner--critical .banner__ic { color: var(--accent-text); }

/* --- Üst çubuk --- */
.ust { border-bottom: 1px solid var(--border); }
/* Üç alanlı ızgara: marka · Atatürk · menü. Flex `space-between` ortadaki
   ögeyi yalnızca iki yanı eşit genişlikteyken ortalar; marka ile menü eşit
   değil, görsel sola kayıyordu. Yan sütunlar `1fr` ile eşitleniyor ama
   `max-content`in altına inmiyor - dar masaüstünde görsel biraz kayar,
   menü ikinci satıra sarmaz. Telefon düzeni dosyanın sonundaki mobil blokta. */
.ust__ic {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  grid-template-areas: "marka atam menu";
  align-items: center;
  gap: var(--space-5);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}
.ust__ic .marka-alani { grid-area: marka; justify-self: start; }
.ust__ic .ust__nav { grid-area: menu; justify-self: end; }
/* Kaynak: msb.gov.tr üst çubuğundaki dekupe fotoğraf (`atam_2.png`), yatay
   AYNALANMIŞ - sayfanın içine, sağa baksın diye; gri tonlu, 160x192 (3x).
   Yeniden üretilecekse aynı adımlar: aynala, saydam kenarları kırp, küçült.
   Alt kenar ceketin ortasından kesik; maske o düz çizgiyi zemine eritiyor,
   yoksa havada asılı bir kesik gibi duruyordu. Opaklık `.alt__logo` ile aynı
   gerekçe: koyu zeminde tam parlak yüz sayfanın en baskın ögesi oluyordu. */
.ust__atam {
  grid-area: atam;
  display: block;
  width: auto;
  height: 52px;
  opacity: 0.9;
  /* Maske yalnızca opaklığı okur; renk olarak token yazıldı, çıplak hex
     kuralı bileşen CSS'inde istisnasız. */
  -webkit-mask-image: linear-gradient(to bottom, var(--bg) 65%, transparent);
  mask-image: linear-gradient(to bottom, var(--bg) 65%, transparent);
}
/* Marka kilidi TEK GÖRSEL: çizim + "arşiv" aynı SVG'de (bkz. marka.svg).
   Eskiden "arşiv" ayrı bir `<span>`di; iki parçanın ölçüsü CSS'te tutulunca
   üst çubukla alt bilgi ayrı oranlara kayıyordu. Ölçü artık dosyanın
   kendisinde. */
.marka { display: inline-flex; align-items: center; color: var(--text); }
.marka:hover { text-decoration: none; }
/* Yükseklik ölçüyü belirler; `width: auto` en-boy oranını (~5.7:1) korur.
   ⚠️ Görselin alt kenarı "ş"nin kuyruğudur, harf tabanı değil - yükseklik
   seçilirken bu pay hesaba katıldı. */
.marka__logo { display: block; width: auto; height: 28px; }
.marka-alani { display: inline-flex; align-items: center; gap: 9px; }
.beta-rozeti {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--warn);
  border: 1px solid var(--warn);
  border-radius: var(--r-sm);
  padding: 2px 6px;
  line-height: 1.4;
  /* Marka yazısının büyük harf hizasına oturur; taban çizgisi onu aşağı çekiyordu. */
  align-self: center;
}
/* --- Alt bilgi logosu ---
   Bina çizimi, sorumluluk reddinin hemen üstünde, gövde yazısından belirgin
   biçimde büyük. `display: block` + `margin-bottom` - satır içi kalsaydı
   altına satır boşluğu ekleniyor ve uyarı metniyle arası tutarsız oluyordu.
   ⚠️ ASLA kırpılmamalı. `width` istenen boyutu söyler, `max-width: 100%` dar
   ekranda onu kabın içine sıkıştırır ve `height: auto` en-boy oranını (~2.9:1)
   korur - üçü birlikte olmadan görsel ya taşar ya da ezilir. Kabın kendisi
   `.kabuk`, yani yatay dolgusu zaten var; yüzde ona göre hesaplanır.
   `margin: … auto` yatay ortalamayı yapar; `display: block` olmadan `auto`
   kenar boşluğu çalışmaz. */
.alt__logo {
  display: block;
  width: 464px;
  max-width: 100%;
  height: auto;
  margin: 0 auto var(--space-5);
  /* Alt bilgi silik bir bölge; logo tam parlaklıkta durunca sayfanın en dikkat
     çeken ögesi oluyordu. */
  opacity: 0.85;
}
/* Dördüncü madde ("Kaynak yükle") eklenince menü dar ekranda taşıyor. Sarma
   maddeler ARASINDA olmalı: `nowrap` yazılmazsa "Kaynak yükle" kendi içinde
   ikiye bölünüp iki satırlık bir kutuya dönüşüyordu (telefonda yakalandı). */
.ust__nav { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.ust__nav a {
  padding: 7px 13px;
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--text-2);
  white-space: nowrap;
}
.ust__nav a:hover { background: var(--surface); color: var(--text); text-decoration: none; }
.ust__nav a.on { background: var(--surface-2); color: var(--text); }

/* "Kaynak yükle" menüde ayrışmalı: arşiv katkıyla yaşıyor ama ziyaretçilerin
   çoğu okumaya geliyor ve düz bir menü maddesi hiç tıklanmıyordu. Dolgu değil
   çerçeve kullanılıyor - dolu kırmızı bir düğme üst çubukta "Dersleri gör"den
   daha baskın olur ve asıl işi gölgelerdi. */
.ust__nav__vurgu {
  color: var(--accent-text);
  border: 1px solid var(--accent-soft-border);
  background: var(--accent-soft-bg);
  font-weight: 600;
}
.ust__nav a.ust__nav__vurgu:hover {
  background: var(--accent-soft-border);
  color: var(--accent-text);
}
.ust__nav a.ust__nav__vurgu.on { background: var(--accent-soft-border); color: var(--text); }

/* --- Alt bilgi --- */
.alt {
  border-top: 1px solid var(--border);
  margin-top: var(--space-7);
  padding: var(--space-5) 0 var(--space-6);
  font-size: 12.5px;
  color: var(--text-3);
}
.alt__uyari { margin: 0 0 var(--space-2); max-width: 70ch; }
.alt__linkler { margin: 0; display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* "Ekstralar": hukuk bağlantılarının altında, onlardan ayrı duran blok. */
.alt__ekstralar {
  margin: var(--space-4) 0 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.alt__ekstralar-baslik {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Yardımcı sınıflar ---
   ⚠️ Şablonlarda `style="..."` KULLANILMAZ: CSP `style-src 'self'` inline stilleri
   bloklar ve düzen sessizce bozulur. Her görsel ayar bir sınıf olmalıdır. */
.bolum { margin-bottom: var(--space-6); }
/* Son bölümün boşluğu `.kabuk`un alt dolgusu ve alt bilginin üst boşluğuyla
   üst üste biniyordu. */
.bolum:last-child { margin-bottom: 0; }
.sag { text-align: right; }
.silik { color: var(--text-3); }
.not { color: var(--text-3); font-size: 13px; margin: var(--space-4) 0 0; }
.ustveri {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-3);
}
.arama-sonuc { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); margin: 0 0 var(--space-3); }

/* --- Başlıklar --- */
/* Giriş: başlık, tek cümle, eylemler, tek satır bilgi. Alt çizgi girişi
   sayfanın geri kalanından ayırıyor; ayrı bir arka plan kutusu gerekmiyor. */
.hero {
  padding: var(--space-7) 0 var(--space-6);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
}
.hero h1 {
  margin: 0 0 var(--space-4);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
  max-width: 20ch;
  text-wrap: balance;
}
.hero__giris {
  margin: 0 0 var(--space-5);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 58ch;
  text-wrap: pretty;
}
.hero__eylemler { display: flex; gap: var(--space-3); flex-wrap: wrap; margin: 0 0 var(--space-5); }
/* Bilgi satırı: ayırıcı nokta CSS'ten gelir, işaretlemede `·` yok - sarma
   anında satır başına düşen bir nokta kalmasın diye `li + li` ile. */
.hero__bilgi {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) 0;
  margin: 0 0 var(--space-2);
  padding: 0;
  font-size: 14px;
  color: var(--text-3);
}
.hero__bilgi li + li::before { content: "·"; margin: 0 10px; color: var(--border-strong); }
.hero__bilgi b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.hero__kim { margin: 0; font-size: 14px; color: var(--text-3); }

/* Ana sayfa bölüm başlıkları okunur boyutta. Sitenin geri kalanındaki
   `.bolum-basligi` (11px, büyük harf) tablo ve panel içi etiket içindir;
   ana sayfada her bölüm onunla başlayınca sayfa bir yönetim paneline
   benziyordu. */
.bolum-adi {
  margin: 0 0 var(--space-4);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
}
.bolum-ust {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.bolum-ust .bolum-adi { margin-bottom: 0; }

/* --- Son eklenenler (ana sayfa) ---
   İki sütunlu liste; her satır bir kutu. Başlık tek satırda kırpılır, tam ad
   `title` özniteliğinde - listede sekiz belge var ve biri uzun diye ızgara
   bozulmamalı. */
.son-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-3);
}
.son-liste li {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--space-3) var(--space-4);
  transition: border-color 0.15s;
}
.son-liste li:hover { border-color: var(--border-strong); }
.son-liste__baslik {
  display: block;
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.son-liste__baslik:hover { color: var(--accent-text); text-decoration: none; }
.son-liste__ust {
  display: flex;
  flex-wrap: wrap;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--text-3);
}
.son-liste__ust > * + *::before { content: "·"; margin: 0 7px; color: var(--border-strong); }
.son-liste__kod {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--accent-text);
}



/* Bölüm başlığı ile "tümünü gör" bağlantısı aynı satırın iki ucunda.
   `.bolum-basligi`nin alt boşluğu buraya taşındı; yoksa bağlantı başlığın
   altındaki boşluk kadar yukarıda kalıyordu. */
.panel__baslik {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.panel__baslik .bolum-basligi { margin-bottom: 0; }
.panel__tumu { font-size: 13px; font-weight: 600; white-space: nowrap; }

/* Ekran okuyucuya görünür, gözle görünmez. "Ara" etiketi büyütece dönüştü ama
   etiketin kendisi silinemez: `placeholder` bir alanı adlandırmaz. */
.gorsel-gizli {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Ders sayfasının altındaki telif satırı. Alt bilgideki uyarının tekrarı değil:
   paylaşılan bağlantı doğrudan buraya düşüyor ve kaldırma yolu burada görünmeli. */
.telif-notu {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-3);
  max-width: 78ch;
}

.bolum-basligi {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
  margin: 0 0 var(--space-4);
}

.sayfa-basligi { padding: var(--space-6) 0 var(--space-5); }
.sayfa-basligi h1 {
  margin: 0 0 var(--space-2);
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 600;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.sayfa-basligi .ustveri { margin: 0; }
.kod-etiketi {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-text);
  letter-spacing: 0.04em;
}

/* --- Paneller ve ızgara --- */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-5);
}

/* --- Duyurular ---
   ⚠️ Seçiciler `>` ile doğrudan çocuğa bağlı: duyuru gövdesi Markdown'dan geliyor
   ve kendi `<ul><li>`sini üretebiliyor. Gevşek `.duyurular li` yazıldığında o iç
   maddeler de flex satırına dönüşüp ayırıcı çizgi alıyor, madde işaretleri
   kayboluyordu. Tarayıcıda yakalandı. */
.duyurular { list-style: none; margin: 0; padding: 0; }
.duyurular > li {
  display: flex;
  gap: var(--space-3);
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.duyurular > li:last-child { border: 0; padding-bottom: 0; }
.duyurular .nokta {
  width: 6px; height: 6px; border-radius: var(--r-pill);
  background: var(--accent); flex: none; margin-top: 8px;
}
.duyurular time {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
  margin-bottom: 3px;
}
.duyurular h3 { margin: 0 0 2px; font-size: 15px; font-weight: 600; }
.duyurular h3 a { color: var(--text); }
.duyurular h3 a:hover { color: var(--accent-text); text-decoration: none; }
.duyurular__bos { color: var(--text-3); font-size: 14px; padding: var(--space-2) 0; border: 0; }

/* Nokta duyurunun seviyesini taşır: "önemli" bir duyuru listede ayırt
   edilemiyordu, hepsi aynı kırmızı noktaydı. */
.nokta--warning { background: var(--warn); }
.nokta--critical { background: var(--accent-text); }

/* Ana sayfadaki özet: düz metin, gövdenin kendisi değil. Renk `--text-2`,
   yani başlıktan bir kademe silik - göz önce başlığa gitsin. */
.duyuru-ozet { margin: 0; font-size: 14px; color: var(--text-2); }
.duyuru-devam { display: inline-block; margin-top: var(--space-2); font-size: 13px; }

/* Liste kendi kabında kayar. ⚠️ Ana sayfada duyuru paneli eskiden gövdenin
   tamamını basıyordu ve tek bir uzun duyuru altındaki bütün bölümleri ekranın
   dışına itiyordu. Tavan bir "kaç duyuru" sayısı değil piksel: üç-dört özetli
   duyuru göründükten sonra kaydırma başlıyor, yani panel sabit yükseklikte
   kalıyor.
   ⚠️ `padding-right` şart: kaydırma çubuğu metnin üstüne biniyordu.
   ⚠️ `overflow-y: auto` yalnızca taşınca çubuk çıkarır; tek duyuruda panel
   boşuna uzamaz. */
.duyurular--kaydir {
  max-height: 320px;
  overflow-y: auto;
  padding-right: var(--space-3);
  overscroll-behavior: contain;
}

/* --- Kategori kartları --- */
.kartlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.kart {
  position: relative;
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--space-4) var(--space-5) var(--space-4) var(--space-4);
  color: var(--text);
  transition: border-color 0.15s, background-color 0.15s;
}
.kart:hover { border-color: var(--border-strong); background: var(--surface-2); text-decoration: none; }
.kart strong { display: block; font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.kart span { font-size: 13px; color: var(--text-3); }
/* Kartın bir yere götürdüğü ok ile söyleniyor; üstüne gelince hafifçe kayar. */
.kart::after {
  content: "→";
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  color: var(--text-3);
  transition: transform 0.15s, color 0.15s;
}
.kart:hover::after { color: var(--accent-text); transform: translateX(2px); }

/* --- Arama --- */
.arama {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 13px var(--space-4);
  margin-bottom: var(--space-4);
}
.arama__simge { flex: none; color: var(--text-3); }
/* Kutuya odaklanınca simge de canlanır: alanın aktif olduğunu tek başına
   imleç anlatıyordu. */
.arama:focus-within .arama__simge { color: var(--accent-text); }
.arama input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  min-width: 0;
}
.arama input::placeholder { color: var(--text-3); }

/* --- Sekmeler --- */
.sekmeler {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: var(--space-4);
}
.sekmeler a {
  font-size: 13px;
  font-weight: 500;
  padding: 8px 15px;
  border-radius: var(--r-sm);
  color: var(--text-2);
}
.sekmeler a:hover { color: var(--text); text-decoration: none; }
.sekmeler a.on { background: var(--surface-2); color: var(--text); font-weight: 600; }
.sekmeler .sayi { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); margin-left: 6px; }

/* --- Filtreler --- */
.filtreler {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-4);
  font-size: 13px;
}
.filtreler select {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 0 10px;
  font: inherit;
  font-size: 13px;
}
/* Seçiciler ve "Filtrele" düğmesi aynı satırda; yükseklik ortak veriliyor.
   Düğme JS varken gizlenir ama JS'siz gezinmede görünür ve hizalı olmalı. */
.filtreler select,
.filtreler button.rozet { height: 34px; min-height: 34px; }
.filtreler .temizle { color: var(--text-3); font-size: 12.5px; }

/* --- Tablo --- */
/* ⚠️ `table-layout: fixed` ŞART, süsleme değil. Ders sayfasında dört ayrı
   tablo alt alta duruyor ve varsayılan (`auto`) düzende her biri KENDİ
   içeriğine göre sütun genişliği hesaplıyor: "Colander11e_Ch01_Final" gibi
   uzun bir belge adı o tablonun ilk sütununu şişirip "Dönem"i 130px sağa
   itiyor, üstteki tabloda ise aynı sütun çok daha solda başlıyordu. Ekranda
   dört tablo değil, hizasız dört ızgara görünüyordu.

   Sabit düzende genişliği YALNIZCA İLK SATIR belirler - bu yüzden `<th>`ler de
   `<td>`lerle aynı sınıfı taşıyor (bkz. partials/kaynak_tablosu.html).
   Genişliği verilmeyen tek sütun `.ad`; kalan alanı o alıyor, yani her tabloda
   aynı değeri buluyor.

   ⚠️ Yüzde kullanılıyor, piksel değil: sabit piksel toplamı `min-width`i
   aşarsa tarayıcı taşırıyor ve `.kaydir-x` gereksiz yere kaydırma çubuğu
   çıkarıyor. */
.tablo { width: 100%; border-collapse: collapse; min-width: 620px; table-layout: fixed; }
/* ⚠️ `.tablo th` (0,1,1) yardımcı `.sag` sınıfını (0,1,0) yeniyordu: sağa
   dayanmış sütunların başlığı solda kalıyor, sayı ve "İndir" hücreleriyle
   hizalanmıyordu. Başlık için ayrıca yazılıyor. */
.tablo th.sag,
.tablo td.sag { text-align: right; }
.tablo th {
  text-align: left;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
  padding: 0 var(--space-4) 11px 0;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.tablo td {
  padding: 14px var(--space-4) 14px 0;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.tablo tbody tr:hover td { background: var(--surface); }
/* ⚠️ Hücrenin sağ dolgusu sütunlar ARASI boşluktur; son sütunda tabloyu kendi
   kabının sağ kenarından içeri kaydırıyor ve üstündeki başlıkla hizasız
   bırakıyordu. `:last-child` özgüllüğü `.tablo td`yi yeniyor. */
.tablo th:last-child,
.tablo td:last-child { padding-right: 0; }
/* Ders kodu 12px normal ağırlıkta okunmuyordu - koyu zeminde ince mono, dar
   ekranda hepten kayboluyordu. Aynı aile (JetBrains Mono, zaten yüklü) ama
   500 ağırlık, biraz daha büyük ve harf arası açık: kod "ECON 301" olarak tek
   parça okunuyor. Yeni bir font dosyası eklenmedi - `static/fonts/` içinde
   olmayan bir `url()` production'da `collectstatic`i kırar. */
.tablo .kod {
  width: 12%;
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--accent-text);
  white-space: nowrap;
}
.tablo .kod a { color: inherit; }
.tablo .kod a:hover { color: var(--text); }

/* Dönem bir sayı değil, etiket: sola dayanır ve başlığıyla hizalanır.
   ⚠️ `.sayi` kullanılırsa hücre sağa kayar, "DÖNEM" başlığı solda kalır ve
   sütun eğri görünür (tarayıcıda yakalandı). Mono font "2026-Güz"ün her
   satırda aynı genişlikte durması için. */
.tablo .donem {
  width: 16%;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* ⚠️ `.ad`e GENİŞLİK VERİLMEZ. Sabit düzende genişliği verilmeyen tek sütun
   kalanın tamamını alır; her tabloda aynı hesabı bulduğu için dört klasör
   tablosu birebir hizalanıyor. Buraya bir değer yazmak o dengeyi bozar.
   `overflow-wrap`: sabit düzende boşluksuz uzun bir ad sütunu değil satırı
   taşırırdı. */
.tablo .ad {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
}
/* ⚠️ Sütun sınıfları `<th>`de de duruyor (sabit düzen genişliği ilk satırdan
   okuyor) ve `.tablo .donem` (0,2,0) `.tablo th` (0,1,1) kuralını yeniyordu:
   "DÖNEM" ve "İNDİRME" başlıkları mono yazıya, "BELGE" 15.5px'e dönüyor,
   başlık satırı dört farklı yazıyla basılıyordu. Başlık görünümü burada geri
   veriliyor; genişlik sütun kuralından gelmeye devam ediyor. */
.tablo th.kod,
.tablo th.ad,
.tablo th.donem,
.tablo th.sayi {
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text-3);
}

/* Başlık satırı: solda kırpılabilen ad, sağında rozetler.
   ⚠️ `min-width: 0` ŞART. Flex öğesinin varsayılan en küçük genişliği
   `auto`dur, yani içeriği kadar - bu hâlde `.ad-baslik` hiç küçülmez, kırpma
   devreye girmez ve uzun ad rozetleri hücrenin dışına iter. */
.ad-satiri {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
/* Rozetler kırpılmaz: birkaç piksel yer kaplıyorlar ve satırın en çabuk
   okunan bilgisi onlar. Kısalan hep başlık. */
.ad-satiri > .rozet { flex: none; }

/* ⚠️ Uzun dosya adı eskiden satırı SARIYORDU: bir belge iki-üç satır kaplayıp
   tablonun dikey ritmini bozuyor, kısa adlı komşu satırların yanında kayık
   duruyordu. Artık tek satır - taşan kısım kırpılıp "…" ile bitiyor, tamamı
   `title` özniteliğinde ve fareyle üstüne gelince kayarak okunuyor. */
.ad-baslik {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Kayarken "…" kaldırılır: kayan metnin ucunda duran üç nokta okunmayı
   zorlaştırıyor ve metin başa döndüğünde bir an çift görünüyordu. */
.ad-baslik.kayiyor { text-overflow: clip; }
/* ⚠️ `inline-block` yalnızca KAYARKEN. Sürekli inline-block olsaydı
   `text-overflow: ellipsis` çalışmazdı: kırpma metne değil, blok kutuya
   uygulanır ve üç nokta hiç çıkmaz. */
.ad-baslik.kayiyor > .ad-metin {
  display: inline-block;
  animation: ad-kaydir var(--kaydirma-sure, 6s) ease-in-out infinite;
}
/* ⚠️ Mesafe (`--kaydirma`) ve süre JS'ten gelir: kayma miktarı = içerik
   genişliği - kutu genişliği ve CSS bunu ölçemez (static/js/belge.js).
   Değişken yoksa animasyon hiçbir şey yapmaz - JS çalışmadığında başlık
   yalnızca kırpılmış kalır, bozulmaz. */
@keyframes ad-kaydir {
  0%, 15% { transform: translateX(0); }
  55%, 70% { transform: translateX(var(--kaydirma, 0)); }
  100% { transform: translateX(0); }
}
/* Hareket rahatsız edenler için: kırpma kalır, kayma olmaz. Tam ad `title`
   özniteliğinde duruyor, yani bilgi yine erişilebilir. */
@media (prefers-reduced-motion: reduce) {
  .ad-baslik.kayiyor > .ad-metin { animation: none; }
}
.tablo .hoca { width: 20%; overflow-wrap: anywhere; }
/* ⚠️ `.islem-sutunu` (897. satır) genişlik taşımıyor; `.tablo` altındaki bu
   kural yalnızca sütun geometrisi için. İkisi ayrı: birincisi kartlaşan
   mobil düzende de geçerli, bu değil. */
.tablo .islem-sutunu { width: 23%; }
.tablo .ad a { color: var(--text); }
.tablo .ad a:hover { color: var(--accent-text); }
.tablo .sayi {
  width: 9%;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.tablo .sonuc-yok td { color: var(--text-3); padding: var(--space-5) 0; }
/* Belgesi olmayan ders: sayı silik, göz belgesi olanlara gitsin. */
.tablo .sayi--bos { color: var(--text-3); }

.rozet {
  display: inline-block;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  white-space: nowrap;
}
.rozet--cozum { color: var(--ok); }

/* Yapay zekâ rozeti uyarı renginde: "çözümlü" bir kazanım, bu ise okuyanın
   bilmesi gereken bir nitelik. Kırmızı (--danger) olsaydı belgeyi kusurlu
   gösterirdi; bu bir kusur değil, bir kaynak bilgisi. */
.rozet--ai { color: var(--warn); }

/* "yeni" rozeti marka kırmızısında ama METİN varyantıyla: `--accent` yalnızca
   dolgu içindir (koyu zeminde metin olarak AA geçmez), `--accent-text` 6.08:1.
   `tests/test_kontrast.py` bu ayrımı kilitliyor. */
.rozet--yeni {
  color: var(--accent-text);
  background: var(--accent-soft-bg);
  border-color: var(--accent-soft-border);
}

/* Tür ve boyut başlığın ALTINDA, kendi satırında: aynı satıra eklendiğinde
   uzun başlıklarda araya girip belgenin adını ikiye bölüyordu. */
.dosya-bilgi {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-3);
  font-family: var(--font-mono);
}

/* "ekleyen" tür/boyutla aynı satırda. Ad sans: mono bir kişi adı dosya
   kodu gibi okunuyor. Resmî hesabın adı bir ton parlak - tik yalnız başına
   12px'te gözden kaçıyor. */
.katkici { white-space: nowrap; }
.katkici__ad {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--text-2);
}
.katkici__ad--resmi { color: var(--text); font-weight: 600; }

/* Kırmızı DOLGU (`--accent`), metin değil - kontrast kuralı dolguya izin
   veriyor. İşaret `--text`: marka paletinin açık mürekkebi. */
.dogrulama-tiki {
  display: inline-flex;
  vertical-align: -3px;
  margin-left: 3px;
}
.dogrulama-tiki__zemin { fill: var(--accent); }
.dogrulama-tiki__isaret { stroke: var(--text); }

/* Aynı görünüm `<span>` etiketinde de `<button>` düğmesinde de kullanılıyor.
   Düğme hâlinde tarayıcı `line-height: normal` ve `cursor: default` veriyordu;
   sonuç 22px'lik, tıklanabilir görünmeyen bir hedefti (WCAG 2.5.8 en az 24px).
   Yükseklik burada sabitleniyor ki `.filtreler` içindeki seçicilerle hizalansın. */
button.rozet {
  cursor: pointer;
  line-height: 1.4;
  min-height: 30px;
  padding: 5px 12px;
  appearance: none;
}
button.rozet:hover { color: var(--text); border-color: var(--border-strong); }

/* "İndir" sitenin ana eylemi, bu yüzden düğme: yanındaki "Paylaş" ve "Sorun
   bildir" ile aynı ağırlıkta düz bir yazıyken satırda kayboluyordu. Dolgu
   yumuşak aksan; sütun boyunca yirmi tane dolu kırmızı düğme tabloyu
   boğardı. Üstüne gelince tam dolguya geçer.
   Yükseklik 30px - WCAG 2.5.8'in istediği 24px'in üstünde, satırı da
   şişirmiyor. */
.indir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
  min-height: 30px;
  padding: 4px 12px 4px 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--accent-text);
  background: var(--accent-soft-bg);
  border: 1px solid var(--accent-soft-border);
  border-radius: var(--r-sm);
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.indir:hover {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  text-decoration: none;
}
.indir__simge { flex: none; }
.bildir {
  display: inline-block;
  vertical-align: middle;
  padding: 3px 0;
  min-height: 24px;
}

/* --- Eksikler --- */
.eksikler {
  background: var(--accent-soft-bg);
  border: 1px solid var(--accent-soft-border);
  border-radius: var(--r-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: 13.5px;
  color: var(--text-2);
}
.eksikler b { color: var(--accent-text); }
.eksikler ul { margin: var(--space-2) 0 0; padding-left: 18px; }

/* --- Boş durum --- */
.bos {
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  text-align: center;
  color: var(--text-3);
}
.bos strong { display: block; color: var(--text-2); font-size: 15px; margin-bottom: 6px; }
/* Boş kutudaki eylem bağlantısı metnin altında kendi satırında. */
.bos a { display: inline-block; margin-top: var(--space-3); font-weight: 600; }

/* --- Duyuru detay --- */
.duyuru-govde {
  max-width: 68ch;
  color: var(--text-2);
  font-size: 15.5px;
}
.duyuru-govde p { margin: 0 0 var(--space-4); }
.duyuru-govde ul,
.duyuru-govde ol { margin: 0 0 var(--space-4); padding-left: 22px; }
.duyuru-govde li { margin-bottom: 6px; }
.duyuru-govde h2,
.duyuru-govde h3 {
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  margin: var(--space-5) 0 var(--space-2);
}
/* "Önemli" duyuru gövdesi de ayırt edilebilsin; başlıktaki etiket tek başına
   uzun bir metnin başında kayboluyor. */
.duyuru-govde--critical {
  border-left: 2px solid var(--accent);
  padding-left: var(--space-4);
}
.duyuru-govde--warning {
  border-left: 2px solid var(--warn);
  padding-left: var(--space-4);
}

.geri { margin: var(--space-6) 0 0; font-size: 14px; font-weight: 600; }

/* --- SSS --- */
.sss { max-width: 68ch; }
.sss h2 {
  margin: var(--space-6) 0 var(--space-2);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.sss p { margin: 0 0 var(--space-3); color: var(--text-2); }
.sss ul { color: var(--text-2); padding-left: 20px; }
.sss li { margin-bottom: 6px; }

@media (max-width: 760px) {
  /* Dört kategori telefonda ikişerli: tek sütunda dört tam genişlik kart
     ekranın tamamını kaplıyor, içerikleri ise iki kelime. */
  .kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ust__ic { gap: var(--space-3); }
  .son-liste { grid-template-columns: minmax(0, 1fr); }
  /* Dokunmatikte başlığın tamamını görmenin yolu yok (`title` hover ister);
     kırpılmış ad telefonda kalıcı olarak yarım kalırdı. */
  .son-liste__baslik { white-space: normal; overflow-wrap: anywhere; }
}

/* --- Katkı formu --- */
.katki {
  border-top: 1px solid var(--border);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  scroll-margin-top: var(--space-5);
}
.form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 780px; }
.form__tur { align-self: flex-start; margin-bottom: 0; }
.form__tur button {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 15px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}
.form__tur button.on { background: var(--surface-2); color: var(--text); font-weight: 600; }
.form__satir { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: flex-end; }

/* Sekmeye bağlı bölümün kendi iç aralığı olmalı: sınıfsızken açıklama metniyle
   "+ Bağlantı ekle" düğmesi arasında 3px kalıyordu. */
.form__bolum { display: flex; flex-direction: column; gap: var(--space-3); }
.form__bolum > .not { margin-top: 0; }
.form__bolum > .rozet { align-self: flex-start; }

.alan { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* ⚠️ `flex-basis` yalnızca satır bağlamında genişlik demektir. `.alan`ın kendisine
   yazıldığında, dikey `.form` (telif formu, sorun kutusu, `#ad-alani`) içinde
   220px'lik bir *yükseklik* oluyor ve alanların arasında kocaman boşluklar
   açılıyordu. Bu yüzden yalnızca `.form__satir` çocuklarına uygulanır. */
.form__satir > .alan { flex: 1 1 220px; }
.form__satir > .alan--dar { flex: 0 1 140px; }

.alan > span { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.alan > span i { font-style: normal; font-weight: 400; color: var(--text-3); }
.alan input,
.alan select,
.alan textarea,
.ogeler input {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  min-width: 0;
}

/* Tek satırlık kontroller aynı yüksekliği paylaşmalı. `<input>` yüksekliğini
   satır yüksekliğinden, `<select>` tarayıcının kendi ölçüsünden alıyor; yan
   yana duran "Yıl" ile "Dönem" kutuları arasında görünür bir basamak
   oluşuyordu. Yükseklik açıkça veriliyor - ikisi de metni dikey ortalar. */
.alan > input:not([type="file"]),
.alan > select,
.ogeler input {
  height: 42px;
  padding-top: 0;
  padding-bottom: 0;
}
.alan input[type="file"] { padding: 8px; color: var(--text-2); }

/* Dosya seçicinin düğmesi tarayıcının kendi gri kutusu olarak geliyordu - koyu
   temanın içinde tek açık renkli, hizasız öge oydu. */
.alan input[type="file"]::file-selector-button {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 6px 14px;
  margin-right: var(--space-3);
  cursor: pointer;
}
.alan input[type="file"]::file-selector-button:hover {
  border-color: var(--accent-soft-border);
  color: var(--accent-text);
}
.alan input:focus,
.alan select:focus,
.alan textarea:focus,
.ogeler input:focus { border-color: var(--accent-text); }
.alan textarea { resize: vertical; min-height: 90px; line-height: 1.5; }

.alan-grubu {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--space-4);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.alan-grubu legend { font-size: 12.5px; font-weight: 600; color: var(--text-2); padding: 0 6px; }

.onay { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-2); }
/* ⚠️ Tarayıcı varsayılanı 13px; telefonda ıskalanıyordu (WCAG 2.5.8 en az 24px
   ister). Etiketin tamamı zaten tıklanabilir ama parmak önce kutuyu arıyor. */
.onay input {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--accent);
  flex: none;
}
.onay b { color: var(--text); font-weight: 600; }
.onay--satir { align-items: center; padding-bottom: 10px; }
/* Onay kutusu bilinçli olarak büyük ve kutu vurgulu: 13px'lik varsayılan kutu
   gözden kaçıyor, form "aydınlatma metnini onaylaman gerekiyor" diye geri
   dönüyordu. 24px hem WCAG 2.5.8'in dokunma hedefi hem gözle görünür bir
   işaret. Kutu ile metin arasındaki hizayı `margin-top` tutuyor. */
.onay--riza {
  background: var(--surface);
  border: 1px solid var(--accent-soft-border);
  border-radius: var(--r-md);
  padding: var(--space-4);
  gap: var(--space-3);
  font-size: 14.5px;
  color: var(--text);
  align-items: center;
}
.onay--riza input {
  width: 24px;
  height: 24px;
  margin-top: 0;
}
/* İşaretlendiğinde kutunun kendisi de onaylandığını söylesin. */
.onay--riza:has(input:checked) { border-color: var(--ok); }

.ogeler { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ogeler li {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--space-2);
  flex-wrap: wrap;
}
.ogeler input { flex: 1 1 200px; }
.oge__bilgi { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.oge__sil {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-3);
  border-radius: var(--r-sm);
  /* Yanındaki metin kutularıyla aynı yükseklik; satır içinde basamak olmasın. */
  height: 42px;
  padding: 0 14px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.oge__sil:hover { color: var(--accent-text); border-color: var(--accent-soft-border); }

/* --- Sürükle-bırak alanı --- */
.birak-alani__kutu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--space-6) var(--space-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-3);
  text-align: center;
  cursor: pointer;
  /* Sürükleme sırasında sınırın hareket etmemesi için geçiş yalnızca renkte. */
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.birak-alani__kutu:hover { border-color: var(--accent-soft-border); color: var(--text-2); }
.birak-alani__baslik { color: var(--text); font-size: 15px; font-weight: 600; }
.birak-alani__alt { font-size: 13px; }
.birak-alani__simge { color: var(--text-3); }

/* Dosya kutunun üstündeyken: "buraya bırakabilirsin" sinyali. */
.birak-alani--uzerinde .birak-alani__kutu {
  border-color: var(--accent-text);
  border-style: solid;
  background: var(--accent-soft-bg);
  color: var(--accent-text);
}
.birak-alani--uzerinde .birak-alani__baslik,
.birak-alani--uzerinde .birak-alani__simge { color: var(--accent-text); }

/* Klavyeyle gezerken de görünür olmalı: gerçek `<input>` görsel olarak gizli,
   odak halkası onun üstünde kalırsa hiçbir yerde görünmez. */
.birak-alani input:focus-visible + .birak-alani__kutu,
.birak-alani:focus-within .birak-alani__kutu { border-color: var(--accent-text); }

/* --- Yükleme göstergesi --- */
.carkifelek {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent-text);
  border-radius: var(--r-pill);
  animation: carkifelek-don 0.7s linear infinite;
}

@keyframes carkifelek-don {
  to { transform: rotate(360deg); }
}

/* Hareket azaltma isteğinde dönme durur ama gösterge kaybolmaz: "bir şey
   oluyor" bilgisi hareketten değil, varlığından geliyor. */
@media (prefers-reduced-motion: reduce) {
  .carkifelek { animation: none; border-top-color: var(--accent-text); }
}

.form__gonder { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.buton[disabled] { opacity: 0.6; cursor: progress; }
.baglanti-gibi {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent-text);
  text-decoration: underline;
  cursor: pointer;
}

.uyari-kutu {
  background: var(--accent-soft-bg);
  border: 1px solid var(--accent-soft-border);
  border-radius: var(--r-md);
  padding: var(--space-3) var(--space-4);
  font-size: 13.5px;
  color: var(--text-2);
}
.uyari-kutu b { color: var(--accent-text); }

.form-hata {
  background: var(--accent-soft-bg);
  border: 1px solid var(--accent-soft-border);
  border-radius: var(--r-md);
  padding: var(--space-3) var(--space-4);
  font-size: 14px;
  color: var(--accent-text);
}
.form-hata p { margin: 0; }
.form-hata ul { margin: var(--space-2) 0 0; padding-left: 20px; color: var(--text-2); font-size: 13px; }

.basari {
  border: 1px solid var(--ok);
  border-radius: var(--r-lg);
  padding: var(--space-5);
  text-align: center;
}
.basari strong { display: block; color: var(--ok); font-size: 17px; margin-bottom: var(--space-2); }
.basari p { margin: 0 0 var(--space-3); color: var(--text-2); font-size: 14px; }
.takip-kodu {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 24px;
  letter-spacing: 0.08em;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 10px 20px;
}

/* --- Sorun bildir / ders öner --- */
/* ⚠️ Hücreye `display: flex` verilemez: `<td>` tablo düzeninden çıkar, satır
   yüksekliğine uzamaz ve alt çizgisi komşularından birkaç piksel yukarıda
   kalır - her satırın altındaki çizgi son sütunda kırılıyordu. Hücre
   `table-cell` kalır; hizalama metin akışıyla yapılır. */
.islem-sutunu { white-space: nowrap; }
.islem-sutunu .kopyala,
.islem-sutunu .bildir { margin-left: var(--space-3); }

/* Başlık artık bir bağlantı (belgeyi indirmeden açar). Kesikli alt çizgi
   "buraya basılır ama indirme değil" der; düz çizgi indirme bağlantısıyla
   karışıyordu. */
.tablo .ad a.onizle {
  color: var(--text);
  text-decoration: underline dotted var(--border-strong);
  text-underline-offset: 3px;
}
.tablo .ad a.onizle:hover {
  color: var(--accent-text);
  text-decoration: underline solid currentColor;
}

.kopyala {
  background: none;
  border: 0;
  font: inherit;
  font-size: 12px;
  color: var(--text-3);
  cursor: pointer;
  white-space: nowrap;
  /* Dokunma hedefi en az 24px (WCAG 2.5.8); metin yüksekliği tek başına yetmiyor. */
  padding: 3px 0;
  min-height: 24px;
}
.kopyala:hover { color: var(--accent-text); text-decoration: underline; }
.kopyala--oldu { color: var(--ok); }
.kopyala--oldu:hover { color: var(--ok); text-decoration: none; }

/* Kopyalanan bağlantıyla gelen ziyaretçi hangi satıra düştüğünü görmeli. */
.tablo tbody tr:target td {
  background: var(--accent-soft-bg);
  box-shadow: inset 2px 0 0 var(--accent);
}
.bildir {
  background: none;
  border: 0;
  font: inherit;
  font-size: 12px;
  color: var(--text-3);
  cursor: pointer;
  white-space: nowrap;
}
.bildir:hover { color: var(--accent-text); text-decoration: underline; }

.kutu {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: var(--space-5);
  max-width: 460px;
  width: calc(100% - 2 * var(--space-4));
}
.kutu::backdrop { background: rgba(0, 0, 0, 0.65); }
.kutu .form { gap: var(--space-3); }
/* Belge başlığı ile ilk alan etiketi arasında nefes payı; yoksa başlık alanın
   bir parçası gibi okunuyor. */
.kutu > .not { margin: var(--space-2) 0 var(--space-4); }

/* --- Sayfalama --- */
.sayfalama {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.sayfalama__numaralar,
.sayfalama__adet { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }

/* Numaralar ve boyut seçenekleri aynı kutu ölçüsünü paylaşır ki iki grup aynı
   çizgide otursun; `min-width` tek haneden çok haneye geçerken zıplamayı önler. */
.sayfalama a,
.sayfalama__numaralar > span,
.sayfalama__adet > span:not(.sayfalama__etiket) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 9px;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.sayfalama a:hover { background: var(--surface); color: var(--text); text-decoration: none; }
.sayfalama .on {
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
}
.sayfalama__ok { font-family: var(--font-sans); font-size: 17px; }
.sayfalama__pasif { color: var(--border-strong); }
.sayfalama__bosluk { min-width: 20px; color: var(--text-3); }
.sayfalama__adet { gap: 2px; }
.sayfalama__etiket {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
  margin-right: var(--space-2);
}
.sayfalama__ozet {
  margin: var(--space-2) 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
}

@media (max-width: 560px) {
  /* Dar ekranda iki grup alt alta; boyut seçimi sola dayanır. */
  .sayfalama { justify-content: flex-start; }
}

.oner {
  border-top: 1px solid var(--border);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
}
.oner .not { margin-top: 0; margin-bottom: var(--space-4); }

/* --- İskelet ---
   Sayfa geçişi beklerken gösterilir (static/js/gezinti.js). Dönen bir çark
   yerine iskelet: gelecek sayfanın kabaca şekli duruyor, içerik yerine
   oturduğunda düzen zıplamıyor ve "bir şeyler bozuldu" hissi olmuyor.
   Yalnızca bekleme 150 ms'yi geçerse çiziliyor; önden getirilmiş sayfada
   yanıp sönen bir kutu olurdu. */
.iskelet { display: flex; flex-direction: column; gap: var(--space-3); }
.iskelet__blok {
  border-radius: var(--r-sm);
  /* Tek renkli bir "parlama" katmanı yüzeyin üstünde soldan sağa geçer.
     `background-size` %200 - animasyon konumu kaydırıyor. */
  background: linear-gradient(
    90deg,
    var(--surface) 0%,
    var(--surface-2) 50%,
    var(--surface) 100%
  );
  background-size: 200% 100%;
  animation: iskelet-parla 1.4s ease-in-out infinite;
}
.iskelet__baslik { height: 34px; width: min(60%, 420px); margin-top: var(--space-6); }
.iskelet__ustveri { height: 14px; width: min(38%, 260px); margin-bottom: var(--space-4); }
.iskelet__serit { height: 46px; width: min(100%, 560px); margin-bottom: var(--space-4); }
.iskelet__satir { height: 44px; }

@keyframes iskelet-parla {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* Hareket azaltma isteğinde parlama durur; iskelet düz bir yer tutucuya döner.
   base.css'teki genel kural süreyi kısaltıyor ama animasyon yine de dönüyordu. */
@media (prefers-reduced-motion: reduce) {
  .iskelet__blok { animation: none; background: var(--surface); }
}

/* --- Takip kodları (bu cihazda saklanan liste) --------------------------- */
.takip-kutusu {
  margin-top: var(--space-6);
}

/* Kodlar zaten bağlantı; madde imi ikinci bir işaret olurdu. */
.takip-listesi {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

/* --- Şu an aradıklarımız (ana sayfa) ------------------------------------- */

/* Her istek bir kart: ders kodu ve adı, altında sabit üç satır (klasör,
   dönem, öğretim üyesi), varsa not, en altta "Yükle →". Kartlar aynı satırda
   aynı yükseklikte (`grid` + `height: 100%`), eylem hep kartın dibinde. */
.aranan-dersler {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.aranan-ders {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-4) var(--space-5) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--text);
  transition: border-color 0.15s, background-color 0.15s;
}
.aranan-ders:hover { text-decoration: none; border-color: var(--accent-soft-border); background: var(--accent-soft-bg); }
.aranan-ders__kod {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-text);
}
.aranan-ders__kod { white-space: nowrap; }
/* Ad TEK SATIR, kırpılır: iki satıra düştüğünde alanlar yan kartlardan aşağı
   kayıyor ve "Dönem" hizası bozuluyordu. Kartı tanıtan ders kodu. */
.aranan-ders__ad {
  margin-top: 2px;
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Etiket solda silik, değer sağda: üç satır tek bakışta taranıyor. */
.aranan-ders__alanlar {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  display: grid;
  gap: 5px;
  font-size: 13.5px;
}
.aranan-ders__alanlar > div {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  gap: var(--space-3);
}
.aranan-ders__alanlar dt { color: var(--text-3); }
.aranan-ders__alanlar dd { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }
.aranan-ders__not {
  margin-top: var(--space-3);
  font-size: 13px;
  color: var(--text-2);
  font-style: italic;
}
.aranan-ders__eylem {
  margin-top: auto;
  padding-top: var(--space-4);
  align-self: flex-end;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-3);
  transition: color 0.15s;
}
.aranan-ders:hover .aranan-ders__eylem { color: var(--accent-text); }
/* ⚠️ Temel kuraldan SONRA durmalı: dosyanın başındaki 760px bloğuna
   konduğunda eşit özgüllükteki bu kurallar onu eziyordu. */
@media (max-width: 900px) {
  .aranan-dersler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .aranan-dersler { grid-template-columns: minmax(0, 1fr); }
}

/* --- Ders sayfasindaki klasör bölümleri ---------------------------------- */

/* Sekmeler kaldırıldı: dersin bütün belgeleri tek ekranda, klasör klasör
   gruplanmış hâlde duruyor. Klasörler artık `<details>`: dört başlık alt alta,
   dolu olanlar açık, boşlar kapalı.

   ⚠️ Katlama tamamen tarayıcının işi - JS yok. Inline handler CSP nedeniyle
   zaten yasak, ayrıca sayfa geçişleri `<main>` içeriğini değiştirdiği için
   (static/js/gezinti.js) JS ile kurulan davranışın her geçişte yeniden
   bağlanması gerekirdi. */
.klasor-bolumu {
  margin-top: var(--space-6);
}

/* ⚠️ BAŞLIK SATIRI BİR ÇUBUK, düz metin değil. İlk hâlinde klasör adı
   `.bolum-basligi` ile basılıyordu (11px, silik gri, büyük harf) - sayfanın
   "etiket" tonu. Sonuç: ne başlık olduğu ne de tıklanınca açılıp kapandığı
   fark ediliyordu. Şimdi üç işaret birden var ve üçü de gerekli:
     1. Zemin + çerçeve  → satırın kendisi bir düğme gibi duruyor,
     2. Soldaki ok       → açık/kapalı durumu (kapalıyken sağa döner),
     3. Sağdaki yazı     → "göster" / "gizle", tahmin gerektirmeyen tek işaret.
   Ok ve yazı CSS'ten geliyor; işaretlemede tekrar etmiyor. */
.klasor-bolumu > summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  /* Parmakla basılacak kadar yüksek; 11px'lik eski satır telefonda ~16px'di. */
  min-height: 44px;
  /* Tarayıcının kendi üçgeni: Firefox/Chrome `list-style`, Safari kendi
     sözde öğesiyle çiziyor. İkisi de kapatılmazsa iki ok yan yana durur. */
  list-style: none;
}
.klasor-bolumu > summary::-webkit-details-marker { display: none; }

.klasor-bolumu > summary:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}

/* Klasör adı: sayfadaki diğer bölüm başlıklarından belirgin olarak daha güçlü.
   Büyük harf ve harf aralığı YOK - "ODTÜClass" ve "Syllabus" özel adlar, büyük
   harfe çevrilince okunurlukları düşüyor. */
.klasor-basligi {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
}

/* Belge sayısı bir hap: kapalı bölümde "açmaya değer mi" sorusunun cevabı. */
.klasor-sayi {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  padding: 2px 9px;
}
/* Boş klasör kendini belli etsin; sayı da başlık da bir ton geri çekiliyor. */
.klasor-bolumu:not([open]) .klasor-basligi { color: var(--text-2); }
.klasor-bolumu > summary:hover .klasor-basligi { color: var(--text); }

/* ⚠️ OK SAĞDA. Solda dururken başlığı ~25px içeri itiyordu ve altındaki tablo
   çubuğun kenarından başlıyordu: ekranda iki ayrı sol kenar görünüyordu.
   Sağa alınınca başlık, çubuğun sol dolgusundan başlıyor ve içerik de aynı
   dolguyu aldığı için ikisi tam hizalı.

   ⚠️ Yazı sözde öğede, ok işaretlemede: tek `::after` ikisini birden
   taşıyamaz ve yazının açık/kapalı hâlde DEĞİŞMESİ gerekiyor (`<span>` olsaydı
   iki metin yazıp birini gizlemek gerekirdi). Sıra `order` ile kuruluyor -
   `::after` her zaman son çocuk olur, oysa okun yazıdan sonra gelmesi gerek. */
.klasor-bolumu > summary::after {
  content: "göster";
  order: 1;
  margin-left: auto;
  color: var(--text-3);
  font-size: 12px;
}
.klasor-bolumu[open] > summary::after { content: "gizle"; }

.klasor-ok {
  order: 2;
  color: var(--accent-text);
  font-size: 11px;
  line-height: 1;
  transition: transform 120ms ease;
}
.klasor-bolumu:not([open]) .klasor-ok { transform: rotate(-90deg); }

/* Açık çubuğun alt köşeleri düz: içerik hemen altında başlıyor ve ikisi tek
   parça okunuyor. Kapalıyken dört köşe de yuvarlak - orada bağlanacak bir şey
   yok. */
.klasor-bolumu[open] > summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* ⚠️ İçeriğin yatay dolgusu çubuğunkiyle AYNI olmalı: tablonun ilk sütunu
   başlığın, son sütunu da "gizle" yazısının tam altına gelsin diye. Farklı
   olduğunda göze "hizasız" görünen şey buydu. */
.klasor-bolumu > .kaydir-x,
.klasor-bolumu > .klasor-bos {
  margin-top: var(--space-3);
  padding: 0 var(--space-4);
}

/* --- Ders sayfasındaki katkı çağrısı --- */
/* Sayfanın geri kalanı zeminli çubuklardan oluşuyor (klasör başlıkları);
   çağrı `.not` sınıflı çıplak bir cümleyken o ritmin dışında kalıyor ve
   unutulmuş bir satır gibi duruyordu. Aynı yüzey, aynı köşe yarıçapı, artı
   sol kenarda aksan şeridi: "bu bir bilgi değil, bir davet" demenin en sessiz
   yolu. */
.katki-cagrisi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
}
.katki-cagrisi__metin { display: flex; flex-direction: column; gap: 3px; }
.katki-cagrisi__metin b { font-size: 15px; color: var(--text); }
.katki-cagrisi__metin span { font-size: 13.5px; color: var(--text-2); }
/* Düğme metni sarmamalı: iki satıra düşünce kutunun dikey ritmi bozuluyor. */
.katki-cagrisi .buton { flex: none; white-space: nowrap; }

/* ============================================================
   MOBİL (<=668px)
   Ziyaretçilerin çoğu telefondan geliyor. Ölçülen sorun: tablolar 620-633px
   istiyor, kap 327px - yani sitenin ANA EYLEMİ ("İndir") ekranın 468px
   sağında, yatay kaydırma yapılmadan görünmüyordu. Satırlar burada karta
   dönüşüyor; hiçbir veri gizlenmiyor, yalnızca dikey yığılıyor.

   ⚠️ EŞİK KEYFİ DEĞİL, HESAPLANMIŞTIR: `.tablo` tabanı 620px, `.kabuk`
   yatay dolgusu 2 x var(--space-5) = 48px. Tablo ancak 620+48 = 668px'lik
   bir ekranda tam tamına sığar, yani rahat sığdığı ilk genişlik 669px.
   Eşik 640px'ken 641-668px arası bir boşluk kalıyordu: kart düzeni henüz
   devreye girmiyor, tablo ise kabına sığmıyor ve `.kaydir-x` içinde yana
   kayıyordu - yani "İşlem" sütunu (İndir / Kopyala / Sorun bildir) yine
   kesiliyordu, üstelik SAYFA taşmadığı için basit bir taşma kontrolü bunu
   göremiyordu. Aralık dar görünüyor ama gerçek: büyük telefonların yatay
   hâli, bölünmüş ekran ve küçük tabletler oraya düşüyor. Eşik tam 668'de
   (620+48 değil de bir fazlası) çünkü alt piksel yuvarlaması sınırı
   birebir eşitlikte belirsiz bırakıyor. Üç sayının (620, --space-5, bu
   eşik) birbirine bağlı olduğunu `tests/test_responsive.py` kilitler.
   ============================================================ */
@media (max-width: 668px) {
  /* 620px'lik taban kalkar: ders listesi gibi dar tablolar zaten sığıyor ve
     boşuna kaydırma çubuğu çıkarıyorlardı. */
  .tablo { min-width: 0; }

  /* ⚠️ Masaüstündeki sabit sütun genişlikleri BURADA SIFIRLANMALI. Kartta
     sütun diye bir şey yok: hücreler blok/inline-block oluyor ve `width: 16%`
     o hâlde kartın genişliğine uygulanıyor. Ölçüldü - sıfırlanmadığında
     "Dönem" 293px'lik kartın içinde 47px'e sıkışıyor, "İşlem" hücresi 67px
     kalıyor ve İndir/Paylaş/Sorun bildir üst üste biniyordu.

     ⚠️ ÖZGÜLLÜK ELDE TUTULMALI: `.tablo--kart td` (0,1,1), masaüstündeki
     `.tablo .donem` (0,2,0) kuralını YENMİYOR - önce böyle yazıldı ve
     sessizce hiçbir şey yapmadı. Sütun sınıfları tek tek yazılıyor, böylece
     özgüllük eşitleniyor ve dosyanın sonunda olmak kazanmaya yetiyor.
     ⚠️ Yeni bir sütun sınıfı eklersen buraya da ekle. */
  /* ⚠️ Kartta başlık KIRPILMAZ, sarar. Dokunmatik ekranda hover yok, yani
     kayan başlığı görmenin yolu da yok: kırpılmış bir ad orada kalıcı olarak
     yarım kalırdı. Özgüllük masaüstündeki `.ad-baslik` (0,1,0) kuralını
     yenmeli - `.tablo--kart .ad-baslik` (0,2,0) yeniyor. */
  .tablo--kart .ad-baslik {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    /* ⚠️ Sarmaya izin vermek YETMEZ: dosya adlarında boşluk yok
       ("Colander11e_Ch01_Final_Revised_Lecture_Notes.pdf") ve tarayıcı
       boşluksuz bir dizgeyi kendiliğinden bölmüyor. Ölçüldü - bu kural
       olmadan ad kartın 180px dışına taşıyordu. */
    overflow-wrap: anywhere;
  }
  .tablo--kart .ad-satiri { flex-wrap: wrap; }

  .tablo--kart .kod,
  .tablo--kart .ad,
  .tablo--kart .donem,
  .tablo--kart .hoca,
  .tablo--kart .sayi,
  .tablo--kart .islem-sutunu { width: auto; }

  /* Dar ekranda düğme metnin altına iner; yan yanayken ikisi de eziliyordu. */
  .katki-cagrisi {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    padding: var(--space-4);
  }
  .katki-cagrisi .buton { text-align: center; }

  .tablo--kart thead { display: none; }
  .tablo--kart,
  .tablo--kart tbody,
  .tablo--kart tr,
  .tablo--kart td { display: block; }

  .tablo--kart tr {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
  }
  /* Satırın tamamı zaten kart; hücre çizgileri ve hover dolgusu artık gürültü. */
  .tablo--kart td { border: 0; padding: 0; }
  /* Geniş ekranda içerik, başlık çubuğunun dolgusuyla hizalanıyor; telefonda
     satırlar zaten kart olduğu için o dolgu kartları çubuktan 32px dar
     bırakırdı. */
  .klasor-bolumu > .kaydir-x { padding: 0; }
  .tablo--kart tbody tr:hover td { background: transparent; }
  .tablo--kart .sonuc-yok { padding: var(--space-5); text-align: center; }

  .tablo--kart .kod { font-size: 12.5px; margin-bottom: 2px; }
  .tablo--kart .ad { font-size: 16px; line-height: 1.35; margin-bottom: 8px; }

  /* Üstveri tek satırda akar, aralarına ayırıcı girer. `inline-block` sayesinde
     ayrı `<td>`ler olmalarına rağmen yan yana diziliyorlar. */
  .tablo--kart .tur,
  .tablo--kart .donem,
  .tablo--kart .hoca,
  .tablo--kart .sayi {
    display: inline-block;
    font-size: 13px;
    text-align: left;
    vertical-align: middle;
  }
  .tablo--kart .donem + .hoca::before,
  .tablo--kart .tur + .donem::before {
    content: "·";
    color: var(--text-3);
    margin: 0 7px;
  }
  /* İndirme sayısı kendi satırında: üstveri satırının sonuna eklendiğinde
     sarma anında ayırıcı nokta satır başına düşüyordu. Başlık satırı gizli
     olduğu için çıplak sayı ne olduğunu da söylemiyor - sözcük ekleniyor. */
  .tablo--kart .sayi {
    display: block;
    margin-top: 5px;
    font-size: 12.5px;
    color: var(--text-3);
  }
  .tablo--kart .sayi::after { content: " indirme"; }

  /* Eylemler kartın altında, tam genişlikte ve parmakla basılabilir.
     ⚠️ Burada `<td>`ye flex VERİLİYOR - geniş ekranda bu yasak (hücre tablo
     düzeninden çıkıp satır yüksekliğine uzamıyor, alt çizgi kırılıyor).
     Kart modunda hücre zaten `display: block`, yani tablo hücresi değil. */
  .tablo--kart .islem-sutunu {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    text-align: left;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
  }
  .tablo--kart .islem-sutunu .kopyala,
  .tablo--kart .islem-sutunu .bildir { margin-left: 0; }
  /* "İndir" birincil eylem: kartta dolu düğme, kalan genişliği alır ve ilk
     sıraya oturur. Dokunmatikte hover yok, yumuşak dolgu orada soluk kalırdı. */
  .tablo--kart .indir {
    flex: 1 1 auto;
    justify-content: center;
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-size: 14px;
    padding: 9px 18px;
    min-height: 42px;
  }
  .tablo--kart .kopyala,
  .tablo--kart .bildir { font-size: 13px; min-height: 40px; }

  /* Dokunma hedefleri: satır içi bağlantılar 18-20px kalıyordu (WCAG 2.5.8
     en az 24px ister ve parmakla ıskalanıyorlardı).
     ⚠️ Yatay dolgu da gerekiyor: "SSS" gibi kısa bir bağlantı 20px GENİŞ
     kalıyordu, yükseklik tek başına yetmiyor. */
  .tablo .ad a,
  .tablo .kod a,
  .tablo .hoca a,
  .duyurular h3 a,
  .panel__tumu,
  .geri a { display: inline-block; padding: 4px 0; min-height: 24px; }
  .alt__linkler a { display: inline-block; padding: 3px 5px; min-height: 24px; }
  .alt__linkler { gap: var(--space-1); }

  /* ⚠️ iOS Safari, 16px'ten KÜÇÜK yazılı bir alana odaklanınca sayfayı
     kendiliğinden yakınlaştırıyor ve geri çıkmıyor - kullanıcı formu iki
     parmakla küçültmek zorunda kalıyor. Masaüstünde 13-14px daha derli toplu
     duruyor, o yüzden büyütme yalnızca burada. */
  .alan input,
  .alan select,
  .alan textarea,
  .ogeler input,
  .filtreler select { font-size: 16px; }
  .filtreler select,
  .filtreler button.rozet { height: 40px; min-height: 40px; }
  .alan > input:not([type="file"]),
  .alan > select,
  .ogeler input { height: 46px; }

  /* Filtreler tam genişlikte: üç seçici yarım yarım sığmaya çalışırken
     "Tüm öğretim üyeleri" kırpılıyordu. */
  .filtreler { gap: var(--space-3); }
  .filtreler select { flex: 1 1 100%; }

  /* Kopyalanan bağlantıyla gelen ziyaretçinin düştüğü satır: kart modunda
     vurgu `<td>`de değil kartın kendisinde olmalı, yoksa kart çerçevesinin
     içinde ikinci bir renkli kutu beliriyor. */
  .tablo--kart tbody tr:target td { background: transparent; box-shadow: none; }
  .tablo--kart tbody tr:target {
    background: var(--accent-soft-bg);
    border-color: var(--accent-soft-border);
  }

  /* --- Ders listesi: tablo yerine iki satırlık liste ---
     Tablo hâlinde kod sütunu genişliğin üçte birini tutuyor, ders adı dar bir
     sütunda üç satıra bölünüyor ve sağda boşluk kalıyordu (375px'te ölçüldü).
     Kod üstte, ad altında tam genişlikte, sayı sağda.
     ⚠️ `.tablo--kart` DEĞİL: satırlar kart kutusu olmuyor, 84 ders art arda
     kutu olunca liste gürültüye dönüyordu. Ayırıcı çizgi yeterli.
     ⚠️ Sütun genişlikleri burada da sıfırlanır (bkz. yukarıdaki kart notu). */
  .tablo--dersler thead { display: none; }
  .tablo--dersler,
  .tablo--dersler tbody { display: block; }
  .tablo--dersler tr {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-4);
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }
  .tablo--dersler td { display: block; padding: 0; border: 0; }
  .tablo--dersler .kod,
  .tablo--dersler .ad,
  .tablo--dersler .sayi { width: auto; }
  .tablo--dersler .kod { grid-column: 1; grid-row: 1; font-size: 12.5px; }
  .tablo--dersler .ad { grid-column: 1; grid-row: 2; font-size: 16px; line-height: 1.35; }
  .tablo--dersler .sayi { grid-column: 2; grid-row: 1 / span 2; font-size: 12.5px; }
  .tablo--dersler .sayi::after { content: " belge"; }
  .tablo--dersler .sonuc-yok { display: block; }
  /* Satırın tamamı dokunulabilir: yalnızca metin tıklanıyordu, satırın boş
     yerine basan parmak hiçbir şey olmadığını görüyordu. Ad bağlantısının
     görünmez katmanı satırı kaplar; kod bağlantısı da aynı adrese gidiyor. */
  .tablo--dersler .ad a::after { content: ""; position: absolute; inset: 0; }
  .tablo--dersler .ad a,
  .tablo--dersler .kod a { padding: 0; min-height: 0; }

  /* Kategori sekmeleri ikişerli eşit ızgara: satır içi sarmada ikinci satır
     birinciyle hizasız kalıyordu. */
  .sekmeler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .sekmeler a { text-align: center; padding: 10px 8px; }

  /* Menü logonun altına iniyor; maddeler satırı eşit paylaşır, yoksa sola
     yığılıp sağda boşluk bırakıyorlardı. */
  .ust__nav { width: 100%; flex-wrap: nowrap; }
  .ust__nav a { flex: 1 1 auto; text-align: center; padding: 9px 8px; }
  /* Telefonda Atatürk marka satırının SAĞINDA, menü alta tam genişlikte.
     Ortada kalsaydı logoyla arasına sıkışıyor ve iki öge birbirine
     yapışık görünüyordu. `max-content` sütunu burada yok: dar ekranda
     marka sütunu esneyebilmeli. */
  .ust__ic {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "marka atam" "menu menu";
    row-gap: var(--space-3);
  }
  .ust__atam { height: 44px; }

  /* Ders listesinde arama kutusu yukarıda yapışık kalır.
     90 ders var; telefonda aşağı inen biri aramak için en başa dönmek
     zorundaydı. Yalnızca burada yapışıyor - masaüstünde liste zaten tek
     ekrana daha çok sığıyor ve yapışkan çubuk yer kaybı olurdu. */
  .arama {
    position: sticky;
    top: 0;
    z-index: 20;
    /* Sayfa zemini şeffaf kutunun altından geçmesin. */
    background: var(--surface);
    box-shadow: 0 6px 12px -8px var(--bg);
  }
}