/* ==========================================================================
   Tanıtım sayfası
   Bölümlerin her biri farklı bir düzen ailesi kullanır: asimetrik bölünme,
   çıplak rakam şeridi, ortalanmış editoryal + çizim, yatay kaydırma,
   değişken hücreli ızgara, iki sütun karşılaştırma, akordeon, kapanış şeridi.
   ========================================================================== */

.tanitim { background: var(--bg); }

/* ==========================================================================
   1. Giriş: asimetrik bölünme
   ========================================================================== */
.giris { padding: clamp(2.5rem, 1rem + 6vw, 5.5rem) 0 var(--section-y); }
.giris__ic {
  display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .giris__ic { grid-template-columns: 1.05fr 0.95fr; }
}
.giris__baslik {
  /* İki satırda kalması şart: dört kelimelik başlık üç satıra bölününce
     giriş bölümü ekrandan taşıyor. Türkçe kelimeler uzun olduğu için
     üst ölçek İngilizce bir başlıkta olacağından düşük tutuldu. */
  font-size: clamp(2.125rem, 1.25rem + 3.3vw, 3.5rem);
  max-width: 21ch;
  text-wrap: balance;
}
.giris__alt { margin-top: var(--s-5); font-size: var(--t-md); max-width: 44ch; }
.giris__butonlar { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* Çalışan okuyucu gösterimi */
.giris__demo { display: grid; gap: var(--s-3); }
.demoKutu {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-surface); padding: var(--s-4);
  display: grid; gap: var(--s-3);
  box-shadow: var(--shadow-md);
}
.demoKutu__ust { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.demoKutu__hiz { font-size: var(--t-xs); color: var(--ink-2); }
.demoKutu__etiket { font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); }
.demoKutu__sahne {
  position: relative; display: grid; place-items: center;
  min-height: 148px; background: var(--bg-2); border-radius: var(--r-input);
  overflow: hidden;
}
.demoKutu__isaret {
  position: absolute; left: 50%; top: 18px; width: 1px; height: 12px; background: var(--line-2);
  box-shadow: 0 96px 0 var(--line-2);
}
.demoKutu__kelime {
  display: flex; white-space: pre;
  font-family: var(--font-read); font-size: clamp(1.375rem, 4vw, 2rem); letter-spacing: -0.01em;
}
.demoKutu__sol { text-align: right; }
.demoKutu__sag { text-align: left; }
.demoKutu__odak { color: #D2402F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .demoKutu__odak { color: #FF6B55; } }
:root[data-theme="dark"] .demoKutu__odak { color: #FF6B55; }
.demoKutu__bar { height: 3px; }
.demoKutu__alt { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.demoKutu__dugme {
  font-size: var(--t-xs); font-weight: 600; color: var(--ink-2);
  min-height: 44px; padding-inline: 10px; margin-left: -10px;
  border-radius: var(--r-input);
}
.demoKutu__dugme:hover { color: var(--ink); }
.demoKutu__hizlar { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg-2); border-radius: var(--r-chip); }
.demoKutu__hizlar button {
  min-height: 40px; min-width: 46px; padding-inline: 10px;
  border-radius: var(--r-chip); font-size: var(--t-xs); font-weight: 600;
  color: var(--ink-3); font-family: var(--font-mono);
}
.demoKutu__hizlar { padding: 3px; }
.demoKutu__hizlar button.is-aktif { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.giris__demoNot { font-size: var(--t-xs); color: var(--ink-3); text-align: center; }

/* ==========================================================================
   2. Rakam şeridi: kutu yok, sadece sayı ve ayırıcı çizgi
   ========================================================================== */
.rakamlar { border-block: 1px solid var(--line); padding: var(--s-6) 0; }
.rakamlar__ic {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 800px) { .rakamlar__ic { grid-template-columns: repeat(4, 1fr); gap: var(--s-6); } }
.rakam { display: grid; gap: 4px; align-content: start; }
.rakam strong { font-size: clamp(1.625rem, 1rem + 2.4vw, 2.5rem); letter-spacing: -0.035em; line-height: 1; }
.rakam span { font-size: var(--t-xs); color: var(--ink-2); line-height: 1.45; max-width: 26ch; }

/* ==========================================================================
   3. Kavram: ortalanmış editoryal + mekanizma çizimi
   ========================================================================== */
.kavram { padding: var(--section-y) 0; text-align: center; }
.kavram__baslik { max-width: 18ch; margin-inline: auto; }
.kavram__alt { margin: var(--s-4) auto 0; max-width: 56ch; }

.formul { margin: clamp(2.5rem, 1rem + 5vw, 4rem) 0 0; display: grid; gap: var(--s-4); }
.formul__satir {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch; gap: var(--s-2);
  padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-surface);
  background: var(--surface);
}
.formul__satir--iyi { border-color: var(--signal-line); }
.formul__kutu { display: grid; gap: 2px; align-content: center; padding: var(--s-2) 4px; text-align: center; }
.formul__etiket { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); font-weight: 600; }
.formul__deger { font-size: clamp(1.25rem, 0.9rem + 1.6vw, 2rem); letter-spacing: -0.03em; line-height: 1.1; }
.formul__birim { font-size: var(--t-xs); color: var(--ink-3); }
.formul__isaret { align-self: center; font-size: var(--t-md); color: var(--ink-4); font-family: var(--font-mono); }
.formul__kutu--sonuc { background: var(--bg-2); border-radius: var(--r-input); }
/* signal-dim zemininde üçüncül mürekkep 4.5:1'in altına düşüyor. */
.formul__kutu--sonuc .formul__etiket,
.formul__kutu--sonuc .formul__birim { color: var(--ink-2); }
.formul__satir--iyi .formul__kutu--sonuc { background: var(--signal-dim); }
.formul figcaption { font-size: var(--t-sm); color: var(--ink-2); max-width: 56ch; margin-inline: auto; margin-top: var(--s-2); }
@media (max-width: 560px) {
  .formul__satir { grid-template-columns: 1fr auto 1fr; row-gap: var(--s-3); }
  .formul__kutu--sonuc { grid-column: 1 / -1; }
  .formul__satir .formul__isaret:last-of-type { display: none; }
}

/* ==========================================================================
   4. Müfredat: yatay kaydırmalı şerit
   ========================================================================== */
.mufredat { padding: var(--section-y) 0; background: var(--bg-2); }
.mufredat__bas { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
.mufredat__bas h2, .mufredat__bas .lede { max-width: 22ch; }
.mufredat__bas .lede { max-width: 52ch; }
.serit {
  display: flex; gap: var(--s-3);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 2px var(--gutter) var(--s-4);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.serit:focus-visible { box-shadow: var(--focus); border-radius: var(--r-surface); }
.serit::-webkit-scrollbar { height: 6px; }
.serit::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
.seritKart {
  flex: 0 0 clamp(232px, 68vw, 276px);
  scroll-snap-align: start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-surface); padding: var(--s-4);
  display: grid; gap: var(--s-2); align-content: start;
}
.seritKart__ust { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.seritKart__no {
  font-size: var(--t-lg); color: var(--ink); letter-spacing: -0.04em;
  position: relative; padding-bottom: 4px;
}
.seritKart__no::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--signal); border-radius: 1px;
}
.seritKart__adet { font-size: var(--t-xs); color: var(--ink-3); }
.seritKart__ad { font-size: var(--t-md); }
.seritKart__alt { font-size: var(--t-xs); color: var(--ink-2); line-height: 1.45; min-height: 2.6em; }
.seritKart__liste { display: grid; gap: 5px; margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.seritKart__liste li { font-size: var(--t-xs); color: var(--ink-2); padding-left: 14px; position: relative; }
.seritKart__liste li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--line-2);
}
.mufredat__alt { margin-top: var(--s-4); }

/* ==========================================================================
   5. Egzersizler: değişken hücreli ızgara
   ========================================================================== */
.egzersizler { padding: var(--section-y) 0; }
.egzersizler__baslik { margin: var(--s-3) 0 var(--s-6); max-width: 20ch; }

.izgara { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 720px)  { .izgara { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .izgara { grid-template-columns: repeat(3, 1fr); } }

.hucre {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-surface); padding: var(--s-5);
  display: grid; gap: var(--s-4); align-content: start;
}
.hucre__yazi { display: grid; gap: var(--s-2); }
.hucre h3 { font-size: var(--t-md); }
.hucre p { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.55; }
@media (min-width: 720px)  { .hucre--genis { grid-column: span 2; } }
/* Hücre sayısı ile sütun sayısı tam örtüşmeli; boş kalan hücre
   "tasarlanmamış" görünüyor. Kapanış hücresi satırın tamamını alır. */
@media (min-width: 1040px) { .hucre--tam { grid-column: 1 / -1; } }
@media (min-width: 720px) and (max-width: 1039px) { .hucre--tam { grid-column: span 2; } }
.hucre--canli { grid-template-columns: 1fr; }
@media (min-width: 1040px) {
  .hucre--genis.hucre--canli { grid-template-columns: 1fr auto; align-items: center; gap: var(--s-6); }
  .hucre--tam { grid-template-columns: minmax(0, 26rem) 1fr; align-items: center; gap: var(--s-7); }
}

/* Desenli hücre: ızgaranın tamamı düz metin kutusu olmasın diye */
.hucre--desen { position: relative; overflow: hidden; }
/* Kılavuzun ne yaptığını anlatan görsel: satır çizgileri, üstünde ilerleyen
   vurgu, arkasında kapanan alan. Vurgu metnin üstüne binerse kontrast
   düşüyordu; bu yüzden metinden ayrı, kendi şeridinde duruyor. */
.hucre__desen {
  position: relative; height: 78px; border-radius: var(--r-input); overflow: hidden;
  border: 1px solid var(--line);
  /* Satır izleri: metnin kendisi değil, düzeni. Vurgu bunların üstünde yürür. */
  background:
    repeating-linear-gradient(to bottom,
      var(--line-2) 0 3px, transparent 3px 15px) 10px 9px / calc(100% - 20px) auto,
    var(--bg-2);
}
/* Okunan bölge arkada kapanır: kılavuzun asıl işi bu. */
.hucre__desen::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.hucre__desen::after {
  content: ''; position: absolute; left: 10px; right: 42%; top: 24px; height: 12px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--signal) 62%, transparent);
  box-shadow: inset 0 -2px 0 var(--signal-line);
}
@media (prefers-reduced-motion: no-preference) {
  .hucre__desen::after { animation: kilavuzKay 3.6s var(--ease-in-out) infinite; }
  @keyframes kilavuzKay {
    0%, 12%   { top: 24px; right: 42%; }
    30%, 42%  { top: 39px; right: 26%; }
    60%, 72%  { top: 54px; right: 54%; }
    90%, 100% { top: 24px; right: 42%; }
  }
  .hucre__desen::before { animation: kilavuzPerde 3.6s var(--ease-in-out) infinite; }
  @keyframes kilavuzPerde {
    0%, 12%   { height: 24px; }
    30%, 42%  { height: 39px; }
    60%, 72%  { height: 54px; }
    90%, 100% { height: 24px; }
  }
}

.hucre__etiketler { display: flex; flex-wrap: wrap; gap: 6px; }
.hucre__etiketler li {
  font-size: var(--t-xs); font-weight: 600; color: var(--ink-2);
  padding: 5px 11px; border: 1px solid var(--line); border-radius: var(--r-chip);
  background: var(--bg-2);
}

/* Canlı Schulte */
.hucre__demo { display: grid; gap: var(--s-2); justify-items: center; }
.demoSchulte {
  display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 4px;
  /* Sütun genişliği auto olduğu için ızgara büzülüp hücreler dokunulamaz
     hale geliyordu. Genişlik sabitlenip küçük ekranda esnetiliyor. */
  width: 224px; max-width: 100%; aspect-ratio: 1;
}
@media (max-width: 400px) { .demoSchulte { width: 100%; max-width: 260px; } }
.demoSchulte__hucre {
  display: grid; place-items: center;
  min-height: 44px; min-width: 44px;
  background: var(--bg-2); border-radius: 5px;
  font-size: var(--t-xs); font-weight: 500;
  transition: background-color 130ms var(--ease-out), color 130ms var(--ease-out), transform 130ms var(--ease-out);
}
.demoSchulte__hucre:not(:disabled):hover { background: var(--line); }
.demoSchulte__hucre.is-bulundu { background: var(--signal); color: var(--signal-ink); }
.demoSchulte__hucre.is-yanlis { background: var(--err-bg); color: var(--err); transform: scale(0.9); }
.demoSchulte__durum { font-size: var(--t-xs); color: var(--ink-3); font-family: var(--font-mono); }

/* Canlı takistoskop */
.hucre__demo--flas {
  min-height: 104px; display: grid; place-items: center;
  background: var(--bg-2); border-radius: var(--r-input);
}
.demoFlas { font-family: var(--font-read); font-size: var(--t-lg); }
.demoFlas--odak { color: var(--ink-4); font-size: var(--t-lg); }
.demoFlas--maske { font-family: var(--font-mono); color: var(--ink-4); letter-spacing: -0.12em; }
.demoFlas--bos { color: transparent; }

/* ==========================================================================
   6. Dürüstlük: iki sütun karşılaştırma
   ========================================================================== */
.dogrular { padding: var(--section-y) 0; background: var(--bg-2); }
.dogrular__baslik { max-width: 16ch; }
.dogrular .lede { margin-top: var(--s-3); }
.dogrular__ikili { display: grid; gap: var(--s-5); margin-top: var(--s-7); }
@media (min-width: 820px) { .dogrular__ikili { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }

.dogrular__sutun h3 {
  font-size: var(--t-base); padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--line-2); margin-bottom: var(--s-4);
}
.dogrular__sutun--evet h3 { border-bottom-color: var(--signal-line); }
.dogrular__sutun ul { display: grid; gap: var(--s-4); }
.dogrular__sutun li { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.55; padding-left: 22px; position: relative; }
.dogrular__sutun li strong { color: var(--ink); display: block; margin-bottom: 2px; font-weight: 600; }
.dogrular__sutun li::before {
  position: absolute; left: 0; top: 0.05em; font-weight: 700; font-size: var(--t-base);
}
.dogrular__sutun--hayir li::before { content: '×'; color: var(--ink-4); }
.dogrular__sutun--evet li::before { content: '+'; color: var(--signal-line); }
.dogrular__kaynak { margin-top: var(--s-6); font-size: var(--t-xs); color: var(--ink-3); }
.dogrular__kaynak a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink-2); }
.dogrular__kaynak a:hover { color: var(--ink); }

/* ==========================================================================
   7. Sık sorulanlar: akordeon
   ========================================================================== */
.sss { padding: var(--section-y) 0; }
.sss__baslik { margin: 0 0 var(--s-6); }
.akordeon { display: grid; }
.akordeon__oge { border-top: 1px solid var(--line); }
.akordeon__oge:last-child { border-bottom: 1px solid var(--line); }
.akordeon__oge summary {
  list-style: none; cursor: pointer;
  padding: var(--s-4) 40px var(--s-4) 0;
  font-size: var(--t-base); font-weight: 600; letter-spacing: var(--tr-snug);
  position: relative;
  transition: color var(--d-fast);
}
.akordeon__oge summary::-webkit-details-marker { display: none; }
.akordeon__oge summary:hover { color: var(--ink-2); }
.akordeon__oge summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; translate: 0 -50%;
  width: 12px; height: 12px;
  background: var(--ink-3);
  clip-path: polygon(46% 0, 54% 0, 54% 46%, 100% 46%, 100% 54%, 54% 54%, 54% 100%, 46% 100%, 46% 54%, 0 54%, 0 46%, 46% 46%);
  transition: transform var(--d-base) var(--ease-out);
}
.akordeon__oge[open] summary::after { transform: rotate(45deg) scale(1.05); }
.akordeon__ic { padding: 0 var(--s-6) var(--s-5) 0; }
.akordeon__ic p { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.65; max-width: 62ch; }
@media (prefers-reduced-motion: no-preference) {
  .akordeon__oge[open] .akordeon__ic { animation: akordeonAc 300ms var(--ease-out); }
  @keyframes akordeonAc { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}

/* ==========================================================================
   8. Kapanış
   ========================================================================== */
.kapanis { padding: var(--section-y) 0; border-top: 1px solid var(--line); }
.kapanis__ic { display: grid; gap: var(--s-4); justify-items: center; text-align: center; max-width: 620px; }
.kapanis__ic .lede { margin-inline: auto; }
.kapanis__ic .btn { margin-top: var(--s-2); }
.kapanis__not { font-size: var(--t-xs); color: var(--ink-3); }

/* --- Ara çağrı şeridi ----------------------------------------------------- */
/* Giriş ile kapanış arasında beş bölüm boyunca hiç dönüşüm yolu yoktu.
   Bu şerit kavram anlatıldıktan hemen sonra, merak en yüksekken duruyor. */
.araCta { padding: 0 0 var(--section-y); }
.araCta__ic {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-surface); padding: var(--s-5);
  display: grid; gap: var(--s-4);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 860px) {
  .araCta__ic { grid-template-columns: 1fr auto; align-items: center; gap: var(--s-7); padding: var(--s-6); }
}
.araCta__yazi h2 { font-size: var(--t-lg); }
.araCta__yazi p { font-size: var(--t-sm); color: var(--ink-2); margin-top: var(--s-2); max-width: 52ch; line-height: 1.55; }
.araCta__butonlar { display: flex; flex-wrap: wrap; gap: var(--s-2); }
@media (max-width: 520px) { .araCta__butonlar .btn { flex: 1 1 100%; } }

/* --- Müfredat şeridi altı ------------------------------------------------- */
.mufredat__alt { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }

/* --- Egzersiz ızgarası altı ----------------------------------------------- */
.izgaraAlt {
  display: grid; gap: var(--s-3); justify-items: start;
  margin-top: var(--s-5); padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
@media (min-width: 720px) {
  .izgaraAlt { grid-template-columns: 1fr auto; align-items: center; gap: var(--s-5); }
}
.izgaraAlt p { font-size: var(--t-sm); color: var(--ink-2); max-width: 56ch; }

/* --- Dürüstlük bölümü köprüsü --------------------------------------------- */
.dogrular__kopru { margin-top: var(--s-5); }
.dogrular__kopru a {
  display: grid; gap: 3px; padding: var(--s-4) var(--s-5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-surface);
  transition: border-color var(--d-fast), transform var(--d-fast) var(--ease-out);
}
.dogrular__kopru a:hover { border-color: var(--ink-3); transform: translateY(-2px); }
.dogrular__kopru strong { font-size: var(--t-base); }
.dogrular__kopru span { font-size: var(--t-sm); color: var(--ink-2); }

/* --- SSS altı ------------------------------------------------------------- */
.sss__daha { margin-top: var(--s-5); font-size: var(--t-sm); }
.sss__daha a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; }
.sss__daha a:hover { color: var(--ink); }