/* Radikal UZEM — yazı tipleri (kendi sunucumuz, değişken woff2, alt küme: Latin + Türkçe harfler + ₺).
   Schibsted Grotesk (başlık) 600–800 · Onest (gövde, düğme, form, fiyat, ₺) 400–800. ₺ Schibsted'de yok → Onest'e düşer. */
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url("../../fonts/yt/schibsted-latin.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url("../../fonts/yt/schibsted-trk.woff2") format("woff2");
  unicode-range: U+011E-011F, U+0130, U+015E-015F; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../../fonts/yt/onest-latin.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../../fonts/yt/onest-trk.woff2") format("woff2");
  unicode-range: U+011E-011F, U+0130, U+015E-015F, U+20BA; }

/* ==========================================================================
   Radikal UZEM — tasarım sistemi (Yön A "Program") · revizyon 2 (14 Ekim 2026: zemin sistemi, sade üst bilgi, kampanya kaydırıcısı)
   Kaynak: yon/yon.md + yon/tokens.json · sınıf adları: ui/parcalar/bilesenler.md
   Kural özeti: beyaz içerik zemini + belirgin kum bant (dönüşümlü), sınırlı ve hafif gölgeli kartlar, mürekkep metin,
   turuncu yalnız işaret (≈%10).
   Turuncu (#FF7F00) asla beyaz metin taşımaz; birincil düğme = turuncu zemin + mürekkep metin.
   Başlık: Schibsted Grotesk · Gövde, düğme, form, FİYAT ve ₺: Onest.
   Sınıf düzeni: blok__oge--degisken (BEM benzeri, Türkçe).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Token'lar (tokens.json → CSS değişkeni: color.metin.birincil → --color-metin-birincil)
   -------------------------------------------------------------------------- */
:root {
  /* Zemin — revizyon 2: şekil–zemin ayrımı (kullanıcı geri bildirimi: "zeminler içerikle çok bütünleşik").
     Üç katman, aralarında NET ama sakin ayrım:
       sayfa  #FFFFFF  ana içerik zemini (eskiden kâğıt #FBF8F3; kart ile arasında 1,04:1 fark vardı → kaldırıldı)
       bant   #F1EADF  dönüşümlü bölüm bandı, sayfa başlıkları (beyazla 1,20:1; üst/alt kıl çizgisi #E3D9C9)
       yüzey  #FFFFFF  kart; sınır #DDD5C8 (beyazla 1,46:1) + hafif gölge (--shadow-kart)
     Kum dolgu (yuzey-2) yalnız kart İÇİNDEKİ küçük öğeler içindir (rozet, yer tutucu, hover); bölüm zemini olarak kullanılmaz. */
  --color-zemin-sayfa: #FFFFFF;
  --color-zemin-yuzey: #FFFFFF;
  --color-zemin-bant: #F1EADF;
  --color-zemin-bant-sinir: #E3D9C9;
  --color-zemin-kagit: #FBF8F3;
  --color-zemin-yuzey-2: #F3EEE6;
  --color-zemin-yuzey-2-basili: #E9E2D6;
  --color-zemin-iz: #FFEAD6;
  --color-zemin-iz-acik: #FFF6EC;
  --color-zemin-koyu: #0B0B0D;
  --color-zemin-koyu-2: #1D1D21;
  /* Metin */
  --color-metin-birincil: #1A1F2B;
  --color-metin-ikincil: #545A66;
  --color-metin-ters: #FFFFFF;
  --color-metin-ters-ikincil: #BCBFC6;
  --color-metin-vurgu: #A84600;
  --color-metin-vurgu-hover: #8A3A00;
  --color-metin-dugme: #1A1F2B;
  /* Sınır (ince: kart çevresi ve ayırıcı; beyazla 1,46:1, bantla 1,21:1 — eskiden #E5DED2) */
  --color-sinir-ince: #DDD5C8;
  --color-sinir-guclu: #8A8478;
  --color-sinir-koyu: #35353B;
  /* Marka */
  --color-marka-turuncu: #FF7F00;
  --color-marka-turuncu-hover: #F27200;
  --color-marka-turuncu-basili: #E56A00;
  --color-marka-turuncu-grafik: #D86400;
  /* Birincil düğme: koyu turuncu zemin + beyaz yazı (beyazla 4,6:1; turuncu üstünde siyah yazı beğenilmedi) */
  --color-dugme-birincil: #BF5700;
  --color-dugme-birincil-hover: #A84C00;
  --color-dugme-birincil-basili: #8F4000;
  --color-marka-kalem: #FFD2A6;
  --color-marka-lacivert: #0B0B0D;
  --color-marka-whatsapp-ikon: #128C4A;
  /* Durum */
  --color-durum-basari-metin: #1D6B47;
  --color-durum-basari-zemin: #E5F2EA;
  --color-durum-basari-sinir: #B9DCC6;
  --color-durum-uyari-metin: #7A5200;
  --color-durum-uyari-zemin: #FFF2CC;
  --color-durum-uyari-sinir: #F0D9A0;
  --color-durum-hata-metin: #B4232A;
  --color-durum-hata-zemin: #FCE9E8;
  --color-durum-hata-sinir: #F2C4C1;
  --color-durum-bilgi-metin: #1F4F9F;
  --color-durum-bilgi-zemin: #E8EEFA;
  --color-durum-bilgi-sinir: #C5D3EE;
  /* Odak, devre dışı */
  --color-odak-acik: #A84600;
  --color-odak-koyu: #FFB05C;
  --color-devre-disi-zemin: #ECE6DC;
  --color-devre-disi-metin: #8A8478;
  /* Ders çubuğu hücresi: mürekkebin %12 tonu */
  --color-cubuk-hucre: rgba(26, 31, 43, .12);

  /* Yazı tipi */
  --font-aile-baslik: "Schibsted Grotesk", "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-aile-govde: "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Akışkan tip ölçeği (390 → 1280 px arasında doğrusal) */
  --size-ekran: clamp(36px, 1.5927rem + 2.6966vw, 60px);
  --size-ekran-satir: clamp(42px, 2.0225rem + 2.4719vw, 64px);
  --size-h1: clamp(30px, 1.4916rem + 1.5730vw, 44px);
  --size-h1-satir: clamp(36px, 1.8666rem + 1.5730vw, 50px);
  --size-h2: clamp(24px, 1.2809rem + 0.8989vw, 32px);
  --size-h2-satir: clamp(30px, 1.6011rem + 1.1236vw, 40px);
  --size-h3: clamp(20px, 1.1678rem + 0.3371vw, 23px);
  --size-h3-satir: clamp(26px, 1.5154rem + 0.4494vw, 30px);
  --size-h4: clamp(18px, 1.0976rem + 0.1124vw, 19px);
  --size-h4-satir: clamp(24px, 1.4452rem + 0.2247vw, 26px);
  --size-giris: clamp(18px, 1.0702rem + 0.2247vw, 20px);
  --size-giris-satir: clamp(28px, 1.6404rem + 0.4494vw, 32px);
  --size-govde: clamp(16px, 0.9726rem + 0.1124vw, 17px);
  --size-govde-satir: clamp(26px, 1.5702rem + 0.2247vw, 28px);
  --size-kucuk: 15px;
  --size-kucuk-satir: clamp(22px, 1.3202rem + 0.2247vw, 24px);
  --size-etiket: 13px;
  --size-etiket-satir: 16px;
  --size-alt-yazi: 13px;
  --size-alt-yazi-satir: 18px;
  --size-fiyat-xl: clamp(32px, 1.7809rem + 0.8989vw, 40px);
  --size-fiyat-xl-satir: clamp(36px, 2.0309rem + 0.8989vw, 44px);
  --size-fiyat-m: clamp(24px, 1.3904rem + 0.4494vw, 28px);
  --size-fiyat-m-satir: clamp(28px, 1.6404rem + 0.4494vw, 32px);
  --size-sayi-xl: clamp(40px, 2.0618rem + 1.7978vw, 56px);
  /* Hub/sınıf H1 ve ana sayfa H1 (revizyon 2: ölçülü; ekran 60'tan 52'ye) */
  /* Hub / liste başlık bandı artık sayfa başlık bandıyla aynı ölçekte (logo ve başlık oranı Hakkımızda ile aynı; 52 px / 800 çok iri duruyordu) */
  --size-hub: var(--size-h1);
  --size-hub-satir: var(--size-h1-satir);
  --size-sayi-xl-satir: clamp(44px, 2.4213rem + 1.3483vw, 56px);

  /* Boşluk (4 px tabanlı) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;
  --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 96px; --space-13: 128px;
  --space-bolum: clamp(56px, 2.4045rem + 4.4944vw, 96px);   /* 56 mobil · 72 tablet · 96 masaüstü */
  --space-kart-ic: clamp(20px, 1.1404rem + 0.4494vw, 24px);  /* 20 mobil · 24 masaüstü */

  /* Köşe */
  --radius-0: 0; --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-tam: 999px;

  /* Gölge */
  --shadow-1: 0 1px 2px rgba(26, 31, 43, .06);
  /* Kart: sınır + hafif gölge (revizyon 2; kart artık zeminden kalkar). Hover'da çerçeve koyulaşır, gölge büyümez. */
  --shadow-kart: 0 1px 2px rgba(26, 31, 43, .05), 0 6px 16px -10px rgba(26, 31, 43, .16);
  --shadow-2: 0 10px 30px -10px rgba(26, 31, 43, .22), 0 2px 6px rgba(26, 31, 43, .06);
  --shadow-3: 0 24px 60px -12px rgba(26, 31, 43, .32);
  --shadow-alt-cubuk: 0 -8px 24px -8px rgba(26, 31, 43, .16);
  --shadow-iz: 8px 12px 0 0 #FF7F00;
  --shadow-iz-kucuk: 3px 4px 0 0 #FF7F00;

  /* Düzen */
  --layout-kapsayici: 1240px;
  --layout-genis: 1360px;
  --layout-okuma: 720px;
  --layout-kenar: clamp(16px, 0.5618rem + 1.7978vw, 32px);  /* 16 mobil · 24 tablet · 32 masaüstü */
  --layout-oluk: 24px;
  --layout-baslik-yukseklik: 72px;
  --layout-serit-yukseklik: 36px;  /* üst iletişim şeridi (yalnız ≥1024) */
  --layout-alt-cubuk-yukseklik: 64px;

  /* Hareket */
  --motion-hizli: 120ms;
  --motion-orta: 200ms;
  --motion-yavas: 320ms;
  --motion-egri-cikis: cubic-bezier(.2, .7, .2, 1);
}

/* --------------------------------------------------------------------------
   2. Temel (kapsam: .rz kökü; :where ile özgüllük sıfır → bileşen sınıfları kolay ezer)
   -------------------------------------------------------------------------- */
.rz {
  font-family: var(--font-aile-govde);
  font-size: var(--size-govde);
  line-height: var(--size-govde-satir);
  color: var(--color-metin-birincil);
  background: var(--color-zemin-sayfa);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  overflow-x: clip;
}
.rz *, .rz *::before, .rz *::after { box-sizing: border-box; }
:where(.rz) :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, fieldset) { margin: 0; }
:where(.rz) :where(ul, ol)[class] { list-style: none; padding: 0; }
:where(.rz) :where(img, svg, video) { display: block; max-width: 100%; }
/* <picture style="display:contents"> içindeki <source> Chrome'da blok kutuya dönüp flex/grid kartlarda boş satır (gap kadar kayma) açıyordu */
picture > source { display: none; }
:where(.rz) img { height: auto; }
:where(.rz) a { color: inherit; }
:where(.rz) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.rz) button { cursor: pointer; }
:where(.rz) fieldset { border: 0; padding: 0; min-width: 0; }
:where(.rz) :where(h1, h2, h3) { font-family: var(--font-aile-baslik); font-weight: 700; text-wrap: balance; }
:where(.rz) h1 { font-size: var(--size-h1); line-height: var(--size-h1-satir); letter-spacing: -.02em; }
:where(.rz) h2 { font-size: var(--size-h2); line-height: var(--size-h2-satir); letter-spacing: -.015em; }
:where(.rz) h3 { font-size: var(--size-h3); line-height: var(--size-h3-satir); letter-spacing: -.01em; }
:where(.rz) h4 { font-size: var(--size-h4); line-height: var(--size-h4-satir); font-weight: 600; }
:where(.rz) p { text-wrap: pretty; }
:where(.rz) :where(b, strong) { font-weight: 600; }
:where(.rz) summary { cursor: pointer; list-style: none; }
:where(.rz) summary::-webkit-details-marker { display: none; }
:where(.rz) abbr[title] { text-decoration: none; cursor: help; }

/* Erişilebilir odak halkası: 3 px kiremit + 2 px boşluk (koyu zeminde açık turuncu). outline:none yasak. */
:where(.rz) :focus-visible { outline: 3px solid var(--color-odak-acik); outline-offset: 2px; }
:where(.bolum--koyu, .alt-bilgi, .koyu) :focus-visible { outline-color: var(--color-odak-koyu); }

/* Sayfa içi bağlantılar ("Bu sayfada" içindekiler, #bölüm) yumuşak kayar; hareket azaltma tercihinde kapalı */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Hareket azaltma: tüm geçişler anında */
@media (prefers-reduced-motion: reduce) {
  .rz *, .rz *::before, .rz *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Ekran okuyucuya özel metin */
.gizli-metin {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* İçeriğe geç bağlantısı: yalnız odakta görünür */
.atla {
  position: absolute; left: 16px; top: -100px; z-index: 400;
  background: var(--color-metin-birincil); color: var(--color-metin-ters);
  padding: 12px 16px; border-radius: var(--radius-sm); font-weight: 600; text-decoration: none;
}
.atla:focus { top: 12px; }

/* --------------------------------------------------------------------------
   3. Tipografi yardımcıları (yazi-*)
   -------------------------------------------------------------------------- */
.yazi-ekran { font-family: var(--font-aile-baslik); font-weight: 800; font-size: var(--size-ekran); line-height: var(--size-ekran-satir); letter-spacing: -.025em; text-wrap: balance; }
.yazi-h1 { font-family: var(--font-aile-baslik); font-weight: 700; font-size: var(--size-h1); line-height: var(--size-h1-satir); letter-spacing: -.02em; text-wrap: balance; }
.yazi-h2 { font-family: var(--font-aile-baslik); font-weight: 700; font-size: var(--size-h2); line-height: var(--size-h2-satir); letter-spacing: -.015em; text-wrap: balance; }
.yazi-h3 { font-family: var(--font-aile-baslik); font-weight: 700; font-size: var(--size-h3); line-height: var(--size-h3-satir); letter-spacing: -.01em; }
.yazi-h4 { font-family: var(--font-aile-govde); font-weight: 600; font-size: var(--size-h4); line-height: var(--size-h4-satir); letter-spacing: 0; }
.yazi-giris { font-size: var(--size-giris); line-height: var(--size-giris-satir); color: var(--color-metin-ikincil); }
.yazi-govde { font-size: var(--size-govde); line-height: var(--size-govde-satir); }
.yazi-kucuk { font-size: var(--size-kucuk); line-height: var(--size-kucuk-satir); }
.yazi-etiket { font-family: var(--font-aile-govde); font-size: var(--size-etiket); line-height: var(--size-etiket-satir); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-metin-ikincil); }
.yazi-alt { font-size: var(--size-alt-yazi); line-height: var(--size-alt-yazi-satir); font-weight: 500; color: var(--color-metin-ikincil); }
.yazi-ikincil { color: var(--color-metin-ikincil); }
.yazi-vurgu { color: var(--color-metin-vurgu); }
.yazi-tabular { font-variant-numeric: tabular-nums; }
.yazi-sayi { font-family: var(--font-aile-baslik); font-weight: 800; font-size: var(--size-sayi-xl); line-height: var(--size-sayi-xl-satir); letter-spacing: -.03em; }
.okuma-genisligi { max-width: var(--layout-okuma); }

/* Fosforlu kalem izi: H1'de YALNIZ bir ifade; metnin alt %40'ı, keskin geçişli düz şerit */
.kalem {
  background-image: linear-gradient(transparent 60%, var(--color-marka-kalem) 60%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding-inline: .05em; margin-inline: -.05em;
}

/* Metin içi bağlantı: kiremit, altı çizili (kâğıtta 5,60:1) */
.baglanti {
  color: var(--color-metin-vurgu); font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: color var(--motion-hizli);
}
.baglanti:hover { color: var(--color-metin-vurgu-hover); text-decoration-thickness: 2px; }
.bolum--koyu .baglanti, .alt-bilgi .baglanti { color: var(--color-metin-ters); }

/* --------------------------------------------------------------------------
   4. Düzen: kapsayıcı, bölüm, ızgara, yığın
   -------------------------------------------------------------------------- */
.kapsayici {
  width: 100%;
  max-width: calc(var(--layout-kapsayici) + 2 * var(--layout-kenar));
  margin-inline: auto;
  padding-inline: var(--layout-kenar);
}
.kapsayici--genis { max-width: calc(var(--layout-genis) + 2 * var(--layout-kenar)); }
.kapsayici--okuma { max-width: calc(var(--layout-okuma) + 2 * var(--layout-kenar)); }

/* Bölüm: dikey ritim 96 / 72 / 56 */
.bolum { padding-block: var(--space-bolum); }
.bolum--sik { padding-block: calc(var(--space-bolum) * .66); }
.bolum--ust-yok { padding-top: 0; }
.bolum--alt-yok { padding-bottom: 0; }
.bolum--yuzey { background: var(--color-zemin-yuzey); }
/* Kum bant (revizyon 2): beyaz zeminden belirgin ayrışan dönüşümlü bölüm. Üst/alt kenarda kıl çizgisi → bant geçişi net.
   Zemin kuralları: (1) aynı zeminli en çok 2 ardışık bölüm; (2) koyu bant sayfada en çok 1 (alt bilgi hariç);
   (3) koyu bant alt bilgiye bitişmez; (4) sayfa başlığı kum bant → ilk bölüm beyaz. */
.bolum--kum, .bolum--bant { background: var(--color-zemin-bant); box-shadow: inset 0 1px 0 var(--color-zemin-bant-sinir), inset 0 -1px 0 var(--color-zemin-bant-sinir); }
.bolum--cizgili { border-top: 1px solid var(--color-sinir-ince); }
/* Koyu bant: sayfada en fazla bir tane (alt bilgi hariç) */
.bolum--koyu { background: var(--color-zemin-koyu); color: var(--color-metin-ters); }
.bolum--koyu .yazi-ikincil, .bolum--koyu .yazi-alt, .bolum--koyu .yazi-etiket { color: var(--color-metin-ters-ikincil); }

/* Akışkan ızgara: sütunlar sığdığı kadar, telefonda tek sütun (min() ile taşma yok) */
.izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--izgara-min, 280px), 100%), 1fr));
  gap: var(--izgara-bosluk, var(--layout-oluk));
}
.izgara--2 { --izgara-min: 420px; }
.izgara--3 { --izgara-min: 300px; }
.izgara--4 { --izgara-min: 240px; }
.izgara--doldur { grid-template-columns: repeat(auto-fill, minmax(min(var(--izgara-min, 280px), 100%), 1fr)); }

/* 12 sütunlu iki kolon düzeni (ana + yan). Telefonda alt alta. */
.iki-kolon { display: grid; gap: var(--space-8) var(--layout-oluk); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .iki-kolon { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-10); }
  .iki-kolon--8-4 { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-9); }
  .iki-kolon--4-8 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-9); }
  .iki-kolon--esit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.yigin { display: flex; flex-direction: column; gap: var(--yigin-bosluk, var(--space-4)); }
.satir { display: flex; flex-wrap: wrap; align-items: center; gap: var(--satir-bosluk, var(--space-3)); }

/* Telefonda yatay kaydırılan şerit (kartlar). .izgara ile birlikte kullanılır; ≥768'de ızgara olarak kalır.
   Sayfa taşmaz: kaydırma kutunun içinde. */
@media (max-width: 767.98px) {
  .yatay-kaydirma {
    display: grid; gap: var(--space-4);
    grid-auto-flow: column; grid-template-columns: none;
    grid-auto-columns: 82%;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--layout-kenar);
    margin-inline: calc(-1 * var(--layout-kenar)); padding-inline: var(--layout-kenar);
    padding-bottom: var(--space-2); scrollbar-width: thin;
  }
  .yatay-kaydirma > * { scroll-snap-align: start; }
}

/* Görünürlük yardımcıları */
@media (max-width: 1023.98px) { .yalniz-masaustu { display: none !important; } }
@media (min-width: 1024px) { .yalniz-mobil { display: none !important; } }

/* --------------------------------------------------------------------------
   5. İkon (satır içi çizgi SVG, 24 px ızgara, 1,75 px çizgi). Bkz. ui/parcalar/ikonlar.html
   -------------------------------------------------------------------------- */
.ikon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ikon--16 { width: 16px; height: 16px; stroke-width: 1.5; }
.ikon--24 { width: 24px; height: 24px; }
.ikon--48 { width: 48px; height: 48px; stroke-width: 1.5; }
.ikon--dolu { fill: currentColor; stroke: none; }
.ikon--whatsapp { color: var(--color-marka-whatsapp-ikon); }

/* --------------------------------------------------------------------------
   6. Düğmeler
   Birincil (turuncu + mürekkep 6,50:1) · İkincil (1,5 px mürekkep çerçeve) · Metin (kiremit, altı çizili)
   Boyut: sm 40 · md 48 (varsayılan) · lg 56. Görünür bölgede TEK birincil düğme.
   -------------------------------------------------------------------------- */
.dugme {
  --dugme-yukseklik: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--dugme-yukseklik); padding: 0 20px;
  border: 0; border-radius: var(--radius-sm);
  font-family: var(--font-aile-govde); font-size: 16px; line-height: 20px; font-weight: 600; letter-spacing: 0;
  text-decoration: none; text-align: center; white-space: nowrap; cursor: pointer;
  background: transparent; color: var(--color-metin-birincil);
  transition: background-color var(--motion-hizli), color var(--motion-hizli), box-shadow var(--motion-hizli), transform var(--motion-hizli);
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.dugme:active { transform: translateY(1px); }
.dugme .ikon { width: 20px; height: 20px; }

.dugme--birincil { background: var(--color-dugme-birincil); color: var(--color-metin-ters); }
.dugme--birincil:hover { background: var(--color-dugme-birincil-hover); }
.dugme--birincil:active { background: var(--color-dugme-birincil-basili); }

.dugme--ikincil { background: transparent; color: var(--color-metin-birincil); box-shadow: inset 0 0 0 1.5px var(--color-metin-birincil); }
.dugme--ikincil:hover { background: var(--color-zemin-yuzey-2); }
.dugme--ikincil:active { background: var(--color-zemin-yuzey-2-basili); }

/* Koyu zeminde ikincil */
.dugme--ters { background: transparent; color: var(--color-metin-ters); box-shadow: inset 0 0 0 1.5px var(--color-metin-ters); }
.dugme--ters:hover { background: var(--color-zemin-koyu-2); }

/* Metin (üçüncül) düğme: 44 px dokunma alanı iç boşlukla */
.dugme--metin {
  --dugme-yukseklik: 44px; padding: 0 2px; border-radius: var(--radius-xs);
  color: var(--color-metin-vurgu); font-size: 16px;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.dugme--metin:hover { color: var(--color-metin-vurgu-hover); text-decoration-thickness: 2px; }
.dugme--metin:active { transform: none; }
.bolum--koyu .dugme--metin, .koyu .dugme--metin { color: var(--color-metin-ters); }
.bolum--koyu .dugme--metin:hover, .koyu .dugme--metin:hover { color: var(--color-metin-ters); }

/* WhatsApp: ikincil düğme + yeşil ikon (yeşil zemin + beyaz metin YOK, 1,98:1) */
.dugme--whatsapp .ikon { color: var(--color-marka-whatsapp-ikon); }

.dugme--sm { --dugme-yukseklik: 40px; padding: 0 16px; font-size: 14px; line-height: 18px; }
.dugme--sm .ikon { width: 16px; height: 16px; stroke-width: 1.5; }
@media (max-width: 767.98px) { .dugme--sm { --dugme-yukseklik: 44px; } }
.dugme--lg { --dugme-yukseklik: 56px; padding: 0 24px; }
.dugme--tam { width: 100%; }
@media (pointer: coarse) { .dugme--sm { --dugme-yukseklik: 44px; } }

/* Devre dışı */
.dugme:disabled, .dugme[aria-disabled="true"] {
  background: var(--color-devre-disi-zemin); color: var(--color-devre-disi-metin);
  box-shadow: none; cursor: not-allowed; transform: none; text-decoration: none;
}
.dugme--ikincil:disabled, .dugme--ikincil[aria-disabled="true"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--color-sinir-ince); }
.dugme--metin:disabled, .dugme--metin[aria-disabled="true"] { background: transparent; }

/* Yükleniyor: etiket "Ekleniyor…", 16 px halka; genişlik sabit, tıklanamaz */
.dugme--yukleniyor { pointer-events: none; }
.dugme--yukleniyor::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: dugme-don 700ms linear infinite;
}
@keyframes dugme-don { to { transform: rotate(360deg); } }

/* Tamamlandı: "Sepette" (ikincil görünüm + onay) */
.dugme--tamam { background: var(--color-zemin-yuzey); color: var(--color-durum-basari-metin); box-shadow: inset 0 0 0 1.5px var(--color-durum-basari-sinir); }

/* İkon düğmesi (arama, sepet, menü): 44×44 */
.ikon-dugme {
  position: relative; display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--radius-sm); border: 0;
  background: transparent; color: var(--color-metin-birincil); text-decoration: none; cursor: pointer;
  transition: background-color var(--motion-hizli);
}
.ikon-dugme:hover { background: var(--color-zemin-yuzey-2); }
.ikon-dugme .ikon { width: 22px; height: 22px; }
.ikon-dugme--cerceveli { box-shadow: inset 0 0 0 1.5px var(--color-metin-birincil); width: 48px; height: 48px; }
/* Sepet sayacı: mürekkep daire, 0 iken HTML'de yazılmaz */
.ikon-dugme__sayac {
  position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radius-tam); background: var(--color-metin-birincil); color: var(--color-metin-ters);
  font: 700 13px/18px var(--font-aile-govde); text-align: center; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--color-zemin-sayfa);
}

/* --------------------------------------------------------------------------
   7. Rozet, etiket, çip, canlı göstergesi
   -------------------------------------------------------------------------- */
.rozet {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: var(--radius-xs);
  font: 600 13px/16px var(--font-aile-govde); letter-spacing: 0; white-space: nowrap; vertical-align: middle;
}
.rozet .ikon { width: 16px; height: 16px; stroke-width: 1.5; }
/* VIP: her zaman Latin büyük harf, CSS dönüşümü YOK */
.rozet--vip { background: var(--color-zemin-koyu); color: var(--color-metin-ters); font-family: var(--font-aile-baslik); font-weight: 700; letter-spacing: .06em; padding: 3px 8px 2px; }
.rozet__plus { color: var(--color-marka-turuncu); letter-spacing: .02em; }
/* Tür rozeti: renk değil ikon + metin ayırır */
.rozet--tur { background: var(--color-zemin-yuzey-2); color: var(--color-metin-birincil); }
.rozet--yeni { box-shadow: inset 0 0 0 1px var(--color-metin-birincil); color: var(--color-metin-birincil); }
.rozet--kampanya { background: var(--color-zemin-iz); color: var(--color-metin-vurgu); }
/* Fark rozeti (karşılaştırma, telefon): yalnız Standart'a göre EKLENEN değerde, içeriği yazar ("+140 parça", "Standart'a ek") */
.rozet--fark { background: var(--color-zemin-iz-acik); color: var(--color-metin-birincil); box-shadow: inset 0 0 0 1px var(--color-zemin-iz); font-weight: 600; }
.rozet--dogrulanmis { color: var(--color-durum-basari-metin); padding-inline: 0; }
.rozet--durum { background: var(--color-zemin-yuzey-2); color: var(--color-metin-ikincil); }
.rozet--on-bilgi { background: var(--color-durum-bilgi-zemin); color: var(--color-durum-bilgi-metin); }
/* Yalnız prototipte: çelişkili veri işareti */
.rozet--teyit { background: var(--color-durum-uyari-zemin); color: var(--color-durum-uyari-metin); box-shadow: inset 0 0 0 1px var(--color-durum-uyari-sinir); font-weight: 500; white-space: normal; }
.bolum--koyu .rozet--teyit { background: transparent; color: var(--color-odak-koyu); box-shadow: inset 0 0 0 1px currentColor; }

/* İhtiyaç etiketi ("Sınıf mevcudu önemliyse"): çerçevesiz, kiremit */
.ihtiyac { display: block; font-size: 15px; line-height: 22px; font-weight: 500; color: var(--color-metin-vurgu); }

/* CANLI göstergesi: yalnız gerçek canlı ders/kamp saatinde */
.canli {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 8px;
  border-radius: var(--radius-tam); background: var(--color-zemin-yuzey); box-shadow: inset 0 0 0 1px var(--color-sinir-ince);
  font: 600 13px/16px var(--font-aile-govde);
}
.canli::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-marka-turuncu-grafik); }

/* Çip (süzgeç ve kısa yol): yalnız çiplerde tam yuvarlak köşe */
.cip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px;
  border-radius: var(--radius-tam); border: 0; background: var(--color-zemin-yuzey);
  box-shadow: inset 0 0 0 1px var(--color-sinir-guclu);
  font: 500 14px/18px var(--font-aile-govde); color: var(--color-metin-birincil); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--motion-hizli), box-shadow var(--motion-hizli);
}
.cip:hover { box-shadow: inset 0 0 0 1.5px var(--color-metin-birincil); }
.cip[aria-pressed="true"], .cip[aria-current], .cip--secili { background: var(--color-metin-birincil); color: var(--color-metin-ters); box-shadow: none; }
.cip__sayi { color: var(--color-metin-ikincil); font-variant-numeric: tabular-nums; }
.cip--secili .cip__sayi, .cip[aria-pressed="true"] .cip__sayi { color: var(--color-metin-ters-ikincil); }
@media (pointer: coarse), (max-width: 767.98px) { .cip { min-height: 44px; } }
.cip-satiri { display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (max-width: 767.98px) {
  .cip-satiri--kaydir { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--layout-kenar)); padding: 2px var(--layout-kenar) 6px; scrollbar-width: none; }
}

/* Monogram (baş harf avatarı): eğitmen, derece, yazar. Fotoğraf yoksa logo ASLA kullanılmaz. */
.monogram {
  display: inline-grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-zemin-yuzey-2); color: var(--color-metin-ikincil);
  font: 700 15px/1 var(--font-aile-baslik); letter-spacing: .02em;
}
.monogram--buyuk { width: 56px; height: 56px; font-size: 19px; }
.bolum--koyu .monogram { background: var(--color-zemin-koyu-2); color: var(--color-metin-ters); }

/* --------------------------------------------------------------------------
   8. Görünür yol (breadcrumb), sayfa başlığı, bölüm başlığı
   -------------------------------------------------------------------------- */
.yol { font-size: 14px; line-height: 20px; color: var(--color-metin-ikincil); }
.yol__liste { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.yol__oge { display: inline-flex; align-items: center; }
.yol__oge + .yol__oge::before { content: "›" / ""; margin-inline: 8px; color: var(--color-sinir-guclu); }
.yol__oge a { color: var(--color-metin-ikincil); text-decoration: none; padding-block: 12px; }
.yol__oge a:hover { color: var(--color-metin-birincil); text-decoration: underline; text-underline-offset: 3px; }
.yol__oge [aria-current] { color: var(--color-metin-birincil); font-weight: 500; }
@media (max-width: 767.98px) {
  .yol { overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--layout-kenar)); padding-inline: var(--layout-kenar); }
  .yol__liste { flex-wrap: nowrap; white-space: nowrap; }
}

/* Sayfa başlığı (revizyon 2): kum bant + görünür yol + H1 + kısa giriş + en çok 1 birincil ve 1 ikincil eylem.
   Kutu, fiyat tablosu, kampanya kartı YOK (sadelik). Altta bant kıl çizgisi; ardından gelen ilk bölüm beyaz. */
.sayfa-basligi { --sb-alt: clamp(36px, 1.6rem + 2vw, 56px); padding-block: var(--space-5) var(--sb-alt); background: var(--color-zemin-bant); box-shadow: inset 0 -1px 0 var(--color-zemin-bant-sinir); }
.sayfa-basligi__yol { margin-bottom: clamp(16px, 1rem + 1vw, 28px); }
.sayfa-basligi__ust { margin-bottom: var(--space-3); color: var(--color-metin-vurgu); }
.sayfa-basligi__baslik { font-family: var(--font-aile-baslik); font-weight: 700; font-size: var(--size-h1); line-height: var(--size-h1-satir); letter-spacing: -.02em; max-width: 22ch; }
.sayfa-basligi--hub .sayfa-basligi__baslik { font-weight: 700; font-size: var(--size-hub); line-height: var(--size-hub-satir); letter-spacing: -.025em; max-width: 20ch; }
.sayfa-basligi__giris { margin-top: var(--space-4); max-width: var(--layout-okuma); font-size: var(--size-giris); line-height: var(--size-giris-satir); color: var(--color-metin-ikincil); }
.sayfa-basligi__eylemler { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* Bölüm başlığı: (üst etiket) + H2 + (açıklama) + (Tümü bağlantısı) */
.bolum-basligi { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-7); margin-bottom: clamp(24px, 1.25rem + 1.2vw, 40px); }
.bolum-basligi__metin { max-width: 46rem; min-width: 0; }
.bolum-basligi__ust { margin-bottom: var(--space-3); }
.bolum-basligi__baslik { font-family: var(--font-aile-baslik); font-weight: 700; font-size: var(--size-h2); line-height: var(--size-h2-satir); letter-spacing: -.015em; }
.bolum-basligi__aciklama { margin-top: var(--space-3); font-size: var(--size-govde); line-height: var(--size-govde-satir); color: var(--color-metin-ikincil); }
.bolum--koyu .bolum-basligi__aciklama { color: var(--color-metin-ters-ikincil); }
.bolum-basligi__baglanti { flex: none; }

/* --------------------------------------------------------------------------
   9. Fiyat ve fiyat kutusu (₺ içeren her metin Onest; fiyat asla kırmızı değil)
   -------------------------------------------------------------------------- */
.fiyat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-family: var(--font-aile-govde); }
.fiyat__tutar { font-weight: 800; font-size: var(--size-fiyat-m); line-height: var(--size-fiyat-m-satir); letter-spacing: -.01em; color: var(--color-metin-birincil); white-space: nowrap; }
.fiyat__not { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--color-metin-ikincil); }
.fiyat--xl .fiyat__tutar { font-size: var(--size-fiyat-xl); line-height: var(--size-fiyat-xl-satir); letter-spacing: -.02em; }
.fiyat--kucuk .fiyat__tutar { font-size: 20px; line-height: 24px; }
/* Eski (üstü çizili) fiyat ve indirim yüzdesi HİÇBİR yerde gösterilmez (kullanıcı kararı, 14 Ekim 2026). */
.fiyat__baslangic { font-weight: 500; font-size: 15px; color: var(--color-metin-ikincil); }

/* Taksit satırı: toplam + taksit sayısı aynı satırda, ≥15 px (yönetmelik md.13/7) */
.taksit { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 22px; color: var(--color-metin-birincil); }
.taksit .ikon { margin-top: 1px; color: var(--color-metin-ikincil); }
.taksit__alt { display: block; color: var(--color-metin-ikincil); }
/* Taksit bağlantısı ve penceresi (ürün detay fiyat kutusu + sepet/ödeme sipariş özeti; yt.js [data-taksit]) */
.taksit b { display: block; font-weight: 600; }
.taksit__ac { display: inline-block; min-height: 24px; margin-top: 2px; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.taksit__not { font-size: 14px; line-height: 20px; color: var(--color-metin-ikincil); }
.taksit__durum { padding: var(--space-6) var(--space-2); text-align: center; font-size: 15px; color: var(--color-metin-ikincil); }
.pencere.pencere--genis { width: min(1040px, calc(100vw - 32px)); }
.pencere--genis .pencere__ic { max-height: calc(100vh - 64px); overflow-y: auto; }
/* PayTR resmî taksit tablosu (betik kendi işaretlemesini basar; yalnız yerleşim ve renkler sistemin belirteçleriyle) */
#paytr_taksit_tablosu { clear: both; font: 400 13px/18px var(--font-aile-govde); text-align: center; }
#paytr_taksit_tablosu::before { display: table; content: " "; }
#paytr_taksit_tablosu::after { content: ""; clear: both; display: table; }
#paytr_taksit_tablosu .taksit-tablosu-wrapper { margin: 5px; width: 280px; padding: 12px; cursor: default; text-align: center; display: inline-block; border: 1px solid var(--color-sinir-ince); border-radius: var(--radius-md); vertical-align: top; background: var(--color-zemin-yuzey); }
#paytr_taksit_tablosu .taksit-logo img { max-height: 28px; padding-bottom: 10px; }
#paytr_taksit_tablosu .taksit-baslik { display: block; overflow: hidden; }
#paytr_taksit_tablosu .taksit-tutari-text { float: left; width: 126px; color: var(--color-metin-ikincil); margin-bottom: 5px; }
#paytr_taksit_tablosu .taksit-tutar-wrapper { display: block; overflow: hidden; background-color: var(--color-zemin-yuzey-2); margin-bottom: 2px; }
#paytr_taksit_tablosu .taksit-tutar-wrapper:hover { background-color: var(--color-zemin-yuzey-2-basili); }
#paytr_taksit_tablosu .taksit-tutari { float: left; width: 126px; padding: 6px 0; color: var(--color-metin-birincil); border: 2px solid var(--color-zemin-yuzey); }
#paytr_taksit_tablosu .taksit-tutari-bold { font-weight: 700; }
#paytr_taksit_tablosu .taksit-tutar-wrapper.taksit-tutari-bold { background-color: var(--color-durum-basari-zemin); outline: 2px solid var(--color-durum-basari-sinir); }
#paytr_taksit_tablosu .taksit-tutar-wrapper.taksit-tutari-bold .taksit-tutari { color: var(--color-durum-basari-metin); border-color: var(--color-durum-basari-zemin); }
#paytr_taksit_tablosu .taksit-pft-rozet { display: block; clear: both; font: 600 13px/16px var(--font-aile-govde); color: var(--color-durum-basari-metin); padding: 3px 0 2px; }
@media (max-width: 600px) { #paytr_taksit_tablosu .taksit-tablosu-wrapper { margin: 5px 0; width: 100%; max-width: 280px; } }

/* Fiyat kutusu (ürün sayfası sağ sütunu; masaüstünde yapışkan) */
.fiyat-kutusu {
  display: flex; flex-direction: column; gap: var(--space-5);
  background: var(--color-zemin-yuzey); border: 1px solid var(--color-sinir-ince); border-radius: var(--radius-md);
  padding: var(--space-kart-ic); box-shadow: var(--shadow-kart);
}
.fiyat-kutusu--yapiskan { position: sticky; top: 88px; box-shadow: var(--shadow-2); }
.fiyat-kutusu__kampanya { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--color-zemin-iz); }
.fiyat-kutusu__kampanya-baslik { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--color-metin-vurgu); }
.fiyat-kutusu__eylemler { display: flex; flex-direction: column; gap: var(--space-2); }
.fiyat-kutusu__ayirici { height: 1px; background: var(--color-sinir-ince); border: 0; margin: 0; }

/* Segment (kademe seçici: Standart · VIP · VIP Plus — kardeş ürün bağlantıları) */
.segment { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--color-sinir-guclu); padding: 3px; gap: 3px; background: var(--color-zemin-yuzey); }
.segment__oge {
  display: grid; place-items: center; min-height: 44px; padding: 0 8px; border-radius: 6px;
  font: 600 14px/18px var(--font-aile-govde); color: var(--color-metin-birincil); text-decoration: none; text-align: center;
  transition: background-color var(--motion-hizli);
}
.segment__oge:hover { background: var(--color-zemin-yuzey-2); }
.segment__oge[aria-current], .segment__oge--etkin { background: var(--color-metin-birincil); color: var(--color-metin-ters); }

/* Güvence listesi (ödeme, kargo, cayma) */
.guvence-listesi { display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 20px; color: var(--color-metin-ikincil); }
.guvence-listesi li { display: flex; gap: 10px; align-items: flex-start; }
.guvence-listesi .ikon { width: 16px; height: 16px; stroke-width: 1.5; margin-top: 2px; color: var(--color-metin-birincil); }

/* --------------------------------------------------------------------------
   10. Kartlar
   Varsayılan yükselti ince sınırdır (gölge yok). Köşe türüne göre değişir.
   -------------------------------------------------------------------------- */

/* 10.1 Paket kartı — tamamen HTML (kapak görseli yok). Eşit yükseklik, fiyat alta hizalı. */
.kart-paket {
  display: flex; flex-direction: column; height: 100%; min-width: 0;
  background: var(--color-zemin-yuzey); border: 1px solid var(--color-sinir-ince); border-radius: var(--radius-md);
  padding: var(--space-kart-ic); box-shadow: var(--shadow-kart);
  transition: border-color var(--motion-hizli);
}
.kart-paket:hover { border-color: var(--color-sinir-guclu); }
.kart-paket__etiket { display: flex; align-items: flex-start; gap: 8px; font: 600 13px/16px var(--font-aile-govde); letter-spacing: .06em; text-transform: uppercase; color: var(--color-metin-ikincil); margin-bottom: var(--space-3); }
.kart-paket__etiket .ikon { width: 16px; height: 16px; stroke-width: 1.5; color: var(--color-metin-birincil); flex: none; }
.kart-paket__baslik { font-family: var(--font-aile-baslik); font-weight: 700; font-size: clamp(20px, 1.1678rem + .3371vw, 22px); line-height: clamp(26px, 1.5154rem + .4494vw, 28px); letter-spacing: -.01em; text-wrap: balance; }
.kart-paket__baslik a { text-decoration: none; }
.kart-paket:hover .kart-paket__baslik a, .kart-paket__baslik a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.kart-paket__baslik .rozet { margin-left: 4px; position: relative; top: -2px; }
.kart-paket__ihtiyac { margin-top: 6px; }
.kart-paket__farklar { display: flex; flex-direction: column; gap: 8px; margin-top: var(--space-4); font-size: 15px; line-height: 22px; }
.kart-paket__fark { display: flex; gap: 10px; align-items: flex-start; }
.kart-paket__fark .ikon { width: 18px; height: 18px; margin-top: 2px; color: var(--color-metin-birincil); }
.kart-paket__fiyat { margin-top: auto; padding-top: var(--space-5); }
.kart-paket__fiyat::before { content: ""; display: block; height: 1px; background: var(--color-sinir-ince); margin-bottom: var(--space-4); }
.kart-paket__fiyat .fiyat { justify-content: space-between; }
.kart-paket__taksit { margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--color-metin-ikincil); }
.kart-paket__eylemler { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin-top: var(--space-4); }
.kart-paket__eylemler .dugme--metin { align-self: center; }
/* Durum: satışta değil */
.kart-paket--kapali { background: var(--color-zemin-yuzey-2); box-shadow: none; }
.kart-paket--kapali .kart-paket__baslik, .kart-paket--kapali .fiyat__tutar { color: var(--color-metin-ikincil); }
/* Kompakt: fark maddeleri yok (ilgili paket, eğitmen detayı) */
.kart-paket--kompakt .kart-paket__farklar { display: none; }
.kart-paket--kompakt .kart-paket__fiyat { padding-top: var(--space-4); }
/* "Örnek ders var" ibaresi: yalnız ürün sayfasında örnek dersi olan pakette (kart, hub satırı). Bedava ders / deneme haftası vaadi DEĞİL.
   <p class="ornek-ders-ibaresi"><svg class="ikon ikon--16" …oynat…></svg> Örnek ders var</p> */
.ornek-ders-ibaresi { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-3); font: 600 13px/18px var(--font-aile-govde); color: var(--color-metin-birincil); }
.ornek-ders-ibaresi .ikon { width: 16px; height: 16px; color: var(--color-marka-turuncu-grafik); }

/* 10.2 Kampanya kartı ("Şimdi sırada"): panel banner'ı, kendiliğinden dönmez, metin HTML */
.kart-kampanya {
  display: flex; flex-direction: column; gap: var(--space-4);
  background: var(--color-zemin-yuzey); border: 1px solid var(--color-sinir-ince); border-radius: var(--radius-md);
  padding: var(--space-kart-ic); box-shadow: var(--shadow-kart);
}
.kart-kampanya__ust { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.kart-kampanya__etiket { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/16px var(--font-aile-govde); letter-spacing: .06em; text-transform: uppercase; color: var(--color-metin-vurgu); }
.kart-kampanya__baslik { font-family: var(--font-aile-baslik); font-weight: 700; font-size: var(--size-h3); line-height: var(--size-h3-satir); letter-spacing: -.01em; }
.kart-kampanya__metin { font-size: 15px; line-height: 22px; color: var(--color-metin-ikincil); }
.kart-kampanya__alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--color-sinir-ince); }

/* Program şeridi (kampın 5 akşamı ya da bir haftanın günleri): ders programı metaforu */
.program-seridi { display: grid; grid-template-columns: repeat(var(--gun, 5), minmax(0, 1fr)); background: var(--color-zemin-yuzey-2); border-radius: var(--radius-sm); overflow: hidden; }
.program-seridi__gun { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px 12px; min-width: 0; }
.program-seridi__gun + .program-seridi__gun { box-shadow: -1px 0 0 0 var(--color-zemin-sayfa); }
.program-seridi__isim { font: 600 13px/16px var(--font-aile-govde); letter-spacing: .06em; text-transform: uppercase; color: var(--color-metin-ikincil); }
.program-seridi__tarih { font: 700 22px/26px var(--font-aile-baslik); letter-spacing: -.01em; }
.program-seridi__saat { font: 500 13px/18px var(--font-aile-govde); color: var(--color-metin-ikincil); }
.program-seridi__gun--ilk { background: var(--color-zemin-iz); }
.program-seridi__gun--ilk .program-seridi__isim { color: var(--color-metin-vurgu); display: inline-flex; align-items: center; gap: 4px; }
.program-seridi__not { font-size: 13px; line-height: 18px; color: var(--color-metin-ikincil); }
@media (max-width: 479.98px) { .program-seridi__gun { padding: 8px 6px 10px; } .program-seridi__tarih { font-size: 19px; } }

/* 10.3 Hub kartı (sütun biçimi: üstte 2 px mürekkep çizgi, kutu değil) */
.hub-sutunlari { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
@media (min-width: 900px) {
  .hub-sutunlari { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .hub-sutunlari > .kart-hub { padding-inline: var(--space-7); }
  .hub-sutunlari > .kart-hub:first-child { padding-left: 0; }
  .hub-sutunlari > .kart-hub:last-child { padding-right: 0; }
  .hub-sutunlari > .kart-hub + .kart-hub { box-shadow: -1px 0 0 0 var(--color-sinir-ince); }
}
.kart-hub { display: flex; flex-direction: column; min-width: 0; }
/* ≥900: üst, giriş (başlık + metin), bilgi ve eylem satırları sütunlar arasında hizalı (subgrid) */
@media (min-width: 900px) {
  .hub-sutunlari { grid-template-rows: repeat(4, auto); }
  .hub-sutunlari > .kart-hub { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .hub-sutunlari > .kart-hub > .kart-hub__alt { align-self: end; }
}
.kart-hub__ust { padding-top: var(--space-4); border-top: 2px solid var(--color-metin-birincil); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kart-hub__giris { min-width: 0; }
.kart-hub__baslik { margin-top: var(--space-3); font-family: var(--font-aile-baslik); font-weight: 700; font-size: clamp(24px, 1.3rem + .8vw, 30px); line-height: 1.15; letter-spacing: -.02em; }
.kart-hub__baslik a { text-decoration: none; }
.kart-hub__baslik a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.kart-hub__metin { margin-top: var(--space-3); font-size: 16px; line-height: 26px; color: var(--color-metin-ikincil); }
.kart-hub__bilgi { margin-top: var(--space-5); display: grid; grid-template-columns: minmax(7.5em, auto) minmax(0, 1fr); align-content: start; gap: 8px 16px; font-size: 15px; line-height: 22px; }
.kart-hub__bilgi dt { color: var(--color-metin-ikincil); }
.kart-hub__bilgi dd { font-weight: 500; }
.kart-hub__alt { margin-top: auto; padding-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; }

/* 10.4 Yorum kartı: avatar yok, tırnak süsü yok, dengeli seçki (3★ dahil) */
.kart-yorum {
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--color-zemin-yuzey); border: 1px solid var(--color-sinir-ince); border-radius: var(--radius-md);
  padding: var(--space-kart-ic); box-shadow: var(--shadow-kart);
}
.kart-yorum__ust { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.kart-yorum__puan { font: 600 14px/18px var(--font-aile-govde); font-variant-numeric: tabular-nums; }
.kart-yorum__tarih { font: 500 13px/18px var(--font-aile-govde); color: var(--color-metin-ikincil); margin-left: auto; }
.kart-yorum__metin { font-size: var(--size-govde); line-height: var(--size-govde-satir); }
/* Uzun yorum (≈280 karakterden uzun): metin kırpılmaz; ilk bölüm görünür, kalanı yerel details ile açılır.
   <p class="kart-yorum__metin">İlk iki–üç cümle…</p>
   <details class="kart-yorum__devam"><summary><span class="kart-yorum__devam-ac">Devamını oku</span><span class="kart-yorum__devam-kapat">Daha az göster</span> <svg class="ikon ikon--16" …asagi…></svg></summary><p class="kart-yorum__metin">Kalan metin.</p></details>
   Açıkken özet düğmesi metnin sonuna iner (okuma sırası bozulmaz). */
.kart-yorum__devam > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 600 15px/20px var(--font-aile-govde); color: var(--color-metin-vurgu); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.kart-yorum__devam > summary:hover { color: var(--color-metin-vurgu-hover); }
.kart-yorum__devam > summary .ikon { width: 16px; height: 16px; stroke-width: 1.5; transition: transform var(--motion-orta) var(--motion-egri-cikis); }
.kart-yorum__devam[open] > summary { order: 2; }
.kart-yorum__devam[open] > summary .ikon { transform: rotate(180deg); }
.kart-yorum__devam[open] { display: flex; flex-direction: column; }
.kart-yorum__devam > .kart-yorum__metin { margin-top: -4px; }
.kart-yorum__devam-kapat, .kart-yorum__devam[open] .kart-yorum__devam-ac { display: none; }
.kart-yorum__devam[open] .kart-yorum__devam-kapat { display: inline; }
.kart-yorum__alt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding-top: var(--space-3); border-top: 1px solid var(--color-sinir-ince); font-size: 15px; line-height: 22px; }
.kart-yorum__isim { font-weight: 600; }
.kart-yorum__paket { color: var(--color-metin-vurgu); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kart-yorum__paket:hover { color: var(--color-metin-vurgu-hover); }
/* Telefonda dokunma alanı 44 px (yerleşim değişmez: iç boşluk + eksi dış boşluk) */
@media (max-width: 767.98px) { .kart-yorum__paket { display: inline-block; padding-block: 11px; margin-block: -11px; } }
.kart-yorum__ayrac { color: var(--color-sinir-guclu); }

/* Yıldızlar: dolu turuncu-grafik (≥3:1), boş ince sınır; metinle birlikte ("5/5") */
.yildizlar { display: inline-flex; gap: 2px; color: var(--color-marka-turuncu-grafik); }
.yildizlar .ikon { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.yildizlar .yildiz--bos { color: var(--color-sinir-ince); }
.yildizlar--buyuk .ikon { width: 20px; height: 20px; }
/* Yarım yıldız: iki yıldız üst üste, üstteki sol yarısı görünür (4,5 gibi ortalamalar) */
.yildiz-yarim { display: inline-grid; }
.yildiz-yarim > svg { grid-area: 1 / 1; }
.yildiz-yarim > svg:first-child { color: var(--color-sinir-ince); }
.yildiz-yarim > svg:last-child { clip-path: inset(0 50% 0 0); }

/* Yorum özeti: ortalama + adet + 5→1 dağılım çubukları */
.yorum-ozeti { display: flex; flex-direction: column; gap: var(--space-4); }
.yorum-ozeti__puan { display: flex; align-items: baseline; gap: 8px; }
.yorum-ozeti__deger { font: 800 var(--size-sayi-xl)/1 var(--font-aile-baslik); letter-spacing: -.03em; }
.yorum-ozeti__olcek { font: 600 18px/1 var(--font-aile-govde); color: var(--color-metin-ikincil); }
.yorum-ozeti__adet { font-size: 15px; line-height: 22px; color: var(--color-metin-ikincil); }
.dagilim { display: flex; flex-direction: column; gap: 8px; }
.dagilim__etiket { display: inline-flex; align-items: center; gap: 4px; }
.dagilim__etiket .ikon { width: 12px; height: 12px; color: var(--color-marka-turuncu-grafik); }
.dagilim__satir { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) 2.4em; align-items: center; gap: 10px; font: 500 14px/20px var(--font-aile-govde); font-variant-numeric: tabular-nums; }
.dagilim__cubuk { height: 8px; border-radius: var(--radius-tam); background: var(--color-sinir-ince); overflow: hidden; }
.dagilim__dolu { display: block; height: 100%; width: var(--oran, 0%); background: var(--color-marka-turuncu-grafik); border-radius: inherit; }
.dagilim__adet { text-align: right; color: var(--color-metin-ikincil); }

/* 10.5 Başarı: rakam bloğu (kart değil, tipografik) + derece satırı + başarı kartı
   KAYNAK SATIRI ZORUNLU: kurum, sınav, yıl, tanım. Boşsa bileşen çizilmez. */
.basari-rakamlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) 0; }
@media (min-width: 900px) { .basari-rakamlar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.basari-rakam { display: flex; flex-direction: column; gap: 6px; padding-inline: var(--space-5); min-width: 0; }
.basari-rakamlar > .basari-rakam:nth-child(odd) { padding-left: 0; }
.basari-rakamlar > .basari-rakam:nth-child(even) { box-shadow: -1px 0 0 0 var(--basari-ayirici, var(--color-sinir-ince)); }
@media (min-width: 900px) {
  .basari-rakamlar > .basari-rakam:nth-child(odd) { padding-left: var(--space-5); }
  .basari-rakamlar > .basari-rakam:first-child { padding-left: 0; }
  .basari-rakamlar > .basari-rakam + .basari-rakam { box-shadow: -1px 0 0 0 var(--basari-ayirici, var(--color-sinir-ince)); }
}
.bolum--koyu .basari-rakamlar { --basari-ayirici: var(--color-sinir-koyu); }
.basari-rakam__deger { font: 800 var(--size-sayi-xl)/var(--size-sayi-xl-satir) var(--font-aile-baslik); letter-spacing: -.03em; }
.basari-rakam__isaret { font-size: .62em; letter-spacing: 0; margin-right: .04em; vertical-align: .32em; }
.basari-rakam__etiket { font-size: 15px; line-height: 22px; font-weight: 600; }
.basari-rakam__sinav { font: 600 13px/16px var(--font-aile-govde); letter-spacing: .06em; text-transform: uppercase; color: var(--color-metin-vurgu); }
.bolum--koyu .basari-rakam__sinav { color: var(--color-odak-koyu); }
.basari-rakam__tanim { font-size: 13px; line-height: 18px; color: var(--color-metin-ikincil); }
.bolum--koyu .basari-rakam__tanim { color: var(--color-metin-ters-ikincil); }

.kaynak-notu { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--color-metin-ikincil); }
.bolum--koyu .kaynak-notu { color: var(--color-metin-ters-ikincil); }

/* Derece listesi: ad gösterimi 3 kip (tam ad · baş harf · gizli); fotoğraf yalnız yayın onayıyla */
.derece-listesi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--space-7); }
@media (min-width: 768px) { .derece-listesi { grid-template-columns: repeat(var(--derece-sutun, 3), minmax(0, 1fr)); } }
.derece { display: flex; align-items: center; gap: 14px; padding-block: 14px; border-top: 1px solid var(--color-sinir-ince); min-width: 0; }
.bolum--koyu .derece { border-color: var(--color-sinir-koyu); }
.derece__isim { font-size: 17px; line-height: 24px; font-weight: 600; }
.derece__bilgi { font-size: 14px; line-height: 20px; color: var(--color-metin-ikincil); }
.bolum--koyu .derece__bilgi { color: var(--color-metin-ters-ikincil); }
.derece__sira { font-weight: 600; color: var(--color-metin-vurgu); }
.bolum--koyu .derece__sira { color: var(--color-marka-turuncu); }

/* Başarı kartı: tek derece için kart biçimi (başarılar sayfası ızgarası) */
.kart-basari { display: flex; flex-direction: column; gap: var(--space-3); background: var(--color-zemin-yuzey); border: 1px solid var(--color-sinir-ince); border-radius: var(--radius-md); padding: var(--space-kart-ic); box-shadow: var(--shadow-kart); }
.kart-basari__ust { display: flex; align-items: center; gap: 12px; }
.kart-basari__isim { font: 700 18px/24px var(--font-aile-baslik); letter-spacing: -.01em; }
.kart-basari__derece { font: 600 15px/22px var(--font-aile-govde); color: var(--color-metin-vurgu); }
.kart-basari__kaynak { font-size: 13px; line-height: 18px; color: var(--color-metin-ikincil); padding-top: var(--space-3); border-top: 1px solid var(--color-sinir-ince); }

/* 10.6 Eğitmen kartı: kartın tamamı tek bağlantı; 4:5 beyaz fonlu portre; logo asla yer tutucu değil */
.kart-egitmen { display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: inherit; background: var(--color-zemin-yuzey); border: 1px solid var(--color-sinir-ince); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-kart); transition: border-color var(--motion-hizli); }
.kart-egitmen:hover { border-color: var(--color-sinir-guclu); }
.kart-egitmen__foto { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; background: #fff; border-radius: 0; }
.kart-egitmen__foto--bos { display: grid; place-items: center; align-content: center; gap: 8px; background: var(--color-zemin-yuzey-2); }
.kart-egitmen__basharf { font: 800 40px/1 var(--font-aile-baslik); color: var(--color-metin-ikincil); letter-spacing: .01em; }
.kart-egitmen__not { font-size: 13px; line-height: 18px; color: var(--color-metin-ikincil); }
.kart-egitmen__govde { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 18px; border-top: 1px solid var(--color-sinir-ince); }
.kart-egitmen__isim { font-family: var(--font-aile-baslik); font-weight: 700; font-size: 18px; line-height: 24px; letter-spacing: -.01em; }
.kart-egitmen:hover .kart-egitmen__isim { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.kart-egitmen__brans { font-size: 15px; line-height: 22px; color: var(--color-metin-ikincil); }
.kart-egitmen__rozetler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* Eğitmen ızgarası: telefonda 2, tablette 3, masaüstünde 4 sütun (yon.md §4.9) */
.egitmen-izgarasi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 768px) { .egitmen-izgarasi { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } }
@media (min-width: 1024px) { .egitmen-izgarasi { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--layout-oluk); } }
@media (max-width: 479.98px) { .egitmen-izgarasi .kart-egitmen__govde { padding: 10px 12px 14px; } .egitmen-izgarasi .kart-egitmen__isim { font-size: 16px; line-height: 21px; } .egitmen-izgarasi .kart-egitmen__brans { font-size: 14px; } }
/* Uzun adlı eğitmen kartı satırdaki kartları uzatmasın: kartlar aynı yükseklikte */
.egitmen-izgarasi > li { display: flex; }
.egitmen-izgarasi > li > .kart-egitmen { flex: 1 1 auto; min-width: 0; }
/* Beş küçük kartlık satır (eğitmen sayfası "Diğer eğitmenler"): ≥1024 beş sütun; altında yatay kayan şerit (tablette ≈3, telefonda ≈2 kart) */
@media (min-width: 1024px) { .egitmen-izgarasi--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); } }
@media (max-width: 1023.98px) {
  .egitmen-izgarasi--5 { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 30%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--layout-kenar); margin-inline: calc(-1 * var(--layout-kenar)); padding-inline: var(--layout-kenar); padding-bottom: var(--space-2); scrollbar-width: thin; }
  .egitmen-izgarasi--5 > li { scroll-snap-align: start; }
}
@media (max-width: 767.98px) { .egitmen-izgarasi--5 { grid-auto-columns: 44%; } }

/* 10.7 Blog kartı: kartın tamamı tek bağlantı; kapak 1839:800 kırpılmadan */
.kart-blog { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; text-decoration: none; color: inherit; }
.kart-blog__kapak { width: 100%; aspect-ratio: 1839 / 800; object-fit: contain; border-radius: var(--radius-sm); background: var(--color-zemin-koyu); }
.kart-blog__ust { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 500 13px/18px var(--font-aile-govde); color: var(--color-metin-ikincil); margin-top: 4px; }
.kart-blog__etiket { font-weight: 600; color: var(--color-metin-vurgu); }
.kart-blog__ayrac { color: var(--color-sinir-guclu); }
.kart-blog__baslik { font-family: var(--font-aile-baslik); font-weight: 700; font-size: clamp(19px, 1.1rem + .3vw, 21px); line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kart-blog:hover .kart-blog__baslik { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.kart-blog__ozet { font-size: 15px; line-height: 22px; color: var(--color-metin-ikincil); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Büyük (öne çıkan): masaüstünde görsel solda %58 */
@media (min-width: 900px) {
  .kart-blog--buyuk { display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: var(--space-7); align-items: center; }
  .kart-blog--buyuk .kart-blog__kapak { grid-row: span 4; }
  .kart-blog--buyuk .kart-blog__baslik { font-size: var(--size-h2); line-height: var(--size-h2-satir); }
}
/* Yedek kapak (kapak dosyası olmayan yazı; ana sayfa ve blog listesi ortak): kum yüzey, kiremit etiket, büyük rakam; metin HTML'de */
.bl-kapak-tipo { container-type: inline-size; display: grid; grid-template-columns: auto auto; grid-template-rows: auto 1fr; justify-content: start; align-items: end; column-gap: 1.5cqw;
  width: 100%; aspect-ratio: 1839 / 800; padding: 5.5% 6.5% 4.5%; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-zemin-yuzey-2); }
.bl-kapak-tipo__etiket { grid-column: 1 / -1; align-self: start; font: 600 max(11px, 3.8cqw)/1.2 var(--font-aile-govde); letter-spacing: .06em; text-transform: uppercase; color: var(--color-metin-vurgu); }
.bl-kapak-tipo__rakam { font: 800 32cqw/.8 var(--font-aile-baslik); letter-spacing: -.04em; color: var(--color-metin-birincil); }
.bl-kapak-tipo__alt { padding-bottom: .6cqw; font: 700 7.5cqw/1 var(--font-aile-baslik); letter-spacing: -.02em; color: var(--color-metin-ikincil); }

/* --------------------------------------------------------------------------
   11. Karşılaştırma tablosu (gerçek <table>; dar ekranda kaydırma kutusu ya da sekmeler)
   -------------------------------------------------------------------------- */
.karsilastirma { display: flex; flex-direction: column; gap: var(--space-4); }
.karsilastirma__ust { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); }
.karsilastirma__kaydir { overflow-x: auto; border: 1px solid var(--color-sinir-ince); border-radius: var(--radius-md); background: var(--color-zemin-yuzey); box-shadow: var(--shadow-kart); }
.karsilastirma__tablo { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 22px; }
.karsilastirma__tablo th, .karsilastirma__tablo td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-sinir-ince); }
.karsilastirma__tablo tbody tr:last-child > * { border-bottom: 0; }
.karsilastirma__tablo tbody th { width: 40%; font-weight: 600; }
/* Sütun başı: üstten hizalı, her sütunda aynı yuvalar (üst etiket · ad · fiyat · not · ihtiyaç · düğme) → ad, fiyat ve düğme aynı çizgide */
.karsilastirma__tablo thead th { vertical-align: top; padding-top: 20px; padding-bottom: 16px; background: var(--color-zemin-yuzey); position: sticky; top: 0; z-index: 1; }
/* Yapışkan baş: kaydırma kutusu yapışkanlığı kutuya bağlar. ≥1024'te tablo sığar → kutu taşmayı kesmez, baş sayfaya yapışır.
   --kars-ust: yapışkan üst bilgi (73 px) + varsa bölüm çipleri (61 px). Sayfa CSS'i ayarlar. */
@media (min-width: 1024px) {
  .karsilastirma__kaydir { overflow: visible; }
  .karsilastirma__tablo { min-width: 0; }
  .karsilastirma__tablo thead th { top: var(--kars-ust, calc(var(--layout-baslik-yukseklik) + 1px)); box-shadow: 0 1px 0 0 var(--color-sinir-ince); }
  .karsilastirma__tablo thead th:first-child { border-top-left-radius: calc(var(--radius-md) - 1px); }
  .karsilastirma__tablo thead th:last-child { border-top-right-radius: calc(var(--radius-md) - 1px); }
}
.karsilastirma__sutun-isim { display: block; font: 600 var(--size-h4)/var(--size-h4-satir) var(--font-aile-govde); }
.karsilastirma__sutun-fiyat { display: block; margin-top: 4px; font: 800 22px/28px var(--font-aile-govde); letter-spacing: -.01em; }
.karsilastirma__sutun-not { display: block; min-height: 18px; font-size: 13px; line-height: 18px; color: var(--color-metin-ikincil); font-weight: 500; margin-bottom: 12px; }
/* "Bu paket" üst etiketi: boş yuva diğer sütunlarda da yer tutar (hiza bozulmaz) */
.karsilastirma__bu { display: block; min-height: 16px; margin-bottom: 8px; font: 600 13px/16px var(--font-aile-govde); letter-spacing: .06em; text-transform: uppercase; color: var(--color-metin-vurgu); }
/* "Seçili paket" durumu: bu paketin sütununda düğme yerine (satın alma tek yerden, fiyat kutusundan) */
.karsilastirma__secili { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font: 600 14px/18px var(--font-aile-govde); color: var(--color-metin-birincil); }
.karsilastirma__secili .ikon { width: 18px; height: 18px; color: var(--color-durum-basari-metin); }
/* Etkin ("bu paket") sütun: iz açık zemin + üstte 3 px turuncu çizgi; renk tek gösterge değil */
.karsilastirma__tablo .karsilastirma__etkin { background: var(--color-zemin-iz-acik); }
.karsilastirma__tablo thead .karsilastirma__etkin { box-shadow: inset 0 3px 0 0 var(--color-marka-turuncu); }
.karsilastirma__grup th { padding-top: 20px; padding-bottom: 8px; font: 600 13px/16px var(--font-aile-govde); letter-spacing: .06em; text-transform: uppercase; color: var(--color-metin-ikincil); background: var(--color-zemin-yuzey-2); width: auto; }
.hucre-var { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.hucre-var .ikon { width: 18px; height: 18px; color: var(--color-durum-basari-metin); }
.hucre-yok { color: var(--color-metin-ikincil); }
.karsilastirma__ortak { font-size: 15px; line-height: 22px; color: var(--color-metin-ikincil); }
.karsilastirma__ortak b { color: var(--color-metin-birincil); }
/* "Yalnız farkları göster" anahtarı açıkken ortak satırlar gizlenir (CSS :has) */
.karsilastirma:has(.anahtar__girdi:checked) .karsilastirma__ayni { display: none; }

/* Anahtar (switch): yerel checkbox, role="switch" */
.anahtar { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: 15px; line-height: 20px; font-weight: 500; }
.anahtar__girdi {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none;
  width: 40px; height: 24px; border-radius: var(--radius-tam); background: var(--color-zemin-yuzey);
  box-shadow: inset 0 0 0 1.5px var(--color-sinir-guclu); position: relative; cursor: pointer;
  transition: background-color var(--motion-orta), box-shadow var(--motion-orta);
}
.anahtar__girdi::after { content: ""; position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-sinir-guclu); transition: transform var(--motion-orta) var(--motion-egri-cikis), background-color var(--motion-orta); }
.anahtar__girdi:checked { background: var(--color-metin-birincil); box-shadow: none; }
.anahtar__girdi:checked::after { transform: translateX(16px); background: var(--color-metin-ters); }
.anahtar__girdi:focus-visible { outline: 3px solid var(--color-odak-acik); outline-offset: 2px; }
/* Kilitli açık (ör. zorunlu çerezler): değiştirilemez, ikincil mürekkep */
.anahtar__girdi:disabled { cursor: not-allowed; }
.anahtar__girdi:checked:disabled { background: var(--color-metin-ikincil); }

/* --------------------------------------------------------------------------
   12. SSS akordeonu (yerel details/summary; FAQPage içeriği DOM'da kalır)
   -------------------------------------------------------------------------- */
.sss { border-top: 1px solid var(--color-sinir-ince); }
.sss__oge { border-bottom: 1px solid var(--color-sinir-ince); }
.sss__soru {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 56px; padding-block: 18px; border-radius: var(--radius-xs);
  font: 600 var(--size-h4)/var(--size-h4-satir) var(--font-aile-govde);
}
.sss__soru:hover .sss__soru-metin { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.sss__ok { width: 20px; height: 20px; flex: none; transition: transform var(--motion-orta) var(--motion-egri-cikis); }
.sss__oge[open] > .sss__soru .sss__ok { transform: rotate(180deg); }
.sss__cevap { padding-bottom: var(--space-6); max-width: 68ch; color: var(--color-metin-ikincil); font-size: var(--size-govde); line-height: var(--size-govde-satir); }
.sss__cevap > * + * { margin-top: var(--space-3); }

/* --------------------------------------------------------------------------
   13. Form alanları (etiket üstte; 48 px alan; 16 px metin; maske + doğrulama her formda)
   -------------------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: var(--space-5); }
.form-izgara { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
@media (min-width: 640px) { .form-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-izgara > .form-alani--genis { grid-column: 1 / -1; } }
.form-notu { font-size: 14px; line-height: 20px; color: var(--color-metin-ikincil); }
/* Gönder satırı: solda KVKK notu, sağda birincil düğme; telefonda düğme tam genişlik (GeriAramaFormu, İletişim formu) */
.form-gonder { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-1); }
.form-gonder .form-notu { max-width: 36ch; }
@media (max-width: 639.98px) { .form-gonder .dugme { width: 100%; } }

.form-alani { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.form-alani__etiket { font: 600 15px/20px var(--font-aile-govde); color: var(--color-metin-birincil); }
.form-alani__istege { font-weight: 400; color: var(--color-metin-ikincil); }
.girdi {
  width: 100%; min-height: 48px; padding: 12px 14px;
  background: var(--color-zemin-yuzey); color: var(--color-metin-birincil);
  border: 1px solid var(--color-sinir-guclu); border-radius: var(--radius-sm);
  font: 400 16px/22px var(--font-aile-govde);
  transition: border-color var(--motion-hizli), box-shadow var(--motion-hizli);
}
.girdi::placeholder { color: var(--color-metin-ikincil); opacity: 1; }
.girdi:hover { border-color: var(--color-metin-birincil); }
.girdi:focus { outline: none; }
.girdi:focus-visible { border-color: var(--color-metin-birincil); outline: 3px solid var(--color-odak-acik); outline-offset: 1px; }
.girdi:disabled { background: var(--color-devre-disi-zemin); color: var(--color-devre-disi-metin); border-color: var(--color-sinir-ince); cursor: not-allowed; }
.girdi--alan { min-height: 120px; resize: vertical; }
.girdi--tel { letter-spacing: .02em; }
/* Seçim kutusu: kendi oku */
.secim { position: relative; }
.secim .girdi { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.secim__ok { position: absolute; right: 14px; top: 50%; translate: 0 -50%; width: 20px; height: 20px; pointer-events: none; }
/* Açılan liste: desteklenen tarayıcılarda (Chromium: appearance: base-select) yerel gri işletim sistemi listesi yerine tema listesi — beyaz yüzey, 1 px çerçeve,
   yuvarlak köşe, 44 px+ satırlar, seçili satır işaretli. Yerel <select> korunur (form, klavye, ekran okuyucu); dokunmatik cihazlarda yerel seçici açılır
   (yalnız ince imleçli cihazlarda uygulanır); desteklemeyen tarayıcıda hiçbir şey değişmez. Uzun listeler [data-secim-arama] ile (aramalı). */
@media (hover: hover) and (pointer: fine) {
  @supports (appearance: base-select) {
    .secim select.girdi:not(.ys__yerel), .secim select.girdi:not(.ys__yerel)::picker(select) { appearance: base-select; }
    .secim select.girdi:not(.ys__yerel) { display: flex; align-items: center; }
    .secim select.girdi:not(.ys__yerel)::picker-icon { display: none; }
    .secim select.girdi:not(.ys__yerel)::picker(select) {
      min-inline-size: anchor-size(width); max-block-size: min(340px, 55vh); margin-block: 6px; padding: 6px;
      background: var(--color-zemin-yuzey); border: 1px solid var(--color-sinir-guclu); border-radius: var(--radius-sm); box-shadow: var(--shadow-2);
    }
    .secim select.girdi:not(.ys__yerel) option {
      display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; border-radius: var(--radius-xs);
      font: 400 16px/22px var(--font-aile-govde); color: var(--color-metin-birincil); cursor: pointer;
    }
    .secim select.girdi:not(.ys__yerel) option::checkmark { display: none; }
    .secim select.girdi:not(.ys__yerel) option:hover, .secim select.girdi:not(.ys__yerel) option:focus-visible { background: var(--color-zemin-bant); outline: none; }
    .secim select.girdi:not(.ys__yerel) option:checked { background: var(--color-zemin-iz-acik); font-weight: 600; }
    .secim select.girdi:not(.ys__yerel) option:disabled { color: var(--color-devre-disi-metin); cursor: not-allowed; }
  }
}
/* Aramalı seçim kutusu (select[data-secim-arama] → yt.js): yerel select görünmez kalır; tema düğmesi + beyaz açılır liste (gri işletim sistemi listesi yerine) */
.ys { position: relative; }
.ys__yerel { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; }
.ys__dugme { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; text-align: left; cursor: pointer; padding-right: 14px; }
.ys__deger { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ys--secili .ys__dugme { border-color: var(--color-metin-birincil); }
.ys__ok { flex: none; width: 20px; height: 20px; transition: transform var(--motion-hizli); }
.ys--acik .ys__ok { transform: rotate(180deg); }
.ys__panel { position: absolute; z-index: 400; left: 0; top: calc(100% + 6px); min-width: 100%; width: max-content; max-width: min(420px, calc(100vw - 2 * var(--layout-kenar))); background: var(--color-zemin-yuzey); border: 1px solid var(--color-sinir-guclu); border-radius: var(--radius-md); box-shadow: 0 12px 32px -8px rgba(26, 31, 43, .22); overflow: hidden; }
.ys--yukari .ys__panel { top: auto; bottom: calc(100% + 6px); }
.ys__ara { padding: 8px; border-bottom: 1px solid var(--color-sinir-ince); }
.ys__arama { width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid var(--color-sinir-guclu); border-radius: var(--radius-sm); background: var(--color-zemin-yuzey); font: inherit; font-size: 15px; color: var(--color-metin-birincil); }
.ys__arama:focus { outline: none; }
.ys__arama:focus-visible { border-color: var(--color-metin-birincil); outline: 3px solid var(--color-odak-acik); outline-offset: 1px; }
.ys__liste { position: relative; max-height: 296px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; overscroll-behavior: contain; }
.ys__oge { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 44px; padding: 8px 12px; border-radius: var(--radius-sm); font: 500 16px/22px var(--font-aile-govde); color: var(--color-metin-birincil); cursor: pointer; }
.ys__oge[hidden] { display: none; }
.ys__oge--aktif { background: var(--color-zemin-bant); }
.ys__oge[aria-selected="true"] { font-weight: 700; background: var(--color-zemin-iz-acik); }
.ys__oge[aria-selected="true"].ys__oge--aktif { background: var(--color-zemin-iz); }
.ys__tik { flex: none; width: 18px; height: 18px; color: var(--color-metin-vurgu); visibility: hidden; }
.ys__oge[aria-selected="true"] .ys__tik { visibility: visible; }
.ys__bos { padding: 14px 16px; font-size: 15px; color: var(--color-metin-ikincil); }
@media (prefers-reduced-motion: reduce) { .ys__ok { transition: none; } }
/* Yardım ve hata metni (aria-describedby ile bağlı) */
.form-alani__yardim { font-size: 14px; line-height: 20px; color: var(--color-metin-ikincil); }
.form-alani__hata { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--color-durum-hata-metin); }
.form-alani__hata .ikon { width: 16px; height: 16px; margin-top: 2px; stroke-width: 1.75; }
.form-alani--hata .girdi, .girdi[aria-invalid="true"] { border: 2px solid var(--color-durum-hata-metin); padding: 11px 13px; }
.form-alani--basari .girdi { border-color: var(--color-durum-basari-metin); }

/* Onay kutusu ve radyo: YEREL girdi, 22 px, görünür; satır ≥ 44 px, etiketin tamamı tıklanır */
.onay { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding-block: 10px; cursor: pointer; font-size: 15px; line-height: 22px; }
.onay__girdi { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--color-metin-birincil); cursor: pointer; }
.onay__metin { padding-top: 0; }
.onay__metin a { color: var(--color-metin-vurgu); text-decoration: underline; text-underline-offset: 3px; }

/* Seçim kartı (ödeme yöntemi): radyo + başlık + açıklama; seçilide 2 px mürekkep + iz açık zemin */
.secim-karti { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--radius-md); background: var(--color-zemin-yuzey); box-shadow: inset 0 0 0 1px var(--color-sinir-guclu), var(--shadow-kart); cursor: pointer; transition: box-shadow var(--motion-hizli), background-color var(--motion-hizli); }
.secim-karti:hover { box-shadow: inset 0 0 0 1.5px var(--color-metin-birincil); }
.secim-karti:has(input:checked) { box-shadow: inset 0 0 0 2px var(--color-metin-birincil); background: var(--color-zemin-iz-acik); }
.secim-karti:has(input:focus-visible) { outline: 3px solid var(--color-odak-acik); outline-offset: 2px; }
.secim-karti__girdi { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--color-metin-birincil); }
.secim-karti__govde { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.secim-karti__baslik { font: 600 17px/24px var(--font-aile-govde); }
.secim-karti__metin { font-size: 14px; line-height: 20px; color: var(--color-metin-ikincil); }

/* Grup başlığı ("Öğrenci bilgileri" / "İletişim (veli)") */
.form-grup { display: flex; flex-direction: column; gap: var(--space-5); }
.form-grup + .form-grup { margin-top: var(--space-7); }
.form-grup__baslik { padding: 0; margin-bottom: var(--space-1); font: 600 13px/16px var(--font-aile-govde); letter-spacing: .06em; text-transform: uppercase; color: var(--color-metin-ikincil); }

/* Formun üstündeki hata özeti (role="alert") */
.form-ozet-hata { padding: 16px 18px; border-radius: var(--radius-sm); background: var(--color-durum-hata-zemin); box-shadow: inset 0 0 0 1px var(--color-durum-hata-sinir); color: var(--color-durum-hata-metin); font-size: 15px; line-height: 22px; }
.form-ozet-hata__baslik { font-weight: 600; display: flex; gap: 8px; align-items: center; }
.form-ozet-hata ul { margin-top: 6px; padding-left: 28px; list-style: disc; }
.form-ozet-hata a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Satır içi arama alanı (404, SSS, menü) */
.arama-alani { display: flex; gap: var(--space-2); }
.arama-alani__kutu { position: relative; flex: 1; min-width: 0; }
.arama-alani__kutu .ikon { position: absolute; left: 14px; top: 50%; translate: 0 -50%; color: var(--color-metin-ikincil); pointer-events: none; }
.arama-alani__kutu .girdi { padding-left: 44px; }

/* --------------------------------------------------------------------------
   14. Adım göstergesi (ödeme): Sepet · Hesap · Ödeme
   -------------------------------------------------------------------------- */
.adimlar { display: flex; align-items: center; gap: 0; counter-reset: adim; }
.adimlar__oge { display: flex; align-items: center; gap: 10px; font: 500 15px/20px var(--font-aile-govde); color: var(--color-metin-ikincil); white-space: nowrap; }
.adimlar__oge + .adimlar__oge::before { content: ""; width: clamp(24px, 4vw, 56px); height: 1px; background: var(--color-sinir-guclu); margin-inline: 12px; }
.adimlar__isaret { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--color-sinir-guclu); font: 600 14px/1 var(--font-aile-govde); font-variant-numeric: tabular-nums; color: var(--color-metin-ikincil); }
.adimlar__oge--tamam { color: var(--color-metin-birincil); }
.adimlar__oge--tamam .adimlar__isaret { background: var(--color-metin-birincil); color: var(--color-metin-ters); box-shadow: none; }
.adimlar__oge--tamam .adimlar__isaret .ikon { width: 16px; height: 16px; stroke-width: 2.25; }
.adimlar__oge--etkin { color: var(--color-metin-birincil); font-weight: 600; }
.adimlar__oge--etkin .adimlar__isaret { box-shadow: none; background: transparent; }
.adimlar__oge--etkin .iz-isaret { width: 22px; height: 22px; }
/* Mobil: "Adım 2/3 · Hesap" + 4 px mürekkep ilerleme çizgisi */
.adimlar-mobil { display: flex; flex-direction: column; gap: 8px; }
.adimlar-mobil__metin { font: 600 15px/20px var(--font-aile-govde); }
.adimlar-mobil__metin span { color: var(--color-metin-ikincil); font-weight: 500; }
.adimlar-mobil__cizgi { height: 4px; border-radius: var(--radius-tam); background: var(--color-sinir-ince); overflow: hidden; }
.adimlar-mobil__cizgi > span { display: block; height: 100%; width: var(--ilerleme, 33%); background: var(--color-metin-birincil); border-radius: inherit; }

/* Numaralı adım listesi (öğrenci girişi, kamp "nasıl işler") */
.adim-listesi { display: flex; flex-direction: column; gap: var(--space-5); counter-reset: adim-listesi; }
.adim-listesi__oge { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 14px; counter-increment: adim-listesi; }
.adim-listesi__oge::before { content: counter(adim-listesi); grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--color-metin-birincil); font: 700 16px/1 var(--font-aile-baslik); }
.adim-listesi__baslik { font: 600 17px/24px var(--font-aile-govde); padding-top: 6px; }
.adim-listesi__metin { font-size: 15px; line-height: 22px; color: var(--color-metin-ikincil); }

/* --------------------------------------------------------------------------
   15. Bildirim ve uyarı (sol kalın renkli kenar YOK) · kısa bildirim · boş durum
   -------------------------------------------------------------------------- */
.bildirim { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--radius-sm); font-size: 15px; line-height: 22px; }
.bildirim__ikon { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.bildirim__govde { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bildirim__baslik { font-weight: 600; }
.bildirim__metin { color: inherit; }
.bildirim__metin a { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.bildirim__kapat { margin: -10px -10px -10px 0; color: inherit; }
.bildirim--basari { background: var(--color-durum-basari-zemin); box-shadow: inset 0 0 0 1px var(--color-durum-basari-sinir); color: var(--color-durum-basari-metin); }
.bildirim--bilgi { background: var(--color-durum-bilgi-zemin); box-shadow: inset 0 0 0 1px var(--color-durum-bilgi-sinir); color: var(--color-durum-bilgi-metin); }
.bildirim--dikkat { background: var(--color-durum-uyari-zemin); box-shadow: inset 0 0 0 1px var(--color-durum-uyari-sinir); color: var(--color-durum-uyari-metin); }
.bildirim--hata { background: var(--color-durum-hata-zemin); box-shadow: inset 0 0 0 1px var(--color-durum-hata-sinir); color: var(--color-durum-hata-metin); }
/* Nötr bilgi notu (hub-not, "Neden Radikal UZEM" kutusu): yüzey + ince sınır */
.bildirim--not { background: var(--color-zemin-yuzey); box-shadow: inset 0 0 0 1px var(--color-sinir-ince); color: var(--color-metin-birincil); }
.bildirim--not .bildirim__ikon { color: var(--color-metin-ikincil); }

/* Kısa bildirim (toast): alt ortada mürekkep zemin, 4 sn, role="status" */
.kisa-bildirim { display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--color-metin-birincil); color: var(--color-metin-ters); font: 500 15px/20px var(--font-aile-govde); box-shadow: var(--shadow-2); }
.kisa-bildirim .ikon { color: var(--color-odak-koyu); }

/* Boş durum: başlık + tek cümle + birincil eylem + kısa yollar; maskot/çizim yok */
.bos-durum { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-8) 0; max-width: 560px; }
.bos-durum--orta { align-items: center; text-align: center; margin-inline: auto; }
.bos-durum__ikon { width: 48px; height: 48px; stroke-width: 1.5; color: var(--color-metin-ikincil); margin-bottom: var(--space-2); }
.bos-durum__baslik { font: 700 var(--size-h3)/var(--size-h3-satir) var(--font-aile-baslik); letter-spacing: -.01em; }
.bos-durum__metin { color: var(--color-metin-ikincil); }
.bos-durum__eylemler { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-3); }

/* --------------------------------------------------------------------------
   16. Sekmeler (radyo + etiket + :checked; JS yok). En çok 6 sekme.
   Yapı: radyolar → .sekmeler__liste (etiketler) → .sekmeler__paneller (paneller), aynı sırayla.
   -------------------------------------------------------------------------- */
.sekmeler__radyo { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sekmeler__liste { display: flex; gap: 4px; border-bottom: 1px solid var(--color-sinir-ince); overflow-x: auto; scrollbar-width: none; }
.sekmeler__etiket {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; flex: none;
  font: 500 16px/20px var(--font-aile-govde); color: var(--color-metin-ikincil); cursor: pointer; white-space: nowrap; border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  transition: color var(--motion-hizli);
}
.sekmeler__etiket:hover { color: var(--color-metin-birincil); }
.sekmeler__etiket::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: transparent; }
.sekmeler__panel { display: none; padding-top: var(--space-6); }
.sekmeler--bolumlu .sekmeler__liste { border: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 3px; gap: 3px; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--color-sinir-guclu); background: var(--color-zemin-yuzey); }
.sekmeler--bolumlu .sekmeler__etiket { justify-content: center; min-height: 44px; border-radius: 6px; font-weight: 600; font-size: 15px; }
.sekmeler--bolumlu .sekmeler__etiket::after { display: none; }
/* Seçili sekme ve panel eşlemesi (1–6) */
.sekmeler__radyo:nth-of-type(1):checked ~ .sekmeler__liste > .sekmeler__etiket:nth-child(1),
.sekmeler__radyo:nth-of-type(2):checked ~ .sekmeler__liste > .sekmeler__etiket:nth-child(2),
.sekmeler__radyo:nth-of-type(3):checked ~ .sekmeler__liste > .sekmeler__etiket:nth-child(3),
.sekmeler__radyo:nth-of-type(4):checked ~ .sekmeler__liste > .sekmeler__etiket:nth-child(4),
.sekmeler__radyo:nth-of-type(5):checked ~ .sekmeler__liste > .sekmeler__etiket:nth-child(5),
.sekmeler__radyo:nth-of-type(6):checked ~ .sekmeler__liste > .sekmeler__etiket:nth-child(6) { color: var(--color-metin-birincil); font-weight: 600; }
.sekmeler__radyo:nth-of-type(1):checked ~ .sekmeler__liste > .sekmeler__etiket:nth-child(1)::after,
.sekmeler__radyo:nth-of-type(2):checked ~ .sekmeler__liste > .sekmeler__etiket:nth-child(2)::after,
.sekmeler__radyo:nth-of-type(3):checked ~ .sekmeler__liste > .sekmeler__etiket:nth-child(3)::after,
.sekmeler__radyo:nth-of-type(4):checked ~ .sekmeler__liste > .sekmeler__etiket:nth-child(4)::after,
.sekmeler__radyo:nth-of-type(5):checked ~ .sekmeler__liste > .sekmeler__etiket:nth-child(5)::after,
.sekmeler__radyo:nth-of-type(6):checked ~ .sekmeler__liste > .sekmeler__etiket:nth-child(6)::after { background: var(--color-metin-vurgu); }
.sekmeler--bolumlu .sekmeler__radyo:nth-of-type(1):checked ~ .sekmeler__liste > .sekmeler__etiket:nth-child(1),
.sekmeler--bolumlu .sekmeler__radyo:nth-of-type(2):checked ~ .sekmeler__liste > .sekmeler__etiket:nth-child(2),
.sekmeler--bolumlu .sekmeler__radyo:nth-of-type(3):checked ~ .sekmeler__liste > .sekmeler__etiket:nth-child(3),
.sekmeler--bolumlu .sekmeler__radyo:nth-of-type(4):checked ~ .sekmeler__liste > .sekmeler__etiket:nth-child(4),
.sekmeler--bolumlu .sekmeler__radyo:nth-of-type(5):checked ~ .sekmeler__liste > .sekmeler__etiket:nth-child(5),
.sekmeler--bolumlu .sekmeler__radyo:nth-of-type(6):checked ~ .sekmeler__liste > .sekmeler__etiket:nth-child(6) { background: var(--color-metin-birincil); color: var(--color-metin-ters); }
.sekmeler__radyo:nth-of-type(1):checked ~ .sekmeler__paneller > .sekmeler__panel:nth-child(1),
.sekmeler__radyo:nth-of-type(2):checked ~ .sekmeler__paneller > .sekmeler__panel:nth-child(2),
.sekmeler__radyo:nth-of-type(3):checked ~ .sekmeler__paneller > .sekmeler__panel:nth-child(3),
.sekmeler__radyo:nth-of-type(4):checked ~ .sekmeler__paneller > .sekmeler__panel:nth-child(4),
.sekmeler__radyo:nth-of-type(5):checked ~ .sekmeler__paneller > .sekmeler__panel:nth-child(5),
.sekmeler__radyo:nth-of-type(6):checked ~ .sekmeler__paneller > .sekmeler__panel:nth-child(6) { display: block; }
/* Klavye odağı radyodan etikete yansır */
.sekmeler__radyo:nth-of-type(1):focus-visible ~ .sekmeler__liste > .sekmeler__etiket:nth-child(1),
.sekmeler__radyo:nth-of-type(2):focus-visible ~ .sekmeler__liste > .sekmeler__etiket:nth-child(2),
.sekmeler__radyo:nth-of-type(3):focus-visible ~ .sekmeler__liste > .sekmeler__etiket:nth-child(3),
.sekmeler__radyo:nth-of-type(4):focus-visible ~ .sekmeler__liste > .sekmeler__etiket:nth-child(4),
.sekmeler__radyo:nth-of-type(5):focus-visible ~ .sekmeler__liste > .sekmeler__etiket:nth-child(5),
.sekmeler__radyo:nth-of-type(6):focus-visible ~ .sekmeler__liste > .sekmeler__etiket:nth-child(6) { outline: 3px solid var(--color-odak-acik); outline-offset: -3px; }
/* Bölümlü sekmede seçili etiket mürekkep zeminli: halka içeride kalırsa kiremit/mürekkep 2,78:1 → halka dışarı alınır */
.sekmeler--bolumlu .sekmeler__liste { overflow: visible; }
.sekmeler--bolumlu .sekmeler__radyo:focus-visible ~ .sekmeler__liste > .sekmeler__etiket { outline-offset: 2px !important; }

/* --------------------------------------------------------------------------
   17. Üst bilgi (header) — revizyon 3: üst iletişim şeridi (36 px, önceki sürümdeki gibi) + TEK ana satır
   (72 px masaüstü / 60 px mobil). Kaydırınca şerit yukarı kayar, ana satır yapışık kalır. Şerit <1024'te gizli:
   telefon ve WhatsApp 0 (553) 242 83 10 orada mobil menüde ve alt bilgide.
   Masaüstü (≥1024): logo · 6 menü öğesi (Sınıflar ▾ · LGS ▾ · YKS ▾ · Paketler ▾ · Başarılar · Kurumsal ▾) · ara · Öğrenci girişi · sepet.
   Açılır paneller dar ve tek sütunlu (.menu-panel), :hover (150 ms gecikme) + :focus-within. Fiyat YALNIZ Paketler panelinde
   (türe göre tek "’den" satırı). Blog, Kurumsal panelinde. Mobil (<1024): logo · sepet · menü (details çekmece).
   -------------------------------------------------------------------------- */
.ust-bilgi { position: sticky; top: calc(-1 * var(--layout-serit-yukseklik)); z-index: 100; background: var(--color-zemin-yuzey); }
/* Çekmece/arama açıkken üst bilgi alt çubuk ve yardım düğmesinin de üstüne çıkar (z: çekmece 200) */
.ust-bilgi:has(.mobil-menu[open], .arama[open]) { z-index: 200; }
/* Duyuru şeridi (panel › Site İçeriği › Duyuru Şeridi): üst bilginin ÜSTÜNDE akışta durur (yapışmaz, kaydırınca gider; yapışan satır değişmez).
   Sunucuda çizilir ve yüksekliği içerikten gelir: yer kayması yok. Metin ve bağlantı tek paragrafta (satır içi bağlantı), telefonda en çok iki üç satır. */
.duyuru-seridi { background: var(--color-zemin-iz); border-bottom: 1px solid var(--color-marka-kalem); color: var(--color-metin-birincil); }
.duyuru-seridi__ic { padding-block: 10px; text-align: center; }
.duyuru-seridi__metin { margin: 0; font: 500 15px/22px var(--font-aile-govde); text-wrap: balance; }
.duyuru-seridi__baglanti { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-weight: 700; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; }
.duyuru-seridi__baglanti:hover { text-decoration-thickness: 2px; }
.duyuru-seridi__baglanti .ikon { width: 16px; height: 16px; flex: none; }
@media (max-width: 639.98px) { .duyuru-seridi__ic { padding-block: 9px; } .duyuru-seridi__metin { font-size: 14px; line-height: 20px; } }
/* Üst iletişim şeridi (önceki sürümden): sol kurum bağlantısı · sağ telefon | WhatsApp | çalışma saatleri | Siparişlerim */
.ust-bilgi__serit { height: var(--layout-serit-yukseklik); background: var(--color-zemin-kagit); border-bottom: 1px solid var(--color-sinir-ince); font-size: 13px; line-height: 18px; color: var(--color-metin-ikincil); }
.ust-bilgi__serit-ic { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.ust-bilgi__serit a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.ust-bilgi__serit a:hover { color: var(--color-metin-birincil); text-decoration: underline; text-underline-offset: 3px; }
.ust-bilgi__serit .ikon { width: 14px; height: 14px; stroke-width: 1.75; }
.ust-bilgi__iletisim { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.ust-bilgi__iletisim > li { display: inline-flex; align-items: center; }
.ust-bilgi__iletisim > li + li::before { content: "" / ""; width: 1px; height: 14px; background: var(--color-sinir-ince); margin-inline: 14px; }
.ust-bilgi__iletisim strong { color: var(--color-metin-birincil); font-weight: 600; }
.ust-bilgi__ana { position: relative; background: var(--color-zemin-yuzey); border-bottom: 1px solid var(--color-sinir-ince); }
.ust-bilgi__ana-ic { height: var(--layout-baslik-yukseklik); display: flex; align-items: stretch; gap: var(--space-6); }
/* Logo: gerçek vektör (logo-yatay-acik-zemin.svg, oran 224,65:40,67). "Online Eğitim Platformu" satırı okunsun diye
   yükseklik 44 px (≥1366) · 40 px (1024–1365) · 36 px (<1024). Genişlik verilir, yükseklik orandan gelir. */
.ust-bilgi__logo { display: flex; align-items: center; flex: none; padding-block: 4px; }
.ust-bilgi__logo img { width: 243px; height: auto; max-width: 100%; }
@media (max-width: 1365.98px) { .ust-bilgi__logo img { width: 221px; } }
.ust-bilgi__araclar { flex: none; display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }

/* Ana menü: 6 öğe, aralarında eşit nefes; etkin öğe 600 + 2 px kiremit alt çizgi */
.ana-menu { flex: 1 1 auto; display: flex; align-items: stretch; justify-content: center; min-width: 0; }
.ana-menu__liste { display: flex; align-items: stretch; }
.ana-menu__oge { position: relative; display: flex; align-items: stretch; }
.ana-menu__tetik {
  display: inline-flex; align-items: center; gap: 4px; padding: 0 12px; border: 0; background: none;
  font: 500 16px/20px var(--font-aile-govde); color: var(--color-metin-birincil); text-decoration: none; white-space: nowrap; cursor: pointer;
  text-decoration-line: none; text-underline-offset: 8px; text-decoration-thickness: 2px; text-decoration-color: var(--color-metin-vurgu);
}
.ana-menu__tetik .ikon { width: 16px; height: 16px; stroke-width: 1.75; color: var(--color-metin-ikincil); transition: transform var(--motion-orta) var(--motion-egri-cikis); }
.ana-menu__tetik:focus-visible { outline-offset: -6px; border-radius: var(--radius-sm); }
.ana-menu__oge:hover > .ana-menu__tetik,
.ana-menu__oge:focus-within > .ana-menu__tetik { text-decoration-line: underline; }
.ana-menu__oge:hover > .ana-menu__tetik .ikon,
.ana-menu__oge:focus-within > .ana-menu__tetik .ikon { transform: rotate(180deg); }
.ana-menu__tetik[aria-current], .ana-menu__tetik--etkin { font-weight: 600; text-decoration-line: underline; }

/* Açılır panel: dar, tek sütun, beyaz yüzey + shadow.2; alt köşeler radius.md. Satır = ad + tek satır açıklama (+ yalnız Paketler'de fiyat). */
.menu-panel {
  position: absolute; top: 100%; left: 0; z-index: 110;
  width: max-content; min-width: 300px; max-width: min(440px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 2px; padding: 8px;
  background: var(--color-zemin-yuzey); border: 1px solid var(--color-sinir-ince); border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: var(--shadow-2);
  opacity: 0; visibility: hidden; pointer-events: none; translate: 0 -4px;
  transition: opacity var(--motion-orta) var(--motion-egri-cikis), translate var(--motion-orta) var(--motion-egri-cikis), visibility 0s linear var(--motion-orta);
}
.menu-panel--sag { left: auto; right: 0; }
.menu-panel--dar { min-width: 232px; }
.ana-menu__oge--acilir:hover > .menu-panel,
.hesap-kutusu:hover > .menu-panel { opacity: 1; visibility: visible; pointer-events: auto; translate: 0 0; transition-delay: 150ms, 150ms, 0s; }
.ana-menu__oge--acilir:focus-within > .menu-panel,
.hesap-kutusu:focus-within > .menu-panel { opacity: 1; visibility: visible; pointer-events: auto; translate: 0 0; transition-delay: 0s; }
.menu-panel__satir {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px;
  min-height: 52px; padding: 8px 12px; border-radius: var(--radius-sm); text-decoration: none; color: inherit;
  transition: background-color var(--motion-hizli);
}
.menu-panel__satir--ikonlu { grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: 12px; }
.menu-panel__satir .ikon { color: var(--color-metin-ikincil); }
.menu-panel__satir--sik { min-height: 44px; padding-block: 6px; }
.menu-panel__satir:hover { background: var(--color-zemin-yuzey-2); }
.menu-panel__satir:hover .menu-panel__isim { text-decoration: underline; text-underline-offset: 3px; }
.menu-panel__metin { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.menu-panel__isim { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 600 16px/22px var(--font-aile-govde); }
.menu-panel__satir--sik .menu-panel__isim { font-weight: 500; }
.menu-panel__aciklama { font: 400 14px/20px var(--font-aile-govde); color: var(--color-metin-ikincil); }
.menu-panel__fiyat { font: 600 14px/20px var(--font-aile-govde); color: var(--color-metin-ikincil); white-space: nowrap; font-variant-numeric: tabular-nums; }
.menu-panel__satir[aria-current="page"] .menu-panel__isim { text-decoration: underline 2px var(--color-metin-vurgu); text-underline-offset: 6px; }
.menu-panel__ayirici { height: 1px; background: var(--color-sinir-ince); margin: 6px 4px; border: 0; }
.menu-panel__alt { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; padding: 2px 12px; font-size: 14px; line-height: 20px; color: var(--color-metin-ikincil); }
.menu-panel__alt a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.menu-panel__alt .ikon { width: 16px; height: 16px; stroke-width: 1.5; }
.menu-panel__not { padding: 4px 12px 6px; font-size: 13px; line-height: 18px; color: var(--color-metin-ikincil); }
/* Sınıflar paneli: 4 × 2 sınıf karosu (ana sayfadaki seçiciyle aynı dil) */
.menu-panel--siniflar { display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: 4px 24px; align-items: start; width: 680px; max-width: calc(100vw - 32px); padding: 18px 18px 8px; }
/* Sınıflar paneli: solda 5–12 karoları (4×2), sağda imleç/odak altındaki sınıfın türleri (yt.js [data-sinif-karo]) */
.menu-panel__karolar--hepsi { align-self: start; }
.menu-panel__detaylar { min-width: 0; padding-left: 24px; border-left: 1px solid var(--color-sinir-ince); min-height: 208px; }
.menu-panel__sinif-detay { display: flex; flex-direction: column; gap: 2px; }
.menu-panel__sinif-detay[hidden] { display: none; }
.menu-panel__sinif-detay .menu-panel__grup-isim { margin: 0 0 6px 12px; }
.menu-panel__sinif-tumu { align-self: flex-start; display: inline-flex; align-items: center; min-height: 40px; margin: 4px 0 0 12px; font-size: 14px; }
.menu-panel--siniflar > .menu-panel__alt { grid-column: 1 / -1; }
.sinif-karo--secili { box-shadow: inset 0 0 0 1.5px var(--color-metin-birincil); background: var(--color-zemin-iz-acik); }
.menu-panel__grup { display: flex; flex-direction: column; gap: 8px; }
.menu-panel__grup-isim { font: 600 13px/16px var(--font-aile-govde); letter-spacing: .06em; text-transform: uppercase; color: var(--color-metin-ikincil); }
.menu-panel__karolar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.menu-panel--siniflar .menu-panel__alt { padding-inline: 0; border-top: 1px solid var(--color-sinir-ince); padding-top: 4px; }
/* Hesap paneli (Öğrenci girişi) */
.menu-panel--hesap { min-width: 280px; padding: 12px; }
.menu-panel--hesap > .dugme { margin-bottom: 6px; }

/* Öğrenci girişi: ikincil sm düğme (≥1200 metinli, 1024–1199 yalnız ikon); üzerine gelince hesap paneli */
.hesap-kutusu { position: relative; display: flex; align-items: center; height: 100%; }
.hesap-kutusu > .dugme[aria-current="page"] { background: var(--color-zemin-yuzey-2); box-shadow: inset 0 0 0 2px var(--color-metin-birincil); }
/* 1024–1199: menü sığsın diye "Öğrenci girişi" yalnız ikon ve menü okları gizli (paneller yine :hover/:focus-within ile açılır) */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .ust-bilgi__giris { width: 44px; padding: 0; }
  .ust-bilgi__giris-metin { display: none; }
  .ana-menu__tetik { padding: 0 9px; }
  .ana-menu__tetik .ikon { display: none; }
}
/* Sepet: yalnız ikon (44 × 44; adı aria-label'da: "Sepet, boş" / "Sepet, 1 ürün"); menüye yer açar */
.sepet-dugmesi { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; padding: 0; border-radius: var(--radius-sm); text-decoration: none; font: 500 16px/20px var(--font-aile-govde); position: relative; }
.sepet-dugmesi__metin { display: none; }
.sepet-dugmesi:hover { background: var(--color-zemin-yuzey-2); }
.sepet-dugmesi__ikon { position: relative; display: inline-grid; place-items: center; width: 28px; height: 28px; }
.sepet-dugmesi__ikon .ikon { width: 22px; height: 22px; }
.sepet-dugmesi .ikon-dugme__sayac { top: -6px; right: -9px; }

/* Arama paneli (details): ana şeridin altında tam genişlik */
.arama { display: flex; align-items: center; }
.arama > summary { list-style: none; }
.arama__kapat-ikon { display: none; }
.arama[open] > summary .arama__ac-ikon { display: none; }
.arama[open] > summary .arama__kapat-ikon { display: block; }
.arama[open] > summary { background: var(--color-zemin-yuzey-2); }
.arama__panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 105; background: var(--color-zemin-yuzey); border-bottom: 1px solid var(--color-sinir-ince); box-shadow: var(--shadow-2); padding-block: var(--space-6) var(--space-7); }
.arama__form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 760px; }
.arama__oneriler { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.arama__oneriler-baslik { font-size: 14px; color: var(--color-metin-ikincil); margin-right: 4px; }

/* Mobil menü (details): summary = menü düğmesi. Çekmece: ara · sınıfını seç · LGS / YKS / Paketler / Kurumsal · Başarılar · Hesabım · Bize ulaşın */
.mobil-menu { display: none; }
.mobil-menu > summary .mobil-menu__kapat-ikon { display: none; }
.mobil-menu[open] > summary .mobil-menu__ac-ikon { display: none; }
.mobil-menu[open] > summary .mobil-menu__kapat-ikon { display: block; }
.mobil-menu[open] > summary { background: var(--color-zemin-yuzey-2); }
.mobil-menu__panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 105;
  background: var(--color-zemin-yuzey); border-top: 1px solid var(--color-sinir-ince); box-shadow: var(--shadow-3);
  max-height: calc(100vh - 60px); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-5) var(--layout-kenar) var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-6);
}
.mobil-menu__panel--statik { position: static; max-height: none; box-shadow: var(--shadow-kart); border: 1px solid var(--color-sinir-ince); border-radius: var(--radius-md); }
.mobil-menu__grup-baslik { font: 600 13px/16px var(--font-aile-govde); letter-spacing: .06em; text-transform: uppercase; color: var(--color-metin-ikincil); margin-bottom: var(--space-3); }
.mobil-menu__siniflar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.mobil-menu__liste { border-top: 1px solid var(--color-sinir-ince); }
.mobil-menu__liste > li, .mobil-menu__liste > details { border-bottom: 1px solid var(--color-sinir-ince); }
.mobil-menu__satir { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; font: 500 17px/24px var(--font-aile-govde); text-decoration: none; color: inherit; }
.mobil-menu__satir .ikon { width: 20px; height: 20px; color: var(--color-metin-ikincil); transition: transform var(--motion-orta) var(--motion-egri-cikis); }
.mobil-menu__liste details[open] > summary .ikon { transform: rotate(180deg); }
.mobil-menu__alt { display: flex; flex-direction: column; padding: 0 0 12px 12px; }
.mobil-menu__alt a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font: 400 16px/22px var(--font-aile-govde); text-decoration: none; color: inherit; border-left: 1px solid var(--color-sinir-ince); padding-left: 16px; }
.mobil-menu__alt a span { font-size: 14px; color: var(--color-metin-ikincil); white-space: nowrap; }
.mobil-menu__alt .mobil-menu__tumu { font-weight: 600; }
.mobil-menu__alt a[aria-current="page"], .mobil-menu__satir[aria-current="page"] { font-weight: 600; text-decoration: underline 2px var(--color-metin-vurgu); text-underline-offset: 6px; }
.mobil-menu__iletisim { display: flex; flex-direction: column; gap: var(--space-3); }
.mobil-menu__saat { font-size: 14px; line-height: 20px; color: var(--color-metin-ikincil); }
/* Sınıf karosu (hero, mobil menü, 404, boş sepet): sayı Schibsted 700 + alt satır 13 px */
.sinif-secici { display: flex; flex-direction: column; gap: var(--space-3); }
.sinif-secici__gruplar { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 640px) { .sinif-secici__gruplar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); } }
.sinif-secici__grup { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sinif-secici__grup-isim { font: 600 13px/16px var(--font-aile-govde); letter-spacing: .06em; text-transform: uppercase; color: var(--color-metin-ikincil); }
.sinif-secici__karolar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.sinif-karo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 72px; padding: 8px 4px; border-radius: var(--radius-sm);
  background: var(--color-zemin-yuzey); box-shadow: inset 0 0 0 1px var(--color-sinir-ince), var(--shadow-kart);
  text-decoration: none; color: var(--color-metin-birincil); text-align: center;
  transition: box-shadow var(--motion-hizli), transform var(--motion-hizli);
}
.sinif-karo__rakam { font: 700 28px/30px var(--font-aile-baslik); letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.sinif-karo__alt { font: 500 13px/16px var(--font-aile-govde); color: var(--color-metin-ikincil); white-space: nowrap; }
.sinif-karo:hover { box-shadow: inset 0 0 0 1.5px var(--color-metin-birincil), var(--shadow-iz-kucuk); transform: translate(-1px, -1px); }
.sinif-karo:active { transform: none; box-shadow: inset 0 0 0 1.5px var(--color-metin-birincil); }
.sinif-karo--secili, .sinif-karo[aria-current] { box-shadow: inset 0 0 0 1.5px var(--color-metin-birincil), var(--shadow-iz-kucuk); }
.sinif-karo--kucuk { min-height: 56px; }
.sinif-karo--kucuk .sinif-karo__rakam { font-size: 22px; line-height: 24px; }
/* Mini karo: yalnız rakam, 44×44 (hub kartı, sınıf gezgini) */
.sinif-karo--mini { min-height: 44px; width: 44px; padding: 0; }
.sinif-karo--mini .sinif-karo__rakam { font-size: 17px; line-height: 20px; }
.sinif-secici__kisayol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; font-size: 15px; line-height: 22px; color: var(--color-metin-ikincil); }
.sinif-secici__kisayol a { display: inline-flex; align-items: center; min-height: 44px; }

/* Duyarlı üst bilgi kırılımları */
@media (max-width: 1279.98px) {
  .ust-bilgi__logo img { width: 199px; }
  .ana-menu__tetik { padding: 0 8px; font-size: 15px; }
  .ust-bilgi__saat { display: none !important; }
}
/* <1024: logo · sepet · menü. Arama ve öğrenci girişi çekmecenin içinde (arama en üstte, "Hesabım" altta). */
@media (max-width: 1023.98px) {
  .ust-bilgi { top: 0; }
  .ust-bilgi__serit, .ana-menu, .hesap-kutusu, .ust-bilgi__araclar > .arama { display: none; }
  .ust-bilgi__ana-ic { height: 60px; gap: 4px; }
  .ust-bilgi__logo { flex: 0 1 auto; min-width: 0; }
  .ust-bilgi__logo img { width: 199px; }
  .ust-bilgi__araclar { gap: 4px; }
  .mobil-menu { display: block; }
}

/* --------------------------------------------------------------------------
   18. Alt bilgi (footer): gece laciverti; 5 sütun; mobilde 2–4. sütun akordeon
   -------------------------------------------------------------------------- */
.alt-bilgi { background: var(--color-zemin-koyu); color: var(--color-metin-ters-ikincil); font-size: 15px; line-height: 24px; }
.alt-bilgi a { color: inherit; text-decoration: none; }
.alt-bilgi a:hover { color: var(--color-metin-ters); text-decoration: underline; text-underline-offset: 3px; }
.alt-bilgi__ust { display: grid; gap: var(--space-8) var(--space-7); grid-template-columns: minmax(0, 1fr); padding-block: var(--space-11) var(--space-9); }
@media (min-width: 768px) { .alt-bilgi__ust { grid-template-columns: repeat(3, minmax(0, 1fr)); } .alt-bilgi__marka { grid-column: 1 / -1; } }
@media (min-width: 1200px) { .alt-bilgi__ust { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, .9fr)) minmax(0, 1.25fr); } .alt-bilgi__marka { grid-column: auto; } }
.alt-bilgi__marka { display: flex; flex-direction: column; gap: var(--space-5); max-width: 380px; }
/* Koyu zemin logosu (logo-yatay-koyu-zemin.svg): 44 px yükseklik */
.alt-bilgi__logo { display: inline-flex; }
.alt-bilgi__logo img { width: 243px; height: auto; max-width: 100%; }
.alt-bilgi__tanim { color: var(--color-metin-ters-ikincil); }
.alt-bilgi__kurum { color: var(--color-metin-ters) !important; font-weight: 500; }
.alt-bilgi__kurum .ikon { display: inline-block; width: 16px; height: 16px; vertical-align: -2px; margin-left: 4px; }
.alt-bilgi__baslik { font: 600 15px/20px var(--font-aile-govde); color: var(--color-metin-ters); letter-spacing: 0; }
.alt-bilgi__liste { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-4); }
.alt-bilgi__liste a { display: inline-flex; align-items: center; min-height: 32px; }
@media (max-width: 767.98px) { .alt-bilgi__liste { gap: 0; } .alt-bilgi__liste a { min-height: 44px; } .alt-bilgi__logo { display: inline-flex; align-items: center; min-height: 44px; } }
.alt-bilgi__iletisim { display: flex; flex-direction: column; gap: 12px; margin-top: var(--space-4); }
.alt-bilgi__iletisim li { display: flex; gap: 10px; align-items: flex-start; }
.alt-bilgi__iletisim .ikon { width: 18px; height: 18px; margin-top: 3px; color: var(--color-metin-ters-ikincil); }
.alt-bilgi__iletisim strong { color: var(--color-metin-ters); font-weight: 600; }
.alt-bilgi__sosyal { display: flex; flex-wrap: wrap; gap: 4px; margin-left: -10px; }
.alt-bilgi__sosyal a { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-sm); }
.alt-bilgi__sosyal a:hover { background: var(--color-zemin-koyu-2); text-decoration: none; }
.alt-bilgi__sosyal .ikon { width: 20px; height: 20px; }
.magaza-rozetleri { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.magaza-rozeti { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 14px 6px 10px; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--color-sinir-koyu); color: var(--color-metin-ters) !important; text-decoration: none !important; background: var(--color-zemin-koyu-2); }
.magaza-rozeti:hover { box-shadow: inset 0 0 0 1px var(--color-metin-ters-ikincil); }
.magaza-rozeti .ikon { width: 22px; height: 22px; }
.magaza-rozeti__metin { display: flex; flex-direction: column; font: 500 13px/16px var(--font-aile-govde); color: var(--color-metin-ters-ikincil); }
.magaza-rozeti__metin b { font: 600 15px/18px var(--font-aile-govde); color: var(--color-metin-ters); }
.magaza-rozeti--acik { background: var(--color-zemin-yuzey); box-shadow: inset 0 0 0 1px var(--color-sinir-guclu); color: var(--color-metin-birincil) !important; }
.magaza-rozeti--acik .magaza-rozeti__metin { color: var(--color-metin-ikincil); }
.magaza-rozeti--acik .magaza-rozeti__metin b { color: var(--color-metin-birincil); }

/* Akordeon grupları: mobilde kapanır; ≥768 her zaman açık (::details-content) */
.alt-bilgi__grup > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.alt-bilgi__grup > summary .ikon { width: 20px; height: 20px; color: var(--color-metin-ters-ikincil); transition: transform var(--motion-orta) var(--motion-egri-cikis); }
.alt-bilgi__grup[open] > summary .ikon { transform: rotate(180deg); }
@media (max-width: 767.98px) {
  .alt-bilgi__ust { gap: 0; padding-block: var(--space-9) var(--space-7); }
  .alt-bilgi__marka { margin-bottom: var(--space-7); }
  .alt-bilgi__grup { border-top: 1px solid var(--color-sinir-koyu); }
  .alt-bilgi__grup > summary { min-height: 56px; }
  .alt-bilgi__grup > .alt-bilgi__liste { margin-top: 0; padding-bottom: var(--space-4); }
  .alt-bilgi__sutun--iletisim { border-top: 1px solid var(--color-sinir-koyu); padding-top: var(--space-5); }
}
@media (min-width: 768px) {
  .alt-bilgi__grup > summary { pointer-events: none; cursor: default; }
  .alt-bilgi__grup > summary .ikon { display: none; }
  .alt-bilgi__grup::details-content { content-visibility: visible; display: block; height: auto; }
}
.alt-bilgi__alt { border-top: 1px solid var(--color-sinir-koyu); padding-block: var(--space-6) var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); font-size: 13px; line-height: 20px; }
.alt-bilgi__guven { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; color: var(--color-metin-ters); font-size: 14px; }
.alt-bilgi__guven .ikon { width: 18px; height: 18px; color: var(--color-odak-koyu); }
.alt-bilgi__guven span { display: inline-flex; align-items: center; gap: 8px; }
.alt-bilgi__yasal { display: flex; flex-wrap: wrap; gap: 0 20px; }
.alt-bilgi__yasal a { min-height: 44px; display: inline-flex; align-items: center; }
.alt-bilgi__kunye { color: var(--color-metin-ters-ikincil); }
.alt-bilgi__telif { color: var(--color-metin-ters-ikincil); }

/* --------------------------------------------------------------------------
   19. Mobil alt eylem çubuğu (ürün: satın alma · hub: karar) ve yardım düğmesi
   Tuval tam sayfa boyunda olduğu için position:fixed YOK → sticky, içeriğin sonunda.
   -------------------------------------------------------------------------- */
.alt-cubuk {
  position: sticky; bottom: 0; z-index: 120;
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--layout-alt-cubuk-yukseklik);
  padding: 8px var(--layout-kenar) calc(8px + env(safe-area-inset-bottom));
  background: var(--color-zemin-yuzey); border-top: 1px solid var(--color-sinir-ince); box-shadow: var(--shadow-alt-cubuk);
}
@media (min-width: 1024px) { .alt-cubuk:not(.alt-cubuk--goster) { display: none; } }
.alt-cubuk--gizli { transform: translateY(110%); visibility: hidden; transition: transform var(--motion-orta) var(--motion-egri-cikis), visibility 0s linear var(--motion-orta); }
@media (prefers-reduced-motion: reduce) { .alt-cubuk--gizli { transition: none; } }
.alt-cubuk--statik { position: static; border: 1px solid var(--color-sinir-ince); border-radius: var(--radius-md); box-shadow: var(--shadow-alt-cubuk); }
.alt-cubuk__fiyat { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.alt-cubuk__tutar { font: 800 20px/24px var(--font-aile-govde); letter-spacing: -.01em; white-space: nowrap; }
.alt-cubuk__taksit { font: 500 13px/16px var(--font-aile-govde); color: var(--color-metin-ikincil); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alt-cubuk__eylemler { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.alt-cubuk--karar .alt-cubuk__eylemler { flex: 1; }
.alt-cubuk--karar .alt-cubuk__eylemler .dugme { flex: 1; }

/* Yardım düğmesi (ana sayfa, içerik sayfaları): 48 px yuvarlak, sağ alt; details ile iletişim penceresi.
   HİÇBİR GENİŞLİKTE içerik sütununu örtmez: yalnız sağ kenar oluğu düğmeyi alacak kadar genişken (≥1368 px:
   (genişlik − 1240) / 2 ≥ 64 px) görünür ve oluğun ortasında durur. Daha dar ekranda yüzen düğme yok; aynı kanallar
   mobil menünün "Bize ulaşın" bölümünde, alt bilginin İletişim sütununda ve İletişim sayfasında (üst şerit revizyon 2’de kalktı). */
.yardim-tutucu { position: sticky; bottom: 24px; z-index: 120; height: 0; pointer-events: none; }
.yardim { position: absolute; right: calc((100% - var(--layout-kapsayici)) / 4 - 24px); bottom: 0; pointer-events: auto; }
@media (max-width: 1367.98px) { .yardim-tutucu { display: none; } }
.yardim > summary {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border-radius: var(--radius-tam);
  background: var(--color-metin-birincil); color: var(--color-metin-ters); box-shadow: var(--shadow-2);
}
.yardim > summary:hover { background: #2A3142; }
.yardim > summary .ikon { width: 22px; height: 22px; }
.yardim > summary > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.yardim[open] > summary .yardim__ac-ikon { display: none; }
.yardim > summary .yardim__kapat-ikon { display: none; }
.yardim[open] > summary .yardim__kapat-ikon { display: block; }
.yardim__panel {
  position: absolute; right: 0; bottom: calc(100% + 12px); width: min(320px, calc(100vw - 32px));
  background: var(--color-zemin-yuzey); border: 1px solid var(--color-sinir-ince); border-radius: var(--radius-md); box-shadow: var(--shadow-3);
  padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3);
}
.yardim__panel--statik { position: static; width: 320px; max-width: 100%; }
.yardim__baslik { font: 700 18px/24px var(--font-aile-baslik); }
.yardim__saat { font-size: 13px; line-height: 18px; color: var(--color-metin-ikincil); }

/* --------------------------------------------------------------------------
   20. Fotoğraf yer tutucusu: kum zemin + görünür etiket "[Fotoğraf: …]"
   Yapay zekâ üretimi insan görseli ve stok görsel YOK.
   -------------------------------------------------------------------------- */
.yer-tutucu {
  display: grid; place-items: center; align-content: center; gap: 10px; text-align: center;
  width: 100%; aspect-ratio: var(--oran, 3 / 2); padding: var(--space-5);
  background-color: var(--color-zemin-yuzey-2);
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(26, 31, 43, .035) 14px 15px);
  border: 1px dashed var(--color-sinir-guclu); border-radius: var(--radius-sm);
  color: var(--color-metin-ikincil); font: 500 13px/18px var(--font-aile-govde);
}
.yer-tutucu .ikon { width: 28px; height: 28px; stroke-width: 1.5; }
.yer-tutucu--4x5 { --oran: 4 / 5; }
.yer-tutucu--3x2 { --oran: 3 / 2; }
.yer-tutucu--16x9 { --oran: 16 / 9; }
.yer-tutucu--1x1 { --oran: 1 / 1; }
/* Video yer tutucusu: sitenin her yerinde TEK görünüm — kum zemin (koyu kütle yok) + 56 px dolu oynat üçgeni
   (turuncu-grafik, kumda ≥3:1). Örnek ders (ürün, LGS canlı ders), eğitmen tanıtım videosu. Tıklanır sürümü:
   <button type="button" class="video-tutucu" aria-label="…"><span class="yer-tutucu yer-tutucu--16x9 yer-tutucu--video">…</span></button> */
.yer-tutucu--video { --oran: 16 / 9; gap: 12px; font-size: 14px; line-height: 20px; }
.yer-tutucu--video .ikon { width: 56px; height: 56px; color: var(--color-marka-turuncu-grafik); }
.video-tutucu { display: block; width: 100%; padding: 0; border: 0; background: none; border-radius: var(--radius-sm); cursor: pointer; text-align: inherit; color: inherit; }
.video-tutucu:hover .yer-tutucu--video { border-color: var(--color-metin-birincil); }
.video-tutucu:hover .yer-tutucu--video .ikon { color: var(--color-metin-vurgu); }

/* Tipografik kapak (yon.md §2A.10 madde 3): gömülü yazılı / stok insanlı ürün kapağının yerine.
   Kum zemin · büyük sınıf rakamı · tür ikonu · 15 hücrelik ders çubuğu. Metin HTML'de; tek turuncu vurgu (ilk ders grubu).
   Gerçek "basılı set" fotoğrafı gelince değiştirilir. */
.tip-kapak {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 14px;
  container-type: inline-size; width: 100%; aspect-ratio: 3 / 2; padding: clamp(16px, 4%, 24px); overflow: hidden;
  background: var(--color-zemin-yuzey-2); border: 1px solid var(--color-sinir-ince); border-radius: var(--radius-sm); color: var(--color-metin-birincil);
}
.tip-kapak__ust { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 13px/16px var(--font-aile-govde); letter-spacing: .06em; text-transform: uppercase; color: var(--color-metin-ikincil); }
.tip-kapak__ust span { display: inline-flex; align-items: center; gap: 8px; }
.tip-kapak__ust .ikon { width: 16px; height: 16px; stroke-width: 1.5; color: var(--color-metin-birincil); }
.tip-kapak__rakam { grid-row: 2; align-self: end; font: 800 clamp(88px, 34cqw, 132px)/.8 var(--font-aile-baslik); letter-spacing: -.05em; margin-bottom: -2px; }
.tip-kapak__isim { grid-row: 2; align-self: end; display: flex; flex-direction: column; gap: 2px; padding-bottom: 2px; min-width: 0; }
.tip-kapak__sinif { font: 600 13px/16px var(--font-aile-govde); letter-spacing: .06em; text-transform: uppercase; color: var(--color-metin-ikincil); }
.tip-kapak__urun { font: 700 clamp(18px, 1rem + .4vw, 22px)/1.15 var(--font-aile-baslik); letter-spacing: -.01em; }
.tip-kapak__cubuk { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 2px; margin-top: clamp(12px, 4%, 18px); }
.tip-kapak__cubuk i { height: 10px; background: var(--color-cubuk-hucre); }
.tip-kapak__cubuk i:nth-child(-n+4) { background: var(--color-marka-turuncu); }
.tip-kapak__cubuk i:is(:nth-child(7), :nth-child(10), :nth-child(12), :nth-child(14)) { margin-right: 4px; }
/* Küçük kapak (96 px ürün başı, sepet satırı, sipariş özeti): yalnız rakam + sınav */
.tip-kapak--mini { display: inline-grid; grid-template-columns: auto; grid-template-rows: 1fr auto; place-items: center; align-content: center; gap: 2px; padding: 6px 6px 12px; aspect-ratio: auto; flex: none; }  /* yükseklik içerikten (30 + 2 + 14 + dolgu = 64 px); alt boşluk: 4 px ilerleme şeridi + 8 px → 'SINIF' şeride yapışmaz */
.tip-kapak--mini .tip-kapak__rakam { grid-row: 1; align-self: center; font-size: 30px; line-height: 1; letter-spacing: -.04em; margin: 0; }
.tip-kapak--mini .tip-kapak__sinif { grid-row: 2; font-size: 13px; line-height: 14px; letter-spacing: .06em; }
.tip-kapak--mini::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--color-marka-turuncu) 0 27%, var(--color-cubuk-hucre) 27% 100%); }

/* --------------------------------------------------------------------------
   21. Motifler: İz (logodan türeyen kayık dolgu) ve Ders çubuğu
   -------------------------------------------------------------------------- */
/* İz çerçevesi: 1,5 px mürekkep çizgi + 8 px sağa, 12 px aşağı kaymış turuncu blok. EKRANDA EN FAZLA BİR KEZ. */
.iz-cerceve { margin: 0 12px 12px 0; display: flex; flex-direction: column; gap: var(--space-5); }
.iz-cerceve__gorsel { display: block; width: 100%; aspect-ratio: var(--oran, 4 / 5); object-fit: cover; object-position: center top; background: var(--color-zemin-yuzey); outline: 1.5px solid var(--color-metin-birincil); outline-offset: 0; box-shadow: var(--shadow-iz); border-radius: 0; }
.iz-cerceve .yer-tutucu { border: 0; border-radius: 0; outline: 1.5px solid var(--color-metin-birincil); box-shadow: var(--shadow-iz); }
.iz-cerceve__aciklama { font: 500 13px/18px var(--font-aile-govde); color: var(--color-metin-ikincil); padding-top: 4px; }
.iz-cerceve__aciklama b { color: var(--color-metin-birincil); font-weight: 600; }

/* İz işareti: kontur + kaymış dolgulu küçük oynat üçgeni (12–16 px): etkin adım, "sıradaki", bugün */
.iz-isaret { width: 16px; height: 16px; flex: none; overflow: visible; }
.iz-isaret--buyuk { width: 24px; height: 24px; }

/* Ders çubuğu: haftalık canlı ders saatleri (veri gerçek). Hücre = 1 saat; gruplar arası 6 px.
   Üzerine gelinen ders turuncu; mobilde etiketler 13 px tek satır lejanta döner. role="img" + tam aria-label. */
.ders-cubugu { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }
.ders-cubugu__cubuk { display: flex; gap: 6px; }
.ders-cubugu__grup { flex: var(--saat, 1) 1 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ders-cubugu__hucreler { display: flex; gap: 2px; }
.ders-cubugu__hucreler > i { flex: 1 1 0; height: var(--cubuk-yukseklik, 36px); background: var(--color-cubuk-hucre); transform-origin: bottom; animation: ders-cubugu-dol 160ms var(--motion-egri-cikis) both; transition: background-color var(--motion-hizli); }
.ders-cubugu__etiket { font: 500 13px/18px var(--font-aile-govde); color: var(--color-metin-ikincil); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ders-cubugu__etiket b { font-weight: 600; color: var(--color-metin-birincil); font-variant-numeric: tabular-nums; }
.ders-cubugu__hucreler > i { background: color-mix(in srgb, var(--color-marka-turuncu) calc(25% + 75% * (var(--saat, 1) - 1) / max(var(--en, 2) - 1, 1)), #fff); }
/* Üzerine gelince o dersin hücreleri yukarı doğru büyür (yalnız fareli cihazlarda, hareket azaltma tercihine saygılı) */
.ders-cubugu__hucreler { transform-origin: bottom; transition: transform var(--motion-hizli); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ders-cubugu__grup:hover .ders-cubugu__hucreler { transform: scale(1.04, 1.3); }
}
.ders-cubugu__grup:hover .ders-cubugu__etiket { color: var(--color-metin-birincil); }
.ders-cubugu__etiket b { color: var(--color-metin-birincil); }
.ders-cubugu__lejant { display: none; font: 500 13px/20px var(--font-aile-govde); color: var(--color-metin-ikincil); }
.ders-cubugu__lejant b { color: var(--color-metin-birincil); font-weight: 600; }
.ders-cubugu[data-dar] .ders-cubugu__etiket { display: none; }
.ders-cubugu[data-dar] .ders-cubugu__lejant { display: block; }
.ders-cubugu__not { font: 500 13px/18px var(--font-aile-govde); color: var(--color-metin-ikincil); }
@media (max-width: 639.98px) {
  .ders-cubugu__etiket { display: none; }
  .ders-cubugu__lejant { display: block; }
  .ders-cubugu__cubuk { gap: 4px; }
  .ders-cubugu__hucreler > i { --cubuk-yukseklik: 28px; }
}
/* Tek imza hareketi: hücreler sırayla dolar (≤600 ms, bir kez) */
@keyframes ders-cubugu-dol { from { transform: scaleY(.15); opacity: 0; } to { transform: none; opacity: 1; } }
.ders-cubugu__grup:nth-child(1) i { animation-delay: 0ms; }
.ders-cubugu__grup:nth-child(1) i:nth-child(2) { animation-delay: 30ms; }
.ders-cubugu__grup:nth-child(1) i:nth-child(3) { animation-delay: 60ms; }
.ders-cubugu__grup:nth-child(1) i:nth-child(4) { animation-delay: 90ms; }
.ders-cubugu__grup:nth-child(2) i { animation-delay: 120ms; }
.ders-cubugu__grup:nth-child(2) i:nth-child(2) { animation-delay: 150ms; }
.ders-cubugu__grup:nth-child(2) i:nth-child(3) { animation-delay: 180ms; }
.ders-cubugu__grup:nth-child(3) i { animation-delay: 210ms; }
.ders-cubugu__grup:nth-child(3) i:nth-child(2) { animation-delay: 240ms; }
.ders-cubugu__grup:nth-child(3) i:nth-child(3) { animation-delay: 270ms; }
.ders-cubugu__grup:nth-child(4) i { animation-delay: 300ms; }
.ders-cubugu__grup:nth-child(4) i:nth-child(2) { animation-delay: 330ms; }
.ders-cubugu__grup:nth-child(5) i { animation-delay: 360ms; }
.ders-cubugu__grup:nth-child(5) i:nth-child(2) { animation-delay: 390ms; }
.ders-cubugu__grup:nth-child(6) i { animation-delay: 420ms; }
.ders-cubugu__grup:nth-child(6) i:nth-child(2) { animation-delay: 450ms; }

/* --------------------------------------------------------------------------
   22. Kanıt ve içerik blokları
   -------------------------------------------------------------------------- */
/* Güven şeridi: 3–4 kaynaklı öğe, aralarında ince dikey çizgi; telefonda 2×2.
   .guven-bandi = tam genişlik beyaz bant (üst/alt ince sınır); içinde .kapsayici > .guven-seridi */
.guven-bandi { background: var(--color-zemin-yuzey); border-block: 1px solid var(--color-sinir-ince); }
.guven-seridi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .guven-seridi { grid-template-columns: repeat(var(--oge-sayisi, 4), minmax(0, 1fr)); } }
.guven-seridi__oge { display: flex; flex-direction: column; gap: 4px; padding: var(--space-5); min-width: 0; }
.guven-seridi__oge:first-child { padding-left: 0; }
.guven-seridi__oge + .guven-seridi__oge { box-shadow: -1px 0 0 0 var(--color-sinir-ince); }
@media (min-width: 600px) and (max-width: 899.98px) {
  .guven-seridi__oge:nth-child(odd) { box-shadow: none; padding-left: 0; }
  .guven-seridi__oge:nth-child(n+3) { border-top: 1px solid var(--color-sinir-ince); }
  .guven-seridi__oge { padding: var(--space-4); }
  .guven-seridi__oge:nth-child(even) { padding-right: 0; }
}
@media (max-width: 599.98px) {
  .guven-seridi { grid-template-columns: minmax(0, 1fr); }
  .guven-seridi__oge { padding: 14px 0; box-shadow: none !important; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .guven-seridi__oge + .guven-seridi__oge { border-top: 1px solid var(--color-sinir-ince); }
  .guven-seridi__deger { font-size: 18px; }
  .guven-seridi__kaynak { padding-top: 2px; }
}
/* Telefonda yatay kayan şerit (ana sayfa, mimari §3.1): iki öğe görünür, kalanı kaydırılır; kutu dışına taşmaz */
@media (max-width: 599.98px) {
  .guven-seridi--kaydir {
    grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 46%;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--layout-kenar);
    margin-inline: calc(-1 * var(--layout-kenar)); padding-inline: var(--layout-kenar); scrollbar-width: none;
  }
  .guven-seridi--kaydir .guven-seridi__oge { display: flex; scroll-snap-align: start; padding: 16px 16px 16px 0; }
  .guven-seridi--kaydir .guven-seridi__oge + .guven-seridi__oge { border-top: 0; padding-left: 16px; box-shadow: -1px 0 0 0 var(--color-sinir-ince) !important; }
}
.guven-seridi__deger { font: 700 clamp(19px, 1.05rem + .35vw, 22px)/1.2 var(--font-aile-baslik); letter-spacing: -.01em; color: var(--color-metin-birincil); }
.guven-seridi__deger--govde { font-family: var(--font-aile-govde); font-weight: 800; }
.guven-seridi__metin { font-size: 15px; line-height: 21px; color: var(--color-metin-birincil); }
.guven-seridi__kaynak { font: 500 13px/18px var(--font-aile-govde); color: var(--color-metin-ikincil); margin-top: auto; padding-top: 4px; }

/* Haftanın ritmi: zaman etiketi + başlık + kısa metin; üstte ince çizgi */
.hafta-ritmi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--space-7); }
@media (min-width: 640px) { .hafta-ritmi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hafta-ritmi__oge { display: flex; flex-direction: column; gap: 4px; padding-block: var(--space-4) var(--space-5); border-top: 1px solid var(--color-sinir-guclu); min-width: 0; }
.hafta-ritmi__zaman { font: 600 13px/16px var(--font-aile-govde); letter-spacing: .06em; text-transform: uppercase; color: var(--color-metin-vurgu); }
.hafta-ritmi__baslik { margin-top: 4px; font: 600 var(--size-h4)/var(--size-h4-satir) var(--font-aile-govde); }
.hafta-ritmi__metin { font-size: 15px; line-height: 22px; color: var(--color-metin-ikincil); }

/* Kamp takvimi: gerçek tarihler; sıradaki iz zeminli, geçmiş "Tamamlandı" ve soluk */
.kamp-takvimi { display: grid; border-top: 2px solid var(--color-metin-birincil); border-bottom: 1px solid var(--color-sinir-ince); }
.kamp-takvimi__oge { display: flex; flex-direction: column; gap: 6px; padding: var(--space-5) var(--space-5) var(--space-6); min-width: 0; }
.kamp-takvimi__oge + .kamp-takvimi__oge { box-shadow: -1px 0 0 0 var(--color-sinir-ince); }
/* Telefonda yatay kaydırma (kaydırma kutunun içinde, sayfa taşmaz) */
@media (max-width: 639.98px) {
  .kamp-takvimi { grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--layout-kenar)); padding-inline: var(--layout-kenar); scroll-padding-inline: var(--layout-kenar); border-bottom: 0; scrollbar-width: thin; }
  .kamp-takvimi__oge { scroll-snap-align: start; padding-inline: var(--space-4); border-bottom: 1px solid var(--color-sinir-ince); }
}
@media (min-width: 640px) {
  .kamp-takvimi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kamp-takvimi__oge:nth-child(odd) { box-shadow: none; }
  .kamp-takvimi__oge:nth-child(n+3) { border-top: 1px solid var(--color-sinir-ince); }
}
@media (min-width: 1024px) {
  .kamp-takvimi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kamp-takvimi__oge:nth-child(n+3) { border-top: 0; }
  .kamp-takvimi__oge + .kamp-takvimi__oge { box-shadow: -1px 0 0 0 var(--color-sinir-ince); }
}
.kamp-takvimi__durum { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/16px var(--font-aile-govde); letter-spacing: .06em; text-transform: uppercase; color: var(--color-metin-ikincil); }
.kamp-takvimi__isim { font: 600 15px/22px var(--font-aile-govde); margin-top: var(--space-2); }
.kamp-takvimi__tarih { font: 800 clamp(32px, 1.6rem + 1vw, 40px)/1 var(--font-aile-baslik); letter-spacing: -.02em; margin-top: var(--space-2); }
.kamp-takvimi__ay { font: 600 16px/22px var(--font-aile-govde); }
.kamp-takvimi__yil { font: 500 14px/20px var(--font-aile-govde); color: var(--color-metin-ikincil); }
.kamp-takvimi__not { font-size: 14px; line-height: 20px; color: var(--color-metin-ikincil); margin-top: var(--space-2); }
.kamp-takvimi__eylem { margin-top: auto; padding-top: var(--space-4); }
.kamp-takvimi__oge--siradaki { background: var(--color-zemin-iz-acik); }
.kamp-takvimi__oge--siradaki .kamp-takvimi__durum { color: var(--color-metin-vurgu); }
.kamp-takvimi__oge--tamamlandi { opacity: .62; }

/* İlgili bağlantılar (kutucuk listesi) */
.ilgili-baglantilar { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--space-3); }
.ilgili-baglanti { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 12px 16px 12px 18px; border-radius: var(--radius-sm); background: var(--color-zemin-yuzey); box-shadow: inset 0 0 0 1px var(--color-sinir-ince), var(--shadow-kart); text-decoration: none; color: inherit; font: 600 16px/22px var(--font-aile-govde); transition: box-shadow var(--motion-hizli); }
.ilgili-baglanti:hover { box-shadow: inset 0 0 0 1.5px var(--color-metin-birincil), var(--shadow-kart); }
.ilgili-baglanti small { display: block; font: 400 14px/20px var(--font-aile-govde); color: var(--color-metin-ikincil); }
.ilgili-baglanti .ikon { color: var(--color-metin-ikincil); }

/* Sayfalama (44 px) */
.sayfalama { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sayfalama a, .sayfalama span { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px; border-radius: var(--radius-sm); font: 600 15px/1 var(--font-aile-govde); font-variant-numeric: tabular-nums; text-decoration: none; color: inherit; }
.sayfalama a:hover { background: var(--color-zemin-yuzey-2); }
.sayfalama [aria-current] { background: var(--color-metin-birincil); color: var(--color-metin-ters); }
.sayfalama__yon { gap: 6px; display: inline-flex !important; }

/* Anahtar–değer özet tablosu (sipariş özeti, künye) */
.ozet-tablo { display: flex; flex-direction: column; font-size: 15px; line-height: 22px; }
.ozet-tablo__satir { display: flex; justify-content: space-between; gap: 16px; padding-block: 10px; border-bottom: 1px solid var(--color-sinir-ince); }
.ozet-tablo__satir dt { color: var(--color-metin-ikincil); }
.ozet-tablo__satir dd { font-weight: 500; text-align: right; }
.ozet-tablo__satir--toplam { border-bottom: 0; padding-top: 14px; }
.ozet-tablo__satir--toplam dt { color: var(--color-metin-birincil); font-weight: 600; }
.ozet-tablo__satir--toplam dd { font: 800 22px/28px var(--font-aile-govde); letter-spacing: -.01em; }

/* Kopyalama alanı (havale: IBAN, tutar, sipariş no) */
.kopyala-alani { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px; border-radius: var(--radius-sm); background: var(--color-zemin-yuzey-2); }
.kopyala-alani__etiket { display: block; font: 500 13px/18px var(--font-aile-govde); color: var(--color-metin-ikincil); }
.kopyala-alani__deger { font: 600 16px/22px var(--font-aile-govde); letter-spacing: .02em; overflow-wrap: anywhere; }

/* Mini sepet çekmecesi (sepete eklendi): masaüstünde sağdan 400 px, mobilde alt sayfa */
.mini-sepet { width: min(400px, 100%); background: var(--color-zemin-yuzey); border-radius: var(--radius-md); box-shadow: var(--shadow-3); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
@media (max-width: 767.98px) { .mini-sepet { width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } }
.mini-sepet__baslik { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 700 20px/26px var(--font-aile-baslik); }
.mini-sepet__urun { display: flex; gap: 12px; padding-block: var(--space-3); border-block: 1px solid var(--color-sinir-ince); }

/* --------------------------------------------------------------------------
   23. Çerez bandı (ilk ziyaret görünümü) — ui/parcalar/cerez.html
   YÜZEN KART: masaüstünde altta ORTADA geniş (≤ 760 px) koyu şerit (metin solda, düğmeler sağda); telefonda kenarlardan 10 px boşluklu alt kart.
   Koyu zemin + turuncu üst çizgi: beyaz sayfa üstünde belirgin durur. "Tümünü kabul et" ve "Yalnız zorunlu" aynı biçim ve boyutta
   (eşit görünürlük, karanlık desen yok); "Tercihler" metin düğmesi.
   "Tercihler" yerel <details>: kartın üstünde açılan panel; Zorunlu (kilitli açık) · Analitik · Pazarlama anahtarları + "Tercihleri kaydet".
   Alt bilgideki "Çerez tercihleri" bağlantısı #cerez-tercihleri'ne gider. Konum: bölüm sonundaki fixed kuralı.
   -------------------------------------------------------------------------- */
.cerez-bandi { width: calc(100vw - 20px); max-width: 760px; padding: 16px 20px; background: var(--color-zemin-koyu); color: var(--color-metin-ters); border: 0; border-top: 3px solid var(--color-marka-turuncu); border-radius: var(--radius-md); box-shadow: 0 16px 40px -10px rgba(11, 11, 13, .55), 0 2px 8px rgba(11, 11, 13, .25); }
.cerez-bandi[hidden] { display: none; }
.cerez-bandi__ic { display: flex; flex-direction: column; gap: 12px; }
.cerez-bandi__metin { font-size: 14px; line-height: 20px; color: #E9E6E0; }
.cerez-bandi__metin .baglanti { color: var(--color-metin-ters); }
.cerez-bandi__eylemler { display: flex; align-items: center; gap: 6px; }
.cerez-bandi__eylemler > .dugme { padding-inline: 10px; }
.cerez-bandi__eylemler > [data-cerez] { flex: 1 1 auto; min-width: 0; white-space: nowrap; background: var(--color-zemin-yuzey); color: var(--color-metin-birincil); box-shadow: none; font-weight: 600; }
.cerez-bandi__eylemler > [data-cerez]:hover { background: var(--color-zemin-iz); color: var(--color-metin-birincil); box-shadow: none; }
.cerez-tercih > summary { padding-inline: 8px; white-space: nowrap; color: var(--color-metin-ters); }
.cerez-tercih > summary:hover { color: var(--color-marka-kalem); }
.cerez-tercih > summary .ikon { width: 16px; height: 16px; stroke-width: 1.5; transition: transform var(--motion-orta) var(--motion-egri-cikis); }
.cerez-tercih[open] > summary .ikon { transform: rotate(180deg); }
/* Tercihler paneli: kartın üstünde açılır (kartı büyütmez), ekran dışına taşmaz, kendi içinde kayar */
.cerez-tercih__panel { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); color: var(--color-metin-birincil); max-height: min(380px, calc(100dvh - 210px)); overflow-y: auto; display: flex; flex-direction: column; padding: 2px 16px 14px; border: 1px solid var(--color-sinir-ince); border-radius: var(--radius-md); background: var(--color-zemin-yuzey); box-shadow: var(--shadow-2); }
.cerez-tercih__satir { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding-block: 10px; border-bottom: 1px solid var(--color-sinir-ince); cursor: pointer; }
.cerez-tercih__satir:has(:disabled) { cursor: default; }
.cerez-tercih__satir .anahtar__girdi { margin-top: 2px; }
.cerez-tercih__metin { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cerez-tercih__isim { font: 600 15px/20px var(--font-aile-govde); color: var(--color-metin-birincil); }
.cerez-tercih__aciklama { font-size: 13px; line-height: 18px; color: var(--color-metin-ikincil); }
.cerez-tercih__panel > .dugme { margin-top: 12px; flex: none; }
.cerez-tercih__not { display: none; margin-top: 10px; font-size: 13px; line-height: 18px; color: var(--color-metin-ikincil); }
/* Giriş: çok hafif (opaklık + 8 px); hareketi azaltma tercihinde kapalı */
@keyframes cerez-bandi-gir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cerez-bandi:not([hidden]) { animation: cerez-bandi-gir var(--motion-orta) var(--motion-egri-cikis) both; }
@media (prefers-reduced-motion: reduce) {
  .cerez-bandi:not([hidden]) { animation: none; }
  .cerez-tercih > summary .ikon { transition: none; }
}
@media (min-width: 768px) {
  .cerez-bandi__ic { flex-direction: row; align-items: center; gap: var(--space-6); }
  .cerez-bandi__metin { flex: 1 1 auto; min-width: 0; }
  .cerez-bandi__eylemler { flex: none; }
  .cerez-bandi__eylemler > [data-cerez] { flex: none; padding-inline: 14px; }
  .cerez-tercih__panel { left: auto; width: min(400px, 100%); }
}
@media (max-width: 767.98px) {
  .cerez-bandi { padding: 14px 14px; max-width: none; }
  .cerez-bandi__ic { gap: 10px; }
  .cerez-tercih__panel { padding-inline: 14px; max-height: min(360px, calc(100dvh - 190px)); }
  .cerez-tercih__satir { padding-block: 8px; }
}
@media (max-width: 379.98px) { .cerez-bandi__eylemler { gap: 4px; } .cerez-bandi__eylemler > .dugme { padding-inline: 8px; } }

/* --------------------------------------------------------------------------
   24. Satış grubu ortak blokları — Hub-LGS · Sinif-8 · LGS-Canli-Ders · Urun-Detay ·
   Paket-Karsilastirma · Yazili-Kamplari (Sepet-Odeme yalnız bir kısmını kullanır).
   Önceden altı sayfa CSS'inde birebir tekrarlanıyordu; tek kaynak burası.
   -------------------------------------------------------------------------- */

/* Çapa hedefleri yapışkan başlık + bölüm çiplerinin altında kalmasın */
:where(.rz:has(.alt-cubuk)) main [id] { scroll-margin-top: 136px; }

/* --- Bölüm çipleri (BolumCipleri): sayfa içi gezinme, başlığın altında yapışkan --- */
.bolum-cipleri { position: sticky; top: calc(var(--layout-baslik-yukseklik) + 1px); z-index: 90; background: var(--color-zemin-sayfa); border-bottom: 1px solid var(--color-sinir-ince); }
.bolum-cipleri__ic { display: flex; align-items: center; gap: var(--space-2); padding-block: 10px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.bolum-cipleri__ic::-webkit-scrollbar { display: none; }
.bolum-cipleri--sonda .bolum-cipleri__ic { -webkit-mask-image: none; mask-image: none; }
.bolum-cipleri__baslik { flex: none; margin-right: var(--space-2); font: 600 13px/16px var(--font-aile-govde); letter-spacing: .06em; text-transform: uppercase; color: var(--color-metin-ikincil); }
.bolum-cipleri .cip { flex: none; }
/* Bölüm çipleri bağlantıdır: üzerine gelince/odakta/basılıyken durum değişir, görünen bölümün çipi koyu (aria-current, yt.js scroll-spy) */
.bolum-cipleri a.cip { position: relative; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--motion-hizli), box-shadow var(--motion-hizli), color var(--motion-hizli), transform var(--motion-hizli); }
.bolum-cipleri a.cip:hover { background: var(--color-zemin-bant); box-shadow: inset 0 0 0 1.5px var(--color-metin-birincil); }
.bolum-cipleri a.cip:active { background: var(--color-zemin-bant-sinir); box-shadow: inset 0 0 0 1.5px var(--color-metin-birincil); transform: translateY(1px); }
.bolum-cipleri a.cip[aria-current="true"], .bolum-cipleri a.cip[aria-current="true"]:hover, .bolum-cipleri a.cip[aria-current="true"]:active { background: var(--color-metin-birincil); color: var(--color-metin-ters); box-shadow: none; }
.bolum-cipleri a.cip[aria-current="true"]:active { transform: translateY(1px); }
/* Bölüm çipine atlanan başlıklar yapışkan üst bilginin ve çip çubuğunun altında kalmasın (yt.js gerçek yüksekliği --cip-ofset olarak yazar) */
:where([id]) { scroll-margin-top: var(--cip-ofset, 0px); }
.rz:has(.bolum-cipleri) { --cip-ofset: 146px; }  /* yt.js gerçek değeri yazar; JS yokken yedek */
@media (max-width: 1023.98px) { .rz:has(.bolum-cipleri) { --cip-ofset: 138px; } }
@media (max-width: 1023.98px) { .bolum-cipleri { top: 61px; } }
@media (max-width: 767.98px) { .bolum-cipleri__baslik { display: none; } }

/* --- Olgu satırı (3 olgu, satır içi ikonlu) ve kaynaklı güven satırı --- */
.olgular { display: flex; flex-wrap: wrap; gap: 10px 28px; font: 500 16px/22px var(--font-aile-govde); }
.olgular > li { display: inline-flex; align-items: center; gap: 10px; }
.olgular .ikon { color: var(--color-metin-birincil); }
@media (max-width: 599.98px) { .olgular { flex-direction: column; gap: 10px; } }
.guven-satiri { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 14px; line-height: 20px; color: var(--color-metin-ikincil); }
.guven-satiri b { color: var(--color-metin-birincil); font-weight: 600; }

/* Başlangıç fiyatı eki: "44.900 ₺’den" (tutarla aynı satırda; sabit 15 px, yönün 13 px alt sınırının üstünde) */
.fiyat__ek { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--color-metin-ikincil); margin-left: 1px; }

/* Kademe etiketi: bir özelliğin hangi kademelerde olduğunu cümlenin yanında söyler ("VIP · VIP Plus").
   Karşılaştırma verisiyle aynı kaynaktan; teyitli olmayan kademe ayrıca [teyit] rozeti alır. */
.kademe-etiketi { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: var(--radius-xs); box-shadow: inset 0 0 0 1px var(--color-sinir-guclu); font: 600 13px/18px var(--font-aile-govde); letter-spacing: 0; text-transform: none; color: var(--color-metin-birincil); white-space: nowrap; vertical-align: 1px; }
.bolum--koyu .kademe-etiketi { color: var(--color-metin-ters); box-shadow: inset 0 0 0 1px var(--color-sinir-koyu); }

/* Mobil alt çubuk kapsamı: çubuk ilk ekranın (hero) ARDINDAN başlayan kabın son çocuğudur.
   position: sticky kabından çıkamaz → hero görünürken çubuk görünmez, hero geçilince alta yapışır (JS yok). */
.cubuk-kapsami { display: block; }

/* --- Grup etiketi (paket türü; başlık değil, kart başlıkları H3) --- */
.grup-etiketi { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding-bottom: var(--space-3); margin-bottom: var(--space-5); border-bottom: 1px solid var(--color-sinir-ince); }
.grup-etiketi__isim { display: inline-flex; align-items: center; gap: 10px; font: 600 13px/16px var(--font-aile-govde); letter-spacing: .06em; text-transform: uppercase; color: var(--color-metin-ikincil); }
.grup-etiketi__isim .ikon { width: 16px; height: 16px; stroke-width: 1.5; color: var(--color-metin-birincil); }
.grup + .grup { margin-top: clamp(40px, 2rem + 1.5vw, 56px); }

/* İki grup yan yana (1 kart | 2 kart): ör. Video | Özel ders, Video | Yazılı kampı */
.grup-ikili { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 2rem + 1.5vw, 56px) var(--layout-oluk); }
@media (min-width: 1024px) { .grup-ikili { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.grup-ikili__sutun { display: flex; flex-direction: column; min-width: 0; }
.kart-listesi { display: grid; gap: var(--layout-oluk); flex: 1; }
.kart-listesi--iki { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.kart-listesi > li { min-width: 0; }
.grup-notu { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--color-sinir-ince); font-size: 15px; line-height: 24px; color: var(--color-metin-ikincil); }
.grup-notu .ikon { display: inline-block; vertical-align: -3px; margin-right: 6px; color: var(--color-metin-birincil); }

/* --- Sekme ↔ sütun: telefonda sekmeler (radyo + etiket), ≥768'de paneller yan yana ve satırları hizalı (subgrid) --- */
@media (min-width: 768px) {
  .sekme-sutun > .sekmeler__liste, .sekme-sutun > .sekmeler__radyo { display: none; }
  .sekme-sutun > .sekmeler__paneller { display: grid; grid-template-columns: repeat(var(--sutun, 3), minmax(0, 1fr)); }
  .sekme-sutun > .sekmeler__paneller > .sekmeler__panel { display: grid !important; grid-row: span var(--satir, 4); grid-template-rows: subgrid; row-gap: 0; min-width: 0; }
}
@media (max-width: 767.98px) {
  .sekme-sutun > .sekmeler__liste { margin-bottom: var(--space-4); }
}

/* --- Kademe kartları (Standart · VIP · VIP Plus): tek kap, üç sütun, fark satırları hizalı --- */
.kademe { --sutun: 3; --satir: 7; }
.kademe > .sekmeler__paneller { background: var(--color-zemin-yuzey); border: 1px solid var(--color-sinir-ince); border-radius: var(--radius-md); box-shadow: var(--shadow-kart); }
.kademe > .sekmeler__paneller > .kademe__kart { padding: clamp(20px, 1rem + 1vw, 32px); min-width: 0; }
@media (min-width: 768px) {
  .kademe__kart + .kademe__kart { box-shadow: -1px 0 0 0 var(--color-sinir-ince); }
}
.kademe__bas { display: flex; flex-direction: column; gap: 6px; padding-bottom: var(--space-5); }
.kademe__ust { font: 600 13px/16px var(--font-aile-govde); letter-spacing: .06em; text-transform: uppercase; color: var(--color-metin-ikincil); }
.kademe__isim { font-family: var(--font-aile-baslik); font-weight: 700; font-size: clamp(22px, 1.2rem + .5vw, 26px); line-height: 1.2; letter-spacing: -.015em; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kademe__isim .rozet { font-size: 14px; }
.kademe__ihtiyac { min-height: 22px; }
.kademe__fiyat { padding-block: var(--space-5); border-top: 2px solid var(--color-metin-birincil); }
.kademe__fiyat .fiyat__tutar { font-size: clamp(28px, 1.5rem + .6vw, 34px); line-height: 1.1; letter-spacing: -.02em; }
.kademe__taksit { margin-top: 6px; font-size: 14px; line-height: 20px; color: var(--color-metin-ikincil); }
.kademe__farklar { display: flex; flex-direction: column; border-top: 1px solid var(--color-sinir-ince); }
.kademe__fark { display: flex; flex-direction: column; gap: 2px; padding-block: 12px; border-bottom: 1px solid var(--color-sinir-ince); }
.kademe__fark dt { font: 500 13px/18px var(--font-aile-govde); color: var(--color-metin-ikincil); }
.kademe__fark dd { font: 600 17px/24px var(--font-aile-govde); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.kademe__fark dd .hucre-yok { font-weight: 500; }
.kademe__eylem { display: flex; flex-direction: column; gap: 4px; padding-top: var(--space-5); }
.kademe__eylem .dugme--metin { align-self: center; }
.kademe__ortak { margin-top: var(--space-5); font-size: 15px; line-height: 22px; color: var(--color-metin-ikincil); max-width: 72ch; }
.kademe__ortak b { color: var(--color-metin-birincil); }
@media (min-width: 768px) {
  .kademe__bas { padding-bottom: var(--space-6); }
  .kademe__farklar { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
}

/* --- Biçim karşılaştırması: Canlı ders mi, video paket mi? (iki sütun, satırlar hizalı) --- */
.bicim { --sutun: 2; --satir: 7; }
.bicim > .sekmeler__paneller { column-gap: var(--layout-oluk); row-gap: 0; }
.bicim > .sekmeler__paneller > .bicim__kart { background: var(--color-zemin-yuzey); border: 1px solid var(--color-sinir-ince); border-radius: var(--radius-md); padding: clamp(20px, 1rem + 1vw, 32px); min-width: 0; box-shadow: var(--shadow-kart); }
.bicim__bas { display: flex; flex-direction: column; gap: 8px; padding-bottom: var(--space-5); }
.bicim__bas .kart-paket__etiket { margin-bottom: 0; }
.bicim__isim { font-family: var(--font-aile-baslik); font-weight: 700; font-size: var(--size-h3); line-height: var(--size-h3-satir); letter-spacing: -.01em; }
.bicim__satirlar { display: flex; flex-direction: column; border-top: 2px solid var(--color-metin-birincil); }
.bicim__satir { display: grid; grid-template-columns: minmax(96px, 30%) minmax(0, 1fr); gap: 4px 16px; padding-block: 14px; border-bottom: 1px solid var(--color-sinir-ince); font-size: 15px; line-height: 22px; }
.bicim__satir dt { font-weight: 600; }
.bicim__satir dd { color: var(--color-metin-birincil); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.bicim__eylem { padding-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: flex-start; }
@media (min-width: 768px) { .bicim__satirlar { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; } }
@media (max-width: 479.98px) { .bicim__satir { grid-template-columns: minmax(0, 1fr); } .bicim__satir dt { color: var(--color-metin-ikincil); font-weight: 500; font-size: 13px; } }

/* --- Karşılaştırma: masaüstü tablo (radikal.css .karsilastirma) / telefonda kademe sekmeleri --- */
.kars-mobil { display: none; }
@media (max-width: 767.98px) {
  .karsilastirma:has(.kars-mobil) .karsilastirma__kaydir, .karsilastirma:has(.kars-mobil) .karsilastirma__ust { display: none; }
  .kars-mobil { display: block; }
}
.karsilastirma__ust .karsilastirma__ortak { flex: 1 1 520px; max-width: 860px; }
.karsilastirma__ust .anahtar { flex: none; }
.karsilastirma__tablo { table-layout: fixed; }
.karsilastirma__tablo thead th:first-child { width: 34%; }
.karsilastirma__sutun-isim .rozet { font-size: 14px; }
/* Sütun başı: "KDV dahil · taksit" notu + ihtiyaç etiketi (kademe kartlarıyla aynı dil) */
.karsilastirma__tablo .karsilastirma__sutun-not:has(+ .karsilastirma__ihtiyac) { margin-bottom: 2px; }
.karsilastirma__ihtiyac { display: block; min-height: 18px; margin-bottom: 12px; font: 600 13px/18px var(--font-aile-govde); color: var(--color-metin-vurgu); }
.karsilastirma__tablo .rozet--teyit { font-size: 13px; line-height: 16px; padding: 2px 6px; }
/* Yapışkan sütun başı: bölüm çipli sayfalarda üst bilgi (73) + çip şeridi (61) */
@media (min-width: 1024px) { .rz:has(.bolum-cipleri) { --kars-ust: 134px; } }
.kars-mobil__panel > * + * { margin-top: var(--space-4); }
/* Revizyon 2: telefonda panel beyaz kart (kum bantta ve beyaz zeminde tablo gibi okunur) */
.kars-mobil .sekmeler__panel.kars-mobil__panel { margin-top: var(--space-4); padding: var(--space-2) var(--space-4) var(--space-4); background: var(--color-zemin-yuzey); border: 1px solid var(--color-sinir-ince); border-radius: var(--radius-md); box-shadow: var(--shadow-kart); }
.kars-mobil__fiyat { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.kars-mobil .ozet-tablo__satir dd { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.kars-mobil .ozet-tablo__satir dt { max-width: 52%; }
.kars-mobil__ortak { border-top: 1px solid var(--color-sinir-ince); }
.kars-mobil__ortak > summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; font: 600 15px/20px var(--font-aile-govde); }
.kars-mobil__ortak[open] > summary .ikon { transform: rotate(180deg); }
.kars-mobil__ortak p { font-size: 15px; line-height: 22px; color: var(--color-metin-ikincil); padding-bottom: var(--space-3); }
.kars-dipnot { font-size: 13px; line-height: 18px; color: var(--color-metin-ikincil); }

/* --- Program tablosu (ders · haftalık saat) --- */
.program-tablosu { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.program-tablosu caption { text-align: left; padding-bottom: var(--space-3); font: 600 13px/16px var(--font-aile-govde); letter-spacing: .06em; text-transform: uppercase; color: var(--color-metin-ikincil); }
.program-tablosu th, .program-tablosu td { padding: 12px 0; border-bottom: 1px solid var(--color-sinir-ince); text-align: left; font-weight: 500; }
.program-tablosu thead th { font: 600 13px/16px var(--font-aile-govde); color: var(--color-metin-ikincil); padding-top: 0; }
.program-tablosu td:last-child, .program-tablosu th:last-child { text-align: right; }
.program-tablosu tfoot th, .program-tablosu tfoot td { border-bottom: 0; border-top: 2px solid var(--color-metin-birincil); font-weight: 700; padding-top: 14px; }

/* --- Hub / sınıf / kamp üst bölümü (revizyon 2): sayfa başlığıyla aynı sadelik ve aynı kum bant.
   Görünür yol · (üst etiket) · H1 · kısa giriş · en çok 1 birincil + 1 ikincil eylem. Sağ sütun kutusu, fiyat listesi,
   olgu satırı ve güven satırı başlıkta YOK (içerik ilgili bölümlerde). --- */
.hub-bas { padding-block: var(--space-5) clamp(40px, 1.8rem + 2.4vw, 64px); background: var(--color-zemin-bant); box-shadow: inset 0 -1px 0 var(--color-zemin-bant-sinir); }
.hub-bas__ic { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
.hub-bas__ust { margin-bottom: var(--space-3); display: inline-flex; align-items: center; gap: 8px; }
.hub-bas__ust .ikon { color: var(--color-metin-birincil); }
.hub-bas__baslik { font-family: var(--font-aile-baslik); font-weight: 700; font-size: var(--size-hub); line-height: var(--size-hub-satir); letter-spacing: -.025em; max-width: 20ch; text-wrap: balance; }
.hub-bas__giris { margin-top: var(--space-4); max-width: 40em; font-size: var(--size-giris); line-height: var(--size-giris-satir); color: var(--color-metin-ikincil); }
.hub-bas__olgular { margin-top: var(--space-6); }
.hub-bas__eylemler { margin-top: var(--space-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.hub-bas__guven { margin-top: var(--space-5); }
.hub-bas__sag { min-width: 0; }
@media (max-width: 639.98px) { .hub-bas__eylemler .dugme--birincil { width: 100%; } }

/* --- Tarife: fiyat özeti (fiyat saklanmaz; satırlar sayfa içi bağlantı) --- */
.tarife { display: flex; flex-direction: column; background: var(--color-zemin-yuzey); border: 1px solid var(--color-sinir-ince); border-radius: var(--radius-md); padding: var(--space-kart-ic); box-shadow: var(--shadow-kart); }
.tarife__baslik { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: var(--space-3); font: 600 13px/16px var(--font-aile-govde); letter-spacing: .06em; text-transform: uppercase; color: var(--color-metin-ikincil); }
.tarife__liste { display: flex; flex-direction: column; border-top: 2px solid var(--color-metin-birincil); }
.tarife__satir { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 60px; padding-block: 10px; border-bottom: 1px solid var(--color-sinir-ince); text-decoration: none; color: inherit; }
.tarife__satir .ikon { color: var(--color-metin-birincil); }
.tarife__isim { display: flex; flex-direction: column; font: 600 16px/22px var(--font-aile-govde); min-width: 0; }
.tarife__alt { font: 400 14px/20px var(--font-aile-govde); color: var(--color-metin-ikincil); }
.tarife__fiyat { font: 800 18px/24px var(--font-aile-govde); white-space: nowrap; text-align: right; }
.tarife__fiyat small { display: block; font: 500 13px/16px var(--font-aile-govde); color: var(--color-metin-ikincil); }
.tarife__satir:hover .tarife__isim > span:first-child { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 479.98px) {
  .tarife__satir { grid-template-columns: 20px minmax(0, 1fr); align-items: start; row-gap: 4px; }
  .tarife__satir .ikon { margin-top: 1px; }
  .tarife__fiyat { grid-column: 2; text-align: left; display: flex; align-items: baseline; gap: 8px; }
  .tarife__fiyat small { display: inline; }
}
.tarife__not { padding-top: var(--space-4); font-size: 13px; line-height: 18px; color: var(--color-metin-ikincil); }

/* --- Başarı bloğu (koyu bant) --- */
.basari-blok .bolum-basligi { margin-bottom: clamp(32px, 1.5rem + 2vw, 56px); }
.basari-blok__alt { margin-top: clamp(40px, 2rem + 2vw, 64px); }
.basari-blok__alt-baslik { margin-bottom: var(--space-3); }
.basari-blok .derece { border-top-color: var(--color-sinir-koyu); }
.basari-blok__kaynak { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-sinir-koyu); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
/* Satış sayfalarında ad listesi yok: kaynak notu doğrudan rakamların altında */
.basari-rakamlar + .basari-blok__kaynak { margin-top: clamp(32px, 1.5rem + 1.5vw, 48px); }

/* --- Sizi arayalım (GeriAramaFormu, kısa) --- */
.geri-arama__panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); background: var(--color-zemin-yuzey); border: 1px solid var(--color-sinir-ince); border-radius: var(--radius-md); padding: clamp(24px, 1rem + 3vw, 48px); box-shadow: var(--shadow-kart); }
@media (min-width: 1024px) { .geri-arama__panel { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 5vw, 72px); } }
.geri-arama__metin { display: flex; flex-direction: column; gap: var(--space-4); }
.geri-arama__giris { font-size: 16px; line-height: 26px; color: var(--color-metin-ikincil); }
.geri-arama__kanallar { display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 22px; }
.geri-arama__kanallar li { display: flex; gap: 10px; align-items: flex-start; }
.geri-arama__kanallar .ikon { margin-top: 1px; color: var(--color-metin-ikincil); }
.geri-arama__kanallar .ikon--whatsapp { color: var(--color-marka-whatsapp-ikon); }
/* Kanal bağlantıları (telefon, WhatsApp): telefonda 44 px dokunma alanı, yerleşim değişmez */
@media (max-width: 767.98px) { .geri-arama__kanallar a { display: inline-block; padding-block: 11px; margin-block: -11px; } }

/* --- Sayfa sonu: SSS + ilgili sayfalar iki sütun (masaüstü) --- */
.son-ikili { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 2rem + 3vw, 80px); }
@media (min-width: 1024px) { .son-ikili { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.son-ikili .ilgili-baglantilar { grid-template-columns: minmax(0, 1fr); }

/* Masaüstünde yardım düğmesi; telefonda karar/satın alma çubuğu varken gizlenir (aynı anda tek alt öğe) */
@media (max-width: 1023.98px) { .yardim-tutucu--masaustu { display: none; } }

/* --------------------------------------------------------------------------
   25. Kampanya kaydırıcısı (.slider) — revizyon 2. Panelden yönetilen banner'lar (firstbanner: banner 1920×600, banner_m 400×600,
   link, title, row_number, active_yn). Ana sayfada üst bilginin hemen altında, tam genişlik.
   Prototipte JS YOK: radyo + etiket + :checked. Radyolar görünmez ama klavyeyle gezilir (sekme + ok tuşları), odak halkası
   ilgili noktaya yansır. Giydirmede: otomatik geçiş (7 sn), görünür "Duraklat" düğmesi, üzerine gelince ve odakta durur,
   prefers-reduced-motion'da otomatik geçiş yok; ilk görsel fetchpriority="high", diğerleri lazy.
   Oran sabit (kayma yok): ≥768 1920:600 · <768 400:600 (<picture> ile mobil görsel).
   Mobil görseli olmayan slayt telefonda gösterilmez: slayt, noktası ve ona giden oklar --yalniz-masaustu alır.
   Yapı: radyolar → .slider__pencere (slaytlar) → .slider__denetim (Duraklat · noktalar · oklar); sıra şart (~ seçicisi).
   En çok 5 slayt. Banner'daki metin görselin içinde olduğundan alt metni kampanyayı TAM anlatır (tarih, sınıf, biçim).
   -------------------------------------------------------------------------- */
.slider { position: relative; background: var(--color-zemin-yuzey); }
.slider__radyo { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.slider__pencere { display: grid; max-width: 1920px; margin-inline: auto; aspect-ratio: 1920 / 600; overflow: hidden; background: var(--color-zemin-yuzey-2); }
.slider__slayt {
  grid-area: 1 / 1; min-width: 0; min-height: 0; background: var(--slayt-zemin, var(--color-zemin-yuzey));
  opacity: 0; visibility: hidden;
  transition: opacity var(--motion-yavas) var(--motion-egri-cikis), visibility 0s linear var(--motion-yavas);
}
.slider__baglanti { position: relative; display: block; height: 100%; color: inherit; pointer-events: none; }
/* Tıklama alanı yalnız içerik genişliği kadar: tam genişlik görselin sağ/solundaki boş alana yanlışlıkla tıklanınca sayfaya gitmesin */
.slider__baglanti::after { content: ""; position: absolute; inset-block: 0; left: 50%; width: min(100%, calc(var(--layout-kapsayici) + 2 * var(--layout-kenar))); transform: translateX(-50%); pointer-events: auto; cursor: pointer; }
.slider__baglanti picture { display: block; height: 100%; }
.slider__gorsel { display: block; width: 100%; height: 100%; object-fit: cover; }
.slider__baglanti:focus-visible { outline-offset: -6px; }
.slider__radyo:nth-of-type(1):checked ~ .slider__pencere > .slider__slayt:nth-child(1),
.slider__radyo:nth-of-type(2):checked ~ .slider__pencere > .slider__slayt:nth-child(2),
.slider__radyo:nth-of-type(3):checked ~ .slider__pencere > .slider__slayt:nth-child(3),
.slider__radyo:nth-of-type(4):checked ~ .slider__pencere > .slider__slayt:nth-child(4),
.slider__radyo:nth-of-type(5):checked ~ .slider__pencere > .slider__slayt:nth-child(5) { opacity: 1; visibility: visible; transition-delay: 0s; }

/* Tek slaytlı kampanya: radyo/denetim yok, slayt her zaman görünür */
.slider--tek .slider__slayt { opacity: 1; visibility: visible; }

/* Denetim satırı: görselin ALTINDA (banner'ın üstüne binmez, her zeminde okunur). Solda Duraklat, ortada noktalar, sağda oklar. */
.slider__denetim { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-3); padding-block: 8px var(--space-6); }
.slider__duraklat {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 12px;
  border: 0; border-radius: var(--radius-sm); background: transparent; box-shadow: inset 0 0 0 1px var(--color-sinir-guclu);
  font: 600 14px/18px var(--font-aile-govde); color: var(--color-metin-birincil); cursor: pointer;
  transition: box-shadow var(--motion-hizli), background-color var(--motion-hizli);
}
.slider__duraklat:hover { box-shadow: inset 0 0 0 1.5px var(--color-metin-birincil); }
.slider__duraklat .ikon { width: 16px; height: 16px; }
.slider__noktalar { display: flex; align-items: center; justify-content: center; }
.slider__nokta { display: inline-grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
.slider__nokta::before { content: ""; width: 10px; height: 10px; border-radius: var(--radius-tam); background: var(--color-sinir-guclu); transition: width var(--motion-orta) var(--motion-egri-cikis), background-color var(--motion-orta); }
.slider__nokta:hover::before { background: var(--color-metin-ikincil); }
.slider__radyo:nth-of-type(1):checked ~ .slider__denetim .slider__nokta:nth-child(1)::before,
.slider__radyo:nth-of-type(2):checked ~ .slider__denetim .slider__nokta:nth-child(2)::before,
.slider__radyo:nth-of-type(3):checked ~ .slider__denetim .slider__nokta:nth-child(3)::before,
.slider__radyo:nth-of-type(4):checked ~ .slider__denetim .slider__nokta:nth-child(4)::before,
.slider__radyo:nth-of-type(5):checked ~ .slider__denetim .slider__nokta:nth-child(5)::before { width: 28px; background: var(--color-metin-birincil); }
/* Klavye odağı radyodan noktaya yansır */
.slider__radyo:nth-of-type(1):focus-visible ~ .slider__denetim .slider__nokta:nth-child(1)::before,
.slider__radyo:nth-of-type(2):focus-visible ~ .slider__denetim .slider__nokta:nth-child(2)::before,
.slider__radyo:nth-of-type(3):focus-visible ~ .slider__denetim .slider__nokta:nth-child(3)::before,
.slider__radyo:nth-of-type(4):focus-visible ~ .slider__denetim .slider__nokta:nth-child(4)::before,
.slider__radyo:nth-of-type(5):focus-visible ~ .slider__denetim .slider__nokta:nth-child(5)::before { outline: 3px solid var(--color-odak-acik); outline-offset: 3px; }
.slider__oklar { justify-self: end; display: flex; gap: 8px; }
/* Oklar: her durum (--d1…--d5) için önceki/sonraki etiketi; yalnız etkin slaytınkiler görünür */
.slider__ok {
  display: none; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--color-zemin-yuzey); box-shadow: inset 0 0 0 1px var(--color-sinir-guclu); color: var(--color-metin-birincil); cursor: pointer;
  transition: box-shadow var(--motion-hizli);
}
.slider__ok:hover { box-shadow: inset 0 0 0 1.5px var(--color-metin-birincil); }
.slider__radyo:nth-of-type(1):checked ~ .slider__denetim .slider__ok--d1,
.slider__radyo:nth-of-type(2):checked ~ .slider__denetim .slider__ok--d2,
.slider__radyo:nth-of-type(3):checked ~ .slider__denetim .slider__ok--d3,
.slider__radyo:nth-of-type(4):checked ~ .slider__denetim .slider__ok--d4,
.slider__radyo:nth-of-type(5):checked ~ .slider__denetim .slider__ok--d5 { display: inline-grid; }
@media (min-width: 768px) { .slider__ok--yalniz-mobil { display: none !important; } }
@media (max-width: 767.98px) {
  .slider__pencere { aspect-ratio: 400 / 600; touch-action: pan-y; }
  .slider__slayt--yalniz-masaustu, .slider__nokta--yalniz-masaustu, .slider__ok--yalniz-masaustu { display: none !important; }
}
/* Dar ekranda denetim satırı tek satıra sığar: Duraklat yalnız simge (adı aria-label'da), noktalar sıkışık; 5 slaytta da üst üste binmez */
@media (max-width: 599.98px) {
  .slider__denetim { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-2); }
  .slider__duraklat { width: 44px; padding: 0; justify-content: center; gap: 0; font-size: 0; line-height: 0; }
  .slider__nokta { width: 26px; }
  .slider__radyo:nth-of-type(1):checked ~ .slider__denetim .slider__nokta:nth-child(1)::before,
  .slider__radyo:nth-of-type(2):checked ~ .slider__denetim .slider__nokta:nth-child(2)::before,
  .slider__radyo:nth-of-type(3):checked ~ .slider__denetim .slider__nokta:nth-child(3)::before,
  .slider__radyo:nth-of-type(4):checked ~ .slider__denetim .slider__nokta:nth-child(4)::before,
  .slider__radyo:nth-of-type(5):checked ~ .slider__denetim .slider__nokta:nth-child(5)::before { width: 20px; }
}

/* ---------- Karakterler (satır içi SVG sahneler; kaynak karakter/v2) ---------- */
.kr { display: block; max-width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { .kr * { animation: none !important; } }
.hub-bas__ic--gorselli { align-items: center; }
.hub-bas__gorsel { display: none; }
@media (min-width: 1024px) {
  .hub-bas__ic--gorselli { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 4vw, 64px); }
  .hub-bas__gorsel { display: block; justify-self: end; width: min(100%, 520px); }
  .hub-bas__gorsel .kr { width: 100%; }
}
.sayfa-basligi--gorselli { overflow: hidden; }
.sayfa-basligi--gorselli .kapsayici { position: relative; }
.sayfa-basligi__gorsel { display: none; }
@media (min-width: 1200px) {
  .sayfa-basligi--gorselli .sayfa-basligi__giris, .sayfa-basligi--gorselli .sayfa-basligi__baslik { max-width: min(60%, 44em); }
  .sayfa-basligi__gorsel { display: block; position: absolute; right: var(--layout-kenar, 24px); bottom: calc(-1 * var(--sb-alt)); width: clamp(240px, 24vw, 360px); pointer-events: none; }
  .sayfa-basligi__gorsel .kr { width: 100%; }
  .sayfa-basligi__gorsel--kucuk { width: 150px; }
  /* Çizim bandın alt kenarına oturur (iç boşluk iptal, kesik alt kenar bant kenarıyla çakışır); band taşanı keser */
  .sayfa-basligi__gorsel--orta { width: 230px; bottom: 40px; }
  .sayfa-basligi__gorsel--ust { top: 8px; bottom: auto; width: 230px; }
}

/* ==========================================================================
   Sitede çalışması için eklenen kurallar (tuval prototipinde olmayanlar): pencere, kısa bildirim, çerez bandı konumu,
   dokunmatik menü. Kaynak: scripts/yt-ek.css → scripts/yt_css_aktar.py ile yt.css'in sonuna eklenir.
   ========================================================================== */
body { margin: 0; }
.rz [hidden] { display: none !important; }

/* Açılır menü: dokunmatikte ilk dokunuşla açılır (yt.js .acik sınıfı) */
.ana-menu__oge--acilir.acik > .menu-panel { opacity: 1; visibility: visible; pointer-events: auto; translate: 0 0; transition-delay: 0s; }
.ana-menu__oge--acilir.acik > .ana-menu__tetik .ikon { transform: rotate(180deg); }

/* Pencere (<dialog>): "Sizi arayalım", sınıf / şube seçimi */
.pencere { border: 0; padding: 0; width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 32px); border-radius: var(--radius-md); background: var(--color-zemin-yuzey); color: var(--color-metin-birincil); box-shadow: var(--shadow-3); font-family: var(--font-aile-govde); }
.pencere::backdrop { background: rgba(15, 34, 57, .55); }
.pencere__ic { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); }
.pencere__ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pencere__baslik { margin: 0; font: 700 22px/28px var(--font-aile-baslik); letter-spacing: -.01em; }
.pencere__eylemler { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.pencere .form { gap: var(--space-4); }
.form-geri-bildirim { min-height: 22px; font-size: 15px; line-height: 22px; }
.form-geri-bildirim--basari { color: var(--color-durum-basari-metin); }
.form-geri-bildirim--hata { color: var(--color-durum-hata-metin); }

/* Kısa bildirim (sepete eklendi, hata): sağ altta, alt çubuğun üstünde */
.bildirim-kutusu { position: fixed; right: 16px; bottom: 16px; z-index: 350; width: min(420px, calc(100vw - 32px)); }
.bildirim-kutusu .bildirim { box-shadow: var(--shadow-3); align-items: flex-start; background: var(--color-zemin-yuzey); }
.bildirim-kutusu .bildirim--basari { background: var(--color-durum-basari-zemin); }
.bildirim-kutusu .bildirim--hata { background: var(--color-durum-hata-zemin); }
.bildirim-kutusu .bildirim--bilgi { background: var(--color-durum-bilgi-zemin); }
.bildirim-kutusu .bildirim--dikkat { background: var(--color-durum-uyari-zemin); }
@media (max-width: 1023.98px) { .bildirim-kutusu { bottom: 84px; } }

/* Çerez kartı: ilk ziyarette altta ORTADA yüzer (masaüstü); telefonda kenarlardan 10 px boşlukla altta. */
.cerez-bandi { position: fixed; left: 0; right: 0; margin-inline: auto; bottom: 20px; z-index: 330; }
@media (max-width: 767.98px) { .cerez-bandi { bottom: calc(10px + env(safe-area-inset-bottom)); } }
/* Kart görünürken alt bilginin altında kartın yüksekliği kadar boşluk (yt.js --cerez-yer): sayfa sonundaki yasal bağlantılar kartın altında kalmaz */
.alt-bilgi { padding-bottom: var(--cerez-yer, 0px); }
/* Alt eylem çubuğu olan sayfalarda (hub / ürün) çerez kartı çubuğun ÜSTÜNDE durur; çubuktaki düğmeleri (Paketleri gör, Sepete ekle) örtmez */
@media (max-width: 1023.98px) { .rz:has(.alt-cubuk:not(.alt-cubuk--gizli)) .cerez-bandi { bottom: calc(var(--layout-alt-cubuk-yukseklik) + 22px + env(safe-area-inset-bottom)); } }

/* Alt bilgide bağlantı gibi görünen düğme (Sizi arayalım) */
.alt-bilgi__dugme { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; min-height: 32px; }
@media (max-width: 767.98px) { .alt-bilgi__dugme { min-height: 44px; } }
.alt-bilgi__dugme:hover { color: var(--color-metin-ters); text-decoration: underline; text-underline-offset: 3px; }

/* Mini sepet ("Sepete eklendi"; yt.js miniSepetGoster, sunucu HTML'i ordercontroller::miniSepetHtml): masaüstünde sağ üstte, telefonda alt sayfa */
.mini-sepet-kutu { position: fixed; right: 16px; top: 120px; z-index: 360; width: min(400px, calc(100vw - 32px)); }
@media (max-width: 767.98px) { .mini-sepet-kutu { right: 0; left: 0; top: auto; bottom: 0; width: 100%; } }
.mini-sepet__baslik > span { display: inline-flex; align-items: center; gap: 10px; }
.mini-sepet__onay { width: 22px; height: 22px; color: var(--color-durum-basari-metin); }
.mini-sepet__kapak { width: 72px; }
.mini-sepet__urun { align-items: center; }
.mini-sepet__bilgi { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mini-sepet__isim { display: flex; align-items: center; min-height: 44px; font: 600 15px/20px var(--font-aile-govde); color: inherit; text-decoration: none; }
.mini-sepet__isim:hover { text-decoration: underline; text-underline-offset: 3px; }
.mini-sepet__alt, .mini-sepet__not { font-size: 13px; line-height: 18px; color: var(--color-metin-ikincil); }
.mini-sepet__fiyat { font: 700 15px/20px var(--font-aile-govde); white-space: nowrap; }
.mini-sepet__kdv { display: block; font: 500 13px/16px var(--font-aile-govde); color: var(--color-metin-ikincil); }
.mini-sepet__alt-eylem { display: flex; justify-content: space-between; gap: 12px; }
.tip-kapak__rakam--ikon { font-size: 0; line-height: 1; }
.tip-kapak__rakam--ikon .ikon { width: 30px; height: 30px; stroke-width: 1.5; }

/* KVKK onay kutusu (veri toplayan formlar) ve KVKK Aydınlatma Metni penceresi (footer.tpl #kvkk-pencere; yt.js) */
.form-alani--onay { gap: 2px; }
.form-alani--onay .onay { padding-block: 6px; min-height: 44px; font-size: 15px; line-height: 22px; }
.form-alani--hata .onay__girdi, .onay__girdi[aria-invalid="true"] { outline: 2px solid var(--color-durum-hata-metin); outline-offset: 2px; }
.form-alani--onay .form-alani__hata { padding-left: 34px; }
.pencere--metin { width: min(760px, calc(100vw - 32px)); max-width: none; height: min(calc(100dvh - 32px), 800px); max-height: none; overflow: hidden; }
.pencere--metin .pencere__ic { height: 100%; padding: 0; gap: 0; }
.pencere--metin .pencere__ust { flex: none; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-6); border-bottom: 1px solid var(--color-sinir-ince); }
.pencere__govde { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-5) var(--space-6); }
.pencere__govde:focus-visible { outline: 3px solid var(--color-odak-acik); outline-offset: -3px; }
.pencere__alt { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-sinir-ince); background: var(--color-zemin-yuzey); }
.kvkk-metin { font-size: 16px; line-height: 26px; color: var(--color-metin-birincil); overflow-wrap: anywhere; }
.kvkk-metin > * + * { margin-top: 14px; }
.kvkk-metin h2, .kvkk-metin h3 { margin-top: 28px; font: 700 18px/26px var(--font-aile-baslik); letter-spacing: -.005em; }
.kvkk-metin h2 + *, .kvkk-metin h3 + * { margin-top: 8px; }
.kvkk-metin ul, .kvkk-metin ol { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.kvkk-metin ul { list-style: disc; }
.kvkk-metin ol { list-style: decimal; }
.kvkk-metin a { color: var(--color-metin-vurgu); text-decoration: underline; text-underline-offset: 3px; }
.kvkk-metin .by-tablo { overflow-x: auto; }
.kvkk-metin table { border-collapse: collapse; font-size: 15px; line-height: 22px; }
.kvkk-metin th, .kvkk-metin td { padding: 8px 10px; border: 1px solid var(--color-sinir-ince); text-align: left; vertical-align: top; }
html:has(#kvkk-pencere[open]) { overflow: hidden; scrollbar-gutter: stable; }
@media (max-width: 639.98px) {
  .pencere--metin { width: calc(100vw - 16px); height: calc(100dvh - 16px); }
  .pencere--metin .pencere__ust { padding-left: var(--space-4); }
  .pencere__govde { padding: var(--space-4); }
  .pencere__alt { flex-direction: column-reverse; align-items: stretch; padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); }
  .pencere__alt .dugme { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: no-preference) {
  #kvkk-pencere[open] { animation: kvkk-ac .18s ease-out; }
  #kvkk-pencere[open]::backdrop { animation: kvkk-ortu .18s ease-out; }
}
@keyframes kvkk-ac { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes kvkk-ortu { from { opacity: 0; } to { opacity: 1; } }
/* Boş geri bildirim satırı (canlı bölge) formda boşluk açmasın */
.form > .form-geri-bildirim:empty { min-height: 0; margin-top: calc(var(--space-5) * -1); }
.pencere .form > .form-geri-bildirim:empty { margin-top: calc(var(--space-4) * -1); }
/* Form etiketi yanında "(isteğe bağlı)" notu */
.form-alani__istege-bagli { font-weight: 400; color: var(--color-metin-ikincil); }
/* Üst çubuktaki "Öğrenci girişi": siyah zeminli, beyaz yazı */
.ust-bilgi__giris { background: var(--color-zemin-koyu); color: var(--color-metin-ters); box-shadow: none; }
.ust-bilgi__giris:hover { background: var(--color-zemin-koyu-2); }
.ust-bilgi__giris:active { background: var(--color-zemin-koyu); }