/* Belgeye özgü stiller — NİÇİN COĞRAFYA ÖĞRENMELİYİZ?
   Ortak kit dosyaları değiştirilmez; yalnız #main / #modal-body altında. */

#main, #modal-body {
  --doc-ink: #282726;
  --doc-soft: #faf7eb;
  --doc-line: #ddd6d0;
  --doc-vurgu: #b8491a;
  --doc-zemin: #fdf6ef;
}

/* Kaynak görseller: kenarlıksız, oranı korunur. */
#main .kaynak-gorsel {
  margin: 14px 0;
  text-align: center;
}
#main .kaynak-gorsel img,
#modal-body .kaynak-gorsel img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

/* Şiir/alıntı blokları. */
#main .siir {
  white-space: pre-wrap;
  background: var(--doc-zemin);
  border-left: 4px solid var(--doc-vurgu);
  border-radius: 4px;
  padding: 14px 18px;
  margin: 12px 0;
}

/* Yazma alanları: defter çizgisi hissi. */
#main textarea.yanit-alani {
  width: 100%;
  min-height: 84px;
  padding: 10px 12px;
  border: 1px solid var(--doc-line);
  border-radius: 6px;
  background: #fffdf8 repeating-linear-gradient(
    to bottom, transparent, transparent 27px, #efe7dc 27px, #efe7dc 28px
  );
  line-height: 28px;
  color: var(--doc-ink);
  font: inherit;
  resize: vertical;
}
#main textarea.yanit-alani:read-only {
  background-color: #f4f1ec;
  color: #4a443f;
}

/* Doldurma alanı. */
#main .doldur { display: block; margin: 8px 0; }
#main .doldur input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--doc-line);
  border-radius: 6px;
  background: #fffdf8;
  font: inherit;
  color: var(--doc-ink);
}
#main .doldur input:read-only { background: #f4f1ec; }

/* Seçim kutuları. */
#main .secim {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--doc-line);
  border-radius: 6px;
  background: #fff;
  margin: 6px 0;
  cursor: pointer;
}
#main .secim input { inline-size: 20px; block-size: 20px; }

/* Dönüt kutuları: kaynakta ayrı kutular varsa ayrı görünür. */
#main .donut-kutu {
  border: 1px solid var(--doc-line);
  border-left: 4px solid var(--doc-vurgu);
  border-radius: 6px;
  background: var(--doc-zemin);
  padding: 12px 16px;
  margin: 10px 0;
}
#main .donut-etiket {
  margin: 0 0 6px;
  font-weight: 700;
  color: var(--doc-vurgu);
}
#main .donut-madde { margin: 6px 0; line-height: 1.6; }
#main .donut-no { font-weight: 700; }
#main .donut-giris { margin-bottom: 8px; }

/* Etkinlik akışı: küçük etiketlerin kontrastı WCAG AA. */
#main .activity-flow .flow-text small { color: #5c4436; }
#main .activity-flow .flow-text > span { color: #5c4436; }

/* Kart ızgarası etiketi. */
#main .library-cards .card .open-label { color: #ad472a; }

@media (max-width: 560px) {
  #main .kaynak-gorsel img { width: 100%; }
}

/* Bitiş akışı — referans: biyoloji/biy9.1.2. */
#main .completion-panel {
  margin: 24px 0;
  padding: 20px;
  background: var(--cream, #faf7eb);
  border: 1px solid #e1c9ba;
}
#main .completion-panel .completion-status {
  margin: 0 0 12px;
}
#main .completion-panel .start-button {
  width: 100%;
  font-size: 18px;
}
#main .done-banner {
  background: #e8f3e8;
  border-left: 5px solid #3c7b45;
  padding: 18px;
  margin-top: 14px;
}
#main .library-cards .card .open-label {
  display: block;
  margin-top: 6px;
}

/* ---------- k03: bilgi kartları ---------- */
#main .bilgi-karti {
  border: 1px solid #d2c9c1;
  border-top: 4px solid var(--kart-koyu-turuncu, #b8491a);
  border-radius: 6px;
  background: #fff;
  padding: 16px 18px;
  margin: 14px 0;
}
#main .bilgi-karti .bk-baslik {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: #282726;
}
#main .bilgi-karti .bk-metin {
  margin: 0 0 8px;
  line-height: 1.6;
}
#main .bilgi-karti .bk-kaynak {
  margin: 0;
  font-size: 13px;
  color: #5c4436;
  font-style: italic;
}

/* ---------- k03: kaynak değerlendirme tablosu ---------- */
#main .tablo-alani {
  margin: 14px 0;
  overflow-x: auto;
}
#main .kaynak-tablosu {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 14px;
}
#main .kaynak-tablosu th,
#main .kaynak-tablosu td {
  border: 1px solid #ddd6d0;
  padding: 10px 12px;
  text-align: left;
  vertical-align: middle;
}
#main .kaynak-tablosu thead th {
  background: var(--doc-zemin, #fdf6ef);
  font-weight: 700;
  color: #282726;
}
#main .kaynak-tablosu tbody th {
  font-weight: 600;
  color: #282726;
  white-space: nowrap;
}
#main .kaynak-tablosu .tablo-secim label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  cursor: pointer;
}
#main .kaynak-tablosu .tablo-secim input {
  inline-size: 18px;
  block-size: 18px;
}

/* ---------- k03: madde listesi ---------- */
#main .madde-listesi {
  margin: 10px 0;
  padding-left: 22px;
  line-height: 1.7;
}
#main .madde-listesi li {
  margin: 4px 0;
}

/* ---------- k03: tarih şeridi görseli ---------- */
#main .tarih-seridi-alan {
  margin: 16px 0;
  text-align: center;
}
#main .tarih-seridi-alan img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

@media (max-width: 560px) { #main .scene figure.kaynak-gorsel .source-image { max-width: 100% !important; } }