/* 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; }

/* Sınıf -> Hafta açılır-kapanır ağacı (2026-07-15) */
.grup {
  background: var(--kart-bg); border: 1px solid var(--sinir); border-radius: 12px;
}
.grup > summary { cursor: pointer; padding: 14px 18px; user-select: none; }
.grup > summary:hover { color: var(--vurgu-koyu); }
.sinif-grup > summary { font-size: 19px; font-weight: 700; }
.hafta-grup { margin: 6px 14px 14px; }
.hafta-grup > summary { font-size: 16px; font-weight: 600; }
.hafta-dersleri { display: grid; gap: 12px; padding: 4px 14px 14px; }

.ders-kart {
  background: var(--kart-bg); border: 1px solid var(--sinir); border-radius: 12px;
  padding: 20px;
}

/* Sürüm satırları (aynı dersin her sürümü ayrı incelenir) */
.surum-satir {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border-top: 1px dashed var(--sinir); margin-top: 10px; padding-top: 8px;
}
.surum-etiket { font-size: 15px; color: var(--ikincil); }
.surum-etiket.guncel { color: var(--yazi); font-weight: 600; }
.incele-buton.kucuk { margin: 0 0 0 auto; padding: 7px 14px; font-size: 14px; }
.surum-serit {
  display: inline-block; background: var(--kart-bg); border: 1px solid var(--sinir);
  border-radius: 999px; padding: 4px 14px; font-size: 14px; color: var(--ikincil); margin: 4px 0 0;
}

/* Künye kutusu — dersin kimlik bilgileri (Süre/Eğitim Türü/Rol/Odak…); bilgi amaçlı, onay kutusu yok */
.kunye-kutu {
  background: var(--kart-bg); border: 1px solid var(--sinir); border-radius: 12px;
  padding: 12px 18px; font-size: 15px; margin: 14px 0 6px;
}
.kunye-kutu p { margin: 5px 0; }
.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);
}

/* --- Faz 3: Değerlendirme paneli (bölüm onayı + açık konu + genel karar) --- */
.deger-panel { border-top: 3px solid var(--vurgu); margin-top: 40px; padding-top: 8px; }
.deger-panel h3 { font-size: 18px; color: var(--vurgu-koyu); margin: 28px 0 10px; }
.onay-kutu {
  background: var(--kart-bg); border: 1px solid var(--sinir); border-radius: 10px;
  padding: 14px 16px; margin: 12px 0;
}
.onay-kutu h4 { margin: 0 0 10px; font-size: 16px; }
.konu-metin { margin: 0 0 10px; font-size: 15.5px; }
.karar-secim { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 10px; }
.radyo { display: inline-flex; align-items: center; gap: 6px; font-size: 15.5px; cursor: pointer; }
.onay-kutu textarea, .onay-kutu input[type="text"] {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 15px;
  padding: 8px 10px; border: 1px solid var(--sinir); border-radius: 6px;
  background: var(--bg); color: var(--yazi); resize: vertical;
}
.onay-kutu .ad-girdi { margin-bottom: 10px; }
.kayit-satiri { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.kayit-buton {
  background: var(--vurgu); color: #fff; border: none; border-radius: 8px;
  padding: 8px 18px; font-size: 15px; cursor: pointer;
}
.kayit-buton:hover { background: var(--vurgu-koyu); }
.kayit-buton:disabled { opacity: .6; cursor: default; }
.kayit-durum { font-size: 14px; color: var(--ikincil); }
.kayit-durum.ok { color: var(--vurgu); }
.kayit-durum.hata { color: #b3392c; }
.genel-karar { border-color: var(--vurgu); }

/* Satır-içi bölüm onayı: ders içeriğinden görsel olarak ayrışsın (sol vurgu şeridi + alt boşluk) */
.onay-kutu.inline { border-left: 4px solid var(--vurgu); margin: 12px 0 32px; }
.onay-kutu.inline h4 { color: var(--vurgu-koyu); font-size: 14.5px; font-weight: 600; }

/* Yüzen gezinme düğmeleri — uzun sayfada başa / kalan değerlendirmeye hızlı geçiş (ders açıkken görünür) */
.yuzen-nav {
  position: fixed; right: 16px; bottom: 16px; z-index: 50;
  display: flex; flex-direction: column; gap: 8px;
}
.yuzen-buton {
  background: var(--vurgu-koyu); color: #fff; border: none; border-radius: 20px;
  padding: 9px 15px; font-size: 14px; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
}
.yuzen-buton:hover { background: var(--vurgu); }
@media (max-width: 520px) { .yuzen-buton { padding: 8px 12px; font-size: 13px; } }

/* --- Faz 4: satır-içi pasaj yorumu --- */
.yorum-karti {
  border: 1px dashed var(--sinir); border-radius: 10px; padding: 12px 14px; margin: 10px 0 24px;
  background: color-mix(in srgb, var(--kart-bg) 70%, transparent);
}
.yorum-karti.hazir { border-color: var(--vurgu); border-style: solid; }
.yorum-karti h4 { margin: 0 0 8px; font-size: 14px; color: var(--ikincil); }
.yorum-liste { display: flex; flex-direction: column; gap: 10px; }
.yorum-satir { border-left: 3px solid var(--vurgu); padding: 4px 0 4px 12px; }
.yorum-satir.yetim { border-left-color: var(--uyari-sinir); }
.yetim-not { margin: 0 0 4px; font-size: 13px; color: var(--uyari-sinir); }
.yorum-satir .alinti {
  margin: 0 0 4px; padding: 0; border: none; font-style: italic; color: var(--ikincil); font-size: 14.5px;
}
.yorum-metin { margin: 0 0 3px; font-size: 15px; }
.yorum-alt { margin: 0; font-size: 13px; color: var(--ikincil); }
.yorum-sil {
  background: none; border: none; color: #b3392c; cursor: pointer; font-size: 13px; padding: 0 2px; text-decoration: underline;
}
.alinti-onizleme {
  margin: 8px 0 6px; padding: 8px 10px; border-radius: 6px; font-size: 14.5px; font-style: italic;
  background: var(--uyari-bg); border: 1px solid var(--uyari-sinir);
}
.alinti-onizleme.bos { background: transparent; border: 1px dashed var(--sinir); color: var(--ikincil); font-style: normal; }
.yorum-not {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; padding: 8px 10px;
  border: 1px solid var(--sinir); border-radius: 6px; background: var(--bg); color: var(--yazi); resize: vertical;
}

/* --- Faz 4.5: Yönetim (admin) çok-hoca karşılaştırma --- */
.yonetim-buton {
  float: right; background: var(--vurgu-koyu); color: #fff; border: none; border-radius: 8px;
  padding: 8px 14px; font-size: 14px; cursor: pointer;
}
.yonetim-buton:hover { background: var(--vurgu); }
.admin-blok { border-top: 1px solid var(--sinir); margin-top: 28px; padding-top: 8px; }
.admin-blok h3 { font-size: 18px; color: var(--vurgu-koyu); margin: 16px 0 10px; }
.admin-blok h4 { font-size: 14px; color: var(--ikincil); margin: 14px 0 6px; }
.admin-matris { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.admin-matris th, .admin-matris td { border: 1px solid var(--sinir); padding: 6px 10px; text-align: center; }
.admin-matris th:first-child, .admin-matris td:first-child { text-align: left; }
.admin-matris tr.cakisma { background: var(--uyari-bg); }
.admin-matris td.h-onayla { color: var(--vurgu); font-weight: 700; }
.admin-matris td.h-duzeltilsin { color: #b3392c; font-weight: 700; }
.admin-matris td.bos { color: var(--ikincil); }
.admin-notlar p, .admin-konu p, .admin-yorum-grup p { margin: 3px 0; font-size: 14.5px; }
.admin-genel-kart { border-left: 3px solid var(--sinir); padding: 4px 0 4px 12px; margin: 8px 0; }
.admin-genel-kart .rozet {
  display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 12px; font-size: 13px; color: #fff;
}
.rozet.d-onay { background: var(--vurgu); }
.rozet.d-sartli { background: #b8860b; }
.rozet.d-red { background: #b3392c; }
.rozet.yok { background: var(--sinir); color: var(--ikincil); }
.admin-genel-kart .not { margin: 4px 0 0; font-size: 14.5px; }
.admin-konu, .admin-yorum-grup { margin: 10px 0; }
.admin-yorum-grup .alinti { margin: 0 0 4px; padding: 0; border: none; font-style: italic; color: var(--ikincil); }
.cakisma-rozet { color: #b3392c; font-size: 14px; font-weight: 600; }