/* stil.css — sade, okunur, teknik olmayan hoca için tasarlandı. */

:root {
  --bg: #faf9f6;
  --yazi: #24262b;
  --ikincil: #5b5f68;
  --vurgu: #2f6f4f;
  --vurgu-koyu: #1f4d36;
  --kart-bg: #ffffff;
  --sinir: #e2e0da;
  --uyari-bg: #fff6e0;
  --uyari-sinir: #e3c777;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1c1f; --yazi: #ecebe8; --ikincil: #a9adb6;
    --vurgu: #5fbf8d; --vurgu-koyu: #8fd6ac;
    --kart-bg: #26282c; --sinir: #3a3d43;
    --uyari-bg: #3a341a; --uyari-sinir: #7a6a2c;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--yazi);
  font: 17px/1.65 -apple-system, "Segoe UI", Arial, sans-serif;
}
.ust-bar {
  background: var(--vurgu-koyu); color: #fff; padding: 18px 24px;
}
.marka { font-size: 20px; font-weight: 700; }
.marka .etiket { font-weight: 400; opacity: .85; font-size: 16px; }

main { max-width: 820px; margin: 0 auto; padding: 32px 20px 80px; }

h1 { font-size: 28px; margin: 0 0 8px; }
h2 { font-size: 21px; color: var(--vurgu-koyu); margin: 32px 0 12px; }
.aciklama { color: var(--ikincil); font-size: 16px; }

.kutuphane-liste { display: grid; gap: 16px; margin-top: 24px; }
.ders-kart {
  background: var(--kart-bg); border: 1px solid var(--sinir); border-radius: 12px;
  padding: 20px;
}
.ders-kart h2 { margin: 0 0 8px; font-size: 19px; }
.meta { color: var(--ikincil); font-size: 15px; margin: 2px 0; }
.surum-not { color: var(--ikincil); font-size: 14px; font-style: italic; }
.incele-buton, .geri-buton {
  background: var(--vurgu); color: #fff; border: none; border-radius: 8px;
  padding: 10px 18px; font-size: 15px; cursor: pointer; margin-top: 10px;
}
.incele-buton:hover, .geri-buton:hover { background: var(--vurgu-koyu); }
.geri-buton { background: transparent; color: var(--vurgu-koyu); padding-left: 0; }
.geri-buton:hover { background: transparent; text-decoration: underline; }

.taslak-uyari {
  background: var(--uyari-bg); border: 1px solid var(--uyari-sinir); border-radius: 8px;
  padding: 12px 16px; font-size: 15px;
}

.bolum { border-top: 1px solid var(--sinir); padding-top: 20px; margin-top: 24px; }
.bolum-govde table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 15.5px; }
.bolum-govde th, .bolum-govde td { border: 1px solid var(--sinir); padding: 8px 10px; text-align: left; }
.bolum-govde ul, .bolum-govde ol { padding-left: 22px; }
.bolum-govde code { background: var(--sinir); padding: 1px 5px; border-radius: 4px; }

.acik-konular ul, .guvence ul { padding-left: 22px; }
.durustluk { font-style: italic; color: var(--ikincil); }

.yukleniyor, .bos { color: var(--ikincil); }
.hata { color: #b3392c; }

.alt-bilgi {
  max-width: 820px; margin: 40px auto 0; padding: 16px 20px 32px;
  color: var(--ikincil); font-size: 14px; border-top: 1px solid var(--sinir);
}