/* Kaynak tema: 9. sınıf Tarih "Tarihin Doğası" PDF paleti (s. 23–36).
   Örneklenen kaynak renkleri: krem #faf7eb, şeftali #fce0d3, turuncu #f47f50,
   kiremit #9f3424 / #a8391f, mürekkep #282726, koyu kırmızı #8a1f0f, başlık krem #fff8e3.
   Düğme geometrisi, kontrol modeli ve gezinme yeniden tasarlanmaz; yalnız renk. */
:root{
  --orange:#f47f50;
  --rust:#9f3424;
  --cream:#faf7eb;
  --peach:#fce0d3;
  --gray:#ecebed;
  --ink:#282726;
  --accent:#c14f28;
  --tint:#fff1e9;
  --line:#ddd6d0;
}
body{background:#f5f0ec}
.masthead{background:var(--cream);border-right:18px solid #f47f50}
.brand{background:#f47f50}
.hero-mark{left:156px;top:48px;width:118px;height:118px;border-radius:50%;object-fit:cover;opacity:1;z-index:2}
.subject strong{color:#f47f50;font-size:32px;letter-spacing:.02em;line-height:1.05}
.subject span{display:block;color:#282726;margin-top:4px;font-size:15px}
.grade{color:#8a1f0f}
.grade .squares{color:#a8391f}
.masthead:after{background:#a8391f;width:56px;height:22px}
.course-title{color:#282726;font-weight:800;letter-spacing:0;font-size:16px}
#sections button{background:#f7f2ee;color:#6b5a53}
#sections button.active{background:var(--peach);border-bottom-color:var(--rust);color:#8a3a20}
.page{background:#fff}
.question-navigation{background:var(--cream);border-bottom-color:#e6d6c8}
.question-navigation button{color:#776055}
.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:#702417}
.page-arrow{background:var(--orange)}
.flow-text small{color:#806454}
.flow-number{border-color:#d38d6c;color:var(--rust)}
.activity-flow li+li:before{background:#e7c8b6}
.activity-flow button{border-color:#e6d5c8;color:#5c4d45}
.activity-flow button[aria-current]{background:var(--peach);border-color:#d18a67}
.library-cards .card,.card{border-color:#e6d5c8}
#main .card .open-label{color:#9f3424}
.feedback{background:#f6f1ec;border-left-color:var(--accent)}
.feedback strong{color:#803c24}
@media(hover:hover){
  .start-button:hover{background:#a83a27}
  .page-arrow:hover{background:#e06b3c}
  .question-navigation button:hover{background:#fbe8dd;color:var(--rust)}
}
@media(max-width:560px){
  .subject{right:10px;top:12px}
  .subject strong{font-size:20px;line-height:1.1}
  .subject span{font-size:11px;margin-top:2px;max-width:190px;margin-left:auto}
  .hero-mark{left:112px;top:58px;width:76px;height:76px}
  .brand img{width:84px;left:96px;top:112px}
  .grade{font-size:13px;right:10px;bottom:4px}
  .grade .squares i{width:8px;height:8px}
  .course-title{font-size:14px}
}
@media(max-width:430px){
  /* Uzun bölüm adları 360 px'te tek kelime 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:18px}
  .hero-mark{left:100px;width:68px;height:68px}
}