/* ============================================================
   246 Software — Sıkça Sorulan Sorular

   Masaüstünde iki sütun: solda başlık + iletişim kartı, sağda
   akordiyon. Mobilde başlık ve açıklama yan yana, ardından
   akordiyon, en altta kart.
   ============================================================ */

.faq {
    /* Dekoratif soru işareti bölümün dışına taşmasın */
    overflow: hidden;
    /* Üst dolgu, Biz bölümünün alt dolgusuyla aynı — böylece sayılar
       bandının üstündeki ve altındaki toplam boşluk eşitleniyor. */
    padding-block: clamp(3.125rem, calc(var(--vw) * 5), 6.25rem)
                   clamp(3.5rem, calc(var(--vw) * 6.5), 8rem);
    background-color: var(--c-black);
    color: var(--c-white);
}

.faq__container {
    position: relative;
}


/* ---------- Arka plandaki soru işareti ---------- */
.faq__deco {
    position: absolute;
    z-index: 0;
    inset-block-start: 1.5rem;
    inset-inline-start: -15vw;
    width: 48vw;
    height: auto;
    pointer-events: none;
    user-select: none;
}


/* ---------- Yerleşim ---------- */
.faq__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-areas:
        "intro"
        "list"
        "card";
    gap: clamp(2rem, calc(var(--vw) * 3.4), 4.25rem);
}


/* Mobilde sarmalayıcı görünmez olur: çocukları doğrudan ana ızgaraya
   katılır ve intro / list / card sırası korunur. */
.faq__aside {
    display: contents;
}


/* ---------- Başlık bloğu ---------- */
.faq__intro {
    grid-area: intro;
    display: flex;
    align-items: flex-start;
    gap: clamp(1rem, calc(var(--vw) * 1.8), 2.25rem);
}

.faq__title {
    font-size: clamp(1.75rem, calc(var(--vw) * 3.75), 4.5rem);
    font-weight: var(--fw-bold);
    letter-spacing: -0.03em;
    line-height: 0.95;
    flex-shrink: 0;
}

.faq__title span {
    display: block;
}

.faq__lead {
    /* Mobilde sarı ve başlığın yanında, ayraç çizgisiyle */
    padding-inline-start: clamp(1rem, calc(var(--vw) * 1.8), 2.25rem);
    border-inline-start: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--c-yellow);
    font-size: clamp(0.9375rem, calc(var(--vw) * 0.94), 1.125rem);
    line-height: 1.6;
}


/* ---------- İletişim kartı ---------- */
/* Kart, bölümün siyahından belirgin şekilde ayrılan bir yüzey olmalı;
   aksi halde yalnızca ince çerçevesiyle var oluyor ve okunmuyor. */
.faq__card {
    /* Mobilde gizli: aşağıdaki iletişim bölümü (form) aynı bilgiyi veriyor;
       1024 px ve üstünde yeniden gösteriliyor. */
    display: none;
    grid-area: card;
    background-color: #131312;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 2px;
}

.faq__card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: clamp(0.875rem, calc(var(--vw) * 1.1), 1.375rem)
             clamp(1rem, calc(var(--vw) * 1.5), 1.875rem);
    background-color: #1A1A18;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.faq__card-title {
    color: var(--c-yellow);
    font-size: clamp(0.6875rem, calc(var(--vw) * 0.73), 0.875rem);
    font-weight: var(--fw-bold);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.faq__card-badge {
    color: var(--c-yellow);
    font-size: clamp(0.625rem, calc(var(--vw) * 0.68), 0.8125rem);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.02em;
}

/* Kanal satırları */
.faq__row {
    display: grid;
    grid-template-columns: minmax(0, 5rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-3);
    padding: clamp(0.875rem, calc(var(--vw) * 1.35), 1.6875rem)
             clamp(1rem, calc(var(--vw) * 1.5), 1.875rem);
    transition: background-color var(--t-fast);
}

.faq__row + .faq__row {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.faq__row:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

.faq__row-label {
    color: var(--c-gray-400);
    font-size: clamp(0.625rem, calc(var(--vw) * 0.68), 0.8125rem);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.faq__row-value {
    font-size: clamp(0.9375rem, calc(var(--vw) * 0.885), 1.0625rem);
    font-weight: var(--fw-bold);
}

.faq__row-arrow {
    color: var(--c-yellow);
    font-size: 1.125rem;
    font-weight: var(--fw-bold);
    line-height: 1;
    transition: transform var(--t-fast);
}

.faq__row:hover .faq__row-arrow {
    transform: translateX(0.25rem);
}


/* ---------- Akordiyon ---------- */
.faq__list {
    grid-area: list;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.faq__item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    padding-block: clamp(1.125rem, calc(var(--vw) * 1.8), 2.25rem);
    cursor: pointer;
    font-size: clamp(1.0625rem, calc(var(--vw) * 1.2), 1.4375rem);
    font-weight: var(--fw-bold);
    letter-spacing: -0.01em;
    line-height: 1.3;
    list-style: none;
    transition: color var(--t-fast);
}

/* Tarayıcının varsayılan üçgen işaretini gizle */
.faq__q::-webkit-details-marker {
    display: none;
}

.faq__q:hover {
    color: var(--c-yellow);
}

/* + / − işareti: iki çubuk, açıkken dikey olan kaybolur */
.faq__icon {
    position: relative;
    width: 0.9375rem;
    height: 0.9375rem;
    flex-shrink: 0;
}

.faq__icon::before,
.faq__icon::after {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0;
    width: 100%;
    height: 2px;
    margin-block-start: -1px;
    background-color: var(--c-yellow);
    transition: transform var(--t-fast);
}

.faq__icon::after {
    transform: rotate(90deg);
}

.faq__item[open] .faq__icon::after {
    transform: rotate(90deg) scaleX(0);
}

.faq__a {
    padding-block-end: clamp(1.125rem, calc(var(--vw) * 1.8), 2.25rem);
    color: var(--c-gray-400);
    font-size: clamp(0.9375rem, calc(var(--vw) * 0.94), 1.125rem);
    line-height: 1.7;
    max-width: 62ch;
}


/* ============================================================
   Masaüstü
   ============================================================ */
@media (min-width: 1024px) {
    .faq__card {
        display: block;
    }

    .faq__inner {
        /* Sol sütun başlık + kart, sağ sütun akordiyon (iki satırı da kaplar) */
        grid-template-columns: 35% minmax(0, 1fr);
        column-gap: 17%;
        grid-template-areas: "aside list";
        align-items: start;
    }

    /* Masaüstünde açıklama başlığın altına iner ve gri olur */
    .faq__intro {
        flex-direction: column;
        gap: clamp(1rem, calc(var(--vw) * 1.7), 2.125rem);
    }

    .faq__lead {
        padding-inline-start: 0;
        border-inline-start: none;
        color: var(--c-gray-400);
    }

    /* Basamaklı başlık: her satır bir öncekinden biraz sağda.
       `em` cinsinden olduğu için yazı boyutuyla birlikte ölçekleniyor. */
    .faq__title span:nth-child(2) { padding-inline-start: 0.5em; }
    .faq__title span:nth-child(3) { padding-inline-start: 1em; }

    /* Tasarımdaki boyut. Soru işaretinin noktası kartın altına düştüğü için
       bölümün alt dolgusu ona yer açacak kadar geniş; `overflow: hidden` de
       akordiyon kapandığında taşmaya karşı güvence. */
    .faq {
        padding-block-end: clamp(3.5rem, calc(var(--vw) * 13), 16rem);
    }

    .faq__deco {
        inset-block-start: 0;
        inset-inline-start: calc(var(--container-pad) + clamp(2rem, calc(var(--vw) * 9.1), 9rem));
        width: auto;
        height: calc(var(--vw) * 46);
    }

    /* Sol sütun tek bir ızgara öğesi. Başlık ve kart artık akordiyonla
       aynı satırları paylaşmadığı için soru açılıp kapandığında kart
       yerinden oynamıyor. */
    .faq__aside {
        display: flex;
        flex-direction: column;
        gap: clamp(1.5rem, calc(var(--vw) * 2.4), 3rem);
        grid-area: aside;
        /* Sağa kaydır ama daraltma: `width: 100%` sütun genişliğini
           korur, marj bloğu iterek taşan kısmı sütunlar arası boşluğa
           denk getirir. Yalnız `padding` verseydik kart daralırdı. */
        margin-inline-start: clamp(1rem, calc(var(--vw) * 3), 3.75rem);
        width: 100%;
    }

    /* Masaüstünde açıklama ve iletişim kartı daha iri —
       sol sütun sağdaki akordiyona göre cılız kalmasın */
    .faq__lead {
        font-size: clamp(1rem, calc(var(--vw) * 1.15), 1.375rem);
    }

    .faq__card-head {
        padding: clamp(1rem, calc(var(--vw) * 1.4), 1.75rem)
                 clamp(1.25rem, calc(var(--vw) * 1.9), 2.375rem);
    }

    .faq__card-title {
        font-size: clamp(0.75rem, calc(var(--vw) * 0.9), 1.0625rem);
    }

    .faq__card-badge {
        font-size: clamp(0.6875rem, calc(var(--vw) * 0.82), 0.9375rem);
    }

    .faq__row-label {
        font-size: clamp(0.6875rem, calc(var(--vw) * 0.85), 1rem);
    }

    .faq__row-value {
        font-size: clamp(1rem, calc(var(--vw) * 1.1), 1.3125rem);
    }

    .faq__row-arrow {
        font-size: 1.375rem;
    }

    /* Masaüstünde etiket sütunu tasarımdaki gibi geniş */
    .faq__row {
        grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) auto;
        padding: clamp(1rem, calc(var(--vw) * 1.7), 2.125rem)
                 clamp(1.25rem, calc(var(--vw) * 1.9), 2.375rem);
    }
}