/* Karpathy — Neural Networks: Zero to Hero Türkçe — Slate + Indigo teması */
/* Renk paleti (Deniz kararı 2026-06-02): Slate + Indigo */

:root {
  --bs-primary: #475569;       /* slate-600 — birincil */
  --bs-info: #6366f1;          /* indigo-500 — accent */
  --bs-success: #4f46e5;       /* indigo-600 */
  --bs-warning: #d97706;       /* amber-600 (uyarı) */
  --bs-danger: #b56034;        /* koyu turuncu (tehlike) */

  /* Karpathy / micrograd paleti */
  --slate-600: #475569;        /* birincil çizgi/çerçeve */
  --slate-800: #1e293b;        /* metin */
  --slate-400: #94a3b8;        /* soluk slate — pasif kenar */
  --slate-100: #f1f5f9;        /* arka plan / callout */
  --indigo-500: #6366f1;       /* accent */
  --indigo-600: #4f46e5;       /* koyu indigo — vurgu / gradyan */
  --indigo-400: #818cf8;       /* açık indigo — ikincil vurgu */
}

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

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

h1 { color: var(--slate-800); }
h2 {
  color: var(--indigo-600);
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 0.3em;
}
h3 { color: var(--slate-600); }

/* Bağlantılar */
a {
  color: var(--indigo-600);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover {
  color: var(--slate-800);
}

/* Callout renk vurguları */
.callout-tip {
  border-left-color: var(--indigo-500);
}
.callout-tip > .callout-header {
  background-color: rgba(99, 102, 241, 0.10);
}

.callout-note {
  border-left-color: var(--slate-600);
}
.callout-note > .callout-header {
  background-color: rgba(71, 85, 105, 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(--indigo-600);
}
.callout-important > .callout-header {
  background-color: rgba(79, 70, 229, 0.12);
}

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

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

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

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

/* Quote — sol kenar indigo */
blockquote {
  border-left: 4px solid var(--indigo-500);
  background: #f5f3ff;
  padding: 0.8em 1.2em;
  margin: 1.2em 0;
  font-style: italic;
  border-radius: 0 4px 4px 0;
}

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

/* Responsive figür taşma fix (ortak gotcha #1 — Strang D1 + tüm CC'ler ZORUNLU):
   Quarto matplotlib img'leri width="998" + max-width:none ile gelir → geniş
   figürler (heatmap/2-panel) metin kolonunu (~563px) aşar/kesilir. Kolona sığdır. */
.cell-output-display img,
.quarto-figure img,
figure img,
img.figure-img {
  max-width: 100%;
  height: auto;
}

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

/* Kapak header */
.quarto-title-block .quarto-title h1.title {
  color: var(--slate-800);
  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; }
}