﻿/*==================================================
    CATEGORIES
==================================================*/

.bz-categories {
    background: #fafafa;
}

    .bz-categories .bz-description {
        color: var(--bz-title);
    }

.bz-category-card {
    position: relative;
    display: block;
    height: 460px;
    overflow: hidden;
    border-radius: var(--bz-radius-lg);
    background: #111;
    transition: .45s;
    box-shadow: var(--bz-shadow);
}

    .bz-category-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .7s;
    }

    .bz-category-card .overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient( to top, rgba(0,0,0,.88), rgba(0,0,0,.15), rgba(0,0,0,.05) );
        transition: .4s;
    }

    .bz-category-card .content {
        position: absolute;
        left: 30px;
        right: 30px;
        bottom: 28px;
        color: #fff;
        z-index: 5;
        transition: .45s;
    }

        .bz-category-card .content span {
            display: inline-block;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 2px;
            color: var(--bz-primary);
            margin-bottom: 12px;
        }

    .bz-category-card h3 {
        color: #fff;
        font-size: 28px;
        margin-bottom: 10px;
        transition: .35s;
    }

    .bz-category-card p {
        color: rgba(255,255,255,.78);
        margin: 0;
        transition: .35s;
    }

    .bz-category-card::after {
        content: "İncele →";
        position: absolute;
        left: 30px;
        bottom: -50px;
        color: #fff;
        font-weight: 700;
        transition: .35s;
        z-index: 6;
    }

    .bz-category-card:hover {
        transform: translateY(-10px);
        box-shadow: var(--bz-shadow-lg);
    }

        .bz-category-card:hover img {
            transform: scale(1.12);
        }

        .bz-category-card:hover .overlay {
            background: linear-gradient( to top, rgba(200,39,45,.92), rgba(0,0,0,.25), rgba(0,0,0,.05) );
        }

        .bz-category-card:hover .content {
            transform: translateY(-35px);
        }

        .bz-category-card:hover::after {
            bottom: 25px;
        }

        .bz-category-card:hover h3 {
            color: #fff;
        }

        .bz-category-card:hover p {
            color: #fff;
        }

/*=========================================
    ALL PRODUCTS
=========================================*/

.bz-all-products {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#c8272d,#5c1013);
    text-align: center;
}

    .bz-all-products::after {
        display: none;
    }

    .bz-all-products .all-content {
        color: #fff;
    }

    .bz-all-products i {
        font-size: 60px;
        margin-bottom: 25px;
    }

    .bz-all-products h3 {
        color: #fff;
        margin-bottom: 15px;
        font-size: 34px;
    }

    .bz-all-products p {
        color: rgba(255,255,255,.85);
        margin-bottom: 25px;
    }

    .bz-all-products span {
        display: inline-flex;
        padding: 14px 26px;
        border-radius: 0;
        border: 1px solid rgba(255,255,255,.3);
        background: rgba(255,255,255,.1);
        backdrop-filter: blur(15px);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 13.5px;
    }

    .bz-all-products:hover {
        transform: translateY(-10px);
    }

        .bz-all-products:hover span {
            background: #fff;
            color: var(--bz-primary);
        }
/*==================================================
    RESPONSIVE
==================================================*/

@media (max-width:992px) {

    .bz-category-card {
        height: 460px;
    }
}

@media (max-width:768px) {

    .bz-category-card {
        height: 460px;
        border-radius: var(--bz-radius);
    }

        .bz-category-card img {
            object-fit: cover;
            object-position: center;
        }

        .bz-category-card .overlay {
            background: linear-gradient( to top, rgba(0,0,0,.82), rgba(0,0,0,.18), transparent );
        }

        .bz-category-card .content {
            left: 18px;
            right: 18px;
            bottom: 18px;
        }

        .bz-category-card h3 {
            font-size: 20px;
            margin-bottom: 6px;
        }

        .bz-category-card p {
            display: none;
        }

        .bz-category-card::after {
            content: "İncele →";
            left: 18px;
            bottom: 18px;
            opacity: 1;
        }

        .bz-category-card .content {
            transform: translateY(-22px);
        }
}