/* ============================================================
   KURS.CSS — kurs detay / reklam iniş sayfası (online-tus-kursu tarzı)
   ------------------------------------------------------------
   ortak.css'ten SONRA yuklenir; token'lari oradan alir.
   Sayfa bloklari: kurs hero, guven seridi, YZ asistani vitrini,
   paketler + karsilastirma, egitmenler, yorumlar, SSS, ilgili egitimler.
   NOT: .ava, .revs/.rev, .faq, .final kurallari anasayfa.css'ten
   aynen tasindi; 3. sayfa da kullaninca ortak.css'e kaldirilmali.
   ============================================================ */

/* ============ 2. KURS HERO ============
   Koyu lacivert cam — menü ve footer ile AYNI dil. Beyaz hero denendi ve
   sayfayı kopuk gösteriyordu: üstte koyu menü, altta koyu footer, arada
   bomboş beyaz bir bant. Koyu zemin ayrıca h1 ve CTA kontrastını yükseltiyor. */
.khero{
  position:relative;
  background:var(--navy-d);
  color:#B6C6DC;
  padding-block:clamp(22px,3vw,34px) 0;
  overflow:hidden;
}
/* marka ışığı + ince ızgara: düz lacivert bloğu "premium" yapan iki katman */
.khero::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(126 176 255 / .12), transparent 62%);
}
.khero::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgb(255 255 255 / .035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / .035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(75% 60% at 50% 0%, #000, transparent 75%);
}
.khero > *{ position:relative }

.khero-grid{ display:grid; grid-template-columns:1fr; gap:36px; align-items:start }
@media (min-width:980px){ .khero-grid{ grid-template-columns:1.15fr .85fr; gap:52px } }
.khero-main{ min-width:0 }

.crumb{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:13.5px; color:#7A8FAE; font-weight:700 }
.crumb a{ color:#8FA6C4 }
.crumb a:hover{ color:#fff }
.crumb span{ opacity:.45 }
.crumb b{ color:#D6E1F0; font-weight:800 }

.khero h1{
  font-size:clamp(30px,4.2vw,44px); margin:14px 0 0;
  letter-spacing:-.04em; line-height:1.08; color:#fff;
}
.khero h1 .hl{ color:#7EB0FF }

/* --- giriş metni: tamamı DOM'da, görsel olarak katlı --- */
.lede{ color:#A8BAD2; font-size:clamp(16px,1.5vw,18px); margin-top:16px; max-width:56ch }
.lede :is(b, strong){ color:#DCE6F3 }
/* katlama YALNIZ JS varken; JS yoksa metin tam açılır */
.js-lede .lede{
  position:relative; overflow:hidden;
  max-height:7.4em;
  mask-image:linear-gradient(180deg, #000 60%, transparent);
}
.js-lede .lede.acik{ max-height:none; mask-image:none }
.lede-ac{
  display:none;
  align-items:center; gap:6px; margin-top:10px;
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-size:14px; font-weight:800; color:#7EB0FF;
}
.js-lede .lede-ac{ display:inline-flex }
/* metin zaten kısaysa JS butona hidden koyuyor; yukarıdaki display kuralı
   tarayıcının [hidden] kuralını ezdiği için burada tekrar gizlemek şart */
.lede-ac[hidden]{ display:none }
.lede-ac:hover{ color:#fff }
.lede-ac svg{ width:14px; height:14px; transition:transform .18s ease }
.lede-ac[aria-expanded="true"] svg{ transform:rotate(180deg) }

.hero-cta{ display:flex; gap:12px; margin-top:24px; flex-wrap:wrap }
/* koyu zeminde outline buton görünmüyordu — cam yüzeyli varyant */
.btn-cam{
  background:rgb(255 255 255 / .07);
  border:1px solid rgb(255 255 255 / .18);
  color:#E8EEF8;
}
.btn-cam:hover{ background:rgb(255 255 255 / .14); border-color:rgb(255 255 255 / .34); color:#fff }
.hero-note{ margin-top:14px; font-size:13.5px; color:#7A8FAE; max-width:60ch }

.khero-meta{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:22px }
.rating{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 14px; border-radius:999px;
  background:rgb(255 255 255 / .06); border:1px solid rgb(255 255 255 / .12);
  font-size:14px; font-weight:800; color:#E8EEF8;
}
.rating-stars{ display:inline-flex; gap:2px; color:#F6A609 }
.yldz{ width:16px; height:16px }
.yldz.dolu{ fill:#F6A609; stroke:none }
.yldz.yarim{ stroke:none }
.yldz.bos{ fill:rgb(255 255 255 / .16); stroke:none }
.rating-say{ color:#8FA6C4; font-weight:700; font-size:13px }
/* garanti rozeti — kirmizinin korundugu uc yerden biri */
.garanti{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 15px; border-radius:999px;
  background:rgb(225 29 72 / .16); border:1px solid rgb(255 122 153 / .34);
  font-size:14px; font-weight:800; color:#FFC2CE;
}
.garanti .icon{ width:17px; height:17px }

/* --- sag taraf: sayac + YZ karti + maskot --- */
/* tek sütuna düşünce ortalamıyoruz: sola yaslı kalsın ki üstündeki
   başlık/metin bloğuyla aynı hizada dursun */
.khero-side{ position:relative; width:100%; max-width:520px; display:grid; gap:14px }
@media (min-width:980px){ .khero-side{ max-width:none } }

.khero-sayac{
  /* gap yok: bas/govde/link kendi dikey boşluğunu veriyor (eskiden
     yalnız "kalan gün" vardı, satırlar arası 2px yeterliydi). */
  display:grid; gap:0;
  padding:16px 20px 14px; border-radius:16px;
  background:linear-gradient(135deg, rgb(225 29 72 / .22), rgb(255 255 255 / .04));
  border:1px solid rgb(255 122 153 / .28);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .08);
}
.khero-sayac-alt{
  display:block; margin:0 0 8px;
  font-size:11.5px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:#FFB3C4;
}

/* --- hero sinav takvimi (2026-08-11) ---
   Yayındaki düzen: üstte başlık + geri sayım, altta beş tarih.
   Başlık ortalı: "2026 TUS/2 Sınav takvimi". Geri sayım görsel; bot
   tarihi alttaki <time datetime> listesinden okur. */
.khero-sayac-bas{
  display:flex; justify-content:center; margin-bottom:10px;
}
.khero-sayac-ust{
  text-align:center;
  font-size:14.5px; font-weight:800; letter-spacing:-.01em; color:#fff;
}
.khero-sayac-govde{ display:grid; gap:14px }
.khero-sayac-sol{
  display:grid; gap:8px;
  padding-bottom:14px;
  border-bottom:1px solid rgb(255 255 255 / .16);
}
.khero-gerisayim{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px;
}
.khero-gs-hucre{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:12px 6px 10px;
  border-radius:12px;
  background:rgb(255 255 255 / .08);
  border:1px solid rgb(255 122 153 / .28);
}
.khero-gs-hucre b{
  font-size:24px; font-weight:900; line-height:1; color:#fff;
  letter-spacing:-.02em;
}
.khero-gs-hucre span{
  font-size:10.5px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:#FFC2CE;
}

.khero-takvim{ margin:0; display:grid; gap:8px }
/* align-items:start — admin etiketleri uzun ("Sınav Başvuru Başlangıç
   Tarihi"); iki satıra kırılınca tarih üstte asılı kalmasın. */
.khero-takvim > div{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px }
.khero-takvim dt{ font-size:13px; font-weight:700; line-height:1.35; color:#B7C6DA; min-width:0 }
.khero-takvim dd{ margin:0; font-size:13.5px; font-weight:800; line-height:1.35; color:#fff; white-space:nowrap; flex:0 0 auto }
.khero-takvim dd time{ color:inherit; font:inherit }
/* Açıklanmamış tarih sayı değil cümle: aynı ağırlıkta basılırsa satır
   "18.09.2026" kadar güçlü okunuyor ve göz yanlış yere gidiyor. */
.khero-takvim dd.bos{ font-size:12px; font-weight:700; color:#8FA0B8 }
/* Geçmiş aşama soluk, sıradaki aşama pembe: "başvuru kapandı mı?" sorusu
   panele bakar bakmaz cevaplansın. */
.khero-takvim .gecti dt{ color:#7C8BA1 }
.khero-takvim .gecti dd{ color:#93A2B6; font-weight:700 }
.khero-takvim .sirada dt{ color:#FFC2CE }
.khero-takvim .sirada dd{ color:#fff }

@media (max-width:560px){
  .khero-sayac-govde{ gap:12px }
  .khero-sayac-sol{ padding-bottom:12px }
  .khero-gerisayim{ gap:5px }
  .khero-gs-hucre{ padding:7px 2px 6px; border-radius:999px }
  .khero-gs-hucre b{ font-size:16px }
  .khero-gs-hucre span{ font-size:9px; letter-spacing:.03em }
  .khero-takvim{ gap:6px }
  .khero-takvim dt{ font-size:12px }
  .khero-takvim dd{ font-size:12.5px }
}

.yz-teaser{
  position:relative; padding:20px 22px 22px;
  border-radius:18px;
  background:linear-gradient(160deg, rgb(255 255 255 / .085), rgb(255 255 255 / .03));
  border:1px solid rgb(255 255 255 / .13);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .1), 0 24px 50px -34px rgb(0 0 0 / .9);
  /* maskot sağ altta oturuyor; metin onun altına girmesin */
  padding-right:118px;
}
.yz-tag{
  display:inline-block; font-size:11.5px; font-weight:900; letter-spacing:.12em;
  text-transform:uppercase; color:#9CC4FF;
  background:rgb(47 107 208 / .28); border:1px solid rgb(126 176 255 / .3);
  border-radius:999px; padding:5px 11px; margin-bottom:12px;
}
.yz-teaser > p{ font-size:15.5px; font-weight:800; color:#fff; margin:0 }
.yz-teaser .yz-ans{ font-size:14px; font-weight:600; color:#A8BAD2; margin-top:8px }
.yz-more{
  display:inline-flex; align-items:center; margin-top:14px;
  font-size:14px; font-weight:800; color:#7EB0FF;
  border-bottom:2px solid rgb(126 176 255 / .35); padding-bottom:2px;
}
.yz-more:hover{ color:#fff; border-color:#fff }
/* maskot: eskiden 280px'ti ve kartın üstüne biniyordu, kompozisyon
   dağınık duruyordu. Artık kartın sağ alt köşesine oturan bir öge. */
.khero-owl{
  position:absolute; right:10px; bottom:0; width:112px;
  filter:drop-shadow(0 14px 20px rgb(0 0 0 / .45));
  pointer-events:none;
}
.khero-owl img{ width:100%; height:auto; display:block }
@media (max-width:520px){
  .yz-teaser{ padding-right:100px }
  .khero-owl{ width:96px }
}

/* --- hero alti guven seridi ---
   2026-08-11: sayi rozetleri → sabit metin + ikon.
   ⚠️ margin:0 / padding:0 YAZMA — .wrap'in margin-inline:auto ve
   padding-inline'ini ezer; serit sola yapisir, sagda olu alan kalir
   (ekran goruntusuyle dogrulandi). */
.khero-guven{
  list-style:none;
  display:grid; grid-template-columns:1fr 1fr; gap:16px 18px;
  width:100%; max-width:var(--maxw);
  margin-inline:auto;
  margin-top:clamp(26px,3vw,38px); margin-bottom:0;
  padding-inline:22px;
  padding-top:clamp(20px,2.4vw,28px); padding-bottom:clamp(24px,3vw,36px);
  border-top:1px solid rgb(255 255 255 / .12);
}
@media (min-width:1700px){
  .khero-guven{ padding-inline:32px }
}
@media (min-width:900px){
  .khero-guven{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:18px 28px;
  }
}
.khero-guven-madde{
  display:flex; align-items:center; gap:12px; min-width:0;
}
/* Geniste her hucrede ikon+metin ortalanir; 4 madde banda esit yayilir. */
@media (min-width:900px){
  .khero-guven-madde{ justify-content:center }
}
.khero-guven-iko{
  flex:none; width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:14px;
  color:#B7D0F5;
  background:linear-gradient(160deg, rgb(255 255 255 / .14), rgb(255 255 255 / .05));
  border:1px solid rgb(255 255 255 / .15);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .12);
}
.khero-guven-iko svg{ width:22px; height:22px; display:block }
.khero-guven-metin{
  font-size:13.5px; font-weight:800; color:#EAF1F9;
  letter-spacing:-.015em; line-height:1.3;
}
@media (min-width:900px){
  .khero-guven-metin{ font-size:14.5px }
}
@media (max-width:420px){
  .khero-guven{ gap:14px 14px }
  .khero-guven-iko{ width:40px; height:40px; border-radius:12px }
  .khero-guven-iko svg{ width:20px; height:20px }
  .khero-guven-metin{ font-size:12.5px }
}

/* ============ 2b. KURSA BAKIS — video + admin metni + bilgi satirlari ============
   Canlida bu ucluk hero'nun icindeydi; ilk ekrani sisirip birincil CTA'yi
   957px'e itiyordu. Ayri BEYAZ bir bolume alindi: lacivert hero → beyaz
   anlatim → acik mavi paketler. Ust uste iki ayni zemin ritmi olduruyordu. */
.kbakis{ background:var(--surface); border-bottom:1px solid var(--line) }
/* Global section dolgusu (~64-116px) video → YZ → paketler zincirinde
   uc kez ust uste biniyordu. Bu uc bolum kendi nefesini kisaltir; gecis
   boslugu birlesik ~70-90px civarina iner. */
.kbakis{ padding-block:clamp(28px,3.2vw,42px) clamp(24px,2.8vw,36px) }
.kbakis-grid{ display:grid; grid-template-columns:1fr; gap:34px; align-items:start }
@media (min-width:980px){ .kbakis-grid{ grid-template-columns:1fr 1fr; gap:48px } }

/* --- tanitim videosu (lite-youtube cephesi) ---
   lite-yt-custom.css lite-youtube'a max-width:720px veriyor; kolonu
   doldurabilmesi icin ezilmeli. Oran .yt-video-aspect'in padding-top'u
   ile kuruluyor (canlidaki calisan yapinin aynisi) — boylece playlist
   dalindaki sarmalayicisiz iframe de ayni cerceveye oturuyor. */
.kbakis-video{ min-width:0 }
.kbakis-video .yt-video-card{
  max-width:none; width:100%; margin:0; padding:0;
  border-radius:var(--r-l); overflow:hidden;
  /* ic hairline: cerceve poster ne olursa olsun kadraji tanimliyor */
  box-shadow:var(--sh-3), inset 0 0 0 1px rgb(255 255 255 / .12);
  transition:box-shadow .25s ease, transform .25s ease;
}
.kbakis-video .yt-video-card:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 8px rgb(23 43 76 / .06), 0 30px 64px -26px rgb(23 43 76 / .42),
             inset 0 0 0 1px rgb(255 255 255 / .16);
}
.kbakis-video .yt-video-aspect{ position:relative; width:100%; padding-top:56.25%; background:#000 }
.kbakis-video .yt-video-aspect lite-youtube,
.kbakis-video .yt-video-aspect iframe{
  position:absolute; inset:0; width:100%; height:100%; max-width:none; border:0;
}
.kbakis-video > .yt-video-card > iframe{
  display:block; width:100%; aspect-ratio:16/9; height:auto; border:0;
}

/* --- oynat cephesi ---
   Stok lite-youtube dugmesi YouTube logosu + "filter:grayscale(100%)"
   idi; ders slaytindan olusan posterin uzerinde soluk gri bir dikdortgen
   olarak duruyordu. Yerine cam daire + beyaz ucgen.
   Scrim dugmenin KENDI arka plani: oynatinca vendor kurali dugmeyi
   (opacity:0) siliyor, scrim de onunla gidiyor — ayri bir katman
   koysaydik video oynarken uzerinde karartma kalirdi. Posterin alt
   seridinde ekran kaydi arac cubugu goruluyor, onu bastiriyor. */
.kbakis-video .lty-playbtn{
  filter:none;
  background:linear-gradient(to top, rgb(6 12 24 / .92) 0%, rgb(6 12 24 / .55) 12%, rgb(6 12 24 / .12) 30%, rgb(6 12 24 / 0) 48%);
}
/* Ust seritteki basligi vendor zaten basiyor (content:attr(data-title)) ve
   oynatinca kendisi gizliyor; yazi tipini/olcegini temaya cekiyoruz.
   Metni CSS'ten veriyoruz: helper site geneli, data-title icin imzasini
   degistirmek canli sayfalari da etkilerdi. */
.kbakis-video lite-youtube::before{
  content:"Tanıtım videosu";
  height:auto; padding:16px 20px 30px;
  font-family:inherit; font-size:12px; font-weight:900;
  letter-spacing:.11em; text-transform:uppercase; color:rgb(255 255 255 / .92);
  text-shadow:0 1px 6px rgb(0 0 0 / .5);
  background-image:linear-gradient(180deg, rgb(6 12 24 / .72) 0%, rgb(6 12 24 / .38) 45%, rgb(6 12 24 / 0) 100%);
}
.kbakis-video .lty-playbtn::before{
  content:""; position:absolute; left:50%; top:50%;
  width:74px; height:74px; margin:-37px 0 0 -37px; border-radius:50%;
  background:rgb(255 255 255 / .15); border:1.5px solid rgb(255 255 255 / .45);
  box-shadow:0 12px 34px rgb(0 0 0 / .4);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.kbakis-video .lty-playbtn::after{
  content:""; position:absolute; left:50%; top:50%;
  margin:-13px 0 0 -8px;              /* ucgenin optik merkezi govdesinden saga kacik */
  border-left:22px solid #fff; border-block:13px solid transparent;
}
.kbakis-video .yt-video-card:hover .lty-playbtn::before,
.kbakis-video .lty-playbtn:focus-visible::before{
  background:var(--red); border-color:rgb(255 255 255 / .8); transform:scale(1.07);
}
.kbakis-video .lty-playbtn:focus-visible{ outline:3px solid #fff; outline-offset:-6px }
/* dar ekranda kadraj ~285px; 74px'lik daire kareyi yutuyordu */
@media (max-width:560px){
  .kbakis-video .lty-playbtn::before{ width:58px; height:58px; margin:-29px 0 0 -29px }
  .kbakis-video .lty-playbtn::after{ border-left-width:17px; border-block-width:10px; margin:-10px 0 0 -6px }
}
@media (prefers-reduced-motion:reduce){
  .kbakis-video .yt-video-card,
  .kbakis-video .yt-video-card:hover,
  .kbakis-video .lty-playbtn::before{ transition:none; transform:none }
}

/* --- oy verme --- */
.oyla{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; margin-top:14px }
.oyla-ust{ font-size:13.5px; font-weight:800; color:var(--ink-2) }
/* row-reverse: DOM 5→1, ekranda 1→5. "isaretliden sonra gelenler" bu
   sayede soldaki (daha kucuk) yildizlar oluyor; dolma yonu dogru. */
.oyla-yildiz{ display:flex; flex-direction:row-reverse; gap:2px; border:0; margin:0; padding:0; min-width:0 }
.oyla-yildiz input{ position:absolute; width:1px; height:1px; opacity:0 }
.oyla-yildiz label{
  cursor:pointer; padding:2px; line-height:0;
  color:rgb(23 43 76 / .17); transition:color .12s ease, transform .12s ease;
}
.oyla-yildiz svg{ width:22px; height:22px; fill:currentColor; display:block }
.oyla-yildiz label:hover,
.oyla-yildiz label:hover ~ label,
.oyla-yildiz input:checked ~ label{ color:#F6A609 }
.oyla-yildiz label:hover{ transform:scale(1.12) }
.oyla-yildiz input:focus-visible + label{ outline:2.5px solid var(--red); outline-offset:2px; border-radius:4px }
.oyla-sonuc{ width:100%; margin:0; font-size:13.5px; font-weight:800; color:var(--brand-d) }
.oyla-sonuc:empty{ display:none }
.oyla-bekle{ opacity:.55; pointer-events:none }
.oyla-bitti .oyla-yildiz{ pointer-events:none }
/* ekran okuyucuya kalan, gozden gizlenen metin */
.oyla-gizli{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }

/* --- admin metni --- */
.kbakis-metin{ min-width:0 }
.kbakis-metin > h2{ font-size:clamp(24px,3.1vw,33px) }
.kbakis-p{ margin-top:16px; color:var(--ink-2); font-size:16.5px; line-height:1.75 }
.kbakis-p p + p{ margin-top:14px }
.kbakis-p :is(b, strong){ color:var(--ink) }
.kbakis-p :is(ul, ol){ margin-top:12px; padding-left:20px; list-style:revert }
.kbakis-p li{ margin-top:5px }

/* --- kurs bilgi satirlari ---
   Canlida mavi zeminli <table> idi ("td{background:#2980b9!important}");
   ayni veri burada tek panel + ayrac. Ayraclar gap:1px + ebeveyn zemini
   ile ciziliyor (.khero-guven ile ayni teknik): satir kaydirsa da bosluk
   ya da hizasiz kenar cikmiyor. */
.kbilgi{
  margin:clamp(18px,2.4vw,28px) 0 0;
  display:grid; grid-template-columns:1fr; gap:1px;
  background:var(--line);
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
}
@media (min-width:720px){ .kbilgi{ grid-template-columns:1fr 1fr } }
/* Ilk iki kisa alan yan yana; 3. (icerik) ve egitmen satiri tam genislik.
   Tek kalan tekil oge de (last odd / only) yayilir. */
.kbilgi > div:nth-child(n+3),
.kbilgi > div:last-child:nth-child(odd){ grid-column:1 / -1 }
.kbilgi > div{ display:grid; gap:4px; align-content:start; padding:12px 16px; background:var(--bg) }
.kbilgi dt{ font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3) }
.kbilgi dd{ margin:0; font-size:14px; font-weight:700; color:var(--ink); line-height:1.45 }
/* virgulle ayrilmis icerik listesi (bkz. [A2f]): paragraf yerine cip */
.kbilgi-cip{ display:flex; flex-wrap:wrap; gap:5px; margin:2px 0 0; padding:0; list-style:none }
.kbilgi-cip li{
  font-size:12.5px; font-weight:700; line-height:1.35; color:var(--ink-2);
  background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:4px 10px;
}
/* egitmen satiri: bilgi kutusunun en alti, virgullu linkler */
.kbilgi-egitmen dd{ font-weight:600; line-height:1.65; color:var(--ink-2) }
.kbilgi-egitmen a{
  color:var(--brand-d); font-weight:700; text-decoration:none;
  border-bottom:1px solid transparent;
}
.kbilgi-egitmen a:hover{ border-bottom-color:currentColor }
/* Kunye ilk 6 ismi sayar; "+N · kadroyu gör" tam listeyi modalda açar
   (#egitmenler'e kaydırmaz). a veya button olabilir. */
.kbilgi-egitmen-tumu{
  display:inline-block; margin-left:2px; padding:2px 10px;
  font:inherit; font-size:12.5px; font-weight:700; line-height:1.4;
  color:var(--brand-d); border-radius:999px; cursor:pointer;
  background:var(--brand-w); border:1px solid rgb(0 91 234 / .18);
}
.kbilgi-egitmen a.kbilgi-egitmen-tumu{ text-decoration:none; border-bottom:0 }
.kbilgi-egitmen .kbilgi-egitmen-tumu:hover{
  border-color:var(--brand); border-bottom-color:var(--brand);
}

/* Kadro listesi modalı (künye chip'inden) */
dialog.nk-modal-kadro{ width:min(440px, calc(100vw - 28px)) }
.nk-modal-kadro .nk-modal-body{ padding-top:4px; max-height:min(70vh, 520px); overflow:auto }
.nk-kadro-liste{ list-style:none; margin:0; padding:0; display:grid; gap:6px }
.nk-kadro-satir{
  display:flex; align-items:center; gap:12px;
  padding:8px 10px; border-radius:12px;
  text-decoration:none; color:inherit;
  border:1px solid var(--line); background:var(--surface);
  transition:border-color .15s ease, background .15s ease;
}
.nk-kadro-satir:hover{ border-color:rgb(0 91 234 / .28); background:#fff }
.nk-kadro-foto{
  flex:0 0 48px; width:48px; height:48px; border-radius:50%;
  overflow:hidden; background:var(--line-2);
}
.nk-kadro-foto img{ width:100%; height:100%; object-fit:cover; display:block }
.nk-kadro-metin{ flex:1 1 auto; min-width:0; display:grid; gap:2px }
.nk-kadro-metin b{
  font-size:14.5px; font-weight:800; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nk-kadro-metin span{
  font-size:12.5px; font-weight:600; color:var(--ink-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nk-kadro-ok{ flex:0 0 auto; width:16px; height:16px; color:var(--brand); opacity:.7 }
.nk-kadro-satir:hover .nk-kadro-ok{ opacity:1 }

/* ============ 3. GUVEN SERIDI ============ */
.gstrip{ background:var(--surface); border-block:1px solid var(--line) }
.gstrip .wrap{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px 0; padding-block:26px }
@media (min-width:820px){ .gstrip .wrap{ grid-template-columns:repeat(4,1fr) } }
.gitem{ padding-inline:18px; text-align:center }
.gitem + .gitem{ border-left:1px solid var(--line-2) }
@media (max-width:819px){ .gitem:nth-child(3){ border-left:0 } }
.gitem b{ display:block; font-size:16px; font-weight:900; letter-spacing:-.02em }
.gitem span{ display:block; font-size:13.5px; color:var(--ink-3); margin-top:3px }

/* ============ 4. YZ ASISTANI — vitrin: sayfanin tek lacivert bolumu ============
   Alt dolgu bilincli kisa: alttaki #paketler'in ust dolgusuyla toplanip
   lacivert→acik zemin gecisinde genis olu bant birakiyordu. */
.yz{
  background:var(--navy); color:#fff;
  padding-block:clamp(36px,4.5vw,60px) clamp(18px,2.2vw,28px);
}
.yz .sec-head{ margin-bottom:clamp(22px,3vw,34px) }
.yz .sec-head h2{ color:#fff }
.yz .sec-head p{ color:#BFCDE1 }
.yz .kicker{ color:#8FB4EA }
.yz-grid{ display:grid; grid-template-columns:1fr; gap:28px; align-items:start }
@media (min-width:960px){ .yz-grid{ grid-template-columns:1.05fr .95fr; gap:40px } }

.chat{ display:flex; flex-direction:column; gap:14px }
.msg{ display:flex; gap:12px }
.msg-user{ justify-content:flex-end }
.msg-user p{ background:var(--brand); color:#fff; border-radius:var(--r-l) var(--r-l) 4px var(--r-l); padding:13px 17px; font-size:15px; font-weight:700; max-width:34ch }
.msg-bot{ align-items:flex-start }
.msg-bot > div{ background:#fff; color:var(--ink); border-radius:var(--r-l) var(--r-l) var(--r-l) 4px; padding:15px 18px; font-size:15px; box-shadow:var(--sh-2) }
.msg-bot p{ line-height:1.6 }
.msg-owl{ flex:none; width:44px; height:44px; border-radius:50%; background:var(--brand-w); padding:4px; box-shadow:var(--sh-1) }
.msg-owl img{ width:100%; height:100%; object-fit:contain }
.qcard{ margin-top:12px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:13px 15px }
.qcard .qno{ font-size:11.5px; font-weight:900; letter-spacing:.1em; color:var(--ink-3); text-transform:uppercase }
.qcard p{ font-weight:800; margin-top:5px }
.qcard ol{ margin:9px 0 0; padding-left:20px; font-size:14.5px; color:var(--ink-2) }
.qcard ol li{ margin-top:3px }
.qcard .ok{ color:var(--brand-d); font-weight:800 }
.msg-tags{ display:flex; gap:7px; flex-wrap:wrap; margin-top:11px }
.msg-tags span{ font-size:11.5px; font-weight:800; color:var(--brand-d); background:var(--brand-w); border-radius:999px; padding:4px 10px }

.yz-feats{ display:grid; gap:12px }
.yz-feat{ background:rgb(255 255 255 / .06); border:1px solid rgb(255 255 255 / .12); border-radius:var(--r-l); padding:20px 22px }
.yz-feat h3{ font-size:17.5px; color:#fff }
.yz-feat p{ color:#BFCDE1; font-size:15px; line-height:1.65; margin-top:7px }
.yz-note{ margin-top:16px; text-align:center; color:#8FB4EA; font-size:14.5px; font-weight:700 }
.yz-note a{ color:inherit; font-weight:800; text-decoration:underline; text-underline-offset:2px }

/* ============ 5. PAKETLER ============ */
/* Ust dolgu YZ altıyla toplanmasin diye kısa; alt SEO/footer icin normal. */
/* Alt dolgu kadro (lacivert) ustuyle toplanmasin diye kisildi. */
#paketler{ padding-block:clamp(22px,2.6vw,32px) clamp(28px,3.4vw,48px) }
#paketler .sec-head{ margin-bottom:clamp(18px,2.6vw,28px) }
@media (max-width:759px){
  .kbakis{ padding-block:26px 20px }
  .yz{ padding-block:32px 16px }
  #paketler{ padding-block:20px 28px }
}

/* ---- kontenjan uyarisi: MOBILDE satir ici, masaustunde YOK ----
   2026-08-12 kullanici karari: mobilde acilista popup basilmiyor; kontenjan
   mesaji ayri bir toast yerine paketlerin hemen ustunde kucuk bir uyari
   seridi oluyor (kampanya toast'i ile ayni anda iki bildirim cikmasin diye).
   Masaustunde eski yapi korunuyor -> burada gizli, orada toast.
   ⚠️ Esik 760px: paket karuselinin devreye girdigi esikle AYNI; "mobil"
   tanimi sayfanin geri kalaniyla tutarli kalsin. */
.pkg-kontenjan{ display:none }
@media (max-width:760px){
  .pkg-kontenjan{
    display:flex; align-items:flex-start; gap:10px;
    margin:0 0 16px; padding:11px 13px;
    background:var(--red-w); border:1px solid rgb(225 16 65 / .2);
    border-left:3px solid var(--red);
    border-radius:12px;
    font-size:13px; line-height:1.5; color:var(--ink-2);
  }
  .pkg-kontenjan .icon{
    flex:none; width:17px; height:17px; margin-top:1px;
    fill:none; stroke:var(--red-d); stroke-width:2;
    stroke-linecap:round; stroke-linejoin:round;
  }
  .pkg-kontenjan b{ display:block; color:var(--red-d); font-weight:900 }
}

/* Kolon sayisi kart sayisina baglanir. Once sabit uc kolondu; gercek
   veride iki vitrin karti gelince sagda 395px'lik olu kolon kaliyordu.
   Dort kolon olculdu, sikisiyor: kart 292px'e dusunce baslik 2 satirdan
   4'e, en uzun madde 5 satirdan 8'e cikiyor. Ust sinir uc. */
.pkgs{ display:grid; grid-template-columns:1fr; gap:18px }

/* ---- MOBILDE KAYDIRMALI VITRIN ----
   Alt alta dizilince 3 kart ~2600px oluyordu. scroll-snap native;
   yandaki kartin kenari + asagidaki kaydir ipucu birlikte ogrenilir. */
.pkgs-kaydir{ display:none }
@media (max-width:759px){
  .pkgs{
    display:flex; gap:14px;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    margin-inline:-22px; padding-inline:22px;
    /* Ribbon kartin -13px ustunde duruyor; overflow-x kirpardi. */
    padding-top:16px; margin-top:-16px;
    padding-bottom:6px;
    scrollbar-width:none;
  }
  .pkgs::-webkit-scrollbar{ display:none }
  .pkgs > .pkg{
    flex:0 0 86%; scroll-snap-align:center; scroll-snap-stop:always;
  }
  .pkgs[data-kart="1"] > .pkg{ flex:0 0 100% }
  /* Birden fazla kart varken: sola-saga ok + kisa metin. Tek kartta gizli. */
  .pkgs[data-kart]:not([data-kart="1"]) + .pkgs-kaydir{
    display:flex; align-items:center; justify-content:center; gap:10px;
    margin:12px 0 2px; font-size:12.5px; font-weight:800; color:var(--brand-d);
  }
  .pkgs-kaydir .icon{ width:16px; height:16px; stroke-width:2.2 }
}

/* ---- vitrin kaydirma oklari (2026-08-12) ----
   Eskiden salt sus SVG idi (`aria-hidden` bir <p> icinde). Dar MASAUSTU
   penceresinde karusel aciliyor ama dokunmatik yok ve kaydirma cubugu da
   gizli (`scrollbar-width:none`) — yandaki paketlere ulasmanin yolu
   kalmiyordu. Artik gercek <button>.
   ⚠️ Gorunurlugu .pkgs-kaydir'in kendisi tasiyor: yukaridaki
   max-width:759px blogunda `display:flex` aliyor, disinda `display:none`.
   Burada tekrar display verilmiyor ki genis ekranda sizmasin. */
.pkgs-ok{
  flex:none; display:grid; place-items:center;
  width:32px; height:32px; padding:0;
  border-radius:50%; cursor:pointer;
  color:var(--brand-d); background:var(--surface);
  border:1px solid var(--line); box-shadow:var(--sh-1);
  transition:border-color .18s ease, color .18s ease, opacity .18s ease;
}
.pkgs-ok:hover{ border-color:var(--brand); color:var(--brand) }
/* Uctaki ok: sonuk + tiklanamaz. JS `disabled` yaziyor. */
.pkgs-ok:disabled{ opacity:.35; cursor:default; border-color:var(--line) }
.pkgs-ok .icon{ width:17px; height:17px; stroke-width:2.4; fill:none; stroke:currentColor }

@media (min-width:760px){
  .pkgs{ grid-template-columns:repeat(2,1fr) }
  .pkg-kamp{ grid-column:1 / -1 }
  .pkgs[data-kart="1"]{ grid-template-columns:minmax(0,620px); justify-content:center }
}
@media (min-width:1100px){
  .pkgs{ grid-template-columns:repeat(3,1fr) }
  .pkgs[data-kart="2"]{ grid-template-columns:repeat(2,1fr) }
  .pkg-kamp{ grid-column:auto }
  /* uc kart varken kamp kartinin tam genislige tasmasi izgarayi bozuyor */
  .pkgs[data-kart="3"] .pkg-kamp{ grid-column:auto }
}
.pkg{
  position:relative; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-x); padding:28px;
  display:flex; flex-direction:column; box-shadow:var(--sh-1);
  transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
/* Fiyat kartinda hareket beklenir; ustune gelince kart one cikiyor. */
@media (hover:hover){
  .pkg:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--line-2) }
}
@media (prefers-reduced-motion:reduce){
  .pkg{ transition:none } .pkg:hover{ transform:none }
}
/* Onerilen kart: cerceve tek basina yeterince bagirmiyordu, ustune marka
   renginde ince bir seritle isaretlendi. */
.pkg-hero{ border:2px solid var(--navy); box-shadow:var(--sh-3) }
.pkg-hero::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  border-radius:var(--r-x) var(--r-x) 0 0;
  background:linear-gradient(90deg, var(--brand) 0%, var(--navy) 100%);
}
.pkg-ribbon{ position:absolute; top:-13px; left:24px; background:var(--red); color:#fff; font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; padding:6px 13px; border-radius:999px; box-shadow:var(--sh-1) }
.pkg-ribbon-alt{ background:var(--navy) }
.pkg-ribbon-kamp{ background:var(--brand) }
.pkg h3{ font-size:21px; letter-spacing:-.025em }
.pkg h3 span{ font-size:15px; font-weight:800; color:var(--ink-2) }
.pkg-hours{ color:var(--ink-3); font-size:14px; font-weight:800; margin-top:8px }
/* "Bu pakete ozel" etiketi: kartta artik yalnizca ayirt edici maddeler
   var, okuyanin listeyi tam icerik sanmamasi icin baslik gerekiyor. */
.pkg-fark-bas{ margin-top:16px; font-size:11px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3) }
.pkg-list{ display:grid; gap:10px; margin-top:18px; font-size:15px; color:var(--ink-2) }
.pkg-fark-bas + .pkg-list{ margin-top:10px }
.pkg-list li{ position:relative; padding-left:22px; line-height:1.55 }
.pkg-list li::before{ content:""; position:absolute; left:0; top:8px; width:11px; height:6px; border-left:2.4px solid var(--brand); border-bottom:2.4px solid var(--brand); transform:rotate(-45deg) translateY(-1px) }

/* tam icerik modalini acan dugme — link gibi degil, tiklanabilir chip */
.pkg-tumu{ margin-top:auto; padding-top:14px }
.pkg-tumu-btn{
  display:inline-flex; align-items:center; gap:7px;
  font:inherit; font-size:13px; font-weight:800; color:var(--brand-d);
  background:var(--brand-w); border:1px solid rgb(0 91 234 / .22);
  border-radius:999px; padding:8px 13px; cursor:pointer;
  transition:background .18s ease, border-color .18s ease;
}
.pkg-tumu-btn:hover{ background:var(--surface); border-color:var(--brand) }
.pkg-tumu-btn .icon{ width:14px; height:14px; stroke-width:2.2; fill:none; stroke:currentColor }
.pkg-price{ display:flex; align-items:baseline; gap:10px; margin-top:22px; flex-wrap:wrap }
/* indirimsiz fiyat + oran kendi satirinda; buyuk fiyatla yan yana koyunca
   hangisinin gecerli oldugu okunmuyordu (canlida da ustte ayri satir). */
.pkg-eski{ width:100%; display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.pkg-price .old{ color:var(--ink-3); text-decoration:line-through; font-size:15px; font-weight:700 }
.pkg-indirim{
  font-size:12px; font-weight:900; letter-spacing:.04em;
  color:var(--red-d); background:var(--red-w);
  border:1px solid rgb(225 16 65 / .18); border-radius:999px; padding:3px 10px;
}
/* Yuzde soyut kaliyor ("%48"), cepte kalan tutar somut. Yesil bilincli:
   kirmizi indirim rozetiyle ayni renkte olsa iki rozet tek blok gibi
   okunuyor, ayri bilgi oldugu kayboluyordu. */
.pkg-tasarruf{
  font-size:12px; font-weight:900; letter-spacing:.04em;
  color:#0B6B4F; background:#E4F6EE;
  border:1px solid rgb(11 107 79 / .18); border-radius:999px; padding:3px 10px;
}
.pkg-price .now{ font-size:29px; font-weight:900; letter-spacing:-.03em }
/* .inst adi egitmen kartinda kullaniliyor; KDV notu o kartin zemin/cerceve
   kurallarini yiyip gri kutuya donuyordu. Ayri ad. */
.pkg-kdv{ font-size:13px; color:var(--ink-3); font-weight:700 }
/* Manset artik KDV DAHIL (odeme sayfasi da oyle gosteriyordu, kart KDV'siz
   yazinca tiklayan kisi %20 zam gormus gibi oluyordu). Matrah tam satir
   asagida kaliyor: kurumsal alici / fatura icin lazim ama mansetle
   yarismamali. */
.pkg-matrah{ width:100%; margin-top:4px; font-size:12.5px; font-weight:600; color:var(--ink-3) }
/* e-PARA para iadesi degil; satin alimla hesaba yuklenen ve sonraki paket
   alisverisinde indirim olarak kullanilan bakiye. Tutar belirgin, aciklamasi
   sakin: kullanici hem ne kazandigini hem ne ise yaradigini anlar. */
.pkg-epara{
  margin-top:11px; padding:9px 11px;
  font-size:12.5px; line-height:1.5; font-weight:600; color:var(--ink-3);
  background:#F2FAF6; border:1px solid rgb(11 107 79 / .12);
  border-radius:10px;
}
.pkg-epara b{ color:#0B6B4F; font-weight:900 }
.pkg-gar{ display:flex; align-items:center; gap:8px; margin-top:14px; font-size:13.5px; font-weight:800; color:var(--red-d) }
.pkg-gar .icon{ width:16px; height:16px; stroke-width:2; flex:none }
.pkg .btn{ width:100%; margin-top:18px; margin-top:auto }
.pkg .pkg-gar + .btn{ margin-top:16px }

/* Odeme guvencesi: butonun hemen altinda, cunku tereddut tam orada
   olusuyor. Susuk gri; mansetle ya da garanti notuyla yarismamali.
   Havale indirimi para meselesi oldugu icin tek vurgulu parca o. */
.pkg-odeme{
  margin-top:11px; font-size:12px; line-height:1.5; font-weight:600;
  color:var(--ink-3); text-align:center; text-wrap:balance;
}
.pkg-odeme .icon{
  width:13px; height:13px; vertical-align:-2px; margin-right:3px;
  fill:none; stroke:currentColor; stroke-width:2;
}
.pkg-odeme b{ display:block; margin-top:3px; font-weight:800; color:#0B6B4F }
/* modalde de ayni not var; orada buton tam genislikte degil */
.pkg-modal-al + .pkg-odeme{ margin-top:12px }
/* fiyat blogu kartin dibine yapisir. Iki ayri komsu: madde listesi
   dogrudan geliyorsa listeden, "tamamini gor" dugmesi araya girdiyse
   dugmeden sonra — o durumda itmeyi dugme yapiyor (.pkg-tumu). */
.pkg-list + .pkg-price{ margin-top:auto; padding-top:20px }
.pkg-tumu + .pkg-price{ margin-top:14px; padding-top:0 }

/* ---- ortak ozellik seridi: uc kartta da ayni olan maddeler ----
   Kartlarda uc kez tekrarlanunca hem karti sisiriyor hem paketleri
   ayirt edilemez kiliyordu. Bir kez, tam genislikte, daha sakin. */
.pkg-ortak{
  margin-top:20px; padding:20px 24px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-l); box-shadow:var(--sh-1);
}
.pkg-ortak-bas{ font-size:11px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3) }
.pkg-ortak ul{ display:flex; flex-wrap:wrap; gap:8px 10px; margin-top:12px }
.pkg-ortak li{
  position:relative; padding:5px 12px 5px 28px;
  background:var(--bg); border:1px solid var(--line-2); border-radius:999px;
  font-size:13px; font-weight:600; color:var(--ink-2); line-height:1.45;
}
.pkg-ortak li::before{
  content:""; position:absolute; left:11px; top:11px; width:9px; height:5px;
  border-left:2.2px solid var(--brand); border-bottom:2.2px solid var(--brand);
  transform:rotate(-45deg);
}

/* ---- tum paketler akordiyonu ----
   summary'de space-between vardi: tek cumleyi ("Konu konu ilerlemek
   istersen: brans ve ders paketleri (12)") uc parcaya dagitip ayri ayri
   ogeler gibi gosteriyordu. Metin solda toplanir, ok saga itilir. */
.altpkgs{ margin-top:20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--sh-1) }
.altpkgs summary{ padding:18px 22px; font-size:15.5px; font-weight:800; cursor:pointer; list-style:none; color:var(--ink); display:flex; align-items:center; gap:10px }
.altpkgs summary::-webkit-details-marker{ display:none }
.altpkgs summary b{ color:var(--ink) }
.altpkgs summary .tnum{ color:var(--ink-3); font-weight:700 }
.altpkgs summary::after{ content:""; flex:none; width:9px; height:9px; margin-left:auto; margin-right:4px; border-right:2.2px solid var(--ink-3); border-bottom:2.2px solid var(--ink-3); transform:rotate(45deg) translate(-2px,-2px); transition:transform .22s ease }
.altpkgs[open] summary::after{ transform:rotate(-135deg) translate(-2px,-2px) }

/* ---- paket karsilastirmasi (akordiyonun icinde) ----
   2026-08-12 KARAR (kullanici): 11 sutunlu ozellik matrisi KALDIRILDI.
   Canli / video / toplam / kaynak / YZ / soru / erisim sutunlari admin'in
   serbest metninden (fee_row_text) regex ile uretiliyordu ve parser TUS'un
   cumle kalibina gore kalibreydi; ALES gibi farkli usluple yazilmis
   kurslarda ayni dort sutun HER satirda "—" dusuyordu. Tam analiz:
   memory-bank/paket-tablo-ales-tus-analiz-2026-08-11.md
   Yerine tek "Aciklama" sutunu: fee_description 2 satira kirpilir, tam
   kapsam "Incele" modalinde (zaten calisan nkModal akisi).
   Kazanc: 11 -> 5 sutun, min-width 1180px kalkti, YATAY SCROLL YOK. */
.cmp-aciklama{
  padding:0 18px 12px; margin-top:-4px;
  font-size:13.5px; line-height:1.55; color:var(--ink-3);
}
/* overflow-x emniyet kemeri olarak birakildi: bes sutun sigiyor, canli
   sayfada tetiklenmez. tasarim8/*.html icindeki eski 11 sutunlu statik
   taslaklar bozulmasin diye silinmedi. */
.cmp-wrap{
  overflow-x:auto; border-top:1px solid var(--line-2);
  scrollbar-color:var(--line) transparent;
}
/* table-layout:fixed — sutun genisligini icerik degil biz belirliyoruz.
   Auto layout'ta uzun aciklama metni Paket sutununu ezip daraltiyordu. */
.cmp{
  width:100%; border-collapse:separate; border-spacing:0;
  font-size:13px; table-layout:fixed;
}
/* Baslik NOWRAP DEGIL: "Kazanma garantisi" 10px+letter-spacing ile 131px
   ediyor, sutun 104px → olculdu, saga tasip kirpiliyordu. Sarmasina izin
   verilince iki satira ("KAZANMA / GARANTISI") duzgun siginiyor. */
.cmp th{
  position:sticky; top:0; z-index:2;
  text-align:left; font-size:10px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-3); padding:10px 12px; border-bottom:1px solid var(--line);
  background:var(--bg); line-height:1.35; vertical-align:bottom;
}
.cmp td{
  padding:12px; border-bottom:1px solid var(--line-2);
  color:var(--ink-2); vertical-align:middle; background:var(--surface);
}
.cmp tbody tr:last-child td{ border-bottom:0 }
.cmp td b{ color:var(--ink); font-weight:800 }
.cmp td:first-child{ color:var(--ink); line-height:1.4 }
.cmp-vitrin td{ background:var(--brand-w) }
.cmp-etiket{ margin-left:6px; font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-d); white-space:nowrap }
.cmp-kdv{ display:block; font-size:10.5px; font-weight:700; color:var(--ink-3); text-transform:none; letter-spacing:0 }

/* Aciklama hucresi: 2 satir sonra "…" ile kesilir.
   line-clamp hem standart hem -webkit- yaziliyor; -webkit-box olmadan
   eski WebKit/Blink surumlerinde kirpma hic calismiyor.
   ⚠️ "devami…" DUGMESI DENENDI VE KALDIRILDI (kullanici, 2026-08-12):
   kirpmanin "…"si zaten devami oldugunu soyluyor, tam metni de ayni
   satirdaki "Incele" aciyordu; dugme yalnizca ucuncu bir satir acip
   hucreyi uzatiyordu. Geri eklenmeyecek. */
.cmp-desc{
  margin:0;
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
  font-size:12.5px; line-height:1.55; color:var(--ink-3);
}

.cmp-durum span{
  display:inline-grid; place-items:center; min-width:22px; height:22px; padding-inline:4px;
  border-radius:999px; font-weight:900; font-size:12px;
}
.cmp-durum.var span{ color:#0B6B4F; background:#E4F6EE }
.cmp-durum.yok span{ color:var(--ink-3); background:var(--bg) }
.cmp-fiyat{ color:var(--ink)!important; font-weight:900; white-space:nowrap }
.cmp-fiyat small{
  display:block; margin-top:3px; color:#0B6B4F;
  font-size:10px; line-height:1.25; font-weight:800;
}
.cmp-garanti-not{
  margin:0; padding:10px 18px 12px; border-top:1px solid var(--line-2);
  font-size:11.5px; line-height:1.5; color:var(--ink-3);
}
.cmp-garanti-not a{ color:var(--brand-d); font-weight:800; text-decoration:underline; text-underline-offset:2px }
.cmp-btn{
  font:inherit; font-size:12.5px; font-weight:800; color:var(--brand-d);
  background:var(--bg); border:1px solid var(--line); border-radius:999px;
  padding:6px 12px; cursor:pointer; white-space:nowrap; text-decoration:none;
  display:inline-block; transition:background .18s ease, border-color .18s ease;
}
.cmp-btn:hover{ background:var(--surface); border-color:var(--brand) }

/* ---- hizalama: SINIF ile, nth-child ile DEGIL ----
   ⚠️ Link paketi satirinda hucre sayisi farkli (td + td[colspan] + td),
   yani `td:nth-child(3)` orada "Ac" dugmesine denk geliyor. Govde
   hizalamasi bu yuzden sinif/`:last-child` uzerinden veriliyor;
   nth-child yalniz THEAD'de (sutun genisligi icin) kullaniliyor. */
.cmp .cmp-durum{ text-align:center }
.cmp .cmp-fiyat{ text-align:right }
.cmp td:last-child{ text-align:right }

/* Sutun genislikleri: table-layout:fixed oldugu icin YALNIZ ilk satir
   (thead) belirliyor; govde satirlarina kural yazmak gereksiz. */
@media (min-width:761px){
  .cmp thead th:nth-child(1){ width:23% }
  .cmp thead th:nth-child(3){ width:104px; text-align:center }
  .cmp thead th:nth-child(4){ width:152px; text-align:right }
  .cmp thead th:nth-child(5){ width:104px; text-align:right }
}

/* ---- Mobil: TEK SATIR TABLO (kullanici karari, 2026-08-12) ----
   ⚠️ KART DUZENI DENENDI VE BIRAKILDI: `tr{display:grid}` ile her paket
   bir karta doonuyordu; kullanici "daha karmasik gorunuyor" dedi.
   Tablo tablo kaliyor, her paket TEK SATIR.
   Sigdirma yontemi sutun kirpmak degil KALDIRMAK: "Kazanma garantisi"
   her satirda ayni (✓*), yani kiyas degeri sifir → mobilde gizleniyor,
   bilgi tablo altindaki nottan ve paket kartlarindan zaten okunuyor.
   Kalan 4 sutun (Paket / Aciklama / Fiyat / Incele) 360px'e siginiyor,
   yatay scroll cikmiyor (olculdu). */
@media (max-width:760px){
  .altpkgs summary{ padding:16px }
  .cmp-aciklama{ padding:0 14px 12px; font-size:13px }
  .cmp{ font-size:12px }
  .cmp :is(th,td){ padding:9px 6px }
  .cmp :is(th,td):first-child{ padding-left:14px }
  .cmp :is(th,td):last-child{ padding-right:14px }
  /* Garanti sutunu: th nth-child GUVENLI (thead'de her zaman 5 hucre),
     td tarafi sinifla gizleniyor (link satirinda sira kayiyor). */
  .cmp thead th:nth-child(3){ display:none }
  .cmp .cmp-durum{ display:none }

  /* ⚠️ DORT SUTUN YAN YANA OLCULDU VE YETMIYOR: 390px'te aciklamaya
     ~55px kaliyor, yani iki kelime ("ALES'e Hazirlanmani…") — sutunun
     bilgi degeri sifira dusuyor. Bu yuzden aciklama, paket adinin ALT
     SATIRINA aliniyor: satir yine TEK satir (kart degil, yukseklik
     ~70px), fiyat ve Incele sagda dikey ortali duruyor, aciklamaya
     ~170px genislik aciliyor (2 satir ≈ 55 karakter).
     Tablo semantigi bozulmuyor; yalnizca yerlesim degisiyor. */
  /* ⚠️ SUTUN GENISLIGI SABIT, `auto` DEGIL: grid'de her satir bagimsiz
     hesaplanir, `auto` verilirse fiyat sutunu satirdan satira kayar ve
     "tablo" hissi kaybolur. Sabit px ile tum satirlar hizali kalir. */
  .cmp thead tr,
  .cmp tbody tr{
    display:grid; grid-template-columns:1fr 74px 58px;
    align-items:center; gap:3px 10px;
  }
  .cmp thead tr{ padding:9px 14px; border-bottom:1px solid var(--line) }
  .cmp tbody tr{ padding:11px 14px; border-bottom:1px solid var(--line-2) }
  .cmp tbody tr:last-child{ border-bottom:0 }
  .cmp tbody tr.cmp-vitrin{ background:var(--brand-w) }
  /* Hucre cizgi/dolgusu grid'de anlamini yitiriyor; ayirici satirin kendisi. */
  .cmp :is(th,td){ padding:0; border-bottom:0; background:none }
  .cmp th{ position:static }
  /* Baslikta yalniz PAKET / FIYAT kaliyor (Aciklama alt satirda, Garanti
     gizli) → uc grid sutunu: Paket · Fiyat · bos. */
  .cmp thead th:nth-child(2){ display:none }

  .cmp td:first-child{ grid-column:1; grid-row:1; font-size:12px; line-height:1.3 }
  /* Aciklama hucresi VE link paketinin "baska sayfada incelenir" hucresi:
     ikisi de ilk sutunun 2. satirina. Sinif yerine :not() zinciri, cunku
     link satirinda hucre sirasi farkli. */
  .cmp td:not(:first-child):not(:last-child):not(.cmp-fiyat){
    grid-column:1; grid-row:2;
  }
  .cmp .cmp-fiyat{ grid-column:2; grid-row:1 / span 2 }
  .cmp td:last-child{ grid-column:3; grid-row:1 / span 2 }
  /* Uzun paket adi satiri asiri uzatmasin — 2 satirda kesiliyor. */
  .cmp td:first-child b{
    display:-webkit-box; -webkit-box-orient:vertical;
    -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
  }
  .cmp-etiket{ display:inline-block; margin:0 0 0 5px }
  .cmp-desc{ font-size:11.5px; line-height:1.45 }
  .cmp-fiyat{ font-size:12.5px }
  .cmp-fiyat small{ font-size:9.5px }
  .cmp-btn{ padding:5px 9px; font-size:11.5px }
  .cmp-garanti-not{ padding:9px 14px 12px }
}

/* ---- karar seridi ----
   Paketlerin yanina dorduncu kolon olarak konmasi denendi: kart 292px'e
   dusup sikisiyor, ustelik kutu paketle yarisiyor gibi duruyordu.
   Secenekleri gordukten sonrasi dogru yer. */

/* Fiyati girilmemis kurs. Bolum bos kalmasin diye. */
.pkg-yok{
  padding:clamp(20px,3vw,28px); border:1px dashed var(--line);
  border-radius:var(--r-lg,18px); background:var(--bg-2,#f7f8fa);
  font-size:15.5px; line-height:1.65; color:var(--ink-2); text-align:center;
}
.pkg-yok a{ color:var(--brand); font-weight:700; text-decoration:underline; text-underline-offset:2px }

.pkg-karar{
  margin-top:22px; padding:24px clamp(20px,2.4vw,30px);
  display:flex; flex-wrap:wrap; align-items:center; gap:18px 26px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-l); box-shadow:var(--sh-1);
}
.pkg-karar > div{ flex:1 1 320px; min-width:0 }
.pkg-karar-bas{ font-size:clamp(17px,1.8vw,20px); font-weight:900; letter-spacing:-.02em; color:var(--ink) }
.pkg-karar-alt{ margin-top:7px; font-size:14.5px; line-height:1.65; color:var(--ink-2) }
.pkg-karar .btn{ flex:none }
@media (max-width:560px){ .pkg-karar .btn{ width:100% } }

/* ---- Akilli Kitap demo dugmesi + modali ----
   Satin almadan icerige bakma yolu; yeni temada hic yoktu. Dugme ikincil:
   satin al butonuyla yarismamali ama gorunur olmali. */
.pkg-demo{ margin-top:12px }
.pkg-demo-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px; font:inherit; font-size:13px; font-weight:800;
  color:var(--brand-d); background:var(--brand-w);
  border:1px solid rgb(0 91 234 / .2); border-radius:999px; cursor:pointer;
}
.pkg-demo-btn:hover{ background:var(--surface); border-color:var(--brand) }
.pkg-demo-btn .icon{ width:15px; height:15px; stroke-width:2; fill:none; stroke:currentColor }

/* Demo bir kitap okuyucu: ortak 440px'lik modalda ise yaramaz.
   Genislik dialog'un kendisinde tanimli (ortak.css:1456), kartta degil.

   Ilk surumde iframe'e sabit min(76vh,760px) verilmisti; basliktaki ~80px
   serit ustune binince laptopta pencere yuksekligine sigmiyor, okuyucu
   kirpiliyordu. Artik dialog kullanilabilir yuksekligin TAMAMINI aliyor,
   iframe de kalan yeri esneyerek dolduruyor. */
dialog.nk-modal-demo{
  width:min(1320px, calc(100vw - 20px));
  height:calc(100dvh - 20px);
  max-height:calc(100dvh - 20px);
}
.nk-modal-demo .nk-modal-card{ height:100% }
/* Baslik seridi demoya yer acmak icin biraz daha ince */
.nk-modal-demo .nk-modal-head{ padding:15px 20px 13px }
.nk-modal-demo .nk-modal-body{
  padding:0; flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; gap:8px; overflow-y:auto;
}
/* Tek demoda kalan alani doldurur. Iki demo varsa min-height devreye
   girer, ikisi de okunabilir kalir ve govde kaydirilir. */
.nk-demo-cerceve{
  flex:1 1 auto; width:100%; min-height:min(420px,60dvh); border:0; display:block;
  background:var(--bg-2,#f7f8fa);
}

/* ---- paket alti metin (h2_3 / crs_overview) ----
   Admin WYSIWYG icerigi: hangi etiketin gelecegi bilinmiyor, o yuzden
   tipografi kurallari etiket adiyla yaziliyor. Sayfanin en uzun ozgun
   metni burasi; olcum satiri 72ch'te tutuluyor, tam genislikte 1180px
   uzunlugunda satir okunmuyor. */
.pkg-metin{
  margin-top:clamp(32px,4vw,48px); padding:clamp(24px,3vw,40px);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-l); box-shadow:var(--sh-1);
  font-size:16px; line-height:1.75; color:var(--ink-2);
}
/* Olcum satiri 72ch'e kisilmisti; blok tam genislikte durup metin solda
   yarim kalinca "yerlesmemis" gorunuyordu. Panel icinde tam genislige
   yayiliyor, kenar dolgusu okumayi zaten toparliyor. */
.pkg-metin h2{
  margin:0 0 16px; font-size:clamp(21px,2.6vw,29px); font-weight:900;
  letter-spacing:-.025em; line-height:1.2; color:var(--ink);
}
.pkg-metin :is(h3,h4){ margin:28px 0 10px; font-size:18px; font-weight:800; color:var(--ink); line-height:1.35 }
.pkg-metin p{ margin:0 0 14px }
.pkg-metin > :last-child{ margin-bottom:0 }
.pkg-metin :is(strong,b){ color:var(--ink); font-weight:800 }
.pkg-metin a{ color:var(--brand); font-weight:700; text-decoration:underline; text-underline-offset:2px }
.pkg-metin :is(ul,ol){ margin:0 0 16px; padding-left:22px }
.pkg-metin li{ margin-bottom:7px }
.pkg-metin ul{ list-style:disc }
.pkg-metin ol{ list-style:decimal }
/* Admin tablo/gorsel yapistirabiliyor: tasmayi burada kes. */
.pkg-metin img{ max-width:100%; height:auto; border-radius:var(--r-m,12px) }
.pkg-metin table{ max-width:100%; border-collapse:collapse; display:block; overflow-x:auto }
.pkg-metin :is(td,th){ border:1px solid var(--line); padding:8px 12px; font-size:14.5px }

/* ---- paket detay modali ----
   Gizli kaynak DOM'da duruyor (taranabilirlik icin); modal tiklanan
   paketin kutusunu kopyalar. hidden'i ezen bir kural cikmasin. */
.pkg-kaynak[hidden]{ display:none }
/* ortak modal 440px; 12 uzun maddelik paket icerigi orada cok dar kaliyor */
dialog.nk-modal-paket{ width:min(560px, calc(100vw - 28px)) }
/* Baslik gorunumu artik ortak.css'te .nk-modal-baslik olarak tanimli;
   burada yalnizca .nk-modal-paket'e ozel olan kaliyor. Onceki kural
   sadece .nk-modal-paket'i hedefledigi icin demo modalinin basligi
   aciklama metni gibi kucuk ve gri kaliyordu, o da duzeldi. */
.nk-modal-paket .nk-modal-body{ padding-top:4px }
.pkg-modal-fiyat{ display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; padding-bottom:16px; border-bottom:1px solid var(--line-2) }
.pkg-modal-fiyat .old{ color:var(--ink-3); text-decoration:line-through; font-size:15px; font-weight:700 }
.pkg-modal-fiyat .now{ font-size:26px; font-weight:900; letter-spacing:-.03em; color:var(--ink) }
/* Admin'in serbest metni — HTML gelebilir, o yüzden içindeki p/strong'a da bakıyoruz */
.pkg-modal-aciklama{ margin-top:18px; font-size:14.5px; line-height:1.65; color:var(--ink-2) }
.pkg-modal-aciklama > :first-child{ margin-top:0 }
.pkg-modal-aciklama > :last-child{ margin-bottom:0 }
.pkg-modal-aciklama p{ margin:0 0 10px }
.pkg-modal-aciklama strong,.pkg-modal-aciklama b{ color:var(--ink); font-weight:800 }
.pkg-modal-list{ display:grid; gap:11px; margin-top:18px; font-size:14.5px; color:var(--ink-2) }
.pkg-modal-list li{ position:relative; padding-left:24px; line-height:1.6 }
.pkg-modal-list li::before{
  content:""; position:absolute; left:0; top:8px; width:11px; height:6px;
  border-left:2.4px solid var(--brand); border-bottom:2.4px solid var(--brand);
  transform:rotate(-45deg) translateY(-1px);
}
.pkg-modal-al{ margin-top:24px; width:100% }

/* ============ 6. EGITMENLER — lacivert kadro, kendi kendine kayan serit ============
   Ritim: hero lacivert → bakis beyaz → YZ lacivert → paketler beyaz →
   kadro LACIVERT. Iki beyaz ust uste "bosluk" gibi okunuyordu.
   Kayma native scroll; JS yalniz scrollLeft. scroll-snap YOK (otomatik
   kaymayla cakisip titriyor). */
.kadro{
  background:var(--navy); color:#fff;
  padding-block:clamp(32px,3.8vw,52px) clamp(28px,3.2vw,44px);
}
.kadro .sec-head{ margin-bottom:clamp(16px,2.2vw,24px) }
.kadro .sec-head h2{ color:#fff }
.kadro .sec-head p{ color:#BFCDE1 }
.kadro .kicker{ color:#8FB4EA }

.kadro-sarma{ position:relative }
/* Masaustunde cok hafif kenar perdesi — oklarin arkasinda seridin
   devam ettigini soyler. Mobilde KAPALI: beyaz/acik gradyan kartlari
   kirliyor, kullanici da boyle soyledi. */
.kadro-sarma::before,
.kadro-sarma::after{
  content:""; position:absolute; top:0; bottom:0; width:48px; z-index:2;
  pointer-events:none;
}
.kadro-sarma::before{ left:0;  background:linear-gradient(90deg,var(--navy),transparent) }
.kadro-sarma::after{  right:0; background:linear-gradient(270deg,var(--navy),transparent) }

.insts{
  display:flex; gap:14px; align-items:stretch;
  overflow-x:auto; overscroll-behavior-x:contain;
  padding-block:6px 10px;
  scrollbar-width:none;
}
.insts::-webkit-scrollbar{ display:none }
.insts:focus-visible{ outline:3px solid #8FB4EA; outline-offset:4px; border-radius:var(--r-l) }

.inst{
  position:relative; flex:0 0 236px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:rgb(255 255 255 / .06);
  border:1px solid rgb(255 255 255 / .12);
  border-radius:var(--r-l);
  padding:22px 18px 18px;
  backdrop-filter:blur(8px);
  transition:background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
@media (hover:hover){
  .inst:hover{
    background:rgb(255 255 255 / .11);
    border-color:rgb(255 255 255 / .28);
    box-shadow:0 18px 36px -22px rgb(0 0 0 / .55);
    transform:translateY(-3px);
  }
  .inst:hover .inst-devam{ color:#fff }
}
.inst:focus-within{
  border-color:#8FB4EA;
  box-shadow:0 0 0 3px rgb(143 180 234 / .28);
}

.inst-foto{
  width:96px; height:96px; border-radius:50%; overflow:hidden;
  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);
}
.inst-foto img{ width:100%; height:100%; object-fit:cover; display:block }

.inst h3{ font-size:15.5px; line-height:1.35; margin-top:14px; letter-spacing:-.015em; color:#fff }
/* Tek link kartin tamamini kapliyor — ayni adrese uc bag olmasin. */
.inst h3 a{ color:inherit; text-decoration:none }
.inst h3 a::after{ content:""; position:absolute; inset:0; border-radius:inherit }
.inst h3 a:focus-visible{ outline:none }

.inst-brans{
  margin-top:6px; font-size:12.5px; font-weight:800; letter-spacing:.02em;
  color:#8FB4EA;
}
.inst-ozet{
  margin-top:10px; font-size:13px; line-height:1.55; color:#BFCDE1;
  display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
  -webkit-line-clamp:4; line-clamp:4;
}
.inst-devam{
  display:inline-flex; align-items:center; gap:4px;
  margin-top:auto; padding-top:14px;
  font-size:12.5px; font-weight:800; color:#8FB4EA;
  transition:color .2s ease;
}
.inst-devam .icon{ width:14px; height:14px }

.kadro-ok{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:rgb(255 255 255 / .08);
  border:1px solid rgb(255 255 255 / .22);
  color:#fff;
  backdrop-filter:blur(8px);
  transition:background .18s ease, border-color .18s ease;
}
/* ⚠️ `hidden` niteligi tek basina YETMIYOR: yazar stilindeki display:grid
   tarayicinin [hidden]{display:none} kuralini eziyor. JS zaten oklari
   aciyor ama serit tasmiyorsa ya da JS calismiyorsa olu ok gorunurdu. */
.kadro-ok[hidden]{ display:none }
.kadro-ok:hover{ background:rgb(255 255 255 / .16); border-color:rgb(255 255 255 / .4) }
.kadro-ok .icon{ width:19px; height:19px }
.kadro-ok.geri{  left:-14px }
.kadro-ok.ileri{ right:-14px }

.kadro-alt{ margin-top:14px; text-align:center; font-size:14px; font-weight:800 }
.kadro-alt a{ color:#8FB4EA; text-decoration:none; border-bottom:1px solid transparent }
.kadro-alt a:hover{ color:#fff; border-bottom-color:currentColor }

@media (prefers-reduced-motion:reduce){
  .inst{ transition:none } .inst:hover{ transform:none }
}
@media (max-width:759px){
  .kadro{ padding-block:26px 22px }
  .insts{ margin-inline:-22px; padding-inline:22px }
  .inst{ flex:0 0 min(248px,74vw) }
  .kadro-ok{ display:none }
  /* Mobilde kenar perdesi YOK — kart kenarlari net kalsin. */
  .kadro-sarma::before,
  .kadro-sarma::after{ display:none }
}

/* ============ 7-9. ANASAYFA.CSS'TEN TASINANLAR (ortak adayi) ============ */
.ava{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800; color:#fff; flex:none; background:var(--navy-t) }
.revs{ display:grid; grid-template-columns:1fr; gap:16px }
@media (min-width:700px){ .revs{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1040px){ .revs{ grid-template-columns:repeat(3,1fr) } }
.rev{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-x); padding:24px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--sh-1) }
.rev .q{ font-size:40px; line-height:.62; color:rgb(23 43 76 / .17); font-weight:900 }
.rev blockquote{ margin:0; font-size:15.5px; line-height:1.72 }
.rev figcaption{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:14px; border-top:1px solid var(--line-2) }
.rev .ava{ width:38px; height:38px; font-size:13px }
.rev cite{ font-style:normal; font-weight:800; font-size:14.5px; display:block }
.rev .who{ font-size:13px; color:var(--ink-3) }

/* ============ 7b. KURSIYER YORUMLARI — KAYAN SERIT ============
   ⚠️ IZGARA DENENDI VE BIRAKILDI (2026-08-10, kullanici geri bildirimi).
   9 kart ucer ucer dizilince blok ~1200px oluyordu ve "Devamini oku"
   izgara satirinin TUM kartlarini uzatiyordu: satir buyuyor ama yalniz
   tiklanan kartin metni aciliyor, yanindakiler bos alan gosteriyordu.
   Serit ikisini birden cozuyor — blok tek kart yuksekligine iniyor,
   tam metin de modalda. Motor kadro seridiyle AYNI (nkKayanSerit),
   yani scroll-snap YOK (otomatik kaymayla cakisip titriyor).

   Asagidaki kurallarin hepsi `.yrms` altinda: `.revs`/`.rev` taban
   kurallari anasayfa taslagi (kurs.html) tarafindan da kullaniliyor,
   onlarin gorunumunu bozmamak icin kapsam daraltildi. */
.yrm-sarma{ position:relative }
/* Kenar perdesi seridin devam ettigini soyler. Kadroda mobilde kapaliydi
   (koyu zeminde gradyan kartlari kirletiyordu); burada zemin acik ve
   perde beyazin icinde eridigi icin mobilde de kalabiliyor, ama daha
   ince. */
.yrm-sarma::before,
.yrm-sarma::after{
  content:""; position:absolute; top:0; bottom:0; width:56px; z-index:2;
  pointer-events:none;
}
.yrm-sarma::before{ left:0;  background:linear-gradient(90deg,var(--bg),transparent) }
.yrm-sarma::after{  right:0; background:linear-gradient(270deg,var(--bg),transparent) }

.yrms{
  display:flex; gap:18px; align-items:stretch;
  overflow-x:auto; overscroll-behavior-x:contain;
  padding-block:8px 14px;
  scrollbar-width:none;
}
.yrms::-webkit-scrollbar{ display:none }
.yrms:focus-visible{ outline:3px solid var(--brand); outline-offset:4px; border-radius:var(--r-l) }

.yrms .rev{
  /* ⚠️ margin:0 SART: kart bir <figure> ve tarayicinin varsayilani
     `margin:1em 40px`. Sifirlanmazsa kartlar arasi 80px aciliyor ve dikey
     margin stretch'i bozup kartlari farkli yukseklige dusuruyor. */
  margin:0;
  position:relative; flex:0 0 348px; overflow:hidden;
  padding:26px 24px 22px; gap:16px;
  border-radius:var(--r-x); box-shadow:var(--sh-1);
  transition:box-shadow .24s ease, transform .24s ease, border-color .24s ease;
}
/* Buyuk tirnak: markup'ta karsiligi olmayan salt sus. Sag ustte durdugu
   icin metni asagi itmiyor — blogu kisaltma derdi burada da gecerli. */
.yrms .rev::before{
  content:"\201C"; position:absolute; right:16px; top:-6px;
  font-size:88px; line-height:1; font-weight:900;
  color:rgb(47 107 208 / .09); pointer-events:none;
}
/* Tiklanabilir kart = tam metni ya da videosu olan kart. Hover kalkmasi
   yalniz onlarda: eylemi olmayan kartin kalkmasi bos vaat. */
@media (hover:hover){
  .yrms .rev.tiklanir:hover{
    box-shadow:var(--sh-2); border-color:rgb(47 107 208 / .3);
    transform:translateY(-3px);
  }
}
.yrms .rev.tiklanir:focus-within{
  border-color:var(--brand); box-shadow:0 0 0 3px rgb(47 107 208 / .18);
}

/* ---- VIDEO YORUM KARTI: lacivert ----
   Yuzuyle ve sesiyle konusan kursiyer yazili yorumdan cok daha ikna
   edici; serit icinde ayirt edilmezse o degeri kaybediyoruz. Kartlar
   ayrica PHP tarafinda serit basina aliniyor (bkz. [A2i]).
   ⚠️ Vurgu icin KIRMIZI KULLANILMADI: bu temada kirmizi birincil eyleme
   ayrildi (buton + h1 vurgusu + canli yayin). "Videoyu izle" sayfanin
   birincil eylemi degil; kirmizi olsa hero'daki CTA ile yarisirdi.
   Lacivert acik seritte tek basina yeterince siyriliyor. */
.yrms .rev.videolu{
  background:linear-gradient(158deg,var(--navy-t),var(--navy-d));
  border-color:rgb(255 255 255 / .14);
  box-shadow:0 2px 4px rgb(23 43 76 / .06), 0 20px 44px -24px rgb(16 31 57 / .55);
  color:#fff;
}
.yrms .rev.videolu::before{ color:rgb(255 255 255 / .11) }
.yrms .rev.videolu blockquote{ color:#C9D8EE }
.yrms .rev.videolu cite{ color:#fff }
.yrms .rev.videolu .who{ color:#8FB4EA }
.yrms .rev.videolu .ava{ background:rgb(255 255 255 / .12); color:#fff }
.yrms .rev.videolu .rev-foto{
  background:rgb(255 255 255 / .1);
  box-shadow:0 0 0 2px rgb(255 255 255 / .22), 0 10px 22px -12px rgb(0 0 0 / .6);
}
@media (hover:hover){
  .yrms .rev.videolu.tiklanir:hover{
    border-color:rgb(255 255 255 / .32);
    box-shadow:0 2px 4px rgb(23 43 76 / .06), 0 26px 52px -24px rgb(16 31 57 / .68);
  }
}
.yrms .rev.videolu.tiklanir:focus-within{
  border-color:#8FB4EA; box-shadow:0 0 0 3px rgb(143 180 234 / .3);
}

/* ---- kimlik satiri (kartin tepesinde) ----
   Izgara surumunde kartin DIBINDEydi ve avatar 38px'ti; kullanici
   "profil resimleri cok kucuk kalmis" dedi. Tepeye alinip 56px'e
   cikarildi: kimin konustugu metinden ONCE okunuyor. */
/* padding-right: sag ustteki dev tirnak susu isim satirina binmesin. */
.rev-kim{ display:flex; align-items:center; gap:13px; padding-right:52px }
.rev-foto,
.yrms .rev .ava{
  position:relative;   /* oynat rozeti bunlarin kosesine yerlesiyor */
  width:56px; height:56px; border-radius:50%; flex:none;
  font-size:17px; letter-spacing:.01em;
}
.rev-foto{
  background:var(--tint);
  box-shadow:0 0 0 1px var(--line), 0 6px 16px -10px rgb(23 43 76 / .45);
}
.rev-foto img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:50% }
.rev-kim-ad{ min-width:0 }   /* uzun unvan sigmadiginda kirpilabilsin */
/* Oynat isareti avatarin kosesinde. Yalniz video kartlarinda basiliyor,
   yani ZEMIN HER ZAMAN LACIVERT: beyaz daire + lacivert ucgen en yuksek
   karsitlik. Halka kartin kendi zeminiyle ayni renkte, rozet avatardan
   kesilmis gibi duruyor. Fotografi olmayan kartta bas harf dairesine
   biniyor — orada da ayni is goruyor. */
.rev-oynat{
  position:absolute; right:-3px; bottom:-3px; width:26px; height:26px;
  border-radius:50%; display:grid; place-items:center;
  background:#fff; color:var(--navy-d);
  box-shadow:0 0 0 3px var(--navy-t), 0 6px 14px -6px rgb(0 0 0 / .55);
}
.rev-oynat svg{ width:11px; height:11px; margin-left:1px }
.rev-kim cite{ font-style:normal; font-weight:900; font-size:15.5px; display:block; letter-spacing:-.015em }
.rev-kim .who{ display:block; font-size:12.5px; font-weight:700; color:var(--ink-3) }

.rev-puan{ display:inline-flex; gap:2px; margin-top:4px }
.rev-puan .yldz{ width:13px; height:13px }
/* Bos yildiz PRATIKTE BASILMIYOR: yayindaki her yorum 5 yildizli (4 ve
   alti kurasyonda ayiklaniyor, bkz. [A2i]). Kural yine de duruyor cunku
   `.yldz.bos` hero icin KOYU zemine gore boyanmis — dolgusu beyaz, acik
   kartta gorunmez kalir. Kurasyon kurali degisirse burasi hazir. */
.rev-puan .yldz.bos{ fill:rgb(23 43 76 / .15) }

/* ---- alinti metni ----
   Kirpma YALNIZ `html.js-rev` altinda: JS yoksa ne cip ne kirpma var,
   metin tam gorunur. Boylece hicbir durumda "DOM'da olup ekranda
   olmayan metin" olusmuyor. Kirpilip kirpilmadigina PHP degil JS karar
   veriyor (gercek satir olcumu), cunku karakter sayisi uzun kelimeli
   metinlerde yaniltiyor. */
.yrms .rev blockquote{ margin:0; font-size:15.5px; line-height:1.72; color:var(--ink-2) }
html.js-rev .yrms .rev blockquote{
  display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
  -webkit-line-clamp:4; line-clamp:4;
}

.rev-tam{
  display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  margin-top:auto; padding:0; cursor:pointer;
  background:none; border:0; font:inherit;
  font-size:13.5px; font-weight:800; color:var(--brand-d);
  transition:color .18s ease;
}
.rev-tam[hidden]{ display:none }
/* Kartin tamamini kaplayan saydam kontrol: tek dugme hem cip hem kart
   tiklamasi. `inset` en yakin konumlu ata olan `.rev`e gore, o yuzden
   burada yaricap YOK — hap bicimli cipin yaricapini miras alsa kartin
   koseleri tiklanmaz oluyordu. */
.rev-tam::after{ content:""; position:absolute; inset:0 }
.rev-tam:focus-visible{ outline:none }
.rev-tam svg{ width:15px; height:15px; flex:none }
.yrms .rev.tiklanir:hover .rev-tam{ color:var(--brand) }

/* Video kartinda cip metin baglantisi degil HAP: "izlenecek bir sey var"
   sozunu buton bicimi daha net veriyor. */
.yrms .rev.videolu .rev-tam{
  padding:9px 15px 9px 13px; border-radius:999px; color:#fff;
  background:rgb(255 255 255 / .12);
  border:1px solid rgb(255 255 255 / .24);
  transition:background .18s ease, border-color .18s ease;
}
.yrms .rev.videolu.tiklanir:hover .rev-tam{
  background:rgb(255 255 255 / .2); border-color:rgb(255 255 255 / .42); color:#fff;
}

.yrm-ok{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--sh-2); color:var(--ink);
  transition:border-color .18s ease, color .18s ease;
}
.yrm-ok[hidden]{ display:none }   /* display:grid, [hidden]'i eziyor */
.yrm-ok:hover{ border-color:var(--brand); color:var(--brand) }
.yrm-ok .icon{ width:19px; height:19px }
.yrm-ok.geri{  left:-16px }
.yrm-ok.ileri{ right:-16px }

.revs-alt{ margin-top:20px; text-align:center; font-size:14.5px; font-weight:800 }
.revs-alt a{ color:var(--brand-d); text-decoration:none; border-bottom:1px solid transparent }
.revs-alt a:hover{ border-bottom-color:currentColor }

@media (max-width:1039px){
  .yrm-ok{ display:none }
  /* Serit tam genislige tasiyor: son kart ekran kenarindan kirpik
     gorunsun, "devami var" duygusu oklara gerek kalmadan olussun. */
  .yrms{ margin-inline:-22px; padding-inline:22px }
  .yrms .rev{ flex:0 0 min(316px,84vw) }
  /* Kenar perdesi mobilde YOK (kadroda da boyle): sarmalayici tam
     genislikte degil, gradyan seridin degil kartin ustune biniyor. */
  .yrm-sarma::before,
  .yrm-sarma::after{ display:none }
}
@media (prefers-reduced-motion:reduce){
  .yrms .rev{ transition:none }
  .yrms .rev.tiklanir:hover{ transform:none }
}

/* ---- yorum modali: tam metin + varsa video ----
   Tek dialog iki isi goruyor. Icerik tiklanan karttan okunuyor, sayfada
   ikinci kopya YOK (canlida her yorumun tam metni gizli bir modalda
   ikinci kez tasiniyordu). */
dialog.nk-modal-yorum{ width:min(720px, calc(100vw - 28px)) }
.nk-modal-yorum .nk-modal-body{ padding:0 }
.nk-yorum-cerceve{ width:100%; aspect-ratio:16/9; border:0; display:block; background:#000 }
.nk-yorum-ic{ padding:24px clamp(20px,3vw,28px) }
.nk-yorum-metin{ font-size:16.5px; line-height:1.8; color:var(--ink-2) }
.nk-yorum-kim{
  display:flex; align-items:center; gap:14px;
  margin-top:22px; padding-top:18px; border-top:1px solid var(--line-2);
}
.nk-yorum-kim .rev-foto,
.nk-yorum-kim .ava{ width:52px; height:52px; font-size:16px }
.nk-yorum-kim b{ display:block; font-size:15.5px; font-weight:900 }
.nk-yorum-kim .who{ display:block; font-size:13px; color:var(--ink-3); font-weight:700 }
.nk-yorum-yaz{
  margin-top:18px; font-size:13.5px; font-weight:800; color:var(--brand-d);
}
.nk-yorum-yaz a{ border-bottom:1px solid transparent }
.nk-yorum-yaz a:hover{ border-bottom-color:currentColor }
.faq{ max-width:880px; border-top:1px solid var(--line) }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{ padding:22px 4px; font-weight:800; font-size:16.5px; cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px; transition:color .16s ease }
.faq summary:hover{ color:var(--brand-d) }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:""; flex:none; width:9px; height:9px; margin-right:6px; border-right:2.2px solid var(--ink-3); border-bottom:2.2px solid var(--ink-3); transform:rotate(45deg) translate(-2px,-2px); transition:transform .22s ease, border-color .16s ease }
.faq summary:hover::after{ border-color:var(--brand-d) }
.faq details[open] summary{ color:var(--navy) }
.faq details[open] summary::after{ transform:rotate(-135deg) translate(-2px,-2px); border-color:var(--navy) }
.faq .ans{ padding:0 4px 24px; color:var(--ink-2); font-size:15.5px; line-height:1.75; max-width:70ch }
.final{ text-align:center }
.final h2{ font-size:clamp(27px,4vw,40px); max-width:19ch; margin-inline:auto }
.final p{ color:var(--ink-2); margin-top:14px; font-size:18px }
.final .hero-cta{ justify-content:center; margin-top:26px }

/* ============ 8. SSS — tepede baslik + tam genislikte <details> ============
   `.faq` taban kurallari hemen yukarida (anasayfa taslagindan tasinan
   blok); burada bolum duzeni, admin HTML'inin tipografisi, sinav
   takvimi tablosu ve yardim karti var.

   ⚠️ IZGARA/KART DENENMEDI, BILINCLI: cevaplar 400 ile 3.265 karakter
   arasinda (olculdu). Footer turunun dersi — esit olmayan icerikte
   sutun basina kart ya bos alt bosluk ya hizasiz kenar uretir.

   ⚠️ IKI KOLON DENENDI VE BIRAKILDI (kullanici, 2026-08-10): baslik +
   yardim karti solda sticky duruyordu, akordiyon sagdaki dar kolona
   sikisiyordu. Genis ekranda cevabin tam acilmasi daha degerli → o blok
   tepeye alindi, liste tam genislige cikti. `.sss-yan`/`.sss-grid`
   kurallari bu yuzden yok; yeni oturum geri getirmesin.

   ⚠️ ORTAK.CSS RESET'I ADMIN ICERIGINI SOYUYOR: `ul{list-style:none;
   padding:0}` ve `p{margin:0}` genel kural. Admin cevabinda madde
   isareti ve paragraf araligi bekleniyor, ikisi de `.ans` icinde geri
   veriliyor. Admin HTML'i basan her yeni blokta ayni sey gerekecek. */
/* ⚠️ UST BOSLUK GLOBAL DEGERIN ALTINDA, BILINCLI: yukaridaki yorum seridi
   `section{padding-block:clamp(64px,8vw,116px)}` (ortak.css:115) ile
   bitiyor, #sss de kendi ust boslugunu ekliyordu — iki blok arasi
   1920px'lik ekranda ~192px'e cikiyor, arada kocaman bos bir bant
   kaliyordu (kullanici bildirdi, 2026-08-10). Ust bosluk burada,
   yorum seridinin alt boslugu da asagida kisaltildi; toplam ~100px.
   Alt bosluk ilgili egitimler gelince kisildi (cift bant olmasin). */
#sss{
  background:var(--surface); border-block:1px solid var(--line);
  padding-block:clamp(30px,3.4vw,50px) clamp(36px,4vw,56px);
}
/* Ust bosluk da ayni sebeple kisildi: `.kadro` (lacivert) alt boslugu
   44px'te bitiyor, yorum seridi global 116px ile basliyordu — arada
   ~160px. Simdi iki komsu gecis de ~95px, sayfanin ritmi esitlendi. */
#yorumlar{ padding-block:clamp(30px,3.4vw,50px) }
/* Tepe blogu: baslik, altinda tam genislikte yardim seridi, sonra liste.
   Kart once basligin saginda 380px'lik bir kolondaydi; kullanici tam
   genislik istedi (2026-08-10) — gerekcesi ileriye donuk: "Yapay zekaya
   sor" gibi yeni dugmeler eklenecek, dar kolonda yer yok. */
.sss-ust{ margin-bottom:clamp(28px,3.6vw,44px) }
.sss-ust .sec-head{ margin-bottom:18px }

/* ---- yardim seridi ----
   Zemin --bg: bolumun kendisi beyaz (--surface), kart beyaz kalsa
   yalniz cerceveyle ayirt edilirdi.
   Yatay dizilim: metin solda, eylemler sagda. Dugme sayisi artabilir,
   bu yuzden eylem kutusu flex-wrap — dar ekranda kendiliginden alt
   satira geciyor, yeni dugme icin kural yazmak gerekmiyor. */
.sss-kart{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:14px 28px;
  background:var(--bg); border:1px solid var(--line);
  border-radius:var(--r-x); padding:18px 22px; box-shadow:var(--sh-1);
}
.sss-kart-metin{ flex:1 1 300px; min-width:0 }
.sss-kart-bas{ font-size:17px; font-weight:900; letter-spacing:-.02em }
.sss-kart-alt{ margin-top:6px; font-size:14.5px; line-height:1.62; color:var(--ink-2) }
.sss-kart-eylem{ display:flex; flex-wrap:wrap; align-items:center; gap:10px }
.sss-kart-tel,
.sss-kart-wa{
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:11px 16px; border-radius:var(--r);
  font-size:15px; font-weight:800; white-space:nowrap;
  transition:border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
/* Telefon dolu lacivert, WhatsApp cerceveli: ikisi de birincil eylem
   gibi durursa hero'daki kirmizi CTA ile yarisir. */
.sss-kart-tel{ background:var(--navy); color:#fff; border:1px solid var(--navy) }
.sss-kart-tel:hover{ background:var(--navy-t); border-color:var(--navy-t) }
.sss-kart-wa{ background:var(--surface); color:var(--ink); border:1px solid var(--line) }
.sss-kart-wa:hover{ border-color:var(--brand); box-shadow:var(--sh-1) }
.sss-wa-ikon{ width:19px; height:19px; flex:none; fill:currentColor }
.sss-kart-tum{
  display:inline-block; margin-top:8px;
  font-size:13.5px; font-weight:800; color:var(--brand-d);
  border-bottom:1px solid transparent;
}
.sss-kart-tum:hover{ border-bottom-color:currentColor }
@media (max-width:600px){
  /* Tek kolona dusunce dugmeler tam genislik: 320px'lik ekranda yan yana
     iki dugme 130px'e sikisiyor, telefon numarasi kiriliyor. */
  .sss-kart-eylem{ width:100%; display:grid; gap:9px }
}

/* ---- soru listesi ----
   ⚠️ CIZGIYLE AYRILAN LISTE BIRAKILDI (kullanici, 2026-08-10): `.faq`
   tabani her kalemi yalnizca alt cizgiyle ayiriyor, soru ile cevap ayni
   beyaz zeminde duruyordu. Bolum genisligi 1140px'e cikinca "soru nerede
   bitti, cevap nerede basladi" belirsizlesti. Cozum: her kalem ayri bir
   kutu, basligin kendi zemini var.

   Kapali baslik --tint, acik baslik LACIVERT: sayfanin geri kalani
   (hero, YZ, kadro) zaten lacivert konusuyor, yani yeni bir renk
   uretmiyoruz. Tek kalem acik kaldigi icin (bkz. name="sss-akordiyon")
   ekranda tek bir lacivert seri oluyor — hangi sorunun okundugu bir
   bakista belli. */
.sss-liste{ max-width:none; border-top:0; display:grid; gap:10px }
.sss-liste details{
  border:1px solid var(--line); border-radius:var(--r-l);
  background:var(--surface); overflow:hidden;   /* koseler basligi kirpsin */
}
.sss-liste summary{
  padding:15px 18px; gap:14px;
  background:var(--tint); color:var(--navy);
  transition:background .16s ease, color .16s ease;
}
.sss-liste summary h3{ font:inherit; margin:0; min-width:0; letter-spacing:-.01em }
.sss-liste summary:hover{ background:#DEEAF7; color:var(--navy) }
.sss-liste summary::after{ border-color:var(--navy); opacity:.6; margin-right:0 }
.sss-liste summary:hover::after{ border-color:var(--navy); opacity:1 }
.sss-liste details[open]{ box-shadow:var(--sh-1) }   /* acik kalem hafifce one cikiyor */
.sss-liste details[open] summary{ background:var(--navy); color:#fff }
.sss-liste details[open] summary:hover{ background:var(--navy-t) }
.sss-liste details[open] summary::after{ border-color:#fff; opacity:.9 }
/* ⚠️ CEVAP METNINE ch SINIRI KONMAZ. Once 70ch (`.faq .ans` tabani),
   sonra 76ch denendi: panel 1140px'e cikinca metin solda ~590px'lik bir
   sutunda kaliyor, sagda yari panel bos duruyordu — kullanici bunu
   "sadece solda geliyor" diye bildirdi (2026-08-10). Ayni ders ortak.css
   `.sec-head p`'de zaten alinmis (bkz. ortak.css:119): 60ch/62ch denenip
   birakilmis, gerekce birebir ayni. Satir uzunlugu okunurluk icin
   onemli ama bosluk daha kotu duruyor; nefes line-height 1.75'ten
   geliyor. Genislik gerekiyorsa panelin kendisi daraltilir, metin degil. */
.sss-liste .ans{ max-width:none; padding:17px 18px 19px }   /* baslikla ayni ic bosluk */
.sss-liste .ans > :first-child{ margin-top:0 }
.sss-liste .ans p{ margin:0 0 12px }
.sss-liste .ans > :last-child{ margin-bottom:0 }
.sss-liste .ans :is(b,strong){ color:var(--ink); font-weight:800 }
.sss-liste .ans :is(ul,ol){ margin:0 0 12px; padding-left:20px; list-style:revert }
.sss-liste .ans li{ margin:5px 0 }
.sss-liste .ans :is(h3,h4,h5){ font-size:16px; font-weight:900; margin:16px 0 8px }
.sss-liste .ans a{
  color:var(--brand-d); font-weight:800;
  border-bottom:1px solid rgb(31 82 172 / .32);
}
.sss-liste .ans a:hover{ border-bottom-color:currentColor }

/* ---- acilis hareketi ----
   `<details>` yillarca animasyona kapaliydi; herkes JS ile yuksekligi
   olcup max-height'a yaziyordu. Artik gerekmiyor: `::details-content`
   acilan govdeyi hedefliyor, `interpolate-size:allow-keywords` de
   0 → auto gecisine izin veriyor. Yani kutuphane de, olcum JS'i de yok.

   @supports icinde: destegi olmayan tarayicida kalem eskisi gibi aninda
   aciliyor — bozulma degil, yalnizca hareket yok. Ayni tarayicilar
   `<details name>` grubunu da desteklemiyor, iki ozellik ayni kusakta.

   ⚠️ SURE 260ms: 3.265 karakterlik TR-YOS cevabi acilirken daha uzun bir
   gecis (400ms+) sayfayi agir gosteriyor, cunku yukseklik degisimi cok
   buyuk. Kisa cevapta fark edilmiyor, uzun cevapta belli oluyor. */
@supports selector(::details-content){
  .sss-liste{ interpolate-size:allow-keywords }
  .sss-liste details::details-content{
    block-size:0; overflow:hidden;
    transition:block-size .26s cubic-bezier(.22,.68,.3,1),
               content-visibility .26s allow-discrete;
  }
  .sss-liste details[open]::details-content{ block-size:auto }
  /* Govde ayrica hafifce yukaridan iniyor: yalniz yukseklik degisimi
     "perde acildi" gibi durur, metnin kendisi de gelmeli. */
  .sss-liste .ans{
    opacity:0; transform:translateY(-7px);
    transition:opacity .24s ease .03s, transform .24s ease .03s;
  }
  .sss-liste details[open] .ans{ opacity:1; transform:none }
}
/* Hareketi kapatmis kullanicida gecis yok — ama govde gorunur kalmali,
   yoksa opacity:0 takili kalir ve cevap hic okunmaz. */
@media (prefers-reduced-motion:reduce){
  .sss-liste details::details-content{ transition:none }
  .sss-liste .ans{ opacity:1; transform:none; transition:none }
}
.sss-not{ font-size:13px; color:var(--ink-3); line-height:1.6 }
.sss-alt-not{ padding:8px 4px 0; font-size:13.5px; color:var(--ink-3); line-height:1.6 }
.sss-alt-not a{ font-weight:800; color:var(--brand-d) }

/* ---- admin cevabindaki tablo ----
   Admin panelinden gelen tablolarda genislik/stil nitelikleri var ve
   sokuluyor (bkz. sss_cevap_html); gorunum tamamen buradan geliyor.
   Sarmalayici yatay kaydiriyor: EUS cevabindaki tablo 6 kolonlu. */
.sss-tablo{
  overflow-x:auto; margin:0 0 14px;
  border:1px solid var(--line); border-radius:var(--r);
}
.sss-tablo table{ width:100%; min-width:420px; border-collapse:collapse; font-size:14px }
.sss-tablo :is(th,td){
  padding:9px 12px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line-2);
}
.sss-tablo th{ font-weight:800; background:var(--tint) }
.sss-tablo tr:last-child :is(th,td){ border-bottom:0 }

/* ---- sinav takvimi ----
   Canlida bu tarihler yalniz JSON-LD'de duruyordu, ekranda yoktu.
   Donem basina TEK soru, bes tarih burada. */
/* max-width: satirlar etiket solda / tarih sagda hizalaniyor; panel tam
   genisligindeyken (1140px) ikisi arasinda kocaman bir bosluk kaliyor,
   goz eslesmeyi kaybediyor. */
.sss-takvim{
  margin:0 0 12px; display:grid; gap:1px; max-width:620px;
  background:var(--line-2); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
}
.sss-takvim > div{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 18px;
  padding:10px 14px; background:var(--surface);
}
.sss-takvim dt{ font-size:14.5px; font-weight:800; color:var(--ink) }
.sss-takvim dd{
  margin:0; font-size:14.5px; font-weight:800; color:var(--brand-d);
  font-variant-numeric:tabular-nums;
}
/* Aciklanmamis tarih vurgulanmiyor: bilinen tarihle ayni agirlikta
   durursa liste "hepsi belli" gibi okunuyor. */
.sss-takvim dd.bos{ color:var(--ink-3); font-weight:700 }

/* ============ 9. ILGILI EGITIMLER — kayan şerit (kadro motoru) ============
   14 kartlık ızgara sayfayı uzatıyordu → tek satır, nkKayanSerit.
   SSS ile bitişik: üst dolgu kısık. */
.ilgili{
  padding-block:clamp(40px,4.5vw,68px) clamp(48px,5.5vw,80px);
  background:var(--bg);
}
.ilgili .sec-head{ margin-bottom:clamp(16px,2.2vw,24px) }

.ilgili-sarma{ position:relative }
.ilgili-sarma::before,
.ilgili-sarma::after{
  content:""; position:absolute; top:0; bottom:0; width:40px; z-index:2;
  pointer-events:none;
}
.ilgili-sarma::before{ left:0;  background:linear-gradient(90deg,var(--bg),transparent) }
.ilgili-sarma::after{  right:0; background:linear-gradient(270deg,var(--bg),transparent) }

.ilgililer{
  display:flex; gap:14px; align-items:stretch;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-behavior:auto;
  padding:4px 2px 10px;
  scrollbar-width:none;
}
.ilgililer::-webkit-scrollbar{ display:none }
.ilgililer:focus-visible{ outline:2.5px solid var(--red); outline-offset:4px }

.ilgili-kart{
  flex:0 0 min(260px,78vw);
  display:flex; flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  overflow:hidden;
  box-shadow:var(--sh-1);
  color:inherit;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ilgili-kart:hover{
  border-color:rgb(47 107 208 / .35);
  box-shadow:var(--sh-2);
  transform:translateY(-2px);
}

.ilgili-gorsel{
  display:block; aspect-ratio:16 / 10;
  background:var(--tint); overflow:hidden;
}
.ilgili-gorsel img{
  width:100%; height:100%; object-fit:cover;
  display:block;
}

.ilgili-govde{
  display:flex; flex-direction:column; gap:6px;
  padding:12px 13px 14px; flex:1;
}
.ilgili-tur{
  align-self:flex-start;
  font-size:11px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--brand-d);
  background:var(--brand-w);
  padding:3px 8px; border-radius:999px;
}
.ilgili-ad{
  font-size:14.5px; font-weight:900; line-height:1.3;
  letter-spacing:-.018em; color:var(--navy);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden;
}
.ilgili-kat{
  margin-top:auto; padding-top:2px;
  font-size:12px; font-weight:700; color:var(--ink-3);
}

.ilgili-ok{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--sh-2); color:var(--ink);
  transition:border-color .18s ease, color .18s ease;
}
.ilgili-ok[hidden]{ display:none }
.ilgili-ok:hover{ border-color:var(--brand); color:var(--brand) }
.ilgili-ok .icon{ width:19px; height:19px }
.ilgili-ok.geri{  left:-16px }
.ilgili-ok.ileri{ right:-16px }

@media (max-width:1039px){
  .ilgili-ok{ display:none }
  .ilgililer{ margin-inline:-22px; padding-inline:22px }
  .ilgili-kart{ flex-basis:min(240px,78vw) }
  .ilgili-sarma::before,
  .ilgili-sarma::after{ display:none }
}
@media (prefers-reduced-motion:reduce){
  .ilgili-kart{ transition:none }
  .ilgili-kart:hover{ transform:none }
}