@charset "UTF-8";

/* =====================================================================
 * PromoLife  |  softiga-category.css
 * Yerlesim  : assets/css/softiga-category.css
 * ---------------------------------------------------------------------
 * softiga-ui.css'ten SONRA yuklenir.
 *
 *   01. Urun kartlari - kaydirmali gorsel gecisi + oklar/gostergeler
 *   02. Sol filtre menusu (widget_sidebar_category.php)
 *   03. Mobil filtre paneli
 * ===================================================================== */


/* =====================================================================
 * 01. URUN KARTLARI - KAYDIRMALI GORSEL GECISI ("push slide")
 * ---------------------------------------------------------------------
 * Siradaki gorsel yandan kayarak girerken mevcut gorsel ayni hizda
 * disari kayar; ikisi HICBIR AN ust uste binmez. Saydamlik (opacity)
 * karisimi kullanilmadigi icin kart gorsellerindeki "mix-blend-mode:
 * multiply" ile olusan ic ice gecme / hayalet goruntu tamamen biter.
 *
 * Tasiyici kutu (sf-xf-host) tasanlari kirpar, bu yuzden bekleme
 * anlarinda ust katman gorunmez.
 *
 * Kullanici kontrolleri: sol/sag oklar (kart uzerine gelince) ve
 * alttaki tiklanabilir gostergeler. (softiga-ui.js > setupRotation)
 * ===================================================================== */

.sf-xf-host {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--pl-radius-sm, 10px);
}

/* ---------------------------------------------------------------------
 * Alttaki gorsel (kartin kendi gorseli)
 * .sf-run sinifiyla cikis yonune dogru kaydirilir. Olculer dogrudan
 * yazilir; var() iceren bir transform tarayicida animasyon almaz.
 * ------------------------------------------------------------------ */

.card-product .sf-xf-host > img:not(.sf-xf-layer),
.sf-cat main .card-product .sf-xf-host > img:not(.sf-xf-layer) {
    transition: transform .58s cubic-bezier(.45, .05, .2, 1);
    will-change: transform;
    backface-visibility: hidden;
}

.card-product .sf-xf-host.sf-run.sf-dir-next > img:not(.sf-xf-layer),
.sf-cat main .card-product .sf-xf-host.sf-run.sf-dir-next > img:not(.sf-xf-layer) {
    transform: translate3d(-100%, 0, 0);
}

.card-product .sf-xf-host.sf-run.sf-dir-prev > img:not(.sf-xf-layer),
.sf-cat main .card-product .sf-xf-host.sf-run.sf-dir-prev > img:not(.sf-xf-layer) {
    transform: translate3d(100%, 0, 0);
}

/* ---------------------------------------------------------------------
 * Ust katman (siradaki gorsel)
 *   - bekleme : kutunun disinda (%112), overflow ile kirpilir
 *   - .sf-arm : gecis baslangicinda tam kenara yaslanir (%100)
 *   - .is-on  : ortaya kayar
 * ------------------------------------------------------------------ */

.card-product .sf-xf-host img.sf-xf-layer,
.sf-cat main .card-product .sf-xf-host img.sf-xf-layer {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    object-fit: contain;
    opacity: 1;
    pointer-events: none;
    transform: translate3d(112%, 0, 0);
    will-change: transform;
    backface-visibility: hidden;
    transition: transform .58s cubic-bezier(.45, .05, .2, 1);
}

.card-product .sf-xf-host.sf-dir-prev img.sf-xf-layer,
.sf-cat main .card-product .sf-xf-host.sf-dir-prev img.sf-xf-layer {
    transform: translate3d(-112%, 0, 0);
}

.card-product .sf-xf-host.sf-arm img.sf-xf-layer,
.sf-cat main .card-product .sf-xf-host.sf-arm img.sf-xf-layer {
    transform: translate3d(100%, 0, 0);
}

.card-product .sf-xf-host.sf-arm.sf-dir-prev img.sf-xf-layer,
.sf-cat main .card-product .sf-xf-host.sf-arm.sf-dir-prev img.sf-xf-layer {
    transform: translate3d(-100%, 0, 0);
}

.card-product .sf-xf-host img.sf-xf-layer.is-on,
.sf-cat main .card-product .sf-xf-host img.sf-xf-layer.is-on,
.sf-cat main .card-product .sf-xf-host.sf-arm img.sf-xf-layer.is-on,
.sf-cat main .card-product .sf-xf-host.sf-arm.sf-dir-prev img.sf-xf-layer.is-on {
    transform: translate3d(0, 0, 0);
}

/* ---------------------------------------------------------------------
 * Masaustunde kart uzerindeyken gorsel %5 buyur.
 *
 * ONEMLI: Buyutme gorsellerin kendisine uygulanir (kutuya degil; kutuya
 * transform verilirse gorsellerin "mix-blend-mode" karisimi bozulur).
 * Buyutulmus halde iki gorselin tam bitisik kalmasi icin kaydirma
 * mesafesi de ayni oranda, yani %105 olur. Boylece ne bosluk ne de
 * ust uste binme olusur.
 * ------------------------------------------------------------------ */

@media (min-width: 768px) {

    .sf-cat main .card-product:hover .sf-xf-host > img:not(.sf-xf-layer) { transform: scale(1.05); }

    .sf-cat main .card-product:hover .sf-xf-host.sf-run.sf-dir-next > img:not(.sf-xf-layer) {
        transform: translate3d(-105%, 0, 0) scale(1.05);
    }

    .sf-cat main .card-product:hover .sf-xf-host.sf-run.sf-dir-prev > img:not(.sf-xf-layer) {
        transform: translate3d(105%, 0, 0) scale(1.05);
    }

    .sf-cat main .card-product:hover .sf-xf-host img.sf-xf-layer {
        transform: translate3d(112%, 0, 0) scale(1.05);
    }

    .sf-cat main .card-product:hover .sf-xf-host.sf-dir-prev img.sf-xf-layer {
        transform: translate3d(-112%, 0, 0) scale(1.05);
    }

    .sf-cat main .card-product:hover .sf-xf-host.sf-arm img.sf-xf-layer {
        transform: translate3d(105%, 0, 0) scale(1.05);
    }

    .sf-cat main .card-product:hover .sf-xf-host.sf-arm.sf-dir-prev img.sf-xf-layer {
        transform: translate3d(-105%, 0, 0) scale(1.05);
    }

    .sf-cat main .card-product:hover .sf-xf-host img.sf-xf-layer.is-on,
    .sf-cat main .card-product:hover .sf-xf-host.sf-arm img.sf-xf-layer.is-on,
    .sf-cat main .card-product:hover .sf-xf-host.sf-arm.sf-dir-prev img.sf-xf-layer.is-on {
        transform: translate3d(0, 0, 0) scale(1.05);
    }
}

/* Sifirlama aninda hicbir sey animasyonlu olmaz */
.sf-xf-host.is-instant > img,
.sf-xf-host.is-instant img.sf-xf-layer,
.card-product .sf-xf-host.is-instant > img:not(.sf-xf-layer),
.card-product .sf-xf-host img.sf-xf-layer.is-instant,
.sf-cat main .card-product .sf-xf-host.is-instant > img:not(.sf-xf-layer),
.sf-cat main .card-product .sf-xf-host img.sf-xf-layer.is-instant { transition: none !important; }


/* ---------------------------------------------------------------------
 * 01.a Tiklanabilir gostergeler
 * ------------------------------------------------------------------ */

.sf-img-dots.sf-img-dots-act {
    pointer-events: auto;
    align-items: center;
    gap: 6px;
    padding: 4px 7px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px -10px rgba(16, 24, 40, .5);
    opacity: .85;
    transition: opacity .25s ease;
}

.card-product:hover .sf-img-dots.sf-img-dots-act { opacity: 1; }

.sf-img-dots.sf-img-dots-act .sf-img-dot {
    padding: 0;
    border: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background: rgba(26, 50, 129, .26);
}

.sf-img-dots.sf-img-dots-act .sf-img-dot:hover { background: rgba(26, 50, 129, .55); }
.sf-img-dots.sf-img-dots-act .sf-img-dot.is-on { background: var(--pl-blue, #00aeef); }

.sf-img-dots.sf-img-dots-act .sf-img-dot:focus { outline: none; }


/* ---------------------------------------------------------------------
 * 01.b Sol / sag oklar
 * ------------------------------------------------------------------ */

/* Oklarin ve gostergelerin dayanak kutusu */
.sf-img-host { position: relative; }

/* top / height degerleri JS tarafinda gorsel kutusuna gore ayarlanir */
.sf-img-nav {
    position: absolute;
    left: 6px;
    right: 6px;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}

.sf-img-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(26, 50, 129, .12);
    border-radius: 50%;
    cursor: pointer;
    color: var(--pl-navy, #1a3281);
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    box-shadow: 0 6px 16px -10px rgba(16, 24, 40, .6);
    opacity: 0;
    pointer-events: none;
    transform: scale(.82);
    transition: opacity .24s ease, transform .24s ease, background .2s ease, color .2s ease;
}

.sf-img-arrow svg { width: 15px; height: 15px; }

.sf-img-arrow:hover {
    color: #fff;
    background: var(--pl-blue, #00aeef);
    border-color: var(--pl-blue, #00aeef);
}

.sf-img-arrow:focus { outline: none; }

/* Yalnizca fare kullanan cihazlarda, kart uzerine gelince gorunur */
@media (hover: hover) and (pointer: fine) {

    .card-product:hover .sf-img-arrow,
    .card-product:focus-within .sf-img-arrow {
        opacity: 1;
        pointer-events: auto;
        transform: scale(1);
    }
}

/* Dokunmatik cihazlarda oklar gizli kalir; kaydirma (swipe) kullanilir */
@media (hover: none), (pointer: coarse) {
    .sf-img-nav { display: none; }
}


/* ---------------------------------------------------------------------
 * 01.c Erisilebilirlik
 * ------------------------------------------------------------------ */

/* Gosterge: yumusak genisleme */
.sf-img-dot { transition: background .35s ease, width .35s cubic-bezier(.4, 0, .2, 1); }

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

    /* Otomatik dongu JS tarafinda kapatilir; el ile gecis ani olur */
    .card-product .sf-xf-host > img:not(.sf-xf-layer),
    .sf-cat main .card-product .sf-xf-host > img:not(.sf-xf-layer),
    .card-product .sf-xf-host img.sf-xf-layer,
    .sf-cat main .card-product .sf-xf-host img.sf-xf-layer { transition: none !important; }

    .sf-img-arrow,
    .sf-img-dot,
    .sf-img-dots.sf-img-dots-act { transition: none; }
}


/* =====================================================================
 * 02. SOL FILTRE MENUSU
 * ===================================================================== */

.sf-flt .sf-flt-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sf-flt .sf-flt-card {
    padding: 16px;
    border: 1px solid var(--pl-line);
    border-radius: var(--pl-radius-lg);
    background: var(--pl-surface);
}

.sf-flt .sf-flt-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pl-line);
}

.sf-flt .sf-flt-head-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    background: var(--pl-navy-tint);
    color: var(--pl-navy);
}

.sf-flt .sf-flt-head-ic svg { width: 17px; height: 17px; }

.sf-flt .sf-flt-title {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--pl-ink);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
}

.sf-flt .sf-flt-reset {
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--pl-blue-deep);
    font-family: inherit;
    font-size: 12.6px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--pl-speed-fast) ease;
}

.sf-flt .sf-flt-reset:hover { background: var(--pl-surface-2); }

/* Masaustu: panel sayfayla birlikte kayar ama sabit header'in ALTINDA durur
   (header yuksekligi 74px + 16px bosluk). Panel ekrandan uzunsa kendi icinde
   kaydirilir; boylece alt kisimdaki filtrelere her zaman ulasilir. */
@media (min-width: 992px) {
    .sf-cat main aside.sf-flt > .offcanvas-collapse,
    main aside.sf-flt > .offcanvas-collapse {
        position: sticky;
        top: 90px !important;          /* temadaki .offcanvas-collapse { top: auto !important } kuralini asar */
        z-index: 1;
        max-height: calc(100vh - 106px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--pl-line-strong) transparent;
    }

    main aside.sf-flt > .offcanvas-collapse::-webkit-scrollbar { width: 6px; }
    main aside.sf-flt > .offcanvas-collapse::-webkit-scrollbar-thumb { background: var(--pl-line-strong); border-radius: 6px; }

    main aside.sf-flt .sf-flt-body { padding-bottom: 2px; }
}

/* Masaustu dar sol kolon: baslik tek satirda kalsin */
@media (min-width: 992px) {
    .sf-flt .sf-flt-card { padding: 14px; }
    .sf-flt .sf-flt-head { gap: 8px; }
    .sf-flt .sf-flt-head-ic { width: 30px; height: 30px; flex-basis: 30px; border-radius: 9px; }
    .sf-flt .sf-flt-head-ic svg { width: 15px; height: 15px; }
    .sf-flt .sf-flt-title { font-size: 14.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sf-flt .sf-flt-reset { padding: 4px 6px; font-size: 12px; }
}

/* --- Grup alt kategorileri --- */
.sf-flt .sf-flt-sublist {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sf-flt .sf-flt-sublink {
    display: flex;
    align-items: center;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--pl-ink);
    font-size: 13.8px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    transition: background var(--pl-speed-fast) ease, color var(--pl-speed-fast) ease;
}

.sf-flt .sf-flt-sublink:hover { background: var(--pl-surface-2); color: var(--pl-navy); text-decoration: none; }

.sf-flt .sf-flt-sublink.is-active,
.sf-flt .sf-flt-sublink.is-active:hover {
    background: var(--pl-navy);
    color: var(--pl-on-navy);
}

/* --- Filtre gruplari --- */
.sf-flt .sf-flt-group {
    padding: 12px 0;
    border-bottom: 1px dashed var(--pl-line);
}

.sf-flt .sf-flt-group:first-of-type { padding-top: 2px; }

.sf-flt .sf-flt-card .sf-flt-label {
    display: block;
    margin: 0 0 8px;
    color: var(--pl-ink);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
}

.sf-flt .sf-flt-select .form-select {
    height: 44px;
    padding: 0 36px 0 12px;
    border: 1px solid var(--pl-line);
    border-radius: 12px;
    background-color: var(--pl-surface-2);
    color: var(--pl-ink);
    font-size: 14px;
    font-weight: 600;
    box-shadow: none;
    cursor: pointer;
}

.sf-flt .sf-flt-select .form-select:focus,
.sf-flt .sf-flt-input .form-control:focus {
    border-color: var(--pl-blue);
    background-color: var(--pl-surface);
    box-shadow: 0 0 0 3px var(--pl-blue-tint);
}

.sf-flt .sf-flt-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 6px;
}

.sf-flt .sf-flt-range-single { grid-template-columns: minmax(0, 1fr); }

.sf-flt .sf-flt-range-sep {
    width: 8px;
    height: 2px;
    border-radius: 2px;
    background: var(--pl-line-strong);
}

.sf-flt .sf-flt-card .sf-flt-input {
    position: relative;
    display: block;
    margin: 0;
    min-width: 0;
}

.sf-flt .sf-flt-input-cap {
    position: absolute;
    left: 12px;
    top: 7px;
    color: var(--pl-muted);
    font-size: 10.6px;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
}

.sf-flt .sf-flt-input .form-control {
    height: 50px;
    padding: 18px 40px 4px 12px;
    border: 1px solid var(--pl-line);
    border-radius: 12px;
    background: var(--pl-surface-2);
    color: var(--pl-ink);
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    box-shadow: none;
}

.sf-flt .sf-flt-input-unit {
    position: absolute;
    right: 10px;
    bottom: 9px;
    color: var(--pl-muted);
    font-size: 11.6px;
    font-weight: 700;
    pointer-events: none;
}

/* Anahtar (switch) */
.sf-flt .sf-flt-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 24px;
    margin: 12px 0 0;
    padding-left: 0;
}

.sf-flt .sf-flt-switch .form-check-input {
    width: 38px;
    height: 22px;
    flex: 0 0 38px;
    float: none;
    margin: 0;
    border: 1px solid var(--pl-line-strong);
    border-radius: var(--pl-radius-pill);
    background-color: var(--pl-surface-2);
    cursor: pointer;
    transition: background-color var(--pl-speed-fast) ease, border-color var(--pl-speed-fast) ease, background-position .2s ease;
}

.sf-flt .sf-flt-switch .form-check-input:checked {
    border-color: var(--pl-navy);
    background-color: var(--pl-navy);
}

.sf-flt .sf-flt-switch .form-check-input:focus-visible {
    outline: 2px solid var(--pl-blue);
    outline-offset: 2px;
}

.sf-flt .sf-flt-switch .form-check-label {
    margin: 0;
    color: var(--pl-ink);
    font-size: 13.4px;
    font-weight: 600;
    line-height: 1.35;
    cursor: pointer;
}

.sf-flt .sf-flt-apply {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    margin-top: 14px;
    border: 0;
    border-radius: 12px;
    background: var(--pl-navy);
    color: var(--pl-on-navy);
    font-family: inherit;
    font-size: 14.4px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--pl-speed-fast) ease;
}

.sf-flt .sf-flt-apply:hover { background: var(--pl-navy-deep); }
.sf-flt .sf-flt-apply svg { width: 17px; height: 17px; }

.sf-flt .sf-flt-apply:focus-visible,
.sf-flt .sf-flt-reset:focus-visible,
.sf-flt .sf-flt-sublink:focus-visible,
.sf-flt .sf-flt-cat-link:focus-visible,
.sf-flt .sf-flt-cat-toggle:focus-visible,
.sf-flt .sf-flt-cat-sub:focus-visible {
    outline: 2px solid var(--pl-blue);
    outline-offset: 1px;
}

/* --- Tum kategoriler --- */
.sf-flt .sf-flt-cats {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sf-flt .sf-flt-cat-row {
    display: flex;
    align-items: center;
    gap: 2px;
}

.sf-flt .sf-flt-cat-link {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 10px;
    border-radius: 10px;
    color: var(--pl-ink);
    font-size: 13.8px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    transition: background var(--pl-speed-fast) ease, color var(--pl-speed-fast) ease;
}

.sf-flt .sf-flt-cat-link:hover { background: var(--pl-surface-2); color: var(--pl-navy); text-decoration: none; }

.sf-flt .sf-flt-cat.is-group > .sf-flt-cat-row .sf-flt-cat-link { color: var(--pl-navy); font-weight: 700; }

.sf-flt .sf-flt-cat-link.is-active,
.sf-flt .sf-flt-cat-link.is-active:hover {
    background: var(--pl-navy-tint);
    color: var(--pl-navy);
    font-weight: 700;
}

.sf-flt .sf-flt-cat-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--pl-muted);
    cursor: pointer;
    transition: background var(--pl-speed-fast) ease, color var(--pl-speed-fast) ease;
}

.sf-flt .sf-flt-cat-toggle:hover { background: var(--pl-surface-2); color: var(--pl-navy); }

.sf-flt .sf-flt-chev {
    width: 16px;
    height: 16px;
    transition: transform var(--pl-speed) var(--pl-ease);
}

.sf-flt .sf-flt-cat-toggle:not(.collapsed) { color: var(--pl-navy); }
.sf-flt .sf-flt-cat-toggle:not(.collapsed) .sf-flt-chev { transform: rotate(180deg); }

.sf-flt .sf-flt-cat-subs {
    display: grid;
    gap: 1px;
    margin: 2px 0 8px 12px;
    padding: 0 0 0 10px;
    border-left: 2px solid var(--pl-line);
    list-style: none;
}

.sf-flt .sf-flt-cat-sub {
    display: block;
    padding: 7px 10px;
    border-radius: 8px;
    color: var(--pl-muted);
    font-size: 13.2px;
    line-height: 1.35;
    text-decoration: none;
    transition: background var(--pl-speed-fast) ease, color var(--pl-speed-fast) ease;
}

.sf-flt .sf-flt-cat-sub:hover { background: var(--pl-surface-2); color: var(--pl-navy); text-decoration: none; }

.sf-flt .sf-flt-cat-sub.is-active {
    background: var(--pl-navy-tint);
    color: var(--pl-navy);
    font-weight: 700;
}


/* =====================================================================
 * 03. MOBIL FILTRE PANELI
 * ===================================================================== */

@media (max-width: 991.98px) {

    .sf-flt .sf-flt-ohead {
        padding: 14px 16px;
        border-bottom: 1px solid var(--pl-line);
        background: var(--pl-surface);
    }

    .sf-flt .sf-flt-ohead-title {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--pl-navy);
        font-size: 16px;
        font-weight: 800;
    }

    .sf-flt .sf-flt-ohead-title svg { width: 18px; height: 18px; }

    .sf-flt .offcanvas-body.sf-flt-body {
        padding: 14px !important;
        background: var(--pl-surface-2);
    }

    .sf-flt .sf-flt-card { border-radius: var(--pl-radius); }

    /* iOS yakinlastirmasini engeller */
    .sf-flt .sf-flt-input .form-control,
    .sf-flt .sf-flt-select .form-select { font-size: 16px; }

    .sf-flt .sf-flt-cat-link,
    .sf-flt .sf-flt-sublink { min-height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
    .sf-flt .sf-flt-chev,
    .sf-flt .sf-flt-switch .form-check-input { transition: none; }
}