/* MIT 18.065 — Matrix Methods (Strang) Türkçe — Strang Navy + Steel Blue teması */
/* Renk paleti (Deniz kararı 2026-06-02): primary #1f4e79 (Strang navy),
   accent #2e75b6 (çelik mavi — CC önerisi "koyu mavi tonu").
   Figür vektör paleti 18.06 (Phase 1) akrabasından miras: orange/teal/purple. */

:root {
  --bs-primary: #1f4e79;       /* Strang navy — birincil */
  --bs-info: #2e75b6;          /* çelik mavi — accent */
  --bs-success: #2e75b6;       /* çelik mavi */
  --bs-warning: #d97706;       /* amber-600 (uyarı) */
  --bs-danger: #b5481f;        /* rust (tehlike / kontrast) */

  /* Strang 18.065 paleti */
  --strang-navy: #1f4e79;      /* birincil çizgi/çerçeve */
  --navy-900: #13243a;         /* en koyu metin */
  --steel-blue: #2e75b6;       /* accent */
  --steel-300: #aac4dd;        /* soluk çelik — pasif kenar / izgara */
  --sky-400: #6fa8dc;          /* açık mavi — ikincil vurgu */
  --bg-callout: #eaf1f8;       /* çok açık mavi — callout / kutu zemini */

  /* Figür vektör ayrım renkleri (18.06 akrabası) */
  --vec-orange: #e67e22;
  --vec-teal: #17a2b8;
  --vec-purple: #6f42c1;
}

/* Kitap gövdesi */
body {
  line-height: 1.7;
  color: var(--navy-900);
}

/* Başlık tipografisi */
h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

h1 { color: var(--navy-900); }
h2 {
  color: var(--strang-navy);
  border-bottom: 2px solid #d9e4f0;
  padding-bottom: 0.3em;
}
h3 { color: var(--steel-blue); }

/* Bağlantılar */
a {
  color: var(--steel-blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover {
  color: var(--navy-900);
}

/* Callout renk vurguları */
.callout-tip {
  border-left-color: var(--steel-blue);
}
.callout-tip > .callout-header {
  background-color: rgba(46, 117, 182, 0.10);
}

.callout-note {
  border-left-color: var(--strang-navy);
}
.callout-note > .callout-header {
  background-color: rgba(31, 78, 121, 0.10);
}

.callout-warning {
  border-left-color: var(--bs-warning);
}
.callout-warning > .callout-header {
  background-color: rgba(217, 119, 6, 0.10);
}

.callout-important {
  border-left-color: var(--bs-danger);
}
.callout-important > .callout-header {
  background-color: rgba(181, 72, 31, 0.12);
}

/* Math blocks — sol kenar çelik mavi */
.math.display {
  background: linear-gradient(to right, #f4f8fc, #ffffff);
  padding: 1em 1.2em;
  border-radius: 6px;
  border-left: 3px solid var(--steel-blue);
  overflow-x: auto;
}

/* Inline math hafif vurgu */
.math.inline {
  padding: 0 2px;
}

/* Kod blokları */
div.sourceCode {
  border-radius: 6px;
  border: 1px solid #d9e4f0;
}

/* Tablo modernize — thead navy */
table {
  border-collapse: collapse;
  margin: 1em 0;
}
table thead tr {
  background: var(--strang-navy);
  color: white;
}
table th, table td {
  padding: 0.6em 1em;
  border-bottom: 1px solid #d9e4f0;
}
table tbody tr:nth-child(even) {
  background: #f4f8fc;
}

/* Quote — sol kenar çelik mavi */
blockquote {
  border-left: 4px solid var(--steel-blue);
  background: #eef4fb;
  padding: 0.8em 1.2em;
  margin: 1.2em 0;
  font-style: italic;
  border-radius: 0 4px 4px 0;
}

/* Figürler metin kolonuna sığsın — Quarto matplotlib img'leri width attr + max-width:none ile
   gelir; geniş figürler (heatmap üçlüleri) aksi halde kolonu aşar / dar ekranda kesilir. */
.cell-output-display img,
.quarto-figure img,
figure img,
img.figure-img {
  max-width: 100%;
  height: auto;
}

/* Şekil başlıkları */
figcaption {
  font-size: 0.9em;
  color: #4a5568;
  font-style: italic;
  margin-top: 0.4em;
}

/* Sidebar */
.sidebar-title {
  font-weight: 600;
  color: var(--navy-900);
}

/* Kapak header */
.quarto-title-block .quarto-title h1.title {
  color: var(--navy-900);
  font-weight: 700;
}
.quarto-title-block .subtitle {
  color: #4a5568;
  font-weight: 400;
}

/* ETAP D5 mobile fix — dar viewport'ta math/tablo yatay taşması (desktop etkilenmez) */
@media (max-width: 767px) {
  main table, .cell-output-display table { display: block; overflow-x: auto; max-width: 100%; }
  mjx-container { overflow-x: auto; overflow-y: hidden; max-width: 100%; }
  mjx-container:not([display="true"]) { display: inline-block; max-width: 100%; overflow-x: auto; overflow-y: hidden; }
}