/* Kaynak tema: 9. sınıf İngilizce (MEBİ) "THEME 1 / SCHOOL LIFE" PDF paleti.
   Örneklenen renkler: krem sayfa zemini #fdf6ec, başlık bandı şeftali #f3bba8,
   turuncu #f37846, koyu kiremit #8f3a2c, bölüm metni #59595a, deniz mavisi #2b7fa5.
   Düğme geometrisi, kontrol modeli ve gezinme yeniden tasarlanmaz; yalnız renk. */
:root{
  --orange:#f37846;
  --rust:#8f3a2c;
  --cream:#fdf6ec;
  --peach:#fbe0d3;
  --gray:#f4efea;
  --ink:#2a2a2b;
  --accent:#2b7fa5;
  --tint:#fffaf5;
  --line:#e6d6ca;
}
body{background:#f6f1ea}
.masthead{background:var(--cream);border-right:18px solid #f37846}
.brand{background:#f37846}
.hero-mark{left:172px;top:30px;width:142px;height:142px;border-radius:50%;object-fit:cover;opacity:1;z-index:2}
.subject strong{color:#f26a3c;font-size:31px;letter-spacing:.01em;line-height:1.05}
.subject span{display:block;color:#2a2a2b;margin-top:6px;font-size:17px;letter-spacing:.02em}
.grade{color:#8f3a2c}
.grade .squares{color:#9c2f18}
.masthead:after{background:#8f3a2c;width:56px;height:20px}
.course-title{color:#2a2a2b;letter-spacing:.06em}
#sections button{background:#f4efe9;color:#5a5048}
#sections button.active{background:var(--peach);border-bottom-color:var(--rust);color:#6f2a1e}
.page{background:#fff}
.question-navigation{background:var(--cream);border-bottom-color:#e6d6ca}
.question-navigation button{color:#6d5a50}
.question-navigation button[aria-current]{background:var(--peach);border-bottom-color:var(--rust);color:var(--rust)}
.start-button{background:var(--rust);border-color:var(--rust);border-bottom-color:#5f2318}
.page-arrow{background:#f37846}
.flow-text small{color:#8a6a58}
.flow-number{border-color:#c98a6a;color:var(--rust)}
.activity-flow li+li:before{background:#e8cdbd}
.activity-flow button{border-color:#ead9cd;color:#4a3c34}
.activity-flow button[aria-current]{background:var(--peach);border-color:#e0a98e}
.library-cards .card,.card{border-color:#ecdbcf}
#main .card .open-label{color:#2b6b7f}
.feedback{background:#eef4f3;border-left-color:#2b7fa5}

/* Belgeye özel içerik değişkenleri yalnız gövde ve modal kapsamında. */
#main,#modal-body{
  --doc-orange:#f37846;
  --doc-peach:#fbe0d3;
  --doc-rust:#8f3a2c;
  --doc-ink:#2a2a2b;
  --doc-muted:#6d5f56;
  --doc-line:#e6d6ca;
  --doc-soft:#fdf6ec;
  --doc-aim:#fdf1e9;
  --doc-gray:#f4efea;
  --doc-blue:#2b5d74;
  --doc-teal:#2b7fa5;
  --doc-teal-dark:#1f5d78;
  --doc-paper:#fffdf8;
}

@media(hover:hover){
  .start-button:hover{background:#a4443a}
  .page-arrow:hover{background:#e5642f}
  .question-navigation button:hover{background:#fbe9df;color:var(--rust)}
  .activity-flow button:hover{border-color:#dfae93}
}@media(max-width:560px){
  .subject{right:8px;top:12px}
  .subject strong{font-size:18px;line-height:1.15;max-width:190px}
  .subject span{font-size:13px;margin-top:2px}
  .hero-mark{left:122px;top:56px;width:80px;height:80px}
  .brand img{width:84px;left:96px;top:112px}
  .grade{font-size:12px;right:8px;bottom:4px}
  .grade .squares i{width:8px;height:8px}
}
@media(max-width:430px){
  #sections button{font-size:10px;letter-spacing:0;padding:9px 3px}
}
@media(max-width:380px){
  .subject strong{font-size:16px;max-width:160px}
  .hero-mark{left:106px;width:70px;height:70px}
}
.connect-image-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.connect-image-pair img { width: 100%; height: auto; }