/* ============================================================
   KONU SAYFASI v3 — Preply öğrenme merkezi klonu (2026-09-25)
   ------------------------------------------------------------
   Tek kaynak: DESIGN-AKADEMI.md § 2.4. Yalnız konu sayfası yükler
   (sayfa.cjs `konuV3Html` → kafa({ ekCss })). stil.css'in üstüne biner:
   içerik bileşenleri (tablo, test, dizme, not…) oradan gelir, burası
   KABUĞU ve okuma deneyimini kurar.

   Ölçüler Preply'dan (CDP, 1440px): kap 1232 · sol sütun 340-365 yapışkan ·
   aralık 48-56 · okuma sütunu 820 · h1 64 · h2 32-40 · gövde 18-20.
   Başlık sesi ana sayfanınki (DM Serif Display) — «tasarım korunmalı».
   Renk/süre/eğri stil.css :root'undan; ham değer yalnız gölge alfası.
   ============================================================ */

.ks-govde {
  --ks-kap: 1232px;
  --ks-ust: 80px;
  --ks-sutun: 820px;
  /* yazı ölçeği (Preply ölçüsü, ana sayfanın DM Serif sesi) */
  --ks-t-h1: clamp(40px, 4.5vw, 64px);
  --ks-t-h1-tel: clamp(36px, 10vw, 44px);
  --ks-t-h2: clamp(30px, 2.8vw, 40px);
  --ks-t-bant: clamp(36px, 3.6vw, 52px);
  --ks-t-kart: 26px;
  --ks-t-yan: 24px;
  --ks-t-cubuk: 21px;
  --ks-t-cubuk-tel: 18px;
  --ks-t-ozet: clamp(18px, 1.35vw, 20px);
  --ks-t-okuma: 18px;
  --ks-t-okuma-tel: 17px;
  --ks-t-dugme: 16px;
  --ks-t-tanim: 16px;
  --ks-t-orta: 15px;
  --ks-t-kucuk: var(--yz-kucuk);
  --ks-kademe: 45ms;
  --ks-giris: 60ms;
  --ks-golge-foto: 0 28px 60px -28px rgba(20, 14, 8, .55);
  --ks-golge-cubuk: 0 10px 28px -20px rgba(43, 34, 24, .4);
  --ks-golge-sayfa: 0 -24px 60px -20px rgba(20, 14, 8, .4);
  --ks-ortu: rgba(20, 14, 8, .45);
  --ks-golge: 0 1px 2px rgba(43, 34, 24, .06), 0 14px 36px -16px rgba(43, 34, 24, .24);
  --ks-vurgu-hale: color-mix(in srgb, var(--asit) 40%, transparent);
  --ks-satir: color-mix(in srgb, var(--vurgu) 7%, transparent);
  /* Konu sayfasında eski zemin ışımaları kalkar: okuma yüzeyi düz kâğıt. */
  background: var(--kagit);
}

.ks-kap {
  width: 100%;
  max-width: calc(var(--ks-kap) + 2 * var(--pad));
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ------------------------------------------------------------
   0 · OKUMA ÇİZGİSİ — ekranın tepesinde, kaydırmayla dolar
   ------------------------------------------------------------ */
.ks-ilerleme {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 60;
  pointer-events: none;
}
.ks-ilerleme span {
  display: block;
  height: 100%;
  background: var(--vurgu);
  transform-origin: left center;
  transform: scaleX(0);
}

/* ------------------------------------------------------------
   1 · BAŞLIK ALANI — Preply hero: solda ders kartı, sağda başlık
   ------------------------------------------------------------ */
/* 2026-10-10 · OKUMA ORTADA. Operatör: «konu anlatımı sağa alınmış, ortada
   olmalı, yanlar hep reklam». Başlık, ders kartı ve okuma sütunu aynı
   820'lik eksende ortalanır; iki yan `.sayfa-ikili` reklam rayıdır.
   Yan sütundaki içindekiler her genişlikte açılır sayfaya döndü (§ 7). */
.ks-bas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  max-width: calc(var(--ks-sutun) + 2 * var(--pad));
  padding-block: 56px 72px;
}
.ks-bas-metin { grid-column: 1; grid-row: 1; }
.ks-ders { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); }
.ks-bas .ks-ders-foto { aspect-ratio: auto; }

.ks-kirinti {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: var(--ks-t-kucuk);
  line-height: 1.4;
  color: var(--murekkep-3);
}
.ks-kirinti a {
  color: var(--murekkep-2);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: background-size var(--dur-kisa) var(--ev), color var(--dur-anlik) var(--ev);
}
.ks-kirinti a:hover { color: var(--murekkep); background-size: 100% 1px; }
.ks-kirinti [aria-current] { color: var(--murekkep); font-weight: 600; }

.ks-h1 {
  margin: 0;
  font: 400 var(--ks-t-h1) / 1.04 var(--f-serif);
  letter-spacing: -0.015em;
  color: var(--murekkep);
  text-wrap: balance;
}
.ks-h1 * { font: inherit; letter-spacing: inherit; }
.ks-h1 .aksan { color: var(--vurgu-koyu); }

.ks-de {
  margin: 14px 0 0;
  font: 600 var(--ks-t-orta) / 1.4 var(--f-govde);
  letter-spacing: 0.02em;
  color: var(--vurgu-koyu);
}
.ks-ozet {
  margin: 22px 0 0;
  max-width: 42em;
  font-size: var(--ks-t-ozet);
  line-height: 1.5;
  color: var(--murekkep);
}
.ks-tanim {
  margin: 12px 0 0;
  max-width: 46em;
  font-size: var(--ks-t-tanim);
  line-height: 1.55;
  color: var(--murekkep-2);
}

.ks-kunye {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.ks-kunye li {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: var(--r-tam);
  background: var(--kagit-3);
  font-size: var(--ks-t-kucuk);
  font-weight: 600;
  color: var(--murekkep-2);
}
.ks-kunye li:first-child { background: var(--murekkep); color: var(--isik); }
.ks-kunye a { color: inherit; text-decoration: none; }
.ks-kunye-ac { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--cizgi); text-underline-offset: 3px; }
.ks-kunye-ac:hover { text-decoration-color: currentColor; }

.ks-eylem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
}
.ks-eylem .pano-hero { margin: 0; }
.ks-eylem .kb-ipucu { order: 5; flex-basis: 100%; margin: 6px 0 0; }

/* İkincil düğme — Preply'ın «Learn with…» silueti: 8px köşe, koyu kenar. */
.ks-dugme {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--murekkep);
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--murekkep);
  font: 600 var(--ks-t-orta) / 1 var(--f-govde);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-anlik) var(--ev), color var(--dur-anlik) var(--ev), border-color var(--dur-anlik) var(--ev), transform var(--dur-bas) var(--ev);
}
.ks-dugme:hover { background: var(--murekkep); color: var(--isik); }
.ks-dugme:active { transform: scale(0.97); }
.ks-dugme[aria-pressed='true'] { background: var(--ikinci); border-color: var(--ikinci); color: var(--isik); }
.ks-dugme-ik { display: inline-flex; }
.ks-dugme-ik svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- ders kartı — Preply «Written by» kartının yeri ---------- */
.ks-ders {
  overflow: hidden;
  border: 1px solid var(--kenar);
  border-radius: var(--r-md);
  background: var(--isik);
  box-shadow: var(--ks-golge);
}
.ks-ders-foto { aspect-ratio: 16 / 9; overflow: hidden; background: var(--kagit-3); }
.ks-ders-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-uzun) var(--ev);
}
.ks-ders:hover .ks-ders-foto img { transform: scale(1.03); }
.ks-ders-ic { padding: 20px 20px 22px; }
.ks-ders-ust { margin: 0; font-size: var(--ks-t-kucuk); font-weight: 600; color: var(--vurgu-koyu); }
.ks-ders-b { margin: 6px 0 0; font: 400 var(--ks-t-kart) / 1.15 var(--f-serif); color: var(--murekkep); }
.ks-ders-ne { margin: 10px 0 0; font-size: var(--ks-t-orta); line-height: 1.5; color: var(--murekkep-2); }
.ks-ders-olcu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 16px 0 18px;
  border-block: 1px solid var(--cizgi);
}
.ks-ders-olcu div { padding: 12px 0; }
.ks-ders-olcu div + div { padding-left: 16px; border-left: 1px solid var(--cizgi); }
.ks-ders-olcu dt { font-size: var(--ks-t-kucuk); color: var(--murekkep-3); }
.ks-ders-olcu dd { margin: 2px 0 0; font: 700 var(--ks-t-okuma) / 1.2 var(--f-govde); color: var(--murekkep); }

/* ---------- hap — ana sayfanın asit hapı ---------- */
.ks-hap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 1.5px solid transparent;
  border-radius: var(--r-tam);
  font: 700 var(--ks-t-dugme) / 1.2 var(--f-govde);
  text-decoration: none;
  white-space: nowrap;
  transition: box-shadow var(--dur-kisa) var(--ev), transform var(--dur-bas) var(--ev), background-color var(--dur-anlik) var(--ev);
}
.ks-hap:active { transform: scale(0.97); }
.ks-hap-asit { background: var(--asit); color: var(--murekkep); }
.ks-hap-asit:hover { box-shadow: 0 0 0 4px var(--ks-vurgu-hale); }
.ks-hap-tam { width: 100%; }
.ks-hap-kucuk { min-height: 40px; padding: 0 16px; font-size: var(--ks-t-orta); }
.ks-hap-buyuk { min-height: 56px; padding: 0 28px; font-size: var(--ks-t-okuma-tel); } /* 17px — büyük hap */
.ks-ok { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-kisa) var(--ev); }
a:hover > .ks-ok { transform: translateX(3px); }

/* ------------------------------------------------------------
   2 · GÖVDE — solda yapışkan içindekiler, sağda okuma sütunu
   ------------------------------------------------------------ */
.ks-izgara {
  max-width: calc(var(--ks-sutun) + 2 * var(--pad));
  padding-bottom: 96px;
}
.ks-yapis {
  max-height: calc(100vh - var(--ks-ust) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 4px 8px 16px 0;
}
.ks-ana { min-width: 0; --olcu: 100%; }

/* Başlık kaydırılan listenin üstünde sabit: uzun listede etkin maddeye
   kaydırınca «İçindekiler»in tepesi (İ'nin noktası) kesiliyordu. */
.ks-yan-ust { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--kagit); }
.ks-yan-b { margin: 0 0 14px; font: 400 var(--ks-t-yan) / 1.2 var(--f-serif); color: var(--murekkep); }
.ks-yan-kapat { display: none; }

.ks-ic { position: relative; border-left: 2px solid var(--cizgi); }
.ks-ic ol { margin: 0; padding: 0; list-style: none; }
.ks-ic a {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 16px;
  align-items: start;
  gap: 6px;
  padding: 8px 8px 8px 14px;
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  font-size: var(--ks-t-kucuk);
  line-height: 1.4;
  color: var(--murekkep-2);
  text-decoration: none;
  transition: color var(--dur-anlik) var(--ev), background-color var(--dur-anlik) var(--ev);
}
.ks-ic a:hover { color: var(--murekkep); background: var(--kagit-3); }
.ks-ic-no { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--murekkep-3); transition: color var(--dur-kisa) var(--ev); }
.ks-ic a.etkin { color: var(--murekkep); font-weight: 600; }
.ks-ic a.etkin .ks-ic-no { color: var(--vurgu-koyu); }
.ks-ic a.okundu .ks-ic-no { color: var(--ikinci); }

/* Gösterge: çizginin üstünde kayan terrakota parça (Stripe/Apple dokümanı). */
.ks-gosterge {
  position: absolute;
  left: -2px;
  top: 0;
  width: 2px;
  height: 0;
  border-radius: 2px;
  background: var(--vurgu);
  opacity: 0;
  transition: transform var(--dur-orta) var(--ev), height var(--dur-orta) var(--ev), opacity var(--dur-kisa) var(--ev);
}
.ks-tik {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  fill: none;
  stroke: var(--ikinci);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
  transition: stroke-dashoffset var(--dur-orta) var(--ev);
}
.ks-ic a.okundu .ks-tik { stroke-dashoffset: 0; }

.ks-oran { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; font-size: var(--ks-t-kucuk); color: var(--murekkep-3); }
.ks-oran-iz { flex: 1; height: 4px; overflow: hidden; border-radius: var(--r-tam); background: var(--kagit-3); }
.ks-oran-iz span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--vurgu);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform var(--dur-kisa) var(--ev);
}

.ks-gelistir { margin-top: 36px; }
.ks-gelistir ul { margin: 0; padding: 0; list-style: none; }
.ks-gelistir a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ayrac);
  font-size: var(--ks-t-orta);
  font-weight: 600;
  line-height: 1.35;
  color: var(--murekkep);
  text-decoration: none;
  transition: color var(--dur-anlik) var(--ev);
}
.ks-gelistir li:first-child a { border-top: 1px solid var(--ayrac); }
.ks-gelistir small { display: block; margin-bottom: 2px; font-size: var(--ks-t-kucuk); font-weight: 600; color: var(--vurgu-koyu); }
.ks-gelistir a:hover { color: var(--vurgu-koyu); }

/* ---------- okuma sütunu: eski omurga kabuğunu sütuna oturt ---------- */
.ks-ana .kabuk { max-width: none; margin-inline: 0; padding-inline: 0; }
.ks-ana section[id] { scroll-margin-top: calc(var(--ks-ust) + 12px); }
.ks-ana > section:first-child { margin-top: 0; padding-top: 0; }

.ks-ana .ray { margin-bottom: 14px; }
.ks-ana .ray::after { display: none; }
.ks-ana .ray .no {
  font: 600 var(--ks-t-kucuk) / 1 var(--f-govde);
  letter-spacing: 0.02em;
  color: var(--vurgu-koyu);
}
.ks-ana .ray .no::before { content: 'Bölüm '; }
/* Zaman kodu = bölümü sesli okut düğmesi. Tarayıcıda Almanca ses yoksa
   (`html.sesli` yok) düğme çalışmaz; anlamsız bir «00:12» kalmasın. */
html:not(.sesli) .ks-ana .ray .tc { display: none; }
html.sesli .ks-ana .ray .tc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--ayrac);
  border-radius: var(--r-tam);
  background: var(--isik);
  font-size: var(--ks-t-kucuk);
  transition: border-color var(--dur-anlik) var(--ev), background-color var(--dur-anlik) var(--ev);
}
html.sesli .ks-ana .ray .tc:hover { border-color: var(--murekkep); }
/* Hap içinde ikon hep görünür — düğme olduğu ilk bakışta okunsun. */
html.sesli .ks-ana .ray .tc-ses .ik { opacity: 1; transform: none; }
html.sesli .ks-ana .ray .tc-ses.calan { border-color: var(--vurgu); }

.ks-ana h2.orta,
.ks-ana .govde > h2 {
  font: 400 var(--ks-t-h2) / 1.12 var(--f-serif);
  letter-spacing: -0.01em;
  color: var(--murekkep);
}
.ks-ana .govde > p,
.ks-ana .govde > ul {
  font-size: var(--ks-t-okuma);
  line-height: 1.65;
}
.ks-ana .govde a:not([class]) {
  color: var(--vurgu-koyu);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Tablo: sayfanın üstünde duran nesne — gölge + satır üstü vurgu. */
/* overflow-y: satır belirişindeki 8px kayma dikey taşma sayılıp tablonun
   sağına 11px'lik kaydırma çubuğu açıyordu (ölçüldü: 820 → 807). */
.ks-ana .tablo-sar { overflow-y: hidden; box-shadow: var(--ks-golge); border-radius: var(--r-plaka); }
.ks-ana .tablo-sar tbody tr > * { transition: box-shadow var(--dur-anlik) var(--ev); }
.ks-ana .tablo-sar tbody tr:hover > * { box-shadow: inset 0 0 0 999px var(--ks-satir); }

/* Satırlar sırayla belirir — yalnız betik işaret koyduysa (JS'siz tablo hep açık). */
.ks-ana .tablo-sar[data-ks-sira] tbody tr { opacity: 0; transform: translateY(8px); }
.ks-ana .tablo-sar.ks-gordu tbody tr {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-orta) var(--ev), transform var(--dur-orta) var(--ev);
  transition-delay: calc(var(--i, 0) * var(--ks-kademe));
}

/* Tablonun altındaki «PNG indir · Panoya as» — büyük harf mikro etiket
   yerine cümle boyu, hap siluetinde (KABUK-DOKTRİNİ §4: büyük harf mikro
   etiket yasak). Sayfanın geri kalanı zaten cümle boyu konuşuyor. */
.ks-ana .tablo-indir {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin: 0 6px var(--bosluk-s) 0;
  padding: 0 12px;
  border: 1px solid var(--ayrac);
  border-radius: var(--r-tam);
  background: var(--isik);
  font-size: var(--ks-t-kucuk);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--murekkep-2);
  cursor: pointer;
  transition: border-color var(--dur-anlik) var(--ev), color var(--dur-anlik) var(--ev);
}
.ks-ana .tablo-indir:hover { border-color: var(--murekkep); color: var(--murekkep); }
.ks-ana .tablo-indir[aria-pressed='true'] { border-color: var(--ikinci); color: var(--ikinci); }


/* ------------------------------------------------------------
   3 · KAPANIŞ BANDI — Preply «Progress faster with your tutor»
   ------------------------------------------------------------ */
.ks-bant { background: var(--alan); color: var(--alan-metin); }
.ks-bant-ic {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  padding-block: 88px;
}
.ks-bant-ust { margin: 0; font-size: var(--ks-t-kucuk); font-weight: 600; color: var(--asit); }
.ks-bant-b {
  margin: 10px 0 0;
  font: 400 var(--ks-t-bant) / 1.08 var(--f-serif);
  letter-spacing: -0.01em;
  color: var(--alan-metin);
}
.ks-bant-ne { max-width: 34em; margin: 16px 0 30px; font-size: var(--ks-t-okuma); line-height: 1.55; color: var(--alan-metin); }
.ks-bant-foto { overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--r-md); box-shadow: var(--ks-golge-foto); }
.ks-bant-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ks-bant .ks-hap-asit:hover { box-shadow: 0 0 0 4px color-mix(in srgb, var(--asit) 30%, transparent); }

/* ------------------------------------------------------------
   4 · OKUMA ÇUBUĞU — Preply'ın kaydırınca inen markalı çubuğu.
   Şerit gizlenince (aşağı kaydırma) iner, şerit dönünce çekilir.
   ------------------------------------------------------------ */
.ks-cubuk {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 49;
  background: var(--kagit);
  border-bottom: 1px solid var(--ayrac);
  box-shadow: var(--ks-golge-cubuk);
  transform: translateY(-100%);
  transition: transform var(--dur-kisa) var(--ev);
}
html.ks-okuyor.serit-gizli .ks-cubuk { transform: none; }
.ks-cubuk-ic { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; }
.ks-cubuk-dugme {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--murekkep);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ks-cubuk-dugme svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.ks-cubuk-metin { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.ks-cubuk-metin b { font: 400 var(--ks-t-cubuk) / 1.2 var(--f-serif); white-space: nowrap; }
.ks-cubuk-metin span { overflow: hidden; font-size: var(--ks-t-kucuk); color: var(--murekkep-3); white-space: nowrap; text-overflow: ellipsis; }


/* ------------------------------------------------------------
   4b · İÇİNDEKİLER SAYFASI — okuma çubuğundaki düğmeyle açılır
   ------------------------------------------------------------ */
/* İçindekiler alttan açılan sayfa — HER genişlikte (2026-10-10; yanlar
   reklama kaldı). Yalnız betik varken; betiksiz tarayıcıda içeriğin
   başında düz liste olarak durur. */
html.js .ks-yan {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 70;
  max-height: 82vh;
  padding: 18px var(--pad) calc(18px + env(safe-area-inset-bottom));
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--kagit);
  box-shadow: var(--ks-golge-sayfa);
  transform: translateY(105%);
  visibility: hidden;
  transition: transform var(--dur-orta) var(--ev), visibility 0s linear var(--dur-orta);
}
/* Geniş ekranda sayfa okuma sütunu genişliğinde, ortada açılır. */
@media (min-width: 1024px) {
  html.js .ks-yan { max-width: calc(var(--ks-sutun) * .75); margin-inline: auto; }
}
html.js .ks-yan.acik { transform: none; visibility: visible; transition: transform var(--dur-orta) var(--ev), visibility 0s; }
html.js .ks-yapis { max-height: calc(82vh - 36px); padding-right: 0; }
html.js .ks-yan-kapat {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -8px 0 6px 0;
  border: 0;
  border-radius: var(--r-tam);
  background: var(--kagit-3);
  color: var(--murekkep);
  cursor: pointer;
}
html.js .ks-yan-kapat svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
html.js .ks-ic a { min-height: 44px; align-items: center; }
html:not(.js) .ks-yan { position: static; }
html:not(.js) .ks-yapis { max-height: none; overflow: visible; }
.ks-yan:focus { outline: none; }

.ks-ortu {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 69;
  background: var(--ks-ortu);
  opacity: 0;
  transition: opacity var(--dur-orta) var(--ev);
}
.ks-ortu[hidden] { display: none; }
.ks-ortu.acik { opacity: 1; }
html.ks-kilit { overflow: hidden; }

/* ------------------------------------------------------------
   5 · GİRİŞ HAREKETİ — başlık alanı kademeli yükselir
   h1 saydamlıkla gelmez (LCP adayı): yalnız kayar.
   ------------------------------------------------------------ */
@keyframes ks-yuksel { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ks-kay { from { transform: translateY(10px); } to { transform: none; } }
.js .ks-bas-metin > * { animation: ks-yuksel var(--dur-uzun) var(--ev) both; }
.js .ks-bas-metin > .ks-h1 { animation-name: ks-kay; }
.js .ks-bas-metin > :nth-child(2) { animation-delay: calc(var(--ks-giris) * 1); }
.js .ks-bas-metin > :nth-child(3) { animation-delay: calc(var(--ks-giris) * 2); }
.js .ks-bas-metin > :nth-child(4) { animation-delay: calc(var(--ks-giris) * 3); }
.js .ks-bas-metin > :nth-child(5) { animation-delay: calc(var(--ks-giris) * 4); }
.js .ks-bas-metin > :nth-child(6) { animation-delay: calc(var(--ks-giris) * 5); }
.js .ks-bas-metin > :nth-child(n + 7) { animation-delay: calc(var(--ks-giris) * 6); }
.js .ks-ders { animation: ks-yuksel var(--dur-uzun) var(--ev) calc(var(--ks-giris) * 3) both; }

/* ------------------------------------------------------------
   6 · ODAK MODU — satış ve yan liste çekilir, okuma kalır
   ------------------------------------------------------------ */
html.odak .ks-ders,
html.odak .ks-bant,
html.odak .ks-gelistir,
html.odak .ks-cubuk .ks-hap { display: none; }
html.odak .ks-bas-metin { grid-column: 1 / -1; }

/* ------------------------------------------------------------
   7 · KIRILIMLAR
   ------------------------------------------------------------ */
/* 1280'in altında yan sütun daralır: 1200px'te 340+56 kalınca okuma sütunu
   746px'e iniyor, dört sütunlu tablolar yatay kaydırmaya düşüyordu (ölçüldü). */

@media (max-width: 1023px) {
  .ks-bas { padding-block: 32px 44px; }
  .ks-izgara { padding-bottom: 72px; }


  .ks-bant-ic { gap: 40px; padding-block: 64px; }
}

@media (max-width: 700px) {
  .ks-ders { display: block; }
  .ks-bas .ks-ders-foto { aspect-ratio: 16 / 9; }
  .ks-h1 { font-size: var(--ks-t-h1-tel); }
  .ks-ozet { font-size: var(--ks-t-okuma); }
  .ks-eylem .ks-dugme { flex: 1 1 auto; justify-content: center; }
  .ks-eylem .pano-hero { flex: 1 1 auto; display: flex; }
  .ks-eylem .pano-hero[hidden] { display: none; }
  .ks-eylem .pano-hero .ks-dugme { width: 100%; }
  .ks-ana .govde > p,
  .ks-ana .govde > ul { font-size: var(--ks-t-okuma-tel); }
  .ks-bant-ic { grid-template-columns: minmax(0, 1fr); padding-block: 56px; }
  .ks-bant-foto { order: -1; }
  .ks-cubuk-ic { min-height: 56px; gap: 10px; }
  .ks-cubuk-metin { flex-direction: column; gap: 0; }
  .ks-cubuk-metin b { font-size: var(--ks-t-cubuk-tel); }
}

@media (max-width: 420px) {
  .ks-cubuk .ks-hap { display: none; }
}

/* ------------------------------------------------------------
   8 · HAREKET KISITI — içerik son hâlinde, hiçbir şey kaymaz
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .js .ks-bas-metin > *,
  .js .ks-bas-metin > .ks-h1,
  .js .ks-ders { animation: none; }
  .ks-gosterge,
  .ks-tik,
  .ks-cubuk,
  .ks-ortu,
  .ks-hap,
  .ks-ok,
  .ks-dugme,
  .ks-ana .tablo-indir,
  .ks-oran-iz span,
  .ks-ders-foto img,
  .ks-kirinti a,
  html.js .ks-yan { transition: none !important; }
  .ks-ana .tablo-sar[data-ks-sira] tbody tr { opacity: 1; transform: none; }
  .ks-ders:hover .ks-ders-foto img { transform: none; }
}

@media print {
  .ks-ilerleme, .ks-cubuk, .ks-ortu, .ks-yan, .ks-ders, .ks-bant { display: none !important; }
  .ks-bas, .ks-izgara { display: block; }
  .ks-ana .tablo-sar[data-ks-sira] tbody tr { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------
   9 · REKLAM RAYLARI — [sol reklam] [konu] [sağ reklam] (2026-10-10)
   Resimli ders ve EN/DE konu sayfalarıyla aynı `.sayfa-ikili` ızgarası.
   ------------------------------------------------------------ */
@media (min-width: 1260px) {
  .sayfa-ikili > main.ks { grid-column: 2; grid-row: 1; min-width: 0; }
}