/* Copyright (c) Sercan Külcü. Tüm hakları saklıdır. */
/* Algoritmik Oyun Kuramı ders notları: ortak stil (files/agt/notlar/Bolum_NN_*_Ders_Notu.html)

   Tasarım kararları
   1. Kapsam. Bütün kurallar .ds-notes kapsayıcısının altındadır; sitenin teması (masthead, alt bilgi,
      .page__content) etkilenmez. Tek istisna @media print bloğudur: yazdırırken site çerçevesi gizlenir.
   2. Renk. Sabit renk yalnız aşağıdaki token bloğundadır ve deck/deck.css'teki --ds-* değerlerinin
      aynısıdır; böylece sunumlardan alınan SVG'ler (class="txt", "lbl", "grid" …, style="fill:var(--ds-…)")
      notta değişmeden çalışır. Açık/koyu tema sitenin --global-* değişkenlerinden gelir; koyu temada
      vurgu renkleri deck.css'teki gibi açılır. Notlara özgü tonlar (--nt-*) yalnız --ds-*'tan türetilir.
   3. Okunabilirlik. Gövde metni 17 px, satır aralığı 1,7; metin, kutu, tablo ve şekiller aynı 740 px sütunda ortalanır (satır başına ~80 karakter).
      Şekil, tablo ve kod blokları bu sütundan biraz geniş olabilir (en çok 860 px); metin sütunu
      her zaman ortada ve sola dayalıdır (iki yana yaslama Türkçe heceleme olmadan boşluk açar).
   4. Başlık hiyerarşisi. h1 bölüm adı; h2 "N.k" ana bölümler (üstte ince çizgi); h3 "N.k.m" alt
      bölümler. Numaralar HTML'de elle yazılır (sunumla birebir eşleşsin, içindekiler kendi bağlantısını
      taşısın); .nt-num yalnız rengini verir.
   5. Kutular. Dört tür vardır ve başlıkları sabittir: Tanım N.k (mavi kenar), Teorem N.k (Ad)
      (vurgu kenarı), Örnek N.k (yüzey rengi) ve Sık yapılan hata (kırmızı kenar). Renk tek ipucu
      değildir: her kutunun yazılı başlığı vardır.
   6. Şekiller. <figure class="nt-fig"> + numaralı <figcaption>. SVG'ler viewBox'a göre ölçeklenir;
      --w değişkeni şeklin en büyük genişliğini verir. Geniş şekiller dar ekranda küçülüp okunmaz hâle
      gelmesin diye .nt-fig--wide en az 540 px'te kalır ve yalnız şeklin kendi kutusu yatay kayar;
      sayfanın kendisi hiçbir genişlikte yatay taşmaz.
   7. Tablolar .nt-tablewrap içindedir (dar ekranda kendi içinde kayar); sayılar tabular-nums ile hizalanır.
   8. Etkileşimli bileşenler sunumların deck/kaydirici.js dosyasından gelir (aynı data-widget adları).
      Yazdırmada varsayılan değerle çizilmiş hâlleri görünür.
   9. Yazdırma (A4). @page kenar boşlukları 18/17 mm; renkler açık temaya sabitlenir; şekil, kutu,
      tablo ve kod blokları sayfa sonunda bölünmez; başlıklar sayfanın son satırında yalnız kalmaz;
      <details> içindeki cevaplar yazdırmada açılır (sayfadaki küçük betik beforeprint'te açar).
*/

/* ---------- token bloğu ---------- */
.ds-notes {
  --ds-text: var(--global-text-color, #1f2937);
  --ds-bg: var(--global-bg-color, #ffffff);
  --ds-link: var(--global-link-color, #2563eb);
  --ds-border-base: var(--global-border-color, #d1d5db);
  --ds-accent: #a61b1b;
  --ds-good: #1f8a4c;
  --ds-bad: #c0392b;
  --ds-surface: color-mix(in srgb, var(--ds-link) 2.5%, var(--ds-bg));
  --ds-surface-strong: color-mix(in srgb, var(--ds-link) 8%, var(--ds-bg));
  --ds-border: color-mix(in srgb, var(--ds-link) 38%, var(--ds-border-base));
  --ds-muted: color-mix(in srgb, var(--ds-text) 62%, var(--ds-bg));
  --ds-node: color-mix(in srgb, var(--ds-link) 16%, var(--ds-bg));
  --ds-hot: color-mix(in srgb, #e9a23b 45%, var(--ds-bg));

  /* notlara özgü tonlar: yalnız --ds-* tokenlarından */
  --nt-measure: 100%;
  --nt-wide: 740px;
  --nt-soft: color-mix(in srgb, var(--ds-link) 5%, var(--ds-bg));
  --nt-rule: color-mix(in srgb, var(--ds-border-base) 70%, var(--ds-bg));
  --nt-def: var(--ds-link);
  --nt-thm: var(--ds-accent);
  --nt-err: var(--ds-bad);
  --nt-err-soft: color-mix(in srgb, var(--ds-bad) 7%, var(--ds-bg));
  --nt-code-bg: color-mix(in srgb, var(--ds-text) 5%, var(--ds-bg));
}

html[data-theme="dark"] .ds-notes {
  --ds-accent: #f07a7a;
  --ds-good: #5ccf8c;
  --ds-bad: #f08a7e;
}

/* ---------- temel ---------- */
.ds-notes,
.ds-notes *,
.ds-notes *::before,
.ds-notes *::after { box-sizing: border-box; }

.ds-notes {
  width: 100%;
  max-width: var(--nt-wide);
  margin: 0 auto 3rem;
  color: var(--ds-text);
  font-size: 17px;
  line-height: 1.7;
  overflow-wrap: break-word;
  hyphens: manual;
}

.ds-notes p,
.ds-notes ul,
.ds-notes ol,
.ds-notes dl,
.ds-notes .nt-math,
.ds-notes blockquote {
  max-width: var(--nt-measure);
}

.ds-notes p { margin: 0 0 0.9em; }
.ds-notes ul, .ds-notes ol { margin: 0 0 1em; padding-left: 1.4em; }
.ds-notes li { margin: 0 0 0.35em; }
.ds-notes li > ul, .ds-notes li > ol { margin: 0.35em 0 0; }
.ds-notes a { color: var(--ds-link); text-underline-offset: 2px; }
.ds-notes strong { font-weight: 700; }
.ds-notes sub, .ds-notes sup { font-size: 0.72em; line-height: 0; }
.ds-notes [lang="en"] { font-style: italic; }
.ds-notes .nt-en-plain [lang="en"] { font-style: normal; }

/* ---------- başlık bloğu ---------- */
.nt-head { margin: 0.5rem 0 1.6rem; padding: 0 0 1.2rem; border-bottom: 1.5px solid var(--ds-border); }
.nt-kicker {
  margin: 0 0 0.4rem;
  color: var(--ds-link);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ds-notes h1 {
  margin: 0 0 0.6rem;
  color: var(--ds-accent);
  font-size: clamp(28px, 5vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.nt-lead { color: var(--ds-text); font-size: 18px; line-height: 1.65; }

.nt-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 1rem 0 0 !important;
  padding: 0 !important;
  list-style: none;
  max-width: none !important;
}
.nt-links li { margin: 0; }
.nt-links a {
  display: inline-block;
  padding: 3px 12px;
  border: 1.5px solid var(--ds-border);
  border-radius: 999px;
  background: var(--ds-bg);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.6;
  text-decoration: none;
}
.nt-links a:hover, .nt-links a:focus-visible { background: var(--ds-surface-strong); }

/* öğrenme çıktıları ve içindekiler */
.nt-goals, .nt-toc {
  max-width: var(--nt-wide);
  margin: 1.2rem 0;
  padding: 0.9rem 1.2rem 0.6rem;
  border: 1.5px solid var(--ds-border);
  border-radius: 12px;
  background: var(--ds-surface);
}
.nt-goals > h2, .nt-toc > h2 {
  margin: 0 0 0.5rem !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--ds-muted);
  font-size: 13px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nt-goals dl { margin: 0 0 0.4rem; max-width: none; }
.nt-goals dt { margin: 0; font-size: 16px; font-weight: 700; }
.nt-goals dd { margin: 0 0 0.5rem; font-size: 16px; line-height: 1.55; }
.nt-toc ol { margin: 0 0 0.4rem; padding: 0; list-style: none; max-width: none; }
.nt-toc > ol { columns: 2 300px; column-gap: 2rem; }
.nt-toc li { margin: 0 0 0.15rem; break-inside: avoid; }
.nt-toc > ol > li { margin-bottom: 0.45rem; }
.nt-toc > ol > li > a { font-weight: 700; }
.nt-toc ol ol { margin: 0.15rem 0 0 1.1rem; font-size: 15px; }
.nt-toc a { text-decoration: none; }
.nt-toc a:hover { text-decoration: underline; }

/* ---------- başlıklar ---------- */
.ds-notes h2 {
  margin: 2.6rem 0 0.9rem;
  padding-top: 1.1rem;
  border-top: 1.5px solid var(--ds-border);
  color: var(--ds-text);
  font-size: clamp(23px, 3.6vw, 28px);
  line-height: 1.25;
  scroll-margin-top: 4.5rem;
}
.ds-notes h3 {
  margin: 2rem 0 0.6rem;
  font-size: 20px;
  line-height: 1.3;
  scroll-margin-top: 4.5rem;
}
.ds-notes h4 { margin: 1.3rem 0 0.4rem; font-size: 17px; }
.nt-num { margin-right: 0.45em; color: var(--ds-link); font-variant-numeric: tabular-nums; }

/* ---------- formüller ---------- */
.ds-notes .nt-math {
  margin: 0.4rem 0 1rem;
  padding: 0.55rem 1rem;
  border-left: 3px solid var(--ds-border);
  background: var(--ds-surface);
  font-size: 17.5px;
  line-height: 1.6;
  overflow-x: auto;
}
.nt-math--c { text-align: center; }
.ds-notes .m { font-style: italic; white-space: nowrap; }
.ds-notes .nw { white-space: nowrap; }

/* ---------- kutular ---------- */
.nt-box {
  max-width: none;
  margin: 1.3rem 0 1.4rem;
  padding: 0.85rem 1.2rem 0.3rem;
  border: 1.5px solid var(--ds-border);
  border-left-width: 5px;
  border-radius: 10px;
  background: var(--ds-bg);
}
.nt-box > p:last-child, .nt-box > ul:last-child, .nt-box > ol:last-child { margin-bottom: 0.6rem; }
.nt-box__title {
  display: block;
  margin: 0 0 0.45rem;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.nt-box--tanim { border-left-color: var(--nt-def); background: var(--ds-surface); }
.nt-box--tanim .nt-box__title { color: var(--nt-def); }
.nt-box--teorem { border-left-color: var(--nt-thm); background: var(--ds-surface); }
.nt-box--teorem .nt-box__title { color: var(--nt-thm); }
.nt-box--ornek { border-left-color: var(--ds-good); background: var(--nt-soft); }
.nt-box--ornek .nt-box__title { color: var(--ds-good); }
.nt-box--hata { border-color: color-mix(in srgb, var(--nt-err) 45%, var(--ds-border-base)); border-left-color: var(--nt-err); background: var(--nt-err-soft); }
.nt-box--hata .nt-box__title { color: var(--nt-err); }
.nt-box .nt-math { background: var(--ds-bg); }
.nt-box ol.nt-steps { padding-left: 1.6em; }

.nt-proof { margin: 0.2rem 0 1rem; }
.nt-proof > p:first-child::before { content: "İspat. "; font-weight: 700; font-style: italic; }
.nt-qed { float: right; color: var(--ds-muted); }

/* ---------- şekiller ---------- */
.nt-fig {
  --w: 600px;
  display: block;
  margin: 1.4rem 0 1.6rem;
  padding: 0.9rem 0.9rem 0.6rem;
  border: 1.5px solid var(--nt-rule);
  border-radius: 12px;
  background: var(--ds-surface);
}
.nt-fig__box { overflow-x: auto; overflow-y: hidden; }
.nt-fig__row { display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem; justify-content: center; align-items: center; }
.nt-fig svg.ds-svg { display: block; width: 100%; max-width: var(--w); height: auto; margin: 0 auto; overflow: visible; }
.nt-fig--wide svg.ds-svg { min-width: 540px; }
.nt-fig__row > svg.ds-svg { flex: 1 1 260px; }
.nt-fig figcaption {
  display: block;
  max-width: var(--nt-measure);
  margin: 0.7rem auto 0;
  font-family: inherit;
  color: var(--ds-muted);
  font-size: 15px;
  line-height: 1.55;
}
.nt-fig figcaption b { color: var(--ds-text); }
.nt-fig .ds-widget { max-width: 720px; margin: 0 auto; }

/* sunum SVG sınıfları (deck.css ile aynı) */
.ds-svg .box { fill: var(--ds-node); stroke: var(--ds-link); stroke-width: 1.5; }
.ds-svg .box-empty { fill: none; stroke: var(--ds-link); stroke-width: 1.5; }
.ds-svg .line { stroke: var(--ds-link); stroke-width: 2; fill: none; }
.ds-svg .axis { stroke: var(--ds-muted); stroke-width: 1.2; fill: none; }
.ds-svg .grid { stroke: var(--ds-border); stroke-width: 0.6; stroke-dasharray: 3 4; fill: none; }
.ds-svg .txt { fill: var(--ds-text); font: 600 15px system-ui, sans-serif; }
.ds-svg .lbl { fill: var(--ds-muted); font: 13px system-ui, sans-serif; }
.ds-svg .ah { fill: var(--ds-link); }
.ds-svg .curve { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- tablolar ---------- */
.nt-tablewrap { max-width: 100%; margin: 1rem 0 1.4rem; overflow-x: auto; }
.nt-table {
  border-collapse: collapse;
  font-size: 15.5px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.nt-table caption {
  caption-side: bottom;
  padding: 0.5rem 0 0;
  color: var(--ds-muted);
  font-size: 14.5px;
  text-align: left;
}
.nt-table th, .nt-table td {
  padding: 6px 12px;
  border: 1px solid var(--ds-border);
  text-align: left;
  vertical-align: top;
}
.nt-table thead th { background: var(--ds-surface-strong); font-size: 14.5px; }
.nt-table tbody th { background: var(--ds-surface); font-weight: 700; white-space: nowrap; }
.nt-table--matrix td, .nt-table--matrix th { text-align: center; white-space: nowrap; min-width: 4.2em; }
.nt-table--matrix thead th:first-child { background: transparent; border-top-color: transparent; border-left-color: transparent; }
.nt-table .is-ne { background: color-mix(in srgb, var(--ds-good) 16%, var(--ds-bg)); font-weight: 700; }
.nt-table .is-out { color: var(--ds-muted); text-decoration: line-through; }
.nt-table--wide { width: 100%; }
.nt-table code { font-size: 0.9em; }

/* ---------- kod ---------- */
.ds-notes pre.nt-code {
  max-width: 100%;
  margin: 1rem 0 1.2rem;
  padding: 0.9rem 1.1rem;
  border: 1.5px solid var(--nt-rule);
  border-radius: 10px;
  background: var(--nt-code-bg);
  color: var(--ds-text);
  font: 14.5px/1.55 ui-monospace, "Cascadia Mono", Consolas, monospace;
  overflow-x: auto;
  white-space: pre;
}
.ds-notes pre.nt-code code { padding: 0; background: none; font: inherit; color: inherit; }
.ds-notes :not(pre) > code {
  padding: 0.05em 0.35em;
  border-radius: 4px;
  background: var(--nt-code-bg);
  color: var(--ds-text);
  font: 0.88em ui-monospace, "Cascadia Mono", Consolas, monospace;
}
.nt-code .kw { color: var(--ds-link); font-weight: 700; }
.nt-code .cm { color: var(--ds-muted); font-style: italic; }

/* ---------- bölüm sonu ---------- */
.nt-concepts { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 1rem !important; padding: 0 !important; list-style: none; max-width: none !important; }
.nt-concepts li { margin: 0; }
.nt-concepts a {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-surface);
  font-size: 15px;
  text-decoration: none;
}
.nt-concepts a [lang="en"] { color: var(--ds-muted); font-size: 0.9em; }

.nt-quiz { max-width: none; padding-left: 1.4em; }
.nt-quiz > li { margin: 0 0 1.1rem; }
.nt-quiz details {
  margin: 0.4rem 0 0;
  padding: 0.35rem 0.9rem;
  border: 1.5px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-surface);
}
.nt-quiz summary { color: var(--ds-link); font-weight: 700; cursor: pointer; }
.nt-quiz details[open] summary { margin-bottom: 0.4rem; }
.nt-quiz details p:last-child { margin-bottom: 0.3rem; }

.nt-refs { padding-left: 1.4em; font-size: 15.5px; }
.nt-refs li { margin-bottom: 0.45rem; }
.nt-foot { margin-top: 2.4rem; padding-top: 0.8rem; border-top: 1px solid var(--nt-rule); color: var(--ds-muted); font-size: 14px; }

/* ---------- dar ekran ---------- */
@media (max-width: 600px) {
  .ds-notes { font-size: 16.5px; line-height: 1.65; }
  .ds-notes .m { white-space: normal; }
  .nt-fig { padding: 0.6rem 0.5rem 0.5rem; }
  .nt-box { padding: 0.75rem 0.9rem 0.25rem; }
  .nt-table { font-size: 14.5px; }
  .nt-table th, .nt-table td { padding: 5px 8px; }
  .ds-notes pre.nt-code { font-size: 13.5px; padding: 0.75rem 0.8rem; }
  .ds-kd__ctl { flex: 1 1 100%; }
  .ds-kd__ctl input[type="range"] { flex: 1; width: auto; min-width: 0; }
  .ds-kd__chip { white-space: normal; }
}

/* ---------- yazdırma (A4) ---------- */
@media print {
  @page { size: A4; margin: 18mm 17mm 18mm; }

  .masthead, .page__footer, .page__meta, .page__share, .page__related, .sidebar,
  .greedy-nav, #theme-toggle, .back-to-top, .nt-noprint { display: none !important; }
  #main, .page, .page__inner-wrap, .page__content {
    width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; float: none !important;
  }

  html, body, #main, .page__content { background: none !important; }

  /* yazdırma token bloğu: koyu tema seçili olsa bile kâğıtta açık renkler */
  .ds-notes,
  html[data-theme="dark"] .ds-notes {
    --ds-text: #1f2937;
    --ds-bg: #ffffff;
    --ds-link: #1d4ed8;
    --ds-border-base: #d1d5db;
    --ds-accent: #a61b1b;
    --ds-good: #1f8a4c;
    --ds-bad: #c0392b;
    max-width: none;
    margin: 0;
    font-size: 10.5pt;
    line-height: 1.55;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .ds-notes p, .ds-notes ul, .ds-notes ol, .ds-notes .nt-math { max-width: none; orphans: 3; widows: 3; }
  .ds-notes h1 { font-size: 24pt; }
  .ds-notes h2 { margin-top: 1.6rem; font-size: 16pt; }
  .ds-notes h2.nt-pb { break-before: page; page-break-before: always; }
  .ds-notes h3 { font-size: 12.5pt; }
  .ds-notes h2, .ds-notes h3, .ds-notes h4 { break-after: avoid; page-break-after: avoid; }
  .nt-fig, .nt-box, .nt-tablewrap, .ds-notes pre.nt-code, .nt-math, .nt-quiz > li, .nt-goals {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .nt-fig, .nt-tablewrap, .nt-fig__box { overflow: visible !important; }
  .nt-fig--wide svg.ds-svg { min-width: 0; }
  .nt-fig svg.ds-svg { max-height: 85mm; }
  .nt-table { font-size: 9.5pt; }
  .nt-toc > ol { columns: 2; }
  .ds-notes a { color: inherit; text-decoration: none; }
  .ds-kd__ctls { display: none; }
  .nt-quiz details { border-style: dashed; }
  .nt-quiz summary { color: var(--ds-text); }
}