/* =====================================================================
   LikedWin — SSS (Sıkça Sorulan Sorular)
   Sol: başlık + canlı destek kartı · Sağ: animasyonlu akordeon.
   Veriler panel `faq` tablosundan gelir. site.css değişkenlerini kullanır.
   ===================================================================== */

.faq {
    position: relative;
    padding: clamp(52px, 6vw, 92px) 0 clamp(56px, 6vw, 96px);
    background: linear-gradient(180deg, var(--bg-soft) 0%, #ffffff 100%);
    overflow: hidden;
}

.faq__inner {
    display: grid;
    grid-template-columns: minmax(280px, 380px) 1fr;
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
}

/* ---------- Sol: başlık + destek ---------- */
.faq__aside { position: sticky; top: 88px; }
.faq__eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 15px 6px 7px; margin-bottom: 16px;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f7ff 100%);
    border: 1px solid var(--brand-line);
    box-shadow: 0 4px 14px -6px rgba(37, 68, 216, .28), inset 0 1px 0 #fff;
    font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--brand);
}
.faq__eyebrow i {
    display: inline-grid; place-items: center;
    width: 20px; height: 20px; border-radius: 6px;
    background: var(--brand-soft); color: var(--brand); font-size: 11px;
}
.faq__title {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: clamp(26px, 3.2vw, 40px); font-weight: 800; line-height: 1.14;
    letter-spacing: -.02em; color: var(--ink); margin: 0 0 12px;
}
.faq__sub { font-size: clamp(14px, 1.5vw, 16px); line-height: 1.6; color: var(--muted); font-weight: 500; margin: 0 0 22px; }

.faq__support {
    display: inline-flex; align-items: center; gap: 13px;
    padding: 14px 18px; border-radius: 16px;
    background: #fff; border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.faq__support:hover { border-color: var(--brand-line-2); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.faq__support-ico {
    flex: none; display: grid; place-items: center;
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--brand-soft); color: var(--brand); font-size: 18px;
}
/* Yalnızca metin span'i (ikon kutusunu hariç tut → ikon grid ile ortalı kalır) */
.faq__support span:not(.faq__support-ico) { display: flex; flex-direction: column; line-height: 1.25; }
.faq__support b { font-size: 14.5px; font-weight: 800; color: var(--ink); }
.faq__support small { font-size: 12.5px; color: var(--success); font-weight: 600; }

/* ---------- Sağ: akordeon ---------- */
.faq__list { display: flex; flex-direction: column; gap: 12px; }

.faq-item {
    background: #fff; border: 1px solid var(--line); border-radius: 16px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    opacity: 0; transform: translateY(16px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .25, 1), border-color .25s ease, box-shadow .25s ease;
    transition-delay: calc(var(--i) * 60ms);
}
.faq.is-visible .faq-item { opacity: 1; transform: translateY(0); }
.faq-item:hover { border-color: var(--brand-line-2); }
.faq-item.open { border-color: var(--brand-line-2); box-shadow: var(--shadow-md); }

.faq-q {
    display: flex; align-items: center; gap: 16px; width: 100%;
    padding: 18px 20px;
    background: none; border: 0; text-align: left;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: clamp(14.5px, 1.5vw, 16px); font-weight: 700; color: var(--ink);
    cursor: pointer;
}
.faq-q > span { flex: 1; line-height: 1.4; }
.faq-chev {
    flex: none; display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 9px;
    background: var(--brand-soft); color: var(--brand); font-size: 13px;
    transition: transform .35s cubic-bezier(.2, .8, .25, 1), background .25s ease;
}
.faq-item.open .faq-chev { transform: rotate(180deg); background: var(--brand); color: #fff; }

/* Yumuşak aç/kapa: grid-template-rows 0fr → 1fr */
.faq-a {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .38s cubic-bezier(.2, .8, .25, 1);
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a__wrap { overflow: hidden; }
.faq-a__in {
    padding: 0 20px 20px;
    font-size: 14.5px; line-height: 1.65; color: var(--muted);
    border-top: 1px solid transparent;
}

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
    .faq__inner { grid-template-columns: 1fr; gap: 26px; }
    .faq__aside { position: static; text-align: center; }
    .faq__support { align-self: center; }
}

/* ---------- Hareketi azalt ---------- */
@media (prefers-reduced-motion: reduce) {
    .faq-item { opacity: 1; transform: none; transition: none; }
    .faq-a, .faq-chev { transition: none; }
}