/* Klinik Kelime — uygulamanın renkleri (uygulama/src/ui/tema.ts) ve yazı tipleri (Instrument Sans + Newsreader, yerel).
   Tanıtım sayfası (TALIMAT-42): tek vurgu rengi (teal); beş modül rengi yalnız sınav şeridinde ve modül kartlarının kenarında. */
@font-face { font-family: "Instrument Sans"; font-weight: 400; font-display: swap; src: url(/yazi/instrument-400.woff) format("woff"); }
@font-face { font-family: "Instrument Sans"; font-weight: 600; font-display: swap; src: url(/yazi/instrument-600.woff) format("woff"); }
@font-face { font-family: "Newsreader"; font-weight: 400; font-display: swap; src: url(/yazi/newsreader-400.woff) format("woff"); }

:root {
  color-scheme: light dark;
  --paper: #f7f8f7; --card: #ffffff; --ink: #16201f; --soft: #5a6a68; --rule: #dfe4e2;
  --teal: #0e6a62; --teal-soft: #e4f0ee; --on-teal: #ffffff; --clay: #9a5a28; --clay-soft: #f6ebe1;
  --good: #1f6b43; --good-soft: #e5f1e9; --bad: #9b2f33; --bad-soft: #f8e8e8;
  --m-kelime: #0e6a62; --m-dilbilgisi: #2f6f93; --m-cumle: #9a5a28; --m-ceviri: #5f6f22; --m-okuma: #7a4a86;
  --frame: #1b2423; --shadow: 0 1px 2px rgba(22, 32, 31, .06), 0 12px 32px -12px rgba(22, 32, 31, .22);
  --ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --read: "Newsreader", Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #111817; --card: #18201f; --ink: #e8eeec; --soft: #97a6a3; --rule: #2b3634;
    --teal: #5cc6b8; --teal-soft: #15302c; --on-teal: #0b1413; --clay: #dba273; --clay-soft: #2e2219;
    --good: #73c796; --good-soft: #15291d; --bad: #e38d8d; --bad-soft: #2b1819;
    --m-kelime: #5cc6b8; --m-dilbilgisi: #82b8d8; --m-cumle: #dba273; --m-ceviri: #b9c66f; --m-okuma: #c7a0d2;
    --frame: #050909; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 40px -16px rgba(0, 0, 0, .7);
  }
}

* { box-sizing: border-box; }
.gizli { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.6 var(--ui); overflow-wrap: break-word; }
main, .ust-ic, .alt-ic { max-width: 760px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.ust-ic, .alt-ic { max-width: 1120px; }
main { padding-top: 8px; padding-bottom: 48px; }
a { color: var(--teal); }
a:focus-visible, button:focus-visible, summary:focus-visible, .dugme:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { line-height: 1.25; font-weight: 600; }
h1 { font-size: 28px; margin: 8px 0 8px; }
h2 { font-size: 20px; margin: 36px 0 10px; }
h3 { font-size: 16.5px; margin: 0 0 4px; }
p, li { margin: 0 0 10px; }
ul { padding-left: 20px; }
.soluk { color: var(--soft); font-size: 14.5px; }
.okuma { font-family: var(--read); font-size: 19px; line-height: 1.5; }

/* Üst ve alt şerit */
.ust { border-bottom: 1px solid var(--rule); }
.ust-ic { display: flex; align-items: center; gap: 10px; min-height: 56px; }
.marka { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 600; }
.marka img { width: 32px; height: 32px; border-radius: 8px; }
.alt { border-top: 1px solid var(--rule); margin-top: 24px; }
.alt-ic { padding-top: 20px; padding-bottom: 32px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14.5px; color: var(--soft); }
.alt-ic p { width: 100%; margin: 4px 0 0; }

/* Düğmeler */
.dugme { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border-radius: 12px;
  font-weight: 600; text-decoration: none; line-height: 1.2; border: 1px solid transparent; }
.dugme.birincil { background: var(--teal); color: var(--on-teal); }
.dugme.birincil:hover { filter: brightness(1.08); }
.dugme.pasif { background: var(--teal-soft); color: var(--teal); border-color: var(--teal-soft); cursor: default; filter: none; }
.dugme.ikincil { color: var(--ink); border-color: var(--rule); background: var(--card); }
.dugme.ikincil:hover { border-color: var(--teal); }

/* Kartlar */
.kart { background: var(--card); border: 1px solid var(--rule); border-radius: 14px; padding: 14px 16px; }
.fiyat { font-size: 26px; font-weight: 600; margin: 2px 0 6px; font-variant-numeric: tabular-nums; }

/* SSS */
details { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 12px 16px; margin-bottom: 10px; }
summary { cursor: pointer; font-weight: 600; }
details[open] summary { margin-bottom: 8px; }

/* Gizlilik ve koşullar */
.tablo { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--card); }
th, td { text-align: left; vertical-align: top; padding: 8px 10px; border: 1px solid var(--rule); }
th { width: 30%; }
.kutu { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 4px 16px 12px; }
@media (max-width: 480px) {
  th, td { display: block; width: auto; border-top: 0; }
  tr:first-child th { border-top: 1px solid var(--rule); }
  th { background: var(--paper); }
}
.not { margin-top: 10px; }
.dil { float: right; font-size: 14px; margin-top: 10px; }
.taslak { background: var(--clay-soft); color: var(--ink); border-radius: 10px; padding: 10px 14px; font-size: 14.5px; }

/* ===== Tanıtım sayfası ============================================================================================ */
main.tanitim { max-width: 1120px; padding-top: 0; padding-bottom: 24px; }
.tanitim h2 { font-family: var(--read); font-weight: 400; font-size: 30px; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 10px; }
.blok { padding: 56px 0 0; }
.bolum-alt { color: var(--soft); max-width: 40em; margin-bottom: 22px; }

/* Giriş */
.giris { display: grid; gap: 32px; padding: 36px 0 8px; align-items: center; }
.ust-baslik { color: var(--teal); font-weight: 600; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 10px; }
.giris h1 { font-family: var(--read); font-weight: 400; font-size: 40px; line-height: 1.08; letter-spacing: -.015em; margin: 0 0 14px; }
.giris-alt { font-size: 18px; line-height: 1.5; color: var(--soft); max-width: 30em; margin: 0 0 22px; }
.dugmeler { display: flex; flex-wrap: wrap; gap: 10px; }
.giris-not { margin: 16px 0 0; font-size: 14px; color: var(--soft); }
.giris-gorsel { display: flex; justify-content: center; }

/* Telefon çerçevesi (markasız, CSS) */
.telefon { position: relative; width: 260px; max-width: 100%; padding: 22px 9px 14px; border-radius: 34px; background: var(--frame); box-shadow: var(--shadow); }
.telefon::before { content: ""; position: absolute; top: 7px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #2c3735; z-index: 1; }
.telefon img { display: block; width: 100%; height: auto; border-radius: 14px; background: var(--paper); }
.giris-gorsel .telefon { width: 280px; }

/* Sınav sayacı */
.sayac { margin: 28px 0 0; }
.sayac p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; padding: 12px 16px; border-radius: 12px;
  background: var(--teal-soft); color: var(--ink); font-size: 15px; }
.sayac-gun { font-weight: 600; font-size: 17px; color: var(--teal); font-variant-numeric: tabular-nums; }
.sayac a { margin-left: auto; font-size: 14px; }

/* Sorun / çözüm */
.sorunlar { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.sorunlar li { margin: 0; padding: 18px 18px 16px; }
.dert { font-family: var(--read); font-size: 19px; line-height: 1.35; color: var(--soft); margin: 0 0 12px; }
.sorunlar h3 { color: var(--teal); }
.sorunlar p:last-child { margin: 0; color: var(--soft); font-size: 15px; }

/* Sınav şeridi ve modül kartları */
.serit { margin: 0 0 22px; }
.serit ol { list-style: none; display: flex; gap: 3px; padding: 0; margin: 0; }
.serit li { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.serit li::before { content: ""; display: block; height: 14px; border-radius: 4px; background: var(--m); }
.serit-ad { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.serit-no { font-size: 12px; color: var(--soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.serit .m-kelime .serit-ad, .serit .m-kelime .serit-no { visibility: hidden; }
.serit figcaption { margin-top: 8px; font-size: 13px; color: var(--soft); }
.m-kelime { --m: var(--m-kelime); } .m-dilbilgisi { --m: var(--m-dilbilgisi); } .m-cumle { --m: var(--m-cumle); }
.m-ceviri { --m: var(--m-ceviri); } .m-okuma { --m: var(--m-okuma); }
.modul-duzen { display: grid; gap: 28px; align-items: start; }
.moduller { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.moduller li { margin: 0; border-left: 4px solid var(--m); }
.modul-ust { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; }
.aralik { font-size: 13.5px; color: var(--soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.moduller p { margin: 2px 0 0; color: var(--soft); font-size: 15px; }
.moduller .madde { color: var(--ink); font-weight: 600; font-size: 14.5px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.modul-gorsel { display: none; }

/* Nasıl çalışır */
.adimlar { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 36px; }
.adimlar li { margin: 0; display: grid; gap: 14px; justify-items: center; align-content: start; text-align: center; }
.adimlar .telefon { width: 220px; }
.adimlar h3 { font-size: 17px; margin: 4px 0 0; display: flex; gap: 10px; align-items: center; justify-content: center; }
.adim-no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--teal-soft); color: var(--teal);
  font-size: 14px; flex: none; }
.adimlar p { color: var(--soft); max-width: 22em; margin: 0; font-size: 15px; }

/* Örnek sorular */
.ornekler { display: grid; gap: 16px; align-items: start; }
.soru { padding: 18px 18px 14px; }
.soru-tur { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--teal); margin: 0 0 8px; }
.soru-kok { font-family: var(--read); font-size: 19px; line-height: 1.5; margin: 0 0 14px; }
.bosluk { color: var(--clay); letter-spacing: .08em; white-space: nowrap; }
.siklar { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 8px; }
.siklar li { margin: 0; }
.sik { width: 100%; display: flex; gap: 12px; align-items: flex-start; text-align: left; font: inherit; font-size: 16px; line-height: 1.4; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; padding: 11px 12px; cursor: pointer; min-height: 48px; }
.sik:hover { border-color: var(--teal); }
.harf { flex: none; font-weight: 600; color: var(--soft); min-width: 1.2em; }
.sik.dogru { border-color: var(--good); background: var(--good-soft); }
.sik.dogru .harf { color: var(--good); }
.sik.yanlis { border-color: var(--bad); background: var(--bad-soft); }
.sik.yanlis .harf { color: var(--bad); }
.sik.cevaplandi:not(.dogru):not(.yanlis) { opacity: .72; }
.sonuc:empty { display: none; }
.sonuc { margin: 12px 0 4px; padding: 12px 14px; border-radius: 10px; background: var(--paper); border: 1px solid var(--rule); }
.sonuc-baslik { font-weight: 600; margin: 0 0 6px; }
.sonuc-baslik:focus { outline: none; }
.sonuc-baslik.iyi { color: var(--good); } .sonuc-baslik.kotu { color: var(--bad); }
.aciklamalar { list-style: none; padding: 0; margin: 0 0 8px; }
.aciklamalar li { margin: 0 0 8px; font-size: 15px; }
.aciklamalar li.dogru strong { color: var(--good); }
.ceviri { font-size: 15px; margin: 0 0 8px; }
.ceviri .etiket { color: var(--soft); }
.ceviri mark { background: var(--clay-soft); color: inherit; padding: 0 2px; border-radius: 3px; }
.yeniden { font: inherit; font-size: 14.5px; font-weight: 600; color: var(--teal); background: none; border: 0; padding: 8px 0; cursor: pointer; min-height: 40px; }
.cozum { margin: 8px 0 0; padding: 0; border: 0; background: none; }
.cozum summary { font-size: 14.5px; color: var(--soft); font-weight: 400; padding: 8px 0; }
.dogru-cevap { font-size: 15px; }

/* Ücretsiz deneme */
.deneme { padding: 22px 20px; background: var(--teal-soft); border-color: var(--teal-soft); }
.deneme-buyuk { font-family: var(--read); font-size: 22px; line-height: 1.3; margin: 0 0 10px; }
.tikler { list-style: none; padding: 0; margin: 12px 0 0; }
.tikler li { position: relative; padding-left: 26px; margin: 0 0 6px; }
.tikler li::before { content: ""; position: absolute; left: 4px; top: .45em; width: 10px; height: 6px; border-left: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal); transform: rotate(-45deg); }

/* Fiyat */
.fiyatlar { display: grid; gap: 12px; }
.fiyat-kart { padding: 20px; position: relative; }
.fiyat-kart .soluk { margin: 0; }
.one-cikan { border: 2px solid var(--teal); }
.rozet { position: absolute; top: -12px; left: 18px; margin: 0; padding: 2px 10px; border-radius: 999px; background: var(--teal); color: var(--on-teal);
  font-size: 13px; font-weight: 600; }
.rozet.yakinda { background: var(--card); color: var(--soft); border: 1px solid var(--rule); }
.fiyat-not { margin: 12px 0 0; color: var(--soft); font-size: 15px; }
.kazanc { margin: 10px 0 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fiyat-tek { margin: 12px 0 0; font-size: 15px; font-variant-numeric: tabular-nums; }

/* SSS (tanıtım) */
.sss { max-width: 760px; }

/* Son çağrı */
.son-cagri { margin: 64px 0 24px; padding: 36px 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--rule); text-align: center; }
.son-cagri h2 { margin-bottom: 18px; }

/* Kaydırmada belirme (yalnız betik varken ve hareket azaltılmamışsa; site.js) */
@media (prefers-reduced-motion: no-preference) {
  .belir.bekle { opacity: 0; transform: translateY(10px); }
  .belir.gorundu { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
}

@media (min-width: 640px) {
  .sorunlar { grid-template-columns: repeat(3, 1fr); }
  .fiyatlar { grid-template-columns: repeat(2, minmax(0, 340px)); }
  .fiyatlar.uclu { grid-template-columns: repeat(2, minmax(0, 340px)); }
  .adimlar { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .adimlar .telefon { width: 100%; max-width: 220px; }
  .serit .m-kelime .serit-ad, .serit .m-kelime .serit-no { visibility: visible; }
}
@media (min-width: 900px) {
  .fiyatlar.uclu { grid-template-columns: repeat(3, minmax(0, 340px)); }
  .giris { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); padding: 64px 0 16px; }
  .giris h1 { font-size: 56px; }
  .giris-alt { font-size: 19px; }
  .giris-gorsel .telefon { width: 300px; }
  .tanitim h2 { font-size: 36px; }
  .blok { padding-top: 88px; }
  .modul-duzen { grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; }
  .modul-gorsel { display: block; position: sticky; top: 24px; }
  .modul-gorsel .telefon { width: 260px; }
  .ornekler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Üretildi (yayinla.py): sınav şeridi genişlikleri, moduller.json → adet */
.serit .m-kelime { flex-grow: 5; }
.serit .m-dilbilgisi { flex-grow: 15; }
.serit .m-cumle { flex-grow: 21; }
.serit .m-ceviri { flex-grow: 12; }
.serit .m-okuma { flex-grow: 27; }