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;
    }
}

/* Sosyal medya ikonları (YouTube/Instagram; bkz. fragments/layout.html :: social).
   Başlangıçta açık gri, hover/focus'ta marka rengi. Navbar'daki kopya yalnızca md+
   ekranda görünür (d-none d-md-flex); dar ekranda footer'daki kopya kullanılır. */
.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.15s ease, background-color 0.15s ease;
}

.social-youtube:hover,
.social-youtube:focus-visible {
    color: #ff0000;
    background-color: rgba(255, 0, 0, 0.12);
}

.social-instagram:hover,
.social-instagram:focus-visible {
    color: #e4405f;
    background-color: rgba(228, 64, 95, 0.12);
}

/* Footer açık zeminde: başlangıç rengi navbar'daki koyu zemine göre ayarlanan beyazımsı
   değil, Bootstrap'in link-secondary tonuna yakın gri. */
footer .social-link {
    color: #6c757d;
}

footer .social-youtube:hover,
footer .social-youtube:focus-visible {
    color: #ff0000;
}

footer .social-instagram:hover,
footer .social-instagram:focus-visible {
    color: #e4405f;
}

.navbar-divider {
    width: 1px;
    height: 1.375rem;
    background-color: rgba(255, 255, 255, 0.25);
}

/* Navbar'daki kullanıcı adı: uzun adlar navbar'ı ikinci satıra taşırmasın diye sınırlı
   genişlikte, taşan kısım "…" ile kısaltılır (tam ad title'da). */
.navbar-user-name {
    max-width: min(12rem, 40vw);
}

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

/* Çerez onayı banner'ı (fragments/layout.html :: footer). position: fixed olduğu için
   sayfa akışına girmez, içerik kaymaz; tüm ekranı kaplayan bir katman DEĞİL, sağ alt
   köşede küçük bir kutu. Footer'ın ortalı/soluk yazı stilini devralmasın diye hizalama
   ve renk burada açıkça verilir. */
.cookie-consent {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    z-index: 1030;
    max-width: 30rem;
    margin-left: auto;
    padding: 1rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
    color: #212529;
    font-size: 0.875rem;
    text-align: left;
}

.cookie-consent-title {
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.cookie-consent-text {
    margin-bottom: 0.75rem;
}

.cookie-consent-settings {
    margin-bottom: 0.75rem;
}

.cookie-consent-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Footer'daki "Çerez ayarları": buton, ama yanındaki linklerle aynı görünür. */
.cookie-consent-link {
    padding: 0;
    font-size: inherit;
    vertical-align: baseline;
}

@media (max-width: 575.98px) {
    .cookie-consent {
        right: 0.5rem;
        bottom: 0.5rem;
        left: 0.5rem;
    }
}