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

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