/* =====================================================================
 * css/style.css — Kapı sayfası (index.php) ve müfredat dizini stili.
 *
 * Kabuk (ziyaretçi barı, altbilgi), tipografi tabanı, buton, kart, odak
 * halkası css/cekirdek.css'te; renk token'ları css/tema.php'de. Burada
 * YALNIZ bu sayfalara özgü düzenler var: yedek hero + şiar fişi, araç dizini,
 * öğrenci alanı bandı, kapı sayfasının fosfor/hareket katmanı.
 *
 * 7 EYLÜL 2026 (B3): birinci turdan kalan ölü kod silindi — sınıf
 * yönlendirici (`.yon*`), "nasıl çalışır" şerit bileşeni (`.akis*`), A-E
 * optik şıkları (`.optik`), müfredat kutuları (`.unit`, `.muf-etiket`),
 * iki fişli yığın (`.fis-soru`, `.fis-puan`, `.hero-fis::before`) ve kareli
 * defter zemini (`.ana-kapi .hero::before`). Hiçbiri hiçbir sayfada
 * basılmıyordu (kaynak taraması: yalnız bu dosyada geçiyorlardı); son ikisini
 * zaten css/anasayfa.css `content:none` ile söndürüyordu. 508 → 310 satır.
 * Gölgelerdeki ham `rgb(29 35 64 / …)` literalleri token türevine çevrildi:
 * tema paketi değişince gölge de dönsün.
 *
 * Ham hex yok — her renk token. Font adı yok — yalnız --yz-* token'ları.
 * Kanon: docs/tasarim/01-tasarim-sistemi.md · Ekran: docs/tasarim/02-ana-sayfa.md
 * ===================================================================== */

main.ana { padding-bottom: 8px; }

/* =====================================================================
 * 1. Yedek hero (slayt yokken) — solda tez, sağda şiar fişi
 * ===================================================================== */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 30px 44px;
  align-items: start;
  padding: 44px 0 40px;
}

.hero .hero-zincir {
  margin: 0 0 14px;
  font-family: var(--yz-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--murekkep-2);
}

/* Kapı sayfasının tek h1'i — kabuğun genel h1 ölçeğini burada büyütüyoruz.
   Daraltılmış letter-spacing YOK; Bricolage'ın doğal genişliği bırakılır. */
.hero h1 {
  margin: 0 0 16px;
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.12;
  max-width: 17ch;
}

.hero p.hero-giris {
  margin: 0;
  max-width: 54ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--murekkep-2);
}

.hero-eylem { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hero-eylem .btn { width: auto; margin-top: 0; min-height: 46px; padding: 12px 22px; }
/* Rakam satırı butonlara yapışmasın — kendi nefes payı olsun. */
.hero-metin .kunye { margin-top: 18px; }

/* ---------- Şiar fişi ----------
 * Slayt gösterisi kapalıyken (ya da `slayt` tablosu boşken) hero'nun sağ
 * sütununda duran tek kart. 7 Eylül 2026'da İKİ fişten (çıkmış soru + puan
 * hesaplayıcı) TEKE indi: kapı sayfası artık YKS araçlarının değil akademinin
 * vitrini. `.fis-soru` / `.fis-puan` kuralları da bu yüzden silindi. */
.hero-fis { display: flex; flex-direction: column; }

.fis {
  position: relative;
  display: block;
  overflow: visible;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: 14px;
  padding: 18px 18px 16px;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--murekkep) 7%, transparent),
              0 10px 24px -14px color-mix(in srgb, var(--murekkep) 26%, transparent);
  transition: box-shadow .15s ease-out, border-color .15s ease-out;
}
.fis:hover {
  box-shadow: 0 2px 5px color-mix(in srgb, var(--murekkep) 9%, transparent),
              0 16px 34px -16px color-mix(in srgb, var(--murekkep) 34%, transparent);
  border-color: var(--birincil);
}
@media (prefers-reduced-motion: reduce) { .fis { transition: none; } }

/* SİLİNDİ (7 Eylül 2026, B3): `.fis-puan` ve `.fis-soru` kuralları. Kapı
   sayfasının hero'sunu artık slayt gösterisi taşıyor; yedek hero yalnız TEK
   fiş (`.fis-ayet`, şiar kartı) basıyor. İki fişli "dosya yığını" kalmadı,
   kurallar ölüydü. */

.hero p.fis-kunye { margin: 0 0 10px; }
.hero p.fis-metin {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--murekkep);
}
.hero p.fis-metin .sy { font-family: var(--yz-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.hero p.fis-not { margin: -6px 0 14px; font-size: 12px; line-height: 1.45; color: var(--murekkep-2); }
.fis-git { display: block; font-size: 13.5px; font-weight: 600; color: var(--birincil-koyu); }

@media (max-width: 1023px) {
  .hero { grid-template-columns: 1fr; gap: 30px; padding: 32px 0 30px; }
  .hero h1 { max-width: 20ch; }
}

/* =====================================================================
 * 2. Bölüm başlığı + araç dizini
 * ===================================================================== */
.section-title {
  scroll-margin-top: calc(var(--zy-bar) + 12px);
  margin: 40px 0 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cizgi);
  font-family: var(--yz-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--murekkep-2);
}

.dizin {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: 14px;
  margin: 14px 0 0;
  overflow: hidden;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--murekkep) 7%, transparent),
              0 10px 24px -14px color-mix(in srgb, var(--murekkep) 26%, transparent);
}
.dizin-satir {
  display: block;
  padding: 17px 20px;
  border-top: 1px solid var(--cizgi);
  text-decoration: none;
  color: inherit;
  transition: background-color .15s ease-out;
}
.dizin-satir:first-child { border-top: 0; }
.dizin-satir:hover { background: var(--yuzey-2); }
.dizin-satir:hover h3 { color: var(--birincil-koyu); }
@media (prefers-reduced-motion: reduce) { .dizin-satir { transition: none; } }

/* Modül rengi kenar şeridiyle değil ikon vurgusuyla taşınır (kanon §4.9). */
.dizin-baslik { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.dizin-baslik svg { flex: none; color: var(--murekkep-2); }
.dizin-satir[data-modul="tercih"] .dizin-baslik svg { color: var(--sekme-tercih); }
.dizin-satir[data-modul="soru"]   .dizin-baslik svg { color: var(--sekme-soru); }
.dizin-satir h3 { font-family: var(--yz-baslik); font-size: 17px; font-weight: 700;
  letter-spacing: -.01em; }
.dizin-satir p { margin: 0; font-size: 13.5px; color: var(--murekkep-2); max-width: 66ch; }

.dizin-meta {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 6px 16px; flex-wrap: wrap; margin-top: 10px;
}
.dizin-git { font-size: 13.5px; font-weight: 600; color: var(--birincil-koyu); white-space: nowrap; }

/* =====================================================================
 * 3. Öğrenci alanı bandı
 * ===================================================================== */
.uye {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px;
  margin: 14px 0 0; padding: 18px 20px;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: 14px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--murekkep) 7%, transparent),
              0 10px 24px -14px color-mix(in srgb, var(--murekkep) 26%, transparent);
}
.uye p { margin: 0; flex: 1; min-width: 240px; font-size: 14px; color: var(--murekkep-2); }
.uye .btn { width: auto; flex: none; margin-top: 0; padding: 11px 20px; }

@media (max-width: 599px) {
  .uye { flex-direction: column; align-items: stretch; }
  .uye p { min-width: 0; }
  .uye .btn { width: 100%; padding: 12px 16px; }
}

/* =====================================================================
 * 4. İç sayfa ortakları (kırıntı yolu, sayfa h1'i)
 * ===================================================================== */
.breadcrumb { margin: 18px 0 10px; font-size: 13px; color: var(--murekkep-2); }
/* inline-flex + min-height 24: kırıntı bağlantıları 62×16 ölçülmüştü
   (hoca.php, makale.php), WCAG 2.2 asgari hedefi 24×24. Satır yüksekliği
   büyüyor, yazı ve konum aynı kalıyor. */
.breadcrumb a { display: inline-flex; align-items: center; min-height: 24px;
  color: var(--birincil-koyu); }
.sayfa-baslik .breadcrumb { margin: 0 0 8px; }

/* Müfredat sayfasında h1 tekil ve sayfa başlığı ölçeğinde. */
main.ana > h1 { margin: 18px 0 10px; font-size: clamp(24px, 3vw, 30px); }

/* =====================================================================
 * 5. Kapı sayfası görsel katmanı (YALNIZ `.ana-kapi` = index.php)
 *
 * Neden ayrı bölüm: bu dosya müfredat sayfalarında da yükleniyor. Kareli
 * zemin, fosforlu vurgu, modül renkleri ve mikro-hareketler ürünün kapı
 * sayfasına ait; hepsi `.ana-kapi` altına yazılır, müfredat dizini eskisi
 * gibi sade kalır. Yeni öğe/bölüm eklenmez — var olanlar renklendirilir.
 * Renk yok: her değer token ya da color-mix türevi.
 * ===================================================================== */

/* ---------- 5.1 Fosforlu kalem vurgusu ----------
 * Gradyan değil düz saydam vurgu rengi; hafif eğik, köşe yarıçapları
 * düzensiz (kalem darbesi uçları) ve metnin ALTINDA kalır.
 *
 * Seçici `.hero h1`den `.ana-kapi .fosfor`a genişletildi: slayt gösterisi
 * hero'nun yerine geçtiğinde vurguyu slayt başlığı taşıyor. Sayfada yine TEK
 * fosfor görünür — görünen slayt bir tane. */
.ana-kapi .fosfor {
  display: inline;
  padding: 0 .13em .04em;
  /* Düz renk DEĞİL gradyan: `background-size` ancak görsel bir katmanda
     canlandırılabiliyor. İki durağı da aynı renk, yani görünüş düz. */
  background-image: linear-gradient(
    color-mix(in srgb, var(--vurgu) 30%, transparent),
    color-mix(in srgb, var(--vurgu) 30%, transparent));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 4px 12px 3px 10px / 11px 4px 12px 5px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* İZ ARTIK HER SATIRA AYRI ÇİZİLİYOR — 7 Eylül 2026, kullanıcı bildirdi.
   Önceki hâli: `display:inline-block` + mutlak konumlu, hafif eğik bir
   `::before` dikdörtgeni. Sarılan öbeği TEK kutu saydığı için, vurgulanan
   söz iki satıra yayıldığında (canlıda ölçüldü: vurgu "bir üstadın dizinin
   dibinde", başlık dört satır) iz kutunun DİBİNE, yani "dibinde" satırına
   ama kutunun TAM GENİŞLİĞİNDE çiziliyordu: kelimenin sağına doğru uzayıp
   giden bir bant. Aynı hata 560px altında zaten fark edilip düzeltilmişti,
   ama sorun dar ekrana özgü değil — vurgu nerede sarılırsa orada çıkıyor.

   `display:inline` + `box-decoration-break: clone` her satır parçasına kendi
   zeminini verir; gerçek bir fosforlu kalem de iki satırı iki darbede
   boyar. Bedeli izin 1,2 derecelik eğimi (arka plan döndürülemez); düzensiz
   köşe yarıçapları el çizimi hissini taşımayı sürdürüyor.

   NEDEN "vurguyu kısaltın" demedik: kurum başlıkları panelden yazıyor ve
   yarın gene uzun bir öbek seçebilir. Kural içeriğe değil koda konmalıydı. */

/* KOYU BANTTA DAHA GÜÇLÜ: %30'luk karışım koyu zeminde zeytin bir lekeye
   dönüşüyor ve "kalem izi" olduğu anlaşılmıyordu. %50 ölçüldü: beyaz yazı
   yedi temada 4,47-5,29 arasında, başlık zaten büyük metin (eşik 3,0). */
.ana-kapi .kp-serit--koyu .fosfor {
  background-image: linear-gradient(
    color-mix(in srgb, var(--vurgu) 50%, transparent),
    color-mix(in srgb, var(--vurgu) 50%, transparent));
}

/* ---------- 5.2 Kontrollü polikromi: modül renkleri ----------
 * Renk yalnız ikonda / düğümde / künye metninde. Renkli kenar şeridi YOK. */
/* Kapı sayfasının dizininde bugün YALNIZ dört modül var: soru · anlatim ·
   sinav · sertifika (anasayfa/bolum-nasil-calisir.php). "mufredat" ve
   "tercih" kuralları hiçbir satıra denk gelmiyordu — silindi.
   Hover'da başlık rengi TEK: modül rengi metne taşınmıyor (anti-slop #9) ve
   `--sekme-soru` (= `--birincil`) metin olarak Orman'da 4,33 veriyordu. */
.ana-kapi .dizin-satir:hover h3 { color: var(--birincil-koyu); }

/* KALDIRILDI (6 Eylül 2026): `.akis-bolme` ve `.yon-plan` renk kuralları.
   İki seçicinin de hedefi ana sayfada YOKTU (kapı sayfası "nasıl çalışır"ı
   `.dizin-satir` ile kuruyor, yol haritası bandı ise hiç basılmıyor) — yani
   ölü kuraldı. Üstelik `--sekme-deneme` (= `--vurgu`) metin rengi olarak
   yazılıydı ve Aile temasında beyaz üstünde 2,29 veriyor: kural bir gün
   canlansaydı sessizce eşiğin altında bir metin doğururdu. Yeniden gerekirse
   metin değil DOLGU/ÇİZGİ rolüyle yazılmalı. */

/* ---------- 5.3 Dizin satırının hover imzası ---------- */
.ana-kapi .dizin-satir:hover .dizin-git {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =====================================================================
 * 5.4 Mikro-hareket katmanı
 * Hareketin TAMAMI burada: `prefers-reduced-motion: reduce` durumunda bu
 * blok hiç uygulanmaz, içerik ilk kareden itibaren tam ve yerinde durur.
 * Yalnız transform/opacity animasyonu; renkli/glow gölge yok.
 * ===================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* Giriş sekansı: kicker → h1 → paragraf + CTA → fişler (toplam < 700ms). */
  @keyframes ana-gir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .ana-kapi .hero-zincir { animation: ana-gir .34s ease-out both; }
  .ana-kapi .hero h1     { animation: ana-gir .34s ease-out .1s both; }
  .ana-kapi .hero-giris  { animation: ana-gir .34s ease-out .2s both; }
  .ana-kapi .hero-eylem  { animation: ana-gir .34s ease-out .26s both; }
  .ana-kapi .hero-fis    { animation: ana-gir .34s ease-out .34s both; }

  /* Fosfor soldan sağa çizilir; bitiş hâli statik hâlin aynısı.
     `transform` değil `background-size`: iz artık satır satır boyanan bir
     arka plan (bkz. `.fosfor` gerekçesi), satır içi öğede transform işlemez.
     Yan fayda: vurgu iki satıra yayılırsa İKİ satır da aynı anda soldan
     sağa çiziliyor — gerçek bir fosforlu kalem gibi. */
  @keyframes fosfor-ciz {
    from { background-size: 0 100%; }
    to   { background-size: 100% 100%; }
  }
  .ana-kapi .fosfor { animation: fosfor-ciz .4s ease-out .3s both; }

  /* Fiş hover: hafifçe kalkar. Rotasyon KALDIRILDI — yığın artık tek fiş. */
  .ana-kapi .fis { transition: box-shadow .15s ease-out, border-color .15s ease-out, transform .15s ease-out; }
  .ana-kapi .fis:hover, .ana-kapi .fis:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 3px 7px color-mix(in srgb, var(--murekkep) 10%, transparent),
                0 20px 44px -20px color-mix(in srgb, var(--murekkep) 38%, transparent);
  }

  /* Dizin satırı: hafif lift (gölge yok — satır tek yüzeyin içinde). */
  .ana-kapi .dizin-satir { transition: background-color .15s ease-out, transform .15s ease-out; }
  .ana-kapi .dizin-satir:hover { transform: translateY(-1px); }

  /* Birincil CTA'lar: hover'da lift + gölge, basışta hafif çöküş. */
  .ana-kapi .hero-eylem .btn { transition: transform .15s ease-out, box-shadow .15s ease-out; }
  .ana-kapi .hero-eylem .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px color-mix(in srgb, var(--murekkep) 9%, transparent),
              0 16px 34px -16px color-mix(in srgb, var(--murekkep) 34%, transparent);
  }
  .ana-kapi .hero-eylem .btn:active { transform: scale(.98); }
}