html {
    scroll-behavior: smooth;
}

body {
    background-color: #fbfbfd;
}

.markdown-content h2 {
    margin-top: 2rem;
    scroll-margin-top: 1rem;
}

.markdown-content pre {
    border-radius: 0.5rem;
    padding: 1rem;
}

.markdown-content pre code {
    border-radius: 0.5rem;
}

/* CODE_OUTPUT quiz sorularının kod bloğu -- .markdown-content dışında (quiz-section
   içinde) render edildiği için aynı stil ayrıca burada tanımlanıyor. */
.quiz-question pre {
    border-radius: 0.5rem;
    padding: 1rem;
}

.quiz-question pre code {
    border-radius: 0.5rem;
}

.markdown-content blockquote {
    border-left: 4px solid #dee2e6;
    padding-left: 1rem;
    color: #6c757d;
}

.navbar-brand {
    font-weight: 600;
}

/* LearnForgeX marka rengi -- favicon.svg/logo.svg'deki turuncu/amber gradient'in
   (bkz. static/img/) düz CSS karşılığı; navbar ve footer'daki "Forge" hecesi için. */
.brand-accent {
    color: #fbbf24;
}

/* Navbar'da logo/marka adının altındaki slogan (Faz 50, kullanıcı onayı: "Forge
   your skills" -- marka adındaki "Forge" ile kelime oyunu kurduğu ve kısa olduğu
   için "Build your software skills" yerine tercih edildi). Bilinçli olarak
   çevrilmedi -- kelime oyunu Türkçede kaybolacağından, kısa marka sloganlarının
   yerelleştirilmeden bırakılması yaygın bir pratik (Nike'ın "Just Do It"i gibi). */
.navbar-tagline {
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
}

/* Sidebar accordion: collapsible category groups (bkz. fragments/layout.html :: sidebar).
   Konu sayısı arttıkça menünün sürekli uzamasını önlemek için, yalnızca aktif konuyu
   içeren kategori varsayılan olarak açık gelir; diğerleri kapalı başlar. */
.sidebar-nav .sidebar-toggle {
    color: inherit;
    border-radius: 0.25rem;
}

.sidebar-nav .sidebar-toggle:hover,
.sidebar-nav .sidebar-toggle:focus {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

.sidebar-nav .chevron {
    display: inline-block;
    transition: transform 0.15s ease-in-out;
    font-size: 1.1rem;
    line-height: 1;
}

.sidebar-nav .sidebar-toggle[aria-expanded="true"] .chevron {
    transform: rotate(90deg);
}

/* Topic başlığı satırı (bkz. topic.html): başlık/özet bloğu ile dil değiştirme
   butonu ("TR"/"EN") aynı satırda, buton her zaman sağda kalacak şekilde. İlk
   denemede Bootstrap'in d-flex/justify-content-between/flex-wrap utility'leriyle
   kuruldu, ama flex-wrap'in "satıra sığmıyorsa yeni satıra geç" kararı, min-width:0
   olsa bile bazı tarayıcı/içerik kombinasyonlarında (uzun özet metni + h1 gibi
   kırılmayan büyük başlık) güvenilir çalışmadı -- buton yine de yeni bir satıra,
   sola düşebiliyordu. Bunun yerine CSS Grid'e geçildi: iki sütunlu bir grid
   (1fr + auto) satır KIRILMAZ, ikinci sütun (buton) her zaman kendi hücresinde,
   sağda kalır; birinci sütun (başlık/özet) mevcut alana göre daralır, İÇİNDEKİ
   METİN normal şekilde satır içi kırılır -- flex-wrap'teki gibi tüm satırın
   kırılıp kırılmayacağına dair belirsizlik ortadan kalkar. Grid item'lar da flex
   item'lar gibi varsayılan min-width: auto'ya sahip olduğu için min-width: 0 hâlâ
   gerekli (aynı tuzak, grid'de de var). */
.topic-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    column-gap: 0.5rem;
}

.topic-header-info {
    min-width: 0;
}

/* Faz 68: mobil navigasyon -- sidebar artık lg altında Bootstrap Offcanvas ile
   açılan bir çekmece (bkz. fragments/layout.html :: sidebar, "offcanvas-lg"),
   navbar da "sticky-top" ile üstte sabit. Navbar sabitlendiği için topic.html'deki
   sağ TOC ("Bu sayfada") artık kayarken navbar'ın altına saklanmıyor -- eskiden
   inline style="top: 1rem" kullanıyordu, o da yalnızca navbar sabit değilken
   doğruydu. Playwright ile (gerçek Bootstrap CSS'iyle, CDN olmadan yerel kopya
   üzerinden) ölçülen gerçek navbar yüksekliği masaüstünde ~56px (3.5rem); üstüne
   ~0.75rem boşluk payı eklenerek 4.25rem sabitlendi, TOC navbar'ın hemen altında
   başlıyor.
   align-self: flex-start EKLENMESİ ZORUNLU -- bu olmadan sticky hiç çalışmıyordu:
   Bootstrap'in ".row"u display:flex + varsayılan align-items:stretch kullanıyor,
   bu da TOC <nav>'ını da "main" sütunuyla aynı yüksekliğe (tüm sayfa içeriği kadar)
   geriyordu. position:sticky, elemanın kendi kutusu zaten containing block'un tüm
   yüksekliğini kaplıyorsa "kayacak boşluk" bulamadığından hiçbir şekilde sabitlenmiyordu
   -- Playwright ile ölçülünce TOC'un scroll sırasında sayfayla birlikte kaydığı,
   hiç sabitlenmediği tespit edildi (muhtemelen bu, Faz 68 öncesinde de var olan,
   fark edilmemiş bir hataydı). align-self: flex-start, TOC kutusunu kendi içeriği
   kadar kısa tutarak sticky'nin gerçekten çalışmasını sağlıyor. */
.toc-sticky {
    top: 4.25rem;
    align-self: flex-start;
}

/* Hamburger butonu navbar'ın soluna eklendiği için çok dar ekranlarda (~375px ve
   altı, örn. iPhone SE) marka adı + TR/EN dil butonlarının sığması için slogan
   ("Forge your skills") gizleniyor; marka adı ve dil butonları her zaman görünür
   kalmalı, sadece ikincil slogan metni feda ediliyor. */
@media (max-width: 400px) {
    .navbar-tagline {
        display: none;
    }
}

/* Sabit bilgi sayfaları (page.html): düz yazı, okunabilir satır uzunluğu. */
.static-page {
    max-width: 46rem;
}