/* Kaynak tema: 9. sınıf Tarih çalışma kartı PDF paleti.
   Örneklenen renkler: krem #fcf7e9, turuncu #f28155, koyu kırmızı #9b3520,
   açık şeftali #fce1d7, gri kutu #e3e5e4, mürekkep #221f1f.
   Düğme geometrisi, kontrol modeli ve gezinme yeniden tasarlanmaz; yalnız renk. */
:root{
  --orange:#f28155;
  --rust:#9b3520;
  --cream:#fcf7e9;
  --peach:#fce1d7;
  --gray:#ecebed;
  --ink:#221f1f;
  --accent:#0f8f7c;
  --tint:#fdf6ee;
  --line:#e5d9cb;
}
body{background:#f4f1ea}
.masthead{background:var(--cream);border-right:18px solid var(--orange)}
.brand{background:#ef9b7c}
.hero-mark{left:150px;top:24px;width:150px;height:150px;border-radius:50%;object-fit:cover;opacity:1;z-index:1}
.subject strong{color:#ef6c3d;font-size:30px;letter-spacing:0;line-height:1.05}
.subject span{display:block;color:#221f1f;margin-top:4px;font-size:15px;font-weight:700}
.grade{color:var(--rust)}
.grade .squares{color:var(--rust)}
.grade .squares i{background:var(--rust)}
.masthead:after{background:var(--rust);width:56px;height:22px}
.course-title{color:#221f1f}
#sections button{background:#f6eee4;color:#4d443c}
#sections button.active{background:var(--peach);border-bottom-color:var(--rust);color:#7d2a19}
.page{background:#fff}
.question-navigation{background:var(--cream);border-bottom-color:#e2d3c2}
.question-navigation button{color:#6b5a4c}
.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:#6f2617}
.start-button:hover{background:#ad4028}
.page-arrow{background:var(--orange)}
.page-arrow:hover{background:#df6d42}
.flow-text small{color:#8a6a52}
.flow-number{border-color:#cf8a5f;color:var(--rust)}
.activity-flow li+li:before{background:#e9d5c6}
.activity-flow button{border-color:#e2d3c2;color:#4d443c}
.activity-flow button[aria-current]{background:var(--peach);border-color:#d99a74}
.library-cards .card,.card{border-color:#e4d5c6}
#main .card .open-label{color:#7d2a19}
.feedback{background:#fdf3e8;border-left-color:#e8973f}
.feedback strong{color:#7d2a19}
.section-dots i.is-lit{background:var(--orange)}
@media(hover:hover){
  .start-button:hover{background:#ad4028}
  .page-arrow:hover{background:#df6d42}
  .question-navigation button:hover{background:#fbe8dd;color:var(--rust)}
}
@media(max-width:560px){
  .subject{right:8px;top:14px;max-width:236px}
  .subject strong{font-size:22px;line-height:1.1}
  .subject span{font-size:11px;margin-top:2px}
  .hero-mark{left:150px;top:74px;width:72px;height:72px}
  .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){
  /* Uzun bölüm adları dar ekranda tek sözcük olarak sığsın diye harf aralığı sıfırlanır. */
  #sections button{font-size:9.5px;letter-spacing:0;padding:10px 3px}
}
@media(max-width:380px){
  .subject strong{font-size:19px;max-width:180px}
  .hero-mark{left:128px;top:80px;width:64px;height:64px}
}