/**
 * Pillar Page Stilleri
 * Hero, layout, TOC, freshness bar, sidebar links, içerik tipografisi
 * @package brk
 */

/* ============================================================
   PILLAR HERO
   ============================================================ */

.brk-pillar-hero {
    background: linear-gradient(180deg, var(--brk-gray-50) 0%, var(--brk-white) 100%);
    border-bottom: 1px solid var(--brk-gray-200);
    padding-top: var(--brk-space-8);
    padding-bottom: var(--brk-space-10);
}

.brk-pillar-hero__inner {
    max-width: 860px;
}

.brk-pillar-hero__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--brk-space-3);
    margin-bottom: var(--brk-space-5);
    font-size: var(--brk-text-sm);
    color: var(--brk-gray-500, #6B7280);
}

.brk-pillar-hero__title {
    font-size: clamp(1.875rem, 4vw, 3rem);
    font-weight: var(--brk-weight-bold);
    line-height: 1.15;
    color: var(--brk-gray-900);
    margin-bottom: var(--brk-space-5);
    letter-spacing: -0.02em;
}

.brk-pillar-hero__excerpt {
    font-size: var(--brk-text-xl);
    color: var(--brk-gray-600);
    line-height: var(--brk-leading-relaxed);
    max-width: 680px;
    margin-bottom: var(--brk-space-5);
}

/* ============================================================
   FRESHNESS BAR
   ============================================================ */

.brk-freshness-bar {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--brk-space-2);
    padding: var(--brk-space-2) var(--brk-space-4);
    background: var(--brk-white);
    border: 1px solid var(--brk-gray-200);
    border-radius: var(--brk-radius-full);
    font-size: var(--brk-text-sm);
    color: var(--brk-gray-600);
}

.brk-freshness-bar__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.brk-freshness-bar.is-fresh  .brk-freshness-bar__dot { background: var(--brk-success); }
.brk-freshness-bar.is-recent .brk-freshness-bar__dot { background: var(--brk-accent); }
.brk-freshness-bar.is-aging  .brk-freshness-bar__dot { background: var(--brk-gray-400); }

.brk-freshness-bar__label {
    font-weight: var(--brk-weight-semi);
    color: var(--brk-gray-700);
}

.brk-freshness-bar__date {
    font-weight: var(--brk-weight-medium);
    color: var(--brk-gray-900);
    font-style: normal;
}

.brk-freshness-bar__note {
    color: var(--brk-gray-400);
}

/* ============================================================
   PILLAR LAYOUT (2 kolon)
   ============================================================ */

.brk-pillar-body {
    padding-top: var(--brk-space-10);
    padding-bottom: var(--brk-space-16);
}

.brk-pillar-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--brk-space-10);
    align-items: start;
}

/* Ana içerik */
.brk-pillar-main {
    min-width: 0; /* Grid overflow fix */
}

/* Sidebar sticky */
.brk-pillar-sidebar__sticky {
    position: sticky;
    top: calc(var(--brk-header-height) + 1.5rem);
    display: flex;
    flex-direction: column;
    gap: var(--brk-space-5);
}

/* ============================================================
   TABLE OF CONTENTS
   ============================================================ */

.brk-toc {
    background: var(--brk-gray-50);
    border: 1px solid var(--brk-gray-200);
    border-left: 3px solid var(--brk-accent);
    border-radius: var(--brk-radius-lg);
    padding: var(--brk-space-5);
    margin-bottom: var(--brk-space-8);
}

.brk-toc__header {
    display: flex;
    align-items: center;
    gap: var(--brk-space-2);
    margin-bottom: var(--brk-space-4);
    cursor: pointer;
    user-select: none;
}

.brk-toc__icon {
    font-size: var(--brk-text-base);
    color: var(--brk-accent-dark);
}

.brk-toc__title {
    flex: 1;
    font-size: var(--brk-text-base);
    font-weight: var(--brk-weight-bold);
    color: var(--brk-gray-900);
}

.brk-toc__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: none;
    border: 1px solid var(--brk-gray-200);
    border-radius: var(--brk-radius-md);
    cursor: pointer;
    color: var(--brk-gray-600);
    transition: background var(--brk-transition), transform var(--brk-transition);
    flex-shrink: 0;
}

.brk-toc__toggle:hover {
    background: var(--brk-gray-200);
}

.brk-toc__chevron {
    transition: transform var(--brk-transition);
}

.brk-toc[data-collapsed="true"] .brk-toc__chevron {
    transform: rotate(180deg);
}

.brk-toc[data-collapsed="true"] .brk-toc__list {
    display: none;
}

.brk-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    counter-reset: toc-counter;
}

.brk-toc__item {
    counter-increment: toc-counter;
}

.brk-toc__item--h2 { padding-left: 0; }
.brk-toc__item--h3 { padding-left: var(--brk-space-5); }

.brk-toc__link {
    display: flex;
    align-items: center;
    gap: var(--brk-space-2);
    padding: var(--brk-space-2) var(--brk-space-3);
    font-size: var(--brk-text-sm);
    color: var(--brk-gray-600);
    text-decoration: none;
    border-radius: var(--brk-radius-md);
    line-height: var(--brk-leading-snug);
    transition: background var(--brk-transition), color var(--brk-transition);
}

.brk-toc__item--h2 .brk-toc__link::before {
    content: counter(toc-counter) ".";
    font-size: var(--brk-text-xs);
    font-weight: var(--brk-weight-bold);
    color: var(--brk-accent-dark);
    flex-shrink: 0;
    min-width: 18px;
}

.brk-toc__link:hover {
    background: var(--brk-white);
    color: var(--brk-gray-900);
    text-decoration: none;
}

/* Aktif bölüm */
.brk-toc__link.is-active {
    background: var(--brk-accent-light);
    color: var(--brk-dark);
    font-weight: var(--brk-weight-semi);
}

.brk-toc__link.is-active::before {
    color: var(--brk-accent-dark);
}

/* ============================================================
   PİLLAR İÇERİK TİPOGRAFİSİ (entry-content override)
   ============================================================ */

.brk-pillar-content h2 {
    font-size: clamp(1.375rem, 2.5vw, 1.875rem);
    font-weight: var(--brk-weight-bold);
    color: var(--brk-gray-900);
    margin-top: var(--brk-space-12);
    margin-bottom: var(--brk-space-5);
    padding-top: var(--brk-space-8);
    border-top: 2px solid var(--brk-gray-200);
    scroll-margin-top: calc(var(--brk-header-height) + 1.5rem);
}

/* İlk H2'de üst çizgi yok */
.brk-pillar-content h2:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: var(--brk-space-8);
}

.brk-pillar-content h3 {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    font-weight: var(--brk-weight-bold);
    color: var(--brk-gray-800);
    margin-top: var(--brk-space-8);
    margin-bottom: var(--brk-space-4);
    scroll-margin-top: calc(var(--brk-header-height) + 1.5rem);
}

.brk-pillar-content p {
    font-size: var(--brk-text-lg);
    line-height: var(--brk-leading-loose);
    color: var(--brk-gray-700, #374151);
    margin-bottom: var(--brk-space-5);
}

.brk-pillar-content ul,
.brk-pillar-content ol {
    margin-bottom: var(--brk-space-5);
    padding-left: var(--brk-space-6);
}

.brk-pillar-content li {
    font-size: var(--brk-text-lg);
    line-height: var(--brk-leading-loose);
    color: var(--brk-gray-700, #374151);
    margin-bottom: var(--brk-space-2);
}

/* Tablo */
.brk-pillar-content table {
    font-size: var(--brk-text-base);
    box-shadow: var(--brk-shadow-sm);
    border-radius: var(--brk-radius-lg);
    overflow: hidden;
}

.brk-pillar-content table th {
    background: var(--brk-dark);
    color: var(--brk-white);
    font-size: var(--brk-text-sm);
    letter-spacing: 0.02em;
}

.brk-pillar-content table th:first-child { border-radius: var(--brk-radius-lg) 0 0 0; }
.brk-pillar-content table th:last-child  { border-radius: 0 var(--brk-radius-lg) 0 0; }

/* ============================================================
   SIDEBAR İÇ LİNK KUTUSU
   ============================================================ */

.brk-sidebar-links {
    padding: var(--brk-space-5);
}

.brk-sidebar-links__title {
    font-size: var(--brk-text-sm);
    font-weight: var(--brk-weight-bold);
    color: var(--brk-gray-900);
    margin-bottom: var(--brk-space-4);
    padding-bottom: var(--brk-space-3);
    border-bottom: 2px solid var(--brk-accent);
}

.brk-sidebar-links__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.brk-sidebar-links__link {
    display: block;
    padding: var(--brk-space-2) var(--brk-space-3);
    font-size: var(--brk-text-sm);
    color: var(--brk-gray-700);
    text-decoration: none;
    border-radius: var(--brk-radius-md);
    transition: background var(--brk-transition), color var(--brk-transition);
    line-height: var(--brk-leading-snug);
}

.brk-sidebar-links__link:hover {
    background: var(--brk-accent-light);
    color: var(--brk-dark);
    text-decoration: none;
}

/* ============================================================
   FOOTER KONTRAST DÜZELTMESİ (FAZ 1 notu)
   ============================================================ */

/* Sol kolon tagline — daha okunaklı */
.brk-footer__tagline {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Referans kodu kutusu başlık */
.brk-footer__ref-label {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* Footer nav linkleri — daha görünür */
.brk-footer__nav a {
    color: rgba(255, 255, 255, 0.7) !important;
}

.brk-footer__nav a:hover {
    color: var(--brk-accent) !important;
}

/* Footer col başlıklar */
.brk-footer__col-title {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* CTA band metni */
.brk-footer-cta-band__text {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Footer bottom disclaimer */
.brk-footer__disclaimer {
    color: rgba(255, 255, 255, 0.3) !important;
}

.brk-footer__copy {
    color: rgba(255, 255, 255, 0.45) !important;
}

/* ============================================================
   RESPONSIVE — PILLAR
   ============================================================ */

@media (max-width: 1100px) {
    .brk-pillar-layout {
        grid-template-columns: 1fr 260px;
        gap: var(--brk-space-8);
    }
}

@media (max-width: 900px) {
    .brk-pillar-layout {
        grid-template-columns: 1fr;
    }

    .brk-pillar-sidebar {
        order: -1; /* Sidebar üste çıkar — mobilde CTA önce görünsün */
    }

    .brk-pillar-sidebar__sticky {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .brk-pillar-sidebar__sticky > * {
        flex: 1;
        min-width: 260px;
    }
}

@media (max-width: 640px) {
    .brk-pillar-hero__title {
        font-size: clamp(1.5rem, 6vw, 2.25rem);
    }

    .brk-pillar-hero__excerpt {
        font-size: var(--brk-text-base);
    }

    .brk-toc {
        margin-bottom: var(--brk-space-6);
    }

    .brk-pillar-sidebar__sticky {
        flex-direction: column;
    }

    .brk-pillar-content h2 {
        margin-top: var(--brk-space-8);
        padding-top: var(--brk-space-5);
    }
}