/* ==================================================================
   egitmenler.css — EĞİTMENLER SAYFASI (.eg-)               2026-09-09
   ==================================================================
   Sayfa  : views/yeni/egitmenler.php  (/egitmenler)
   Yükleme: ortak.css + kurs.css + vitrin.css + BU DOSYA (+ tw.css)
   Plan   : memory-bank/egitmenler-sayfasi-analiz-ve-plan.md

   BURADA OLMAYANLAR (yüklü dosyalardan geliyor, YENİDEN YAZILMADI):
     .vit-hero .vit-h1 .vit-yol .vit-kicker .vit-hero-cta .vit-hero-yan
     .vit-yan-bas .vit-yan-alt .vit-bul .vit-ara .vit-cipler .vit-cip
     .vit-bos-sonuc .vit-bos-sifirla                        (vitrin.css)
     .kadro (lacivert bölüm) .inst .inst-foto .inst-brans .inst-ozet
     .inst-devam + .nk-modal ailesi + .faq .sss-liste        (kurs.css)

   ⚠️ KADRO = LACİVERT marka ritmi korunuyor: arşiv bölümü kurs/
   kategori/hakkımızdadaki .kadro yüzeyinin tam sayfa hâli. Kartlar
   kurs.css'in .inst kartları — burada yalnız ŞERİT→IZGARA düzeni ve
   sayfaya özel parçalar var. .insts (şerit) kuralları .eg-izgara'ya
   BULAŞMAZ (ayrı sınıf), ayna gerekmedi.
   ================================================================== */


/* ---- HERO: cevap-önce özet + künye + deste --------------------------
   Koyu hero zemininde (vit-hero) yorumlar sayfasının dili. */
.eg-cevap{
  margin:14px 0 22px; max-width:62ch;
  font-size:clamp(15.5px,1.5vw,17px); line-height:1.7; color:#C9D8EE;
}
.eg-cevap b{ color:#fff }

/* Künye — cam satırlar (hakkımızda deseninin bu sayfadaki karşılığı). */
.eg-kunye{
  list-style:none; margin:0; padding:0;
  display:grid; gap:8px;
}
.eg-kunye li{
  display:flex; align-items:baseline; gap:12px;
  padding:11px 14px; border-radius:14px;
  background:rgb(255 255 255 / .07);
  border:1px solid rgb(255 255 255 / .12);
}
.eg-kunye b{
  flex:none; min-width:44px;
  font-size:20px; font-weight:900; letter-spacing:-.02em; color:#fff;
}
.eg-kunye span{ font-size:13px; font-weight:700; color:#9DB3D0 }

/* Avatar destesi — yorumlar sayfasındaki .yr-deste'nin kadro hâli
   (o CSS bu sayfada yüklü değil; kopya küçük ve sayfaya özel). */
.eg-deste{
  display:flex; align-items:center; gap:12px; min-width:0;
  padding:11px 14px; border-radius:14px;
  background:rgb(255 255 255 / .05);
  border:1px solid rgb(255 255 255 / .1);
  transition:border-color .18s ease, background .18s ease;
}
.eg-deste:hover{ background:rgb(255 255 255 / .09); border-color:rgb(255 255 255 / .22) }
.eg-deste-fotolar{ display:flex; flex:none }
.eg-deste-fotolar img{
  width:34px; height:34px; border-radius:50%; object-fit:cover;
  border:2px solid #1B3157; background:#233D66;
}
.eg-deste-fotolar img + img{ margin-left:-10px }
.eg-deste-metin{ font-size:12.5px; line-height:1.45; color:#9DB3D0; min-width:0 }
.eg-deste-metin b{ color:#fff; font-weight:800 }


/* ---- ARŞİV BÖLÜMÜ (lacivert .kadro yüzeyi) ------------------------- */
/* Tam sayfa bölüm: kurs detaydaki kompakt padding yerine liste nefesi. */
.eg-arsiv{ padding-block:clamp(38px,5vw,64px) clamp(32px,4vw,56px) }

/* Süzgeç — vit-bul açık zemin bileşeni; koyu zeminde çipler cam olur.
   Arama kutusu beyaz kalıyor (giriş alanı — kontrast doğru). */
.eg-bul{ margin-bottom:clamp(20px,3vw,30px) }
.eg-bul .vit-cip{
  background:rgb(255 255 255 / .07);
  border-color:rgb(255 255 255 / .18);
  color:#C9D8EE;
}
.eg-bul .vit-cip:hover{ border-color:#8FB4EA; color:#fff }
.eg-bul .vit-cip.secili{
  background:#fff; border-color:#fff; color:var(--navy);
}
.eg-bos{ margin-bottom:clamp(20px,3vw,30px); color:#C9D8EE }
.eg-bos .vit-bos-sifirla{ color:#8FB4EA }
.eg-bos .vit-bos-sifirla:hover{ color:#fff }


/* ---- IZGARA ---------------------------------------------------------
   Şerit değil arşiv: tamamı ekranda. .insts kuralları bulaşmıyor
   (ayrı sınıf) — .inst kartının kendisi kurs.css'ten geliyor. */
.eg-izgara{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr; gap:16px;
}
@media (min-width:560px){  .eg-izgara{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:900px){  .eg-izgara{ grid-template-columns:repeat(3,1fr) } }
@media (min-width:1240px){ .eg-izgara{ grid-template-columns:repeat(4,1fr) } }
.eg-kart{ min-width:0 }
.eg-kart[hidden]{ display:none }
.eg-izgara .inst{ height:100% }

/* Fotosuz kart: baş harf rozeti (yorum motorunun .ava dili, 96px). */
.eg-harf{
  width:96px; height:96px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  font-size:30px; font-weight:900; letter-spacing:.02em; color:#fff;
  background:rgb(255 255 255 / .1);
  box-shadow:0 0 0 3px rgb(255 255 255 / .14), 0 10px 24px -12px rgb(0 0 0 / .55);
}

/* Özgeçmiş: TAMAMI DOM'da. kurs.css'in koşulsuz 4 satır clamp'ı burada
   JS şartına bağlanıyor — JS yoksa metin tam okunur, modal gerekmez
   (eski sayfanın "kırpıldı ama Devamı yok" kaybı bitiyor, plan §A1). */
.eg-izgara .inst-ozet{
  display:block; overflow:visible;
  -webkit-line-clamp:unset; line-clamp:unset;
  text-align:left;
}
html.js-eg .eg-izgara .inst-ozet{
  display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
  -webkit-line-clamp:5; line-clamp:5;
}

/* "Özgeçmişi oku" çipi: kartın tamamını kaplayan tek kontrol
   (rev-tam deseni — .inst zaten position:relative). */
.eg-tam{
  background:none; border:0; padding:0; padding-top:14px;
  font:inherit; cursor:pointer;
  font-size:12.5px; font-weight:800; color:#8FB4EA;
}
.eg-tam::after{ content:""; position:absolute; inset:0 }
.eg-tam:focus-visible{ outline:none }
/* inline-flex yazar stili [hidden]'ı eziyor (kadro-ok dersi). */
.eg-tam[hidden]{ display:none }
.eg-izgara .inst.tiklanir:focus-within{
  border-color:#8FB4EA; box-shadow:0 0 0 3px rgb(143 180 234 / .28);
}

/* Kart altı kategori çipleri. */
.eg-kart-alt{
  margin-top:12px; padding-top:12px; width:100%;
  border-top:1px solid rgb(255 255 255 / .12);
  display:flex; justify-content:center; flex-wrap:wrap; gap:6px;
}
.eg-kat-cip{
  display:inline-block; padding:3px 10px; border-radius:999px;
  font-size:11px; font-weight:800; letter-spacing:.02em;
  background:rgb(255 255 255 / .12); color:#BCD3F2; white-space:nowrap;
}

/* Hash vurgusu (§F7): çapayla gelinen kart kısa süre parlar. */
.eg-vurgu{
  border-color:#8FB4EA !important;
  box-shadow:0 0 0 3px rgb(143 180 234 / .45), 0 18px 36px -22px rgb(0 0 0 / .55) !important;
}
@media (prefers-reduced-motion:no-preference){
  .eg-vurgu{ animation:egVurgu 1.2s ease 2 }
}
@keyframes egVurgu{
  50%{ box-shadow:0 0 0 6px rgb(143 180 234 / .25), 0 18px 36px -22px rgb(0 0 0 / .55) }
}


/* ---- MODAL İÇİ ------------------------------------------------------
   Kabuk ortak.css'ten (dialog.nk-modal) — gövde padding'i oradan
   geliyor. ⚠️ `nk-modal-yorum` KULLANILMIYOR: o sınıf gövde
   padding'ini sıfırlıyor (video için) ve özgeçmiş metni çıplak
   kalıyordu (2026-09-09, kullanıcı canlıda gördü). Genişlik burada;
   koyu kart parçalarının (foto halkası / baş harf) beyaz uyarlaması. */
dialog.nk-modal-egitmen{ width:min(680px, calc(100vw - 28px)) }
.eg-modal-kim{ display:flex; justify-content:center; margin-bottom:14px }
.eg-modal-kim .inst-foto{
  width:84px; height:84px; border-radius:50%; overflow:hidden;
  background:var(--tint);
  box-shadow:0 0 0 3px var(--line), 0 10px 24px -14px rgb(23 43 76 / .4);
}
.eg-modal-kim .inst-foto img{ width:100%; height:100%; object-fit:cover; display:block }
.eg-modal-kim .eg-harf{
  width:84px; height:84px; font-size:26px; color:var(--navy);
  background:var(--tint);
  box-shadow:0 0 0 3px var(--line);
}
.eg-modal-metin{
  margin:0; font-size:15px; line-height:1.75; color:var(--ink-2);
  white-space:pre-line;
}


/* ---- SSS ------------------------------------------------------------ */
.eg-sss{ padding-block:clamp(38px,5vw,72px); scroll-margin-top:90px }