/* ============================================================
   FIMAK — sik-sorulan-sorular.css
   Yalnizca sik-sorulan-sorular.php'de yuklenir; style.css'i tamamlar.
   Sayfa hero'su paylasilan css/page-hero.css dosyasindadir; buradaki
   .sss-hero onun altindaki arama bandidir.

   Bolumler
   1. Ortak kapsayici ve arama bandi
   2. Kategori gezinmesi (yapiskan)
   3. Soru akordeonu
   4. Bos durum ve yardim kartlari
   5. Responsive (tum media query'ler burada)

   Olculer akiskan: clamp ile 375px -> 1920px arasi dogrusal buyur.
   Renkler style.css'teki :root degiskenlerinden okunur.
   ============================================================ */


/* ------------------------------------------------------------
   1. Ortak kapsayici ve arama bandi
   ------------------------------------------------------------ */
.sss {
    --sss-ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* style.css'teki govde degerlerini notrle */
    letter-spacing: normal;
    line-height: normal;
}

.sss-wrap {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: clamp(20px, 5vw, 80px);
}

.sss-hero {
    padding-block: clamp(40px, 5vw, 80px) clamp(40px, 4vw, 70px);
    background-color: var(--surface-alt);
    text-align: center;
}

.sss-eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--brand);
}

.sss-hero h2 {
    margin-top: 14px;
    font-size: clamp(30px, 3.4vw, 56px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--text);
}

.sss-hero > .sss-wrap > p {
    max-width: 600px;
    margin: clamp(16px, 1.6vw, 24px) auto 0;
    font-size: clamp(16px, 1.05vw, 19px);
    line-height: 1.6;
    color: var(--text-secondary);
}

.sss-search {
    position: relative;
    display: block;
    max-width: 640px;
    margin: clamp(30px, 3vw, 46px) auto 0;
}

.sss-search > svg {
    position: absolute;
    top: 50%;
    left: 22px;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--text-secondary);
    stroke-width: 2;
    transform: translateY(-50%);
    pointer-events: none;
}

.sss-search input {
    width: 100%;
    height: 64px;
    padding: 0 56px;
    /* Saydam kenarlik hep duruyor: odakta renk degisince alan zipllamaz */
    border: 1px solid transparent;
    border-radius: 40px;
    background-color: var(--surface);
    box-shadow: 0 10px 30px -18px rgb(0 0 0 / 0.25);
    font-family: inherit;
    font-size: 17px;
    color: var(--text);
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.sss-search input::placeholder { color: var(--text-secondary); }

.sss-search input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgb(226 6 19 / 0.1), 0 10px 30px -18px rgb(0 0 0 / 0.25);
}

.sss-search input::-webkit-search-cancel-button { display: none; }

.sss-clear {
    position: absolute;
    top: 50%;
    right: 16px;
    display: none;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background-color: var(--surface-alt);
    font-size: 18px;
    line-height: 1;
    color: var(--text-secondary);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.sss-clear.is-on { display: block; }

.sss-clear:hover {
    background-color: var(--brand);
    color: #fff;
}

.sss-clear:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}


/* ------------------------------------------------------------
   2. Kategori gezinmesi
   ------------------------------------------------------------ */
.sss-body {
    display: grid;
    grid-template-columns: clamp(220px, 20vw, 280px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(30px, 5vw, 90px);
    padding-block: clamp(48px, 5vw, 90px) clamp(60px, 6vw, 100px);
}

.sss-nav {
    position: sticky;
    /* Yapiskan baslik ustune binmesin */
    top: calc(var(--nav-height, 44px) + clamp(16px, 4vh, 40px));
    display: grid;
    gap: 4px;
}

.sss-nav > p {
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.sss-nav button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    color: var(--text);
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.sss-nav button small {
    font-size: 12px;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.sss-nav button:hover { background-color: var(--surface-alt); }

.sss-nav button.is-active {
    background-color: var(--text);
    color: #fff;
}

.sss-nav button.is-active small { color: rgb(255 255 255 / 0.6); }

.sss-nav button:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}


/* ------------------------------------------------------------
   3. Soru akordeonu
   ------------------------------------------------------------ */
.sss-cat + .sss-cat { margin-top: clamp(40px, 4vw, 64px); }
.sss-cat[hidden] { display: none; }

.sss-cat h2 {
    margin-bottom: 14px;
    font-size: clamp(22px, 1.8vw, 30px);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
    scroll-margin-top: calc(var(--nav-height, 44px) + 24px);
}

.sss-q { border-bottom: 1px solid var(--border); }
.sss-q[hidden] { display: none; }

.sss-q__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding-block: clamp(20px, 1.8vw, 26px);
    border: 0;
    background: none;
    font-family: inherit;
    font-size: clamp(16px, 1.15vw, 19px);
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
    color: var(--text);
    cursor: pointer;
    transition: color 0.3s ease;
}

.sss-q__btn:hover { color: var(--brand); }

.sss-q__btn:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 4px;
    border-radius: 6px;
}

/* Arama vurgusu */
.sss-q__btn mark {
    padding: 0 2px;
    border-radius: 3px;
    background-color: rgb(226 6 19 / 0.14);
    color: inherit;
}

/* Arti isareti: iki cizgi; acikken dikey olan yatara doner */
.sss-q__icon {
    position: relative;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--surface-alt);
    transition: background-color 0.35s ease, transform 0.45s var(--sss-ease);
}

.sss-q__icon::before,
.sss-q__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 1.8px;
    margin: -0.9px 0 0 -6px;
    border-radius: 2px;
    background-color: var(--text);
    transition: transform 0.45s var(--sss-ease), background-color 0.35s ease;
}

.sss-q__icon::after { transform: rotate(90deg); }

.sss-q.is-open .sss-q__icon {
    background-color: var(--brand);
    transform: rotate(180deg);
}

.sss-q.is-open .sss-q__icon::before,
.sss-q.is-open .sss-q__icon::after { background-color: #fff; }

.sss-q.is-open .sss-q__icon::after { transform: rotate(0deg); }

/* Grid satiri 0fr -> 1fr: yuksekligi bilmeden yumusak acilir */
.sss-q__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s var(--sss-ease);
}

.sss-q.is-open .sss-q__panel { grid-template-rows: 1fr; }
.sss-q__panel > div { overflow: hidden; }

.sss-q__answer {
    padding: 0 clamp(0px, 4vw, 60px) clamp(22px, 2vw, 30px) 0;
    font-size: clamp(15px, 1vw, 17px);
    line-height: 1.75;
    color: var(--text-secondary);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.35s ease, transform 0.45s var(--sss-ease);
}

.sss-q.is-open .sss-q__answer {
    opacity: 1;
    transform: none;
    /* Kutu acildiktan sonra metin belirsin */
    transition-delay: 0.08s;
}

.sss-q__answer p + p,
.sss-q__answer p + ul,
.sss-q__answer ul + p { margin-top: 12px; }

.sss-q__answer ul { padding-left: 1.1em; }
.sss-q__answer li + li { margin-top: 6px; }

.sss-q__answer a {
    font-weight: 500;
    color: var(--brand);
    text-decoration: underline;
}

.sss-q__answer strong {
    font-weight: 600;
    color: var(--text);
}

.sss-q__copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.3s ease;
}

.sss-q__copy svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.sss-q__copy:hover { color: var(--text); }

.sss-q__copy:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
    border-radius: 4px;
}


/* ------------------------------------------------------------
   4. Bos durum ve yardim kartlari
   ------------------------------------------------------------ */
.sss-empty {
    display: none;
    padding: clamp(40px, 5vw, 70px) 20px;
    border-radius: 18px;
    background-color: var(--surface-alt);
    text-align: center;
}

.sss-empty.is-on { display: block; }

.sss-empty h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
}

.sss-empty p {
    margin-top: 8px;
    font-size: 15px;
    color: var(--text-secondary);
}

.sss-help { padding-bottom: clamp(70px, 7vw, 120px); }

.sss-help__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.sss-help__card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: clamp(24px, 2.2vw, 34px);
    border-radius: 20px;
    background-color: var(--surface-alt);
    /* style.css'te a { color: var(--brand-dark); } var */
    color: var(--text);
    transition: background-color 0.35s ease, transform 0.45s var(--sss-ease),
        box-shadow 0.45s var(--sss-ease);
}

.sss-help__card svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: var(--brand);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sss-help__card b {
    margin-top: 8px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.sss-help__card span {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* margin-top:auto: ok hep kartin dibinde kalir */
.sss-help__card em {
    margin-top: auto;
    padding-top: 10px;
    font-style: normal;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand);
}

.sss-help__card:hover {
    background-color: var(--surface);
    box-shadow: 0 22px 50px -26px rgb(0 0 0 / 0.3);
    transform: translateY(-3px);
}

.sss-help__card--dark {
    background-color: var(--text);
    color: #fff;
}

.sss-help__card--dark span { color: rgb(255 255 255 / 0.65); }
.sss-help__card--dark:hover { background-color: #000; }

.sss-help__card:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}

.sss-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    z-index: 50;
    padding: 12px 20px;
    border-radius: 40px;
    background-color: var(--text);
    font-size: 14px;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 20px);
    transition: opacity 0.3s ease, transform 0.4s var(--sss-ease);
}

.sss-toast.is-on {
    opacity: 1;
    transform: translate(-50%, 0);
}


/* ------------------------------------------------------------
   5. Responsive
   ------------------------------------------------------------ */
@media (max-width: 960px) {
    .sss-body {
        grid-template-columns: 1fr;
        /* Negatif margin'li yapiskan serit yatay kaydirma yaratmasin */
        overflow-x: clip;
    }

    .sss-body > * { min-width: 0; }

    /* Kategori listesi yatay kayan serit olur */
    .sss-nav {
        position: sticky;
        top: var(--nav-height, 44px);
        z-index: 10;
        display: flex;
        gap: 8px;
        margin-inline: calc(-1 * clamp(20px, 5vw, 80px));
        padding: 12px clamp(20px, 5vw, 80px);
        border-bottom: 1px solid var(--border);
        background-color: rgb(255 255 255 / 0.85);
        -webkit-backdrop-filter: saturate(180%) blur(18px);
        backdrop-filter: saturate(180%) blur(18px);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .sss-nav::-webkit-scrollbar { display: none; }
    .sss-nav > p { display: none; }

    .sss-nav button {
        flex-shrink: 0;
        width: auto;
        padding: 9px 16px;
        border: 1px solid var(--border);
        border-radius: 40px;
        font-size: 14px;
    }

    .sss-help__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {

    .sss-search input,
    .sss-clear,
    .sss-nav button,
    .sss-nav button small,
    .sss-q__btn,
    .sss-q__icon,
    .sss-q__icon::before,
    .sss-q__icon::after,
    .sss-q__panel,
    .sss-q__answer,
    .sss-q__copy,
    .sss-help__card,
    .sss-toast { transition: none; }

    .sss-help__card:hover { transform: none; }
    .sss-q.is-open .sss-q__icon { transform: none; }
}