/**
 * Utility & 404 Stilleri
 * 404 sayfası, erişilebilirlik yardımcıları, focus stilleri
 * @package brk
 */

/* ============================================================
   404 SAYFASI
   ============================================================ */

.brk-404 {
    max-width: 600px;
    margin: var(--brk-space-16) auto;
    text-align: center;
    padding: var(--brk-space-8);
}

.brk-404__code {
    font-size: clamp(5rem, 15vw, 9rem);
    font-weight: var(--brk-weight-bold);
    color: var(--brk-gray-200);
    line-height: 1;
    font-family: var(--brk-font-mono);
    letter-spacing: -0.04em;
    margin-bottom: var(--brk-space-4);
}

.brk-404__title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: var(--brk-weight-bold);
    color: var(--brk-gray-900);
    margin-bottom: var(--brk-space-3);
}

.brk-404__desc {
    font-size: var(--brk-text-lg);
    color: var(--brk-gray-600);
    margin-bottom: var(--brk-space-8);
    line-height: var(--brk-leading-relaxed);
}

.brk-404__actions {
    display: flex;
    gap: var(--brk-space-4);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--brk-space-10);
}

.brk-404__suggestions {
    text-align: left;
    background: var(--brk-gray-50);
    border-radius: var(--brk-radius-xl);
    padding: var(--brk-space-6);
}

.brk-404__suggestions-title {
    font-size: var(--brk-text-base);
    font-weight: var(--brk-weight-bold);
    color: var(--brk-gray-900);
    margin-bottom: var(--brk-space-4);
}

.brk-404__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--brk-space-2);
}

.brk-404__link {
    display: block;
    padding: var(--brk-space-2) var(--brk-space-3);
    color: var(--brk-gray-700);
    text-decoration: none;
    border-radius: var(--brk-radius-md);
    font-size: var(--brk-text-base);
    transition: background var(--brk-transition), color var(--brk-transition);
}

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

/* ============================================================
   ERİŞİLEBİLİRLİK — Focus stilleri
   ============================================================ */

:focus-visible {
    outline: 2px solid var(--brk-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Yalnızca klavye kullanıcıları için */
:focus:not(:focus-visible) {
    outline: none;
}

/* Skip link (header.php'de var, buraya da taşıdık) */
.skip-link:focus {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    background: var(--brk-dark);
    color: var(--brk-accent);
    padding: var(--brk-space-3) var(--brk-space-6);
    font-weight: var(--brk-weight-semi);
    border-radius: 0 0 var(--brk-radius-md) 0;
}

/* ============================================================
   PRINT STİLLERİ
   ============================================================ */

@media print {
    .brk-header,
    .brk-footer,
    .brk-sidebar,
    .brk-cluster-sidebar,
    .brk-faq-sidebar,
    .brk-pillar-sidebar,
    .brk-ref-hero,
    .brk-ref-inline,
    .brk-ref-sidebar,
    .brk-footer-cta-band,
    .brk-toc,
    .brk-nav-toggle,
    .brk-calc__cta,
    #brk-copy-toast {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    a {
        color: #000;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
        color: #666;
    }

    /* Affiliate linklerinin URL'sini gösterme */
    a[rel*="sponsored"]::after {
        display: none;
    }

    h1, h2, h3 {
        page-break-after: avoid;
        page-break-inside: avoid;
    }

    .brk-pillar-layout,
    .brk-cluster-layout,
    .brk-faq-layout {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   YÜKLEME ANİMASYONU — Sayfa geçişi
   ============================================================ */

@keyframes brk-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.brk-main {
    animation: brk-fade-in 0.25s ease-out;
}

/* ============================================================
   SEÇİLMİŞ METİN RENGİ
   ============================================================ */

::selection {
    background: var(--brk-accent-light);
    color: var(--brk-dark);
}

::-moz-selection {
    background: var(--brk-accent-light);
    color: var(--brk-dark);
}

/* ============================================================
   SCROLL BAR ÖZELLEŞTIRME (WebKit)
   ============================================================ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--brk-gray-100);
}

::-webkit-scrollbar-thumb {
    background: var(--brk-gray-400);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brk-gray-600);
}

/* ============================================================
   RESPONSIVE YARDIMCILARI
   ============================================================ */

@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
    .hide-desktop { display: none !important; }
}

/* ============================================================
   STICKY FOOTER — Sayfa kısa olsa bile footer altta
   ============================================================ */

.brk-page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.brk-page-wrapper > .brk-main,
.brk-page-wrapper > main {
    flex: 1;
}