/* =============================================================================
   FUTBOLCU — FAQ PAGE STYLES (faq.css)
   ========================================================================== */

.fb-faq-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 28px;
    align-items: start;
}

.fb-faq-sidebar {
    position: sticky;
    top: 80px;
    display: grid;
    gap: 18px;
}

.fb-faq-coach-img {
    transition: transform .3s ease;
}

.fb-faq-coach-img:hover {
    transform: scale(1.04);
}

.fb-faq-search-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}

.fb-faq-search-box {
    flex: 1;
    min-width: 240px;
    max-width: 360px;
}

.fb-faq-item summary {
    font-family: Anton, sans-serif;
    font-size: 17px;
    color: #16281F;
    outline: none;
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    list-style: none;
}

.fb-faq-item summary::-webkit-details-marker {
    display: none;
}

.fb-faq-item summary::after {
    content: '+';
    margin-left: auto;
    font-family: Anton, sans-serif;
    font-size: 22px;
    color: #E8552B;
    line-height: 1;
    transition: transform 0.2s ease;
}

.fb-faq-item[open] summary::after {
    content: '−';
    color: #12291E;
}

@media (max-width: 960px) {
    .fb-faq-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .fb-faq-sidebar {
        position: static;
        order: 2;
    }
    .fb-faq-main {
        order: 1;
    }
    .fb-faq-search-box {
        max-width: 100%;
        min-width: 100%;
    }
}

@media (max-width: 600px) {
    .fb-faq-card {
        padding: 18px 14px !important;
        box-shadow: 4px 4px 0 rgba(12,31,22,.3) !important;
    }
    .fb-faq-title {
        font-size: 22px !important;
    }
    .fb-faq-item {
        padding: 14px 12px !important;
        box-shadow: 3px 3px 0 rgba(12,31,22,.25) !important;
    }
    .fb-faq-item summary {
        font-size: 15px !important;
        line-height: 1.35;
        flex-wrap: wrap;
    }
}

/* -----------------------------------------------------------------------------
   ÖNEMLİ REHBERLER LİNKLERİ (Retro Kart Tasarımı, Alt Çizgisiz)
   -------------------------------------------------------------------------- */
.fb-faq-guides {
    display: grid;
    gap: 10px;
}

.fb-faq-guide-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F5F0E1;
    border: 2.5px solid #12291E;
    box-shadow: 3px 3px 0 #12291E;
    padding: 12px 16px;
    font-family: Archivo, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #16281F;
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}

.fb-faq-guide-link:hover {
    background: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 5px 5px 0 #12291E;
    color: #2B6BE8;
}

.fb-faq-guide-icon {
    font-size: 17px;
    margin-right: 10px;
    vertical-align: middle;
}

.fb-faq-guide-arrow {
    font-family: Anton, sans-serif;
    font-size: 16px;
    color: #12291E;
    transition: transform .15s ease, color .15s ease;
}

.fb-faq-guide-link:hover .fb-faq-guide-arrow {
    transform: translateX(4px);
    color: #2B6BE8;
}