/* ═══════════════════════════════════════════════════════════════════════════
   BİLEŞENLER / COMPONENTS
   Bu dosyada RENK KODU YOKTUR ve ÖLÇÜ SABİTİ YOKTUR: her renk paletten
   (tokens-*.css), her boşluk/yarıçap/yazı boyu yerleşimden (layout-*.css)
   gelir — var() ile. Buraya yalnızca YAPI (hangi seçici hangi değişkeni
   kullanıyor) yazılır. Görsel kimliği değiştirmek için buraya değil,
   tokens-*.css / layout-*.css'e dokunulur.
   ═══════════════════════════════════════════════════════════════════════════ */

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

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--body-size);
  line-height: var(--line-height);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--s-std); }

/* ── Başlık şeridi ──────────────────────────────────────────────────────── */
/* Alt çizgi artık burada, TEK yerde: eskiden her tokens-N.css dosyası
   kendi .masthead seçicisini KENDİ İÇİNDE taşıyordu (palet dosyası seçici
   yazamaz kuralı henüz yoktu). Şimdi renk --nav-line değişkeninden geliyor:
   Orman'da --brand-dark (zeminle aynı ton, görünmez), Rota'da kehribar
   (paletin imzası). Kural tek, değişen yalnızca değer. */
.masthead { background: var(--nav-bg); color: var(--on-dark); border-bottom: 2px solid var(--nav-line);
            /* Desen için: mutlak konumlu katman buraya tutunuyor, taşan
               simgeler şeridin dışına sarkmasın diye kırpılıyor. */
            position: relative; overflow: hidden; }
.masthead .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-std); flex-wrap: wrap; padding-top: var(--s-compact); padding-bottom: var(--s-compact);
  /* Desenin ÜSTÜNDE kalsın: ikisi de aynı kapsayıcıda, sıra konumlandırmayla
     kuruluyor (z-index yok — konumlandırılmış öğe, konumlandırılmamışın
     üstünde boyanır ve marka/menü zaten sonra geliyor). */
  position: relative;
}

/* ── Üst bandın arka plan deseni ─────────────────────────────────────────────
   Simgelerin kendisi SVG olarak üretiliyor (masthead_pattern(), helpers.php);
   üç tasarım kararının gerekçesi orada. Burada yalnızca KATMANIN yeri ve
   RENK ailesi var — ölçü ve konum SVG koordinatı, CSS değil.

   Renk --cN-soft ailesinden: --cN kendisi AÇIK zemin için ayarlı koyu bir
   renktir ve koyu bandın üstünde görünmez. Soft tonlar aynı ailenin açık
   karşılığı — palet değişince desen de değişiyor.

   Kontrast eşiği bu simgelere UYGULANMAZ: aria-hidden'lı süs katmanıdır,
   okunacak bir metin değildir (WCAG dekoratif içeriği açıkça muaf tutar).
   Ama menü yazısının okunmasını ZORLAŞTIRMAMALI — aşağıdaki renk seçimi
   tam olarak bunun içindir.

   RENK: --cN, --cN-soft DEĞİL (Mustafa, 3. tur).
   Açık tonlar (soft) koyu bandın üstünde PARLIYOR ve beyaz menü yazısıyla
   yarışıyordu. --cN'in kendisi zeminle (--brand) aynı koyulukta: aralarındaki
   fark PARLAKLIK değil TON. Desen böylece görünür oluyor ama okunabilirliği
   düşürmüyor. (Sekiz paletin ölçülen değerleri docs/DURUM.md §31.2'de —
   buraya renk KODU yazılmaz, site.css'te renk sabiti yasak.)

   Opaklık .85: renkler artık koyu olduğu için katmanın kısılmasına gerek
   yok. Her öğenin AYRICA kendi opaklığı var (.55–.95, masthead_pattern()
   içinde) — üst üste binen katmanlar birbirinden böyle ayrılıyor.          */
.masthead-pattern {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;          /* tıklamayı yutmasın */
  user-select: none;
  font-family: var(--mono);
  opacity: .85;
}
.mh-i1 { color: var(--c1); }   .mh-i2 { color: var(--c2); }
.mh-i3 { color: var(--c3); }   .mh-i4 { color: var(--c4); }
.mh-i5 { color: var(--c5); }   .mh-i6 { color: var(--c6); }
.brand {
  /* DÜZELTME TURU 1 (İş 2): harf aralığı artık --brand-tracking'ten geliyor.
     Eskiden site.css'e sabit -.01em yazılmıştı — ne tokens1.css'in (-.02em)
     ne tokens3.css'in (.02em) değeriydi, ikisi arasında kaybolmuş bir orta
     yoldu. Şimdi tokens1.css'in (Forest Scholar) değeri esas: -.02em.

     1.05rem → 1.5rem (Mustafa, 5 Eylül): ad bandın en büyük yazısı olmalı.
     Eskiden menü bağlantılarından yalnızca biraz büyüktü ve desen
     geldikten sonra zeminde kayboluyordu. */
  font-size: 1.5rem; font-weight: 700; letter-spacing: var(--brand-tracking);
  color: var(--on-dark); text-decoration: none; white-space: nowrap;
  /* Ad ve altındaki tanım tek bir bağlantı, iki satır. */
  display: inline-flex; flex-direction: column; line-height: 1.1;
}
.brand:hover { color: var(--on-dark-strong); }
/* MARKA ALT BAŞLIĞI — sitenin ne İŞE yaradığını söyler.
   Ölçüsü `em`: adın boyutuna bağlı, ona göre büyüyüp küçülüyor. Değer
   (.42em) ve harf aralığı, satırın GENİŞLİĞİ adınkini geçmeyecek biçimde
   seçildi (Mustafa'nın açık isteği): ad ~13 karakter, alt satır ~34
   karakter; .42 × 34 ≈ 13 oranı ikisini hemen hemen aynı genişlikte
   tutuyor. Harf aralığı kalan farkı kapatıyor.
   Renk --on-dark-2: adın altında ikincil kalmalı, onunla yarışmamalı. */
.brand-sub {
  font-size: .42em; font-weight: 500; letter-spacing: .06em;
  color: var(--on-dark-2); text-transform: uppercase;
}
.nav { display: flex; align-items: center; gap: var(--s-std); flex-wrap: wrap; }
.nav a {
  color: var(--on-dark-2); text-decoration: none; font-size: .9rem; font-weight: 500;
  padding: 4px 0; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.nav a:hover { color: var(--on-dark-strong); }
/* DÜZELTME TURU 1 (İş 2): aktif bağlantının alt çizgisi artık --nav-line —
   tokens3.css'in eski `.nav a.on { border-bottom-color: var(--terracotta) }`
   kuralının ruhu (Rota'nın kehribar sinyali) böyle geri geliyor. Orman'da
   --nav-line = --brand-dark (zeminle aynı ton, kasıtlı sakin/görünmez) —
   aynı "sakin Orman" kimliği burada da tutarlı kalıyor. */
.nav a.on { color: var(--on-dark-strong); border-bottom-color: var(--nav-line); }
.nav .who { color: var(--on-dark-2); font-size: .82rem; opacity: .8; }
.lang {
  border: 1px solid var(--on-dark-line); border-radius: var(--r-sm);
  padding: 3px 10px; font-size: .78rem !important;
}
.lang:hover { border-color: var(--on-dark-2); }

/* ── Sayfa gövdesi ──────────────────────────────────────────────────────── */
main { padding: var(--s-relaxed) 0 var(--s-section); }

h1 {
  font-size: var(--h1-size); font-weight: var(--h1-weight); letter-spacing: var(--h1-tracking);
  /* Siyah DEĞİL: sayfanın en büyük yazısı paletin rengini taşır.
     Önceden var(--ink) idi ve palet ne olursa olsun siyah kalıyordu. */
  margin: 0 0 var(--s-tight); color: var(--h1-color); text-wrap: balance;
}
h2 {
  font-size: var(--h2-size); font-weight: 600; margin: var(--s-section) 0 var(--s-compact);
  padding-bottom: var(--s-tight); letter-spacing: var(--h2-tracking);
  color: var(--h2-color);
  border-bottom: 2px solid var(--brand-light);
}
h2:first-of-type { margin-top: var(--s-relaxed); }
h3 { font-size: var(--h3-size); font-weight: 600; margin: var(--s-std) 0 var(--s-tight);
     color: var(--h3-color); }
p  { margin: 0 0 var(--s-compact); }
.lede { color: var(--ink-2); font-size: 1rem; margin: 0 0 var(--s-relaxed); max-width: var(--reading); }
.prose { max-width: var(--reading); color: var(--ink-2); }
.hint { font-size: .82rem; color: var(--ink-3); margin: 6px 0 0; }
/* Bölümün DİBİNDEKİ not (ör. dağılım kutusundaki veri atfı): üstündeki
   içerikten ince bir çizgiyle ayrılır, yoksa son satırın devamı sanılır. */
.hint-note { margin-top: var(--s-std); padding-top: var(--s-compact);
             border-top: 1px solid var(--line); }
a { color: var(--link-color); text-decoration-color: var(--line-strong); text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }
.mono, code { font-family: var(--mono); font-size: .86em; }
.num { font-variant-numeric: tabular-nums; }

/* ── Kart ───────────────────────────────────────────────────────────────── */
.card {
  background: var(--card-bg); border: var(--card-border) solid var(--line); border-radius: var(--r-lg);
  /* DÜZELTME TURU 1 (İş 2): sol şerit geri geldi — eskiden tokens1.css/
     tokens3.css'e gömülüydü (`.card { border-left: 3px solid var(--green-light) }`
     / tokens3'te `5px solid var(--slate)`), palet dosyaları seçici
     yazamayınca (spec §4) kural karşılıksız kayboldu, iki palet BENZEŞTİ
     (docs/DURUM.md §9). Renk paletten (--card-accent), kalınlık
     yerleşimden (--card-accent-width) geliyor. */
  border-left: var(--card-accent-width) solid var(--card-accent);
  padding: var(--card-pad); box-shadow: var(--card-shadow);
}
.card + .card { margin-top: var(--s-compact); }

/* ── Izgara ─────────────────────────────────────────────────────────────── */
.grid { display: grid; gap: var(--s-compact); }
.grid-areas { grid-template-columns: repeat(auto-fit, minmax(var(--grid-min-area), 1fr)); }
.grid-2     { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ── Ana sayfa girişi: üç kimlik → üç ürün ───────────────────────────────────
   Sayfa eskiden kurum satırı + tek cümlelik bir öz geçmişle başlıyordu.
   Yerine gelen yapı Mustafa'nın kendi tanımı (docs/DURUM.md §27.6): üç
   kimlik ve her birinin ürettiği somut şey.

   TASARIM KARARI — OK, SÜS DEĞİL FİİL. Her kartta üstte kimlik, altında bir
   ok, altında ürün var. Okuma sırası cümlenin kendisi: "araştırmacı →
   araştırmalar". Bu yüzden ok kartın ORTASINDA ve kimlikle ürün arasında;
   köşeye konsaydı bir işaret olurdu, burada bağlaçtır.

   Bütün ölçüler değişkenden geliyor (site.css'te ölçü sabiti olmaz —
   CLAUDE.md; ayrıca tools/test-tema.php 11. bölüm sayıyor).                */
.hero { margin-bottom: var(--s-section); }
.hero-eyebrow {
  /* Tek tipli yazı, üst bandın desenindeki simgelerle aynı aileden: giriş
     ile bant arasında sessiz bir bağ. Harf aralığı için sabit YAZILMADI —
     mono yazı tipi zaten geniş boşluklu. */
  font-family: var(--mono); font-size: var(--small-size);
  text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 var(--s-tight);
}
.hero-claim {
  font-family: var(--font-display);
  font-size: var(--h1-size); font-weight: var(--h1-weight);
  letter-spacing: var(--h1-tracking); line-height: 1.15;
  color: var(--h1-color); text-wrap: balance;
  max-width: var(--reading); margin: 0 0 var(--s-relaxed);
}
.triad {
  display: grid; gap: var(--s-compact);
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-min-area), 1fr));
}
.triad-item {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--s-tight);
  background: var(--card-bg); border: 1px solid var(--line);
  /* Sol şerit, kartın kimlik rengini taşıyor — .area'nın üst şeridiyle aynı
     fikir, farklı kenar: orada kartlar bir ızgara, burada bir dizi cümle. */
  border-left: 4px solid currentColor; border-radius: var(--r-lg);
  padding: var(--s-std); text-decoration: none;
  transition: border-color .15s, background .15s;
}
.triad-item:hover { background: var(--row-bg-hover); }
.triad-item .role {
  font-family: var(--mono); font-size: var(--small-size);
  text-transform: uppercase; color: currentColor;
}
.triad-item .arrow { font-size: var(--h3-size); color: currentColor; line-height: 1; }
.triad-item b     { font-size: var(--h3-size); font-weight: 600; color: var(--ink); }
.triad-item .blurb{ font-size: var(--small-size); color: var(--ink-2); }
/* Sayı kartın DİBİNE yapışsın: üç kart farklı uzunlukta açıklama taşıyor,
   sayılar aynı hizada durmazsa üçlü dağınık görünür (aynı gerekçe
   .course-card .term ve .area .count için de geçerli). */
.triad-item .count{ margin-top: auto; font-size: var(--small-size); color: var(--ink-3); }

/* İletişim kartındaki kurum satırı — sayfanın en üstünden buraya taşındı. */
.affil { color: var(--ink-2); margin: 0 0 var(--s-compact); }

/* ── Araştırma alanı kartı — çizim konuyu anlatır ───────────────────────── */
.area {
  background: var(--area-bg); border: 1px solid var(--line); border-radius: var(--r-lg);
  /* Renk yalnızca 40px'lik ikonda kalmasın: üstte kalın bir şerit olarak
     kartın kendisine geçsin. Alan kartları böylece birbirinden ayrılıyor. */
  border-top: 4px solid currentColor;
  padding: var(--s-std); display: flex; flex-direction: column; gap: var(--s-tight);
  transition: border-color .15s, background .15s;
}
/* Kart artık <a> DA olabiliyor (anahtar kelime bağlantısı): bağlantının
   varsayılan altı çizili mavi görünümü kartı bozardı. Yazı rengi zaten
   kategori renginden (currentColor) geliyor. */
.area { text-decoration: none; }
.area:hover { border-color: var(--brand); }
/* Atanmış çalışma sayısı — kartın sağ alt köşesinde, sessiz. */
.area .count { margin-top: auto; align-self: flex-end; font-size: var(--small-size);
               color: var(--ink-3); }
.area svg { width: 64px; height: 40px; display: block; }
/* Başlık da alanın rengini alsın — currentColor .area'dan geliyor. */
.area b { font-size: .95rem; font-weight: 600; color: currentColor; }
.area span { font-size: .84rem; color: var(--ink-3); }
/* Araştırma alanı kartları: altı kategori rengi. Eskiden slate/olive/bronze/
   green/green-light/terracotta gibi TEK TEK adlandırılmış renkler kullanıyordu
   (marka rengiyle karışık); artık kategori ailesinin (--c1..--c6) kendisi —
   anlamsal (ok/err/warn/info) renklerden tamamen ayrı bir aile. */
/* Kategori rengini currentColor olarak taşıyan ORTAK sınıf. Eskiden
   yalnızca .area.iN vardı; artık ölçü kartları (.stat-card) ve ders
   kartları (.course-card) da aynı sırayı kullanıyor, o yüzden seçici
   bileşene bağlı DEĞİL. Kural üçe kopyalansaydı biri değişip ötekiler
   kalırdı — bu projede o hata bir kez yapıldı (bkz. KART-KURALLARI). */
.i1 { color: var(--c1); }   .i2 { color: var(--c2); }
.i3 { color: var(--c3); }   .i4 { color: var(--c4); }
.i5 { color: var(--c5); }   .i6 { color: var(--c6); }

/* ── Ölçü kutuları (yayın sayısı, atıf, h-indeksi) ──────────────────────── */
/* IZGARA DEĞİL ESNEK KUTU (Mustafa, telefonda gördü).
   ────────────────────────────────────────────────────────────────────────
   Eskiden `grid-template-columns: repeat(auto-fit, minmax(130px, 1fr))` idi.
   Kutu sayısı sütun sayısına TAM BÖLÜNMEDİĞİNDE son satırda boş hücre
   kalıyordu — ve bu şeritte boş hücre görünür: kutuların arasındaki ince
   çizgiler, kapsayıcının --line zemininin 1px'lik boşluklardan sızmasıyla
   çiziliyor, yani boş hücrede o zemin olduğu gibi görünüyor. Telefonda üç
   ölçü 2 + 1 diziliyor ve ikinci satırın sağında "eksik bir kutu" duruyordu.

   Esnek kutuda son satırdaki öğe(ler) kalan genişliği PAYLAŞIR: tek kalan
   kutu satırı boydan boya doldurur, boşluk hiç oluşmaz. Kırılma noktası
   yazmaya da gerek yok — sayı kaç olursa olsun (araştırmada 3, ana sayfada
   7'ye kadar) aynı kural çalışıyor.

   `flex: 1 1 130px` — 130px İSTENEN genişlik, alt sınır değil: sığdığı kadar
   kutu yan yana gelir, sonra kalan yer paylaştırılır. */
.metrics { display: flex; flex-wrap: wrap; gap: 1px;
           background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg);
           overflow: hidden; margin-bottom: var(--s-relaxed); }
/* ORTALI (Mustafa, 5 Eylül): üç kutu, dağılım kartları, yayın kartları ve
   ders kartı başlıkları birlikte ortalandı. Sola dayalıyken kutunun sol
   kenarına yaslanan kısa bir sayı ile uzun bir etiket aynı hizada
   başlıyor, kutunun sağ yarısı boş kalıyordu. */
.metric  { flex: 1 1 130px; background: var(--metric-bg); padding: var(--s-std); text-align: center; }
/* Parantezin ne demek olduğunu söyleyen sütun başlığı — YALNIZCA ilk
   kutuda basılıyor (bkz. public/research.php). Etiketten (.k) daha
   soluk: o bir ad, bu bir okuma yönergesi. */
.metric .kk { font-size: var(--small-size); color: var(--ink-3); }
/* Büyük sayı bildirimi ölçü kutusu ile dağılım kartı ARASINDA paylaşılıyor:
   iki bileşende iki ayrı boyut yazılsaydı sayfada iki farklı "büyük
   sayı" olurdu. Aynı gerekçe telefon medya sorgusunda da geçerli. */
.metric .v,
.stat-card .v { font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em;
             font-variant-numeric: tabular-nums; line-height: 1.1; }
/* Parantezli son-5-yıl sayısı: aynı satırda ama ikincil. */
.metric .v .sub,
.stat-card .v .sub { font-size: var(--small-size); font-weight: 600; color: var(--ink-3);
                     letter-spacing: 0; }
/* Her ölçü ayrı renk: kategori ailesinden (c1..c6, sonra başa döner).
   Hepsi aynı renkken sayı grubu tek bir blok gibi görünüyordu.
   ALTIDAN FAZLA KUTU olabiliyor (ana sayfada yedi): kategori ailesi altı
   renk taşıdığı için yedincisi başa dönüyor — yeni renk uydurmak yerine
   sıra tekrarlanıyor. */
.metric:nth-child(1) .v { color: var(--c1); }
.metric:nth-child(2) .v { color: var(--c2); }
.metric:nth-child(3) .v { color: var(--c3); }
.metric:nth-child(4) .v { color: var(--c4); }
.metric:nth-child(5) .v { color: var(--c5); }
.metric:nth-child(6) .v { color: var(--c6); }
.metric:nth-child(7) .v { color: var(--c1); }
.metric .k { font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
             color: var(--ink-3); margin-top: 4px; }

/* TIKLANABİLİR ÖLÇÜ KUTUSU (ana sayfa: dersler, projeler, çözümler).
   Sayı kutusunun kendisi bir bağlantı olduğunda varsayılan altı çizili mavi
   görünüm kutuyu bozardı; renk zaten .v'den geliyor, etiket .k'den. */
a.metric { display: block; text-decoration: none; color: inherit;
           transition: background .15s; }
a.metric:hover { background: var(--row-bg-hover); }
/* Sayısı olmayan kutu (Çözümler) yerine ok basılıyor: bir sayı dizisinin
   içinde boş bir kutu bozuk görünürdü, ok ise "buraya git" der. */
.metric .go { color: var(--ink-3); }

/* ── Yıllara göre çubuk grafik (CSS, resim yok) ─────────────────────────── */
.years { display: flex; align-items: flex-end; gap: 3px; height: 76px;
         padding: var(--s-std); background: var(--surface);
         border: 1px solid var(--line); border-radius: var(--r-lg); overflow-x: auto; }
.years .y { flex: 1 0 14px; display: flex; flex-direction: column; justify-content: flex-end;
            align-items: center; gap: 4px; height: 100%; }
/* Çubuklar dönüşümlü renkli, kategori ailesinden: tek renk bir duvar gibi
   duruyordu. */
.years .bar { width: 100%; background: var(--c1); border-radius: 2px 2px 0 0; min-height: 2px; }
.years .y:nth-child(4n+2) .bar { background: var(--c2); }
.years .y:nth-child(4n+3) .bar { background: var(--c3); }
.years .y:nth-child(4n+4) .bar { background: var(--c4); }
.years .y:hover .bar { background: var(--brand); }
.years .lbl { font-size: .6rem; color: var(--ink-4); font-variant-numeric: tabular-nums; }

/* ── Dağılım kartları (araştırma sayfası) ────────────────────────────────────
   Eskiden üç sütunlu bir TABLO idi; masaüstünde sayfayı boydan boya kaplıyordu
   (Mustafa'nın bildirdiği kusur). Kartlar aynı bilgiyi ızgaraya yayıyor.
   Renk .iN'den currentColor olarak geliyor — .area ile aynı düzen.            */
.stat-cards {
  display: grid; gap: var(--s-tight);
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-min-area), 1fr));
  margin-bottom: var(--s-relaxed);
}
.stat-card {
  background: var(--card-bg); border: 1px solid var(--line);
  /* Renk yalnızca yazıda kalmasın: üst şerit kartın kendisine geçsin —
     araştırma alanı kartlarındaki (.area) ile birebir aynı fikir. */
  border-top: 4px solid currentColor;
  border-radius: var(--r-lg); padding: var(--s-compact) var(--s-std);
}
/* Başlık ve büyük sayı ORTALI; alttaki kırılım satırları (.r) ortalanmaz —
   onlar "solda ad, sağda sayı" düzeniyle okunuyor, ortalanırsa sayılar
   alt alta hizalanmaz ve karşılaştırılamaz hâle gelir. */
.stat-card b { display: block; font-size: var(--h3-size); font-weight: 600; color: currentColor;
               text-align: center; }
.stat-card .v { color: currentColor; text-align: center; }
/* Alt satırlar: solda ad, sağda sayı. Noktalı çizgi ikisini bağlar. */
.stat-card .r {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-tight); font-size: var(--small-size); color: var(--ink-3);
  border-top: 1px dotted var(--line); padding-top: var(--s-tight); margin-top: var(--s-tight);
}
.stat-card .r > span:last-child { color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ── Ders kartları (öğretim sayfası) ─────────────────────────────────────────
   Öğretim sayfası da tabloydu. Kart ızgarası hem masaüstünde hem telefonda
   AYNI görünümü veriyor, yalnızca sütun sayısı değişiyor.                    */
.course-cards {
  display: grid; gap: var(--s-tight);
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-min-area), 1fr));
  margin-bottom: var(--s-relaxed);
}
.course-card {
  display: flex; flex-direction: column; gap: var(--s-tight);
  background: var(--card-bg); border: 1px solid var(--line);
  border-top: 4px solid currentColor; border-radius: var(--r-lg);
  padding: var(--s-compact) var(--s-std);
  text-decoration: none; transition: border-color .15s, background .15s;
}
.course-card:hover { border-color: var(--brand); background: var(--row-bg-hover); }
.course-card b    { font-size: var(--h3-size); font-weight: 600; color: currentColor;
                    text-align: center; }
.course-card .sum { font-size: var(--small-size); color: var(--ink-2); }
/* Dönem satırı kartın DİBİNE yapışsın: kartlar farklı uzunlukta özet
   taşıyor, dönem satırı aynı hizada durmazsa ızgara dağınık görünüyor. */
.course-card .term { margin-top: auto; font-size: var(--small-size); color: var(--ink-3); }

/* ── Yayın listesi ──────────────────────────────────────────────────────── */
.pub {
  background: var(--pub-bg); border: 1px solid var(--line);
  /* 3px çok inceydi, tür farkı görünmüyordu. */
  border-left: 5px solid var(--line);
  border-radius: var(--r-md); padding: var(--s-compact) var(--s-std); margin-bottom: var(--s-tight);
  transition: border-color .15s, background .15s;
}
.pub:hover { border-color: var(--line-strong); border-left-color: var(--brand); }
/* KÜNYE İKİ SATIR (Mustafa, 3. tur): yıl ve tür birinci satırda, dizin
   rozeti ile kapsam etiketi ikinci satırda. Öncesinde dördü tek bir
   flex-wrap satırındaydı: dar kartta "uluslararası" alta düşüyor,
   genişte düşmüyordu — aynı liste içinde kartlar farklı yükseklikte ve
   künyenin yarısı üstte yarısı altta kalıyordu. Ayrı satır, kırılmayı
   genişliğe bırakmak yerine SABİTLİYOR. */
/* ORTALI (Mustafa, 5 Eylül). Künye satırları da flex olduğu için
   ortalanmaları text-align ile değil justify-content ile oluyor. */
.pub { text-align: center; }
.pub .meta,
.pub .meta2 { display: flex; gap: var(--s-tight); align-items: center; flex-wrap: wrap;
              justify-content: center;
              font-size: .78rem; color: var(--ink-3); margin-bottom: 4px; }
/* İkinci satır boşsa (rozetsiz, kapsamsız yayın) hiç yer kaplamasın. */
.pub .meta2:empty { display: none; }
.pub .title { font-size: 1rem; font-weight: 600; line-height: 1.4; margin: 0 0 4px; color: var(--ink); }
/* Türe göre kenarlık VE zemin birlikte, kategori ailesinden — ARTIK
   anlamsal (hata/uyarı) renk değil, kendi kategori rengi. Bir bildiri
   "hata kırmızısı" olmaz.
   SON DÜZELTME DALGASI (D1, final incelemenin bulgusu): k-book (kitap)
   eskiden k-chapter (kitap bölümü) ile AYNI kategoriyi (--c3) kullanıyordu
   — ikisi ayırt edilemiyordu ve --c5 hiç kullanılmıyordu. Spec §6.5 beş
   yayın türünü c1..c5'e AYRI AYRI eşliyor; kitap artık kendi kategorisinde. */
.pub.k-article    { background: var(--c1-soft); border-left-color: var(--c1); }
.pub.k-conference { background: var(--c4-soft); border-left-color: var(--c4); }
.pub.k-chapter    { background: var(--c3-soft); border-left-color: var(--c3); }
.pub.k-book       { background: var(--c5-soft); border-left-color: var(--c5); }
.pub.k-project    { background: var(--c2-soft); border-left-color: var(--c2); }
/* TEZ (Mustafa, 3. tur): --c6 buraya kadar hiçbir yayın türüne bağlı
   değildi — "henüz atanmamış" diye duruyordu. Danışmanlık yaptığı tezler
   publications.kind='thesis' olarak zaten giriliyordu ama kartı renksiz
   kalıyordu (hiçbir .pub.k-* kuralına uymuyordu). Artık kendi kategorisi
   var; kontrast çifti --c6-ink/--c6-soft zaten ölçülüyordu. */
.pub.k-thesis     { background: var(--c6-soft); border-left-color: var(--c6); }
/* SON DÜZELTME DALGASI (D2, Ruling U) — --c1-ink..--c6-ink ailesi buraya
   kadar HİÇBİR YERDE kullanılmıyordu (ölü değişkenler), oysa spec §2.2
   üçlüyü şart koşuyor: çıplak ton + soluk zemin + O ZEMİNDE OKUNAN yazı.
   Yayın başlığı artık kendi kategori mürekkebini taşıyor — renk sitede
   daha çok yere yayılsın isteniyordu (spec §1). AA zaten ölçülü
   (tools/test-tema.php $ciftler: --cN-ink/--cN-soft çiftleri, 6.7–13:1). */
.pub.k-article    .title { color: var(--c1-ink); }
.pub.k-project    .title { color: var(--c2-ink); }
.pub.k-chapter    .title { color: var(--c3-ink); }
.pub.k-conference .title { color: var(--c4-ink); }
.pub.k-book       .title { color: var(--c5-ink); }
.pub.k-thesis     .title { color: var(--c6-ink); }
.pub .who   { font-size: .86rem; color: var(--ink-2); margin: 0 0 2px; }
.pub .who b { color: var(--brand); font-weight: 600; }
.pub .where { font-size: .84rem; color: var(--ink-3); font-style: italic; margin: 0; }
.pub .links { margin-top: 6px; font-size: .8rem; }

/* ── YERLEŞİM KANCALARI ─────────────────────────────────────────────────────
   Bu iki sarmalayıcı görünüşü DEĞİŞTİRMEZ; sadece CSS'e tutunacak bir yer
   verir. Öncesinde yayın kartları ve duyuru kutuları doğrudan kardeşti,
   yani onları ızgaraya çevirecek bir kapsayıcı yoktu — bir tema HTML'e
   dokunmadan yerleşimi değiştiremiyordu.

   Varsayılan 'block': öğeler alt alta, tıpkı eskisi gibi.
   Kart yerleşimi aşağıda, .as-cards altında.                                */
.pub-list { display: block; }
.notices  { display: block; }

/* Tablo başlığı renkli bant: gri metin satırından ayrılsın. */
table thead th {
  background: var(--brand); color: var(--on-dark);
  border-bottom: none; letter-spacing: .02em;
}

/* ── Etiketler ──────────────────────────────────────────────────────────── */
.tag { display: inline-block; padding: 2px 9px; border-radius: var(--r-sm);
       font-size: .72rem; font-weight: 600; border: 1px solid transparent; white-space: nowrap; }
.tag-ok   { background: var(--ok-soft);   color: var(--ok-ink);   border-color: var(--ok); }
.tag-warn { background: var(--warn-soft); color: var(--warn-ink); border-color: var(--warn); }
.tag-err  { background: var(--err-soft);  color: var(--err-ink);  border-color: var(--err); }
.tag-info { background: var(--info-soft); color: var(--info-ink); border-color: var(--info); }
.tag-index { background: var(--brand); color: var(--on-dark); border-color: var(--brand); }
/* KAPSAM etiketleri — KATEGORİ ailesinden, anlamsal aileden
   (ok/err/warn/info) DEĞİL: "uluslararası" bir durum bildirimi değil, bir
   sınıflandırma (CLAUDE.md: "Anlamsal renk kategori değildir").

   3. TUR (Mustafa): "ulusal etiketi, uluslararası etiketinin daha açık/koyu
   bir tonu olsun." Eskiden ikisi FARKLI kategorilerdendi (--c2 ve --c6),
   yani aralarında hiçbir akrabalık yoktu — iki ayrı sınıflandırma gibi
   görünüyorlardı, oysa aynı ölçünün iki değeriler.
   Şimdi ikisi de TEK aileden (--c5) ve fark TON DEĞİL DOLGU: uluslararası
   DOLU (soluk zemin), ulusal BOŞ (kart zemininin kendisi, yalnızca
   kenarlık ve yazı renkli). Bu, "daha açık ton"un CSS'te renk hesabı
   yapmadan elde edilen hâli — ki palet dışında renk üretmek yasak.

   --c5 SEÇİLDİ çünkü aktarımdan sonra Firuze'de kehribar orada duruyor;
   Mustafa'nın beğendiği uluslararası zemini o. Kontrast çiftleri
   (--c5-ink/--c5-soft ve --c5-ink/--surface) tools/test-tema.php'de. */
.tag-intl { background: var(--c5-soft); color: var(--c5-ink); border-color: var(--c5); }
.tag-natl { background: var(--surface);  color: var(--c5-ink); border-color: var(--c5); }

/* "Devam ediyor" — süren proje/tez.
   ANLAMSAL AİLEDEN (--info), --cN'den DEĞİL: bu bir DURUM bildiriyor
   ("çalışma hâlâ sürüyor"), bir kategori değil. Kapsam etiketleri (--c5)
   "bu nedir" der, bu etiket "bu ne hâlde" der — iki ayrı soru, iki ayrı
   renk ailesi (CLAUDE.md).
   Yazı --info-ink: --info'nun kendisi DOLGU ve KENARLIK rengidir; yazı
   olarak kullanılırsa okunmaz (ölçüldü, tools/test-tema.php). */
.tag-ongoing { background: var(--info-soft); color: var(--info-ink); border-color: var(--info); }
/* Dergi panelinde henüz işaretlenmemiş satır: soluk, "burada iş var" der. */
.j-todo    { color: var(--ink-3); }
.j-todo td { opacity: .72; }

/* ── Süzgeç şeridi ──────────────────────────────────────────────────────── */
/* İKİ GRUP, TEK SATIR: solda tür süzgeci, sağa yaslı kapsam süzgeci.
   Sağa yaslama `margin-left:auto` ile yapılıyor, `space-between` ile DEĞİL:
   dar ekranda gruplar alt alta düştüğünde space-between ikinci grubu yine
   sola yapıştırırdı; auto marj sarma sonrası da doğru davranır (sarılan
   satırda marj çöker ve grup sola geçer — istenen davranış budur). */
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-tight);
              margin-bottom: var(--s-compact); }
.filter-row .filters { margin-bottom: 0; }
.filters-end { margin-left: auto; }
.filters { display: flex; gap: var(--s-tight); flex-wrap: wrap; align-items: center;
           margin-bottom: var(--s-compact); }
.filters .f {
  display: inline-block; padding: 6px 14px; border-radius: var(--r-sm); font-size: .84rem;
  font-weight: 500; background: var(--filter-bg); color: var(--ink-2);
  border: 1px solid var(--line); text-decoration: none; transition: all .15s; white-space: nowrap;
}
.filters .f:hover { border-color: var(--line-strong); color: var(--ink); }
.filters .f.on { background: var(--brand); color: var(--on-dark); border-color: var(--brand); }
/* `.filters .sep` KALDIRILDI (5 Eylül 2026). Tek kullanıcısı araştırma
   sayfasındaki "kapsam | yıl" ayıracıydı; kapsam süzgeci kendi satırına
   taşınınca (§29.1) ayıraca gerek kalmadı. Ölü CSS bırakmak zararsız
   görünür ama bu dosyada ölçü sabitleri sayılıyor (bkz. 11. bölüm, üst
   sınır 81) — kullanılmayan bir kural o bütçeden yer yiyordu. Kaldırılan
   iki sabit, marka alt başlığına (.brand-sub) verildi. */

/* ── Katlanır bölüm (details/summary) ───────────────────────────────────────
   İkincil bilgiyi (dağılım tablosu, yıl grafiği) kapalı tutar; ziyaretçi
   asıl içeriğe — yayın listesine — kaydırmadan ulaşır. JavaScript YOK:
   <details> tarayıcının kendi öğesi, klavye ve ekran okuyucuyla çalışır. */
.foldout { border: 1px solid var(--line); border-radius: var(--r-md);
           background: var(--card-bg); margin-bottom: var(--s-std); }
.foldout > summary {
  cursor: pointer; padding: var(--s-compact) var(--s-std);
  font-weight: 600; color: var(--h2-color);
}
.foldout > summary:hover { color: var(--link-hover); }
.foldout[open] > summary { border-bottom: 1px solid var(--line); }
.foldout .foldout-body { padding: var(--s-compact) var(--s-std) var(--s-std); }
/* Katlanır bölümün içindeki ilk başlık üstten boşluk almasın. */
.foldout .foldout-body > h3:first-child { margin-top: 0; }

/* ── Formlar ────────────────────────────────────────────────────────────── */
label { display: block; font-size: .86rem; font-weight: 600; margin: var(--s-compact) 0 5px; }
label:first-of-type { margin-top: 0; }
input[type=text], input[type=email], input[type=password], input[type=file], select, textarea {
  width: 100%; padding: 10px 13px; border: 1px solid var(--line); border-radius: var(--r-md);
  font: inherit; font-size: .93rem; background: var(--input-bg); color: var(--ink);
  transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); }
textarea { min-height: 150px; font-family: var(--mono); font-size: .82rem; }

button, .btn {
  margin-top: var(--s-std); background: var(--brand); color: var(--on-dark);
  border: 1px solid var(--brand); border-radius: var(--r-md);
  padding: 10px 22px; font: inherit; font-size: .88rem; font-weight: 600;
  cursor: pointer; transition: background .15s, border-color .15s;
}
button:hover, .btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
button.ghost { background: transparent; color: var(--brand); }
button.ghost:hover { background: var(--ok-soft); }
button.plain { background: none; border: none; color: var(--brand); padding: 8px 0; margin: 0; }
button.plain:hover { background: none; color: var(--brand-dark); text-decoration: underline; }
button.quiet { background: none; border: none; color: var(--ink-3); padding: 8px 0; margin: 0; }
button.quiet:hover { background: none; color: var(--c4); }

/* ── Mesajlar ───────────────────────────────────────────────────────────── */
.msg { padding: var(--s-compact) var(--s-std); border-radius: var(--r-md);
       margin-bottom: var(--s-compact); font-size: .9rem; border: 1px solid transparent; }
.msg.ok   { background: var(--ok-soft);   border-color: var(--ok);   color: var(--ok-ink); }
.msg.bad  { background: var(--err-soft);  border-color: var(--err);  color: var(--err-ink); }
.msg.warn { background: var(--warn-soft); border-color: var(--warn); color: var(--warn-ink); }

/* ── Tablo ──────────────────────────────────────────────────────────────── */
.table-wrap { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
              background: var(--table-bg); }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
thead th {
  text-align: left; padding: 11px var(--s-std); background: var(--page);
  border-bottom: 1px solid var(--line); font-size: .74rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}
td { padding: 12px var(--s-std); border-bottom: 1px solid var(--line); color: var(--ink-2); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--row-bg-hover); }

/* ── Alt bilgi ──────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--line); margin-top: var(--s-section);
        padding: var(--s-std) 0; color: var(--ink-3); font-size: .84rem;
        background: var(--foot-bg); }
.foot a { color: var(--ink-2); }
/* Veri atfı (OpenAlex · Crossref · ORCID) — bölüm ve e-posta satırının altında,
   kendi satırında. ÖLÇÜ SABİTİ YOK: boşluk yerleşimden (--s-tight) geliyor;
   site.css'teki sabit sayısını bir üst sınır testi ölçüyor (Ruling R). */
.foot-data { margin-top: var(--s-tight); }

/* ── Erişilebilirlik ────────────────────────────────────────────────────── */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px;
}
.skip { position: absolute; left: -9999px; }
/* Ekranda görünmez, ekran okuyucuda ve arama motorunda VAR.
   Menüyü tekrarlayan sayfa başlıkları (anasayfa, Öğretim, Yayınlar) bununla
   gizleniyor. NEDEN SİLMİYORUZ: her sayfada tam bir <h1> olmalı — ekran
   okuyucu sayfayı ondan tanır, arama motoru başlık olarak onu kullanır.
   display:none ya da visibility:hidden OLMAZ, ikisi de öğeyi erişilebilirlik
   ağacından tamamen çıkarır. Ölçü sabiti içermez (bkz. Ruling R sayacı):
   width/height sayaçtaki özellik listesinde yok. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip:focus { left: var(--s-std); top: var(--s-tight); z-index: 10; background: var(--surface);
              padding: var(--s-tight) var(--s-compact); border-radius: var(--r-md); }

/* ═══════════════════════════════════════════════════════════════════════════
   KART YERLEŞİMİ — .as-cards
   ───────────────────────────────────────────────────────────────────────────
   <body class="as-cards"> geldiğinde (yerlesim_listesi()'nde 'kart' bayrağı
   açık olan bir yerleşim seçildiğinde — bkz. app/router.php) tablolar HER
   genişlikte karta dönüşür, yayınlar ızgaraya girer. Sınıfı body_class() koyar.

   NEDEN BİR SINIF, NEDEN AYRI BİR AYAR: CSS bir öğeye sınıf EKLEYEMEZ.
   Palet dosyaları site.css'ten sonra yüklendiği için renk değiştirebilirler,
   ama "tabloyu karta çevir" gibi on kurallık bir yerleşim değişikliğini her
   palete kopyalamak gerekirdi — ve kopyalar zamanla ayrışırdı. Onun yerine
   kurallar burada TEK yerde duruyor, açma düğmesi HTML tarafında.

   Bir palet ileride bu yerleşimi kendiliğinden istesin denirse: aşağıdaki
   seçici listelerine `body.tema-rota` eklemek yeter — kural kopyalanmaz.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Yayınlar: dikey liste yerine kare kart ızgarası. */
.as-cards .pub-list {
  display: grid; gap: var(--s-tight);
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-min-pub), 1fr));
}
/* Izgarada aralığı gap verir; kartın kendi alt boşluğu iki kez sayılırdı. */
.as-cards .pub-list .pub { margin-bottom: 0; }

/* Duyurular da yan yana. */
.as-cards .notices {
  display: grid; gap: var(--s-tight);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.as-cards .notices .msg { margin-bottom: 0; }

/* ── KART-KURALLARI-BAS: tema ───────────────────────────────────────────────
   Aşağıdaki kurallar, telefon medya sorgusundaki KART-KURALLARI bloğuyla
   BİREBİR aynı olmak zorundadır; tek fark başlarındaki .as-cards ekidir.
   İkisinin ayrışmasını tools/test-tema.php engelliyor: birinde bir değeri
   değiştirip diğerinde unutursan test kalır.                                */
  .as-cards .table-wrap { border: none; background: none; overflow: visible; }
  .as-cards table, .as-cards thead, .as-cards tbody, .as-cards tr, .as-cards td { display: block; }
  .as-cards thead { display: none; }
  .as-cards tbody tr {
    border: 1px solid var(--line); border-radius: var(--r-md); background: var(--row-bg);
    margin-bottom: var(--s-tight); padding: 6px var(--s-compact);
  }
  .as-cards tbody tr:hover { background: var(--row-bg); }
  .as-cards td { border-bottom: 1px dotted var(--line); padding: 9px 0;
       display: flex; justify-content: space-between; gap: var(--s-compact); align-items: baseline; }
  .as-cards tbody tr td:last-child { border-bottom: none; }
  .as-cards td::before {
    content: attr(data-label); font-size: .68rem; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-3); flex-shrink: 0;
  }
/* ── KART-KURALLARI-SON ──────────────────────────────────────────────────── */

/* ── Telefon: tablolar karta dönüşür, yatay kaydırma YOK ────────────────── */
@media (max-width: 640px) {
  .card { padding: var(--s-std); }
  h2 { margin-top: var(--s-relaxed); }
  .metric .v, .stat-card .v { font-size: 1.5rem; }

/* ── KART-KURALLARI-BAS: telefon ─────────────────────────────────────────── */
  .table-wrap { border: none; background: none; overflow: visible; }
  table, thead, tbody, tr, td { display: block; }
  thead { display: none; }
  tbody tr {
    border: 1px solid var(--line); border-radius: var(--r-md); background: var(--row-bg);
    margin-bottom: var(--s-tight); padding: 6px var(--s-compact);
  }
  tbody tr:hover { background: var(--row-bg); }
  td { border-bottom: 1px dotted var(--line); padding: 9px 0;
       display: flex; justify-content: space-between; gap: var(--s-compact); align-items: baseline; }
  tbody tr td:last-child { border-bottom: none; }
  td::before {
    content: attr(data-label); font-size: .68rem; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-3); flex-shrink: 0;
  }
/* ── KART-KURALLARI-SON ──────────────────────────────────────────────────── */

  /* DAR SAYISAL TABLOLAR YIĞILMAZ (.table-tight).
     Yukarıdaki kart kuralları her tabloyu telefonda satır satır bloklara
     çevirir — uzun metin sütunları için doğru, ama "Dağılım" gibi üç kısa
     sayısal sütun için felaket: 6 satır 18 bloğa dönüşüp ekranlarca yer
     kaplıyordu (Mustafa'nın bildirdiği kusur). Üç dar sütun telefona zaten
     sığıyor; burada tablo tablo kalıyor.
     DİKKAT: bu kurallar KART-KURALLARI işaretlerinin DIŞINDA — o iki blok
     birbiriyle karşılaştırılıyor (tools/test-tema.php bölüm 10), araya bir
     şey girerse karşılaştırma bozulur. */
  .table-tight { overflow-x: auto; }
  .table-tight table   { display: table; width: 100%; }
  .table-tight thead   { display: table-header-group; }
  .table-tight tbody   { display: table-row-group; }
  .table-tight tr      { display: table-row; border: none; background: none;
                         margin: 0; padding: 0; }
  .table-tight td,
  .table-tight th      { display: table-cell; border-bottom: 1px solid var(--line); }
  .table-tight td::before { content: none; }

  /* Yıl süzgeci telefonda ~17 bağlantıyla alt alta sarıp yer kaplıyordu;
     artık tek satırda yatay kayıyor. */
  .filters.scroll-x { flex-wrap: nowrap; overflow-x: auto; }

  /* Telefonda yayın ızgarası tek sütuna iner: 280px'lik iki sütun sığmaz. */
  .as-cards .pub-list, .as-cards .notices { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── Geçici parola gösterimi (yönetim) ──────────────────────────────────── */
.pw { font-family: var(--mono); background: var(--warn-soft); border: 1px solid var(--warn);
      color: var(--warn-ink); padding: 3px 9px; border-radius: var(--r-sm); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════
   YÖNETİM EKRANLARI — Aşama 4
   Renk kodu YOK: hepsi tokens.css'ten geliyor (CLAUDE.md kuralı).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Yönetim giriş sayfasındaki kart ızgarası.
   auto-fill + minmax: ekran daraldıkça sütun sayısı kendiliğinden azalır,
   telefonda tek sütuna iner. Medya sorgusu gerekmiyor. */
.admin-grid {
  display: grid;
  gap: var(--s-compact);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin-top: var(--s-std);
}

/* SİMGE SEÇİMİ (araştırma alanları ekranı).
   Açılır liste DEĞİL, resimli seçim: çizimlerin adları ('dp', 'rl', 'lp')
   tek başına hiçbir şey anlatmıyor, hangisinin neye benzediğini görmeden
   seçmek körlemesine seçmektir. Radyo düğmesi gizlenmiyor, KÜÇÜLTÜLÜYOR —
   display:none klavyeyle gezinmeyi ve ekran okuyucuyu bozardı. */
.icon-pick {
  display: grid;
  gap: var(--s-tight);
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
.icon-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-tight);
  padding: var(--s-tight);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: center;
}
.icon-opt svg { width: 100%; height: auto; color: var(--ink-2); }
/* Seçili olan: marka rengi + İÇ gölgeyle kalınlaştırılmış kenarlık.
   Kenarlığın kalınlaşması şart — renk tek başına ayırt edici değil (renk
   körlüğü). İç gölge kullanılıyor çünkü border-width'i büyütmek öğenin
   ölçüsünü değiştirir ve ızgara seçim değiştikçe oynar. */
.icon-opt.on          { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.icon-opt.on svg      { color: var(--brand); }
/* Klavyeyle gezerken hangi seçenekte olduğun görünsün. */
.icon-opt:focus-within { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ÇİZİM DÜZENLEME: solda kod kutusu, sağda kayıtlı hâlin önizlemesi.
   Sayfada JavaScript yok — önizleme yazarken değil, KAYDEDİNCE güncellenir
   (kaydetme aynı forma geri döner, bkz. page_admin_areas). Dar ekranda
   ikisi alt alta geçer. */
.icon-edit {
  display: grid;
  gap: var(--s-compact);
  grid-template-columns: minmax(0, 1fr) 140px;
  align-items: start;
}
.icon-edit textarea { width: 100%; }
.icon-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-tight);
  padding: var(--s-compact);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.icon-preview svg { width: 100%; height: auto; color: var(--brand); }
@media (max-width: 640px) {
  .icon-edit { grid-template-columns: 1fr; }
}
.admin-card {
  display: block;
  padding: var(--s-std);
  border: 1px solid var(--line);
  /* Yönetim kartları da kategori ailesinden: eskiden tokens3.css'e gömülü
     tek bir renkti (yalnızca Rota'da vardı), artık her palette çalışır. */
  border-left: 5px solid var(--c1);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-decoration: none;
  color: var(--ink);
}
.admin-card:nth-child(4n+2) { border-left-color: var(--c2); }
.admin-card:nth-child(4n+3) { border-left-color: var(--c3); }
.admin-card:nth-child(4n+4) { border-left-color: var(--c4); }
/* DÜZELTME TURU 1 (İş 2): eskiden yalnızca tokens3.css'te vardı
   (`.admin-card:hover { background: var(--surface-2); border-left-width: 8px }`)
   — Rota'ya özel bir davranıştı, palet dosyası seçici yazamayınca hiç
   taşınmadı. Artık GENEL bir kural: zemin --row-bg-hover'a koyulaşır, şerit
   5px'ten 8px'e kalınlaşır. BİLEREK border-color'a DOKUNMUYOR — öyle
   yapılsaydı (önceki hâlde olduğu gibi) üstteki nth-child renklerini
   ezerdi, kategori kimliği hover'da kaybolurdu. */
.admin-card:hover { background: var(--row-bg-hover); border-left-width: 8px; text-decoration: none; }
.admin-card strong {
  display: block; margin-bottom: 4px;
  /* Eskiden tokens1.css/tokens3.css'e gömülüydü (bkz. renk_sozlesmesi()
     --admin-title yorumu) — kural taşınırken renk unutulup sabit --ink'e
     düşmüştü, iki palet aynı görünüyordu. */
  color: var(--admin-title);
}
.admin-card .hint  { display: block; margin: 0; }
.admin-count {
  display: block;
  margin-top: 8px;
  font-size: .78rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* Bağlantıyı düğme gibi göstermek için (örn. "+ Yeni ders"). */
.btn {
  display: inline-block;
  padding: 9px 16px;
  border-radius: var(--r-md);
  background: var(--brand);
  color: var(--on-dark);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 600;
}
.btn:hover { background: var(--brand-dark); color: var(--on-dark); text-decoration: none; }

/* Silme düğmesi: tehlikeli işlem göze çarpsın. */
button.danger, button.plain.danger { color: var(--err-ink); }
button.plain.danger:hover { color: var(--err-ink); }

/* İşaret kutusu satırı: etiket kutunun yanında dursun, üstünde değil. */
label.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  margin: var(--s-compact) 0 0;
}
label.check input { width: auto; margin: 0; }
label.check .hint { display: inline; margin: 0; }

/* Birden çok işaret kutusu YAN YANA — araştırma alanı (anahtar kelime)
   atamasında kullanılıyor. Alt alta dizilseydi altı alan formu boydan
   boya uzatırdı; sarmalı bir satır aynı bilgiyi bir iki satırda verir. */
.checks { display: flex; flex-wrap: wrap; gap: var(--s-tight) var(--s-std); }
.checks label.check { margin-top: var(--s-tight); }

/* Yeni form alanı türleri. Yukarıdaki kural yalnızca text/email/password/file
   sayıyordu; number, url ve tarih alanları biçimsiz kalıyordu. */
input[type=number], input[type=url], input[type=date], input[type=datetime-local] {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font: inherit;
  background: var(--input-bg);
  color: var(--ink);
}
input[type=number]:focus, input[type=url]:focus,
input[type=date]:focus, input[type=datetime-local]:focus {
  outline: none;
  border-color: var(--brand);
}

/* Kısa metin alanları 150px yüksekliğe zorlanmasın. */
textarea[rows="2"], textarea[rows="4"], textarea[rows="5"] { min-height: auto; }

/* ── Görünüş galerisi ─────────────────────────────────────────────────────
   /galeri sayfası: bütün palet × yerleşim kombinasyonu yan yana. Menüde
   bağlantısı YOK (app/controllers/gallery.php'nin başına bkz.).
   Kutular .pub-list ile aynı desende: auto-fill + minmax — kapsayıcı olmadan
   CSS kardeş öğeleri ızgaraya çeviremez (CLAUDE.md: "liste yazarken
   kapsayıcı ver"). Ölçüler layout-liste.css'teki değişkenlerden geliyor;
   burada yeni ölçü sabiti YOK (Ruling R'nin saydığı sabit sayısını artırmaz).

   DİKKAT (düzeltme turu 1 bulgusu): sütun eşiği --grid-min-pub DEĞİL, kendi
   değişkeni --grid-min-shot. Aşağıdaki iframe 1280px genişlikte çizilip
   .32 ile küçültülüyor (~410px görünür genişlik); sütun bundan darsa
   overflow:hidden önizlemenin sağını keser. --grid-min-pub'ı (280px)
   paylaşsaydı hem galeri kırpılırdı hem de yayın kartı genişliği
   değişince galeri habersizce bozulurdu — bkz. layout-liste.css'teki hesap. */
.gallery {
  display: grid;
  gap: var(--s-std);
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-min-shot), 1fr));
}
.shot { margin: 0; }
.shot-frame {
  position: relative;
  overflow: hidden;
  height: 260px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card-bg);
}
/* iframe gerçek masaüstü genişliğinde çizilir, SONRA küçültülür: sayfa
   telefon düzeni değil masaüstü düzeni ile render olsun. pointer-events:none
   + şablondaki tabindex=-1: tıklama/klavye odağı iframe'e değil, altındaki
   başlık bağlantısına gitsin (galeri kutusu tıklanabilir görünmemeli). */
.shot-frame iframe {
  width: 1280px;
  height: 1000px;
  border: 0;
  transform: scale(.32);
  transform-origin: 0 0;
  pointer-events: none;
}
.shot figcaption { padding: var(--s-tight) 0; font-size: var(--small-size); }