/* 13.Ürünler */
.Ürünler-service{
    & img{
        margin-bottom: 20px;
    }
    & h4{
        font-size: 16px;
        letter-spacing: 2px;
        margin-bottom: 10px;
    }
    & p{
        margin-bottom: 0;
        font-size: 16px;
    }
}
.banner-box{
    border-top: 2px solid #f1f7ff;
    padding-top: 50px;
}
.banner{
    & img{
        width: 100%; 
    }
}
.product{
    &__img{
        position: relative;
    }
    &__content{

    }
    &:hover{
        & .product-action{
            & a{
                margin: 0 5px;
                opacity: 1;
                visibility: visible;
            }
        }
    }
}

.product-action{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30px;
    & a{
        height: 50px;
        display: inline-block;
        width: 10rem;
        background: #fff;
        line-height: 50px;
        color: $theme-color;
        margin: 0 8px;
        opacity: 0;
        visibility: hidden;
        &:hover{
            background: #fff;
            color: black;
        }
    }
}

.pro-cat{
    margin-bottom: 15px;
    display: block;
    & a{
        color: $theme-color;
        font-size: 15px;
        letter-spacing: 1px;
        font-weight: 900;
    }
}
.pro-title{
    margin-bottom: 12px;
    & a{
        font-size: 24px;
        &:hover{
            color: $theme-color;
        }
    }
}
.price{
    & span{
        color: #8e84b8;
        font-size: 14px;
        display: inline-block;
        margin: 0 5px;
        &.old-price{
            color: #b7afd5;
            text-decoration: line-through
        }
    }
}

.product-showing{
    & p{
        margin: 0;
        border: 2px solid $border-color;
        padding: 17px 30px;
        text-align: center;
        line-height: 1;
        display: inline-block;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 2px;
        font-weight: 500;
        @media #{$xs}{
            padding: 17px 15px;
        }
    }
}
.pro-filter{
    position: relative;
    display: inline-block;
    @media #{$xs}{
        float: left;
    }
    & select{
        border: 2px solid $border-color;
        padding: 17px 30px;
        display: inline-block;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 2px;
        line-height: 1;
        color: $body-color;
        appearance: none;
        -moz-appearance: none;
        width: 145px;
        font-weight: 500;
    }
    & span {
        right: 15px;
        top: 16px;
        position: absolute;
        color: #758799;
        font-size: 12px;
    }
}


.Ürünler-tab{
    & ul{
        & li{
            margin-left: 20px;
            @media #{$xs}{
                margin-left: 10px;
            }
            & a{
                font-size: 16px;
                font-weight: 500;
                color: $body-color;
                letter-spacing: 2px;
                padding: 0;
                text-transform: uppercase;
                position: relative;
                height: 50px;
                width: 50px;
                border-radius: 50%;
                background: #f6f6ff;
                line-height: 50px;
                text-align: center;
                &.active{
                    color: white;
                    background: $theme-color;

                }

            }
        }
    }
}

.Ürünler-thumb-tab{
    width: 160px;
    float: left;
    @media #{$xs}{
        float: none;
        width: 100%;
        margin-bottom: 0;
    }
    & ul{
        @media #{$xs}{
            margin: 0 -5px;
        }
        & li{
            margin-bottom: 20px;
            @media #{$xs}{
                width: 33.33%;
                float: left;
                padding: 0 5px;
            }
            & a{
                padding: 0;
            }
            & img{width:100%;}
        }
    }

}
.product-details-img {
	margin-left: 180px;
    overflow: hidden;
    @media #{$xs}{
        margin-left: 0;
    }
}
.product-large-img img {
	width: 100%;
}

.product-details-title{
    & p{
        color: #6a667b;
        font-size: 12px;
        text-transform: uppercase;
        font-weight: 500;
        letter-spacing: 1px;
        margin-bottom: 10px;
    }
    & h1{
        font-size: 40px;
        margin: 0;
        line-height: 1.2;
        letter-spacing: -2px;
        margin-bottom: 15px;
        @media #{$xs}{
            font-size: 36px;
        }
    }
}

.details-price{
    & span{
        color: $theme-color;
        font-size: 20px;
        font-weight: 300;
        font-family: $c_bold;
        margin-left: 0;
        margin-right: 10px;
    }
}
.details-price {
    border-bottom: 2px solid $border-color;
}
.product-cat{
    & span{
        text-transform: uppercase;
        font-size: 14px;
        font-weight: 500;
        color: $black;
    }
    & a{
        text-transform: uppercase;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 2px;
        &:hover{
            color: $theme-color; 

        }
    }
}
.product__img img {
	width: 100%;
}
.category-img{
    color:#0963AD;
    font-weight: bold;
}
.category-img:hover{
    background-color:#e0f0fd;
}
.product-social{
    & a{
        margin-right: 10px;
        background:#f5f5ff;
        height: 50px;
        width: 50px;
        line-height: 48px;
        border-radius: 30px;
        color: $body-color;
        display: inline-block;
        text-align: center;
        font-size: 14px;
        @media #{$xs}{
            margin-bottom: 10px;
        }
        &:hover{
            background: $theme-color;
            color: $white; 
        }
    }
}
.plus-minus{
    display: inline-block;
    @media #{$xs}{
        display: block;
        margin-bottom: 15px;
    }
    @media #{$sm}{
        display: inline-block;
        margin-bottom: 0;
    }
}

.action-btn {
	background: $theme-color;
    padding: 20px 25px;
    border: none;
    margin-left: 15px;
    color: $white;
    display: inline-block;
    border-radius: 4px;
        &:hover{
            background: $theme-color;
            color: $white;
        }
}
.product-action-list{
    & a{
        float: left;
    }
    & a.btn{
        @media #{$xs}{
            padding: 23px 30px;
            margin-bottom: 7px;
        }
    }
    & a.action-btn{
        @media #{$xs}{
            margin-left: 5px;
            margin-bottom: 7px;
        }
    }
}

.cart-plus-minus{
    & input{
        height: 60px;
        width: 100px;
        border-radius: 5px;
        border: 2px solid $border-color;
        text-align: center;
        -moz-appearance: none;
        appearance: none;
    }
}
.cart-plus-minus {
	display: inline-block;
	position: relative;
	margin-right: 15px;
}
.cart-plus-minus .qtybutton {
	position: absolute;
	top: 15px;
	left: 17px;
	font-size: 20px;
    color: #c4bedd;
    cursor: pointer;
}
.cart-plus-minus .inc{
    left: auto;
    right: 17px;
}

.additional-info .table td, .additional-info .table th {
	padding: .75rem 0;
	vertical-align: top;
	border-top: 1px solid #f6f6f6;
	font-weight: 400;
}

.Ürünler-cat{
    & a{
        padding: 45px 30px;
        border: 2px solid $border-color;
        display: block;
        & i{
            font-size: 100px;
            color: $theme-color;
            margin-bottom: 30px;
            transition: .3s;
        }
        & h4{
            text-transform: uppercase;
            font-size: 16px;
            font-weight: 700;
            font-family: $c_bold;
            transition: .3s;
            letter-spacing: 1px;
        }
        &:hover{
            background: $theme-color;
            border-color: $theme-color;
            & i{
                color: $white;
            }
            & h4{
                color: $white;
            }
        }
    }
}

.product-list-content{
    & .price {
        & span:first-child{
            margin-left: 0;
        }
    }
}

.tab-menu{
    & li{
        margin: 0 10px;
        @media #{$xs}{
            margin-bottom:20px;
        }
        & a{
            font-size: 14px;
            font-weight: 500;
            letter-spacing: 2px;
            text-transform: uppercase;
            padding: 25px 45px;
            background: $tab-bg;
            border-radius: 30px;
            line-height: 1;
            color: $tab-color;
            &.active{
                color: $white;
                background: $theme-color;
            }
        }
    }
}
.bakix-details-tab{
    & ul{
        border-bottom: 2px solid #e1e1e1;
        & li{
            & a{
                font-size: 16px;
                font-weight: 500;
                color: #8c8bb5;
                letter-spacing: 2px;
                padding: 0;
                text-transform: capitalize;
                position: relative;
                padding: 0 25px;
                @media #{$xs}{
                    padding: 0 10px;
                }
                &.active{
                    color: #100d1c;
                    &:before{
                        position: absolute;
                        bottom: -32px;
                        left: 0;
                        height: 2px;
                        width: 100%;
                        content: "";
                        background: $theme-color;
                        transition: .3s;
                        @media #{$xs}{
                            display: none;
                        }
                        @media #{$sm}{
                            display: block;
                        }

                    }
                }

            }
        }
    }
}