/* =====================Default.css================================
   KATEGORİLER - YATAY SLIDER  
===================================================== */

#kategoriler {
    position: relative;
    margin-top: 18px;
    overflow: hidden;
}

.category-slider {
    position: relative;
    width: 100%;
    padding: 0 34px;
}

    /*
    ÖNEMLİ:
    Eski grid yapısını tamamen etkisizleştirir.
    Kartlar kesinlikle alt satıra geçmez.
*/
    .category-slider > .category-grid {
        display: flex !important;
        grid-template-columns: none !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch;
        width: 100%;
        gap: 18px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 6px 2px 20px;
        margin: 0;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

        .category-slider > .category-grid::-webkit-scrollbar {
            display: none;
        }

    /* Büyük ekranda 7 kategori görünür */
    .category-slider .category-card {
        display: block;
        flex: 0 0 calc((100% - 108px) / 7) !important;
        width: calc((100% - 108px) / 7) !important;
        min-width: calc((100% - 108px) / 7) !important;
        max-width: calc((100% - 108px) / 7) !important;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        background: #fff;
        border: 1px solid #e5ded3;
        border-radius: 7px;
        overflow: hidden;
        box-shadow: 0 8px 26px rgba(0, 0, 0, .035);
        transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }

        .category-slider .category-card:hover {
            transform: translateY(-4px);
            border-color: #ddcdaf;
            box-shadow: 0 14px 36px rgba(0, 0, 0, .10);
        }

    .category-slider .category-img {
        width: 100%;
        aspect-ratio: 1.42 / 1;
        overflow: hidden;
        background: #f3f0eb;
    }

        .category-slider .category-img img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .3s ease;
        }

    .category-slider .category-card:hover .category-img img {
        transform: scale(1.045);
    }

    .category-slider .category-body {
        min-height: 76px;
        padding: 13px 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        background: #fff;
    }

        .category-slider .category-body > div {
            min-width: 0;
        }

        .category-slider .category-body h3 {
            margin: 0 0 5px;
            color: #111;
            font-size: 14px;
            line-height: 1.2;
            font-weight: 900;
            overflow-wrap: break-word;
        }

        .category-slider .category-body p {
            margin: 0;
            color: #666;
            font-size: 12px;
            line-height: 1.3;
        }

    .category-slider .arrow {
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        flex: 0 0 28px;
        border-radius: 50%;
        background: #f4f0e8;
        color: #111;
        font-size: 17px;
        line-height: 1;
        transition: background .2s ease, color .2s ease, transform .2s ease;
    }

    .category-slider .category-card:hover .arrow {
        background: var(--brand);
        color: #fff;
        transform: translateX(2px);
    }


/* =====================================================
   KATEGORİ SAĞ VE SOL OKLARI
===================================================== */

.category-nav {
    position: absolute;
    top: 50%;
    z-index: 20;
    width: 48px;
    height: 48px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid #e2d8c7;
    border-radius: 50%;
    background: rgba(255, 255, 255, .97);
    color: #111;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}

    .category-nav:hover {
        background: var(--brand);
        border-color: var(--brand);
        color: #fff;
    }

.category-nav-prev {
    left: 0;
}

.category-nav-next {
    right: 0;
}

.category-nav[hidden] {
    display: none !important;
}

.category-empty {
    padding: 25px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--soft);
    color: var(--muted);
    text-align: center;
}


/* =====================================================
   KATEGORİ SLIDER RESPONSIVE
===================================================== */

/* Tablet: 4 kategori */
@media (max-width: 1300px) {
    .category-slider .category-card {
        flex-basis: calc((100% - 54px) / 4) !important;
        width: calc((100% - 54px) / 4) !important;
        min-width: calc((100% - 54px) / 4) !important;
        max-width: calc((100% - 54px) / 4) !important;
    }
}

/* Küçük tablet: 3 kategori */
@media (max-width: 1020px) {
    .category-slider {
        padding: 0 28px;
    }

        .category-slider .category-card {
            flex-basis: calc((100% - 36px) / 3) !important;
            width: calc((100% - 36px) / 3) !important;
            min-width: calc((100% - 36px) / 3) !important;
            max-width: calc((100% - 36px) / 3) !important;
        }

    .category-nav {
        width: 44px;
        height: 44px;
        font-size: 21px;
    }
}

/* Mobil: 2 kategori */
@media (max-width: 760px) {
    .category-slider {
        padding: 0 22px;
    }

        .category-slider > .category-grid {
            gap: 14px;
        }

        .category-slider .category-card {
            flex-basis: calc((100% - 14px) / 2) !important;
            width: calc((100% - 14px) / 2) !important;
            min-width: calc((100% - 14px) / 2) !important;
            max-width: calc((100% - 14px) / 2) !important;
        }

        .category-slider .category-body {
            min-height: 72px;
            padding: 11px;
        }

            .category-slider .category-body h3 {
                font-size: 13px;
            }

    .category-nav {
        width: 40px;
        height: 40px;
        font-size: 19px;
    }
}

/* Küçük mobil: 1 kategori */
@media (max-width: 430px) {
    .category-slider .category-card {
        flex-basis: 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
}