/* ==================================================================
   vitrin.css — /online VİTRİN (25 kategori)              2026-09-02
   ==================================================================
   views/yeni/online_vitrin.php ile birlikte yükleniyor.
   ⚠️ ortak.css + kurs.css'ten SONRA geliyor (head.php sırası), yani
   aynı ağırlıktaki kuralda bu dosya kazanır.

   BURADA OLMAYANLAR — bilerek kurs.css'ten miras alınıyor:
     .wrap .sec-head .kicker .btn .btn-primary .btn-cam .tnum .yldz
     .rating .rating-stars .rating-say
     .lede .lede-ac
     .khero-guven .khero-guven-madde .khero-guven-iko .khero-guven-metin
     .yrm-sarma .yrm-ok .yrms .rev .rev-* .ava .kadro-alt
     .nk-modal .nk-modal-* .nk-yorum-*

   TUZAK NOTLARI (tasarim-tuzaklari.md):
   §A  Element seçicisi kullanılmıyor, hepsi `.vit-` önekli.
   §A  Global `section{padding-block:clamp(64px,8vw,116px)}` komşularda
       TOPLANIYOR — her bölümün kendi `padding-block`'u AÇIKÇA veriliyor.
   §A  Reset `p{margin:0}` ve `ul{list-style:none;padding:0}` veriyor;
       ihtiyaç duyulan her boşluk burada açıkça geri veriliyor.
   §A  `hidden` niteliği `display:flex/grid` ile EZİLİYOR — süzgeç
       kartları/blokları `hidden` ile gizlediği için `[hidden]`
       kuralları ŞART (yoksa süzme hiç çalışmıyor gibi görünür).
   §K  Sütunsuz grid min-content'e çakılıyor → her ızgarada açık
       `grid-template-columns` + gerekli yerde `min-width:0`.
   §K  `auto-fill` sütun sayısını MAX track boyuna göre sayıyor →
       üst sınır `1fr`, yoksa ara genişliklerde sağda ölü bant kalır.
   ================================================================== */


/* ==================================================================
   1. HERO
   ================================================================== */
.vit-hero{
  position:relative;
  background:var(--navy-d);
  color:#B6C6DC;
  padding-block:clamp(20px,3vw,32px) clamp(28px,4vw,44px);
  overflow:hidden;
}
/* Marka ışığı — kurs detay + kategori hero'suyla aynı iki katman.
   Sağdaki ikincil ışık TURKUAZ: "liste/vitrin sayfasındayım" renk
   imzası (kategori sayfasında da aynı ton, 20. tur kararı). */
.vit-hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(65% 85% at 8% 0%,  rgb(47 107 208 / .30), transparent 60%),
    radial-gradient(55% 80% at 92% 12%, rgb(64 224 195 / .12), transparent 62%);
}
.vit-hero-ic{ position:relative; z-index:1 }

/* Tek sütun tabanı `minmax(0,1fr)` — sütunsuz grid min-content'e
   çakılıyor (§K). Sayaç paneli yoksa `.vit-hero-yanli` hiç basılmıyor
   ve hero tek sütun kalıyor. */
.vit-hero-ust{
  display:grid; gap:26px;
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
/* Oran kurs detayın `.khero-grid`inden (1.15fr / .85fr, gap 52px);
   kategori sayfası da aynısını kullanıyor — üç sayfanın hero'su aynı
   ritimde olsun. */
@media (min-width:1024px){
  .vit-hero-yanli .vit-hero-ust{
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:52px;
  }
}
.vit-hero-metin{ min-width:0 }

/* Kırıntı — kurs detayın `.crumb` görünümüne çekildi. `.crumb` sınıfı
   DOĞRUDAN kullanılamadı: bizim kırıntı BreadcrumbList microdata'sı
   için öğeleri span'la sarıyor, `.crumb span{opacity:.45}` o sarmalı
   da soldururdu (kategori sayfasındaki aynı gerekçe). */
.vit-yol{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:13.5px; color:#7A8FAE; font-weight:700; margin-bottom:0;
}
.vit-yol a{ color:#8FA6C4; text-decoration:none }
.vit-yol a:hover{ color:#fff; text-decoration:underline }
.vit-yol-ayrac{ opacity:.45 }
.vit-yol b{ color:#D6E1F0; font-weight:800 }

/* Vitrin kimliği şeridi — turkuaz, kategori sayfasıyla aynı aile.
   ⚠️ `text-transform` YOK: Türkçe İ, view'da elle büyük yazıldı. */
.vit-kicker{
  margin:16px 0 10px;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:.74rem; font-weight:800; letter-spacing:.14em;
  color:#5EE6C8;
}
.vit-kicker span{ opacity:.5 }

/* ♻️ 2. tur — H1 KÜÇÜLDÜ (kullanıcı: "hero devasa olmuş, kurs detayla
   kıyasla epey büyük"). Bu sayfanın h1'i adminden geliyor ve UZUN
   (~90 karakter); kategori/kurs detayın kısa başlığına kalibre 2.7rem
   tavanı burada 4 satır dev blok üretiyordu. Tavan 2.15rem — uzun
   metinde bile 3 satırda kalıyor.
   eski: font-size:clamp(1.6rem,1.15rem + 2.1vw,2.7rem) */
.vit-h1{
  margin:0 0 12px;
  color:#fff;
  font-size:clamp(1.45rem,1.08rem + 1.6vw,2.15rem);
  line-height:1.22;
  font-weight:800;
  letter-spacing:-.015em;
  max-width:30ch;
}
/* ⚠️ `max-width` BAŞLIKTA, gövde metninde DEĞİL. `ch` cinsinden satır
   sınırı gövdede üç ayrı blokta denendi, üçünde de metin solda dar bir
   sütunda kalıp sağda ölü alan bıraktı (tasarim-tuzaklari §B). */

.vit-hero-rozetler{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;
  margin-bottom:18px;
}
/* Hap ölçüsü kurs detayın `.rating`iyle eşit; RENK YEŞİL — kategori
   sayfasında kullanıcı yeşili seçmişti, vitrin de onu izliyor. */
.vit-gar{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 15px; border-radius:999px;
  background:rgb(45 190 126 / .13);
  border:1px solid rgb(45 190 126 / .34);
  color:#7FE3B4; font-size:14px; font-weight:800;
}
.vit-gar .icon{ width:17px; height:17px; flex:none }

.vit-hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:10px }
.vit-hero-mikro{ margin:0; font-size:.82rem; color:#8FA6C6 }

/* ♻️ 2. tur — SAYAÇLAR SOLDA CAM CİP (kullanıcı: sağ panel alan
   seçiciye döndü). Kategori sayfasının `.kat-ozet-cipler` deseninin
   (19. tur) buradaki eşi. Tıklanmıyor — bilgi, gezinme değil. */
.vit-ozet-cipler{
  list-style:none; margin:22px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.vit-ozet-cipler li{
  display:inline-flex; align-items:baseline; gap:7px;
  padding:9px 15px; border-radius:999px;
  background:rgb(255 255 255 / .06);
  border:1px solid rgb(255 255 255 / .13);
  border-top-color:rgb(255 255 255 / .2);  /* 3. tur: üst ışık çizgisi */
  backdrop-filter:blur(4px);
  color:#DCE7F5; font-size:.86rem; font-weight:700;
}
.vit-ozet-cipler b{ font-size:1.08rem; font-weight:800; color:#fff }

/* --- SAĞ PANEL: ALAN SEÇİCİ ----------------------------------------
   ♻️ 2. tur — sayaç kutularının yerine 4 ana grubun cam kartları
   (kullanıcı: "sağ tarafı bomboş kalmış, 4 ana kategoriyle güzel bir
   tasarım yap"). Her kart kendi grubunun ızgara başlığına kayıyor.
   ⚠️ Kurs detayın `.khero-side`ı gibi ÇIPLAK dikey ızgara: kartların
   kendi zemini var, sarmalayıcıya cam panel verilirse kart-içinde-kart
   oluyor (kategori sayfasında 15. turda tam bu yüzden kaldırılmıştı). */
.vit-hero-yan{
  position:relative; min-width:0;
  display:grid; gap:12px; align-content:start;
  max-width:520px;
}
@media (min-width:1024px){ .vit-hero-yan{ max-width:none } }

.vit-yan-bas{
  margin:0; font-size:.72rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:#8FA6C6;
}

.vit-alan{
  display:grid; gap:10px;
  grid-template-columns:minmax(0,1fr);
}
/* Ara bantta 2×2; GENİŞ masaüstünde TEK SÜTUN dikey yığın —
   ölçüldü (1440): 2×2'de panel 225px, sol sütun 527px kalıyordu ve
   sağın altı yine boşalıyordu (ilk turdaki şikâyetin devamı).
   4 kart alt alta + önizleme satırıyla panel ~500px, iki sütun
   dengede. Kurs detayın `.khero-side`ı da dikey yığın. */
@media (min-width:480px) and (max-width:1023px){
  .vit-alan{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
/* ♻️ 3. tur (premium cila) — düz cam yerine ÜSTTEN AYDINLIK gradyan +
   derin yumuşak gölge; üst kenar bir ton açık (ışık üstten geliyor
   hissi). Tasarım 8 dili: katmanlı gölge, kıl payı çizgi. */
.vit-alan-kart{
  min-width:0;
  display:flex; align-items:center; gap:12px;
  padding:14px 13px 14px 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;
}
.vit-alan-kart:hover{
  background:linear-gradient(180deg, rgb(255 255 255 / .13), rgb(255 255 255 / .08));
  border-color:rgb(94 230 200 / .38);
  transform:translateY(-2px);
  box-shadow:0 22px 40px -24px rgb(0 0 0 / .6);
}
/* İkon rengi TURKUAZ — vitrin/liste sayfalarının renk imzası (hero
   ışığı ve kicker'la aynı aile). */
.vit-alan-iko{
  flex:none; width:40px; height:40px;
  display:grid; place-items:center; border-radius:12px;
  background:rgb(64 224 195 / .13); color:#5EE6C8;
}
.vit-alan-iko svg{ width:21px; height:21px }
.vit-alan-metin{
  flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; gap:2px;
}
.vit-alan-metin b{ font-size:.95rem; font-weight:800; color:#fff; line-height:1.3 }
.vit-alan-metin .tnum{ font-size:.78rem; color:#8FA6C6; line-height:1.35 }
/* Önizleme satırı: grubun ilk 3 sınavı. Tek satırda kalsın —
   taşarsa `…` (kart yüksekliği sınav adına göre oynamasın). */
.vit-alan-onizleme{
  margin-top:2px; font-size:.74rem; font-weight:700; color:#7EA6E0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vit-alan-onizleme em{ font-style:normal; color:#5EE6C8 }
.vit-alan-ok{
  flex:none; width:16px; height:16px; color:#7EA6E0;
  transition:transform .18s ease;
}
.vit-alan-kart:hover .vit-alan-ok{ transform:translateX(3px); color:#5EE6C8 }

.vit-yan-alt{
  margin:0; padding-top:11px;
  border-top:1px solid rgb(255 255 255 / .1);
  font-size:.83rem; line-height:1.55; color:#9DB3D0;
}

/* ⛔ 2. tur: SAYAÇ KUTULARI KULLANILMIYOR — sayılar sola,
   `.vit-ozet-cipler`e indi; karar geri alınırsa hazır.
.vit-sayac{
  list-style:none; margin:0; padding:0;
  display:grid; gap:10px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.vit-sayac li{
  min-width:0;
  display:flex; flex-direction:column; gap:2px;
  padding:14px 14px 12px; border-radius:var(--r-l);
  background:rgb(255 255 255 / .055);
  border:1px solid rgb(255 255 255 / .12);
}
.vit-sayac b{
  font-size:clamp(1.3rem,1.05rem + .8vw,1.75rem);
  font-weight:800; color:#fff; line-height:1.1;
}
.vit-sayac span{ font-size:.78rem; color:#8FA6C6; line-height:1.35 }
*/

/* kurs.css'te katmanı `.khero > *{position:relative}` veriyor ama bizim
   section `.vit-hero` — ::before ışığının üstünde kalması için karşılığı
   burada (kategori sayfasındaki aynı kural). */
.vit-hero .khero-guven{ position:relative; z-index:1 }


/* ==================================================================
   2. KATEGORİ IZGARASI
   ================================================================== */
.vit-liste{ padding-block:clamp(38px,5vw,72px) clamp(28px,4vw,56px) }

/* --- arama + grup çipleri ------------------------------------------
   Arayüz yalnız JS varken basılıyor (view `hidden` ile gönderiyor,
   betik açıyor). `[hidden]` kuralı ŞART — `display:grid` tarayıcının
   `[hidden]{display:none}` kuralını eziyor (§A). */
.vit-bul{
  display:grid; gap:14px;
  grid-template-columns:minmax(0,1fr);
  margin:0 0 clamp(22px,3vw,34px);
}
.vit-bul[hidden]{ display:none }

.vit-ara{
  position:relative; min-width:0;
  display:flex; align-items:center; gap:10px;
  padding:0 14px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:999px;
  box-shadow:var(--sh-1);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.vit-ara:focus-within{ border-color:var(--brand); box-shadow:var(--sh-2) }
.vit-ara .icon{ width:19px; height:19px; flex:none; color:var(--ink-3) }
/* Etiket ekran okuyucu için duruyor; `display:none` KULLANILMADI —
   bazı okuyucular gizli etiketi hiç okumuyor. */
.vit-gizli-etiket{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.vit-ara input{
  flex:1 1 auto; min-width:0;
  border:0; outline:0; background:none;
  padding:14px 0; font:inherit;
  /* ⚠️ 16px ALTINA İNMESİN: iOS Safari daha küçük puntoda alana
     odaklanınca sayfayı zoomluyor. */
  font-size:16px; color:var(--ink);
}
.vit-ara input::placeholder{ color:var(--ink-3) }
/* Tarayıcının kendi temizleme X'i gizleniyor — kendi düğmemiz var. */
.vit-ara input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none }
.vit-ara-sil{
  flex:none; display:grid; place-items:center;
  width:28px; height:28px; padding:0; border:0; border-radius:50%;
  background:var(--tint); color:var(--ink-2); cursor:pointer;
}
.vit-ara-sil[hidden]{ display:none }
.vit-ara-sil:hover{ background:var(--brand-w); color:var(--brand-d) }
.vit-ara-sil .icon{ width:14px; height:14px; color:inherit }

.vit-cipler{ display:flex; flex-wrap:wrap; gap:8px }
/* ⚠️ `min-height:44px` — dokunma hedefi eşiği. Ölçüldü: yalnız
   dolgu ile 43px kalıyordu ve parmak kayması komşu çipi tetikliyor
   (çerez düğmelerinde aynı eşik 39→44px yapılmıştı, §K). */
.vit-cip{
  min-height:44px; padding:9px 16px; border-radius:999px;
  display:inline-flex; align-items:center;
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--ink-2); font:inherit; font-size:.86rem; font-weight:700;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.vit-cip:hover{ border-color:var(--brand); color:var(--brand-d) }
/* Seçili çip LACİVERT — kırmızı birincil CTA'yla yarışmasın
   (kategori sayfasındaki "Paketler" düğmesiyle aynı gerekçe). */
.vit-cip.secili{
  background:var(--navy); border-color:var(--navy); color:#fff;
  box-shadow:0 10px 20px -12px rgb(11 26 51 / .5);  /* 3. tur */
}

.vit-bos-sonuc{
  margin:0 0 24px; padding:18px 20px;
  border-radius:var(--r-l);
  background:var(--tint); color:var(--ink-2);
  font-size:.95rem; line-height:1.6;
}
.vit-bos-sonuc[hidden]{ display:none }
.vit-bos-sifirla{
  margin:0; padding:0; border:0; background:none; cursor:pointer;
  font:inherit; font-weight:800; color:var(--brand-d);
  text-decoration:underline; text-underline-offset:2px;
}
.vit-bos-sifirla:hover{ color:var(--ink) }

/* --- grup başlığı --------------------------------------------------- */
.vit-grup{
  margin-bottom:clamp(26px,3.5vw,42px);
  /* 3. tur: yapışkan başlık ~79px — çıpa hedefi (hero'daki alan
     seçici buraya kaydırıyor) başlığın altında kalmasın. */
  scroll-margin-top:96px;
}
.vit-grup[hidden]{ display:none }
.vit-grup:last-child{ margin-bottom:0 }
.vit-grup-bas{
  display:flex; align-items:center; gap:11px;
  margin:0 0 16px;
  font-size:1.06rem; font-weight:800; color:var(--ink);
  letter-spacing:-.01em;
}
/* 3. tur: başlıktan sağa sönen kıl payı çizgi — bölüm ritmi (footer
   ayraç deseninin açık zemin uyarlaması; düz border tablo gibi
   duruyordu, gradyan uçta kayboluyor). */
.vit-grup-bas::after{
  content:''; flex:1 1 auto; height:1px; margin-left:4px;
  background:linear-gradient(90deg, var(--line), transparent);
}
.vit-grup-iko{
  flex:none; width:32px; height:32px;
  display:grid; place-items:center; border-radius:10px;
  background:var(--brand-w); color:var(--brand-d);
}
.vit-grup-iko svg{ width:18px; height:18px }

/* --- kart ızgarası --------------------------------------------------
   ⚠️ Üst sınır `1fr`: `auto-fill` tekrar sayısını MAX track boyuna göre
   sayıyor; sabit bir max (ör. 300px) ara genişliklerde sağda ölü bant
   bırakıyor (§K, kategori sayfasında ölçülmüştü:
   768'de 175px, 1100'de 233px ölü alan). */
.vit-izgara{
  list-style:none; margin:0; padding:0;
  display:grid; gap:16px;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:520px){
  .vit-izgara{ grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)) }
}

.vit-kart{
  min-width:0;
  display:flex; flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  box-shadow:var(--sh-1);
  overflow:hidden;
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
/* 🔴 ŞART: süzgeç kartları `hidden` ile gizliyor, `display:flex` o
   kuralı eziyor. Olmazsa arama hiçbir şey yapmıyor gibi görünür (§A). */
.vit-kart[hidden]{ display:none }
.vit-kart:hover{
  box-shadow:var(--sh-3); transform:translateY(-3px);
  border-color:rgb(47 107 208 / .28);
}

/* Oran SABİT: admin görselleri farklı en-boy oranlarında yükleniyor;
   `height:auto` bırakılınca kartlar farklı yükseklikte başlıyordu. */
.vit-kart-gorsel{
  position:relative; display:block;
  background:var(--tint); line-height:0;
  overflow:hidden;  /* 3. tur: hover zoom görseli kart dışına taşırmasın */
}
.vit-kart-gorsel img{
  width:100%; height:auto; display:block;
  aspect-ratio:16/10; object-fit:cover;
  transition:transform .4s ease;  /* 3. tur: yavaş, yumuşak zoom */
}
/* 3. tur (premium): kart hover'ında görselde hafif zoom.
   %4,5 — fark edilir ama bağırmaz; transform layout tetiklemez. */
.vit-kart:hover .vit-kart-gorsel img{ transform:scale(1.045) }
/* Görselin altına usul bir karartı — "N eğitim" rozeti açık renkli
   fotoğrafta da okunur; rozet yoksa da fotoğrafa derinlik veriyor. */
.vit-kart-gorsel::after{
  content:''; position:absolute; inset:auto 0 0;
  height:44%; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgb(11 26 51 / .28));
}
/* "N eğitim" rozeti — eski kartta bu bilgi HİÇ yoktu; ziyaretçiyi
   doğru kategoriye götüren en ucuz sinyal. */
.vit-kart-adet{
  position:absolute; right:10px; bottom:10px;
  padding:4px 10px; border-radius:999px;
  background:rgb(11 26 51 / .82); color:#fff;
  font-size:.72rem; font-weight:800; line-height:1.4;
  backdrop-filter:blur(4px);
}

.vit-kart-govde{
  min-width:0; flex:1 1 auto;
  padding:14px 15px 16px;
  display:flex; flex-direction:column; gap:6px;
}
.vit-kart-ad{
  margin:0; font-size:1.02rem; line-height:1.3;
  font-weight:800; color:var(--ink);
}
.vit-kart-ad a{ color:inherit; text-decoration:none }
/* Kartın tamamı tıklanabilir olsun ama DOM'da tek gerçek link kalsın:
   başlıktaki bağlantı kartı kaplayan görünmez bir katman açıyor.
   ⚠️ Görsel bağlantısı `tabindex="-1" aria-hidden` (view'da) — iki
   link tek hedef demek olurdu. */
.vit-kart-ad a::after{
  content:''; position:absolute; inset:0; z-index:1;
}
.vit-kart{ position:relative }
.vit-kart-ad a:hover{ color:var(--brand-d) }

/* ⛔ 2. tur: `.vit-kart-uzun` (big_name satırı) KULLANILMIYOR —
   kullanıcı: "metin yoğunluğu fazla". Aramada hâlâ çalışıyor
   (data-vit-ad taşıyor); karar geri alınırsa kural hazır.
.vit-kart-uzun{
  margin:0; font-size:.78rem; line-height:1.4;
  color:var(--ink-3); font-weight:700;
}
*/
/* 🔴 Bu paragraf eski sayfada `display:none` kutusunun İÇİNDEYDİ
   (25 kategori × ~600 karakter = 15 KB gizli metin). Artık görünür;
   metin DOM'da TAM, kırpan YALNIZCA bu kural.
   ♻️ 2. tur: clamp 3 → 2 satır (metin yoğunluğu). */
.vit-kart-aciklama{
  margin:2px 0 0; font-size:.85rem; line-height:1.55; color:var(--ink-2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
/* ♻️ 2. tur — düz ok linki DÜĞME oldu (kullanıcı isteği). Lacivert
   dolgulu küçük hap: kırmızı birincil CTA'yla yarışmıyor (kategori
   sayfasındaki "Paketler" düğmesiyle aynı gerekçe). Kartın tıklanır
   katmanı başlık linkinin `::after`ı; bu span görsel. */
.vit-kart-git{
  /* `margin-top:auto` düğmeyi kart dibine iter (kısa açıklamada hiza
     bozulmasın); 10px'lik nefes payı padding-top'un işi olsaydı hap
     dolgusu bozulurdu, o yüzden gövdenin gap'i + auto yetiyor. */
  margin-top:auto; align-self:start;
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:999px;
  background:var(--navy); color:#fff;
  font-size:.82rem; font-weight:800; line-height:1.2;
  box-shadow:0 10px 20px -14px rgb(11 26 51 / .55);  /* 3. tur */
  transition:background .18s ease, box-shadow .18s ease;
}
.vit-kart:hover .vit-kart-git{
  background:var(--navy-t);
  box-shadow:0 12px 22px -12px rgb(11 26 51 / .6);
}
.vit-kart-git svg{ width:13px; height:13px; transition:transform .18s ease }
.vit-kart:hover .vit-kart-git svg{ transform:translateX(3px) }


/* ==================================================================
   3. YORUMLAR
   ⚠️ Üst boşluk kısıldı: global section padding'i komşuyla toplanıp
      ~190px ölü bant üretiyor (tasarim-tuzaklari §A).
   ================================================================== */
.vit-yorumlar{ padding-block:clamp(28px,3.5vw,52px) }


/* ==================================================================
   4. HAKKINDA — admin metinleri
   ♻️ 2. tur — SSS AKORDİYONU (kullanıcı: "sss gibi akordiyon olabilir").
   Görünüm tamamen kurs.css'ten MİRAS: `.faq .sss-liste details/summary/
   .ans` — burada yalnız bölüm boşluğu var. JS yok, native <details>.
   ================================================================== */
.vit-icerik{ padding-block:clamp(28px,3.5vw,56px) clamp(38px,5vw,72px) }

/* ⛔ 2. tur: KARTLI "devamını oku" DÜZENİ KULLANILMIYOR — akordiyona
   geçildi; karar geri alınırsa kurallar hazır.
.vit-icerik-liste{
  display:grid; gap:16px;
  grid-template-columns:minmax(0,1fr);
}
.vit-icerik-blok{
  min-width:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  box-shadow:var(--sh-1);
  padding:clamp(18px,2.5vw,26px);
}
.vit-icerik-blok h3{
  margin:0 0 10px; font-size:1.08rem; line-height:1.4;
  font-weight:800; color:var(--ink);
}
.vit-icerik-metin p{ margin:0 0 .9em; font-size:.95rem; line-height:1.75; color:var(--ink-2) }
.vit-icerik-metin p:last-child{ margin-bottom:0 }
.vit-icerik-metin a{ color:var(--brand-d); font-weight:600; text-decoration:underline; text-underline-offset:2px }
.vit-icerik-metin a:hover{ color:var(--ink) }
.vit-icerik-metin :is(ul,ol){ margin:0 0 .9em 1.2em; padding:0 }
.vit-icerik-metin li{ margin-bottom:.35em; font-size:.95rem; line-height:1.7; color:var(--ink-2) }
.js-vit-icerik .vit-icerik-metin{
  position:relative; overflow:hidden;
  max-height:9.2em;
  mask-image:linear-gradient(180deg, #000 58%, transparent);
}
.js-vit-icerik .vit-icerik-metin.acik{ max-height:none; mask-image:none }
.vit-icerik-ac{
  display:inline-flex; align-items:center; gap:6px; margin-top:12px;
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-size:.86rem; font-weight:800; color:var(--brand-d);
}
.vit-icerik-ac[hidden]{ display:none }
.vit-icerik-ac:hover{ color:var(--ink) }
.vit-icerik-ac svg{ width:14px; height:14px; transition:transform .18s ease }
.vit-icerik-ac[aria-expanded="true"] svg{ transform:rotate(180deg) }
*/


/* ==================================================================
   5. ERİŞİLEBİLİRLİK + ÇIPA CİLASI                        (3. tur)
   ================================================================== */
/* Klavye kullanıcısı: kartın gerçek linki başlıkta ama tıklanır alan
   `::after` katmanı — odak halkası görünmez kalıyordu. Odak kartın
   KENDİSİNE çiziliyor. (`:has` destekleniyor — çerez düzeltmesinde
   canlıda doğrulanmıştı, §K.) */
.vit-kart:has(a:focus-visible){
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgb(47 107 208 / .25), var(--sh-2);
}
.vit-kart .vit-kart-ad a:focus-visible{ outline:none }
.vit-alan-kart:focus-visible{
  outline:2px solid #5EE6C8; outline-offset:2px;
}
/* Diğer çıpa hedefleri de yapışkan başlığın altında kalmasın. */
#kategoriler, #yorumlar, #hakkinda{ scroll-margin-top:88px }

/* Hareket azaltma tercihi: zoom/kaydırma efektleri kapanıyor, bilgi
   kaybı yok (akordiyon nabzındaki kararla aynı ilke, WCAG). */
@media (prefers-reduced-motion:reduce){
  .vit-kart, .vit-kart-gorsel img, .vit-alan-kart,
  .vit-alan-ok, .vit-kart-git svg{ transition:none }
  .vit-kart:hover{ transform:none }
  .vit-alan-kart:hover{ transform:none }
  .vit-kart:hover .vit-kart-gorsel img{ transform:none }
}


/* ==================================================================
   6. DAR EKRAN
   ⚠️ 320 / 344 / 360 / 390 taraması yapılacak — tek genişlikte test
      etmek 2026-08-29'da kırık formu göstermemişti (§K).
   ================================================================== */
@media (max-width:560px){
  .vit-h1{ max-width:none }
  .vit-hero-cta .btn{ flex:1 1 100%; justify-content:center }
  .vit-kart-govde{ padding:13px 13px 15px }
  .vit-grup-bas{ font-size:1rem }
}