/*==================================================
    CATEGORIES
==================================================*/

.mst-categories {
    background: #fafafa;
}

    .mst-categories .mst-description {
        color: var(--title);
    }

.mst-category-card {
    position: relative;
    display: block;
    height: 460px;
    overflow: hidden;
    border-radius: 24px;
    background: #111;
    transition: .45s;
    box-shadow: 0 20px 45px rgba(0,0,0,.08);
}

    .mst-category-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .7s;
    }

    .mst-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;
    }

    .mst-category-card .content {
        position: absolute;
        left: 30px;
        right: 30px;
        bottom: 28px;
        color: #fff;
        z-index: 5;
        transition: .45s;
    }

        .mst-category-card .content span {
            display: inline-block;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 2px;
            color: var(--primary);
            margin-bottom: 12px;
        }

    .mst-category-card h3 {
        color: #fff;
        font-size: 28px;
        margin-bottom: 10px;
        transition: .35s;
    }

    .mst-category-card p {
        color: rgba(255,255,255,.78);
        margin: 0;
        transition: .35s;
    }

    .mst-category-card::after {
        content: "İncele →";
        position: absolute;
        left: 30px;
        bottom: -50px;
        color: #fff;
        font-weight: 700;
        transition: .35s;
        z-index: 6;
    }

    .mst-category-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 35px 60px rgba(0,0,0,.18);
    }

        .mst-category-card:hover img {
            transform: scale(1.12);
        }

        .mst-category-card:hover .overlay {
            background: linear-gradient( to top, rgba(245,130,32,.92), rgba(0,0,0,.25), rgba(0,0,0,.05) );
        }

        .mst-category-card:hover .content {
            transform: translateY(-35px);
        }

        .mst-category-card:hover::after {
            bottom: 25px;
        }

        .mst-category-card:hover h3 {
            color: #fff;
        }

        .mst-category-card:hover p {
            color: #fff;
        }

/*=========================================
    ALL PRODUCTS
=========================================*/

.mst-all-products {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#f58220,#d66d16);
    text-align: center;
}

    .mst-all-products::after {
        display: none;
    }

    .mst-all-products .all-content {
        color: #fff;
    }

    .mst-all-products i {
        font-size: 60px;
        margin-bottom: 25px;
    }

    .mst-all-products h3 {
        color: #fff;
        margin-bottom: 15px;
        font-size: 34px;
    }

    .mst-all-products p {
        color: rgba(255,255,255,.85);
        margin-bottom: 25px;
    }

    .mst-all-products span {
        display: inline-flex;
        padding: 14px 26px;
        border-radius: 50px;
        background: rgba(255,255,255,.18);
        backdrop-filter: blur(15px);
        font-weight: 700;
    }

    .mst-all-products:hover {
        transform: translateY(-10px);
    }

        .mst-all-products:hover span {
            background: #fff;
            color: var(--primary);
        }
/*==================================================
    RESPONSIVE
==================================================*/

@media (max-width:992px) {

    .mst-category-card {
        height: 460px;
    }
}

@media (max-width:768px) {

    .mst-category-card {
        height: 460px;
        border-radius: 18px;
    }

        .mst-category-card img {
            object-fit: cover;
            object-position: center;
        }

        .mst-category-card .overlay {
            background: linear-gradient( to top, rgba(0,0,0,.82), rgba(0,0,0,.18), transparent );
        }

        .mst-category-card .content {
            left: 18px;
            right: 18px;
            bottom: 18px;
        }

        .mst-category-card h3 {
            font-size: 20px;
            margin-bottom: 6px;
        }

        .mst-category-card p {
            display: none;
        }

        .mst-category-card::after {
            content: "İncele →";
            left: 18px;
            bottom: 18px;
            opacity: 1;
        }

        .mst-category-card .content {
            transform: translateY(-22px);
        }
}