/* ==================================================================
   ana.css — ANA SAYFA (yeni tema)                        2026-09-02
   ==================================================================
   views/yeni/anasayfa.php ile birlikte yükleniyor.
   Sıra: ortak.css → kurs.css → vitrin.css → ana.css → tw.css
   (head.php `$nk_sayfa_css = array('kurs','vitrin','ana')`).

   ⚠️ Bu dosya BİLEREK KÜÇÜK: hero, kategori ızgarası, yorumlar ve
   akordiyon vitrin.css + kurs.css'ten MİRAS (`.vit-*` bileşenleri —
   Ortak Katman Deseni). Burada yalnız:
     1. Ana sayfanın RENK İMZASI (altın) — vitrin/kategori turkuaz,
        kurs detay mavi/kırmızı; her sayfa tipinin fısıltı düzeyinde
        kendi tonu var (kategori 20. tur kararının devamı)
     2. Canlı ders paneli (.ana-canli*) — yalnız bu sayfada var

   📌 `tasarim8/anasayfa.css`e DOKUNULMADI — o dosya Temmuz'daki statik
   mockup'ın (index.html) CSS'i, tarihsel referans olarak duruyor.
   Gerçek sayfanın dosyası bu (`ana.css`).

   TUZAK NOTLARI (tasarim-tuzaklari.md):
   §A  Element seçicisi yok; imza kuralları `.ana-sayfa` kancasıyla.
   §A  Reset `p{margin:0}` veriyor; gereken boşluk açıkça geri.
   §K  Grid'lerde açık sütun tanımı + `min-width:0`.
   ================================================================== */


/* ==================================================================
   1. RENK İMZASI — ALTIN
   Vitrin hero'sunun ikincil ışığı turkuaz; ana sayfada ALTIN
   (#FFC24A ailesi — yıldız/puan rengi, markada zaten var).
   Kicker da aynı tona geçiyor. Ana marka ışığı, kırmızı CTA ve
   lacivert zemin AYNEN duruyor — fark bilinçli olarak fısıltı.
   ================================================================== */
.ana-sayfa .vit-hero::before{
  background:
    radial-gradient(65% 85% at 8% 0%,  rgb(47 107 208 / .30), transparent 60%),
    radial-gradient(55% 80% at 92% 12%, rgb(255 194 74 / .10), transparent 62%);
}
.ana-sayfa .vit-kicker{ color:#FFC24A }

/* Alan seçici yedeği basılırsa (canlı liste boşken) ikonlar da altına
   dönsün — turkuaz vitrinin imzası. */
.ana-sayfa .vit-alan-iko{
  background:rgb(255 194 74 / .13); color:#FFC24A;
}
.ana-sayfa .vit-alan-kart:hover{ border-color:rgb(255 194 74 / .38) }
.ana-sayfa .vit-alan-kart:hover .vit-alan-ok{ color:#FFC24A }
.ana-sayfa .vit-alan-onizleme em{ color:#FFC24A }


/* ==================================================================
   2. HERO SAĞ PANELİ — YZ KARTI + SAYAÇLAR             (♻️ 3. tur)
   Kullanıcı: "en önemli özelliğimiz yapay zekâ; sayaçları sağa al,
   baykuşu kullan." `.yz-teaser` + `.khero-owl` kurs.css'ten MİRAS —
   burada yalnız sayaç kutuları var.
   ================================================================== */
/* Kırmızı canlı nokta — SABİT (yanıp sönme YOK: WCAG 2.3.1 +
   akordiyon nabzındaki "sert flaş yok" kararı). Artık canlı ders
   BÖLÜMÜNÜN kicker'ında kullanılıyor. */
.ana-canli-nokta{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--red); margin-right:2px; vertical-align:1px;
  box-shadow:0 0 0 3px rgb(225 29 72 / .22);
}

/* Sayaç kutuları — "108.678 kayıtlı kursiyer" vb. üç gerçek sayı.
   Cam dil alan kartlarıyla aynı (üstten aydınlık + kıl payı üst çizgi). */
.ana-sayac{
  list-style:none; margin:0; padding:0;
  display:grid; gap:10px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
/* Dar ekranda 2 sütun; tek kalan kutu tam genişliğe yayılır
   (bilgi panelinde kanıtlanmış kalıp, tuzak §B). */
@media (max-width:479px){
  .ana-sayac{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .ana-sayac li:last-child:nth-child(odd){
    grid-column:1 / -1;
    flex-direction:row; align-items:baseline; gap:8px;
  }
}
.ana-sayac li{
  min-width:0;
  display:flex; flex-direction:column; gap:2px;
  padding:14px 14px 12px; border-radius:var(--r-l);
  background:linear-gradient(180deg, rgb(255 255 255 / .085), rgb(255 255 255 / .045));
  border:1px solid rgb(255 255 255 / .12);
  border-top-color:rgb(255 255 255 / .2);
  box-shadow:0 18px 34px -26px rgb(0 0 0 / .55);
}
.ana-sayac b{
  font-size:clamp(1.25rem,1rem + .75vw,1.6rem);
  font-weight:800; color:#fff; line-height:1.1;
}
.ana-sayac span{ font-size:.76rem; color:#8FA6C6; line-height:1.35 }

/* ♻️ 4. tur: KOYU CANLI SATIRLARI GERİ AKTİF — kullanıcı: "öncekini
   kaldır demedim"; takvim panele döndü (yz-teaser altında, ≤3 satır). */
.ana-canli{
  display:grid; gap:10px;
  grid-template-columns:minmax(0,1fr);
}
.ana-canli-satir{
  min-width:0;
  display:flex; align-items:center; gap:12px;
  padding:12px 13px 12px 14px; border-radius:var(--r-l);
  background:linear-gradient(180deg, rgb(255 255 255 / .085), rgb(255 255 255 / .045));
  border:1px solid rgb(255 255 255 / .12);
  border-top-color:rgb(255 255 255 / .2);
  box-shadow:0 18px 34px -26px rgb(0 0 0 / .55);
  color:#DCE7F5; text-decoration:none;
  transition:background .18s ease, border-color .18s ease,
             transform .18s ease, box-shadow .18s ease;
}
.ana-canli-satir:hover{
  background:linear-gradient(180deg, rgb(255 255 255 / .13), rgb(255 255 255 / .08));
  border-color:rgb(255 194 74 / .38);
  transform:translateY(-2px);
  box-shadow:0 22px 40px -24px rgb(0 0 0 / .6);
}
.ana-canli-satir:focus-visible{ outline:2px solid #FFC24A; outline-offset:2px }
.ana-canli-govde{
  flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; gap:3px;
}
.ana-canli-govde b{
  font-size:.92rem; font-weight:800; color:#fff; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ana-canli-alt{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;
  font-size:.76rem; color:#8FA6C6; line-height:1.4;
}
.ana-canli-alt .tnum{ font-weight:800; color:#B9CCE6 }
.ana-canli-alt em{ font-style:normal; font-weight:800; color:#FFC24A }
.ana-canli-satir .vit-alan-ok{ flex:none }
.ana-canli-satir:hover .vit-alan-ok{ transform:translateX(3px); color:#FFC24A }
.ana-canli-tum{ color:#9CC4FF; font-weight:800; text-decoration:underline; text-underline-offset:2px }
.ana-canli-tum:hover{ color:#fff }

/* ==================================================================
   2a. CANLI DERS TAKVİMİ — BÖLÜM (açık zemin)
   ⛔ 4. tur: BÖLÜM KULLANILMIYOR (view'da if(false) yedeğinde) —
   takvim hero paneline geri döndü. Kurallar zararsız, karar geri
   alınırsa hazır dursun diye AKTİF bırakıldı.
   ================================================================== */
.ana-canli-bolum{
  padding-block:clamp(28px,3.5vw,52px);
  scroll-margin-top:88px;
}
.ana-canli-bolum .kicker{ display:inline-flex; align-items:center; gap:7px }

.ana-canli-izgara{
  list-style:none; margin:0; padding:0;
  display:grid; gap:14px;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:560px){
  .ana-canli-izgara{ grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)) }
}
.ana-canli-acik{ min-width:0 }
.ana-canli-acik a{
  display:flex; flex-direction:column; gap:6px; height:100%;
  padding:15px 16px 16px; border-radius:var(--r-l);
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--sh-1);
  color:var(--ink); text-decoration:none;
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.ana-canli-acik a:hover{
  box-shadow:var(--sh-3); transform:translateY(-3px);
  border-color:rgb(225 29 72 / .3);
}
.ana-canli-ust{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px;
  font-size:.78rem;
}
.ana-canli-ust b{ font-weight:800; color:var(--red-d) }
.ana-canli-ust em{
  font-style:normal; padding:2px 9px; border-radius:999px;
  background:var(--brand-w); color:var(--brand-d);
  font-size:.68rem; font-weight:800; letter-spacing:.04em;
}
.ana-canli-baslik{
  font-size:.95rem; font-weight:800; line-height:1.35; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.ana-canli-hoca{ margin-top:auto; font-size:.8rem; color:var(--ink-3) }


/* ==================================================================
   2c. YZ ASİSTANI BÖLÜMÜ — 4'lü kart sürümü
   ⛔ 4. tur: KULLANILMIYOR — kullanıcı kurs detayın BÜYÜK YZ bloğunu
   istedi (sohbet maketli); bölüm artık kurs.css'in `.yz` bileşenini
   birebir kullanıyor, buradaki uyarlamaya gerek kalmadı. Karar geri
   alınırsa hazır.
.ana-yz{
  position:relative; overflow:hidden;
  background:var(--navy-d); color:#C6D5E8;
  padding-block:clamp(44px,6vw,80px);
  scroll-margin-top:88px;
}
.ana-yz::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 90% at 12% 0%, rgb(47 107 208 / .26), transparent 62%),
    radial-gradient(50% 80% at 88% 10%, rgb(255 194 74 / .09), transparent 64%);
}
.ana-yz .wrap{ position:relative; z-index:1 }
.ana-yz .sec-head h2{ color:#fff }
.ana-yz .sec-head p{ color:#B6C6DC }
.ana-yz .kicker{ color:#FFC24A }

.ana-yz-liste{
  list-style:none; margin:26px 0 0; padding:0;
  display:grid; gap:14px; grid-template-columns:minmax(0,1fr);
}
@media (min-width:680px){ .ana-yz-liste{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1100px){ .ana-yz-liste{ grid-template-columns:repeat(4,minmax(0,1fr)) } }

.ana-yz-kart{
  min-width:0; padding:18px 18px 20px;
  border-radius:var(--r-l);
  background:linear-gradient(180deg, rgb(255 255 255 / .075), rgb(255 255 255 / .04));
  border:1px solid rgb(255 255 255 / .11);
  border-top-color:rgb(255 255 255 / .19);
  box-shadow:0 18px 34px -26px rgb(0 0 0 / .55);
  display:flex; flex-direction:column; gap:8px;
}
.ana-yz-iko{
  width:36px; height:36px; flex:none; margin-bottom:2px;
  display:grid; place-items:center; border-radius:11px;
  background:rgb(255 194 74 / .14); color:#FFC24A;
}
.ana-yz-iko .icon{ width:19px; height:19px }
.ana-yz-kart b{ color:#fff; font-size:1rem; line-height:1.35; font-weight:800 }
.ana-yz-kart span{ font-size:.88rem; line-height:1.6; color:#B6C6DC }

.ana-yz-alt{ margin:20px 0 0; font-size:.9rem; color:#8FA6C6 }
.ana-yz-alt a{ color:#9CC4FF; font-weight:700; text-decoration:underline; text-underline-offset:2px }
.ana-yz-alt a:hover{ color:#fff }
*/


/* ==================================================================
   2b. NEDEN NETTEKURS — lacivert kimlik bölümü          (2. tur)
   Kategori sayfasının `.kat-yz` bölümüyle aynı aile: koyu zemin +
   4 cam kart; ışık imzası burada ALTIN. Giriş paragrafı AEO cevap
   bloğu — genişliği kısıtlanmıyor (metinde ch sınırı yasak, §B).
   ================================================================== */
.ana-neden{
  position:relative; overflow:hidden;
  background:var(--navy-d); color:#C6D5E8;
  padding-block:clamp(44px,6vw,80px);
}
.ana-neden::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 90% at 12% 0%, rgb(47 107 208 / .26), transparent 62%),
    radial-gradient(50% 80% at 88% 10%, rgb(255 194 74 / .09), transparent 64%);
}
.ana-neden .wrap{ position:relative; z-index:1 }
.ana-neden .sec-head h2{ color:#fff }
.ana-neden .sec-head p{ color:#B6C6DC }
.ana-neden .kicker{ color:#FFC24A }
/* Cevap bloğundaki iç linkler koyu zeminde okunur kalsın. */
.ana-neden-cevap a{
  color:#FFD98F; font-weight:800;
  text-decoration:underline; text-underline-offset:2px;
}
.ana-neden-cevap a:hover{ color:#fff }

.ana-neden-liste{
  list-style:none; margin:26px 0 0; padding:0;
  display:grid; gap:14px; grid-template-columns:minmax(0,1fr);
}
@media (min-width:680px){ .ana-neden-liste{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1100px){ .ana-neden-liste{ grid-template-columns:repeat(4,minmax(0,1fr)) } }

.ana-neden-kart{
  min-width:0; padding:18px 18px 20px;
  border-radius:var(--r-l);
  background:linear-gradient(180deg, rgb(255 255 255 / .075), rgb(255 255 255 / .04));
  border:1px solid rgb(255 255 255 / .11);
  border-top-color:rgb(255 255 255 / .19);
  box-shadow:0 18px 34px -26px rgb(0 0 0 / .55);
  display:flex; flex-direction:column; gap:8px;
}
.ana-neden-iko{
  width:36px; height:36px; flex:none; margin-bottom:2px;
  display:grid; place-items:center; border-radius:11px;
  background:rgb(255 194 74 / .14); color:#FFC24A;
}
.ana-neden-iko svg{ width:19px; height:19px }
.ana-neden-kart b{ color:#fff; font-size:1rem; line-height:1.35; font-weight:800 }
.ana-neden-kart > span{ font-size:.88rem; line-height:1.6; color:#B6C6DC }
.ana-neden-link{
  margin-top:auto; padding-top:8px; align-self:start;
  font-size:.84rem; font-weight:800; color:#9CC4FF;
  text-decoration:underline; text-underline-offset:2px;
}
.ana-neden-link:hover{ color:#fff }


/* ==================================================================
   3. ERİŞİLEBİLİRLİK
   vitrin.css'in `prefers-reduced-motion` bloğu kart/alan efektlerini
   zaten kapatıyor; buradaki tek ek canlı satırın kendi geçişi.
   ================================================================== */
@media (prefers-reduced-motion:reduce){
  .ana-canli-acik a{ transition:none }
  .ana-canli-acik a:hover{ transform:none }
}


/* ==================================================================
   4. DAR EKRAN
   ⚠️ 320 / 344 / 360 / 390 taraması yapılacak (tuzak §K).
   ================================================================== */
@media (max-width:560px){
  .ana-canli-acik a{ padding:13px 14px 14px }
}