/* =====================================================================
   LikedWin — /sss (Sıkça Sorulan Sorular) sayfası
   Veriler panel `faq` tablosundan gelir (admin > SSS Yönetimi).
   marketing.css primitiflerinin (mk-*) üzerine kurulur.
   Anasayfadaki bölüm faq.css'i kullanır; sınıf adları bilerek ayrı (.fq-*).
   ===================================================================== */

/* =====================================================================
   1) HERO — arama kutusu + popüler etiketler
   ===================================================================== */
/* Arama kutusu gövdeye yakın dursun — mk-hero'nun varsayılan alt boşluğu fazla */
.fq-hero { padding-bottom: clamp(30px, 4vw, 58px); }
.fq-hero__inner { max-width: 780px; margin: 0 auto; text-align: center; }

.fq-hero__title {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: clamp(30px, 4.4vw, 52px); font-weight: 800; line-height: 1.1;
    letter-spacing: -.03em; color: var(--mk-ink); margin: 0 0 14px; text-wrap: balance;
}
.fq-hero__sub {
    font-size: clamp(15px, 1.7vw, 17.5px); line-height: 1.68; color: var(--muted);
    font-weight: 500; margin: 0 auto 28px; max-width: 560px;
}

/* ---------- Arama ---------- */
.fq-search { position: relative; max-width: 580px; margin: 0 auto; }
.fq-search__field {
    display: flex; align-items: center; gap: 12px;
    padding: 6px 6px 6px 20px;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px;
    box-shadow: 0 14px 38px -22px rgba(15, 22, 51, .55);
    transition: border-color var(--ease), box-shadow var(--ease);
}
.fq-search__field:focus-within { border-color: var(--brand); box-shadow: var(--mk-ring), 0 14px 38px -22px rgba(37, 68, 216, .6); }
.fq-search__ico { color: var(--muted-2); font-size: 16px; flex: none; }
.fq-search__input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
    padding: 13px 0; font-family: inherit; font-size: 15.5px; color: var(--text);
}
.fq-search__input::placeholder { color: var(--muted-2); }
.fq-search__clear {
    flex: none; display: none; place-items: center;
    width: 30px; height: 30px; margin-right: 4px;
    border: 0; border-radius: 50%; background: var(--bg-soft); color: var(--muted); font-size: 12px;
    transition: background var(--ease), color var(--ease);
}
.fq-search__clear:hover { background: #fee2e2; color: var(--danger); }
.fq-search.has-value .fq-search__clear { display: grid; }
.fq-search__btn {
    flex: none; display: grid; place-items: center;
    width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: var(--mk-grad); color: #fff; font-size: 15px;
    box-shadow: 0 10px 22px -12px rgba(37, 68, 216, .9);
}

/* ---------- Popüler etiketler ---------- */
.fq-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.fq-tags__label { font-size: 12.5px; font-weight: 700; color: var(--muted-2); align-self: center; margin-right: 2px; }
.fq-tag {
    padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 999px;
    background: var(--surface); color: var(--muted); font-size: 12.5px; font-weight: 600;
    transition: all var(--ease);
}
.fq-tag:hover { border-color: var(--brand-line-2); background: var(--brand-soft); color: var(--brand); transform: translateY(-1px); }

/* =====================================================================
   2) GÖVDE — sticky yan menü + akordeon
   ===================================================================== */
.fq-body { padding: clamp(40px, 5vw, 72px) 0 clamp(52px, 6vw, 90px); background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%); }

.fq-grid {
    display: grid; grid-template-columns: minmax(230px, 282px) minmax(0, 1fr);
    gap: clamp(24px, 3.4vw, 52px); align-items: start;
}

/* ---------- Sol: kategori menüsü ---------- */
.fq-aside { position: sticky; top: 88px; }
.fq-aside__title {
    font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted-2); margin: 0 0 12px; padding-left: 4px;
}
.fq-navlist { display: flex; flex-direction: column; gap: 4px; margin-bottom: 22px; }
.fq-navlink {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 14px; border-radius: 12px;
    font-size: 14px; font-weight: 600; color: var(--muted);
    border: 1px solid transparent;
    transition: all var(--ease);
}
.fq-navlink i { width: 18px; text-align: center; font-size: 13.5px; color: var(--muted-2); transition: color var(--ease); }
.fq-navlink span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fq-navlink b {
    flex: none; min-width: 24px; padding: 2px 7px; border-radius: 999px;
    background: var(--bg-soft); color: var(--muted-2); font-size: 11.5px; font-weight: 800; text-align: center;
}
.fq-navlink:hover { background: var(--surface); border-color: var(--line); color: var(--mk-ink); }
.fq-navlink.is-active {
    background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand);
    box-shadow: inset 3px 0 0 var(--brand);
}
.fq-navlink.is-active i { color: var(--brand); }
.fq-navlink.is-active b { background: var(--surface); color: var(--brand); }

/* ---------- Sol: destek kartı ---------- */
.fq-help {
    display: block; padding: 20px; border-radius: 18px;
    background: linear-gradient(150deg, #16205a 0%, #2544d8 100%);
    color: #fff; box-shadow: 0 20px 42px -24px rgba(37, 68, 216, .95);
    overflow: hidden; position: relative;
    transition: transform var(--ease), box-shadow var(--ease);
}
.fq-help:hover { transform: translateY(-3px); color: #fff; box-shadow: 0 26px 52px -24px rgba(37, 68, 216, 1); }
.fq-help::after {
    content: ""; position: absolute; top: -50px; right: -40px; width: 160px; height: 160px;
    background: radial-gradient(circle, rgba(255, 255, 255, .2), transparent 65%);
}
.fq-help__ico {
    display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 13px;
    border-radius: 13px; background: rgba(255, 255, 255, .16); font-size: 17px;
}
.fq-help__t { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 16.5px; font-weight: 800; margin: 0 0 6px; }
.fq-help__d { font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .82); margin: 0 0 14px; }
.fq-help__go { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; }
.fq-help__go i { transition: transform var(--ease); }
.fq-help:hover .fq-help__go i { transform: translateX(4px); }

.fq-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: #7ef0c3; margin-bottom: 10px; }
.fq-live__dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .7); animation: fqPulse 2s infinite; }
@keyframes fqPulse {
    0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, .7); }
    70%  { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

/* =====================================================================
   3) SAĞ: gruplar + akordeon
   ===================================================================== */
.fq-main { min-width: 0; }

.fq-group { margin-bottom: clamp(28px, 3.4vw, 44px); scroll-margin-top: 96px; }
.fq-group:last-child { margin-bottom: 0; }
.fq-group__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.fq-group__ico {
    display: grid; place-items: center; flex: none;
    width: 38px; height: 38px; border-radius: 12px;
    background: var(--brand-soft); color: var(--brand); font-size: 15px;
}
.fq-group__title {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: clamp(18px, 2.1vw, 23px); font-weight: 800; letter-spacing: -.02em;
    color: var(--mk-ink); margin: 0;
}
.fq-group__count { font-size: 12.5px; font-weight: 700; color: var(--muted-2); }

.fq-list { display: flex; flex-direction: column; gap: 11px; }

.fq-item {
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    box-shadow: var(--shadow-sm); overflow: hidden;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.fq-item:hover { border-color: var(--brand-line-2); }
.fq-item.is-open { border-color: var(--brand-line-2); box-shadow: var(--mk-card); }

.fq-q {
    display: flex; align-items: center; gap: 14px; width: 100%;
    padding: 17px 18px; 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(--mk-ink);
    line-height: 1.42;
}
.fq-q__mark {
    flex: none; display: grid; place-items: center;
    width: 28px; height: 28px; border-radius: 9px;
    background: var(--bg-soft); color: var(--muted-2); font-size: 12px;
    transition: background .25s ease, color .25s ease;
}
.fq-item.is-open .fq-q__mark,
.fq-item:hover .fq-q__mark { background: var(--brand-soft); color: var(--brand); }
.fq-q__text { flex: 1; min-width: 0; }
.fq-chev {
    flex: none; display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 9px;
    background: var(--brand-soft); color: var(--brand); font-size: 12.5px;
    transition: transform .35s cubic-bezier(.2, .8, .25, 1), background .25s ease, color .25s ease;
}
.fq-item.is-open .fq-chev { transform: rotate(180deg); background: var(--brand); color: #fff; }

/* Yumuşak aç/kapa: grid-template-rows 0fr → 1fr */
.fq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s cubic-bezier(.2, .8, .25, 1); }
.fq-item.is-open .fq-a { grid-template-rows: 1fr; }
.fq-a__wrap { overflow: hidden; }
.fq-a__in {
    padding: 0 18px 18px 60px;
    font-size: 14.5px; line-height: 1.7; color: var(--muted);
}
.fq-a__foot {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-top: 14px; padding-top: 13px; border-top: 1px dashed var(--line-strong);
    font-size: 12.5px; color: var(--muted-2); font-weight: 600;
}
.fq-a__foot a { color: var(--brand); font-weight: 700; }
.fq-a__foot a:hover { text-decoration: underline; }

/* Arama vurgusu */
.fq-hit { background: rgba(245, 179, 1, .3); border-radius: 4px; padding: 0 2px; font-weight: 700; color: var(--mk-ink); }

/* Sonuç yok */
.fq-empty {
    display: none; padding: clamp(38px, 5vw, 62px) 24px; text-align: center;
    background: var(--surface); border: 1px dashed var(--line-strong); border-radius: 20px;
}
.fq-empty.is-on { display: block; }
.fq-empty__ico {
    display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 16px;
    border-radius: 20px; background: var(--bg-soft); color: var(--muted-2); font-size: 24px;
}
.fq-empty__t { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 19px; font-weight: 800; color: var(--mk-ink); margin: 0 0 8px; }
.fq-empty__d { font-size: 14px; color: var(--muted); margin: 0 0 20px; }
.fq-empty__q { color: var(--brand); }

/* Arama sonucu sayacı */
.fq-result {
    display: none; align-items: center; gap: 9px; margin-bottom: 18px;
    padding: 11px 16px; border-radius: 12px;
    background: var(--brand-soft); border: 1px solid var(--brand-line);
    font-size: 13.5px; font-weight: 600; color: var(--brand);
}
.fq-result.is-on { display: flex; }
.fq-result button { margin-left: auto; border: 0; background: none; color: var(--brand); font-size: 13px; font-weight: 700; text-decoration: underline; }

/* =====================================================================
   4) ALT CTA
   ===================================================================== */
.fq-outro { padding: 0 0 clamp(56px, 7vw, 96px); background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%); }

/* =====================================================================
   5) RESPONSIVE
   ===================================================================== */
@media (max-width: 900px) {
    .fq-grid { grid-template-columns: 1fr; gap: 24px; }
    .fq-aside { position: static; }

    /* Kategoriler mobilde yatay kaydırmalı çip şeridi olur */
    .fq-navlist {
        flex-direction: row; gap: 8px; margin-bottom: 4px;
        overflow-x: auto; padding-bottom: 8px;
        scrollbar-width: none; -ms-overflow-style: none;
        scroll-snap-type: x proximity;
    }
    .fq-navlist::-webkit-scrollbar { display: none; }
    .fq-navlink {
        flex: none; padding: 9px 14px; border-radius: 999px;
        background: var(--surface); border-color: var(--line); scroll-snap-align: start;
        font-size: 13.5px;
    }
    .fq-navlink.is-active { box-shadow: none; }
    .fq-navlink span { white-space: nowrap; }
    .fq-aside__title { display: none; }
    .fq-help { display: none; }              /* alttaki CTA aynı işi görüyor */
}

@media (max-width: 560px) {
    .fq-search__field { padding-left: 16px; gap: 9px; }
    .fq-search__input { font-size: 15px; padding: 12px 0; }
    .fq-search__btn { width: 40px; height: 40px; }
    .fq-tags__label { width: 100%; text-align: center; margin-bottom: 2px; }
    .fq-q { padding: 15px 15px; gap: 11px; }
    .fq-q__mark { display: none; }
    .fq-a__in { padding: 0 15px 16px; }
    .fq-group__ico { width: 34px; height: 34px; font-size: 14px; }
}

/* =====================================================================
   6) HAREKETİ AZALT
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    .fq-a, .fq-chev, .fq-item, .fq-help { transition: none; }
    .fq-live__dot { animation: none; }
}