/* ADIM 181 (16. madde — "sayfalar ve içindeki yazılar aşırı göz yoruyor onlarıda çok güzel bir dekorla yap"; tasarım B seçildi):
   bilgi sayfaları (pages/page.php) — solda İÇİNDEKİLER (numaralı bölümler, okunan bölüm vurgulu, okuma ilerlemesi) + bilgi sayfaları menüsü, sağda
   BEYAZ okuma alanı (koyu lacivert yazı, büyük satır aralığı, numaralı bölüm başlıkları). Yalnız body.sp-b (ayar sayfa_okuma_duzeni_enabled). */
/* sitenin genel taşma kuralı (html, body { overflow-x: hidden }) gövdeyi kaydırma kabı yapıyor → yapışkan sütun çalışmıyordu; clip kap yapmaz */
html, body.sp-b { overflow-x: clip; }
body.sp-b .sp-wrap { grid-template-columns: 280px minmax(0, 1fr); max-width: 1180px; gap: 22px; }
body.sp-b .sp-topbar { max-width: 1180px; }
body.sp-b .sp-yan { position: sticky; top: 18px; display: grid; gap: 14px; align-self: start; max-height: calc(100vh - 36px); overflow: auto; scrollbar-width: thin; }
body.sp-b .sp-yan-toc, body.sp-b .sp-nav { position: static; background: rgba(13, 42, 102, 0.55); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 18px; padding: 16px 12px; display: flex; flex-direction: column; gap: 3px; }
body.sp-b .sp-nav-title { color: #d9ff66; font-size: 12px; letter-spacing: .1em; padding: 2px 10px 8px; }
body.sp-b .sp-yan-toc a { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: 12px; color: #e6eeff; font-size: 14.5px; font-weight: 600; line-height: 1.35; text-decoration: none; transition: background .15s, color .15s; }
body.sp-b .sp-yan-toc a i { flex: none; width: 24px; height: 24px; border-radius: 8px; background: rgba(255, 255, 255, 0.14); display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 800; margin-top: -2px; }
body.sp-b .sp-yan-toc a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
body.sp-b .sp-yan-toc a.on { background: #fff; color: #1d4fb3; }
body.sp-b .sp-yan-toc a.on i { background: #1d4fb3; color: #fff; }
body.sp-b .sp-ilerleme { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.18); margin: 12px 8px 4px; overflow: hidden; }
body.sp-b .sp-ilerleme i { display: block; height: 100%; width: 0; background: #b8ff2e; border-radius: 3px; transition: width .12s linear; }
body.sp-b .sp-nav-link { color: #e6eeff; font-size: 14px; padding: 8px 10px; }
body.sp-b .sp-nav-link.active { background: #fff; color: #1d4fb3; }
/* okuma alanı */
body.sp-b .sp-card { background: #ffffff; color: #1f2a44; border-radius: 22px; padding: 38px 46px 44px; box-shadow: 0 30px 70px rgba(4, 16, 60, 0.4); }
body.sp-b .sp-head { border-bottom-color: #e6ebf5; }
body.sp-b .sp-head-icon { background: linear-gradient(180deg, #e7efff, #d4e2ff); box-shadow: inset 0 0 0 1px rgba(29, 79, 179, 0.14); }
body.sp-b .sp-head h1 { font-size: 34px; color: #132552; }
body.sp-b .sp-summary { color: #4a5878; font-size: 16.5px; }
body.sp-b .sp-meta { color: #5c6c90; }
body.sp-b .sp-meta span { background: #f2f5fc; border: 1px solid #e1e8f6; border-radius: 999px; padding: 4px 12px; }
body.sp-b .sp-meta span + span::before { content: none; }
body.sp-b .sp-content { counter-reset: spb; font-size: 17.5px; line-height: 1.78; color: #2f3b5c; }
body.sp-b .sp-content p { margin: 0 0 15px; }
body.sp-b .sp-content h2 { counter-increment: spb; display: flex; align-items: center; gap: 12px; font-size: 22px; color: #132552; margin: 34px 0 12px; padding-top: 22px; border-top: 1px solid #e6ebf5; scroll-margin-top: 20px; }
body.sp-b .sp-content > h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
body.sp-b .sp-content h2::before { content: counter(spb); flex: none; width: 34px; height: 34px; border-radius: 10px; background: #e7efff; color: #1d4fb3; display: grid; place-items: center; font-size: 15px; font-weight: 800; }
body.sp-b .sp-content h3 { color: #1d3a7a; font-size: 18px; margin: 22px 0 8px; }
body.sp-b .sp-content ul li::marker, body.sp-b .sp-content ol li::marker { color: #1d4fb3; font-weight: 700; }
body.sp-b .sp-content strong { color: #132552; }
body.sp-b .sp-content a { color: #1d4fb3; }
body.sp-b .sp-note { background: #eef4ff; border-left: 4px solid #1d4fb3; color: #1e3a7a; border-radius: 0 12px 12px 0; padding: 13px 16px; font-size: 16px; }
body.sp-b .sp-toc { display: none; }
@media (max-width: 860px) {
  body.sp-b .sp-wrap { grid-template-columns: 1fr; gap: 12px; padding: 6px 10px 24px; }
  body.sp-b .sp-yan { position: static; max-height: none; overflow: visible; gap: 10px; min-width: 0; }
  body.sp-b .sp-yan-toc, body.sp-b .sp-nav { flex-direction: row; overflow-x: auto; gap: 6px; padding: 8px; border-radius: 14px; scrollbar-width: none; }
  body.sp-b .sp-yan-toc::-webkit-scrollbar, body.sp-b .sp-nav::-webkit-scrollbar { display: none; }
  body.sp-b .sp-yan-toc .sp-nav-title, body.sp-b .sp-nav .sp-nav-title, body.sp-b .sp-ilerleme { display: none; }
  body.sp-b .sp-yan-toc a, body.sp-b .sp-nav-link { flex: none; white-space: nowrap; padding: 8px 12px; font-size: 13.5px; }
  body.sp-b .sp-card { padding: 22px 18px 26px; border-radius: 18px; }
  body.sp-b .sp-head h1 { font-size: 25px; }
  body.sp-b .sp-content { font-size: 16.5px; line-height: 1.72; }
  body.sp-b .sp-content h2 { font-size: 19px; }
  body.sp-b .sp-content h2::before { width: 30px; height: 30px; font-size: 14px; }
}