/* ============================================================
   Yazı İçindekiler (Table of Contents)

   PC (>=1024px)  : yazının solunda sabit (sticky) liste
   Mobil/Tablet   : sayfa aşağı kaydırılıp meta bilgi satırı geçilince
                    (aktif başlık + sıradaki başlık + ilerleme çizgisi)
                    ve tüm başlıkları listeleyen açılır panel.

   Mobil/tablette TOC çubuğu, sabit header'ın (#headerMain) YERİNİ alır —
   ikisi aynı anda görünmez. article-toc.js, çubuk görünür olduğunda
   body'ye `toc-header-swap` class'ı ekler; bu, aşağıdaki kuralla
   #headerMain'i gizler. Çubuk kaybolunca (yukarı kaydırınca) class
   kalkar ve header normal sticky davranışına (resources/css/app.css)
   geri döner.
   ============================================================ */

/* ---------- Ortak ---------- */
.toc-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #16a34a;
    margin-bottom: 14px;
}

.toc-link {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.45;
    color: #6b7280;
    padding: 9px 0 9px 14px;
    border-left: 2px solid #e5e7eb;
    transition: color 0.15s, border-color 0.15s, font-weight 0.15s;
}

.toc-link:hover {
    color: #111827;
    border-left-color: #9ca3af;
}

.toc-link.is-active {
    color: #111827;
    font-weight: 600;
    border-left-color: #16a34a;
}

/* ---------- PC: sol sütun ---------- */
.article-layout {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.toc-desktop {
    display: none;
}

@media (min-width: 1024px) {
    .article-layout {
        flex-direction: row;
        align-items: flex-start;
        gap: 40px;
    }

    .toc-desktop {
        display: block;
        flex: 0 0 280px;
        max-width: 280px;
        position: sticky;
        /* Sticky header (70px) + nefes payı */
        top: 88px;
        max-height: calc(100vh - 110px);
        overflow-y: auto;
        /* Scrollbar normalde gizli, üzerine gelince görünür */
        scrollbar-width: none;
    }

    .toc-desktop::-webkit-scrollbar {
        width: 0;
    }

    .toc-desktop:hover {
        scrollbar-width: thin;
        scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
    }

    .toc-desktop:hover::-webkit-scrollbar {
        width: 6px;
    }

    .toc-desktop:hover::-webkit-scrollbar-thumb {
        background: rgba(156, 163, 175, 0.5);
        border-radius: 10px;
    }

    .article-main {
        flex: 1;
        min-width: 0;
    }
}

/* ---------- Paylaşım butonları (TOC sidebar + mobil fallback) ---------- */
.toc-share {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.toc-share__label {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    flex-shrink: 0;
}

.toc-share__icons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toc-share__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.toc-share__icon:hover {
    transform: translateY(-2px);
    opacity: 0.8;
}

.toc-share__icon svg {
    width: 100%;
    height: 100%;
}

.toc-share__icon--whatsapp { color: #25d366; }
.toc-share__icon--x { color: #0f1419; }
.toc-share__icon--linkedin { color: #0a66c2; }
.toc-share__icon--facebook { color: #1877f2; }

/* İçindekiler varsa paylaşım butonları PC'de aside içinde, mobil/tablette
   açılır panelin (.toc-mobile__panel) altında gösterilir; içerik altındaki
   bu kopya çift görünmesin diye HER ekran boyutunda gizlenir. TOC yoksa
   (başlık bulunamadıysa) ne aside ne panel render edilir, bu yüzden bu
   kopya tek gösterim noktası olarak kalır (fallback). */
.article-share-fallback.has-toc {
    display: none;
}

/* ---------- Mobil/Tablet: sabit çubuk ---------- */
.toc-mobile {
    display: none;
}

@media (max-width: 1023px) {
    .toc-mobile {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        /* Çubuk header'ın YERİNİ alır (aynı anda ikisi görünmez — bkz.
           body.toc-header-swap #headerMain kuralı). Bu yüzden top:0. */
        top: 0;
        z-index: 1000;
        background: #fff;
        border-bottom: 1px solid #e5e7eb;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
        /* Gizleme SADECE translateY ile yapılmamalı: sabit yükseklikli bir
           çubuğu translateY(-120%) ile taşımak, yüksekliğine bağlı olarak
           alt kenarını tam ekran dışına çıkarmayabiliyor (ince bir şerit
           kalıyordu). visibility + opacity ile kesin olarak gizlenir,
           transform yalnızca animasyon için kalır. */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity 0.2s ease, transform 0.25s ease, visibility 0.25s;
        pointer-events: none;
    }

    .toc-mobile.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
}

.toc-mobile__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px 12px;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.toc-mobile__texts {
    flex: 1;
    min-width: 0;
}

.toc-mobile__current {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toc-mobile__next {
    font-size: 12px;
    color: #9ca3af;
    line-height: 1.35;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toc-mobile__chevron {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: #6b7280;
    transition: transform 0.2s ease;
}

.toc-mobile.is-open .toc-mobile__chevron {
    transform: rotate(180deg);
}

/* Okuma ilerlemesi — aktif başlığa göre dolup boşalır */
.toc-mobile__progress {
    height: 3px;
    background: #e5e7eb;
    overflow: hidden;
}

.toc-mobile__progress-bar {
    height: 100%;
    width: 0;
    background: #16a34a;
    transition: width 0.25s ease;
}

/* Açılır başlık listesi */
.toc-mobile__panel {
    display: none;
    max-height: min(60vh, 420px);
    overflow-y: auto;
    padding: 8px 16px 16px;
    border-top: 1px solid #f3f4f6;
}

.toc-mobile.is-open .toc-mobile__panel {
    display: block;
}

.toc-mobile__panel .toc-link {
    font-size: 14px;
    padding: 10px 0 10px 14px;
}

/* Panel açıkken arka planı karart */
.toc-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    z-index: 890;
}

.toc-backdrop.is-visible {
    display: block;
}

@media (min-width: 1024px) {
    .toc-backdrop {
        display: none !important;
    }
}

/* Başlığa kaydırırken sabit çubuğun altında kalmasın */
.news-content h2 {
    scroll-margin-top: 140px;
}

@media (min-width: 1024px) {
    .news-content h2 {
        scroll-margin-top: 100px;
    }
}

/* Mobil/Tablet: TOC çubuğu görünürken sabit header'ı gizle (yer değiştirme).
   #headerMain'in resources/css/app.css'teki transition listesi burada da
   korunur, sadece opacity/visibility eklenir — böylece stuck animasyonu
   bozulmaz. Yalnızca body.header-stuck (fixed) durumunu etkiler; header
   henüz normal akıştaysa (nadir durum) dokunulmaz. */
@media (max-width: 1023px) {
    body.toc-header-swap.header-stuck #headerMain {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: background-color 0.25s ease, backdrop-filter 0.25s ease,
            box-shadow 0.25s ease, opacity 0.2s ease, visibility 0.25s;
    }
}