:root {
    --gray-color: #f0f2f5;
    --gray2-color: #878787;
    --gray3-color: #65676B;
    --dark-color: #050505;
    --bold-text-color: #222222;
    --border-color: #dedede;
    --secondary-color: #e4e6eb;
    --primary-color: #007bff;
    --font-system-ui: system-ui;
    --danger-color: #ff062c;
    --success-color: #4bc302
}

.tekSatir {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.ikiSatir {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.flex-center{
    display:flex;
    align-items:center;
    justify-content:center;
}
.flex-left {
    display: flex;
    align-items: center;
}
.flex-right{
    display: flex;
    align-items: center;
    justify-content:right;
}

/*SEPET*/
.quantity-controls {
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--gray-color);
    display:inline-block;
}
.quantity-controls button {
   width: 25px;
    border: 0;
    height: 40px;
    font-size: 20px;
    font-weight: bold;
    background: var(--gray-color);
    outline: none;
}
.quantity-controls .reset{
     position: relative; 
     height: unset; 
     line-height: unset; 
     border-radius: unset; 
     border: unset; 
    width: unset;
     padding: unset; 
     display: unset; 
     margin-bottom: unset; 
     color: unset;
}
.quantity-controls input{
    width: 49px!important;
    text-align: center;
    border: 0;
    outline: none;
    background: transparent;
}
.basket-rows p{
    margin-bottom:5px
}
.basket-rows .row{
    padding:10px 0;
    margin-bottom:10px
}
.basket-rows .row:nth-child(odd) {
    background: var(--gray-color);
}
.basket-rows .row:nth-child(odd) .quantity-controls{
    border:1px solid #fff;
}
.basket-rows .row:nth-child(odd) .quantity-controls button {
   background: #fff;
}
/****************************/


/**********
PRODUCT CARD
**********/
.product-card {
    background:#fff;
    border: 1px solid #efefef;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    transition: all 500ms;
}
.product-card:hover{
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform:translateY(-5px)
}
.product-card img {
    width: 100%;
    height:200px;
    object-fit:contain;
}
.product-card .select-card{
  position:absolute;
  right:0;
  top:2px;
  display:none;
}
.product-card.select{
    border:1px solid var(--success-color)!important
}
.product-card .body{
    padding:10px;
}
.product-card .ikiSatir{
    height:48px;
}
.product-card .price{
    text-align: center;
    font-weight: 600;
    font-size: 20px;
    color: var(--orange);
}
.product-card .footer{
    padding:0 15px 15px
}
/****************************/


/**********
IMAGES CARD
**********/
.image-cards{
   display:inline-block;
}
.image-cards .item{
    display:flex;
    margin-bottom:15px;
}
.image-cards .smallitem {
    max-width: 325px;
    width: 100%;
}
.image-cards .item .img {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    display: flex;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-right: 15px
}
.image-cards .item img{
    width:50px;
    object-fit:cover
}
.image-cards .item .title{
    font-weight:bold;
}
.circles {
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--gray-color);
    border-radius: 50%;
    margin-left:15px
}
.circles .circle{
    width:5px;
    height:5px;
    background:var(--dark-color);
    margin:1px;
    border-radius:50%;
}
.image-cards .item-desc{
    flex:0 0 calc(100% - 125px)
}
/****************************/

/******************
  BREADCRUMP
******************/
.bread-crumb {
    overflow-x: auto;
    border-radius: 2px;
    padding: 15px 0;
}
.bread-crumb ul {
    border-radius: .25rem;
    display: flex;
    align-items: center;
    margin-bottom:0;
}
.bread-crumb ul li {
    white-space: nowrap;
    display: flex;
    align-items: center;
    position: relative;
}
.bread-crumb ul a{
    color:var(--text-color);
    font-size:12px;
    margin-right:15px;
    position:relative;
    display:inline-block;
}
.bread-crumb ul a::after{
    content:"/";
    position:absolute;
    right:-10px;

}
/****************************/

/***********
MENU İTEMS
**********/
.menu-items .menu-item {
    display: inline-block;
    cursor:pointer;
    float:right;
    margin-left:5px;
}
.menu-items .menu-item .menu.circle{
    height: 40px;
    width: 40px;
    border-radius: 50px;
    border: 0;
    outline: none;
    border: 1px solid var(--border-color);
    position:relative;

}
.menu-items .menu-item .counter{
        position: absolute;
    background: var(--danger-color);
    color: #fff;
    left: -5px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    top: -5px;
    padding: 0 4px;
}
.menu-items .menu-dropdown {
    position: absolute;
    z-index: 99;
    top: calc(100% + 6px);
    background: #fff;
    border-radius: 5px;
    padding: 15px 45px 15px 15px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    display:none
}
.menu-items .menu-dropdown.right-pos{
    right:10px;
}
.menu-items .menu-item.menu-bar {
    display: none
}
.menu-items img{
    width:100%;
}
.menu-items .nav-menu .menu {
    float: left;
    margin-right: 15px;
    padding: 8px 15px;
    border-radius:5px;
    position:relative;
}
.menu-items .nav-menu .menu a{
    color:#000;
    text-decoration:none;
}
.menu-items .nav-menu .menu:hover{
    background:var(--gray-color)
}
.menu-items .nav-menu .menu.active::before{
    content:"";
    width:100%;
    height:5px;
    position:absolute;
    z-index:99;
    bottom:0;
    border-radius:5px;
    background: var(--primary-color);
}
/****************************/
/*************
ADRES İTEM
************/
.address-item {
    margin: 15px 0;
    border: 1px solid rgb(221 221 221);
    padding: 15px;
    border-radius: 2px;
    position: relative;
}
.address-item  .fa {
    position: absolute;
    right: 15px;
    color: #fff;
    background: red;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
/************************/

/********
CHECKBOX
********/
.check-box:not(:first-child) {
display: inline-block;
}
.check-box input {
appearance: none;
-webkit-appearance: none;
cursor: pointer;
}
.check-box span {
position: relative;
cursor: pointer
}
.check-box span::before {
width: 18px;
height: 18px;
border: 1px solid #a0a9b2;
margin: 0 2px 0 0;
cursor: pointer;
right: 100%;
top: 20%;
content: "\f00c";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 2px;
padding-top: 2px;
}
.check-box input:checked ~ span::before {
color: var(--main-color2);
}
.check-box {
margin-bottom: 0 !important
}
.check-box small{
    font-size:13px;
}

.cb-card {
    margin-bottom: 0 !important
}
.cb-card:not(:first-child) {
display: inline-block;
}
.cb-card input {
appearance: none;
-webkit-appearance: none;
cursor: pointer;
}
.cb-card .cb-inner {
position: relative;
cursor: pointer
}
.cb-card input:checked ~ .cb-inner {
 border:1px solid red;
}
/*************************/



/***********
BUTTONS
**********/
.btnn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    outline: none;
    text-decoration: none !important;
}
.btnn-lg{
    width:100%;
}
.btnn-secondary {
   background:var(--secondary-color);
   color:var(--dark-color)!important;
   font-weight:bold;
}
.btnn-danger {
    background: var(--danger-color);
    color: var(--dark-color) !important;
    font-weight: bold;
}
.btnn-primary {
    background: var(--primary-color);
    color: #fff!important;
}
.btnn.btn-icon {
    position: relative;
    overflow: hidden;
    padding-left: 50px;
    border-radius: 2px;
}
.btnn.btn-icon i {
    position: absolute;
    height: 100%;
    line-height: 100%;
    width: 40px;
    line-height: 38px;
    text-align: center;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.1);
}
.btn-icon{
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 4px;
    outline:none
}
.btn-like{
    background:var(--secondary-color);
    display:inline-block;
    border-radius:25px;
    overflow:hidden
}
.btn-like a{
    text-decoration:none;
}
.btn-like img {
    height: 35px;
    width: auto;
}
/****************************/


/***********
PAGİNG
**********/
.paging a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background: #fff;
    color:var(--dark-color);
    text-decoration:none;
    position: relative;
    cursor: pointer;
    border-radius: 50%;
    margin-left: 2px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.paging a.active{
    background:var(--danger-color);
    color:#fff;
}
/****************************/

/***********
ALERT
**********/
.alert {
    position: fixed;
    right: 15px;
    top:25px;
    min-width: 300px;
    max-width: 95%;
}
.alert span.fa-close{
    position: absolute;
    top: -10px;
    right: -10px;
    background: #d4edda;
    border-radius: 50%;
    width: 21px;
    height: 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor:pointer
}

/***********
COLORS
**********/
.back-white {
    background: #fff;
}
/*******************************/


/***********
BOX
**********/
.box {
    width: 100%;
    padding: 15px;
    border-radius: 5px;
}

.box-border {
    border: 1px solid var(--border-color)
}
/*******************************/

@media screen and (max-width:900px),screen and (max-device-width:900px) {
.menu-items .menu-item.menu-bar {
    display: inline-block
}
}