/* ==========================================================================
   AKIS · rehber sayfasi
   8 Eylul 2026

   YENI DEGER TANIMLANMAZ. Butun renkler, bosluklar, yaricaplar ve
   agirliklar styles.css'teki token'lardan gelir. Gerekce AKIS-SPEC 10:
   iki taslagin da kendi CSS olcegi vardi ve ikisi de 8 Eylul monokrom
   gecisinden onceydi; `--space-5` gibi TANIMSIZ degiskenler tasiyorlardi
   ve kural sessizce duserdi.

   Cam yuzey burada YENIDEN TANIMLANMAZ: HTML'de `.cam` sinifi kullanilir.
   Boylece geri cekilme (prefers-reduced-transparency) tek yerden isler.
   ========================================================================== */

/* --- Ana sayfa seridi --------------------------------------------------- */

.akis-serit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}

.akis-serit-oge {
  display: block;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-kart);
  border: 1px solid var(--line);
  background: var(--bg-elevated);
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow 150ms ease, border-color 150ms ease;
}

.akis-serit-oge:hover {
  border-color: var(--ink);
  box-shadow: var(--golge);
}

.akis-serit-tur {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-subtle);
  margin-bottom: var(--space-2);
}

.akis-serit-baslik {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--w-baslik);
  font-size: var(--text-lg);
  line-height: 1.25;
  margin-bottom: var(--space-2);
}

.akis-serit-ozet {
  display: block;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink-muted);
}

.akis-serit-tumu {
  /* Dikeyde ORTALANMAZ: tek kartli seritte baglanti bosluga asili
     duruyor ve kartla hizasiz okunuyordu. Kartin alt kenarina hizalanir. */
  align-self: end;
  padding-bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-subtle);
  justify-self: start;
}

.akis-serit-tumu:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* --- Akis listesi ------------------------------------------------------- */
/* Spec 10.3: yalniz iki yeni sinif, ikisi de mevcut token'lari cagirir. */

.akis-liste {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.akis-kayit {
  padding: var(--space-6);
  border-radius: var(--radius-kart);
}

.akis-durum {
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

.kayit-meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* Tur ROZETI, renk degil. Monokrom karari gecerli (CLAUDE.md 3B) ve
   durum renkleri tek istisnadir; tur bir durum degildir. */
.kayit-tur {
  color: var(--ink);
  font-weight: var(--w-orta);
}

.kayit-tarih { color: var(--ink-subtle); }

.kayit-baslik {
  font-family: var(--font-display);
  font-weight: var(--w-baslik);
  font-size: var(--text-2xl);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-3);
}

.kayit-baslik a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.kayit-baslik a:hover { border-bottom-color: var(--ink); }

.kayit-ozet {
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--ink-muted);
  max-width: 62ch;
  margin: 0 0 var(--space-4);
}

.kayit-kaynak {
  font-size: var(--text-sm);
  margin: 0 0 var(--space-4);
}

.kayit-araclar {
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.kayit-araclar-baslik {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-subtle);
  margin: 0 0 var(--space-2);
}

.kayit-araclar ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
}

.kayit-araclar a,
.kayit-kaynak a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-subtle);
}

.kayit-araclar a:hover,
.kayit-kaynak a:hover { border-bottom-color: var(--ink); }

/* --- Govde ------------------------------------------------------------- */

.rehber-govde {
  max-width: 68ch;
  font-size: var(--text-lg);
  line-height: 1.75;
  counter-reset: asama;
}

.rehber-govde p {
  margin: 0 0 var(--space-6);
}

/* Asama basliklari NUMARAYI CSS'ten alir, HTML'de rakam YOKTUR.
   Gerekce: akis_denetimi.py::A4 rehberdeki her rakami isaretli olmaya
   zorlar; baslik numarasi bir mevzuat esigi degildir ve `yok:` beyaniyla
   kirletilmemelidir. Sayac hem sorunu cozer hem sirayi tek yerde tutar. */
.rehber-govde h2 {
  counter-increment: asama;
  font-family: var(--font-display);
  font-weight: var(--w-baslik);
  font-size: var(--text-2xl);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: var(--space-16) 0 var(--space-3);
  scroll-margin-top: var(--space-6);
}

.rehber-govde h2::before {
  content: counter(asama, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--w-orta);
  letter-spacing: 0.14em;
  color: var(--ink-subtle);
  margin-bottom: var(--space-2);
}

/* Giris bolumunun basligi sayaca girmez. */
.rehber-govde h2.sayilmaz {
  counter-increment: none;
}
.rehber-govde h2.sayilmaz::before {
  content: none;
}

.rehber-govde h3 {
  font-family: var(--font-body);
  font-weight: var(--w-baslik);
  font-size: var(--text-lg);
  margin: var(--space-8) 0 var(--space-3);
}

.rehber-govde ul,
.rehber-govde ol {
  margin: 0 0 var(--space-6);
  padding-left: var(--space-6);
}

.rehber-govde li {
  margin-bottom: var(--space-2);
}

/* --- "Bu asamada ne yaparsiniz" · tarama satiri ------------------------ */
/* Spec 7.5: okuyucu dogrusal okumaz. Her asama tek satirlik bir ozetle
   acilir ve tarama bu satirlarla calisir. */

.ne-yaparsiniz {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--w-orta);
  color: var(--ink);
  border-left: 3px solid var(--ink);
  padding-left: var(--space-4);
  margin: 0 0 var(--space-6);
}

/* --- Esik isaretleri ---------------------------------------------------- */
/* Gorunumu bilerek SESSIZ: bu bir vurgu degil, bir izlenebilirlik
   isaretidir. Okuyucu farki fark etmese de olur; betik gorur. */

.rehber-govde [data-esik] {
  font-variant-numeric: tabular-nums;
  font-weight: var(--w-orta);
  white-space: nowrap;
}

/* --- Semalar ------------------------------------------------------------ */
/* Rehber gorselleri FOTOGRAF DEGIL SEMADIR. Iki gerekce:
   (a) hukuki · spec bolum 4, izinsiz gorsel kullanilmaz ve stok fotograf
       icin izin sureci isletmek bir surec rehberinde emege degmez;
   (b) islevsel · bir surec rehberinde fotograf dekordur, sema mekanizmayi
       gosterir. Dort semanin dordu de metnin adiyla isaret ettigi bir
       karisikliga denk gelir.
   Semalar satir ici SVG'dir ve `currentColor` kullanir; tema degiskeni
   burada YENIDEN TANIMLANMAZ. */

.rehber-sema {
  margin: var(--space-8) 0;
  padding: var(--space-6);
  border-radius: var(--radius-kart);
  color: var(--ink);
}

/* SEMA DAR EKRANDA KUCULMEZ, KAYAR (8 Eylul 2026).
   Olculdu: viewBox 660 birim genis. 375 px ekranda kap ~279 px'e
   dusuyor, olcek 0,42 oluyor ve 11 px'lik etiketler ekranda 4,6 px
   olarak ciziliyordu. DORT SEMANIN 44 ETIKETININ TAMAMI okunamaz
   haldeydi. Sema dekor degil: sayilari `data-esik` ile arac verisine
   bagli ve `akis_denetimi.py` her koşuda onlari dogruluyor. Okunmayan
   bir sema, dogrulanmis bir sayiyi tasimiyor demektir.

   HICBIR MEVCUT KONTROL GORMEDI: `impeccable detect` CSS DEGERINE
   bakar ve 11px'i yeterli sayar, cizilen boyutu bilmez. Kontrast ve
   kucuk metin olcumlerim de SVG'yi atliyordu, cunku SVG ogelerinde
   `offsetParent` null'dur.

   Cozum projenin kendi ilkesi (6A.0): genis icerik KENDI ICINDE kayar,
   sayfa govdesi kaymaz. Olcek artik 1'in altina inmiyor. */
.rehber-sema {
  overflow-x: auto;
}

.rehber-sema svg {
  display: block;
  width: 100%;
  min-width: 660px;
  height: auto;
  overflow: visible;
}

.rehber-sema figcaption {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ink-muted);
  margin-top: var(--space-4);
}

/* Sema yazi katmani. SVG icinde inline font YOK: olcek degisince
   semalar sessizce ayrisirdi. */
.sema-etiket {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--w-orta);
  fill: var(--ink);
}

.sema-kucuk {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--ink-subtle);
  letter-spacing: 0.06em;
}

.sema-sayi {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--w-orta);
  fill: var(--ink);
}

.sema-cizgi {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.25;
}

.sema-ince {
  fill: none;
  stroke: var(--ink-subtle);
  stroke-width: 1;
}

.sema-kesik {
  fill: none;
  stroke: var(--ink-subtle);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.sema-dolu { fill: var(--ink); stroke: none; }
.sema-bos  { fill: none; stroke: var(--ink-subtle); stroke-width: 1; }
/* `--line` DEGIL (R6-b · WCAG 1.4.11). Semanin anlami UC DURUMUN
   AYRIMINDA: dolu (hesaba katilan) · bos (katilmayan) · soluk. Ucuncusu
   `--line` ile zeminden 1,20:1 veriyordu, yani AYRIM OKUNMUYORDU ve bu
   D3'un en agir bulgusuydu: semalarin sayilari `data-esik` ile arac
   verisine bagli ve `akis_denetimi.py` her kosumda dogruluyor, ama
   okunmayan bir sema dogrulanmis bir sayiyi tasimiyor demektir.
   3C'de ayni semalarin etiket BOYUTU ayni sekilde olculmustu; bu onun
   dolgu karsiligi. `--grafik-sinir` en kotu zeminde 3,66:1 ve
   `.sema-dolu` ile ayrimi 5,7:1, yani uc durum hala ayirt ediliyor. */
.sema-soluk { fill: var(--grafik-sinir); stroke: none; }

@media (max-width: 700px) {
  .rehber-sema { padding: var(--space-3); }
  /* Etiket kucultmesi KALDIRILDI (8 Eylul 2026). Sema artik olcek 1'in
     altina inmiyor (yukarida), yani burada 10px yazmak ekranda gercekten
     10px cizer ve 11px tabanini kirardi. Kucultme, sema kuculdugu icin
     konulmustu; sema artik kaydigi icin gerekcesi de kalkti. */
}

/* --- Kutular ------------------------------------------------------------ */

.kapsam-kutusu,
.sorumluluk-kutusu {
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-ic);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--ink-muted);
  margin: var(--space-8) 0;
}

.kapsam-kutusu p:last-child,
.sorumluluk-kutusu p:last-child {
  margin-bottom: 0;
}

/* Uyari kutusu DURUM rengini kullanir. Durum renkleri monokromun
   disindadir ve sinyaldir (CLAUDE.md 3B). */
.rehber-uyari {
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-ic);
  border-left: 3px solid var(--durum-uyari);
  background: var(--durum-uyari-bg);
  font-size: var(--text-sm);
  line-height: 1.65;
  margin: var(--space-6) 0;
}

.rehber-uyari p:last-child {
  margin-bottom: 0;
}

/* --- Icindekiler -------------------------------------------------------- */

.rehber-icindekiler {
  padding: var(--space-6);
  border-radius: var(--radius-kart);
  margin: var(--space-8) 0 var(--space-16);
}

.rehber-icindekiler h2 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--w-orta);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-subtle);
  margin: 0 0 var(--space-4);
}

.rehber-icindekiler ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: icindekiler;
}

.rehber-icindekiler li {
  counter-increment: icindekiler;
  margin: 0;
  padding: var(--space-1) 0;
}

.rehber-icindekiler li::before {
  content: counter(icindekiler, decimal-leading-zero) "  ";
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-subtle);
}

.rehber-icindekiler a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.rehber-icindekiler a:hover {
  border-bottom-color: var(--ink);
}

/* --- Arac karti --------------------------------------------------------- */
/* Metnin akisini kesen blok. HTML'de `.cam` ile birlikte kullanilir. */

.arac-karti {
  padding: var(--space-6);
  border-radius: var(--radius-kart);
  margin: var(--space-8) 0;
}

.arac-karti-etiket {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--w-orta);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-subtle);
  margin: 0 0 var(--space-2);
}

.arac-karti h3 {
  font-family: var(--font-display);
  font-weight: var(--w-baslik);
  font-size: var(--text-xl);
  margin: 0 0 var(--space-2);
}

.arac-karti p {
  font-size: var(--text-base);
  color: var(--ink-muted);
  line-height: 1.6;
  margin: 0 0 var(--space-4);
}

.arac-karti-git {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--w-baslik);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 2px;
}

.arac-karti-git:hover {
  color: var(--ink-muted);
  border-bottom-color: var(--ink-muted);
}

/* --- Ust ve alt seritler ------------------------------------------------ */

.rehber-geri {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  text-decoration: none;
  margin-bottom: var(--space-6);
}

.rehber-geri:hover {
  color: var(--ink);
}

.rehber-kunye {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-subtle);
  margin-bottom: var(--space-4);
}

/* --- Mobil -------------------------------------------------------------- */

@media (max-width: 700px) {
  .rehber-govde { font-size: var(--text-base); }
  .rehber-govde h2 { margin-top: var(--space-12); }
  .arac-karti,
  .rehber-icindekiler { padding: var(--space-4); }
  .kapsam-kutusu,
  .sorumluluk-kutusu,
  .rehber-uyari { padding: var(--space-4); }
}