/* ============================================================
   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 }
/* ♻️ 2026-09-03 (ana sayfa mobil turu) — DOKUNMA ALANI 28 → 46px.
   "Asistanı tanı" linki üç sayfada da (kurs detay / kategori / ana)
   28px ölçüldü; eşik 44 (çerez düğmeleri vakasıyla aynı kural, §K).
   GÖRSEL DEĞİŞİKLİK SIFIR: görünmez ::before katmanı tıklama kutusunu
   büyütüyor, akış/alt çizgi/hiza hiç oynamıyor (.rev-tam'ın kaplama
   deseninin küçük hâli). ::after DEĞİL — boşta ama ileride ok ikonu
   vb. için serbest kalsın. */
.yz-more{ position:relative }
.yz-more::before{ content:''; position:absolute; inset:-9px -6px }
/* 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 }
}

/* --- video YOKSA kursun vitrin gorseli (view [A2d-2]) ---
   Olculdu 2026-09-08 (canli sitemap.xml, 231/231 adres HTTP 200): 182
   kurs sayfasinin 17'sinde tanitim videosu yok — 14 akilli soru
   bankasi/deneme + vus + LGS Fen + YKS Matematik.
   .kbakis-grid >=980px'de sabit iki kolon oldugu icin slot basilmayinca
   metin 1. kolona dusuyor, 2. kolon (1520px wrap'ta ~700px) olu kaliyordu.
   Slot artik her zaman dolu: video ya da gorsel.

   Gorseller tbl_courses_icons'tan geliyor ve HEPSI seffaf zeminli
   400x300 PNG (canlida olculdu, panel bu olcuye normalize ediyor).
   Kolonun tam genisligine (~640px) buyutulurse 1,6x upscale ile
   bulaniklasir; bu yuzden kadraj panel, gorsel panelin icinde `contain`
   ile ortalanip dogal 400px'inde duruyor. Seffaf zemin marka tonuna
   oturuyor, JPEG yedekte (laptop_nettekurs) de ayni cerceve calisiyor.

   ⚠️ Bu blok `.kbakis-video` sinifini da tasiyor (min-width:0 icin);
   yukaridaki lite-youtube kurallarinin hicbiri eslesmiyor, cunku hepsi
   .yt-video-card / lite-youtube alt secicilerine bagli. */
.kbakis-gorsel .kgorsel{
  margin:0; display:grid; place-items:center;
  aspect-ratio:16 / 10; padding:clamp(18px,2.6vw,34px);
  border-radius:var(--r-l); overflow:hidden;
  background:
    radial-gradient(78% 92% at 50% 6%, var(--brand-w) 0%, transparent 68%),
    var(--tint);
  box-shadow:var(--sh-1), inset 0 0 0 1px var(--line);
}
/* picture kendi kutusunu kurmasin: izgara ogesi dogrudan img olsun */
.kbakis-gorsel .kgorsel picture{ display:contents }
.kbakis-gorsel .kgorsel img{
  width:100%; max-width:400px;
  height:100%; max-height:100%;
  object-fit:contain;
}
/* dar ekranda 16/10 kadraj gorseli iyice kucultuyordu */
@media (max-width:560px){
  .kbakis-gorsel .kgorsel{ aspect-ratio:4 / 3; padding:16px }
}

/* --- 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.
       ♻️ 2026-09-23 — 16px → 48px. Tema baykusu karttan 32px TASIYOR
       (mobilde `transform:scale(.7)` ile) ve 16px'lik dolguda
       KIRPILIYORDU; 390 ve 360px'te olculdu. Negatif margin ayni
       miktarda arttigi icin duzen kaymiyor, yalniz kirpma alani aciliyor.
       ESKISI: padding-top:16px; margin-top:-16px; */
    padding-top:48px; margin-top:-48px;
    padding-bottom:6px;
    scrollbar-width:none;

    /* 🐞 2026-09-28 — ILK VE SON KARTTA BOSLUK ASIMETRIK (kullanici:
       *"paketin solunda bosluk var saginda yok gibi gorundu bir tanesinde"*).
       OLCULDU (canli, dort genislikte, ilk/son kart, eski `flex-basis:86%`):
         360px  kart 272  ILK 22/66   SON 66/22
         375px  kart 285  ILK 22/68   SON 68/22
         390px  kart 298  ILK 22/70   SON 71/22
         430px  kart 332  ILK 22/76   SON 76/21
       ORTADAKI kart her zaman ORTALI (45/45). Sebep `scroll-snap-align:
       center` ile `padding-inline` uyusmuyordu: kart ortalanmak istiyor
       ama `scrollLeft:0`da daha sola gidemiyor, 22px'lik dolguya
       yapisiyor; son kartta ayni sey aynalaniyor.

       ⛔ DOLGUYU BUYUTMEK TEK BASINA COZMEZ: kart `flex-basis:86%` ile
          DOLGULU kutunun yuzdesi. Dolgu buyuyunce kart kuculuyor, ortalama
          kosulu bir daha kaymiyor — denklem cozumsuz (P = 0.07W + 0.86P).

       ⛔ 1. DENEME — 76vw kart + 12vw dolgu. YAYINA ALINDI, GERI ALINDI.
          Bosluklar esitlendi ama kart daraldi ve ERISIM SURESI SATIRLARI
          KARTIN DOLGUSUNU ASTI (kullanici: *"paket daha da daralmis ve
          erisim suresi kismi sagdan tasmis"*). Sebebi olculdu:
            `.pkg-sure-liste` bir grid; satiri `flex` + `flex-wrap:nowrap`
            ve TUM ogeleri `flex:none` + `white-space:nowrap`. Yani satirin
            EN KUCUK genisligi sabit: 254px. Izgara kolonu bunun altina
            inemiyor, satir kutusu kartin 28px'lik dolgusunu asip tasiyor.
          Kart ICI genislik = kart - 56. 254px icin kart >= 310px sart:
            genislik   76vw kart / ic      %100 kart / ic
            320px      243 / 184  ✗        276 / 217  ✗ (bkz. asagi)
            360px      274 / 214  ✗        316 / 257  ✓
            375px      285 / 226  ✗        331 / 272  ✓
            390px      297 / 238  ✗        346 / 287  ✓
            412px      313 / 254  ✗        368 / 309  ✓
            430px      327 / 268  ✓        386 / 327  ✓
          ⚠️ Tasma 76vw ile BASLAMADI, 86% ile de vardi (375px'te 30px).
             76vw yalnizca 412px'te sinirin hemen ustunden altina dusurdu.

       ✅ COZUM (kullanici onerisi — "daraltmaya gerek yok, tam sigsa"):
          `padding-inline:22px` + `flex:0 0 100%`. Iki yan bosluk her
          genislikte ve her kaydirma konumunda 22/22; satirlar siginca
          tasma 360px'ten itibaren SIFIR (olculdu, 6 genislikte).
       ⚠️ "DEVAMI VAR" IPUCU KAYBOLMUYOR: `gap:14px` yuzunden komsu kartin
          ~8px'lik seridi sagda gorunmeye devam ediyor; ustune `.pkgs-kaydir`
          oklari zaten basiliyor.
       ⚠️ `margin-inline:-22px` AYNEN KALIYOR — `.wrap`in 22px dolgusundan
          tasip tam genislige yayilmayi o sagliyor; dolguyla ilgisi yok.
       ⚠️ 320px'te tam genislik de yetmiyor (217 < 254). Orasi rozet
          gizlenerek cozuldu: `.pkg-sure-en` @container kurali. */
    /* ⛔ GERI ALINDI 2026-09-28 — padding-inline:12vw; */
  }
  .pkgs::-webkit-scrollbar{ display:none }
  .pkgs > .pkg{
    /* ⛔ GERI ALINDI 2026-09-28 — flex:0 0 76vw; */
    flex:0 0 100%; scroll-snap-align:center; scroll-snap-stop:always;
  }
  /* `[data-kart="1"]` ozel durumu KALKTI: genel kural artik zaten tam
     genislik veriyor, tek kartta ayni sonucu uretiyor.
     ESKISI:  .pkgs[data-kart="1"]{ padding-inline:22px }
              .pkgs[data-kart="1"] > .pkg{ flex:0 0 100% }  */
  /* ⛔ 2026-09-30 — DEVRE DISI, SILINMEDI. Yerini `.pkgs-ust` +
     `.pkgs-okkat` aldi (asagida [K] blogu). Iki sebep:
       1) Serit karuselin ALTINDAydi; mobilde kart 1388px oldugu icin
          ekranin 1388px altinda kaliyordu, kullanici hic gormuyordu.
       2) Komsuluk secicisi ARTIK ESLESMEZ: `.pkgs` bir `.pkgs-sarma`
          icine alindi (yapiskan ok orada yasiyor), yani `.pkgs` ile
          `.pkgs-kaydir` kardes degil.
     Geri alinirsa markup'taki `<?php if (FALSE)` da acilmali.
     ESKISI:
  .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 }
  */

  /* 🐞 TEMA MOBIL KURALLARI BURADAN TASINDI (2026-09-23).
     Burada yaziliydi ve CALISMIYORDU: tema blogu dosyada DAHA AsAGIDA
     ve medya sorgusu OZGULLUK EKLEMEZ — esit ozgullukte sonraki kural
     kazanir. Yani mobilde de `top:-72px` gecerli oluyor, baykus 48px'lik
     dolguyu 22px asip KIRPILIYORDU (390 ve 360px'te olculdu).
     Kurallarin yeni yeri: tema blogunun hemen ardi. */
}

/* ⛔ ESKI ALT SERIDIN OKLARI — 2026-09-30'da DEVRE DISI, SILINMEDI.
   Markup `<?php if (FALSE)` ile kapatildi (kurs_detay.php B2.a1);
   kural eslesecek bir oge bulamiyor. Karar geri alinirsa ikisi birden
   acilir.
   ESKISI:
.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) }
.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 }
*/

/* ══════════════════════════════════════════════════════════════════
   [K] MOBIL KAYDIRMA IPUCU — ustte serit + yapiskan ok  (2026-09-30)
   ══════════════════════════════════════════════════════════════════
   Kullanici: *"mobilde kartlarin saga sola degisebildigi pek
   anlasilmiyor, bir ok isareti koymamiz lazim."*

   🔑 ESKI IPUCU VARDI AMA GORULMUYORDU. Olculdu: mobilde bir paket
   karti 1388px; `.pkgs-kaydir` karuselin ALTINDA, yani ekranin 1388px
   altinda. Kullanici kartin tepesini goruyor, orada isaret yok.
   Sorun ok olmamasi degil, okun gorulemeyecek yerde olmasiydi.

   IKI PARCA:
     1) `.pkgs-ust` — kartlarin USTUNDE: "N paket — kaydirarak gez" +
        noktalar. Kac paket oldugunu kart gorunmeden soyluyor.
     2) `.pkgs-okkat` — `position:sticky` + `height:0`. Akista yer
        kaplamiyor, YALNIZ `.pkgs-sarma` ekrandayken yapisiyor; yani
        1388px'lik kartin ortasina inince de ok elinin altinda, ama
        kiyas tablosuna sarkmiyor.

   🔴 GORUNURLUK KAPISI TABANDA — 2026-09-30'da CANLIDA DEGIL, DENEMEDE
      YAKALANDI. Ilk surumde `display:none` medya sorgusunun ICINE
      yazilmisti; ogeler DOM'a kosulsuz basildigi icin 760px ustunde
      hicbir kural eslesmiyor, olcusuz <button> icindeki SVG kapsayiciyi
      dolduruyordu — kullanici: *"tam ekran yaptigimda kocaman bir ok
      var sayfada."*
      ✅ KURAL: taban durum HER YERDE gizli; gorunurlugu YALNIZ mobil
         blok acar. Olcu tabanda kalir — kapi bir gun acik unutulsa bile
         ok 44px'te kalir, sayfayi kaplayan ucgen bir daha olusmaz.
      📌 Ayni tuzak bu dosyada zaten yaziliydi (`.pkgs-kaydir`,
         `.kadro-ok[hidden]`); yeni kontrol eklerken once oraya bak.

   ⛔ KOMSU KARTI GOSTERME (peek) DENENMEDI, BILINCLI: "Erisim suresi"
      satirinin en kucuk genisligi 254px, kart bunun altina inemiyor
      (yukaridaki `.pkgs` notu). 360px'lik ekranda peek'e yer yok.
   ══════════════════════════════════════════════════════════════════ */
.pkgs-sarma{ position:relative }

.pkgs-ust{
  display:none;                     /* 🔒 gorunurluk kapisi */
  align-items:center; gap:10px; margin:0 0 12px;
  font-size:12.5px; font-weight:800; color:var(--ink-3);
}
.pkgs-ust-metin{ display:inline-flex; align-items:center; gap:6px }
.pkgs-ust-metin .icon{
  width:15px; height:15px; flex:none;
  fill:none; stroke:currentColor; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
}

.pkgs-nokta{
  display:none;                     /* 🔒 gorunurluk kapisi */
  align-items:center; gap:7px; margin-left:auto;
}
.pkgs-nokta-btn{
  position:relative;
  width:8px; height:8px; padding:0; border:0; border-radius:50%;
  background:var(--line-2); cursor:pointer;
  transition:width .22s ease, background .22s ease;
}
.pkgs-nokta-btn.is-aktif{ width:24px; border-radius:99px; background:var(--brand) }
/* Dokunma hedefi 8px degil 32px — gorunum buyumeden alan aciliyor
   (`.yz-more`daki desenin aynisi). */
.pkgs-nokta-btn::before{ content:''; position:absolute; inset:-12px }

.pkgs-okkat{
  display:none;                     /* 🔒 gorunurluk kapisi — DEV OK HATASI */
  position:sticky; top:46vh; height:0; z-index:5;
  pointer-events:none;              /* katman tiklamayi yutmasin */
}
.pkgs-yuzen{
  pointer-events:auto;              /* dugmenin kendisi tiklanabilir */
  position:absolute; top:0; transform:translateY(-50%);
  display:grid; place-items:center;
  width:44px; height:44px; padding:0;
  border-radius:50%; cursor:pointer;
  background:rgb(255 255 255 / .94); color:var(--navy);
  border:1px solid var(--line);
  box-shadow:0 8px 22px -8px rgb(16 31 57 / .5);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:opacity .2s ease;
}
/* ⚠️ Olcu TABANDA duruyor, medya sorgusunda DEGIL — yukaridaki
   "dev ok" notunun sigortasi. */
.pkgs-yuzen .icon{
  width:20px; height:20px; flex:none;
  fill:none; stroke:currentColor; stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.pkgs-yuzen.geri{  left:-8px }
.pkgs-yuzen.ileri{ right:-8px }
/* Uctaki ok: gorunmez + tiklanamaz. JS `disabled` yaziyor.
   `visibility` degil `opacity`: gecis yumusak olsun. */
.pkgs-yuzen[disabled]{ opacity:0; pointer-events:none }

/* ── gorunurluk YALNIZ mobilde ── */
@media (max-width:759px){
  .pkgs-ust{ display:flex }
  .pkgs-nokta{ display:flex }
  .pkgs-okkat{ display:block }
}

@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) }

/* ══════════════════════════════════════════════════════════════════
   PAKET TEMALARI — Core / Plus / Pro / Master          (2026-09-23)
   ══════════════════════════════════════════════════════════════════
   Admin pakete tema secince (`fee_tema`) kart metalik bir ust bant,
   tema adi ve kademe baykusu kazaniyor. Tema DEGISKENLERI karta inline
   basiliyor (`helpers/nk_tema_helper.php` → nk_tema_stil), burada
   yalniz duzen var — renkler tek yerde, helper'da.

   ⚠️ TEMA YALNIZ GORSEL: paket sirasini, vitrin secimini (ilk 3) ve
      kazanma garantisi kuralini DEGISTIRMEZ.
   📄 memory-bank/paket-tema-tasarimi-plan.md
   ══════════════════════════════════════════════════════════════════ */
.pkg[data-tema]{
  /* kurs.css'in mavi vurgusunu KART KAPSAMINDA temaya cevir: tek blokla
     ✓ isaretleri, "tamamini gor" dugmesi, secili sure satiri ve odak
     halkasi temaya doner — hicbiri ayrica yazilmadi.
     ⚠️ CTA'lar ETKILENMEZ: `.btn-primary` `--red`, `.btn-navy` `--navy`
        kullaniyor, ikisi de `--brand` degil (olculdu). */
  --brand:   var(--tema-koyu);
  --brand-d: var(--tema-koyu);
  /* `--brand-w` normalde acik MAVI dolgu (`.pkg-tumu-btn` zemini, secili
     sure satiri). Temali kartta SEFFAF: altindaki metalik/sisli zemin
     gorunsun, ikinci bir renk katmani binmesin. */
  --brand-w: transparent;

  position:relative;
  padding-top:0;                    /* bandi ust kenara yapistir */
  border:2px solid var(--tema-kenar);
  overflow:visible;                 /* baykus tasabilsin */

  /* IKI KATMAN tek `background-image` icinde:
       1) ustteki 132px'lik METALIK bant — duz renk "eski gazete" gibi
          duruyordu; metalde isik acik/koyu/acik diye kirilir
       2) bandin altinda govdeye inen SEFFAF gecis (dusuk alfa) */
  background-color:#fff;
  background-image:
    var(--tema-metal),
    linear-gradient(180deg, var(--tema-sis) 0, rgb(255 255 255 / 0) 88%);
  background-size:100% 132px, 100% 100%;
  background-repeat:no-repeat, no-repeat;
  box-shadow:0 20px 44px -26px rgb(16 31 57 / .38);
}

/* 🐞 `.pkg-hero::before` ilk karta 4px'lik renk cubugu basiyor. Temali
   kartta metal bandin en ust duragiyla ton farki yaratip bant boyunca
   ince bir CIZIK olusturuyordu (koyu temada goze batiyordu).
   Temali kartta basilmiyor; bandin kendi parilti cizgisi ust kenari
   zaten veriyor. ⚠️ Temasiz kartta cubuk YERINDE kaliyor. */
.pkg[data-tema].pkg-hero::before{ display:none }
.pkg[data-tema].pkg-hero{ border-color:var(--tema-ana) }

/* "maddenin tamamini gor" dugmesinin kenari kurs.css'te SABIT mavi
   (`rgb(0 91 234 / .22)`), jetondan gelmiyor — temali kartta elle
   cevriliyor, yoksa altin/bakir kartta mavi bir cerceve kaliyor. */
.pkg[data-tema] .pkg-tumu-btn{ border-color:var(--tema-kenar) }

.pkg-tema{
  position:relative;
  height:132px; margin:0 -28px 20px; padding:0 28px;
  display:flex; flex-direction:column; justify-content:center; gap:3px;
  border-bottom:1px solid var(--tema-kenar);
  /* Metal ust pariltisi. Siddeti TEMADAN geliyor: koyu zeminde %55
     beyaz ikinci bir "cizik" gibi duruyordu, Master'da %10. */
  box-shadow:inset 0 1px 0 var(--tema-parilti);

  /* 🐞 2026-09-23 — PARILTI KARTIN YUVARLAK KOSESINDEN TASIYORDU
     (kullanici: "sol tarafinda halen beyaz bir serit var").
     Bant DIKDORTGEN, kart ise `border-radius:24px` + `overflow:visible`
     (baykus tasabilsin diye). Pariltinin 1px'lik cizgisi bu yuzden ust
     kosede kartin egrisini takip etmiyor, kenarin DISINA tasan kisa bir
     beyaz cubuk olarak kaliyordu — kartin disinda, boslukta duran bir
     parca. A/B ile dogrulandi: `box-shadow:none` verilince cubuk da
     gidiyor, huzme (`::after`) kapatilinca DURUYOR.
     ⛔ `overflow:hidden` COZUM DEGIL: baykus bu kutunun ICINDE duruyor
        (`nk_tema_bolge()`), kirpilirdi.
     Yaricap karttan turetiliyor: dis 24px - 2px kenar = ic 22px. */
  border-radius:calc(var(--r-x) - 2px) calc(var(--r-x) - 2px) 0 0;
}
/* Diyagonal isik huzmesi — metal yuzeyin "premium" hissi buradan. */
.pkg-tema::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  /* Huzme de ayni egriyle kesilsin; yoksa yari saydam beyaz kosenin
     disina sizip hafif bir pus birakiyor. */
  border-radius:inherit;
  background:linear-gradient(104deg,
    rgb(255 255 255 / 0)   34%,
    rgb(255 255 255 / .34) 47%,
    rgb(255 255 255 / 0)   60%);
}
/* 🐞 2026-09-23 — BANT ROZETIN USTUNE BINIYORDU (kullanici bulgusu:
   "rozet yazisindan beyaz bir serit geciyor").
   Rozet (`.pkg-ribbon`, absolute, top:-13px) ile bant (`.pkg-tema`,
   relative) ikisi de KONUMLU ve z-index'siz; boyama DOM sirasina
   dusuyor ve rozet markup'ta banttan ONCE geldigi icin bant ustte
   kaliyor. Bandin zemini seffaf oldugundan rozet goruluyor ama
   ust kenar pariltisi (`inset 0 1px 0`) yazinin ortasindan geciyordu —
   rozetin alt 20px'i bandin icinde kaliyor (olculdu).
   ⚠️ Master'da fark edilmiyordu: orada parilti %10, Pro'da %60.
      Yani hata dort temada da vardi, yalniz ucunde GORUNUYORDU.
   Tek satirlik cozum rozeti bandin uzerine cikarmak; temasiz kartta
   hicbir sey degismiyor (kapi `[data-tema]`). */
.pkg[data-tema] .pkg-ribbon{ z-index:2 }

.pkg-tema-ad{
  font-size:27px; font-weight:900; letter-spacing:.13em;
  text-transform:uppercase; line-height:1; color:var(--tema-ustmetin);
}
.pkg-tema-not{
  font-size:12.5px; font-weight:800; letter-spacing:.01em;
  color:var(--tema-ustmetin); opacity:.75;
  max-width:60%;                    /* baykusun altina girmesin */
}

/* ── BAYKUS ──────────────────────────────────────────────────────
   Gorsel kaynakta ortak 660x740 tuvale oturtuldu: dordunde de AYNI
   olcek, AYAK hizasi tabanda. Bu yuzden burada tek `width` yetiyor;
   kartlar arasinda baykus zipla­miyor. */
.pkg-baykus{
  position:absolute; right:10px; top:-72px;
  width:171px; pointer-events:none;
}

/* 🐞 Baykus 72px TASIYOR; izgaranin hemen ustunde bolum aciklamasi var ve
   kep o paragrafin uzerine biniyordu (canlida gorundu, 2026-09-23).
   Bosluk YALNIZ temali vitrinde aciliyor — `data-tema-var` sunucuda
   basiliyor (`kurs_detay.php`), `:has()` beklenmiyor.
   ⚠️ Mobilde `.pkgs` zaten `padding-top:48px; margin-top:-48px` tasiyor
      (kirpilma icin). Orada negatif margin SIFIRLANIYOR: dolgu yerinde
      kaliyor ama kartlar 48px asagi iniyor, baykusa yer aciliyor. */
@media (min-width:760px){
  .pkgs[data-tema-var]{ margin-top:86px }
}

/* ── TEMA — MOBIL ─────────────────────────────────────────────────
   ⚠️ BU BLOK TEMA KURALLARININ ARDINDA OLMAK ZORUNDA. Once `.pkgs`in
   mobil blogunda (dosyanin yukarisi) yaziliydi ve hic uygulanmiyordu:
   medya sorgusu ozgulluk eklemiyor, asagidaki `.pkg-baykus{top:-72px}`
   onu eziyordu. Sonuc: mobilde baykus 72px tasiyor, 48px'lik dolguyu
   22px asip kirpiliyordu (olculdu 390 ve 360px).
   📌 Yeni kural eklerken ayni tuzak: tema kurallarinin mobil karsiligi
      HEP buraya. */
@media (max-width:759px){
  /* Olcek/konum masaustunde sabit; mobilde hepsi birden transform ile
     kuculuyor, ikinci bir olcu seti tutulmuyor. `top` de kuculmus
     olcuye gore yeniden veriliyor (34 ≈ 72 × .47). */
  .pkg-baykus{ top:-34px; right:4px; transform:scale(.7); transform-origin:top right }
  .pkg-tema{ height:108px }
  .pkg-tema-ad{ font-size:23px }
  .pkg[data-tema]{ background-size:100% 108px, 100% 100% }

  /* ⚠️ Negatif margin SIFIRLANIYOR, uzerine EK bosluk verilmiyor:
     `.pkgs` mobilde `padding-top:48px; margin-top:-48px` tasiyor
     (kirpilmayi onlemek icin). Negatif margin kalkinca kartlar 48px
     asagi iniyor ve baykusun 34px'lik tasmasina hem yer aciliyor hem
     ustteki paragrafla ara +32px kaliyor. */
  .pkgs[data-tema-var]{ margin-top:0 }
}
.pkg-baykus img{
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 12px 16px rgb(16 31 57 / .22));
}

/* ── Mini rozet: kiyas tablosu ve paket modallari ── */
.cmp-tema{
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 10px 2px 3px; margin-left:8px;
  border-radius:999px; vertical-align:middle;
  background-image:var(--tema-metal); background-size:100% 100%;
  border:1px solid var(--tema-kenar);
  font-size:10.5px; font-weight:900; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tema-ustmetin);
}
.cmp-tema img{ display:block; flex:none; height:20px; width:auto }
.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 */
/* ⚠️ `margin-top:auto` BURADAN ALINDI (olculdu 2026-09-16).
   Sureli fiyatli bir paket vitrine girince o kart ~300px uzuyor,
   izgara diger iki karti da ayni boya geriyor ve BOS ALANIN TAMAMI
   tek noktada birikiyordu: madde listesi ile bu dugme arasinda
   MASAUSTUNDE 279px, MOBILDE 240px olculdu — kart bozuk gorunuyordu.
   Bosluk yok olmuyor (izgara esit yukseklik istiyor) ama artik
   fiyat blogunun USTUNDE topluyor: dugme listeye yapisik kaliyor,
   alt yari "fiyat bolumu" gibi okunuyor.
   ⛔ `.pkgs{align-items:start}` DENEMEYIN: kartlar farkli boyda olur,
      satin alma dugmeleri farkli yuksekliklere dagilir. */
.pkg-tumu{ margin-top:14px; padding-top:0 }
.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 }
/* ── SURE SECICI (2026-09-16) ─────────────────────────────────────────
   Paket YA pesin YA aylik sureli fiyatlanir; bu blok yalniz sureli
   pakette basiliyor. Pesin fiyatli pakette HIC cikmadigi icin kartin
   bugunku gorunumu degismiyor.
   Ham radio gizlenip label pill'e cevriliyor: dokunma hedefi buyusun ve
   secili durum kart icinde net okunsun diye. */
.pkg-sure{ margin-top:20px }
.pkg-sure-baslik{
  display:block; margin-bottom:7px;
  font-size:12.5px; font-weight:800; color:var(--ink-3);
}
/* ⚠️ YAN YANA HAP DENENDI VE BIRAKILDI (kullanici, 2026-09-16): yalnizca
   "3 ay / 6 ay" yaziyordu, fiyati gormek icin her hapa tek tek tiklamak
   gerekiyordu. Artik ALT ALTA SATIR: sure solda, KDV dahil tutar sagda,
   varsa avantaj rozeti altinda. Kullanici hepsini tek bakista kiyasliyor.
   Buyuk mansset fiyat asagida duruyor ve secimle degisiyor (kullanici:
   "fiyat tek yerde yazsin secince degissin su anki gibi"). */
.pkg-sure-liste{ display:grid; gap:7px }
/* ⚠️ IKI SATIRLI IZGARA DENENDI VE BIRAKILDI (kullanici, 2026-09-16):
   "aylik X ₺" alt satirda duruyordu, rozetler de oraya iniyordu.
   Kullanici aylik satiri istemedi (taksit sanilma riski) ve rozetlerin
   ay etiketinin YANINDA olmasini istedi. Artik TEK SATIR flex:
   [radyo] [ay] [rozetler] ....... [tutar]
   Satirlar da alcaldi — 69px'ten ~45px'e. */
.pkg-sure-secenek{
  position:relative; display:flex; align-items:center; cursor:pointer;
  gap:9px; flex-wrap:nowrap;
  font-size:13.5px; font-weight:800; color:var(--ink);
  background:var(--bg); border:1px solid var(--line-2);
  border-radius:12px; padding:9px 13px;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
/* Ham radio gorsel olarak gizli ama ODAKLANABILIR kaliyor: display:none
   olsaydi klavyeyle secilemezdi. Gorunen daireyi ::before ciziyor —
   satir genis oldugu icin "hangisi secili" yalniz zeminle anlasilmiyordu. */
.pkg-sure-secenek input{
  position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none;
}
.pkg-sure-secenek::before{
  content:""; flex:none;
  width:18px; height:18px; border-radius:50%;
  border:2px solid var(--line-2); background:var(--surface);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.pkg-sure-ay{ flex:none; white-space:nowrap }
/* `margin-left:auto` tutari sag kenara itiyor; aradaki tum bosluk
   rozetlerle tutar arasinda kaliyor. Once izgarada `justify-self:end`
   ile yapiliyordu, flex'te karsiligi bu. */
.pkg-sure-tutar{
  margin-left:auto; flex:none;
  font-weight:900; white-space:nowrap;
}
/* Rozetler ay etiketinin HEMEN YANINDA (kullanici karari, 2026-09-16).
   `height` + `line-height:1`: dolgu + cerceve yuzunden rozet duz
   metinden yuksek cikiyor ve satir boyunu tek basina belirliyordu. */
.pkg-sure-en,
.pkg-sure-avantaj{
  flex:none; height:21px; line-height:1;
  display:inline-flex; align-items:center;
  font-size:10.5px; font-weight:900; letter-spacing:.02em; white-space:nowrap;
  border-radius:999px; padding:2px 8px;
}
/* KIRMIZI = "en avantajli" (kullanici istedi).
   ⚠️ DOLU KIRMIZI (beyaz yazi) DENENDI VE BIRAKILDI: kartin geri
   kalanindaki kirmizi `%51 indirim` rozeti acik zemin + koyu yazi
   kullaniyor, dolu hali "ap ayri" duruyordu (kullanici, 2026-09-17).
   Artik `.pkg-indirim` ile AYNI dil — ayni renk ailesi, ayni agirlik. */
.pkg-sure-en{
  color:var(--red-d); background:var(--red-w);
  border:1px solid rgb(225 16 65 / .18);
}
/* ⚠️ Bosluk MARGIN ile veriliyor, metnin icindeki bosluk ile DEGIL:
   `.pkg-sure-avantaj` inline-flex, yani "%17" metni ile bu span iki
   ayri flex ogesi. Flex ogesinin basindaki bosluk kirpiliyor ve
   ekranda "%17· 12.000 ₺" cikiyordu (2026-09-17). */
.pkg-sure-kazanc{ margin-left:4px }
/* Yesil = kazanc (indirim rozetiyle ayni dil, bkz. .pkg-tasarruf).
   Yuzde tek basina soyut kaliyordu; cepte kalan tutar da yaziyor. */
.pkg-sure-avantaj{
  color:#0B6B4F; background:#E4F6EE;
  border:1px solid rgb(11 107 79 / .18);
}
/* ⚠️ DAR KARTTA KAZANC TUTARI GIZLENIR — olculdu 2026-09-17.
   Tek satirda [ay]+[En avantajli]+[%21 · 30.000 ₺]+[114.000 ₺] 364px
   istiyor; 1100px'te vitrin karti 335px ve SAYFA 39px YATAY TASIYORDU.
   Satiri ikiye bolmek yukseklikleri yeniden bozardi, o yuzden yuzde
   kaliyor tutar gizleniyor — modalda (501px) ikisi de gorunuyor.

   ⚠️ Olcut EKRAN degil KAPSAYICI genisligi: ayni bilesen hem 335px'lik
   kartta hem 501px'lik modalda yasiyor, medya sorgusu ikisini
   ayirt edemiyor. `@container` tam bu is icin.
   `container-type:inline-size` YALNIZ `.pkg-sure`e veriliyor; `.pkg`e
   verilseydi kartin -13px disari tasan `.pkg-ribbon`u riske atardi. */
.pkg-sure{ container-type:inline-size }
@container (max-width:355px){
  .pkg-sure-kazanc{ display:none }
}
/* ⚠️ COK DAR KARTTA "EN AVANTAJLI" ROZETI DE GIZLENIR — olculdu 2026-09-28.
   Satir bir izgara ogesi ve icindeki her sey `flex:none` + `nowrap`, yani
   EN KUCUK genisligi 254px'te cakili; kapsayici bunun altina duserse satir
   kutusu kartin dolgusunu asip disari tasiyor (kullanici: *"erisim suresi
   kismi sagdan tasmis"*). Kart tam genislige cikarildiktan sonra 360px ve
   ustu sorunsuz, ama 320px'lik ekranda kart ici hala 217px.
   Rozet dusunce en kucuk genislik ~168px'e iniyor ve satir siginiyor.
   Esik 240px: 320px ekranda kapsayici 217 (gizlenir), 360px'te 257 (kalir). */
@container (max-width:240px){
  .pkg-sure-en{ display:none }
}
/* Destegi olmayan tarayicida kartta tutar HIC basilmaz (tasmaktansa
   eksik gostermek iyidir); modal zaten genis ama ayirt edemedigimiz
   icin orada da gizleniyor. */
@supports not (container-type:inline-size){
  .pkg-sure-kazanc{ display:none }
}
@media (max-width:440px){
  .pkg-sure-secenek{ gap:6px; padding:9px 10px }
  .pkg-sure-en,
  .pkg-sure-avantaj{ font-size:10px; padding:2px 6px }
}
.pkg-sure-secenek:hover{ background:var(--surface); border-color:var(--brand) }
/* Iki secici birden: `.is-secili` JS'in koydugu sinif, `:has()` ise JS
   calismadiginda devreye giriyor. Radio zaten isaretleniyor, gorunum de
   ona uysun. */
.pkg-sure-secenek.is-secili,
.pkg-sure-secenek:has(input:checked){
  background:var(--brand-w); border-color:var(--brand); color:var(--brand-d);
}
.pkg-sure-secenek.is-secili::before,
.pkg-sure-secenek:has(input:checked)::before{
  border-color:var(--brand);
  box-shadow:inset 0 0 0 3.5px var(--surface), inset 0 0 0 9px var(--brand);
}
/* Klavye odagi gorunur kalmali; satirin kendisi cerceveleniyor. */
.pkg-sure-secenek:focus-within{ outline:2px solid var(--brand); outline-offset:2px }

/* ── SURE SATIRI *LINK* OLARAK (2026-09-18) ──────────────────────────
   Kart secicisinde satir bir <label>+radio: kullanici ayni sayfada secim
   yapiyor. Uc yerde ise satirin KENDISI bir baglanti, cunku orada secim
   = dogrudan odemeye gitmek:
     · kategori listesi "Paketler" modali
     · odeme sayfasi "Paket degistir" modali
     · odeme sayfasi "Sureyi degistir" modali
   Duzen/rozet/secili gorunum YUKARIDAKI bloktan geliyor; burada yalniz
   <a>/<span> farki kapatiliyor.

   ⚠️ KURS.CSS'TE DURUYOR, odeme.css'te DEGIL: kategori sayfasi odeme.css
   yuklemiyor (kategori.css + kurs.css + ortak.css + tw.css). Onceki yeri
   odeme.css'ti ve kategoride satirlar ciplak kalirdi.
   ⚠️ Yeni bir satir duzeni YAZMA: kart secicisiyle ayrisirsa kullanici
   hangisinin dogru oldugunu bilemez. */
.pkg-sure-link .pkg-sure-secenek{ text-decoration:none }
.pkg-sure-link a.pkg-sure-secenek:hover{ border-color:var(--brand) }
/* Secili satir tiklanamaz; temel sinifta `cursor:pointer` var. */
.pkg-sure-link .is-secili{ cursor:default }

/* 🔴 2026-09-18 — RADYO DAIRESI LINK SATIRINDA BASILMIYOR.
   Kullanici: *"radio tiklaninca secili olmuyor ama buton gibi
   yonlendiriyor; ya buton olsunlar ya radio, bir karar versinler."*
   Daire bir SECIM vaadi: tiklayinca icinin dolmasini beklersin. Bu
   satirlar secim yapmiyor, odemeye GIDIYOR — daire hicbir zaman
   dolmuyordu (kategori modalinda dordu birden bos duruyordu).
   ⚠️ Kart secicisindeki radyo AYNEN duruyor: orada secim gercekten
   ayni sayfada oluyor. Ayrisma bilincli ve tam da affordance farki:
   daire = burada sec, ok = oraya git. Duzen/rozet/tutar hizasi ayni. */
.pkg-sure-link .pkg-sure-secenek::before{ display:none }
/* Gidis oku CSS ile ciziliyor — font glifine (›) bagimli kalmasin. */
.pkg-sure-link a.pkg-sure-secenek::after{
  content:''; flex:none;
  width:7px; height:7px; margin-left:7px; margin-right:1px;
  border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);
  transform:rotate(-45deg);
  transition:border-color .18s ease, transform .18s ease;
}
.pkg-sure-link a.pkg-sure-secenek:hover::after{
  border-color:var(--brand); transform:translateX(2px) rotate(-45deg);
}
@media (prefers-reduced-motion:reduce){
  .pkg-sure-link a.pkg-sure-secenek::after{ transition:none }
  .pkg-sure-link a.pkg-sure-secenek:hover::after{ transform:rotate(-45deg) }
}
/* Sureli pakette artik MANSET FIYAT BASILMIYOR (kullanici: "4 sure
   fiyatini gosterdigimize gore sag ustte tekrar fiyat girmek sacma").
   "KDV dahil" bilgisi manset fiyatin altindaki kucuk satirdaydi; o
   kalkinca bilgi kaybolmasin diye basligin kuyruguna tasindi.
   ⚠️ `.pkg-fark-bas` uppercase + letter-spacing veriyor, `.pkt-sure-bas`
   vermiyor — bu kural ikisinde de ayni gorunsun diye ikisini de sifirliyor. */
.pkg-sure-bas-kdv{
  text-transform:none; letter-spacing:0;
  font-size:11.5px; font-weight:700; color:var(--ink-3);
}
/* Baslik ile satirlar arasi: `.pkg-fark-bas + .pkg-list`teki 10px ile ayni
   ritim. `.pkg-sure`nin kendi 20px'i baslikla arayi kopariyordu. */
.pkg-fark-bas + .pkg-sure{ margin-top:8px }
/* "Su an secili" — kirmizi `.pkg-sure-en` rozetiyle KARISMASIN diye notr:
   o bir avantaj, bu bir durum bildirimi. */
.pkg-sure-simdi{
  flex:none; height:21px; line-height:1;
  display:inline-flex; align-items:center;
  font-size:10.5px; font-weight:900; letter-spacing:.02em;
  white-space:nowrap; padding:0 7px; border-radius:999px;
  background:var(--surface); color:var(--brand-d);
  border:1px solid var(--brand);
}
@media (prefers-reduced-motion:reduce){ .pkg-sure-secenek{ transition:none } }

.pkg-price{ display:flex; align-items:baseline; gap:10px; margin-top:22px; flex-wrap:wrap }
/* Surenin hemen altinda duruyor; ustteki 22px bosluk secici ile fiyati
   birbirinden kopariyordu. */
.pkg-sure + .pkg-price{ margin-top:12px }
/* Paket modalinda secici blogun EN USTUNDE duruyor (kartta ise listenin
   altinda). Orada ust bosluk govdenin kendi dolgusuyla toplaniyor. */
.nk-modal-paket .pkg-sure{ margin-top:0 }
.pkg-sure + .pkg-modal-fiyat{ margin-top:14px }
/* 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 }
/* `flex-wrap` 2026-09-19: kosul metni uzayinca (asagidaki nota bak)
   rozet ile kosul YAN YANA iki dar sutuna bolunuyordu ("Sinav Kazanma /
   Garantisi" solda iki satir, kosul sagda iki satir). Sarma serbest
   kalinca kosul kendi satirina iniyor. */
.pkg-gar{ display:flex; flex-wrap:wrap; 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 }
/* Sureli pakette garantinin KOSULU rozetin yaninda: "· 1 yil ve uzeri".
   2026-09-19 — sozlesme MADDE 7.3-a, garanti 12 ay ve uzerinde gecerli.
   Ikincil agirlik: kosul okunsun ama rozetin kendisiyle yarismasin.
   Peşin pakette bu span hic basilmiyor, kural olu kalir. */
/* ⚠️ 2026-09-19 (ayni gun) — `white-space:nowrap` KALDIRILDI.
   Metin "1 yil ve uzeri" iken tek satira sigiyordu; patron karariyla
   "1 yil ve uzeri abonelikte gecerli" olunca (yaklasik iki kati)
   nowrap karti tasiracakti. Kosul artik sarabiliyor. */
.pkg-gar-kosul{
  flex-basis:100%;          /* kendi satiri */
  padding-left:24px;        /* ikon 16 + gap 8 → ust satirdaki metinle hizali */
  margin-top:-2px;
  font-size:12.5px; font-weight:700; color:var(--ink-3);
}
.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 }
/* Serbest alan artik BURADA toplaniyor (bkz. `.pkg-tumu` notu): fiyat
   blogu ya da sure secicisi kartin dibine yapisir, ustteki icerik de
   kendi akisinda kalir. Iki komsu da yazildi cunku sureli pakette
   dugmeden sonra once `.pkg-sure` geliyor. */
.pkg-tumu + .pkg-price{ margin-top:auto; padding-top:20px }
.pkg-tumu + .pkg-sure{ margin-top:auto; padding-top:20px }
.pkg-demo + .pkg-price,
.pkg-demo + .pkg-sure{ margin-top:auto; padding-top:20px }

/* 🐞 2026-09-30 — SURE BLOGU KOMSUSUNA BAGLIYDI, BIR SEKIL ACIKTA KALDI.
   Kullanici: *"yan yana gelen 3 paketin erisim suresi kismi ayni hizada
   olsun, butonlar da ayni hizada gelir bu sayede."*

   Yukaridaki kurallar `margin-top:auto`u KOMSUYA gore veriyor: once
   `.pkg-tumu`, sonra `.pkg-demo`. Ama `.pkg-list` + `.pkg-sure` ikilisi
   HICBIRINDE yok. O sekil bugune kadar hic olusmamisti — sureli her
   kartta araya "N maddenin tamamini gor" dugmesi giriyordu. Ayristirma
   kapatilinca (kurs_detay.php `$ozellik_ayristirma_acik`) Core'un 6
   maddesinin 6'si da kartta gorundu, dugme kalkti ve `.pkg-list` ilk kez
   dogrudan `.pkg-sure`e komsu oldu.

   SONUC — olculdu (canli, 1440px, /online-tus-kursu):
     blok        Master   Pro    Core
     .pkg-sure     650    650    500   ← 150px yukarida
     .pkg-price    903    903    732
     .btn         1137   1137    966   ← 171px yukarida
   Hicbir ogede `auto` olmadigi icin izgaranin gerdigi 171px bosluk
   kartin DIBINDE oluyordu: Core'un dugmesi havada kaliyor, altinda
   bos alan kaliyordu.

   ⚠️ `.pkg .btn`de de `margin-top:auto` var ama olu: `.pkg .pkg-gar +
      .btn{ margin-top:16px }` onu eziyor ve `.pkg-gar` kartta HER ZAMAN
      basiliyor (kurs_detay.php'de kosulsuz). Yani serbest alani paylasan
      ikinci bir `auto` yok — hepsi sure blogunun ustunde toplaniyor.

   ✅ Komsu yerine DOGRUDAN COCUK secildi: kartin sekli ne olursa olsun
      (liste var/yok, dugme var/yok) sure blogu hep dibe yapisir.
      `.pkg > ...` modali ETKILEMEZ — modalin kaynagi `#pkg-detay-N`
      div'i, `.pkg` sinifi tasimiyor.
   📌 `padding-top:20px` bilerek: ustteki kurallarla ayni bosluk. Margin
      degil padding, cunku `auto` margin'i bir daha ezmemeli.
   ⚠️ Yukaridaki iki komsu kurali OLU ama duruyor — ayni degerleri
      yaziyorlar, catisma yok; biri degisirse otekini de degistir. */
.pkg > .pkg-sure{ margin-top:auto; padding-top:20px }

/* ---- 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) }
/* ⛔ 2026-09-20 — ASAGIDAKI IKI KURAL ARTIK OLU, BILEREK DURUYOR.
   Hucre bir gun (2026-09-19) kosul metnini yaziyordu ("1 yil ve uzeri
   abonelikte gecerli"); kullanici canlida gordu: bu sutun tablonun en
   darı, metin hapin icinde UC satira boluniyor ve satiri sisiriyordu.
   Karar: hucrede yalniz `✓*`, kosul DIPNOTTA + title/aria'da
   (kurs_detay.php, cmp-durum hucresi). Kurallar silinmedi — karar geri
   alinirsa yorumdan cikarmak yeter.

.cmp-durum .cmp-gar-kosul{
  display:block; font-size:10px; line-height:1.25; font-weight:800;
  max-width:112px; margin-inline:auto;
}
.cmp-durum.var span:has(.cmp-gar-kosul){ padding-inline:7px; border-radius:999px }
*/
.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 }

/* ══════════════════════════════════════════════════════════════════
   [T] PAKET DETAY MODALI — KADEMENIN KENDI SERIDI     (2026-09-26)
   ══════════════════════════════════════════════════════════════════
   Kullanici: *"3 ana paket haricindekilerin Incele modali baykussuz ve
   ona ozel tasarimi olmadan geliyor."*

   OLCULDU (canli, /tus-yapay-zeka): vitrin kartinda data-tema + bant +
   baykus, kiyas satirinda cmp-tema rozeti + mini baykus, MODALDA hicbiri
   — `--tema-ana` bos, baslik seridi her pakette ayni lacivert
   (`linear-gradient(150deg,#1B3157,#101F39)`). Tema turu `.pkg`, `.pkt`
   ve `.cmp-tema`ya dokunmustu; <dialog> kabugu atlanmisti.

   ⛔ KURS DETAYIN BANDI BURAYA GELMEZ. Orada `.pkg-tema` 132px bant +
      171px baykus; modal 560px genis, kart icerigi kalmazdi. Kategori
      modalinda ayni gerekce ile reddedilmisti.
   ✅ MODALA OZEL: mevcut baslik seridi kademenin METALINE boyaniyor,
      "PAKET ICERIGI" yerine kademe adi geciyor, sag ucta baykus seridin
      alt kenarina tuniyor.

   ⚠️ BAYKUS MUTLAK DEGIL, AKISTA. `margin-left:auto` ile saga itiliyor,
      `align-self:flex-end` + `margin-bottom:-19px` (seridin alt dolgusu)
      ile ayaklari tam alt cizgiye oturuyor. Seridin yuksekligini kendisi
      belirliyor; tasma, z-index ve `overflow` hesabi gerekmiyor.
      `.nk-modal-card`ta zaten `overflow:hidden` var, kose yuvarlamasi
      seridi kendiliginden kirpiyor — kartin "beyaz serit" hatasi burada
      cikmaz (bkz. .pkg-tema notu).
   ⚠️ `.nk-modal-close` ortakta `margin-left:auto` tasiyor; baykus geldigi
      icin o sifirlaniyor, yoksa ikisi bos alani PAYLASIR ve baykus
      ortada kalirdi.
   ⚠️ Kapatma dugmesi ortakta `rgb(255 255 255 / .1)` zeminli beyaz ikon.
      Pro'nun ACIK ALTIN seridinde bu neredeyse gorunmezdi; zemin
      `--tema-parilti` (temanin kendi beyaz siddeti), ikon
      `--tema-ustmetin` oldu. Hover'da renk degil `brightness` — her dort
      temada da calisan tek cozum.
   📄 memory-bank/paket-tema-tasarimi-plan.md §8.8 */
/* ♻️ 2026-09-26 (ayni gun) — KARTIN BANDIYLA OLCU BIRLIGI.
   Kullanici: *"acilan modal ile paketin kendisi hemen hemen ayni boyutta;
   madem oyle niye modalda paketin kendisini gostermiyoruz?"*

   OLCULDU (canli, 1440px): modal kartTAN GENIS — 560 vs 440px, yukseklik
   1022 vs 1047. Govde de zaten kart govdesi; ustelik modalinki DAHA DOLU
   (11 madde vs 6). Fark YALNIZ BASLIKTA:
       kart  : 132px bant · 27px kademe adi · 171px baykus · ribbon
       modal : 107px serit · 13px ad        ·  76px baykus · ribbon YOK
   🔴 Daha once "kurs detayin bandi 560px modala sigmaz" yazmistim — YANLIS.
      Olcum modalin daha GENIS oldugunu gosterdi. Engel yatay degil DIKEY:
      kartta baykus bandin 70px USTUNE tasiyor, modal kabugunda ise
      `overflow:hidden` var.

   ✅ Band artik kartla AYNI: 132px, 27px kademe adi, alti tema notu,
      yaninda ribbon. Baykus 96px — tasamadigi icin kartin 171'ine
      cikamiyor; bandin ic yuksekligi (132-22-19=91px) buna izin verdigi
      en buyuk olcu. Daha buyugu ya bandi sisirir ya govdeye sarkar.
   📄 memory-bank/paket-tema-tasarimi-plan.md §8.8 */
/* ♻️ 2026-09-26 (ucuncu tur) — PAKETIN RENGI GOVDEYE DE INIYOR.
   Kullanici: *"paketin genel rengi modalda yok, acaba onu da mi eklesek?"*

   OLCULDU — kart jetonlari KART KAPSAMINDA temaya cevriliyor
   (`.pkg[data-tema]`), modal karti ise varsayilan mavide kalmisti:

     |                  | kart              | modal (onceki)   |
     | --brand          | #16203A (tema)    | #2F6BD0 (mavi)   |
     | --brand-w        | transparent       | #E8F0FC          |
     | tik rengi        | rgb(22 32 58)     | rgb(47 107 208)  |
     | secili sure sat. | seffaf / koyu kn. | mavi dolgu/kenar |
     | govde zemini     | beyaz + tema sisi | gorsel YOK       |

   Tek blokla kapaniyor: ✓ isaretleri, secili sure satiri, odak halkasi
   ve govdeye inen sisli gecis temaya donuyor — hicbiri ayrica yazilmadi.
   ⚠️ CTA ETKILENMEZ: `.pkg-modal-al` `.btn-primary`, yani `--red`.
   ⚠️ Kapatma dugmesi `--tema-parilti`/`--tema-ustmetin` kullaniyor,
      `--brand` degil; bu remap ona dokunmuyor. */
.nk-modal-paket .nk-modal-card[data-tema]{
  --brand:   var(--tema-koyu);
  --brand-d: var(--tema-koyu);
  --brand-w: transparent;
}
/* Kartin govdesine inen SEFFAF gecis (`.pkg[data-tema]` ikinci katmani)
   burada govdeye veriliyor.
   ⚠️ `.nk-modal-body` KAYDIRMA KABI (`overflow-y:auto`). Varsayilan
      `background-attachment:scroll` gradyani kutunun kendisine cakiyor,
      icerikle birlikte kaydirmiyor — yani sis her zaman govdenin
      tepesinde duruyor, uzun listede tekrarlamiyor. */
.nk-modal-paket .nk-modal-card[data-tema] .nk-modal-body{
  background-image:linear-gradient(180deg, var(--tema-sis) 0, rgb(255 255 255 / 0) 88%);
  background-repeat:no-repeat;
  background-size:100% 100%;
}

.nk-modal-paket .nk-modal-card[data-tema] .nk-modal-head{
  background-image:var(--tema-metal);
  background-size:100% 100%;
  color:var(--tema-ustmetin);
  box-shadow:inset 0 1px 0 var(--tema-parilti);
  min-height:132px;
  /* Kartin bandi icerigi dikey ORTALIYOR (`.pkg-tema`
     `justify-content:center`); burada esdegeri `align-items`. */
  align-items:center;
}
/* Kapatma dugmesi ortalanmasin — kose dugmesi, tepede kalir. */
.nk-modal-paket .nk-modal-card[data-tema] .nk-modal-close{ align-self:flex-start }
/* Ortaktaki alt cizgi seffaf-beyaz huzme; temada net kenar rengi. */
.nk-modal-paket .nk-modal-card[data-tema] .nk-modal-head::after{
  background:var(--tema-kenar);
}
.nk-modal-paket .nk-modal-card[data-tema] .nk-modal-kicker,
.nk-modal-paket .nk-modal-card[data-tema] .nk-modal-baslik{
  color:var(--tema-ustmetin);
}
/* Kicker artik kademe adi (MASTER/PRO/...) ve olcusu kartin
   `.pkg-tema-ad`i ile BIREBIR: 27px / 900 / .13em.
   `inline-block`: rozet ("EN KAPSAMLI") ayni satirda yanina geliyor. */
.nk-modal-paket .nk-modal-card[data-tema] .nk-modal-kicker{
  display:inline-block; vertical-align:middle;
  font-size:27px; font-weight:900; letter-spacing:.13em;
  line-height:1; margin-bottom:0; opacity:1;
}
/* Kartta ribbon kartin -13px ustunde duruyor (`.pkg-ribbon`); modalda
   tasma yok, bu yuzden kademe adinin YANINA hap olarak geliyor.
   Kirmizi: kartta da kirmizi, ayni vaat ayni renk. */
.nk-paket-rozet{
  display:inline-block; vertical-align:middle; margin-left:10px;
  padding:5px 11px; border-radius:999px;
  background:var(--red); color:#fff;
  font-size:11px; font-weight:900; letter-spacing:.08em;
  text-transform:uppercase; white-space:nowrap;
  box-shadow:var(--sh-1);
}
.nk-paket-rozet[hidden]{ display:none }
/* Kademe notu — kartin `.pkg-tema-not`u ile ayni olcu ve sonukluk. */
.nk-paket-not{
  display:block; margin-top:5px;
  font-size:12.5px; font-weight:800; letter-spacing:.01em;
  color:var(--tema-ustmetin); opacity:.75;
}
.nk-paket-not[hidden]{ display:none }
/* ♻️ 2026-09-26 (dorduncu tur) — PAKET ADI BANTTAN GOVDEYE.
   Kullanici: *"paket basligi ile baykus basligi tekrar etmis; paket
   basligini bir alttan mi baslatsak, diger 3 paket gibi?"*
   Kartta bant yalniz KADEME ADI + not tasiyor ("CORE"), paket adi
   ("TUS AI CORE") bandin ALTINDA bir `<h3>`. Modal da artik oyle.
   ⚠️ Serit basligi DOM'da kaliyor ama gizleniyor; diyalogun adini JS
      `aria-label` ile veriyor, yani gizli bir dugume bagli degiliz.
   ⚠️ Sadece TEMALIDA: temasiz modalda kademe adi yok, tekrar da yok —
      orada baslik seritte kaliyor. */
.nk-modal-paket .nk-modal-card[data-tema] .nk-modal-baslik{ display:none }
/* Gövdedeki paket adi — kartin `.pkg h3`u ile ayni olcu. */
.pkg-modal-ad{
  font-size:21px; letter-spacing:-.025em; line-height:1.25;
  color:var(--ink);
}
/* Baslik ile ilk blok arasi. `.nk-modal-paket .pkg-sure{margin-top:0}`
   kurali basliga yapistirdigi icin komsu secicisiyle geri veriliyor. */
.pkg-modal-ad + .pkg-sure,
.pkg-modal-ad + .pkg-modal-fiyat{ margin-top:16px }
/* Sadece bantta baslik yokken govdeye ust nefes gerekiyor; temasiz
   modalda 4px yerinde kaliyor. */
.nk-modal-paket .nk-modal-card[data-tema] .nk-modal-body{ padding-top:18px }
.nk-modal-paket .nk-modal-card[data-tema] .nk-modal-close{
  margin-left:0;
  background:var(--tema-parilti);
  color:var(--tema-ustmetin);
}
.nk-modal-paket .nk-modal-card[data-tema] .nk-modal-close:hover{
  background:var(--tema-parilti); filter:brightness(1.2);
}

.nk-paket-baykus-yuva{ display:none }
/* ⚠️ 96px TAVAN, keyfi degil: band 132px, dolgu 22+19 → ic yukseklik
   91px. `margin-bottom:-19px` alt dolguyu iptal ettigi icin baykusun
   katkisi (yukseklik-19); 96px genislik → 107.8px yukseklik → katki
   88.8px, yani band 132'de KALIYOR. Daha buyugu ya bandi sisirir ya
   govdeye sarkip ilk sure satirinin ustune biner. */
.nk-modal-paket .nk-modal-card[data-tema] .nk-paket-baykus-yuva{
  display:block; flex:none;
  margin-left:auto; align-self:flex-end;
  width:96px; margin-bottom:-19px;
}
/* JS baykusu tasiyamadiysa 76px'lik bos kutu kalmasin. */
.nk-modal-paket .nk-modal-card[data-tema] .nk-paket-baykus-yuva:empty{ display:none }
.nk-paket-baykus{ display:block }
.nk-paket-baykus img{
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 8px 14px rgb(16 31 57 / .25));
}

@media (max-width:520px){
  /* 🐞 OLCULDU 390px'te: masaustu olculeriyle bant 178px'e cikiyordu
     (kartin mobil bandi 108px). Sebep iki SARMA: 23px "MASTER" + rozet
     tek satira sigmiyor, tema notu da iki satira dusuyor.
     ⚠️ Metin sutunu 362 - 22 - 14 - 72(baykus) - 14 - 34(kapat) - 22 =
        ~184px. 20px "MASTER" (~92px) + kisilmis rozet (~76px) = 168px →
        tek satirda kaliyor. Not iki satir kaliyor (39 karakter 184px'e
        sigmiyor, baykusu 56px'e indirsek bile sigmaz) — o yuzden
        yuksekligi kismak icin 11px'e iniyor.
     Sonuc ~130px: kartin mobil bandina (108) yakin, 178'in cok altinda. */
  .nk-modal-paket .nk-modal-card[data-tema] .nk-modal-head{ min-height:108px }
  .nk-modal-paket .nk-modal-card[data-tema] .nk-paket-baykus-yuva{ width:68px }
  .nk-modal-paket .nk-modal-card[data-tema] .nk-modal-kicker{ font-size:20px; letter-spacing:.11em }
  /* ⛔ 4. turda OLU KALDI: serit basligi artik temalida `display:none`
        (paket adi govdeye indi). Karar geri alinirsa yorumdan cikar.
  .nk-modal-paket .nk-modal-card[data-tema] .nk-modal-baslik{ font-size:18px; margin-top:6px } */
  .pkg-modal-ad{ font-size:18.5px }
  .nk-paket-rozet{ margin-left:7px; padding:3px 7px; font-size:9px; letter-spacing:.05em }
  .nk-paket-not{ margin-top:4px; font-size:11px; line-height:1.35 }
}
.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);
}

/* 🐞 2026-09-30 — GORSEL ICINDEKI METIN KESILIYORDU.
   Kaynak `crs_img`, admin panelinin normalize ettigi 400x300 (4/3);
   kutu 16/10 idi ve `object-fit:cover` farki %17 kirparak kapatiyordu
   (ustten %8,5 + alttan %8,5). Gorsellerin ust seridinde kavisli
   "YAPAY ZEKA DESTEKLI" yazisi var, tam oradan kesiliyordu.
   Olculdu: /online-tus-kursu, 12 ilgili kart, 12'si de 400x300 → 258x162.
   Kutu kaynagin oranina cekildi; tam gerekce ve elenen secenekler
   `tasarim8/kategori.css` [G] blogunda.
   ⚠️ Ayni bilesenin kategori sayfasindaki cilasi oran verirken `img`i
      hedefliyor (`kategori.css` `.kat-sayfa .ilgili-gorsel img`).
      Biri degisirse oteki de degismeli.
   ESKISI: aspect-ratio:16 / 10; */
.ilgili-gorsel{
  display:block; aspect-ratio:4 / 3;
  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 }
}