/* fast.ai — Practical Deep Learning (Jeremy Howard) Türkçe — Cyan + Rose teması */
/* Renk paleti (Deniz kararı 2026-06-02): Cyan-600 + Rose-600 */

:root {
  --bs-primary: #0891b2;       /* cyan-600 — birincil */
  --bs-info: #e11d48;          /* rose-600 — accent */
  --bs-success: #0e7490;       /* cyan-700 */
  --bs-warning: #d97706;       /* amber-600 (uyarı) */
  --bs-danger: #e11d48;        /* rose-600 (tehlike) */

  /* fast.ai / cyan-rose paleti */
  --cyan-600: #0891b2;         /* birincil çizgi/çerçeve */
  --cyan-700: #0e7490;         /* koyu cyan — başlık/vurgu */
  --cyan-800: #155e75;         /* en koyu cyan */
  --cyan-400: #22d3ee;         /* açık cyan — ikincil vurgu */
  --cyan-100: #cffafe;         /* açık cyan arka plan / callout */
  --cyan-50:  #ecfeff;         /* en açık cyan */
  --rose-600: #e11d48;         /* accent */
  --rose-500: #f43f5e;         /* orta rose */
  --rose-400: #fb7185;         /* açık rose — ikincil vurgu */
  --rose-100: #ffe4e6;         /* açık rose arka plan */
  --slate-800: #1e293b;        /* metin (nötr koyu) */
  --slate-400: #94a3b8;        /* soluk — pasif kenar */
}

/* 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(--cyan-700);
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 0.3em;
}
h3 { color: var(--cyan-600); }

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

/* Callout renk vurguları */
.callout-tip {
  border-left-color: var(--cyan-600);
}
.callout-tip > .callout-header {
  background-color: rgba(8, 145, 178, 0.10);
}

.callout-note {
  border-left-color: var(--cyan-700);
}
.callout-note > .callout-header {
  background-color: rgba(14, 116, 144, 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(--rose-600);
}
.callout-important > .callout-header {
  background-color: rgba(225, 29, 72, 0.12);
}

/* Math blocks — sol kenar cyan (L1'de math yok ama Part 2 için hazır) */
.math.display {
  background: linear-gradient(to right, #f0fdff, #ffffff);
  padding: 1em 1.2em;
  border-radius: 6px;
  border-left: 3px solid var(--cyan-600);
  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 cyan */
table {
  border-collapse: collapse;
  margin: 1em 0;
}
table thead tr {
  background: var(--cyan-600);
  color: white;
}
table th, table td {
  padding: 0.6em 1em;
  border-bottom: 1px solid #e2e8f0;
}
table tbody tr:nth-child(even) {
  background: #f0fdff;
}

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

/* Figür taşma engeli (paylaşılan ETAP C tuzak #1 — Strang CC yayını) */
/* Quarto figür img'leri width="998" + max-width:none ile gelir → geniş */
/* matplotlib figürleri (13.5"/12.5"/11") metin kolonundan taşar. Sığdır: */
.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(--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; }
}