/*
 * Sıkça sorulan sorular (/sss) — yalnızca bu sayfada yüklenir. Sol menü ve kart görünümü
 * bilesenler/kurumsal-menu.css'te.
 *
 * Akış: giriş metni → kategori bağlantıları → kategori başına bir kart (H2) içinde Bootstrap
 * akordeon (soru H3) → yardım kartı. Kart içinde kart yok: sorular ince çizgiyle ayrılan
 * satırlardır (§6.15: satır 56px, sağda chevron, açık panel 16px iç boşluk).
 */

.sss {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--b-4);
}

.sss-giris {
    max-width: 60ch;
    margin: 0 0 var(--b-1);
    color: var(--renk-metin-ikincil);
    font-size: var(--t-lg);
    line-height: var(--t-satir-govde);
}

/* Kategori bağlantıları (sayfa içi çapa) */
.sss-kategoriler {
    display: flex;
    flex-wrap: wrap;
    gap: var(--b-2);
}

.sss-kategoriler a {
    display: inline-flex;
    align-items: center;
    gap: var(--b-2);
    min-height: 40px;
    padding: 0 var(--b-4);
    border: 1px solid var(--renk-kenar-guclu);
    border-radius: var(--r-tam);
    background-color: var(--renk-yuzey);
    color: var(--renk-metin);
    font-size: var(--t-sm);
    font-weight: var(--t-orta);
    text-decoration: none;
    transition: border-color var(--sure-hizli) ease;
}

.sss-kategoriler a .bi {
    color: var(--renk-metin-ikincil);
}

.sss-kategoriler a:hover {
    border-color: var(--gri-900);
    color: var(--renk-metin);
}

/* Kategori kartı */
.sss-kategori {
    scroll-margin-top: var(--b-20);
}

.sss-kategori > h2 {
    display: flex;
    align-items: center;
    gap: var(--b-3);
    margin: 0 0 var(--b-2);
    color: var(--renk-metin);
    font-family: var(--t-aile-baslik);
    font-size: var(--t-xl);
    font-weight: var(--t-kalin);
}

.sss-kategori > h2 .bi {
    color: var(--renk-metin-ikincil);
    font-size: var(--t-lg);
}

/* Akordeon: Bootstrap bileşeni sade satırlara çekilir. */
.sss-liste {
    --bs-accordion-border-color: var(--renk-kenar);
}

.sss-liste .accordion-item {
    border: 0;
    border-bottom: var(--kenar);
    border-radius: 0;
    background: none;
    scroll-margin-top: var(--b-20);
}

.sss-liste .accordion-item:last-child {
    border-bottom: 0;
}

.sss-liste .accordion-header {
    margin: 0;
    font-size: inherit;
}

.sss-liste .accordion-button {
    gap: var(--b-4);
    min-height: 56px;
    padding: var(--b-3) 0;
    background: none;
    color: var(--renk-metin);
    font-family: var(--t-aile);
    font-size: var(--t-md);
    font-weight: var(--t-orta);
    line-height: var(--t-satir-arayuz);
    /* Temanın .accordion-button kuralı nowrap verir; uzun sorular satıra sarılmalı. */
    white-space: normal;
    text-align: left;
    box-shadow: none;
}

/* Bootstrap 5.1 değişkenleri kullanmaz; renk ve ok doğrudan ezilir (varsayılanı mavi). Açık
   soru koyu kalır, chevron 180° döner. */
.sss-liste .accordion-button:not(.collapsed) {
    background: none;
    box-shadow: none;
    color: var(--renk-metin);
}

.sss-liste .accordion-button:focus {
    box-shadow: none;
}

/* Chevron metin rengini alır (Bootstrap'ın açık durumdaki mavi görseli yerine maske); açıkken
   Bootstrap 180° döndürür. */
.sss-liste .accordion-button::after,
.sss-liste .accordion-button:not(.collapsed)::after {
    background-image: none;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='black' fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='black' fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") center / contain no-repeat;
}

.sss-liste .accordion-button:focus-visible {
    outline: var(--odak-cizgi);
    outline-offset: 2px;
    border-radius: var(--r-kucuk);
}

.sss-liste .accordion-body {
    padding: 0 0 var(--b-4);
    color: var(--renk-metin-ikincil);
    font-size: var(--t-md);
    line-height: var(--t-satir-govde);
}

.sss-liste .accordion-body a {
    color: var(--renk-metin);
    font-weight: var(--t-orta);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sss-liste .accordion-body strong {
    color: var(--renk-metin);
}

/* Yardım kartı */
.sss-yardim {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--b-4) var(--b-6);
}

.sss-yardim h2 {
    margin: 0 0 var(--b-1);
    color: var(--renk-metin);
    font-family: var(--t-aile-baslik);
    font-size: var(--t-lg);
    font-weight: var(--t-kalin);
}

.sss-yardim p {
    margin: 0;
    color: var(--renk-metin-ikincil);
    font-size: var(--t-md);
}

.sss-yardim .otocars-btn {
    flex-shrink: 0;
}

@media (max-width: 767.98px) {
    .sss-giris {
        font-size: var(--t-md);
    }

    .sss-yardim {
        flex-direction: column;
        align-items: flex-start;
    }

    .sss-yardim .otocars-btn {
        width: 100%;
    }
}