html:not(.ts-checkout-page) .rdio label{margin-left:7px !important;}
html:not(.ts-checkout-page) input{-webkit-appearance: none;}
body{
margin: 0; padding: 0;
font-family : 'Poppins', sans-serif !important;
overflow: hidden;
overflow-y: scroll;
}
.main-body{
width: 100%;
}
.main-body-2{
width: 90%;
margin: 0 auto;
position: relative;
overflow: hidden;
}
/* Header ve Slider ////////////////////////////////////////////*/
.header-mobile-view{
display: none;
}
.slider_text_inside_main{
width: 1280px;
height: auto;
z-index: 2;
display: flex;
}
.slider_text_inside_main_2{
width: 1200px;
height: auto;
z-index: 2;
display: flex;
}
.slider_text_inside_box{
width: 762px;
}
.slider_text_inside_box_h{
width: 100%;
margin-bottom: 35px;
}
.slider_text_inside_box_s{
width: 100%;
}
.slider_text_inside_box_button{
width: 100%;
margin-top: 50px;
}
.header-main-div{
width: 100%;
box-sizing: border-box;
z-index: 9;
}
.header-mobile-view{
display: none;
}
.web-header-mobile-bar{
display: none;
}
.topheader-html-main{
width: 100%;
box-sizing: border-box;
position: relative;
}
.topheader-html-main-in{
width: 1300px;
box-sizing: border-box;
margin: 0 auto;
font-size: 14px ;
}
.topheader-html-main img{
max-width: 100%;
}
.topheader-html-close{
position: absolute;
right: 10px;
top:20%;
cursor: pointer;
}
.topheader-desktop-main-div{
width: 100%;
}
.topheader-desktop-main-div-in{
width: 1300px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.topheader-desktop-main-left{
width: auto;
display: flex;
justify-content: flex-start;
}
.topheader-desktop-main-left a{
display: flex;
align-items: center;
justify-content: flex-start;
margin-right: 7px;
}
.topheader-desktop-main-left a i{
margin-right: 5px;
}
.topheader-desktop-main-right a{
display: flex;
align-items: center;
justify-content: flex-start;
margin-left: 7px;
}
.topheader-desktop-main-right a i{
margin-right: 5px;
}
.topheader-desktop-main-right{
width: auto;
display: flex;
justify-content: flex-start;
}
.topheader-lang-currency-box{
width: auto;
margin-left: 10px;
}
.topheader-lang-currency-box:last-child{
margin-left:0!important;
}
.topheader-lang-currency-box a{
margin-left: 0;
}
.topheader-lang-currency-box a i{
margin-left: 5px;
}
.dropdown-menu.currency-drop{
width: 180px !important;
box-sizing: border-box;
padding: 15px;
margin-top: 15px;
}
.currency-drop a{
display: flex;
align-items: center;
justify-content: flex-start;
border-bottom: 1px dashed #EBEBEB;
color: #000 !important;
font-size: 13px!important; ;
padding: 0 !important;
font-weight: 500!important;
padding-bottom: 5px !important;
margin-bottom: 5px !important;
}
.currency-drop a:last-child{
margin-bottom: 0 !important;
}
.header-desktop-main-div{
width: 100%;
}
.header-desktop-main-div-in{
width: 1300px;
margin: 0 auto;
display: flex;
justify-content: flex-start;
align-items: center;
}
.header-desktop-logo-div{
width: auto;
margin-right: 50px;
}
.header-desktop-logo-div img{
max-height: 90px;
max-width: 200px;
}
.top-level-menu-main-div{
width: 100%;
}
.top-level-menu-main-div-in{
width: 1300px;
margin: 0 auto;
display: flex;
align-items: center;
}
.header-desktop-right-area{
display: flex;
flex:1;
justify-content: flex-end;
align-items: center;
}
/* Yeni header dizayn */
.header-desktop-search1{
width: auto;
position: relative;
margin-left: 30px;
}
.header-desktop-search1 form input{
min-width: 400px;
font-size: 13px ;
height: 45px;
padding: 0 25px;
transition-duration: 0.1s; transition-timing-function: linear;
}
.header-desktop-search1 form button{
position: absolute;
right:12px;
margin-top: 3px;
background:none;
border: 0;
font-size: 26px ;
}
.header-desktop-search1 form button:focus{
outline: 0 !important;
}
.header-desktop-call{
width: auto;
display: flex;
align-items: center;
justify-content: flex-start;
margin-left: 30px;
}
.header-desktop-call-i{
margin-right: 5px;
font-size: 40px ;
}
.header-desktop-call-t{
width: auto;
}
.header-desktop-call-t-1{
font-size: 11px ;
}
.header-desktop-call-t-2{
font-size: 15px ;
font-weight: 600;
}
.header-desktop-navbutton-box{
width: auto;
margin-left: 30px;
text-align: center;
position: relative;
}
.header-desktop-navbutton-box a{
position: relative;
}
.header-desktop-navbutton-box a:hover{
text-decoration: none;
}
.header-desktop-navbutton-box i{
font-size: 30px ;
margin-bottom: 4px;
line-height: 30px;
}
.header-desktop-navbutton-box-t{
font-size: 12px ;
font-weight: 600;
}
.header-desktop-navbutton-box-count{
position: absolute;
border:0 !important;
padding: 0 5px !important;
border-radius: 100px;
font-size: 11px;
display: inline-block;
left:18px;
}
.header-desktop-navbutton-box-count-cart{
position: absolute;
border:0 !important;
padding: 0 5px !important;
border-radius: 100px;
font-size: 11px;
display: inline-block;
left:20px;
}
.carting i{
font-size: 36px ;
}
.dropdown-cart-header{
width: 100%;
font-size: 13px ;
font-weight: 500;
color: #000;
border-bottom: 1px solid #EBEBEB;
margin-bottom: 11px;
padding-bottom: 7px;
text-align: left;
}
.dropdown-cart-overflow{
width: 100%;
height: auto;
max-height: 430px;
overflow-y: auto;
}
.dropdown-cart-overflow::-webkit-scrollbar-track {
background-color: #ebebeb;
}
.dropdown-cart-overflow::-webkit-scrollbar {
width: 7px;
}
.dropdown-cart-overflow::-webkit-scrollbar-thumb {
background-color: #ccc;
}
.dropdown-menu.cart-drop{
width: 330px !important;
box-sizing: border-box;
padding: 15px;
margin-top: 15px;
color: #000 !important;
}
.dropdown-menu.user-drop{
width: 250px !important;
box-sizing: border-box;
padding: 25px;
margin-top: 15px;
color: #000 !important;
}
.dropdown-menu.bell-drop{
width: 340px !important;
box-sizing: border-box;
padding: 10px;
margin-top: 15px;
color: #000 !important;
}
.dropdown-cart-itembox{
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #EBEBEB;
box-sizing: border-box;
}
.dropdown-cart-itembox:last-child{
margin-bottom: 0;
}
.dropdown-cart-itembox-content{
flex:1;
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.dropdown-cart-itembox-content-img{
width: 70px;
height: 70px;
margin-right: 10px;
overflow: hidden;
}
.dropdown-cart-itembox-content-img img{
width: 100%;
height: auto;
}
.dropdown-cart-itembox-content-t{
flex:1;
}
.dropdown-cart-itembox-content-t-1{
font-size: 13px ;
font-weight: 600;
margin-bottom: 7px;
line-height: 17px;
}
.dropdown-cart-itembox-content-t-3{
font-size: 13px ;
margin-top: 3px;
}
.dropdown-cart-itembox-trash{
width: 45px;
text-align: center;
}
.dropdown-cart-itembox-trash i{
font-size: 16px ;
color: indianred;
line-height: 16px;
}
.dropdown-cart-noitem{
width: 100%;
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
padding: 30px 0;
border: 1px dashed #EBEBEB;
}
.dropdown-cart-noitem i{
margin-bottom: 0;
font-size: 35px ;
line-height: 35px;
}
.dropdown-cart-noitem-t{
font-size: 16px ;
font-weight: 600;
margin-top: 10px;
margin-bottom: 8px;
color: #000;
}
.dropdown-cart-noitem-s{
font-size: 13px ;
color: #666;
width: 80%;
margin: 0 auto;
}
.dropdown-cart-priceTotal{
width: 100%;
box-sizing: border-box;
padding: 5px 8px;
border-bottom: 1px solid #EBEBEB;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
}
.dropdown-cart-priceTotal-l{
font-size: 13px ;
color: #000;
}
.dropdown-cart-priceTotal-r{
font-size: 16px ;
color: #000;
font-weight: 600;
}
.dropdown-bell-no{
width: 100%;
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
padding: 15px 0;
}
.dropdown-bell-no i{
margin-bottom: 0;
font-size: 35px ;
line-height: 35px;
}
.dropdown-bell-no-t{
font-size: 16px ;
font-weight: 600;
margin-top: 10px;
margin-bottom: 8px;
color: #000;
}
.dropdown-bell-no-s{
font-size: 13px ;
color: #666;
width: 80%;
margin: 0 auto;
}
.dropdown-user-area{
width: 100%;
}
.dropdown-user-area-header{
width: 100%;
}
.dropdown-user-area-header a{
width: 100%;
display: block;
padding: 9px 5px;
box-sizing: border-box;
color: #FFF !important;
text-align: center;
font-size: 13px ;
box-shadow: 0 0 15px 0 rgba(0,0,0,0.1);
}
.dropdown-user-area-lineText{
width: 100%;
height: 2px;
border-bottom: 1px solid #EBEBEB;
margin-bottom: 15px;
margin-top: 15px;
display: flex;
align-items: center;
justify-content: center;
}
.dropdown-user-area-lineText-in{
background-color: #fff;
font-size: 13px ;
color: #999;
display: inline-block;
padding: 0 5px;
}
.dropdown-user-area-link-area{
width: 100%;
border-top: 1px solid #EBEBEB;
margin-top: 10px;
}
.dropdown-user-area-link-area a{
font-size: 13px ;
color: #000;
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
border-bottom: 1px solid #EBEBEB;
padding: 5px 0;
}
.dropdown-user-area-link-area a:hover{
color: #818181 !important;
}
.dropdown-user-area-link-area a i{
font-size: 13px ;
line-height: 13px;
margin-right: 9px;
margin-top: 5px;
}
.dropdown-userarea-header{
width: 100%;
border-bottom: 1px solid #EBEBEB;
padding-bottom: 5px;
font-size: 13px;
font-weight: 600;
color: #000;
display: flex;
justify-content: space-between;
align-items: center;
}
.dropdown-bell-area{
width: 100%;
}
.dropdown-bell-header{
width: 100%;
border-bottom: 1px solid #EBEBEB;
margin-bottom: 10px;
padding-bottom: 5px;
font-size: 13px;
font-weight: 600;
color: #000;
display: flex;
justify-content: space-between;
align-items: center;
}
.dropdown-bell-list{
width: 100%;
}
.dropdown-bell-list-box{
width: 100%;
border-bottom: 1px solid #ebebeb;
margin-bottom: 10px;
padding-bottom: 10px;
}
.dropdown-bell-fullhref{
width: 100%;
padding: 5px;
background-color: #f8f8f8;
text-align: center;
font-size: 13px ;
font-weight: 600;
border-bottom: 1px solid #EBEBEB;
border-top: 1px solid #EBEBEB;
}
.dropdown-bell-fullhref a{
color: #000 !important;
}
.dropdown-bell-fullhref a:hover{
color: #666!important;
}
.dropdown-bell-list-box:last-child{
margin-bottom: 0;
border-bottom: 0;
}
.dropdown-bell-list-box-h{
width: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.dropdown-bell-list-box-h-icon{
font-size: 12px ;
width: 28px;
}
.dropdown-bell-list-box-baslik{
flex:1;
margin-right: 5px;
font-size: 13px ;
line-height: 16px;
}
.dropdown-bell-list-box-baslik a{
color: #000 !important;
}
.dropdown-bell-list-box-baslik a:hover{
color: #558cff!important;
}
.dropdown-bell-list-box-date{
margin-left: auto;
font-size: 10px ;
padding: 2px 5px;
background-color: #558cff;
color: #fff;
border: 1px dashed #EBEBEB;
}
.dropdown-bell-list-box-s{
width: 100%;
font-size: 11px ;
color: #999;
margin-top: 5px;
}
.dropdown-bell-overflow{
width: 100%;
height: auto;
max-height: 258px;
overflow-y: auto;
}
.dropdown-bell-overflow::-webkit-scrollbar-track {
background-color: #ebebeb;
}
.dropdown-bell-overflow::-webkit-scrollbar {
width: 7px;
}
.dropdown-bell-overflow::-webkit-scrollbar-thumb {
background-color: #ccc;
}
.dropdown-cart-favorite{
width: 100%;
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
padding: 30px 0;
border: 1px dashed #EBEBEB;
}
.dropdown-cart-favorite i{
margin-bottom: 0;
font-size: 35px ;
line-height: 35px;
color: pink;
}
.dropdown-cart-favorite-t{
font-size: 16px ;
font-weight: 600;
margin-top: 10px;
margin-bottom: 8px;
color: #000;
}
.dropdown-cart-favorite-s{
font-size: 13px ;
color: #666;
width: 80%;
margin: 0 auto;
}
/* <========SON=========>>> Yeni header dizayn SON */
.header-desktop-phone-div-txt span{
font-size: 12px ;
line-height: 12px;
font-weight: normal;
}
.header-desktop-social-div{
width: auto;
display: flex;
justify-content: center;
align-items: center;
padding: 0 20px;
border-right: 1px dashed rgba(0,0,0,0.1);
}
.header-desktop-lang-main-div:last-child{
border-right: none;
}
.header-desktop-social-div i{
font-size: 15px ;
}
.header-desktop-lang-main-div span{
font-size: 12px;
padding: 2px 0 0 3px;
}
.header-desktop-lang-main-div{
width: auto;
display: flex;
justify-content: center;
align-items: center;
padding: 0 20px;
border-right: 1px dashed rgba(0,0,0,0.1);
}
.header-main-div {
font-family: 'Montserrat', sans-serif !important;
}
}
.lang-dropdown-div{
border-radius: 0!important;
padding: 10px !important;
margin-top: 10px !important;
box-sizing: border-box;
box-shadow: 0 0 15px 0 rgba(0,0,0,0.1);
}
.lang-dropdown-div a{
font-size: 13px ;
font-family : 'Roboto Condensed', sans-serif ;
display: flex;
align-items: center !important;
justify-content: flex-start !important;
border-bottom: 1px dashed #EBEBEB;
}
.dropdown-item{
padding: 5px 3px !important;
}
.head-button-area{
margin-left: auto !important; /* TODO Burası eklendi */
}
.head-new-area-left{
flex:1;
}
.head-new-area-right{
margin-left: auto;
}
.head-drop-text{
font-size: 13px ;
display: flex;
align-items: center;
justify-content: center;
}
.head-drop-text i{
font-size: 19px ;
}
.head-drop-text:hover{
text-decoration: none;
}
.head-drop-text span{
font-size: 14px ;
padding: 2px 4px 0 5px;
}
.sepet-dropdown-main{
border-radius: 0!important;
padding: 20px !important;
margin-top: 10px !important;
box-sizing: border-box;
box-shadow: 0 0 15px 0 rgba(0,0,0,0.1);
width: 280px;
}
.sepet-dropdown-main a{
font-family : 'Open Sans',sans-serif ;
font-size: 13px ;
}
.dropdown-menu{
border: 1px solid rgba(0,0,0,.09) !important;
}
.arama-dropdown-main{
border-radius: 0!important;
padding: 0 !important;
margin-top: 22px !important;
box-sizing: border-box;
box-shadow: 0 0 15px 0 rgba(0,0,0,0.1);
width: 650px;
}
.arama-dropdown-main input{
width: 100%;
border: none;
font-size: 14px ;
font-family : 'Poppins',sans-serif ;
font-weight: 300;
letter-spacing: 0.05em;
color: #000;
padding: 20px;
}
.arama-dropdown-main input:focus{
box-shadow: none !important;
border: none !important;
}
/* Header ve Slider SON ////////////////////////////////////////*/
/* Hakkımızda Modül Blogu ///////////////////////////////////////////*/
.about-module-main-div{
width: 100%;
position: relative;
overflow: hidden;
}
.about-module-inside-area{
width: 1300px;
margin: 0 auto;
display: flex;
align-items:center;
justify-content: center;
flex-wrap: wrap;
z-index: 9;
position: relative;
}
.about-module-main-div-boxed{
width: 1300px;
position: relative;
overflow: hidden;
margin: 0 auto;
}
.about-module-inside-area-boxed{
width: 90%;
margin: 0 auto;
display: flex;
align-items:center;
justify-content: center;
flex-wrap: wrap;
z-index: 9;
position: relative;
}
/* tip 1 sola dayalı */
.about-module-leftside-txt{
flex:1;
text-align: left;
}
.about-module-leftside-txt-h{
width: 100%;
font-size: 15px ;
margin-bottom: 15px;
}
.about-module-leftside-txt-h2{
width: 100%;
margin-bottom: 25px;
font-size: 40px ;
line-height: 45px;
font-weight: 600;
}
.about-module-leftside-txt-s{
width: 100%;
font-size: 22px ;
margin-bottom: 45px;
}
.about-module-leftside-txt-button-area{
width: 100%;
}
.about-module-leftside-img{
max-width: 500px;
text-align: right;
margin-left: 30px;
}
.about-module-leftside-img img{
max-width: 100%;
}
/* Tip - 0 Ortalı */
.about-module-center-txt{
width: 100%;
text-align: center;
}
.about-module-center-txt-h{
width: 100%;
font-size: 15px ;
margin-bottom: 15px;
}
.about-module-center-txt-h2{
width: 100%;
margin-bottom: 25px;
font-size: 40px ;
line-height: 45px;
font-weight: 600;
}
.about-module-center-txt-s{
width: 100%;
font-size: 22px ;
margin-bottom: 45px;
}
.about-module-center-txt-button-area{
width: 100%;
}
.about-module-center-img{
width: 100%;
margin-top: 30px;
text-align: center;
}
/*tip 2 sağ hizalı */
.about-module-rightside-txt{
flex:1;
text-align: right;
}
.about-module-rightside-txt-h{
width: 100%;
font-size: 15px ;
margin-bottom: 15px;
}
.about-module-rightside-txt-h2{
width: 100%;
margin-bottom: 25px;
font-size: 40px ;
line-height: 45px;
font-weight: 600;
}
.about-module-rightside-txt-s{
width: 100%;
font-size: 22px ;
margin-bottom: 45px;
}
.about-module-rightside-txt-button-area{
width: 100%;
}
.about-module-rightside-img{
max-width: 500px;
margin-right: 30px;
text-align: left;
}
.about-module-rightside-img img {
max-width: 100%;
}
/* Hakkımızda Modül Blogu SON ///////////////////////////////////////////*/
/* Sayaç ///////////////////////////////////////////*/
.counter-module-main-div{
width: 100%;
position: relative;
overflow: hidden;
}
.counter-module-inside-area{
width: 80%;
margin: 0 auto;
display: flex;
align-items:center;
justify-content: center;
flex-wrap: wrap;
z-index: 9;
position: relative;
}
.counter-module-box{
margin-left: 50px;
margin-right: 50px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.counter-module-box-i{
width: 100%;
font-size: 32px ;
}
.counter-module-box-sayi{
font-size: 55px ;
padding: 1px 8px;
font-weight: bold;
line-height: 55px;
margin-bottom: 15px;
}
.counter-module-box-txt{
width: 100%;
font-size: 18px ;
font-weight: 500;
}
/* Sayaç SON ///////////////////////////////////////////*/
/* Hizmetler ///////////////////////////////////////////*/
.hizmetler_sayfasi{
width: 100%;
background-color: #fff;
overflow: hidden;
}
.hizmetler-module-main-div{
width: 100%;
position: relative;
overflow: hidden;
}
.hizmetler-module-inside-area{
width: 1280px;
margin: 0 auto;
display: flex;
align-items:center;
justify-content: center;
flex-wrap: wrap;
z-index: 9;
position: relative;
}
.hizmetler-box-main-div{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 40px;
}
.hizmetler-box{
width: 21.3%;
margin: 35px 1.5%;
overflow: hidden;
box-sizing: border-box;
}
.hizmetler-box-img{
width: 100%;
height: 180px;
overflow: hidden;
margin-bottom: 25px;
position: relative;
}
.hizmetler-box-line{
width: 90%;
height: 90%;
position: absolute;
z-index: 9;
margin-left: auto;
margin-right: auto;
left:0;
right: 0;
margin-top: auto;
margin-bottom: auto;
top:0;
bottom: 0;
border: 1px solid rgba(255,255,255,0.4);
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
transition-duration: 0.2s; transition-timing-function: linear;
}
.hizmetler-box-line-text{
font-size: 13px ;
letter-spacing: 0.3em;
background-color: #FFF;
padding: 20px 20px;
color: #000;
font-weight: 300;
}
.hizmetler-box:hover .hizmetler-box-line{
opacity: 1;
}
.hizmetler-box-img img{
min-width: 100%;
min-height: 180px;
max-height: 200px;
max-width: 110%;
z-index: 1;
transition-duration: 0.1s; transition-timing-function: linear;
}
.hizmetler-box-h{
width: 100%;
font-weight: bold;
margin-bottom: 20px;
}
.hizmetler-box-s{
width: 100%;
font-size: 14px ;
line-height: 19px;
}
.hizmetler-box:hover .hizmetler-box-img img{
transform: scale(1.2);
filter: blur(2px);
}
.hizmet-link-button{
margin-top: 15px;
display: none !important;
}
.hizmetler-box:hover .hizmet-link-button{
display: inline-block !important;
}
/* Hizmetler SON ///////////////////////////////////////////*/
/* Blog Yazıları ///////////////////////////////////////////*/
.bloglar-module-main-div{
width: 100%;
position: relative;
overflow: hidden;
}
.bloglar-module-inside-area{
width: 1280px;
margin: 0 auto;
display: flex;
align-items:center;
justify-content: center;
flex-wrap: wrap;
z-index: 9;
position: relative;
}
.bloglar-box-main-div{
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
}
.blog-box{
width: 30%;
margin: 1.5%;
overflow: hidden;
}
.blog-box-overlay{
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
background-color: rgba(255,255,255,0.5);
transition-duration: 0.2s; transition-timing-function: linear;
display: flex;
align-items: center;
justify-content: center;
}
.blog-box-overlay i{
font-size: 40px ;
color: #000;
opacity: 0;
transition-duration: 0.1s; transition-timing-function: linear;
margin-top: 500px;
}
.blog-box:hover .blog-box-img img{
-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-ms-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);
filter: blur(2px);
}
.blog-box:hover .blog-box-overlay{
opacity: 1;
}
.blog-box:hover .blog-box-overlay i {
opacity: 1;
margin-top:0;
}
.blog-box-img{
width: 100%;
height: 260px;
margin-bottom: 15px;
overflow: hidden;
position: relative;
}
.blog-box-img img{
min-width: 100%;
max-width: 115%;
min-height: 260px;
transition-duration: 0.2s; transition-timing-function: linear;
}
.blog-box-text-area{
width: 90%;
margin: 0 auto;
margin-top: -50px;
margin-bottom: 20px;
position: relative;
padding: 30px;
text-align: center;
box-sizing: border-box;
z-index: 9;
box-shadow: 0 0 15px 0 rgba(0,0,0,0.1);
}
.blog-box-date{
width: 100%;
margin-bottom: 15px;
font-size: 14px ;
font-weight: 200;
text-transform: uppercase;
}
.blog-box-h{
width: 100%;
margin-bottom: 15px;
font-size: 25px ;
line-height: 32px;
font-weight: bold;
}
.blog-box-s{
width: 100%;
margin-bottom: 25px;
font-size: 14px;
line-height: 21px;
font-weight: 300;
}
.blog-box-button{
width: 100%;
text-transform: uppercase;
font-size: 13px ;
font-weight: 600;
}
.blogcomment-show-more-button {
margin-top: 20px;
}
.blogcomment-showmorespan {
outline: 0;
}
.blogcomment-showmorespan {
cursor: pointer;
width: 100% !important;
display: block;
padding: 10px 0;
text-align: center;
}
/* Blog Yazıları SON ///////////////////////////////////////////*/
/* Foto galeri ///////////////////////////////////////////*/
.pgallery-module-main-div{
width: 100%;
position: relative;
overflow: hidden;
}
.pgallery-module-inside-area{
width: 100%;
margin: 0 auto;
display: flex;
align-items:center;
justify-content: flex-start;
flex-wrap: wrap;
z-index: 9;
position: relative;
}
.pgallery-module-inside-box-area{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.pgallery-module-inside-box{
width: 20%;
overflow: hidden;
height: 300px;
position: relative;
font-family : 'Poppins', sans-serif ;
}
.pgallery-module-inside-box img{
min-width: 100%;
max-width: 115% ;
min-height: 300px;
transition-duration: 0.1s; transition-timing-function: linear;
z-index: 1;
}
.pgallery-module-box-overlay{
background-color: rgba(0,0,0,0.6);
position: absolute;
z-index: 2;
display: flex;
width: 95%;
height: 0;
align-items: center;
justify-content: center;
opacity: 0;
left: 0;
right: 0;
top:0;
bottom: 0;
margin-bottom: auto;
margin-top: auto;
margin-left: auto;
margin-right: auto;
transition-duration: 0.1s; transition-timing-function: linear;
}
.pgallery-module-box-overlay-in{
font-size: 22px ;
color: #FFF;
padding: 20px;
line-height: 28px;
text-align: center;
font-weight: 500;
flex-direction: column;
display: flex;
}
.pgallery-module-box-overlay-in i{
font-size: 40px ;
margin-bottom: 20px;
}
.pgallery-module-inside-box:hover img{
transform: scale(1.1);
filter: blur(2px);
}
.pgallery-module-inside-box:hover .pgallery-module-box-overlay{
opacity: 1;
width: 95%;
height: 95%;
}
.pgallery-all-button-main{
width: 100%;
padding: 50px 0 0 0;
text-align: center;
}
/* Foto galeri SON ///////////////////////////////////////////*/
/* Tanıtım Video Modülü ///////////////////////////////////////////*/
.intro-video-module-main-div{
width: 100%;
position: relative;
overflow: hidden;
}
.intro-video-module-inside-area{
width: 80%;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
z-index: 9;
position: relative;
}
/* Tanıtım Video Modülü SON ///////////////////////////////////////////*/
/* Pricing Table ///////////////////////////////////////////*/
.pricing-tablolar-module-main-div{
width: 100%;
position: relative;
overflow: hidden;
}
.pricing-tablolar-module-inside-area{
width: 1280px;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
z-index: 9;
position: relative;
}
.ptable-box-main-div{
width: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
}
.ptable-box{
width: 338px;
box-sizing: border-box;
margin: 20px;
border: 1px solid rgba(0,0,0,0.1);
box-shadow: 0 0 15px 0 rgba(0,0,0,0.04);
}
.ptable-box-img{
width: 100%;
height:auto ;
padding: 50px 0 35px 0;
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
position: relative;
z-index: 1;
background-size: cover;
background-position:top center;
}
.ptable-box-price{
width: auto;
z-index: 9;
font-size: 35px ;
margin-top: 20px;
line-height: 20px;
font-weight: bold;
display: inline-block;
}
.ptable-box-price-type{
width: 90%;
margin: 0 auto;
font-size: 13px ;
}
.ptable-header{
width: 80%;
margin: 0 auto;
font-size: 24px ;
letter-spacing: 0.06em;
line-height: 27px;
font-weight: 200;
z-index: 9;
}
.ptable-header-spot{
width: 80%;
margin: 0 auto;
font-size: 14px ;
font-weight: bold;
letter-spacing: 0.3em;
z-index: 9;
}
.ptable-tavsiye-main{
width: 100%;
z-index: 9;
position: absolute;
top:0
}
.ptable-header-tavsiye{
width: auto;
border-radius: 0 0 100px 100px ;
padding: 10px 50px;
font-size: 13px ;
font-weight: bold;
display: inline-block;
line-height: 13px;
}
.ptable-feature-div{
width: 100%;
padding: 14px 10px;
box-sizing: border-box;
font-size: 14px ;
text-align: center;
}
.ptable-button-div{
width: 100%;
padding: 25px 0;
text-align: center;
}
/* Pricing Table SON ///////////////////////////////////////////*/
/* Sık Sorulan Sorular ///////////////////////////////////////////*/
.sss-module-main-div{
width: 100%;
position: relative;
overflow: hidden;
}
.sss-module-inside-area{
width: 70%;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
z-index: 9;
position: relative;
}
.sss-box-main-div{
flex:1;
background-color: #fff;
border: 1px solid #ebebeb;
box-sizing: border-box;
}
.sss-content-img{
max-width:135px;
margin-right: 20px;
margin-bottom: 10px;
}
.sss-content-img img{
width: 100%;
}
.sss-content-txt{
flex:1;
}
/* Sık Sorulan Sorular SON ///////////////////////////////////////////*/
/* Yorumlar ///////////////////////////////////////////*/
.yorumlar-module-main-div{
width: 100%;
position: relative;
}
.yorumlar-module-inside-area{
width: 1280px;
margin: 0 auto;
z-index: 9;
position: relative;
}
.yorumlar-headText-area{
width: 100%;
text-align: center;
margin-bottom: 30px;
}
.yorumlar-left-area-t{
width: 100%;
font-size: 15px ;
margin-bottom: 5px;
}
.yorumlar-left-area-h{
width: 100%;
font-size: 30px ;
font-weight: bold;
line-height: 48px;
letter-spacing: 0.08em;
}
.yorumlar-content-area{
width: 100%;
}
.yorumlar-box-img{
width: 140px;
height: 140px;
margin: 0 auto;
overflow: hidden;
margin-bottom: 20px;
border-radius: 100px;
box-sizing: border-box;
}
.yorumlar-box-img img{
width: 132px;
height: 140px;
}
.yorumlar-text-area{
width: 75%;
margin: 0 auto;
}
.yorumlar-text-p{
width: 100%;
letter-spacing: 0.3em;
font-size: 14px ;
line-height: 16px;
margin-bottom: 10px;
}
.yorumlar-text-h{
width: 100%;
font-size: 28px ;
line-height: 30px;
font-weight: bold;
margin-bottom: 10px;
}
.yorumlar-text-s{
width: 100%;
font-size: 16px ;
margin-bottom: 10px;
}
.yorumlar-text-star{
width: 100%;
height: auto;
font-size: 20px ;
margin-bottom: 50px;
}
/* Yorumlar SON ///////////////////////////////////////////*/
/* Before and After ///////////////////////////////////////////*/
.baf-module-main-div{
width: 100%;
position: relative;
overflow: hidden;
}
.baf-module-inside-area{
width: 70%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: flex-start;
z-index: 9;
position: relative;
flex-direction: column;
}
.baf-image-container{
width: 1000px;
height: 525px;
margin: 0 auto;
background-color: #000;
position: relative;
overflow: hidden;
border: 5px solid #000;
}
/* Before and After SON ///////////////////////////////////////////*/
/* E-Bülten ///////////////////////////////////////////*/
.bultenn-module-main-div{
width: 100%;
position: relative;
overflow: hidden;
}
.bultenn-module-inside-area{
width: 70%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: flex-start;
z-index: 9;
position: relative;
flex-direction: column;
}
.bultenn-box-area{
width: 600px;
margin: 0 auto;
}
.bultenn-box-area form {
display: flex;
align-items: center;
justify-content: center;
}
.bultenn-box-area form input{
font-size: 15px ;
padding: 13px;
box-sizing: border-box;
width: 400px;
}
.bultenn-box-area form input:focus{
outline: none;
}
.bultenn-box-area form button{
font-size: 15px ;
padding: 13px 35px;
box-sizing: border-box;
font-weight: bold;
}
.bultenn-box-area form button:focus{
outline: none;
}
/* E-Bülten SON ///////////////////////////////////////////*/
/* Markalar ///////////////////////////////////////////*/
.marka-module-main-div{
width: 100%;
position: relative;
overflow: hidden;
}
.marka-module-inside-area{
width: 1300px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: flex-start;
z-index: 9;
position: relative;
flex-direction: column;
}
.markadetay-main-div{
width: 100%;
background-color: #fff;
border: 1px solid #EBEBEB;
box-sizing: border-box;
padding: 20px;
}
.markadetay-search{
width: 100%;
padding-bottom: 15px;
margin-bottom: 15px;
border-bottom: 1px solid #ebebeb;
display: flex;
justify-content: flex-end;
}
.markadetay-search form{
box-sizing: border-box;
display: flex;
justify-content: flex-start;
width: 350px;
}
.markadetay-content-boxes{
width: 100%;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
box-sizing: border-box;
}
.markadetay-content-box{
width: 25%;
border-bottom: 1px solid #ebebeb;
box-sizing: border-box;
padding: 15px;
text-align: center;
}
.markadetay-content-box-img{
width: 100%;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ebebeb;
border-radius: 5px;
margin-bottom: 10px;
transition-duration: 0.2s; transition-timing-function: linear;
}
.markadetay-content-box-img img{
max-width: 70%;
max-height: 40px;
}
.markadetay-content-box-text{
width: 100%;
font-size: 16px ;
font-weight: 600;
color: #000;
}
.markadetay-content-box-text:hover{
color: #999;
text-decoration: none;
}
.markadetay-content-box:hover .markadetay-content-box-img{
border: 1px solid orangered;
}
/* Markalar SON ///////////////////////////////////////////*/
/* Footer ///////////////////////////////////////////*/
.footer-shop-card-area{
width: 100%;
text-align: center;
margin-top: 30px;
}
.footer-shop-card-area img{
max-width: 100%;
}
.footer-module-main-div{
width: 100%;
position: relative;
overflow: hidden;
}
.footer-module-inside-area{
width: 1280px;
margin: 0 auto;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
z-index: 9;
position: relative;
}
.footer-module-box{
width: auto;
margin: 0 1%;
}
.footer-module-box-logo{
width: 100%;
margin-bottom: 20px;
}
.footer-module-box-logo img{
max-width: 80%;
}
.footer-module-box-telif{
margin-bottom: 26px;
font-size: 13px ;
line-height: 16px;
}
.footer-module-box-social{
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
}
.footer-module-header-text{
width: 100%;
font-size: 15px ;
line-height: 22px;
font-weight: bold;
margin-bottom: 30px;
}
.footer-module-contact-box{
width: 90%;
font-size: 13px ;
line-height: 16px;
margin-bottom: 20px;
}
.footer-module-workhour-div{
width: 100%;
font-size: 13px ;
line-height: 25px;
}
.footer-module-links-div{
width: 100%;
}
.footer-module-links-div a{
font-size: 13px ;
line-height: 16px;
}
.footer-copyright-div{
width: 100%;
padding: 12px;
box-sizing: border-box;
font-size: 12px ;
color: #666;
background-color: #141414;
font-family : 'Roboto Condensed', Arial ;
text-align: center;
}
.footer-copyright-div a{
color: #e0a43b;
font-weight: bold;
}
.footer-copyright-div a:hover{
color: #e0a43b;
}
.footer-1-area{
width: 410px;
margin-bottom: 40px;
}
.footer-4-area{
width: 185px;
margin-bottom: 50px;
}
/* Footer SON ///////////////////////////////////////////*/
/* Subpage Codes ///////////////////////////////////////////*/
.page-banner-main{
width: 100%;
position: relative;
overflow: hidden;
}
.page-banner-in-text{
width: 1280px;
margin: 0 auto;
z-index: 2;
color: #FFF;
position: relative;
}
.page-banner-h{
width: 100%;
}
.page-banner-links{
width: 100%;
}
.page-banner-links a{
display: inline-block;
margin: 0 8px;
}
.page-banner-links a:first-child{
margin: 0 8px 0 0;
}
/* Subpage Codes SON ///////////////////////////////////////////*/
/* HTML Pages - Sub Content Style ///////////////////////////////////////////*/
.htmlpage-container-main{
width: 1280px;
margin: 0 auto;
padding: 30px 0;
box-sizing: border-box;
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.htmlpage-content-div{
flex:1;
border: 1px solid #EBEBEB;
padding: 20px;
box-sizing: border-box;
background-color: #fff;
}
.htmlpage-content-div img{
max-width: 100%;
height: auto;
}
/* HTML Pages - Sub Content Style SON ///////////////////////////////////////////*/
/* Müşteri Yorumları Sub ///////////////////////////////////////////*/
.musteriyorum-container-main{
width: 1280px;
margin: 0 auto;
}
.musteriyorum-container-main-in{
width: 100%;
margin: 0 auto;
padding: 40px 0;
box-sizing: border-box;
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-left: -20px;
}
.musteri-yorum-boxes{
width: 30.2%;
margin: 1.5%;
border-radius: 10px;
padding: 30px;
box-sizing: border-box;
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: flex-start;
box-shadow: 0 0 15px 0 rgba(0,0,0,0.1);
transition-duration: 0.1s; transition-timing-function: linear;
}
.musteri-yorum-boxes:hover{
-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-ms-transform: scale(1.1);-o-transform: scale(1.1);transform: scale(1.1); cursor: pointer;
}
/* Müşteri Yorumları Sub SON ///////////////////////////////////////////*/
/* sss faq sub ///////////////////////////////////////////*/
.sss-faq-container-main{
width: 1300px;
margin: 0 auto;
margin-top: 40px ;
margin-bottom: 40px ;
box-sizing: border-box;
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
/* sss faq sub SON ///////////////////////////////////////////*/
/* Bloglar sub ///////////////////////////////////////////*/
.bloglar-container-main{
width: 1280px;
margin: 0 auto;
padding: 40px 0;
box-sizing: border-box;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.blog-list-tags-div{
box-sizing: border-box;
width: 1280px;
margin: 0 auto;
padding-top: 30px;
overflow: hidden;
}
.blog-list-value-div{
width: 100%;
margin: 20px 0 0 0;
padding: 0 20px;
}
.blog-list-value-div-h{
width: 100%;
font-size: 32px ;
color: #000;
background-color: #fff;
font-weight: bold;
box-sizing: border-box;
padding: 10px;
margin-top: 25px;
}
.bloglar-detay{
width: 1210px;
margin: 0 auto;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 70px 0;
}
.bloglar-detay-left{
width: 800px;
margin-right: 50px;
}
.bloglar-detay-left-img{
width: 100%;
overflow: hidden;
height: auto;
max-height: 550px;
z-index: 0;
}
.bloglar-detay-left-img img{
width: 100%;
height: auto;
transition-duration: 0.1s; transition-timing-function: linear;
z-index: 0;
}
.bloglar-detay-left-img img:hover{
-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-ms-transform: scale(1.1);-o-transform: scale(1.1);transform: scale(1.1);
}
.bloglar-detay-left-content-div{
width: 90%;
margin: 0 auto;
z-index: 1;
box-shadow: 0 0 15px 0 rgba(0,0,0,0.1);
background: #FFF;
margin-top: -50px;
position: relative;
padding: 40px;
}
.bloglar-detay-left-content-div-date{
width: 100%;
font-size: 14px ;
color: #666;
font-weight: 300;
margin-bottom: 10px;
}
.bloglar-detay-left-content-div-h{
width: 100%;
font-size: 30px ;
font-weight: bold;
color: #000;
margin-bottom: 10px;
line-height: 35px;
}
.bloglar-detay-left-content-div-view{
width: 100%;
font-size: 13px ;
color: #666;
font-weight: 400;
}
.bloglar-detay-left-content-div-icerik{
width: 100%;
margin-top: 30px;
font-size: 16px ;
color: #333;
line-height: 22px;
margin-bottom: 30px;
}
.bloglar-detay-left-content-div-icerik img{
max-width: 100%;
height: auto;
}
.bloglar-detay-left-content-div-tags{
width: 100%;
margin-bottom: 30px;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
}
.bloglar-detay-left-content-div-tags-box{
width: auto;
padding: 5px;
margin : 5px 5px 5px 0;
font-size: 13px ;
color: #000;
border: 1px solid #EBEBEB;
background-color: #fff;
cursor: pointer;
transition-duration: 0.2s; transition-timing-function: linear;
}
.bloglar-detay-left-content-div-tags-box:hover{
border: 1px solid #000;
color: #000;
text-decoration: none;
}
.bloglar-detay-left-content-div-tags-box-big{
width: auto;
padding: 10px;
font-size: 14px ;
font-weight: 600;
color: #000;
border: 1px solid #EBEBEB;
background-color: #fff;
cursor: pointer;
transition-duration: 0.2s; transition-timing-function: linear;
}
.bloglar-detay-left-content-div-tags-box-big:hover{
border: 1px solid #000;
color: #000;
text-decoration: none;
}
.bloglar-detay-left-content-div-social{
width: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.bloglar-detay-left-content-div-social a{
color: #000;
display: block;
margin : 5px 15px 5px 0;
}
.bloglar-detay-left-content-div-social a:hover{
color: #000;
text-decoration: none;
}
.modules-comments-main{
width: 100%;
margin: 35px 0 ;
}
.bloglar-detay-right{
flex:1;
box-sizing: border-box;
padding: 20px;
}
.bloglar-detay-right-h{
width: 100%;
padding-bottom: 10px;
margin-bottom: 25px;
border-bottom: 1px solid #ebebeb;
font-size: 18px ;
font-weight: bold;
color: #000;
}
.bloglar-detay-right-h2{
width: 100%;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #ebebeb;
font-size: 18px ;
font-weight: bold;
color: #000;
}
.bloglar-detay-right-tags{
width: 100%;
border-bottom: 1px solid #EBEBEB;
padding-bottom: 12px;
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
}
.bloglar-detay-right-box{
width: 100%;
border-bottom: 1px solid #EBEBEB;
padding-bottom: 25px;
margin-bottom: 25px;
display: flex;
align-items: center;
justify-content: flex-start;
}
.bloglar-detay-right-box:hover .bloglar-detay-right-box-img img{
-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-ms-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);
}
.bloglar-detay-right-box-no{
width: 30px;
height: 30px;
background-color: #e17f71;
border-bottom: 1px solid #ebebeb;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px ;
color: #FFF;
font-weight: 200;
}
.bloglar-detay-right-box-img{
width: 90px;
height: 90px;
overflow: hidden;
margin-right: 15px;
}
.bloglar-detay-right-box-img img{
min-width: 100%;
max-width: 150%;
min-height: 100%;
max-height: 120%;
transition-duration: 0.1s; transition-timing-function: linear;
}
.bloglar-detay-right-box-h{
flex:1;
font-size: 14px ;
font-weight: bold;
color: #000;
}
.bloglar-detay-right-box-h a{
color: #000;
}
.bloglar-detay-right-box-h a:hover{
color: #000;
}
.swiper-blogtags {
width: 100%;
height: 100%;
}
.swiper-blogtags .swiper-slide {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
/* Bloglar sub SON ///////////////////////////////////////////*/
/* Hizmetler sub ///////////////////////////////////////////*/
.hizmetler-container-main{
width: 1280px;
margin: 0 auto;
margin-top: 30px;
margin-bottom: 30px;
box-sizing: border-box;
display: flex;
justify-content: center;
flex-wrap: wrap;
background-color: #FFF;
border: 1px solid #EBEBEB;
}
.hizmetler-detay{
width: 1280px;
margin: 0 auto;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
margin-top: 30px;
margin-bottom: 30px;
}
.hizmetler-detay-leftmain{
flex:1;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
background-color: #fff;
box-sizing: border-box;
padding: 30px;
border: 1px solid #EBEBEB;
}
.hizmetler-detay-img{
width: 250px;
height: auto;
margin-right: 30px;
overflow:hidden;
box-sizing: border-box;
border: 1px dashed #ccc;
padding: 5px;
}
.hizmetler-detay-img img{
width: 100%;
height: auto;
}
.hizmetler-detay-txt{
flex:1;
}
.hizmetler-detay-txt-uh{
width: 100%;
font-size: 14px ;
font-weight: bold;
line-height: 16px;
margin-bottom: 5px;
color: #000;
}
.hizmetler-detay-txt-h{
width: 100%;
font-size: 30px ;
font-weight: bold;
color: #000;
margin-bottom: 25px;
}
.hizmetler-detay-txt-s{
width: 95%;
font-size: 15px ;
line-height: 23px;
margin-bottom: 25px;
color: #333;
}
.hizmetler-detay-txt-s img{
max-width: 100%;
}
.hizmetler-detay-right{
width: 250px;
height: auto;
margin-left: 30px;
}
.hizmetler-detay-right-box{
width: 100%;
padding: 8px 8px 8px 20px;
box-sizing: border-box;
font-size: 14px ;
font-weight: 400;
margin-bottom: 10px;
transition-duration: 0.1s; transition-timing-function: linear;
}
.hizmetler-detay-right-box-act{
width: 100%;
padding: 8px 8px 8px 20px;
box-sizing: border-box;
font-size: 14px ;
font-weight: 400;
margin-bottom: 10px;
}
/* Hizmetler sub SON ///////////////////////////////////////////*/
/* Pricing sub ///////////////////////////////////////////*/
.tablolar-container-main{
width: 1300px;
margin: 0 auto;
padding:30px 0;
box-sizing: border-box;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
/* Pricing sub SON ///////////////////////////////////////////*/
/* Foto galeri sub ///////////////////////////////////////////*/
.fotogaleri-container-main{
width: 100%;
}
.fotogaleri-container-main-in{
width: 1280px;
margin: 0 auto;
padding: 30px 20px;
background-color: #fff;
border: 1px solid #EBEBEB;
margin-top: 30px;
margin-bottom: 30px;
display: flex;
justify-content: center;
box-sizing: border-box;
flex-wrap: wrap;
}
.pgDetail_box{
width: 23%;
margin-left: 1%;
margin-right: 1%;
box-sizing: border-box;
border: 1px solid #ebebeb;
padding: 15px;
border-radius: 5px;
}
.pgDetail_box:hover .pgDetail_box_img img{
-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-ms-transform: scale(1.1);-o-transform: scale(1.1);transform: scale(1.1);
filter: blur(2px);
}
.pgDetail_box_img{
width: 100%;
height: 180px;
margin-bottom: 15px;
background-color: #ccc;
overflow: hidden;
border-radius: 5px;
}
.pgDetail_box_img img{
min-width: 100%;
max-width: 110%;
transition-duration: 0.2s; transition-timing-function: linear;
min-height: 180px;
}
.pgDetail_box_h{
font-size: 14px ;
font-weight: 600;
color: #000;
display: flex;
align-items: center;
justify-content: flex-start;
transition-duration: 0.2s; transition-timing-function: linear;
}
.pgDetail_box_h i{
font-size: 28px ;
margin-right: 5px;
}
.pgDetail_box_h:hover{
color: #000;
}
.fotogaleri_detay{
width: 100%;
margin: 0 auto;
background-color: #fff;
overflow: hidden;
}
.masonry {
padding: 0;
-moz-column-gap: 1.5em;
-webkit-column-gap: 1.5em;
font-size: .85em;
column-count: 3;
column-gap: 1em;
}
.photo_gallery_mas_img {
display: inline-block;
background: #fff;
margin: 0 0 1.5em;
width: 100%;
-webkit-transition:1s ease all;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.photo_gallery_mas_img:hover{
box-shadow: 0 0 15px 0 rgba(0,0,0,0.5);
}
.photo_gallery_mas_img img{max-width:100%;}
/* Foto galeri sub SON ///////////////////////////////////////////*/
/* Ä°letiÅŸim sub ///////////////////////////////////////////*/
.iletisim-container-main{
width: 1280px;
box-sizing: border-box;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 20px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.iletisim-container-maps{
width: 100%;
height: 300px;
box-sizing: border-box;
overflow: hidden;
}
.iletisim-container-maps iframe{
width: 100%;
height:300px;
}
.iletisim-container-in{
flex:1;
border: 1px solid #EBEBEB;
background-color: #fff;
}
.alt_sayfa_flex_1{
flex:1;
}
.iletisim-container-in-top{
justify-content: center;
flex-wrap: wrap;
position: relative;
overflow: hidden;
padding: 20px;
box-sizing: border-box;
}
.iletisim-container-in-top iframe{
width: 100%;
height: 220px;
}
.iletisim-container-in-top input, textarea{
border-radius: 0 !important;
font-size: 14px !important ;
}
.iletisim-container-in-top-box{
border: 1px solid #EBEBEB;
text-align: center;
box-sizing: border-box;
padding:15px 10px;
}
.iletisim-container-in-top-box-social-flex{
display: flex;
align-items: center;
justify-content: center;
}
.iletisim-container-in-top-box-social{
font-size: 22px;
color: #000;
display: block;
padding: 0 5px;
margin:0 5px;
border-radius: 4px;
width: 40px;
transition-duration: 0.2s; transition-timing-function: linear;
}
.iletisim-container-in-top-box-social:hover{
background-color: #000;
color: #fff;
}
.iletisim-container-in-top-box-i {
font-size: 50px ;
border: 0;
height: 60px;
line-height: 60px;
margin-bottom: 8px;
color: #212121;
}
.iletisim-container-in-top-box-h{
width: 100%;
font-size: 15px ;
font-weight: 600;
}
.iletisim-container-in-top-box-s{
width: 100%;
font-size: 14px ;
margin-top: 5px;
margin-bottom: 15px;
}
.iletisim-container-in-top-box-s a{
color: #000;
}
.iletisim-container-in-top-box-s a:hover{
color: #000;
}
/* Ä°letiÅŸim sub SON ///////////////////////////////////////////*/
/* alt sayfa navigasyon */
.subpage_navigation{
width: 220px ;
box-sizing: border-box;
margin-right: 15px;
}
.subpage_navigation-box{
width: 100% ;
border: 1px solid #EBEBEB;
background-color: #fff;
box-sizing: border-box;
padding: 15px 13px 7px 13px;
margin-bottom: 20px;
}
.subpage_navigation_header{
width: 100%;
display: block;
font-size: 14px ;
font-weight: 600;
color: #000;
padding-bottom: 8px;
margin-bottom: 8px;
border-bottom: 1px solid #EBEBEB;
}
.subpage_navigation_header:hover{
color: #000;
}
.subpage_navigation_a{
color: #000;
font-size: 13px ;
font-weight: 400;
display: block;
margin-bottom: 6px;
}
.subpage_navigation_a:hover{
color: tomato;
text-decoration: none;
}
/* <========SON=========>>> alt sayfa navigasyon SON */
/* Video galeri Sub ///////////////////////////////////////////*/
/* Video detail accordion */
.video-detail-container-main-accordion{
width: 100%;
}
.video-detail-container-main-accordion img{
max-width: 100%;
height: auto;
}
.video-detail-container-main-accordion p{
margin-bottom: 0;
}
.video-detail-container-main-accordion label {
color: #333;
cursor: pointer;
border-bottom: 1px solid #EBEBEB;
font-size: 16px ;
font-weight: 600;
padding: 10px 0;
display: flex;
justify-content: flex-start;
align-items: center;
}
.video-detail-container-main-accordion label i{
margin-left: 10px;
}
.video-detail-container-main-accordion div {
opacity: 0;
display: none;
text-align: left;
}
#tm:checked ~ .hiddentext {
display: block;
opacity: 1;
font-size: 14px ;
color: #666;
}
.video-detail-container-main-tag{
border: 1px dashed #ebebeb;
color: #000;
background-color: #f8f8f8;
font-size: 12px ;
padding: 5px;
}
input#tm {
display: none;
position: relative;
}
#tn:checked ~ .hiddentext {
display: block;
opacity: 1;
}
input#tn {
display: none;
position: relative;
}
#to:checked ~ .hiddentext {
display: block;
opacity: 1;
}
input#to {
display: none;
position: relative;
}
.arrow{
color: #666666;
}
.videolar-container-flex{
display: flex;
box-sizing: border-box;
align-items: flex-start;
justify-content: flex-start;
width: 1280px;
margin: 0 auto;
margin-top: 30px;
margin-bottom: 30px;
}
.videolar-container-main{
flex:1;
box-sizing: border-box;
display: flex;
justify-content: center;
flex-wrap: wrap;
background-color: #fff;
border: 1px solid #EBEBEB;
}
.video-detail-container-main{
flex:1;
box-sizing: border-box;
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 20px;
background-color: #fff;
border: 1px solid #EBEBEB;
}
.video-detail-container-main-h{
width: 100%;
border-bottom: 1px solid #ebebeb;
font-size: 20px ;
font-weight:600;
color: #000;
margin-bottom: 15px;
}
.video-detail-container-main-iframe{
width: 100%;
}
.video-detail-container-main-iframe iframe{
width: 100%;
border: 0;
height:500px;
}
.videolar-sub-box{
width: 30%;
margin: 2% 1.5% 2% 1.5%;
text-align: center;
}
.videolar-sub-box-img{
width: 100%;
height: 200px;
overflow: hidden;
position: relative;
}
.videolar-sub-box-img img{
min-height: 200px;
max-height: 215px;
min-width: 100%;
max-width: 110%;
transition-duration: 0.1s; transition-timing-function: linear;
}
.videolar-sub-box-h{
width: 100%;
font-size: 16px ;
font-weight: bold;
padding: 10px 0;
}
.videolar-sub-box-h a{
color: #000;
}
.videolar-sub-box-h a:hover{
color: #000;
}
.videolar-sub-box-img-overlay{
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
opacity: 0;
z-index: 1;
transition-duration: 0.1s; transition-timing-function: linear;
display: flex;
align-items: center;
justify-content: center;
}
.videolar-sub-box-img-overlay a{
color: #FFF;
}
.videolar-sub-box-img-overlay a:hover{
color: #FFF;
}
.videolar-sub-box-img-overlay-i{
width: auto;
height: auto;
background-color: #000;
margin-top: -500px;
opacity: 0;
transition-duration: 0.1s; transition-timing-function: linear;
font-size: 20px;
line-height: 20px;
padding: 20px;
color: #FFF;
}
.videolar-sub-box-img-overlay-i-2{
width: auto;
height: auto;
background-color: #FFF;
margin-top: -500px;
opacity: 0;
transition-duration: 0.2s; transition-timing-function: linear;
font-size: 20px;
line-height: 20px;
padding: 20px;
color: #000;
}
.videolar-sub-box:hover .videolar-sub-box-img img{
-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-ms-transform: scale(1.1);-o-transform: scale(1.1);transform: scale(1.1);
filter: blur(2px);
}
.videolar-sub-box:hover .videolar-sub-box-img-overlay{
opacity: 1;
}
.videolar-sub-box:hover .videolar-sub-box-img-overlay-i{
opacity: 1;
margin-top: 0;
}
.videolar-sub-box:hover .videolar-sub-box-img-overlay-i-2{
opacity: 1;
margin-top: 0;
}
.videolar-detay-main{
width: 900px;
padding: 70px 0;
margin: 0 auto;
font-family : 'Poppins',sans-serif ;
}
.videolar-detay-main-video{
width: 100%;
margin: 0 auto;
margin-bottom: 25px;
}
.videolar-detay-main-video iframe{
width: 100%;
height: 480px;
}
.videolar-detay-main-h{
width: 100%;
text-align: center;
font-size: 22px;
font-weight: bold;
color: #000;
margin-bottom: 25px;
}
.videolar-detay-main-s{
width: 100%;
text-align: center;
font-size: 16px;
line-height: 22px;
color: #000;
margin-bottom: 25px;
}
/* Video galeri Sub SON ///////////////////////////////////////////*/
/* Modul Başlık ve spot kodları ///////////////////////////////////////////*/
.modules-head-text-main{
width: 98%;
margin: 0 auto;
text-align: center;
margin-bottom: 30px;
}
.modules-head-forbg-text-out{
width: 60%;
margin: 0 auto;
height: 20px;
margin-bottom: 25px;
}
.modules-head-forbg-text{
font-size: 25px ;
display: inline-block;
padding: 0 15px;
font-weight: bold;
}
.modules-head-text-s{
width: 100%;
font-size: 15px ;
line-height: 18px;
margin-bottom: 18px;
}
.modules-head-text-h{
width: 100%;
font-size: 40px ;
line-height: 45px;
margin-bottom:25px ;
}
.ebulten-modulhead{
width: 900px;
margin: 0 auto;
font-size: 25px ;
}
.modules-head-text-ss{
width: 100%;
font-size: 16px ;
line-height: 20px;
letter-spacing: 0.09em;
}
.modules-head-divider{
width: 130px;
height: 3px;
margin: 0 auto;
}
.modules-head-text-main-2{
width: 950px;
text-align: left;
margin-bottom: 50px;
}
.modules-head-text-s-2{
width: 100%;
font-size: 15px ;
line-height: 18px;
margin-bottom: 18px;
}
.modules-head-text-h-2{
width: 100%;
font-size: 40px ;
line-height: 45px;
margin-bottom:25px ;
}
.modules-head-divider-2{
width: 130px;
height: 4px;
}
/* Modul Başlık ve spot kodları SON ///////////////////////////////////////////*/
/* Buttons Pack ///////////////////////////////////////////*/
.button-yellow{
width: auto;
display: inline-block;
background-color: #e0a800;
border: 2px solid #e0a800;
font-weight: bold;
color: #000;
transition-duration: 0.2s; transition-timing-function: linear;
}
.button-yellow:hover{
background-color: #cb9700;
text-decoration: none;
color: #000;
}
.button-yellow-out{
width: auto;
display: inline-block;
border: 1px solid #e0a800;
font-weight: bold;
color: #e0a800;
transition-duration: 0.2s; transition-timing-function: linear;
background:none;
}
.button-yellow-out:hover{
background-color: #e0a800;
color: #000;
text-decoration: none;
}
.button-black{
width: auto;
display: inline-block;
background-color: #000;
border: 1px solid #000;
font-weight: bold;
color: #FFF;
transition-duration: 0.2s; transition-timing-function: linear;
}
.button-black:hover{
background-color: #1f1f1f;
text-decoration: none;
color: #FFF;
}
.button-black-out{
width: auto;
display: inline-block;
border: 1px solid #000;
font-weight: bold;
color: #000;
background: none;
transition-duration: 0.2s; transition-timing-function: linear;
}
.button-black-out:hover{
background-color: #000;
text-decoration: none;
color: #fff;
}
.button-white-out{
width: auto;
display: inline-block;
border: 1px solid #fff;
font-weight: bold;
color: #fff;
background: none;
transition-duration: 0.2s; transition-timing-function: linear;
}
.button-white-out:hover{
background-color: #fff;
text-decoration: none;
color: #000;
}
.button-white{
width: auto;
display: inline-block;
background-color: #FFF;
border: 1px solid #FFF;
font-weight: bold;
color: #000;
transition-duration: 0.2s; transition-timing-function: linear;
}
.button-white:hover{
background-color: #EBEBEB;
text-decoration: none;
color: #000;
}
.button-white-black{
width: auto;
display: inline-block;
background-color: #FFF;
border: 2px solid #FFF;
font-weight: bold;
color: #000;
transition-duration: 0.2s; transition-timing-function: linear;
}
.button-white-black:hover{
background-color: #000;
text-decoration: none;
color: #FFF;
border: 2px solid #000;
}
.button-black-white{
width: auto;
display: inline-block;
background-color: #000;
border: 2px solid #000;
font-weight: bold;
color: #FFF;
transition-duration: 0.2s; transition-timing-function: linear;
}
.button-black-white:hover{
background-color: #FFF;
text-decoration: none;
color: #000;
border: 2px solid #FFF;
}
.button-gold-out{
display: inline-block;
border: 1px solid #cfb481;
background: none;
color: #cfb481;
transition-duration: 0.2s; transition-timing-function: linear;
}
.button-gold-out:hover{
color: #000;
text-decoration: none;
background-color: #cfb481;
}
.button-gold{
display: inline-block;
border: 1px solid #cfb481;
background-color:#cfb481;
color: #000;
transition-duration: 0.2s; transition-timing-function: linear;
}
.button-gold:hover{
color: #000;
text-decoration: none;
background-color: #B89D6F;
}
.button-red{
display: inline-block;
border: 1px solid #F94453;
background-color: #f94453;
color: #FFF;
transition-duration: 0.2s; transition-timing-function: linear;
}
.button-red:hover{
color: #FFF;
text-decoration: none;
background-color: #dd4150;
}
.button-red-out{
width: auto;
display: inline-block;
border: 1px solid #F94453;
font-weight: bold;
color: #F94453;
background: none;
transition-duration: 0.2s; transition-timing-function: linear;
}
.button-red-out:hover{
background-color: #F94453;
text-decoration: none;
color: #FFF;
}
.button-green{
display: inline-block;
border: 1px solid #2fba47;
background-color: #2fba47;
color: #FFF;
transition-duration: 0.2s; transition-timing-function: linear;
}
.button-green:hover{
color: #FFF;
text-decoration: none;
background-color: #279c3d;
}
.button-green-out{
width: auto;
display: inline-block;
border: 1px solid #279c3d;
font-weight: bold;
color: #279c3d;
background: none;
transition-duration: 0.2s; transition-timing-function: linear;
}
.button-green-out:hover{
background-color: #279c3d;
text-decoration: none;
color: #FFF;
}
.button-blue{
display: inline-block;
border: 1px solid #558cff;
background-color: #558cff;
color: #FFF;
transition-duration: 0.2s; transition-timing-function: linear;
}
.button-blue:hover{
color: #FFF;
text-decoration: none;
background-color: #456fcd;
}
.button-blue-out{
width: auto;
display: inline-block;
border: 1px solid #558cff !important;
font-weight: bold;
color: #558cff;
background: none;
transition-duration: 0.2s; transition-timing-function: linear;
}
.button-blue-out:hover{
background-color: #558cff;
text-decoration: none;
color: #FFF;
}
.button-grey{
width: auto;
display: inline-block;
background-color: #989898;
border: 1px solid #989898;
font-weight: bold;
color: #FFF;
transition-duration: 0.2s; transition-timing-function: linear;
}
.button-grey:hover{
background-color: #848484;
border: 1px solid #848484;
text-decoration: none;
color: #FFF;
}
.button-grey-out{
width: auto;
display: inline-block;
border: 1px solid #ccc;
font-weight: bold;
color: #333;
transition-duration: 0.2s; transition-timing-function: linear;
}
.button-grey-out:hover{
border: 1px solid #ccc;
background-color: #f8f8f8;
text-decoration: none;
color: #333;
}
.button-pink{
width: auto;
display: inline-block;
background-color: #f7acaa;
border: 1px solid #e09a98;
font-weight: 500;
color: #FFF;
transition-duration: 0.2s; transition-timing-function: linear;
}
.button-pink:hover{
background-color: #e09a98;
border: 1px solid #e09a98;
text-decoration: none;
color: #FFF;
}
.button-orange{
width: auto;
display: inline-block;
background-color: #f96e51;
border: 1px solid #f96e51;
font-weight: 500;
color: #FFF;
transition-duration: 0.2s; transition-timing-function: linear;
}
.button-orange:hover{
background-color: #f96e51;
border: 1px solid #f96e51;
text-decoration: none;
color: #FFF;
}
.button-orange-out{
width: auto;
display: inline-block;
border: 1px solid #f96e51;
font-weight: bold;
color: #f96e51;
transition-duration: 0.2s; transition-timing-function: linear;
}
.button-orange-out:hover{
border: 1px solid #f96e51;
background-color: #f96e51;
text-decoration: none;
color: #fff;
}
.button-1x{
font-size: 13px ;
padding: 4px 10px;
font-weight: normal !important;
}
.button-2x{
font-size: 14px ;
font-weight: normal !important;
padding: 10px 25px;
}
.button-3x{
font-size: 16px ;
padding: 15px 25px;
font-weight: bold !important;
}
.button-4x{
font-size: 18px ;
padding: 15px 25px;
}
.button-5x{
font-size: 22px ;
padding: 11px 40px;
font-weight: 200;
}
/* Buttons Pack SON ///////////////////////////////////////////*/
/* To Top ///////////////////////////////////////////*/
#return-to-top {
position: fixed;
right: 20px;
width: 50px;
height: 50px;
display: block;
text-decoration: none;
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-radius: 35px;
display: none;
z-index: 99;
}
#return-to-top i {
margin: 0;
position: relative;
left: 16px;
top: 13px;
font-size: 19px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#return-to-top:hover {
}
#return-to-top:hover i {
top: 5px;
}
/* To Top SON ///////////////////////////////////////////*/
.lspac{
letter-spacing: 0.5em;
}
.lspacsmall{
letter-spacing: 0.2em;
}
.lspacsmall_2{
letter-spacing: 0.1em;
}
/* Before After ///////////////////////////////////////////*/
#baf_baf{
width: 100%;
height: 100%;
position: relative;
margin:0 auto;
box-sizing: border-box;
}
/* Our normalize css */
*{
margin:0;
box-sizing: border-box;
}
/* Our wrapper */
.wrapper{
width:100%;
height: 100%;
position: absolute;
left:50%;
top:50%;
transform:translate3d(-50%,-50%,0);
overflow:hidden;
}
/* Our image information */
.before,
.after {
width:100%;
height:100%;
background-repeat:no-repeat;
background-color: #000;
background-size: cover;
background-position: center;
position: absolute;
top:0;
left:0;
pointer-events:none;
overflow: hidden;
}
.content-image{
height:100%;
}
.after{
width:125px;
}
.scroller{
width: 50px;
height:50px;
position: absolute;
left:100px;
top:50%;
transform:translateY(-50%);
border-radius:50%;
background-color: transparent;
opacity:0.9;
pointer-events:auto;
cursor: pointer;
border: 5px solid;
border-color: rgba(0, 0, 0, 0.6);
background-clip: padding-box;
}
.scroller:hover{
opacity:1;
}
.scrolling{
pointer-events:none;
opacity:1;
// z-index: 1;
}
.scroller__thumb{
width:100%;
height:100%;
padding:5px;
box-sizing: border-box;
}
.scroller:before,
.scroller:after{
content:" ";
display: block;
width: 3px;
height: 9999px;
position: absolute;
left: 50%;
margin-left: -3.5px;
z-index: 30;
transition:0.1s;
}
.scroller:before{
top:100%;
}
.scroller:after{
bottom:100%;
}
/* If you want to cahnge the colors, make sure you change the fill in the svgs to match */
.scroller{
background-color: #000;
}
.scroller:before,
.scroller:after{
background: #000;
}
/* Before After SON ///////////////////////////////////////////*/
/* Alttan Çizgili Link Yapısı ///////////////////////////////////////////*/
.right-underline{
display: inline-block;
position: relative;
text-decoration: none;
}
.right-underline:hover{
text-decoration: none;
}
.right-underline::after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
border-radius: 5px;
height: 0.1em;
bottom: 0;
left: 0;
background: currentcolor;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.right-underline:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
/* Alttan Çizgili Link Yapısı SON ///////////////////////////////////////////*/
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
border-color: rgba(0, 0, 0, 0.5) !important ;
background-clip: padding-box;
border: 1px solid ;
box-shadow: none !important;
outline: 0 none;
}
/* Sabit Header ///////////////////////////////////////////*/
.fixed-header-container{
width: 90%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.fixed-header-container-logo{
width: auto;
}
.fixed-header-container-logo img{
max-width: 222px;
max-height: 90px;
}
.fixed-header-container-menu{
width: auto;
text-align: right;
}
.fixed-header-container-mobile{
display: none;
}
/* Sabit Header SON ///////////////////////////////////////////*/
/* Menu bar ///////////////////////////////////////////*/
.menu-icon-toggle {
display: block;
width: 30px;
height: 30px;
position: relative;
z-index: 9;
}
.home .menu-icon-toggle {
top: 50px;
position: absolute;
right: 20px;
top: 20px;
}
.menu-icon-toggle span {
display: block;
width: 100%;
height: 2px;
position: absolute;
top: 50%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
-webkit-transition: opacity 0.3s 0.3s;
transition: opacity 0.3s 0.3s;
}
.menu-icon-toggle::before, .menu-icon-toggle::after {
content: '';
display: block;
width: 100%;
height: 2px;
position: absolute;
-webkit-transition: top 0.3s 0.3s, bottom 0.3s 0.3s, -webkit-transform 0.3s;
transition: top 0.3s 0.3s, bottom 0.3s 0.3s, -webkit-transform 0.3s;
transition: transform 0.3s, top 0.3s 0.3s, bottom 0.3s 0.3s;
transition: transform 0.3s, top 0.3s 0.3s, bottom 0.3s 0.3s, -webkit-transform 0.3s;
}
.menu-icon-toggle::before {
top: 6px;
}
.menu-icon-toggle::after {
bottom: 6px;
}
.open .menu-icon-toggle span {
opacity: 0;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.open .menu-icon-toggle::before {
top: calc(50% - 1px);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.open .menu-icon-toggle::after {
bottom: calc(50% - 1px);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.open .menu-icon-toggle::before, .open .menu-icon-toggle::after {
-webkit-transition: top 0.3s, bottom 0.3s, -webkit-transform 0.3s 0.3s;
transition: top 0.3s, bottom 0.3s, -webkit-transform 0.3s 0.3s;
transition: top 0.3s, bottom 0.3s, transform 0.3s 0.3s;
transition: top 0.3s, bottom 0.3s, transform 0.3s 0.3s, -webkit-transform 0.3s 0.3s;
}
.opening-mobile-menu-div {
text-align: center;
display: none;
border-top:1px solid #EBEBEB;
background-color: #FFF;
width: 100%;
}
/* Menu bar SON ///////////////////////////////////////////*/
/* ------ ACCORDION MOBILE MENU STYLE -------------- */
.ladder {
background-color: #FFF;
text-align: left;
}
.ladder ul {
margin: 0;
padding: 0;
overflow: scroll;
}
.ladder ul li {
background: #FFF;
font-size: 14px ;
font-weight: 600;
}
.ladder ul ul li {
height: auto;
padding: 0;
transition: 3s ease-in;
background-color: #FFF;
font-weight: 400;
}
.ladder ul .collapse li {
height: 0;
max-height: 0;
}
.ladder li {
list-style-type: none;
padding: 0;
height: auto;
}
.ladder a {
text-decoration: none;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
font-family : 'Poppins',sans-serif ;
border-bottom:1px solid #EBEBEB;
padding: 16px 20px;
color: #000;
}
.ladder a i{
margin-left: auto;
}
.ladder a:link, .ladder a:visited {
color: #000;
}
.ladder a:hover {
text-decoration: none;
color: #000;
background-color: #F8F8F8;
}
.ladder_ustu{
width: 100%;
border-bottom: 1px solid #EBEBEB;
background-color: #000;
display: flex;
align-items: center;
justify-content: space-between;
font-family : 'Poppins',sans-serif ;
padding: 0 10px;
}
.ladder_ustu_box{
margin: 10px;
font-size: 15px ;
color: #000;
display: flex;
align-items: center;
}
/* ------ ACCORDION MOBILE MENU STYLE -------------- */
.footer-fixed-contact{
display: none;
}
.just_mobile_area{
display: none;
}
/* Modüller için Yorumlar Stili ///////////////////////////////////////////*/
.module_comment_add_main{
width: 100%;
box-sizing: border-box;
margin-bottom: 25px;
margin-top: 40px;
}
.module_comment_head{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
border-top: 1px solid #EBEBEB;
border-bottom: 1px solid #EBEBEB;
margin-bottom: 20px;
box-sizing: border-box;
padding: 10px 0;
}
.module_comment_head_left{
flex:1;
font-size: 18px;
font-weight: bold;
color: #000;
}
.module_comment_head_right{
width: auto;
margin-left: auto;
font-size: 13px;
font-weight: normal;
color: #000;
}
.module_comment_head_right a{
color: #000;
}
.module_comment_head_right a:hover{
color: #666;
}
.module_comment_form_area{
width: 100%;
font-size: 13px ;
}
.module_comment_box_main{
width: 100%;
box-sizing: border-box;
border-bottom: 1px solid #EBEBEB;
padding: 15px 0 15px 0;
}
.module_comment_in_box_div{
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
}
.comments_reply_div{
width: 100%;
box-sizing: border-box;
margin-left: 65px;
padding: 20px 0;
}
.module_comment_box_img{
width: 52px;
height: 52px;
margin-right: 20px;
}
.module_comment_box_img img{
width: 50px;
height: 50px;
}
.module_comment_box_right{
flex:1;
}
.module_comment_box_head_area{
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 7px;
padding-bottom: 7px;
border-bottom: 1px dashed #EBEBEB;
}
.module_comment_box_name{
width:auto ;
font-size: 14px ;
font-weight: bold;
color: #000;
}
.module_comment_box_date{
width:auto ;
margin-left: auto;
font-size: 11px ;
color: #929292;
}
.module_comment_box_content{
width:100%;
font-size: 13px ;
color: #000;
}
.module_all_comments_main_div{
width: 100%;
}
.all_comments_main{
width: 800px;
margin: 0 auto;
margin-top: 30px;
}
.comments_module_info_div{
width: 600px;
border: 1px solid #ebebeb;
padding: 20px;
margin: 0 auto;
margin-top: 25px;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
}
.comments_module_info_div_img{
border: 1px solid #EBEBEB;
margin-right: 25px;
}
.comments_module_info_div_img img{
width: 100px;
margin: 5px;
height: auto;
}
.comments_module_info_div_txt{
flex: 1;
}
.comments_module_info_div_txt_t{
font-size: 18px ;
font-weight: bold;
margin-bottom: 10px;
line-height: 22px;
}
.comments_module_info_div_txt_d{
font-size: 14px ;
line-height: 14px;
}
.comments_module_info_div_txt_d a{
color: tomato;
}
.comments_module_info_div_txt_d a:hover{
color: orange;
}
/* Modüller için Yorumlar Stili SON ///////////////////////////////////////////*/
/* header Sepet ///////////////////////////////////////////*/
.head-sepet-t{
width: 100%;
font-size: 15px ;
color: #000;
margin-bottom: 10px;
font-weight: bold;
}
.head-sepet-spot{
width: 100%;
font-size: 13px ;
color: #000;
padding: 5px;
text-align: center;
letter-spacing: 0.1em;
box-sizing: border-box;
background-color: #f8f8f8;
}
.head-sepet-box{
width: 100%;
box-sizing: border-box;
display: flex;
align-items: flex-start;
justify-content: flex-start;
border-bottom: 1px solid #EBEBEB;
padding-bottom: 10px;
margin-bottom: 10px;
}
.head-sepet-box-img{
width: 50px;
height: 50px;
margin-right: 8px;
border: 1px solid #ebebeb;
overflow: hidden;
}
.head-sepet-box-img img{
min-width: 50px;
max-width: 100px;
height: 50px;
}
.head-sepet-box-text{
flex:1;
}
.head-sepet-box-h{
font-size: 13px ;
color: #000;
font-weight: bold;
line-height: 14px;
margin-bottom: 5px;
}
.head-sepet-box-adet{
font-size: 12px ;
color: #000;
line-height: 14px;
}
/* header Sepet SON ///////////////////////////////////////////*/
/* Header Arama Kutu Alanı ///////////////////////////////////////////*/
.head-search-overlay{
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.8);
}
.header-search-trigger {
position: absolute;
top: 45%;
left: 45%;
}
/* Search head-search-overlay */
.search-tip2-overlay #search-tip2-wrapper #search-tip2-inside input[type=submit] {
position: absolute;
width: 100px;
height: 100%;
background-color: transparent;
border: 0;
right: 0;
top: 0;
}
#search-tip2-inside:focus{
outline: none;
border: none;
}
.search-tip2-overlay #search-tip2-wrapper #search-tip2-inside .fullscreen-search-icon {
font-size: 25px;
position: absolute;
right: 15px;
width: 25px;
top: 30px;
color: #fff;
color: rgba(255, 255, 255, .2);
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}
.fullscreen-search-icon:hover,
.fullscreen-search-icon:focus{
border: none !important;
outline: none !important;
color: #fff !important;
-webkit-transition: transform ease-out .2s;
-moz-transition: transform ease-out .2s;
-ms-transition: transform ease-out .2s;
-o-transition: transform ease-out .2s;
transition: transform ease-out .2s;
transform: rotate(180deg);
}
#search-tip2-inside {
position: relative;
}
.search-tip2-overlay #search-tip2-wrapper #search-tip2-inside #mk-fullscreen-search-input {
width: 800px;
background-color: transparent;
-webkit-box-shadow: 0 3px 0 0 rgba(255, 255, 255, .1);
-moz-box-shadow: 0 3px 0 0 rgba(255, 255, 255, .1);
box-shadow: 0 3px 0 0 rgba(255, 255, 255, .1);
border: 0;
text-align: center;
font-size: 35px;
padding: 20px;
color: #fff;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.search-tip2-overlay #search-tip2-wrapper #search-tip2-inside #mk-fullscreen-search-input:focus{
border: none;
outline: none;
}
.search-tip2-overlay.search-tip2-overlay-show {
visibility: visible;
opacity: 1;
}
.search-tip2-overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
background-color: rgba(0, 0, 0, .94);
text-align: center;
-webkit-transition: all ease-in-out .25s;
-moz-transition: all ease-in-out .25s;
-ms-transition: all ease-in-out .25s;
-o-transition: all ease-in-out .25s;
transition: all ease-in-out .25s;
}
.mk-animate-element,
.mk-effect-bg-layer,
.search-tip2-overlay {
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.search-tip2-overlay {
z-index: 999;
}
.search-tip2-overlay .mk-fullscreen-close:link,
.search-tip2-overlay .mk-fullscreen-close:visited {
color: #fff;
}
.search-tip2-overlay .mk-fullscreen-close {
position: absolute;
right: 50px;
top: 70px;
z-index: 999999999;
font-size: 26px;
-webkit-transition: transform ease-out .2s;
-moz-transition: transform ease-out .2s;
-ms-transition: transform ease-out .2s;
-o-transition: transform ease-out .2s;
transition: transform ease-out .2s;
transform: rotate(0deg);
}
.search-tip2-overlay.search-tip2-overlay-show #search-tip2-wrapper {
opacity: 1;
visibility: visible;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
ms-transform: scale(1);
}
.search-tip2-overlay #search-tip2-wrapper {
display: inline-block;
max-width: 1000px;
vertical-align: middle;
text-align: center;
font-size: 18px;
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
ms-transform: scale(0.9);
opacity: 0;
visibility: hidden;
-webkit-transition: all ease-in-out .3s;
-moz-transition: all ease-in-out .3s;
-ms-transition: all ease-in-out .3s;
-o-transition: all ease-in-out .3s;
transition: all ease-in-out .3s;
}
.header-search-trigger {
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
transition: color .2s ease-in-out
}
/* Search Button */
#mk-fullscreen-search-input:focus{
box-shadow: 0px 3px 0px 0px rgba(255,255,255,0.54) !important;
}
/* Header Arama Kutu Alanı SON ///////////////////////////////////////////*/
/* Ürünler ///////////////////////////////////////////*/
.urunler-module-main-div{
width: 100%;
position: relative;
overflow: hidden;
}
.urunler-module-inside-area{
width: 1280px;
margin: 0 auto;
display: flex;
align-items:center;
justify-content: center;
flex-wrap: wrap;
z-index: 9;
position: relative;
}
.urun-kutulari-main{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.urunler-box{
width: 23%;
margin: 35px 1%;
padding: 15px;
overflow: hidden;
box-sizing: border-box;
transition-duration: 0.2s; transition-timing-function: linear;
position: relative;
}
.urunler-box-top-text{
position: absolute;
z-index: 9;
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px;
width: 90%;
}
.urunler-box-bottom-text{
position: absolute;
z-index: 9;
bottom: 0;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 7px;
width: 100%;
}
.urunler-box:hover{
box-shadow: 0 0 15px 0 rgba(0,0,0,0.1);
}
.urunler-box:hover .urunler-box-img img{
-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-ms-transform: scale(1.1);-o-transform: scale(1.1);transform: scale(1.1);
}
.urunler-box-img{
width: 100%;
height: 330px;
margin-bottom: 25px;
overflow: hidden;
transition-duration: 0.1s; transition-timing-function: linear;
position: relative;
}
.urunler-box-img img{
min-width: 100%;
max-width: 130%;
height: 330px;
transition-duration: 0.1s; transition-timing-function: linear;
}
.urunler-box-h{
width: 90%;
margin: 0 auto;
padding: 10px 0;
font-size: 16px ;
line-height: 20px;
font-weight: 400;
}
.urunler-star-area{
width: 90%;
margin: 0 auto;
font-size: 20px ;
margin-bottom: 10px;
}
.urunler-price-area{
width: 90%;
margin: 0 auto;
font-size: 19px ;
font-weight: bold;
}
/* Ürünler SON ///////////////////////////////////////////*/
/* Ürünler Tab tabs ///////////////////////////////////////////*/
.home-product-tabs {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.home-product-tablinks {
background: transparent;
border: none;
outline: none;
cursor: pointer;
position: relative;
transition: 0.3s ease;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.home-product-tablinks.active::after{
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 6px 8px 0 8px;
position: absolute;
bottom:-6px;
}
.home-product-tablinks p{
padding: 10px 20px;
margin: 0;
}
.home-product-tablinks.active p,
.home-product-tablinks.active:hover p {
padding: 10px 20px;
margin: 0;
}
.wrapper_tabcontent {
margin-top:30px;
z-index: 1;
position: relative;
opacity: 1;
transition: all 1s ease;
top: 0;
width: 100%;
}
.home-product-tabcontent {
display: none;
}
.home-product-tabcontent.active {
transition: all 1s ease;
display: block;
}
.home-product-tabs-wrapper{
width: 100%;
}
.home-product-tabcontent {
margin: 0;
padding: 0;
transition: all 1s ease;
animation: fadeEffect 0.5s ease;
width: 100%;
}
.home-product-tabcontent-in{
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
@keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Ürünler Tab tabs SON ///////////////////////////////////////////*/
/* Fırsatlar Vitrini */
.firsatlar-urun-module-main-div{
width: 100%;
position: relative;
overflow: hidden;
}
.firsatlar-urun-module-inside-area{
width: 1280px;
margin: 0 auto;
display: flex;
align-items:center;
justify-content: center;
flex-wrap: wrap;
z-index: 9;
position: relative;
}
.firsatlar-urun-module-product-area{
width: 100%;
position: relative;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.firsat-countdown-area{
width: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
margin-bottom: 15px;
}
.countdowns{
text-transform: uppercase;
display: flex;
align-items: flex-start;
justify-content: center;
}
.countdowns > div{display: inline-block;}
.countdowns > div > span{display: block; text-align: center;}
.countdown-container{
margin:0 2px;
border-radius: 6px;
background-color: #f8f8f8;
}
.countdown-container .countdown-value{
font-weight: 600; border-radius: 6px;
font-size: 24px;
line-height: 24px;
background: #f8f8f8;
padding:10px 5px 0 5px;
color:#000;
}
.countdown-container .countdown-heading{
font-size: 11px;
margin: 3px;
color: #000;
padding:0 5px 5px 5px;
}
/* <========SON=========>>> Fırsatlar Vitrini SON */
/* Ürün Grupları ///////////////////////////////////////////*/
.group-urun-module-main-div{
width: 100%;
position: relative;
overflow: hidden;
}
.group-urun-module-inside-area{
width: 1280px;
margin: 0 auto;
display: flex;
align-items:center;
justify-content: center;
flex-wrap: wrap;
z-index: 9;
position: relative;
}
.group-product-main-box{
width: 100%;
padding-top: 25px;
margin-bottom: 25px;
display: flex;
box-sizing: border-box;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
}
.group-product-main-box-img{
width: 300px;
overflow: hidden;
margin-right: 35px;
position: relative;
}
.group-product-main-box-img {
position: relative;
}
.group-product-main-box-img::before {
position: absolute;
top: 0;
left: -100%;
z-index: 2;
display: block;
content: '';
width: 50%;
height: 100%;
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
-webkit-transform: skewX(-25deg);
transform: skewX(-25deg);
}
.group-product-main-box-img:hover::before {
-webkit-animation: shine .75s;
animation: shine .9.3s;
}
@-webkit-keyframes shine {
100% {
left: 125%;
}
}
@keyframes shine {
100% {
left: 125%;
}
}
.group-product-main-box-img:hover img{
-webkit-transform: scale(1.05);-moz-transform: scale(1.05);-ms-transform: scale(1.05);-o-transform: scale(1.05);transform: scale(1.05);
filter: blur(2px);
}
.group-product-main-box-img:hover .group-product-main-box-img-line-in{
width: 85%;
height: 89%;
}
.group-product-main-box-img-line{
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items:center;
justify-content: center;
z-index: 9;
}
.group-product-main-box-img-line-in{
width: 90%;
height: 94%;
display: flex;
border: 1px solid rgba(255,255,255,0.4);
transition-duration: 0.1s; transition-timing-function: linear;
}
.group-product-main-box-img-line-in-txt{
margin: 0 auto;
margin-top: auto;
margin-bottom: 25px;
font-size: 24px ;
line-height: 26px;
width: 80%;
font-weight: bold;
}
.group-product-main-box-img img{
min-width: 100%;
max-width: 120%;
transition-duration: 0.2s; transition-timing-function: linear;
}
.group-product-main-box-container{
flex:1;
overflow: hidden;
}
.group-product-main-box-container-header{
width: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
box-sizing: border-box;
padding: 0 10px;
margin-bottom: 25px;
}
.group-product-main-box-container-header-left{
max-width: 60%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
flex-direction: column;
}
.group-product-main-box-container-header-left-i{
font-size: 30px ;
margin-right: 20px;
}
.group-product-main-box-container-header-left-h{
width: 100%;
font-size: 23px ;
font-weight: bold;
margin-bottom: 5px;
}
.group-product-main-box-container-header-left-s{
width: 100%;
font-size: 14px ;
}
.group-product-main-box-container-header-right{
margin-left: auto;
text-align: right;
}
.group-product-main-box-container-boxex{
width: 100%;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.urunler-box-small{
width: 23%;
margin: 35px 1%;
padding: 15px;
overflow: hidden;
box-sizing: border-box;
transition-duration: 0.2s; transition-timing-function: linear;
position: relative;
}
.urunler-box-small-top-text{
position: absolute;
z-index: 9;
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px;
width: 90%;
}
.urunler-box-small-bottom-text{
position: absolute;
z-index: 9;
bottom: 0;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 7px;
width: 100%;
}
.urunler-box-small:hover{
box-shadow: 0 0 15px 0 rgba(0,0,0,0.1);
}
.urunler-box-small:hover .urunler-box-small-img img{
-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-ms-transform: scale(1.1);-o-transform: scale(1.1);transform: scale(1.1);
}
.urunler-box-small-img{
width: 100%;
height: 240px;
margin-bottom: 25px;
overflow: hidden;
transition-duration: 0.1s; transition-timing-function: linear;
position: relative;
}
.urunler-box-small-img img{
min-width: 100%;
max-width: 150%;
min-height: 240px;
max-height: 255px;
transition-duration: 0.1s; transition-timing-function: linear;
}
.urunler-box-small-h{
width: 90%;
margin: 0 auto;
padding: 10px 0;
font-size: 16px ;
line-height: 20px;
font-weight: 400;
}
/* Ürün Grupları SON ///////////////////////////////////////////*/
/* Ticaret Kutuları ///////////////////////////////////////////*/
.ticaret-kutulari-main-div{
width: 100%;
position: relative;
overflow: hidden;
padding: 25px 0;
}
.ticaret-kutulari-inside{
width: 1280px;
margin: 0 auto;
display: flex;
align-items:center;
justify-content: flex-start;
flex-wrap: wrap;
z-index: 9;
position: relative;
}
.ticaret-kutu-box{
width: 25%;
box-sizing: border-box;
padding: 30px 50px;
display: flex;
align-items: center;
justify-content: center;
}
.ticaret-kutu-box:last-child{
border-right: none!important;
}
.ticaret-kutu-box-i{
font-size: 45px ;
margin-right: 22px;
}
.ticaret-kutu-box-text{
flex:1;
}
.ticaret-kutu-box-text-h{
font-size: 13px ;
font-weight: 400;
line-height: 13px;
margin-bottom: 5px;
}
.ticaret-kutu-box-text-s{
font-size: 14px ;
font-weight: 600;
line-height: 18px;
}
/* Ticaret Kutuları SON ///////////////////////////////////////////*/
/* Anasayfa Ürün Kategorileri ///////////////////////////////////////////*/
.product-categories-main-div{
width: 100%;
position: relative;
overflow: hidden;
}
.product-categories-inside{
width: 1280px;
margin: 0 auto;
z-index: 9;
position: relative;
}
.product-categories-main-div-vitrin2{
width: 100%;
position: relative;
overflow: hidden;
padding: 60px 0;
}
.product-categories-inside-vitrin2{
width: 1300px;
margin: 0 auto;
z-index: 9;
position: relative;
}
.product-categories-inside-vitrin2-boxarea{
width: 100%;
position: relative;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
justify-content: center;
}
.vitrin2-box{
overflow: hidden;
position: relative;
box-sizing: border-box;
}
.vitrin2-box:hover .vitrin2-box-img img{
-webkit-transform: scale(1.05);-moz-transform: scale(1.05);-ms-transform: scale(1.05);-o-transform: scale(1.05);transform: scale(1.05);
}
.vitrin2-box-img{
width: 100%;
overflow: hidden;
position: relative;
}
.vitrin2-box-img img{
min-width: 100%;
max-width: 100%;
z-index: 0 !important;
transition-duration: 0.1s; transition-timing-function: linear;
}
.vitrin2-box-gradient{
width: 100%;
z-index: 9 !important;
position: absolute;
display: flex;
bottom: -5px;
justify-content: flex-end;
min-height: 245px;
padding: 0 30px 40px 30px;
box-sizing: border-box;
flex-direction: column;
}
.vitrin2-box-h{
font-size: 26px ;
font-weight: bold;
}
.vitrin2-box-s{
font-size: 15px ;
}
.product-categories-box-main{
width: 100%;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.product-categories-box{
width: 23.6%;
margin: 0.7% ;
overflow: hidden;
cursor: pointer;
transition-duration: 0.2s; transition-timing-function: linear;
background-color: #FFF;
}
.product-categories-box a{
color: #000;
}
.product-categories-box a:hover{
color: #000;
}
.product-categories-box:hover .product-categories-box-img{
-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-ms-transform: scale(1.1);-o-transform: scale(1.1);transform: scale(1.1);
filter: blur(2px);
}
.product-categories-box:hover .product-categories-box-img-line-line{
opacity: 1;
width: 90%;
height: 90%;
}
.vitrin1_text{
font-size: 20px ;
font-weight: 500;
}
.product-categories-box-img{
width: 100%;
height: 185px;
background-size: 100% 100%;
overflow: hidden;
position: relative;
transition-duration: 0.2s; transition-timing-function: linear;
}
.product-categories-box-img-line{
width: 100%;
height: 100%;
box-sizing: border-box;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
.product-categories-box-img-line-line{
width: 100%;
height: 100%;
z-index: 9;
opacity: 0;
transition-duration: 0.2s; transition-timing-function: linear;
border: 1px solid rgba(255,255,255,.3);
display: flex;
align-items: center;
justify-content: flex-end;
flex-direction: column;
}
.product-categories-box-img-dis{
width: 100%;
margin: 0 auto;
height: 185px;
overflow: hidden;
position: relative;
box-sizing: border-box;
}
.product-categories-box-txt{
width: 85%;
margin: 0 auto;
font-size: 15px ;
line-height: 20px;
padding: 25px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.product-categories-box-txt i{
font-size: 25px ;
line-height: 25px;
}
/* Anasayfa Ürün Kategorileri SON ///////////////////////////////////////////*/
/* Ürün Detay ///////////////////////////////////////////*/
.photo-product{
display: flex;
justify-content: center;
flex-direction: column;
position: relative;
}
.photo-product span{
cursor: pointer;
display: block;
color:#000;
box-sizing: border-box;
position: absolute;
background-color: #FFF;
font-size: 14px ;
bottom:1px;
left:1px;
padding: 0 5px;
box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
}
.image-box .thumbs li span{ opacity: .7; transition: .2s ease-in-out 0s; }
.image-box .thumbs li.activeted span{opacity: 1;}
.image-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
margin: auto;
}
.image-box .thumbs {
width: 100%;
padding: 0; margin: 0; text-align: center; margin-top: 15px;
margin-bottom: 15px;
}
.image-box .thumbs li {
}
.image-box .thumbs li .thumb-img{opacity: 0.5; width: 100%; overflow: hidden; border: 1px solid #ccc; }
.image-box .thumbs li.activeted .thumb-img{opacity: 1; width: 100%; overflow: hidden; border: 1px solid black; }
.image-box .thumbs .thumb-img {
width: 100%;
height:90px;
box-sizing: border-box;
padding: 10px;
}
.image-box .large-image {
width: 100%;
height: 490px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
cursor : crosshair;
}
.urun-detay-fiyat-durumu{
width: 100%;
padding: 20px;
box-sizing: border-box;
border: 2px solid #EBEBEB;
background-color: #f8f8f8;
text-align: left;
font-size: 16px ;
font-weight: bold;
border-radius: 4px;
}
.urun-detay-fiyat-durumu i{
font-size: 20px ;
}
.urun-detay-main{
width: 100%;
background: #FFF;
padding-bottom: 30px;
}
.urun-detay-main-in{
width: 1280px;
margin: 0 auto;
padding: 30px 0 10px 0;
display: flex;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 20px;
}
.urun-detay-main-in-button-area{
width: 100%;
margin-bottom: 15px;
}
.urun-detay-sol-alan{
width: 550px;
margin-right: 25px;
padding-bottom: 20px;
}
.urun-detay-sag-alan{
flex:1;
box-sizing: border-box;
padding: 20px;
}
.urun-detay-sag-alan-baslik{
width: 100%;
font-size: 24px ;
font-weight: 600;
line-height: 34px;
margin-bottom: 10px;
}
.urun-detay-sag-alan-iliskili-kat{
width: 100%;
position: relative;
margin-bottom: 10px;
}
.urun-detay-sag-alan-iliskili-kat i{
margin:0 5px
}
.urun-detay-sag-alan-iliskili-kat a{
color: #000;
font-size: 13px ;
display: inline-block;
}
.urun-detay-sag-alan-iliskili-kat a:hover{
color: #666;
}
.urun-detay-sag-alan-yildiz{
font-size: 20px ;
margin-bottom: 10px;
display: flex;
line-height: 20px;
box-sizing: border-box;
align-items: center;
justify-content: flex-start;
}
.urun-detay-sag-alan-spot{
width: 100%;
font-size: 13px ;
line-height: 20px;
color: #6c6c6c;
margin-bottom: 10px;
padding-bottom: 10px;
margin-top: 12px;
}
.urun-detay-sag-alan-fiyatlar{
width: 100%;
padding: 8px 0;
display: flex;
box-sizing: border-box;
align-items: center;
justify-content: flex-start;
border-bottom: 1px solid #f8f8f8;
position:relative ;
}
.urun-detay-sag-alan-fiyat-sol{
width: 180px;
font-size: 13px ;
color: #444444;
display: flex;
justify-content: space-between;
align-items: center;
}
.urun-detay-sag-alan-fiyat-sag{
flex:1;
font-size: 15px ;
color: #666 ;
padding-left: 20px;
}
.urun-detay-sag-alan-d-bilgiler{
width: 100%;
display: flex;
box-sizing: border-box;
justify-content: flex-start;
align-items: center;
padding-top: 10px;
padding-bottom: 10px ;
border-bottom: 1px solid #f8f8f8;
}
.urun-detay-sag-alan-d-bilgiler-box{
padding: 4px 18px 4px 0;
font-size: 12px ;
color: #444444;
margin-right: 18px;
}
.urun-detay-sag-alan-d-bilgiler-box img{
max-height: 48px;
padding: 9px;
border: 3px solid #EBEBEB;
border-radius: 4px;
}
.urun-detay-sag-alan-d-bilgiler-box:last-child{
border-right: none;
}
.urun-detay-sag-alan-no-stok{
width: 100%;
border: 1px solid #e1eef1;
background-color: #f1f6f7;
padding: 10px;
box-sizing: border-box;
font-size: 13px ;
color: #000;
}
#tabs-video iframe{
width: 100% !important;
height: 400px;
}
.urun-detay-sag-alan-ek-bilgiler{
width: 100%;
margin: 10px 0;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
color: #000;
}
.urun-detay-sag-alan-ek-bilgiler-box{
border: 2px solid #ebebeb;
border-radius: 4px;
padding: 10px 20px;
font-size: 13px ;
display: flex;
align-items: center;
background-color: #f8f8f8;
margin-right: 10px;
}
.urun-detay-sag-alan-ek-bilgiler-box i{
font-size: 20px ;
margin-right: 8px;
}
.urun-detay-social{
display: flex;
align-items:center;
justify-content: flex-start;
}
.urun-detay-social a{
display: block;
margin-right: 5px;
font-size: 17px ;
line-height: 0;
color: #000;
padding: 5px;
}
.urun-detay-baslik-alti{
width: 100%;
display: flex;
align-items:center;
justify-content: space-between;
flex-wrap: wrap;
}
.urun-detay-social a:hover{
color: #000;
}
.urun-detay-sag-alan-sepet{
width: 100%;
height: auto;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
align-items: flex-start;
padding-bottom: 20px;
}
.urun-detay-sag-alan-sepet-box{
margin-right: 23px;
margin-top: 10px;
}
.urun-detay-sag-alan-sepet-box-favi{
display: flex;
align-items: center;
justify-content: center;
height: 50px;
}
.urun-detay-sag-alan-sepet-box-favi i{
margin-right: 9px;
}
.urun-detay-sag-alan-urun-islemler-main{
width: 100%;
height: auto;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
align-items: center;
}
.fav-a{
color: #000;
width: auto;
display: flex;
align-items: center;
justify-content: center;
transition-duration: 0.2s; transition-timing-function: linear;
font-size: 13px ;
line-height: 13px;
margin:10px 20px 10px 0;
}
.fav-a:hover{
color: #dd4150;
text-decoration: none;
}
.fav-b{
color: #dd4150;
width: auto;
display: flex;
align-items: center;
justify-content: center;
transition-duration: 0.1s; transition-timing-function: linear;
font-size: 13px ;
line-height: 13px;
margin:10px 20px 10px 0;
font-weight: bold;
}
.fav-b:hover{
color: #000;
text-decoration: none;
}
.fav-a i{
margin-right: 10px;
font-size: 16px ;
}
.fav-b i{
margin-right: 10px;
font-size: 16px ;
}
.karsilastir-product{
display: flex;
align-items: center;
justify-content: center;
font-size: 13px ;
line-height: 13px;
margin: 10px 20px;
color: #000;
}
.karsilastir-product:hover{
text-decoration: none;
color: #dd4150;
}
.karsilastir-product i{
margin-right: 10px;
font-size: 14px ;
}
.karsilastir-product-exit{
color: #dd4150;
width: auto;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
transition-duration: 0.1s; transition-timing-function: linear;
font-size: 13px ;
line-height: 13px;
margin: 10px 20px;
}
.karsilastir-product-exit:hover{
color: #000;
text-decoration: none;
}
.karsilastir-product-exit i{
margin-right: 10px;
font-size: 14px ;
}
.taksitler-main-div{
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.taksitler-boxes{
width: 23%;
margin: 0 1% 1.5% 1% ;
border: 1px solid #ebebeb;
box-sizing: border-box;
padding-bottom: 15px;
}
.taksitler-boxes-img{
width: 100%;
text-align: center;
padding: 10px 0;
height:50px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.taksitler-boxes-aylar-main{
width: 90%;
margin: 0 auto;
margin-bottom:5px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
background: #f2f2f2;
transition-duration: 0.2s; transition-timing-function: linear;
}
.taksitler-boxes-aylar-main:hover{
background-color: #e2e2e2;
cursor: pointer;
}
.taksitler-boxes-aylar-white{
width: 90%;
margin: 0 auto;
margin-bottom:15px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
padding-top: 20px;
background: #fff;
border-top: 1px solid #EBEBEB;
}
.taksitler-ic-div{
width: 50%;
border-right: 5px solid #FFF;
text-align: center;
font-size: 13px ;
color: #000;
line-height: 13px;
padding: 12px 0;
}
.taksitler-ic-div:last-child{
border-right: 0;
}
.taksitler-boxes-img img{
max-width: 80%;
max-height: 45px;
}
.urun-detay-sag-alan-sepet-box-wp{
height: 50px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 35px;
font-size: 13px ;
line-height: 13px;
border-radius: 3px;
background-color: #2fba47;
color: #FFF;
transition-duration: 0.2s; transition-timing-function: linear;
width: auto;
margin-top: 10px;
}
.urun-detay-sag-alan-sepet-box-wp i{
font-size: 20px ;
margin-right: 9px;
}
.urun-detay-sag-alan-sepet-box-wp:hover{
color: #FFF;
text-decoration: none;
background-color: #2ea046;
}
.urun-detay-sag-alan-sepet-box-favi i{
font-size: 20px ;
}
.urun-detay-sag-alan-sepet-box button{
height: 50px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 500 !important;
font-size: 15px !important ;
border-radius: 3px;
padding: 0 70px;
}
.urun-detay-desc-main{
width: 1280px;
margin: 0 auto;
margin-top: 40px;
}
.iliskili-kat{
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
font-size: 13px ;
margin-bottom: 10px;
}
.iliskili-kat i{
margin:0 7px;
}
.iliskili-kat a{
display: block;
color: #000;
}
.iliskili-kat a:hover{
color: #000;
}
.product-detail-variant-div{
margin-right: 10px;
margin-bottom: 15px;
}
.product-detail-variant-div input{
border-color : #EBEBEB
}
.product-detail-variant-div select{
border-color : #EBEBEB
}
.product-detail-variant-div label{
font-size: 14px ;
font-weight: bold;
}
.product-detail-variant-div select{
font-size: 13px ;
height: 55px;
}
.product-detail-features-table{
width: 100%;
padding: 20px 10px;
border-bottom: 1px solid #EBEBEB;
display: flex;
justify-content: flex-start;
color: #000;
font-size: 14px ;
}
.product-detail-features-table:nth-of-type(2n){
background-color: #f8f8f8;
}
.product-detail-features-table-left{
width: 130px;
font-weight: 600;
}
.product-detail-features-table-dots{
width: 50px;
text-align: center;
}
.product-detail-features-table-right{
flex:1;
text-align: left;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
}
.product-detail-features-table-right i{
margin-right: 5px;
}
/* Ürün Detay SON ///////////////////////////////////////////*/
/* Benzer Ürünler ve Slick Slider Kodları ///////////////////////////////////////////*/
.urun-detay-benzer-urunler-main-div{
width: 1280px;
margin: 0 auto;
margin-top: 40px;
border: 1px solid #EBEBEB;
box-sizing: border-box;
background-color: #fff;
}
.urun-detay-benzer-urunler-main-div-head{
border-bottom: 1px solid #ebebeb;
display: flex;
justify-content: space-between;
box-sizing:border-box;
}
.urun-detay-benzer-urunler-main-div-head-l{
padding: 15px 15px;
font-size: 15px ;
font-weight: 600;
color: #000;
box-sizing:border-box;
}
.urun-detay-benzer-urunler-main-div-container{
display: flex;
justify-content: flex-start;
box-sizing:border-box;
flex-wrap: wrap;
}
.urun-detay-benzer-urun-box{
border-right: 1px solid #EBEBEB;
padding: 25px;
box-sizing: border-box;
height: 540px !important;
position: relative;
}
.urun-detay-benzer-urun-box-overlay{
opacity: 0;
transition-duration: 0.2s; transition-timing-function: linear;
bottom:-50px;
position: absolute;
width: 85%;
}
.urun-detay-benzer-urun-box:hover .urun-detay-benzer-urun-box-overlay{
opacity:1;
bottom:0
}
.urun-detay-benzer-urun-box-img{
width: 100%;
background-color: #333;
overflow: hidden;
}
.urun-detay-benzer-urun-box-img img{
width: 100%;
}
.urun-detay-benzer-urun-box-text{
width: 100%;
}
.urun-detay-benzer-urun-box-text-h{
font-size: 14px ;
margin-bottom: 5px;
margin-top: 15px;
}
.urun-detay-benzer-urun-box-text-h a{
color: #000;
}
.urun-detay-benzer-urun-box-text-h a:hover{
color: #666;
text-decoration: none;
}
.urun-detay-benzer-urun-box-text-star{
font-size: 22px ;
margin-bottom: 10px;
}
.urun-detay-benzer-urun-box-text-price{
width: 100%;
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
}
.urun-detay-benzer-urun-box-text-price-hidden{
width: 100%;
padding: 8px;
box-sizing: border-box;
font-size: 14px ;
background-color: #f8f8f8;
border: 1px dashed #EBEBEB;
text-align: center;
}
.urun-detay-benzer-urun-box-text-price-discount{
border: 1px solid indianred;
background-color: #fff;
box-sizing: border-box;
border-radius: 5px;
padding: 2px 6px;
display: inline-block;
font-size: 15px ;
font-weight: bold;
color: indianred;
}
.urun-detay-benzer-urunler-main-div .arrorhead .Slick-Next,
.urun-detay-benzer-urunler-main-div .arrorhead .Slick-Prev {
display: inline-block;
color: #000;
border-left: 1px solid #ebebeb;
cursor: pointer;
font: 28px FontAwesome;
text-align: center;
-webkit-transition: all 0.5s;
transition: all 0.5s;
padding: 12px 20px;
}
.urun-detay-benzer-urunler-main-div .arrorhead .Slick-Next:hover,
.urun-detay-benzer-urunler-main-div .arrorhead .Slick-Prev:hover {
background: #f8f8f8;
}
.urun-detay-benzer-urunler-main-div .arrorhead .Slick-Next:before {
content: '\f105'
}
.urun-detay-benzer-urunler-main-div .arrorhead .Slick-Prev:before {
content: '\f104'
}
.slick-slider {
position: relative;
display: block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent
}
.slick-list {
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0
}
.slick-list:focus {
outline: none
}
.slick-list.dragging {
cursor: hand
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.slick-track {
position: relative;
top: 0;
left: 0;
display: block
}
.slick-track:before,
.slick-track:after {
display: table;
content: ''
}
.slick-track:after {
clear: both
}
.slick-loading .slick-track {
visibility: hidden
}
.slick-slide {
display: none;
float: left;
height: 100%;
min-height: 1px
}
.slick-slide.dragging img {
pointer-events: none
}
.slick-initialized .slick-slide {
display: block
}
.slick-loading .slick-slide {
visibility: hidden
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent
}
/* Benzer Ürünler SON ///////////////////////////////////////////*/
/* Adet ///////////////////////////////////////////*/
.quantity {
position: relative;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button
{
-webkit-appearance: none;
margin: 0;
}
input[type=number]
{
-moz-appearance: textfield;
}
.quantity input {
width: 80px;
height: 50px;
line-height: 1.65;
-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;
float: left;
display: block;
padding: 0;
margin: 0;
text-align: center;
padding-right: 20px;
padding-left: 5px;
border: 1px solid #EBEBEB;
}
.quantity input:focus {
outline: 0;
}
.quantity-nav {
float: left;
position: relative;
height: 50px;
}
.quantity-button {
position: relative;
cursor: pointer;
width: 24px;
text-align: center;
color: #333;
font-size: 15px;
font-family: "Trebuchet MS", Helvetica, sans-serif !important;
line-height: 1.7;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
left: -1px;
transition-duration: 0.2s; transition-timing-function: linear;
}
.quantity-button:hover{
background-color: #f8f8f8;
}
.quantity-button.quantity-up {
position: absolute;
height: 50%;
top: 1px;
}
.quantity-button.quantity-down {
position: absolute;
bottom: 1px;
height: 50%;
}
/* Adet SON ///////////////////////////////////////////*/
/* Ürün Detay Tabs ///////////////////////////////////////////*/
#urundetaytabs {
width: 100%;
margin: 0 auto;
position: relative;
padding: 0;
border: 1px solid #ebebeb !important;
border-radius: 0 !important;
}
#urundetaytabs img{
max-width: 100%;
}
.ui-tabs-nav {
background-color: #FFF !important;
height: auto !important;
}
.ui-tabs .ui-tabs-nav {
margin: 0;
padding: 0 !important;
border-radius:0 !important;
}
.ui-tabs .ui-tabs-nav li {
position: relative; /*To overwrite jquery-ui.css*/
border: none !important;
margin: 0 !important;
background: none;
font-size: 14px ;
}
.ui-tabs-anchor{
color: #000 !important; /*To overwrite jquery-ui.css*/
border:0 !important;
background-color: #FFF;
border-right: 1px solid #EBEBEB !important;
padding: 20px 35px !important;
}
#urundetaytabs ul.ui-widget-header, #urundetaytabs ul.ui-widget-content, #urundetaytabs ul.ui-state-default, #urundetaytabs ul.ui-state-hover {
background: none;
border: none;
}
#urundetaytabs .ui-tabs-active a {
position: relative;
z-index: 5;
text-decoration: none !important; /*To overwrite jquery-ui.css*/
border: 0 !important;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active{
padding-bottom: 0!important;
}
a:focus{ /*To handle that annoing border(chrome) when item is in focus*/
outline: none;
}
.ui-tabs .ui-tabs-panel{
background:#FFF;
border-top: 1px solid #ebebeb !important;
padding: 40px 30px !important;
border-radius: 0 !important;
font-size: 14px;
}
/* Ürün Detay Tabs SON ///////////////////////////////////////////*/
/* Product Comment */
.rating {
display: inline-block;
position: relative;
height: 10px !important;
}
.rating label {
position: absolute;
top: 0;
left: 0;
height: 100%;
cursor: pointer;
}
.rating label:last-child {
position: static;
}
.rating label:nth-child(1) {
z-index: 5;
}
.rating label:nth-child(2) {
z-index: 4;
}
.rating label:nth-child(3) {
z-index: 3;
}
.rating label:nth-child(4) {
z-index: 2;
}
.rating label:nth-child(5) {
z-index: 1;
}
.rating label input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.rating label .icon {
float: right;
color: transparent;
}
.rating label:last-child .icon {
color: #CCC;
}
.rating:not(:hover) label input:checked ~ .icon,
.rating:hover label:hover input ~ .icon {
color: #ffb400;
}
.rating label input:focus:not(:checked) ~ .icon:last-child {
color: #000;
text-shadow: 0 0 5px #09f;
}
.product-comment-head{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 60px;
}
.product-comment-head-1{
width: 40% ;
text-align: center;
padding: 0 30px;
box-sizing: border-box;
}
.product-comment-head-1-h{
width: 100%;
margin-bottom: 10px;
font-size: 24px ;
font-weight: bold;
color: #000;
}
.product-comment-head-1-s{
width: 100%;
margin-bottom: 30px;
font-size: 14px ;
color: #000;
}
.product-comment-head-1-btn{
width: 100%;
text-align: center;
}
.product-comment-head-2{
width: 60% ;
border: 1px solid #ebebeb;
padding: 35px;
text-align: center;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.product-comment-head-2-img{
width: 125px;
height: 125px;
}
.product-comment-head-2-img img{
border: 1px solid #ebebeb;
box-sizing: border-box;
padding: 5px;
width: 105px;
height: 105px;
}
.product-comment-head-2-ot{
flex:1;
box-sizing: border-box;
padding: 0 20px;
text-align: center;
}
.product-comment-head-2-ot-1{
width: 100%;
font-size: 14px ;
color: #777777;
margin-bottom: 0;
}
.product-comment-head-2-ot-2{
width: 100%;
font-size: 18px ;
font-weight: 500;
color: #000;
margin-bottom: 7px;
}
.product-comment-head-2-ot-3{
width: 100%;
font-size: 22px ;
font-weight: bold;
color: #000;
margin-bottom: 7px;
}
.product-comment-head-2-ot-4{
width: 100%;
font-size: 35px ;
color: #cfcfcf;
}
.product-comment-head-content-main{
width: 100%;
}
.product-comment-head-content-box-out{
border: 1px solid #ebebeb;
margin-bottom: 25px;
}
.product-comment-head-content-box{
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
box-sizing: border-box;
padding: 25px;
}
.urundetay-show-more-button {
}
.urundetay-showmorespan {
outline: 0;
}
.urundetay-showmorespan {
cursor: pointer;
display: block;
padding: 10px 0;
text-align: center;
}
.product-comment-head-content-box-out:nth-of-type(2n){
background-color: #F8F8F8;
}
.product-comment-head-content-box-name-rad{
width: 75px;
height: 75px;
-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;
margin-right: 50px;
font-size: 30px ;
display: flex;
align-items:center;
justify-content: center;
}
.product-comment-head-content-box-in{
flex:1;
text-align: left;
}
.product-comment-head-content-box-in-1{
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
width: 100%;
}
.product-comment-head-content-box-in-1-name{
font-size: 14px;
color: #000;
font-weight: bold;
margin-right: 25px;
}
.product-comment-head-content-box-in-1-date{
font-size: 13px;
color: #adadad;
}
.product-comment-head-content-box-in-2{
margin-top: 10px;
width: 100%;
font-size: 20px ;
color: #000;
font-weight: 600;
margin-bottom: 5px;
}
.product-comment-head-content-box-in-3{
width: 100%;
color: #cfcfcf;
font-size: 18px ;
margin-bottom: 5px;
}
.product-comment-head-content-box-in-4{
font-size: 14px ;
width: 90%;
color: #000;
line-height: 18px;
}
.no-comment-alert{
width: 100%;
padding: 25px 10px;
box-sizing: border-box;
font-size: 15px ;
color: #000;
border: 1px solid #EBEBEB;
background-color: #F8F8F8;
text-align: center;
}
.user-comments-status-div{
width: 100%;
margin-bottom: 20px;
padding-bottom: 20px;
display: flex;
align-items: center;
justify-content: flex-start;
}
.user-comments-status-box{
-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;
border: 1px solid #ebebeb;
font-size: 12px ;
text-align: center;
font-weight: 600;
color: #333;
padding: 5px 8px;
margin-right: 5px;
}
/* Product Comment SON */
/* Load More Style Codes */
.commentboxes {
margin: 5px auto;
padding: 8px 0;
width: 50%;
background: #eee;
border: 1px solid #ccc;
text-align: center;
display: none;
}
#loadmore_button {
text-decoration: none;
width: auto;
background-color: #FB384F;
display: inline-block;
padding: 15px 45px;
font-size: 16px ;
color: #FFF;
font-weight: 600;
transition-duration: 0.2s; transition-timing-function: linear;
}
#loadmore_button:hover {
background: #333;
}
.loadmore_button_nomore {
text-decoration: none;
width: auto;
background-color: #333;
display: inline-block;
padding: 15px 45px;
font-size: 16px ;
color: #FFF;
font-weight: 600;
}
.loadmore_button_out{
width: 100%;
text-align: center;
margin: 40px 0;
}
/* Load More Style Codes SON */
/* Modal Custom ///////////////////////////////////////////*/
.userlogin-modal-head{
width: 100%;
padding: 25px 10px;
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
text-align: center;
position: relative;
background-color: #FFF;
}
.userlogin-modal-head-text1{
width: 100%;
font-size:18px;
color: #000;
font-weight: 700;
}
.userlogin-modal-head-text2{
font-size: 14px;
color: #666;
width: 100%;
}
.userlogin-modal-closepanel{
position: absolute;
font-size: 19px;
color: #000000;
right: 10px;
top:5px;
}
.userlogin-modal-content-area{
width: 100%;
background-color: #FFF;
padding: 20px 40px;
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}
.userlogin-modal-footer{
width: 100%;
background-color: #F8F8F8;
padding: 29px 10px;
text-align: center;
}
.userlogin-modal-footer-text{
width: 100%;
font-size: 16px;
color: #000;
font-weight: 700;
margin-bottom: 20px;
}
/* Modal Custom SON ///////////////////////////////////////////*/
/* User iÅŸleri ///////////////////////////////////////////*/
.user-login-head{width: 100%; padding: 15px 0 20px 0; margin-bottom: 25px; border-bottom:1px solid #EBEBEB; color:#000; box-sizing: border-box}
.login-form-container{width: 100%; height: auto;}
.login-form-container label{font-family: 'Open Sans', Arial; font-size:14px; color:#000; font-weight: 600}
.login-form-container input{width: 400px; border:1px solid #CCC; font-family: 'Open Sans', Arial; font-size:14px; color:#000; padding: 0 15px; height: 41px; border-radius: 1px; background-color: #FFF; transition-duration: 0.2s; transition-timing-function: linear }
.login-form-container input:focus{ outline: none !important; border:1px solid #EBEBEB !important}
.login-form-container textarea{ border:1px solid #CCC; font-family: 'Open Sans', Arial; font-size:14px; color:#000; border-radius: 1px; background-color: #FFF; transition-duration: 0.2s; transition-timing-function: linear }
.login-form-container textarea:focus{ outline: none !important; border:1px solid #EBEBEB !important}
.user-remember-area{width: 400px; margin: 18px 0; }
.user-remember-area a{color:#000; position: relative; float: right; font-family: 'Open Sans', Arial; font-size:13px; font-weight: 600; color:#000; margin-top: 3px; }
.user-remember-area a:hover{color:#000 ;}
.user-remember-area input{width: 16px; margin-right: 8px; height: 27px; display: inline-block; vertical-align: top; }
.user-remember-area input:focus{outline: none; box-shadow: none}
.user-remember-area label{font-family: 'Open Sans', Arial; font-size:13px; color:#000; font-weight: 500; display: inline-block}
.aler{width: 400px; border-radius: 1px !important; font-family: 'Open Sans', Arial; font-size:13px;}
.user-topbar-ul{width: 100%; list-style: none; padding: 0; margin: 0;}
.user-topbar-ul a{color:#000}
.user-topbar-ul a:hover{text-decoration:none; color: #666}
.user-topbar-ul li {width: 100%; height: auto; padding: 6px; font-family: 'Open Sans', Arial; font-size:13px; display: flex; align-items: center}
.user-topbar-ul li i{margin-right: 7px; width: 18px; color:#000}
.user-dropdown-top-main{width: 190px; height: auto; text-align: left;}
.user-dropdown-top-main-ic{width: 90%; margin: 0px auto; height: auto; padding-top: 10px; padding-bottom: 10px;}
/* User iÅŸleri SON ///////////////////////////////////////////*/
/* Paytr Taksit Tablosu ///////////////////////////////////////////*/
#paytr_taksit_tablosu{clear: both;font-size: 12px;max-width: 1200px;text-align: center;font-family: Arial, sans-serif;}
#paytr_taksit_tablosu::before {display: table;content: " ";}
#paytr_taksit_tablosu::after {content: "";clear: both;display: table;}
.taksit-tablosu-wrapper{margin: 5px;width: 280px;padding: 12px;cursor: default;text-align: center;display: inline-block;border: 1px solid #e1e1e1;}
.taksit-logo img{max-height: 28px;padding-bottom: 10px;}
.taksit-tutari-text{float: left;width: 126px;color: #a2a2a2;margin-bottom: 5px;}
.taksit-tutar-wrapper{display: inline-block;background-color: #f7f7f7;}
.taksit-tutar-wrapper:hover{background-color: #e8e8e8;}
.taksit-tutari{float: left;width: 126px;padding: 6px 0;color: #474747;border: 2px solid #ffffff;}
.taksit-tutari-bold{font-weight: bold;}
@media all and (max-width: 600px) {.taksit-tablosu-wrapper {margin: 5px 0;}}
/* Paytr Taksit Tablosu SON ///////////////////////////////////////////*/
/* Sepet Fiyat Güncelleme Modalı ///////////////////////////////////////////*/
#fiyatdegisti {
padding-right: 0 !important;
}
#fiyatdegisti .cart-price-update-dialog {
max-width: 760px;
width: calc(100% - 32px);
margin: 30px auto;
}
#fiyatdegisti .modal-content {
border: 0;
border-radius: 16px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
}
#fiyatdegisti .sepet-return-modal {
width: 100%;
background: #fff;
padding: 0;
position: relative;
}
#fiyatdegisti .sepet-return-close {
position: absolute;
top: 12px;
right: 14px;
z-index: 4;
width: 36px;
height: 36px;
border: 0;
background: transparent;
color: rgba(255,255,255,0.88);
font-size: 28px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
}
#fiyatdegisti .sepet-return-close:hover {
color: #ffffff;
transform: scale(1.05);
}
#fiyatdegisti .sepet-return-alert {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
gap: 14px;
padding: 24px 26px 20px 26px;
background: linear-gradient(180deg, #d61f1f 0%, #b90f16 100%);
border-bottom: 1px solid #a60d13;
box-sizing: border-box !important;
}
#fiyatdegisti .sepet-return-alert-icon {
width: 44px;
min-width: 44px;
height: 44px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.28);
background: rgba(255,255,255,0.14);
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}
#fiyatdegisti .sepet-return-alert i {
margin: 0;
}
#fiyatdegisti .sepet-return-alert-copy {
flex: 1;
min-width: 0;
}
#fiyatdegisti .sepet-return-alert-title {
font-size: 25px;
line-height: 1.22;
font-weight: 700;
color: #ffffff;
letter-spacing: -0.02em;
margin-bottom: 8px;
}
#fiyatdegisti .sepet-return-alert-text {
font-size: 13px;
line-height: 1.78;
color: rgba(255,255,255,0.92);
font-weight: 400;
max-width: 620px;
}
#fiyatdegisti .sepet-return-product {
width: 100%;
padding: 18px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
flex-wrap: nowrap;
border-bottom: 1px solid #f1e6e6;
box-sizing: border-box;
background: #ffffff;
}
#fiyatdegisti .sepet-return-product:last-child {
border-bottom: 0;
}
#fiyatdegisti .sepet-return-product-left {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
justify-content: flex-start;
}
#fiyatdegisti .sepet-return-product-img {
margin-right: 14px;
flex: 0 0 auto;
}
#fiyatdegisti .sepet-return-product-img img {
width: 72px;
height: 72px;
object-fit: contain;
padding: 8px;
border: 1px solid #eadede;
border-radius: 12px;
background: #fff;
}
#fiyatdegisti .sepet-return-product-head {
padding: 0;
font-size: 15px;
font-weight: 600;
text-align: left;
color: #111827;
line-height: 1.55;
letter-spacing: -0.01em;
}
#fiyatdegisti .sepet-return-product-quantity {
width: 230px;
min-width: 230px;
padding: 14px 16px;
background: linear-gradient(180deg, #fff8f8 0%, #fff2f2 100%);
border: 1px solid #f0d2d2;
border-radius: 14px;
box-sizing: border-box;
}
#fiyatdegisti .sepet-return-price-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
#fiyatdegisti .sepet-return-price-row + .sepet-return-price-row {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #edd5d5;
}
#fiyatdegisti .sepet-return-price-label {
font-size: 12px;
color: #8a6f6f;
font-weight: 500;
line-height: 1.4;
}
#fiyatdegisti .sepet-return-price-value {
text-align: right;
line-height: 1.4;
}
#fiyatdegisti .sepet-return-price-old {
font-size: 13px;
color: #8a6f6f;
font-weight: 500;
}
#fiyatdegisti .sepet-return-price-row-current .sepet-return-price-label {
color: #a3161d;
font-weight: 600;
}
#fiyatdegisti .sepet-return-price-new {
font-size: 19px;
color: #b90f16;
font-weight: 800;
letter-spacing: -0.01em;
}
#fiyatdegisti .urundetay-cart-add-success-modal-footer {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 18px 26px 22px 26px;
background-color: #fff7f7;
border-top: 1px solid #f0dfdf;
box-sizing: border-box;
}
#fiyatdegisti .urundetay-cart-add-success-modal-footer a {
min-width: 160px;
margin: 0;
text-align: center;
text-transform: uppercase;
border-radius: 10px;
min-height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
padding: 12px 22px;
}
#fiyatdegisti .button-black {
box-shadow: none;
}
#fiyatdegisti .button-black:hover {
transform: none;
}
@media (max-width: 991px) {
#fiyatdegisti .cart-price-update-dialog {
width: calc(100% - 24px);
}
#fiyatdegisti .sepet-return-alert {
padding: 22px 20px 18px 20px;
}
#fiyatdegisti .sepet-return-alert-title {
font-size: 22px;
}
#fiyatdegisti .sepet-return-product {
padding: 16px 20px;
}
#fiyatdegisti .urundetay-cart-add-success-modal-footer {
padding: 16px 20px 20px 20px;
}
}
@media (max-width: 767px) {
#fiyatdegisti .cart-price-update-dialog {
width: calc(100% - 16px);
margin: 16px auto;
}
#fiyatdegisti .modal-content {
border-radius: 14px;
}
#fiyatdegisti .sepet-return-alert {
gap: 12px;
padding: 18px 16px 16px 16px;
}
#fiyatdegisti .sepet-return-alert-icon {
width: 38px;
min-width: 38px;
height: 38px;
font-size: 20px;
}
#fiyatdegisti .sepet-return-alert-title {
font-size: 19px;
}
#fiyatdegisti .sepet-return-alert-text {
font-size: 12px;
line-height: 1.65;
}
#fiyatdegisti .sepet-return-product {
padding: 16px;
flex-direction: column;
align-items: stretch;
gap: 14px;
}
#fiyatdegisti .sepet-return-product-left {
align-items: flex-start;
}
#fiyatdegisti .sepet-return-product-img img {
width: 64px;
height: 64px;
}
#fiyatdegisti .sepet-return-product-head {
font-size: 14px;
}
#fiyatdegisti .sepet-return-product-quantity {
width: 100%;
min-width: 100%;
}
#fiyatdegisti .sepet-return-price-new {
font-size: 17px;
}
#fiyatdegisti .urundetay-cart-add-success-modal-footer {
padding: 14px 16px 18px 16px;
}
#fiyatdegisti .urundetay-cart-add-success-modal-footer a {
width: 100%;
min-width: 100%;
}
}
/* Sepet Fiyat Güncelleme Modalı SON ///////////////////////////////////////////*/
/* Sepet Sayfası ///////////////////////////////////////////*/
.cart-main-div{
width: 1300px;
margin: 0 auto;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
margin-top:30px;
margin-bottom: 30px;
}
.cart-left-variant-div{
width: 100%;
font-size: 13px ;
padding: 8px 0;
}
.cart-left-variant-div:last-child{
border-bottom: 1px dashed #ebebeb;
}
.no-cart-items-main-div{
width: 100%;
overflow: hidden;
}
.no-cart-items-in-div{
width: 1300px;
margin: 0 auto;
border: 1px solid #ebebeb;
border-radius: 5px;
padding: 50px 0;
text-align: center;
margin-top:20px;
margin-bottom: 20px;
background-color: #FFF;
}
.no-cart-items-in-div a{
border-radius: 4px !important;
padding: 8px 50px !important;
}
.no-cart-items-text-h{
width: 60%;
font-size: 17px ;
color: #333;
margin: 0 auto;
font-weight: 600;
margin-bottom: 10px;
}
.no-cart-items-text{
width: 60%;
font-size: 14px ;
color: #333;
margin: 0 auto;
margin-bottom: 25px;
}
.cart-left-div{flex:1; height: auto; overflow: hidden; margin-right: 15px; text-align: left;}
.cart-left-box-main{width: 100%; height: auto; overflow: hidden; border: 1px solid #EBEBEB; border-top: 0; font-size: 14px ; font-weight: 500; background-color: #fff; box-sizing: border-box; padding: 0 18px; }
.cart-left-box-1{width: 98px; height: auto; overflow: hidden; display: inline-block; vertical-align: top; margin: 18px 15px 18px 0;}
.cart-left-box-1 img{width: 88px; }
.cart-left-box-2{width: 300px; height: auto; overflow: hidden; display: inline-block; vertical-align: top; margin: 18px 35px 18px 0;}
.cart-left-box-2 a{color:#000; }
.cart-left-box-2 a:hover{color:#666; text-decoration: none;}
.cart-left-box-2-txt{max-width: 290px;}
.cart-left-box-2-other-info{margin-top: 12px; font-size:13px; font-weight: bold}
.cart-left-box-3{width: 90px; height: auto; overflow: hidden; display: inline-block; vertical-align: top; margin: 18px 35px 18px 0;}
.cart-left-box-4{width: 135px; height: auto; overflow: hidden; display: inline-block; vertical-align: top; margin: 0 35px 0 0; padding: 18px 0 18px 8px; }
.cart-left-box-5{width: 137px; height: auto; overflow: hidden; display: inline-block; vertical-align: top; margin: 18px 0 18px 0; line-height: 14px}
.cart-left-box-6{width: 55px; height: auto; display: inline-block; vertical-align: top; padding: 18px 0 18px 0; text-align: right}
.cart-left-function{
width: 100%; height: auto;
margin: 30px 0 30px 0;
display: flex; align-items: flex-start; justify-content: flex-end;
}
.cart-left-functions-left{width: 100%; height: auto; display: inline-block; vertical-align: top; text-align: right;}
.cart-left-functions-left input{ width: 290px; border:1px solid #CCC; background: #FFF; font-size:14px; padding: 10px;outline: none; color:#000; transition-duration: 0.2s; transition-timing-function: linear;}
.cart-left-functions-left input:focus{outline: none; border: 1px solid #333!important; box-shadow: 0 0 15px 0 rgba(0,0,0,0.2) !important}
.cart-left-functions-left button:focus{
outline: none;
}
.cart-left-functions-right{flex:1; height: auto; overflow: hidden; display: inline-block; vertical-align: top; text-align: right;}
.cart-func-continue{width: auto; height: auto; background-color: #2daeff; padding: 8px 35px 8px 35px; color:#FFF; font-size:14px; font-weight:600; display: inline-block; }
.cart-right-div{width: 300px; height: auto; overflow: hidden; display: inline-block; vertical-align: top; }
.cart-right-div-inside{width: 100%; height: auto; overflow: hidden; text-align: left; border: 1px solid #EBEBEB; background-color: #fff;padding:15px; box-sizing: border-box }
.cart-right-div-head{width: 100%; height: auto; overflow: hidden; padding: 0; font-weight: bold; margin-bottom: 10px;}
.cart-right-div-s{width: 100%; height: auto; overflow: hidden; padding: 0;
font-size: 12px ;
margin-bottom: 10px;
}
.cart-right-div-coupon{
width: 100%;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
}
.cart-right-div-coupon>form{
width: 100%;
display: flex;
justify-content: flex-start;
}
.cart-right-div-coupon input{
flex:1 !important;
border: 1px solid #EBEBEB !important;
border-radius: 0 !important;
font-size: 14px !important ;
padding: 0 10px !important;
}
.cart-right-div-coupon button{
padding:7px 15px;
font-size: 13px ;
color: #FFF;
font-weight: 600;
border-radius: 0 !important;
}
.cart-right-div-coupon button:focus{
outline: none; border: 1px solid #333!important; box-shadow: 0 0 15px 0 rgba(0,0,0,0.2) !important
}
.cart-right-div-price-box{width: 100%; height: auto; overflow: hidden; border-bottom: 1px solid #EBEBEB; padding:0 0 8px 0; margin-bottom: 8px; font-size: 14px ;}
.cart-right-div-price-box-left{width: 50%; display: inline-block; vertical-align: middle; text-align: left; }
.cart-right-div-price-box-right{width: 50%; display: inline-block; vertical-align: middle; text-align: right; font-weight: bold; font-size:14px;}
.cart-right-div-price-box:last-child{border-bottom:0;}
.cart-right-div-price-box-button{width: 100%; height: auto; text-align: center; margin-top: 20px; background-color: #ff2d46; border:0; outline: none; font-weight: 600; padding: 10px 0 10px 0; transition: 0.02s ease-in-out 0s;}
.cart-right-div-price-box-button:hover{ background-color: #f22039;}
.empty_cart_alert{width: 100%; height: auto; overflow: hidden; margin: 0 auto; text-align: center;}
.empty_cart_alert i{font-size:24px; margin-bottom: 20px;}
/* Sepet Sayfası SON ///////////////////////////////////////////*/
/* Teslimat Sayfası */
html:not(.ts-checkout-page) .teslimat-page-main-div{
width: 100%;
overflow: hidden;
}
html:not(.ts-checkout-page) .teslimat-page-main{
width: 1300px;
margin: 0 auto;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
margin-top:30px;
margin-bottom: 30px;
}
html:not(.ts-checkout-page) .teslimat-bilgileri-div{
width: 67%;
box-sizing: border-box;
margin-right: 30px;
border-radius: 4px;
}
html:not(.ts-checkout-page) .teslimat-bilgileri-uye-adres-main{
width: 100%;
margin-bottom: 10px;
padding: 20px;
overflow: hidden;
border: 1px solid #ebebeb;
background-color: #fff;
}
html:not(.ts-checkout-page) .teslimat-bilgileri-adres-box{
width: 48%;
height: auto;
box-sizing: border-box;
margin-right: 2%;
cursor:pointer;
overflow: hidden;
transition-duration: 0.1s; transition-timing-function: linear;
display: flex;
background-color: #fff;
align-items: flex-start;
justify-content: flex-start;
}
html:not(.ts-checkout-page) .teslimat-bilgileri-adres-box .custom-control{
padding-left:0;
width: 100%;
}
html:not(.ts-checkout-page) .teslimat-bilgileri-adres-box label{
width: 100%;
border: 1px solid #EBEBEB;
padding: 20px;
box-sizing: border-box;
cursor:pointer;
position: relative;
}
html:not(.ts-checkout-page) .teslimat-bilgileri-adres-box-secili{
display: none;
}
html:not(.ts-checkout-page) .teslimat-bilgileri-adres-box input:checked+label{
border: 2px solid #8db7d4;
margin-bottom: 10px;
}
html:not(.ts-checkout-page) .teslimat-bilgileri-adres-box input:checked+label .teslimat-bilgileri-adres-box-secili{
display: block;
background-color: #8db7d4;
width: 113%;
padding: 7px;
line-height: 14px;
box-sizing: border-box;
font-size: 13px ;
text-align: center;
font-weight: bold;
color: #fff;
position: relative;
margin-left: -20px;
margin-top: -20px;
margin-bottom: 20px;
}
html:not(.ts-checkout-page) .teslimat-bilgileri-adres-box-1{
margin-right: 15px;
}
html:not(.ts-checkout-page) .teslimat-bilgileri-adres-box-2{
font-size: 13px ;
flex:1;
}
html:not(.ts-checkout-page) .teslimat-bilgileri-adres-box-2-sm{
width: 100%;
font-size: 12px ;
color: #333;
margin-bottom: 4px;
}
html:not(.ts-checkout-page) .teslimat-bilgileri-uye-adres-yok{
width: 98%;
box-sizing: border-box;
border: 1px solid #e1eef1;
background-color: #f1f6f7;
padding: 10px;
font-size: 13px ;
margin-bottom: 20px;
}
html:not(.ts-checkout-page) .teslimat-bilgileri-uye-adres-yok-box{
width: 35%;
height: 250px;
box-sizing: border-box;
padding: 15px;
border: 1px solid #ebebeb;
display: flex;
align-items: center;
background-color: #fff;
justify-content: center;
text-align: center;
font-size: 14px ;
color: #000;
transition-duration: 0.1s; transition-timing-function: linear;
}
html:not(.ts-checkout-page) .tsl-ad-2{
width: 48% !important;
height: 150px !important;
}
html:not(.ts-checkout-page) .teslimat-bilgileri-uye-adres-yok-box:hover{
color: #8db7d4;
text-decoration: none;
background-color: #fff;
}
html:not(.ts-checkout-page) .teslimat-bilgileri-uye-adres-yok-box-icon{
width: 60px;
height: 60px;
margin: 0 auto;
border-radius: 100px;
background-color: #fff;
border: 1px solid #ebebeb;
display: flex;
align-items: center;
justify-content: center;
color: #000;
transition-duration: 0.1s; transition-timing-function: linear;
margin-bottom: 15px;
}
html:not(.ts-checkout-page) .teslimat-bilgileri-uye-adres-yok-box i{
font-size: 35px ;
}
html:not(.ts-checkout-page) .teslimat-bilgileri-uye-adres-yok-box:hover .teslimat-bilgileri-uye-adres-yok-box-icon{
background-color: #8db7d4;
color: #fff;
border: 1px solid #8db7d4;
}
html:not(.ts-checkout-page) .teslimat-sag-taraf{
flex:1;
box-sizing: border-box;
}
html:not(.ts-checkout-page) .teslimat-bilgi-baslik{
width: 100%;
border-bottom: 1px solid #ebebeb;
padding: 0 0 10px 0;
margin-bottom: 25px;
font-size: 20px ;
font-weight: 600;
}
html:not(.ts-checkout-page) .teslimat-uyelik-tipi{
width: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
margin-bottom: 15px;
}
html:not(.ts-checkout-page) .teslimat-form-area{
width: 100%;
}
html:not(.ts-checkout-page) .teslimat-form-area label{
font-size: 14px !important ;
}
html:not(.ts-checkout-page) .teslimat-form-area input{
border:1px solid #e2e2e2;
border-radius: 0!important;
font-size: 14px !important ;
}
html:not(.ts-checkout-page) .teslimat-form-area select{
border:1px solid #e2e2e2;
border-radius: 0!important;
font-size: 14px !important ;
}
html:not(.ts-checkout-page) .teslimat-form-area textarea{
border:1px solid #e2e2e2;
border-radius: 0!important;
font-size: 14px !important ;
}
html:not(.ts-checkout-page) .teslimat-form-area select:focus{
border-color: rgba(0, 0, 0, 0.5) !important ;
background-clip: padding-box;
border: 1px solid ;
box-shadow: none !important;
outline: 0 none;
}
html:not(.ts-checkout-page) .teslimat-icon{
position: absolute;
top:20%;
font-size: 15px ;
color: #666;
right: 10px;
}
html:not(.ts-checkout-page) .teslimat-icon-2{
position: absolute;
top:18%;
font-size: 15px ;
color: #666;
left: 10px;
}
html:not(.ts-checkout-page) .teslimat-odeme-secimi{
width: 100%;
border: 1px solid #ebebeb;
padding: 22px;
box-sizing: border-box;
margin-bottom: 10px;
background-color: #fff;
}
html:not(.ts-checkout-page) .teslimat-odeme-main-h{
width: 100%;
padding: 0 0 10px 0;
font-size: 18px ;
font-weight: bold;
border-bottom: 1px solid #EBEBEB;
}
html:not(.ts-checkout-page) .teslimat-odeme-main-h i{
margin-right: 10px;
}
html:not(.ts-checkout-page) .teslimat-odeme-main-box{
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
border-bottom: 1px solid #ebebeb;
padding: 15px 0 7px 0;
}
html:not(.ts-checkout-page) .teslimat-odeme-main-box:last-child{
border-bottom: 0;
padding: 15px 0 0 0;
}
html:not(.ts-checkout-page) .teslimat-sepet-ozet-main{
width: 100%;
border: 1px solid #ebebeb;
padding: 22px;
box-sizing: border-box;
background-color: #fff;
margin-bottom: 10px;
}
html:not(.ts-checkout-page) .teslimat-sepet-ozet-main-h{
width: 100%;
padding: 0 0 10px 0;
font-size: 18px ;
font-weight: bold;
border-bottom: 1px solid #EBEBEB;
}
html:not(.ts-checkout-page) .teslimat-sepet-ozet-main-h i{
margin-right: 5px;
}
html:not(.ts-checkout-page) .teslimat-sepet-ozet-main-box{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
border-bottom: 1px solid #ebebeb;
padding: 10px 0;
}
html:not(.ts-checkout-page) .teslimat-sepet-ozet-main-box:last-child{
border-bottom: 0;
padding: 10px 0 0 0;
}
html:not(.ts-checkout-page) .teslimat-onaybutton-main{
width: 100%;
border: 1px solid #ebebeb;
padding: 10px 22px;
box-sizing: border-box;
background-color: #fff;
margin-bottom: 10px;
}
html:not(.ts-checkout-page) .teslimat-bilgi-hata-main-box{
width: 100% ;
margin: 0 auto;
box-sizing: border-box;
border: 1px solid #ebebeb;
}
html:not(.ts-checkout-page) .teslimat-bilgi-hata-main-text-h{
width: 100%; border-radius: 0; background-color: indianred; color:#FFF; font-size: 20px ; font-weight: bold; box-sizing: border-box; padding: 10px;
}
html:not(.ts-checkout-page) .teslimat-bilgi-hata-main-text{
width: 100%; padding: 30px 15px; font-size: 16px ;
}
html:not(.ts-checkout-page) .teslimat-bilgi-hata-main-bt{
background-color: #f8f8f8; padding: 15px;
}
html:not(.ts-checkout-page) .teslimat-bilgileri-sol-kutular{
width: 100%;
border: 1px solid #ebebeb;
padding: 25px;
margin-bottom: 20px;
box-sizing: border-box;
background-color: #fff;
}
html:not(.ts-checkout-page) .teslimat-bilgileri-sol-kutular-dar{
width: 100%;
border: 1px solid #ebebeb;
padding: 15px 25px;
margin-bottom: 20px;
box-sizing: border-box;
font-size: 14px !important ;
line-height: 24px;
background-color: #fff;
}
/* Teslimat Sayfası SON */
/* Başarılı Sipariş Sayfası */
.success-order-main-div{
width:100%;
overflow:hidden;
padding:0;
}
.sucess-order-in-div{
width:calc(100% - 48px);
max-width:1280px;
margin:32px auto 40px auto;
border:1px solid #e8ebef;
border-radius:12px;
background-color:#fff;
padding:38px 34px 30px 34px;
text-align:center;
box-shadow:0 10px 30px rgba(15,23,42,0.04);
}
.success-order-check-mark{
width:72px;
height:72px;
background-image:url(../../images/checkmark.png);
background-size:72px 72px;
background-repeat:no-repeat;
background-position:center;
margin:0 auto 24px auto;
}
.success-order-h{
width:100%;
font-size:12px;
font-weight:700;
color:#8b95a7;
margin-bottom:12px;
letter-spacing:2px;
text-transform:uppercase;
}
.success-order-h-2{
width:100%;
font-size:40px;
line-height:1.2;
font-weight:700;
color:#121826;
margin-bottom:18px;
word-break:break-word;
}
.success-order-h-2 button{
background:none;
border:1px solid transparent;
border-radius:6px;
transition:all .18s ease;
padding:2px 4px;
}
.success-order-h-2 button:hover{
border:1px solid #121826;
background:#fff;
}
.success-order-h-3{
width:68%;
max-width:860px;
margin:0 auto 18px auto;
font-size:15px;
line-height:1.85;
color:#616b7a;
}
.success-order-h-4{
width:100%;
max-width:920px;
margin:0 auto 24px auto;
border:1px solid #e8ebef;
border-radius:10px;
padding:18px 24px;
font-size:16px;
font-weight:700;
color:#121826;
background:#f8fafc;
}
.success-order-buttons-area{
width:100%;
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
gap:14px;
margin-top:8px;
}
.success-order-buttons-area a{
border-radius:8px !important;
font-weight:700 !important;
min-width:240px;
width:240px !important;
padding:12px 18px !important;
margin:0 !important;
letter-spacing:.2px;
}
.success-order-buttons-area-ccard{
width:100%;
margin-top:34px;
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
gap:14px;
}
.success-order-buttons-area-ccard a{
border-radius:8px !important;
font-weight:700 !important;
min-width:240px;
width:240px !important;
padding:12px 18px !important;
margin:0 !important;
letter-spacing:.2px;
}
.sucess-order-bottom-div{
width:100%;
margin-top:22px;
text-align:center;
font-size:12px;
line-height:1.7;
color:#5f6673;
}
/* Yeni: ödeme hatırlatma kutusu */
.success-order-reminder-box{
width:100%;
max-width:920px;
margin:0 auto 24px auto;
background:#fffdf7;
border:1px solid #efe4bd;
border-left:4px solid #d3b15a;
border-radius:10px;
padding:16px 18px;
text-align:left;
}
.success-order-reminder-title{
font-size:13px;
font-weight:700;
color:#121826;
margin-bottom:6px;
letter-spacing:.2px;
text-transform:uppercase;
}
.success-order-reminder-text{
font-size:14px;
line-height:1.8;
color:#5b6472;
}
/* Responsive */
@media screen and (max-width: 1280px){
.sucess-order-in-div{
width:calc(100% - 32px);
padding:34px 26px 28px 26px;
}
.success-order-h-2{
font-size:34px;
}
.success-order-h-3{
width:82%;
}
}
@media screen and (max-width: 768px){
.sucess-order-in-div{
width:calc(100% - 20px);
margin:20px auto 28px auto;
padding:26px 16px 22px 16px;
border-radius:10px;
}
.success-order-check-mark{
width:64px;
height:64px;
background-size:64px 64px;
margin-bottom:18px;
}
.success-order-h{
font-size:11px;
letter-spacing:1.5px;
margin-bottom:10px;
}
.success-order-h-2{
font-size:28px;
margin-bottom:14px;
}
.success-order-h-3{
width:100%;
font-size:14px;
line-height:1.75;
margin-bottom:16px;
}
.success-order-h-4{
font-size:15px;
padding:16px 14px;
margin-bottom:18px;
}
.success-order-reminder-box{
padding:14px 14px;
margin-bottom:18px;
}
.success-order-reminder-title{
font-size:12px;
}
.success-order-reminder-text{
font-size:13px;
line-height:1.7;
}
.success-order-buttons-area,
.success-order-buttons-area-ccard{
gap:10px;
}
.success-order-buttons-area a,
.success-order-buttons-area-ccard a{
width:100% !important;
min-width:100%;
}
.sucess-order-bottom-div{
margin-top:18px;
font-size:11px;
}
}
/* Başarılı Sipariş Sayfası SON */
/* Kart ödeme sayfası */
.ccard-payment-page-main{
width: 1300px;
margin: 0 auto;
overflow: hidden;
padding: 30px 0;
}
.ccard-payment-paytr-1-main{
width: 100%;
border: 1px solid #ebebeb;
border-radius: 5px;
padding: 30px 0;
text-align: center;
position: relative;
overflow: hidden;
margin: 0 auto;
background-color: #fff;
}
.ccard-payment-paytr-1-h-main{
overflow: hidden;
background-color: #FFF;
}
.ccard-payment-paytr-1-h{
width: 94%;
margin: 0 auto;
font-size: 18px ;
margin-bottom: 10px;
font-weight: bold;
color: #000;
text-transform: uppercase;
}
.ccard-payment-paytr-1-h2{
width: 94%;
margin: 0 auto;
text-align: center;
font-size: 13px ;
font-weight: 500;
color: #000;
margin-bottom: 15px;
}
.ccard-payment-paytr-1-h3{
width: 96.5%;
margin: 0 auto;
background-color: #f4e192;
box-sizing: border-box;
font-size: 12px ;
font-weight: 500;
color: #000;
margin-bottom: 15px;
padding: 10px 19px;
}
.ccard-payment-paytr-1-frame{
width: 120%;
margin-left: -10%;
overflow: hidden;
position: relative;
}
.ccard-payment-paytr-2-main{
width: 100%;
margin: 0 auto;
position: relative;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
box-sizing: border-box;
}
.ccard-payment-paytr-2-left{
width: 450px;
margin-bottom: 15px;
margin-right: 15px;
}
.ccard-payment-paytr-2-left-in{
width: 100%;
border: 1px solid #EBEBEB;
margin-bottom: 20px;
background-color: #fff;
}
.ccard-payment-paytr-2-left-in-yellow{
width: 100%;
border: 1px solid #ffe19f;
background-color: #ffeba9;
margin-bottom: 20px;
box-sizing: border-box;
padding: 15px;
font-size: 12px ;
color: #000;
}
.ccard-payment-paytr-2-left-h{
width: 85%;
margin: 0 auto;
margin-top: 26px;
font-size: 18px ;
font-weight: bold;
color: #000;
margin-bottom: 10px;
text-transform: uppercase;
}
.ccard-payment-paytr-2-left-h2{
width: 85%;
margin: 0 auto;
font-size: 13px ;
font-weight: 600;
color: #404040;
margin-bottom: 10px;
border-bottom: 1px solid #EBEBEB;
padding-bottom: 15px;
}
.ccard-payment-paytr-2-left-h3{
width: 85%;
margin: 0 auto;
font-size: 12px ;
color: #7a7a7a;
margin-bottom: 15px;
}
.ccard-payment-paytr-2-left-h3 i{
margin-right: 5px;
font-size: 14px ;
}
.ccard-payment-paytr-2-left-paycount{
background-color: #f8f8f8;
padding: 10px 7.5%;
border-top: 1px solid #EBEBEB;
text-align: right;
}
.ccard-payment-paytr-2-left-paycount-text1{
width: 100%;
font-size: 13px ;
font-weight: 600;
color: #000;
}
.ccard-payment-paytr-2-left-paycount-text2{
width: 100%;
font-size: 20px ;
font-weight: bold;
line-height: 20px;
color: #000;
}
.ccard-payment-paytr-2-right{
flex:1;
border: 1px solid #EBEBEB;
overflow: hidden;
}
.ccard-payment-paytr-2-right-in{
width: 120%;
margin-left: -10%;
overflow: hidden;
position: relative;
margin-top: -10px;
padding: 10px;
}
.ccard-payment-iyzico-main{
width: 100%;
margin: 0 auto;
position: relative;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
box-sizing: border-box;
}
.ccard-payment-iyzico-left{
width: 450px;
border: 1px solid #EBEBEB;
margin-bottom: 15px;
background-color: #fff;
}
.ccard-payment-iyzico-left-h{
width: 85%;
margin: 0 auto;
margin-top: 26px;
font-size: 18px ;
font-weight: bold;
color: #000;
margin-bottom: 10px;
}
.ccard-payment-iyzico-left-h2{
width: 85%;
margin: 0 auto;
font-size: 12px ;
color: #626262;
margin-bottom: 15px;
}
.ccard-payment-iyzico-left-h3{
width: 100%;
margin: 0 auto;
font-size: 12px ;
color: #666;
padding: 8px 7.5%;
margin-bottom: 15px;
margin-top: 15px;
}
.ccard-payment-iyzico-left-h3 i{
margin-right: 5px;
font-size: 14px ;
}
.ccard-payment-iyzico-left-paycount{
padding: 20px 7.5%;
text-align: left;
display: flex;
justify-content: space-between;
border-top: 1px solid #EBEBEB;
}
.ccard-payment-iyzico-left-paycount-text1{
width: 100%;
font-size: 13px ;
font-weight: 600;
color: #000;
}
.ccard-payment-iyzico-left-paycount-text2{
width: 100%;
font-size: 20px ;
font-weight: bold;
line-height: 20px;
color: #000;
text-align: right;
}
.ccard-payment-iyzico-left-paycount-sm{
padding: 8px 7.5%;
text-align: left;
display: flex;
justify-content: space-between;
border-top: 1px solid #ebebeb;
}
.ccard-payment-iyzico-left-paycount-text2-sm{
width: 100%;
font-size: 15px ;
font-weight: 500;
line-height: 20px;
color: #000;
text-align: right;
}
.ccard-payment-iyzico-right{
flex:1;
padding: 15px;
margin-left: 15px;
border: 1px solid #EBEBEB;
background-color: #fff;
}
.ccard-payment-iyzico-uyari{
margin-bottom: 10px;
font-size: 12px ;
background-color: #f8f8f8;
color: #000;
padding: 5px;
box-sizing: border-box;
}
/* Ä°yzico Form */
.iyzi-form .iyzi-section.iyzi-options .iyzi-pay-by {
border-radius: 0 !important;
border: 1px solid #EBEBEB !important;
background: #ececec;
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
box-shadow: none !important;
}
.iyzi-form .iyzi-section.iyzi-options {
margin-top: 0 !important;
margin-bottom: 10px !important;
display: none;
}
.iyzi-other-tab{
display: none!important;
}
.iyzi-form .iyzi-section.iyzi-options .iyzi-pay-by{
width: 100% !important;
}
.iyzi-sandbox{
display: none !important;
}
.iyzi-form .bkm-explanation, .iyzi-form .iyzi-card-fields {
border: 1px solid #EBEBEB;
border-radius: 0!important;
}
.iyzi-form .extra-security-3d.save-card-active {
border-radius: 0;
border: 1px solid #ebebeb;
background-color: #f8f8f8;
}
.iyzi-form .buyer-protection-holder, .iyzi-form .save-card {
border-radius: 0;
border: 1px solid #ebebeb;
background-color: #f8f8f8;
}
#iyzipay-checkout-form .showPopup, .iyzi-form a.ode{
border-radius: 0;
}
.iyzi-form .iyzi-all-installment-section {
border-radius: 0;
border: 1px solid #ebebeb;
}
.iyzi-form .iyzi-top {
box-shadow: none !important;
}
.iyzi-form input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-appearance: none;
box-sizing: border-box;
padding: 10px !important;
border: 1px solid #fff;
padding-left: 40px !important;
width: 100% !important;
min-height: 60px !important;
font-size: 15px !important;
}
.iyzi-form .iyzi-ico {
position: absolute;
left: 7px;
top: 21px;
width: 20px;
height: 20px;
}
.css-1o39wq4-Popup-Box-Box {
max-width: 100% !important;
}
.css-1s7yuit-Sandbox {
display: none!important;
}
.css-txetxa-TabsList {
display: none !important;
}
.css-xdepok-Screens {
padding: 0!important;
}
.css-6ngtxq-Input {
height: 50px !important;
}
.css-kpjilz-Icon {
height: 50px !important;
}
.css-6nvnpj-StyledInputMask {
height: 50px !important;
}
.css-6cagqp-PrivacyPolicy {
display: none !important;
}
/* <========SON=========>>> Ä°yzico Form SON */
/* <========SON=========>>> Kart ödeme sayfası SON */
/* Custom Checbox Style */
.custom-checkbox .custom-control-label::before {
border-radius: 0 !important;
}
.custom-control-input:checked~.custom-control-label::before {
color: #fff;
border-color: #5f79af !important;
background-color: #5F79AF !important;
}
.custom-control-label::before, .custom-file-label, .custom-select {
-webkit-box-shadow: 0 0 0 0 #fff, 0 0 0 0 #fff !important;
box-shadow: 0 0 0 0, 0 0 0 0 #fff !important;
border-color: #CCC !important;
}
/* Custom Checbox Style SON */
/* Custom Radio Buttons */
html:not(.ts-checkout-page) .rdio {
position: relative;
margin-right: 20px;
display: flex;
align-items: center;
justify-content: flex-start;
}
html:not(.ts-checkout-page) .rdio input[type="radio"] {
opacity: 0;
}
html:not(.ts-checkout-page) .rdio label {
padding-left: 14px;
cursor: pointer;
margin-bottom: 7px !important;
}
html:not(.ts-checkout-page) .rdio label:before {
width: 18px;
height: 18px;
position: absolute;
top: 1px;
left: 0;
content: '';
display: inline-block;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
border: 1px solid #708ac0;
background: #fff;
}
html:not(.ts-checkout-page) .rdio input[type="radio"] {
margin: 0;
}
html:not(.ts-checkout-page) .rdio input[type="radio"]:disabled + label {
color: #999;
}
html:not(.ts-checkout-page) .rdio input[type="radio"]:disabled + label:before {
background-color: #708AC0;
}
html:not(.ts-checkout-page) .rdio input[type="radio"]:checked + label::after {
content: '';
position: absolute;
top: 5px;
left: 4px;
display: inline-block;
font-size: 11px;
width: 10px;
height: 10px;
background-color: #708AC0;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
html:not(.ts-checkout-page) .rdio-default input[type="radio"]:checked + label:before {
border-color: #708AC0;
}
html:not(.ts-checkout-page) .rdio-primary input[type="radio"]:checked + label:before {
border-color: #708AC0;
}
html:not(.ts-checkout-page) .rdio-primary input[type="radio"]:checked + label::after {
background-color: #708AC0;
}
/* Custom Radio Buttons SON */
.modal-content {
border:1px solid #FFF !important;
box-sizing: border-box !important;
background-clip: border-box !important;
border-radius: 0 !important;
}
.modal-content button:focus{
outline: none !important;
}
.modal-content button.close{
font-size: 30px ;
}
.modal-footer{
border-top: 1px solid #ebebeb !important;
}
.modal-backdrop {
background-color:#000;
opacity: 0.4!important;
}
/* Normal SipariÅŸ Modal */
.normal-order-header{
width: 100%;
background-color: #f8f8f8;
border-bottom: 1px solid #EBEBEB;
box-sizing: border-box;
padding: 20px 40px;
font-size: 17px ;
font-weight: bold;
color: #000;
}
.normal-order-product-info-main{
width: 100%;
box-sizing: border-box;
padding: 20px 40px;
display: flex;
align-items:center;
justify-content: flex-start;
flex-wrap: wrap;
color: #000;
border-bottom: 1px solid #EBEBEB;
}
.normal-order-product-info-img{
margin-right: 20px;
}
.normal-order-product-info-img img{
width: 80px;
border: 1px solid #EBEBEB;
padding: 6px;
}
.normal-order-product-info-txt{
flex:1;
}
.normal-order-product-info-txt-h{
font-size: 15px ;
font-weight: 600;
line-height: 15px;
margin-bottom: 10px;
}
.normal-order-in-div{
font-size: 12px;
color: #666;
font-weight: 500;
padding: 2px 15px !important;
margin-right: 5px;
}
.normal-order-product-info-txt-s{
font-size: 13px ;
font-weight: normal;
line-height: 14px;
margin-bottom: 10px;
}
.normal-order-nologin-main{
width: 100%;
box-sizing: border-box;
padding: 20px 40px;
color: #000;
}
.normal-order-nologin-main-in{
width: 100%;
padding: 30px;
box-sizing: border-box;
display: flex;
flex-direction: column;
margin: 0 auto;
text-align: center;
}
.normal-order-nologin-main-in-i{
width: 100%;
font-size: 40px ;
margin-bottom: 15px;
}
.normal-order-nologin-main-in-h{
width: 100%;
font-size: 16px ;
line-height: 20px;
margin-bottom: 8px;
font-weight: bold;
}
.normal-order-nologin-main-in-s{
width: 100%;
font-size: 13px ;
line-height: 16px;
margin-bottom: 25px;
color: #666;
}
.normal-order-nologin-main-in-buttons{
width: 100%;
}
.normal-order-nologin-main-in-buttons a{
width: 170px;
}
.normal-order-product-form-main{
width: 100%;
box-sizing: border-box;
padding: 20px 40px 0 40px;
}
.input-group-text {
font-size: 13px !important;
border-radius: 0 !important;
}
.normal-order-product-form-main label{
font-size: 14px ;
font-weight: 600;
}
.normal-order-product-form-main input{
border-radius: 0;
font-size: 14px ;
}
.normal-order-product-form-main select{
border-radius: 0;
font-size: 14px ;
}
.normal-order-product-form-main textarea{
border-radius: 0;
font-size: 14px ;
}
.normal-order-product-form-postarea{
width: 100%;
box-sizing: border-box;
padding: 0 40px 25px 40px;
background-color: #fff;
text-align: right;
}
/* <========SON=========>>> Normal SipariÅŸ Modal SON */
.alert-danger{
background-color: #fdeaea !important;
}
/* Teslimat button overlay */
#shopButtonOverlay{
position: fixed;
top: 0;
z-index: 100;
width: 100%;
height:100%;
display: none;
background: rgba(255,255,255,0.9);
}
.shopButtonT {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 16px ;
}
/* <========SON=========>>> Teslimat button overlay SON */
/* Kategori Sayfaları */
.cat-detail-main-div{
width: 100%;
overflow: hidden;
padding: 30px 0;
}
.cat-detail-main-div-in{
width: 1280px;
margin: 0 auto;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
}
.cat-left-main{
width: 279px;
box-sizing: border-box;
margin-right: 25px;
}
.cat-left-box-main{
width: 100%;
margin-bottom: 25px;
}
.cat-left-box-h{
width: 100%;
font-size: 14px ;
font-weight: bold;
margin-bottom: 15px;
}
.cat-left-box-out{
max-height: 140px;
overflow-y: auto;
}
.cat-left-box-out-first{
height: auto;
}
.cat-left-box-out-filterbox-out{
width: 98.8%;
margin: 0 auto;
margin-bottom: 10px;
height: auto;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.cat-left-box-out-filterbox-out a{
display: flex;
justify-content: center;
align-items: center;
padding: 2px 5px;
font-size: 12px ;
margin-right: 5px;
margin-bottom: 5px;
font-weight: 500 !important;
}
.cat-left-box-out-filterbox-out a i{
font-size: 14px ;
margin-left: 3px;
}
.cat-left-box-t{
width: 100%;
font-size: 13px ;
padding: 7px 0 3px 0;
}
.cat-left-box-t .custom-control-label::before{
top: 1px !important;
}
.cat-left-box-t .custom-control-label::after {
top: 1px !important;
}
.cat-left-box-t label{
cursor: pointer!important;
}
.cat-right-main{
flex:1;
box-sizing: border-box;
}
.cat-right-header-out{
padding: 0 .5%;
box-sizing: border-box;
margin-bottom: 25px;
}
.cat-right-header{
width: 100%;
}
.cat-right-header2{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
background-color: #fff;
box-sizing: border-box;
padding: 20px;
border: 1px solid #EBEBEB;
}
.cat-right-links{
width: 100%;
margin-bottom: 10px;
font-size: 12px ;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
}
.cat-right-links i{
margin-right: 15px;
margin-left: 15px;
}
.cat-breadcrumb{
gap: 0;
}
.cat-breadcrumb a{
display: inline-flex;
align-items: center;
color: #748095;
font-size: 12px;
font-weight: 600;
line-height: 1.45;
text-decoration: none;
}
.cat-breadcrumb a + a{
margin-left: 14px;
}
.cat-breadcrumb a + a::before{
content: "/";
margin-right: 14px;
color: #c0c8d4;
font-weight: 500;
}
.cat-breadcrumb a:last-child{
color: #46546b;
}
.cat-breadcrumb a:hover{
color: #1f2c44;
}
.cat-right-header2-left{
flex:1;
}
.cat-right-header2-right{
width: 250px;
text-align: right;
}
.cat-right-header2-right img{
max-width: 100px;
max-height: 70px;
}
.cat-right-head-text{
width: 100%;
margin-bottom: 10px;
font-size: 20px ;
font-weight: bold;
}
.cat-right-desc{
width: 100%;
font-size: 13px ;
}
.cat-right-elements-out{
box-sizing: border-box;
padding: 0 .5%;
margin-bottom: 30px;
}
.cat-right-elements{
width: 100%;
box-sizing: border-box;
background-color: #fff;
padding: 15px 25px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
font-size: 13px ;
font-weight: 600;
}
.cat-right-elements-left{
width: auto;
}
.cat-right-elements-right{
width: auto;
display: flex;
align-items: center;
justify-content: flex-end;
}
.cat-right-elements-right-siralama{
margin-right: 20px;
}
.cat-right-elements-right-siralama select{
border-radius: 0 !important;
font-size: 13px ;
padding: 5px 15px;
border: 1px solid #DDD;
width: 400px;
}
.cat-right-elements-right-liste{
display: flex;
align-items: center;
}
.cat-right-elements-right-liste a{
margin-right: 15px;
}
.cat-right-elements-right-liste a:last-child{
margin-right: 0;
}
.cat-detail-products{
width: 100%;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.firsat-product-box{
width: 100%;
padding: 15px;
box-sizing: border-box;
margin-bottom: 30px;
position: relative;
display: flex;
flex-direction: column
}
.firsat-product-box:hover{
box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
}
.firsat-product-box-img{
width: 100%;
margin-bottom: 15px;
overflow: hidden;
position: relative;
}
.firsat-product-box-img img{
width: 100%;
transition-duration: 0.1s; transition-timing-function: linear;
}
.firsat-product-box-h{
font-size: 13px ;
height: 55px;
margin-bottom: 5px;
}
.firsat-product-box:hover .firsat-product-box-img img{
-webkit-transform: scale(1.03);-moz-transform: scale(1.03);-ms-transform: scale(1.03);-o-transform: scale(1.03);transform: scale(1.03);
}
.firsat-product-box:hover .cat-detail-products-box-cart-1{
opacity: 1;
margin-right:0;
}
/* Kategori Ürün Vitrini Kutuları */
.cat-detail-products-box-caturunvitrin{
width: 23.5%;
padding: 15px;
box-sizing: border-box;
margin: .75%;
margin-bottom: 13px;
position: relative;
display: flex;
flex-direction: column
}
.cat-detail-products-box-caturunvitrin:hover{
box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
}
.cat-detail-products-box-caturunvitrin-img{
width: 100%;
margin-bottom: 15px;
overflow: hidden;
position: relative;
}
.cat-detail-products-box-caturunvitrin-img img{
width: 100%;
transition-duration: 0.1s; transition-timing-function: linear;
}
.cat-detail-products-box-caturunvitrin:hover .cat-detail-products-box-caturunvitrin-img img{
-webkit-transform: scale(1.03);-moz-transform: scale(1.03);-ms-transform: scale(1.03);-o-transform: scale(1.03);transform: scale(1.03);
}
.cat-detail-products-box-caturunvitrin-img-3{
width: 100%;
margin-bottom: 15px;
overflow: hidden;
position: relative;
}
.cat-detail-products-box-caturunvitrin-img-3 img{
min-width: 100%;
transition-duration: 0.1s; transition-timing-function: linear;
}
.cat-detail-products-box-caturunvitrin:hover .cat-detail-products-box-caturunvitrin-img-3 img{
-webkit-transform: scale(1.03);-moz-transform: scale(1.03);-ms-transform: scale(1.03);-o-transform: scale(1.03);transform: scale(1.03);
}
.cat-detail-products-box-caturunvitrin-img-4{
width: 100%;
margin-bottom: 15px;
overflow: hidden;
position: relative;
}
.cat-detail-products-box-caturunvitrin-img-4 img{
min-width: 100%;
transition-duration: 0.1s; transition-timing-function: linear;
}
.cat-detail-products-box-caturunvitrin:hover .cat-detail-products-box-caturunvitrin-img-4 img{
-webkit-transform: scale(1.03);-moz-transform: scale(1.03);-ms-transform: scale(1.03);-o-transform: scale(1.03);transform: scale(1.03);
}
.cat-detail-products-box-caturunvitrin-img-5{
width: 100%;
margin-bottom: 15px;
overflow: hidden;
position: relative;
}
.cat-detail-products-box-caturunvitrin-img-5 img{
width: 100%;
transition-duration: 0.1s; transition-timing-function: linear;
}
.cat-detail-products-box-caturunvitrin:hover .cat-detail-products-box-caturunvitrin-img-5 img{
-webkit-transform: scale(1.03);-moz-transform: scale(1.03);-ms-transform: scale(1.03);-o-transform: scale(1.03);transform: scale(1.03);
}
.cat-detail-products-box-caturunvitrin-info{
width: 100%;
}
.cat-detail-products-box-caturunvitrin-fiyat{
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
margin-top: auto;
}
.cat-detail-products-box-caturunvitrin-fiyat{
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
margin-top: auto;
}
.urun-box-special-area-caturunvitrin{
box-sizing: border-box;
font-size: 12px ;
padding: 3px 5px;
margin-top: auto;
text-align: center;
}
.cat-detail-products-box-caturunvitrin:hover .cat-detail-products-box-cart-1{
opacity: 1;
margin-right:0;
}
.cat-detail-products-box-caturunvitrin-h{
width: 100%;
font-size: 14px ;
margin-bottom: 10px;
min-height: 41px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: flex-start;
}
/* <========SON=========>>> Kategori Ürün Vitrini Kutuları SON */
.cat-detail-products-box{
width: 23.5%;
padding: 15px;
box-sizing: border-box;
margin: .75%;
margin-bottom: 30px;
position: relative;
display: flex;
flex-direction: column
}
.cat-detail-products-box-big{
width: 31.5%;
padding: 15px;
box-sizing: border-box;
margin: .91%;
margin-bottom: 30px;
position: relative;
display: flex;
flex-direction: column
}
.cat-detail-products-box:hover{
box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
}
.cat-detail-products-box-big:hover{
box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
}
.cat-detail-products-box-img{
width: 100%;
margin-bottom: 15px;
overflow: hidden;
position: relative;
}
.cat-detail-products-box-img img{
transition-duration: 0.1s; transition-timing-function: linear;
width: 100%;
}
.cat-detail-products-box-img-big{
width: 100%;
margin-bottom: 15px;
overflow: hidden;
position: relative;
}
.cat-detail-products-box-img-big img{
width: 100%;
transition-duration: 0.1s; transition-timing-function: linear;
}
.cat-detail-products-box-list{
width: 100%;
padding: 15px;
box-sizing: border-box;
margin: .75%;
margin-bottom: 15px;
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
}
.cat-detail-products-box-img-list{
width: 140px;
overflow: hidden;
position: relative;
padding: 5px;
box-sizing: border-box;
margin-right: 15px;
}
.cat-detail-products-box-img-list img{
width: 100%;
height: 100%;
transition-duration: 0.1s; transition-timing-function: linear;
}
.product-grey-img{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
}
.cat-detail-products-box-h-list{
width: 100%;
font-size: 14px ;
margin-bottom: 10px;
height: 39px;
overflow: hidden;
}
.cat-detail-products-box-fiyat-list{
flex:1;
}
.cat-detail-products-box:hover .cat-detail-products-box-img img{
-webkit-transform: scale(1.03);-moz-transform: scale(1.03);-ms-transform: scale(1.03);-o-transform: scale(1.03);transform: scale(1.03);
}
.cat-detail-products-box-big:hover .cat-detail-products-box-img-big img{
-webkit-transform: scale(1.03);-moz-transform: scale(1.03);-ms-transform: scale(1.03);-o-transform: scale(1.03);transform: scale(1.03);
}
.cat-detail-products-box-special-out{
width: 100%;
position: relative;
}
.cat-detail-products-box-special{
padding: 1px 8px;
box-sizing: border-box;
font-size: 12px ;
font-weight: 600;
width: auto;
display: inline-block;
cursor: pointer;
margin-left: -16px;
margin-bottom: 5px;
}
.cat-detail-products-box-info{
width: 100%;
}
.cat-detail-products-box-info-list{
width: 62%;
}
.cat-detail-products-box-kargo{
position: absolute;
bottom:0;
padding: 5px 10px 5px 0;
font-size: 10px ;
font-weight: 700;
z-index: 2;
}
.cat-detail-products-box-stars{
width: 100%;
font-size: 19px ;
margin-bottom: 4px;
}
.cat-detail-products-box-marka{
width: 100%;
font-size: 13px ;
line-height: 16px;
font-weight: bold;
margin-bottom: 10px;
}
.cat-detail-products-box-h{
width: 100%;
font-size: 14px ;
margin-bottom: 10px;
min-height: 41px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: flex-start;
}
.cat-detail-products-box-fiyat{
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
margin-top: auto;
}
.cat-detail-products-box-fiyat-out{
width: auto;
}
.cat-detail-products-box-fiyat-eski{
font-size: 14px ;
text-decoration: line-through;
}
.cat-detail-products-box-fiyat-mevcut{
font-size: 19px ;
font-weight: bold;
}
.cat-detail-products-box-indirim{
padding:0 5px;
border: 1px solid #cf4a4a;
border-radius: 4px;
margin-left: auto;
font-size: 13px ;
font-weight: 700;
color: #cf4a4a;
display: inline-block;
background-color: #fff;
cursor: pointer;
}
.cat-detail-products-box-cart-2{
width: 100%;
padding: 15px 0 0 0;
margin-top: 15px;
display: flex;
align-items: center;
justify-content: flex-start;
}
.cat-detail-products-box-cart-2 button{
background-color: #4b71fc;
border: 0;
border-radius: 4px;
font-size: 13px ;
color: #fff;
padding: 5px 10px;
font-weight: 600;
margin-right: 10px;
transition-duration: 0.1s; transition-timing-function: linear;
}
.cat-detail-products-box-cart-2 button:hover{
background-color: #5e8ffc;
}
.cat-detail-products-box-cart-2 button:focus{
outline: none;
}
.cat-detail-products-box-cart-2 a{
padding: 3px 8px;
border-radius: 4px;
box-sizing: border-box;
display: block;
margin-right: 10px;
font-size: 13px;
/* RENKLERÄ° BURADAN TEMÄ°ZLÄ°YORUZ */
border: 1px solid transparent;
background-color: transparent;
color: inherit;
transition-duration: 0.1s;
transition-timing-function: linear;
}
.cat-detail-products-box-cart-2 a:hover{
/* hover’da da herhangi bir kırmızı verme */
background-color: transparent;
border-color: transparent;
color: inherit;
}
.compare-href{
padding: 1px 8px;
border-radius: 4px;
color: #fff !important;
background-color: #b4b4b4 !important;
box-sizing: border-box;
display: block;
border: 1px solid #B4B4B4 !important;
transition-duration: 0.1s; transition-timing-function: linear;
}
.compare-href:hover{
background-color: #9d9d9d !important;
color: #fff !important;
border: 1px solid #9d9d9d !important;
}
.cat-detail-products-box-cart-1{
position: absolute;
z-index: 9;
right: 10px;
top:10px;
display: flex;
flex-direction: column;
opacity: 0;
margin-right: -30px;
transition-duration: 0.1s; transition-timing-function: linear;
}
.cat-detail-products-box:hover .cat-detail-products-box-cart-1{
opacity: 1;
margin-right:0;
}
.cat-detail-products-box-big:hover .cat-detail-products-box-cart-1{
opacity: 1;
margin-right:0;
}
.cat-detail-products-box-list:hover .cat-detail-products-box-cart-1{
opacity: 1;
margin-right:0;
}
.cat-detail-products-box-cart-1 button{
border-radius: 100px;
background-color: #fff;
padding: 8px 11px;
border: 0;
box-shadow: 0 0 10px 0 rgba(0,0,0,.2);
margin:0;
transition-duration: 0.1s; transition-timing-function: linear;
color: #5e8ffc;
}
.cat-detail-products-box-cart-1 button i{
line-height: 16px;
font-size: 16px ;
}
.cat-detail-products-box-cart-1 button:hover{
background-color: #5e8ffc;
color: #fff;
}
.cat-detail-products-box-cart-1 button:focus{
outline: none;
}
.cat-detail-products-box-cart-1 a{
border-radius: 100px;
padding: 11px;
display: inline-block;
font-size: 16px;
text-align: center;
line-height: 16px;
box-shadow: 0 0 10px 0 rgba(0,0,0,.2);
margin-top: 10px;
/* BURADA DA KIRMIZIYI KALDIRIYORUZ */
background-color: #fff;
color: inherit;
transition-duration: 0.1s;
transition-timing-function: linear;
}
.cat-detail-products-box-cart-1 a:hover{
background-color: #fff;
color: inherit;
}
.category-detail-no-product-alert{
width: 99%;
margin: 0 auto;
box-sizing: border-box;
border: 1px dashed #EBEBEB;
background-color: #fff;
font-size: 14px ;
color: #000;
padding: 10px 20px;
}
.category-pagination-out{
width: 98.5%;
margin: 0 auto;
}
.urun-box-special-area{
box-sizing: border-box;
font-size: 12px ;
padding: 3px 5px;
margin-top: auto;
text-align: center;
}
.urun-box-special-area-list{
box-sizing: border-box;
font-size: 12px ;
padding: 3px 5px;
text-align: center;
}
/* <========SON=========>>> Kategori Sayfaları SON */
/* Nice Select */
.select {
display: none; }
.nice-select-cat-detail{
width: 400px;
}
.nice-select {
-webkit-tap-highlight-color: transparent;
background-color: #fff;
border: solid 1px #e8e8e8;
box-sizing: border-box;
clear: both;
cursor: pointer;
display: block;
float: left;
font-family: inherit;
font-size: 13px;
font-weight: normal;
outline: none;
padding-left: 18px;
padding-right: 30px;
padding-top: 6px;
padding-bottom: 6px;
position: relative;
text-align: left !important;
transition: all 0.2s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
white-space: nowrap;
}
.nice-select:hover {
border-color: #dbdbdb; }
.nice-select:active, .nice-select.open, .nice-select:focus {
border-color: #999; }
.nice-select:after {
border-bottom: 2px solid #999;
border-right: 2px solid #999;
content: '';
display: block;
height: 5px;
margin-top: -4px;
pointer-events: none;
position: absolute;
right: 12px;
top: 50%;
-webkit-transform-origin: 66% 66%;
transform-origin: 66% 66%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition: all 0.15s ease-in-out;
width: 5px; }
.nice-select.open:after {
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg); }
.nice-select.open .list {
opacity: 1;
pointer-events: auto;
-webkit-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
z-index: 99;
}
.nice-select.disabled {
border-color: #ededed;
color: #999;
pointer-events: none; }
.nice-select.disabled:after {
border-color: #cccccc; }
.nice-select.wide {
width: 100%; }
.nice-select.wide .list {
left: 0 !important;
right: 0 !important; }
.nice-select.right {
float: right; }
.nice-select.right .list {
left: auto;
right: 0; }
.nice-select.small {
font-size: 12px;
height: 36px;
line-height: 34px; }
.nice-select.small:after {
height: 4px;
width: 4px; }
.nice-select.small .option {
line-height: 34px;
min-height: 34px; }
.nice-select .list {
background-color: #fff;
box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
box-sizing: border-box;
margin-top: 4px;
opacity: 0;
overflow: hidden;
padding: 0;
pointer-events: none;
position: absolute;
top: 100%;
left: 0;
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform: scale(0.75) translateY(-21px);
transform: scale(0.75) translateY(-21px);
transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
z-index: 9; }
.nice-select .list:hover .option:not(:hover) {
background-color: transparent !important; }
.nice-select .option {
cursor: pointer;
font-weight: 400;
line-height: 40px;
list-style: none;
min-height: 40px;
outline: none;
padding-left: 18px;
padding-right: 29px;
text-align: left;
transition: all 0.2s; }
.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
background-color: #f6f6f6; }
.nice-select .option.selected {
font-weight: bold; }
/* <========SON=========>>> Nice Select SON */
/* Köşe Corner Ribbons */
.ribbon {
position: absolute;
left: -5px; top: -5px;
z-index: 1;
overflow: hidden;
width: 75px; height: 75px;
text-align: right;
}
.ribbon span {
font-size: 10px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
width: 100px;
display: block;
background: #79A70A;
background: linear-gradient(#2989d8 0%, #2989d8 100%);
position: absolute;
top: 19px; left: -21px;
}
.ribbon span::before {
content: "";
position: absolute; left: 0px; top: 100%;
z-index: -1;
border-left: 3px solid #2989d8;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #2989d8;
}
.ribbon span::after {
content: "";
position: absolute; right: 0px; top: 100%;
z-index: -1;
border-left: 3px solid transparent;
border-right: 3px solid #2989d8;
border-bottom: 3px solid transparent;
border-top: 3px solid #2989d8;
}
.ribbon3 {
margin-top: 15px;
width: 300px;
height: 36px;
line-height: 36px;
padding-left: 15px;
position: relative;
left: -30px;
top: 0;
background-color: #333;
color: #fff;
font-size: 13px ;
font-weight: 600;
text-align: right;
display: flex;
justify-content: space-between;
align-items: center;
}
.ribbon3:before, .ribbon3:after {
content: "";
position: absolute;
}
.ribbon3 i{
margin-right: 15px;
}
.ribbon3:before {
height: 0;
width: 0;
top: -8.5px;
left: 0.1px;
border-bottom: 9px solid #333;
border-left: 9px solid transparent;
}
.ribbon3:after {
height: 0;
width: 0;
right: -14.5px;
border-top: 18px solid transparent;
border-bottom: 18px solid transparent;
border-left: 15px solid #333;
}
/* <========SON=========>>> Köşe Corner Ribbons SON */
/* Kategori Detay Alt Kategori Stil 1 */
.category-sub-design-box {
width: 100%;
position: relative;
padding: 0;
}
.category-sub-design-box > li {
display: block;
overflow: hidden;
}
.category-sub-design-box > li > a {
display: flex;
align-items: center;
justify-content: flex-start;
font-weight: 600;
font-size: 13px ;
}
.category-sub-design-box > li > a i{
font-size:14px;
margin-right: 8px;
}
.category-sub-design-box-arrow{
margin-left: auto;
}
.category-sub-design-box > li > .megadrop {
opacity: 0;
visibility: hidden;
position: absolute;
list-style: none;
left: 232px;
min-width: 250px;
height: auto;
text-align: left;
padding: 12px;
z-index: 99;
overflow: hidden;
top:0;
margin-left: 10px;
}
.category-sub-design-box > li:hover .megadrop {
opacity: 1;
visibility: visible;
margin-left: 0px;
}
.category-sub-design-box > li:hover .megadrop .megadrop-cat-box{
width: 100%;
}
.category-sub-design-box > li > ul li ul, .category-sub-design-box li >ul li, .category-sub-design-box > li > .megadrop, .category-sub-design-box > li > ul, .category-sub-design-box > li {
transition-duration: 0.1s; transition-timing-function: linear;
}
.megadrop-cat-box{
text-decoration: none;
font-size: 13px ;
display: block;
width: 100%;
transition-duration: 0.1s; transition-timing-function: linear;
}
/* <========SON=========>>> Kategori Detay Alt Kategori Stil 1 SON */
/* Sayfalama Custom ///////////////////////////////////////////*/
.pagination > li > a,
.pagination > li > span {
color: #000;
}
.pagination>li.active>a {
background-color: #000 !important;
border-color: #000 !important;
}
.pagination>li.active>a:hover {
color:#FFF !important
}
.pagination>li>a:hover {
color:#000 !important
}
/* Sayfalama Custom SON ///////////////////////////////////////////*/
/* Range Slider - Fiyat Aralgıı ///////////////////////////////////////////*/
.filter-price {
width: 100%;
border: 0;
padding: 0;
margin: 0;
margin-top: 28px;
}
.price-filter-range-button{
margin-top: 10px;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
width: 100%;
}
.price-wrap {
display: flex;
justify-content: space-between;
margin-top: 20px;
align-items: center;
}
.price-field {
position: relative;
width: 100%;
height: auto;
box-sizing: border-box;
}
.price-wrap .price-wrap-outputbox{
margin-right: 15px;
box-sizing: border-box;
padding: 5px;
font-size: 13px ;
font-weight: 600;
}
.price-field input[type=range] {
position: absolute;
}
.price-field input[type=range] {
width: 100%;
height: 5px;
outline: 0;
box-sizing: border-box;
pointer-events: none;
-webkit-appearance: none;
}
.price-field input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
.price-field input[type=range]:active,
.price-field input[type=range]:focus {
outline: 0;
}
.price-field input[type=range]::-webkit-slider-thumb {
position: relative;
-webkit-appearance: none;
margin: 0;
border: 0;
outline: 0;
border-radius: 100%;
height: 13px;
width: 13px;
margin-top: -7px;
cursor: pointer;
pointer-events: all;
z-index: 100;
}
.price-field input[type=range]::-moz-range-thumb {
position: relative;
-webkit-appearance: none;
margin: 0;
border: 0;
outline: 0;
border-radius: 100%;
height: 13px;
width: 13px;
margin-top: -7px;
cursor: pointer;
pointer-events: all;
z-index: 100;
}
.price-field input[type=range]::-ms-thumb {
position: relative;
-webkit-appearance: none;
margin: 0;
border: 0;
outline: 0;
border-radius: 100%;
height: 13px;
width: 13px;
margin-top: -7px;
cursor: pointer;
pointer-events: all;
z-index: 100;
}
.price-field input[type=range]::-webkit-slider-runnable-track {
height: 0;
}
.price-field input[type=range]::-moz-range-track {
height: 0;
}
.price-field input[type=range]::-ms-track {
height: 0;
}
.price-wrap-1,
.price-wrap-2 {
display: flex;
margin-left:0;
}
.price-title {
margin-right: 5px;
}
.price-wrap_line {
margin: 6px 0 5px 5px;
}
/* Range Slider - Fiyat Aralgıı SON ///////////////////////////////////////////*/
/* Modal content area */
.category-cart-add-success-modal-footer{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background-color: #f8f8f8;
flex-wrap: wrap;
}
.category-cart-add-success-modal-footer-button{
width: 100%;
margin-bottom: 10px;
}
/* <========SON=========>>> Modal content area SON */
/* Global success / info popup polish */
#okArea,
#noArea,
#errorModal{
--ts-popup-accent: 102, 180, 131;
}
/* =========================================================
HEADER DROPDOWNS - DESKTOP HOVER FINAL LAYER
Absolute last override
========================================================= */
@media (min-width: 1200px){
.desktop-header-area .header-desktop-navbutton-box{
margin-left: 24px !important;
}
.desktop-header-area .header-desktop-navbutton-box > a,
.desktop-header-area .header-desktop-navbutton-box.ts-lang-wrap > a,
.desktop-header-area .header-desktop-navbutton-box.ts-currency-wrap > a{
min-width: 56px !important;
gap: 6px !important;
padding: 0 2px !important;
text-decoration: none !important;
}
.desktop-header-area .header-desktop-navbutton-box i{
font-size: 22px !important;
}
.desktop-header-area .header-desktop-navbutton-box.carting i{
font-size: 23px !important;
}
.desktop-header-area .header-desktop-navbutton-box-t{
max-width: none !important;
font-size: 11.5px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
letter-spacing: 0 !important;
white-space: nowrap !important;
}
.desktop-header-area .header-desktop-navbutton-box-count,
.desktop-header-area .header-desktop-navbutton-box-count-cart{
top: -2px !important;
left: 50% !important;
right: auto !important;
min-width: 17px !important;
height: 17px !important;
padding: 0 4px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transform: translateX(8px) !important;
font-size: 9px !important;
font-weight: 700 !important;
line-height: 1 !important;
box-shadow: none !important;
}
.desktop-header-area .ts-hover-dropdown{
position: relative !important;
}
.desktop-header-area .ts-hover-dropdown::after{
content: "" !important;
position: absolute !important;
top: 100% !important;
left: -18px !important;
right: -18px !important;
height: 18px !important;
}
.desktop-header-area .ts-hover-dropdown > .dropdown-menu{
display: block !important;
top: calc(100% + 12px) !important;
right: 0 !important;
left: auto !important;
margin-top: 0 !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translateY(8px) !important;
transition: opacity .16s ease, transform .16s ease, visibility .16s ease !important;
z-index: 1200 !important;
}
.desktop-header-area .ts-hover-dropdown:hover > .dropdown-menu,
.desktop-header-area .ts-hover-dropdown.ts-hover-open > .dropdown-menu,
.desktop-header-area .ts-hover-dropdown:focus-within > .dropdown-menu,
.desktop-header-area .ts-hover-dropdown > .dropdown-menu.show{
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translateY(0) !important;
}
.desktop-header-area .ts-hover-dropdown > .dropdown-menu::before{
top: -7px !important;
right: 22px !important;
width: 14px !important;
height: 14px !important;
background: #ffffff !important;
border-top: 1px solid rgba(31, 43, 68, 0.08) !important;
border-left: 1px solid rgba(31, 43, 68, 0.08) !important;
}
.desktop-header-area .dropdown-menu.user-drop,
.desktop-header-area .dropdown-menu.bell-drop,
.desktop-header-area .dropdown-menu.cart-drop,
.desktop-header-area .dropdown-menu.language-drop,
.desktop-header-area .dropdown-menu.currency-drop,
.desktop-header-area .dropdown-menu.favorites-drop{
padding: 14px !important;
border: 1px solid rgba(31, 43, 68, 0.08) !important;
border-radius: 16px !important;
background: #ffffff !important;
box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12) !important;
backdrop-filter: none !important;
}
.desktop-header-area .dropdown-menu.user-drop{
width: 280px !important;
}
.desktop-header-area .dropdown-menu.bell-drop{
width: 360px !important;
}
.desktop-header-area .dropdown-menu.cart-drop{
width: 392px !important;
}
.desktop-header-area .dropdown-menu.language-drop,
.desktop-header-area .dropdown-menu.currency-drop{
min-width: 216px !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.desktop-header-area .dropdown-menu.favorites-drop{
width: 220px !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.desktop-header-area .dropdown-bell-header,
.desktop-header-area .dropdown-cart-header{
margin: 0 0 10px !important;
padding: 0 0 12px !important;
border: 0 !important;
border-bottom: 1px solid #edf1f5 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
color: #1f2b44 !important;
font-size: 12px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
}
.desktop-header-area .dropdown-bell-header::before,
.desktop-header-area .dropdown-cart-header::before,
.desktop-header-area .dropdown-bell-list-box-s::before{
display: none !important;
}
.desktop-header-area .dropdown-bell-list,
.desktop-header-area .dropdown-bell-overflow,
.desktop-header-area .dropdown-cart-overflow{
gap: 0 !important;
max-height: 360px !important;
padding-right: 2px !important;
margin-right: 0 !important;
}
.desktop-header-area .dropdown-bell-list-box,
.desktop-header-area .dropdown-cart-itembox{
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: none !important;
box-shadow: none !important;
}
.desktop-header-area .dropdown-bell-list-box-h,
.desktop-header-area .dropdown-cart-itembox{
border: 0 !important;
border-bottom: 1px solid #edf1f5 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
transform: none !important;
}
.desktop-header-area .dropdown-bell-list-box-h{
padding: 12px 0 !important;
gap: 12px !important;
}
.desktop-header-area .dropdown-cart-itembox{
padding: 12px 0 !important;
}
.desktop-header-area .dropdown-bell-list-box-h:hover,
.desktop-header-area .dropdown-cart-itembox:hover{
border-color: #edf1f5 !important;
background: none !important;
box-shadow: none !important;
transform: none !important;
}
.desktop-header-area .dropdown-bell-list-box:last-child .dropdown-bell-list-box-h,
.desktop-header-area .dropdown-cart-itembox:last-child{
border-bottom: 0 !important;
}
.desktop-header-area .dropdown-bell-list-box-h-icon{
width: 34px !important;
min-width: 34px !important;
height: 34px !important;
border-radius: 10px !important;
background: #f7f8fa !important;
color: #8a6839 !important;
font-size: 15px !important;
}
.desktop-header-area .dropdown-bell-list-box-baslik{
padding-right: 72px !important;
font-size: 13.5px !important;
font-weight: 600 !important;
line-height: 1.45 !important;
color: #24324a !important;
}
.desktop-header-area .dropdown-bell-list-box-date{
top: 12px !important;
right: 0 !important;
padding: 4px 7px !important;
border: 1px solid #e6ebf2 !important;
border-radius: 999px !important;
background: #f8fafc !important;
color: #7a8699 !important;
font-size: 10px !important;
font-weight: 600 !important;
}
.desktop-header-area .dropdown-bell-list-box-s{
display: block !important;
margin-top: 4px !important;
color: #667489 !important;
font-size: 12px !important;
font-weight: 500 !important;
line-height: 1.45 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
.desktop-header-area .dropdown-menu.user-drop .dropdown-user-area-header{
margin-bottom: 10px !important;
padding: 0 !important;
border: 0 !important;
background: none !important;
box-shadow: none !important;
}
.desktop-header-area .dropdown-menu.user-drop a.dropdown-userarea-header{
min-height: 0 !important;
padding: 0 0 12px !important;
border: 0 !important;
border-bottom: 1px solid #edf1f5 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
font-size: 13.5px !important;
}
.desktop-header-area .dropdown-menu.user-drop a.dropdown-userarea-header i,
.desktop-header-area .dropdown-menu.user-drop .dropdown-user-area-link-area a i{
width: 28px !important;
height: 28px !important;
border-radius: 8px !important;
background: #f7f8fa !important;
color: #8a6839 !important;
font-size: 14px !important;
}
.desktop-header-area .dropdown-menu.user-drop .dropdown-user-area-link-area{
margin-top: 0 !important;
padding-top: 2px !important;
border-top: 0 !important;
}
.desktop-header-area .dropdown-menu.user-drop .dropdown-user-area-link-area a{
min-height: 42px !important;
padding: 10px 0 !important;
border: 0 !important;
border-bottom: 1px solid #edf1f5 !important;
border-radius: 0 !important;
background: none !important;
font-size: 13px !important;
font-weight: 500 !important;
box-shadow: none !important;
}
.desktop-header-area .dropdown-menu.user-drop .dropdown-user-area-link-area a:last-child{
border-bottom: 0 !important;
}
.desktop-header-area .dropdown-menu.user-drop .dropdown-user-area-link-area a:hover{
background: none !important;
color: #1f2b44 !important;
transform: none !important;
}
.desktop-header-area .dropdown-menu.user-drop .dropdown-user-area-link-area a strong{
min-width: 26px !important;
padding: 4px 6px !important;
background: #f4f7fa !important;
font-size: 10px !important;
font-weight: 700 !important;
}
.desktop-header-area .dropdown-menu.user-drop .dropdown-user-area-header a.button-blue,
.desktop-header-area .dropdown-menu.user-drop .dropdown-user-area-header a.button-green,
.desktop-header-area .dropdown-bell-fullhref a,
.desktop-header-area .dropdown-menu.cart-drop a.button-blue{
min-height: 42px !important;
padding: 10px 14px !important;
border-radius: 12px !important;
font-size: 11px !important;
letter-spacing: 0.04em !important;
}
.desktop-header-area .dropdown-cart-itembox-content-img{
width: 64px !important;
min-width: 64px !important;
height: 78px !important;
border-radius: 12px !important;
background: #f8fafc !important;
box-shadow: none !important;
}
.desktop-header-area .dropdown-cart-itembox-content-t-1{
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
}
.desktop-header-area .dropdown-cart-itembox-content-t-2,
.desktop-header-area .dropdown-cart-itembox-content-t-3{
color: #667489 !important;
font-size: 11.5px !important;
letter-spacing: 0 !important;
}
.desktop-header-area .dropdown-cart-itembox-trash a{
width: 32px !important;
height: 32px !important;
border-radius: 10px !important;
background: #f7f8fa !important;
color: #8a6839 !important;
}
.desktop-header-area .dropdown-cart-itembox-trash a:hover{
background: #f1f4f8 !important;
color: #6f522e !important;
transform: none !important;
}
.desktop-header-area .dropdown-cart-priceTotal{
margin: 12px 0 !important;
padding: 12px 0 0 !important;
border: 0 !important;
border-top: 1px solid #edf1f5 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
}
.desktop-header-area .dropdown-cart-priceTotal-l{
color: #667489 !important;
font-size: 11px !important;
letter-spacing: 0.04em !important;
}
.desktop-header-area .dropdown-cart-priceTotal-r{
font-size: 16px !important;
}
.desktop-header-area .header-choice-item{
min-height: 42px !important;
padding: 10px 0 !important;
border: 0 !important;
border-bottom: 1px solid #edf1f5 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.35 !important;
transform: none !important;
}
.desktop-header-area .header-choice-item + .header-choice-item{
margin-top: 0 !important;
}
.desktop-header-area .header-choice-item:last-child{
border-bottom: 0 !important;
}
.desktop-header-area .header-choice-item:hover,
.desktop-header-area .header-choice-item.is-active{
background: none !important;
color: #1f2b44 !important;
box-shadow: none !important;
transform: none !important;
}
.desktop-header-area .header-choice-flag,
.desktop-header-area .header-choice-symbol{
width: 30px !important;
height: 30px !important;
flex: 0 0 30px !important;
border-radius: 10px !important;
}
.desktop-header-area .header-choice-symbol{
background: #f7f8fa !important;
color: #8a6839 !important;
}
.desktop-header-area .header-choice-symbol i{
font-size: 16px !important;
line-height: 1 !important;
}
.desktop-header-area .header-choice-label{
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
}
.desktop-header-area .header-choice-item:not(.is-active) .header-choice-check{
opacity: 0 !important;
}
.desktop-header-area .dropdown-bell-no,
.desktop-header-area .dropdown-cart-noitem{
min-height: 170px !important;
padding: 24px 18px !important;
border: 1px solid #edf1f5 !important;
border-radius: 14px !important;
background: #ffffff !important;
}
.desktop-header-area .dropdown-bell-no i,
.desktop-header-area .dropdown-cart-noitem i{
width: 52px !important;
height: 52px !important;
border-radius: 14px !important;
background: #f7f8fa !important;
font-size: 24px !important;
box-shadow: none !important;
}
.desktop-header-area .dropdown-bell-no-s,
.desktop-header-area .dropdown-cart-noitem-s{
max-width: 28ch !important;
color: #667489 !important;
font-size: 12px !important;
}
}
/* Payment page refresh */
.ccard-payment-page-main{
width: calc(100% - 48px);
max-width: 1360px;
margin: 0 auto;
overflow: visible;
padding: 42px 0 72px;
}
.ccard-payment-paytr-2-main,
.ccard-payment-iyzico-main{
display: grid;
grid-template-columns: minmax(320px, 430px) minmax(0, 1fr);
gap: 28px;
align-items: start;
}
.ccard-payment-paytr-1-main,
.ccard-payment-paytr-2-left-in,
.ccard-payment-paytr-2-right,
.ccard-payment-iyzico-left,
.ccard-payment-iyzico-right{
position: relative;
overflow: hidden;
border: 1px solid #d9e1ed;
border-radius: 28px;
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
box-shadow: 0 22px 50px rgba(18, 31, 52, 0.08), inset 0 1px 0 rgba(255,255,255,0.9);
}
.ccard-payment-paytr-1-main::before,
.ccard-payment-paytr-2-left-in::before,
.ccard-payment-paytr-2-right::before,
.ccard-payment-iyzico-left::before,
.ccard-payment-iyzico-right::before{
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 6px;
background: linear-gradient(90deg, #223553 0%, #30496f 58%, #d3b17f 100%);
}
.ccard-payment-paytr-1-main::after,
.ccard-payment-paytr-2-left-in::after,
.ccard-payment-paytr-2-right::after,
.ccard-payment-iyzico-left::after,
.ccard-payment-iyzico-right::after{
content: "";
position: absolute;
top: -120px;
right: -120px;
width: 280px;
height: 280px;
border-radius: 50%;
background: radial-gradient(circle, rgba(211, 177, 127, 0.16) 0%, rgba(211, 177, 127, 0) 72%);
pointer-events: none;
}
.ccard-payment-paytr-2-left,
.ccard-payment-iyzico-left{
width: auto;
margin: 0;
}
.ccard-payment-paytr-2-right,
.ccard-payment-iyzico-right{
width: auto;
margin: 0;
padding: 28px;
}
.ccard-payment-paytr-1-main{
max-width: 860px;
padding: 36px 0;
}
.ccard-payment-paytr-1-h,
.ccard-payment-paytr-2-left-h,
.ccard-payment-iyzico-left-h{
width: auto;
margin: 0;
padding: 34px 32px 10px;
font-size: 20px;
line-height: 1.2;
font-weight: 800;
letter-spacing: -0.02em;
color: #1d2c46;
}
.ccard-payment-paytr-1-h{
padding-top: 16px;
}
.ccard-payment-paytr-1-h2,
.ccard-payment-paytr-2-left-h2,
.ccard-payment-iyzico-left-h2{
width: auto;
margin: 0;
padding: 0 32px 24px;
font-size: 14px;
line-height: 1.75;
font-weight: 500;
color: #5d6c82;
}
.ccard-payment-paytr-1-h3,
.ccard-payment-paytr-2-left-h3,
.ccard-payment-iyzico-left-h3,
.ccard-payment-iyzico-uyari{
width: auto;
margin: 0 24px 18px;
padding: 14px 16px;
border: 1px solid #dde5ef;
border-radius: 18px;
background: #f4f7fb;
box-sizing: border-box;
font-size: 13px;
line-height: 1.7;
color: #526178;
}
.ccard-payment-paytr-2-left-in-yellow{
width: auto;
margin: 0 0 20px;
border: 1px solid #ead29f;
border-radius: 22px;
background: linear-gradient(135deg, #fff7e3 0%, #fbecc5 100%);
box-shadow: 0 16px 30px rgba(188, 146, 59, 0.14);
padding: 16px 18px;
font-size: 13px;
line-height: 1.7;
color: #7b5a1d;
}
.ccard-payment-iyzico-left-paycount-sm{
padding: 18px 32px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
border-top: 1px solid rgba(29, 44, 70, 0.08);
}
.ccard-payment-iyzico-left-paycount-sm .ccard-payment-iyzico-left-paycount-text1{
font-size: 14px;
font-weight: 700;
color: #5c6c83;
}
.ccard-payment-iyzico-left-paycount-sm .ccard-payment-iyzico-left-paycount-text2-sm{
font-size: 18px;
line-height: 1.2;
font-weight: 800;
color: #1d2c46;
}
.ccard-payment-paytr-2-left-paycount,
.ccard-payment-iyzico-left-paycount{
margin: 18px 24px 24px;
padding: 22px 20px;
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 18px;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 22px;
background: linear-gradient(135deg, #223553 0%, #30496f 100%);
box-shadow: 0 18px 34px rgba(34, 53, 83, 0.18);
}
.ccard-payment-paytr-2-left-paycount .ccard-payment-paytr-2-left-paycount-text1,
.ccard-payment-iyzico-left-paycount .ccard-payment-iyzico-left-paycount-text1{
font-size: 11px;
line-height: 1.4;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.74);
}
.ccard-payment-paytr-2-left-paycount .ccard-payment-paytr-2-left-paycount-text2,
.ccard-payment-iyzico-left-paycount .ccard-payment-iyzico-left-paycount-text2{
font-size: 36px;
line-height: 1;
font-weight: 800;
color: #ffffff;
text-align: right;
}
.ccard-payment-paytr-1-frame,
.ccard-payment-paytr-2-right-in{
position: relative;
z-index: 1;
}
.ccard-payment-iyzico-right .iyzi-form,
.ccard-payment-iyzico-right #iyzipay-checkout-form{
position: relative;
z-index: 1;
color: #22314a;
}
.ccard-payment-iyzico-right .iyzi-form .iyzi-top{
background: transparent !important;
box-shadow: none !important;
}
.ccard-payment-iyzico-right .iyzi-form .iyzi-section.iyzi-options,
.ccard-payment-iyzico-right .css-txetxa-TabsList,
.ccard-payment-iyzico-right [class*="TabsList"]{
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 0 0 20px !important;
padding: 0 !important;
background: transparent !important;
}
.ccard-payment-iyzico-right .iyzi-form .iyzi-section.iyzi-options .iyzi-pay-by,
.ccard-payment-iyzico-right .css-txetxa-TabsList > *,
.ccard-payment-iyzico-right [class*="TabsList"] > *{
width: 100% !important;
min-height: 64px;
border-radius: 18px !important;
border: 1px solid #d8e1ed !important;
background: linear-gradient(180deg, #fbfcfe 0%, #f3f6fb 100%) !important;
box-shadow: none !important;
display: flex !important;
align-items: center;
justify-content: center;
font-weight: 700;
color: #22314a !important;
}
.ccard-payment-iyzico-right .iyzi-form .iyzi-section.iyzi-options .iyzi-pay-by.active,
.ccard-payment-iyzico-right .css-txetxa-TabsList > *[aria-selected="true"],
.ccard-payment-iyzico-right [class*="TabsList"] > *[aria-selected="true"]{
border-color: #223553 !important;
background: linear-gradient(135deg, #223553 0%, #30496f 100%) !important;
box-shadow: 0 16px 28px rgba(34, 53, 83, 0.18) !important;
color: #ffffff !important;
}
.ccard-payment-iyzico-right .iyzi-form .bkm-explanation,
.ccard-payment-iyzico-right .iyzi-form .iyzi-card-fields,
.ccard-payment-iyzico-right .iyzi-form .extra-security-3d.save-card-active,
.ccard-payment-iyzico-right .iyzi-form .buyer-protection-holder,
.ccard-payment-iyzico-right .iyzi-form .save-card,
.ccard-payment-iyzico-right .iyzi-form .iyzi-all-installment-section{
border: 1px solid #dde5ef !important;
border-radius: 24px !important;
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
box-shadow: 0 16px 34px rgba(31, 43, 68, 0.07);
}
.ccard-payment-iyzico-right .iyzi-form input{
border: 1px solid #d9e1ed !important;
border-radius: 16px !important;
background: #ffffff !important;
box-sizing: border-box;
padding: 16px 16px 16px 46px !important;
width: 100% !important;
min-height: 58px !important;
font-size: 15px !important;
color: #22314a !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.92);
}
.ccard-payment-iyzico-right .iyzi-form input::placeholder{
color: #8a96a8 !important;
}
.ccard-payment-iyzico-right .iyzi-form .iyzi-ico{
left: 16px;
top: 50%;
width: 18px;
height: 18px;
transform: translateY(-50%);
opacity: 0.58;
}
.ccard-payment-iyzico-right .css-1o39wq4-Popup-Box-Box,
.ccard-payment-iyzico-right [class*="Popup-Box-Box"]{
max-width: 100% !important;
}
.ccard-payment-iyzico-right .css-xdepok-Screens,
.ccard-payment-iyzico-right [class*="Screens"]{
padding: 0 !important;
background: transparent !important;
}
.ccard-payment-iyzico-right .css-6ngtxq-Input,
.ccard-payment-iyzico-right .css-kpjilz-Icon,
.ccard-payment-iyzico-right .css-6nvnpj-StyledInputMask{
height: 58px !important;
}
.ccard-payment-iyzico-right #iyzipay-checkout-form .showPopup,
.ccard-payment-iyzico-right .iyzi-form a.ode,
.ccard-payment-iyzico-right button[type="submit"]{
width: 100%;
min-height: 62px;
border-radius: 18px !important;
border: 1px solid #223553 !important;
background: linear-gradient(135deg, #223553 0%, #30496f 100%) !important;
color: #ffffff !important;
font-size: 17px !important;
font-weight: 800 !important;
letter-spacing: 0.04em;
box-shadow: 0 18px 34px rgba(34, 53, 83, 0.18) !important;
transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.ccard-payment-iyzico-right #iyzipay-checkout-form .showPopup:hover,
.ccard-payment-iyzico-right .iyzi-form a.ode:hover,
.ccard-payment-iyzico-right button[type="submit"]:hover{
transform: translateY(-1px);
box-shadow: 0 22px 40px rgba(34, 53, 83, 0.22) !important;
filter: brightness(1.02);
}
.ccard-payment-iyzico-right #iyzipay-checkout-form .showPopup[disabled],
.ccard-payment-iyzico-right .iyzi-form a.ode[disabled],
.ccard-payment-iyzico-right button[type="submit"][disabled]{
border-color: #c8d1dc !important;
background: #c8d1dc !important;
box-shadow: none !important;
color: #5f6b7f !important;
transform: none;
filter: none;
}
@media (max-width: 1200px){
.ccard-payment-page-main{
width: calc(100% - 32px);
}
.ccard-payment-paytr-2-main,
.ccard-payment-iyzico-main{
grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
}
}
@media (max-width: 991px){
.ccard-payment-page-main{
width: calc(100% - 24px);
padding: 28px 0 48px;
}
.ccard-payment-paytr-2-main,
.ccard-payment-iyzico-main{
grid-template-columns: 1fr;
gap: 20px;
}
.ccard-payment-paytr-2-right,
.ccard-payment-iyzico-right{
padding: 22px;
}
}
@media (max-width: 767px){
.ccard-payment-page-main{
width: calc(100% - 20px);
padding: 22px 0 40px;
}
.ccard-payment-paytr-1-main,
.ccard-payment-paytr-2-left-in,
.ccard-payment-paytr-2-right,
.ccard-payment-iyzico-left,
.ccard-payment-iyzico-right{
border-radius: 22px;
}
.ccard-payment-paytr-1-h,
.ccard-payment-paytr-2-left-h,
.ccard-payment-iyzico-left-h{
padding: 28px 20px 10px;
font-size: 18px;
}
.ccard-payment-paytr-1-h2,
.ccard-payment-paytr-2-left-h2,
.ccard-payment-iyzico-left-h2{
padding: 0 20px 18px;
font-size: 13px;
}
.ccard-payment-paytr-1-h3,
.ccard-payment-paytr-2-left-h3,
.ccard-payment-iyzico-left-h3,
.ccard-payment-iyzico-uyari{
margin: 0 16px 16px;
padding: 13px 14px;
}
.ccard-payment-paytr-2-left-paycount,
.ccard-payment-iyzico-left-paycount{
margin: 14px 16px 18px;
padding: 18px 16px;
flex-direction: column;
align-items: flex-start;
}
.ccard-payment-paytr-2-left-paycount .ccard-payment-paytr-2-left-paycount-text2,
.ccard-payment-iyzico-left-paycount .ccard-payment-iyzico-left-paycount-text2{
font-size: 30px;
text-align: left;
}
.ccard-payment-iyzico-left-paycount-sm{
padding: 16px 20px;
flex-direction: column;
align-items: flex-start;
}
.ccard-payment-paytr-2-right,
.ccard-payment-iyzico-right{
padding: 18px;
}
.ccard-payment-iyzico-right .iyzi-form .iyzi-section.iyzi-options,
.ccard-payment-iyzico-right .css-txetxa-TabsList,
.ccard-payment-iyzico-right [class*="TabsList"]{
grid-template-columns: 1fr;
}
}
#noArea{
--ts-popup-accent: 85, 140, 255;
}
#errorModal{
--ts-popup-accent: 224, 154, 49;
}
#okArea .modal-dialog,
#noArea .modal-dialog,
#errorModal .modal-dialog{
max-width: 404px;
}
#okArea.fade .modal-dialog,
#noArea.fade .modal-dialog,
#errorModal.fade .modal-dialog{
transform: translate3d(0, 24px, 0) scale(0.97);
opacity: 0;
transition: transform .32s cubic-bezier(0.22, 1, 0.36, 1), opacity .24s ease;
}
#okArea.show .modal-dialog,
#noArea.show .modal-dialog,
#errorModal.show .modal-dialog{
transform: translate3d(0, 0, 0) scale(1);
opacity: 1;
}
#okArea .modal-content,
#noArea .modal-content,
#errorModal .modal-content{
position: relative;
border: 0;
border-radius: 30px;
overflow: hidden;
background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
box-shadow: 0 30px 80px rgba(15, 25, 42, 0.28);
}
#okArea .modal-content:before,
#noArea .modal-content:before,
#errorModal .modal-content:before{
content: "";
position: absolute;
inset: 0 0 auto;
height: 5px;
background: linear-gradient(90deg, rgba(var(--ts-popup-accent), 0.98), rgba(var(--ts-popup-accent), 0.22));
z-index: 1;
}
#okArea .close,
#noArea .close,
#errorModal .close{
width: 40px;
height: 40px;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.9);
color: #1c2d47 !important;
text-shadow: none;
opacity: 1;
font-size: 30px;
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
right: 16px !important;
top: 16px !important;
z-index: 3;
box-shadow: 0 12px 28px rgba(18, 27, 45, 0.16);
transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
#okArea .close:hover,
#okArea .close:focus,
#noArea .close:hover,
#noArea .close:focus,
#errorModal .close:hover,
#errorModal .close:focus{
background: #ffffff;
color: #0f1f3d !important;
transform: translateY(-1px);
box-shadow: 0 16px 32px rgba(18, 27, 45, 0.18);
}
#okArea .modal-content > div:first-of-type,
#noArea .modal-content > div:first-of-type,
#errorModal .modal-content > div:first-of-type{
padding: 42px 34px 24px !important;
background:
radial-gradient(circle at 50% 0, rgba(var(--ts-popup-accent), 0.22), rgba(var(--ts-popup-accent), 0) 56%),
linear-gradient(180deg, #ffffff 0%, #f7fafc 100%) !important;
text-align: center;
}
#okArea .modal-content > div:first-of-type i,
#noArea .modal-content > div:first-of-type i,
#errorModal .modal-content > div:first-of-type i{
width: 84px;
height: 84px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
margin-bottom: 18px;
font-size: 54px !important;
line-height: 1 !important;
border: 1px solid rgba(var(--ts-popup-accent), 0.24);
background: linear-gradient(180deg, rgba(var(--ts-popup-accent), 0.16), rgba(var(--ts-popup-accent), 0.07));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 12px 24px rgba(var(--ts-popup-accent), 0.14);
}
#okArea .modal-content > div:first-of-type br,
#noArea .modal-content > div:first-of-type br,
#errorModal .modal-content > div:first-of-type br{
display: none;
}
#okArea .modal-content > div:first-of-type > div,
#noArea .modal-content > div:first-of-type > div,
#errorModal .modal-content > div:first-of-type > div{
margin-left: auto;
margin-right: auto;
max-width: 286px;
}
#okArea .modal-content > div:first-of-type > div:first-of-type,
#noArea .modal-content > div:first-of-type > div:first-of-type,
#errorModal .modal-content > div:first-of-type > div:first-of-type{
font-size: 29px !important;
line-height: 1.08;
font-weight: 700 !important;
letter-spacing: -0.035em;
margin-bottom: 14px !important;
color: #162741 !important;
}
#okArea .modal-content > div:first-of-type > div + div,
#noArea .modal-content > div:first-of-type > div + div,
#errorModal .modal-content > div:first-of-type > div + div{
font-size: 15.5px !important;
line-height: 1.72;
color: #60718a !important;
}
#okArea .modal-content > div:first-of-type > div + div + div,
#noArea .modal-content > div:first-of-type > div + div + div,
#errorModal .modal-content > div:first-of-type > div + div + div{
margin-top: 12px;
font-size: 13px !important;
line-height: 1.6;
color: #7e8ca0 !important;
}
#okArea .category-cart-add-success-modal-footer,
#noArea .category-cart-add-success-modal-footer,
#errorModal .category-cart-add-success-modal-footer{
padding: 0 34px 34px;
background: linear-gradient(180deg, rgba(247, 250, 252, 0.18) 0%, #eef3f8 100%);
}
#okArea .category-cart-add-success-modal-footer .button-blue,
#okArea .category-cart-add-success-modal-footer button,
#noArea .category-cart-add-success-modal-footer .button-blue,
#noArea .category-cart-add-success-modal-footer button,
#errorModal .category-cart-add-success-modal-footer .button-blue,
#errorModal .category-cart-add-success-modal-footer button{
width: 100% !important;
min-height: 56px;
border: 0;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #1f2f4c 0%, #2a3b60 100%);
color: #ffffff !important;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.03em;
box-shadow: 0 18px 32px rgba(17, 30, 53, 0.22);
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
#okArea .category-cart-add-success-modal-footer .button-blue:hover,
#okArea .category-cart-add-success-modal-footer .button-blue:focus,
#okArea .category-cart-add-success-modal-footer button:hover,
#okArea .category-cart-add-success-modal-footer button:focus,
#noArea .category-cart-add-success-modal-footer .button-blue:hover,
#noArea .category-cart-add-success-modal-footer .button-blue:focus,
#noArea .category-cart-add-success-modal-footer button:hover,
#noArea .category-cart-add-success-modal-footer button:focus,
#errorModal .category-cart-add-success-modal-footer .button-blue:hover,
#errorModal .category-cart-add-success-modal-footer .button-blue:focus,
#errorModal .category-cart-add-success-modal-footer button:hover,
#errorModal .category-cart-add-success-modal-footer button:focus{
transform: translateY(-1px);
box-shadow: 0 22px 38px rgba(17, 30, 53, 0.28);
filter: brightness(1.03);
}
@media (max-width: 575.98px){
#okArea .modal-dialog,
#noArea .modal-dialog,
#errorModal .modal-dialog{
max-width: calc(100vw - 24px);
margin: 12px auto;
}
#okArea .modal-content,
#noArea .modal-content,
#errorModal .modal-content{
border-radius: 26px;
}
#okArea .modal-content > div:first-of-type,
#noArea .modal-content > div:first-of-type,
#errorModal .modal-content > div:first-of-type{
padding: 36px 22px 20px !important;
}
#okArea .category-cart-add-success-modal-footer,
#noArea .category-cart-add-success-modal-footer,
#errorModal .category-cart-add-success-modal-footer{
padding: 0 22px 22px;
}
#okArea .modal-content > div:first-of-type > div:first-of-type,
#noArea .modal-content > div:first-of-type > div:first-of-type,
#errorModal .modal-content > div:first-of-type > div:first-of-type{
font-size: 25px !important;
}
}
/* <========SON=========>>> Global success / info popup polish SON */
/* Tanıtım Videosu Kodları */
.video-play-button {
position: absolute;
z-index: 10;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
box-sizing: content-box;
display: block;
width: 32px;
height: 44px;
border-radius: 50%;
margin-left: auto;
margin-right: auto;
left:0;
right: 0;
}
.video-play-button:before {
content: "";
position: absolute;
z-index: 0;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
display: block;
width: 80px;
height: 80px;
border-radius: 50%;
-webkit-animation: pulse-border 1500ms ease-out infinite;
animation: pulse-border 1500ms ease-out infinite;
}
.video-play-button:after {
content: "";
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
display: block;
width: 80px;
height: 80px;
border-radius: 50%;
transition: all 200ms;
}
.video-play-button img {
position: relative;
z-index: 3;
max-width: 100%;
width: auto;
height: auto;
}
.video-play-button span {
display: block;
position: relative;
z-index: 3;
width: 0;
height: 0;
border-top: 22px solid transparent;
border-bottom: 22px solid transparent;
margin-left: 5px;
}
@-webkit-keyframes pulse-border {
0% {
-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
opacity: 1;
}
100% {
-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
opacity: 0;
}
}
@keyframes pulse-border {
0% {
-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
opacity: 1;
}
100% {
-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
opacity: 0;
}
}
/* <========SON=========>>> Tanıtım Videosu Kodları SON */
/* Açılır menu stil 2 */
.dropMenu-style-2{
}
/* <========SON=========>>> Açılır menu stil 2 SON */
/* User Login Modal Codes */
.modal-in-login{
width: 100%;
padding: 50px;
box-sizing: border-box;
}
.modal-in-login-head{
width: 100%;
margin-bottom: 25px;
box-sizing: border-box;
}
.modal-in-login-head-h{
width: 100%;
height: 2px;
border-bottom: 1px solid #ebebeb;
margin-bottom: 25px;
display: flex;
align-items: center;
justify-content: flex-start;
}
.modal-in-login-head-h-text{
width: auto;
margin: 0 auto;
display: inline-block;
padding: 0 15px;
background-color: #fff;
font-size: 24px ;
font-weight: 600;
color: #333;
}
.modal-in-login-head-s{
width: 100%;
text-align: center;
font-size: 13px ;
color: #666;
}
.modal-in-login-form{
width: 100%;
margin-bottom: 15px;
box-sizing: border-box;
}
.modal-in-login-form-reset-password{
font-size: 14px ;
font-weight: 600;
color: #000;
text-decoration: underline;
}
.modal-in-login-form-reset-password:hover{
color: #000;
}
.modal-in-login-foot{
width: 100%;
margin-top: 30px;
box-sizing: border-box;
}
/* <========SON=========>>> User Login Modal Codes SON */
/* Product Comment Add Modal */
.modal-in-comment{
width: 100%;
padding: 50px;
box-sizing: border-box;
position: relative;
}
.modal-in-comment-head{
width: 100%;
margin-bottom: 25px;
box-sizing: border-box;
}
.modal-in-comment-head-h{
width: 100%;
height: 2px;
border-bottom: 1px solid #ebebeb;
margin-bottom: 25px;
display: flex;
align-items: center;
justify-content: flex-start;
}
.modal-in-comment-head-h-text{
width: auto;
margin: 0 auto;
display: inline-block;
padding: 0 15px;
background-color: #fff;
font-size: 19px ;
font-weight: 600;
color: #333;
}
.modal-in-comment-head-s{
width: 100%;
text-align: center;
font-size: 13px ;
color: #666;
}
.modal-in-comment-form{
width: 100%;
box-sizing: border-box;
}
.modal-in-comment-form-star{
width: 100%;
}
.modal-in-comment-foot{
width: 100%;
margin-top: 30px;
box-sizing: border-box;
}
.modal-in-comment-form-star label{
font-size:20px !important ;
}
.modal-in-comment-close{
background:none;
border: 0;
position: absolute;
font-size: 24px ;
right: 20px;
top:0
}
/* === Ürün görselleri: çerçeveyi kaldır + 2:3 oran + tam sığdır === */
/* Kart hover gölgesini kapat */
.cat-detail-products-box:hover,
.cat-detail-products-box-big:hover {
box-shadow: none !important;
}
/* Görsel kutusu: çerçeve/padding yok, 2:3 oran */
.cat-detail-products-box-img,
.cat-detail-products-box-img-big {
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
padding: 0 !important;
width: 100%;
aspect-ratio: 2 / 3; /* 1200x1800 için */
overflow: hidden;
position: relative;
}
/* Görsel: kutuya tam sığdır (kırpma yok) */
.cat-detail-products-box-img img,
.cat-detail-products-box-img-big img {
width: 100%;
height: 100%;
object-fit: contain; /* tamamını göster */
display: block;
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
/* (İsteğe bağlı) Hover zoom'u kapat – taşma/taşma efekti istemiyorsan */
.cat-detail-products-box:hover .cat-detail-products-box-img img,
.cat-detail-products-box-big:hover .cat-detail-products-box-img-big img {
transform: none !important;
}
/* Lazy Load */
.lazy {
}
/* <========SON=========>>> Lazy Load SON */
/* Login and Users Content Area */
.users_main_div{
width: 100%;
overflow: hidden;
}
.user_login_register_div{
width: 1280px;
margin: 0 auto;
margin-top: 30px;
margin-bottom: 30px;
box-sizing: border-box;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
justify-content: center;
}
.user_page_header{
width: 100%;
border: 1px solid #ebebeb;
background-color: #fff;
padding: 20px;
box-sizing: border-box;
margin-bottom: 30px;
font-size: 20px ;
font-weight: bold;
color: #000;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
line-height: 25px;
flex-wrap: wrap;
}
.user_page_header2{
width: 100%;
border: 1px solid #ebebeb;
background-color: #fff;
padding: 20px;
box-sizing: border-box;
margin-bottom: 20px;
font-size: 20px ;
font-weight: bold;
color: #000;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
line-height: 25px;
flex-wrap: wrap;
}
.user_page_header_spot{
font-size: 13px;
width: 100%;
font-weight: normal;
margin-top: 8px;
}
.user_page_header i{
font-size: 30px ;
margin-right: 10px;
}
.user_page_login_form{
width: 47%;
box-sizing: border-box;
border: 1px solid #EBEBEB;
background-color: #fff;
padding: 50px;
}
.user_page_right_text_div{
width: 50%;
box-sizing: border-box;
border: 1px solid #EBEBEB;
background-color: #fff;
padding: 50px;
margin-left: 3%;
}
.user_page_right_text_div img{
max-width: 100%;
}
.toggle-password{
position: absolute;
right: 20px;
bottom:10px;
}
.toggle-password2{
position: absolute;
right: 20px;
bottom:10px;
}
.toggle-password3{
position: absolute;
right: 20px;
bottom:10px;
}
.register-page-uyelik-tipi{
width: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.register-page-uyelik-tipi-main{
border: 1px solid #EBEBEB;
box-sizing: border-box;
padding: 20px 20px 10px 20px;
position: relative;
margin-bottom: 15px;
}
.register-page-uyelik-tipi-h{
margin-top: -33px;
width: auto;
margin-bottom:18px;
}
.register-page-uyelik-tipi-h-in{
width: auto;
display: inline-block;
background-color: #fff;
padding: 0 10px;
font-size: 15px ;
font-weight: 600;
color: #000;
}
/* <========SON=========>>> Login and Users Content Area SON */
/* Bildirimler */
.bildirimler-container-main{
width: 1280px;
margin: 0 auto;
margin-top: 30px;
margin-bottom: 30px;
box-sizing: border-box;
}
.bildirimler-bilgi-box{
width: 100%;
box-sizing: border-box;
border: 1px solid #e1eef1;
background-color: #f1f6f7;
padding: 20px;
font-size: 13px ;
margin-bottom: 30px;
}
.bildirimler-box-main{
width: 100%;
display: flex;
flex-direction: column;
}
.bildirimler-box{
width: 100%;
box-sizing: border-box;
border: 1px solid #ebebeb;
border-top: 0;
display: flex;
justify-content: space-between;
font-size: 14px ;
background-color: #fff;
}
.bildirimler-box:nth-of-type(2n){
background-color: #f8f8f8;
}
.bildirimler-box-baslik{
flex:1;
box-sizing: border-box;
border-right: 1px solid #ebebeb;
padding: 10px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.bildirimler-box-baslik a{
color: #000;
}
.bildirimler-box-baslik a:hover{
color: #000;
}
.bildirimler-box-tarih{
box-sizing: border-box;
border-right: 1px solid #ebebeb;
padding: 10px 15px;
display: flex;
justify-content: flex-start;
width: 170px;
font-size: 13px ;
align-items: center;
}
.bildirimler-box-tarih i{
font-size: 22px ;
margin-right: 8px;
}
.bildirimler-box-special{
box-sizing: border-box;
padding: 10px 15px;
border-right: 1px solid #ebebeb;
display: flex;
justify-content: center;
font-weight: 600;
width: 200px;
font-size: 13px ;
align-items: center;
}
.bildirimler-box-special i{
font-size: 22px ;
margin-right: 8px;
}
.bildirimler-box-read{
box-sizing: border-box;
padding: 10px 15px;
display: flex;
justify-content: center;
width: 140px;
font-size: 13px ;
align-items: center;
}
.bildirimler-box-no-count{
font-size: 13px ;
}
.bildirimler-box-no-count i{
font-size: 20px ;
float:left;
margin-right: 8px;
}
.bildirim_tabs_main{
border-top: 0;
margin-bottom: 20px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
ul#bildirim_tabs {
list-style-type: none;
padding: 0;
border: 1px solid #ebebeb;
display: flex;
}
ul#bildirim_tabs li {
display: inline;
}
ul#bildirim_tabs li a {
text-decoration: none;
padding: 20px;
box-sizing: border-box;
display: inline-block;
font-size: 14px ;
color: #000;
width: 100%;
position: relative;
background-color: #ffff;
border-right: 1px solid #EBEBEB;
}
ul#bildirim_tabs li a:hover {
color: #000;
background-color: #f8f8f8;
}
ul#bildirim_tabs li a.selected {
color: #fff;
background-color: #6799fc;
border: 1px solid #6799fc;
}
ul#bildirim_tabs li a i{
display: none;
}
ul#bildirim_tabs li a.selected i{
display: inline-block;
}
ul#bildirim_tabs li a.selected:after{
content: '';
height: 20px;
width: 20px;
position: absolute;
background-color: #6799fc;
bottom:-7px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
border-top: #6799fc solid 1px;
border-left: #6799fc solid 1px;
transform: rotate(225deg);
}
div.bildirim_tab_content {
flex:1;
animation: fadeEffect 0.5s ease;
box-sizing: border-box;
background-color: #fff;
border-top: 1px solid #EBEBEB;
}
div.bildirim_tab_content.hide {
display: none;
}
@keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.bildirim_tab_no_login{
width: 100%;
border:1px solid #EBEBEB;
border-top: 0;
}
.ozelbildirim-show-more-button {
width: 100%;
border: 1px solid #EBEBEB;
}
.ozelbildirim-showmorespan {
outline: 0;
}
.ozelbildirim-showmorespan {
cursor: pointer;
width: 100% !important;
display: block;
padding: 10px 0;
text-align: center;
text-decoration: underline;
}
.herkesebildirim-show-more-button {
width: 100%;
border: 1px solid #EBEBEB;
}
.herkesebildirim-showmorespan {
outline: 0;
}
.herkesebildirim-showmorespan {
cursor: pointer;
width: 100% !important;
display: block;
padding: 10px 0;
text-align: center;
text-decoration: underline;
}
.uyelerebildirim-show-more-button {
width: 100%;
border: 1px solid #EBEBEB;
}
.uyelerebildirim-showmorespan {
outline: 0;
}
.uyelerebildirim-showmorespan {
cursor: pointer;
width: 100% !important;
display: block;
padding: 10px 0;
text-align: center;
text-decoration: underline;
}
.bildirim-detay-main{
width: 1280px;
margin: 0 auto;
margin-top: 30px;
margin-bottom: 30px;
box-sizing: border-box;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
}
.bildirim-detay-main a{
margin-right: 20px;
display: flex;
align-items: center;
}
.bildirim-detay-main a i{
font-size: 20px ;
margin-right: 5px;
}
.bildirim-detay-content{
flex:1;
background-color: #fff;
border: 1px solid #ebebeb;
box-sizing: border-box;
padding: 20px;
}
.bildirim-detay-content-h{
width: 100%;
font-size: 19px ;
font-weight: 700;
color: #000;
padding-bottom: 4px;
}
.bildirim-detay-content-s{
width: 100%;
font-size: 14px ;
color: #000;
}
.bildirim-detay-content-s img{
max-width: 100%;
}
/* <========SON=========>>> Bildirimler SON */
.bildirim-detay-content-tarih{
width: 100%;
background-color: #f8f8f8;
border: 1px solid #EBEBEB;
font-size: 12px ;
padding: 5px 10px;
margin-bottom: 20px;
box-sizing: border-box;
}
/* Üye Hesap alt sayfaları */
.user_subpage_div{
width: 1280px;
margin: 0 auto;
margin-top: 30px;
margin-bottom: 30px;
box-sizing: border-box;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
justify-content: center;
}
.user_page_header_subpage{
width: 100%;
border: 1px solid #ebebeb;
background-color: #fff;
padding: 10px;
box-sizing: border-box;
margin-bottom: 22px;
font-size: 13px ;
color: #000;
display: flex;
align-items: center;
justify-content: flex-start;
}
.user_page_header_subpage a{
color: #333;
font-size: 12px ;
}
.user_page_header_subpage a:hover{
color: #000;
}
.user_page_header_subpage i{
margin-left: 5px;
margin-right: 5px;
}
.user_subpage_left_bar_main{
width: 280px;
background-color: #fff;
border: 1px solid #ebebeb;
box-sizing: border-box;
padding: 20px;
margin-right: 22px;
}
.user_subpage_right_content{
flex:1;
border: 1px solid #ebebeb;
box-sizing: border-box;
padding: 20px 30px;
background-color: #fff;
}
.user_subpage_left_bar_namediv{
width: 100%;
border-bottom: 1px solid #ebebeb;
box-sizing: border-box;
padding-bottom: 20px;
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.user_subpage_left_bar_namediv_circle{
width: 60px;
height: 60px;
border-radius: 100px;
background-color: #eeeeee;
color: #000;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px ;
font-weight: bold;
margin-right: 20px;
}
.user_subpage_left_bar_namediv_content{
flex:1;
}
.user_subpage_left_bar_namediv_content_usertype{
font-size: 12px ;
color: #5458f3;
font-weight: 600;
margin-bottom: 4px;
}
.user_subpage_left_bar_namediv_content_h{
font-size: 17px ;
font-weight: bold;
line-height: 18px;
width: 80%;
}
.user_subpage_left_bar_namediv_content_usergroup{
font-size: 12px ;
background-color: #f06670;
color: #fff;
width: auto;
border-radius: 100px;
font-weight: 600;
display: inline-block;
padding: 1px 10px;
margin-top: 9px;
}
.user_subpage_left_bar_nav_desktop{
width: 100%;
}
.user_subpage_left_bar_nav_desktop_items{
width: 100%;
box-sizing: border-box;
border-bottom: 1px solid #ebebeb;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 10px 5px;
color: #000;
transition-duration: 0.1s; transition-timing-function: linear;
}
.user_subpage_left_bar_nav_desktop_items:hover{
background-color: #f8f8f8;
color: #000;
text-decoration: none;
border-bottom: 1px solid #F08183;
}
.user_subpage_left_bar_nav_desktop_items_active{
background-color: #f8f8f8;
color: #000;
text-decoration: none;
}
.user_subpage_left_bar_nav_desktop_items_i{
width: 48px;
font-size: 27px ;
line-height: 27px;
}
.user_subpage_left_bar_nav_desktop_items_t{
flex:1;
font-size: 14px;
font-weight: 600;
}
.user_subpage_info_div_grey{
width: 100%;
box-sizing: border-box;
border: 1px solid #ebebeb;
background-color: #f9f9f9;
font-size: 13px ;
padding: 15px;
margin-bottom: 20px;
color: #000;
}
.user_subpage_info_div_red{
width: 100%;
box-sizing: border-box;
border: 1px solid #eb4d55;
background-color: #f6e1e1;
font-size: 13px ;
padding: 15px;
color: #000;
}
.user_subpage_info_overflow{
max-height: 300px;
overflow-y: auto;
}
.user_subpage_info_overflow::-webkit-scrollbar-track {
background-color: #ebebeb;
}
.user_subpage_info_overflow::-webkit-scrollbar {
width: 7px;
}
.user_subpage_info_overflow::-webkit-scrollbar-thumb {
background-color: #ccc;
}
.user_subpage_info_div_blue{
width: 100%;
box-sizing: border-box;
border: 1px solid #e1eef1;
background-color: #f1f6f7;
font-size: 13px ;
padding: 15px;
margin-bottom: 20px;
color: #000;
}
.user_subpage_info_div_blue_2{
width: 100%;
box-sizing: border-box;
border: 1px solid #e1eef1;
background-color: #f1f6f7;
font-size: 13px ;
padding: 25px;
margin-bottom: 20px;
color: #000;
}
.user_subpage_account_header{
width: 100%;
font-size: 24px;
font-weight: 600;
color: #000;
margin-bottom: 20px;
}
.user_subpage_account_spot{
font-size: 13px ;
color: #999;
font-weight: normal;
margin-top: 8px;
}
.user_subpage_account_content{
flex:1;
border: 1px solid #ebebeb;
box-sizing: border-box;
padding:30px;
background-color: #fff;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
}
.user_subpage_account_left{
width: 48%;
}
.user_subpage_account_right{
width: 48%;
margin-left: 4%;
border: 1px solid #EBEBEB;
margin-top: 15px;
position: relative;
box-sizing: border-box;
padding: 20px;
}
.user_subpage_account_right_head{
margin-top: -35px;
margin-bottom: 25px;
margin-left: -10px;
}
.user_subpage_account_right_head_in{
background-color: #fff;
font-size: 18px ;
color: #000;
font-weight: bold;
display: inline-block;
padding: 0 12px;
}
.user_subpage_favorites_content{
flex:1;
border: 1px solid #ebebeb;
box-sizing: border-box;
padding:30px;
background-color: #fff;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
}
.user_subpage_favorites_nologin{
width: 100%;
padding: 90px 0;
text-align: center;
}
.user_subpage_favorites_nologin i{
font-size: 60px ;
color: #f7acaa;
}
.user_subpage_favorites_nologin_head{
font-size: 23px ;
font-weight: bold;
color: #000;
margin-bottom: 15px;
}
.user_subpage_favorites_nologin_s{
font-size: 14px ;
color: #767676;
width: 500px;
margin: 0 auto;
margin-bottom: 15px;
}
.user_subpage_favorites_nologin_buttons{
margin-top: 50px;
}
.user_subpage_favorites_nologin_buttons a{
width: 200px;
}
.user_subpage_favorites_noitems{
width: 100%;
padding: 40px 0;
text-align: center;
}
.user_subpage_favorites_noitems i{
font-size: 60px ;
color: #f7acaa;
}
.user_subpage_favorites_noitems_head{
font-size: 16px ;
font-weight: bold;
color: #000;
margin-bottom: 15px;
}
.user_subpage_favorites_noitems_s{
font-size: 14px ;
color: #767676;
width: 500px;
margin: 0 auto;
margin-bottom: 15px;
}
.user_subpage_favorites_box_div_out{
width: 100%;
overflow: hidden;
}
.user_subpage_favorites_box_div{
width: 102%;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
margin-top: 15px;
}
.user_subpage_favorites_box{
width: 23%;
box-sizing: border-box;
border: 3px solid #EBEBEB;
margin-right: 2%;
margin-bottom: 1%;
border-radius: 4px;
padding: 20px;
position: relative;
display: flex;
flex-direction: column;
}
.user_subpage_favorites_box_img{
width: 100%;
height: 170px;
margin-bottom: 10px;
overflow: hidden;
}
.user_subpage_favorites_box_img img{
width: 100%;
min-height: 170px;
max-height: 200px;
}
.user_subpage_favorites_box_h{
width: 100%;
font-size: 14px ;
font-weight: 600;
margin-bottom: 20px;
}
.user_subpage_favorites_box_hin{
width: 100%;
font-size: 13px ;
font-weight: 500;
margin-bottom: 4px;
margin-top: 4px;
color: #999;
border: 1px solid #EBEBEB;
background-color: #f8f8f8;
text-align: center;
padding: 4px 0;
}
.user_subpage_favorites_box_go{
font-size: 13px ;
font-weight: 600;
margin-top: auto;
display: flex;
align-items: center;
justify-content: flex-end;
}
.user_subpage_favorites_box_icon{
width: 35px;
height: 35px;
background-color: #ffc0cc;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
position: absolute;
left:8px;
top:8px;
border-radius: 100px;
}
.user_subpage_comment_box{
width: 48%;
border: 3px solid #ebebeb;
box-sizing: border-box;
border-radius: 4px;
margin-right: 2%;
margin-bottom: 2%;
padding: 15px;
display: flex;
flex-direction: column;
transition-duration: 0.1s; transition-timing-function: linear;
}
.user_subpage_comment_box:hover{
box-shadow: 0 0 15px 0 rgba(0,0,0,0.1);
}
.user_subpage_comment_box2{
width: 98%;
border: 3px solid #ebebeb;
box-sizing: border-box;
border-radius: 4px;
margin-bottom: 2%;
padding: 15px;
display: flex;
flex-direction: column;
transition-duration: 0.1s; transition-timing-function: linear;
}
.user_subpage_comment_box2:hover{
box-shadow: 0 0 15px 0 rgba(0,0,0,0.1);
}
.user_subpage_comment_box_status_main{
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
}
.user_subpage_comment_box_status_main2{
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
}
.user_subpage_comment_box_status{
display: inline-block;
padding: 3px 10px;
border-radius: 4px;
font-size: 12px ;
font-weight: 600;
margin-bottom: 5px;
}
.user_subpage_comment_box_product{
width: 100%;
display: flex;
align-items : center;
justify-content: flex-start;
margin-bottom: 10px;
}
.user_subpage_comment_box_img{
width: 64px;
height: 64px;
margin-right: 15px;
overflow: hidden;
}
.user_subpage_comment_box_img img{
width: 100%;
min-height: 64px;
max-height: 80px;
}
.user_subpage_comment_box_point{
width: 100%;
}
.user_subpage_comment_box_product_name{
width: 100%;
font-size: 14px ;
color: #333;
font-weight: 600;
margin-bottom: 4px;
}
.user_subpage_comment_box_point_count{
width: 100%;
font-size: 13px ;
color: #999;
font-weight: 500;
display: flex;
align-items: center;
justify-content: flex-start;
}
.user_subpage_comment_box_point_count span{
font-size: 19px ;
}
.user_subpage_comment_box_text{
font-size: 13px ;
font-weight: 600;
color: #666;
margin-bottom: 10px;
}
.user_subpage_comment_box_content{
font-size: 13px ;
color: #666;
max-height: 135px;
overflow-y: auto;
margin-bottom: 15px;
}
.user_subpage_comment_box_content::-webkit-scrollbar-track {
background-color: #ebebeb;
}
.user_subpage_comment_box_content::-webkit-scrollbar {
width: 7px;
}
.user_subpage_comment_box_content::-webkit-scrollbar-thumb {
background-color: #ccc;
}
.user_subpage_comment_box_delete{
margin-top: auto;
text-align: right;
}
.user_subpage_comment_box_delete a{
font-size: 14px ;
font-weight: bold;
color: #000;
}
.user_subpage_comment_box_delete a:hover{
color: #000;
}
.user_subpage_flex_header{
width: 100%;
margin-bottom: 20px;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.user_subpage_flex_header_back_href{
font-size: 13px ;
font-weight: 500;
color: #999;
width: 100%;
display: block;
margin-bottom: 5px;
}
.user_subpage_flex_header_back_href a{
color: cornflowerblue;
font-weight: 600;
}
.user_subpage_flex_header_back_href a:hover{
color: cornflowerblue;
font-weight: 600;
}
.user_subpage_flex_header_h{
font-size: 24px;
font-weight: 600;
color: #000;
width: 65%;
}
.user_subpage_flex_header_links{
width: 100%;
margin-top: 25px;
}
.user_subpage_flex_header_right{
flex:1;
display: flex;
align-items: center;
justify-content: flex-end;
}
.ustsearch_area{
width: 100%;
position: relative;
}
.ustsearch_area input{
width: 100%;
height: 30px;
border-radius: 0;
font-size: 13px ;
text-align: left;
border: 0;
padding-left: 0;
border-bottom: 1px solid #EBEBEB;
}
.ustsearch_area input:focus{
border: 0;
border-bottom: 1px solid #333;
}
.ustsearch_area button{
position: absolute !important;
border: 0;
background-color: transparent;
top: 1px;
right: 0;
}
.ustsearch_area button:focus{
outline: none;
}
.user_subpage_select{
width: 220px !important;
}
.user_subpage_select.nice-select.open .list {
width: 220px;
}
.user_subpage_select.nice-select .list {
width: 220px;
}
.user_subpage_coupon_content{
flex:1;
border: 1px solid #ebebeb;
box-sizing: border-box;
padding:30px;
background-color: #fff;
}
.user_subpage_kupon_box{
width: 100%;
border: 3px solid #EBEBEB;
padding: 20px;
box-sizing: border-box;
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
border-radius: 4px;
margin-bottom:20px;
}
.user_subpage_kupon_name{
width: 240px;
margin-right: 30px;
}
.user_subpage_kupon_name_1{
width: 100%;
font-size: 14px ;
font-weight: bold;
color: #94a1d1;
}
.user_subpage_kupon_name_2{
width: 100%;
font-size: 13px ;
color: #999;
margin-top: 8px;
}
.user_subpage_kupon_name_3{
width: 100%;
font-size: 14px ;
background-color: #f9f9f9;
font-weight: normal;
color: #000;
border: 2px dashed #CCC;
padding:15px;
box-sizing: border-box;
margin-top: 20px;
text-align: center;
}
.user_subpage_kupon_tutar{
flex:1;
font-size: 13px ;
text-align: center;
}
.user_subpage_kupon_tutar_1{
font-weight: 600;
color: #a0a0a0;
}
.user_subpage_kupon_tutar_2{
margin-top: 8px;
font-size: 15px ;
font-weight: 700;
color: #000;
}
.user_subpage_kupon_sdate{
flex:1;
font-size: 13px ;
text-align: center;
}
.user_subpage_kupon_sdate_1{
font-weight: 600;
color: #a0a0a0;
}
.user_subpage_kupon_sdate_2{
margin-top: 8px;
font-size: 13px ;
color: #000;
}
.user_subpage_kupon_fdate{
flex:1;
font-size: 13px ;
text-align: center;
}
.user_subpage_kupon_fdate_1{
font-weight: 600;
color: #a0a0a0;
}
.user_subpage_kupon_fdate_2{
margin-top: 8px;
font-size: 13px ;
color: #000;
}
.user_subpage_kupon_status{
flex:1;
font-size: 13px ;
text-align: center;
}
.user_subpage_kupon_status_1{
font-weight: 600;
color: #a0a0a0;
}
.user_subpage_kupon_status_2{
margin-top: 8px;
font-size: 13px ;
color: #000;
}
.user_subpage_ticketbox_main{
width: 100%;
border: 1px solid #EBEBEB;
}
.user_subpage_ticketbox{
width: 100%;
border-bottom: 1px solid #EBEBEB;
padding:20px 15px;
box-sizing: border-box;
display: flex;
align-items:center;
justify-content: space-between;
flex-wrap: wrap;
}
.user_subpage_ticketbox:nth-of-type(2n){
background-color: #f9f9f9;
}
.user_subpage_ticketbox:last-child{
border-bottom: 0;
}
.user_subpage_ticketbox_number{
width: 130px;
font-size: 13px ;
font-weight: 700;
color: #000;
}
.user_subpage_ticketbox_h{
width: 350px;
font-size: 13px ;
color: #666;
font-weight: 600;
}
.user_subpage_ticketbox_status{
width:135px ;
font-size: 13px ;
font-weight: 600;
}
.user_subpage_ticketbox_lasthour{
color: #b1b1b1;
margin-right: 30px;
width: 150px;
}
.user_subpage_ticketbox_lasthour_1{
width: 100%;
font-size: 12px ;
color: #666;
font-weight: 600;
}
.user_subpage_ticketbox_lasthour_2{
width: 100%;
font-size: 12px ;
font-weight: 500;
}
.user_subpage_ticketbox_go{
width:35px;
height: 35px;
border-radius: 100px;
background-color: #f8f8f8;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ebebeb;
color: #000;
cursor: pointer;
transition-duration: 0.1s; transition-timing-function: linear;
}
.user_subpage_ticketbox_go:hover{
box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
color: #000;
text-decoration: none;
}
.user_subpage_ticketbox_go i{
font-size: 15px ;
}
.ticket-detail-form-area label{
font-size: 13px !important;
font-weight: 600 !important;
}
.ticket-detail-form-area{
font-size: 13px ;
}
.user_subpage_ticket_line_hed{
width: 100%;
border-bottom: 1px solid #ebebeb;
height: 11px;
margin-bottom: 30px;
margin-top: 30px;
}
.user_subpage_ticket_line_hed_in{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.user_subpage_ticket_line_hed_text{
display: inline-block;
padding: 0 10px;
font-size: 13px;
color: #000;
background-color: #fff;
font-weight: 600;
margin-left: -20px;
}
.user_subpage_ticket_message_main{
width: 100%;
margin-bottom: 40px;
display: flex;
flex-direction: column;
}
.user_subpage_ticket_message_user_box{
width: 90%;
box-sizing: border-box;
background-color: #f9f9f9;
border: 1px solid #ebebeb;
margin-bottom: 30px;
padding: 20px;
margin-right: auto;
}
.user_subpage_ticket_message_user_box_hed{
border-bottom: 1px solid #EBEBEB;
padding-bottom: 10px;
margin-bottom: 10px;
font-size: 14px ;
color: #5951f9;
font-weight: 600;
display: flex;
align-items: center;
justify-content: flex-start;
}
.user_subpage_ticket_message_user_box_hed i{
font-size: 19px ;
color: #000;
}
.user_subpage_ticket_message_user_box_hed i:last-child{
margin-right: 10px;
}
.user_subpage_ticket_message_user_box_msg{
width: 100%;
font-size: 13px ;
margin-bottom: 15px;
}
.user_subpage_ticket_message_user_box_date{
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 11px ;
color: #999;
}
.user_subpage_ticket_message_support_box{
width: 90%;
box-sizing: border-box;
background-color: #34a287;
border: 1px solid #34a287;
margin-bottom: 30px;
padding: 20px;
margin-left: auto;
}
.user_subpage_ticket_message_support_box_hed{
border-bottom: 1px solid #41cdae;
padding-bottom: 10px;
margin-bottom: 10px;
font-size: 14px ;
color: #FFF;
font-weight: 600;
display: flex;
align-items: center;
justify-content: flex-start;
}
.user_subpage_ticket_message_support_box_hed i{
font-size: 19px ;
color: #FFF;
}
.user_subpage_ticket_message_support_box_hed i:last-child{
margin-right: 10px;
}
.user_subpage_ticket_message_support_box_msg{
width: 100%;
font-size: 13px ;
margin-bottom: 15px;
color: #FFF;
}
.user_subpage_ticket_message_support_box_msg img{
max-width: 100%;
}
.user_subpage_ticket_message_support_box_date{
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 11px ;
color: #FFF;
}
.user_subpage_ticket_answer_main{
width: 100%;
}
.user_subpage_ticket_answer_main label{
font-size: 20px !important;
font-weight: bold !important;
}
html:not(.ts-checkout-page) .user_subpage_address_boxes_main{
width: 100%;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
margin-top: 30px;
}
html:not(.ts-checkout-page) .user_subpage_address_box_added{
width: 48%;
box-sizing: border-box;
border: 1px solid #ebebeb;
margin-right: 2%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 20px;
transition-duration: 0.1s; transition-timing-function: linear;
margin-bottom: 20px;
}
html:not(.ts-checkout-page) .user_subpage_address_box_added:hover{
text-decoration: none;
border: 1px solid #c7e0ed;
}
html:not(.ts-checkout-page) .user_subpage_address_box_added:hover .user_subpage_address_box_added_icon{
border: 1px solid #c7e0ed;
background-color: #c7e0ed;
}
html:not(.ts-checkout-page) .user_subpage_address_box_added:hover .user_subpage_address_box_added_icon i{
color: #fff;
}
html:not(.ts-checkout-page) .user_subpage_address_box_added:hover .user_subpage_address_box_added_text{
color: #7bbade;
}
.return-pro-img{
width: 75px;
box-sizing: border-box;
margin-right: 15px;
}
.return-pro-img img{
width: 100%;
padding: 5px;
border: 1px solid #EBEBEB;
border-radius: 4px;
}
.return-pro-txt{
flex:1;
font-size: 14px ;
font-weight: 600;
color: #000;
}
html:not(.ts-checkout-page) .user_subpage_address_box_added_noitem{
width: 48%;
box-sizing: border-box;
border: 1px solid #ebebeb;
margin-right: 2%;
height: 260px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
transition-duration: 0.1s; transition-timing-function: linear;
}
html:not(.ts-checkout-page) .user_subpage_address_box_added_noitem:hover{
text-decoration: none;
border: 1px solid #c7e0ed;
}
html:not(.ts-checkout-page) .user_subpage_address_box_added_noitem:hover .user_subpage_address_box_added_icon{
border: 1px solid #c7e0ed;
background-color: #c7e0ed;
}
html:not(.ts-checkout-page) .user_subpage_address_box_added_noitem:hover .user_subpage_address_box_added_icon i{
color: #fff;
}
html:not(.ts-checkout-page) .user_subpage_address_box_added_noitem:hover .user_subpage_address_box_added_text{
color: #7bbade;
}
html:not(.ts-checkout-page) .user_subpage_address_box_added_icon{
width: 62px;
height: 62px;
border: 1px solid #EBEBEB;
border-radius: 100px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
transition-duration: 0.1s; transition-timing-function: linear;
}
html:not(.ts-checkout-page) .user_subpage_address_box_added_icon i{
color: #000;
font-size: 25px ;
}
html:not(.ts-checkout-page) .user_subpage_address_box_added_text{
font-size: 16px ;
color: #000;
}
html:not(.ts-checkout-page) .user_subpage_address_box{
width: 48%;
box-sizing: border-box;
border: 1px solid #c7e0ed;
margin-right: 2%;
padding: 20px 30px;
margin-bottom: 20px;
}
html:not(.ts-checkout-page) .user_subpage_address_box_name{
width: 100%;
font-weight: bold;
color: #000;
font-size: 15px ;
margin-bottom: 25px;
}
html:not(.ts-checkout-page) .user_subpage_address_box_user{
width: 100%;
font-weight: 600;
color: #595959;
font-size: 13px ;
margin-bottom: 15px;
}
html:not(.ts-checkout-page) .user_subpage_address_box_content{
width: 100%;
color: #595959;
font-size: 13px ;
margin-bottom: 10px;
}
html:not(.ts-checkout-page) .user_subpage_address_box_phone{
width: 100%;
color: #a3a3a3;
font-size: 12px ;
margin-bottom: 10px;
}
html:not(.ts-checkout-page) .user_subpage_address_box_type{
width: 100%;
color: #f96d51;
font-weight: 600;
font-size: 13px ;
}
html:not(.ts-checkout-page) .user_subpage_address_box_buttons{
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
}
.user_subpage_address_add_main_div{
width: 100%;
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
}
.user_subpage_address_add_border_div{
flex:1;
border: 1px solid #EBEBEB;
margin-top: 15px;
position: relative;
box-sizing: border-box;
padding: 20px;
}
.user_subpage_address_add_border_div_head{
margin-top: -33px;
margin-bottom: 25px;
margin-left: -10px;
}
.user_subpage_address_add_border_div_head_in{
background-color: #fff;
font-size: 15px ;
color: #000;
font-weight: 600;
display: inline-block;
padding: 0 12px;
}
.user_subpage_siparis_boxes_div{
width: 100%;
display: flex;
flex-direction: column;
margin-top: 40px;
}
.user_subpage_siparis_box{
width: 100%;
border: 1px solid #EBEBEB;
padding: 25px 20px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
border-radius: 4px;
margin-bottom:20px;
transition-duration: 0.2s; transition-timing-function: linear;
}
.user_subpage_siparis_box:hover{
border: 1px solid #CCC;
}
.user_subpage_siparis_box_img{
width: 49px;
height: 49px;
margin-right: 20px;
border: 1px solid #EBEBEB;
box-sizing: border-box;
overflow: hidden;
}
.user_subpage_siparis_box_img img{
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 1px;
}
.user_subpage_return_box_orderno{
width: 135px;
color: #000000;
}
.user_subpage_siparis_box_orderno{
width: 280px;
color: #000000;
}
.user_subpage_siparis_box_orderno-1{
width: 100%;
font-size: 14px ;
margin-bottom: 5px;
line-height: 17px;
}
.user_subpage_siparis_box_orderno-2{
width: 100%;
font-size: 12px ;
color: #999;
}
.user_subpage_siparis_box_status{
flex:1;
display: flex;
align-items: center;
justify-content: space-between;
}
.user_subpage_siparis_box_status_iptal{
width: auto;
display: inline-block;
padding: 5px 15px;
border: 1px solid #ffa2a5;
box-sizing: border-box;
font-size: 14px ;
font-weight: 600;
color: #ffa2a5;
}
.user_subpage_siparis_box_end{
flex:1;
display: flex;
align-items: center;
justify-content: flex-end;
}
.user_subpage_siparis_box_end_amount{
margin-right: 40px;
text-align: right;
}
.user_subpage_siparis_box_end_amount_1{
font-size: 16px ;
font-weight: 600;
color: #000;
width: 100%;
}
.user_subpage_siparis_box_end_amount_2{
font-size: 13px ;
font-weight: 500;
color: #999;
width: 100%;
}
.account_subpage_order_address_main{
width: 100%;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
margin-bottom: 20px;
}
.account_subpage_order_address_left{
flex:1;
box-sizing: border-box;
border: 1px solid #ebebeb;
padding: 25px;
color: #000;
}
.account_subpage_order_address_right{
width: 49%;
margin-left: 2%;
box-sizing: border-box;
border: 1px solid #ebebeb;
padding: 25px;
color: #000;
}
.account_subpage_order_address_h{
width: 100%;
font-size: 14px ;
font-weight: 600;
border-bottom: 1px solid #EBEBEB;
margin-bottom: 20px;
padding-bottom: 8px;
}
.account_subpage_order_address_name{
width: 100%;
font-size: 13px ;
font-weight: 600;
margin-bottom: 10px;
}
.account_subpage_order_address_txt{
width: 100%;
font-size: 13px ;
}
.account_subpage_order_address_phone{
width: 100%;
font-size: 13px ;color: #666;
}
.account_subpage_order_products_box{
width: 100%;
box-sizing: border-box;
border: 1px solid #EBEBEB;
padding: 25px 25px 10px 25px;
margin-bottom: 20px;
}
.account_subpage_order_products_box_hed{
width: 100%;
box-sizing: border-box;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
border-bottom: 1px dashed #EBEBEB;
padding-bottom: 10px;
}
.account_subpage_order_products_box_hed_img{
width: 80px;
margin-right: 15px;
}
.account_subpage_order_products_box_hed_img img{
width: 100%;
}
.account_subpage_order_products_box_hed_name{
width: 280px;
font-size: 13px ;
font-weight: 600;
color: #000;
}
.order_products_box_hed_name_sub{
font-size: 12px ;
margin-bottom: 9px;
padding-bottom: 9px;
border-bottom: 1px dashed #EBEBEB;
font-weight: 500;
}
.account_subpage_order_products_box_hed_status{
flex:1;
display: flex;
align-items: center;
justify-content: flex-end;
}
.orderDetail_product_button{
margin-left: 5px;
margin-right: 5px;
}
.orderDetail_product_button:last-child{
margin-right: 0;
}
.account_subpage_order_products_box_fot{
width: 100%;
box-sizing: border-box;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
border-right: 1px dashed #EBEBEB;
}
.account_subpage_order_products_box_fot_birim{
flex:1;
text-align: center;
font-size: 13px ;
border: 1px dashed #EBEBEB;
background-color: #fff;
border-right: 0;
border-top: 0;
}
.account_subpage_order_products_box_fot_kdv{
flex:1;
text-align: center;
font-size: 13px ;
border: 1px dashed #EBEBEB;
background-color: #fff;
border-right: 0;
border-top: 0;
}
.account_subpage_order_products_box_fot_kargo{
flex:1;
text-align: center;
font-size: 13px ;
border: 1px dashed #EBEBEB;
background-color: #fff;
border-right: 0;
border-top: 0;
}
.account_subpage_order_products_box_fot_adet{
flex:1;
text-align: center;
font-size: 13px ;
border: 1px dashed #EBEBEB;
background-color: #fff;
border-right: 0;
border-top: 0;
}
.account_subpage_order_products_box_fot_total{
flex:1;
text-align: center;
font-size: 13px ;
border: 1px dashed #EBEBEB;
background-color: #fff;
border-right: 0;
border-top: 0;
}
.account_subpage_order_products_box_fot_h{
width: 100%;
padding: 8px;
border-bottom: 1px dashed #EBEBEB;
background-color: #f8f8f8;
}
.account_subpage_order_products_box_fot_s{
width: 100%;
padding: 8px;
font-weight: 600;
}
.account_subpage_order_cargo_main{
width: 100%;
box-sizing: border-box;
padding: 25px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
border: 1px solid #558cff;
margin-bottom: 20px;
}
.account_subpage_order_cargo_left{
width: 150px;
}
.account_subpage_order_cargo_left img{
width: 100%;
}
.account_subpage_order_cargo_right{
flex:1;
text-align: right;
}
.account_subpage_summary_order_main{
width: 100%;
box-sizing: border-box;
display: flex;
justify-content: flex-end;
}
.account_subpage_summary_order_in{
width: 300px;
}
.account_subpage_summary_order_freedelivery,
.account_subpage_summary_order_discount_coupon{
width: 100%;
box-sizing: border-box;
border: 1px solid #ebebeb;
display: flex;
align-items: flex-start;
justify-content: flex-start;
padding: 10px 18px;
margin-bottom: 10px;
}
.account_subpage_summary_order_coupon_icon{
width: 45px;
font-size: 28px ;
line-height: 28px;
color: #6e8ebe;
}
.account_subpage_summary_order_coupon_text{
flex:1;
font-size: 12px ;
color: #333;
font-weight: 600;
line-height: 15px;
}
.account_subpage_summary_order_coupon_text_h{
width: 100%;
color: #999;
font-weight: 500;
}
.account_subpage_summary_order_coupon_text_s{
width: 100%;
margin-top: 5px;
}
.account_subpage_summary_order_box{
width: 100%;
box-sizing: border-box;
border: 1px solid #ebebeb;
background-color: #f8f8f8;
color: #000;
padding: 20px;
}
.account_subpage_summary_order_box_h{
font-size: 16px ;
font-weight: 600;
margin-bottom: 20px;
}
.account_subpage_summary_order_box_s{
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
width: 100% ;
border-bottom: 1px solid #EBEBEB;
font-size: 14px ;
padding-bottom: 8px;
margin-bottom: 8px;
}
.account_subpage_summary_order_box_s:last-child{
border-bottom: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.account_subpage_summary_order_box_s_left{
width: 50%;
}
.account_subpage_summary_order_box_s_right{
width: 50%;
text-align: right;
font-weight: 600;
}
.orderdetail_coupon_total{
box-sizing: border-box;
text-align: center;
border: 1px solid #EBEBEB;
padding: 5px;
margin-top: 5px;
border-radius: 10px;
background-color: #f8f8f8;
}
/* <========SON=========>>> Üye Hesap alt sayfaları SON */
/* Hesap numaraları ve ödeme bildirim */
.banka-hesap-main-box{
width: 100%;
box-sizing: border-box;
border: 1px solid #EBEBEB;
background-color: #fff;
margin-bottom: 20px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.banka-hesap-main-box-img{
width: 135px;
border-right: 1px solid #EBEBEB;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.banka-hesap-main-box-img img{
max-width: 110px;
max-height: 70px;
}
.banka-hesap-main-box-flex{
flex:1;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.banka-hesap-main-box-flex-name{
width: 165px;
border-right: 1px solid #EBEBEB;
}
.banka-hesap-main-box-flex-doviz{
width: 65px;
border-right: 1px solid #EBEBEB;
}
.banka-hesap-main-box-flex-isim{
width: 165px;
border-right: 1px solid #EBEBEB;
}
.banka-hesap-main-box-flex-iban{
flex:1;
}
.banka-hesap-main-box-flex-hesap{
width: 150px;
border-right: 1px solid #EBEBEB;
}
.banka-hesap-main-box-flex-ust{
width: 100%;
padding: 10px 10px;
font-size: 13px ;
font-weight: 600;
color: #333;
box-sizing: border-box;
border-bottom: 1px solid #ebebeb;
}
.banka-hesap-main-box-flex-alt{
width: 100%;
padding: 10px 10px;
font-size: 13px ;
color: #333;
box-sizing: border-box;
}
.odeme-bildirim-main-div{
width: 100%;
box-sizing: border-box;
}
.odeme-bildirim-boxes-flex{
width: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
}
.odeme-bildirim-box{
flex:1;
margin-right: 15px;
box-sizing: border-box;
border: 1px solid #EBEBEB;
background-color: #fff;
padding: 35px;
margin-bottom: 10px;
margin-top: 10px;
}
.odeme-bildirim-box:last-child{
margin-right: 0;
}
.odeme-bildirim-box-hed{
border-bottom: 1px solid #ebebeb;
width: 100%;
padding-bottom: 10px;
margin-bottom: 25px;
font-size: 16px ;
font-weight: 600;
color: #000;
}
.odeme-bildirim-box-account-div{
width: 100%;
box-sizing: border-box;
max-height: 612px;
overflow-y: auto;
}
.odeme-bildirim-box-account-div::-webkit-scrollbar-track {
background-color: #ebebeb;
}
.odeme-bildirim-box-account-div::-webkit-scrollbar {
width: 7px;
}
.odeme-bildirim-box-account-div::-webkit-scrollbar-thumb {
background-color: #ccc;
}
.odeme-bildirim-box-spot{
font-size: 14px ;
font-weight: 600;
color: #000;
width: 85%;
margin-bottom: 20px;
}
.odeme-bildirim-box-spotsm{
font-size: 13px ;
font-weight: 500;
color: #999;
width: 85%;
}
.odeme-bildirim-box-form{
width: 100%;
}
.odeme-bildirim-banka-radio{
width: 100%;
border-bottom: 1px solid #EBEBEB;
}
.odeme-bildirim-banka-radio label{
border: 2px solid #fff !important;
width: 100%;
box-sizing: border-box;
padding:20px ;
cursor: pointer;
}
.odeme-bildirim-banka-radio input{
display: none;
}
.odeme-bildirim-banka-radio input:checked +label{
border: 2px solid red !important;
}
.odeme-bildirim-banka-radio-hed{
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
margin-bottom: 10px;
}
.odeme-bildirim-banka-radio-hed-img{
width: 100px;
height: 60px;
border: 1px solid #EBEBEB;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}
.odeme-bildirim-banka-radio-hed-img img{
max-width: 90%;
max-height: 50px;
}
.odeme-bildirim-banka-radio-bank{
flex:1;
font-size: 13px ;
font-weight: 600;
}
.odeme-bildirim-banka-radio-text{
width: 100%;
border-bottom: 1px dashed #EBEBEB;
font-size: 13px ;
padding: 5px 0;
}
.odeme-bildirim-banka-radio-text:last-child{
border-bottom: 0;
}
.odeme-bildirim-uyari{
width: 100%;
padding: 40px 0;
text-align: center;
}
.odeme-bildirim-uyari-i{
font-size: 60px ;
margin-bottom: 25px;
line-height: 60px;
color: #7f99d8;
}
/* <========SON=========>>> Hesap numaraları ve ödeme bildirim SON */
/* Compare */
.compare-container-main{
width: 1280px;
box-sizing: border-box;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 20px;
}
.compare-container-table-div{
width: 100%;
background-color: #fff;
}
.compare-container-table-1 {
width: 100%;
height: auto;
border-collapse: collapse;
border: 1px solid #EBEBEB;
font-size: 13px ;
font-weight: 600;
}
.compare-container-table-1 tr, td{
border: 1px solid #EBEBEB;
}
.compare-container-table-1 td{
padding: 20px;
}
.compare-container-table-1-content{
text-align: center;
width: auto;
}
.compare-container-table-1-content img{
max-width: 150px;
max-height: 150px;
}
.compare-container-table-1-content i{
font-size: 24px ;
}
.compare_header_div{
width: 100%;
border: 1px solid #ebebeb;
background-color: #fff;
padding: 20px;
box-sizing: border-box;
margin-bottom: 30px;
font-size: 20px ;
font-weight: bold;
color: #000;
text-align: center;
display: flex;
align-items: center;
justify-content: space-between;
line-height: 25px;
flex-wrap: wrap;
}
/* <========SON=========>>> Compare SON */
/* Margin FrameWork */
.m-top-0{
margin-top:0 !important;
}
.m-top-10{
margin-top: 10px;
}
.m-top-20{
margin-top: 20px;
}
.m-top-30{
margin-top: 30px;
}
/* <========SON=========>>> Margin FrameWork SON */
/* Orta Slider */
.middle-slider-img{
width: 100%;
height: 100%;
}
.middle-slider-img-mobile{
display: none;
}
/* <========SON=========>>> Orta Slider SON */
/* Story */
.story-main-div{
width: 100%;
}
.story-in-div{
margin: 0 auto;
max-width: 1300px;
text-align: center;
}
.story-in-div-standart{
margin: 0 auto;
width: 1300px;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap:wrap;
}
.story-group-box{
width: 90px;
overflow: hidden;
display: block;
margin-right: 12px;
box-sizing: border-box;
}
.story-group-box-img{
width: 90px;
height: 90px;
overflow: hidden;
margin-bottom: 8px;
box-sizing: border-box;
}
.story-group-box-img img{
width: 100%;
height: 100%;
}
.story-group-box-h{
font-size: 13px;
width: 100%;
text-align: center;
}
/* <========SON=========>>> Story SON */
/* Pricing Tab System */
.pricing-tab-system{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.pricing-tab-system ul{
width: auto !important;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 0;
padding: 10px ;
margin-bottom: 20px;
margin-top: 20px;
}
.pricing-tab-system a{
transition-duration: 0.1s; transition-timing-function: linear;
background-color: transparent;
border: 0!important;
border-radius: 0 !important;
padding: 12px 35px;
}
/* <========SON=========>>> Pricing Tab System SON */
.font-spacing{letter-spacing: 0.04em}
.font-12{font-size:12px;}
.font-13{font-size:13px;}
.font-14{font-size:14px;}
.font-15{font-size:15px;}
.font-16{font-size:16px;}
.font-17{font-size:17px;}
.font-18{font-size:18px;}
.font-19{font-size:19px;}
.font-20{font-size:20px;}
.font-24{font-size:24px;}
.font-26{font-size:26px;}
.font-27{font-size:27px;}
.font-28{font-size:28px;}
.font-29{font-size:29px;}
.font-30{font-size:30px;}
.font-size-big{font-size:36px;}
.font-size-exbig{font-size:50px;}
.font-exlight{font-weight: 300; }
.font-light{font-weight: 400; }
.font-small{font-weight: 500; }
.font-medium{font-weight: 600}
.font-bold{font-weight: 700}
.font-exbold{font-weight: 800}
.font-raleway{ font-family: 'Raleway', sans-serif}
.font-open-sans{font-family: 'Open Sans', sans-serif}
.font-color-FFF{color:#FFF}
.font-color-000{color:#000;}
.p-p{padding: 0px; margin: 0px; overflow: hidden;}
.sablon2-level-menu
{
position: absolute;
left: 0;
list-style: none;
margin: 0;
opacity: 0;
visibility: hidden;
box-shadow: 0 5px 14.25px 0.75px rgba(0, 0, 0, 0.05);
z-index: 999;
transition: 0.01s ease-in-out 0s;
background-color: #fff;
width: 1300px;
padding: 0;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
}
.sablon2-level-menu-left{
flex:1;
box-sizing: border-box;
padding:30px 0;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
}
.sablon2-level-menu-left-item{
width:160px ;
margin-right: 25px;
margin-left: 25px;
margin-bottom: 40px;
box-sizing: border-box;
}
.sablon2-level-menu-left-item-h{
width: 100%;
display: block;
margin-bottom: 10px;
font-weight: 600;
font-size: 14px ;
}
.sablon2-level-menu-left-item-s{
width: 100%;
display: block;
margin-bottom: 5px;
font-size: 13px ;
}
.sablon2-level-menu-right{
width: 410px;
box-sizing: border-box;
padding: 30px;
}
.sablon2-level-menu-right img{
max-width: 100% !important;
}
.sablon2-level-menu-right-product-box{
width: 26%;
margin-bottom: 14px;
margin-right: 10px;
margin-left: 10px;
box-sizing: border-box;
display: block;
font-weight: 500;
font-size: 13px ;
margin-top: 14px;
}
.sablon2-level-menu-right-product-box img{
width: 100%;
height: 100px;
margin-bottom: 10px;
}
.third-level-menu
{
position: absolute;
top: 0 !important;
list-style: none;
margin: 0;
opacity: 0;
visibility: hidden;
box-shadow: 0 5px 14.25px 0.75px rgba(0, 0, 0, 0.05);
z-index: 9;
transition: 0.1s ease-in-out 0s;
}
.third-level-menu > li
{
height: auto;
}
.second-level-menu > li > .third-level-menu li p{
margin: 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.second-level-menu
{
position: absolute;
left: 0;
list-style: none;
margin: 0;
opacity: 0;
visibility: hidden;
box-shadow: 0 5px 14.25px 0.75px rgba(0, 0, 0, 0.05);
z-index: 999;
transition: 0.01s ease-in-out 0s;
}
.second-level-menu > li
{
position: relative;
height: auto;
}
.second-level-menu > li p{
margin: 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.top-level-menu
{
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: flex-start;
width: 100%;
position: relative;
}
.top-level-menu > li
{
width: auto;
height: auto;
transition-duration: 0.1s; transition-timing-function: linear;
}
.top-level-menu li:hover > ul
{
opacity: 1;
visibility: visible;
margin-top: 0;
margin-left: 0;
}
.top-level-menu > li span /* Apply to all links inside the multi-level menu */
{
text-decoration: none;
}
.top-level-menu > li a{
text-decoration: none;
}
.top-level-menu > li a span{
font-weight: 700;
}
.top-level-menu > li:hover a{
text-decoration: none;
}
.top-level-menu > li span{
display: block;
padding: 13px 30px !important;
}
.dropdown-overlay-show{
width: 150%;
background-color: rgba(0,0,0,0.6);
height: 200%;
position: absolute;
z-index: 99;
left:-500px;
display: none;
}
.tooltip-top, .tooltip-right, .tooltip-bottom, .tooltip-left {
position: relative;
outline: none;
}
.tooltip-top:before, .tooltip-right:before, .tooltip-bottom:before, .tooltip-left:before {
content: attr(data-tooltip);
padding: 4px 10px;
color: #555;
white-space: pre;
border-radius: 4px;
text-align: center;
font-weight: normal;
font-size: 12px;
z-index: 998;
}
.tooltip-top:after, .tooltip-right:after, .tooltip-bottom:after, .tooltip-left:after {
content: "";
width: 10px;
height: 10px;
z-index: 999;
}
.tooltip-top:before, .tooltip-top:after, .tooltip-right:before, .tooltip-right:after, .tooltip-bottom:before, .tooltip-bottom:after, .tooltip-left:before, .tooltip-left:after {
position: absolute;
cursor: default;
opacity: 0;
background-color: #fff;
pointer-events: none;
-webkit-transition: all ease-out .15s;
transition: all ease-out .15s;
}
.tooltip-top:hover:before, .tooltip-top:hover:after, .tooltip-right:hover:before, .tooltip-right:hover:after, .tooltip-bottom:hover:before, .tooltip-bottom:hover:after, .tooltip-left:hover:before, .tooltip-left:hover:after {
opacity: 1;
margin: 0;
box-shadow: 0 0 15px 0 rgba(0,0,0,.1);
}
.tooltip-right:before {
left: calc(100% + 8px + 4px);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.tooltip-right:after {
left: calc(100% + 5px + 4px);
-webkit-transform: translateY(-50%) rotate(-315deg);
transform: translateY(-50%) rotate(-315deg);
}
.tooltip-right:before, .tooltip-right:after {
top: 50%;
margin-left: -4px;
}
.tooltip-bottom:before {
top: calc(100% + 8px + 4px);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.tooltip-bottom:after {
top: calc(100% + 3px + 4px);
-webkit-transform: translateX(-50%) rotate(-225deg);
transform: translateX(-50%) rotate(-225deg);
}
.tooltip-bottom:before, .tooltip-bottom:after {
left: 50%;
margin-top: -4px;
}
.tooltip-left:before {
right: calc(100% + 8px + 4px);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.tooltip-left:after {
right: calc(100% + 3px + 4px);
-webkit-transform: translateY(-50%) rotate(-135deg);
transform: translateY(-50%) rotate(-135deg);
}
.tooltip-left:before, .tooltip-left:after {
top: 50%;
margin-right: -4px;
}
.up-arrow-blue:before{
content: '';
height: 11px;
width: 11px;
position: absolute;
background-color: #fff;
top: -6px;
left:32px;
border-top: #558cff solid 1px;
border-left: #558cff solid 1px;
transform: rotate(45deg);
}
.up-arrow-green:before{
content: '';
height: 11px;
width: 11px;
position: absolute;
background-color: #fff;
top: -6px;
left:32px;
border-top: #279c3d solid 1px;
border-left: #279c3d solid 1px;
transform: rotate(45deg);
}
.up-arrow-grey:before{
content: '';
height: 11px;
width: 11px;
position: absolute;
background-color: #f8f8f8;
top: -6px;
left:32px;
border-top: #ebebeb solid 1px;
border-left: #ebebeb solid 1px;
transform: rotate(45deg);
}
.up-arrow-grey-white:before{
content: '';
height: 11px;
width: 11px;
position: absolute;
background-color: #fff;
top: -6px;
left:32px;
border-top: #ebebeb solid 1px;
border-left: #ebebeb solid 1px;
transform: rotate(45deg);
}
.user-kargo-return-main{
width: 100%;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.user-kargo-return-left{
border: 1px solid #EBEBEB;
padding: 22px;
width: 49%;
margin-right: 1%;
box-sizing: border-box;
}
.user-kargo-return-right{
border: 1px solid #EBEBEB;
padding: 22px;
width: 49%;
margin-left: 1%;
box-sizing: border-box;
}
.user-kargo-return-heading{
width: 100%;
font-size: 13px ;
font-weight: 600;
color: #000;
margin-bottom: 18px;
}
.user-kargo-return-address{
font-size: 13px ;
width: 100%;
}
.kargolari-sirala{
width: 100%;
}
.kargolari-sirala img{
height: 60px;
padding: 5px;
border: 1px solid #EBEBEB;
}
.kargo-form-user{
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
}
.kargo-form-user-h{
font-size: 13px ;
font-weight: 600;
width: 220px;
}
.kargo-form-user-inputarea{
flex:1;
margin-left: 70px;
flex-wrap: wrap;
display: flex;
justify-content: flex-end;
}
.kargo-form-user-inputarea select{
font-size: 13px !important;
border-radius: 0;
width: 200px;
margin-right: 15px;
}
.kargo-form-user-inputarea input{
font-size: 13px !important;
border-radius: 0;
width: 200px;
margin-right: 15px;
}
.kargo-form-user-ok-value{
width: 155px;
font-size: 13px ;
font-weight: 600;
}
.kargo-form-user-ok-right{
flex:1;
background-color: #f2fdf9;
border: 1px solid #def1ea;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 15px;
font-size: 12px ;
justify-content: center;
}
.iban-user-area-heading{
width: 100%;
margin-bottom: 15px;
font-size: 13px ;
font-weight: 600;
}
.iban-user-area-form{
width: 100%;
display: flex;
justify-content: flex-start;
}
.iban-user-area-form input{
font-size: 13px !important;
border-radius: 0;
width: 40.5%;
margin-right: 15px;
}
.iban-user-area-form button{
width: auto;
}
.iade-onaysiz-user-main{
width: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
}
.iade-onaysiz-user-left{
width: auto;
margin-right: 15px;
font-weight: 600;
padding-top: 10px;
}
.iade-onaysiz-user-right{
flex:1;
background-color: #f8f8f8;
box-sizing: border-box;
padding: 10px 20px;
}
.iade-onaysiz-in-txt{
width: 90%;
font-style: italic;
}
.order-search-user-filter{
width: auto;
display: flex;
min-width: 200px;
margin-right: 10px;
}
/* DatePicker Custom */
#ui-datepicker-div>.ui-widget-header {
border: 1px solid #ebebeb !important;
background: #f8f8f8 !important;
color: #000;
font-weight: bold;
}
#ui-datepicker-div {
border: 1px solid #EBEBEB !important;
padding: 10px!important;
box-shadow: 0 0 15px 0 rgba(0,0,0,.1);
}
.product-detail-variant-div.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
border: 1px solid #EBEBEB !important;
}
#ui-datepicker-div>.ui-widget-header select{
background-color: #fff;
margin-right: 4px !important;
border:1px solid #EBEBEB;
}
.date-variant{
font-size: 13px !important; ;
border:2px solid #EBEBEB !important;
height: 55px !important;
min-width: 300px !important;
cursor: pointer;
}
.date-select-variant{
position: relative;
}
.date-select-variant i{
position: absolute;
top:15px;
font-size: 18px ;
right: 12px;
}
/* <========SON=========>>> DatePicker Custom SON */
.fixed-foot-navigation{
display: none;
}
.subpage-nav-mobile-toggle{
display: none;
}
.subpage-nav-mobile-main{
display: none;
}
.detail-none{
display: block;
}
.limitdetay-div{
margin-left: 0 !important;
}
.kargoucret-detay-div{
margin-right: 10px;
border: 2px solid #EBEBEB !important ;
padding: 15px;
}
.limitdetay-div{
border: 2px solid #EBEBEB !important ;
padding: 15px;
}
.slide-top-mobile{
display: none !important;
}
.cart-right-div-price-box { display:flex; align-items:center; justify-content:space-between; }
.cart-right-div-price-box-left { flex:1; min-width:0; }
.cart-right-div-price-box-right { min-width:130px; text-align:right; }
.cart-right-div-price-box-right .unit { margin-left:4px; font-size:12px; color:#666; }
@media (max-width: 576px){
.cart-right-div-price-box { padding: 8px 10px; }
.cart-right-div-price-box-left{ font-size:13px; }
.cart-right-div-price-box-right{ font-size:13px; }
}
/* Cart buttons */
.button-blue {
background:#1f2b44 !important;
border:1px solid #1f2b44 !important;
color:#fff !important;
}
.button-blue:hover,
.button-blue:focus {
background:#162235 !important;
border-color:#162235 !important;
color:#fff !important;
}
/* Sağ karttaki indirme/önizleme buton grubu */
.cart-right-div .mb-3{
display:flex;
flex-direction:column; /* alt alta diz */
align-items:flex-end; /* saÄŸa yasla */
gap:10px; /* aralık */
}
/* Butonların düzgün hizası ve tıklama alanı */
.cart-right-div .mb-3 a{
display:inline-flex;
align-items:center;
justify-content:center;
min-width: 220px; /* kutular eÅŸit dursun */
padding:10px 14px;
border-radius:8px;
text-decoration:none;
line-height:1.2;
white-space:nowrap; /* iki satıra taşmasın */
}
/* İkon metin aralığı (inline style’a gerek yok) */
.cart-right-div .mb-3 a i{
margin-right:8px;
}
/* Küçük ekran: tam genişlik, sola hizala */
@media (max-width: 992px){
.cart-right-div .mb-3{
align-items:stretch;
}
.cart-right-div .mb-3 a{
min-width:unset;
width:100%;
}
}
/* ===========================
ÜRÜN KARTI – GÖRSEL, ÇİZGİLER, BUTONLAR
=========================== */
/* 1) Görsel kutuları: 1200x1800 (2:3) oran, çizgi yok */
.cat-detail-products-box-img,
.cat-detail-products-box-img-big {
width: 100%;
aspect-ratio: 2 / 3; /* vitrin için sabit oran */
display: block;
background: transparent !important;
overflow: hidden;
border: 0 !important;
box-shadow: none !important;
}
/* 2) Görseller kutuya TAM sığsın, taşmasın – çizgi yok */
.cat-detail-products-box-img img,
.cat-detail-products-box-img-big img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important; /* tamamı görünsün (kırpma yok) */
object-position: center !important;
display: block;
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
/* 3) Ürün kartı etrafındaki tüm çizgi/gölge efektlerini kapat */
.cat-detail-products-box,
.cat-detail-products-box-big {
border: 0 !important;
box-shadow: none !important;
}
.cat-detail-products-box:hover,
.cat-detail-products-box-big:hover {
box-shadow: none !important;
}
/* 4) Sepete Ekle butonu (#1f2b44) */
.cat-detail-products-box-cart-2 button,
.cat-detail-products-box-cart-1 button {
background: #1f2b44 !important;
border-color: #1f2b44 !important;
color: #fff !important;
}
.cat-detail-products-box-cart-2 button:hover,
.cat-detail-products-box-cart-1 button:hover {
background: #263454 !important; /* bir tık koyu */
border-color: #263454 !important;
}
/* 5) Favori/Kalp butonu kırmızı — KAPATTIK */
/*
.cat-detail-products-box-cart-2 a,
.cat-detail-products-box-cart-1 a {
background: #e53935 !important;
border-color: #e53935 !important;
color: #fff !important;
}
.cat-detail-products-box-cart-2 a:hover,
.cat-detail-products-box-cart-1 a:hover {
background: #c62828 !important;
border-color: #c62828 !important;
}
*/
/* 6) Kalp ikonunu beyaz yap — KAPATTIK */
/*
.cat-detail-products-box-cart-2 a i,
.cat-detail-products-box-cart-1 a i {
color: #fff !important;
}
*/
/* 6) Kalp ikonunu beyaz yap (buton üstünde görünür dursun) */
.cat-detail-products-box-cart-2 a i,
.cat-detail-products-box-cart-1 a i {
color: #fff !important;
}
/* Ürün görselini kutuya TAM sığdır (paddingleri iptal et) */
.cat-detail-products-box-img,
.cat-detail-products-box-img-big{
width: 100%;
aspect-ratio: 2 / 3; /* 1200x1800 oranı */
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
position: relative; /* child'ı absolute yapacağız */
overflow: hidden; /* taşanı gizle (gerekirse) */
}
/* === ÜRÜN LİSTESİ – Görsel çerçeveyi TAM doldursun === */
.cat-detail-products-box-img,
.cat-detail-products-box-img-big{
padding: 0 !important;
margin: 0 !important;
position: relative;
overflow: hidden;
aspect-ratio: 2 / 3; /* 1200x1800 oranı */
}
/* İç link tüm kutuyu kaplasın */
.cat-detail-products-box-img > a,
.cat-detail-products-box-img-big > a{
position: absolute;
inset: 0; /* top/right/bottom/left: 0 */
display: block;
}
/* Görsel kutuyu komple DOLDURSUN (gerekirse kırpılır) */
.cat-detail-products-box-img img,
.cat-detail-products-box-img-big img{
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover !important; /* ↠çerçeveyi tamamen doldurur */
object-position: center !important;
border: 0 !important;
box-shadow: none !important;
}
/* Herhangi bir hover zoom/transform varsa iptal et */
.cat-detail-products-box:hover .cat-detail-products-box-img img,
.cat-detail-products-box:hover .cat-detail-products-box-img-big img{
transform: none !important;
}
/* === ÜRÜN DETAYI – thumbnail'ları 2:3 yap ve kare çerçeveyi kaldır === */
.gc-thumbs-area{
height: auto !important; /* satır yüksekliği serbest */
display: flex;
gap: 10px; /* aralık isteğe bağlı */
align-items: flex-start;
}
.gc-thumbs-area li{
width: 72px !important; /* genişliği istediğin gibi ayarla (68–80px arası iyi) */
aspect-ratio: 2 / 3; /* 1200x1800 oranı */
height: auto !important;
overflow: hidden;
border: none !important; /* kare çerçeveyi kaldır */
box-shadow: none !important;
background: transparent !important;
}
/* küçük görselin kendisi kutuyu TAM doldursun */
.gc-thumbs-area li img,
.gc-thumbs-area .gc-thumbnail-display{
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover !important; /* tam doldur (gerekirse kırpar) */
object-position: center !important;
display: block;
border: 0 !important;
box-shadow: none !important;
}
/* Seçili thumbnail için çerçeve İSTEMİYORSAN tamamen kapat: */
.gc-thumbs-area li.selected,
.gc-thumbs-area li.active,
.gc-thumbs-area li.current{
outline: none !important;
border: none !important;
}
/* (İstersen) seçili olanı nazik bir vurguyla göster:
.gc-thumbs-area li.selected,
.gc-thumbs-area li.active,
.gc-thumbs-area li.current{
outline: 2px solid #1f2b44; // veya baÅŸka renk
outline-offset: 0;
}
*/
/* === ÜRÜN DETAY: Büyük görseli ekranda daha az yer kaplayacak şekilde sınırla === */
/* Masaüstü için hedef genişlik:
- en az 320px
- ideal olarak ekranın %30'u
- en fazla 420px (dilersen deÄŸiÅŸtir) */
@media (min-width: 992px) {
:root{
--prod-img-w: clamp(320px, 30vw, 420px);
}
.gc-display-area,
.gc-display-container,
.gc-display,
.gc-zoom{
width: var(--prod-img-w) !important;
aspect-ratio: 2 / 3 !important; /* 1200x1800 oranı */
height: auto !important;
max-height: 80vh !important; /* çok uzun ekranlarda taşmasın */
}
/* Thumbnail şeridi de aynı genişliğe otursun */
.gc-thumbs-area{
width: var(--prod-img-w) !important;
}
}
/* Tablet & mobil: tam genişlik ama ortalı */
@media (max-width: 991.98px){
.gc-display-area,
.gc-display-container,
.gc-display,
.gc-zoom,
.gc-thumbs-area{
width: 100% !important;
max-width: 420px; /* dilersen 360–420 arası oynatabilirsin */
margin-left: auto;
margin-right: auto;
}
}
/* === Çizgileri (kenarlıkları) kaldır === */
.gc-display-area,
.gc-display-container,
.gc-display,
.gc-zoom {
border: none !important;
box-shadow: none !important; /* varsa gölgeyi de kapatır */
background: transparent; /* istersen kalsın */
}
/* Thumbnail’ların kenarlığını da kaldır */
.gc-thumbs-area img {
border: none !important;
box-shadow: none !important;
}
/* (İsteğe bağlı) aktif küçük görselde çerçeve de olmasın */
.gc-thumbs-area .active img,
.gc-thumbs-area img.is-active,
.gc-thumbs-area a.active img {
outline: none !important;
border: none !important;
}
/* SaÄŸ taraftaki bilgi kutusunda inline border varsa onu da kapat */
.urun-detay-sag-alan {
border: none !important;
box-shadow: none !important;
}
/* === GlassCase UL/LI düzeltmesi – wrap + inline width iptali === */
/* 0) Kesen kapsayıcıyı açıyoruz (senin projende class farklıysa onu yaz) */
.urun-detay-main,
.urun-detay-main-in {
overflow: visible !important;
}
/* 1) UL’i dev blok olmaktan çıkar: genişliği otomatik + wrap */
.gc-thumbs-area.gc-hz ul#glasscase {
display: flex !important;
flex-wrap: wrap !important; /* küçük kutular alt satıra geçebilsin */
gap: 10px !important; /* senin gap’inle uyumlu */
width: auto !important; /* inline width’i iptal et */
height: auto !important; /* inline height’i iptal et */
margin: 0 !important;
padding: 0 !important;
white-space: normal !important; /* eklenti “tek satır†zorlamasın */
overflow: visible !important;
}
/* 2) UL’in satır-içi ölçülerini zorla iptal (garantilemek için) */
.gc-thumbs-area.gc-hz ul#glasscase[style] {
width: auto !important;
height: auto !important;
}
/* 3) LI’leri senin oranlarına sabitle; inline width/height’ı yok say */
.gc-thumbs-area.gc-hz ul#glasscase > li {
width: 72px !important; /* senin verdiğin ölçü */
aspect-ratio: 2 / 3 !important; /* 1200×1800 oranı */
height: auto !important;
margin: 0 !important; /* inline margin’i temizle */
list-style: none !important;
overflow: hidden;
border: none !important;
box-shadow: none !important;
background: transparent !important;
display: block !important; /* inline-block yerine sabit blok */
}
/* 4) LI üzerinde de inline stil varsa sıfırla */
.gc-thumbs-area.gc-hz ul#glasscase > li[style] {
width: 72px !important;
height: auto !important;
margin: 0 !important;
}
/* 5) Görseller kutuyu tam doldursun (senin kurallarınla aynı) */
.gc-thumbs-area.gc-hz ul#glasscase > li img,
.gc-thumbs-area .gc-thumbnail-display {
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
object-position: center !important;
display: block;
border: 0 !important;
box-shadow: none !important;
}
/* === Variant Swatches (GLOBAL) === */
.vh{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
.variant-swatch-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;align-items:center}
.variant-swatch{width:34px;height:34px;border:1px solid #e2e2e2;border-radius:8px;background:var(--swatch,#e5e5e5);background-size:cover;background-position:center;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.variant-swatch:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.08)}
.variant-swatch.active{outline:2px solid #111;border-color:#111}
.variant-swatch[aria-disabled="true"]{opacity:.35;cursor:not-allowed}
.variant-swatch.round{border-radius:999px}
/* --- User menu: Favorite Products List & Notifications siyah --- */
.dropdown-user-area .dropdown-user-area-link-area{
color:#000 !important; /* metin */
opacity:1 !important; /* varsa soluk görünümü kaldır */
}
.dropdown-user-area .dropdown-user-area-link-area i{
color:#000 !important; /* ikonlar */
}
.dropdown-user-area .dropdown-user-area-link-area a{
color:#000 !important; /* (boş) linkler de siyah kalsın */
text-decoration:none !important;
}
.dropdown-user-area .dropdown-user-area-link-area a:hover,
.dropdown-user-area .dropdown-user-area-link-area a:focus{
color:#000 !important;
}
/* =========================================================
MOBILE HOTFIX — GlassCase inline pozisyonları RESET (≤ 767.98px)
Bu blok, senin mevcut kurallarının EN ALTINA eklenecek.
========================================================= */
@media (max-width: 767.98px){
/* 1) THUMBS KAPSAYICISI: absolute/top/left inline stilleri sıfırla,
normal akışta büyük görselin ALTINA gelsin */
.glass-case .gc-thumbs-area,
.glass-case .gc-thumbs-area.gc-hz,
.glass-case .gc-thumbs-area.gc-hz[style]{
position: static !important;
top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
width: 100% !important; height: auto !important;
margin: 12px auto 0 !important;
padding: 0 !important;
transform: none !important;
z-index: 0 !important;
overflow: visible !important;
display: block !important;
background: transparent !important;
}
/* 2) THUMBS UL: tek satır, yatay kaydırmalı ve ortalı */
.glass-case .gc-thumbs-area.gc-hz ul#glasscase{
display: flex !important;
flex-wrap: nowrap !important;
justify-content: center !important;
align-items: flex-start !important;
gap: 12px !important;
width: 100% !important;
min-height: 96px; /* görünür yükseklik garantisi */
overflow-x: auto !important;
overflow-y: hidden !important;
white-space: nowrap !important;
padding: 6px 8px !important;
margin: 0 auto !important;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
/* 3) THUMBS LI/IMG boyutları (dokunma alanı rahat) */
.glass-case .gc-thumbs-area.gc-hz ul#glasscase > li{
flex: 0 0 auto !important;
width: 80px !important;
aspect-ratio: 2/3 !important;
height: auto !important;
scroll-snap-align: center;
overflow: hidden;
border: none !important;
background: transparent !important;
}
.glass-case .gc-thumbs-area.gc-hz ul#glasscase > li img{
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
border-radius: 10px;
opacity: 1 !important; /* “yükleniyorâ€da takılmayı bastır */
display: block !important;
}
.glass-case .gc-thumbs-area .gc-loading,
.glass-case .gc-thumbs-area .gc-thumb-loading{
display: none !important;
}
/* 4) BÃœYÃœK GÖRSEL BLOÄU: taÅŸmasın, 2:3 karta otursun */
.glass-case .gc-display-area,
.glass-case .gc-display-container,
.glass-case .gc-display,
.glass-case .gc-zoom{
position: relative !important;
width: 100% !important;
max-width: 420px !important;
height: auto !important;
margin: 0 auto !important;
aspect-ratio: 2 / 3 !important; /* portre oran */
overflow: hidden;
background: #f4f4f4; /* vitrinle uyumlu yumuÅŸak zemin */
border-radius: 12px;
padding: 0 !important;
}
/* 5) GÖRSEL: eklentinin img’ye yazdığı absolute/margin/transform’u iptal et */
.glass-case .gc-display-container img,
.glass-case .gc-display-area img{
position: static !important;
top: auto !important; left: auto !important; transform: none !important;
margin: 0 auto !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important; /* ürün tamamen görünsün, kırpma yok */
object-position: center !important;
border-radius: 8px;
display: block !important;
}
/* 6) Zoom overlay mobilde sorun çıkarıyorsa kapat */
.glass-case .gc-zoom{ display: none !important; }
}
/* ===== MOBILE PIN FIX — büyük görseli karta tam oturt (≤767.98px) ===== */
@media (max-width: 767.98px){
/* Kartın kendisi: 2:3 oran + göreli konum */
.glass-case .gc-display-area{
width: 100% !important;
max-width: 420px !important;
aspect-ratio: 2 / 3 !important;
height: auto !important;
position: relative !important;
margin: 0 auto !important;
overflow: hidden !important;
background: #f4f4f4; /* istersen kaldırabilirsin */
border-radius: 12px;
}
/* Eklentinin inline width/height/margin deÄŸerlerini iptal et */
.glass-case .gc-display-container,
.glass-case .gc-display-container[style]{
position: absolute !important;
inset: 0 !important; /* top/right/bottom/left: 0 */
width: 100% !important;
height: 100% !important;
margin: 0 !important;
transform: none !important;
}
/* Asıl görsel: tam-orta, kırpmasız yerleşim */
.glass-case .gc-display-container img.gc-display-display,
.glass-case .gc-display-area img{
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important; /* tamamı görünsün */
object-position: center !important;
margin: 0 !important;
transform: none !important;
display: block !important;
border-radius: 8px;
}
/* Lens/zoom mobilde gerek yoksa kapat */
.glass-case .gc-lens,
.glass-case .gc-zoom{ display: none !important; }
}
/* ===========================================================
Tayfun Silver • Ürün Detayı (MOBİL ÖNCE • PC UYUMLU)
Palet: Gece Mavisi #1f2b44, Açık Bej #e3dacb, Toz Pembe #c67986
=========================================================== */
/* ---------- DeÄŸiÅŸkenler ---------- */
:root{
--ts-navy:#1f2b44; --ts-beige:#e3dacb; --ts-rose:#c67986; --ts-green:#25D366;
--ts-muted:#8b93a7; --ts-border:rgba(31,43,68,.16);
--ts-card:#fff; --ts-soft:#f6f7fb;
--ts-r-lg:16px; --ts-r-md:14px; --ts-r-sm:10px;
--ts-shadow-soft:0 8px 24px rgba(31,43,68,.08);
--ts-shadow-card:0 10px 24px rgba(31,43,68,.10);
--ts-shadow-rose:0 12px 28px rgba(198,121,134,.30);
--ts-max:1280px; --ts-gutter:16px;
}
/* ---------- Genel (Mobil Varsayılan) ---------- */
body{color:var(--ts-navy);background:#fff;-webkit-tap-highlight-color:transparent}
/* Sayfa alanı (mobil tek sütun) */
.urun-detay-main{
max-width:var(--ts-max);
margin:0 auto;
padding:16px var(--ts-gutter);
display:block;
}
/* SaÄŸ panel kart hissi */
.urun-detay-main > .urun-detay-sag-alan > div{
background:var(--ts-card);
border:1px solid var(--ts-border);
border-radius:var(--ts-r_md,14px);
box-shadow:var(--ts-shadow-card);
padding:14px;
}
/* Başlık / fiyat */
.urun-detay-sag-alan h1,
.urun-detay-sag-alan .urun-detay-baslik-alt{color:var(--ts-navy)}
.urun-detay-sag-alan .urun-detay-sag-alan-fiyatlar *{color:var(--ts-navy);font-weight:800;letter-spacing:.2px}
/* ---------- Ring Size (mobil) ---------- */
.urun-detay-sag-alan .product-detail-variant-div.ring-size-block{
margin-top:12px;padding:14px;border-radius:var(--ts-r-lg);
border:1px solid var(--ts-border);background:var(--ts-card);box-shadow:var(--ts-shadow-soft);
}
.urun-detay-sag-alan .ring-size-block .multi-size-toggle{
display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;
background:var(--ts-beige);color:var(--ts-navy);font-weight:800;font-size:12px;
border:1px solid rgba(31,43,68,.08)
}
.urun-detay-sag-alan .ring-size-block .multi-size-toggle .dot{
width:8px;height:8px;border-radius:50%;background:var(--ts-rose);
box-shadow:0 0 0 3px rgba(198,121,134,.15)
}
.urun-detay-sag-alan .ring-size-block .swatch-list.is-multi{margin-top:8px}
.urun-detay-sag-alan .ring-size-block .swatch-list.is-multi .row{
display:flex !important;align-items:center;gap:10px;margin:0 0 10px 0 !important
}
/* 1. kolon: ölçü çipi */
.urun-detay-sag-alan .ring-size-block .swatch-list.is-multi .row>div:first-child{
flex:1 1 auto;min-height:48px;padding:12px 14px;border:1px solid var(--ts-border);
border-radius:var(--ts-r-lg);background:#fff;color:var(--ts-navy);font-weight:700;
box-shadow:0 10px 26px rgba(31,43,68,.07);display:flex;align-items:center;gap:10px;
transition:border-color .2s,background-color .2s,color .2s
}
.urun-detay-sag-alan .ring-size-block .swatch-list.is-multi .row>div:first-child:hover{border-color:rgba(198,121,134,.55)}
.urun-detay-sag-alan .ring-size-block .swatch-list.is-multi .row>div:first-child.selected{
background:var(--ts-rose);color:#fff;border-color:var(--ts-rose);box-shadow:var(--ts-shadow-rose)
}
/* 2-3-4. kolon: - qty + (dokunma boyutları) */
.urun-detay-sag-alan .ring-size-block .swatch-list.is-multi .row>div:nth-child(2),
.urun-detay-sag-alan .ring-size-block .swatch-list.is-multi .row>div:nth-child(3),
.urun-detay-sag-alan .ring-size-block .swatch-list.is-multi .row>div:nth-child(4){
flex:0 0 auto;display:flex;align-items:center;justify-content:center
}
.urun-detay-sag-alan .ring-size-block .swatch-list.is-multi .row>div:nth-child(2) button,
.urun-detay-sag-alan .ring-size-block .swatch-list.is-multi .row>div:nth-child(4) button{
width:44px;height:44px;line-height:44px;border-radius:var(--ts-r-lg);border:1px solid var(--ts-border);
background:#fff;color:var(--ts-navy);font-weight:800;font-size:18px;user-select:none;touch-action:manipulation
}
.urun-detay-sag-alan .ring-size-block .swatch-list.is-multi .row>div:nth-child(3) input{
width:54px;height:44px;text-align:center;border:1px solid var(--ts-border);border-radius:10px;
color:var(--ts-navy);font-weight:800;background:#fff
}
/* ---------- Plating & Gem (mobil) ---------- */
.urun-detay-main .product-detail-variant-div .variant-swatch-list,
.urun-detay-main .product-detail-variant-div .swatch-list:not(#ring-size-swatch-121){
display:flex;gap:14px;flex-wrap:wrap;margin-top:8px
}
.urun-detay-main .product-detail-variant-div .swatch-list .swatch{
width:42px;height:42px;border-radius:50%;border:2px solid #fff;outline:2px solid var(--ts-border);
box-shadow:0 4px 10px rgba(31,43,68,.12);cursor:pointer;transition:transform .12s,outline-color .12s
}
.urun-detay-main .product-detail-variant-div .swatch-list .swatch.active{
outline-color:var(--ts-rose);box-shadow:0 0 0 4px rgba(198,121,134,.18)
}
/* ---------- CTA & Adet (mobil) ---------- */
#addtocartbtn,.add-to-cart,.urun-detay-main .btn-primary{
background:var(--ts-navy);color:#fff;border:0;min-height:52px;border-radius:var(--ts-r-lg);
font-weight:900;letter-spacing:.2px;box-shadow:0 12px 24px rgba(31,43,68,.20)
}
.whatsapp-order-btn{
background:var(--ts-green);color:#0b3d1f;min-height:52px;border-radius:var(--ts-r-lg);font-weight:900;
box-shadow:0 12px 24px rgba(37,211,102,.20)
}
.urun-detay-main .adet-alani select,
.urun-detay-main .adet-alani input{height:52px;border-radius:12px;border:1px solid var(--ts-border);color:var(--ts-navy)}
/* Sticky CTA (mobil opsiyonel) */
.sticky-cta{display:none}
@media (max-width:768px){
.sticky-cta{position:fixed;left:12px;right:12px;bottom:12px;z-index:50;display:flex;gap:10px}
.sticky-cta>*{flex:1}
body{padding-bottom:92px}
}
@supports (padding-bottom: env(safe-area-inset-bottom)){
@media (max-width:768px){
body{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
.sticky-cta{padding-bottom:env(safe-area-inset-bottom)}
}
}
/* ---------- EriÅŸilebilirlik ---------- */
.urun-detay-main :is(button,input,.swatch):focus-visible{
outline:2px solid rgba(198,121,134,.55);outline-offset:3px;border-radius:12px
}
.is-disabled,[disabled]{opacity:.55;pointer-events:none}
/* =================================================================
PC / BÃœYÃœK EKRAN Ä°YÄ°LEÅTÄ°RMELERÄ° (Mobil tasarımın üstüne eklemeler)
================================================================= */
@media (min-width:1024px){
/* 2 sütun düzen, ferah boşluklar */
.urun-detay-main{
padding:20px 24px;gap:28px;
display:grid;grid-template-columns:minmax(520px,1fr) minmax(420px,520px);align-items:start
}
/* Sağ panel yapışkan */
.urun-detay-main>.urun-detay-sag-alan{position:sticky;top:24px;align-self:start}
/* Kart/panel iç boşluk */
.urun-detay-main>.urun-detay-sag-alan>div{padding:18px}
/* Varyant kartını büyüt ve gölgeyi yumuşat */
.urun-detay-sag-alan .product-detail-variant-div.ring-size-block{
padding:18px;border-radius:var(--ts-r-lg);box-shadow:var(--ts-shadow-soft)
}
.urun-detay-sag-alan .ring-size-block .swatch-list.is-multi .row{gap:12px;margin-bottom:12px !important}
.urun-detay-sag-alan .ring-size-block .swatch-list.is-multi .row>div:first-child{min-height:48px}
/* Galeri küçük parmak görselleri daha büyük olabilir (varsa) */
.thumb-row img{width:76px;height:76px}
}
/* XL ekranlarda saÄŸ kolon geniÅŸlesin */
@media (min-width:1440px){
.urun-detay-main{grid-template-columns:minmax(560px,1fr) minmax(480px,560px)}
}
/* Hareket hassasiyeti */
@media (prefers-reduced-motion:reduce){
*{transition:none !important;animation:none !important}
}
/* === User dropdown: başlık hizası + boşluk + hover === */
.dropdown-menu .dropdown-userarea-header{
display:flex !important;
align-items:center;
justify-content:flex-start !important;
gap:8px !important; /* ikon–metin arası */
padding:8px 12px !important; /* diğer maddelerle aynı yoğunluk */
line-height:1.2;
font-size:14px;
font-weight:700;
color:#1f2b44 !important;
text-decoration:none !important;
border-radius:8px; /* hafif yuvarlak */
transition:background-color .15s ease, color .15s ease;
white-space:nowrap;
}
/* ikon boyutu ve sağa sabit küçük boşluk */
.dropdown-menu .dropdown-userarea-header i{
width:18px; min-width:18px; /* jitter engelle */
text-align:center;
margin-right:6px !important;
color:#1f2b44 !important;
opacity:.9;
transition:color .15s ease, opacity .15s ease;
}
/* hover – hafif arka plan ve koyulaşan yazı/ikon */
.dropdown-menu .dropdown-userarea-header:hover{
background:rgba(31,43,68,.06);
color:#162235 !important;
}
.dropdown-menu .dropdown-userarea-header:hover i{
color:#162235 !important;
opacity:1;
}
/* Başlıktan sonra gereksiz çizgi/boşluk oluşmasın */
.dropdown-user-area-link-area{
margin-top:0 !important;
border-top:0 !important;
}
/* Header ve Slider ////////////////////////////////////////////*/
/* ==========================================
BRAND COLORS (CSS VARIABLES)
========================================== */
:root{
--ts-color-navy: #1f2b44; /* Gece mavisi */
--ts-color-navy-soft: #2a3755; /* Header alt ÅŸerit */
--ts-color-beige: #e3dacb; /* Açık bej */
--ts-color-rose: #c67986; /* Toz pembe */
--ts-color-accent: #558cff; /* Mavi accent */
}
/* Mobil header default olarak gizli (tema JS ile açılacak) */
.header-mobile-view,
.web-header-mobile-bar{
display: none;
}
.slider_text_inside_main{
width: 1280px;
height: auto;
z-index: 2;
display: flex;
}
.slider_text_inside_main_2{
width: 1200px;
height: auto;
z-index: 2;
display: flex;
}
.slider_text_inside_box{
width: 762px;
}
.slider_text_inside_box_h{
width: 100%;
margin-bottom: 35px;
}
.slider_text_inside_box_s{
width: 100%;
}
.slider_text_inside_box_button{
width: 100%;
margin-top: 50px;
}
.header-main-div{
width: 100%;
box-sizing: border-box;
z-index: 9;
}
/* Top header bar (kampanya / info alanı) */
.topheader-html-main{
width: 100%;
box-sizing: border-box;
position: relative;
}
.topheader-html-main-in{
width: 1300px;
box-sizing: border-box;
margin: 0 auto;
font-size: 14px ;
}
.topheader-html-main img{
max-width: 100%;
}
.topheader-html-close{
position: absolute;
right: 10px;
top:20%;
cursor: pointer;
}
.topheader-desktop-main-div{
width: 100%;
}
.topheader-desktop-main-div-in{
width: 1300px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.topheader-desktop-main-left{
width: auto;
display: flex;
justify-content: flex-start;
}
.topheader-desktop-main-left a{
display: flex;
align-items: center;
justify-content: flex-start;
margin-right: 7px;
}
.topheader-desktop-main-left a i{
margin-right: 5px;
}
.topheader-desktop-main-right a{
display: flex;
align-items: center;
justify-content: flex-start;
margin-left: 7px;
}
.topheader-desktop-main-right a i{
margin-right: 5px;
}
.topheader-desktop-main-right{
width: auto;
display: flex;
justify-content: flex-start;
}
.topheader-lang-currency-box{
width: auto;
margin-left: 10px;
}
.topheader-lang-currency-box:last-child{
margin-left:0!important;
}
.topheader-lang-currency-box a{
margin-left: 0;
}
.topheader-lang-currency-box a i{
margin-left: 5px;
}
/* Para birimi dropdown */
.dropdown-menu.currency-drop{
width: 180px !important;
box-sizing: border-box;
padding: 15px;
margin-top: 15px;
}
.currency-drop a{
display: flex;
align-items: center;
justify-content: flex-start;
border-bottom: 1px dashed #EBEBEB;
color: #000 !important;
font-size: 13px!important;
padding: 0 !important;
font-weight: 500!important;
padding-bottom: 5px !important;
margin-bottom: 5px !important;
}
.currency-drop a:last-child{
margin-bottom: 0 !important;
}
/* Ana header (logo + menü + ikonlar) */
.header-desktop-main-div{
width: 100%;
}
.header-desktop-main-div-in{
width: 1300px;
margin: 0 auto;
display: flex;
justify-content: flex-start;
align-items: center;
}
.header-desktop-logo-div{
width: auto;
margin-right: 50px;
}
.header-desktop-logo-div img{
max-height: 90px;
max-width: 200px;
}
.top-level-menu-main-div{
width: 100%;
}
.top-level-menu-main-div-in{
width: 100% !important;
max-width: 100% !important;
margin: 0;
display: flex;
align-items: center;
padding: 0 40px;
}
.header-desktop-right-area{
display: flex;
flex:1;
justify-content: flex-end;
align-items: center;
}
/* Yeni header dizayn – arama, çağrı ve ikonlar */
.header-desktop-search1{
width: auto;
position: relative;
margin-left: 30px;
}
.header-desktop-search1 form input{
min-width: 400px;
font-size: 13px ;
height: 45px;
padding: 0 25px;
transition-duration: 0.1s;
transition-timing-function: linear;
}
.header-desktop-search1 form button{
position: absolute;
right:12px;
margin-top: 3px;
background:none;
border: 0;
font-size: 26px ;
}
.header-desktop-search1 form button:focus{
outline: 0 !important;
}
.header-desktop-call{
width: auto;
display: flex;
align-items: center;
justify-content: flex-start;
margin-left: 30px;
}
.header-desktop-call-i{
margin-right: 5px;
font-size: 40px ;
}
.header-desktop-call-t{
width: auto;
}
.header-desktop-call-t-1{
font-size: 11px ;
}
.header-desktop-call-t-2{
font-size: 15px ;
font-weight: 600;
}
.header-desktop-navbutton-box{
width: auto;
margin-left: 30px;
text-align: center;
position: relative;
}
.header-desktop-navbutton-box a{
position: relative;
}
.header-desktop-navbutton-box a:hover{
text-decoration: none;
}
.header-desktop-navbutton-box i{
font-size: 30px ;
margin-bottom: 4px;
line-height: 30px;
}
.header-desktop-navbutton-box-t{
font-size: 12px ;
font-weight: 600;
}
.header-desktop-navbutton-box-count{
position: absolute;
border:0 !important;
padding: 0 5px !important;
border-radius: 100px;
font-size: 11px;
display: inline-block;
left:18px;
}
.header-desktop-navbutton-box-count-cart{
position: absolute;
border:0 !important;
padding: 0 5px !important;
border-radius: 100px;
font-size: 11px;
display: inline-block;
left:20px;
}
.carting i{
font-size: 36px ;
}
/* Sepet dropdown */
.dropdown-cart-header{
width: 100%;
font-size: 13px ;
font-weight: 500;
color: #000;
border-bottom: 1px solid #EBEBEB;
margin-bottom: 11px;
padding-bottom: 7px;
text-align: left;
}
.dropdown-cart-overflow{
width: 100%;
height: auto;
max-height: 430px;
overflow-y: auto;
}
.dropdown-cart-overflow::-webkit-scrollbar-track {
background-color: #ebebeb;
}
.dropdown-cart-overflow::-webkit-scrollbar {
width: 7px;
}
.dropdown-cart-overflow::-webkit-scrollbar-thumb {
background-color: #ccc;
}
.dropdown-menu.cart-drop{
width: 330px !important;
box-sizing: border-box;
padding: 15px;
margin-top: 15px;
color: #000 !important;
}
.dropdown-menu.user-drop{
width: 250px !important;
box-sizing: border-box;
padding: 25px;
margin-top: 15px;
color: #000 !important;
}
.dropdown-menu.bell-drop{
width: 340px !important;
box-sizing: border-box;
padding: 10px;
margin-top: 15px;
color: #000 !important;
}
.dropdown-cart-itembox{
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #EBEBEB;
box-sizing: border-box;
}
.dropdown-cart-itembox:last-child{
margin-bottom: 0;
}
.dropdown-cart-itembox-content{
flex:1;
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.dropdown-cart-itembox-content-img{
width: 70px;
height: 70px;
margin-right: 10px;
overflow: hidden;
}
.dropdown-cart-itembox-content-img img{
width: 100%;
height: auto;
}
.dropdown-cart-itembox-content-t{
flex:1;
}
.dropdown-cart-itembox-content-t-1{
font-size: 13px ;
font-weight: 600;
margin-bottom: 7px;
line-height: 17px;
}
.dropdown-cart-itembox-content-t-3{
font-size: 13px ;
margin-top: 3px;
}
.dropdown-cart-itembox-trash{
width: 45px;
text-align: center;
}
.dropdown-cart-itembox-trash i{
font-size: 16px ;
color: indianred;
line-height: 16px;
}
.dropdown-cart-noitem{
width: 100%;
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
padding: 30px 0;
border: 1px dashed #EBEBEB;
}
.dropdown-cart-noitem i{
margin-bottom: 0;
font-size: 35px ;
line-height: 35px;
}
.dropdown-cart-noitem-t{
font-size: 16px ;
font-weight: 600;
margin-top: 10px;
margin-bottom: 8px;
color: #000;
}
.dropdown-cart-noitem-s{
font-size: 13px ;
color: #666;
width: 80%;
margin: 0 auto;
}
.dropdown-cart-priceTotal{
width: 100%;
box-sizing: border-box;
padding: 5px 8px;
border-bottom: 1px solid #EBEBEB;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
}
.dropdown-cart-priceTotal-l{
font-size: 13px ;
color: #000;
}
.dropdown-cart-priceTotal-r{
font-size: 16px ;
color: #000;
font-weight: 600;
}
/* Bildirim dropdown */
.dropdown-bell-no{
width: 100%;
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
padding: 15px 0;
}
.dropdown-bell-no i{
margin-bottom: 0;
font-size: 35px ;
line-height: 35px;
}
.dropdown-bell-no-t{
font-size: 16px ;
font-weight: 600;
margin-top: 10px;
margin-bottom: 8px;
color: #000;
}
.dropdown-bell-no-s{
font-size: 13px ;
color: #666;
width: 80%;
margin: 0 auto;
}
.dropdown-user-area{
width: 100%;
}
.dropdown-user-area-header{
width: 100%;
}
.dropdown-user-area-header a{
width: 100%;
display: block;
padding: 9px 5px;
box-sizing: border-box;
color: #FFF !important;
text-align: center;
font-size: 13px ;
box-shadow: 0 0 15px 0 rgba(0,0,0,0.1);
}
.dropdown-user-area-lineText{
width: 100%;
height: 2px;
border-bottom: 1px solid #EBEBEB;
margin-bottom: 15px;
margin-top: 15px;
display: flex;
align-items: center;
justify-content: center;
}
.dropdown-user-area-lineText-in{
background-color: #fff;
font-size: 13px ;
color: #999;
display: inline-block;
padding: 0 5px;
}
.dropdown-user-area-link-area{
width: 100%;
border-top: 1px solid #EBEBEB;
margin-top: 10px;
}
.dropdown-user-area-link-area a{
font-size: 13px ;
color: #000;
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
border-bottom: 1px solid #EBEBEB;
padding: 5px 0;
}
.dropdown-user-area-link-area a:hover{
color: #818181 !important;
}
.dropdown-user-area-link-area a i{
font-size: 13px ;
line-height: 13px;
margin-right: 9px;
margin-top: 5px;
}
.dropdown-userarea-header{
width: 100%;
border-bottom: 1px solid #EBEBEB;
padding-bottom: 5px;
font-size: 13px;
font-weight: 600;
color: #000;
display: flex;
justify-content: space-between;
align-items: center;
}
/* Bildirim listesi */
.dropdown-bell-area{
width: 100%;
}
.dropdown-bell-header{
width: 100%;
border-bottom: 1px solid #EBEBEB;
margin-bottom: 10px;
padding-bottom: 5px;
font-size: 13px;
font-weight: 600;
color: #000;
display: flex;
justify-content: space-between;
align-items: center;
}
.dropdown-bell-list{
width: 100%;
}
.dropdown-bell-list-box{
width: 100%;
border-bottom: 1px solid #ebebeb;
margin-bottom: 10px;
padding-bottom: 10px;
}
.dropdown-bell-fullhref{
width: 100%;
padding: 5px;
background-color: #f8f8f8;
text-align: center;
font-size: 13px ;
font-weight: 600;
border-bottom: 1px solid #EBEBEB;
border-top: 1px solid #EBEBEB;
}
.dropdown-bell-fullhref a{
color: #000 !important;
}
.dropdown-bell-fullhref a:hover{
color: #666!important;
}
.dropdown-bell-list-box:last-child{
margin-bottom: 0;
border-bottom: 0;
}
.dropdown-bell-list-box-h{
width: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.dropdown-bell-list-box-h-icon{
font-size: 12px ;
width: 28px;
}
.dropdown-bell-list-box-baslik{
flex:1;
margin-right: 5px;
font-size: 13px ;
line-height: 16px;
}
.dropdown-bell-list-box-baslik a{
color: #000 !important;
}
.dropdown-bell-list-box-baslik a:hover{
color: var(--ts-color-accent) !important;
}
.dropdown-bell-list-box-date{
margin-left: auto;
font-size: 10px ;
padding: 2px 5px;
background-color: var(--ts-color-accent);
color: #fff;
border: 1px dashed #EBEBEB;
}
.dropdown-bell-list-box-s{
width: 100%;
font-size: 11px ;
color: #999;
margin-top: 5px;
}
.dropdown-bell-overflow{
width: 100%;
height: auto;
max-height: 258px;
overflow-y: auto;
}
.dropdown-bell-overflow::-webkit-scrollbar-track {
background-color: #ebebeb;
}
.dropdown-bell-overflow::-webkit-scrollbar {
width: 7px;
}
.dropdown-bell-overflow::-webkit-scrollbar-thumb {
background-color: #ccc;
}
/* Favori dropdown boş görünüm */
.dropdown-cart-favorite{
width: 100%;
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
padding: 30px 0;
border: 1px dashed #EBEBEB;
}
.dropdown-cart-favorite i{
margin-bottom: 0;
font-size: 35px ;
line-height: 35px;
color: pink;
}
.dropdown-cart-favorite-t{
font-size: 16px ;
font-weight: 600;
margin-top: 10px;
margin-bottom: 8px;
color: #000;
}
.dropdown-cart-favorite-s{
font-size: 13px ;
color: #666;
width: 80%;
margin: 0 auto;
}
/* <========SON=========>>> Yeni header dizayn SON */
.header-desktop-phone-div-txt span{
font-size: 12px ;
line-height: 12px;
font-weight: normal;
}
.header-desktop-social-div{
width: auto;
display: flex;
justify-content: center;
align-items: center;
padding: 0 20px;
border-right: 1px dashed rgba(0,0,0,0.1);
}
.header-desktop-lang-main-div:last-child{
border-right: none;
}
.header-desktop-social-div i{
font-size: 15px ;
}
.header-desktop-lang-main-div span{
font-size: 12px;
padding: 2px 0 0 3px;
}
.header-desktop-lang-main-div{
width: auto;
display: flex;
justify-content: center;
align-items: center;
padding: 0 20px;
border-right: 1px dashed rgba(0,0,0,0.1);
}
/* Header genel font */
.header-main-div {
font-family: 'Montserrat', sans-serif !important;
}
/* Dil dropdown */
.lang-dropdown-div{
border-radius: 0!important;
padding: 10px !important;
margin-top: 10px !important;
box-sizing: border-box;
box-shadow: 0 0 15px 0 rgba(0,0,0,0.1);
}
.lang-dropdown-div a{
font-size: 13px ;
font-family : 'Roboto Condensed', sans-serif ;
display: flex;
align-items: center !important;
justify-content: flex-start !important;
border-bottom: 1px dashed #EBEBEB;
}
.dropdown-item{
padding: 5px 3px !important;
}
.head-button-area{
margin-left: auto !important;
}
.head-new-area-left{
flex:1;
}
.head-new-area-right{
margin-left: auto;
}
.head-drop-text{
font-size: 13px ;
display: flex;
align-items: center;
justify-content: center;
}
.head-drop-text i{
font-size: 19px ;
}
.head-drop-text:hover{
text-decoration: none;
}
.head-drop-text span{
font-size: 14px ;
padding: 2px 4px 0 5px;
}
/* Sepet dropdown ana */
.sepet-dropdown-main{
border-radius: 0!important;
padding: 20px !important;
margin-top: 10px !important;
box-sizing: border-box;
box-shadow: 0 0 15px 0 rgba(0,0,0,0.1);
width: 280px;
}
.sepet-dropdown-main a{
font-family : 'Open Sans',sans-serif ;
font-size: 13px ;
}
.dropdown-menu{
border: 1px solid rgba(0,0,0,.09) !important;
}
/* Arama dropdown */
.arama-dropdown-main{
border-radius: 0!important;
padding: 0 !important;
margin-top: 22px !important;
box-sizing: border-box;
box-shadow: 0 0 15px 0 rgba(0,0,0,0.1);
width: 650px;
}
.arama-dropdown-main input{
width: 100%;
border: none;
font-size: 14px ;
font-family : 'Poppins',sans-serif ;
font-weight: 300;
letter-spacing: 0.05em;
color: #000;
padding: 20px;
}
.arama-dropdown-main input:focus{
box-shadow: none !important;
border: none !important;
}
/* Header ve Slider SON ////////////////////////////////////////*/
/* =========================================================
1) BRAND FONTS
========================================================= */
@font-face {
font-family: "AuraTS";
src: url("/assets/css/fonts/AURA_DEMO.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "MossetaTS";
src: url("/assets/css/fonts/Mosseta-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* =========================================================
2) GLOBAL RESET FOR HEADER NAV AREA
========================================================= */
body {
padding-top: 0 !important;
}
/* secondary nav bar (under the big navy header) */
.header-main-div .top-level-menu-main-div {
background: var(--ts-color-navy-soft); /* slightly lighter than gece mavisi */
border-top: 1px solid rgba(255, 255, 255, 0.06);
border-bottom: 1px solid rgba(0, 0, 0, 0.45);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
position: sticky;
top: 0;
z-index: 999;
backdrop-filter: blur(6px);
transition:
box-shadow 0.2s ease,
background-color 0.2s ease,
transform 0.25s ease;
}
/* helper for JS hide-on-scroll */
.header-main-div .top-level-menu-main-div.is-hidden {
transform: translateY(-100%);
box-shadow: none;
}
/* left area full width, kill old floats */
.header-main-div .head-new-area-left {
width: 100% !important;
float: none !important;
}
.header-main-div ul.top-level-menu,
.header-main-div ul.top-level-menu > li {
float: none !important;
}
/* =========================================================
3) TOP LEVEL MENU STRIP
========================================================= */
.header-main-div ul.top-level-menu {
list-style: none;
margin: 0 !important;
padding: 2px 0 !important; /* thin bar */
display: flex !important;
flex-wrap: nowrap !important;
justify-content: space-between;
align-items: center;
}
/* LI containers */
.header-main-div ul.top-level-menu > li {
position: relative;
flex: 0 1 auto;
min-width: 0;
margin: 0;
padding: 0;
background: none !important;
}
/* kill any theme pseudo bubbles on top items */
.header-main-div ul.top-level-menu > li::before,
.header-main-div ul.top-level-menu > li::after,
.header-main-div ul.top-level-menu > li > a::before,
.header-main-div ul.top-level-menu > li > a span::before {
content: none !important;
background: transparent !important;
box-shadow: none !important;
}
/* TOP LEVEL LINKS – Aura font */
.header-main-div ul.top-level-menu > li > a,
.header-main-div ul.top-level-menu > li > a span {
display: block;
padding: 3px 8px 3px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
line-height: 1.2;
font-family: "AuraTS", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: #ffffff !important;
white-space: nowrap;
text-decoration: none;
background: none !important;
border-bottom: none !important;
transition: color 0.2s ease, transform 0.15s ease;
}
/* hover / active – beige text + slight lift */
.header-main-div ul.top-level-menu > li:hover > a,
.header-main-div ul.top-level-menu > li:hover > a span,
.header-main-div ul.top-level-menu > li.active > a,
.header-main-div ul.top-level-menu > li.active > a span {
color: var(--ts-color-beige) !important;
background: transparent !important;
transform: translateY(-1px);
}
.header-main-div ul.top-level-menu > li:hover,
.header-main-div ul.top-level-menu > li.active {
background: transparent !important;
}
/* underline animation – beige → white */
.header-main-div ul.top-level-menu > li > a::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: 0;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, var(--ts-color-beige) 0%, #ffffff 100%);
transform: translateX(-50%);
transition: width 0.25s ease;
}
.header-main-div ul.top-level-menu > li:hover > a::after,
.header-main-div ul.top-level-menu > li.active > a::after {
width: 70%;
}
/* =========================================================
4) SIMPLE FIRST-LEVEL DROPDOWNS (NOT MEGA)
========================================================= */
/* main dropdown box – normal small menus, EXCEPT mega menus */
.header-main-div ul.top-level-menu > li.dropdown-sub-have > ul:not(.sablon2-level-menu) {
background: #ffffff;
border-radius: 10px;
border: 1px solid #eceff3;
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
margin-top: 0;
padding: 0;
position: absolute;
top: 100%;
left: 0;
min-width: 260px !important;
width: auto !important;
max-width: none !important;
transform-origin: top center;
transform: translateY(10px);
opacity: 0;
visibility: hidden;
overflow: hidden;
transition: opacity 0.18s ease, transform 0.18s ease;
}
/* invisible bridge to avoid hover gap */
.header-main-div ul.top-level-menu > li.dropdown-sub-have > ul:not(.sablon2-level-menu)::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -16px;
height: 16px;
background: transparent;
}
/* open state on hover (fallback) */
.header-main-div ul.top-level-menu > li.dropdown-sub-have:hover > ul:not(.sablon2-level-menu),
.header-main-div ul.top-level-menu > li.dropdown-sub-have.open > ul:not(.sablon2-level-menu) {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
/* list items in first-level dropdown */
.header-main-div ul.top-level-menu > li.dropdown-sub-have > ul:not(.sablon2-level-menu) > li {
margin: 0;
padding: 0;
border-bottom: 1px solid #eceff3;
background: transparent !important;
}
.header-main-div ul.top-level-menu > li.dropdown-sub-have > ul:not(.sablon2-level-menu) > li:last-child {
border-bottom: none;
}
/* ROUND first and last rows */
.header-main-div ul.top-level-menu > li.dropdown-sub-have > ul:not(.sablon2-level-menu) > li:first-child > a {
border-radius: 10px 10px 0 0;
}
.header-main-div ul.top-level-menu > li.dropdown-sub-have > ul:not(.sablon2-level-menu) > li:last-child > a {
border-radius: 0 0 10px 10px;
}
/* links in simple dropdowns – Mosseta font */
.header-main-div ul.top-level-menu > li.dropdown-sub-have > ul:not(.sablon2-level-menu) a{
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 18px;
font-size: 13px;
font-weight: 500;
line-height: 1.35;
font-family: "MossetaTS", "AuraTS", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ts-color-navy) !important;
text-decoration: none;
white-space: nowrap;
background-color: #ffffff !important;
border-bottom: none;
border-radius: 0 !important;
box-shadow: none !important;
transition: background-color 0.15s ease, color 0.15s ease;
}
/* iç elemanlar text rengini devralsın ama FontAwesome font'u bozulmasın */
.header-main-div ul.top-level-menu > li.dropdown-sub-have > ul:not(.sablon2-level-menu) a *{
color: inherit !important;
}
/* direction icon */
.header-main-div ul.top-level-menu > li.dropdown-sub-have > ul:not(.sablon2-level-menu) a i.fa-angle-right{
font-size: 11px;
margin-left: 8px;
}
/* hover – SINGLE beige tone */
.header-main-div ul.top-level-menu > li.dropdown-sub-have > ul:not(.sablon2-level-menu) a:hover{
background-color: var(--ts-color-beige) !important;
color: var(--ts-color-navy) !important;
}
/* p etiketini flex yap ki text + icon otursun */
.header-main-div ul.top-level-menu > li.dropdown-sub-have > ul:not(.sablon2-level-menu) a p{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin: 0;
}
/* =========================================================
4.1) THIRD-LEVEL MENU (e.g. Zircon / Waterway / Stoneless / Handcuff)
========================================================= */
/* Görsel stil – sağ sütun */
.header-main-div ul.third-level-menu {
background-color: #f7f8fb;
border-left: 1px solid rgba(31, 43, 68, 0.08);
margin: 0;
padding: 4px 0;
list-style: none;
display: block;
}
.header-main-div ul.third-level-menu > li {
margin: 0;
padding: 0;
border-bottom: 1px solid #eceff3;
background: transparent !important;
}
.header-main-div ul.third-level-menu > li:last-child {
border-bottom: none;
}
.header-main-div ul.third-level-menu > li > a {
display: block;
padding: 6px 22px;
font-size: 13px;
font-weight: 500;
font-family: "MossetaTS", "AuraTS", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ts-color-navy) !important;
text-decoration: none;
background-color: transparent !important;
white-space: nowrap;
transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}
.header-main-div ul.third-level-menu > li > a *{
color: inherit !important;
}
.header-main-div ul.third-level-menu > li > a:hover {
background-color: var(--ts-color-beige) !important;
color: var(--ts-color-navy) !important;
padding-left: 26px;
}
/* =========================================================
5) MEGA MENU (BRACELET, PENDANT WITH LEFT + RIGHT COLUMNS)
========================================================= */
/* main mega container – sadece görsel stil, konumlandırma/animasyon aşağıda */
.header-main-div ul.top-level-menu li.dropdown-sub-have > ul.sablon2-level-menu {
background: #ffffff;
border-radius: 12px;
border: 1px solid #eceff3;
box-shadow: 0 28px 70px rgba(15, 23, 42, 0.24);
margin-top: 0;
padding: 0;
position: absolute;
top: 100%;
left: 0;
overflow: hidden;
}
/* columns keep theme layout; just refine borders */
.header-main-div ul.top-level-menu li.dropdown-sub-have
> ul.sablon2-level-menu .sablon2-level-menu-left,
.header-main-div ul.top-level-menu li.dropdown-sub-have
> ul.sablon2-level-menu .sablon2-level-menu-right {
float: none !important;
}
.sablon2-level-menu {
list-style: none;
margin: 0;
padding: 0;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
}
.sablon2-level-menu-left{
flex:1;
box-sizing: border-box;
padding:30px 0;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
}
.sablon2-level-menu-left-item{
width:160px ;
margin-right: 25px;
margin-left: 25px;
margin-bottom: 40px;
box-sizing: border-box;
}
.sablon2-level-menu-left-item-h{
width: 100%;
display: block;
margin-bottom: 10px;
font-weight: 600;
font-size: 14px ;
}
.sablon2-level-menu-left-item-s{
width: 100%;
display: block;
margin-bottom: 5px;
font-size: 13px ;
}
.sablon2-level-menu-right{
width: 410px;
box-sizing: border-box;
padding: 30px;
}
.sablon2-level-menu-right-product-box{
width: 26%;
margin-bottom: 14px;
margin-right: 10px;
margin-left: 10px;
box-sizing: border-box;
display: block;
font-weight: 500;
font-size: 13px ;
margin-top: 14px;
}
.sablon2-level-menu-right-product-box img{
width: 100%;
height: 100px;
margin-bottom: 10px;
}
/* reset UL margins in mega columns */
.header-main-div ul.top-level-menu li.dropdown-sub-have
> ul.sablon2-level-menu .sablon2-level-menu-left ul,
.header-main-div ul.top-level-menu li.dropdown-sub-have
> ul.sablon2-level-menu .sablon2-level-menu-right ul {
margin: 0;
padding: 4px 0;
}
/* remove “box in boxâ€: li transparent, only gets background */
.header-main-div ul.top-level-menu li.dropdown-sub-have
> ul.sablon2-level-menu .sablon2-level-menu-left li,
.header-main-div ul.top-level-menu li.dropdown-sub-have
> ul.sablon2-level-menu .sablon2-level-menu-right li {
margin: 0;
padding: 0;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* mega menu links – Mosseta, single row style */
.header-main-div ul.top-level-menu li.dropdown-sub-have
> ul.sablon2-level-menu .sablon2-level-menu-left a,
.header-main-div ul.top-level-menu li.dropdown-sub-have
> ul.sablon2-level-menu .sablon2-level-menu-left a *,
.header-main-div ul.top-level-menu li.dropdown-sub-have
> ul.sablon2-level-menu .sablon2-level-menu-right a,
.header-main-div ul.top-level-menu li.dropdown-sub-have
> ul.sablon2-level-menu .sablon2-level-menu-right a * {
display: block;
padding: 7px 20px;
font-size: 13px;
font-weight: 500;
line-height: 1.35;
font-family: "MossetaTS", "AuraTS", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ts-color-navy) !important;
text-decoration: none;
white-space: nowrap;
background-color: #ffffff !important; /* tek renk zemin */
border-bottom: 1px solid #eceff3;
border-radius: 0 !important;
box-shadow: none !important;
transition: background-color 0.15s ease, color 0.15s ease;
}
/* last rows without bottom border */
.header-main-div ul.top-level-menu li.dropdown-sub-have
> ul.sablon2-level-menu .sablon2-level-menu-left li:last-child a,
.header-main-div ul.top-level-menu li.dropdown-sub-have
> ul.sablon2-level-menu .sablon2-level-menu-right li:last-child a {
border-bottom: none;
}
/* hover / active rows – ONLY one beige tone */
.header-main-div ul.top-level-menu li.dropdown-sub-have
> ul.sablon2-level-menu .sablon2-level-menu-left li:hover > a,
.header-main-div ul.top-level-menu li.dropdown-sub-have
> ul.sablon2-level-menu .sablon2-level-menu-left li:hover > a *,
.header-main-div ul.top-level-menu li.dropdown-sub-have
> ul.sablon2-level-menu .sablon2-level-menu-right li:hover > a,
.header-main-div ul.top-level-menu li.dropdown-sub-have
> ul.sablon2-level-menu .sablon2-level-menu-right li:hover > a * {
background-color: var(--ts-color-beige) !important;
color: var(--ts-color-navy) !important;
}
/* keep text dark even if theme sets inline white */
.header-main-div ul.top-level-menu li.dropdown-sub-have
> ul.sablon2-level-menu .sablon2-level-menu-left,
.header-main-div ul.top-level-menu li.dropdown-sub-have
> ul.sablon2-level-menu .sablon2-level-menu-left * {
color: var(--ts-color-navy) !important;
}
/* =========================================================
6) ALIGN LAST DROPDOWNS TO THE RIGHT EDGE
========================================================= */
.header-main-div ul.top-level-menu > li:nth-last-child(-n+2).dropdown-sub-have > ul {
left: auto !important;
right: 0 !important;
}
/* =========================================================
7) BREAKPOINT TWEAKS
========================================================= */
@media (max-width: 1400px) {
.header-main-div .top-level-menu-main-div-in {
padding: 0 24px;
}
.header-main-div ul.top-level-menu > li > a,
.header-main-div ul.top-level-menu > li > a span {
font-size: 11px;
letter-spacing: 0.09em;
padding: 2px 6px 2px;
}
}
@media (max-width: 1280px) {
.header-main-div .top-level-menu-main-div-in {
padding: 0 16px;
}
.header-main-div ul.top-level-menu > li > a,
.header-main-div ul.top-level-menu > li > a span {
font-size: 10px;
letter-spacing: 0.08em;
padding: 2px 4px 2px;
}
}
/* ============================================================
8) FONT UTILITY CLASSES (GÃœNCEL)
============================================================*/
.font-spacing{letter-spacing: 0.04em}
.font-12{font-size:12px;}
.font-13{font-size:13px;}
.font-14{font-size:14px;}
.font-15{font-size:15px;}
.font-16{font-size:16px;}
.font-17{font-size:17px;}
.font-18{font-size:18px;}
.font-19{font-size:19px;}
.font-20{font-size:20px;}
.font-24{font-size:24px;}
.font-26{font-size:26px;}
.font-27{font-size:27px;}
.font-28{font-size:28px;}
.font-29{font-size:29px;}
.font-30{font-size:30px;}
.font-size-big{font-size:36px;}
.font-size-exbig{font-size:50px;}
.font-exlight{font-weight: 300; }
.font-light{font-weight: 400; }
.font-small{font-weight: 500; }
.font-medium{font-weight: 600}
.font-bold{font-weight: 700}
.font-exbold{font-weight: 800}
.font-raleway{ font-family: 'Raleway', sans-serif}
.font-open-sans{font-family: 'Open Sans', sans-serif}
.font-color-FFF{color:#FFF}
.font-color-000{color:#000;}
.p-p{padding: 0px; margin: 0px; overflow: hidden;}
/* ============================================================
9) MULTI LEVEL MENU GENEL AYARLAR (GÃœNCELLENMÄ°Å)
============================================================*/
/* temel konumlandırma – eski kodu koru ama stil yukarıda */
.third-level-menu{
position: absolute;
top: 0 !important;
list-style: none;
margin: 0;
opacity: 0;
visibility: hidden;
box-shadow: 0 5px 14.25px 0.75px rgba(0, 0, 0, 0.05);
z-index: 9;
transition: 0.1s ease-in-out 0s;
}
.third-level-menu > li{
height: auto;
}
.second-level-menu > li > .third-level-menu li p{
margin: 0;
display: flex;
align-items: center;
justify-content: space-between;
}
/* ikinci seviye dropdown kutusu – simple dropdown ile aynı stil */
.second-level-menu{
position: absolute;
left: 0;
list-style: none;
margin: 0;
padding: 0;
min-width: 260px;
background: #ffffff;
border-radius: 10px;
border: 1px solid #eceff3;
box-shadow: 0 18px 45px rgba(15,23,42,0.16);
opacity: 0;
visibility: hidden;
z-index: 999;
overflow: hidden;
transition: 0.18s ease;
}
.second-level-menu > li{
position: relative;
height: auto;
margin: 0;
padding: 0;
border-bottom: 1px solid #eceff3;
background: transparent !important;
}
.second-level-menu > li:last-child{
border-bottom:none;
}
.second-level-menu > li p{
margin: 0;
display: flex;
align-items: center;
justify-content: space-between;
}
/* üst menü hover genel açma */
.top-level-menu{
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: flex-start;
width: 100%;
position: relative;
}
.top-level-menu > li{
width: auto;
height: auto;
transition-duration: 0.1s;
transition-timing-function: linear;
}
.top-level-menu li:hover > ul{
opacity: 1;
visibility: visible;
margin-top: 0;
margin-left: 0;
}
.top-level-menu > li span{
display: block;
padding: 3px 8px !important; /* YENÄ° NAVBAR Ä°LE UYUMLU */
}
.top-level-menu > li a{
text-decoration: none;
}
.top-level-menu > li a span{
font-weight: 700;
}
.top-level-menu > li:hover a{
text-decoration: none;
}
/* overlay */
.dropdown-overlay-show{
width: 150%;
background-color: rgba(0,0,0,0.6);
height: 200%;
position: absolute;
z-index: 99;
left:-500px;
display: none;
}
/* ============================================================
10) TOOLTIP & ARROWS
============================================================*/
.tooltip-top, .tooltip-right, .tooltip-bottom, .tooltip-left {
position: relative;
outline: none;
}
.tooltip-top:before, .tooltip-right:before, .tooltip-bottom:before, .tooltip-left:before {
content: attr(data-tooltip);
padding: 4px 10px;
color: #555;
white-space: pre;
border-radius: 4px;
text-align: center;
font-weight: normal;
font-size: 12px;
z-index: 998;
}
.tooltip-top:after, .tooltip-right:after, .tooltip-bottom:after, .tooltip-left:after {
content: "";
width: 10px;
height: 10px;
z-index: 999;
}
.tooltip-top:before, .tooltip-top:after, .tooltip-right:before, .tooltip-right:after, .tooltip-bottom:before, .tooltip-bottom:after, .tooltip-left:before, .tooltip-left:after {
position: absolute;
cursor: default;
opacity: 0;
background-color: #fff;
pointer-events: none;
-webkit-transition: all ease-out .15s;
transition: all ease-out .15s;
}
.tooltip-top:hover:before, .tooltip-top:hover:after, .tooltip-right:hover:before, .tooltip-right:hover:after, .tooltip-bottom:hover:before, .tooltip-bottom:hover:after, .tooltip-left:hover:before, .tooltip-left:hover:after {
opacity: 1;
margin: 0;
box-shadow: 0 0 15px 0 rgba(0,0,0,.1);
}
.tooltip-right:before {
left: calc(100% + 8px + 4px);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.tooltip-right:after {
left: calc(100% + 5px + 4px);
-webkit-transform: translateY(-50%) rotate(-315deg);
transform: translateY(-50%) rotate(-315deg);
}
.tooltip-right:before, .tooltip-right:after {
top: 50%;
margin-left: -4px;
}
.tooltip-bottom:before {
top: calc(100% + 8px + 4px);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.tooltip-bottom:after {
top: calc(100% + 3px + 4px);
-webkit-transform: translateX(-50%) rotate(-225deg);
transform: translateX(-50%) rotate(-225deg);
}
.tooltip-bottom:before, .tooltip-bottom:after {
left: 50%;
margin-top: -4px;
}
.tooltip-left:before {
right: calc(100% + 8px + 4px);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.tooltip-left:after {
right: calc(100% + 3px + 4px);
-webkit-transform: translateY(-50%) rotate(-135deg);
transform: translateY(-50%) rotate(-135deg);
}
.tooltip-left:before, .tooltip-left:after {
top: 50%;
margin-right: -4px;
}
.up-arrow-blue:before{
content: '';
height: 11px;
width: 11px;
position: absolute;
background-color: #fff;
top: -6px;
left:32px;
border-top: var(--ts-color-accent) solid 1px;
border-left: var(--ts-color-accent) solid 1px;
transform: rotate(45deg);
}
.up-arrow-green:before{
content: '';
height: 11px;
width: 11px;
position: absolute;
background-color: #fff;
top: -6px;
left:32px;
border-top: #279c3d solid 1px;
border-left: #279c3d solid 1px;
transform: rotate(45deg);
}
.up-arrow-grey:before{
content: '';
height: 11px;
width: 11px;
position: absolute;
background-color: #f8f8f8;
top: -6px;
left:32px;
border-top: #ebebeb solid 1px;
border-left: #ebebeb solid 1px;
transform: rotate(45deg);
}
.up-arrow-grey-white:before{
content: '';
height: 11px;
width: 11px;
position: absolute;
background-color: #fff;
top: -6px;
left:32px;
border-top: #ebebeb solid 1px;
border-left: #ebebeb solid 1px;
transform: rotate(45deg);
}
/* ============================================================
11) USER / KARGO / FORM BLOKLARI
============================================================*/
.user-kargo-return-main{
width: 100%;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.user-kargo-return-left{
border: 1px solid #EBEBEB;
padding: 22px;
width: 49%;
margin-right: 1%;
box-sizing: border-box;
}
.user-kargo-return-right{
border: 1px solid #EBEBEB;
padding: 22px;
width: 49%;
margin-left: 1%;
box-sizing: border-box;
}
.user-kargo-return-heading{
width: 100%;
font-size: 13px ;
font-weight: 600;
color: #000;
margin-bottom: 18px;
}
.user-kargo-return-address{
font-size: 13px ;
width: 100%;
}
.kargolari-sirala{
width: 100%;
}
.kargolari-sirala img{
height: 60px;
padding: 5px;
border: 1px solid #EBEBEB;
}
.kargo-form-user{
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
}
.kargo-form-user-h{
font-size: 13px ;
font-weight: 600;
width: 220px;
}
.kargo-form-user-inputarea{
flex:1;
margin-left: 70px;
flex-wrap: wrap;
display: flex;
justify-content: flex-end;
}
.kargo-form-user-inputarea select{
font-size: 13px !important;
border-radius: 0;
width: 200px;
margin-right: 15px;
}
.kargo-form-user-inputarea input{
font-size: 13px !important;
border-radius: 0;
width: 200px;
margin-right: 15px;
}
.kargo-form-user-ok-value{
width: 155px;
font-size: 13px ;
font-weight: 600;
}
.kargo-form-user-ok-right{
flex:1;
background-color: #f2fdf9;
border: 1px solid #def1ea;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 15px;
font-size: 12px ;
justify-content: center;
}
.iban-user-area-heading{
width: 100%;
margin-bottom: 15px;
font-size: 13px ;
font-weight: 600;
}
.iban-user-area-form{
width: 100%;
display: flex;
justify-content: flex-start;
}
.iban-user-area-form input{
font-size: 13px !important;
border-radius: 0;
width: 40.5%;
margin-right: 15px;
}
.iban-user-area-form button{
width: auto;
}
.iade-onaysiz-user-main{
width: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
}
.iade-onaysiz-user-left{
width: auto;
margin-right: 15px;
font-weight: 600;
padding-top: 10px;
}
.iade-onaysiz-user-right{
flex:1;
background-color: #f8f8f8;
box-sizing: border-box;
padding: 10px 20px;
}
.iade-onaysiz-in-txt{
width: 90%;
font-style: italic;
}
.order-search-user-filter{
width: auto;
display: flex;
min-width: 200px;
margin-right: 10px;
}
/* ============================================================
12) DATEPICKER CUSTOM
============================================================*/
#ui-datepicker-div>.ui-widget-header {
border: 1px solid #ebebeb !important;
background: #f8f8f8 !important;
color: #000;
font-weight: bold;
}
#ui-datepicker-div {
border: 1px solid #EBEBEB !important;
padding: 10px!important;
box-shadow: 0 0 15px 0 rgba(0,0,0,.1);
}
.product-detail-variant-div.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
border: 1px solid #EBEBEB !important;
}
#ui-datepicker-div>.ui-widget-header select{
background-color: #fff;
margin-right: 4px !important;
border:1px solid #EBEBEB;
}
.date-variant{
font-size: 13px !important;
border:2px solid #EBEBEB !important;
height: 55px !important;
min-width: 300px !important;
cursor: pointer;
}
.date-select-variant{
position: relative;
}
.date-select-variant i{
position: absolute;
top:15px;
font-size: 18px ;
right: 12px;
}
/* ============================================================
13) MEGA MENÃœ – KADRAJ + GELÄ°ÅMÄ°Å ANÄ°MASYON
============================================================*/
/* Mega menü konumlandırma referansı */
.header-main-div .top-level-menu-main-div-in{
position: relative;
}
/* sablon2-level-menu (mega menü) olan li'yi static yap ki,
absolute olan UL nav container'a göre hizalansın */
.header-main-div ul.top-level-menu > li.dropdown-sub-have:has(> ul.sablon2-level-menu){
position: static;
}
/* KAPALI DURUM – ortalı, hafif aşağıda, küçük ve blur */
.header-main-div ul.top-level-menu > li.dropdown-sub-have:has(> ul.sablon2-level-menu) > ul.sablon2-level-menu{
left: 50% !important;
right: auto !important;
width: min(1800px, calc(100vw - 20px)); /* max 1800px, saÄŸ-sol ~10px boÅŸluk */
transform: translateX(-50%) translateY(18px) scale(0.96);
transform-origin: top center;
opacity: 0;
visibility: hidden;
pointer-events: none;
filter: blur(6px);
will-change: transform, opacity, filter;
transition:
opacity 0.26s ease-out,
transform 0.30s cubic-bezier(0.16, 0.75, 0.20, 1),
filter 0.26s ease-out;
}
/* AÇIK DURUM – yukarı çıkar, büyür, blur kalkar */
.header-main-div ul.top-level-menu > li.dropdown-sub-have:has(> ul.sablon2-level-menu):hover > ul.sablon2-level-menu,
.header-main-div ul.top-level-menu > li.dropdown-sub-have:has(> ul.sablon2-level-menu).open > ul.sablon2-level-menu{
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0) scale(1);
filter: blur(0);
pointer-events: auto;
}
/* Hover gap’ini engelleyen invisible bridge (üstteki ::before kuralı) */
/* Her bir kolon kutusu için hafif fade-up efekti */
.sablon2-level-menu-left-item{
opacity: 0;
transform: translateY(6px);
will-change: transform, opacity;
transition:
opacity 0.35s ease,
transform 0.35s ease;
}
/* Mega menü açıldığında kolonların yumuşak şekilde yukarı gelmesi */
.header-main-div ul.top-level-menu li.dropdown-sub-have:hover > ul.sablon2-level-menu .sablon2-level-menu-left-item,
.header-main-div ul.top-level-menu li.dropdown-sub-have.open > ul.sablon2-level-menu .sablon2-level-menu-left-item{
opacity: 1;
transform: translateY(0);
}
/* Kolonları hafif gecikmeli oynat – nice “stagger†efekti */
.header-main-div ul.top-level-menu li.dropdown-sub-have:hover > ul.sablon2-level-menu .sablon2-level-menu-left-item:nth-child(1),
.header-main-div ul.top-level-menu li.dropdown-sub-have.open > ul.sablon2-level-menu .sablon2-level-menu-left-item:nth-child(1){
transition-delay: 0.03s;
}
.header-main-div ul.top-level-menu li.dropdown-sub-have:hover > ul.sablon2-level-menu .sablon2-level-menu-left-item:nth-child(2),
.header-main-div ul.top-level-menu li.dropdown-sub-have.open > ul.sablon2-level-menu .sablon2-level-menu-left-item:nth-child(2){
transition-delay: 0.07s;
}
.header-main-div ul.top-level-menu li.dropdown-sub-have:hover > ul.sablon2-level-menu .sablon2-level-menu-left-item:nth-child(3),
.header-main-div ul.top-level-menu li.dropdown-sub-have.open > ul.sablon2-level-menu .sablon2-level-menu-left-item:nth-child(3){
transition-delay: 0.11s;
}
.header-main-div ul.top-level-menu li.dropdown-sub-have:hover > ul.sablon2-level-menu .sablon2-level-menu-left-item:nth-child(4),
.header-main-div ul.top-level-menu li.dropdown-sub-have.open > ul.sablon2-level-menu .sablon2-level-menu-left-item:nth-child(4){
transition-delay: 0.15s;
}
.header-main-div ul.top-level-menu li.dropdown-sub-have:hover > ul.sablon2-level-menu .sablon2-level-menu-left-item:nth-child(5),
.header-main-div ul.top-level-menu li.dropdown-sub-have.open > ul.sablon2-level-menu .sablon2-level-menu-left-item:nth-child(5){
transition-delay: 0.19s;
}
/* Başlık tipografisi – Aura font + gradient alt çizgi */
.sablon2-level-menu-left-item-h{
position: relative;
width: 100%;
display: block;
margin-bottom: 16px;
font-weight: 600;
font-size: 13px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-family: "AuraTS", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ts-color-navy);
padding-bottom: 8px;
}
/* Başlıklara gradient alt çizgi + animasyon */
.sablon2-level-menu-left-item-h::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 34px;
border-radius: 999px;
background: linear-gradient(
90deg,
var(--ts-color-rose) 0%,
var(--ts-color-beige) 50%,
#ffffff 100%
);
transform-origin: left center;
transform: scaleX(0.6);
opacity: 0.7;
transition:
transform 0.25s ease,
opacity 0.25s ease;
}
/* Hover’da başlık rengi ve çizgi canlansın */
.sablon2-level-menu-left-item:hover .sablon2-level-menu-left-item-h{
color: var(--ts-color-rose);
}
.sablon2-level-menu-left-item:hover .sablon2-level-menu-left-item-h::after{
transform: scaleX(1);
opacity: 1;
}
/* Başlığın altındaki linkleri biraz yukarı al, boşluk dengelensin */
.sablon2-level-menu-left-item-s{
margin-bottom: 4px;
}
.sablon2-level-menu-left-item-s a{
padding-top: 4px;
padding-bottom: 4px;
}
/* ============================================================
MEGA MENÃœ SAÄ GÖRSEL – SOFT FADE + ZOOM
============================================================*/
/* Sağ kolon – hafif fade + yukarı kayma */
.sablon2-level-menu-right{
width: 410px;
box-sizing: border-box;
padding: 30px;
opacity: 0;
transform: translateY(12px) scale(0.97);
will-change: transform, opacity;
transition:
opacity 0.38s ease-out 0.06s,
transform 0.38s cubic-bezier(0.16, 0.75, 0.20, 1) 0.06s;
}
/* Mega menü açılınca sağ kolon yumuşakça yukarı gelir */
.header-main-div ul.top-level-menu li.dropdown-sub-have:hover > ul.sablon2-level-menu .sablon2-level-menu-right,
.header-main-div ul.top-level-menu li.dropdown-sub-have.open > ul.sablon2-level-menu .sablon2-level-menu-right{
opacity: 1;
transform: translateY(0) scale(1);
}
/* Görselde hafif zoom-in efekti */
.sablon2-level-menu-right img{
max-width: 100% !important;
display: block;
transform: scale(1.02);
transform-origin: center center;
will-change: transform;
transition: transform 0.45s ease-out;
}
/* Görselin üzerine gelince biraz daha zoom */
.sablon2-level-menu-right:hover img{
transform: scale(1.06);
}
/* =========================================================
MEGA MENÃœ – GELÄ°ÅMÄ°Å AÇILMA ANÄ°MASYONU + GÖRSEL EFEKT (FIX)
============================================================*/
/* Mega menü referans */
.header-main-div .top-level-menu-main-div-in{
position: relative;
}
/* Mega menü olan li, nav container'a göre hizalansın */
.header-main-div ul.top-level-menu > li.dropdown-sub-have:has(> ul.sablon2-level-menu){
position: static;
}
/* KAPALI DURUM – animasyonsuz (transition yok!) */
.header-main-div ul.top-level-menu > li.dropdown-sub-have:has(> ul.sablon2-level-menu) > ul.sablon2-level-menu{
left: 50% !important;
right: auto !important;
width: min(1800px, calc(100vw - 20px)); /* max 1800px, saÄŸ-sol 10px boÅŸluk */
transform: translateX(-50%) translateY(18px) scale(0.96);
opacity: 0;
visibility: hidden;
pointer-events: none;
filter: blur(6px);
transform-origin: top center;
transition: none; /* KAPALI iken geçiş yok */
}
/* AÇIK DURUM – sadece bu durumda transition var (açılış animasyonu) */
.header-main-div ul.top-level-menu > li.dropdown-sub-have:has(> ul.sablon2-level-menu):hover > ul.sablon2-level-menu,
.header-main-div ul.top-level-menu > li.dropdown-sub-have:has(> ul.sablon2-level-menu).open > ul.sablon2-level-menu{
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0) scale(1);
filter: blur(0);
pointer-events: auto;
transition:
opacity 0.26s ease-out,
transform 0.30s cubic-bezier(0.16, 0.75, 0.20, 1),
filter 0.26s ease-out;
}
/* Hover gap’ini engelleyen invisible bridge */
.header-main-div ul.top-level-menu > li.dropdown-sub-have > ul.sablon2-level-menu::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -16px;
height: 16px;
background: transparent;
}
/* =========================================================
MEGA MENÃœ SAÄ GÖRSEL – SOFT FADE + ZOOM (FIX)
============================================================*/
/* SaÄŸ kolon KAPALI iken animasyonsuz */
.sablon2-level-menu-right{
opacity: 0;
transform: translateY(12px) scale(0.97);
transition: none;
}
/* Mega menü açılınca sağ kolon yumuşakça gelir (sadece burada transition var) */
.header-main-div ul.top-level-menu li.dropdown-sub-have:hover > ul.sablon2-level-menu .sablon2-level-menu-right,
.header-main-div ul.top-level-menu li.dropdown-sub-have.open > ul.sablon2-level-menu .sablon2-level-menu-right{
opacity: 1;
transform: translateY(0) scale(1);
transition:
opacity 0.38s ease-out 0.06s,
transform 0.38s cubic-bezier(0.16, 0.75, 0.20, 1) 0.06s;
}
/* Görselde hafif zoom-in efekti */
.sablon2-level-menu-right img{
max-width: 100% !important;
display: block;
transform: scale(1.02);
transform-origin: center center;
transition: transform 0.45s ease-out;
}
.sablon2-level-menu-right:hover img{
transform: scale(1.06);
}
/* =========================================================
MEGA MENÃœ ALT BAÅLIK RENK & METÄ°N SIÄDIRMA FÄ°X
=========================================================*/
/* Kolon kutuları biraz genişlesin, uzun başlıklar rahat sığsın */
.sablon2-level-menu-left {
padding: 30px 10px;
}
.sablon2-level-menu-left-item{
width: 200px; /* 160px yerine biraz geniÅŸ */
}
/* Üstteki alt başlıklar (READY-TO-SELL COLLE, SHIPPING POLICY, vb.) */
.sablon2-level-menu-left-item-h{
color: #000 !important; /* siyah */
letter-spacing: 0.14em; /* biraz azalt, daha az yer kaplasın */
line-height: 1.4;
white-space: normal; /* gerekiyorsa 2 satıra insin */
}
/* Başlığın altındaki linkler (alt kategori linkleri) */
.sablon2-level-menu-left-item-s a{
color: #000 !important; /* link rengi de siyah */
white-space: normal; /* uzun isimler iki satıra insin */
}
/* Hover rengi – istersen aynı kalabilir, sadece garantiye alıyorum */
.sablon2-level-menu-left-item-s a:hover{
background-color: var(--ts-color-beige) !important;
color: var(--ts-color-navy) !important;
}
/* Genel: mega menüdeki tüm linkler için satır kırılmasına izin ver */
.header-main-div ul.top-level-menu li.dropdown-sub-have
> ul.sablon2-level-menu .sablon2-level-menu-left a,
.header-main-div ul.top-level-menu li.dropdown-sub-have
> ul.sablon2-level-menu .sablon2-level-menu-right a {
white-space: normal; /* daha önceki white-space: nowrap'ı ezer */
}
/* =========================================
TOP MENU BAR – BEYAZ ZEMİN, SİYAH YAZI
========================================= */
/* Menü çubuğu zemini beyaz olsun */
.header-main-div .top-level-menu-main-div{
background: #ffffff !important; /* bar beyaz */
border-top: 1px solid rgba(255, 255, 255, 0); /* üst çizgi görünmesin */
border-bottom: 1px solid rgba(0, 0, 0, 0.08); /* çok hafif alt çizgi */
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06); /* hafif gölge */
}
/* Üst menü linklerinin normal hali – siyah, biraz büyük, daha az kalın */
.header-main-div ul.top-level-menu > li > a,
.header-main-div ul.top-level-menu > li > a span{
color: #000000 !important; /* siyah */
font-size: 13px !important; /* 12px’ten biraz büyük */
font-weight: 500 !important; /* normal-kalın arası, 700’ü bastırıyoruz */
}
/* Hover / aktif durumda renk – #c0b096 */
.header-main-div ul.top-level-menu > li:hover > a,
.header-main-div ul.top-level-menu > li:hover > a span,
.header-main-div ul.top-level-menu > li.active > a,
.header-main-div ul.top-level-menu > li.active > a span{
color: #c0b096 !important;
background: transparent !important;
}
/* Alt çizgi (underline) gradient'i – #c0b096 başlangıç */
.header-main-div ul.top-level-menu > li > a::after{
background: linear-gradient(
90deg,
#c0b096 0%,
var(--ts-color-beige) 50%,
var(--ts-color-navy) 100%
);
}
/* =========================================
MEGA MENÃœ – ALT BAÅLIKLAR SÄ°YAH
========================================= */
/* Üstteki alt başlıklar (READY-TO-SELL, SHIPPING POLICY vb.) */
.header-main-div .sablon2-level-menu-left-item-h{
color: #000000 !important; /* başlık siyah */
}
/* Başlığın altındaki linkler (alt kategori linkleri) */
.header-main-div .sablon2-level-menu-left-item-s a{
color: #000000 !important; /* linkler siyah */
}
/* =========================================
TOP MENU & MEGA MENU – FONT BOYUTU
========================================= */
/* 1) Üst çubuk menüleri (HOME, RING, SET, vb.) */
.header-main-div ul.top-level-menu > li > a,
.header-main-div ul.top-level-menu > li > a span{
font-size: 14px !important; /* 12 → 14 px, bir kademe büyük */
color: #000000 !important; /* siyah yazı */
}
/* 2) Mega menü kolon başlıkları (ZIRCON SET, READY-TO-SELL, vb.) */
.sablon2-level-menu-left-item-h{
font-size: 15px !important; /* bir tık daha büyük başlık */
}
/* 3) Mega menü alt linkler (alt kategori satırları) */
.sablon2-level-menu-left-item-s,
.sablon2-level-menu-left-item-s a{
font-size: 14px !important;
}
/* 4) Mega menüdeki tüm linkler için genel font boyutu */
.header-main-div ul.top-level-menu li.dropdown-sub-have
> ul.sablon2-level-menu .sablon2-level-menu-left a,
.header-main-div ul.top-level-menu li.dropdown-sub-have
> ul.sablon2-level-menu .sablon2-level-menu-right a{
font-size: 14px !important;
}
/* =========================================
MEGA MENÃœ – BAÅLIK & ALT LÄ°NKLER TAM SÄ°YAH
========================================= */
/* Kolon başlıkları (RHODIUM CHAIN, READY-TO-SELL, vb.) */
.header-main-div ul.top-level-menu li.dropdown-sub-have
> ul.sablon2-level-menu .sablon2-level-menu-left-item-h,
.header-main-div ul.top-level-menu li.dropdown-sub-have
> ul.sablon2-level-menu .sablon2-level-menu-left-item-h *{
color: #000000 !important;
}
/* Alt linkler / satırlar */
.header-main-div ul.top-level-menu li.dropdown-sub-have
> ul.sablon2-level-menu .sablon2-level-menu-left-item-s,
.header-main-div ul.top-level-menu li.dropdown-sub-have
> ul.sablon2-level-menu .sablon2-level-menu-left-item-s a,
.header-main-div ul.top-level-menu li.dropdown-sub-have
> ul.sablon2-level-menu .sablon2-level-menu-left-item-s a *{
color: #000000 !important;
}
/* Genel: mega menüdeki tüm linkler default olarak siyah olsun */
.header-main-div ul.top-level-menu li.dropdown-sub-have
> ul.sablon2-level-menu .sablon2-level-menu-left a{
color: #000000 !important;
}
/* ==== Header Arama Kutusu – Oval, Åeffaf, Çerçevesi #c0b096 ==== */
/* Dış kapsül */
.header-desktop-search1 form {
display: flex;
align-items: center;
background-color: transparent;
border: 1px solid #c0b096;
border-radius: 999px; /* oval */
overflow: hidden;
}
/* Input alanı – tüm focus efektlerini sıfırla */
.header-desktop-search1 input[type="text"],
.header-desktop-search1 input[type="text"]:focus,
.header-desktop-search1 input[type="search"],
.header-desktop-search1 input[type="search"]:focus {
background-color: transparent;
border: none !important;
outline: none !important;
box-shadow: none !important;
padding: 10px 18px;
width: 100%;
color: #ffffff; /* metin rengi */
}
/* Placeholder rengi */
.header-desktop-search1 input[type="text"]::placeholder,
.header-desktop-search1 input[type="search"]::placeholder {
color: rgba(255, 255, 255, 0.7);
}
/* Arama butonu (ikon kısmı) – focus efektlerini de kapat */
.header-desktop-search1 button,
.header-desktop-search1 button:focus {
background-color: transparent;
border: none !important;
outline: none !important;
box-shadow: none !important;
padding: 0 18px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
/* Formun focus halinde çerçevesi aynı kalsın, ek efekt yok */
.header-desktop-search1 form:focus-within {
border-color: #c0b096;
}
/* ==== HEADER SEARCH – SIMPLE ERROR BUBBLE ==== */
/* Arama bloğunu en üste taşı */
.header-desktop-search1 {
position: relative;
z-index: 9990;
}
/* Hata balonu ve oku – temel ayar, başta gizli */
.header-desktop-search1 form::after,
.header-desktop-search1 form::before {
position: absolute;
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease, transform 0.18s ease;
z-index: 9999; /* menü çubuğunun üstünde */
}
/* Balon kutusu (sade, opak) */
.header-desktop-search1 form::after {
content: "Please fill out this field.";
top: calc(100% + 6px); /* input'un hemen altı */
left: 50%;
transform: translate(-50%, 6px);
padding: 8px 14px;
background-color: #e3dacb; /* açık bej */
color: #1f2b44; /* gece mavisi */
border-radius: 10px;
font-size: 12px;
font-weight: 500;
white-space: nowrap;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
border: none; /* çerçeve yok */
}
/* Balonun oku */
.header-desktop-search1 form::before {
content: "";
top: 100%;
left: 50%;
transform: translate(-50%, 6px);
border-width: 0 7px 7px 7px;
border-style: solid;
border-color: transparent transparent #e3dacb transparent;
}
/* Hata durumunda JS bu sınıfı ekliyor */
.header-desktop-search1 form.ts-search-error {
border-color: #c67986; /* kutu çerçevesi pembe kalsın */
}
/* Hata olduğunda balonu göster */
.header-desktop-search1 form.ts-search-error::after,
.header-desktop-search1 form.ts-search-error::before {
opacity: 1;
transform: translate(-50%, 0);
}
/* ==== Header Search – Focus efekti ==== */
/* Geçiş animasyonu */
.header-desktop-search1 form {
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
/* Input içindeyken (focus-within) çerçeveyi biraz aydınlat */
.header-desktop-search1 form:focus-within {
border-color: #e3dacb; /* #c0b096'ten bir ton açık */
box-shadow: 0 0 0 1px rgba(227, 218, 203, 0.35);
}
/* Hata varken pembe renk baskın olsun */
.header-desktop-search1 form.ts-search-error,
.header-desktop-search1 form.ts-search-error:focus-within {
border-color: #c67986;
box-shadow: none;
}
/* Üst barda sadece dil seçeneği kalsın – currency gizle */
.topheader-desktop-main-right .topheader-lang-currency-box:first-of-type {
display: none !important;
}
/* ==== Dil seçimi: main header sağ üst köşe ==== */
/* Header konteynerini referans yap */
.header-main-div {
position: relative;
}
/* Dil kutusunu sağ üst köşeye sabitle */
.header-main-div .header-desktop-main-div .topheader-lang-currency-box {
position: absolute;
top: 8px; /* yukarıdan mesafe – istersen 6/10 yapabilirsin */
right: 24px; /* saÄŸdan mesafe */
margin: 0 !important;
padding: 0 !important;
border: none !important;
display: flex;
align-items: center;
z-index: 50;
}
/* Link görünümü */
.header-main-div .header-desktop-main-div .topheader-lang-currency-box > a {
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
cursor: pointer;
color: #e3dacb;
font-size: 13px;
}
.header-main-div .header-desktop-main-div .topheader-lang-currency-box > a:hover {
color: #ffffff;
}
/* Bayrak ve ok ikonları */
.header-main-div .topheader-lang-currency-box .flag-icon-us {
width: 16px;
height: 12px;
margin-right: 2px;
}
.header-main-div .topheader-lang-currency-box .ion-arrow-down-b {
font-size: 11px;
margin-left: 2px;
}
/* ==== Header Dil Butonu – Sağ üst köşe ==== */
.header-main-div {
position: relative; /* dil butonunu buna göre hizalayacağız */
}
.ts-header-lang {
position: absolute;
top: 6px; /* yukarıdan mesafe */
right: 18px; /* saÄŸdan mesafe */
display: flex;
align-items: center;
z-index: 60;
}
.ts-header-lang-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
background: transparent;
border: none;
cursor: pointer;
color: #e3dacb;
font-size: 13px;
font-family: inherit;
}
.ts-header-lang-toggle:hover {
color: #ffffff;
}
.ts-header-lang-flag {
width: 16px;
height: 12px;
margin-right: 2px;
}
.ts-header-lang-arrow {
font-size: 11px;
margin-left: 2px;
}
/* Küçük ekranlarda biraz içeri alalım */
@media (max-width: 991.98px) {
.ts-header-lang {
top: 8px;
right: 12px;
}
}
/* ==== Top header'ı görünmez yap, sadece dil kalsın ==== */
/* Header ana konteyneri referans */
.header-main-div {
position: relative;
}
/* Top header bar görünmesin */
.topheader-desktop-main-div {
background: transparent !important;
background-color: transparent !important;
border: none !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important; /* içindeki dil menüsü taşabilsin */
}
/* Soldaki Order Tracking / Help / Contact Us kısmı tamamen gizle */
.topheader-desktop-main-left {
display: none !important;
}
/* Sadece DİL kutusu kalsın, kur (USD) kutusunu gizle */
.topheader-desktop-main-right .topheader-lang-currency-box:first-of-type {
display: none !important; /* currency */
}
/* Dil kutusunu header'ın sağ üst köşesine sabitle */
.topheader-desktop-main-right .topheader-lang-currency-box:last-of-type {
position: absolute;
top: 8px; /* yukarıdan mesafe */
right: 18px; /* saÄŸdan mesafe */
border: none !important;
padding: 0 !important;
}
/* Dil linkinin görünümü */
.topheader-desktop-main-right .topheader-lang-currency-box:last-of-type > a {
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
cursor: pointer;
color: #e3dacb;
font-size: 13px;
}
.topheader-desktop-main-right .topheader-lang-currency-box:last-of-type > a:hover {
color: #ffffff;
}
/* Bayrak & ok ikonları – sende hangi flag sınıfları varsa hepsi çalışır */
.topheader-desktop-main-right .topheader-lang-currency-box .flag-icon-us,
.topheader-desktop-main-right .topheader-lang-currency-box .flag-icon-sa,
.topheader-desktop-main-right .topheader-lang-currency-box .flag-icon-tr {
width: 16px;
height: 12px;
margin-right: 2px;
}
.topheader-desktop-main-right .topheader-lang-currency-box .ion-arrow-down-b {
font-size: 11px;
margin-left: 2px;
}
/* ==== Logo boyutunu belirgin şekilde büyüt (desktop) ==== */
@media (min-width: 992px) {
/* Logo alanının yüksekliğini artır */
.header-desktop-logo-div {
height: 80px !important;
display: flex;
align-items: center;
}
.header-desktop-logo-div a {
display: flex;
align-items: center;
}
/* Logonun kendisini büyüt */
.header-desktop-logo-div img {
height: 64px !important; /* istersen 70-72px yapabilirsin */
width: auto !important;
max-height: none !important;
}
}
/* Dil butonunu diğer nav butonlarıyla aynı hizaya getir */
.header-desktop-right-area .header-lang-switch a{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
height:100%;
text-align:center;
}
.header-lang-icon-wrapper{
display:flex;
align-items:center;
justify-content:center;
width:28px;
height:28px;
margin:0 auto 4px; /* ikon ile yazı arası boşluk */
}
/* Bayrak ikonunu sepet / diğer ikonlarla orantılı yap */
.header-lang-icon-wrapper [class^="flag-icon-"],
.header-lang-icon-wrapper [class*=" flag-icon-"]{
width:24px;
height:18px;
display:block;
}
/* =======================
HEADER DİL SEÇİCİSİ
Yuvarlak bayraklar + hizalama
======================= */
/* Dil butonunu diğer nav butonları (Notifications, Membership, Favorites, Cart) ile hizala */
.header-desktop-right-area .header-lang-switch > a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
text-align: center;
}
/* Yuvarlak bayrak (üstte görünen aktif bayrak + dropdown içindekiler) */
.lang-flag-round {
width: 28px;
height: 28px;
border-radius: 50%;
overflow: hidden;
display: inline-block;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
/* Dropdown içindeki bayrakları biraz küçült ve yana hizala */
.header-lang-switch .dropdown-menu .lang-flag-round {
width: 22px;
height: 22px;
margin-right: 8px;
}
/* Dil dropdown animasyonu (hafif aşağıdan gelsin) */
.header-lang-switch .dropdown-menu {
padding: 8px 10px;
border-radius: 8px;
transform-origin: top;
transform: translateY(8px);
opacity: 0;
transition: opacity 0.16s ease-out, transform 0.16s ease-out;
}
/* Bootstrap dropdown açıldığında .show sınıfını ekliyor */
.header-lang-switch .dropdown-menu.show {
opacity: 1;
transform: translateY(0);
}
/* Dil listesi satır hizalaması */
.header-lang-switch .dropdown-menu .language-change {
display: flex;
align-items: center;
font-size: 13px;
border-radius: 6px;
padding: 5px 8px;
white-space: nowrap;
}
.header-lang-switch .dropdown-menu .language-change:hover {
background: rgba(255, 255, 255, 0.08);
}
/* ==========================
HEADER NAV BUTON HÄ°ZALAMA
(Notifications / Membership / Favorites / Your Cart / English)
========================== */
/* Sağ taraftaki tüm nav butonlarını dikeyde ortala */
.header-desktop-right-area .header-desktop-navbutton-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 10px; /* yatay boşlukları eşitle */
}
/* İçteki etiketini de aynı şekilde ortala */
.header-desktop-right-area .header-desktop-navbutton-box > a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
text-align: center;
}
/* İkonların altında aynı boşluk olsun (zili, kullanıcıyı, yıldızı, çanta ikonunu) */
.header-desktop-right-area .header-desktop-navbutton-box i {
margin-bottom: 4px;
}
/* ==========================
DİL SEÇİCİ – YUVARLAK BAYRAK BOYUT & HİZA
========================== */
/* Üstte görünen aktif bayrak (English’teki) */
.lang-flag-round {
width: 32px; /* bayrağı büyüttük */
height: 32px;
border-radius: 50%;
overflow: hidden;
display: block;
margin: 0 auto 4px; /* altta yazı için küçük boşluk */
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
/* Dropdown içindeki bayraklar biraz daha küçük ve sola hizalı */
.header-lang-switch .dropdown-menu .lang-flag-round {
width: 24px;
height: 24px;
margin-right: 8px;
}
/* Dil dropdown satırları – ikon + metin hizası */
.header-lang-switch .dropdown-menu .language-change {
display: flex;
align-items: center;
font-size: 13px;
border-radius: 6px;
padding: 5px 8px;
white-space: nowrap;
}
/* Hafif hover efekti */
.header-lang-switch .dropdown-menu .language-change:hover {
background: rgba(255, 255, 255, 0.08);
}
/* ==========================
CALL CENTER BLOÄU HÄ°ZALAMA
Notifications / Membership / Favorites / Your Cart / English ile aynı çizgi
========================== */
/* Sağ taraftaki tüm alanı tek flex satıra çevirip dikey ortalıyoruz */
.header-desktop-right-area {
display: flex;
align-items: center; /* Call Center + diğer ikonlar aynı yükseklikte */
}
/* Call Center bloÄŸunu da nav butonu gibi dikey hale getir */
.header-desktop-call {
display: flex;
flex-direction: column; /* ikon üstte, yazılar altta */
align-items: center;
justify-content: center;
margin-right: 30px; /* header.php içindeki inline margin-right ile uyumlu */
}
/* Call Center ikonu */
.header-desktop-call-i i {
font-size: 26px; /* mevcut ikon boyutuna yakın, istersen artır/azalt */
margin-bottom: 4px; /* ikon ile yazı arasındaki boşluk */
}
/* Call Center yazıları */
.header-desktop-call-t {
text-align: center;
line-height: 1.2;
}
.header-desktop-call-t-1 {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 2px;
}
.header-desktop-call-t-2 a {
font-size: 13px;
font-weight: 600;
}
/* =======================================================
HEADER SAÄ ALAN: CALL CENTER + ICONLAR + DÄ°L SEÇİCÄ°SÄ°
======================================================= */
/* Sağ taraftaki tüm küme (Call Center + Notifications + Membership + Favorites + Cart + English) */
.header-desktop-right-area {
display: flex;
align-items: center;
justify-content: flex-end;
}
/* ------------------ CALL CENTER ------------------ */
/* Call Center alanı: ikon + "Call Center" + telefon aynı satırda */
.header-desktop-call {
display: flex;
align-items: center;
margin-right: 30px; /* header.php'deki inline margin ile uyumlu */
white-space: nowrap; /* +90 506 654 33 85 asla satır kırmasın */
}
.header-desktop-call-i {
display: flex;
align-items: center;
justify-content: center;
margin-right: 8px;
}
.header-desktop-call-i i {
font-size: 24px; /* istersen 22–26 arası oynayabilirsin */
}
.header-desktop-call-t {
display: flex;
align-items: center;
gap: 4px; /* "Call Center" ile numaranın arası */
}
/* "Call Center" ve telefon satırlarının yan yana durması için inline-block */
.header-desktop-call-t-1,
.header-desktop-call-t-2 {
display: inline-block;
}
.header-desktop-call-t-1 {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.header-desktop-call-t-2 a {
font-size: 13px;
font-weight: 600;
}
/* ------------------ GENEL NAV BUTONLAR ------------------ */
/* Notifications, Membership, Favorites, Your Cart, English */
.header-desktop-right-area .header-desktop-navbutton-box {
display: flex;
flex-direction: column; /* ikon üstte, yazı altta */
align-items: center;
justify-content: center;
padding: 0 10px;
}
/* İkon ile yazı arasındaki mesafe */
.header-desktop-right-area .header-desktop-navbutton-box i {
margin-bottom: 4px;
}
/* Alt yazılar tek satırda kalsın (Your Cart, English vs.) */
.header-desktop-navbutton-box-t {
white-space: nowrap;
}
/* ------------------ DİL SEÇİCİ – YUVARLAK BAYRAK ------------------ */
/* Dil butonunun içindeki da diğer nav butonları gibi dursun */
.header-desktop-right-area .header-lang-switch > a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
text-align: center;
}
/* Header'da görünen aktif bayrak (English'in üstündeki) */
.lang-flag-round {
width: 32px; /* bayrak boyutu */
height: 32px;
border-radius: 50%;
overflow: hidden;
display: block;
margin: 0 auto 4px; /* altında "English" için ufak boşluk */
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
/* Dropdown içindeki bayraklar biraz daha küçük */
.header-lang-switch .dropdown-menu .lang-flag-round {
width: 24px;
height: 24px;
margin-right: 8px;
}
/* Açılır dil listesi satırları: ikon + metin hizası */
.header-lang-switch .dropdown-menu .language-change {
display: flex;
align-items: center;
font-size: 13px;
border-radius: 6px;
padding: 5px 8px;
white-space: nowrap;
}
/* Hover efekti */
.header-lang-switch .dropdown-menu .language-change:hover {
background: rgba(255, 255, 255, 0.08);
}
/* Hafif aşağıdan gelme animasyonu (isteğe bağlı, şık dursun diye) */
.header-lang-switch .dropdown-menu {
padding: 8px 10px;
border-radius: 8px;
transform-origin: top;
transform: translateY(8px);
opacity: 0;
transition: opacity 0.16s ease-out, transform 0.16s ease-out;
}
.header-lang-switch .dropdown-menu.show {
opacity: 1;
transform: translateY(0);
}
/* =======================================================
CALL CENTER BLOÄU – Ä°KON + "CALL CENTER" + NUMARA TEK SATIR
======================================================= */
.header-desktop-call {
display: flex;
align-items: center; /* ikon + yazı aynı hizada */
margin-right: 30px;
white-space: nowrap; /* +90 506 654 33 85 asla alt satıra düşmesin */
}
.header-desktop-call-i {
display: flex;
align-items: center;
justify-content: center;
margin-right: 8px; /* ikon ile yazı arası */
}
.header-desktop-call-i i {
font-size: 24px; /* istersen 22–26 arası oynatabilirsin */
}
/* CALL CENTER + numara yan yana, düzgün boşluklu */
.header-desktop-call-t {
display: flex;
align-items: baseline; /* CALL CENTER ile numaranın alt çizgisi hizalı dursun */
gap: 7px; /* aradaki mesafe – isteğe göre 5–10 yapabilirsin */
}
.header-desktop-call-t-1,
.header-desktop-call-t-2 {
display: inline-block;
}
.header-desktop-call-t-1 {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
/* renk vermiyorum, temadaki rengi kullansın */
}
.header-desktop-call-t-2 a {
font-size: 13px;
font-weight: 600;
}
/* ==========================================
CALL CENTER BLOÄU – ikon üstte, yazı altta
========================================== */
.header-desktop-call {
display: flex;
align-items: center;
justify-content: center;
margin-right: 30px; /* saÄŸdaki ikonlarla aradaki boÅŸluk */
}
.header-desktop-call > a {
display: flex;
flex-direction: column; /* ikon üstte, Call Center altta */
align-items: center;
justify-content: center;
text-align: center;
white-space: nowrap;
text-decoration: none;
}
.header-desktop-call i {
font-size: 24px; /* istersen 22–26 arası oynat */
margin-bottom: 4px; /* ikon ile yazı arası boşluk */
}
/* CALL CENTER yazısı, diğer nav yazılarıyla aynı stil */
.header-desktop-call .header-desktop-navbutton-box-t {
white-space: nowrap;
}
/* Telefon numarasını tamamen gizle (ama HTML'de kalsın) */
.header-desktop-call .header-call-number {
display: none;
}
/* =========================
Header - Dil Dropdown (kutsuz görünüm)
========================= */
.header-lang-switch .dropdown-menu.currency-drop {
background: transparent !important; /* Beyaz kutuyu kaldır */
border: none !important;
box-shadow: none !important;
padding: 4px 0;
min-width: auto;
}
/* Her dil satırı: sadece bayrak + isim */
.header-lang-switch .dropdown-menu.currency-drop a {
display: flex;
align-items: center;
gap: 6px;
padding: 3px 8px;
background: transparent !important;
border: none !important;
color: #f7f0e4; /* Header yazı rengine yakın, açık ton */
font-size: 13px;
line-height: 1.2;
}
/* Hover’da hafif renk değişimi, kutu yok */
.header-lang-switch .dropdown-menu.currency-drop a:hover {
background: transparent !important;
color: #f0c7cb; /* İstersen burayı kendi pembe tonunla değiştir */
text-decoration: none;
}
/* Bayrakları yuvarlak göster (mevcut flag-icon’ları kullanarak) */
.header-lang-switch .dropdown-menu.currency-drop [class^="flag-icon-"],
.header-lang-switch .dropdown-menu.currency-drop [class*=" flag-icon-"] {
width: 22px;
height: 22px;
border-radius: 50%;
overflow: hidden;
display: inline-block;
}
/* =========================
Header - Dil Dropdown (ikon üstte, isim altta)
========================= */
.header-lang-switch .dropdown-menu.currency-drop {
background: transparent !important; /* Kutu yok */
border: none !important;
box-shadow: none !important;
padding: 8px 0;
min-width: 80px; /* Dar bir kolon gibi dursun */
}
/* Her dil satırı: bayrak ÜSTTE, isim ALTTA */
.header-lang-switch .dropdown-menu.currency-drop a {
display: flex;
flex-direction: column; /* Üst–alt diz */
align-items: center;
justify-content: center;
gap: 4px;
padding: 4px 10px;
margin: 0 0 6px;
background: transparent !important;
border: none !important;
color: #f7f0e4; /* Header yazı rengi */
font-size: 12px;
line-height: 1.2;
text-align: center;
text-decoration: none;
}
.header-lang-switch .dropdown-menu.currency-drop a:last-child {
margin-bottom: 0;
}
/* Hover efekti: kutu yok, sadece renk/ufak hareket */
.header-lang-switch .dropdown-menu.currency-drop a:hover {
color: #f0c7cb;
transform: translateY(-1px);
}
/* Bayrakları büyüt + yuvarlak yap */
.header-lang-switch .dropdown-menu.currency-drop [class^="flag-icon-"],
.header-lang-switch .dropdown-menu.currency-drop [class*=" flag-icon-"] {
width: 30px;
height: 30px;
border-radius: 50%;
overflow: hidden;
display: inline-block;
}
/* =========================================
Header – Dil Dropdown (pill buton görünümü)
========================================= */
.header-lang-switch .dropdown-menu.currency-drop {
background: transparent !important; /* dış çerçeve yok */
border: none !important;
box-shadow: none !important;
padding: 4px 0;
min-width: 150px;
}
/* Dil satırı: bayrak solda, yazı sağda, yuvarlak buton gibi */
.header-lang-switch .dropdown-menu.currency-drop a {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
margin: 2px 0;
border-radius: 999px;
background: rgba(0, 0, 0, 0.25);
color: #f7f0e4;
text-decoration: none;
font-size: 12px;
line-height: 1;
white-space: nowrap;
transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
/* Bayrak boyutu ve yuvarlak çerçeve */
.header-lang-switch .dropdown-menu.currency-drop [class^="flag-icon-"],
.header-lang-switch .dropdown-menu.currency-drop [class*=" flag-icon-"] {
width: 22px;
height: 22px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
}
/* Dil adı */
.header-lang-switch .dropdown-menu.currency-drop .lang-label {
font-weight: 500;
letter-spacing: 0.02em;
}
/* Hover efekti */
.header-lang-switch .dropdown-menu.currency-drop a:hover {
background: rgba(240, 199, 203, 0.25);
transform: translateX(2px);
}
/* Seçili dil (active) – daha belirgin */
.header-lang-switch .dropdown-menu.currency-drop a.active {
background: rgba(240, 199, 203, 0.35);
}
.header-lang-switch .dropdown-menu.currency-drop a.active .lang-label {
color: #fff;
}
/* Dropdown konumu – tetikleyicinin altına hizalı dursun */
.header-lang-switch .dropdown-menu.currency-drop.show {
transform: translateX(-10%);
}
/* ===========================
HEADER - DİL SEÇİCİ TASARIMI
=========================== */
/* Ana dil ikonu (header'daki) */
.header-lang-switch .header-lang-flag-main {
width: 34px;
height: 34px;
border-radius: 50%;
overflow: hidden;
display: block;
margin: 0 auto 2px;
}
/* Açılan kapsül */
.header-lang-switch .currency-drop {
background: #ffffff;
border-radius: 999px;
border: 0;
padding: 10px 0;
min-width: 80px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
left: 50% !important;
transform: translateX(-50%);
top: calc(100% + 10px);
}
/* Her bir dil satırı */
.header-lang-switch .currency-drop .header-lang-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 6px 14px;
text-align: center;
text-decoration: none;
color: #1f2b44;
font-size: 11px;
line-height: 1.1;
background: transparent;
border: 0;
}
/* Bayrak - açılan menüde */
.header-lang-switch .currency-drop .header-lang-flag {
width: 30px;
height: 30px;
border-radius: 50%;
overflow: hidden;
display: block;
}
/* Aktif dil biraz daha belirgin olsun */
.header-lang-switch .currency-drop .header-lang-item.active .header-lang-label {
font-weight: 600;
}
/* Hover efekti (hafif renk deÄŸiÅŸimi yeterli) */
.header-lang-switch .currency-drop .header-lang-item:hover .header-lang-label {
color: #c67986;
}
/* ===============================
LANGUAGE DROPDOWN – PILL STYLE
=============================== */
/* Üstteki aktif dil: bayrak + text dikey hizalı */
.header-lang-switch > a {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.header-lang-switch .lang-flag-round {
width: 32px;
height: 32px;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}
/* Açılan kapsül (beyaz oval) */
.header-lang-dropdown {
padding: 10px 12px 14px;
margin-top: 16px; /* bayrak ile kapsül arası mesafe */
border-radius: 26px;
border: 0;
background: #ffffff;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
min-width: auto;
width: auto;
display: flex;
flex-direction: column;
align-items: center;
row-gap: 10px;
}
/* Her dil satırı: dikey, ortalı */
.header-lang-dropdown .header-lang-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 0;
margin: 0;
background: none;
border: 0;
color: #1f2b44; /* gece mavisi tonuna yakın */
font-size: 11px;
font-weight: 500;
text-decoration: none;
}
/* Kapsül içindeki bayraklar: yuvarlak + biraz büyük */
.header-lang-dropdown .header-lang-flag {
width: 30px;
height: 30px;
border-radius: 50%;
overflow: hidden;
margin-bottom: 2px;
}
/* Dil ismi doğrudan bayrağın altında */
.header-lang-dropdown .header-lang-label {
display: block;
line-height: 1.1;
}
/* Hover & aktif dil vurgusu */
.header-lang-dropdown .header-lang-item:hover .header-lang-flag,
.header-lang-dropdown .header-lang-item.active .header-lang-flag {
box-shadow: 0 0 0 2px #f4d2b0; /* senin paletten açık bej tonuna yakın */
}
.header-lang-dropdown .header-lang-item.active .header-lang-label {
font-weight: 600;
}
/* ===============================
LANGUAGE DROPDOWN – PILL STYLE
=============================== */
/* Üstteki aktif dil: bayrak + text dikey hizalı */
.header-lang-switch > a {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
/* Üstte görünen ana bayrak – orantı ve crop düzeltildi */
.header-lang-switch .header-lang-flag-main {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
overflow: hidden;
/* flag-icon arka planını düzgün ortalamak için */
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}
/* Açılan kapsül: ince, dar, aşağı doğru uzayan */
.header-lang-dropdown {
padding: 8px 9px 10px;
margin-top: 18px;
border-radius: 30px;
border: 0;
background: #ffffff;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
min-width: 0 !important; /* bootstrap min-width’ünü kır */
width: 64px; /* kapsül genişliği */
display: flex;
flex-direction: column;
align-items: center;
row-gap: 8px;
}
/* Her dil satırı: bayrak üstte, isim altta */
.header-lang-dropdown .header-lang-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 0;
margin: 0;
width: 100%;
background: none;
border: 0;
color: #1f2b44;
font-size: 10px;
font-weight: 500;
text-decoration: none;
}
/* Açılan listede bayraklar */
.header-lang-dropdown .header-lang-flag {
display: inline-block;
width: 26px;
height: 26px;
border-radius: 50%;
overflow: hidden;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
margin-bottom: 2px;
border: 1px solid rgba(0, 0, 0, 0.08);
}
/* Dil ismi bayrağın hemen altında */
.header-lang-dropdown .header-lang-label {
display: block;
line-height: 1.15;
}
/* Hover & aktif vurgusu */
.header-lang-dropdown .header-lang-item:hover .header-lang-flag,
.header-lang-dropdown .header-lang-item.active .header-lang-flag {
box-shadow: 0 0 0 2px #f4d2b0; /* açık bej highlight */
}
.header-lang-dropdown .header-lang-item.active .header-lang-label {
font-weight: 600;
}
/* =========================
LANGUAGE DROPDOWN (FLAG)
========================= */
/* Kapsülün, dil ikonuna göre konumlanabilmesi için */
.header-lang-switch {
position: relative;
}
/* Header’daki ana bayrak (üstte görünen) */
.header-lang-flag-main {
display: inline-block;
width: 36px;
height: 36px;
border-radius: 50%;
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Açılan ince kapsül (merdiven gibi aşağı inen kısım) */
.header-lang-dropdown {
position: absolute;
left: 50%;
top: 100%;
margin-top: 6px; /* ikon ile kapsül arası boşluk */
transform: translateX(-50%);
min-width: 76px; /* kapsül genişliği (daha ince) */
padding: 6px 0 10px;
background: #ffffff;
border-radius: 999px;
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
z-index: 9999;
}
/* Her bir dil satırı */
.header-lang-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4px 0;
margin: 1px 0;
text-decoration: none;
background: transparent;
border-radius: 999px;
}
.header-lang-item:hover {
background: rgba(0, 0, 0, 0.03);
}
/* Kapsül içindeki bayraklar */
.header-lang-dropdown .header-lang-flag {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Dil isimleri */
.header-lang-label {
font-size: 11px;
line-height: 1.2;
margin-top: 2px;
color: #000;
}
/* Aktif dil satırı */
.header-lang-item.active .header-lang-label {
font-weight: 600;
}
.header-lang-item.active {
background: rgba(0, 0, 0, 0.04);
}
/* =========================
LANGUAGE – YATAY AÇILAN MENÜ
========================= */
/* Dil butonu kapsayıcısı */
.header-lang-switch {
position: relative;
}
/* Header'da görünen ana bayrak */
.header-lang-flag-main {
display: inline-block;
width: 36px;
height: 36px;
border-radius: 50%;
overflow: hidden;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
/* Yana doğru açılan kapsül */
.header-lang-dropdown {
position: absolute;
top: 50%;
left: 100%; /* butonun hemen sağına */
transform: translate(8px, -50%); /* hafif sağa kaydır + dikey ortala */
display: flex !important; /* Bootstrap'in display:none'unu ez */
flex-direction: row;
align-items: center;
padding: 4px 10px;
background: #ffffff;
border-radius: 999px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
border: 1px solid rgba(0, 0, 0, 0.08);
white-space: nowrap;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .18s ease, transform .18s ease, visibility .18s;
z-index: 9999;
}
/* Hover olunca "el açılıyor" :) */
.header-lang-switch:hover .header-lang-dropdown {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(0, -50%);
}
/* Tek tek dil item'ları */
.header-lang-item {
display: flex;
flex-direction: column; /* bayrak üstte, yazı altta */
align-items: center;
justify-content: center;
text-decoration: none;
margin: 0 4px;
padding: 2px 4px;
border-radius: 999px;
background: transparent;
}
.header-lang-item:hover {
background: rgba(0, 0, 0, 0.03);
}
/* Küçük yuvarlak bayraklar */
.header-lang-flag {
width: 26px;
height: 26px;
border-radius: 50%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
margin-bottom: 2px;
}
/* Dil isimleri */
.header-lang-label {
font-size: 11px;
line-height: 1.1;
color: #000;
}
.header-lang-item.active .header-lang-label {
font-weight: 600;
}
/* =========================
LANGUAGE – SAÄA DOÄRU AÇILAN ÅERÄ°T
========================= */
/* Dil butonu kapsayıcısı */
.header-desktop-right-area .header-lang-switch{
position: relative;
}
/* Header’daki ana buton: ikon üstte, yazı altta */
.header-desktop-right-area .header-lang-switch > a{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
/* Üstte görünen aktif bayrak */
.header-desktop-right-area .header-lang-flag-main{
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
overflow: hidden;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
margin-bottom: 4px;
}
/* =========================
SAÄA DOÄRU AÇILAN KAPSÃœL
========================= */
.header-desktop-right-area .header-lang-dropdown{
position: absolute;
top: 50%;
left: 100% !important; /* bayrağın hemen sağı */
right: auto !important;
transform: translate(8px, -50%);
display: flex !important;
flex-direction: row;
align-items: center;
padding: 4px 10px;
background: #ffffff;
border-radius: 999px;
border: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 10px 30px rgba(0,0,0,0.18);
white-space: nowrap;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity .18s ease,
transform .18s ease,
visibility .18s;
z-index: 9999;
}
/* Hover / focus olunca “el açılıyor†*/
.header-desktop-right-area .header-lang-switch:hover .header-lang-dropdown,
.header-desktop-right-area .header-lang-switch:focus-within .header-lang-dropdown{
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(0, -50%);
}
/* =========================
TEK TEK DÄ°L BUTONLARI
========================= */
.header-desktop-right-area .header-lang-item{
display: flex;
flex-direction: column; /* bayrak üstte, yazı altta */
align-items: center;
justify-content: center;
text-decoration: none;
margin: 0 4px;
padding: 2px 4px;
border-radius: 999px;
background: transparent;
}
.header-desktop-right-area .header-lang-item:hover{
background: rgba(0,0,0,0.03);
}
/* Åerit içindeki küçük bayraklar */
.header-desktop-right-area .header-lang-flag{
width: 24px;
height: 24px;
border-radius: 50%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
margin-bottom: 2px;
}
/* Dil isimleri */
.header-desktop-right-area .header-lang-label{
font-size: 11px;
line-height: 1.1;
color: #000;
}
.header-desktop-right-area .header-lang-item.active .header-lang-label{
font-weight: 600;
}
/* =========================
LANGUAGE STRIP – FÄ°NAL DOKUNUÅ
========================= */
/* Åeritte aktif dili gizle (zaten buton olarak görünüyor) */
.header-desktop-right-area .header-lang-dropdown .header-lang-item.active{
display: none !important;
}
/* Åerit içindeki dil isimlerini gizle → sadece bayraklar kalsın */
.header-desktop-right-area .header-lang-dropdown .header-lang-label{
display: none !important;
}
/* Åerit içi bayraklar ve aralarındaki boÅŸluk */
.header-desktop-right-area .header-lang-dropdown .header-lang-item{
margin: 0 3px;
padding: 2px 0;
}
.header-desktop-right-area .header-lang-dropdown .header-lang-flag{
width: 24px;
height: 24px;
border-radius: 50%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
/* =========================
LANGUAGE – SAÄA AÇILAN ÅERÄ°T
========================= */
/* Ana dil butonu kapsayıcısı */
.header-lang-switch{
position: relative !important;
}
/* Üstte görünen bayrak (English) */
.header-lang-flag-main{
display: inline-block !important;
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
overflow: hidden !important;
background-position: center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
/* Sağa doğru açılan şerit kapsül */
.header-lang-dropdown{
position: absolute !important;
top: 50% !important;
left: 100% !important; /* butonun sağı */
transform: translate(8px, -50%) !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
padding: 4px 10px !important;
border-radius: 999px !important;
min-width: 0 !important;
width: auto !important;
background: #ffffff !important;
border: 1px solid rgba(0,0,0,0.08) !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.18) !important;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
z-index: 9999;
}
/* Hover olunca şerit görünür (elini açıyor 🙂) */
.header-lang-switch:hover .header-lang-dropdown{
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(0, -50%) !important;
}
/* İçerdeki her dil item'i */
.header-lang-dropdown .header-lang-item{
display: flex !important;
flex-direction: column !important; /* bayrak üstte durursa sorun yok */
align-items: center !important;
justify-content: center !important;
margin: 0 4px !important;
padding: 2px 0 !important;
background: transparent !important;
border-radius: 999px !important;
}
/* Åeridin içinde AKTÄ°F dili gizle */
.header-lang-dropdown .header-lang-item.active{
display: none !important;
}
/* Dil isimlerini gizle – sadece bayraklar kalsın */
.header-lang-dropdown .header-lang-label{
display: none !important;
}
/* Åeritteki bayrak boyutu */
.header-lang-dropdown .header-lang-flag{
width: 24px !important;
height: 24px !important;
border-radius: 50% !important;
overflow: hidden !important;
background-position: center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
/* =========================
LANGUAGE – SAÄA AÇILAN ÅERÄ°T
========================= */
/* Dil butonu kapsayıcısı */
.header-desktop-navbutton-box.header-lang-switch{
position: relative;
}
/* Üstte görünen ana bayrak */
.header-lang-flag-main{
display: inline-block;
width: 36px;
height: 36px;
border-radius: 50%;
overflow: hidden;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
/* Sağa doğru açılan şerit kapsül */
.header-lang-switch .dropdown-menu.currency-drop.header-lang-dropdown{
position: absolute;
top: 50%;
left: 100%;
right: auto;
transform: translate(10px, -50%);
display: flex !important;
flex-direction: row;
align-items: center;
padding: 4px 10px;
margin: 0;
min-width: 0;
white-space: nowrap;
background: #ffffff;
border-radius: 999px;
border: 1px solid rgba(0,0,0,.1);
box-shadow: 0 10px 25px rgba(0,0,0,.18);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .18s ease, transform .18s ease;
z-index: 9999;
}
/* Hover olunca “el açılıyor†:) */
.header-lang-switch:hover .dropdown-menu.currency-drop.header-lang-dropdown{
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(0, -50%);
}
/* Tek tek dil item'ları (şeridin içi) */
.header-lang-dropdown .language-change.header-lang-item{
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0 4px;
padding: 2px 4px;
border-radius: 999px;
background: transparent;
text-decoration: none;
}
/* Aktif dili şeritte gizle (sadece diğer bayraklar kalsın) */
.header-lang-dropdown .language-change.header-lang-item.active{
display: none !important;
}
/* Åeritteki bayraklar */
.header-lang-dropdown .header-lang-flag{
width: 24px;
height: 24px;
border-radius: 50%;
overflow: hidden;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
margin-bottom: 2px;
}
/* Dil isimlerini istersen hiç gösterme (sadece bayraklar) */
.header-lang-dropdown .header-lang-label{
display: none;
}
/* Hafif hover efekti */
.header-lang-dropdown .language-change.header-lang-item:hover{
background: rgba(0,0,0,.04);
}
/* =========================================
LANG SWITCH – SAÄA DOÄRU YATAY ÅERÄ°T
========================================= */
/* Dil butonunun kapsayıcısı */
.ts-lang-wrap{
position: relative;
}
/* Yana açılan şerit menü */
.ts-lang-menu{
position: absolute !important;
top: 50% !important;
left: 100% !important;
right: auto !important;
transform: translate(8px, -50%) !important;
margin: 0 !important;
padding: 4px 10px !important;
min-width: 0 !important;
display: flex !important;
flex-direction: row !important;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
background: #ffffff !important;
border-radius: 999px !important;
border: 1px solid rgba(0,0,0,0.1) !important;
box-shadow: 0 10px 24px rgba(0,0,0,0.18) !important;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 9999;
}
/* Bayrağın üstüne gelince “el†açılır :) */
.ts-lang-wrap:hover .ts-lang-menu{
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* İçteki her dil elemanı */
.ts-lang-menu .language-change{
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
margin: 0 4px;
padding: 2px 4px;
border-radius: 999px;
background: transparent;
}
/* Aktif dili şeritte gizle (sadece diğer bayraklar görünsün) */
.ts-lang-menu .language-change.active{
display: none !important;
}
/* Åeritteki bayraklar */
.ts-lang-menu .header-lang-flag{
width: 24px;
height: 24px;
border-radius: 50%;
overflow: hidden;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
margin-bottom: 2px;
}
/* İstersen sadece bayrak görünsün, text gizli */
.ts-lang-menu .header-lang-label{
display: none;
}
/* =========================================
TAYFUN SILVER - YANA AÇILAN DÄ°L ÅERÄ°DÄ°
========================================= */
/* Bayrak + dil butonu sarmalayıcı */
.header-lang-switch.ts-lang-wrap{
position: relative;
}
/* Açılan dil kutusu temel pozisyon (sağa hizala) */
.header-lang-dropdown{
position: absolute !important;
top: 50% !important;
left: 100% !important; /* bayrağın hemen sağı */
right: auto !important;
transform: translate(8px, -50%) !important;
margin: 0 !important;
padding: 4px 10px !important;
min-width: auto !important;
background: #ffffff !important;
border-radius: 999px !important;
border: 1px solid rgba(0,0,0,0.12) !important;
box-shadow: 0 8px 20px rgba(0,0,0,0.18) !important;
z-index: 9999;
}
/* Açıldığında yatay şerit olsun */
.header-lang-dropdown.show{
display: flex !important;
flex-direction: row !important;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
}
/* Tek tek dil elemanları (bayraklar) */
.header-lang-dropdown .header-lang-item{
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
padding: 2px 4px;
margin: 0 4px;
border-radius: 999px;
background: transparent;
}
/* Aktif dili şeritte gösterme (sadece diğer diller) */
.header-lang-dropdown .header-lang-item.active{
display: none !important;
}
/* Åeritteki bayrak boyutları */
.header-lang-dropdown .header-lang-flag{
width: 24px;
height: 24px;
border-radius: 50%;
overflow: hidden;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
margin-bottom: 2px;
}
/* İstersen yalnız bayrak görünsün, metni gizle */
.header-lang-dropdown .header-lang-label{
display: none;
}
/* ==========================
Dil Åeridi (SaÄŸa Açılan)
========================== */
.header-lang-switch {
position: relative;
}
/* Aktif dil alanı (bayrak + yazı) */
.header-lang-current {
display: flex;
align-items: center;
cursor: pointer;
}
.header-lang-flag-main {
width: 26px;
height: 26px;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}
/* Sağa doğru açılan beyaz şerit */
.header-lang-strip {
position: absolute;
top: 50%;
left: 100%;
transform: translateY(-50%) translateX(8px);
display: flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: #fff;
border-radius: 999px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease-out, transform 0.15s ease-out;
z-index: 9999;
}
/* Hover’da şeridi göster */
.header-lang-switch:hover .header-lang-strip {
opacity: 1;
pointer-events: auto;
transform: translateY(-50%) translateX(0);
}
/* Åeritteki küçük bayrak butonları */
.header-lang-pill-flag {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
overflow: hidden;
text-decoration: none;
transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, background-color 0.12s ease-out;
}
/* Flag-icon içi tam otursun */
.header-lang-pill-flag span[class^="flag-icon-"],
.header-lang-pill-flag span[class*=" flag-icon-"] {
width: 100%;
height: 100%;
}
/* Hover efekti */
.header-lang-pill-flag:hover {
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
/* Aktif dil – pembe çerçeve */
.header-lang-pill-flag.active {
box-shadow: 0 0 0 2px #c67986; /* senin toz pembe tonu */
}
/* ================================
HEADER ARAMA KUTUSU – ÖZEL BOYUT
(style.css'in EN SONUNA EKLE)
================================ */
@media (min-width: 992px) { /* sadece desktop için */
/* Arama kutusunun genel geniÅŸliÄŸi */
.header-desktop-search1 {
max-width: 650px; /* daha dar istersen 600, 550 yapabilirsin */
margin: 0 auto; /* ortalı kalsın */
}
/* Input'un yüksekliği ve yazı boyutu */
.header-desktop-search1 input[type="text"],
.header-desktop-search1 input[type="search"] {
height: 38px !important; /* yükseklik */
line-height: 38px !important;
padding: 0 42px 0 18px; /* sağ/sol iç boşluk */
font-size: 13px; /* placeholder + yazı boyutu */
}
/* SaÄŸdaki arama butonu / ikon */
.header-desktop-search1 button,
.header-desktop-search1 .btn,
.header-desktop-search1 .search-btn {
width: 32px;
height: 32px;
line-height: 32px;
font-size: 14px;
}
}
/* Desktop header satırını ortalı tutalım (zaten flex ise pekiştiriyoruz) */
.header-desktop-main-div-in{
display:flex;
align-items:center;
}
/* Logo boyutu (yüksekliği artır, genişlik orantılı gelsin) */
.header-desktop-logo-div img{
height: 70px; /* istersen 65–80px arası oynayabilirsin */
width: auto;
display:block;
}
/* Logo ile arama alanı arasında biraz nefes alanı olsun */
.header-desktop-logo-div{
margin-right: 25px;
}
/* Sadece masaüstünde geçerli olsun istersen: */
@media (max-width: 991px){
.header-desktop-logo-div img{
height: 50px; /* mobile tarafını sabit tut */
}
}
/* ===========================
CART VARYANT YAZI GÖSTERİMİ
(header.php içinden taşındı)
=========================== */
.cart-variants {
margin-top: 4px;
font-size: 12px;
line-height: 1.4;
}
.cart-variants .v {
display: inline-block;
border: 1px solid #EBEBEB;
border-radius: 12px;
padding: 2px 8px;
margin: 2px 6px 0 0;
white-space: nowrap;
}
/* ===========================
HEADER DESKTOP / ÃœST HEADER
(header.php içinden taşındı)
=========================== */
@media (min-width: 1200px) {
/* Üst satır ana container */
.desktop-header-area .header-desktop-main-div-in {
display: flex;
align-items: center;
}
/* LOGO BLOÄU */
.desktop-header-area .header-desktop-logo-div {
flex: 0 0 auto;
margin-left: -35px; /* Logoyu biraz daha sola al */
margin-right: 35px;
display: flex;
align-items: center;
}
.desktop-header-area .header-desktop-logo-div a {
display: inline-block;
}
.desktop-header-area .header-desktop-logo-div img {
display: block;
height: auto;
max-height: none;
transform: scale(1.35); /* Logo büyüklüğü */
transform-origin: left center;
}
/* SaÄŸ taraf: arama + ikonlar */
.desktop-header-area .header-desktop-right-area {
flex: 1 1 auto;
display: flex;
align-items: center;
column-gap: 0;
}
/* Arama kutusu */
.desktop-header-area .header-desktop-search1 {
flex: 1 1 34%;
max-width: 520px;
}
.desktop-header-area .header-desktop-search1 form {
width: 100%;
}
.desktop-header-area .header-desktop-search1 input[type="text"],
.desktop-header-area .header-desktop-search1 input[type="search"] {
width: 100%;
box-sizing: border-box;
}
/* Nav buton grubu: Call Center, bildirim, login, fav, sepet, dil */
.desktop-header-area .header-desktop-right-area .header-desktop-navbutton-box {
margin-left: 24px;
}
/* İlk nav butonu aramadan sonra sağa yapışsın */
.desktop-header-area .header-desktop-right-area .header-desktop-navbutton-box:first-of-type {
margin-left: auto;
}
/* Buton içi hizalama */
.desktop-header-area .header-desktop-navbutton-box > a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
}
.desktop-header-area .header-desktop-navbutton-box i {
font-size: 23px;
}
.desktop-header-area .header-desktop-navbutton-box-t {
font-size: 12px;
line-height: 1.3;
margin-top: 4px;
}
/* Dil butonu için hafif ekstra boşluk */
.desktop-header-area .header-desktop-navbutton-box.ts-lang-wrap {
margin-left: 30px;
}
}
@media (min-width: 1200px) and (max-width: 1400px) {
.desktop-header-area .header-desktop-logo-div {
margin-left: -25px;
margin-right: 25px;
}
.desktop-header-area .header-desktop-logo-div img {
transform: scale(1.25);
}
.desktop-header-area .header-desktop-search1 {
flex-basis: 32%;
max-width: 460px;
}
.desktop-header-area .header-desktop-right-area .header-desktop-navbutton-box {
margin-left: 20px;
}
}
/* Dil kapsülü (ts-lang) */
.header-desktop-navbutton-box.ts-lang-wrap {
position: relative;
}
.ts-lang-current {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
cursor: default;
}
.ts-lang-icon-wrap {
position: relative;
display: inline-block;
}
.ts-lang-flag-main {
width: 34px;
height: 34px;
border-radius: 50%;
overflow: hidden;
position: relative;
z-index: 3;
background-position: center center;
background-size: cover;
}
.ts-lang-pill {
position: absolute;
top: 0;
left: 0;
height: 34px;
background: #ffffff;
border-radius: 999px;
display: flex;
align-items: center;
gap: 10px;
padding: 3px 18px 3px 40px; /* ikon + boÅŸluk */
box-shadow: 0 4px 10px rgba(0,0,0,0.25);
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.18s ease;
z-index: 2;
}
.ts-lang-wrap:hover .ts-lang-pill {
opacity: 1;
visibility: visible;
}
.ts-lang-pill .language-change {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
overflow: hidden;
padding: 0;
margin: 0;
cursor: pointer;
}
.ts-lang-pill .language-change [class^="flag-icon-"],
.ts-lang-pill .language-change [class*=" flag-icon-"] {
width: 100%;
height: 100%;
border-radius: 50%;
display: block;
background-position: center center;
background-size: cover;
}
.ts-lang-pill .language-change.is-active {
opacity: 0.4;
pointer-events: none;
}
/* ===========================
Top Header HTML özel p margin
(header.php içinden taşındı)
=========================== */
.topheader-html-main-in p {
margin-bottom: 0;
}
/* ============================
DESKTOP HEADER GENEL DÄ°ZAYN
(Logo tam sola, arama biraz saÄŸa,
ikonlar sağ kanata yaslı)
============================ */
@media (min-width: 1200px) {
/* Üst satır: logo + arama + ikonlar */
.desktop-header-area .header-desktop-main-div-in {
max-width: 100%; /* container kısıtını kaldır */
width: 100%;
margin: 0;
padding: 0 30px; /* istersen 0 yaparsın, o zaman tam cama dayanır */
display: flex;
align-items: center;
}
/* LOGO BLOÄU – tam sola yakın */
.desktop-header-area .header-desktop-logo-div {
flex: 0 0 auto;
margin-left: 0; /* LOGO SOL */
margin-right: 40px; /* logo ile arama arası boşluk */
display: flex;
align-items: center;
}
.desktop-header-area .header-desktop-logo-div a {
display: inline-block;
}
.desktop-header-area .header-desktop-logo-div img {
display: block;
height: auto;
max-height: none;
transform: scale(1.3); /* logo büyüklüğü */
transform-origin: left center;
}
/* SAÄ BLOK (arama + ikonlar) */
.desktop-header-area .header-desktop-right-area {
flex: 1 1 auto;
display: flex;
align-items: center;
}
/* ARAMA KUTUSU – biraz daha sağa, ikonları da sağa iter */
.desktop-header-area .header-desktop-search1 {
flex: 0 0 38%; /* arama genişliği (36–42 arası oynayabilirsin) */
max-width: 700px;
margin-right: auto; /* BURASI: ikon grubunu saÄŸ kanata iter */
}
.desktop-header-area .header-desktop-search1 form {
width: 100%;
}
.desktop-header-area .header-desktop-search1 input[type="text"],
.desktop-header-area .header-desktop-search1 input[type="search"] {
width: 100%;
box-sizing: border-box;
}
/* NAV BUTONLARI (Call Center, Bell, Membership, Fav, Cart, Dil) */
/* Eski margin’leri nötrle */
.desktop-header-area .header-desktop-right-area > .header-desktop-navbutton-box {
margin-left: 0;
}
/* İkonlar arası boşluk */
.desktop-header-area
.header-desktop-right-area > .header-desktop-navbutton-box + .header-desktop-navbutton-box {
margin-left: 26px;
}
/* Link iç hizalama: ikon üstte, yazı altta */
.desktop-header-area .header-desktop-right-area .header-desktop-navbutton-box > a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
}
.desktop-header-area .header-desktop-right-area .header-desktop-navbutton-box i {
font-size: 23px;
}
.desktop-header-area .header-desktop-right-area .header-desktop-navbutton-box-t {
font-size: 12px;
line-height: 1.3;
margin-top: 4px;
}
}
/* 1200–1400 px arası biraz sıkılaştırma */
@media (min-width: 1200px) and (max-width: 1400px) {
.desktop-header-area .header-desktop-main-div-in {
padding: 0 20px;
}
.desktop-header-area .header-desktop-search1 {
flex-basis: 34%;
max-width: 560px;
}
.desktop-header-area
.header-desktop-right-area > .header-desktop-navbutton-box + .header-desktop-navbutton-box {
margin-left: 20px;
}
}
/* ==========================
TAYFUN SILVER HEADER DESKTOP TUNING
(style.css sonuna ekleyin)
========================== */
@media (min-width: 1200px) {
/* SaÄŸ blok (arama + ikonlar) */
.desktop-header-area .header-desktop-right-area {
display: flex;
align-items: center;
}
/* Arama alanını biraz daralt, ikonlara yer aç */
.desktop-header-area .header-desktop-search1 {
flex: 1 1 auto;
max-width: 600px; /* çok geniş gelirse 580, dar gelirse 620 yapabilirsin */
margin-right: 18px; /* arama ile ilk ikon arasındaki boşluk */
}
/* Sağdaki nav butonlarının eski büyük marginlerini sıfırla */
.desktop-header-area .header-desktop-right-area .header-desktop-navbutton-box {
margin-left: 0;
}
/* İkonlar arası mesafe – buradan kontrol ediyoruz */
.desktop-header-area .header-desktop-right-area
.header-desktop-navbutton-box + .header-desktop-navbutton-box {
margin-left: 14px; /* istersen 12 / 16 ile oynayabilirsin */
}
/* Dil ikonunu sağ kenardan biraz içeri al */
.desktop-header-area .header-desktop-right-area
.header-desktop-navbutton-box.ts-lang-wrap {
margin-right: 6px;
}
}
/* Dil kapsülü sayfanın dışına taşmasın diye:
sağa değil, mümkün olduğunca sola doğru açılsın */
.ts-lang-wrap .ts-lang-pill {
left: auto;
right: 0; /* kapsülün sağ kenarı dil ikonuna yaslanır */
padding: 3px 40px 3px 18px; /* iç boşlukları sağ/sola göre tekrar ayarladık */
}
/* ==========================
HEADER NAV + DÄ°L KAPSÃœL AYARI
========================== */
@media (min-width: 1200px) {
/* Sağ taraftaki blokları biraz sola çek,
dil kapsülü için sağda güvenli alan bırak */
.desktop-header-area .header-desktop-main-div-in {
padding-right: 120px; /* gerekirse 100–140 arasında oynayabilirsin */
}
/* Arama kutusunu azıcık daraltıp ikonlara alan açıyoruz */
.desktop-header-area .header-desktop-search1 {
max-width: 580px; /* çok dar gelirse 600 yapabilirsin */
}
/* Call Center – Notifications – Membership – Favorites – Cart – Dil
aralarındaki mesafeyi sıkılaştır */
.desktop-header-area .header-desktop-right-area .header-desktop-navbutton-box {
margin-left: 0;
}
.desktop-header-area .header-desktop-right-area
.header-desktop-navbutton-box + .header-desktop-navbutton-box {
margin-left: 14px; /* daha da yakın istersen 10–12 yap */
}
}
/* Dil kapsülü SAÄA doÄŸru açılsın (orijinal mantık) */
.ts-lang-wrap .ts-lang-pill {
left: 0;
right: auto;
padding: 3px 18px 3px 40px;
}
/* ==========================
MOBÄ°L ARAMA KATMAN DÃœZELTME
========================== */
@media (max-width: 991.98px) {
/* Arama kutusu mobil menünün doğal parçası olsun,
ekstra katman gibi davranmasın */
.mobile-header-main-search {
position: relative !important;
z-index: 1 !important;
}
.mobile-header-main-search form {
position: relative;
z-index: 1;
}
.mobile-header-main-search input[type="text"],
.mobile-header-main-search input[type="search"] {
position: relative;
z-index: 1;
box-shadow: none; /* “yüzen†hissi azaltmak için */
}
/* Slide menü ve içeriği, arka plandaki sayfanın üzerinde kalsın */
.slide-menu,
.mobile-header-main-div,
.header-mobile-view {
position: relative;
z-index: 2;
}
}
/* ===========================
HEADER DESKTOP / ÃœST HEADER
=========================== */
/* 1200px ve üzeri – ortak desktop görünüm */
@media (min-width: 1200px) {
/* Üst satır: logo + arama + ikonlar */
.desktop-header-area .header-desktop-main-div-in {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0 100px 0 30px; /* SAÄ 100PX: ikon grubu biraz sola çekildi */
box-sizing: border-box;
display: flex;
align-items: center;
}
/* LOGO BLOÄU – sola yaslı */
.desktop-header-area .header-desktop-logo-div {
flex: 0 0 auto;
display: flex;
align-items: center;
margin-left: 0;
margin-right: 40px; /* logo ile arama arası */
}
.desktop-header-area .header-desktop-logo-div a {
display: inline-block;
}
.desktop-header-area .header-desktop-logo-div img {
display: block;
height: 64px; /* logo yüksekliği – 60/70 ile oynayabilirsin */
max-height: 64px;
width: auto;
transform: none; /* scale kaldırıldı */
}
/* SAÄ BLOK: Arama + ikonlar */
.desktop-header-area .header-desktop-right-area {
flex: 1 1 auto;
display: flex;
align-items: center;
}
/* Arama kutusu */
.desktop-header-area .header-desktop-search1 {
flex: 1 1 480px; /* varsayılan genişlik */
min-width: 320px;
max-width: 640px;
margin-right: 24px; /* arama ile ilk ikon arası boşluk */
}
.desktop-header-area .header-desktop-search1 form {
width: 100%;
}
.desktop-header-area .header-desktop-search1 input[type="text"],
.desktop-header-area .header-desktop-search1 input[type="search"] {
width: 100%;
box-sizing: border-box;
}
/* Nav butonları (Call Center, Notifications, Membership, Favorites, Cart, Dil) */
.desktop-header-area .header-desktop-right-area .header-desktop-navbutton-box {
flex: 0 0 auto;
margin-left: 0;
}
.desktop-header-area .header-desktop-right-area
.header-desktop-navbutton-box + .header-desktop-navbutton-box {
margin-left: 18px; /* ikonlar arası mesafe */
}
.desktop-header-area .header-desktop-right-area .header-desktop-navbutton-box > a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
}
.desktop-header-area .header-desktop-right-area .header-desktop-navbutton-box i {
font-size: 23px;
}
.desktop-header-area .header-desktop-right-area .header-desktop-navbutton-box-t {
font-size: 12px;
line-height: 1.3;
margin-top: 4px;
}
/* Dil ikonunu sağ kenardan çok yapıştırma */
.desktop-header-area .header-desktop-right-area
.header-desktop-navbutton-box.ts-lang-wrap {
margin-right: 0;
}
}
/* 1200–1400 px arası: laptop için sıkılaştırma */
@media (min-width: 1200px) and (max-width: 1400px) {
.desktop-header-area .header-desktop-main-div-in {
padding: 0 80px 0 20px; /* laptopta saÄŸ boÅŸluk biraz daha dar */
}
.desktop-header-area .header-desktop-logo-div {
margin-right: 30px;
}
.desktop-header-area .header-desktop-logo-div img {
height: 58px;
max-height: 58px; /* laptopta logo azıcık küçülüyor */
}
.desktop-header-area .header-desktop-search1 {
flex-basis: 400px;
max-width: 520px;
margin-right: 18px;
}
.desktop-header-area .header-desktop-right-area
.header-desktop-navbutton-box + .header-desktop-navbutton-box {
margin-left: 14px;
}
}
/* ===========================
Dil kapsülü (ts-lang)
=========================== */
.header-desktop-navbutton-box.ts-lang-wrap {
position: relative;
}
.ts-lang-current {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
cursor: default;
}
.ts-lang-icon-wrap {
position: relative;
display: inline-block;
}
/* SEÇİLİ DİL İKONU – ÇERÇEVELİ HALKA */
.ts-lang-flag-main {
width: 34px;
height: 34px;
border-radius: 50%;
overflow: hidden;
position: relative;
z-index: 3;
background-position: center center;
background-size: cover;
border: 2px solid #e3dacb; /* açık bej çerçeve */
box-shadow: 0 0 0 1px rgba(0,0,0,0.35); /* hafif dış gölge/halkacık */
}
/* Kapsül bayraktan SOLA doğru açılsın – sağdan taşmaz */
.ts-lang-pill {
position: absolute;
top: 0;
right: 0; /* sağ kenarı bayrağa yasla */
left: auto;
height: 34px;
background: #ffffff;
border-radius: 999px;
display: flex;
align-items: center;
gap: 10px;
padding: 3px 40px 3px 18px; /* saÄŸda daha fazla boÅŸluk */
box-shadow: 0 4px 10px rgba(0,0,0,0.25);
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.18s ease;
z-index: 2;
}
.ts-lang-wrap:hover .ts-lang-pill {
opacity: 1;
visibility: visible;
}
.ts-lang-pill .language-change {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
overflow: hidden;
padding: 0;
margin: 0;
cursor: pointer;
}
.ts-lang-pill .language-change [class^="flag-icon-"],
.ts-lang-pill .language-change [class*=" flag-icon-"] {
width: 100%;
height: 100%;
border-radius: 50%;
display: block;
background-position: center center;
background-size: cover;
}
.ts-lang-pill .language-change.is-active {
opacity: 0.4;
pointer-events: none;
}
/* ===========================
Top Header HTML özel p margin
=========================== */
.topheader-html-main-in p {
margin-bottom: 0;
}
/* ===========================
MOBÄ°L ARAMA KATMAN DÃœZELTME
=========================== */
@media (max-width: 991.98px) {
/* Arama kutusu mobil menünün doğal parçası olsun */
.mobile-header-main-search {
position: relative !important;
z-index: 1 !important;
}
.mobile-header-main-search form {
position: relative;
z-index: 1;
}
.mobile-header-main-search input[type="text"],
.mobile-header-main-search input[type="search"] {
position: relative;
z-index: 1;
box-shadow: none;
}
/* Slide menü ve içeriği, arka plandaki sayfanın üzerinde kalsın */
.slide-menu,
.mobile-header-main-div,
.header-mobile-view {
position: relative;
z-index: 2;
}
}
/* ===========================
MOBÄ°L HEADER + ARAMA + LOGO
=========================== */
@media (max-width: 991.98px) {
/* LOGO BOYUTU – mobilde büyüt */
.mobile-header-logo img {
height: 34px; /* istersen 32 / 36 ile oynayabilirsin */
max-height: 34px;
width: auto;
display: block;
}
/* Arama kutusu mobil menünün doğal parçası olsun */
.mobile-header-main-search {
position: relative !important;
z-index: 1 !important;
}
.mobile-header-main-search form {
position: relative;
z-index: 1;
}
.mobile-header-main-search input[type="text"],
.mobile-header-main-search input[type="search"] {
position: relative;
z-index: 1;
box-shadow: none;
}
/* Slide menü ve header katmanları, arka plandaki sayfanın üzerinde kalsın */
.slide-menu,
.mobile-header-main-div,
.header-mobile-view {
position: relative;
z-index: 2;
}
}
/* Mobil header logo boyutu */
.header-mobile-view .mobile-header-logo img,
.header-mobile-view .mobile-header-logo-tablet-pro img {
height: 46px !important; /* İstediğin yüksekliği verebilirsin: 40–60px arası ideal */
max-height: 46px !important;
width: auto !important; /* Oran bozulmasın */
object-fit: contain;
}
/* MOBİL – logo gerçekten büyüsün */
@media (max-width: 768px) {
.header-mobile-view .mobile-header-logo img,
.header-mobile-view .mobile-header-logo-tablet-pro img {
width: 180px !important; /* İstediğin değere göre 120–180px arası oynat */
height: auto !important;
max-width: none !important;
max-height: none !important;
transform: none !important; /* varsa küçülten scale vs. hepsini sıfırlar */
}
}
/* =========================================================
GEM SWATCH PNG HARÄ°TASI (title -> /i/variants/gems/*.png)
========================================================= */
button.variant-swatch.round[title="Amethyst"]{
background-image:url("/i/variants/gems/amethyst-purple.png") !important;
background-size:cover !important;
background-position:center center !important;
}
button.variant-swatch.round[title="Aquamarine"]{
background-image:url("/i/variants/gems/aquamarine.png") !important;
background-size:cover !important;
background-position:center center !important;
}
button.variant-swatch.round[title="Agate Red"]{
background-image:url("/i/variants/gems/agate-red.png") !important;
background-size:cover !important;
background-position:center center !important;
}
button.variant-swatch.round[title="Black"]{
background-image:url("/i/variants/gems/black.png") !important;
background-size:cover !important;
background-position:center center !important;
}
button.variant-swatch.round[title="Champagne"]{
background-image:url("/i/variants/gems/champagne.png") !important;
background-size:cover !important;
background-position:center center !important;
}
button.variant-swatch.round[title="Citrine Yellow"]{
background-image:url("/i/variants/gems/citrine-yellow.png") !important;
background-size:cover !important;
background-position:center center !important;
}
button.variant-swatch.round[title="Crackle Turquoise"]{
background-image:url("/i/variants/gems/crackle-turquoise.png") !important;
background-size:cover !important;
background-position:center center !important;
}
button.variant-swatch.round[title="Emerald Green"]{
background-image:url("/i/variants/gems/emerald-green.png") !important;
background-size:cover !important;
background-position:center center !important;
}
button.variant-swatch.round[title="Garnet"]{
background-image:url("/i/variants/gems/garnet.png") !important;
background-size:cover !important;
background-position:center center !important;
}
button.variant-swatch.round[title="Green Teardrop Cabochon"]{
background-image:url("/i/variants/gems/green-teardrop-cabochon.png") !important;
background-size:cover !important;
background-position:center center !important;
}
/* ---- Pearl taşları ---- */
button.variant-swatch.round[title="Peach Pearl"]{
background-image:url("/i/variants/gems/pearl-peach.png") !important;
background-size:cover !important;
background-position:center center !important;
}
button.variant-swatch.round[title="Grey Pearl"]{
background-image:url("/i/variants/gems/pearl-grey.png") !important;
background-size:cover !important;
background-position:center center !important;
}
button.variant-swatch.round[title="Cream Pearl"]{
background-image:url("/i/variants/gems/pearl-cream.png") !important;
background-size:cover !important;
background-position:center center !important;
}
/* DİKKAT: White Pearl ile White tamamen farklı! */
button.variant-swatch.round[title="White Pearl"]{
background-image:url("/i/variants/gems/pearl-white.png") !important;
background-size:cover !important;
background-position:center center !important;
}
/* ---- DiÄŸer taÅŸlar ---- */
button.variant-swatch.round[title="Peridot"]{
background-image:url("/i/variants/gems/peridot.png") !important;
background-size:cover !important;
background-position:center center !important;
}
button.variant-swatch.round[title="Rainbow Crystal"]{
background-image:url("/i/variants/gems/rainbow-crystal.png") !important;
background-size:cover !important;
background-position:center center !important;
}
button.variant-swatch.round[title="Rose Pink"]{
background-image:url("/i/variants/gems/rose-pink.png") !important;
background-size:cover !important;
background-position:center center !important;
}
button.variant-swatch.round[title="Ruby Red"]{
background-image:url("/i/variants/gems/ruby-red.png") !important;
background-size:cover !important;
background-position:center center !important;
}
button.variant-swatch.round[title="Sapphire Blue"]{
background-image:url("/i/variants/gems/sapphire-blue.png") !important;
background-size:cover !important;
background-position:center center !important;
}
button.variant-swatch.round[title="Tiger Eye"]{
background-image:url("/i/variants/gems/tiger-eye.png") !important;
background-size:cover !important;
background-position:center center !important;
}
button.variant-swatch.round[title="Turquoise"]{
background-image:url("/i/variants/gems/turquoise.png") !important;
background-size:cover !important;
background-position:center center !important;
}
/* Mystic Topaz */
button.variant-swatch.round[title="Mystic Topaz"]{
background-image:url("/i/variants/gems/mystic-topaz.png") !important;
background-size:cover !important;
background-position:center center !important;
}
/* Sade White taşı (pearl olmayan) */
button.variant-swatch.round[title="White"]{
background-image:url("/i/variants/gems/white.png") !important;
background-size:cover !important;
background-position:center center !important;
}
/* Colored (eklenen yeni taÅŸ) */
button.variant-swatch.round[title="Colored"]{
background-image:url("/i/variants/gems/colored.png") !important;
background-size:cover !important;
background-position:center center !important;
}
/* =========================================
CART SAYFASI – GEM ICON (var-icon)
========================================= */
/* Ortak gem ikon stili (title olanlar) */
.cart-col.col-gem .var-icon[title]{
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-color: transparent !important; /* griyi bastır */
}
/* Amethyst */
.cart-col.col-gem .var-icon[title="Amethyst"]{
background-image:url("/i/variants/gems/amethyst-purple.png") !important;
}
/* Aquamarine */
.cart-col.col-gem .var-icon[title="Aquamarine"]{
background-image:url("/i/variants/gems/aquamarine.png") !important;
}
/* Agate Red */
.cart-col.col-gem .var-icon[title="Agate Red"]{
background-image:url("/i/variants/gems/agate-red.png") !important;
}
/* Black */
.cart-col.col-gem .var-icon[title="Black"]{
background-image:url("/i/variants/gems/black.png") !important;
}
/* Champagne */
.cart-col.col-gem .var-icon[title="Champagne"]{
background-image:url("/i/variants/gems/champagne.png") !important;
}
/* Citrine Yellow */
.cart-col.col-gem .var-icon[title="Citrine Yellow"]{
background-image:url("/i/variants/gems/citrine-yellow.png") !important;
}
/* Crackle Turquoise */
.cart-col.col-gem .var-icon[title="Crackle Turquoise"]{
background-image:url("/i/variants/gems/crackle-turquoise.png") !important;
}
/* Emerald Green */
.cart-col.col-gem .var-icon[title="Emerald Green"]{
background-image:url("/i/variants/gems/emerald-green.png") !important;
}
/* Garnet */
.cart-col.col-gem .var-icon[title="Garnet"]{
background-image:url("/i/variants/gems/garnet.png") !important;
}
/* Green Teardrop Cabochon */
.cart-col.col-gem .var-icon[title="Green Teardrop Cabochon"]{
background-image:url("/i/variants/gems/green-teardrop-cabochon.png") !important;
}
/* --- Pearl taşları --- */
.cart-col.col-gem .var-icon[title="Peach Pearl"]{
background-image:url("/i/variants/gems/pearl-peach.png") !important;
}
.cart-col.col-gem .var-icon[title="Grey Pearl"],
.cart-col.col-gem .var-icon[title="Gray Pearl"]{
background-image:url("/i/variants/gems/pearl-grey.png") !important;
}
.cart-col.col-gem .var-icon[title="Cream Pearl"]{
background-image:url("/i/variants/gems/pearl-cream.png") !important;
}
.cart-col.col-gem .var-icon[title="White Pearl"]{
background-image:url("/i/variants/gems/pearl-white.png") !important;
}
/* DiÄŸer taÅŸlar */
.cart-col.col-gem .var-icon[title="Peridot"]{
background-image:url("/i/variants/gems/peridot.png") !important;
}
.cart-col.col-gem .var-icon[title="Rainbow Crystal"]{
background-image:url("/i/variants/gems/rainbow-crystal.png") !important;
}
.cart-col.col-gem .var-icon[title="Rose Pink"]{
background-image:url("/i/variants/gems/rose-pink.png") !important;
}
.cart-col.col-gem .var-icon[title="Ruby Red"]{
background-image:url("/i/variants/gems/ruby-red.png") !important;
}
.cart-col.col-gem .var-icon[title="Sapphire Blue"]{
background-image:url("/i/variants/gems/sapphire-blue.png") !important;
}
/* 🔥 TIGER EYE – asıl derdimiz bu :) */
.cart-col.col-gem .var-icon[title="Tiger Eye"],
.cart-col.col-gem .var-icon[title="Tiger eye"],
.cart-col.col-gem .var-icon[title="TIGER EYE"]{
background-image:url("/i/variants/gems/tiger-eye.png") !important;
}
/* Turquoise */
.cart-col.col-gem .var-icon[title="Turquoise"]{
background-image:url("/i/variants/gems/turquoise.png") !important;
}
/* Mystic Topaz */
.cart-col.col-gem .var-icon[title="Mystic Topaz"]{
background-image:url("/i/variants/gems/mystic-topaz.png") !important;
}
/* Colored */
.cart-col.col-gem .var-icon[title="Colored"]{
background-image:url("/i/variants/gems/colored.png") !important;
}
/* Sade White (pearl olmayan) */
.cart-col.col-gem .var-icon[title="White"]{
background-image:url("/i/variants/gems/white.png") !important;
}
/* ==========================================
PRODUCT BOX HOVER STICKER (EXPLORE)
SaÄŸdan sola kayan etiket
========================================== */
/* Resim kutusu */
[class*="cat-detail-products-box-img"] {
position: relative;
overflow: hidden;
}
/* Resim – hafif zoom için */
[class*="cat-detail-products-box-img"] img {
display: block;
width: 100%;
transition: transform .35s ease;
}
/* SaÄŸdan sola kayan sticker */
[class*="cat-detail-products-box-img"]::before {
content: "EXPLORE";
position: absolute;
bottom: 18px; /* alta olan mesafe */
right: 0; /* sağdan çıksın */
height: 32px;
line-height: 32px;
padding: 0 26px;
background: rgba(0, 0, 0, .85);
color: #fff;
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
border-radius: 16px 0 0 16px; /* soldan yuvarlak sticker efekti */
box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
transform: translateX(120%); /* başlangıçta dışarıda */
opacity: 0;
transition: transform .25s ease, opacity .25s ease;
z-index: 2;
pointer-events: none; /* tıklama yine ürüne gitsin */
}
/* Hover olunca sticker içeri girsin */
[class*="cat-detail-products-box-img"]:hover::before {
transform: translateX(0);
opacity: 1;
}
/* Hover olunca resim hafif zoom yapsın (isteğe bağlı) */
[class*="cat-detail-products-box-img"]:hover img {
transform: scale(1.04);
}
/* ==========================================
Kategori ürün kutusunda "ADD TO CART" gizle
(kalp butonu kalsın)
========================================== */
/* Tüm görünüm tiplerinde: cart alanındaki button’u gizle */
[class*="cat-detail-products-box-cart"] > button {
display: none !important;
}
/* ---- Kategori sayfası: her zaman Narrow (4'lü) görünüm ---- */
/* Görünüm ikonlarını gizle (Wide / Narrow / List) */
.cat-right-elements-right-liste {
display: none !important;
}
/* Ürün kutularını 4'lü yap (Narrow tarzı) */
.cat-detail-products-box,
.cat-detail-products-box-big {
width: 25% !important; /* 4 sütun */
float: left !important;
margin: 0 0 40px 0; /* alt boÅŸluk */
}
/* List görünümüne denk gelen kutu tam genişlik kalsın (ileride lazım olursa) */
.cat-detail-products-box-list {
width: 100% !important;
}
/* Ürün başlığı tam gözüksün diye satır yüksekliğini ayarla */
.cat-detail-products-box-h a {
display: block;
line-height: 1.4;
min-height: 44px; /* 2 satır alan bırak */
overflow: hidden;
}
/* ============================
FAVORÄ° Ä°KONU YENÄ° STÄ°L
- Normalde soluk gri
- Hover'da kırmızı
- Favorideyken kalıcı kırmızı
============================ */
/* Kalp butonlarının temel görünümü (daire) */
.cat-detail-products-box-cart-1 a.product-fav-go,
.cat-detail-products-box-cart-1 a.product-fav-del,
.cat-detail-products-box-cart-2 a.product-fav-go,
.cat-detail-products-box-cart-2 a.product-fav-del,
.cat-detail-products-box-cart-1 a.compare-href,
.cat-detail-products-box-cart-2 a.compare-href{
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0 !important;
border-radius: 999px !important;
font-size: 16px;
border-width: 1px !important;
}
/* VARSAYILAN: favoride değilken – çok soluk gri */
.cat-detail-products-box-cart-1 a.product-fav-go,
.cat-detail-products-box-cart-2 a.product-fav-go,
.cat-detail-products-box-cart-1 a.compare-href,
.cat-detail-products-box-cart-2 a.compare-href{
background: #ffffff !important;
border-color: #e5e7eb !important; /* çok açık gri çerçeve */
color: #d1d5db !important; /* soluk gri kalp */
box-shadow: none !important;
}
/* HOVER: üzerine gelince kırmızı olsun */
.cat-detail-products-box-cart-1 a.product-fav-go:hover,
.cat-detail-products-box-cart-2 a.product-fav-go:hover,
.cat-detail-products-box-cart-1 a.compare-href:hover,
.cat-detail-products-box-cart-2 a.compare-href:hover{
background: #fff1f2 !important; /* açık pembe zemin */
border-color: #fecdd3 !important;
color: #e11d48 !important; /* kırmızı kalp */
box-shadow: 0 3px 8px rgba(248,113,113,0.35);
}
/* FAVORİDE (product-fav-del): kalıcı kırmızı */
.cat-detail-products-box-cart-1 a.product-fav-del,
.cat-detail-products-box-cart-2 a.product-fav-del{
background: #fee2e2 !important;
border-color: #fecaca !important;
color: #e11d48 !important;
box-shadow: 0 4px 10px rgba(248,113,113,0.45);
}
/* ============================
FAVORI IKONLARI – FINAL
============================ */
/* Ortak temel stil: küçük yuvarlak buton, çizgisiz */
.cat-detail-products-box-cart-1 a.product-fav-go,
.cat-detail-products-box-cart-1 a.product-fav-del,
.cat-detail-products-box-cart-2 a.product-fav-go,
.cat-detail-products-box-cart-2 a.product-fav-del,
.cat-detail-products-box-cart-1 a.compare-href,
.cat-detail-products-box-cart-2 a.compare-href,
.cat-detail-products-box-cart-1 a.product-fav-go i,
.cat-detail-products-box-cart-1 a.product-fav-del i,
.cat-detail-products-box-cart-2 a.product-fav-go i,
.cat-detail-products-box-cart-2 a.product-fav-del i,
.cat-detail-products-box-cart-1 a.compare-href i,
.cat-detail-products-box-cart-2 a.compare-href i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 999px;
padding: 0 !important;
margin: 0;
border: none !important; /* ÇİZGİ YOK */
background: rgba(15,23,42,0.02) !important; /* Çok hafif gri zemin */
color: #d4d4d8 !important; /* Hafif gri kalp */
box-shadow: none !important;
font-size: 16px;
line-height: 1;
transition:
background .18s ease,
color .18s ease,
box-shadow .18s ease,
transform .18s ease;
}
/* HOVER: üzerine gelince kırmızı olsun */
.cat-detail-products-box-cart-1 a.product-fav-go:hover,
.cat-detail-products-box-cart-2 a.product-fav-go:hover,
.cat-detail-products-box-cart-1 a.compare-href:hover,
.cat-detail-products-box-cart-2 a.compare-href:hover,
.cat-detail-products-box-cart-1 a.product-fav-go:hover i,
.cat-detail-products-box-cart-2 a.product-fav-go:hover i,
.cat-detail-products-box-cart-1 a.compare-href:hover i,
.cat-detail-products-box-cart-2 a.compare-href:hover i {
background: #fff1f2 !important;
color: #e11d48 !important; /* Kırmızı kalp */
box-shadow: 0 4px 10px rgba(248,113,113,.35);
transform: translateY(-1px);
}
/* FAVORIDE (product-fav-del) – kalıcı kırmızı görünüm */
.cat-detail-products-box-cart-1 a.product-fav-del,
.cat-detail-products-box-cart-2 a.product-fav-del,
.cat-detail-products-box-cart-1 a.product-fav-del i,
.cat-detail-products-box-cart-2 a.product-fav-del i {
background: #fff1f2 !important;
color: #e11d48 !important;
box-shadow: 0 4px 10px rgba(248,113,113,.45);
}
/* Favoride hover: tonu biraz koyultalım */
.cat-detail-products-box-cart-1 a.product-fav-del:hover,
.cat-detail-products-box-cart-2 a.product-fav-del:hover,
.cat-detail-products-box-cart-1 a.product-fav-del:hover i,
.cat-detail-products-box-cart-2 a.product-fav-del:hover i {
background: #fee2e2 !important;
color: #b91c1c !important;
}
/* ============================
SELECTED FILTERS PANELİ – GÖRSEL DÜZEN
============================ */
/* Panel arka planı ve kenar çizgisi */
.filter-panel{
background:#f9fafb !important;
border-right:1px solid #e5e7eb !important;
}
/* Üst başlık alanı */
.filter-panel-header{
padding:18px 22px 14px !important;
background:#ffffff !important;
border-bottom:1px solid #e5e7eb !important;
display:flex;
align-items:center;
justify-content:space-between;
}
/* "Selected Filters" başlığı + ikon */
.filter-panel-title{
display:flex;
align-items:center;
gap:10px;
font-size:13px;
font-weight:600;
letter-spacing:.16em;
text-transform:uppercase;
color:#111827;
}
.filter-panel-title i{
width:26px;
height:26px;
border-radius:999px;
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
background:var(--accent, #e11d48);
color:#ffffff;
}
/* Kapatma butonu (X) */
.filter-panel-close{
width:30px;
height:30px;
border-radius:999px;
border:1px solid #e5e7eb !important;
background:#f3f4f6 !important;
color:#6b7280 !important;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:background .18s ease, color .18s ease, box-shadow .18s ease;
}
.filter-panel-close:hover{
background:#e5e7eb !important;
color:#111827 !important;
box-shadow:0 6px 18px rgba(15,23,42,.16);
}
/* Gövde alanı */
.filter-panel-body{
padding:16px 0 18px !important;
}
/* Her bölüm kutusu (Subcategories, Only vs.) */
.filter-panel-body .cat-left-main{
border:none !important;
padding:0 !important;
background:transparent !important;
}
.filter-panel-body .cat-left-box-main{
padding:12px 22px 14px !important;
border-bottom:1px solid #e5e7eb !important;
}
.filter-panel-body .cat-left-box-main:last-child{
border-bottom:none !important;
}
/* Bölüm başlıkları (Subcategories, Only) */
.filter-panel-body .cat-left-box-h{
padding:0 0 6px 0 !important;
margin:0 0 4px 0 !important;
font-size:11px;
font-weight:700;
letter-spacing:.18em;
text-transform:uppercase;
color:#9ca3af;
border:none !important;
}
/* Alt kategori linkleri */
.filter-panel-body .category-sub-design-box a{
display:block;
padding:6px 0;
font-size:13px;
color:#111827;
text-decoration:none;
border-left:3px solid transparent;
transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.filter-panel-body .category-sub-design-box a:hover{
background:#eef2ff;
color:var(--accent, #e11d48);
border-color:var(--accent, #e11d48);
}
/* Checkbox satırları (Only kısmı vb.) */
.filter-panel-body .custom-control{
margin:6px 0;
}
.filter-panel-body .custom-control-label{
font-size:13px;
color:#111827;
cursor:pointer;
}
/* Checkbox kutusunun kendisi */
.filter-panel-body .custom-control-label::before{
border-radius:4px;
border:1px solid #cbd5e1;
}
.filter-panel-body .custom-control-input:checked ~ .custom-control-label::before{
background:var(--accent, #e11d48) !important;
border-color:var(--accent, #e11d48) !important;
}
.filter-panel-body .custom-control-input:checked ~ .custom-control-label::after{
background-image:none;
box-shadow:inset 0 0 0 2px #ffffff;
}
/* Panel içi küçük açıklama/alt metinler için daha soluk renk */
.filter-panel-body small,
.filter-panel-body .filter-subtitle{
font-size:11px;
color:#9ca3af;
}
.cart-min-disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* =========================================================
Product Card Enhancements (Sade V3 - Düzenli)
- Weight pill LEFT, expands to RIGHT
- Favorite icon placed UNDER the weight pill (same column)
- Text blocks aligned (title clamp + steady spacing)
Paste to END of style.css (replace previous Sade blocks)
========================================================= */
:root{
--sku-text: #9aa3b2;
/* badge geometry */
--badge-x: 14px;
--badge-y: 14px;
--badge-gap: 10px;
/* weight pill */
--pill-h: 30px;
--pill-bg: rgba(0,0,0,.06);
--pill-bg-hover: rgba(0,0,0,.72);
--pill-border: 1px solid rgba(0,0,0,.08);
--pill-fg: rgba(0,0,0,.55);
--pill-fg-hover: #fff;
/* favorite button */
--fav-size: 30px;
--fav-bg: rgba(0,0,0,.04);
--fav-bg-hover: rgba(0,0,0,.72);
--fav-border: 1px solid rgba(0,0,0,.06);
--fav-fg: rgba(0,0,0,.40);
--fav-fg-hover: #fff;
}
/* Card relative: absolute children anchor point */
.cat-detail-products-box,
.cat-detail-products-box-big,
.cat-detail-products-box-list{
position: relative;
}
/* wrapper relative */
.cat-detail-products-box-img,
.cat-detail-products-box-img-big,
.cat-detail-products-box-img-list{
position: relative;
}
/* ---------------- SKU (lighter + calmer) ---------------- */
.product-sku{
margin-top: 4px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 11px;
line-height: 1.2;
letter-spacing: .15px;
color: var(--sku-text);
user-select: text;
word-break: break-word;
}
.product-sku .sku-label{ font-weight: 500; opacity: .65; }
.product-sku .sku-value{ font-weight: 500; opacity: .95; }
.cat-detail-products-box-info-list .product-sku{ justify-content: flex-start; }
/* ---------------- Title clamp (daha nizami hizalama) ---------------- */
/* Grid/Big */
.cat-detail-products-box-info .cat-detail-products-box-h a{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4; /* satır sayısını sabitle */
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.35;
min-height: calc(1.35em * 4); /* SKU/lock satırını hizalar */
}
/* List */
.cat-detail-products-box-info-list .cat-detail-products-box-h a{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.35;
min-height: calc(1.35em * 2);
}
/* Lock line (Price Visible to Members) daha düzenli dursun */
.urun-box-special-area,
.urun-box-special-area-list{
margin-top: 6px;
font-size: 11px;
line-height: 1.2;
opacity: .75;
text-align: center;
}
.cat-detail-products-box-info-list + .urun-box-special-area-list{ text-align:left; }
/* ---------------- Weight pill (LEFT, expands RIGHT) ---------------- */
.product-weight-pill{
position: absolute;
top: var(--badge-y);
left: var(--badge-x);
right: auto;
height: var(--pill-h);
min-width: var(--pill-h);
max-width: var(--pill-h);
border-radius: 999px;
background: var(--pill-bg);
border: var(--pill-border);
color: var(--pill-fg);
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0; /* kapalıyken tam simetri */
gap: 0;
overflow: hidden;
z-index: 7;
transition:
max-width .24s ease,
padding .24s ease,
background .18s ease,
border-color .18s ease,
color .18s ease,
opacity .18s ease;
}
/* icon */
.product-weight-pill .pill-icon{
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
line-height: 1;
opacity: .9;
}
.product-weight-pill .pill-icon i{ line-height: 1; }
/* text (closed hidden) */
.product-weight-pill .pill-text{
white-space: nowrap;
font-size: 11px;
letter-spacing: .2px;
max-width: 0;
opacity: 0;
overflow: hidden;
transform: translateX(6px);
transition:
max-width .24s ease,
opacity .14s ease,
transform .24s ease;
}
/* desktop: pill daha soluk (kalabalığı azalt) */
@media (hover: hover) and (pointer: fine){
.product-weight-pill{ opacity: .35; }
.cat-detail-products-box:hover .product-weight-pill,
.cat-detail-products-box-big:hover .product-weight-pill,
.cat-detail-products-box-list:hover .product-weight-pill,
.product-weight-pill:hover{ opacity: 1; }
}
/* hover/focus: SAÄA açılır + koyulaşır */
.cat-detail-products-box:hover .product-weight-pill,
.cat-detail-products-box-big:hover .product-weight-pill,
.cat-detail-products-box-list:hover .product-weight-pill,
.product-weight-pill:hover{
max-width: 160px;
padding: 0 10px;
justify-content: flex-start;
flex-direction: row; /* ikon solda, yazı sağda (sağa açılır) */
gap: 7px;
background: var(--pill-bg-hover);
border-color: rgba(0,0,0,0);
color: var(--pill-fg-hover);
}
.cat-detail-products-box:hover .product-weight-pill .pill-text,
.cat-detail-products-box-big:hover .product-weight-pill .pill-text,
.cat-detail-products-box-list:hover .product-weight-pill .pill-text,
.product-weight-pill:hover .pill-text{
max-width: 120px;
opacity: 1;
transform: translateX(0);
}
/* ---------------- FAVORITE: terazinin ALTINA sabitle ---------------- */
/* Logged-in (product-fav-*) + Guest (loginModal) kalp */
.cat-detail-products-box a.product-fav-go,
.cat-detail-products-box a.product-fav-del,
.cat-detail-products-box-big a.product-fav-go,
.cat-detail-products-box-big a.product-fav-del,
.cat-detail-products-box-list a.product-fav-go,
.cat-detail-products-box-list a.product-fav-del,
.cat-detail-products-box a[data-target="#loginModal"],
.cat-detail-products-box-big a[data-target="#loginModal"],
.cat-detail-products-box-list a[data-target="#loginModal"]{
position: absolute !important;
/* SAME COLUMN under the pill */
top: calc(var(--badge-y) + var(--pill-h) + var(--badge-gap)) !important;
left: var(--badge-x) !important;
right: auto !important;
bottom: auto !important;
width: var(--fav-size);
height: var(--fav-size);
border-radius: 999px;
display: inline-flex !important;
align-items: center;
justify-content: center;
background: var(--fav-bg);
border: var(--fav-border);
color: var(--fav-fg);
box-shadow: none;
z-index: 6;
transition: background .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
}
/* kalp ikon boyutu */
.cat-detail-products-box a.product-fav-go i,
.cat-detail-products-box a.product-fav-del i,
.cat-detail-products-box-big a.product-fav-go i,
.cat-detail-products-box-big a.product-fav-del i,
.cat-detail-products-box-list a.product-fav-go i,
.cat-detail-products-box-list a.product-fav-del i,
.cat-detail-products-box a[data-target="#loginModal"] i,
.cat-detail-products-box-big a[data-target="#loginModal"] i,
.cat-detail-products-box-list a[data-target="#loginModal"] i{
font-size: 14px;
line-height: 1;
}
/* desktop: favori de hafif soluk, hover'da belirgin */
@media (hover: hover) and (pointer: fine){
.cat-detail-products-box a.product-fav-go,
.cat-detail-products-box a.product-fav-del,
.cat-detail-products-box-big a.product-fav-go,
.cat-detail-products-box-big a.product-fav-del,
.cat-detail-products-box-list a.product-fav-go,
.cat-detail-products-box-list a.product-fav-del,
.cat-detail-products-box a[data-target="#loginModal"],
.cat-detail-products-box-big a[data-target="#loginModal"],
.cat-detail-products-box-list a[data-target="#loginModal"]{
opacity: .35;
}
.cat-detail-products-box:hover a.product-fav-go,
.cat-detail-products-box:hover a.product-fav-del,
.cat-detail-products-box-big:hover a.product-fav-go,
.cat-detail-products-box-big:hover a.product-fav-del,
.cat-detail-products-box-list:hover a.product-fav-go,
.cat-detail-products-box-list:hover a.product-fav-del,
.cat-detail-products-box:hover a[data-target="#loginModal"],
.cat-detail-products-box-big:hover a[data-target="#loginModal"],
.cat-detail-products-box-list:hover a[data-target="#loginModal"]{
opacity: 1;
}
}
/* hover: favori koyulaşsın */
.cat-detail-products-box a.product-fav-go:hover,
.cat-detail-products-box a.product-fav-del:hover,
.cat-detail-products-box-big a.product-fav-go:hover,
.cat-detail-products-box-big a.product-fav-del:hover,
.cat-detail-products-box-list a.product-fav-go:hover,
.cat-detail-products-box-list a.product-fav-del:hover,
.cat-detail-products-box a[data-target="#loginModal"]:hover,
.cat-detail-products-box-big a[data-target="#loginModal"]:hover,
.cat-detail-products-box-list a[data-target="#loginModal"]:hover{
background: var(--fav-bg-hover);
border-color: rgba(0,0,0,0);
color: var(--fav-fg-hover);
opacity: 1;
}
/* mobile: hover yok -> daha okunur */
@media (hover: none) and (pointer: coarse){
.product-weight-pill{ opacity: .75; }
.product-weight-pill{
max-width: 160px;
padding: 0 10px;
justify-content: flex-start;
flex-direction: row;
gap: 7px;
background: rgba(0,0,0,.55);
border-color: rgba(0,0,0,0);
color: #fff;
}
.product-weight-pill .pill-text{
max-width: 120px;
opacity: 1;
transform: translateX(0);
}
.cat-detail-products-box a.product-fav-go,
.cat-detail-products-box a.product-fav-del,
.cat-detail-products-box-big a.product-fav-go,
.cat-detail-products-box-big a.product-fav-del,
.cat-detail-products-box-list a.product-fav-go,
.cat-detail-products-box-list a.product-fav-del,
.cat-detail-products-box a[data-target="#loginModal"],
.cat-detail-products-box-big a[data-target="#loginModal"],
.cat-detail-products-box-list a[data-target="#loginModal"]{
opacity: .85;
background: rgba(0,0,0,.22);
border-color: rgba(0,0,0,.06);
color: rgba(0,0,0,.55);
}
}
@media (max-width: 768px){
:root{
--badge-x: 10px;
--badge-y: 10px;
--pill-h: 28px;
--fav-size: 28px;
--badge-gap: 8px;
}
}
/* =========================================================
Collections Page Panel — UX Pro Theme (Scoped)
Targets: collectionspage_panel.php existing structure
========================================================= */
.cpg-panel{
--bg: #f6f7fb;
--card: rgba(255,255,255,.92);
--text: #0f172a;
--muted: #64748b;
--line: rgba(15, 23, 42, .10);
--line2: rgba(15, 23, 42, .14);
--primary: #0b1220;
--primary2:#111827;
--ok: #16a34a;
--okBg: rgba(22,163,74,.10);
--err:#dc2626;
--errBg: rgba(220,38,38,.10);
--shadow: 0 1px 0 rgba(0,0,0,.03), 0 12px 34px rgba(15,23,42,.10);
--shadowSoft: 0 1px 0 rgba(0,0,0,.02), 0 10px 26px rgba(15,23,42,.08);
--r: 16px;
--r2: 12px;
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
max-width: 1240px;
margin: 18px auto;
padding: 0 16px 26px;
color: var(--text);
}
/* Soft background (only when panel exists) */
.cpg-panel::before{
content:"";
position: fixed;
inset: 0;
z-index: -1;
background:
radial-gradient(1200px 600px at 20% -10%, rgba(59,130,246,.12), transparent 55%),
radial-gradient(900px 520px at 92% 10%, rgba(16,185,129,.10), transparent 60%),
radial-gradient(900px 600px at 50% 110%, rgba(139,92,246,.10), transparent 55%),
var(--bg);
}
/* ---------------------------------------------------------
Header / Top actions
--------------------------------------------------------- */
.cpg-header{
position: sticky;
top: 0;
z-index: 5;
padding: 12px 0 10px;
background: linear-gradient(to bottom, rgba(246,247,251,.92), rgba(246,247,251,.55), rgba(246,247,251,0));
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display:flex;
align-items:flex-start;
justify-content:space-between;
gap: 14px;
}
.cpg-title{
margin:0;
font-size: 22px;
letter-spacing: -0.02em;
line-height: 1.15;
}
.cpg-sub{
margin-top: 6px;
font-size: 12px;
color: var(--muted);
}
.cpg-sub code{
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size: 12px;
background: rgba(2,6,23,.06);
border: 1px solid rgba(2,6,23,.10);
padding: 2px 6px;
border-radius: 10px;
}
.cpg-actions{
display:flex;
gap: 10px;
flex-wrap:wrap;
align-items:center;
justify-content:flex-end;
}
/* Buttons */
.cpg-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap: 8px;
padding: 10px 14px;
border-radius: 999px;
border: 1px solid var(--line2);
background: rgba(255,255,255,.78);
color: var(--text);
text-decoration:none;
font-size: 13px;
font-weight: 700;
line-height: 1;
cursor:pointer;
box-shadow: 0 1px 0 rgba(0,0,0,.02);
transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.cpg-btn:hover{
background: rgba(255,255,255,.96);
border-color: rgba(15,23,42,.22);
box-shadow: var(--shadowSoft);
transform: translateY(-1px);
}
.cpg-btn:active{
transform: translateY(0);
box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.cpg-btn.primary{
background: linear-gradient(180deg, var(--primary2), var(--primary));
border-color: rgba(255,255,255,.18);
color:#fff;
box-shadow: 0 12px 26px rgba(17,24,39,.22);
}
.cpg-btn.primary:hover{ box-shadow: 0 16px 32px rgba(17,24,39,.28); }
.cpg-btn.danger{
background: linear-gradient(180deg, #dc2626, #b91c1c);
border-color: rgba(255,255,255,.20);
color:#fff;
box-shadow: 0 12px 26px rgba(220,38,38,.18);
}
.cpg-btn.danger:hover{ box-shadow: 0 16px 32px rgba(220,38,38,.25); }
/* ---------------------------------------------------------
Tabs (segmented feel + sticky)
--------------------------------------------------------- */
.cpg-tabs{
position: sticky;
top: 66px; /* header yüksekliğine göre */
z-index: 4;
display:flex;
gap: 8px;
flex-wrap:wrap;
padding: 10px 0 8px;
background: linear-gradient(to bottom, rgba(246,247,251,.92), rgba(246,247,251,.55), rgba(246,247,251,0));
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.cpg-tab{
display:inline-flex;
align-items:center;
justify-content:center;
padding: 9px 14px;
border-radius: 999px;
border: 1px solid var(--line2);
background: rgba(255,255,255,.75);
color: var(--text);
text-decoration:none;
font-size: 13px;
font-weight: 800;
letter-spacing: .02em;
transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.cpg-tab:hover{
background: rgba(255,255,255,.96);
border-color: rgba(15,23,42,.22);
box-shadow: var(--shadowSoft);
transform: translateY(-1px);
}
.cpg-tab.active{
background: linear-gradient(180deg, var(--primary2), var(--primary));
color: #fff;
border-color: rgba(255,255,255,.16);
box-shadow: 0 10px 22px rgba(17,24,39,.22);
}
/* ---------------------------------------------------------
Cards / layout
--------------------------------------------------------- */
.cpg-card{
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r);
padding: 16px;
margin: 12px 0;
box-shadow: var(--shadow);
}
.cpg-grid{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.cpg-grid-1{
display:grid;
grid-template-columns: 1fr;
gap: 12px;
}
@media (max-width: 920px){
.cpg-header{ flex-direction: column; align-items:flex-start; }
.cpg-actions{ justify-content:flex-start; }
.cpg-grid{ grid-template-columns: 1fr; }
.cpg-tabs{ top: 120px; }
}
/* HR */
.cpg-hr{
height: 1px;
background: var(--line);
margin: 16px 0;
}
/* ---------------------------------------------------------
Inputs
--------------------------------------------------------- */
.cpg-field label{
display:block;
font-size: 12px;
font-weight: 800;
color: rgba(15,23,42,.86);
margin: 0 0 7px;
}
.cpg-input,.cpg-text{
width:100%;
box-sizing:border-box;
border: 1px solid var(--line2);
border-radius: var(--r2);
padding: 11px 12px;
font-size: 13px;
background: rgba(255,255,255,.96);
color: var(--text);
outline: none;
transition: box-shadow .12s ease, border-color .12s ease;
}
.cpg-text{
min-height: 130px;
resize: vertical;
line-height: 1.45;
}
.cpg-input:focus,.cpg-text:focus{
border-color: rgba(59,130,246,.55);
box-shadow: 0 0 0 4px rgba(59,130,246,.14);
}
.cpg-mini{
margin-top: 7px;
font-size: 11px;
color: var(--muted);
}
/* ---------------------------------------------------------
Flash messages (more readable)
--------------------------------------------------------- */
.cpg-flash{
border-radius: var(--r);
padding: 12px 12px;
margin: 10px 0 14px;
border: 1px solid var(--line);
background: rgba(255,255,255,.80);
font-size: 13px;
font-weight: 700;
box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.cpg-flash.ok{
border-color: rgba(22,163,74,.30);
background: var(--okBg);
color: #14532d;
}
.cpg-flash.error{
border-color: rgba(220,38,38,.30);
background: var(--errBg);
color: #7f1d1d;
}
/* ---------------------------------------------------------
Sections list item (drag-friendly + nicer)
--------------------------------------------------------- */
.cpg-section-item{
position: relative;
border: 1px solid var(--line);
border-radius: var(--r);
padding: 12px;
background: rgba(255,255,255,.96);
box-shadow: 0 1px 0 rgba(0,0,0,.02);
margin-bottom: 12px;
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.cpg-section-item:hover{
border-color: rgba(15,23,42,.16);
box-shadow: var(--shadowSoft);
transform: translateY(-1px);
}
/* subtle left stripe */
.cpg-section-item::before{
content:"";
position:absolute;
left: 0;
top: 10px;
bottom: 10px;
width: 4px;
border-radius: 999px;
background: rgba(15,23,42,.18);
}
.cpg-section-head{
display:flex;
gap: 10px;
align-items:center;
justify-content:space-between;
}
.cpg-row{
display:flex;
gap: 10px;
flex-wrap:wrap;
align-items:center;
}
.cpg-section-title{
margin: 0;
font-size: 14px;
font-weight: 900;
letter-spacing: -0.01em;
}
/* Drag handle */
.cpg-handle{
cursor: grab;
user-select:none;
font-size: 12px;
font-weight: 900;
color: rgba(15,23,42,.70);
padding: 7px 10px;
border: 1px dashed rgba(15,23,42,.22);
border-radius: 999px;
background: rgba(255,255,255,.85);
}
.cpg-section-item:active .cpg-handle{ cursor: grabbing; }
/* badges */
.cpg-badges{ display:flex; gap: 8px; align-items:center; flex-wrap:wrap; }
.cpg-badge{
font-size: 11px;
font-weight: 800;
padding: 5px 10px;
border: 1px solid rgba(15,23,42,.10);
border-radius: 999px;
background: rgba(15,23,42,.04);
color: rgba(15,23,42,.78);
}
/* toggles */
.cpg-toggle{
display:flex;
gap: 12px;
align-items:center;
white-space: nowrap;
}
.cpg-toggle input[type="checkbox"]{
width: 16px;
height: 16px;
accent-color: #111827;
}
/* ---------------------------------------------------------
Details accordion (clean + arrow)
--------------------------------------------------------- */
.cpg-acc{
margin-top: 12px;
border-top: 1px solid rgba(15,23,42,.08);
padding-top: 10px;
}
.cpg-acc summary{
cursor:pointer;
font-size: 13px;
font-weight: 900;
color: rgba(15,23,42,.90);
list-style: none;
display:flex;
align-items:center;
gap: 10px;
}
.cpg-acc summary::-webkit-details-marker{ display:none; }
.cpg-acc summary::before{
content:"â–¸";
display:inline-block;
opacity:.8;
transform: translateY(-1px);
transition: transform .12s ease;
}
.cpg-acc[open] summary::before{
transform: rotate(90deg) translateY(-1px);
}
/* ---------------------------------------------------------
Image preview + file inputs
--------------------------------------------------------- */
.cpg-preview{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 10px; }
.cpg-thumb{
width: 140px;
height: 96px;
border: 1px solid rgba(15,23,42,.10);
border-radius: 14px;
overflow:hidden;
background: rgba(15,23,42,.04);
display:flex;
align-items:center;
justify-content:center;
box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.cpg-thumb img{ width:100%; height:100%; object-fit: cover; display:block; }
.cpg-file{
display:flex;
gap: 10px;
align-items:center;
flex-wrap:wrap;
}
.cpg-file input[type="file"]{
font-size: 12px;
max-width: 100%;
}
.cpg-file input[type="file"]::file-selector-button{
margin-right: 10px;
border: 1px solid rgba(15,23,42,.14);
background: rgba(255,255,255,.90);
padding: 8px 10px;
border-radius: 999px;
font-weight: 800;
cursor:pointer;
transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.cpg-file input[type="file"]::file-selector-button:hover{
background: rgba(255,255,255,1);
border-color: rgba(15,23,42,.22);
transform: translateY(-1px);
}
/* ---------------------------------------------------------
Mobile polish
--------------------------------------------------------- */
@media (max-width: 520px){
.cpg-btn{ width: 100%; justify-content:center; }
.cpg-tab{ flex: 1 1 auto; justify-content:center; }
.cpg-thumb{ width: 100%; height: 140px; }
}
/* Print safety */
@media print{
.cpg-panel::before{ display:none; }
.cpg-btn,.cpg-tabs{ display:none !important; }
.cpg-card{ box-shadow:none !important; background:#fff !important; }
}
/* =========================================================
PRODUCT LISTING — Pro Grid + Typography (Guaranteed Apply)
- Daha geniÅŸ kart (desktop 5 kolon) + ferah boÅŸluklar
- Başlık 3 satır (nizami) + daha rahat line-height
- SKU + Price Visible satırları düzenli, okunaklı
NOT: Bu blok özellikle !important + yüksek seçicilikle yazıldı
========================================================= */
:root{
--ts-title-fs: 14px;
--ts-title-lh: 1.55;
--ts-meta-fs: 11px;
--ts-meta-lh: 1.25;
--ts-muted: #94a3b8;
--ts-muted2:#a8b3c2;
--ts-text: #0f172a;
}
/* Her ihtimale karşı box sizing */
body .cat-detail-products,
body .cat-detail-products *{
box-sizing: border-box;
}
/* -------- GRID: Flex override (tema grid/float kullansa da çalışsın) -------- */
body .cat-detail-products{
display: flex !important;
flex-wrap: wrap !important;
align-items: stretch !important;
justify-content: flex-start !important;
column-gap: 34px !important;
row-gap: 52px !important;
/* bazı temalarda padding/margin ile sıkıştırıyor */
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Kartlar float ise iptal */
body .cat-detail-products .cat-detail-products-box,
body .cat-detail-products .cat-detail-products-box-big,
body .cat-detail-products .cat-detail-products-box-list{
float: none !important;
margin: 0 !important;
}
/* Desktop: 5 kolon */
@media (min-width: 1200px){
body .cat-detail-products .cat-detail-products-box,
body .cat-detail-products .cat-detail-products-box-big{
width: calc(20% - 28px) !important;
max-width: calc(20% - 28px) !important;
flex: 0 0 calc(20% - 28px) !important;
}
}
/* Laptop: 4 kolon */
@media (min-width: 992px) and (max-width: 1199.98px){
body .cat-detail-products{
column-gap: 28px !important;
row-gap: 46px !important;
}
body .cat-detail-products .cat-detail-products-box,
body .cat-detail-products .cat-detail-products-box-big{
width: calc(25% - 21px) !important;
max-width: calc(25% - 21px) !important;
flex: 0 0 calc(25% - 21px) !important;
}
}
/* Tablet: 3 kolon */
@media (min-width: 768px) and (max-width: 991.98px){
body .cat-detail-products{
column-gap: 22px !important;
row-gap: 40px !important;
}
body .cat-detail-products .cat-detail-products-box,
body .cat-detail-products .cat-detail-products-box-big{
width: calc(33.333% - 15px) !important;
max-width: calc(33.333% - 15px) !important;
flex: 0 0 calc(33.333% - 15px) !important;
}
}
/* Mobil büyük: 2 kolon */
@media (min-width: 520px) and (max-width: 767.98px){
body .cat-detail-products{
column-gap: 16px !important;
row-gap: 32px !important;
}
body .cat-detail-products .cat-detail-products-box,
body .cat-detail-products .cat-detail-products-box-big{
width: calc(50% - 8px) !important;
max-width: calc(50% - 8px) !important;
flex: 0 0 calc(50% - 8px) !important;
}
}
/* Mobil: 1 kolon */
@media (max-width: 519.98px){
body .cat-detail-products{
column-gap: 0 !important;
row-gap: 26px !important;
}
body .cat-detail-products .cat-detail-products-box,
body .cat-detail-products .cat-detail-products-box-big{
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
}
}
/* -------- TIPOGRAFI / METİN ALANI (sıkışıklığı çözer) -------- */
/* Kart alt metin alanı: nefes + hizalama */
body .cat-detail-products .cat-detail-products-box-info,
body .cat-detail-products .cat-detail-products-box-info-big{
padding-top: 14px !important;
padding-left: 6px !important;
padding-right: 6px !important;
text-align: center !important;
}
/* Başlık wrapper bazen sabit yükseklik/garip margin veriyor */
body .cat-detail-products .cat-detail-products-box-h{
margin: 0 auto !important;
padding: 0 !important;
min-height: 0 !important;
}
/* Başlık: 3 satır, daha rahat, premium */
body .cat-detail-products .cat-detail-products-box-h a{
color: var(--ts-text) !important;
text-decoration: none !important;
font-size: var(--ts-title-fs) !important;
line-height: var(--ts-title-lh) !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 3 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
/* 3 satırı “nizami†tut */
min-height: 4.65em !important; /* 1.55 * 3 */
max-width: 98% !important;
margin: 0 auto !important;
}
/* Hover: sadece hafif kalite hissi */
body .cat-detail-products .cat-detail-products-box:hover .cat-detail-products-box-h a,
body .cat-detail-products .cat-detail-products-box-big:hover .cat-detail-products-box-h a{
text-decoration: none !important;
}
/* SKU satırı: daha okunaklı + aralık */
body .cat-detail-products .product-sku{
margin-top: 10px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
font-size: var(--ts-meta-fs) !important;
line-height: var(--ts-meta-lh) !important;
letter-spacing: .15px !important;
color: var(--ts-muted2) !important;
}
body .cat-detail-products .product-sku .sku-label{
font-weight: 600 !important;
opacity: .65 !important;
}
body .cat-detail-products .product-sku .sku-value{
font-weight: 600 !important;
opacity: .95 !important;
}
/* List view align */
body .cat-detail-products-box-info-list .product-sku{
justify-content: flex-start !important;
}
/* Price Visible: satırları nefesli + hizalı */
body .cat-detail-products .cat-detail-products-box-info p,
body .cat-detail-products .cat-detail-products-box-info-big p{
margin-top: 9px !important;
margin-bottom: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
font-size: var(--ts-meta-fs) !important;
line-height: var(--ts-meta-lh) !important;
color: var(--ts-muted) !important;
opacity: .95 !important;
}
/* lock icon hizası */
body .cat-detail-products .cat-detail-products-box-info p i,
body .cat-detail-products .cat-detail-products-box-info-big p i{
font-size: 11px !important;
opacity: .85 !important;
}
/* Mobilde başlık 2 satıra düşsün (çok uzayıp aşağı itmesin) */
@media (max-width: 520px){
body .cat-detail-products .cat-detail-products-box-h a{
-webkit-line-clamp: 2 !important;
min-height: 3.10em !important; /* 1.55 * 2 */
font-size: 13px !important;
}
}
/* =========================================================
Product Title — Pro Relax (Override)
- Desktop: 4 satır (daha az "...")
- Daha iyi wrap (uzun kelime/kodlar erken kesilmesin)
Paste to END of style.css
========================================================= */
/* Desktop & Tablet: 4 satır + düzgün kırılma */
@media (min-width: 768px){
body .cat-detail-products .cat-detail-products-box-h a{
-webkit-line-clamp: 4 !important;
min-height: 6.2em !important; /* 1.55 * 4 satır */
max-width: 98% !important;
overflow-wrap: anywhere !important;
word-break: break-word !important;
hyphens: auto !important;
text-decoration: none !important;
}
/* Başlık uzayınca SKU çok aşağı kaçmasın */
body .cat-detail-products .product-sku{
margin-top: 8px !important;
}
/* Satırlar büyüyünce grid daha ferah dursun */
body .cat-detail-products{
row-gap: 56px !important;
}
}
/* Mobil: 2 satır kalsın (ekran dar, çok uzamasın) */
@media (max-width: 520px){
body .cat-detail-products .cat-detail-products-box-h a{
-webkit-line-clamp: 2 !important;
min-height: 3.10em !important; /* 1.55 * 2 */
overflow-wrap: anywhere !important;
word-break: break-word !important;
}
}
/* =========================================================
Product Meta PRO (Title + SKU + Price)
- Title: daha rahat (desktop 4 satır), daha az "..."
- Price: premium hiyerarÅŸi + tabular numbers
- "Price Visible to Members": daha sakin
Paste to END of style.css
========================================================= */
:root{
--pc-title-size: 14px;
--pc-title-lh: 1.58;
--pc-title-lines-desktop: 4;
--pc-meta-size: 11px;
--pc-muted: #98a2b3;
--pc-price-size: 15px;
--pc-price-weight: 800;
--pc-price-color: #0f172a;
}
/* Kart alt metin alanı biraz nefes alsın */
.cat-detail-products-box-info,
.cat-detail-products-box-info-big{
padding-top: 12px;
}
/* ---------------- TITLE (daha az sıkışma) ---------------- */
.cat-detail-products-box-h a{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--pc-title-lines-desktop);
overflow: hidden;
text-overflow: ellipsis;
/* daha iyi kırılma */
overflow-wrap: anywhere; /* uzun tokenlarda taşma yapmasın */
word-break: normal;
hyphens: auto;
font-size: var(--pc-title-size);
line-height: var(--pc-title-lh);
font-weight: 650;
letter-spacing: -0.01em;
/* 4 satır için sabit alan (nizami görünüm) */
min-height: calc(var(--pc-title-size) * var(--pc-title-lh) * var(--pc-title-lines-desktop));
max-width: 100%;
margin: 0 auto;
}
/* Tablet/Mobile: 3 satır yeterli (çok uzamasın) */
@media (max-width: 991.98px){
.cat-detail-products-box-h a{
-webkit-line-clamp: 3;
min-height: calc(var(--pc-title-size) * var(--pc-title-lh) * 3);
}
}
/* ---------------- SKU (daha sakin) ---------------- */
.product-sku{
margin-top: 10px;
font-size: var(--pc-meta-size);
line-height: 1.25;
color: var(--pc-muted);
}
.product-sku .sku-label{ opacity: .65; font-weight: 600; }
.product-sku .sku-value{ opacity: .95; font-weight: 600; }
/* ---------------- PRICE AREA ----------------
Not: login sonrası fiyat genelde şu alanlarda çıkıyor:
- .urun-box-special-area
- .price / .amount / .urun-fiyat / .product-price
------------------------------------------------ */
.urun-box-special-area{
margin-top: 8px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
/* Fiyat için yaygın class’lar (ne gelirse yakalasın) */
.urun-box-special-area .urun-fiyat,
.urun-box-special-area .product-price,
.urun-box-special-area .price,
.urun-box-special-area .amount,
.urun-box-special-area .woocommerce-Price-amount,
.cat-detail-products-box-info .urun-fiyat,
.cat-detail-products-box-info .product-price,
.cat-detail-products-box-info .price,
.cat-detail-products-box-info .amount{
font-size: var(--pc-price-size);
font-weight: var(--pc-price-weight);
color: var(--pc-price-color);
line-height: 1.15;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums; /* rakamlar hizalı/premium */
margin: 0;
}
/* Ä°ndirim/Eski fiyat varsa */
.urun-box-special-area del,
.urun-box-special-area .old-price,
.urun-box-special-area .price-old{
font-size: 12px;
font-weight: 650;
color: var(--pc-muted);
opacity: .9;
}
/* “Price Visible to Members†satırı (kilitli) */
.cat-detail-products-box-info > p,
.cat-detail-products-box-info-big > p,
.urun-box-special-area > p{
margin: 0;
font-size: var(--pc-meta-size);
line-height: 1.25;
color: var(--pc-muted);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.cat-detail-products-box-info .fa-lock,
.cat-detail-products-box-info-big .fa-lock,
.urun-box-special-area .fa-lock{
opacity: .65;
transform: translateY(-0.5px);
}
/* List view: sola hizala */
.cat-detail-products-box-info-list .product-sku,
.cat-detail-products-box-info-list .urun-box-special-area{
align-items: flex-start;
}
.cat-detail-products-box-info-list > p{
justify-content: flex-start;
}
/* =========================================================
TS / MOBILE PRODUCT DETAIL FIX (NO SQUEEZE)
- Mobile yansıma: header_libs.php'de style.css'e ?v ekledik
- Yatay kayma: sayfa sağ/sol oynamasın
- Ürün adı: kırpma yok, taşma yok
- Ring Size: dış çerçeve yok, 2 kolon, +/- asla dışarı kaçmaz
- Plating & Gem: daha düzgün boyut ve hizalama
========================================================= */
@media screen and (max-width: 767px){
/* 0) Sağ/sol kaymayı bitir (genel emniyet) */
html, body{
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
overscroll-behavior-x: none;
}
/* taşmaya sebep olan medya öğeleri */
img, svg, video, iframe{
max-width: 100% !important;
height: auto !important;
}
/* 1) Ürün detay kapsayıcıları taşmasın */
.urun-detay-main,
.urun-detay-main-in,
.urun-detay-sol-alan,
.urun-detay-sag-alan{
width: 100% !important;
max-width: 100% !important;
}
.urun-detay-main{ overflow: visible !important; }
/* 2) Ürün adı: clamp/ellipsis kapat, uzun kelime taşırmasın */
.urun-detay-sag-alan-baslik{
display: block !important;
overflow: visible !important;
text-overflow: initial !important;
white-space: normal !important;
/* en kritik: taşmayı bitirir */
overflow-wrap: anywhere !important;
word-break: break-word !important;
}
/* 3) Ring size dış çerçeve/arka kutu varsa kaldır */
.product-detail-variant-div.ring-size-block{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 0 14px 0 !important;
}
/* Ring size container: 2 kolon */
div[id^="ring-size-swatch-"]{
width: 100% !important;
max-width: 100% !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
box-sizing: border-box !important;
}
@media (max-width: 360px){
div[id^="ring-size-swatch-"]{ grid-template-columns: 1fr !important; }
}
/* kart */
div[id^="ring-size-swatch-"] .row{
margin: 0 !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
padding: 10px !important;
border: 1px solid #eee !important;
border-radius: 14px !important;
background: #fff !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* ölçü butonu */
div[id^="ring-size-swatch-"] .swatch{
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: 36px !important;
line-height: 36px !important;
padding: 0 10px 0 32px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
border-radius: 12px !important;
border: 1px solid #eaeaea !important;
background-position: 10px center !important;
background-size: 16px 16px !important;
box-sizing: border-box !important;
}
/* qty: GRID => +/- kaçamaz */
div[id^="ring-size-swatch-"] .qty{
width: 100% !important;
min-width: 0 !important;
display: grid !important;
grid-template-columns: 36px minmax(0, 1fr) 36px !important;
gap: 8px !important;
align-items: center !important;
padding: 6px !important;
border: 1px solid #ededed !important;
border-radius: 12px !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
div[id^="ring-size-swatch-"] .qty .btn,
div[id^="ring-size-swatch-"] .qty button,
div[id^="ring-size-swatch-"] .qty a{
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
position: static !important;
float: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 10px !important;
box-sizing: border-box !important;
}
div[id^="ring-size-swatch-"] .qty input{
width: 100% !important;
min-width: 0 !important;
height: 36px !important;
border: 0 !important;
outline: 0 !important;
background: transparent !important;
text-align: center !important;
font-size: 14px !important;
font-weight: 800 !important;
margin: 0 !important;
padding: 0 !important;
}
/* 4) Plating: boyut/hizalama */
#plating-swatch{
display: flex !important;
flex-wrap: wrap !important;
gap: 12px !important;
align-items: center !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 8px 0 2px !important;
}
#plating-swatch .swatch{
width: 48px !important;
height: 48px !important;
border-radius: 14px !important;
border: 1px solid #e6e6e6 !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* 5) Gem: daha düzenli */
.product-detail-variant-div.gem-color-block .custom-control{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 8px 12px 0 0 !important;
padding: 0 !important;
}
.product-detail-variant-div.gem-color-block img{
width: 42px !important;
height: 42px !important;
border-radius: 999px !important;
display: block !important;
}
}
@media (max-width: 768px){
/* ana görsel alanında swipe hissi daha iyi */
.gc-display-container{
touch-action: pan-y;
-webkit-user-select: none;
user-select: none;
}
}
/* =========================================================
TS - MOBILE CATEGORY/LIST LEFT SHADOW FIX
(Filtre paneli gizliyken box-shadow sızmasını kaldırır)
========================================================= */
@media (max-width: 768px){
/* Filtre/yan panel olabilecek kapsayıcıların gölgesini kapat */
.filter,
.filters,
.filter-area,
.filter-panel,
.filter-sidebar,
.filters-sidebar,
.mobile-filter,
.offcanvas,
.offcanvas-filter,
.sidebar,
.sidebar-left,
.category-filter,
.collection-filter,
.shop-filter,
[id*="filter"],
[class*="filter"],
[class*="offcanvas"],
[class*="sidebar"]{
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
/* Gölge pseudo-element'ten geliyorsa */
.filter:before, .filter:after,
.filters:before, .filters:after,
.filter-area:before, .filter-area:after,
.filter-panel:before, .filter-panel:after,
.filter-sidebar:before, .filter-sidebar:after,
.filters-sidebar:before, .filters-sidebar:after,
.mobile-filter:before, .mobile-filter:after,
.offcanvas:before, .offcanvas:after,
.offcanvas-filter:before, .offcanvas-filter:after,
.sidebar:before, .sidebar:after,
[id*="filter"]:before, [id*="filter"]:after,
[class*="offcanvas"]:before, [class*="offcanvas"]:after{
box-shadow: none !important;
-webkit-box-shadow: none !important;
filter: none !important;
}
}
/* =========================================================
TS FOOTER + MOBILE ACCORDION + FIX PACK (CLEAN v4.12.0)
Paste to END of style.css (single block)
- ✅ Footer + mobile accordion
- ✅ Fixed footnav premium
- ✅ Return-to-top
- ✅ Mobile header (Cartier-like)
- ✅ TS MNAV: conflict-shield (new mobile_menu.php / mobile_menu_items.php ile çakışmasız)
========================================================= */
/* ------------------------------
GLOBAL TOKENS (only used by this pack)
------------------------------ */
:root{
/* footnav height (footer.php JS sets this) */
--ts-footnav-h: 0px;
--ts-footnav-safe: 0px;
/* footer follow-us spacing (mobile) */
--ts-followus-gap-top: 34px;
--ts-followus-pad-top: 26px;
/* (opsiyonel) */
--ts-mnav-text:#111;
--ts-mnav-line: rgba(0,0,0,.10);
}
/* =========================================================
TS CATEGORY TOOLBAR POLISH
Selected Filters + Sort by refinement
========================================================= */
.cat-right-elements.cat-filter-bar{
position: relative;
gap: 24px;
margin: 8px 0 34px !important;
padding: 4px 0 18px !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
z-index: 35;
}
.cat-right-elements.cat-filter-bar::after{
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: linear-gradient(90deg, rgba(31, 44, 68, .10), rgba(31, 44, 68, .04) 62%, rgba(31, 44, 68, 0));
}
.cat-filter-left,
.cat-filter-right{
display: flex;
align-items: center;
gap: 16px;
}
.cat-filter-left{
flex: 1 1 auto;
flex-wrap: wrap;
}
.cat-filter-right{
flex: 0 0 auto;
margin-left: auto;
justify-content: flex-end;
flex-wrap: wrap;
}
.cat-filter-sort-shell{
display: flex;
align-items: center;
gap: 14px;
}
.cat-filter-bar .cat-left-box-main{
display: flex;
}
.cat-filter-toolbar-label{
flex: 0 0 auto;
font-size: 12px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #748196;
}
.filter-open-trigger{
-webkit-appearance: none;
appearance: none;
display: inline-flex;
align-items: center;
gap: 12px;
min-height: 48px;
padding: 7px 18px 7px 12px;
border: 1px solid #d9e1ec !important;
border-radius: 999px;
background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
color: #1f2c44;
cursor: pointer;
font-size: 14px;
font-family: inherit;
font-weight: 700;
line-height: 1;
width: auto;
margin-bottom: 0;
transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease, background .22s ease;
}
.filter-open-trigger i{
width: 32px;
height: 32px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(31, 44, 68, .08), rgba(212, 175, 55, .18));
color: #223253;
font-size: 12px;
}
.filter-open-trigger__label{
white-space: nowrap;
}
.filter-open-trigger__count{
min-width: 24px;
height: 24px;
padding: 0 8px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #223253;
color: #ffffff;
font-size: 12px;
font-weight: 700;
box-shadow: 0 10px 20px rgba(34, 50, 83, .22);
}
.filter-open-trigger:hover,
.filter-open-trigger.is-active,
.filter-open-trigger:focus-visible{
border-color: #cfd8e5 !important;
box-shadow: 0 18px 34px rgba(15, 23, 42, .08);
transform: translateY(-1px);
}
.filter-open-trigger:focus-visible{
outline: none;
}
.filter-open-trigger.is-active{
background: linear-gradient(180deg, #ffffff 0%, #f3f6fb 100%);
}
.cat-right-elements-right-siralama{
width: 236px;
margin-right: 0 !important;
position: relative;
z-index: 55;
}
.cat-filter-right .nice-select,
.cat-right-elements-right-siralama .nice-select,
.cat-right-elements-right-siralama select,
.nice-select-cat-detail{
float: none !important;
display: flex;
align-items: center;
width: 100% !important;
min-height: 48px;
padding: 0 46px 0 18px !important;
border: 1px solid #d9e1ec !important;
border-radius: 999px !important;
background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%) !important;
box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
color: #223047 !important;
font-size: 14px !important;
font-weight: 600;
line-height: 1.2;
transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease, background .22s ease;
}
.cat-filter-right .nice-select:hover,
.cat-filter-right .nice-select.open,
.cat-filter-right .nice-select:focus{
border-color: #cfd8e5 !important;
box-shadow: 0 18px 34px rgba(15, 23, 42, .08);
transform: translateY(-1px);
}
.cat-filter-right .nice-select .current{
display: block;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #223047;
}
.cat-filter-right .nice-select:after{
right: 18px;
width: 8px;
height: 8px;
margin-top: -6px;
border-bottom-color: #7c8799;
border-right-color: #7c8799;
}
.cat-filter-right .nice-select .list{
left: 0 !important;
right: auto !important;
min-width: 100%;
width: 100%;
margin-top: 12px;
padding: 10px 0;
border: 1px solid #dde5ef;
border-radius: 18px;
background: #ffffff;
box-shadow: 0 24px 46px rgba(15, 23, 42, .12);
overflow: hidden;
z-index: 260;
}
.cat-filter-right .nice-select.open .list{
opacity: 1;
pointer-events: auto;
transform: scale(1) translateY(0);
}
.cat-filter-right .nice-select .option{
min-height: 44px;
line-height: 44px;
padding: 0 18px;
color: #2b374b;
font-size: 13px;
font-weight: 600;
}
.cat-filter-right .nice-select .option:hover,
.cat-filter-right .nice-select .option.focus,
.cat-filter-right .nice-select .option.selected.focus{
background: rgba(31, 44, 68, .05) !important;
color: #1f2c44;
}
.cat-filter-right .nice-select .option.selected{
background: rgba(212, 175, 55, .12);
color: #1f2c44;
font-weight: 700;
}
.cat-right-elements-right-liste{
display: flex;
align-items: center;
gap: 8px;
padding-left: 16px;
border-left: 1px solid rgba(31, 44, 68, .08);
}
.cat-right-elements-right-liste a{
width: 38px;
height: 38px;
margin-right: 0 !important;
border: 1px solid #dde5ef !important;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.cat-right-elements-right-liste a img{
max-width: 17px;
opacity: .72;
}
.cat-right-elements-right-liste a:hover{
border-color: #cfd8e5 !important;
box-shadow: 0 12px 24px rgba(15, 23, 42, .08);
transform: translateY(-1px);
}
.cat-right-elements-right-liste a[style]{
border-color: #c9d3e1 !important;
background: #ffffff !important;
box-shadow: 0 12px 24px rgba(15, 23, 42, .08);
}
@media (max-width: 991.98px){
.cat-right-elements.cat-filter-bar{
gap: 14px;
padding-bottom: 14px !important;
}
.cat-filter-left,
.cat-filter-right{
width: 100%;
}
.cat-filter-right{
justify-content: space-between;
}
.cat-filter-sort-shell{
flex: 1 1 320px;
justify-content: flex-end;
}
.cat-right-elements-right-siralama{
width: min(100%, 236px);
}
}
@media (max-width: 767.98px){
.cat-right-elements.cat-filter-bar::after{
display: none;
}
.filter-open-trigger{
width: 100%;
justify-content: space-between;
}
.cat-filter-right{
gap: 10px;
}
.cat-filter-sort-shell{
width: 100%;
justify-content: space-between;
gap: 12px;
}
.cat-right-elements-right-siralama{
width: 100%;
}
.cat-right-elements-right-liste{
width: 100%;
justify-content: flex-end;
padding-left: 0;
border-left: none;
}
}
/* =========================================================
1) TS FOOTER (Desktop + Mobile Accordion)
========================================================= */
.tsf2-footer.footer-module-main-div{
position: relative;
background: #1f2b44;
color: rgba(255,255,255,.86);
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
overflow-x: hidden !important;
overflow-y: visible !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* overlay */
.tsf2-footer .tsf2-overlay{
position: absolute;
inset: 0;
background: rgba(0,0,0,0.25);
z-index: 0;
pointer-events: none;
}
/* wrap */
.tsf2-footer .tsf2-wrap{
max-width: 1400px !important;
width: min(1400px, 94vw) !important;
margin: 0 auto !important;
padding: 44px 28px 18px !important;
position: relative;
z-index: 2;
box-sizing: border-box !important;
min-width: 0;
max-height: none !important;
overflow: visible !important;
}
/* top row */
.tsf2-footer .tsf2-top{
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 16px;
min-width: 0;
}
.tsf2-footer .tsf2-top__left{ min-height: 1px; }
.tsf2-footer .tsf2-mini-link{
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255,255,255,.72);
text-decoration: none !important;
border-bottom: 1px solid rgba(255,255,255,.24);
padding-bottom: 2px;
}
.tsf2-footer .tsf2-mini-link:hover{
color: rgba(255,255,255,.92);
border-bottom-color: rgba(255,255,255,.55);
}
.tsf2-footer .tsf2-logo img{
display: block;
width: min(320px, 56vw);
height: auto;
object-fit: contain;
filter: drop-shadow(0 14px 22px rgba(0,0,0,.25));
}
/* socials (desktop) */
.tsf2-footer .tsf2-social{
justify-self: end;
display: flex;
align-items: center;
gap: 16px;
min-width: 0;
}
.tsf2-footer .tsf2-social a{
width: 40px;
height: 40px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,.92);
text-decoration: none !important;
border: 1px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.06);
transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.tsf2-footer .tsf2-social a:hover{
transform: translateY(-1px);
background: rgba(255,255,255,.10);
border-color: rgba(255,255,255,.28);
}
.tsf2-footer .tsf2-social i{ font-size: 15px; }
/* telif */
.tsf2-footer .tsf2-telif{
margin-top: 18px;
text-align: center;
font-size: 12px;
line-height: 1.75;
color: rgba(255,255,255,.70);
}
/* links grid (desktop) */
.tsf2-footer .tsf2-cols{
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
gap: 24px 34px !important;
align-items: start !important;
justify-items: start !important;
margin-top: 26px !important;
padding-top: 6px !important;
min-width: 0;
}
/* old footer floats reset */
.tsf2-footer .footer-module-box,
.tsf2-footer .footer-4-area{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
float: none !important;
width: auto !important;
}
.tsf2-footer .footer-module-header-text{
display: block !important;
width: 100% !important;
float: none !important;
clear: both !important;
}
.tsf2-footer .footer-module-links-div{
display: flex !important;
flex-direction: column !important;
width: 100% !important;
float: none !important;
clear: both !important;
min-width: 0;
}
/* column */
.tsf2-footer .tsf2-col{
width: 100% !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
.tsf2-footer .tsf2-col__title{
margin: 0 !important;
padding: 0 !important;
line-height: 1.25 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
font-weight: 650 !important;
color: rgba(255,255,255,.92) !important;
opacity: .95 !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
word-break: break-word !important;
}
.tsf2-footer .tsf2-col__links{
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
margin: 0 !important;
padding: 0 !important;
min-width: 0;
}
.tsf2-footer .tsf2-col__links a{
display: block !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.35 !important;
opacity: .88 !important;
text-decoration: none !important;
color: rgba(255,255,255,.78) !important;
overflow-wrap: anywhere !important;
word-break: break-word !important;
white-space: normal !important;
transition: opacity .15s ease, color .15s ease, transform .15s ease;
}
.tsf2-footer .tsf2-col__links a:hover{
opacity: 1 !important;
color: rgba(255,255,255,.96) !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
transform: translateX(2px);
}
.tsf2-footer .tsf2-col__links a[aria-disabled="true"]{
opacity: .45 !important;
pointer-events: none !important;
}
/* mobile accordion (hidden by default) */
.tsf2-footer .tsf2-maccordion{ display: none !important; }
.tsf2-footer .tsf2-followus{ display: none !important; }
.tsf2-footer .tsf2-acc-item{ border-bottom: 1px solid rgba(255,255,255,.10); }
.tsf2-footer .tsf2-acc-btn{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
background: transparent;
border: 0;
padding: 18px 2px;
color: rgba(255,255,255,.92);
cursor: pointer;
text-align: left;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
line-height: 1.2;
-webkit-tap-highlight-color: transparent;
}
.tsf2-footer .tsf2-acc-btn:focus{ outline: none; }
.tsf2-footer .tsf2-acc-btn:focus-visible{
outline: 2px solid rgba(227,218,203,.55);
outline-offset: 4px;
border-radius: 12px;
}
.tsf2-footer .tsf2-acc-title{
font-size: 12px;
font-weight: 600;
opacity: .95;
}
.tsf2-footer .tsf2-acc-icon{
width: 18px;
height: 18px;
flex: 0 0 auto;
color: rgba(255,255,255,.78);
transform: rotate(0deg);
transition: transform .22s ease;
}
.tsf2-footer .tsf2-acc-item.is-open .tsf2-acc-icon{
transform: rotate(180deg);
}
.tsf2-footer .tsf2-acc-panel{
max-height: 0;
overflow: hidden;
transition: max-height .28s ease;
}
.tsf2-footer .tsf2-acc-panel-inner{
padding: 6px 2px 18px;
}
.tsf2-footer .tsf2-acc-links a{
display: block;
padding: 8px 0;
text-decoration: none !important;
color: rgba(255,255,255,.78) !important;
line-height: 1.35;
opacity: .92;
}
.tsf2-footer .tsf2-acc-links a:hover{
color: rgba(255,255,255,.96) !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
}
.tsf2-footer .tsf2-acc-links a:focus-visible{
outline: 2px solid rgba(227,218,203,.45);
outline-offset: 3px;
border-radius: 10px;
}
.tsf2-footer .tsf2-acc-links a[aria-disabled="true"]{
opacity: .45 !important;
pointer-events: none !important;
}
/* follow us (mobile) */
.tsf2-footer .tsf2-followus{
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid rgba(255,255,255,.10);
text-align: center;
}
.tsf2-footer .tsf2-followus__title{
font-size: 12px;
letter-spacing: .18em;
text-transform: uppercase;
font-weight: 600;
color: rgba(255,255,255,.86);
}
.tsf2-footer .tsf2-social--mobile{
justify-content: center;
margin-top: 12px;
gap: 12px;
}
.tsf2-footer .tsf2-social--mobile a{
width: 42px;
height: 42px;
border-radius: 14px;
}
/* payments */
.tsf2-footer .tsf2-payments{
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid rgba(255,255,255,.10);
display: flex;
justify-content: center;
align-items: center;
}
.footer-shop-card-area{
width: 100%;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: wrap;
gap: 18px;
padding: 18px 12px 22px;
margin: 0 auto !important;
box-sizing: border-box;
float: none !important;
text-align: center;
}
.footer-shop-card-area img,
.footer-shop-card-area svg{
display: block;
width: min(560px, 92%);
height: auto;
margin: 0 !important;
object-fit: contain;
filter: drop-shadow(0 12px 18px rgba(0,0,0,.22));
}
/* bottom */
.tsf2-footer .tsf2-bottom{
position: relative;
z-index: 2;
margin-top: 18px;
background: #17233a;
border-top: 1px solid rgba(255,255,255,.10);
}
.tsf2-footer .tsf2-bottom__inner{
max-width: 1400px;
width: min(1400px, 94vw);
margin: 0 auto;
padding: 16px 24px;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: calc(16px + env(safe-area-inset-bottom));
box-sizing: border-box;
}
.tsf2-footer .tsf2-bottom__copy{
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(255,255,255,.76);
text-align: center;
}
/* responsive top */
@media (max-width: 900px){
.tsf2-footer .tsf2-top{
grid-template-columns: 1fr;
justify-items: center;
gap: 14px;
}
.tsf2-footer .tsf2-social{ justify-self: center; }
}
/* mobile footer mode */
@media (max-width: 768px){
.tsf2-footer .tsf2-wrap{
padding: 30px 16px 12px !important;
width: min(1200px, 96vw) !important;
}
.tsf2-footer .tsf2-cols{ display: none !important; }
.tsf2-footer .tsf2-maccordion{
display: block !important;
margin-top: 16px;
border-top: 1px solid rgba(255,255,255,.10);
}
.tsf2-footer .tsf2-followus{ display: block !important; }
.tsf2-footer .tsf2-top__right{ display: none !important; }
/* bottom bar extends under fixed footnav */
.tsf2-footer .tsf2-bottom{
padding-bottom: calc(var(--ts-footnav-h, 0px) + env(safe-area-inset-bottom));
}
.tsf2-footer .tsf2-followus{
margin-top: var(--ts-followus-gap-top) !important;
padding-top: var(--ts-followus-pad-top) !important;
}
.tsf2-footer .tsf2-followus__title{
margin: 0 0 18px 0 !important;
line-height: 1.2 !important;
}
.tsf2-footer .tsf2-social--mobile{
margin-top: 0 !important;
padding-bottom: 10px !important;
gap: 16px !important;
}
}
/* =========================================================
2) FIXED FOOT NAV (Mobile) — premium + box wrapper removed
========================================================= */
@media (max-width: 768px){
.fixed-foot-navigation-in{
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
display: flex !important;
align-items: stretch !important;
justify-content: space-between !important;
gap: 0 !important;
padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
background: rgba(23,35,58,.92) !important;
border-top: 1px solid rgba(255,255,255,.12) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: 2147482000 !important;
}
/* remove inner box visuals */
.fixed-foot-navigation-in-box{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
}
.fixed-foot-navigation-in-box::before,
.fixed-foot-navigation-in-box::after{ content: none !important; display: none !important; }
@supports (display: contents){
.fixed-foot-navigation-in-box{ display: contents !important; }
}
.fixed-foot-navigation-in > .fixed-foot-navigation-in-box{
flex: 1 1 0 !important;
min-width: 0 !important;
display: flex !important;
align-items: stretch !important;
justify-content: center !important;
}
.fixed-foot-navigation-in > a,
.fixed-foot-navigation-in > button,
.fixed-foot-navigation-in > div,
.fixed-foot-navigation-in > li,
.fixed-foot-navigation-in-box > a,
.fixed-foot-navigation-in-box > button{
flex: 1 1 0 !important;
min-width: 0 !important;
}
.fixed-foot-navigation-in a,
.fixed-foot-navigation-in button,
.fixed-foot-navigation-in-box > a,
.fixed-foot-navigation-in-box > button{
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
padding: 10px 6px !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
text-decoration: none !important;
border-radius: 12px !important;
color: rgba(255,255,255,.92) !important;
text-align: center !important;
transition: background .15s ease, transform .15s ease, opacity .15s ease;
-webkit-tap-highlight-color: transparent;
}
.fixed-foot-navigation-in a:hover,
.fixed-foot-navigation-in button:hover{ background: rgba(255,255,255,.06) !important; }
.fixed-foot-navigation-in a:active,
.fixed-foot-navigation-in button:active{
background: rgba(255,255,255,.10) !important;
transform: translateY(0.5px);
}
.fixed-foot-navigation-in a:focus-visible,
.fixed-foot-navigation-in button:focus-visible{
outline: 2px solid rgba(227,218,203,.40) !important;
outline-offset: 2px !important;
}
.fixed-foot-navigation-in a::before,
.fixed-foot-navigation-in a::after,
.fixed-foot-navigation-in button::before,
.fixed-foot-navigation-in button::after{ content: none !important; display: none !important; }
.fixed-foot-navigation-in i,
.fixed-foot-navigation-in svg{
font-size: 16px !important;
line-height: 1 !important;
width: 18px;
height: 18px;
}
.fixed-foot-navigation-in a span,
.fixed-foot-navigation-in a b,
.fixed-foot-navigation-in a strong,
.fixed-foot-navigation-in a .title,
.fixed-foot-navigation-in a .text,
.fixed-foot-navigation-in a .label{
font-size: 10.5px !important;
line-height: 1.12 !important;
letter-spacing: .10em !important;
text-transform: uppercase !important;
font-weight: 650 !important;
white-space: normal !important;
}
}
/* =========================================================
3) RETURN-TO-TOP — icon center
========================================================= */
a#return-to-top{
position: fixed !important;
right: 18px !important;
bottom: calc(var(--ts-footnav-h, 0px) + 18px) !important;
width: 44px !important;
height: 44px !important;
border-radius: 999px !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
background: rgba(31, 43, 68, 0.92) !important;
color: #fff !important;
text-decoration: none !important;
border: 1px solid rgba(255,255,255,0.14) !important;
box-shadow: 0 10px 24px rgba(0,0,0,0.22) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transform: translateZ(0);
transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
cursor: pointer !important;
z-index: 2147483000 !important;
font-size: 0 !important;
line-height: 0 !important;
}
a#return-to-top::before,
a#return-to-top::after{ content:none !important; display:none !important; }
a#return-to-top i.fa,
a#return-to-top i.fas,
a#return-to-top i.far,
a#return-to-top i.fal,
a#return-to-top i.fab{
position: absolute !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
margin: 0 !important;
padding: 0 !important;
font-size: 18px !important;
line-height: 1 !important;
color: #fff !important;
pointer-events: none !important;
}
a#return-to-top:hover{
transform: translateY(-2px) !important;
box-shadow: 0 14px 30px rgba(0,0,0,0.26) !important;
background: rgba(31, 43, 68, 0.98) !important;
}
a#return-to-top:active{ transform: translateY(0) scale(0.98) !important; }
a#return-to-top:focus{ outline: none !important; }
a#return-to-top:focus-visible{
box-shadow: 0 0 0 3px rgba(227,218,203,0.45), 0 12px 26px rgba(0,0,0,0.25) !important;
}
@media (min-width: 769px){
a#return-to-top{ right: 24px !important; bottom: 24px !important; }
}
/* =========================================================
4) HERO SLIDER — Desktop grab cursor off
========================================================= */
@media (hover: hover) and (pointer: fine){
.hero-section.hero-slider,
.hero-section.hero-slider .hero-slide,
.hero-section.hero-slider .hero-media,
.hero-section.hero-slider .hero-media img{
cursor: default !important;
}
.hero-section.hero-slider .hero-nav,
.hero-section.hero-slider .hero-dot,
.hero-section.hero-slider a{ cursor: pointer !important; }
}
/* =========================================================
5) Key Trade Policies — Mobile button fix
========================================================= */
@media (max-width: 768px){
.wh-policies .wh-actions{
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
justify-content:center !important;
gap:12px !important;
margin-top:16px !important;
}
.wh-policies .wh-actions > a,
.wh-policies .wh-actions > button{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
width:100% !important;
max-width:420px;
margin-left:auto !important;
margin-right:auto !important;
padding:12px 16px !important;
min-height:44px !important;
font-size:14px !important;
line-height:1.15 !important;
border-radius:999px !important;
white-space:normal !important;
text-align:center !important;
}
.wh-policies .wh-actions .btn-outline,
.wh-policies .wh-actions .btn.btn-outline{
letter-spacing:.06em !important;
}
}
/* =========================================================
6) TS MOBILE HEADER — Cartier-like (mobile only)
========================================================= */
@media (max-width: 991px){
.mobile-header-main-area .ts-mobile-header-row{
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
min-height: 58px !important;
}
.mobile-header-main-area .ts-mobile-header-left,
.mobile-header-main-area .ts-mobile-header-right{
display: flex !important;
align-items: center !important;
gap: 6px !important;
z-index: 4 !important;
min-width: 44px !important;
}
.mobile-header-main-area .ts-mobile-header-right{
justify-content: flex-end !important;
min-width: 116px !important;
}
/* center logo */
.mobile-header-main-area .ts-mobile-header-logo{
position: absolute !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 3 !important;
max-width: 60vw !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
pointer-events: none !important;
}
.mobile-header-main-area .ts-mobile-header-logo a{ pointer-events: auto !important; }
.mobile-header-main-area .ts-mobile-header-logo img{
height: 40px !important;
width: auto !important;
max-width: 100% !important;
display: block !important;
filter: drop-shadow(0 2px 10px rgba(0,0,0,.35));
}
.mobile-header-main-area .mobile-header-logo-tablet-pro{ display: none !important; }
/* remove boxes */
.mobile-header-main-area .mobile-header-bars,
.mobile-header-main-area .mobile-header-bars label,
.mobile-header-main-area .mobile-header-bars label::before,
.mobile-header-main-area .mobile-header-bars label::after,
.mobile-header-main-area .mobile-header-icons{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
outline: 0 !important;
}
/* hit area */
.mobile-header-main-area .mobile-header-bars label,
.mobile-header-main-area .mobile-header-icons{
width: 44px !important;
height: 44px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
margin: 0 !important;
-webkit-tap-highlight-color: transparent !important;
position: relative !important; /* badge anchor */
}
.mobile-header-main-area .mobile-header-bars i,
.mobile-header-main-area .mobile-header-icons i{
color: #fff !important;
font-size: 22px !important;
line-height: 1 !important;
}
.mobile-header-main-area .ts-mobile-search-left{ margin-left: -8px !important; }
.mobile-header-main-search{ display: none !important; }
@media (max-width: 380px){
.mobile-header-main-area .ts-mobile-header-logo img{ height: 34px !important; }
.mobile-header-main-area .ts-mobile-header-right{ min-width: 108px !important; }
}
}
/* Tablet-pro logo (optional) */
@media (min-width: 768px) and (max-width: 991px){
.mobile-header-main-area .mobile-header-logo-tablet-pro{ display: block !important; }
.mobile-header-main-area .mobile-header-logo{ display: none !important; }
}
/* =========================================================
7) TS MOBILE TOP HEADER — Desktop-like Lang/Currency (mobile only)
========================================================= */
@media (max-width: 991px){
.mobile-top-header-main .mobil-top-header-lang-currency{
display: flex !important;
align-items: center !important;
gap: 14px !important;
}
.mobile-top-header-main .mobil-header-select-area{
display: inline-flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
padding: 6px 6px !important;
color: #fff !important;
text-decoration: none !important;
line-height: 1 !important;
}
.mobile-top-header-main .mobil-header-select-area i{
color: #fff !important;
font-size: 18px !important;
line-height: 1 !important;
margin: 0 !important;
}
.mobile-top-header-main .mobil-header-select-area .ts-flag{
width: 18px !important;
height: 14px !important;
display: inline-block !important;
border-radius: 2px !important;
overflow: hidden !important;
}
.mobile-top-header-main .mobil-header-select-area .ts-mob-label{
color: #fff !important;
font-size: 12px !important;
opacity: .95 !important;
white-space: nowrap !important;
}
.mobile-top-header-main .mobil-header-select-area .ion-arrow-down-b{ display: none !important; }
.mobile-top-header-main .currency-drop{ min-width: 190px !important; }
}
/* =========================================================
8) TS MNAV — CONFLICT SHIELD (ÖNEMLİ)
Bu bölüm, eski style.css kurallarının yeni menüyü daraltmasını engeller.
(sende görünen: panelin 460px kalması + chevronların küçülmesi)
========================================================= */
@media (max-width: 991px){
/* MENU açıkken paneli FULLSCREEN zorla (sağda şerit kalmasın) */
body.ts-mnav-open .slide-menu .mobile_side_wrap_in,
body.ts-mnav-open .slide-menu #ts-mnav-panel{
width: 100vw !important;
max-width: none !important;
border-right: 0 !important;
border-radius: 0 !important;
}
/* eski "drawer padding-bottom" vb. kurallar varsa nötrle */
body.ts-mnav-open .slide-menu .mobile_side_wrap_in{
padding-bottom: 0 !important;
}
/* Chevron: eski border-çizim kuralları varsa iptal et, SVG normal görünsün */
body.ts-mnav-open .ts-mnav-item .ts-mnav-chevron{
width: 18px !important;
height: 18px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 0 !important;
border-right: 0 !important;
border-top: 0 !important;
transform: none !important;
opacity: .70 !important;
}
body.ts-mnav-open .ts-mnav-item .ts-mnav-chevron::before,
body.ts-mnav-open .ts-mnav-item .ts-mnav-chevron::after{
content: none !important;
display: none !important;
}
body.ts-mnav-open .ts-mnav-item .ts-mnav-chevron svg{
display: block !important;
width: 18px !important;
height: 18px !important;
}
}
/* =========================================================
9) MOBILE: Tap-to-hover (EXPLORE + GRAM) — TS v1
========================================================= */
[class*="cat-detail-products-box-img"]:hover::before,
.cat-detail-products-box.ts-touch-hover [class*="cat-detail-products-box-img"]::before,
.cat-detail-products-box-big.ts-touch-hover [class*="cat-detail-products-box-img"]::before,
.cat-detail-products-box-list.ts-touch-hover [class*="cat-detail-products-box-img"]::before{
transform: translateX(0);
opacity: 1;
}
[class*="cat-detail-products-box-img"]:hover img,
.cat-detail-products-box.ts-touch-hover [class*="cat-detail-products-box-img"] img,
.cat-detail-products-box-big.ts-touch-hover [class*="cat-detail-products-box-img"] img,
.cat-detail-products-box-list.ts-touch-hover [class*="cat-detail-products-box-img"] img{
transform: scale(1.04);
}
.cat-detail-products-box.ts-touch-hover .product-weight-pill,
.cat-detail-products-box-big.ts-touch-hover .product-weight-pill,
.cat-detail-products-box-list.ts-touch-hover .product-weight-pill{
max-width: 160px;
padding: 0 10px;
justify-content: flex-start;
flex-direction: row;
gap: 7px;
background: rgba(0,0,0,.72);
border-color: rgba(0,0,0,0);
color: #fff;
opacity: 1;
}
.cat-detail-products-box.ts-touch-hover .product-weight-pill .pill-text,
.cat-detail-products-box-big.ts-touch-hover .product-weight-pill .pill-text,
.cat-detail-products-box-list.ts-touch-hover .product-weight-pill .pill-text{
max-width: 120px;
opacity: 1;
transform: translateX(0);
}
@media (hover: none) and (pointer: coarse){
.product-weight-pill{
pointer-events: none;
max-width: var(--pill-h);
padding: 0;
justify-content: center;
gap: 0;
background: var(--pill-bg);
border: var(--pill-border);
color: var(--pill-fg);
opacity: .55;
}
.product-weight-pill .pill-text{
max-width: 0;
opacity: 0;
overflow: hidden;
transform: translateX(6px);
}
}
/* EXPLORE capsule */
[class*="cat-detail-products-box-img"]::before{
content: "EXPLORE";
position: absolute;
left: 50%;
bottom: 14px;
height: 34px;
padding: 0 18px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(255,255,255,.78);
color: rgba(10,12,18,.92);
border: 1px solid rgba(10,12,18,.14);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
font-size: 11px;
font-weight: 600;
letter-spacing: .26em;
text-transform: uppercase;
line-height: 1;
box-shadow: none !important;
pointer-events: none;
z-index: 3;
opacity: 0;
transform: translate(-50%, 12px);
transition:
opacity .18s ease,
transform .24s cubic-bezier(.2,.8,.2,1),
background .18s ease,
border-color .18s ease;
}
[class*="cat-detail-products-box-img"]:hover::before,
.cat-detail-products-box.ts-touch-hover [class*="cat-detail-products-box-img"]::before,
.cat-detail-products-box-big.ts-touch-hover [class*="cat-detail-products-box-img"]::before,
.cat-detail-products-box-list.ts-touch-hover [class*="cat-detail-products-box-img"]::before{
opacity: 1;
transform: translate(-50%, 0);
background: rgba(255,255,255,.86);
border-color: rgba(10,12,18,.18);
}
@media (max-width: 768px){
[class*="cat-detail-products-box-img"]::before{
bottom: 12px;
height: 32px;
padding: 0 16px;
font-size: 10.5px;
letter-spacing: .24em;
}
}
/* reduced motion (yalnız bu pack alanları) */
@media (prefers-reduced-motion: reduce){
.tsf2-footer *, .fixed-foot-navigation-in *, .slide-menu *{
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}
/* =========================================================
TS MOBILE HEADER ICON NORMALIZE (LA/LineAwesome)
las la-search / las la-user / las la-shopping-cart = aynı boy
========================================================= */
:root{
--ts-mob-icon-size: 24px; /* istersen 22px / 26px yapabilirsin */
}
.mobile-header-icons i.las{
font-size: var(--ts-mob-icon-size) !important;
line-height: 1 !important;
width: var(--ts-mob-icon-size);
height: var(--ts-mob-icon-size);
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
}
/* Optik eşitleme (cart bazen daha küçük görünür) */
.mobile-header-icons i.la-shopping-cart{
transform: scale(1.06);
transform-origin: 50% 50%;
}
/* (Gerekirse) user ikonunu da çok az toparlar */
.mobile-header-icons i.la-user{
transform: scale(1.02);
transform-origin: 50% 50%;
}
/* =========================================================
TS FAVORITES (hesap_favoriler.php) — MOBILE FIX PACK v1.0.0
Paste to END of style.css
========================================================= */
@media (max-width: 768px){
/* yatay taşmayı kapat (paragrafın soldan kırpılma hissi) */
.users_main_div{ overflow-x: hidden; }
/* ana wrapper: mobilde tam genişlik + güvenli padding */
.user_subpage_div{
width: 100%;
max-width: 100%;
padding: 0 14px;
box-sizing: border-box;
}
/* sağ içerik: leftbar yoksa bile margin/padding taşımalarını sıfırla */
.user_subpage_favorites_content{
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box;
}
/* guest/empty state: absolute/translate merkezleme varsa iptal et */
.user_subpage_favorites_nologin,
.user_subpage_favorites_noitems{
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
min-height: auto !important;
width: 100% !important;
max-width: 560px;
margin: 20px auto 40px;
padding: 26px 16px;
box-sizing: border-box;
text-align: center;
}
/* metnin kırpılmasını engelle */
.user_subpage_favorites_nologin_s,
.user_subpage_favorites_noitems_s{
width: 100% !important;
max-width: 40ch;
margin: 10px auto 0;
padding: 0 8px;
box-sizing: border-box;
text-align: center;
overflow-wrap: anywhere;
}
/* butonlar: mobilde alt alta */
.user_subpage_favorites_nologin_buttons{
display: flex !important;
flex-direction: column;
gap: 12px;
align-items: stretch;
justify-content: center;
margin-top: 18px;
}
.user_subpage_favorites_nologin_buttons a{
width: 100% !important;
max-width: none !important;
box-sizing: border-box;
}
/* alt fixed bar/footer ile çakışma varsa: senin pack’te --ts-footnav-h var */
.users_main_div{
padding-bottom: calc(24px + var(--ts-footnav-h, 0px));
padding-bottom: calc(24px + var(--ts-footnav-h, 0px) + env(safe-area-inset-bottom));
}
}
/* =========================================================
TS FAVORITES (hesap_favoriler.php) — FIX PACK v1.1.0
✅ Mobile: kırpılma/taşma + buton düzeni
✅ Desktop: devasa boşluk/min-height/absolute-center iptali
Paste to END of style.css
========================================================= */
/* genel: yatay taşmayı kapat */
.ts-page-favori.users_main_div{ overflow-x: hidden; }
/* ========= MOBILE ========= */
@media (max-width: 768px){
.ts-page-favori .user_subpage_div{
width: 100%;
max-width: 100%;
padding: 0 14px;
box-sizing: border-box;
}
.ts-page-favori .user_subpage_favorites_content{
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
min-height: auto !important;
height: auto !important;
box-sizing: border-box;
}
.ts-page-favori .user_subpage_favorites_nologin,
.ts-page-favori .user_subpage_favorites_noitems{
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
min-height: auto !important;
width: 100% !important;
max-width: 560px;
margin: 20px auto 40px;
padding: 26px 16px;
box-sizing: border-box;
text-align: center;
}
.ts-page-favori .user_subpage_favorites_nologin_s,
.ts-page-favori .user_subpage_favorites_noitems_s{
width: 100% !important;
max-width: 40ch;
margin: 10px auto 0;
padding: 0 8px;
box-sizing: border-box;
text-align: center;
overflow-wrap: anywhere;
}
.ts-page-favori .user_subpage_favorites_nologin_buttons{
display: flex !important;
flex-direction: column;
gap: 12px;
align-items: stretch;
justify-content: center;
margin-top: 18px;
}
.ts-page-favori .user_subpage_favorites_nologin_buttons a{
width: 100% !important;
max-width: none !important;
box-sizing: border-box;
}
.ts-page-favori.users_main_div{
padding-bottom: calc(24px + var(--ts-footnav-h, 0px));
padding-bottom: calc(24px + var(--ts-footnav-h, 0px) + env(safe-area-inset-bottom));
}
}
/* ========= DESKTOP ========= */
@media (min-width: 769px){
/* sağ içerikteki gereksiz dev yüksekliği/boşluğu iptal et */
.ts-page-favori .user_subpage_favorites_content{
min-height: auto !important;
height: auto !important;
padding: 34px 34px 44px !important;
box-sizing: border-box;
}
/* guest/empty state: absolute/translate merkezleme varsa iptal + kompakt görünüm */
.ts-page-favori .user_subpage_favorites_nologin,
.ts-page-favori .user_subpage_favorites_noitems{
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
max-width: 860px;
margin: 10px auto 0;
padding: 44px 30px;
box-sizing: border-box;
text-align: center;
}
.ts-page-favori .user_subpage_favorites_nologin_head,
.ts-page-favori .user_subpage_favorites_noitems_head{
font-size: 28px;
line-height: 1.2;
letter-spacing: .2px;
}
.ts-page-favori .user_subpage_favorites_nologin_s,
.ts-page-favori .user_subpage_favorites_noitems_s{
max-width: 64ch;
margin-left: auto;
margin-right: auto;
}
.ts-page-favori .user_subpage_favorites_nologin_buttons{
display: flex !important;
justify-content: center;
align-items: stretch;
gap: 14px;
flex-wrap: wrap;
margin-top: 26px;
}
.ts-page-favori .user_subpage_favorites_nologin_buttons a{
min-width: 220px;
max-width: 340px;
box-sizing: border-box;
}
}
/* =========================================================
TS HEADER — USER DROPDOWN (COMPACT + HEADER-CONSISTENT) (v1.2)
Target: .dropdown-menu.dropdown-menu-right.user-drop
Paste to END of style.css (override)
========================================================= */
.header-desktop-navbutton-box .dropdown-menu.user-drop{
/* boyut / form */
min-width: 250px !important;
max-width: 280px !important;
padding: 10px !important;
margin-top: 8px !important;
/* görünüm */
background: #fff !important;
border: 1px solid rgba(16,24,40,.12) !important;
border-radius: 14px !important;
/* gölge yok */
box-shadow: none !important;
/* yazı dili */
color: #101828 !important;
}
.header-desktop-navbutton-box .dropdown-menu.user-drop::before{
/* küçük, kibar ok */
content:"" !important;
position:absolute !important;
top: -7px !important;
right: 24px !important;
width: 14px !important;
height: 14px !important;
background:#fff !important;
transform: rotate(45deg) !important;
border-left: 1px solid rgba(16,24,40,.12) !important;
border-top: 1px solid rgba(16,24,40,.12) !important;
box-shadow: none !important;
}
/* iç boşluklar */
.dropdown-menu.user-drop .dropdown-user-area{ padding: 0 !important; }
.dropdown-menu.user-drop .dropdown-user-area-header{ padding: 2px 2px 8px !important; }
/* LOG IN / REGISTER butonları: header ile uyumlu, küçük */
.dropdown-menu.user-drop .dropdown-user-area-header a.button-blue,
.dropdown-menu.user-drop .dropdown-user-area-header a.button-green{
display:flex !important;
align-items:center !important;
justify-content:center !important;
height: 38px !important;
border-radius: 999px !important;
font-size: 11.5px !important;
font-weight: 800 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
text-decoration:none !important;
border: 1px solid rgba(16,24,40,.10) !important;
box-shadow: none !important;
transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
/* Navy login */
.dropdown-menu.user-drop .dropdown-user-area-header a.button-blue{
background: #1c2b49 !important;
color: #fff !important;
border-color: rgba(28,43,73,.22) !important;
}
.dropdown-menu.user-drop .dropdown-user-area-header a.button-blue:hover{
background: #22365c !important;
transform: translateY(-1px);
}
/* Green register */
.dropdown-menu.user-drop .dropdown-user-area-header a.button-green{
background: #24b34b !important;
color: #fff !important;
border-color: rgba(36,179,75,.26) !important;
}
.dropdown-menu.user-drop .dropdown-user-area-header a.button-green:hover{
background: #1fa142 !important;
transform: translateY(-1px);
}
/* OR satırı: daha küçük ve ince */
.dropdown-menu.user-drop .dropdown-user-area-lineText{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap: 8px !important;
font-size: 11px !important;
color: rgba(102,112,133,.95) !important;
margin: 7px 0 8px !important;
}
.dropdown-menu.user-drop .dropdown-user-area-lineText:before,
.dropdown-menu.user-drop .dropdown-user-area-lineText:after{
content:"" !important;
height: 1px !important;
flex: 1 !important;
background: rgba(16,24,40,.10) !important;
}
.dropdown-menu.user-drop .dropdown-user-area-lineText-in{
padding: 0 4px !important;
}
/* Link alanı: daha ince, header ile tutarlı */
.dropdown-menu.user-drop .dropdown-user-area-link-area{
margin-top: 8px !important;
padding-top: 6px !important;
border-top: 1px solid rgba(16,24,40,.10) !important;
}
.dropdown-menu.user-drop .dropdown-user-area-link-area a{
display:flex !important;
align-items:center !important;
gap: 9px !important;
padding: 8px 9px !important;
border-radius: 12px !important;
font-size: 12.5px !important;
font-weight: 700 !important;
color: #101828 !important;
text-decoration:none !important;
box-shadow: none !important;
transition: background .12s ease;
}
.dropdown-menu.user-drop .dropdown-user-area-link-area a:hover{
background: rgba(28,43,73,.045) !important;
}
/* ikonlar: daha küçük ve kibar */
.dropdown-menu.user-drop .dropdown-user-area-link-area a i{
width: 18px !important;
font-size: 14px !important;
text-align:center !important;
color: #1c2b49 !important;
opacity: .95 !important;
}
/* içeride kalmış gölge varsa sıfırla */
.dropdown-menu.user-drop,
.dropdown-menu.user-drop *{
box-shadow: none !important;
}
.dropdown-menu.user-drop .dropdown-userarea-header.user-drop-notice{
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
margin: 0 0 8px !important;
padding: 12px 14px !important;
border: 1px solid #f0b8b0 !important;
border-radius: 12px !important;
background: #f9e5d9 !important;
white-space: normal !important;
text-align: left !important;
}
.dropdown-menu.user-drop .user-drop-notice-title{
display: block !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
color: #101828 !important;
white-space: normal !important;
}
.dropdown-menu.user-drop .user-drop-notice-message{
display: block !important;
margin-top: 8px !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 1.55 !important;
color: #475467 !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
word-break: normal !important;
}
/* =========================================================
TS MOBILE HEADER — CART BADGE FIX (PREMIUM v1.1)
✅ Badge daha yukarıda, daha net, daha premium
========================================================= */
@media (max-width: 991px){
/* icon linklerini referans yap */
#ts-mobile-header .mobile-header-icons{
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
-webkit-tap-highlight-color: transparent !important;
}
/* cart count badge (premium) */
#ts-mobile-header .mobile-header-icons .header-desktop-navbutton-box-count-cart{
position: absolute !important;
top: -6px !important; /* ✅ ikonun üstüne çıkar */
right: -6px !important; /* ✅ biraz dışarı taşı */
z-index: 9 !important;
min-width: 18px !important;
height: 18px !important;
padding: 0 6px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 10px !important;
font-weight: 900 !important;
letter-spacing: .02em !important;
line-height: 1 !important;
border-radius: 999px !important;
/* ✅ netlik + premium ayrım */
border: 2px solid rgba(255,255,255,.92) !important; /* ince beyaz ring */
box-shadow: 0 6px 16px rgba(0,0,0,.28) !important; /* yumuÅŸak shadow */
transform: translate(0,0) !important;
pointer-events: none !important; /* tıklamayı bozmasın */
}
/* ikon her zaman badge'in altında kalsın */
#ts-mobile-header .mobile-header-icons i{
position: relative !important;
z-index: 1 !important;
}
/* çok küçük ekranlarda biraz geri çek */
@media (max-width: 360px){
#ts-mobile-header .mobile-header-icons .header-desktop-navbutton-box-count-cart{
top: -5px !important;
right: -5px !important;
min-width: 17px !important;
height: 17px !important;
font-size: 9.5px !important;
}
}
}
/* =========================================================
TS ICON TAP / HOVER FEEDBACK (v1.0)
✅ Mobile press feedback (active)
✅ Desktop hover feedback
✅ Keyboard focus-visible
Accent: #c0b096
========================================================= */
:root{
--ts-tap-accent: 192,176,150; /* #c0b096 -> rgb */
--ts-tap-bg: rgba(var(--ts-tap-accent), .18);
--ts-tap-bg-hover: rgba(var(--ts-tap-accent), .12);
--ts-tap-ring: rgba(var(--ts-tap-accent), .45);
}
/* Bu class’ı ikon link/buttonlarına ekleyeceğiz */
.ts-tapfx{
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
min-height: 38px;
padding: 8px;
border-radius: 12px;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
transition: background-color .14s ease, transform .14s ease, box-shadow .14s ease, opacity .14s ease;
-webkit-tap-highlight-color: rgba(var(--ts-tap-accent), .25); /* iOS highlight rengi */
}
@media (hover:hover){
.ts-tapfx:hover{
background-color: var(--ts-tap-bg-hover);
}
}
.ts-tapfx:active,
.ts-tapfx.is-pressed{
background-color: var(--ts-tap-bg);
transform: scale(.96);
box-shadow: 0 0 0 1px rgba(var(--ts-tap-accent), .22) inset;
}
.ts-tapfx:focus-visible{
outline: 2px solid var(--ts-tap-ring);
outline-offset: 2px;
}
/* =========================================================
TS FOOTER — Bottom White Gap Fix (v4.12.1)
Paste to END of style.css
Fix: Footer altındaki beyaz boşluk (body/.main-body padding-bottom)
========================================================= */
html, body{
margin: 0 !important;
padding: 0 !important;
}
/* Eski fixed-bottom-nav boşluğu footer altına taşmasın:
sadece ölçülen footnav kadar yer bırak (yoksa 0) */
body{
padding-bottom: var(--ts-footnav-h, 0px) !important;
}
/* Footer gerçekten “son†olsun */
.footer-module-main-div.tsf2-footer{
margin: 0 !important;
padding-bottom: 0 !important;
}
/* Safe-area gerekiyorsa COPYRIGHT barın içinde kalsın (dışarıda boşluk olmasın) */
.footer-module-main-div.tsf2-footer .tsf2-bottom{
margin: 0 !important;
padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}
/* Bazı temalarda wrapper/footer sonrası margin/padding kalabiliyor */
.main-body{
padding-bottom: 0 !important;
}
.main-body > :last-child{
margin-bottom: 0 !important;
}
.cart-right-div-inside a[data-toggle="modal"][data-target="#loginModal"]{
display:block;
width:100%;
}
/* =========================================================
TS LOGIN MODAL — Apple/Cartier Clean FIX (v3.0)
Fixes:
- Title arkasındaki kutu/çizgi temizlendi
- Close (X) yuvarlaÄŸa tam oturdu
- Yeşil buton da pill (login ile aynı)
- Desktop + Mobile uyumlu
========================================================= */
/* Backdrop */
.modal-backdrop.show{
opacity: .35 !important;
}
/* Modal tam ortada */
#loginModal .modal-dialog{
margin: 0 auto !important;
}
#loginModal .modal-dialog-centered{
min-height: 100dvh !important;
min-height: 100vh !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 18px !important;
}
/* Boyut: desktop premium, mobile sığar */
#loginModal .modal-dialog{
width: min(540px, calc(100vw - 36px)) !important;
max-width: min(540px, calc(100vw - 36px)) !important;
}
/* Modal kutusu: net + cam */
#loginModal .modal-content{
position: relative !important;
border-radius: 18px !important;
overflow: hidden !important;
background: rgba(255,255,255,.96) !important;
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
border: 1px solid rgba(0,0,0,.08) !important;
box-shadow:
0 22px 60px rgba(0,0,0,.22),
0 2px 12px rgba(0,0,0,.10) !important;
transform: translateZ(0);
}
/* İç alan */
#loginModal .modal-in-login{
position: relative !important;
padding: 24px 22px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
max-height: calc(100dvh - 36px) !important;
max-height: calc(100vh - 36px) !important;
overflow: auto !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: geometricPrecision;
}
/* =========================================================
1) Başlıktaki “kutu/çizgi†problemini SIFIRLA
========================================================= */
/* Bazı temalarda başlık wrapper’ı çizgi/pseudo basabiliyor */
#loginModal .modal-in-login-head,
#loginModal .modal-in-login-head *{
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
}
/* Başlık/alt elemanlarda olabilecek pseudo çizgileri kapat */
#loginModal .modal-in-login h1:before,
#loginModal .modal-in-login h1:after,
#loginModal .modal-in-login h2:before,
#loginModal .modal-in-login h2:after,
#loginModal .modal-in-login .modal-title:before,
#loginModal .modal-in-login .modal-title:after,
#loginModal .modal-in-login-head:before,
#loginModal .modal-in-login-head:after,
#loginModal .ts-login-title:before,
#loginModal .ts-login-title:after{
content: none !important;
display: none !important;
}
/* Başlık (temiz, çizgisiz) */
#loginModal .modal-in-login h1,
#loginModal .modal-in-login h2,
#loginModal .modal-in-login .modal-title{
text-align: center !important;
font-size: 24px !important;
line-height: 1.15 !important;
font-weight: 600 !important;
letter-spacing: .2px !important;
margin: 0 0 10px !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: rgba(0,0,0,.92) !important;
}
/* Subtitle */
#loginModal .modal-in-login p{
text-align: center !important;
font-size: 13.5px !important;
line-height: 1.4 !important;
color: rgba(0,0,0,.62) !important;
margin: 0 0 16px !important;
}
/* Labels */
#loginModal .modal-in-login label{
font-size: 12.75px !important;
color: rgba(0,0,0,.74) !important;
margin-bottom: 6px !important;
}
/* Inputs: premium + iOS zoom fix */
#loginModal .modal-in-login input[type="email"],
#loginModal .modal-in-login input[type="password"],
#loginModal .modal-in-login input[type="text"]{
width: 100% !important;
height: 46px !important;
font-size: 16px !important; /* iOS zoom engel */
border-radius: 12px !important;
padding: 10px 12px !important;
box-sizing: border-box !important;
background: rgba(247,249,252,.95) !important;
border: 1px solid rgba(0,0,0,.10) !important;
outline: none !important;
}
#loginModal .modal-in-login input:focus{
border-color: rgba(0,0,0,.18) !important;
box-shadow: 0 0 0 3px rgba(0,0,0,.06) !important;
}
/* =========================================================
2) Close (X) — yuvarlağa tam otursun (kopuk görünmesin)
========================================================= */
#loginModal .modal-in-login a.close,
#loginModal .modal-in-login button.close,
#loginModal .modal-in-login .close{
position: absolute !important;
top: 12px !important;
right: 12px !important;
width: 34px !important;
height: 34px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 999px !important;
background: rgba(0,0,0,.06) !important;
border: 1px solid rgba(0,0,0,.10) !important;
box-shadow: none !important;
padding: 0 !important;
font-size: 22px !important;
line-height: 1 !important;
color: rgba(0,0,0,.70) !important;
opacity: 1 !important;
transform: none !important;
}
/* =========================================================
3) Butonlar — hepsi pill (yeşil dahil)
========================================================= */
#loginModal .modal-in-login .btn,
#loginModal .modal-in-login button,
#loginModal .modal-in-login a.btn,
#loginModal .modal-in-login .btn-success,
#loginModal .modal-in-login .btn.btn-success{
width: 100% !important;
height: 46px !important;
border-radius: 999px !important; /* login gibi */
font-weight: 600 !important;
letter-spacing: .2px !important;
}
#loginModal .modal-in-login .btn:active,
#loginModal .modal-in-login button:active,
#loginModal .modal-in-login a.btn:active{
transform: translateY(1px);
}
#loginModal .modal-in-login .btn + .btn,
#loginModal .modal-in-login .btn + a.btn,
#loginModal .modal-in-login a.btn + .btn,
#loginModal .modal-in-login a.btn + a.btn{
margin-top: 10px !important;
}
/* Linkler (forgot) daha temiz */
#loginModal .modal-in-login a{
color: rgba(0,0,0,.78) !important;
text-decoration: none !important;
}
#loginModal .modal-in-login a:hover{
color: rgba(0,0,0,.92) !important;
text-decoration: underline !important;
text-underline-offset: 3px;
}
/* =========================
Mobile ince ayar
========================= */
@media (max-width: 767.98px){
#loginModal .modal-dialog-centered{
padding: 14px !important;
}
#loginModal .modal-dialog{
width: calc(100vw - 28px) !important;
max-width: calc(100vw - 28px) !important;
}
#loginModal .modal-in-login{
padding: 20px 16px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
}
#loginModal .modal-in-login h1,
#loginModal .modal-in-login h2,
#loginModal .modal-in-login .modal-title{
font-size: 22px !important;
}
#loginModal .modal-in-login .btn,
#loginModal .modal-in-login button,
#loginModal .modal-in-login a.btn{
height: 44px !important;
}
}
/* TS LOGIN MODAL — Green button pill */
#loginModal a.button-green.button-2x{
border-radius: 999px !important;
height: 46px !important; /* login ile aynı */
line-height: 46px !important; /* text dikey ortalama */
overflow: hidden !important;
}
/* Mobilde bir tık daha kısa */
@media (max-width: 767.98px){
#loginModal a.button-green.button-2x{
height: 44px !important;
line-height: 44px !important;
}
}
/* TS LOGIN MODAL — Green CTA: center + white text/icon (v1.2) */
#loginModal a.button-green.button-2x{
width: 100% !important;
/* pill */
border-radius: 999px !important;
/* dikey ölçü + tam merkez */
height: 46px !important;
min-height: 46px !important;
padding: 0 18px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
/* okunabilirlik */
color: #fff !important;
text-decoration: none !important;
font-weight: 600 !important;
letter-spacing: .2px !important;
line-height: 1 !important;
text-align: center !important;
/* bazı temalarda text-shadow vs. */
text-shadow: none !important;
}
/* ikon rengi + hizası */
#loginModal a.button-green.button-2x i,
#loginModal a.button-green.button-2x .las,
#loginModal a.button-green.button-2x .la-user{
color: #fff !important;
font-size: 18px !important;
line-height: 1 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Mobilde bir tık kısa */
@media (max-width: 767.98px){
#loginModal a.button-green.button-2x{
height: 44px !important;
min-height: 44px !important;
}
}
/* =========================================================
TS LOGIN MODAL — Premium micro polish (Remember/Forgot + crisp) v1.0
========================================================= */
/* 1) Remember + Forgot aynı satır */
#loginModal .modal-in-login .form-group{
position: relative;
}
/* Satırı yakala: checkbox + forgot genelde aynı form-group içinde */
#loginModal .modal-in-login .form-group:has(input[type="checkbox"]){
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
margin-top: 6px !important;
}
/* Checkbox alanı sola */
#loginModal .modal-in-login .form-group:has(input[type="checkbox"]) label{
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
margin: 0 !important;
user-select: none;
}
/* Forgot saÄŸa */
#loginModal .modal-in-login .form-group:has(input[type="checkbox"]) a{
margin-left: auto !important;
font-weight: 600 !important;
white-space: nowrap;
}
/* 2) Checkbox daha modern */
#loginModal .modal-in-login input[type="checkbox"]{
width: 16px !important;
height: 16px !important;
accent-color: #111 !important; /* modern tarayıcılar */
transform: translateY(1px);
}
/* 3) Link stili daha “clean†*/
#loginModal .modal-in-login .form-group:has(input[type="checkbox"]) a{
text-decoration: none !important;
color: rgba(0,0,0,.78) !important;
}
#loginModal .modal-in-login .form-group:has(input[type="checkbox"]) a:hover{
color: rgba(0,0,0,.92) !important;
text-decoration: underline !important;
text-underline-offset: 3px;
}
/* 4) Input focus daha net */
#loginModal .modal-in-login input:focus{
box-shadow: 0 0 0 4px rgba(0,0,0,.055) !important;
}
/* 5) Cartier gibi çok hafif modal açılış hissi */
#loginModal .modal-content{
animation: tsModalPop .16s ease-out both;
}
@keyframes tsModalPop{
from { transform: translateY(6px) scale(.995); opacity: .96; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
/* Mobilde satır kırılmasın diye gerekirse küçült */
@media (max-width: 420px){
#loginModal .modal-in-login .form-group:has(input[type="checkbox"]) a{
font-size: 12.5px !important;
}
}
/* ========================================================================== */
/* ✅ SITE-WIDE SINGLE SCROLLBAR GUARD (Paste at END of style.css) */
/* - Kills horizontal overflow (100vw / full-bleed taşması) */
/* - Forces ONE vertical scrollbar by choosing the real scroll container */
/* - Adds premium scrollbar styling (optional but included) */
/* ========================================================================== */
/* 0) Horizontal scrollbar = NEVER */
html, body {
width: 100%;
max-width: 100%;
}
@supports (overflow-x: clip) {
html, body { overflow-x: clip !important; }
}
@supports not (overflow-x: clip) {
html, body { overflow-x: hidden !important; }
}
/* Keep layout stable when scrollbar appears/disappears (Chrome/Edge/Safari new) */
@supports (scrollbar-gutter: stable) {
html { scrollbar-gutter: stable; }
}
/* 1) If your theme uses a wrapper scroll container (you do: .main-body),
make BODY/HTML non-scroll and let ONLY that wrapper scroll.
This is the real reason “double vertical scrollbar†happens. */
@supports selector(body:has(.main-body)) {
/* If .main-body exists on the page, body becomes non-scroll */
body:has(.main-body) {
height: 100vh;
overflow: hidden !important;
}
/* Prefer modern viewport units when supported */
@supports (height: 100dvh) {
body:has(.main-body) { height: 100dvh; }
}
/* The ONE true scrollbar */
body:has(.main-body) .main-body {
height: 100vh;
overflow-y: auto !important;
overflow-x: hidden !important;
/* stops “bounce/chain scrolling†*/
overscroll-behavior: none;
/* smooth on iOS */
-webkit-overflow-scrolling: touch;
/* safety */
position: relative;
min-width: 0;
}
@supports (height: 100dvh) {
body:has(.main-body) .main-body { height: 100dvh; }
}
}
/* 2) Premium scrollbar style (page-wide)
If .main-body is the scroller → it gets styled.
If not → browser falls back to html/body scrollbar. */
html,
body,
.main-body {
scrollbar-width: thin;
scrollbar-color: rgba(191,167,108,.55) rgba(16,18,22,.06);
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.main-body::-webkit-scrollbar {
width: 10px;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.main-body::-webkit-scrollbar-track {
background: rgba(16,18,22,0.04);
border-radius: 999px;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.main-body::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(215,192,138,.55), rgba(215,192,138,.22));
border: 2px solid rgba(255,255,255,0.90);
border-radius: 999px;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.main-body::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, rgba(215,192,138,.68), rgba(215,192,138,.28));
}
/* 3) Extra safety: Any accidental full-bleed 100vw element won’t force x-scroll */
body, .main-body {
overflow-x: hidden !important;
}
/* ========================================================================== */
/* END — SITE-WIDE SINGLE SCROLLBAR GUARD */
/* ========================================================================== */
/* ========================================================================== */
/* ✅ SINGLE SCROLLBAR — RIGHT GAP / THIN STRIP FIX (Paste under previous block) */
/* ========================================================================== */
@supports selector(body:has(.main-body)) {
/* 1) Wrapper gerçekten full genişlik olsun (sağda boş alan kalmasın) */
body:has(.main-body) .main-body{
width: 100vw !important;
max-width: 100vw !important;
margin: 0 !important;
background: #fff !important; /* sağda “farklı zemin†görünmesin */
padding-right: 0 !important; /* bazı temalarda ekstra padding olur */
}
/* 2) Eğer html’de scrollbar-gutter yüzünden ekstra “kenar payı†oluşuyorsa kapat */
@supports (scrollbar-gutter: stable) {
html { scrollbar-gutter: auto !important; }
}
/* 3) Scrollbar’ı daha “ince†ve zemine karışacak şekilde yap (o şerit hissi gider) */
body:has(.main-body) .main-body{
scrollbar-width: thin; /* Firefox */
scrollbar-color: rgba(191,167,108,.55) #ffffff;
}
body:has(.main-body) .main-body::-webkit-scrollbar{
width: 8px; /* Windows’ta sağ şerit daha ince görünür */
}
body:has(.main-body) .main-body::-webkit-scrollbar-track{
background: #ffffff; /* şerit “beyaz boşluk†gibi görünmesin */
}
body:has(.main-body) .main-body::-webkit-scrollbar-thumb{
background: linear-gradient(180deg, rgba(215,192,138,.70), rgba(215,192,138,.25));
border: 2px solid #ffffff;
border-radius: 999px;
}
body:has(.main-body) .main-body::-webkit-scrollbar-thumb:hover{
background: linear-gradient(180deg, rgba(215,192,138,.85), rgba(215,192,138,.30));
}
}
/* =========================================================
PRODUCT DETAIL | SAFE DESKTOP POLISH
Sadece desktop için, mevcut yerleşimi bozmadan ince dokunuş
style.css dosyasının en sonuna ekleyin.
========================================================= */
/* =========================================================
CHECKOUT | FULL-WIDTH WRAPPER SAFETY
Teslimat sayfasında tema wrapper'ları genişliği kısmasın
========================================================= */
@supports selector(body:has(.ts-checkout-shell)) {
body:has(.ts-checkout-shell) .main-body,
body:has(.ts-checkout-shell) .main-body-2{
width: 100% !important;
max-width: none !important;
margin: 0 !important;
}
body:has(.ts-checkout-shell) .main-body-2{
overflow: visible !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
@media (min-width: 992px){
/* Sağ içerik alanı */
.urun-detay-sag-alan{
padding: 10px 0 0 0;
}
.urun-detay-sag-alan-baslik{
font-size: 28px;
line-height: 1.25;
margin-bottom: 12px;
color: #111;
letter-spacing: -0.01em;
}
.urun-detay-baslik-alti{
margin-bottom: 10px;
}
.urun-detay-sag-alan-d-bilgiler{
padding-top: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #efefef;
}
.urun-detay-sag-alan-d-bilgiler-box{
font-size: 12.5px;
color: #555;
margin-right: 16px;
padding-right: 16px;
}
/* Members only / info kutusu */
.urun-detay-fiyat-durumu{
padding: 16px 18px;
border: 1px solid #e7e7e7;
background: #fafafa;
border-radius: 12px;
font-size: 14px;
line-height: 1.45;
font-weight: 600;
color: #111;
}
.urun-detay-fiyat-durumu i{
font-size: 16px;
margin-right: 6px;
}
/* Varyant alanı genel */
.product-detail-variant-div{
margin-right: 14px;
margin-bottom: 16px;
}
.product-detail-variant-div label{
display: block;
margin-bottom: 9px;
font-size: 13px;
font-weight: 600;
line-height: 1.35;
color: #111;
}
.product-detail-variant-div.gem-color-block{
margin-left: 0 !important;
padding-top: 2px;
}
/* Ring size bloÄŸu */
.ring-size-block{
max-width: 360px;
margin-right: 18px !important;
margin-bottom: 16px;
padding: 14px;
border: 1px solid #e8e8e8;
border-radius: 16px;
background: #fcfcfc;
}
[id^="ring-size-swatch-"]{
gap: 9px !important;
}
[id^="ring-size-swatch-"] .row{
gap: 9px !important;
}
[id^="ring-size-swatch-"] .swatch{
min-height: 40px !important;
border: 1px solid #e2e2e2 !important;
border-radius: 10px !important;
background: #fff !important;
box-shadow: none !important;
font-size: 13px !important;
color: #111 !important;
transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
[id^="ring-size-swatch-"] .swatch:hover{
transform: translateY(-1px);
border-color: #cfcfcf !important;
box-shadow: 0 6px 14px rgba(0,0,0,0.05) !important;
}
[id^="ring-size-swatch-"] .swatch.is-selected{
border-color: #111 !important;
box-shadow: inset 0 0 0 1px #111 !important;
}
[id^="ring-size-swatch-"] .qty{
border: 1px solid #e2e2e2 !important;
border-radius: 10px !important;
background: #fff !important;
padding: 4px 5px !important;
}
[id^="ring-size-swatch-"] .qty .btn{
border: 1px solid #e2e2e2 !important;
border-radius: 8px !important;
background: #fff !important;
width: 24px !important;
height: 24px !important;
}
[id^="ring-size-swatch-"] .qty input{
width: 42px !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #111 !important;
}
/* Gem / plating swatch */
.swatch{
transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
.swatch:hover{
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(0,0,0,0.05) !important;
}
.swatch.is-selected{
box-shadow: inset 0 0 0 1px #111 !important;
}
/* CTA alanı */
.urun-detay-sag-alan-sepet{
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
gap: 12px;
padding-top: 12px;
padding-bottom: 10px;
}
.urun-detay-sag-alan-sepet-box{
margin-right: 0;
margin-top: 0;
}
/* Add to cart */
.urun-detay-sag-alan-sepet-box button{
height: 54px;
min-width: 250px;
padding: 0 32px;
border-radius: 12px !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 0.02em;
text-transform: uppercase;
box-shadow: none !important;
transition: transform .18s ease, box-shadow .18s ease !important;
}
.urun-detay-sag-alan-sepet-box button:hover{
transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
}
/* WhatsApp */
.urun-detay-sag-alan-sepet-box-wp{
height: 54px;
min-width: 250px;
padding: 0 28px;
margin-top: 0;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.02em;
text-transform: uppercase;
box-shadow: none;
transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.urun-detay-sag-alan-sepet-box-wp i{
font-size: 18px;
margin-right: 8px;
}
.urun-detay-sag-alan-sepet-box-wp:hover{
transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(37, 211, 102, 0.18);
}
/* Favori / compare */
.urun-detay-sag-alan-urun-islemler-main{
padding-top: 4px;
flex-wrap: wrap;
}
.fav-a,
.fav-b,
.karsilastir-product,
.karsilastir-product-exit{
font-size: 13px;
line-height: 1.35;
margin: 8px 18px 8px 0;
}
.fav-a i,
.fav-b i,
.karsilastir-product i,
.karsilastir-product-exit i{
margin-right: 8px;
}
}
/* =========================================================
PRODUCT DETAIL | MOBILE FINAL FIX
Önce eski mobile patch'leri kaldırın.
Sonra bunu style.css dosyasının en sonuna ekleyin.
========================================================= */
@media (max-width: 991px){
/* Genel mobil iskelet */
.urun-detay-main-in{
width: calc(100% - 24px) !important;
padding: 14px 0 10px 0 !important;
margin-bottom: 14px !important;
display: block !important;
}
.urun-detay-sol-alan{
width: 100% !important;
margin-right: 0 !important;
padding-bottom: 14px !important;
}
.urun-detay-sag-alan{
width: 100% !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.urun-detay-sag-alan-baslik{
font-size: 22px !important;
line-height: 1.28 !important;
margin-bottom: 10px !important;
color: #111 !important;
letter-spacing: -0.01em !important;
}
.urun-detay-baslik-alti{
margin-bottom: 10px !important;
gap: 10px !important;
}
.urun-detay-sag-alan-d-bilgiler{
display: block !important;
padding-top: 10px !important;
padding-bottom: 12px !important;
border-bottom: 1px solid #efefef !important;
}
.urun-detay-sag-alan-d-bilgiler-box{
display: block !important;
margin-right: 0 !important;
padding: 3px 0 !important;
font-size: 12.5px !important;
line-height: 1.45 !important;
color: #555 !important;
}
.urun-detay-fiyat-durumu{
margin-bottom: 14px !important;
padding: 15px 16px !important;
border: 1px solid #e7e7e7 !important;
border-radius: 12px !important;
background: #fafafa !important;
font-size: 13px !important;
line-height: 1.45 !important;
color: #111 !important;
font-weight: 600 !important;
}
/* Varyant wrapper: mobilde alt alta */
.urun-detay-sag-alan form > div[style*="display:flex"]{
display: block !important;
margin-top: 14px !important;
}
.product-detail-variant-div{
width: 100% !important;
margin-right: 0 !important;
margin-left: 0 !important;
margin-bottom: 12px !important;
}
.product-detail-variant-div label{
display: block !important;
margin-bottom: 8px !important;
font-size: 13px !important;
line-height: 1.35 !important;
font-weight: 600 !important;
color: #111 !important;
}
/* Ring size kartı */
.ring-size-block{
width: 100% !important;
max-width: 100% !important;
margin-right: 0 !important;
margin-bottom: 14px !important;
padding: 14px !important;
border: 1px solid #e7e7e7 !important;
border-radius: 16px !important;
background: #fcfcfc !important;
box-sizing: border-box !important;
}
[id^="ring-size-swatch-"]{
margin-top: 8px !important;
gap: 10px !important;
}
[id^="ring-size-swatch-"] .row{
display: grid !important;
grid-template-columns: 1fr 108px !important;
gap: 10px !important;
align-items: center !important;
}
/* Ring size buton yazısı gerçekten ortalansın */
[id^="ring-size-swatch-"] .swatch{
width: 100% !important;
min-width: 0 !important;
min-height: 44px !important;
height: 44px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
padding: 0 12px !important;
padding-left: 12px !important;
text-align: center !important;
background-image: none !important;
border: 1px solid #e3e3e3 !important;
border-radius: 10px !important;
background-color: #fff !important;
box-shadow: none !important;
font-size: 13px !important;
font-weight: 500 !important;
color: #111 !important;
}
[id^="ring-size-swatch-"] .swatch.has-icon{
padding-left: 12px !important;
background-image: none !important;
}
[id^="ring-size-swatch-"] .swatch .swatch-txt{
width: 100% !important;
display: block !important;
text-align: center !important;
white-space: nowrap !important;
}
[id^="ring-size-swatch-"] .swatch.is-selected{
border-color: #111 !important;
box-shadow: inset 0 0 0 1px #111 !important;
}
[id^="ring-size-swatch-"] .qty{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
border: 1px solid #e3e3e3 !important;
border-radius: 10px !important;
background: #fff !important;
padding: 4px 5px !important;
min-height: 44px !important;
box-sizing: border-box !important;
}
[id^="ring-size-swatch-"] .qty .btn{
width: 22px !important;
height: 22px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid #e3e3e3 !important;
border-radius: 7px !important;
background: #fff !important;
}
[id^="ring-size-swatch-"] .qty input{
width: 30px !important;
height: 24px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
text-align: center !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #111 !important;
}
/* Plating / Gem */
.product-detail-variant-div.gem-color-block{
width: 100% !important;
margin-left: 0 !important;
margin-bottom: 12px !important;
padding-top: 0 !important;
}
.swatch-list{
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
align-items: center !important;
}
.swatch{
width: 36px !important;
height: 36px !important;
border-radius: 999px !important;
border: 1px solid #dddddd !important;
box-shadow: none !important;
}
.swatch.is-selected{
border-color: #111 !important;
box-shadow: inset 0 0 0 1px #111 !important;
}
/* CTA alanı: tam genişlik ve hizalı */
.urun-detay-sag-alan-sepet{
width: 100% !important;
display: block !important;
padding-top: 14px !important;
padding-bottom: 8px !important;
}
.urun-detay-sag-alan-sepet-box{
width: 100% !important;
display: block !important;
margin: 0 0 12px 0 !important;
flex: none !important;
}
.urun-detay-sag-alan-sepet-box button{
width: 100% !important;
min-width: 0 !important;
height: 54px !important;
min-height: 54px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 18px !important;
border-radius: 12px !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
text-transform: uppercase !important;
box-sizing: border-box !important;
}
.urun-detay-sag-alan-sepet > .urun-detay-sag-alan-sepet-box-wp{
width: 100% !important;
min-width: 0 !important;
height: 54px !important;
min-height: 54px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 0 12px 0 !important;
padding: 0 18px !important;
border-radius: 12px !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1 !important;
letter-spacing: 0.02em !important;
text-transform: uppercase !important;
box-sizing: border-box !important;
}
.urun-detay-sag-alan-sepet-box-wp i{
font-size: 17px !important;
margin-right: 8px !important;
}
/* Favori / compare */
.urun-detay-sag-alan-urun-islemler-main{
display: block !important;
padding-top: 2px !important;
}
.fav-a,
.fav-b,
.karsilastir-product,
.karsilastir-product-exit{
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
margin: 8px 0 !important;
font-size: 13px !important;
line-height: 1.35 !important;
}
.fav-a i,
.fav-b i,
.karsilastir-product i,
.karsilastir-product-exit i{
margin-right: 8px !important;
}
.urun-detay-desc-main{
width: calc(100% - 24px) !important;
margin-top: 22px !important;
}
}
@media (max-width: 575px){
.urun-detay-main-in{
width: calc(100% - 16px) !important;
padding-top: 12px !important;
}
.urun-detay-sag-alan-baslik{
font-size: 20px !important;
}
.ring-size-block{
padding: 12px !important;
border-radius: 14px !important;
}
[id^="ring-size-swatch-"] .row{
grid-template-columns: 1fr 100px !important;
gap: 8px !important;
}
[id^="ring-size-swatch-"] .swatch{
height: 42px !important;
min-height: 42px !important;
border-radius: 9px !important;
font-size: 12.5px !important;
}
[id^="ring-size-swatch-"] .qty{
min-height: 42px !important;
border-radius: 9px !important;
}
[id^="ring-size-swatch-"] .qty input{
width: 28px !important;
font-size: 12px !important;
}
[id^="ring-size-swatch-"] .qty .btn{
width: 21px !important;
height: 21px !important;
}
.swatch{
width: 34px !important;
height: 34px !important;
}
.urun-detay-sag-alan-sepet-box button,
.urun-detay-sag-alan-sepet > .urun-detay-sag-alan-sepet-box-wp{
height: 52px !important;
min-height: 52px !important;
border-radius: 10px !important;
font-size: 12.5px !important;
}
.urun-detay-desc-main{
width: calc(100% - 16px) !important;
}
}
/* =========================================================
PRODUCT DETAIL | MOBILE FINAL FIX
Önce eski mobile patch'leri kaldırın.
Sonra bunu style.css dosyasının en sonuna ekleyin.
========================================================= */
@media (max-width: 991px){
/* Genel mobil iskelet */
.urun-detay-main-in{
width: calc(100% - 24px) !important;
padding: 14px 0 10px 0 !important;
margin-bottom: 14px !important;
display: block !important;
}
.urun-detay-sol-alan{
width: 100% !important;
margin-right: 0 !important;
padding-bottom: 14px !important;
}
.urun-detay-sag-alan{
width: 100% !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.urun-detay-sag-alan-baslik{
font-size: 22px !important;
line-height: 1.28 !important;
margin-bottom: 10px !important;
color: #111 !important;
letter-spacing: -0.01em !important;
}
.urun-detay-baslik-alti{
margin-bottom: 10px !important;
gap: 10px !important;
}
.urun-detay-sag-alan-d-bilgiler{
display: block !important;
padding-top: 10px !important;
padding-bottom: 12px !important;
border-bottom: 1px solid #efefef !important;
}
.urun-detay-sag-alan-d-bilgiler-box{
display: block !important;
margin-right: 0 !important;
padding: 3px 0 !important;
font-size: 12.5px !important;
line-height: 1.45 !important;
color: #555 !important;
}
.urun-detay-fiyat-durumu{
margin-bottom: 14px !important;
padding: 15px 16px !important;
border: 1px solid #e7e7e7 !important;
border-radius: 12px !important;
background: #fafafa !important;
font-size: 13px !important;
line-height: 1.45 !important;
color: #111 !important;
font-weight: 600 !important;
}
/* Varyant wrapper: mobilde alt alta */
.urun-detay-sag-alan form > div[style*="display:flex"]{
display: block !important;
margin-top: 14px !important;
}
.product-detail-variant-div{
width: 100% !important;
margin-right: 0 !important;
margin-left: 0 !important;
margin-bottom: 12px !important;
}
.product-detail-variant-div label{
display: block !important;
margin-bottom: 8px !important;
font-size: 13px !important;
line-height: 1.35 !important;
font-weight: 600 !important;
color: #111 !important;
}
/* Ring size kartı */
.ring-size-block{
width: 100% !important;
max-width: 100% !important;
margin-right: 0 !important;
margin-bottom: 14px !important;
padding: 14px !important;
border: 1px solid #e7e7e7 !important;
border-radius: 16px !important;
background: #fcfcfc !important;
box-sizing: border-box !important;
}
[id^="ring-size-swatch-"]{
margin-top: 8px !important;
gap: 10px !important;
}
[id^="ring-size-swatch-"] .row{
display: grid !important;
grid-template-columns: 1fr 108px !important;
gap: 10px !important;
align-items: center !important;
}
/* Ring size buton yazısı gerçekten ortalansın */
[id^="ring-size-swatch-"] .swatch{
width: 100% !important;
min-width: 0 !important;
min-height: 44px !important;
height: 44px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
padding: 0 12px !important;
padding-left: 12px !important;
text-align: center !important;
background-image: none !important;
border: 1px solid #e3e3e3 !important;
border-radius: 10px !important;
background-color: #fff !important;
box-shadow: none !important;
font-size: 13px !important;
font-weight: 500 !important;
color: #111 !important;
}
[id^="ring-size-swatch-"] .swatch.has-icon{
padding-left: 12px !important;
background-image: none !important;
}
[id^="ring-size-swatch-"] .swatch .swatch-txt{
width: 100% !important;
display: block !important;
text-align: center !important;
white-space: nowrap !important;
}
[id^="ring-size-swatch-"] .swatch.is-selected{
border-color: #111 !important;
box-shadow: inset 0 0 0 1px #111 !important;
}
[id^="ring-size-swatch-"] .qty{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
border: 1px solid #e3e3e3 !important;
border-radius: 10px !important;
background: #fff !important;
padding: 4px 5px !important;
min-height: 44px !important;
box-sizing: border-box !important;
}
[id^="ring-size-swatch-"] .qty .btn{
width: 22px !important;
height: 22px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid #e3e3e3 !important;
border-radius: 7px !important;
background: #fff !important;
}
[id^="ring-size-swatch-"] .qty input{
width: 30px !important;
height: 24px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
text-align: center !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #111 !important;
}
/* Plating / Gem */
.product-detail-variant-div.gem-color-block{
width: 100% !important;
margin-left: 0 !important;
margin-bottom: 12px !important;
padding-top: 0 !important;
}
.swatch-list{
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
align-items: center !important;
}
.swatch{
width: 36px !important;
height: 36px !important;
border-radius: 999px !important;
border: 1px solid #dddddd !important;
box-shadow: none !important;
}
.swatch.is-selected{
border-color: #111 !important;
box-shadow: inset 0 0 0 1px #111 !important;
}
/* CTA alanı: tam genişlik ve hizalı */
.urun-detay-sag-alan-sepet{
width: 100% !important;
display: block !important;
padding-top: 14px !important;
padding-bottom: 8px !important;
}
.urun-detay-sag-alan-sepet-box{
width: 100% !important;
display: block !important;
margin: 0 0 12px 0 !important;
flex: none !important;
}
.urun-detay-sag-alan-sepet-box button{
width: 100% !important;
min-width: 0 !important;
height: 54px !important;
min-height: 54px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 18px !important;
border-radius: 12px !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
text-transform: uppercase !important;
box-sizing: border-box !important;
}
.urun-detay-sag-alan-sepet > .urun-detay-sag-alan-sepet-box-wp{
width: 100% !important;
min-width: 0 !important;
height: 54px !important;
min-height: 54px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 0 12px 0 !important;
padding: 0 18px !important;
border-radius: 12px !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1 !important;
letter-spacing: 0.02em !important;
text-transform: uppercase !important;
box-sizing: border-box !important;
}
.urun-detay-sag-alan-sepet-box-wp i{
font-size: 17px !important;
margin-right: 8px !important;
}
/* Favori / compare */
.urun-detay-sag-alan-urun-islemler-main{
display: block !important;
padding-top: 2px !important;
}
.fav-a,
.fav-b,
.karsilastir-product,
.karsilastir-product-exit{
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
margin: 8px 0 !important;
font-size: 13px !important;
line-height: 1.35 !important;
}
.fav-a i,
.fav-b i,
.karsilastir-product i,
.karsilastir-product-exit i{
margin-right: 8px !important;
}
.urun-detay-desc-main{
width: calc(100% - 24px) !important;
margin-top: 22px !important;
}
}
@media (max-width: 575px){
.urun-detay-main-in{
width: calc(100% - 16px) !important;
padding-top: 12px !important;
}
.urun-detay-sag-alan-baslik{
font-size: 20px !important;
}
.ring-size-block{
padding: 12px !important;
border-radius: 14px !important;
}
[id^="ring-size-swatch-"] .row{
grid-template-columns: 1fr 100px !important;
gap: 8px !important;
}
[id^="ring-size-swatch-"] .swatch{
height: 42px !important;
min-height: 42px !important;
border-radius: 9px !important;
font-size: 12.5px !important;
}
[id^="ring-size-swatch-"] .qty{
min-height: 42px !important;
border-radius: 9px !important;
}
[id^="ring-size-swatch-"] .qty input{
width: 28px !important;
font-size: 12px !important;
}
[id^="ring-size-swatch-"] .qty .btn{
width: 21px !important;
height: 21px !important;
}
.swatch{
width: 34px !important;
height: 34px !important;
}
.urun-detay-sag-alan-sepet-box button,
.urun-detay-sag-alan-sepet > .urun-detay-sag-alan-sepet-box-wp{
height: 52px !important;
min-height: 52px !important;
border-radius: 10px !important;
font-size: 12.5px !important;
}
.urun-detay-desc-main{
width: calc(100% - 16px) !important;
}
}
/* =========================================================
TAYFUN SILVER | FINAL MODERN OVERRIDES
- Product detail mobile CTA polish
- Category card outer-frame capsule system
- Refined weight / plating / gem interactions
- Favorite centered under Explore
- Clean, bright, modern premium visual language
========================================================= */
/* =========================================================
0) SAFETY / CLEANUP
========================================================= */
.product-card-badge-row,
.product-floating-test-pill,
.product-weight-pill-test-top{
display:none !important;
}
.cat-detail-products,
.cat-detail-products-box,
.cat-detail-products-box-big,
.cat-detail-products-box-list,
.cat-detail-products-box-img,
.cat-detail-products-box-img-big,
.cat-detail-products-box-img-list,
.cat-detail-products-box-img > a,
.cat-detail-products-box-img-big > a,
.cat-detail-products-box-img-list > a{
overflow:visible !important;
}
.cat-detail-products-box,
.cat-detail-products-box-big,
.cat-detail-products-box-list{
position:relative !important;
z-index:1 !important;
}
.cat-detail-products-box:hover,
.cat-detail-products-box-big:hover,
.cat-detail-products-box-list:hover{
z-index:90 !important;
}
.cat-detail-products-box-img,
.cat-detail-products-box-img-big,
.cat-detail-products-box-img-list{
position:relative !important;
z-index:2 !important;
margin-bottom:60px !important;
}
.cat-detail-products-box-img img,
.cat-detail-products-box-img-big img,
.cat-detail-products-box-img-list img{
display:block !important;
position:relative !important;
z-index:1 !important;
}
/* =========================================================
1) PRODUCT DETAIL | MOBILE CTA POLISH
========================================================= */
@media (max-width: 991px){
.urun-detay-sag-alan-sepet{
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
gap:10px !important;
padding-top:16px !important;
padding-bottom:6px !important;
}
.urun-detay-sag-alan-sepet > .urun-detay-sag-alan-sepet-box{
width:100% !important;
margin:0 !important;
flex:0 0 auto !important;
}
.urun-detay-sag-alan-sepet-box,
.urun-detay-sag-alan-sepet-box-wp{
margin:0 !important;
}
.urun-detay-sag-alan-sepet-box button,
.urun-detay-sag-alan-sepet > .urun-detay-sag-alan-sepet-box-wp{
width:100% !important;
min-width:0 !important;
max-width:100% !important;
height:52px !important;
min-height:52px !important;
padding:0 16px !important;
box-sizing:border-box !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
border-radius:12px !important;
text-align:center !important;
line-height:1 !important;
white-space:nowrap !important;
font-size:12.5px !important;
font-weight:600 !important;
letter-spacing:.045em !important;
text-transform:uppercase !important;
}
.urun-detay-sag-alan-sepet-box button{
padding-top:1px !important;
}
.urun-detay-sag-alan-sepet > .urun-detay-sag-alan-sepet-box-wp{
padding-top:1px !important;
}
.urun-detay-sag-alan-sepet > .urun-detay-sag-alan-sepet-box-wp i{
width:18px !important;
height:18px !important;
flex:0 0 18px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
margin:0 2px 0 0 !important;
font-size:16px !important;
line-height:1 !important;
}
}
@media (max-width: 575px){
.urun-detay-sag-alan-sepet-box button,
.urun-detay-sag-alan-sepet > .urun-detay-sag-alan-sepet-box-wp{
height:50px !important;
min-height:50px !important;
border-radius:11px !important;
font-size:12px !important;
letter-spacing:.04em !important;
}
.urun-detay-sag-alan-sepet > .urun-detay-sag-alan-sepet-box-wp i{
width:17px !important;
height:17px !important;
flex:0 0 17px !important;
font-size:15px !important;
}
}
/* =========================================================
2) CATEGORY CARD INFO SPACING RESET
========================================================= */
body .cat-detail-products .cat-detail-products-box-info,
body .cat-detail-products .cat-detail-products-box-info-list,
body .cat-detail-products .cat-detail-products-box-big .cat-detail-products-box-info{
position:relative !important;
z-index:1 !important;
padding-top:0 !important;
}
/* =========================================================
3) SIDE BADGE COLUMNS
- outer frame placement
========================================================= */
.product-side-badges{
position:absolute !important;
top:12px !important;
z-index:95 !important;
display:flex !important;
flex-direction:column !important;
gap:9px !important;
pointer-events:none !important;
}
.product-side-badges-left{
left:-18px !important;
align-items:flex-start !important;
}
.product-side-badges-right{
right:-18px !important;
align-items:flex-end !important;
}
/* =========================================================
4) BADGE BASE
- bright / clean / premium
========================================================= */
.product-side-badge{
position:relative !important;
width:38px !important;
min-width:38px !important;
max-width:38px !important;
height:38px !important;
min-height:38px !important;
max-height:38px !important;
padding:0 !important;
box-sizing:border-box !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:0 !important;
border-radius:999px !important;
border:1px solid rgba(15,23,42,.10) !important;
background:rgba(255,255,255,.92) !important;
color:#667085 !important;
box-shadow:
0 6px 18px rgba(15,23,42,.06),
0 1px 2px rgba(15,23,42,.04) !important;
backdrop-filter:saturate(140%) blur(10px) !important;
-webkit-backdrop-filter:saturate(140%) blur(10px) !important;
white-space:nowrap !important;
line-height:1 !important;
overflow:visible !important;
pointer-events:auto !important;
cursor:pointer !important;
-webkit-tap-highlight-color:transparent !important;
transition:
transform .18s ease,
background .18s ease,
border-color .18s ease,
box-shadow .18s ease !important;
}
.product-side-badge:hover{
transform:translateY(-1px) !important;
background:#ffffff !important;
border-color:rgba(15,23,42,.15) !important;
box-shadow:
0 10px 24px rgba(15,23,42,.08),
0 1px 2px rgba(15,23,42,.05) !important;
}
.product-side-badge:focus,
.product-side-badge:active{
outline:none !important;
}
.product-side-badge-icon{
position:relative !important;
width:38px !important;
min-width:38px !important;
height:38px !important;
flex:0 0 38px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
}
.product-side-badge-icon i{
font-size:11px !important;
line-height:1 !important;
}
.product-side-badge-text{
display:inline-block !important;
max-width:0 !important;
opacity:0 !important;
overflow:hidden !important;
transform:translateX(-6px) !important;
white-space:nowrap !important;
font-size:11px !important;
font-weight:600 !important;
line-height:1 !important;
letter-spacing:.01em !important;
color:#334155 !important;
transition:
max-width .22s ease,
opacity .18s ease,
transform .22s ease !important;
}
/* =========================================================
5) WEIGHT BADGE
- closed by default
- opens on card hover / badge hover
========================================================= */
.product-side-badges .product-side-badge:not(.product-side-badge-capsule){
width:38px !important;
min-width:38px !important;
max-width:38px !important;
height:38px !important;
min-height:38px !important;
max-height:38px !important;
padding:0 !important;
justify-content:center !important;
gap:0 !important;
}
.product-side-badges .product-side-badge:not(.product-side-badge-capsule) .product-side-badge-icon i{
display:inline-block !important;
color:#6b7280 !important;
}
.product-side-badges .product-side-badge:not(.product-side-badge-capsule) .product-side-badge-text{
max-width:0 !important;
opacity:0 !important;
transform:translateX(-6px) !important;
}
.cat-detail-products-box:hover .product-side-badges .product-side-badge:not(.product-side-badge-capsule),
.cat-detail-products-box-big:hover .product-side-badges .product-side-badge:not(.product-side-badge-capsule),
.cat-detail-products-box-list:hover .product-side-badges .product-side-badge:not(.product-side-badge-capsule),
.product-side-badges .product-side-badge:not(.product-side-badge-capsule):hover{
width:88px !important;
min-width:88px !important;
max-width:88px !important;
padding:0 13px 0 0 !important;
justify-content:flex-start !important;
gap:0 !important;
}
.cat-detail-products-box:hover .product-side-badges .product-side-badge:not(.product-side-badge-capsule) .product-side-badge-text,
.cat-detail-products-box-big:hover .product-side-badges .product-side-badge:not(.product-side-badge-capsule) .product-side-badge-text,
.cat-detail-products-box-list:hover .product-side-badges .product-side-badge:not(.product-side-badge-capsule) .product-side-badge-text,
.product-side-badges .product-side-badge:not(.product-side-badge-capsule):hover .product-side-badge-text{
max-width:58px !important;
opacity:1 !important;
transform:translateX(0) !important;
}
/* =========================================================
6) CAPSULE TRIGGER SYSTEM
- trigger stays round
- dropdowns appear separately
========================================================= */
.product-side-badge-capsule{
overflow:visible !important;
}
.product-side-badge-capsule .product-side-badge-text{
display:none !important;
max-width:0 !important;
opacity:0 !important;
}
.product-side-badge-capsule .product-side-badge-icon i{
display:none !important;
}
/* invisible hover bridge */
.product-side-badge-capsule-left::after,
.product-side-badge-capsule-right::after{
content:"";
position:absolute;
background:transparent;
pointer-events:auto;
}
.product-side-badge-capsule-left::after{
top:50%;
left:100%;
width:14px;
height:44px;
transform:translateY(-50%);
}
.product-side-badge-capsule-right::after{
top:100%;
left:50%;
width:44px;
height:14px;
transform:translateX(-50%);
}
/* closed plating icon */
.product-side-badge-capsule-left .product-side-badge-icon::before{
content:"";
position:absolute;
top:50%;
left:50%;
width:14px;
height:14px;
border-radius:999px;
transform:translate(-50%, -50%);
background:
radial-gradient(circle at 30% 28%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.55) 28%, rgba(255,255,255,0) 52%),
linear-gradient(135deg,#a2adb9 0%,#f5f7fa 48%,#98a4b0 100%);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.82),
0 0 0 1px rgba(15,23,42,.10);
}
/* closed gem icon */
.product-side-badge-capsule-right .product-side-badge-icon::before{
content:"\f219";
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
font-family:"FontAwesome";
font-size:13px;
line-height:1;
color:#70798b;
}
/* =========================================================
7) CAPSULE DROPDOWNS
- plating -> horizontal right
- gem -> vertical down
========================================================= */
.product-capsule-items{
position:absolute !important;
margin:0 !important;
padding:0 !important;
opacity:0 !important;
visibility:hidden !important;
pointer-events:none !important;
z-index:130 !important;
transition:
opacity .22s ease,
visibility .22s ease,
transform .22s ease !important;
}
/* plating */
.product-side-badge-capsule-left .product-capsule-items{
top:50% !important;
left:calc(100% + 10px) !important;
right:auto !important;
display:flex !important;
flex-direction:row !important;
align-items:center !important;
gap:8px !important;
transform:translate(-8px, -50%) !important;
}
/* gem */
.product-side-badge-capsule-right .product-capsule-items{
top:calc(100% + 8px) !important;
right:0 !important;
left:auto !important;
display:flex !important;
flex-direction:column !important;
align-items:flex-end !important;
gap:8px !important;
transform:translateY(-6px) !important;
}
/* visible states */
.cat-detail-products-box:hover .product-side-badge-capsule-left .product-capsule-items,
.cat-detail-products-box-big:hover .product-side-badge-capsule-left .product-capsule-items,
.cat-detail-products-box-list:hover .product-side-badge-capsule-left .product-capsule-items,
.product-side-badge-capsule-left:hover .product-capsule-items,
.product-side-badge-capsule-left.is-open .product-capsule-items,
.cat-detail-products-box:hover .product-side-badge-capsule-right .product-capsule-items,
.cat-detail-products-box-big:hover .product-side-badge-capsule-right .product-capsule-items,
.cat-detail-products-box-list:hover .product-side-badge-capsule-right .product-capsule-items,
.product-side-badge-capsule-right:hover .product-capsule-items,
.product-side-badge-capsule-right.is-open .product-capsule-items{
opacity:1 !important;
visibility:visible !important;
pointer-events:auto !important;
}
.cat-detail-products-box:hover .product-side-badge-capsule-left .product-capsule-items,
.cat-detail-products-box-big:hover .product-side-badge-capsule-left .product-capsule-items,
.cat-detail-products-box-list:hover .product-side-badge-capsule-left .product-capsule-items,
.product-side-badge-capsule-left:hover .product-capsule-items,
.product-side-badge-capsule-left.is-open .product-capsule-items{
transform:translate(0, -50%) !important;
}
.cat-detail-products-box:hover .product-side-badge-capsule-right .product-capsule-items,
.cat-detail-products-box-big:hover .product-side-badge-capsule-right .product-capsule-items,
.cat-detail-products-box-list:hover .product-side-badge-capsule-right .product-capsule-items,
.product-side-badge-capsule-right:hover .product-capsule-items,
.product-side-badge-capsule-right.is-open .product-capsule-items{
transform:translateY(0) !important;
}
/* =========================================================
8) CAPSULE ITEMS
========================================================= */
.product-capsule-item{
width:38px !important;
height:38px !important;
padding:3px !important;
box-sizing:border-box !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:999px !important;
border:1px solid rgba(15,23,42,.10) !important;
background:rgba(255,255,255,.98) !important;
box-shadow:
0 6px 18px rgba(15,23,42,.06),
0 1px 2px rgba(15,23,42,.04) !important;
backdrop-filter:saturate(140%) blur(8px) !important;
-webkit-backdrop-filter:saturate(140%) blur(8px) !important;
transition:
transform .18s ease,
border-color .18s ease,
box-shadow .18s ease,
background .18s ease !important;
}
.product-capsule-item:hover{
transform:translateY(-1px) !important;
border-color:rgba(15,23,42,.16) !important;
background:#ffffff !important;
box-shadow:
0 10px 24px rgba(15,23,42,.08),
0 1px 2px rgba(15,23,42,.05) !important;
}
.product-capsule-item.active,
.product-capsule-item.is-active,
.product-capsule-item.selected,
.product-capsule-item[aria-current="true"],
.product-capsule-item[aria-pressed="true"]{
border-color:rgba(59,130,246,.30) !important;
box-shadow:
0 0 0 3px rgba(59,130,246,.10),
0 10px 24px rgba(15,23,42,.08) !important;
background:#ffffff !important;
}
.product-capsule-item img{
width:100% !important;
height:100% !important;
display:block !important;
object-fit:cover !important;
border-radius:999px !important;
}
.product-capsule-item-fill{
width:100% !important;
height:100% !important;
display:block !important;
border-radius:999px !important;
background:#dbe2ea !important;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.35) !important;
}
/* tones */
.product-capsule-item-fill[data-tone="gold"]{
background:linear-gradient(135deg,#b88a2f 0%,#ebd286 50%,#a8771f 100%) !important;
}
.product-capsule-item-fill[data-tone="rose"]{
background:linear-gradient(135deg,#ba808a 0%,#edc1c8 50%,#b96f7d 100%) !important;
}
.product-capsule-item-fill[data-tone="silver"]{
background:linear-gradient(135deg,#a8b1bc 0%,#f5f7fa 50%,#9ba6b1 100%) !important;
}
.product-capsule-item-fill[data-tone="black"]{
background:linear-gradient(135deg,#242933 0%,#48515d 50%,#1d222b 100%) !important;
}
.product-capsule-item-fill[data-tone="blue"]{
background:linear-gradient(135deg,#2e6ce0 0%,#8bdcff 50%,#2458b9 100%) !important;
}
.product-capsule-item-fill[data-tone="green"]{
background:linear-gradient(135deg,#178a56 0%,#73e3a8 50%,#106a42 100%) !important;
}
.product-capsule-item-fill[data-tone="red"]{
background:linear-gradient(135deg,#b42318 0%,#f07a73 50%,#8b1d14 100%) !important;
}
.product-capsule-item-fill[data-tone="purple"]{
background:linear-gradient(135deg,#6d42c2 0%,#baa6ff 50%,#5c36a3 100%) !important;
}
.product-capsule-item-fill[data-tone="white"]{
background:linear-gradient(135deg,#f7f8fa 0%,#ffffff 52%,#dde4eb 100%) !important;
}
.product-capsule-item-fill[data-tone="brown"]{
background:linear-gradient(135deg,#7c5b44 0%,#b88e6d 50%,#654631 100%) !important;
}
.product-capsule-item-fill[data-tone="multi"]{
background:linear-gradient(135deg,#2d6cdf 0%,#19c37d 25%,#f59e0b 50%,#ef4444 75%,#8b5cf6 100%) !important;
}
.product-capsule-item-fill[data-tone="neutral"]{
background:linear-gradient(135deg,#c9d2dc 0%,#eef3f7 50%,#b8c3cf 100%) !important;
}
/* =========================================================
9) FAVORITE UNDER EXPLORE
========================================================= */
/* old favorite placements hidden */
.cat-detail-products-box-cart-1 a.product-fav-go,
.cat-detail-products-box-cart-1 a.product-fav-del,
.cat-detail-products-box-cart-1 a[data-target="#loginModal"],
.cat-detail-products-box-cart-2 a.product-fav-go,
.cat-detail-products-box-cart-2 a.product-fav-del,
.cat-detail-products-box-cart-2 a[data-target="#loginModal"],
.cat-detail-products-box-info .product-fav-go,
.cat-detail-products-box-info .product-fav-del,
.cat-detail-products-box-info-list .product-fav-go,
.cat-detail-products-box-info-list .product-fav-del{
display:none !important;
}
.product-fav-under-explore{
position:absolute !important;
left:50% !important;
bottom:-44px !important;
transform:translateX(-50%) !important;
z-index:45 !important;
width:36px !important;
height:36px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
.product-fav-under-explore a,
.product-fav-under-explore a.product-fav-go,
.product-fav-under-explore a.product-fav-del,
.product-fav-under-explore a[data-target="#loginModal"]{
position:relative !important;
top:auto !important;
right:auto !important;
bottom:auto !important;
left:auto !important;
transform:none !important;
width:100% !important;
height:100% !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:999px !important;
border:1px solid rgba(15,23,42,.10) !important;
background:rgba(255,255,255,.94) !important;
color:rgba(15,23,42,.52) !important;
text-decoration:none !important;
box-shadow:
0 6px 18px rgba(15,23,42,.06),
0 1px 2px rgba(15,23,42,.04) !important;
backdrop-filter:saturate(140%) blur(10px) !important;
-webkit-backdrop-filter:saturate(140%) blur(10px) !important;
transition:
transform .18s ease,
background .18s ease,
border-color .18s ease,
color .18s ease,
box-shadow .18s ease !important;
}
.product-fav-under-explore a i{
font-size:14px !important;
line-height:1 !important;
}
.product-fav-under-explore a:hover{
transform:translateY(-1px) !important;
background:#ffffff !important;
border-color:rgba(15,23,42,.16) !important;
color:rgba(15,23,42,.78) !important;
box-shadow:
0 10px 24px rgba(15,23,42,.08),
0 1px 2px rgba(15,23,42,.05) !important;
}
/* =========================================================
10) FOCUS STATES
========================================================= */
.product-side-badge:focus-visible,
.product-capsule-item:focus-visible,
.product-fav-under-explore a:focus-visible{
outline:none !important;
box-shadow:
0 0 0 3px rgba(59,130,246,.10),
0 10px 24px rgba(15,23,42,.08) !important;
border-color:rgba(59,130,246,.28) !important;
}
/* =========================================================
11) MOBILE
========================================================= */
@media (max-width: 768px){
.cat-detail-products-box-img,
.cat-detail-products-box-img-big,
.cat-detail-products-box-img-list{
margin-bottom:54px !important;
}
.product-side-badges{
top:10px !important;
gap:7px !important;
}
.product-side-badges-left{
left:-14px !important;
}
.product-side-badges-right{
right:-14px !important;
}
.product-side-badge{
width:34px !important;
min-width:34px !important;
max-width:34px !important;
height:34px !important;
min-height:34px !important;
max-height:34px !important;
}
.product-side-badge-icon{
width:34px !important;
min-width:34px !important;
height:34px !important;
flex:0 0 34px !important;
}
.product-side-badge-capsule-left .product-side-badge-icon::before{
width:12px;
height:12px;
}
.product-side-badge-capsule-right .product-side-badge-icon::before{
font-size:12px;
}
.product-side-badge-capsule-left::after{
width:12px;
height:40px;
}
.product-side-badge-capsule-right::after{
width:40px;
height:12px;
}
.cat-detail-products-box:hover .product-side-badges .product-side-badge:not(.product-side-badge-capsule),
.cat-detail-products-box-big:hover .product-side-badges .product-side-badge:not(.product-side-badge-capsule),
.cat-detail-products-box-list:hover .product-side-badges .product-side-badge:not(.product-side-badge-capsule),
.product-side-badges .product-side-badge:not(.product-side-badge-capsule):hover{
width:76px !important;
min-width:76px !important;
max-width:76px !important;
padding:0 10px 0 0 !important;
}
.cat-detail-products-box:hover .product-side-badges .product-side-badge:not(.product-side-badge-capsule) .product-side-badge-text,
.cat-detail-products-box-big:hover .product-side-badges .product-side-badge:not(.product-side-badge-capsule) .product-side-badge-text,
.cat-detail-products-box-list:hover .product-side-badges .product-side-badge:not(.product-side-badge-capsule) .product-side-badge-text,
.product-side-badges .product-side-badge:not(.product-side-badge-capsule):hover .product-side-badge-text{
max-width:44px !important;
}
.product-side-badge-capsule-left .product-capsule-items{
left:calc(100% + 8px) !important;
gap:6px !important;
}
.product-side-badge-capsule-right .product-capsule-items{
gap:6px !important;
}
.product-capsule-item{
width:34px !important;
height:34px !important;
}
.product-fav-under-explore{
width:34px !important;
height:34px !important;
bottom:-40px !important;
}
}
/* =========================================================
12) REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce){
.product-side-badge,
.product-side-badge-text,
.product-capsule-items,
.product-capsule-item,
.product-fav-under-explore a{
transition:none !important;
}
}
/* =========================================================
PLATING SWATCH PNG HARÄ°TASI
title -> /i/variants/plating/*.png
========================================================= */
button.variant-swatch[title="Oxide"]{
background-image:url("/i/variants/plating/oxide.png") !important;
background-size:cover !important;
background-position:center center !important;
background-repeat:no-repeat !important;
}
button.variant-swatch[title="Multi"]{
background-image:url("/i/variants/plating/multi.png") !important;
background-size:cover !important;
background-position:center center !important;
background-repeat:no-repeat !important;
}
button.variant-swatch[title="Silver"]{
background-image:url("/i/variants/plating/silver.png") !important;
background-size:cover !important;
background-position:center center !important;
background-repeat:no-repeat !important;
}
button.variant-swatch[title="Gold"]{
background-image:url("/i/variants/plating/gold.png") !important;
background-size:cover !important;
background-position:center center !important;
background-repeat:no-repeat !important;
}
button.variant-swatch[title="Rose"]{
background-image:url("/i/variants/plating/rose.png") !important;
background-size:cover !important;
background-position:center center !important;
background-repeat:no-repeat !important;
}
button.variant-swatch[title="Rhodium"]{
background-image:url("/i/variants/plating/rhodium.png") !important;
background-size:cover !important;
background-position:center center !important;
background-repeat:no-repeat !important;
}
/* =========================================================
ÖDEME BİLDİRİMİ SAYFASI – MODERN / KOMPAKT GÜNCELLEME
Bu bloğu style.css içine EKLE.
========================================================= */
.odeme-bildirim-main-div{
width:100%;
}
.odeme-bildirim-page-note{
width:100%;
box-sizing:border-box;
margin:0 0 20px 0;
padding:16px 18px;
border:1px solid #e8ebef;
border-left:4px solid #d3b15a;
border-radius:10px;
background:#fffdf7;
}
.odeme-bildirim-page-note-badge{
display:inline-flex;
align-items:center;
gap:8px;
font-size:12px;
font-weight:700;
letter-spacing:.8px;
text-transform:uppercase;
color:#121826;
margin-bottom:8px;
}
.odeme-bildirim-page-note-badge i{
font-size:16px;
color:#121826;
}
.odeme-bildirim-page-note-text{
font-size:14px;
line-height:1.8;
color:#5f6673;
}
.odeme-bildirim-boxes-flex{
width:100%;
display:flex;
gap:18px;
align-items:stretch;
}
.odeme-bildirim-box{
background:#fff;
border:1px solid #e8ebef;
border-radius:12px;
box-sizing:border-box;
padding:24px;
box-shadow:0 10px 30px rgba(15, 23, 42, 0.04);
min-width:0;
}
.odeme-bildirim-box:nth-child(1){
flex:1.08;
}
.odeme-bildirim-box:nth-child(2){
flex:1.10;
}
.odeme-bildirim-box:nth-child(3){
flex:.92;
}
.odeme-bildirim-box-hed{
font-size:22px;
line-height:1.3;
font-weight:700;
color:#121826;
margin-bottom:18px;
}
.odeme-bildirim-box-account-div{
max-height:520px;
overflow:auto;
padding-right:6px;
}
.odeme-bildirim-box-account-div::-webkit-scrollbar{
width:8px;
}
.odeme-bildirim-box-account-div::-webkit-scrollbar-thumb{
background:#d8dee8;
border-radius:999px;
}
.odeme-bildirim-box-account-div::-webkit-scrollbar-track{
background:#f3f5f8;
}
.odeme-bildirim-banka-radio{
position:relative;
margin-bottom:14px;
}
.odeme-bildirim-banka-radio input[type="radio"]{
position:absolute;
left:16px;
top:18px;
z-index:2;
transform:scale(1.1);
accent-color:#1f2b44;
}
.odeme-bildirim-banka-radio label{
display:block;
margin:0;
padding:16px 16px 16px 46px;
border:1px solid #e5e7eb;
border-radius:12px;
background:#fff;
cursor:pointer;
transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease, background-color .18s ease;
}
.odeme-bildirim-banka-radio label:hover{
border-color:#cfd6e2;
box-shadow:0 8px 18px rgba(15, 23, 42, 0.05);
background:#fbfcfe;
}
.odeme-bildirim-banka-radio input[type="radio"]:checked + label{
border-color:#1f2b44;
box-shadow:0 0 0 3px rgba(31, 43, 68, 0.08);
background:#f8fafc;
}
.odeme-bildirim-banka-radio-hed{
display:flex;
align-items:center;
gap:12px;
margin-bottom:12px;
}
.odeme-bildirim-banka-radio-hed-img{
width:84px;
min-width:84px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid #eef1f4;
border-radius:10px;
background:#fff;
padding:6px;
box-sizing:border-box;
}
.odeme-bildirim-banka-radio-hed-img img{
max-width:100%;
max-height:100%;
display:block;
}
.odeme-bildirim-banka-radio-bank{
font-size:15px;
font-weight:700;
color:#121826;
line-height:1.5;
}
.odeme-bildirim-banka-radio-text{
font-size:13px;
line-height:1.8;
color:#616b7a;
word-break:break-word;
}
.odeme-bildirim-banka-radio-text strong{
color:#121826;
}
.odeme-bildirim-amount-box{
border:1px solid #e8ebef !important;
border-radius:12px;
background:#f8fafc !important;
padding:16px 18px !important;
margin-bottom:14px !important;
color:#121826 !important;
font-size:15px !important;
line-height:1.8 !important;
}
.odeme-bildirim-amount-box strong{
display:block;
margin-top:4px;
font-size:22px;
line-height:1.3;
color:#121826;
}
.odeme-bildirim-inline-note{
margin-bottom:16px;
padding:14px 16px;
border:1px solid #e8ebef;
border-left:4px solid #7b8798;
border-radius:10px;
background:#fbfcfd;
font-size:13px;
line-height:1.8;
color:#5f6673;
}
.odeme-bildirim-box-form .form-group{
margin-bottom:16px;
}
.odeme-bildirim-box-form label{
font-size:13px;
font-weight:700;
color:#121826;
margin-bottom:8px;
}
.odeme-bildirim-box-form .form-control{
height:46px;
border:1px solid #d8dee8;
border-radius:10px;
box-shadow:none;
font-size:14px;
color:#121826;
background:#fff;
}
.odeme-bildirim-box-form textarea.form-control{
height:auto;
min-height:92px;
padding-top:12px;
resize:vertical;
}
.odeme-bildirim-box-form .form-control:focus{
border-color:#1f2b44;
box-shadow:0 0 0 3px rgba(31, 43, 68, 0.08);
}
.odeme-bildirim-box-form #shopButton{
width:100% !important;
border-radius:10px !important;
font-weight:700 !important;
letter-spacing:.2px;
padding:12px 16px !important;
}
.odeme-bildirim-box-help{
background:linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}
.odeme-bildirim-box-spot{
font-size:16px;
line-height:1.8;
color:#121826;
margin-bottom:14px;
}
.odeme-bildirim-box-spot-strong{
font-weight:700;
}
.odeme-bildirim-box-spotsm{
font-size:14px;
line-height:1.9;
color:#616b7a;
}
.odeme-bildirim-mini-steps{
margin-top:18px;
display:flex;
flex-direction:column;
gap:10px;
}
.odeme-bildirim-mini-step{
display:flex;
align-items:center;
gap:10px;
font-size:13px;
font-weight:600;
color:#121826;
padding:10px 12px;
border:1px solid #e8ebef;
border-radius:10px;
background:#fff;
}
.odeme-bildirim-mini-step span{
width:24px;
height:24px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:999px;
background:#1f2b44;
color:#fff;
font-size:12px;
font-weight:700;
}
@media screen and (max-width: 1280px){
.odeme-bildirim-boxes-flex{
gap:14px;
}
.odeme-bildirim-box{
padding:20px;
}
.odeme-bildirim-box-hed{
font-size:20px;
}
}
@media screen and (max-width: 991px){
.odeme-bildirim-boxes-flex{
flex-direction:column;
}
.odeme-bildirim-box:nth-child(1),
.odeme-bildirim-box:nth-child(2),
.odeme-bildirim-box:nth-child(3){
flex:1 1 auto;
}
.odeme-bildirim-box-account-div{
max-height:none;
overflow:visible;
padding-right:0;
}
}
@media screen and (max-width: 768px){
.odeme-bildirim-page-note{
padding:14px 14px;
margin-bottom:16px;
}
.odeme-bildirim-page-note-badge{
font-size:11px;
letter-spacing:.6px;
}
.odeme-bildirim-page-note-text,
.odeme-bildirim-box-spotsm,
.odeme-bildirim-inline-note{
font-size:13px;
line-height:1.75;
}
.odeme-bildirim-box{
padding:16px;
border-radius:10px;
}
.odeme-bildirim-box-hed{
font-size:18px;
margin-bottom:14px;
}
.odeme-bildirim-banka-radio label{
padding:14px 14px 14px 42px;
}
.odeme-bildirim-banka-radio input[type="radio"]{
left:14px;
top:16px;
}
.odeme-bildirim-banka-radio-hed{
gap:10px;
}
.odeme-bildirim-banka-radio-hed-img{
width:72px;
min-width:72px;
height:44px;
}
.odeme-bildirim-banka-radio-bank{
font-size:14px;
}
.odeme-bildirim-amount-box strong{
font-size:20px;
}
.odeme-bildirim-box-form .form-control{
height:44px;
}
.odeme-bildirim-box-form textarea.form-control{
min-height:86px;
}
}
/* =========================================================
siparis_takip.php — MODERN STYLE PATCH
Append to style.css
========================================================= */
.user_subpage_coupon_content{
border:1px solid #e8ebef;
border-radius:14px;
background:#fff;
padding:22px;
box-shadow:0 10px 28px rgba(15,23,42,.04);
}
.user_subpage_flex_header{
margin-bottom:18px;
}
.user_subpage_flex_header_h{
font-size:32px;
line-height:1.2;
font-weight:700;
color:#111827;
letter-spacing:-.02em;
}
.ts-order-hero{
border:1px solid #e8ebef;
background:linear-gradient(180deg,#fcfcfd 0%,#f7f9fc 100%);
border-radius:14px;
padding:22px;
margin-bottom:18px;
}
.ts-order-hero-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:18px;
margin-bottom:18px;
}
.ts-order-eyebrow{
font-size:11px;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
color:#8a94a6;
margin-bottom:8px;
}
.ts-order-title{
font-size:30px;
line-height:1.2;
font-weight:700;
color:#101828;
margin-bottom:8px;
word-break:break-word;
}
.ts-order-subtitle{
max-width:760px;
font-size:14px;
line-height:1.8;
color:#667085;
}
.ts-order-status-pill{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:10px 16px;
border:1px solid #d9e1ec;
border-radius:999px;
background:#fff;
color:#111827;
font-size:13px;
font-weight:700;
white-space:nowrap;
}
.ts-order-meta-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
}
.ts-order-meta-card{
border:1px solid #e8ebef;
border-radius:12px;
background:#fff;
padding:16px 16px 14px 16px;
min-height:96px;
}
.ts-order-meta-label{
font-size:11px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1.3px;
color:#98a2b3;
margin-bottom:10px;
}
.ts-order-meta-value{
font-size:14px;
line-height:1.7;
font-weight:600;
color:#111827;
word-break:break-word;
}
.ts-order-actions{
display:flex;
justify-content:flex-start;
align-items:center;
flex-wrap:wrap;
gap:12px;
margin-top:18px;
}
.ts-order-actions a{
min-width:220px;
border-radius:9px !important;
font-weight:700 !important;
padding:12px 18px !important;
}
.ticket-detail-form-area{
margin-bottom:16px;
}
.ticket-detail-form-area label{
display:block;
font-size:11px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1.2px;
color:#98a2b3;
margin-bottom:6px;
}
.user_subpage_info_div_blue_2{
border-radius:12px;
padding:16px 18px;
}
.ts-order-flow-card{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:18px;
border:1px solid #e8ebef;
border-radius:14px;
background:#fff;
padding:18px 20px;
margin-top:14px;
margin-bottom:6px;
}
.ts-order-flow-card--pending{
background:#fffaf0;
border-color:#f0dfb4;
}
.ts-order-flow-card--info{
background:#f8fafc;
border-color:#dce6f2;
}
.ts-order-flow-card--success{
background:#f2fbf4;
border-color:#bde3c5;
}
.ts-order-flow-card--danger{
background:#fff3f2;
border-color:#f5c2be;
}
.ts-order-flow-icon{
width:42px;
min-width:42px;
height:42px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#fff;
border:1px solid rgba(17,24,39,.08);
font-size:18px;
color:#111827;
}
.ts-order-flow-copy{
flex:1;
min-width:0;
}
.ts-order-flow-title{
font-size:17px;
line-height:1.35;
font-weight:700;
color:#111827;
margin-bottom:6px;
}
.ts-order-flow-text{
font-size:14px;
line-height:1.85;
color:#5f6b7a;
}
.ts-order-flow-amount{
margin-top:12px;
font-size:14px;
color:#475467;
}
.ts-order-flow-amount strong{
color:#111827;
font-size:16px;
margin-left:8px;
}
.ts-order-flow-actions{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:10px;
}
.ts-order-flow-actions a{
min-width:220px;
text-align:center;
border-radius:9px !important;
font-weight:700 !important;
padding:12px 18px !important;
}
.account_subpage_order_address_main{
gap:16px;
margin-top:18px;
}
.account_subpage_order_address_left,
.account_subpage_order_address_right{
border:1px solid #e8ebef;
border-radius:14px;
background:#fff;
padding:20px;
box-shadow:0 8px 22px rgba(15,23,42,.03);
}
.account_subpage_order_address_h{
font-size:15px;
font-weight:700;
color:#111827;
margin-bottom:14px;
}
.account_subpage_order_products_main{
margin-top:20px;
}
.account_subpage_order_products_box{
border:1px solid #e8ebef;
border-radius:14px;
overflow:hidden;
background:#fff;
box-shadow:0 8px 24px rgba(15,23,42,.03);
margin-bottom:16px;
}
.account_subpage_order_products_box_hed{
padding:18px;
}
.account_subpage_order_products_box_fot{
padding:18px;
background:#fafbfc;
border-top:1px solid #edf1f5;
}
.account_subpage_summary_order_main{
margin-top:18px;
}
.account_subpage_summary_order_in{
width:360px;
max-width:100%;
}
.account_subpage_summary_order_freedelivery,
.account_subpage_summary_order_discount_coupon{
border:1px solid #e8ebef;
border-radius:12px;
background:#fff;
padding:14px 16px;
}
.account_subpage_summary_order_box{
border:1px solid #e8ebef;
border-radius:14px;
background:#fff;
color:#111827;
padding:22px 20px;
box-shadow:0 8px 24px rgba(15,23,42,.03);
}
.account_subpage_summary_order_box_h{
font-size:18px;
font-weight:700;
margin-bottom:18px;
color:#111827;
}
.account_subpage_summary_order_box_s{
font-size:14px;
padding-bottom:10px;
margin-bottom:10px;
}
.account_subpage_summary_order_box_s_left{
color:#667085;
}
.account_subpage_summary_order_box_s_right{
color:#111827;
font-weight:700;
}
@media screen and (max-width: 1199px){
.ts-order-meta-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media screen and (max-width: 767px){
.user_subpage_coupon_content{
border-radius:12px;
padding:14px;
}
.user_subpage_flex_header_h{
font-size:24px;
}
.ts-order-hero{
padding:16px;
border-radius:12px;
}
.ts-order-hero-top{
flex-direction:column;
align-items:flex-start;
margin-bottom:14px;
}
.ts-order-title{
font-size:24px;
}
.ts-order-subtitle{
font-size:13px;
line-height:1.75;
}
.ts-order-meta-grid{
grid-template-columns:1fr;
gap:10px;
}
.ts-order-actions a,
.ts-order-flow-actions a{
width:100%;
min-width:100%;
}
.ts-order-flow-card{
flex-direction:column;
padding:16px;
}
.ts-order-flow-actions{
width:100%;
align-items:stretch;
}
.account_subpage_order_address_left,
.account_subpage_order_address_right,
.account_subpage_summary_order_box{
border-radius:12px;
padding:16px;
}
.account_subpage_order_products_box_hed,
.account_subpage_order_products_box_fot{
padding:14px;
}
}
/* =========================================================
PRODUCT DETAIL | PREPARATION TIME CARD
- product-detail-sepete-ekle.php içindeki
.ts-product-prep-note kartı için
========================================================= */
.ts-product-prep-note{
width:100%;
max-width:none;
margin:18px 0 16px 0;
padding:15px 16px;
box-sizing:border-box;
display:flex;
align-items:flex-start;
gap:12px;
border:1px solid #e8ded1;
border-radius:18px;
background:linear-gradient(180deg,#fffdfa 0%,#faf6ef 100%);
box-shadow:none;
transition:
border-color .18s ease,
box-shadow .18s ease,
transform .18s ease;
}
.ts-product-prep-note:hover{
border-color:#ddd1c1;
box-shadow:0 12px 24px rgba(15, 23, 42, 0.04);
transform:translateY(-1px);
}
.ts-product-prep-note-icon{
width:32px;
min-width:32px;
max-width:32px;
height:32px;
min-height:32px;
max-height:32px;
display:flex;
align-items:center;
justify-content:center;
flex:0 0 32px;
border:1px solid #e4d9ca;
border-radius:999px;
background:#ffffff;
color:#6a5735;
margin-top:1px;
box-sizing:border-box;
}
.ts-product-prep-note-icon i{
font-size:14px;
line-height:1;
}
.ts-product-prep-note-copy{
flex:1 1 auto;
min-width:0;
}
.ts-product-prep-note-title{
margin:0 0 4px 0;
padding:0;
font-size:11.5px;
font-weight:700;
line-height:1.25;
letter-spacing:.11em;
text-transform:uppercase;
color:#6c7280;
}
.ts-product-prep-note-text{
margin:0;
padding:0;
font-size:13px;
font-weight:400;
line-height:1.55;
color:#3f4754;
}
/* Kart geldikten sonra CTA grubunda ekstra boÅŸluk birikmesin */
.ts-product-prep-note + .urun-detay-sag-alan-sepet{
margin-top:0 !important;
}
@media (max-width: 991px){
.ts-product-prep-note{
max-width:none;
margin:16px 0 16px 0;
padding:14px 15px;
gap:12px;
border-radius:13px;
}
.ts-product-prep-note-icon{
width:32px;
min-width:32px;
max-width:32px;
height:32px;
min-height:32px;
max-height:32px;
flex:0 0 32px;
}
.ts-product-prep-note-icon i{
font-size:14px;
}
.ts-product-prep-note-title{
font-size:12px;
letter-spacing:.075em;
}
.ts-product-prep-note-text{
font-size:13px;
line-height:1.55;
}
}
@media (max-width: 575px){
.ts-product-prep-note{
margin:14px 0 16px 0;
padding:14px 14px;
gap:10px;
border-radius:12px;
}
.ts-product-prep-note-icon{
width:30px;
min-width:30px;
max-width:30px;
height:30px;
min-height:30px;
max-height:30px;
flex:0 0 30px;
}
.ts-product-prep-note-icon i{
font-size:13px;
}
.ts-product-prep-note-title{
margin-bottom:3px;
font-size:11.5px;
}
.ts-product-prep-note-text{
font-size:12.5px;
line-height:1.5;
}
}
/* =========================================================
Product Detail Variant Layout Refinement
- Ring size solda sabit kart
- Plating ve gem saÄŸda daha derli toplu kartlar
========================================================= */
.urun-detay-sag-alan .product-detail-variant-layout{
width:100%;
display:grid !important;
grid-template-columns:minmax(285px,340px) minmax(240px,1fr);
gap:18px !important;
align-items:start !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .product-detail-variant-div{
margin:0 !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .ring-size-block{
grid-column:1;
grid-row:1 / span 2;
width:100% !important;
max-width:340px !important;
margin:0 !important;
margin-right:0 !important;
margin-bottom:0 !important;
justify-self:start;
}
.urun-detay-sag-alan .product-detail-variant-layout > .plating-color-block,
.urun-detay-sag-alan .product-detail-variant-layout > .gem-color-block{
grid-column:auto;
grid-row:auto;
}
.urun-detay-sag-alan .product-detail-variant-layout > .ring-size-block ~ .plating-color-block{
grid-column:2;
grid-row:1;
}
.urun-detay-sag-alan .product-detail-variant-layout > .ring-size-block ~ .gem-color-block{
grid-column:2;
grid-row:2;
}
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block{
width:100% !important;
display:flex !important;
flex-direction:column !important;
flex-wrap:nowrap !important;
align-self:stretch;
padding:16px 18px 18px;
border:1px solid rgba(15,23,42,.10);
border-radius:18px;
background:linear-gradient(180deg,#fff 0%,#fbfaf8 100%);
box-shadow:0 18px 38px rgba(15,23,42,.07);
min-height:136px;
}
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block.gem-color-block{
margin-left:0 !important;
margin-bottom:0 !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block .variant-block-head{
width:100%;
margin:0 0 12px;
}
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block .variant-block-head label{
display:block;
margin:0 !important;
font-size:12.5px !important;
font-weight:800 !important;
letter-spacing:.08em;
text-transform:uppercase;
color:#4b5563;
}
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block .variant-option-list{
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;
}
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block .variant-choice{
position:relative;
margin:0 !important;
padding:0 !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block .variant-choice .custom-control-input{
position:absolute;
opacity:0;
pointer-events:none;
}
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block .variant-choice .custom-control-label{
display:inline-flex !important;
align-items:center;
justify-content:center;
min-width:54px;
min-height:54px;
margin:0 !important;
padding:0 !important;
border:1px solid rgba(15,23,42,.12);
border-radius:16px;
background:linear-gradient(180deg,#fff 0%,#f8fafc 100%);
box-shadow:0 10px 24px rgba(15,23,42,.08);
cursor:pointer;
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block .variant-choice .custom-control-label::before,
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block .variant-choice .custom-control-label::after{
display:none !important;
content:none !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block .variant-choice .custom-control-label:hover{
transform:translateY(-1px);
border-color:rgba(17,24,39,.24);
box-shadow:0 14px 30px rgba(15,23,42,.12);
}
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block .variant-choice .custom-control-input:checked + .custom-control-label{
border-color:#111827 !important;
box-shadow:0 0 0 4px rgba(17,24,39,.08), 0 18px 34px rgba(15,23,42,.12);
}
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block .variant-choice .custom-control-input:disabled + .custom-control-label{
opacity:.42;
cursor:not-allowed;
box-shadow:none;
}
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block .variant-choice .custom-control-label img{
display:block;
object-fit:cover;
}
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block .variant-choice .variant-option-text{
display:inline-block;
padding:0 14px;
font-size:13px;
font-weight:700;
line-height:1;
white-space:nowrap;
color:#111827;
}
.urun-detay-sag-alan .product-detail-variant-layout > .plating-color-block .variant-choice .custom-control-label{
min-width:58px;
min-height:58px;
border-radius:18px;
}
.urun-detay-sag-alan .product-detail-variant-layout > .plating-color-block .variant-choice .custom-control-label img{
width:40px !important;
height:40px !important;
border-radius:12px;
}
.urun-detay-sag-alan .product-detail-variant-layout > .gem-color-block .variant-choice .custom-control-label img{
width:36px !important;
height:36px !important;
border-radius:50%;
}
@media (max-width: 991px){
.urun-detay-sag-alan .product-detail-variant-layout{
display:flex !important;
flex-wrap:wrap !important;
gap:14px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .product-detail-variant-div{
width:100% !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .ring-size-block,
.urun-detay-sag-alan .product-detail-variant-layout > .plating-color-block,
.urun-detay-sag-alan .product-detail-variant-layout > .gem-color-block{
grid-column:auto;
grid-row:auto;
}
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block{
min-height:unset;
padding:14px 15px 16px;
}
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block .variant-block-head{
margin-bottom:10px;
}
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block .variant-option-list{
gap:8px;
}
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block .variant-choice .custom-control-label{
min-width:50px;
min-height:50px;
}
}
/* =========================================================
Product Detail Overall Polish
- title, meta, social, price, info strip, CTA
========================================================= */
.urun-detay-sag-alan{
padding:28px 22px 24px !important;
}
.urun-detay-sag-alan-baslik{
margin:0 0 12px !important;
font-size:26px !important;
line-height:1.22 !important;
font-weight:700 !important;
letter-spacing:-0.02em;
color:#16181d !important;
max-width:18ch;
}
.urun-detay-sag-alan-iliskili-kat{
margin-bottom:12px !important;
}
.urun-detay-sag-alan-iliskili-kat,
.urun-detay-sag-alan-iliskili-kat a{
font-size:12.5px !important;
line-height:1.4;
color:#5f6472 !important;
letter-spacing:.02em;
}
.urun-detay-sag-alan-iliskili-kat i{
margin:0 8px !important;
color:#8b92a1;
}
.urun-detay-baslik-alti{
width:100%;
display:flex;
align-items:center;
justify-content:flex-start;
gap:12px;
margin:0 0 18px;
}
.urun-detay-social{
display:flex;
flex-wrap:wrap;
gap:8px;
}
.urun-detay-social a{
width:34px;
height:34px;
margin-right:0 !important;
padding:0 !important;
display:inline-flex !important;
align-items:center;
justify-content:center;
border:1px solid rgba(15,23,42,.12);
border-radius:999px;
background:#fff;
color:#111827 !important;
font-size:15px !important;
line-height:1 !important;
box-shadow:0 8px 18px rgba(15,23,42,.06);
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
}
.urun-detay-social a:hover{
transform:translateY(-1px);
border-color:rgba(17,24,39,.22);
box-shadow:0 12px 24px rgba(15,23,42,.10);
color:#000 !important;
}
.urun-detay-sag-alan-fiyatlar{
width:100%;
display:grid !important;
grid-template-columns:minmax(0,1fr) auto;
align-items:end;
gap:14px;
margin:0 0 12px !important;
padding:18px 0 14px !important;
border-bottom:1px solid rgba(15,23,42,.08) !important;
}
.urun-detay-sag-alan-fiyat-sol{
width:auto !important;
display:flex !important;
flex-direction:column;
align-items:flex-start !important;
justify-content:flex-start !important;
gap:5px;
}
.urun-detay-sag-alan-fiyat-sol > *:first-child{
font-size:11.5px !important;
font-weight:800 !important;
text-transform:uppercase;
letter-spacing:.09em;
color:#7a818f !important;
}
.urun-detay-sag-alan-fiyat-sag{
padding-left:0 !important;
text-align:left;
font-size:28px !important;
line-height:1 !important;
font-weight:800 !important;
letter-spacing:-0.03em;
color:#111827 !important;
white-space:nowrap;
}
.urun-detay-sag-alan-fiyat-sag #item-price,
.urun-detay-sag-alan-fiyat-sag #item-price2{
color:inherit !important;
font-size:inherit !important;
font-weight:inherit !important;
line-height:inherit !important;
}
.urun-detay-sag-alan-d-bilgiler{
width:100%;
display:grid !important;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:12px;
align-items:stretch !important;
padding:0 0 18px !important;
margin:0 0 18px !important;
border-bottom:1px solid rgba(15,23,42,.08) !important;
}
.urun-detay-sag-alan-d-bilgiler-box{
margin:0 !important;
padding:13px 14px !important;
min-height:72px;
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:center;
gap:4px;
border:1px solid rgba(15,23,42,.08);
border-radius:14px;
background:linear-gradient(180deg,#fff 0%,#fafaf8 100%);
box-shadow:0 10px 24px rgba(15,23,42,.05);
font-size:13px !important;
color:#3f4652 !important;
overflow-wrap:anywhere;
}
.urun-detay-sag-alan-d-bilgiler-box b,
.urun-detay-sag-alan-d-bilgiler-box strong,
.urun-detay-sag-alan-d-bilgiler-box span[style*="font-weight"],
.urun-detay-sag-alan-d-bilgiler-box .value{
color:#111827 !important;
font-weight:800 !important;
}
.urun-detay-fiyat-durumu{
display:flex;
align-items:center;
gap:10px;
margin:0 0 20px !important;
padding:16px 18px !important;
border:1px solid rgba(15,23,42,.10) !important;
border-radius:16px !important;
background:linear-gradient(180deg,#ffffff 0%,#f8f8f7 100%) !important;
box-shadow:0 14px 30px rgba(15,23,42,.05);
font-size:14px !important;
line-height:1.5 !important;
font-weight:600 !important;
color:#111827 !important;
}
.urun-detay-fiyat-durumu i{
width:22px;
height:22px;
margin-right:0 !important;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:999px;
background:#f2f4f7;
color:#111827;
font-size:13px !important;
}
.urun-detay-sag-alan-sepet{
width:100% !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:12px;
align-items:stretch !important;
padding:8px 0 0 !important;
margin:0 0 10px !important;
}
.urun-detay-sag-alan-sepet-box{
width:100%;
margin:0 !important;
}
.urun-detay-sag-alan-sepet > :only-child{
grid-column:1 / -1;
}
.urun-detay-sag-alan-sepet .quantity{
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:54px;
padding:0 14px;
border:1px solid rgba(15,23,42,.10);
border-radius:14px;
background:#fff;
box-shadow:0 10px 24px rgba(15,23,42,.05);
}
.urun-detay-sag-alan-sepet .quantity input{
width:100%;
height:100%;
border:0 !important;
background:transparent !important;
text-align:center;
font-size:16px !important;
font-weight:700;
color:#111827;
}
.urun-detay-sag-alan-sepet-box button,
.urun-detay-sag-alan-sepet-box-wp{
width:100% !important;
min-width:0 !important;
height:54px !important;
min-height:54px !important;
margin-top:0 !important;
padding:0 18px !important;
border-radius:14px !important;
font-size:14px !important;
font-weight:800 !important;
letter-spacing:.02em;
box-shadow:0 14px 30px rgba(15,23,42,.12);
}
.urun-detay-sag-alan-sepet-box button{
background:linear-gradient(180deg,#121417 0%,#050607 100%) !important;
color:#fff !important;
border:1px solid #050607 !important;
}
.urun-detay-sag-alan-sepet-box button:hover{
transform:translateY(-1px);
box-shadow:0 18px 34px rgba(15,23,42,.18);
}
.urun-detay-sag-alan-sepet-box-wp{
display:inline-flex !important;
align-items:center;
justify-content:center;
gap:9px;
background:linear-gradient(180deg,#35d465 0%,#29b855 100%) !important;
border:1px solid #29b855 !important;
color:#fff !important;
}
.urun-detay-sag-alan-sepet-box-wp i{
margin-right:0 !important;
font-size:18px !important;
}
.urun-detay-sag-alan-urun-islemler-main{
width:100%;
display:flex;
flex-wrap:wrap;
gap:8px 18px;
align-items:center;
padding-top:8px;
}
.fav-a,
.fav-b,
.karsilastir-product,
.karsilastir-product-exit{
margin:0 !important;
font-size:13px !important;
line-height:1.4 !important;
color:#2e3440 !important;
}
.fav-a i,
.fav-b i,
.karsilastir-product i,
.karsilastir-product-exit i{
margin-right:8px !important;
color:#111827;
}
.fav-a:hover,
.fav-b:hover,
.karsilastir-product:hover,
.karsilastir-product-exit:hover{
color:#000 !important;
}
@media (max-width: 991px){
.urun-detay-sag-alan{
padding:18px 0 12px !important;
}
.urun-detay-sag-alan-baslik{
max-width:none;
font-size:23px !important;
line-height:1.26 !important;
margin-bottom:10px !important;
}
.urun-detay-baslik-alti{
margin-bottom:14px;
}
.urun-detay-sag-alan-fiyatlar{
grid-template-columns:1fr;
align-items:start;
gap:8px;
padding:14px 0 12px !important;
}
.urun-detay-sag-alan-fiyat-sag{
font-size:24px !important;
}
.urun-detay-sag-alan-d-bilgiler{
grid-template-columns:1fr;
gap:10px;
}
.urun-detay-sag-alan-d-bilgiler-box{
min-height:unset;
}
.urun-detay-sag-alan-sepet{
grid-template-columns:1fr;
}
}
/* =========================================================
Product Detail Wholesale Premium Reset
- calmer hierarchy
- less fragmentation
- better title width and B2B showroom feel
========================================================= */
@media (min-width: 992px){
.urun-detay-main{
max-width:1420px !important;
padding:28px 36px 40px !important;
display:grid !important;
grid-template-columns:minmax(580px,1.04fr) minmax(520px,.96fr) !important;
gap:56px !important;
align-items:start !important;
}
.urun-detay-sag-alan{
padding:8px 0 0 !important;
}
.urun-detay-sag-alan-baslik{
max-width:none !important;
margin:0 0 14px !important;
font-size:22px !important;
line-height:1.34 !important;
font-weight:600 !important;
letter-spacing:-0.01em !important;
color:#171a20 !important;
}
.urun-detay-sag-alan-iliskili-kat{
margin-bottom:14px !important;
}
.urun-detay-sag-alan-iliskili-kat,
.urun-detay-sag-alan-iliskili-kat a{
font-size:12px !important;
color:#6f7785 !important;
letter-spacing:.03em;
}
.urun-detay-baslik-alti{
gap:14px !important;
margin-bottom:18px !important;
}
.urun-detay-social{
gap:10px !important;
}
.urun-detay-social a{
width:32px !important;
height:32px !important;
border:1px solid #e9e3d9 !important;
background:#fff !important;
box-shadow:none !important;
color:#1b1f27 !important;
font-size:14px !important;
}
.urun-detay-social a:hover{
transform:none !important;
border-color:#d8cfc2 !important;
background:#faf8f4 !important;
box-shadow:none !important;
}
.urun-detay-sag-alan-d-bilgiler{
display:grid !important;
grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
gap:0 !important;
margin:0 0 24px !important;
padding:0 !important;
border:1px solid #ece5db !important;
border-radius:18px !important;
background:#fcfaf7 !important;
box-shadow:none !important;
overflow:hidden;
}
.urun-detay-sag-alan-d-bilgiler-box{
display:block !important;
min-height:0 !important;
margin:0 !important;
padding:15px 18px !important;
border:0 !important;
border-right:1px solid #ece5db !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
color:#6c7482 !important;
font-size:12px !important;
line-height:1.5 !important;
overflow-wrap:anywhere;
}
.urun-detay-sag-alan-d-bilgiler-box:last-child{
border-right:0 !important;
}
.urun-detay-sag-alan-d-bilgiler-box strong,
.urun-detay-sag-alan-d-bilgiler-box b,
.urun-detay-sag-alan-d-bilgiler-box .value,
.urun-detay-sag-alan-d-bilgiler-box span[style*="font-weight"]{
display:block;
margin-top:5px;
font-size:15px !important;
line-height:1.35 !important;
font-weight:700 !important;
color:#171a20 !important;
}
.urun-detay-fiyat-durumu{
margin:0 0 24px !important;
padding:14px 16px !important;
border:1px solid #ebe4db !important;
border-radius:18px !important;
background:#fffdfa !important;
box-shadow:none !important;
font-size:13px !important;
line-height:1.5 !important;
color:#2f3744 !important;
}
.urun-detay-fiyat-durumu i{
width:20px;
height:20px;
background:#f4efe8 !important;
color:#5d6573 !important;
font-size:12px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout{
grid-template-columns:minmax(320px,356px) minmax(220px,1fr) !important;
gap:20px 28px !important;
margin-top:0 !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .ring-size-block{
max-width:356px !important;
padding:16px !important;
border:1px solid #ece5db !important;
border-radius:18px !important;
background:#fff !important;
box-shadow:none !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block{
min-height:auto !important;
padding:0 !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
gap:10px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block .variant-block-head{
margin:0 0 10px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block .variant-block-head label,
.urun-detay-sag-alan .product-detail-variant-layout > .ring-size-block label{
font-size:12px !important;
font-weight:700 !important;
letter-spacing:.08em !important;
text-transform:uppercase !important;
color:#6f7785 !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block .variant-option-list{
gap:12px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block .variant-choice .custom-control-label{
min-width:44px !important;
min-height:44px !important;
border-radius:14px !important;
border:1px solid #ddd5c9 !important;
background:#fff !important;
box-shadow:none !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block .variant-choice .custom-control-input:checked + .custom-control-label{
border-color:#16181d !important;
box-shadow:inset 0 0 0 1px #16181d !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .plating-color-block .variant-choice .custom-control-label{
min-width:46px !important;
min-height:46px !important;
border-radius:15px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .plating-color-block .variant-choice .custom-control-label img{
width:34px !important;
height:34px !important;
border-radius:10px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .gem-color-block .variant-choice .custom-control-label img{
width:32px !important;
height:32px !important;
}
[id^="ring-size-swatch-"] .swatch{
min-height:42px !important;
border:1px solid #e2dbd1 !important;
border-radius:12px !important;
box-shadow:none !important;
font-size:13px !important;
font-weight:600 !important;
}
[id^="ring-size-swatch-"] .swatch.is-selected{
border-color:#171a20 !important;
box-shadow:inset 0 0 0 1px #171a20 !important;
}
[id^="ring-size-swatch-"] .qty{
border:1px solid #e4ddd3 !important;
border-radius:12px !important;
background:#fff !important;
box-shadow:none !important;
}
[id^="ring-size-swatch-"] .qty .btn{
border:1px solid #e4ddd3 !important;
border-radius:8px !important;
background:#fff !important;
}
.urun-detay-sag-alan-sepet{
display:flex !important;
flex-wrap:wrap !important;
align-items:stretch !important;
gap:14px !important;
padding:16px 0 0 !important;
margin:0 0 12px !important;
}
.urun-detay-sag-alan-sepet .urun-detay-sag-alan-sepet-qty-box{
flex:0 0 102px;
}
.urun-detay-sag-alan-sepet .urun-detay-sag-alan-sepet-primary-box,
.urun-detay-sag-alan-sepet > .urun-detay-sag-alan-sepet-box-wp{
flex:1 1 0;
min-width:220px;
}
.urun-detay-sag-alan-sepet > :only-child{
flex:1 1 100%;
}
.urun-detay-sag-alan-sepet-box{
width:auto !important;
margin:0 !important;
}
.urun-detay-sag-alan-sepet .quantity{
height:56px !important;
padding:0 12px !important;
border:1px solid #e5ddd2 !important;
border-radius:16px !important;
box-shadow:none !important;
}
.urun-detay-sag-alan-sepet-box button,
.urun-detay-sag-alan-sepet-box-wp{
height:56px !important;
min-height:56px !important;
border-radius:16px !important;
font-size:13px !important;
font-weight:700 !important;
letter-spacing:.06em !important;
text-transform:uppercase !important;
box-shadow:none !important;
}
.urun-detay-sag-alan-sepet-box button{
background:#14171c !important;
border:1px solid #14171c !important;
}
.urun-detay-sag-alan-sepet-box button:hover{
transform:none !important;
box-shadow:none !important;
background:#0e1014 !important;
}
.urun-detay-sag-alan-sepet-box-wp{
background:#31c45a !important;
border:1px solid #31c45a !important;
}
.urun-detay-sag-alan-sepet-box-wp:hover{
transform:none !important;
box-shadow:none !important;
background:#2cb151 !important;
}
.urun-detay-sag-alan-urun-islemler-main{
gap:8px 20px !important;
padding-top:6px !important;
}
.fav-a,
.fav-b,
.karsilastir-product,
.karsilastir-product-exit{
font-size:12.5px !important;
color:#5a6372 !important;
}
.fav-a i,
.fav-b i,
.karsilastir-product i,
.karsilastir-product-exit i{
color:#2b313c !important;
}
}
/* =========================================================
Product Detail Final Micro Polish
========================================================= */
@media (min-width: 992px){
.urun-detay-sag-alan-baslik{
margin-bottom:16px !important;
font-size:21.5px !important;
line-height:1.38 !important;
color:#1a1e25 !important;
}
.urun-detay-sag-alan-iliskili-kat{
margin-bottom:16px !important;
}
.urun-detay-social{
gap:9px !important;
}
.urun-detay-social a{
width:31px !important;
height:31px !important;
border-color:#e5ddd2 !important;
}
.urun-detay-sag-alan-d-bilgiler{
margin-bottom:22px !important;
}
.urun-detay-sag-alan-d-bilgiler-box{
padding:14px 18px 13px !important;
}
.urun-detay-sag-alan-d-bilgiler-box strong,
.urun-detay-sag-alan-d-bilgiler-box b,
.urun-detay-sag-alan-d-bilgiler-box .value,
.urun-detay-sag-alan-d-bilgiler-box span[style*="font-weight"]{
margin-top:4px;
font-size:14.5px !important;
}
.urun-detay-fiyat-durumu{
margin-bottom:26px !important;
border-color:#e7dfd4 !important;
}
.urun-detay-sag-alan .product-detail-variant-layout{
gap:22px 26px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .ring-size-block > label,
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block .variant-block-head label{
margin-bottom:11px !important;
font-size:11.5px !important;
letter-spacing:.11em !important;
text-transform:uppercase !important;
color:#707887 !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .ring-size-block{
padding:17px 16px !important;
}
[id^="ring-size-swatch-"] .row{
gap:10px !important;
margin-bottom:10px !important;
}
[id^="ring-size-swatch-"] .swatch{
min-height:44px !important;
height:44px !important;
}
[id^="ring-size-swatch-"] .qty{
min-width:118px;
padding:4px 6px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block{
padding-top:4px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block .variant-option-list{
gap:10px 12px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block .variant-choice .custom-control-label{
border-color:#ddd4c7 !important;
}
.urun-detay-sag-alan-sepet{
margin-top:4px !important;
gap:14px !important;
}
.urun-detay-sag-alan-sepet-box button,
.urun-detay-sag-alan-sepet-box-wp{
height:54px !important;
min-height:54px !important;
border-radius:15px !important;
}
.urun-detay-sag-alan-sepet-box button{
box-shadow:0 10px 24px rgba(20,23,28,.10) !important;
}
.urun-detay-sag-alan-sepet-box-wp{
background:linear-gradient(180deg,#35ca61 0%,#2fbe59 100%) !important;
border-color:#2fbe59 !important;
box-shadow:0 10px 24px rgba(49,196,90,.12) !important;
}
.urun-detay-sag-alan-urun-islemler-main{
gap:10px 22px !important;
padding-top:10px !important;
}
.fav-a,
.fav-b,
.karsilastir-product,
.karsilastir-product-exit{
font-size:12px !important;
color:#66707e !important;
}
}
/* =========================================================
CTA Brand Polish
========================================================= */
.urun-detay-sag-alan-sepet-box button,
.urun-detay-sag-alan-sepet-box-wp{
position:relative;
overflow:hidden;
isolation:isolate;
transition:
transform .22s ease,
box-shadow .22s ease,
background-color .22s ease,
border-color .22s ease !important;
}
.urun-detay-sag-alan-sepet-box button::before,
.urun-detay-sag-alan-sepet-box-wp::before{
content:"";
position:absolute;
inset:1px 1px auto 1px;
height:50%;
border-radius:inherit;
background:linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 100%);
pointer-events:none;
z-index:-1;
}
.urun-detay-sag-alan-sepet-box button{
background:linear-gradient(180deg,#1d2128 0%,#0f1115 100%) !important;
border:1px solid #16191f !important;
color:#fff !important;
box-shadow:
0 14px 30px rgba(15,17,21,.14),
inset 0 1px 0 rgba(255,255,255,.08) !important;
text-shadow:0 1px 0 rgba(0,0,0,.18);
}
.urun-detay-sag-alan-sepet-box button:hover{
transform:translateY(-1px) !important;
background:linear-gradient(180deg,#20252d 0%,#11141a 100%) !important;
border-color:#1b1f26 !important;
box-shadow:
0 18px 36px rgba(15,17,21,.18),
inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.urun-detay-sag-alan-sepet-box button:active{
transform:translateY(0) !important;
box-shadow:
0 8px 18px rgba(15,17,21,.14),
inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.urun-detay-sag-alan-sepet-box-wp{
background:linear-gradient(180deg,#36c961 0%,#27ab50 100%) !important;
border:1px solid #249d4a !important;
color:#fff !important;
box-shadow:
0 14px 30px rgba(39,171,80,.16),
inset 0 1px 0 rgba(255,255,255,.12) !important;
text-shadow:0 1px 0 rgba(0,0,0,.10);
}
.urun-detay-sag-alan-sepet-box-wp:hover{
transform:translateY(-1px) !important;
background:linear-gradient(180deg,#39d066 0%,#289e4c 100%) !important;
border-color:#229246 !important;
box-shadow:
0 18px 36px rgba(39,171,80,.20),
inset 0 1px 0 rgba(255,255,255,.14) !important;
}
.urun-detay-sag-alan-sepet-box-wp:active{
transform:translateY(0) !important;
box-shadow:
0 8px 18px rgba(39,171,80,.15),
inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.urun-detay-sag-alan-sepet-box-wp i{
filter:drop-shadow(0 1px 0 rgba(0,0,0,.08));
}
@media (min-width: 992px){
.urun-detay-sag-alan-sepet-box button,
.urun-detay-sag-alan-sepet-box-wp{
height:56px !important;
min-height:56px !important;
border-radius:16px !important;
font-size:12.5px !important;
font-weight:700 !important;
letter-spacing:.11em !important;
}
}
@media (max-width: 991px){
.urun-detay-sag-alan-sepet-box button,
.urun-detay-sag-alan-sepet-box-wp{
border-radius:14px !important;
font-size:12.5px !important;
font-weight:700 !important;
letter-spacing:.08em !important;
box-shadow:
0 12px 24px rgba(15,17,21,.12),
inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.urun-detay-sag-alan-sepet-box-wp{
box-shadow:
0 12px 24px rgba(39,171,80,.16),
inset 0 1px 0 rgba(255,255,255,.12) !important;
}
}
/* =========================================================
Ring Size Icon Recovery
========================================================= */
[id^="ring-size-swatch-"] .swatch.has-icon{
justify-content:flex-start !important;
gap:8px !important;
padding-left:10px !important;
padding-right:12px !important;
background-image:none !important;
}
[id^="ring-size-swatch-"] .swatch .swatch-size-icon{
width:22px;
height:22px;
flex:0 0 22px;
display:inline-flex !important;
align-items:center;
justify-content:center;
pointer-events:none;
}
[id^="ring-size-swatch-"] .swatch .swatch-size-icon img{
width:100% !important;
height:100% !important;
display:block;
object-fit:contain;
}
[id^="ring-size-swatch-"] .swatch.has-icon .swatch-txt{
flex:1 1 auto;
width:auto !important;
text-align:center !important;
white-space:nowrap !important;
}
/* =========================================================
Favorite Action Polish
========================================================= */
.karsilastir-product,
.karsilastir-product-exit{
display:none !important;
}
.product-detail-favorite-pill{
margin-left:auto !important;
padding:0 14px !important;
height:34px;
min-height:34px;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:8px;
border:1px solid #e6ddd1 !important;
border-radius:999px !important;
background:#fffdfa !important;
box-shadow:none !important;
color:#687180 !important;
font-size:12px !important;
font-weight:600 !important;
line-height:1 !important;
letter-spacing:.02em !important;
text-decoration:none !important;
white-space:nowrap;
transition:
color .18s ease,
border-color .18s ease,
background-color .18s ease,
box-shadow .18s ease !important;
}
.product-detail-favorite-pill i{
margin-right:0 !important;
font-size:13px !important;
color:#202631 !important;
}
.product-detail-favorite-pill:hover{
background:#f8f4ee !important;
border-color:#d7ccbe !important;
color:#242a33 !important;
box-shadow:0 10px 22px rgba(15,23,42,.05) !important;
}
.product-detail-favorite-pill.fav-b{
background:#f5f0e8 !important;
border-color:#d8cbb8 !important;
color:#242a33 !important;
}
.urun-detay-social a.social-tiktok svg{
width:14px;
height:14px;
display:block;
fill:currentColor;
}
@media (max-width: 991px){
.urun-detay-baslik-alti{
align-items:flex-start !important;
}
.product-detail-favorite-pill{
margin-left:0 !important;
margin-top:4px !important;
order:2;
}
}
/* =========================================================
Product Price Refinement
========================================================= */
.urun-detay-sag-alan-fiyatlar{
width:100%;
display:grid !important;
grid-template-columns:minmax(0,1fr) auto;
align-items:center !important;
gap:16px;
margin:4px 0 14px !important;
padding:15px 18px !important;
border:1px solid rgba(229,221,210,.9) !important;
border-radius:18px !important;
background:
linear-gradient(180deg,#fffdfa 0%,#fdfaf6 100%) !important;
box-shadow:
0 10px 24px rgba(15,23,42,.035),
inset 0 1px 0 rgba(255,255,255,.92) !important;
}
.urun-detay-sag-alan-fiyat-sol{
width:auto !important;
min-width:0;
display:flex !important;
flex-direction:row !important;
flex-wrap:wrap;
align-items:center !important;
justify-content:flex-start !important;
gap:6px !important;
}
.urun-detay-sag-alan-fiyat-sol > *{
width:auto !important;
margin:0 !important;
display:inline-flex !important;
align-items:center !important;
flex:0 0 auto !important;
line-height:1.1 !important;
white-space:nowrap !important;
}
.urun-detay-sag-alan-fiyat-sol > *:first-child{
font-size:11.5px !important;
font-weight:700 !important;
text-transform:uppercase;
letter-spacing:.1em !important;
color:#818898 !important;
}
.urun-detay-sag-alan-fiyat-sol > *:nth-child(2){
font-size:12px !important;
font-weight:500 !important;
color:#c3b7a6 !important;
transform:none;
}
.urun-detay-sag-alan-fiyat-sag{
padding-left:0 !important;
display:inline-flex !important;
align-items:baseline !important;
justify-content:flex-end !important;
gap:4px;
text-align:right !important;
font-size:28px !important;
line-height:1 !important;
font-weight:600 !important;
letter-spacing:-.015em !important;
color:#2b3650 !important;
white-space:nowrap;
text-shadow:none;
}
.urun-detay-sag-alan-fiyat-sag #item-price,
.urun-detay-sag-alan-fiyat-sag #item-price2{
color:inherit !important;
font-size:inherit !important;
font-weight:inherit !important;
line-height:inherit !important;
letter-spacing:inherit !important;
}
@media (max-width: 991px){
.urun-detay-sag-alan-fiyatlar{
grid-template-columns:1fr;
gap:10px;
padding:14px 16px !important;
border-radius:16px !important;
margin:4px 0 12px !important;
}
.urun-detay-sag-alan-fiyat-sol{
gap:4px !important;
}
.urun-detay-sag-alan-fiyat-sag{
justify-content:flex-start !important;
text-align:left !important;
font-size:25px !important;
}
}
/* =========================================================
Above The Fold Compact Desktop
========================================================= */
@media (min-width: 992px) and (max-height: 980px){
.urun-detay-sag-alan{
padding-top:0 !important;
}
.urun-detay-sag-alan-baslik{
margin-bottom:10px !important;
font-size:20px !important;
line-height:1.22 !important;
}
.urun-detay-sag-alan-iliskili-kat{
margin-bottom:10px !important;
}
.urun-detay-baslik-alti{
gap:10px !important;
margin-bottom:12px !important;
align-items:center !important;
}
.urun-detay-social{
gap:8px !important;
}
.urun-detay-social a{
width:29px !important;
height:29px !important;
font-size:12.5px !important;
}
.product-detail-favorite-pill{
height:30px !important;
min-height:30px !important;
padding:0 11px !important;
font-size:11px !important;
}
.urun-detay-sag-alan-d-bilgiler{
margin-bottom:12px !important;
}
.urun-detay-sag-alan-d-bilgiler-box{
padding:10px 14px !important;
}
.urun-detay-sag-alan-d-bilgiler-box strong,
.urun-detay-sag-alan-d-bilgiler-box b,
.urun-detay-sag-alan-d-bilgiler-box .value,
.urun-detay-sag-alan-d-bilgiler-box span[style*="font-weight"]{
margin-top:3px !important;
font-size:13.5px !important;
}
.urun-detay-sag-alan-fiyatlar{
margin:0 0 10px !important;
padding:10px 14px !important;
border-radius:16px !important;
}
.urun-detay-sag-alan-fiyat-sol > *:first-child{
font-size:10.8px !important;
}
.urun-detay-sag-alan-fiyat-sag{
font-size:24px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout{
gap:12px 18px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .ring-size-block{
padding:12px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .ring-size-block > label,
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block .variant-block-head label{
margin-bottom:7px !important;
font-size:11px !important;
}
[id^="ring-size-swatch-"] .row{
gap:8px !important;
margin-bottom:7px !important;
}
[id^="ring-size-swatch-"] .swatch{
min-height:36px !important;
height:36px !important;
border-radius:10px !important;
font-size:12px !important;
}
[id^="ring-size-swatch-"] .swatch.has-icon{
gap:6px !important;
padding-left:8px !important;
padding-right:10px !important;
}
[id^="ring-size-swatch-"] .swatch .swatch-size-icon{
width:17px;
height:17px;
flex:0 0 17px;
}
[id^="ring-size-swatch-"] .qty{
min-width:100px !important;
padding:2px 5px !important;
border-radius:10px !important;
}
[id^="ring-size-swatch-"] .qty .btn{
width:24px;
min-width:24px;
height:24px;
padding:0 !important;
}
[id^="ring-size-swatch-"] .qty input{
font-size:12px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block{
gap:8px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block .variant-block-head{
margin-bottom:7px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block .variant-option-list{
gap:8px 10px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block .variant-choice .custom-control-label{
min-width:40px !important;
min-height:40px !important;
border-radius:12px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .plating-color-block .variant-choice .custom-control-label{
min-width:42px !important;
min-height:42px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .plating-color-block .variant-choice .custom-control-label img{
width:30px !important;
height:30px !important;
border-radius:9px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .gem-color-block .variant-choice .custom-control-label img{
width:28px !important;
height:28px !important;
}
.ts-product-prep-note{
margin:8px 0 6px 0 !important;
padding:9px 11px !important;
gap:8px !important;
border-radius:15px !important;
}
.ts-product-prep-note-icon{
width:24px;
min-width:24px;
max-width:24px;
height:24px;
min-height:24px;
max-height:24px;
flex:0 0 24px;
}
.ts-product-prep-note-icon i{
font-size:11px;
}
.ts-product-prep-note-title{
margin:0 0 2px 0 !important;
font-size:10.5px !important;
}
.ts-product-prep-note-text{
font-size:11.5px !important;
line-height:1.28 !important;
}
.urun-detay-sag-alan-sepet{
padding-top:6px !important;
gap:8px !important;
margin-bottom:0 !important;
}
.urun-detay-sag-alan-sepet .quantity{
height:46px !important;
border-radius:12px !important;
}
.urun-detay-sag-alan-sepet-box button,
.urun-detay-sag-alan-sepet-box-wp{
height:46px !important;
min-height:46px !important;
border-radius:13px !important;
font-size:11.5px !important;
}
}
/* =========================================================
Product Detail Mobile Refinement
- stronger mobile hierarchy
- cleaner meta cards
- calmer ring size layout
========================================================= */
@media (max-width: 767px){
.urun-detay-main-in{
width:calc(100% - 20px) !important;
padding-top:10px !important;
padding-bottom:8px !important;
margin-bottom:10px !important;
}
.urun-detay-sol-alan{
width:100% !important;
margin-right:0 !important;
padding-bottom:10px !important;
}
.urun-detay-sol-alan .gc-display-area,
.urun-detay-sol-alan .gc-display-container,
.urun-detay-sol-alan .gc-display,
.urun-detay-sol-alan .gc-zoom,
.urun-detay-sol-alan .gc-thumbs-area,
.glass-case .gc-display-area,
.glass-case .gc-display-container,
.glass-case .gc-display,
.glass-case .gc-zoom,
.glass-case .gc-thumbs-area{
width:min(82vw,300px) !important;
max-width:min(82vw,300px) !important;
margin-left:auto !important;
margin-right:auto !important;
}
.urun-detay-sol-alan .gc-thumbs-area,
.glass-case .gc-thumbs-area{
margin-top:12px !important;
}
.urun-detay-sag-alan{
width:100% !important;
padding:8px 0 10px !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
.urun-detay-sag-alan-baslik{
max-width:none !important;
margin:0 0 10px !important;
font-size:20px !important;
line-height:1.23 !important;
letter-spacing:-0.02em !important;
}
.urun-detay-sag-alan-iliskili-kat{
margin-bottom:10px !important;
}
.urun-detay-baslik-alti{
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
gap:10px !important;
margin:0 0 14px !important;
}
.urun-detay-social{
gap:7px !important;
}
.urun-detay-social a{
width:32px !important;
height:32px !important;
font-size:13.5px !important;
box-shadow:none !important;
}
.product-detail-favorite-pill{
order:2;
align-self:flex-start !important;
width:auto !important;
margin:0 !important;
padding:0 15px !important;
height:36px !important;
min-height:36px !important;
border-radius:999px !important;
font-size:12px !important;
}
.urun-detay-sag-alan-d-bilgiler{
display:flex !important;
flex-direction:column !important;
gap:8px !important;
padding:0 0 14px !important;
margin:0 0 14px !important;
border-bottom:0 !important;
}
.urun-detay-sag-alan-d-bilgiler-box{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:12px !important;
min-height:0 !important;
margin:0 !important;
padding:11px 13px !important;
border:1px solid #ebe2d6 !important;
border-radius:14px !important;
background:linear-gradient(180deg,#ffffff 0%,#fdfaf5 100%) !important;
box-shadow:none !important;
font-size:12px !important;
line-height:1.35 !important;
color:#6b7280 !important;
}
.urun-detay-sag-alan-d-bilgiler-box strong,
.urun-detay-sag-alan-d-bilgiler-box b,
.urun-detay-sag-alan-d-bilgiler-box .value,
.urun-detay-sag-alan-d-bilgiler-box span[style*="font-weight"]{
display:inline-flex !important;
align-items:center !important;
justify-content:flex-end !important;
max-width:62% !important;
margin:0 0 0 auto !important;
font-size:13px !important;
line-height:1.32 !important;
text-align:right !important;
white-space:normal !important;
word-break:break-word !important;
color:#18202d !important;
font-weight:700 !important;
}
.urun-detay-sag-alan-fiyatlar{
margin:2px 0 12px !important;
padding:13px 14px !important;
gap:6px !important;
border-radius:16px !important;
}
.urun-detay-sag-alan-fiyat-sol{
gap:3px !important;
}
.urun-detay-sag-alan-fiyat-sol > *:first-child{
font-size:10.8px !important;
letter-spacing:.08em !important;
}
.urun-detay-sag-alan-fiyat-sag{
justify-content:flex-start !important;
text-align:left !important;
font-size:23px !important;
line-height:1.04 !important;
}
.urun-detay-fiyat-durumu{
margin:0 0 12px !important;
padding:13px 14px !important;
gap:10px !important;
border-radius:14px !important;
box-shadow:none !important;
font-size:13px !important;
line-height:1.5 !important;
}
.urun-detay-fiyat-durumu i{
width:20px !important;
height:20px !important;
font-size:12px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout{
display:flex !important;
flex-direction:column !important;
gap:14px !important;
margin-top:0 !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .ring-size-block{
width:100% !important;
max-width:none !important;
margin:0 !important;
padding:14px !important;
border:1px solid #ebe2d6 !important;
border-radius:18px !important;
background:#fffdfa !important;
box-shadow:none !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .ring-size-block > label,
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block .variant-block-head label{
margin:0 0 10px !important;
font-size:11px !important;
font-weight:700 !important;
letter-spacing:.1em !important;
text-transform:uppercase !important;
color:#717887 !important;
}
[id^="ring-size-swatch-"]{
display:grid !important;
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
gap:10px !important;
margin-top:0 !important;
}
[id^="ring-size-swatch-"] .row{
margin:0 !important;
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
gap:9px !important;
padding:10px !important;
border:1px solid #f0e7da !important;
border-radius:16px !important;
background:#fff !important;
box-shadow:0 4px 12px rgba(15,23,42,.03) !important;
}
[id^="ring-size-swatch-"] .row > *{
width:100% !important;
max-width:none !important;
flex:0 0 auto !important;
margin:0 !important;
padding:0 !important;
}
[id^="ring-size-swatch-"] .swatch{
width:100% !important;
min-width:0 !important;
min-height:46px !important;
height:46px !important;
justify-content:center !important;
border:1px solid #ddd6ca !important;
border-radius:12px !important;
background:#fff !important;
box-shadow:none !important;
font-size:13px !important;
font-weight:600 !important;
}
[id^="ring-size-swatch-"] .swatch.has-icon{
justify-content:center !important;
gap:7px !important;
padding:0 10px !important;
}
[id^="ring-size-swatch-"] .swatch .swatch-size-icon{
width:18px !important;
height:18px !important;
flex:0 0 18px !important;
}
[id^="ring-size-swatch-"] .swatch.has-icon .swatch-txt{
flex:0 1 auto !important;
width:auto !important;
text-align:center !important;
}
[id^="ring-size-swatch-"] .qty{
display:flex !important;
width:100% !important;
min-width:0 !important;
min-height:42px !important;
align-items:center !important;
justify-content:space-between !important;
gap:8px !important;
padding:4px 6px !important;
border:1px solid #ece3d7 !important;
border-radius:12px !important;
background:#fffdfa !important;
box-shadow:none !important;
}
[id^="ring-size-swatch-"] .qty .btn{
width:26px !important;
min-width:26px !important;
height:26px !important;
border-radius:8px !important;
}
[id^="ring-size-swatch-"] .qty input{
width:34px !important;
height:26px !important;
font-size:13px !important;
font-weight:700 !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block{
width:100% !important;
min-height:0 !important;
padding:0 !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
gap:8px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block .variant-block-head{
margin:0 0 8px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block .variant-option-list{
gap:10px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .visual-variant-block .variant-choice .custom-control-label{
min-width:44px !important;
min-height:44px !important;
border-radius:14px !important;
box-shadow:none !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .plating-color-block .variant-choice .custom-control-label{
min-width:46px !important;
min-height:46px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .plating-color-block .variant-choice .custom-control-label img{
width:32px !important;
height:32px !important;
border-radius:10px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .gem-color-block .variant-choice .custom-control-label img{
width:30px !important;
height:30px !important;
}
.ts-product-prep-note{
margin:14px 0 12px !important;
padding:12px 13px !important;
gap:10px !important;
border-radius:14px !important;
}
.ts-product-prep-note-icon{
width:28px !important;
min-width:28px !important;
max-width:28px !important;
height:28px !important;
min-height:28px !important;
max-height:28px !important;
flex:0 0 28px !important;
}
.ts-product-prep-note-icon i{
font-size:12px !important;
}
.ts-product-prep-note-title{
margin-bottom:2px !important;
font-size:11px !important;
letter-spacing:.08em !important;
}
.ts-product-prep-note-text{
font-size:12.5px !important;
line-height:1.45 !important;
}
.urun-detay-sag-alan-sepet{
grid-template-columns:1fr !important;
gap:10px !important;
padding-top:4px !important;
margin:0 0 6px !important;
}
.urun-detay-sag-alan-sepet .quantity{
height:48px !important;
border-radius:13px !important;
}
.urun-detay-sag-alan-sepet-box button,
.urun-detay-sag-alan-sepet-box-wp{
height:50px !important;
min-height:50px !important;
border-radius:14px !important;
font-size:13px !important;
letter-spacing:.03em !important;
}
}
@media (max-width: 380px){
.urun-detay-main-in{
width:calc(100% - 16px) !important;
}
.urun-detay-sol-alan .gc-display-area,
.urun-detay-sol-alan .gc-display-container,
.urun-detay-sol-alan .gc-display,
.urun-detay-sol-alan .gc-zoom,
.urun-detay-sol-alan .gc-thumbs-area,
.glass-case .gc-display-area,
.glass-case .gc-display-container,
.glass-case .gc-display,
.glass-case .gc-zoom,
.glass-case .gc-thumbs-area{
width:min(86vw,292px) !important;
max-width:min(86vw,292px) !important;
}
.urun-detay-sag-alan-baslik{
font-size:18px !important;
}
[id^="ring-size-swatch-"]{
grid-template-columns:1fr !important;
}
.urun-detay-sag-alan-d-bilgiler-box{
padding:10px 12px !important;
}
.urun-detay-sag-alan-d-bilgiler-box strong,
.urun-detay-sag-alan-d-bilgiler-box b,
.urun-detay-sag-alan-d-bilgiler-box .value,
.urun-detay-sag-alan-d-bilgiler-box span[style*="font-weight"]{
max-width:58% !important;
font-size:12.5px !important;
}
}
@media (max-width: 767px){
.urun-detay-sag-alan .product-detail-variant-layout > .plating-color-block,
.urun-detay-sag-alan .product-detail-variant-layout > .gem-color-block{
display:flex !important;
flex-wrap:wrap !important;
align-items:center !important;
justify-content:space-between !important;
gap:10px 12px !important;
padding:12px 13px !important;
border:1px solid #ebe2d6 !important;
border-radius:16px !important;
background:linear-gradient(180deg,#fffdf9 0%,#fbf7f1 100%) !important;
box-shadow:0 6px 16px rgba(15,23,42,.03) !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .plating-color-block .variant-block-head,
.urun-detay-sag-alan .product-detail-variant-layout > .gem-color-block .variant-block-head{
width:auto !important;
flex:0 0 auto !important;
margin:0 !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .plating-color-block .variant-block-head label,
.urun-detay-sag-alan .product-detail-variant-layout > .gem-color-block .variant-block-head label{
margin:0 !important;
font-size:10.8px !important;
font-weight:700 !important;
line-height:1.1 !important;
letter-spacing:.09em !important;
text-transform:uppercase !important;
color:#707887 !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .plating-color-block .variant-option-list,
.urun-detay-sag-alan .product-detail-variant-layout > .gem-color-block .variant-option-list{
flex:1 1 auto !important;
width:auto !important;
min-width:0 !important;
justify-content:flex-end !important;
gap:9px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .plating-color-block .variant-choice .custom-control-label,
.urun-detay-sag-alan .product-detail-variant-layout > .gem-color-block .variant-choice .custom-control-label{
min-width:44px !important;
min-height:44px !important;
border:1px solid #ddd4c8 !important;
background:#fff !important;
box-shadow:0 4px 10px rgba(15,23,42,.04) !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .plating-color-block .variant-choice .custom-control-input:checked + .custom-control-label,
.urun-detay-sag-alan .product-detail-variant-layout > .gem-color-block .variant-choice .custom-control-input:checked + .custom-control-label{
border-color:#141922 !important;
box-shadow:0 0 0 3px rgba(20,25,34,.06), 0 6px 14px rgba(15,23,42,.08) !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .plating-color-block .variant-choice .custom-control-label img{
width:31px !important;
height:31px !important;
border-radius:10px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .gem-color-block .variant-choice .custom-control-label img{
width:29px !important;
height:29px !important;
}
}
@media (max-width: 380px){
.urun-detay-sag-alan .product-detail-variant-layout > .plating-color-block,
.urun-detay-sag-alan .product-detail-variant-layout > .gem-color-block{
align-items:flex-start !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .plating-color-block .variant-option-list,
.urun-detay-sag-alan .product-detail-variant-layout > .gem-color-block .variant-option-list{
width:100% !important;
justify-content:flex-start !important;
}
}
@media (max-width: 767px){
.urun-detay-sag-alan-d-bilgiler-box{
display:grid !important;
grid-template-columns:minmax(0, 1fr) auto !important;
align-items:center !important;
text-align:left !important;
}
.urun-detay-sag-alan-d-bilgiler-box .ts-detail-meta-label{
display:block !important;
margin:0 !important;
padding:0 !important;
font-size:11px !important;
line-height:1.25 !important;
font-weight:700 !important;
letter-spacing:.08em !important;
text-transform:uppercase !important;
color:#7a8190 !important;
white-space:normal !important;
}
.urun-detay-sag-alan-d-bilgiler-box .ts-detail-meta-value{
display:inline-flex !important;
align-items:center !important;
justify-content:flex-end !important;
margin:0 !important;
padding:0 !important;
font-size:13px !important;
line-height:1.3 !important;
font-weight:700 !important;
text-align:right !important;
color:#18202d !important;
white-space:normal !important;
word-break:break-word !important;
}
.urun-detay-sag-alan-d-bilgiler-box .ts-detail-meta-value--success{
color:#178a4b !important;
}
.urun-detay-sag-alan-d-bilgiler-box .ts-detail-meta-value--danger{
color:#c2413b !important;
}
.urun-detay-sag-alan-d-bilgiler-box > a{
display:inline-flex !important;
justify-content:flex-end !important;
text-decoration:none !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .plating-color-block,
.urun-detay-sag-alan .product-detail-variant-layout > .gem-color-block{
display:grid !important;
grid-template-columns:auto minmax(0,1fr) !important;
align-items:center !important;
column-gap:12px !important;
row-gap:0 !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .plating-color-block .variant-block-head,
.urun-detay-sag-alan .product-detail-variant-layout > .gem-color-block .variant-block-head{
width:auto !important;
min-width:106px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .plating-color-block .variant-option-list,
.urun-detay-sag-alan .product-detail-variant-layout > .gem-color-block .variant-option-list{
width:100% !important;
justify-content:flex-start !important;
gap:8px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .plating-color-block .variant-choice .custom-control-label,
.urun-detay-sag-alan .product-detail-variant-layout > .gem-color-block .variant-choice .custom-control-label{
min-width:42px !important;
min-height:42px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .plating-color-block .variant-choice .custom-control-label img{
width:30px !important;
height:30px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .gem-color-block .variant-choice .custom-control-label img{
width:28px !important;
height:28px !important;
}
}
@media (max-width: 380px){
.urun-detay-sag-alan .product-detail-variant-layout > .plating-color-block,
.urun-detay-sag-alan .product-detail-variant-layout > .gem-color-block{
grid-template-columns:1fr !important;
row-gap:10px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .plating-color-block .variant-block-head,
.urun-detay-sag-alan .product-detail-variant-layout > .gem-color-block .variant-block-head{
min-width:0 !important;
}
}
/* =========================================================
Product Detail Mobile Hierarchy Refresh
- final mobile alignment pass for meta + visual variants
========================================================= */
@media (max-width: 767px){
.urun-detay-sag-alan-d-bilgiler{
display:grid !important;
grid-template-columns:1fr !important;
gap:10px !important;
padding:0 !important;
margin:0 0 16px !important;
border:0 !important;
}
.urun-detay-sag-alan-d-bilgiler-box{
display:grid !important;
grid-template-columns:minmax(0, 1fr) auto !important;
align-items:center !important;
gap:12px !important;
min-height:52px !important;
margin:0 !important;
padding:12px 14px !important;
border:1px solid #e7ddd1 !important;
border-radius:14px !important;
background:linear-gradient(180deg,#fffefb 0%,#fbf7f1 100%) !important;
box-shadow:0 4px 12px rgba(15,23,42,.035) !important;
}
.urun-detay-sag-alan-d-bilgiler-box .ts-detail-meta-label{
font-size:12px !important;
line-height:1.3 !important;
font-weight:600 !important;
letter-spacing:.01em !important;
text-transform:none !important;
color:#6e7583 !important;
}
.urun-detay-sag-alan-d-bilgiler-box .ts-detail-meta-value{
justify-content:flex-end !important;
font-size:14px !important;
line-height:1.3 !important;
font-weight:700 !important;
text-align:right !important;
color:#18202d !important;
}
.urun-detay-sag-alan-d-bilgiler-box > a{
display:inline-flex !important;
justify-content:flex-end !important;
align-items:center !important;
text-decoration:none !important;
}
.urun-detay-sag-alan-d-bilgiler-box .ts-detail-meta-value--success{
color:#19844a !important;
}
.urun-detay-sag-alan-d-bilgiler-box .ts-detail-meta-value--danger{
color:#c2413b !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .ts-visual-variant-row{
display:grid !important;
grid-template-columns:96px minmax(0, 1fr) !important;
align-items:center !important;
gap:12px !important;
width:100% !important;
min-height:0 !important;
margin:0 !important;
padding:12px 14px !important;
border:1px solid #e7ddd1 !important;
border-radius:15px !important;
background:linear-gradient(180deg,#fffefb 0%,#fbf7f1 100%) !important;
box-shadow:0 4px 12px rgba(15,23,42,.035) !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .ts-visual-variant-row .ts-visual-variant-head{
width:auto !important;
min-width:0 !important;
margin:0 !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .ts-visual-variant-row .ts-visual-variant-head label{
margin:0 !important;
font-size:12.5px !important;
line-height:1.25 !important;
font-weight:600 !important;
letter-spacing:.01em !important;
text-transform:none !important;
color:#212734 !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .ts-visual-variant-row .ts-visual-variant-options{
width:100% !important;
min-width:0 !important;
justify-content:flex-start !important;
align-items:center !important;
gap:8px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .ts-visual-variant-row .variant-choice{
margin:0 !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .ts-visual-variant-row .variant-choice .custom-control-label{
min-width:42px !important;
min-height:42px !important;
border:1px solid #ddd4c7 !important;
border-radius:13px !important;
background:#fff !important;
box-shadow:0 3px 8px rgba(15,23,42,.03) !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .ts-visual-variant-row .variant-choice .custom-control-input:checked + .custom-control-label{
border-color:#161a21 !important;
box-shadow:0 0 0 2px rgba(22,26,33,.06), 0 6px 14px rgba(15,23,42,.06) !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .plating-color-block.ts-visual-variant-row .variant-choice .custom-control-label{
min-width:44px !important;
min-height:44px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .plating-color-block.ts-visual-variant-row .variant-choice .custom-control-label img{
width:30px !important;
height:30px !important;
border-radius:10px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .gem-color-block.ts-visual-variant-row .variant-choice .custom-control-label img{
width:28px !important;
height:28px !important;
}
}
@media (max-width: 380px){
.urun-detay-sag-alan .product-detail-variant-layout > .ts-visual-variant-row{
grid-template-columns:1fr !important;
gap:10px !important;
}
.urun-detay-sag-alan .product-detail-variant-layout > .ts-visual-variant-row .ts-visual-variant-options{
justify-content:flex-start !important;
}
}
@media (max-width: 767px){
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout > .ts-mobile-visual-block{
width:100% !important;
margin:0 !important;
padding:12px 14px !important;
display:grid !important;
grid-template-columns:104px minmax(0,1fr) !important;
align-items:center !important;
gap:12px !important;
border:1px solid #e7ddd1 !important;
border-radius:15px !important;
background:linear-gradient(180deg,#fffefb 0%,#fbf7f1 100%) !important;
box-shadow:0 4px 12px rgba(15,23,42,.035) !important;
}
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout > .ts-mobile-visual-block > label.ts-mobile-visual-label{
display:block !important;
margin:0 !important;
font-size:12.5px !important;
line-height:1.25 !important;
font-weight:600 !important;
letter-spacing:.01em !important;
text-transform:none !important;
color:#212734 !important;
}
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout > .ts-mobile-visual-block > select.ts-mobile-visual-select{
display:none !important;
}
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout > .ts-mobile-visual-block > .variant-swatch-list{
width:100% !important;
min-width:0 !important;
margin:0 !important;
display:flex !important;
flex-wrap:wrap !important;
align-items:center !important;
justify-content:flex-start !important;
gap:8px !important;
}
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout > .ts-mobile-visual-block > .variant-swatch-list .variant-swatch{
margin:0 !important;
border:1px solid #ddd4c7 !important;
background-color:#fff !important;
outline:none !important;
box-shadow:0 3px 8px rgba(15,23,42,.03) !important;
transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout > .ts-mobile-plating > .variant-swatch-list .variant-swatch{
width:44px !important;
height:44px !important;
border-radius:12px !important;
}
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout > .ts-mobile-gem > .variant-swatch-list .variant-swatch{
width:42px !important;
height:42px !important;
border-radius:999px !important;
}
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout > .ts-mobile-plating > .variant-swatch-list .variant-swatch img{
width:30px !important;
height:30px !important;
border-radius:10px !important;
}
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout > .ts-mobile-gem > .variant-swatch-list .variant-swatch img{
width:28px !important;
height:28px !important;
}
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout > .ts-mobile-visual-block > .variant-swatch-list .variant-swatch.active,
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout > .ts-mobile-visual-block > .variant-swatch-list .variant-swatch[aria-pressed="true"]{
border-color:#161a21 !important;
box-shadow:0 0 0 2px rgba(22,26,33,.06), 0 6px 14px rgba(15,23,42,.06) !important;
transform:translateY(-1px) !important;
}
}
@media (max-width: 380px){
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout > .ts-mobile-visual-block{
grid-template-columns:1fr !important;
gap:10px !important;
}
}
/* =========================================================
Product Detail Mobile Final Alignment
- visual variants breathe after ring size
- CTA buttons share the same rhythm and width
========================================================= */
@media (max-width: 767px){
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-d-bilgiler{
gap:0 !important;
margin:0 0 14px !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-d-bilgiler-box{
min-height:0 !important;
padding:10px 0 !important;
border:0 !important;
border-bottom:1px solid #ece2d6 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-d-bilgiler-box:last-child{
border-bottom:1px solid #ece2d6 !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-d-bilgiler-box .ts-detail-meta-label{
font-size:11.5px !important;
line-height:1.3 !important;
font-weight:500 !important;
color:#7b8391 !important;
letter-spacing:0 !important;
text-transform:none !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-d-bilgiler-box .ts-detail-meta-value{
font-size:13px !important;
line-height:1.3 !important;
font-weight:700 !important;
}
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout{
row-gap:0 !important;
}
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout > .ring-size-block{
margin-bottom:0 !important;
}
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout > .ring-size-block + .ts-mobile-visual-block{
margin-top:20px !important;
}
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout > .ts-mobile-visual-block{
width:100% !important;
margin-left:0 !important;
margin-right:0 !important;
padding:0 !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
display:grid !important;
grid-template-columns:104px minmax(0,1fr) !important;
align-items:center !important;
column-gap:14px !important;
row-gap:0 !important;
}
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout > .ts-mobile-visual-block + .ts-mobile-visual-block{
margin-top:12px !important;
}
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout > .ts-mobile-visual-block > label.ts-mobile-visual-label{
display:block !important;
margin:0 !important;
font-size:13px !important;
line-height:1.35 !important;
font-weight:500 !important;
color:#242a35 !important;
align-self:center !important;
}
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout > .ts-mobile-visual-block > .variant-swatch-list{
width:100% !important;
min-width:0 !important;
margin:0 !important;
display:flex !important;
flex-wrap:wrap !important;
align-items:center !important;
justify-content:flex-start !important;
gap:10px !important;
}
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout > .ts-mobile-visual-block > .variant-swatch-list .variant-swatch{
margin:0 !important;
box-shadow:none !important;
background-color:#fff !important;
}
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout > .ts-mobile-plating > .variant-swatch-list .variant-swatch{
width:42px !important;
height:42px !important;
border-radius:11px !important;
}
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout > .ts-mobile-gem > .variant-swatch-list .variant-swatch{
width:40px !important;
height:40px !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-sepet{
display:grid !important;
grid-template-columns:1fr !important;
gap:12px !important;
align-items:stretch !important;
margin:22px 0 10px !important;
padding:0 !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-sepet > *{
width:100% !important;
align-self:stretch !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-sepet-box,
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-sepet-box-wp{
width:100% !important;
margin:0 !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-sepet .quantity{
height:46px !important;
border-radius:12px !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-sepet-box button,
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-sepet-box-wp{
width:100% !important;
min-width:0 !important;
height:52px !important;
min-height:52px !important;
margin:0 !important;
padding:0 18px !important;
border-radius:14px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
font-size:13px !important;
line-height:1 !important;
letter-spacing:.02em !important;
gap:9px !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-sepet-box-wp i{
margin:0 !important;
}
}
@media (max-width: 380px){
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout > .ts-mobile-visual-block{
grid-template-columns:96px minmax(0,1fr) !important;
column-gap:12px !important;
}
}
/* =========================================================
Product Detail Mobile Visual Rail
- visual variants sit right under the gallery
- no boxed cards, flexible rows for changing option counts
========================================================= */
.ts-mobile-visual-rail{
display:none;
}
@media (max-width: 767px){
.ts-mobile-visual-rail{
width:min(84vw,336px) !important;
max-width:min(84vw,336px) !important;
margin:14px auto 2px !important;
display:none;
position:relative !important;
z-index:6 !important;
pointer-events:auto !important;
}
.ts-mobile-visual-rail.is-active{
display:flex !important;
flex-direction:column !important;
gap:10px !important;
}
.ts-mobile-visual-row{
display:grid !important;
grid-template-columns:104px minmax(0,1fr) !important;
align-items:start !important;
gap:12px !important;
}
.ts-mobile-visual-row + .ts-mobile-visual-row{
padding-top:10px !important;
border-top:1px solid #ece2d6 !important;
}
.ts-mobile-visual-row__label{
display:block !important;
margin:0 !important;
padding-top:4px !important;
font-size:11px !important;
line-height:1.25 !important;
font-weight:700 !important;
letter-spacing:.08em !important;
text-transform:uppercase !important;
color:#7b6a54 !important;
}
.ts-mobile-visual-row__options{
display:flex !important;
flex-wrap:wrap !important;
align-items:center !important;
justify-content:flex-start !important;
gap:10px !important;
min-width:0 !important;
}
.ts-mobile-visual-button{
margin:0 !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:40px !important;
height:40px !important;
padding:0 !important;
border:1px solid #ddd4c7 !important;
background-color:#fff !important;
background-size:cover !important;
background-position:center center !important;
background-repeat:no-repeat !important;
box-shadow:0 3px 8px rgba(15,23,42,.04) !important;
cursor:pointer !important;
position:relative !important;
z-index:2 !important;
pointer-events:auto !important;
transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
.ts-mobile-visual-row[data-kind="plating"] .ts-mobile-visual-button{
border-radius:12px !important;
}
.ts-mobile-visual-row[data-kind="gem"] .ts-mobile-visual-button{
border-radius:999px !important;
}
.ts-mobile-visual-button img{
display:block !important;
width:28px !important;
height:28px !important;
object-fit:cover !important;
pointer-events:none !important;
}
.ts-mobile-visual-row[data-kind="plating"] .ts-mobile-visual-button img{
width:30px !important;
height:30px !important;
border-radius:10px !important;
}
.ts-mobile-visual-row[data-kind="gem"] .ts-mobile-visual-button img{
border-radius:999px !important;
}
.ts-mobile-visual-button.active,
.ts-mobile-visual-button[aria-pressed="true"]{
border-color:#161a21 !important;
box-shadow:0 0 0 2px rgba(22,26,33,.06), 0 6px 14px rgba(15,23,42,.08) !important;
transform:translateY(-1px) !important;
}
.ts-mobile-visual-button[aria-disabled="true"]{
opacity:.38 !important;
cursor:not-allowed !important;
}
.ts-mobile-visual-text{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
max-width:100% !important;
padding:0 5px !important;
font-size:10px !important;
line-height:1.1 !important;
font-weight:700 !important;
color:#4b5563 !important;
text-align:center !important;
pointer-events:none !important;
}
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout.has-mobile-visual-rail > .ts-mobile-plating,
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout.has-mobile-visual-rail > .ts-mobile-gem,
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout.has-mobile-visual-rail > .plating-color-block,
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout.has-mobile-visual-rail > .gem-color-block{
display:none !important;
}
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout.has-mobile-visual-rail > .ring-size-block{
margin-bottom:4px !important;
}
}
@media (max-width: 380px){
.ts-mobile-visual-rail{
width:calc(100% - 28px) !important;
max-width:calc(100% - 28px) !important;
}
.ts-mobile-visual-row{
grid-template-columns:1fr !important;
gap:8px !important;
}
}
/* =========================================================
Product Detail Mobile Harmony Pass
- gallery, visual variants, title, meta and sizing share one rhythm
========================================================= */
@media (max-width: 767px){
.urun-detay-main-in{
width:calc(100% - 16px) !important;
padding-top:12px !important;
padding-bottom:12px !important;
margin-bottom:12px !important;
}
.urun-detay-sol-alan,
.ts-mobile-visual-rail,
.urun-detay-sag-alan{
width:min(84vw,336px) !important;
max-width:min(84vw,336px) !important;
margin-left:auto !important;
margin-right:auto !important;
}
.urun-detay-sol-alan{
padding-bottom:0 !important;
}
.urun-detay-sol-alan .gc-display-area,
.urun-detay-sol-alan .gc-display-container,
.urun-detay-sol-alan .gc-display,
.urun-detay-sol-alan .gc-zoom,
.urun-detay-sol-alan .gc-thumbs-area,
.glass-case .gc-display-area,
.glass-case .gc-display-container,
.glass-case .gc-display,
.glass-case .gc-zoom,
.glass-case .gc-thumbs-area{
width:min(84vw,336px) !important;
max-width:min(84vw,336px) !important;
}
.ts-mobile-visual-rail{
margin:16px auto 18px !important;
padding:0 6px 2px !important;
}
.ts-mobile-visual-rail.is-active{
gap:12px !important;
}
.ts-mobile-visual-row{
grid-template-columns:94px minmax(0,1fr) !important;
align-items:center !important;
gap:14px !important;
}
.ts-mobile-visual-row + .ts-mobile-visual-row{
padding-top:12px !important;
border-top:1px solid #ece2d6 !important;
}
.ts-mobile-visual-row__label,
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout > .ring-size-block > label,
.ts-product-prep-note-title{
font-size:10.5px !important;
line-height:1.3 !important;
font-weight:700 !important;
letter-spacing:.11em !important;
text-transform:uppercase !important;
color:#8a755b !important;
}
.ts-mobile-visual-row__label{
padding-top:0 !important;
}
.ts-mobile-visual-row__options{
gap:11px !important;
}
.ts-mobile-visual-button{
width:42px !important;
height:42px !important;
border:1px solid #d7ccbc !important;
background-color:#fffdf9 !important;
box-shadow:0 4px 10px rgba(15,23,42,.045) !important;
}
.ts-mobile-visual-row[data-kind="plating"] .ts-mobile-visual-button{
border-radius:13px !important;
}
.ts-mobile-visual-row[data-kind="gem"] .ts-mobile-visual-button{
border-radius:999px !important;
}
.ts-mobile-visual-button.active,
.ts-mobile-visual-button[aria-pressed="true"]{
border-color:#1e2430 !important;
box-shadow:0 0 0 2px rgba(30,36,48,.07), 0 10px 18px rgba(15,23,42,.08) !important;
}
.ts-mobile-visual-rail.is-active + .urun-detay-sag-alan{
padding-top:2px !important;
}
.urun-detay-sag-alan{
padding:2px 0 12px !important;
}
.urun-detay-sag-alan-iliskili-kat{
margin:0 0 8px !important;
font-size:11.5px !important;
line-height:1.35 !important;
color:#8f877a !important;
}
.urun-detay-sag-alan-iliskili-kat,
.urun-detay-sag-alan-iliskili-kat a{
color:#8f877a !important;
}
.urun-detay-sag-alan-baslik{
margin:0 0 14px !important;
font-size:18px !important;
line-height:1.17 !important;
letter-spacing:-.025em !important;
font-weight:800 !important;
color:#1d2430 !important;
}
.urun-detay-baslik-alti{
gap:12px !important;
margin:0 0 18px !important;
padding-bottom:16px !important;
border-bottom:1px solid #ece2d6 !important;
}
.product-detail-favorite-pill{
height:38px !important;
min-height:38px !important;
padding:0 16px !important;
border:1px solid #e7ddd1 !important;
border-radius:999px !important;
background:linear-gradient(180deg,#fffefb 0%,#f8f3eb 100%) !important;
box-shadow:0 5px 12px rgba(15,23,42,.035) !important;
color:#6c5b46 !important;
font-size:12px !important;
font-weight:600 !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-d-bilgiler{
margin:0 0 16px !important;
padding:0 !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-d-bilgiler-box{
padding:12px 0 !important;
border-bottom:1px solid #ece2d6 !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-d-bilgiler-box .ts-detail-meta-label{
font-size:11px !important;
line-height:1.35 !important;
font-weight:500 !important;
color:#8c8478 !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-d-bilgiler-box .ts-detail-meta-value{
font-size:13.5px !important;
line-height:1.3 !important;
font-weight:700 !important;
color:#1e2430 !important;
}
.urun-detay-fiyat-durumu{
margin:0 0 16px !important;
padding:14px 16px !important;
border:1px solid #ebe1d5 !important;
border-radius:18px !important;
background:linear-gradient(180deg,#fffefb 0%,#faf6ef 100%) !important;
box-shadow:0 8px 18px rgba(15,23,42,.03) !important;
}
.urun-detay-sag-alan .product-detail-variant-layout{
gap:16px !important;
}
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout.has-mobile-visual-rail > .ring-size-block,
.urun-detay-sag-alan .product-detail-variant-layout > .ring-size-block{
padding:16px !important;
border:1px solid #ebe1d5 !important;
border-radius:20px !important;
background:linear-gradient(180deg,#fffefb 0%,#faf6ef 100%) !important;
box-shadow:0 10px 20px rgba(15,23,42,.03) !important;
}
[id^="ring-size-swatch-"]{
gap:12px !important;
}
[id^="ring-size-swatch-"] .row{
gap:10px !important;
padding:11px !important;
border:1px solid #eee4d8 !important;
border-radius:18px !important;
background:#fff !important;
box-shadow:0 4px 10px rgba(15,23,42,.025) !important;
}
[id^="ring-size-swatch-"] .swatch{
min-height:48px !important;
height:48px !important;
border:1px solid #ddd4c7 !important;
border-radius:14px !important;
font-size:13px !important;
font-weight:700 !important;
color:#1d2430 !important;
}
[id^="ring-size-swatch-"] .qty{
height:40px !important;
border-radius:12px !important;
}
[id^="ring-size-swatch-"] .qty .btn{
width:32px !important;
min-width:32px !important;
height:32px !important;
border-radius:10px !important;
}
.ts-product-prep-note{
margin:0 0 18px !important;
padding:14px 15px !important;
border:1px solid #ebe1d5 !important;
border-radius:18px !important;
background:linear-gradient(180deg,#fffefb 0%,#faf6ef 100%) !important;
box-shadow:0 8px 18px rgba(15,23,42,.03) !important;
}
.ts-product-prep-note-icon{
width:24px !important;
height:24px !important;
border-color:#dccbb4 !important;
color:#8a755b !important;
}
.ts-product-prep-note-text{
font-size:13px !important;
line-height:1.45 !important;
color:#2e3748 !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-sepet{
margin:18px 0 10px !important;
gap:12px !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-sepet-box button,
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-sepet-box-wp{
height:54px !important;
min-height:54px !important;
border-radius:16px !important;
font-size:12.5px !important;
letter-spacing:.06em !important;
text-transform:uppercase !important;
}
}
@media (max-width: 380px){
.urun-detay-sol-alan,
.ts-mobile-visual-rail,
.urun-detay-sag-alan{
width:calc(100% - 24px) !important;
max-width:calc(100% - 24px) !important;
}
.urun-detay-sol-alan .gc-display-area,
.urun-detay-sol-alan .gc-display-container,
.urun-detay-sol-alan .gc-display,
.urun-detay-sol-alan .gc-zoom,
.urun-detay-sol-alan .gc-thumbs-area,
.glass-case .gc-display-area,
.glass-case .gc-display-container,
.glass-case .gc-display,
.glass-case .gc-zoom,
.glass-case .gc-thumbs-area{
width:calc(100% - 24px) !important;
max-width:calc(100% - 24px) !important;
}
.ts-mobile-visual-row{
grid-template-columns:1fr !important;
gap:8px !important;
}
.urun-detay-sag-alan-baslik{
font-size:17px !important;
}
}
/* =========================================================
Product Detail Mobile Reference Layout
- category above title
- visual choices under title
- favorite over gallery
- meta rows aligned like the mobile mock
========================================================= */
.ts-mobile-gallery-favorite-slot{
display:none;
}
.ts-mobile-visual-rail-anchor{
display:none !important;
}
@media (max-width: 767px){
.urun-detay-main .urun-detay-main-in{
width:100% !important;
padding:10px 0 18px !important;
margin-bottom:0 !important;
}
.urun-detay-main .urun-detay-sol-alan,
.urun-detay-main .urun-detay-sag-alan{
width:calc(100% - 32px) !important;
max-width:520px !important;
}
.urun-detay-main .urun-detay-sol-alan{
position:relative !important;
margin-right:0 !important;
padding-bottom:8px !important;
}
.urun-detay-main .urun-detay-sol-alan .gc-display-area,
.urun-detay-main .urun-detay-sol-alan .gc-display-container,
.urun-detay-main .urun-detay-sol-alan .gc-display,
.urun-detay-main .urun-detay-sol-alan .gc-zoom,
.urun-detay-main .urun-detay-sol-alan .gc-thumbs-area,
.urun-detay-main .glass-case .gc-display-area,
.urun-detay-main .glass-case .gc-display-container,
.urun-detay-main .glass-case .gc-display,
.urun-detay-main .glass-case .gc-zoom,
.urun-detay-main .glass-case .gc-thumbs-area{
width:100% !important;
max-width:none !important;
}
.ts-mobile-gallery-favorite-slot{
position:absolute !important;
top:14px !important;
right:14px !important;
z-index:30 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
pointer-events:auto !important;
}
.ts-mobile-gallery-favorite-slot:empty{
display:none !important;
}
.product-detail-favorite-overlay,
.product-detail-favorite-overlay.fav-a,
.product-detail-favorite-overlay.fav-b{
width:42px !important;
min-width:42px !important;
height:42px !important;
min-height:42px !important;
margin:0 !important;
padding:0 !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
border:1px solid rgba(219, 201, 177, .82) !important;
border-radius:999px !important;
background:rgba(255, 252, 247, .98) !important;
box-shadow:0 6px 18px rgba(15,23,42,.06) !important;
color:#8c765b !important;
line-height:1 !important;
text-decoration:none !important;
}
.product-detail-favorite-overlay i{
margin:0 !important;
font-size:18px !important;
color:inherit !important;
}
.product-detail-favorite-overlay span{
display:none !important;
}
.product-detail-favorite-overlay:hover{
background:#fff7ee !important;
border-color:#d8c3a8 !important;
color:#775f47 !important;
}
.urun-detay-main .urun-detay-sag-alan{
display:flex !important;
flex-direction:column !important;
gap:0 !important;
padding:0 0 12px !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
.urun-detay-main .urun-detay-sag-alan > *{
order:65;
}
.urun-detay-main .urun-detay-sol-alan .glass-case{
width:100% !important;
max-width:none !important;
margin:0 auto !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
}
.urun-detay-main .urun-detay-sol-alan .glass-case ul#glasscase{
width:100% !important;
}
.urun-detay-main .urun-detay-sol-alan .gc-display-area,
.urun-detay-main .urun-detay-sol-alan .gc-display-container,
.urun-detay-main .urun-detay-sol-alan .gc-display,
.urun-detay-main .urun-detay-sol-alan .gc-slide-container,
.urun-detay-main .urun-detay-sol-alan .gc-zoom-area{
display:flex !important;
align-items:center !important;
justify-content:center !important;
margin-left:auto !important;
margin-right:auto !important;
overflow:hidden !important;
background:#fff !important;
}
.urun-detay-main .urun-detay-sol-alan .gc-display-area a,
.urun-detay-main .urun-detay-sol-alan .gc-slide-container a,
.urun-detay-main .urun-detay-sol-alan .gc-zoom-area a{
width:100% !important;
height:100% !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
.urun-detay-main .urun-detay-sol-alan .gc-display-area img,
.urun-detay-main .urun-detay-sol-alan .gc-slide-container img,
.urun-detay-main .urun-detay-sol-alan .gc-zoom-area img{
width:100% !important;
height:100% !important;
margin:0 auto !important;
object-fit:contain !important;
object-position:center center !important;
}
.urun-detay-main .urun-detay-sag-alan > .urun-detay-sag-alan-iliskili-kat{
order:10;
margin:0 0 10px !important;
font-size:13px !important;
line-height:1.4 !important;
color:#706757 !important;
}
.urun-detay-main .urun-detay-sag-alan > .urun-detay-sag-alan-iliskili-kat,
.urun-detay-main .urun-detay-sag-alan > .urun-detay-sag-alan-iliskili-kat a{
color:#706757 !important;
}
.urun-detay-main .urun-detay-sag-alan > .urun-detay-sag-alan-baslik{
order:20;
margin:0 0 16px !important;
font-size:20px !important;
line-height:1.18 !important;
letter-spacing:-.02em !important;
font-weight:800 !important;
color:#182234 !important;
}
.urun-detay-main .urun-detay-sag-alan > .urun-detay-baslik-alti{
order:21;
display:none !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
min-height:0 !important;
}
.urun-detay-main .urun-detay-sag-alan > .urun-detay-sag-alan-d-bilgiler-box,
.urun-detay-main .urun-detay-sag-alan > .urun-detay-sag-alan-urun-islemler-main{
display:none !important;
}
.urun-detay-main .urun-detay-sag-alan > .urun-detay-sag-alan-spot{
order:25;
margin:0 0 14px !important;
padding:0 !important;
border:0 !important;
background:transparent !important;
box-shadow:none !important;
font-size:13px !important;
line-height:1.5 !important;
color:#5f6776 !important;
}
.urun-detay-main .urun-detay-sag-alan > form#entercancel{
display:contents !important;
}
.urun-detay-main .urun-detay-sag-alan #tsMobileVisualRail{
order:30;
width:100% !important;
max-width:none !important;
margin:0 0 16px !important;
padding:0 !important;
}
.urun-detay-main .urun-detay-sag-alan #tsMobileVisualRail.is-active{
display:flex !important;
flex-direction:column !important;
gap:0 !important;
}
.urun-detay-main .urun-detay-sag-alan #tsMobileVisualRail .ts-mobile-visual-row{
position:relative !important;
grid-template-columns:minmax(112px, 120px) minmax(0, 1fr) 12px !important;
align-items:center !important;
gap:14px !important;
min-height:66px !important;
padding:12px 0 !important;
}
.urun-detay-main .urun-detay-sag-alan #tsMobileVisualRail .ts-mobile-visual-row::after{
content:"" !important;
width:7px !important;
height:7px !important;
justify-self:end !important;
border-top:1.5px solid #9c8870 !important;
border-right:1.5px solid #9c8870 !important;
transform:rotate(45deg) !important;
opacity:.95 !important;
}
.urun-detay-main .urun-detay-sag-alan #tsMobileVisualRail .ts-mobile-visual-row + .ts-mobile-visual-row{
margin-top:0 !important;
padding-top:14px !important;
border-top:1px solid #ece3d6 !important;
}
.urun-detay-main .urun-detay-sag-alan #tsMobileVisualRail .ts-mobile-visual-row__label{
font-size:12px !important;
line-height:1.35 !important;
letter-spacing:.12em !important;
text-transform:uppercase !important;
color:#6c5a42 !important;
}
.urun-detay-main .urun-detay-sag-alan #tsMobileVisualRail .ts-mobile-visual-row__options{
flex-wrap:wrap !important;
justify-content:flex-start !important;
gap:10px !important;
min-width:0 !important;
}
.urun-detay-main .urun-detay-sag-alan #tsMobileVisualRail .ts-mobile-visual-button{
width:46px !important;
min-width:46px !important;
height:46px !important;
border:1px solid #d9cfbf !important;
border-radius:14px !important;
background-color:#fffdfa !important;
background-position:center center !important;
background-repeat:no-repeat !important;
background-size:cover !important;
box-shadow:none !important;
transform:none !important;
}
.urun-detay-main .urun-detay-sag-alan #tsMobileVisualRail .ts-mobile-visual-button.has-image{
background-image:none !important;
overflow:hidden !important;
}
.urun-detay-main .urun-detay-sag-alan #tsMobileVisualRail .ts-mobile-visual-row[data-kind="gem"] .ts-mobile-visual-button{
border-radius:999px !important;
}
.urun-detay-main .urun-detay-sag-alan #tsMobileVisualRail .ts-mobile-visual-button img{
width:32px !important;
height:32px !important;
}
.urun-detay-main .urun-detay-sag-alan #tsMobileVisualRail .ts-mobile-visual-row[data-kind="plating"] .ts-mobile-visual-button img{
width:34px !important;
height:34px !important;
border-radius:12px !important;
}
.urun-detay-main .urun-detay-sag-alan #tsMobileVisualRail .ts-mobile-visual-button.active,
.urun-detay-main .urun-detay-sag-alan #tsMobileVisualRail .ts-mobile-visual-button[aria-pressed="true"]{
border-color:#1d2430 !important;
box-shadow:0 0 0 1px #1d2430 inset, 0 6px 14px rgba(15,23,42,.06) !important;
}
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout{
order:70;
margin:0 !important;
gap:14px !important;
}
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout.has-mobile-visual-rail > .ring-size-block,
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout > .ring-size-block{
margin:0 0 16px !important;
padding:16px !important;
border:1px solid #ebe1d5 !important;
border-radius:18px !important;
background:#fffdfa !important;
box-shadow:none !important;
}
.urun-detay-main .urun-detay-sag-alan .ribbon3{
order:48;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-fiyat-durumu,
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-fiyatlar{
order:50;
width:100% !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-fiyat-durumu{
margin:0 0 16px !important;
padding:14px 16px !important;
border:1px solid #e7dac6 !important;
border-radius:18px !important;
background:#fffdfa !important;
box-shadow:none !important;
font-size:14px !important;
line-height:1.45 !important;
color:#2b3140 !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-fiyat-durumu i{
width:22px !important;
height:22px !important;
background:#f8efe1 !important;
color:#c69741 !important;
font-size:12px !important;
}
.urun-detay-main .urun-detay-sag-alan > .urun-detay-sag-alan-no-stok{
order:55;
margin:0 0 14px !important;
}
.urun-detay-main .urun-detay-sag-alan > .urun-detay-sag-alan-d-bilgiler{
order:60;
display:block !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-d-bilgiler-box{
display:flex !important;
align-items:flex-start !important;
justify-content:space-between !important;
gap:18px !important;
width:100% !important;
margin:0 !important;
padding:12px 0 !important;
border-bottom:1px solid #ece3d6 !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-d-bilgiler-box .ts-detail-meta-label{
flex:1 1 auto !important;
margin:0 !important;
font-size:12px !important;
line-height:1.45 !important;
font-weight:500 !important;
color:#6c6a64 !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-d-bilgiler-box .ts-detail-meta-value,
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-d-bilgiler-box > a{
flex:0 0 auto !important;
justify-content:flex-end !important;
margin:0 !important;
text-align:right !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-d-bilgiler-box .ts-detail-meta-value{
font-size:14px !important;
line-height:1.35 !important;
font-weight:700 !important;
color:#182234 !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-d-bilgiler-box:last-child{
border-bottom:none !important;
}
.urun-detay-main .urun-detay-sag-alan .ts-product-prep-note{
order:75;
margin:16px 0 18px !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-sepet{
order:80;
margin:0 0 8px !important;
}
}
@media (max-width: 380px){
.urun-detay-main .urun-detay-sol-alan,
.urun-detay-main .urun-detay-sag-alan{
width:calc(100% - 24px) !important;
}
.product-detail-favorite-overlay,
.product-detail-favorite-overlay.fav-a,
.product-detail-favorite-overlay.fav-b{
width:40px !important;
min-width:40px !important;
height:40px !important;
min-height:40px !important;
}
.urun-detay-main .urun-detay-sag-alan > .urun-detay-sag-alan-baslik{
font-size:18px !important;
}
.urun-detay-main .urun-detay-sag-alan #tsMobileVisualRail .ts-mobile-visual-row{
grid-template-columns:minmax(96px, 104px) minmax(0, 1fr) 12px !important;
gap:8px !important;
padding:10px 0 !important;
}
}
/* =========================================================
Product Detail Mobile Final Balance
- hero image centered with controlled height
- technical rows locked to two-column rhythm
========================================================= */
@media (max-width: 767px){
.urun-detay-main .urun-detay-sol-alan{
margin-bottom:14px !important;
padding-bottom:2px !important;
}
.urun-detay-main .urun-detay-sol-alan .glass-case{
width:100% !important;
height:auto !important;
min-height:0 !important;
margin:0 auto !important;
padding:0 !important;
display:block !important;
overflow:visible !important;
background:transparent !important;
}
.urun-detay-main .urun-detay-sol-alan .gc-display-area,
.urun-detay-main .urun-detay-sol-alan .gc-display-container,
.urun-detay-main .urun-detay-sol-alan .gc-display,
.urun-detay-main .urun-detay-sol-alan .gc-slide-container{
width:100% !important;
max-width:none !important;
height:clamp(320px, 92vw, 430px) !important;
min-height:clamp(320px, 92vw, 430px) !important;
margin:0 auto !important;
background:#fff !important;
}
.urun-detay-main .urun-detay-sol-alan .gc-display-area{
position:relative !important;
padding:16px 10px 6px !important;
box-sizing:border-box !important;
}
.urun-detay-main .urun-detay-sol-alan .gc-display-container,
.urun-detay-main .urun-detay-sol-alan .gc-display,
.urun-detay-main .urun-detay-sol-alan .gc-slide-container{
height:100% !important;
min-height:0 !important;
}
.urun-detay-main .urun-detay-sol-alan .gc-display-area a,
.urun-detay-main .urun-detay-sol-alan .gc-display-container a,
.urun-detay-main .urun-detay-sol-alan .gc-slide-container a{
width:100% !important;
height:100% !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
.urun-detay-main .urun-detay-sol-alan .gc-display-area img,
.urun-detay-main .urun-detay-sol-alan .gc-display-container img,
.urun-detay-main .urun-detay-sol-alan .gc-slide-container img,
.urun-detay-main .urun-detay-sol-alan .gc-display-area img.gc-display-display,
.urun-detay-main .urun-detay-sol-alan .gc-display-container img.gc-display-display{
position:relative !important;
inset:auto !important;
top:auto !important;
left:auto !important;
width:auto !important;
height:auto !important;
max-width:94% !important;
max-height:84% !important;
margin:0 auto !important;
object-fit:contain !important;
object-position:center center !important;
transform:translateY(-6px) scale(1.02) !important;
}
.urun-detay-main .urun-detay-sol-alan .gc-thumbs-area,
.urun-detay-main .urun-detay-sol-alan .gc-overlay-area,
.urun-detay-main .urun-detay-sol-alan .gc-lens-container,
.urun-detay-main .urun-detay-sol-alan .gc-zoom-area{
display:none !important;
height:0 !important;
min-height:0 !important;
margin:0 !important;
padding:0 !important;
}
.ts-mobile-gallery-favorite-slot{
top:18px !important;
right:18px !important;
}
.product-detail-favorite-overlay,
.product-detail-favorite-overlay.fav-a,
.product-detail-favorite-overlay.fav-b{
width:40px !important;
min-width:40px !important;
height:40px !important;
min-height:40px !important;
}
.product-detail-favorite-overlay i{
font-size:17px !important;
}
.urun-detay-main .urun-detay-sag-alan{
padding-top:2px !important;
}
.urun-detay-main .urun-detay-sag-alan > .urun-detay-sag-alan-baslik{
margin-bottom:18px !important;
}
.urun-detay-main .urun-detay-sag-alan #tsMobileVisualRail{
margin-bottom:18px !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-fiyat-durumu{
margin-bottom:18px !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-d-bilgiler{
display:flex !important;
flex-direction:column !important;
gap:0 !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-d-bilgiler-box{
display:grid !important;
grid-template-columns:minmax(116px, 1fr) auto !important;
align-items:center !important;
column-gap:18px !important;
row-gap:0 !important;
padding:14px 0 !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-d-bilgiler-box .ts-detail-meta-label{
display:block !important;
grid-column:1 !important;
text-align:left !important;
white-space:normal !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-d-bilgiler-box .ts-detail-meta-value,
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-d-bilgiler-box > a{
display:inline-flex !important;
grid-column:2 !important;
align-items:center !important;
justify-content:flex-end !important;
text-align:right !important;
white-space:nowrap !important;
}
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout > .ring-size-block{
margin-top:4px !important;
}
.urun-detay-main .urun-detay-sag-alan .ts-product-prep-note{
margin-top:14px !important;
}
}
@media (max-width: 380px){
.urun-detay-main .urun-detay-sol-alan .gc-display-area,
.urun-detay-main .urun-detay-sol-alan .gc-display-container,
.urun-detay-main .urun-detay-sol-alan .gc-display,
.urun-detay-main .urun-detay-sol-alan .gc-slide-container{
height:clamp(300px, 88vw, 380px) !important;
min-height:clamp(300px, 88vw, 380px) !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-d-bilgiler-box{
grid-template-columns:minmax(98px, 1fr) auto !important;
column-gap:14px !important;
}
}
/* =========================================================
Product Detail Mobile Above-The-Fold Pass
- image, title, swatches, price note and meta fit in first view
========================================================= */
.ts-mobile-product-hero{
display:none;
}
@media (max-width: 767px){
.ts-mobile-product-hero{
--ts-mobile-hero-focus-x: 55.2%;
--ts-mobile-hero-focus-y: 68.2%;
position:relative !important;
display:block !important;
width:100% !important;
height:clamp(340px, 100vw, 430px) !important;
max-height:none !important;
margin:0 auto !important;
overflow:hidden !important;
background:#fff !important;
}
.ts-mobile-product-hero img{
position:absolute !important;
inset:0 !important;
display:block !important;
width:100% !important;
height:100% !important;
min-width:0 !important;
min-height:0 !important;
max-width:none !important;
max-height:none !important;
margin:0 !important;
object-fit:cover !important;
object-position:var(--ts-mobile-hero-focus-x) var(--ts-mobile-hero-focus-y) !important;
transform:none !important;
}
.urun-detay-main .urun-detay-main-in{
padding-top:8px !important;
padding-bottom:12px !important;
}
.urun-detay-main .urun-detay-sol-alan{
margin-bottom:8px !important;
}
.urun-detay-main .urun-detay-sol-alan .glass-case{
display:none !important;
height:0 !important;
min-height:0 !important;
margin:0 !important;
padding:0 !important;
overflow:hidden !important;
}
.urun-detay-main .urun-detay-sol-alan .gc-display-area{
height:auto !important;
min-height:0 !important;
aspect-ratio:1 / 1 !important;
max-height:320px !important;
padding:8px 0 2px !important;
overflow:hidden !important;
}
.urun-detay-main .urun-detay-sol-alan .gc-display-container,
.urun-detay-main .urun-detay-sol-alan .gc-display,
.urun-detay-main .urun-detay-sol-alan .gc-slide-container{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
min-height:0 !important;
}
.urun-detay-main .urun-detay-sol-alan .gc-display-area img,
.urun-detay-main .urun-detay-sol-alan .gc-display-container img,
.urun-detay-main .urun-detay-sol-alan .gc-slide-container img,
.urun-detay-main .urun-detay-sol-alan .gc-display-area img.gc-display-display,
.urun-detay-main .urun-detay-sol-alan .gc-display-container img.gc-display-display{
max-width:92% !important;
max-height:92% !important;
transform:translateY(-2px) scale(1.12) !important;
}
.ts-mobile-gallery-favorite-slot{
top:14px !important;
right:14px !important;
}
.product-detail-favorite-overlay,
.product-detail-favorite-overlay.fav-a,
.product-detail-favorite-overlay.fav-b{
width:38px !important;
min-width:38px !important;
height:38px !important;
min-height:38px !important;
}
.product-detail-favorite-overlay i{
font-size:16px !important;
}
.urun-detay-main .urun-detay-sag-alan > .urun-detay-sag-alan-iliskili-kat{
margin-bottom:8px !important;
font-size:12px !important;
}
.urun-detay-main .urun-detay-sag-alan > .urun-detay-sag-alan-baslik{
margin-bottom:12px !important;
font-size:18px !important;
line-height:1.14 !important;
}
.urun-detay-main .urun-detay-sag-alan #tsMobileVisualRail{
margin-bottom:12px !important;
}
.urun-detay-main .urun-detay-sag-alan #tsMobileVisualRail .ts-mobile-visual-row{
min-height:54px !important;
gap:12px !important;
padding:9px 0 !important;
}
.urun-detay-main .urun-detay-sag-alan #tsMobileVisualRail .ts-mobile-visual-row + .ts-mobile-visual-row{
padding-top:10px !important;
}
.urun-detay-main .urun-detay-sag-alan #tsMobileVisualRail .ts-mobile-visual-row__label{
font-size:11.5px !important;
}
.urun-detay-main .urun-detay-sag-alan #tsMobileVisualRail .ts-mobile-visual-button{
width:42px !important;
min-width:42px !important;
height:42px !important;
}
.urun-detay-main .urun-detay-sag-alan #tsMobileVisualRail .ts-mobile-visual-button img{
width:30px !important;
height:30px !important;
}
.urun-detay-main .urun-detay-sag-alan #tsMobileVisualRail .ts-mobile-visual-row[data-kind="plating"] .ts-mobile-visual-button img{
width:32px !important;
height:32px !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-fiyat-durumu{
margin:0 0 12px !important;
padding:12px 14px !important;
border-radius:16px !important;
font-size:13px !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-fiyat-durumu i{
width:20px !important;
height:20px !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-d-bilgiler-box{
padding:11px 0 !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-d-bilgiler-box .ts-detail-meta-label{
font-size:11.5px !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-d-bilgiler-box .ts-detail-meta-value{
font-size:13.5px !important;
}
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout{
gap:12px !important;
}
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout > .ring-size-block{
margin-top:2px !important;
padding:14px !important;
}
.urun-detay-main .urun-detay-sag-alan .ts-product-prep-note{
margin:12px 0 14px !important;
padding:12px 13px !important;
}
}
@media (max-width: 380px){
.ts-mobile-product-hero{
--ts-mobile-hero-focus-x: 54.8%;
--ts-mobile-hero-focus-y: 67.1%;
height:clamp(320px, 100vw, 380px) !important;
}
.ts-mobile-product-hero img{
width:100% !important;
}
.urun-detay-main .urun-detay-sol-alan .gc-display-area{
max-height:292px !important;
}
.urun-detay-main .urun-detay-sag-alan > .urun-detay-sag-alan-baslik{
font-size:17px !important;
}
.urun-detay-main .urun-detay-sag-alan #tsMobileVisualRail .ts-mobile-visual-row{
grid-template-columns:minmax(92px, 100px) minmax(0, 1fr) 12px !important;
}
}
/* =========================================================
Product Detail Mobile Full-Width Escape
- make product detail bleed edge-to-edge on mobile
========================================================= */
@media (max-width: 767px){
.urun-detay-main{
width:100vw !important;
max-width:none !important;
margin-left:calc(50% - 50vw) !important;
margin-right:calc(50% - 50vw) !important;
padding-left:0 !important;
padding-right:0 !important;
overflow:hidden !important;
}
.urun-detay-main .urun-detay-main-in{
width:100% !important;
max-width:none !important;
margin:0 !important;
padding:0 0 12px !important;
}
.urun-detay-main .urun-detay-sol-alan,
.urun-detay-main .urun-detay-sag-alan{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
}
.urun-detay-main .urun-detay-sol-alan{
padding-left:0 !important;
padding-right:0 !important;
}
.urun-detay-main .urun-detay-sag-alan{
box-sizing:border-box !important;
padding:4px 18px 14px !important;
border-left:0 !important;
border-right:0 !important;
border-radius:0 !important;
box-shadow:none !important;
}
}
/* =========================================================
Product Detail Mobile Final Polish
- preserve full-width shell, refine inner rhythm and finish
========================================================= */
@media (max-width: 767px){
.ts-mobile-gallery-favorite-slot{
top:12px !important;
right:12px !important;
}
.product-detail-favorite-overlay,
.product-detail-favorite-overlay.fav-a,
.product-detail-favorite-overlay.fav-b{
width:40px !important;
min-width:40px !important;
height:40px !important;
min-height:40px !important;
border-color:#e4d3bc !important;
background:rgba(255,255,255,.94) !important;
box-shadow:0 10px 22px rgba(15,23,42,.06) !important;
}
.urun-detay-main .urun-detay-sag-alan{
padding:6px 20px 18px !important;
}
.urun-detay-main .urun-detay-sag-alan > .urun-detay-sag-alan-iliskili-kat{
margin-bottom:10px !important;
color:#7a746e !important;
font-size:12px !important;
line-height:1.35 !important;
}
.urun-detay-main .urun-detay-sag-alan > .urun-detay-sag-alan-baslik{
margin-bottom:14px !important;
font-size:18px !important;
line-height:1.12 !important;
letter-spacing:-0.015em !important;
color:#182234 !important;
}
.urun-detay-main .urun-detay-sag-alan #tsMobileVisualRail{
margin-bottom:14px !important;
}
.urun-detay-main .urun-detay-sag-alan #tsMobileVisualRail .ts-mobile-visual-row{
min-height:56px !important;
padding:10px 0 !important;
border-bottom-color:#efe6db !important;
}
.urun-detay-main .urun-detay-sag-alan #tsMobileVisualRail .ts-mobile-visual-row__label{
font-size:11.5px !important;
letter-spacing:.12em !important;
color:#615d57 !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-fiyat-durumu{
margin:2px 0 14px !important;
padding:13px 15px !important;
border-radius:18px !important;
border-color:#e8dbc7 !important;
background:#fffdf9 !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-fiyat-durumu span,
.urun-detay-main .urun-detay-sag-alan .urun-detay-fiyat-durumu strong{
line-height:1.4 !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-d-bilgiler-box{
padding:12px 0 !important;
border-bottom-color:#f1e8de !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-d-bilgiler-box .ts-detail-meta-label{
font-size:11.5px !important;
color:#756f68 !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-d-bilgiler-box .ts-detail-meta-value{
font-size:13.5px !important;
letter-spacing:-0.01em !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-d-bilgiler-box .ts-detail-meta-value--success{
color:#1f8a44 !important;
}
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout{
gap:14px !important;
}
.urun-detay-main .urun-detay-sag-alan .product-detail-variant-layout > .ring-size-block{
margin-top:4px !important;
padding:16px !important;
border-radius:22px !important;
border-color:#ebe2d7 !important;
box-shadow:0 10px 24px rgba(15,23,42,.04) !important;
}
.urun-detay-main .urun-detay-sag-alan .ts-product-prep-note{
margin:14px 0 16px !important;
padding:13px 14px !important;
border-radius:18px !important;
border-color:#eadfce !important;
background:#fffdfa !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-sepet{
margin:2px 0 10px !important;
gap:14px !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-sepet-box button,
.urun-detay-main .urun-detay-sag-alan .urun-detay-sag-alan-sepet-box-wp{
min-height:54px !important;
border-radius:18px !important;
box-shadow:0 10px 24px rgba(15,23,42,.08) !important;
}
}
@media (max-width: 380px){
.urun-detay-main .urun-detay-sag-alan{
padding:6px 16px 18px !important;
}
.urun-detay-main .urun-detay-sag-alan > .urun-detay-sag-alan-baslik{
font-size:17px !important;
}
.urun-detay-main .urun-detay-sag-alan .urun-detay-fiyat-durumu{
padding:12px 14px !important;
}
}
/* =========================================================
CATEGORY CARD MICRO POLISH V2
- Capsule / weight / favorite / sku / price refinement
- Keeps existing interaction model, improves visual rhythm
========================================================= */
body .cat-detail-products [class*="cat-detail-products-box-img"]{
isolation:isolate;
}
body .cat-detail-products .product-side-badges{
top:14px !important;
gap:10px !important;
z-index:32 !important;
}
body .cat-detail-products .product-side-badges-left{
left:-16px !important;
}
body .cat-detail-products .product-side-badges-right{
right:-16px !important;
}
body .cat-detail-products .product-side-badge{
border-color:rgba(15,23,42,.08) !important;
background:
linear-gradient(180deg, rgba(255,255,255,.985) 0%, rgba(247,250,252,.94) 100%) !important;
box-shadow:
0 10px 24px rgba(15,23,42,.07),
0 1px 2px rgba(15,23,42,.04),
inset 0 1px 0 rgba(255,255,255,.9) !important;
}
body .cat-detail-products .product-side-badge-icon i{
color:#7b8493 !important;
}
body .cat-detail-products .product-side-badge-weight .product-side-badge-text{
font-variant-numeric:tabular-nums !important;
letter-spacing:0 !important;
font-weight:700 !important;
color:#344054 !important;
}
body .cat-detail-products .product-side-badges .product-side-badge:not(.product-side-badge-capsule),
body .cat-detail-products .product-fav-under-explore a{
opacity:.9;
}
@media (hover: hover) and (pointer: fine){
body .cat-detail-products .product-side-badge,
body .cat-detail-products .product-fav-under-explore a{
transform:translate3d(0, 0, 0) scale(.985) !important;
}
body .cat-detail-products .cat-detail-products-box:hover .product-side-badge,
body .cat-detail-products .cat-detail-products-box-big:hover .product-side-badge,
body .cat-detail-products .cat-detail-products-box-list:hover .product-side-badge,
body .cat-detail-products .cat-detail-products-box:hover .product-fav-under-explore a,
body .cat-detail-products .cat-detail-products-box-big:hover .product-fav-under-explore a,
body .cat-detail-products .cat-detail-products-box-list:hover .product-fav-under-explore a,
body .cat-detail-products .product-side-badge:hover,
body .cat-detail-products .product-fav-under-explore a:hover{
transform:translate3d(0, -1px, 0) scale(1) !important;
}
}
body .cat-detail-products .cat-detail-products-box:focus-within .product-side-badges .product-side-badge:not(.product-side-badge-capsule),
body .cat-detail-products .cat-detail-products-box-big:focus-within .product-side-badges .product-side-badge:not(.product-side-badge-capsule),
body .cat-detail-products .cat-detail-products-box-list:focus-within .product-side-badges .product-side-badge:not(.product-side-badge-capsule){
width:92px !important;
min-width:92px !important;
max-width:92px !important;
padding:0 13px 0 0 !important;
justify-content:flex-start !important;
}
body .cat-detail-products .cat-detail-products-box:focus-within .product-side-badges .product-side-badge:not(.product-side-badge-capsule) .product-side-badge-text,
body .cat-detail-products .cat-detail-products-box-big:focus-within .product-side-badges .product-side-badge:not(.product-side-badge-capsule) .product-side-badge-text,
body .cat-detail-products .cat-detail-products-box-list:focus-within .product-side-badges .product-side-badge:not(.product-side-badge-capsule) .product-side-badge-text{
max-width:62px !important;
opacity:1 !important;
transform:translateX(0) !important;
}
body .cat-detail-products .cat-detail-products-box:hover .product-side-badges .product-side-badge:not(.product-side-badge-capsule),
body .cat-detail-products .cat-detail-products-box-big:hover .product-side-badges .product-side-badge:not(.product-side-badge-capsule),
body .cat-detail-products .cat-detail-products-box-list:hover .product-side-badges .product-side-badge:not(.product-side-badge-capsule),
body .cat-detail-products .product-side-badges .product-side-badge:not(.product-side-badge-capsule):hover{
width:92px !important;
min-width:92px !important;
max-width:92px !important;
padding:0 13px 0 0 !important;
}
body .cat-detail-products .cat-detail-products-box:hover .product-side-badges .product-side-badge:not(.product-side-badge-capsule) .product-side-badge-text,
body .cat-detail-products .cat-detail-products-box-big:hover .product-side-badges .product-side-badge:not(.product-side-badge-capsule) .product-side-badge-text,
body .cat-detail-products .cat-detail-products-box-list:hover .product-side-badges .product-side-badge:not(.product-side-badge-capsule) .product-side-badge-text,
body .cat-detail-products .product-side-badges .product-side-badge:not(.product-side-badge-capsule):hover .product-side-badge-text{
max-width:62px !important;
}
body .cat-detail-products .product-side-badge-capsule-left .product-capsule-items{
left:calc(100% + 12px) !important;
gap:7px !important;
}
body .cat-detail-products .product-side-badge-capsule-right .product-capsule-items{
top:calc(100% + 10px) !important;
gap:7px !important;
}
body .cat-detail-products .product-capsule-item{
position:relative !important;
border-color:rgba(15,23,42,.08) !important;
box-shadow:
0 10px 22px rgba(15,23,42,.07),
0 1px 2px rgba(15,23,42,.04),
inset 0 1px 0 rgba(255,255,255,.9) !important;
opacity:0;
transform:translate3d(0, 4px, 0) scale(.96);
}
body .cat-detail-products .product-side-badge-capsule-left .product-capsule-item{
transform:translate3d(-6px, 0, 0) scale(.96);
}
body .cat-detail-products .product-side-badge-capsule-right .product-capsule-item{
transform:translate3d(0, -4px, 0) scale(.96);
}
body .cat-detail-products .product-capsule-item::before{
content:"";
position:absolute;
inset:2px;
border-radius:999px;
border:1px solid rgba(255,255,255,.64);
pointer-events:none;
}
body .cat-detail-products .product-capsule-item:nth-child(2){ transition-delay:.02s !important; }
body .cat-detail-products .product-capsule-item:nth-child(3){ transition-delay:.04s !important; }
body .cat-detail-products .product-capsule-item:nth-child(4){ transition-delay:.06s !important; }
body .cat-detail-products .product-capsule-item:nth-child(5){ transition-delay:.08s !important; }
body .cat-detail-products .product-capsule-item:nth-child(6){ transition-delay:.10s !important; }
body .cat-detail-products .cat-detail-products-box:hover .product-side-badge-capsule-left .product-capsule-item,
body .cat-detail-products .cat-detail-products-box-big:hover .product-side-badge-capsule-left .product-capsule-item,
body .cat-detail-products .cat-detail-products-box-list:hover .product-side-badge-capsule-left .product-capsule-item,
body .cat-detail-products .cat-detail-products-box:focus-within .product-side-badge-capsule-left .product-capsule-item,
body .cat-detail-products .cat-detail-products-box-big:focus-within .product-side-badge-capsule-left .product-capsule-item,
body .cat-detail-products .cat-detail-products-box-list:focus-within .product-side-badge-capsule-left .product-capsule-item,
body .cat-detail-products .product-side-badge-capsule-left:hover .product-capsule-item,
body .cat-detail-products .product-side-badge-capsule-left.is-open .product-capsule-item,
body .cat-detail-products .cat-detail-products-box:hover .product-side-badge-capsule-right .product-capsule-item,
body .cat-detail-products .cat-detail-products-box-big:hover .product-side-badge-capsule-right .product-capsule-item,
body .cat-detail-products .cat-detail-products-box-list:hover .product-side-badge-capsule-right .product-capsule-item,
body .cat-detail-products .cat-detail-products-box:focus-within .product-side-badge-capsule-right .product-capsule-item,
body .cat-detail-products .cat-detail-products-box-big:focus-within .product-side-badge-capsule-right .product-capsule-item,
body .cat-detail-products .cat-detail-products-box-list:focus-within .product-side-badge-capsule-right .product-capsule-item,
body .cat-detail-products .product-side-badge-capsule-right:hover .product-capsule-item,
body .cat-detail-products .product-side-badge-capsule-right.is-open .product-capsule-item{
opacity:1;
transform:translate3d(0, 0, 0) scale(1);
}
body .cat-detail-products .product-fav-under-explore{
width:37px !important;
height:37px !important;
bottom:-42px !important;
}
body .cat-detail-products .product-fav-under-explore a,
body .cat-detail-products .product-fav-under-explore a.product-fav-go,
body .cat-detail-products .product-fav-under-explore a.product-fav-del,
body .cat-detail-products .product-fav-under-explore a[data-target="#loginModal"]{
border-color:rgba(15,23,42,.08) !important;
background:
linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(248,250,252,.94) 100%) !important;
color:#8c95a4 !important;
box-shadow:
0 10px 24px rgba(15,23,42,.07),
0 1px 2px rgba(15,23,42,.04),
inset 0 1px 0 rgba(255,255,255,.9) !important;
}
body .cat-detail-products .product-fav-under-explore a.product-fav-del{
color:#d34569 !important;
border-color:rgba(211,69,105,.16) !important;
background:
linear-gradient(180deg, rgba(255,246,248,.98) 0%, rgba(255,255,255,.96) 100%) !important;
}
body .cat-detail-products .product-fav-under-explore a:hover{
color:#475467 !important;
}
body .cat-detail-products .product-fav-under-explore a.product-fav-del:hover{
color:#bb214b !important;
}
body .cat-detail-products .cat-detail-products-box-h a{
text-wrap:pretty;
letter-spacing:-0.012em !important;
}
body .cat-detail-products .product-sku{
margin-top:9px !important;
gap:7px !important;
}
body .cat-detail-products .product-sku .sku-label{
position:relative;
padding-right:8px;
font-size:10.5px !important;
letter-spacing:.14em !important;
text-transform:uppercase;
}
body .cat-detail-products .product-sku .sku-label::after{
content:"";
position:absolute;
top:50%;
right:0;
width:3px;
height:3px;
border-radius:999px;
background:currentColor;
opacity:.5;
transform:translateY(-50%);
}
body .cat-detail-products .product-sku .sku-value{
letter-spacing:.01em !important;
}
body .cat-detail-products .cat-detail-products-box-fiyat,
body .cat-detail-products .cat-detail-products-box-fiyat-list{
margin-top:10px !important;
}
body .cat-detail-products .cat-detail-products-box-fiyat-out{
display:flex;
flex-direction:column;
align-items:center;
gap:4px;
}
body .cat-detail-products .cat-detail-products-box-fiyat-mevcut{
line-height:1.1 !important;
letter-spacing:-.015em !important;
font-variant-numeric:tabular-nums !important;
}
body .cat-detail-products .cat-detail-products-box-fiyat-eski{
margin-bottom:0 !important;
}
body .cat-detail-products .urun-box-special-area,
body .cat-detail-products .urun-box-special-area-list{
margin-top:8px !important;
opacity:.9;
}
body .cat-detail-products .cat-detail-products-box-info-list .product-sku,
body .cat-detail-products .cat-detail-products-box-info-list .cat-detail-products-box-fiyat-out,
body .cat-detail-products .cat-detail-products-box-info-list .urun-box-special-area{
align-items:flex-start !important;
justify-content:flex-start !important;
text-align:left !important;
}
@media (max-width: 768px){
body .cat-detail-products .product-side-badges{
top:11px !important;
gap:8px !important;
}
body .cat-detail-products .product-side-badges-left{
left:-12px !important;
}
body .cat-detail-products .product-side-badges-right{
right:-12px !important;
}
body .cat-detail-products .cat-detail-products-box:hover .product-side-badges .product-side-badge:not(.product-side-badge-capsule),
body .cat-detail-products .cat-detail-products-box-big:hover .product-side-badges .product-side-badge:not(.product-side-badge-capsule),
body .cat-detail-products .cat-detail-products-box-list:hover .product-side-badges .product-side-badge:not(.product-side-badge-capsule),
body .cat-detail-products .cat-detail-products-box:focus-within .product-side-badges .product-side-badge:not(.product-side-badge-capsule),
body .cat-detail-products .cat-detail-products-box-big:focus-within .product-side-badges .product-side-badge:not(.product-side-badge-capsule),
body .cat-detail-products .cat-detail-products-box-list:focus-within .product-side-badges .product-side-badge:not(.product-side-badge-capsule),
body .cat-detail-products .product-side-badges .product-side-badge:not(.product-side-badge-capsule):hover{
width:82px !important;
min-width:82px !important;
max-width:82px !important;
}
body .cat-detail-products .cat-detail-products-box:hover .product-side-badges .product-side-badge:not(.product-side-badge-capsule) .product-side-badge-text,
body .cat-detail-products .cat-detail-products-box-big:hover .product-side-badges .product-side-badge:not(.product-side-badge-capsule) .product-side-badge-text,
body .cat-detail-products .cat-detail-products-box-list:hover .product-side-badges .product-side-badge:not(.product-side-badge-capsule) .product-side-badge-text,
body .cat-detail-products .cat-detail-products-box:focus-within .product-side-badges .product-side-badge:not(.product-side-badge-capsule) .product-side-badge-text,
body .cat-detail-products .cat-detail-products-box-big:focus-within .product-side-badges .product-side-badge:not(.product-side-badge-capsule) .product-side-badge-text,
body .cat-detail-products .cat-detail-products-box-list:focus-within .product-side-badges .product-side-badge:not(.product-side-badge-capsule) .product-side-badge-text,
body .cat-detail-products .product-side-badges .product-side-badge:not(.product-side-badge-capsule):hover .product-side-badge-text{
max-width:52px !important;
}
body .cat-detail-products .product-fav-under-explore{
width:35px !important;
height:35px !important;
bottom:-40px !important;
}
}
/* =========================================================
CATEGORY CARD MICRO POLISH V2.1
- Weight pill readability boost
========================================================= */
body .cat-detail-products .product-side-badge-weight{
z-index:34 !important;
}
body .cat-detail-products .product-side-badge-weight .product-side-badge-icon i{
color:#5f6b7c !important;
font-size:12px !important;
}
body .cat-detail-products .product-side-badge-weight .product-side-badge-text{
color:#1f2937 !important;
font-size:11.5px !important;
font-weight:800 !important;
display:inline-flex !important;
align-items:center !important;
overflow:visible !important;
height:auto !important;
min-height:16px !important;
padding-top:1px !important;
padding-bottom:2px !important;
line-height:1.18 !important;
text-shadow:none !important;
}
body .cat-detail-products .cat-detail-products-box:hover .product-side-badge-weight,
body .cat-detail-products .cat-detail-products-box-big:hover .product-side-badge-weight,
body .cat-detail-products .cat-detail-products-box-list:hover .product-side-badge-weight,
body .cat-detail-products .cat-detail-products-box:focus-within .product-side-badge-weight,
body .cat-detail-products .cat-detail-products-box-big:focus-within .product-side-badge-weight,
body .cat-detail-products .cat-detail-products-box-list:focus-within .product-side-badge-weight,
body .cat-detail-products .product-side-badge-weight:hover{
width:104px !important;
min-width:104px !important;
max-width:104px !important;
padding:0 14px 0 0 !important;
border-color:rgba(15,23,42,.12) !important;
background:
linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(246,249,252,.98) 100%) !important;
box-shadow:
0 12px 28px rgba(15,23,42,.09),
0 1px 2px rgba(15,23,42,.04),
inset 0 1px 0 rgba(255,255,255,.95) !important;
}
body .cat-detail-products .cat-detail-products-box:hover .product-side-badge-weight .product-side-badge-text,
body .cat-detail-products .cat-detail-products-box-big:hover .product-side-badge-weight .product-side-badge-text,
body .cat-detail-products .cat-detail-products-box-list:hover .product-side-badge-weight .product-side-badge-text,
body .cat-detail-products .cat-detail-products-box:focus-within .product-side-badge-weight .product-side-badge-text,
body .cat-detail-products .cat-detail-products-box-big:focus-within .product-side-badge-weight .product-side-badge-text,
body .cat-detail-products .cat-detail-products-box-list:focus-within .product-side-badge-weight .product-side-badge-text,
body .cat-detail-products .product-side-badge-weight:hover .product-side-badge-text{
max-width:72px !important;
opacity:1 !important;
transform:translateX(0) !important;
}
@media (max-width: 768px){
body .cat-detail-products .cat-detail-products-box:hover .product-side-badge-weight,
body .cat-detail-products .cat-detail-products-box-big:hover .product-side-badge-weight,
body .cat-detail-products .cat-detail-products-box-list:hover .product-side-badge-weight,
body .cat-detail-products .cat-detail-products-box:focus-within .product-side-badge-weight,
body .cat-detail-products .cat-detail-products-box-big:focus-within .product-side-badge-weight,
body .cat-detail-products .cat-detail-products-box-list:focus-within .product-side-badge-weight,
body .cat-detail-products .product-side-badge-weight:hover{
width:94px !important;
min-width:94px !important;
max-width:94px !important;
padding:0 12px 0 0 !important;
}
body .cat-detail-products .cat-detail-products-box:hover .product-side-badge-weight .product-side-badge-text,
body .cat-detail-products .cat-detail-products-box-big:hover .product-side-badge-weight .product-side-badge-text,
body .cat-detail-products .cat-detail-products-box-list:hover .product-side-badge-weight .product-side-badge-text,
body .cat-detail-products .cat-detail-products-box:focus-within .product-side-badge-weight .product-side-badge-text,
body .cat-detail-products .cat-detail-products-box-big:focus-within .product-side-badge-weight .product-side-badge-text,
body .cat-detail-products .cat-detail-products-box-list:focus-within .product-side-badge-weight .product-side-badge-text,
body .cat-detail-products .product-side-badge-weight:hover .product-side-badge-text{
max-width:64px !important;
font-size:11px !important;
overflow:visible !important;
height:auto !important;
min-height:15px !important;
padding-top:1px !important;
padding-bottom:2px !important;
}
}
/* =========================================================
CATEGORY CARD PROFESSIONAL HIERARCHY V3
- features top-left
- actions top-right
- explore on visual
- meta calm below
========================================================= */
body .cat-detail-products .cat-detail-products-box,
body .cat-detail-products .cat-detail-products-box-big,
body .cat-detail-products .cat-detail-products-box-list{
overflow:visible !important;
}
body .cat-detail-products .cat-detail-products-box-img,
body .cat-detail-products .cat-detail-products-box-img-big,
body .cat-detail-products .cat-detail-products-box-img-list{
overflow:visible !important;
margin-bottom:26px !important;
}
body .cat-detail-products .product-side-badges{
gap:9px !important;
}
body .cat-detail-products .product-side-badges-left{
top:14px !important;
left:-14px !important;
}
body .cat-detail-products .product-side-badges-right{
top:62px !important;
right:-14px !important;
gap:8px !important;
}
body .cat-detail-products .product-fav-under-explore{
top:14px !important;
right:-14px !important;
left:auto !important;
bottom:auto !important;
transform:none !important;
z-index:42 !important;
width:38px !important;
height:38px !important;
}
body .cat-detail-products .product-fav-under-explore a,
body .cat-detail-products .product-fav-under-explore a.product-fav-go,
body .cat-detail-products .product-fav-under-explore a.product-fav-del,
body .cat-detail-products .product-fav-under-explore a[data-target="#loginModal"]{
border-color:rgba(15,23,42,.09) !important;
background:
linear-gradient(180deg, rgba(255,255,255,.985) 0%, rgba(246,249,252,.95) 100%) !important;
}
body .cat-detail-products [class*="cat-detail-products-box-img"]::before{
bottom:18px !important;
height:36px !important;
min-width:116px;
padding:0 22px !important;
border-radius:999px !important;
background:rgba(255,255,255,.88) !important;
color:#142032 !important;
border:1px solid rgba(20,32,50,.14) !important;
box-shadow:
0 12px 28px rgba(15,23,42,.08),
0 1px 2px rgba(15,23,42,.04) !important;
letter-spacing:.24em !important;
font-weight:700 !important;
}
body .cat-detail-products .cat-detail-products-box-h{
margin-bottom:0 !important;
}
body .cat-detail-products .cat-detail-products-box-info,
body .cat-detail-products .cat-detail-products-box-info-big{
padding-top:2px !important;
}
body .cat-detail-products .cat-detail-products-box-h a{
max-width:96% !important;
margin:0 auto !important;
}
body .cat-detail-products .product-sku{
margin-top:7px !important;
}
body .cat-detail-products .cat-detail-products-box-fiyat,
body .cat-detail-products .cat-detail-products-box-fiyat-list{
justify-content:center !important;
margin-top:12px !important;
}
body .cat-detail-products .cat-detail-products-box-fiyat-out{
min-height:44px;
}
body .cat-detail-products .urun-box-special-area,
body .cat-detail-products .urun-box-special-area-list{
margin-top:10px !important;
}
body .cat-detail-products .cat-detail-products-box-info-list .cat-detail-products-box-fiyat,
body .cat-detail-products .cat-detail-products-box-info-list .cat-detail-products-box-fiyat-list{
justify-content:flex-start !important;
}
@media (max-width: 768px){
body .cat-detail-products .cat-detail-products-box-img,
body .cat-detail-products .cat-detail-products-box-img-big,
body .cat-detail-products .cat-detail-products-box-img-list{
margin-bottom:22px !important;
}
body .cat-detail-products .product-side-badges-left{
top:12px !important;
left:-10px !important;
}
body .cat-detail-products .product-side-badges-right{
top:56px !important;
right:-10px !important;
}
body .cat-detail-products .product-fav-under-explore{
top:12px !important;
right:-10px !important;
width:35px !important;
height:35px !important;
}
body .cat-detail-products [class*="cat-detail-products-box-img"]::before{
bottom:14px !important;
min-width:104px;
height:34px !important;
padding:0 18px !important;
letter-spacing:.21em !important;
font-size:10.5px !important;
}
}
/* =========================================================
TS FILTER PANEL EDITORIAL FINISH
- professional drawer/panel surface
- cleaner sections and price area
========================================================= */
.filter-overlay,
.mobile-filter-backdrop{
background: rgba(15, 23, 42, .24) !important;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.filter-panel,
.mobile-filter-drawer{
background: linear-gradient(180deg, #f6f8fb 0%, #f3f6fb 100%) !important;
border-right: 1px solid #e3e9f1 !important;
box-shadow: 0 32px 64px rgba(15, 23, 42, .18) !important;
overflow: hidden;
}
.filter-panel{
width: 388px !important;
border-top-right-radius: 24px;
border-bottom-right-radius: 24px;
}
.mobile-filter-drawer{
width: 88%;
max-width: 388px;
border-top-right-radius: 24px;
border-bottom-right-radius: 24px;
}
.filter-panel-header,
.mobile-filter-header{
position: sticky;
top: 0;
z-index: 4;
padding: 22px 22px 18px !important;
background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(247,249,252,.96) 100%) !important;
border-bottom: 1px solid rgba(223, 229, 239, .92) !important;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.filter-panel-title,
.mobile-filter-title{
gap: 14px !important;
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: .16em !important;
text-transform: uppercase;
color: #1d2a40 !important;
}
.filter-panel-title i,
.mobile-filter-title i{
width: 34px !important;
height: 34px !important;
border-radius: 999px;
background: linear-gradient(135deg, rgba(31, 44, 68, .10), rgba(212, 175, 55, .24)) !important;
color: #223253 !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.filter-panel-close,
.mobile-filter-close{
width: 38px !important;
height: 38px !important;
border: 1px solid #dfe6ef !important;
background: rgba(255,255,255,.88) !important;
color: #6d7787 !important;
box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}
.filter-panel-close:hover,
.mobile-filter-close:hover{
background: #ffffff !important;
color: #1f2c44 !important;
border-color: #d2dbe7 !important;
}
.filter-panel-body,
.mobile-filter-body{
flex: 1;
overflow-y: auto;
padding: 16px 14px 26px !important;
background: linear-gradient(180deg, #f5f7fb 0%, #ffffff 16%, #f8fafc 100%);
}
.filter-panel-body::-webkit-scrollbar,
.mobile-filter-body::-webkit-scrollbar{
width: 8px;
}
.filter-panel-body::-webkit-scrollbar-thumb,
.mobile-filter-body::-webkit-scrollbar-thumb{
background: #d7deea;
border-radius: 999px;
}
.filter-panel-body .cat-left-main,
.mobile-filter-body .cat-left-main{
display: flex;
flex-direction: column;
gap: 14px;
border: none !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
}
.filter-panel-body .cd-filter-section,
.mobile-filter-body .cd-filter-section{
margin: 0 !important;
padding: 0 18px !important;
border: 1px solid #e7edf5 !important;
border-radius: 20px;
background: rgba(255,255,255,.96) !important;
box-shadow: 0 14px 30px rgba(15, 23, 42, .06);
}
.filter-panel-body .cd-filter-section:last-child,
.mobile-filter-body .cd-filter-section:last-child{
border-bottom: 1px solid #e7edf5 !important;
}
.filter-panel-body .cat-left-box-h.cd-filter-section-head,
.mobile-filter-body .cat-left-box-h.cd-filter-section-head{
display: flex;
align-items: center;
gap: 10px;
padding: 18px 0 14px !important;
margin: 0 !important;
color: #3a475c !important;
font-size: 12px !important;
font-weight: 800 !important;
letter-spacing: .08em !important;
text-transform: uppercase;
border: none !important;
}
.cd-filter-section-title{
flex: 0 0 auto;
}
.cd-filter-section-count{
min-width: 28px;
height: 28px;
padding: 0 8px;
border: 1px solid #e2e8f0;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #ffffff;
color: #6f7a8c;
font-size: 11px;
font-weight: 800;
letter-spacing: 0;
text-transform: none;
box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
}
.cd-filter-section-line{
flex: 1 1 auto;
width: auto !important;
height: 1px !important;
background: linear-gradient(90deg, rgba(31, 44, 68, .14), rgba(31, 44, 68, 0)) !important;
border-radius: 999px;
}
.filter-panel-body .cd-filter-section-body,
.mobile-filter-body .cd-filter-section-body{
padding: 0 0 18px !important;
}
.cd-filter-scroll{
max-height: 320px;
padding-right: 4px;
}
.cd-filter-link,
.cd-filter-nested-summary,
.cd-filter-sub-link{
min-height: 44px;
padding: 10px 12px !important;
border-radius: 14px;
color: #1f2c44 !important;
transition: background .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.cd-filter-link:hover,
.cd-filter-nested-summary:hover,
.cd-filter-sub-link:hover{
background: #f7f9fc;
color: #162136 !important;
transform: translateX(3px);
box-shadow: inset 0 0 0 1px rgba(224, 231, 240, .9);
}
.cd-filter-link-label{
gap: 12px;
}
.cd-filter-link-label i{
color: #97a2b4;
}
.cd-filter-nested{
padding: 3px 0;
border-bottom: none;
}
.cd-filter-nested-links{
padding: 4px 0 8px 10px;
}
.cd-filter-sub-link{
font-size: 13px;
color: #728096 !important;
}
.cd-filter-sub-link-parent{
color: #1d2a40 !important;
font-weight: 700;
}
.cd-filter-chevron{
width: 9px;
height: 9px;
border-right: 1.5px solid #98a4b6;
border-bottom: 1.5px solid #98a4b6;
}
.cat-left-box-t.cd-filter-option{
margin: 0 0 8px !important;
padding: 0 !important;
}
.cat-left-box-t.cd-filter-option:last-child{
margin-bottom: 0 !important;
}
.cd-filter-check{
padding: 0 !important;
margin: 0 !important;
}
.cd-filter-check .custom-control-label{
display: block;
padding: 11px 14px 11px 40px;
border: 1px solid #e7edf5;
border-radius: 14px;
background: #fbfcfe;
color: #223047 !important;
font-size: 13px !important;
line-height: 1.4;
transition: border-color .22s ease, background .22s ease, box-shadow .22s ease, color .22s ease;
}
.cd-filter-check .custom-control-label:hover{
border-color: #d8e1eb;
background: #ffffff;
}
.cd-filter-check .custom-control-label::before{
left: 14px !important;
top: 50% !important;
width: 16px;
height: 16px;
border-radius: 6px !important;
border: 1px solid #cbd5e1 !important;
background: #ffffff !important;
transform: translateY(-50%);
}
.cd-filter-check .custom-control-label::after{
left: 18px !important;
top: 50% !important;
transform: translateY(-50%);
}
.cd-filter-check .custom-control-input:checked ~ .custom-control-label{
border-color: rgba(212, 175, 55, .40);
background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(251,247,237,.96) 100%);
color: #1d2a40 !important;
font-weight: 600;
box-shadow: 0 12px 24px rgba(212, 175, 55, .10);
}
.cd-filter-check .custom-control-input:checked ~ .custom-control-label::before{
background: #223253 !important;
border-color: #223253 !important;
}
.cd-filter-price{
padding-bottom: 2px;
}
.price-field{
--range-start: 0;
--range-end: 100;
position: relative;
height: 40px;
margin: 6px 0 18px;
}
.price-field::before{
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 6px;
border-radius: 999px;
background: #e5ebf3;
transform: translateY(-50%);
}
.price-field::after{
content: "";
position: absolute;
top: 50%;
left: calc(var(--range-start) * 1%);
width: calc((var(--range-end) - var(--range-start)) * 1%);
height: 6px;
border-radius: 999px;
background: linear-gradient(90deg, #d2b176 0%, #e0c78e 100%);
transform: translateY(-50%);
}
.price-field input[type="range"]{
background: transparent !important;
z-index: 2;
}
.price-field input[type="range"]::-webkit-slider-runnable-track,
.price-field input[type="range"]::-moz-range-track{
background: transparent;
}
.price-field input[type="range"]::-webkit-slider-thumb{
width: 18px;
height: 18px;
margin-top: -7px;
border: 2px solid #ffffff;
background: #223253;
box-shadow: 0 0 0 1px rgba(203, 213, 225, .95), 0 8px 18px rgba(34, 50, 83, .18);
}
.price-field input[type="range"]::-moz-range-thumb{
width: 18px;
height: 18px;
border: 2px solid #ffffff;
background: #223253;
box-shadow: 0 0 0 1px rgba(203, 213, 225, .95), 0 8px 18px rgba(34, 50, 83, .18);
}
.price-wrap{
gap: 12px;
margin-bottom: 16px;
}
.price-wrap-outputbox{
min-height: 46px;
padding: 10px 12px;
border: 1px solid #e7edf5;
border-radius: 14px;
background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
color: #223047;
}
.price-wrap-outputbox .output,
.price-wrap-outputbox .output2{
font-size: 13px;
font-weight: 700;
}
.cd-filter-button{
min-height: 46px;
border-radius: 14px;
background: linear-gradient(135deg, #cfb27b 0%, #e0c58d 100%);
color: #1f2c44;
box-shadow: 0 14px 28px rgba(160, 132, 74, .18);
}
.cd-filter-button:hover{
transform: translateY(-1px);
box-shadow: 0 18px 32px rgba(160, 132, 74, .24);
}
.mobile-filter-footer{
position: sticky;
bottom: 0;
padding: 16px 16px 18px;
border-top: 1px solid rgba(223, 229, 239, .92);
background: linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.98) 100%);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.mobile-filter-footer button{
min-height: 48px;
border-radius: 14px;
font-weight: 700;
letter-spacing: .08em;
}
@media (max-width: 767.98px){
.filter-panel,
.mobile-filter-drawer{
width: 90vw !important;
max-width: 90vw !important;
border-top-right-radius: 22px;
border-bottom-right-radius: 22px;
}
.filter-panel-header,
.mobile-filter-header{
padding: 18px 18px 16px !important;
}
.filter-panel-body,
.mobile-filter-body{
padding: 14px 12px 22px !important;
}
.filter-panel-body .cd-filter-section,
.mobile-filter-body .cd-filter-section{
padding: 0 16px !important;
border-radius: 18px;
}
.price-wrap{
flex-direction: column;
}
}
/* =========================================================
TS FILTER PANEL STRUCTURE TUNE V2
- square outer shell
- no inner panel-body scrollbar
- subcategories inspired by mobile menu
========================================================= */
.filter-panel,
.mobile-filter-drawer{
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
scrollbar-width: none;
-ms-overflow-style: none;
}
.filter-panel::-webkit-scrollbar,
.mobile-filter-drawer::-webkit-scrollbar{
width: 0;
height: 0;
}
.filter-panel-body,
.mobile-filter-body{
overflow: visible !important;
flex: 0 0 auto;
padding: 10px 10px 18px !important;
}
.filter-panel-body .cat-left-main,
.mobile-filter-body .cat-left-main{
width: 100% !important;
margin-right: 0 !important;
gap: 10px;
}
.filter-panel-body .cd-filter-section,
.mobile-filter-body .cd-filter-section{
width: 100% !important;
padding: 0 18px !important;
border-radius: 12px;
box-shadow: 0 10px 22px rgba(15, 23, 42, .045);
}
.filter-panel-body .cd-filter-section .cat-left-box-h.cd-filter-section-head,
.mobile-filter-body .cd-filter-section .cat-left-box-h.cd-filter-section-head{
padding: 15px 0 12px !important;
}
.filter-panel-body .cd-filter-section .cd-filter-section-body,
.mobile-filter-body .cd-filter-section .cd-filter-section-body{
padding-bottom: 14px !important;
}
.cd-filter-section-count{
min-width: 24px;
height: 24px;
padding: 0 6px;
font-size: 10px;
}
.cd-filter-check .custom-control-label{
padding: 10px 14px 10px 38px;
border-radius: 12px;
}
.price-wrap-outputbox{
min-height: 42px;
padding: 9px 12px;
}
.cd-filter-button{
min-height: 44px;
border-radius: 12px;
}
.mobile-filter-footer{
padding: 14px 14px 16px;
}
.cd-filter-section-subcategories{
border-radius: 0 !important;
background: #ffffff !important;
box-shadow: none !important;
}
.cd-filter-section-subcategories .cat-left-box-h.cd-filter-section-head{
padding: 16px 0 10px !important;
}
.cd-filter-section-subcategories .cd-filter-section-body{
padding-bottom: 6px !important;
}
.cd-filter-section-subcategories .cd-filter-scroll{
max-height: 438px;
padding-right: 6px;
}
.cd-filter-section-subcategories .cd-filter-link,
.cd-filter-section-subcategories .cd-filter-nested-summary{
min-height: 56px;
padding: 0 4px !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
border-bottom: 1px solid #edf2f7;
color: #223253 !important;
font-size: 14px;
font-weight: 700;
letter-spacing: .01em;
transform: none !important;
}
.cd-filter-section-subcategories .cd-filter-link:hover,
.cd-filter-section-subcategories .cd-filter-nested-summary:hover{
color: #111c30 !important;
background: transparent !important;
box-shadow: none !important;
}
.cd-filter-section-subcategories .cd-filter-link.is-current,
.cd-filter-section-subcategories .cd-filter-sub-link.is-current,
.cd-filter-section-subcategories .cd-filter-nested-summary.is-current-branch,
.cd-filter-section-subcategories .cd-filter-sub-link-parent.is-current{
color: #162136 !important;
font-weight: 800;
}
.cd-filter-section-subcategories .cd-filter-link.is-current::before,
.cd-filter-section-subcategories .cd-filter-sub-link.is-current::before,
.cd-filter-section-subcategories .cd-filter-nested-summary.is-current-branch::before{
content: "";
width: 3px;
height: 20px;
margin-right: 12px;
border-radius: 999px;
background: linear-gradient(180deg, #cfae73 0%, #e1c78f 100%);
flex: 0 0 auto;
}
.cd-filter-section-subcategories .cd-filter-link::after{
content: "";
width: 8px;
height: 8px;
margin-left: auto;
border-right: 1.5px solid #9aa5b5;
border-bottom: 1.5px solid #9aa5b5;
transform: rotate(-45deg);
flex: 0 0 auto;
}
.cd-filter-section-subcategories .cd-filter-link-label{
gap: 0;
flex: 1 1 auto;
}
.cd-filter-section-subcategories .cd-filter-link-label i{
display: none;
}
.cd-filter-section-subcategories .cd-filter-chevron{
margin-left: auto;
}
.cd-filter-section-subcategories .cd-filter-nested[open] .cd-filter-nested-summary{
border-bottom-color: transparent;
}
.cd-filter-section-subcategories .cd-filter-nested-links{
padding: 0 0 10px 14px;
border-left: 1px solid #edf2f7;
}
.cd-filter-section-subcategories .cd-filter-sub-link{
min-height: 40px;
padding: 9px 0 9px 14px !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #667388 !important;
font-size: 13px;
font-weight: 600;
}
@media (max-width: 767.98px){
.cd-filter-section-subcategories .cd-filter-scroll{
max-height: 52vh;
}
.cd-filter-section-subcategories .cd-filter-link,
.cd-filter-section-subcategories .cd-filter-nested-summary{
min-height: 52px;
}
}
.cd-filter-section-subcategories .cd-filter-sub-link-parent{
color: #223253 !important;
}
/* =========================================================
TS CATEGORY PAGINATION POLISH
========================================================= */
.category-pagination-out{
width: 100% !important;
margin: 26px 0 10px !important;
padding: 8px 0 0;
}
.category-pagination-nav{
display: flex;
justify-content: center;
}
.category-pagination{
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 12px 14px;
border: 1px solid rgba(219, 226, 236, .9);
border-radius: 999px;
background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(247,249,252,.98) 100%);
box-shadow: 0 18px 36px rgba(15, 23, 42, .06);
}
.category-pagination .page-item{
margin: 0 !important;
}
.category-pagination .page-link{
min-width: 40px;
height: 40px;
padding: 0 14px;
border: 1px solid #dde5ef;
border-radius: 12px !important;
display: inline-flex;
align-items: center;
justify-content: center;
background: #ffffff;
color: #5d6b82 !important;
font-size: 13px;
font-weight: 700;
line-height: 1;
text-decoration: none;
box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, color .22s ease, background .22s ease;
}
.category-pagination .page-item:not(.active) .page-link:hover{
border-color: #cfd8e5;
color: #1f2c44 !important;
background: #ffffff;
box-shadow: 0 12px 24px rgba(15, 23, 42, .08);
transform: translateY(-1px);
}
.category-pagination .page-item.active .page-link{
border-color: #c8d3e2 !important;
background: #ffffff !important;
color: #223253 !important;
box-shadow:
0 10px 22px rgba(15, 23, 42, .08),
inset 0 0 0 1px rgba(34, 50, 83, .08);
}
.category-pagination .page-item:first-child .page-link,
.category-pagination .page-item:nth-last-child(2) .page-link,
.category-pagination .page-item:last-child .page-link{
min-width: 0;
padding: 0 16px;
color: #39475d !important;
letter-spacing: .02em;
}
.category-pagination .page-item.disabled .page-link,
.category-pagination .page-link[aria-disabled="true"]{
opacity: .45;
pointer-events: none;
box-shadow: none;
}
@media (max-width: 767.98px){
.category-pagination-out{
margin: 22px 0 8px !important;
}
.category-pagination{
gap: 6px;
padding: 10px;
border-radius: 20px;
}
.category-pagination .page-link{
min-width: 36px;
height: 36px;
padding: 0 12px;
font-size: 12px;
border-radius: 10px !important;
}
}
/* =========================================================
TS CATEGORY MOBILE VISUAL QUALITY PASS
- category cards feel sharper and closer to product detail
- calmer spacing and stronger mobile visual stage
========================================================= */
@media (max-width: 767.98px){
body .cat-right-elements.cat-filter-bar{
margin: 4px 0 20px !important;
padding: 0 0 14px !important;
gap: 14px;
}
body .cat-detail-products{
row-gap: 22px !important;
}
body .cat-detail-products .cat-detail-products-box,
body .cat-detail-products .cat-detail-products-box-big,
body .cat-detail-products .cat-detail-products-box-list{
padding: 0 10px 8px !important;
}
body .cat-detail-products .cat-detail-products-box-img,
body .cat-detail-products .cat-detail-products-box-img-big,
body .cat-detail-products .cat-detail-products-box-img-list{
width: min(100%, 352px) !important;
max-width: calc(100% - 6px) !important;
aspect-ratio: 1 / 1.08 !important;
margin: 0 auto 20px !important;
overflow: visible !important;
}
body .cat-detail-products .cat-detail-products-box-img > a,
body .cat-detail-products .cat-detail-products-box-img-big > a,
body .cat-detail-products .cat-detail-products-box-img-list > a{
inset: 0 !important;
}
body .cat-detail-products .category-card-image,
body .cat-detail-products .cat-detail-products-box-img img,
body .cat-detail-products .cat-detail-products-box-img-big img,
body .cat-detail-products .cat-detail-products-box-img-list img{
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center 52% !important;
image-rendering: auto;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
filter: none !important;
}
body .cat-detail-products .product-side-badges{
gap: 8px !important;
}
body .cat-detail-products .product-side-badges-left{
top: 14px !important;
left: 8px !important;
}
body .cat-detail-products .product-side-badges-right{
top: 62px !important;
right: 8px !important;
gap: 8px !important;
}
body .cat-detail-products .product-fav-under-explore{
top: 14px !important;
right: 8px !important;
width: 36px !important;
height: 36px !important;
}
body .cat-detail-products .product-side-badge,
body .cat-detail-products .product-side-badge-icon,
body .cat-detail-products .product-capsule-item{
width: 36px !important;
min-width: 36px !important;
max-width: 36px !important;
height: 36px !important;
min-height: 36px !important;
max-height: 36px !important;
}
body .cat-detail-products [class*="cat-detail-products-box-img"]::before{
bottom: 10px !important;
min-width: 110px;
height: 36px !important;
padding: 0 18px !important;
background: rgba(255, 255, 255, .94) !important;
border-color: rgba(20, 32, 50, .12) !important;
box-shadow:
0 12px 28px rgba(15, 23, 42, .08),
0 1px 2px rgba(15, 23, 42, .04) !important;
letter-spacing: .20em !important;
font-size: 10.5px !important;
}
body .cat-detail-products .cat-detail-products-box-info,
body .cat-detail-products .cat-detail-products-box-info-big{
padding: 0 6px !important;
text-align: center !important;
}
body .cat-detail-products .cat-detail-products-box-h{
margin-bottom: 0 !important;
}
body .cat-detail-products .cat-detail-products-box-h a{
max-width: 100% !important;
margin: 0 auto !important;
font-size: 14px !important;
line-height: 1.48 !important;
-webkit-line-clamp: 3 !important;
min-height: calc(14px * 1.48 * 3) !important;
letter-spacing: -.01em !important;
}
body .cat-detail-products .product-sku{
margin-top: 8px !important;
gap: 5px !important;
font-size: 10.5px !important;
}
body .cat-detail-products .cat-detail-products-box-fiyat,
body .cat-detail-products .cat-detail-products-box-fiyat-list{
margin-top: 10px !important;
justify-content: center !important;
}
body .cat-detail-products .cat-detail-products-box-fiyat-out{
min-height: 0 !important;
gap: 4px !important;
}
body .cat-detail-products .cat-detail-products-box-info .urun-fiyat,
body .cat-detail-products .cat-detail-products-box-info .product-price,
body .cat-detail-products .cat-detail-products-box-info .price,
body .cat-detail-products .cat-detail-products-box-info .amount,
body .cat-detail-products .cat-detail-products-box-info-big .urun-fiyat,
body .cat-detail-products .cat-detail-products-box-info-big .product-price,
body .cat-detail-products .cat-detail-products-box-info-big .price,
body .cat-detail-products .cat-detail-products-box-info-big .amount,
body .cat-detail-products .urun-box-special-area .urun-fiyat,
body .cat-detail-products .urun-box-special-area .product-price,
body .cat-detail-products .urun-box-special-area .price,
body .cat-detail-products .urun-box-special-area .amount{
font-size: 16px !important;
line-height: 1.12 !important;
}
}
@media (max-width: 420px){
body .cat-detail-products .cat-detail-products-box,
body .cat-detail-products .cat-detail-products-box-big,
body .cat-detail-products .cat-detail-products-box-list{
padding-left: 8px !important;
padding-right: 8px !important;
}
body .cat-detail-products .cat-detail-products-box-img,
body .cat-detail-products .cat-detail-products-box-img-big,
body .cat-detail-products .cat-detail-products-box-img-list{
aspect-ratio: 1 / 1.06 !important;
}
}
/* =========================================================
TS CATEGORY MOBILE STABILIZATION
- filter drawer height/footer fix
- active filter chip cleanup
- mobile menu vs toolbar stacking fix
========================================================= */
@media (max-width: 991.98px){
body.mobile-filter-open{
overflow: hidden !important;
}
.cat-detail-main-div,
.cat-detail-main-div-in,
.cat-right-main,
.cat-right-header-out,
.cat-right-elements.cat-filter-bar{
overflow: visible !important;
}
.cat-right-elements.cat-filter-bar,
.cat-filter-right,
.cat-filter-sort-shell,
.cat-right-elements-right-siralama,
.cat-right-elements-right-siralama .nice-select{
position: relative;
}
.cat-right-elements.cat-filter-bar{
isolation: isolate;
z-index: 120 !important;
}
.cat-filter-right,
.cat-filter-sort-shell{
overflow: visible !important;
z-index: 121 !important;
}
.cat-right-elements-right-siralama{
overflow: visible !important;
z-index: 122 !important;
}
.cat-filter-right .nice-select,
.cat-right-elements-right-siralama .nice-select{
overflow: visible !important;
z-index: 122;
}
.cat-filter-right .nice-select.open,
.cat-right-elements-right-siralama .nice-select.open{
z-index: 124 !important;
}
.cat-right-main,
.cat-detail-products{
position: relative;
z-index: 1 !important;
}
.cat-filter-right .nice-select .list{
position: absolute;
z-index: 125 !important;
}
.mobile-filter-backdrop{
position: fixed !important;
inset: 0 !important;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .24s ease, visibility .24s ease;
z-index: 2147483100 !important;
}
.mobile-filter-backdrop.is-active{
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.mobile-filter-drawer{
position: fixed !important;
top: 0 !important;
left: 0 !important;
bottom: 0 !important;
width: min(90vw, 408px) !important;
max-width: min(90vw, 408px) !important;
height: 100dvh !important;
display: flex !important;
flex-direction: column !important;
transform: translateX(-104%);
transition: transform .28s cubic-bezier(.22, .61, .36, 1);
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
overflow: hidden !important;
z-index: 2147483200 !important;
}
.mobile-filter-drawer.is-active{
transform: translateX(0);
}
.mobile-filter-header{
flex: 0 0 auto;
padding-top: calc(16px + env(safe-area-inset-top)) !important;
}
.mobile-filter-body{
flex: 1 1 auto !important;
min-height: 0;
overflow-y: auto !important;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 14px 14px calc(110px + env(safe-area-inset-bottom)) !important;
}
.mobile-filter-body::-webkit-scrollbar{
width: 0 !important;
height: 0 !important;
}
.mobile-filter-body .cd-filter-scroll,
.mobile-filter-body .cd-filter-section-subcategories .cd-filter-scroll{
max-height: none !important;
overflow: visible !important;
padding-right: 0 !important;
scrollbar-width: none;
-ms-overflow-style: none;
}
.mobile-filter-body .cd-filter-scroll::-webkit-scrollbar,
.mobile-filter-body .cd-filter-section-subcategories .cd-filter-scroll::-webkit-scrollbar{
width: 0 !important;
height: 0 !important;
}
.mobile-filter-footer{
position: sticky;
bottom: 0;
z-index: 5;
flex: 0 0 auto;
padding: 16px 16px calc(16px + env(safe-area-inset-bottom)) !important;
box-shadow: 0 -12px 24px rgba(15, 23, 42, .08);
}
.mobile-filter-footer .button-blue.button-2x{
width: 100% !important;
min-height: 52px;
display: flex;
align-items: center;
justify-content: center;
padding: 12px 18px !important;
border-radius: 14px;
background: #1f2c44 !important;
border-color: #1f2c44 !important;
color: #ffffff !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: .08em;
text-transform: uppercase;
}
body.mobile-filter-open .fixed-foot-navigation-in,
body.mobile-filter-open a#return-to-top,
body.ts-mnav-open .fixed-foot-navigation-in,
body.ts-mnav-open a#return-to-top{
opacity: 0 !important;
pointer-events: none !important;
}
body.ts-mnav-open .slide-menu,
body.ts-mnav-open .mobile-header-main-div,
body.ts-mnav-open .header-mobile-view,
body.ts-mnav-open .slide-menu .mobile_side_wrap_in,
body.ts-mnav-open .slide-menu #ts-mnav-panel{
position: relative !important;
z-index: 2147483300 !important;
}
body.ts-mnav-open .cat-right-elements.cat-filter-bar,
body.ts-mnav-open .cat-left-box-out-filterbox-out{
opacity: 0 !important;
pointer-events: none !important;
}
}
@media (max-width: 767.98px){
body .cat-right-elements.cat-filter-bar{
margin: 2px 0 18px !important;
padding: 0 0 12px !important;
gap: 12px;
}
.cat-filter-left,
.cat-filter-right{
align-items: stretch;
}
.cat-filter-sort-shell{
align-items: flex-start;
min-width: 0;
}
.cat-filter-toolbar-label{
padding-top: 4px;
white-space: nowrap;
}
.filter-open-trigger{
min-width: 0;
}
.filter-open-trigger__label{
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.cat-right-elements-right-siralama,
.cat-right-elements-right-siralama .nice-select{
min-width: 0;
}
.cat-left-box-out-filterbox-out{
width: 100% !important;
margin: 0 0 18px !important;
align-items: center;
gap: 8px;
}
.cat-left-box-out-filterbox-out a{
min-height: 34px;
margin: 0 !important;
padding: 7px 12px !important;
border: 1px solid #dbe4ef;
border-radius: 999px;
background: #f7f9fc;
color: #223253 !important;
line-height: 1.2;
}
.cat-left-box-out-filterbox-out a:last-child{
background: #223253 !important;
border-color: #223253 !important;
color: #ffffff !important;
font-weight: 700 !important;
}
.cat-left-box-out-filterbox-out a i{
margin-left: 6px;
}
}
/* =========================================================
TS CATEGORY MOBILE MEMBER FILTER PASS
- accordion flow for long logged-in filters
- stronger price-range presentation
========================================================= */
@media (max-width: 991.98px){
.mobile-filter-body .cat-left-main{
gap: 14px;
}
.mobile-filter-body .cd-filter-section{
overflow: hidden !important;
transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.mobile-filter-body .cd-filter-section.has-active-selection{
border-color: rgba(207, 178, 123, .38) !important;
box-shadow: 0 16px 34px rgba(160, 132, 74, .12);
}
.mobile-filter-body .cd-filter-section[data-mobile-collapsible="1"] .cd-filter-section-head{
cursor: pointer;
user-select: none;
}
.mobile-filter-body .cd-filter-section-toggle{
width: 28px;
height: 28px;
margin-left: auto;
border: 1px solid #e2e8f0;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
flex: 0 0 auto;
}
.mobile-filter-body .cd-filter-section-toggle::before{
content: "";
width: 8px;
height: 8px;
border-right: 1.5px solid #8793a6;
border-bottom: 1.5px solid #8793a6;
transform: rotate(45deg) translateY(-1px);
transition: transform .2s ease, border-color .2s ease;
}
.mobile-filter-body .cd-filter-section.is-expanded .cd-filter-section-toggle::before{
transform: rotate(-135deg) translate(-1px, 1px);
border-color: #223253;
}
.mobile-filter-body .cd-filter-section.is-collapsed .cat-left-box-h.cd-filter-section-head{
padding-bottom: 15px !important;
}
.mobile-filter-body .cd-filter-section.is-collapsed .cd-filter-section-body{
display: none;
}
.mobile-filter-body .cd-filter-price{
padding-bottom: 6px;
}
.mobile-filter-body .cd-filter-price .price-field{
margin: 10px 4px 16px;
}
.mobile-filter-body .cd-filter-price .price-wrap{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 14px;
margin-bottom: 14px;
}
.mobile-filter-body .cd-filter-price .price-wrap-outputbox{
min-height: 48px;
padding: 0 14px;
display: flex;
align-items: center;
gap: 4px;
}
.mobile-filter-body .cd-filter-price .price-filter-range-button{
margin-top: 0;
}
.mobile-filter-body .cd-filter-price .cd-filter-button{
width: 100% !important;
min-height: 48px;
}
.mobile-filter-footer{
position: relative;
background: linear-gradient(180deg, rgba(246,248,251,.32) 0%, rgba(255,255,255,.94) 22%, #ffffff 100%) !important;
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
.mobile-filter-footer::before{
content: "";
position: absolute;
left: 0;
right: 0;
top: -16px;
height: 16px;
background: linear-gradient(180deg, rgba(246,248,251,0) 0%, rgba(246,248,251,.92) 100%);
pointer-events: none;
}
}
@media (max-width: 389.98px){
.mobile-filter-body .cd-filter-price .price-wrap{
grid-template-columns: 1fr;
}
}
/* =========================================================
HEADER MINI CART - Premium Refresh
Paste to END of style.css
========================================================= */
.dropdown-menu.cart-drop{
width: 420px !important;
padding: 16px !important;
margin-top: 18px !important;
border: 1px solid rgba(15, 23, 42, 0.10) !important;
border-radius: 22px !important;
background: #ffffff !important;
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12) !important;
color: #0f172a !important;
overflow: hidden;
}
.dropdown-cart-header{
width: 100%;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 12px;
justify-content: space-between;
font-size: 11px !important;
font-weight: 700 !important;
line-height: 1.45;
letter-spacing: .08em;
text-transform: uppercase;
color: #5f6c83 !important;
background: linear-gradient(180deg, #fbfcfe 0%, #f3f6fb 100%);
border: 1px solid #e4ebf3;
border-radius: 16px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
margin-bottom: 14px;
padding: 12px 14px;
text-align: left;
}
.dropdown-cart-header > :first-child{
flex: 1 1 220px;
min-width: 0;
color: #1f2b44 !important;
}
.dropdown-cart-header > :last-child{
margin-left: auto;
}
.dropdown-cart-header > span:last-child,
.dropdown-cart-header > strong:last-child,
.dropdown-cart-header > b:last-child{
min-width: 34px;
height: 32px;
padding: 0 12px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #1f2b44;
color: #ffffff !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0;
line-height: 1;
box-shadow: 0 8px 18px rgba(31, 43, 68, 0.16);
}
.dropdown-cart-overflow{
width: 100%;
max-height: 420px;
overflow-y: auto;
padding-right: 4px;
margin-bottom: 12px;
scroll-behavior: smooth;
}
.dropdown-cart-overflow::-webkit-scrollbar{
width: 8px;
}
.dropdown-cart-overflow::-webkit-scrollbar-track{
background: #f3f6fa;
border-radius: 20px;
}
.dropdown-cart-overflow::-webkit-scrollbar-thumb{
background: #cfd8e3;
border-radius: 20px;
border: 2px solid #f3f6fa;
}
.dropdown-cart-itembox{
width: 100%;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
margin: 0 0 10px;
padding: 12px;
border: 1px solid #e8edf4;
border-radius: 18px;
background: #ffffff;
box-sizing: border-box;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dropdown-cart-itembox:hover{
transform: translateY(-1px);
border-color: #d9e2ec;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}
.dropdown-cart-itembox:last-child{
margin-bottom: 0;
}
.dropdown-cart-itembox-content{
flex: 1;
min-width: 0;
display: flex;
align-items: flex-start;
justify-content: flex-start;
gap: 12px;
}
.dropdown-cart-itembox-content-img{
width: 74px;
min-width: 74px;
height: 74px;
margin-right: 0;
overflow: hidden;
border-radius: 14px;
border: 1px solid #e8edf4;
background: #f8fafc;
display: flex;
align-items: center;
justify-content: center;
}
.dropdown-cart-itembox-content-img img{
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.dropdown-cart-itembox-content-t{
flex: 1;
min-width: 0;
}
.dropdown-cart-itembox-content-t-1{
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.45;
color: #182338;
margin-bottom: 8px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
}
.dropdown-cart-itembox-content-t-2,
.dropdown-cart-itembox-content-t-3{
font-size: 12px !important;
line-height: 1.55;
color: #5b6472;
margin-top: 4px;
}
.dropdown-cart-itembox-content-t-2 span,
.dropdown-cart-itembox-content-t-3 span{
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 0 9px;
margin: 0 6px 6px 0;
border-radius: 999px;
border: 1px solid #e6ebf2;
background: #f7f9fc;
font-size: 11px !important;
font-weight: 500;
line-height: 1;
color: #334155;
}
.dropdown-cart-itembox-trash{
width: 28px;
min-width: 28px;
text-align: center;
padding-top: 2px;
}
.dropdown-cart-itembox-trash a{
width: 28px;
height: 28px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff5f5;
border: 1px solid #ffe0e0;
transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.dropdown-cart-itembox-trash a:hover{
background: #ffecec;
border-color: #ffcfcf;
transform: scale(1.04);
}
.dropdown-cart-itembox-trash i{
font-size: 14px !important;
color: #d65a5a;
line-height: 1;
}
.dropdown-cart-noitem{
width: 100%;
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
padding: 28px 18px;
border: 1px dashed #dbe3ec;
border-radius: 18px;
background: #fbfcfe;
}
.dropdown-cart-noitem i{
margin-bottom: 0;
font-size: 34px;
line-height: 34px;
color: #7c8aa0;
}
.dropdown-cart-noitem-t{
font-size: 16px;
font-weight: 600;
margin-top: 10px;
margin-bottom: 8px;
color: #1f2b44;
}
.dropdown-cart-noitem-s{
font-size: 13px;
color: #6b7280;
width: 88%;
margin: 0 auto;
line-height: 1.55;
}
.dropdown-cart-priceTotal{
width: 100%;
box-sizing: border-box;
padding: 12px 14px;
border: 1px solid #e8edf4;
border-radius: 16px;
background: #f8fafc;
display: flex;
align-items: center;
justify-content: space-between;
margin: 12px 0 14px;
}
.dropdown-cart-priceTotal-l{
font-size: 11px !important;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #64748b;
}
.dropdown-cart-priceTotal-r{
font-size: 22px !important;
line-height: 1;
color: #182338;
font-weight: 700;
}
.dropdown-menu.cart-drop > a:last-child,
.dropdown-menu.cart-drop > button:last-child{
width: 100%;
min-height: 48px;
display: flex !important;
align-items: center;
justify-content: center;
border: 0 !important;
border-radius: 999px !important;
background: #1f2b44 !important;
color: #ffffff !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: .08em;
text-transform: uppercase;
text-decoration: none !important;
box-shadow: none !important;
transition: transform .18s ease, background .18s ease, opacity .18s ease;
}
.dropdown-menu.cart-drop > a:last-child:hover,
.dropdown-menu.cart-drop > button:last-child:hover{
background: #162038 !important;
color: #ffffff !important;
transform: translateY(-1px);
}
.dropdown-menu.cart-drop > a:last-child:focus,
.dropdown-menu.cart-drop > button:last-child:focus{
outline: none !important;
box-shadow: none !important;
}
@media (max-width: 1399px){
.dropdown-menu.cart-drop{
width: 390px !important;
}
}
@media (max-width: 575.98px){
.dropdown-cart-header{
gap: 8px 10px;
padding: 11px 12px;
font-size: 10px !important;
}
.dropdown-cart-header > span:last-child,
.dropdown-cart-header > strong:last-child,
.dropdown-cart-header > b:last-child{
min-width: 30px;
height: 30px;
padding: 0 10px;
font-size: 12px !important;
}
}
/* =========================================================
USER ACCOUNT SHELL | 2026 REFRESH
Shared account-space improvements for settings, order list
and customer order detail pages.
========================================================= */
.ts-user-account-shell{
position: relative;
padding: 30px 0 56px;
background-image:
radial-gradient(circle at top left, rgba(84,114,243,.07), transparent 22%),
linear-gradient(180deg, rgba(248,250,255,.9) 0%, rgba(243,247,252,.96) 100%);
}
.ts-user-account-shell .user_page_header_subpage{
min-height: 54px;
padding: 14px 18px;
border: 1px solid rgba(255,255,255,.08);
border-radius: 22px;
background: linear-gradient(180deg, #273d5f 0%, #223553 100%);
box-shadow: 0 18px 36px rgba(15,23,42,.16);
backdrop-filter: none;
color: #eef4ff;
}
.ts-user-account-shell .user_page_header_subpage a{
color: #f4f8ff;
font-size: 12px;
font-weight: 600;
}
.ts-user-account-shell .user_page_header_subpage a:hover{
color: #ffffff;
}
.ts-user-account-shell .user_page_header_subpage i{
color: rgba(255,255,255,.56);
}
.ts-user-account-shell .user_subpage_left_bar_main{
flex: 0 0 310px;
width: 310px;
margin-right: 0;
padding: 22px 20px;
border: 1px solid #dbe6f2;
border-radius: 24px;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
box-shadow: 0 20px 46px rgba(15,23,42,.06);
position: sticky;
top: 24px;
}
.ts-user-account-shell .user_subpage_left_bar_namediv{
gap: 16px;
padding-bottom: 18px;
margin-bottom: 10px;
border-bottom: 1px solid #e6edf6;
}
.ts-user-account-shell .user_subpage_left_bar_namediv_circle{
width: 64px;
height: 64px;
margin-right: 0;
background: linear-gradient(135deg, #eef3fb 0%, #dde7f4 100%);
color: #1e2f49;
font-size: 26px;
font-weight: 800;
box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.ts-user-account-shell .user_subpage_left_bar_namediv_content_usertype{
font-size: 12px;
letter-spacing: .01em;
color: #586dff;
}
.ts-user-account-shell .user_subpage_left_bar_namediv_content_h{
width: 100%;
font-size: 18px;
line-height: 1.35;
color: #1b2c48;
}
.ts-user-account-shell .user_subpage_left_bar_nav_desktop_items{
min-height: 56px;
padding: 12px 10px;
border-bottom: 1px solid #e7edf5;
border-radius: 14px;
}
.ts-user-account-shell .user_subpage_left_bar_nav_desktop_items:hover,
.ts-user-account-shell .user_subpage_left_bar_nav_desktop_items_active{
background: #f5f8fd;
border-bottom-color: #d8e3f0;
color: #1b2c48;
}
.ts-user-account-shell .user_subpage_left_bar_nav_desktop_items_i{
width: 42px;
font-size: 26px;
color: #152544;
}
.ts-user-account-shell .user_subpage_left_bar_nav_desktop_items_t{
font-size: 14px;
font-weight: 700;
color: #1f314e;
}
.ts-user-account-shell .user_subpage_favorites_noitems{
padding: 72px 24px;
}
.ts-user-account-shell .user_subpage_favorites_noitems img{
max-width: 220px;
}
.ts-user-account-settings-page .user_subpage_div,
.ts-user-order-list-page .user_subpage_div{
width: min(1760px, calc(100vw - 38px));
margin: 26px auto 42px;
gap: 24px;
align-items: flex-start;
justify-content: flex-start;
}
.ts-user-account-settings-page .user_subpage_account_content,
.ts-user-order-list-page .user_subpage_coupon_content{
flex: 1;
min-width: 0;
border: 1px solid #dbe6f2;
border-radius: 26px;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
box-shadow: 0 22px 48px rgba(15,23,42,.06);
}
.ts-user-account-settings-page .user_subpage_account_content{
display: grid;
grid-template-columns: minmax(0, 1.22fr) minmax(320px, .9fr);
gap: 24px;
padding: 30px;
}
.ts-user-account-settings-page .user_subpage_account_left,
.ts-user-account-settings-page .user_subpage_account_right{
width: auto;
margin: 0;
border: 1px solid #dbe6f2;
border-radius: 22px;
background: #fff;
padding: 24px;
box-shadow: 0 14px 30px rgba(15,23,42,.04);
}
.ts-user-account-settings-page .user_subpage_account_header{
margin-bottom: 18px;
font-size: 30px;
line-height: 1.14;
font-weight: 800;
color: #1b2c48;
}
.ts-user-account-settings-page .user_subpage_info_div_blue{
margin-bottom: 24px;
border-color: #d9e4f2;
border-radius: 16px;
background: #f7faff;
color: #51637c;
}
.ts-user-account-settings-page .user_subpage_account_right_head{
margin: 0 0 18px;
}
.ts-user-account-settings-page .user_subpage_account_right_head_in{
padding: 0;
background: transparent;
font-size: 24px;
line-height: 1.25;
font-weight: 800;
color: #1b2c48;
}
.ts-user-account-settings-page .teslimat-form-area{
margin-top: 0 !important;
}
.ts-user-account-settings-page .form-group{
margin-bottom: 16px;
}
.ts-user-account-settings-page .register-page-uyelik-tipi-main{
padding: 18px;
border: 1px solid #dbe6f2;
border-radius: 16px;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
margin-bottom: 18px;
}
.ts-user-account-settings-page .form-control{
min-height: 48px;
border: 1px solid #d6e2ef;
border-radius: 14px;
background: #fff;
box-shadow: none;
padding: 12px 15px;
color: #1b2c48;
}
.ts-user-account-settings-page .form-control:focus{
border-color: #a8bfdc;
box-shadow: 0 0 0 3px rgba(80,118,166,.12);
}
.ts-user-account-settings-page .custom-control-label{
color: #56657c;
line-height: 1.7;
}
.ts-user-account-settings-page .button-blue.button-2x{
min-height: 48px;
border-radius: 14px;
font-weight: 700;
}
.ts-user-order-list-page .user_subpage_coupon_content{
padding: 28px 30px;
}
.ts-user-order-list-page .user_subpage_flex_header{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
margin-bottom: 24px;
padding: 20px 22px;
border: 1px solid #dbe6f2;
border-radius: 22px;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
box-shadow: 0 12px 30px rgba(15,23,42,.05);
}
.ts-user-order-list-page .user_subpage_flex_header_h{
flex: 1;
min-width: 280px;
font-size: 34px;
line-height: 1.12;
font-weight: 800;
color: #1b2c48;
letter-spacing: -.02em;
}
.ts-user-order-list-page .user_subpage_flex_header_links{
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 14px;
}
.ts-user-order-list-page .user_subpage_flex_header_right{
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 12px;
min-width: min(470px, 100%);
}
.ts-user-order-list-page .ts-user-order-search{
display: flex;
align-items: center;
gap: 10px;
}
.ts-user-order-list-page .ts-user-order-search .button-red{
min-width: 44px;
min-height: 44px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.ts-user-order-list-page .ustsearch_area{
position: relative;
width: min(360px, 100%);
}
.ts-user-order-list-page .ustsearch_area input{
width: 100%;
min-height: 48px;
padding: 12px 50px 12px 16px;
border: 1px solid #d6e2ef;
border-radius: 15px;
background: #fff;
box-shadow: none;
}
.ts-user-order-list-page .ustsearch_area button{
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
width: 36px;
height: 36px;
border: 0;
border-radius: 11px;
background: #1e3556;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.ts-user-order-list-page .user_subpage_select,
.ts-user-order-list-page .nice-select.user_subpage_select{
min-width: 210px;
height: 48px;
line-height: 48px;
border: 1px solid #d6e2ef;
border-radius: 15px;
background: #fff;
box-shadow: none;
color: #1f314e;
}
.ts-user-order-list-page .nice-select.user_subpage_select{
padding-left: 16px;
padding-right: 38px;
}
.ts-user-order-list-page .user_subpage_siparis_boxes_div{
width: 100%;
display: grid;
gap: 18px;
}
.ts-user-order-list-page .user_subpage_siparis_box{
width: 100%;
margin: 0;
padding: 20px 22px;
border: 1px solid #dce6f2;
border-radius: 22px;
background: #fff;
box-shadow: 0 16px 34px rgba(15,23,42,.05);
display: grid;
grid-template-columns: 96px minmax(280px, 1.7fr) minmax(200px, .9fr) auto;
grid-template-areas: "image order status amount";
align-items: center;
gap: 18px;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ts-user-order-list-page .user_subpage_siparis_box:hover{
transform: translateY(-2px);
border-color: #cbd8e7;
box-shadow: 0 20px 40px rgba(15,23,42,.08);
}
.ts-user-order-list-page .user_subpage_siparis_box_img{
grid-area: image;
width: 96px;
height: 96px;
margin-bottom: 0;
padding: 8px;
border: 1px solid #e2ebf4;
border-radius: 22px !important;
background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.ts-user-order-list-page .user_subpage_siparis_box_img img{
width: 100%;
min-height: auto;
max-height: none;
height: 100%;
object-fit: contain;
border-radius: 18px !important;
}
.ts-user-order-list-page .user_subpage_siparis_box_orderno{
grid-area: order;
min-width: 0;
}
.ts-user-order-list-page .user_subpage_siparis_box_orderno-1{
margin-bottom: 8px;
font-size: 18px;
line-height: 1.45;
font-weight: 700;
color: #1b2c48;
}
.ts-user-order-list-page .user_subpage_siparis_box_orderno-2{
font-size: 13px;
color: #6d7c93;
}
.ts-user-order-list-page .user_subpage_siparis_box_status,
.ts-user-order-list-page .user_subpage_siparis_box_status_iptal{
grid-area: status;
width: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: flex-start;
}
.ts-user-order-card{
position: relative;
}
.ts-user-order-status-stack{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
min-width: 190px;
}
.ts-user-order-payment-badge{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
border-radius: 10px;
border: 1px solid #e2e8f0;
background: #fff;
font-size: 12px;
font-weight: 700;
line-height: 1.1;
white-space: nowrap;
}
.ts-user-order-payment-badge.is-active{
border-color: #f5c29b;
background: #fff8f1;
color: #d46b08;
}
.ts-user-order-payment-badge.is-approved{
border-color: #bfe7cc;
background: #eefbf3;
color: #1d7b4d;
}
.ts-user-order-payment-badge.is-locked{
border-color: #efc9c7;
background: #fff4f3;
color: #a14642;
}
.ts-user-order-payment-badge.is-review{
border-color: #c9dcf7;
background: #eff6ff;
color: #2d67b2;
}
.ts-user-order-payment-badge.is-alert{
border-color: #f0c9b8;
background: #fff4ee;
color: #b4532f;
}
.ts-user-order-payment-badge i{
font-size: 12px;
}
.ts-user-order-payment-sub{
font-size: 11px;
line-height: 1.45;
color: #6b7a90;
font-weight: 600;
}
.ts-user-order-payment-sub strong{
color: #22344f;
font-weight: 800;
}
.ts-user-order-payment-sub .ts-inline-pill{
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 4px;
padding: 5px 9px;
border-radius: 999px;
border: 1px solid #d8e2ef;
background: #fff;
color: #5d718c;
font-size: 11px;
font-weight: 700;
}
.ts-user-order-stage-row{
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.ts-user-order-stage-pill{
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 10px;
border-radius: 999px;
border: 1px solid #dde5ef;
background: #f8fafc;
color: #607187;
font-size: 11px;
font-weight: 700;
line-height: 1.2;
}
.ts-user-order-stage-pill.is-done{
border-color: #cfe5d8;
background: #eef8f1;
color: #1d7b4d;
}
.ts-user-order-stage-pill.is-current{
border-color: #d7e1ec;
background: #ffffff;
color: #22344f;
}
.ts-user-order-stage-pill.is-alert{
border-color: #f0c9b8;
background: #fff4ee;
color: #b4532f;
}
.ts-user-order-stage-pill.is-muted{
border-color: #e4e9f0;
background: #f5f7fa;
color: #7f8c9d;
}
.ts-user-order-list-page .user_subpage_siparis_box_end{
grid-area: amount;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 16px;
}
.ts-user-order-list-page .user_subpage_siparis_box_end_amount{
text-align: right;
}
.ts-user-order-list-page .user_subpage_siparis_box_end_amount_1{
font-size: 28px;
line-height: 1.05;
font-weight: 800;
color: #1b2c48;
}
.ts-user-order-list-page .user_subpage_siparis_box_end_amount_2{
margin-top: 8px;
font-size: 11px;
line-height: 1.5;
letter-spacing: .1em;
text-transform: uppercase;
color: #75859a;
}
.ts-user-order-list-page .user_subpage_ticketbox_go{
width: 46px;
min-width: 46px;
height: 46px;
border-radius: 14px;
border: 1px solid #d7e2ee;
background: #f4f7fb;
color: #203a60;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
text-decoration: none;
}
.ts-user-order-list-page .pagination{
flex-wrap: wrap;
gap: 8px;
}
.ts-user-order-list-page .pagination .page-link{
border-radius: 12px;
border-color: #dce6f2;
color: #20344f;
min-width: 42px;
text-align: center;
}
@media screen and (max-width: 1279px){
.ts-user-account-settings-page .user_subpage_div,
.ts-user-order-list-page .user_subpage_div{
width: min(100%, calc(100vw - 28px));
gap: 18px;
}
.ts-user-account-shell .user_subpage_left_bar_main{
position: static;
width: 100%;
flex: 0 0 100%;
}
.ts-user-account-settings-page .user_subpage_account_content{
grid-template-columns: 1fr;
}
.ts-user-order-list-page .user_subpage_flex_header{
flex-direction: column;
align-items: stretch;
}
.ts-user-order-list-page .user_subpage_flex_header_right{
min-width: 0;
justify-content: stretch;
}
.ts-user-order-list-page .ts-user-order-search{
width: 100%;
}
.ts-user-order-list-page .ustsearch_area{
width: 100%;
}
.ts-user-order-list-page .user_subpage_select,
.ts-user-order-list-page .nice-select.user_subpage_select{
width: 100%;
min-width: 0;
}
.ts-user-order-status-stack{
min-width: 0;
}
.ts-user-order-list-page .user_subpage_siparis_box{
grid-template-columns: 88px minmax(0, 1fr);
grid-template-areas:
"image order"
"status amount";
}
}
@media screen and (max-width: 767px){
.ts-user-account-shell{
padding: 18px 0 38px;
}
.ts-user-account-shell .user_page_header_subpage{
padding: 12px 14px;
border-radius: 18px;
flex-wrap: wrap;
gap: 4px;
}
.ts-user-account-shell .user_subpage_left_bar_main{
padding: 18px 16px;
border-radius: 20px;
}
.ts-user-account-settings-page .user_subpage_account_content,
.ts-user-order-list-page .user_subpage_coupon_content{
border-radius: 22px;
}
.ts-user-account-settings-page .user_subpage_account_content{
padding: 18px;
gap: 18px;
}
.ts-user-account-settings-page .user_subpage_account_left,
.ts-user-account-settings-page .user_subpage_account_right{
padding: 18px;
border-radius: 18px;
}
.ts-user-account-settings-page .user_subpage_account_header{
font-size: 26px;
}
.ts-user-order-list-page .user_subpage_coupon_content{
padding: 18px;
}
.ts-user-order-list-page .user_subpage_flex_header{
padding: 16px;
border-radius: 18px;
}
.ts-user-order-list-page .user_subpage_flex_header_h{
min-width: 0;
font-size: 28px;
}
.ts-user-order-list-page .user_subpage_siparis_box{
padding: 16px;
grid-template-columns: 1fr;
grid-template-areas:
"image"
"order"
"status"
"amount";
}
.ts-user-order-list-page .user_subpage_siparis_box_img{
width: 84px;
height: 84px;
}
.ts-user-order-list-page .user_subpage_siparis_box_end{
width: 100%;
justify-content: space-between;
}
.ts-user-order-list-page .user_subpage_siparis_box_end_amount{
text-align: left;
}
}
/* =========================================================
USER ORDERS PAGE | VISUAL SIMPLIFICATION OVERRIDES
========================================================= */
.ts-user-order-list-page .user_subpage_div{
width: min(1720px, calc(100vw - 40px));
gap: 20px;
}
.ts-user-order-list-page .user_subpage_coupon_content{
padding: 6px 0 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.ts-user-order-list-page .user_subpage_flex_header{
align-items: center;
gap: 16px;
margin-bottom: 18px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.ts-user-order-list-page .user_subpage_flex_header_h{
font-size: 30px;
line-height: 1.08;
}
.ts-user-order-list-page .user_subpage_flex_header_right{
gap: 10px;
min-width: min(450px, 100%);
}
.ts-user-order-list-page .ts-user-order-search{
gap: 8px;
}
.ts-user-order-list-page .ts-user-order-search .button-red{
min-width: 42px;
min-height: 42px;
border-radius: 12px;
}
.ts-user-order-list-page .ustsearch_area{
width: min(340px, 100%);
}
.ts-user-order-list-page .ustsearch_area input{
min-height: 44px;
padding: 11px 48px 11px 15px;
border-color: #d9e3ef;
border-radius: 13px;
}
.ts-user-order-list-page .ustsearch_area button{
right: 8px;
width: 34px;
height: 34px;
border-radius: 10px;
}
.ts-user-order-list-page .user_subpage_select,
.ts-user-order-list-page .nice-select.user_subpage_select{
min-width: 190px;
height: 44px;
line-height: 44px;
border-radius: 13px;
}
.ts-user-order-list-page .nice-select.user_subpage_select{
padding-right: 34px;
}
.ts-user-order-list-page .user_subpage_siparis_boxes_div{
margin-top: 0;
gap: 14px;
}
.ts-user-order-list-page .user_subpage_siparis_box{
padding: 18px 20px;
border: 1px solid #e1e8f0;
border-radius: 20px;
background: rgba(255,255,255,.96);
box-shadow: 0 10px 22px rgba(15,23,42,.04);
grid-template-columns: 84px minmax(0, 1.7fr) minmax(220px, .95fr) auto;
gap: 16px 18px;
}
.ts-user-order-list-page .user_subpage_siparis_box:hover{
transform: translateY(-1px);
border-color: #d4dde7;
box-shadow: 0 14px 28px rgba(15,23,42,.06);
}
.ts-user-order-list-page .user_subpage_siparis_box_img{
width: 84px;
height: 84px;
padding: 10px;
border: 0;
border-radius: 18px !important;
background: #f4f7fb;
box-shadow: none;
}
.ts-user-order-list-page .user_subpage_siparis_box_img img{
border-radius: 14px !important;
}
.ts-user-order-list-page .user_subpage_siparis_box_orderno{
width: auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.ts-user-order-list-page .user_subpage_siparis_box_orderno-1{
margin-bottom: 0;
font-size: 20px;
line-height: 1.32;
letter-spacing: -.01em;
}
.ts-user-order-list-page .user_subpage_siparis_box_orderno-1 strong{
font-weight: 800;
}
.ts-user-order-list-page .user_subpage_siparis_box_orderno-2{
display: none;
}
.ts-user-order-card-topline{
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.ts-user-order-card-meta{
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
}
.ts-user-order-card-meta-item{
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 32px;
max-width: 100%;
padding: 7px 11px;
border-radius: 999px;
background: #f5f7fb;
color: #61728a;
font-size: 12px;
font-weight: 700;
line-height: 1.2;
}
.ts-user-order-card-meta-item i{
color: #8a9ab0;
font-size: 12px;
}
.ts-user-order-card-meta-item span{
min-width: 0;
}
.ts-user-order-card-meta-item.is-active{
background: #fff5e8;
color: #a96716;
}
.ts-user-order-card-meta-item.is-alert,
.ts-user-order-card-meta-item.is-locked{
background: #fff1ef;
color: #b14f48;
}
.ts-user-order-card-meta-item.is-approved,
.ts-user-order-card-meta-item.is-success{
background: #edf8f1;
color: #1f7d4e;
}
.ts-user-order-card-meta-item.is-review,
.ts-user-order-card-meta-item.is-info{
background: #eef4ff;
color: #2c63ac;
}
.ts-user-order-list-page .user_subpage_siparis_box_status,
.ts-user-order-list-page .user_subpage_siparis_box_status_iptal{
align-items: flex-start;
}
.ts-user-order-status-stack{
min-width: 0;
gap: 6px;
}
.ts-user-order-status-pill{
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 34px;
max-width: 100%;
padding: 8px 12px;
border-radius: 999px;
background: #f4f7fb;
color: #23344f;
font-size: 13px;
font-weight: 800;
line-height: 1.2;
}
.ts-user-order-status-pill i{
font-size: 13px;
}
.ts-user-order-status-pill.is-active{
background: #fff5e8;
color: #a96716;
}
.ts-user-order-status-pill.is-alert,
.ts-user-order-status-pill.is-locked{
background: #fff1ef;
color: #b14f48;
}
.ts-user-order-status-pill.is-approved,
.ts-user-order-status-pill.is-success{
background: #edf8f1;
color: #1f7d4e;
}
.ts-user-order-status-pill.is-review,
.ts-user-order-status-pill.is-info{
background: #eef4ff;
color: #2c63ac;
}
.ts-user-order-status-copy{
max-width: 360px;
color: #67788f;
font-size: 12px;
line-height: 1.5;
font-weight: 600;
}
.ts-user-order-status-copy strong{
color: #1f314d;
font-weight: 800;
}
.ts-user-order-list-page .user_subpage_siparis_box_status_iptal{
padding: 8px 12px;
border: 0;
border-radius: 999px;
background: #fff1ef;
color: #b14f48;
font-size: 13px;
font-weight: 800;
}
.ts-user-order-list-page .user_subpage_siparis_box_end{
gap: 14px;
}
.ts-user-order-list-page .user_subpage_siparis_box_end_amount{
margin-right: 0;
}
.ts-user-order-list-page .user_subpage_siparis_box_end_amount_1{
font-size: 30px;
line-height: 1.02;
}
.ts-user-order-list-page .user_subpage_siparis_box_end_amount_2{
margin-top: 6px;
font-size: 11px;
letter-spacing: .08em;
}
.ts-user-order-list-page .user_subpage_ticketbox_go{
width: 40px;
min-width: 40px;
height: 40px;
border: 0;
border-radius: 50%;
background: transparent;
color: #24426a;
font-size: 28px;
}
.ts-user-order-list-page .user_subpage_ticketbox_go:hover{
background: #eff4fa;
color: #16375e;
transform: translateX(1px);
}
.ts-user-order-list-page .user_subpage_left_bar_main{
flex: 0 0 282px;
width: 282px;
padding: 18px 16px;
border-color: #e2e8f0;
border-radius: 22px;
background: rgba(255,255,255,.94);
box-shadow: 0 12px 26px rgba(15,23,42,.04);
}
.ts-user-order-list-page .user_subpage_left_bar_namediv{
padding-bottom: 16px;
margin-bottom: 8px;
}
.ts-user-order-list-page .user_subpage_left_bar_namediv_circle{
width: 58px;
height: 58px;
font-size: 24px;
}
.ts-user-order-list-page .user_subpage_left_bar_nav_desktop_items{
min-height: 50px;
padding: 10px 8px;
border-bottom: 0;
}
.ts-user-order-list-page .user_subpage_left_bar_nav_desktop_items + .user_subpage_left_bar_nav_desktop_items{
margin-top: 4px;
}
.ts-user-order-list-page .user_subpage_left_bar_nav_desktop_items_i{
width: 38px;
font-size: 24px;
}
.ts-user-order-list-page .user_subpage_left_bar_nav_desktop_items_t{
font-size: 13px;
}
@media screen and (max-width: 1279px){
.ts-user-order-list-page .user_subpage_div{
width: min(100%, calc(100vw - 28px));
}
.ts-user-order-list-page .user_subpage_flex_header{
align-items: stretch;
}
.ts-user-order-list-page .user_subpage_flex_header_h{
font-size: 28px;
}
.ts-user-order-list-page .user_subpage_left_bar_main{
width: 100%;
flex-basis: 100%;
}
.ts-user-order-list-page .user_subpage_siparis_box{
grid-template-columns: 84px minmax(0, 1fr);
grid-template-areas:
"image order"
"image amount"
"status status";
}
.ts-user-order-list-page .user_subpage_siparis_box_end{
justify-content: space-between;
}
.ts-user-order-list-page .user_subpage_siparis_box_end_amount{
text-align: left;
}
}
@media screen and (max-width: 767px){
.ts-user-order-list-page .user_subpage_coupon_content{
padding-top: 0;
}
.ts-user-order-list-page .user_subpage_flex_header{
margin-bottom: 14px;
}
.ts-user-order-list-page .user_subpage_flex_header_h{
font-size: 26px;
}
.ts-user-order-list-page .user_subpage_siparis_box{
padding: 16px;
grid-template-columns: 1fr;
grid-template-areas:
"image"
"order"
"status"
"amount";
}
.ts-user-order-list-page .user_subpage_siparis_box_img{
width: 72px;
height: 72px;
}
.ts-user-order-card-meta{
gap: 8px;
}
.ts-user-order-card-meta-item{
width: 100%;
border-radius: 14px;
}
.ts-user-order-status-copy{
max-width: none;
}
}
/* =========================================================
USER ACCOUNT PAGES | ADDRESSES, FAVORITES, COUPONS,
REVIEWS, SUPPORT
========================================================= */
.ts-user-address-list-page .user_subpage_div,
.ts-user-address-form-page .user_subpage_div,
.ts-user-favorites-page .user_subpage_div,
.ts-user-coupon-page .user_subpage_div,
.ts-user-reviews-page .user_subpage_div,
.ts-user-support-list-page .user_subpage_div,
.ts-user-support-form-page .user_subpage_div,
.ts-user-support-detail-page .user_subpage_div{
width: min(1760px, calc(100vw - 38px));
margin: 26px auto 42px;
gap: 24px;
align-items: flex-start;
justify-content: flex-start;
}
.ts-user-address-list-page .user_subpage_coupon_content,
.ts-user-address-form-page .user_subpage_coupon_content,
.ts-user-coupon-page .user_subpage_coupon_content,
.ts-user-support-list-page .user_subpage_coupon_content,
.ts-user-support-form-page .user_subpage_coupon_content,
.ts-user-support-detail-page .user_subpage_coupon_content,
.ts-user-favorites-page .user_subpage_favorites_content,
.ts-user-reviews-page .user_subpage_favorites_content{
flex: 1;
min-width: 0;
border: 1px solid #dbe6f2;
border-radius: 26px;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
box-shadow: 0 22px 48px rgba(15,23,42,.06);
}
.ts-user-address-list-page .user_subpage_coupon_content,
.ts-user-address-form-page .user_subpage_coupon_content,
.ts-user-coupon-page .user_subpage_coupon_content,
.ts-user-support-list-page .user_subpage_coupon_content,
.ts-user-support-form-page .user_subpage_coupon_content,
.ts-user-support-detail-page .user_subpage_coupon_content{
padding: 28px 30px;
}
.ts-user-favorites-page .user_subpage_favorites_content,
.ts-user-reviews-page .user_subpage_favorites_content{
padding: 30px;
}
.ts-user-address-list-page .user_subpage_account_header,
.ts-user-coupon-page .user_subpage_account_header,
.ts-user-favorites-page .user_subpage_account_header{
margin-bottom: 18px;
font-size: 32px;
line-height: 1.12;
font-weight: 800;
color: #1b2c48;
}
.ts-user-address-list-page .user_subpage_account_spot,
.ts-user-coupon-page .user_subpage_account_spot,
.ts-user-favorites-page .user_subpage_account_spot{
margin-top: 10px;
font-size: 14px;
line-height: 1.75;
color: #667994;
}
.ts-user-address-form-page .ts-user-form-header,
.ts-user-support-list-page .user_subpage_flex_header,
.ts-user-support-form-page .ts-user-form-header,
.ts-user-support-detail-page .ts-user-form-header,
.ts-user-reviews-page .user_subpage_flex_header{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
margin-bottom: 24px;
padding: 20px 22px;
border: 1px solid #dbe6f2;
border-radius: 22px;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
box-shadow: 0 12px 30px rgba(15,23,42,.05);
}
.ts-user-address-form-page .user_subpage_flex_header_h,
.ts-user-support-list-page .user_subpage_flex_header_h,
.ts-user-support-form-page .user_subpage_flex_header_h,
.ts-user-support-detail-page .user_subpage_flex_header_h,
.ts-user-reviews-page .user_subpage_flex_header_h{
font-size: 32px;
line-height: 1.12;
font-weight: 800;
color: #1b2c48;
letter-spacing: -.02em;
}
.ts-user-address-form-page .user_subpage_flex_header_back_href,
.ts-user-support-form-page .user_subpage_flex_header_back_href,
.ts-user-support-detail-page .user_subpage_flex_header_back_href{
font-size: 13px;
line-height: 1.7;
color: #6c7b92;
}
.ts-user-address-form-page .user_subpage_flex_header_back_href a,
.ts-user-support-form-page .user_subpage_flex_header_back_href a,
.ts-user-support-detail-page .user_subpage_flex_header_back_href a{
font-weight: 700;
color: #1f3657;
}
.ts-user-address-form-page .user_subpage_info_div_blue,
.ts-user-support-form-page .user_subpage_info_div_blue{
margin-bottom: 22px;
border-color: #d8e4f2;
border-radius: 16px;
background: #f7fbff;
color: #51637c;
}
.ts-user-address-grid{
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 18px;
margin-top: 24px;
}
.ts-user-address-list-page .user_subpage_address_box_added,
.ts-user-address-list-page .user_subpage_address_box_added_noitem,
.ts-user-address-list-page .user_subpage_address_box{
width: auto;
margin: 0;
border: 1px solid #dbe6f2;
border-radius: 22px;
background: #fff;
box-shadow: 0 16px 34px rgba(15,23,42,.05);
}
.ts-user-address-list-page .user_subpage_address_box_added,
.ts-user-address-list-page .user_subpage_address_box_added_noitem{
min-height: 240px;
padding: 24px;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.ts-user-address-list-page .user_subpage_address_box{
padding: 22px;
}
.ts-user-address-list-page .user_subpage_address_box_name{
font-size: 22px;
line-height: 1.25;
font-weight: 800;
color: #1b2c48;
}
.ts-user-address-list-page .user_subpage_address_box_user,
.ts-user-address-list-page .user_subpage_address_box_content,
.ts-user-address-list-page .user_subpage_address_box_phone,
.ts-user-address-list-page .user_subpage_address_box_meta{
color: #5f6f86;
line-height: 1.75;
}
.ts-user-address-list-page .user_subpage_address_box_buttons{
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.ts-user-address-list-page .user_subpage_address_box_buttons a{
border-radius: 13px;
}
.ts-user-address-list-page .user_subpage_address_box_status_incomplete,
.ts-user-address-list-page .user_subpage_address_box_status_info{
border-radius: 999px;
}
.ts-user-address-form-grid{
display: grid;
gap: 22px;
}
.ts-user-address-form-page .user_subpage_address_add_border_div{
margin-bottom: 0;
padding: 24px;
border: 1px solid #dbe6f2;
border-radius: 22px;
background: #fff;
box-shadow: 0 14px 30px rgba(15,23,42,.04);
}
.ts-user-address-form-page .user_subpage_address_add_border_div_head{
margin-top: 0;
margin-bottom: 20px;
}
.ts-user-address-form-page .user_subpage_address_add_border_div_head_in{
padding: 0;
background: transparent;
font-size: 22px;
line-height: 1.25;
font-weight: 800;
color: #1b2c48;
}
.ts-user-address-form-page .form-control,
.ts-user-support-form-page .form-control,
.ts-user-support-detail-page .form-control{
min-height: 48px;
border: 1px solid #d6e2ef;
border-radius: 14px;
background: #fff;
box-shadow: none;
padding: 12px 15px;
color: #1b2c48;
}
.ts-user-address-form-page textarea.form-control,
.ts-user-support-form-page textarea.form-control,
.ts-user-support-detail-page textarea.form-control{
min-height: 140px;
}
.ts-user-address-form-page .form-control:focus,
.ts-user-support-form-page .form-control:focus,
.ts-user-support-detail-page .form-control:focus{
border-color: #a8bfdc;
box-shadow: 0 0 0 3px rgba(80,118,166,.12);
}
.ts-user-favorites-page .ts-user-favorites-grid,
.ts-user-reviews-page .ts-user-reviews-grid{
width: 100%;
display: grid;
gap: 18px;
margin-top: 18px;
}
.ts-user-favorites-page .ts-user-favorites-grid{
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.ts-user-reviews-page .ts-user-reviews-grid{
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}
.ts-user-favorite-card,
.ts-user-review-card{
width: auto;
margin: 0;
border: 1px solid #dbe6f2;
border-radius: 22px;
background: #fff;
box-shadow: 0 16px 34px rgba(15,23,42,.05);
}
.ts-user-favorite-card{
padding: 20px;
}
.ts-user-favorites-page .user_subpage_favorites_box_img{
height: 220px;
margin-bottom: 16px;
border: 1px solid #e1eaf4;
border-radius: 18px;
background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
display: flex;
align-items: center;
justify-content: center;
}
.ts-user-favorites-page .user_subpage_favorites_box_img img{
width: 100%;
height: 100%;
min-height: auto;
max-height: none;
object-fit: contain;
border-radius: 16px;
}
.ts-user-favorites-page .user_subpage_favorites_box_h{
font-size: 15px;
line-height: 1.65;
color: #1b2c48;
}
.ts-user-favorites-page .user_subpage_favorites_box_go{
margin-top: 16px;
justify-content: space-between;
}
.ts-user-reviews-page .user_subpage_favorites_content{
padding: 28px 30px;
}
.ts-user-reviews-page .user_subpage_flex_header_right{
display: flex;
align-items: center;
justify-content: flex-end;
}
.ts-user-reviews-page .user_subpage_select,
.ts-user-reviews-page .nice-select.user_subpage_select{
min-width: 220px;
height: 48px;
line-height: 48px;
border: 1px solid #d6e2ef;
border-radius: 15px;
background: #fff;
color: #1f314e;
}
.ts-user-reviews-page .nice-select.user_subpage_select{
padding-left: 16px;
padding-right: 38px;
}
.ts-user-review-card{
padding: 20px;
}
.ts-user-reviews-page .user_subpage_comment_box_status_main{
margin-bottom: 12px;
}
.ts-user-reviews-page .user_subpage_comment_box_product{
gap: 14px;
}
.ts-user-reviews-page .user_subpage_comment_box_img{
width: 88px;
height: 88px;
border: 1px solid #e2ebf4;
border-radius: 18px;
background: #f8fbff;
overflow: hidden;
}
.ts-user-reviews-page .user_subpage_comment_box_img img{
width: 100%;
height: 100%;
object-fit: cover;
}
.ts-user-reviews-page .user_subpage_comment_box_content{
max-height: 160px;
padding: 14px;
border: 1px solid #e4ebf4;
border-radius: 16px;
background: #f8fbff;
color: #4f6079;
}
.ts-user-reviews-page .user_subpage_comment_box_delete{
margin-top: 16px;
}
.ts-user-coupon-page .ts-user-coupon-card{
display: grid;
grid-template-columns: minmax(0, 1.45fr) repeat(4, minmax(120px, .75fr));
align-items: center;
gap: 16px;
padding: 20px 22px;
border: 1px solid #dbe6f2;
border-radius: 22px;
background: #fff;
box-shadow: 0 16px 34px rgba(15,23,42,.05);
margin-bottom: 16px;
}
.ts-user-coupon-page .user_subpage_kupon_name_1{
font-size: 22px;
line-height: 1.2;
font-weight: 800;
color: #1b2c48;
}
.ts-user-coupon-page .user_subpage_kupon_name_2,
.ts-user-coupon-page .user_subpage_kupon_name_3,
.ts-user-coupon-page .user_subpage_kupon_sdate_1,
.ts-user-coupon-page .user_subpage_kupon_fdate_1,
.ts-user-coupon-page .user_subpage_kupon_status_1{
color: #72839a;
}
.ts-user-coupon-page .user_subpage_kupon_tutar_2{
font-size: 28px;
line-height: 1.05;
font-weight: 800;
color: #1b2c48;
}
.ts-user-coupon-page .user_subpage_kupon_status_2{
margin-top: 8px;
}
.ts-user-support-form-page .user_subpage_info_div_blue{
border-color: #d8e4f2;
border-radius: 16px;
background: #f7fbff;
color: #51637c;
}
.ts-user-support-list-page .user_subpage_flex_header{
align-items: center;
}
.ts-user-support-list-page .user_subpage_flex_header_right{
display: flex;
align-items: center;
justify-content: flex-end;
}
.ts-user-support-list-page .alert-danger.alert{
margin-bottom: 22px;
padding: 16px 18px;
border: 1px solid #f1c5c1;
border-radius: 16px;
background: #fff6f5;
color: #7b3a35;
}
.ts-user-support-list-page .user_subpage_ticket_line_hed{
margin: 26px 0 18px;
border-bottom-color: #dbe6f2;
}
.ts-user-support-list-page .user_subpage_ticket_line_hed_text{
padding: 0 14px;
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
color: #6f7e93;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.ts-user-support-ticket-list{
width: 100%;
display: grid;
gap: 14px;
border: 0;
background: transparent;
}
.ts-user-support-ticket-row{
width: 100%;
margin: 0;
padding: 18px 20px;
border: 1px solid #dbe6f2;
border-radius: 20px;
background: #fff;
box-shadow: 0 16px 34px rgba(15,23,42,.05);
display: grid;
grid-template-columns: minmax(120px, .55fr) minmax(240px, 1.5fr) minmax(160px, .8fr) minmax(200px, .95fr) 52px;
align-items: center;
gap: 16px;
}
.ts-user-support-list-page .user_subpage_ticketbox:nth-of-type(2n){
background: #fff;
}
.ts-user-support-list-page .user_subpage_ticketbox_number{
width: auto;
font-size: 18px;
line-height: 1.2;
font-weight: 800;
color: #1b2c48;
}
.ts-user-support-list-page .user_subpage_ticketbox_h{
width: auto;
font-size: 15px;
line-height: 1.7;
color: #2f405b;
font-weight: 700;
}
.ts-user-support-list-page .user_subpage_ticketbox_status{
width: auto;
font-size: 13px;
line-height: 1.7;
}
.ts-user-support-list-page .user_subpage_ticketbox_status span{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 36px;
padding: 8px 14px;
border-radius: 999px;
background: #f5f8fd;
border: 1px solid #dbe6f2;
font-weight: 700;
}
.ts-user-support-list-page .user_subpage_ticketbox_lasthour{
width: auto;
margin-right: 0;
padding: 12px 14px;
border-radius: 14px;
background: #f8fbff;
border: 1px solid #e2ebf4;
color: #5f6f86;
}
.ts-user-support-list-page .user_subpage_ticketbox_lasthour_1{
margin-bottom: 4px;
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
color: #8ea0b6;
}
.ts-user-support-list-page .user_subpage_ticketbox_lasthour_2{
line-height: 1.65;
color: #42546e;
}
.ts-user-support-list-page .user_subpage_ticketbox_go{
width: 48px;
height: 48px;
border-radius: 15px;
border-color: #d6e1ed;
background: #f4f7fb;
color: #203a60;
}
.ts-user-support-list-page .user_subpage_ticketbox_go:hover{
box-shadow: 0 14px 28px rgba(15,23,42,.08);
transform: translateY(-1px);
}
.ts-user-support-form-page .row.teslimat-form-area,
.ts-user-support-detail-page .user_subpage_ticket_answer_main{
padding: 24px;
border: 1px solid #dbe6f2;
border-radius: 22px;
background: #fff;
box-shadow: 0 14px 30px rgba(15,23,42,.04);
}
.ts-user-support-form-page .button-blue.button-2x,
.ts-user-support-detail-page .button-blue.button-2x{
min-height: 48px;
border-radius: 14px;
font-weight: 700;
}
.ts-user-support-detail-page .row[style*="border-top"]{
margin: 0 0 24px;
padding: 22px 12px 8px !important;
border-top: 0 !important;
border: 1px solid #dbe6f2;
border-radius: 22px;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
box-shadow: 0 14px 30px rgba(15,23,42,.04);
}
.ts-user-support-detail-page .ticket-detail-form-area{
min-height: 110px;
padding: 16px 18px;
border: 1px solid #dfe7f2;
border-radius: 16px;
background: #fff;
box-shadow: 0 10px 22px rgba(15,23,42,.03);
}
.ts-user-support-detail-page .ticket-detail-form-area label{
display: block;
margin-bottom: 8px;
font-size: 11px !important;
font-weight: 800 !important;
letter-spacing: .12em;
text-transform: uppercase;
color: #95a2b5;
}
.ts-user-support-detail-page .user_subpage_ticket_line_hed{
margin: 26px 0 18px;
border-bottom-color: #dbe6f2;
}
.ts-user-support-detail-page .user_subpage_ticket_line_hed_text{
padding: 0 14px;
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
color: #6f7e93;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.ts-user-support-thread{
gap: 16px;
margin-bottom: 26px;
}
.ts-user-support-detail-page .user_subpage_ticket_message_user_box,
.ts-user-support-detail-page .user_subpage_ticket_message_support_box{
width: min(88%, 920px);
margin-bottom: 0;
padding: 18px 20px;
border-radius: 22px;
box-shadow: 0 16px 34px rgba(15,23,42,.05);
}
.ts-user-support-detail-page .user_subpage_ticket_message_user_box{
border-color: #dbe6f2;
background: #fff;
}
.ts-user-support-detail-page .user_subpage_ticket_message_support_box{
border-color: #22324d;
background: linear-gradient(180deg, #243754 0%, #1b2b44 100%);
}
.ts-user-support-detail-page .user_subpage_ticket_message_user_box_hed,
.ts-user-support-detail-page .user_subpage_ticket_message_support_box_hed{
margin-bottom: 12px;
padding-bottom: 12px;
}
.ts-user-support-detail-page .user_subpage_ticket_message_user_box_msg,
.ts-user-support-detail-page .user_subpage_ticket_message_support_box_msg{
line-height: 1.85;
}
.ts-user-support-detail-page .user_subpage_ticket_answer_main{
width: 100%;
}
.ts-user-support-detail-page .user_subpage_ticket_answer_main label{
display: block;
margin-bottom: 10px;
font-size: 20px !important;
line-height: 1.25;
font-weight: 800 !important;
color: #1b2c48;
}
@media screen and (max-width: 1279px){
.ts-user-address-list-page .user_subpage_div,
.ts-user-address-form-page .user_subpage_div,
.ts-user-favorites-page .user_subpage_div,
.ts-user-coupon-page .user_subpage_div,
.ts-user-reviews-page .user_subpage_div,
.ts-user-support-list-page .user_subpage_div,
.ts-user-support-form-page .user_subpage_div,
.ts-user-support-detail-page .user_subpage_div{
width: min(100%, calc(100vw - 28px));
gap: 18px;
}
.ts-user-address-list-page .user_subpage_coupon_content,
.ts-user-address-form-page .user_subpage_coupon_content,
.ts-user-coupon-page .user_subpage_coupon_content,
.ts-user-support-list-page .user_subpage_coupon_content,
.ts-user-support-form-page .user_subpage_coupon_content,
.ts-user-support-detail-page .user_subpage_coupon_content,
.ts-user-favorites-page .user_subpage_favorites_content,
.ts-user-reviews-page .user_subpage_favorites_content{
padding: 22px;
}
.ts-user-coupon-page .ts-user-coupon-card{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ts-user-support-ticket-row{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media screen and (max-width: 767px){
.ts-user-address-list-page .user_subpage_div,
.ts-user-address-form-page .user_subpage_div,
.ts-user-favorites-page .user_subpage_div,
.ts-user-coupon-page .user_subpage_div,
.ts-user-reviews-page .user_subpage_div,
.ts-user-support-list-page .user_subpage_div,
.ts-user-support-form-page .user_subpage_div,
.ts-user-support-detail-page .user_subpage_div{
width: min(100%, calc(100vw - 20px));
}
.ts-user-address-list-page .user_subpage_coupon_content,
.ts-user-address-form-page .user_subpage_coupon_content,
.ts-user-coupon-page .user_subpage_coupon_content,
.ts-user-support-list-page .user_subpage_coupon_content,
.ts-user-support-form-page .user_subpage_coupon_content,
.ts-user-support-detail-page .user_subpage_coupon_content,
.ts-user-favorites-page .user_subpage_favorites_content,
.ts-user-reviews-page .user_subpage_favorites_content{
padding: 16px;
border-radius: 20px;
}
.ts-user-address-list-page .user_subpage_account_header,
.ts-user-coupon-page .user_subpage_account_header,
.ts-user-favorites-page .user_subpage_account_header,
.ts-user-address-form-page .user_subpage_flex_header_h,
.ts-user-support-list-page .user_subpage_flex_header_h,
.ts-user-support-form-page .user_subpage_flex_header_h,
.ts-user-support-detail-page .user_subpage_flex_header_h,
.ts-user-reviews-page .user_subpage_flex_header_h{
font-size: 26px;
}
.ts-user-address-form-page .ts-user-form-header,
.ts-user-support-list-page .user_subpage_flex_header,
.ts-user-support-form-page .ts-user-form-header,
.ts-user-support-detail-page .ts-user-form-header,
.ts-user-reviews-page .user_subpage_flex_header{
padding: 16px;
border-radius: 18px;
}
.ts-user-address-grid,
.ts-user-favorites-page .ts-user-favorites-grid,
.ts-user-reviews-page .ts-user-reviews-grid,
.ts-user-coupon-page .ts-user-coupon-card,
.ts-user-support-ticket-row{
grid-template-columns: 1fr;
}
.ts-user-coupon-page .ts-user-coupon-card{
padding: 18px;
}
.ts-user-support-detail-page .row[style*="border-top"]{
padding: 16px 6px 4px !important;
border-radius: 18px;
}
.ts-user-support-detail-page .ticket-detail-form-area{
min-height: auto;
padding: 14px 16px;
}
.ts-user-support-detail-page .user_subpage_ticket_message_user_box,
.ts-user-support-detail-page .user_subpage_ticket_message_support_box{
width: 100%;
border-radius: 18px;
}
.ts-user-support-form-page .row.teslimat-form-area,
.ts-user-support-detail-page .user_subpage_ticket_answer_main{
padding: 18px;
border-radius: 18px;
}
}
.ts-user-account-shell .user_subpage_left_bar_namediv_circle{
position: relative;
overflow: hidden;
border: 1px solid #d7e2ef;
}
.ts-user-account-shell .user_subpage_left_bar_namediv_circle.has-image{
background: #ffffff;
box-shadow:
0 18px 34px rgba(28, 42, 67, .10),
inset 0 1px 0 rgba(255,255,255,.92);
}
.ts-user-account-shell .user_subpage_left_bar_namediv_circle.has-image img{
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.ts-user-account-settings-page .ts-user-profile-media-card{
margin-top: 14px;
padding: 16px 18px;
border: 1px solid #dce7f2;
border-radius: 20px;
background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
box-shadow: 0 10px 24px rgba(15,23,42,.035);
}
.ts-user-account-settings-page .ts-user-profile-media-card-head{
margin-bottom: 12px;
}
.ts-user-account-settings-page .ts-user-profile-media-card-title{
font-size: 12px;
line-height: 1.3;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: #6c7c92;
}
.ts-user-account-settings-page .ts-user-profile-media-card-sub{
margin-top: 6px;
font-size: 12px;
line-height: 1.65;
color: #74859a;
}
.ts-user-account-settings-page .ts-user-profile-media-body{
display: grid;
grid-template-columns: 78px minmax(0, 1fr);
gap: 14px;
align-items: center;
}
.ts-user-account-settings-page .ts-user-profile-media-preview{
position: relative;
width: 78px;
height: 78px;
border-radius: 24px;
border: 1px solid #d9e4f1;
background: linear-gradient(135deg, #edf3fb 0%, #dce6f3 100%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-size: 28px;
font-weight: 800;
letter-spacing: .03em;
color: #213552;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.88),
0 10px 18px rgba(15,23,42,.06);
}
.ts-user-account-settings-page .ts-user-profile-media-preview.has-image{
background: #ffffff;
}
.ts-user-account-settings-page .ts-user-profile-media-preview img{
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.ts-user-account-settings-page .ts-user-profile-media-badge{
position: absolute;
right: 8px;
bottom: 8px;
min-width: 26px;
height: 26px;
padding: 0 7px;
border-radius: 999px;
background: linear-gradient(135deg, #213655 0%, #2f4f7d 100%);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 18px rgba(22,35,55,.16);
font-size: 13px;
}
.ts-user-account-settings-page .ts-user-profile-media-copy{
min-width: 0;
}
.ts-user-account-settings-page .ts-user-profile-media-copy-title{
font-size: 15px;
line-height: 1.3;
font-weight: 800;
color: #1d314e;
}
.ts-user-account-settings-page .ts-user-profile-media-copy-text{
margin-top: 6px;
font-size: 12px;
line-height: 1.7;
color: #6d7d92;
max-width: 620px;
}
.ts-user-account-settings-page .ts-user-profile-media-form{
margin-top: 12px;
}
.ts-user-account-settings-page .ts-user-profile-media-form-row{
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.ts-user-account-settings-page .ts-user-profile-media-form .form-control-file{
min-width: min(100%, 320px);
padding: 11px 14px;
border: 1px dashed #c9d8e8;
border-radius: 14px;
background: #f8fbff;
color: #465971;
font-size: 12px;
}
.ts-user-account-settings-page .ts-user-profile-media-form .button-blue,
.ts-user-account-settings-page .ts-user-profile-media-form .button-grey{
min-width: 102px;
height: 40px;
border-radius: 12px;
font-size: 11px;
font-weight: 800;
letter-spacing: .03em;
text-transform: uppercase;
}
.ts-user-account-settings-page .ts-user-profile-media-form .button-grey{
background: #eef3f9;
color: #314661;
}
.ts-user-account-settings-page .ts-user-profile-media-alert{
margin-bottom: 12px;
padding: 12px 14px;
border-radius: 14px;
font-size: 12px;
line-height: 1.7;
border: 1px solid transparent;
}
.ts-user-account-settings-page .ts-user-profile-media-alert.is-success{
border-color: #cce9d7;
background: linear-gradient(180deg, #f6fff8 0%, #effbf2 100%);
color: #1e6a42;
}
.ts-user-account-settings-page .ts-user-profile-media-alert.is-error{
border-color: #f2d0d0;
background: linear-gradient(180deg, #fff7f7 0%, #fff1f1 100%);
color: #aa3d3d;
}
@media screen and (max-width: 1279px){
.ts-user-account-settings-page .ts-user-profile-media-body{
grid-template-columns: 72px minmax(0, 1fr);
}
.ts-user-account-settings-page .ts-user-profile-media-preview{
width: 72px;
height: 72px;
border-radius: 22px;
font-size: 24px;
}
}
@media screen and (max-width: 767px){
.ts-user-account-shell .user_subpage_left_bar_namediv_circle{
width: 72px;
height: 72px;
font-size: 28px;
}
.ts-user-account-settings-page .ts-user-profile-media-card{
padding: 16px;
border-radius: 18px;
}
.ts-user-account-settings-page .ts-user-profile-media-body{
grid-template-columns: 1fr;
gap: 16px;
}
.ts-user-account-settings-page .ts-user-profile-media-preview{
width: 88px;
height: 88px;
margin: 0 auto;
}
.ts-user-account-settings-page .ts-user-profile-media-copy{
text-align: center;
}
.ts-user-account-settings-page .ts-user-profile-media-form-row{
justify-content: center;
}
.ts-user-account-settings-page .ts-user-profile-media-form .form-control-file{
width: 100%;
min-width: 100%;
}
.ts-user-account-settings-page .ts-user-profile-media-form .button-blue,
.ts-user-account-settings-page .ts-user-profile-media-form .button-grey{
width: 100%;
}
}
/* Notifications Page */
.ts-notification-page-root{
width:100%;
overflow:hidden;
background:#ffffff;
font-family:inherit;
}
.ts-notification-page-banner-overlay{
position:absolute;
inset:0;
z-index:1;
background:rgba(0,0,0,0.3);
}
.ts-notification-shell{
--ts-page-max:1320px;
--ts-page-gutter:clamp(14px, 2.2vw, 32px);
--ts-bg:#f4f5f7;
--ts-surface:rgba(255,255,255,.96);
--ts-surface-strong:#ffffff;
--ts-surface-soft:rgba(245,247,250,.94);
--ts-surface-muted:rgba(248,250,252,.96);
--ts-border:rgba(15,23,42,.08);
--ts-border-strong:rgba(15,23,42,.12);
--ts-text:#1a2430;
--ts-text-strong:#101722;
--ts-muted:#697686;
--ts-shadow:0 18px 40px rgba(15,23,42,.07);
--ts-shadow-soft:0 10px 24px rgba(15,23,42,.05);
--ts-accent:#15202d;
--ts-accent-soft:#2c2c2e;
--ts-warm:#d6a14a;
--ts-success:#2f8f5b;
--ts-info:#3578c8;
--ts-warning:#c78828;
--ts-alert:#d0634b;
--ts-neutral:#8e8e93;
width:min(var(--ts-page-max), calc(100vw - (var(--ts-page-gutter) * 2)));
max-width:none;
margin:0 auto;
padding:24px 0 40px;
position:relative;
color:var(--ts-text);
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}
.ts-notification-shell::before,
.ts-notification-shell::after{
content:"";
position:absolute;
border-radius:999px;
pointer-events:none;
z-index:0;
}
.ts-notification-shell::before{
width:220px;
height:220px;
right:-94px;
top:-28px;
background:radial-gradient(circle at center, rgba(255,255,255,.82), rgba(255,255,255,0));
}
.ts-notification-shell::after{
width:208px;
height:208px;
left:-60px;
bottom:10px;
background:radial-gradient(circle at center, rgba(210,214,221,.22), rgba(210,214,221,0));
}
.ts-notification-shell.is-loading{
pointer-events:none;
}
.ts-notification-shell.is-loading .ts-mail-hero,
.ts-notification-shell.is-loading .ts-mail-body{
opacity:.62;
transition:opacity .2s ease;
}
.ts-mail-hero,
.ts-mail-body,
.ts-mail-focus-shell,
.ts-mail-focus-grid{
position:relative;
z-index:1;
}
.ts-mail-hero{
display:block;
margin-bottom:16px;
}
.ts-mail-hero-main,
.ts-mail-flash,
.ts-mail-section,
.ts-mail-card,
.ts-mail-thread,
.ts-mail-feed-row,
.ts-mail-focus-shell,
.ts-mail-empty-state{
background:var(--ts-surface);
backdrop-filter:blur(12px);
border:1px solid var(--ts-border);
box-shadow:var(--ts-shadow-soft);
}
.ts-mail-hero-main{
border-radius:28px;
padding:26px 28px;
position:relative;
overflow:hidden;
background:linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(248,250,252,.94) 100%);
}
.ts-mail-hero-main::after{
content:"";
position:absolute;
inset:auto -64px -72px auto;
width:220px;
height:220px;
border-radius:999px;
background:radial-gradient(circle at center, rgba(210,214,221,.18), rgba(210,214,221,0));
}
.ts-mail-hero-row{
display:grid;
grid-template-columns:minmax(0,1.42fr) minmax(320px,.88fr);
gap:24px;
align-items:start;
}
.ts-mail-hero-copy-block{
min-width:0;
}
.ts-mail-header-kicker,
.ts-mail-toolbar-kicker,
.ts-mail-section-kicker,
.ts-mail-summary-eyebrow{
display:inline-flex;
align-items:center;
gap:8px;
font-size:11px;
line-height:1;
letter-spacing:.14em;
text-transform:uppercase;
font-weight:800;
color:#8c8c91;
margin-bottom:8px;
}
.ts-mail-title{
margin:0;
font-size:clamp(28px, 3.2vw, 38px);
line-height:1.04;
font-weight:800;
color:var(--ts-text-strong);
max-width:640px;
letter-spacing:-.03em;
}
.ts-mail-copy{
margin:10px 0 0;
font-size:14px;
line-height:1.65;
color:var(--ts-muted);
max-width:640px;
}
.ts-mail-header-summary{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:16px;
}
.ts-mail-summary-panel{
display:flex;
align-items:stretch;
padding:6px;
border-radius:24px;
background:rgba(247,249,252,.88);
border:1px solid rgba(15,23,42,.06);
}
.ts-mail-summary-grid{
display:grid;
width:100%;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
margin-top:0;
}
.ts-mail-summary-card{
border-radius:18px;
padding:12px 14px;
min-height:84px;
display:grid;
grid-template-columns:36px minmax(0,1fr);
align-items:center;
gap:10px;
position:relative;
overflow:hidden;
border:1px solid rgba(15,23,42,.06);
background:rgba(255,255,255,.88);
}
.ts-mail-summary-card::after{
display:none;
}
.ts-mail-summary-card.tone-neutral{color:var(--ts-accent);}
.ts-mail-summary-card.tone-warning{color:var(--ts-warning);}
.ts-mail-summary-card.tone-alert{color:var(--ts-alert);}
.ts-mail-summary-card.tone-info{color:var(--ts-info);}
.ts-mail-summary-icon{
width:36px;
height:36px;
border-radius:999px;
display:flex;
align-items:center;
justify-content:center;
font-size:14px;
color:#fff;
box-shadow:none;
}
.ts-mail-summary-card.tone-neutral .ts-mail-summary-icon{background:#1f2937;}
.ts-mail-summary-card.tone-warning .ts-mail-summary-icon{background:#c78828;}
.ts-mail-summary-card.tone-alert .ts-mail-summary-icon{background:#d0634b;}
.ts-mail-summary-card.tone-info .ts-mail-summary-icon{background:#3578c8;}
.ts-mail-summary-value{
display:block;
font-size:24px;
line-height:1;
font-weight:800;
color:var(--ts-text-strong);
margin-bottom:4px;
letter-spacing:-.02em;
}
.ts-mail-summary-copy strong{
display:block;
font-size:12px;
line-height:1.35;
font-weight:800;
color:var(--ts-text-strong);
}
.ts-mail-summary-eyebrow,
.ts-mail-summary-meta{
display:none;
}
.ts-mail-focus-shell{
position:relative;
overflow:visible;
isolation:isolate;
padding:14px;
border-radius:24px;
margin-bottom:16px;
background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,249,252,.92));
}
.ts-mail-focus-top{
display:grid;
grid-template-columns:1fr;
gap:12px;
align-items:start;
}
.ts-mail-focus-nav{
min-width:0;
}
.ts-mail-focus-tools{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:start;
gap:12px 16px;
min-width:0;
padding-top:12px;
border-top:1px solid rgba(15,23,42,.08);
}
.ts-mail-focus-shell.is-filter-open,
.ts-mail-focus-shell.is-overlay-open{
z-index:18;
}
.ts-mail-focus-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:8px;
padding:0;
border-radius:0;
background:transparent;
border:none;
box-shadow:none;
margin-bottom:0;
}
.ts-mail-focus-card{
position:relative;
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
align-items:start;
gap:10px;
min-height:68px;
min-width:0;
border-radius:16px;
padding:12px 14px;
color:var(--ts-text);
text-decoration:none;
background:rgba(248,250,252,.92);
border:1px solid rgba(15,23,42,.06);
box-shadow:none;
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.ts-mail-focus-card:hover{
transform:none;
box-shadow:0 10px 20px rgba(15,23,42,.05);
background:#ffffff;
border-color:rgba(15,23,42,.12);
text-decoration:none;
color:inherit;
}
.ts-mail-focus-card.is-active{
background:#223044;
color:#fff;
border-color:#223044;
box-shadow:0 10px 24px rgba(15,23,42,.12);
}
.ts-mail-focus-icon{
width:32px;
height:32px;
border-radius:999px;
display:flex;
align-items:center;
justify-content:center;
font-size:12px;
color:var(--ts-text-strong);
background:rgba(15,23,42,.06);
box-shadow:none;
}
.ts-mail-focus-card.tone-alert .ts-mail-focus-icon{background:rgba(208,99,75,.14); color:#a84632;}
.ts-mail-focus-card.tone-info .ts-mail-focus-icon{background:rgba(53,120,200,.14); color:#235ea8;}
.ts-mail-focus-card.tone-warning .ts-mail-focus-icon{background:rgba(199,136,40,.14); color:#9d6a18;}
.ts-mail-focus-card.tone-success .ts-mail-focus-icon{background:rgba(47,143,91,.14); color:#246d43;}
.ts-mail-focus-card.is-active .ts-mail-focus-icon{
background:rgba(255,255,255,.16);
color:#fff;
}
.ts-mail-focus-label{
min-width:0;
font-size:13px;
line-height:1.2;
font-weight:800;
overflow:hidden;
white-space:normal;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
.ts-mail-focus-count{
min-width:22px;
height:22px;
padding:0 7px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:10px;
font-weight:800;
background:rgba(15,23,42,.05);
color:var(--ts-text-strong);
margin-left:2px;
align-self:center;
}
.ts-mail-focus-card.is-active .ts-mail-focus-count{
background:rgba(255,255,255,.14);
color:#fff;
}
.ts-mail-body{
display:block;
}
.ts-mail-main{
min-width:0;
}
.ts-mail-section{
border-radius:30px;
padding:24px 26px;
background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,252,.92));
}
.ts-mail-toolbar{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:start;
gap:18px;
padding:0 0 20px;
margin-bottom:0;
background:transparent;
border:none;
box-shadow:none;
border-radius:0;
border-bottom:1px solid rgba(15,23,42,.08);
}
.ts-mail-toolbar-title{
display:flex;
align-items:center;
gap:12px;
margin:0;
font-size:26px;
line-height:1.12;
font-weight:800;
color:var(--ts-text-strong);
letter-spacing:-.02em;
}
.ts-mail-toolbar-title i{
width:34px;
height:34px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:13px;
color:#fff;
background:#1d1d1f;
}
.ts-mail-toolbar-copy{
margin:8px 0 0;
max-width:640px;
font-size:14px;
line-height:1.65;
color:var(--ts-muted);
}
.ts-mail-toolbar-side{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:14px;
}
.ts-mail-toolbar-badges{
display:flex;
flex-wrap:wrap;
justify-content:flex-start;
gap:8px;
flex:1 1 auto;
min-width:0;
margin-right:auto;
align-self:center;
}
.ts-mail-toolbar-badges .ts-ui-badge{
min-height:32px;
padding:0 11px;
border-radius:999px;
font-size:10px;
letter-spacing:0;
background:rgba(34,48,68,.06);
border-color:rgba(23,50,77,.08);
color:#4b5d70;
}
.ts-mail-toolbar-actions{
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
align-items:flex-start;
gap:10px;
flex:0 0 auto;
}
.ts-mail-toolbar-menu{
position:relative;
z-index:4;
}
.ts-mail-toolbar-menu summary{
list-style:none;
}
.ts-mail-toolbar-menu summary::-webkit-details-marker{
display:none;
}
.ts-mail-toolbar-menu-panel{
position:absolute;
top:calc(100% + 8px);
right:0;
min-width:248px;
padding:8px;
border-radius:18px;
border:1px solid rgba(15,23,42,.08);
background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(247,249,252,.96));
box-shadow:0 18px 36px rgba(15,23,42,.12);
display:grid;
gap:8px;
z-index:60;
}
.ts-mail-toolbar-menu-action{
width:100%;
min-height:38px;
padding:0 12px;
border-radius:13px;
border:1px solid rgba(15,23,42,.10);
background:#ffffff;
color:var(--ts-accent);
font-size:11px;
line-height:1.3;
font-weight:700;
font-family:inherit;
text-align:left;
cursor:pointer;
transition:box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.ts-mail-toolbar-menu-action:hover{
box-shadow:0 10px 18px rgba(15,23,42,.05);
border-color:rgba(15,23,42,.14);
}
.ts-mail-toolbar-section{
position:relative;
overflow:visible;
}
.ts-mail-toolbar-control-row{
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
align-items:flex-start;
gap:12px;
width:auto;
min-width:0;
}
.ts-mail-filter-dock{
position:relative;
display:flex;
flex-direction:column;
align-items:flex-end;
gap:8px;
min-width:0;
max-width:none;
width:auto;
flex:0 1 auto;
}
.ts-mail-filter-toggle{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
min-height:40px;
padding:0 15px;
border-radius:999px;
border:1px solid rgba(15,23,42,.10);
background:#ffffff;
color:var(--ts-accent);
font-size:11px;
font-weight:800;
font-family:inherit;
white-space:nowrap;
cursor:pointer;
transition:box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.ts-mail-filter-toggle:hover{
box-shadow:0 10px 18px rgba(15,23,42,.05);
}
.ts-mail-filter-toggle.is-active{
background:#223044;
color:#fff;
border-color:#223044;
}
.ts-mail-filter-toggle-count{
min-width:20px;
height:20px;
padding:0 6px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
background:rgba(15,23,42,.06);
color:inherit;
font-size:9px;
line-height:1;
font-weight:800;
}
.ts-mail-filter-toggle.is-active .ts-mail-filter-toggle-count{
background:rgba(255,255,255,.14);
}
.ts-mail-filter-summary{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:6px;
max-width:100%;
}
.ts-mail-filter-summary-copy{
font-size:11px;
line-height:1.4;
font-weight:700;
color:var(--ts-muted);
}
.ts-mail-filter-summary-tags{
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
gap:6px;
}
.ts-mail-filter-tag{
display:inline-flex;
align-items:center;
gap:6px;
min-height:24px;
padding:0 9px;
border-radius:999px;
border:1px solid rgba(23,50,77,.08);
background:#ffffff;
font-size:9px;
line-height:1;
font-weight:800;
color:#4d6077;
}
.ts-mail-filter-tag i{
font-size:8px;
}
.ts-mail-filter-tag.is-warning{
background:rgba(185,122,30,.08);
border-color:rgba(185,122,30,.14);
color:#7d6025;
}
.ts-mail-filter-reset,
.ts-mail-filter-reset-link{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:24px;
color:#5c6877;
font-size:10px;
line-height:1.2;
font-weight:700;
text-decoration:none;
}
.ts-mail-filter-reset:hover,
.ts-mail-filter-reset-link:hover{
color:#223044;
text-decoration:none;
}
.ts-mail-secondary-link.is-disabled,
.ts-mail-secondary-link:disabled{
opacity:.55;
cursor:not-allowed;
box-shadow:none;
transform:none;
}
.ts-mail-secondary-link.is-disabled:hover,
.ts-mail-secondary-link:disabled:hover{
box-shadow:none;
transform:none;
color:var(--ts-accent);
}
.ts-mail-secondary-link.is-muted{
background:rgba(34,48,68,.06);
color:#4d6077;
}
.ts-mail-filter-shell{
position:absolute;
top:calc(100% + 10px);
right:0;
width:min(680px, calc(100vw - 56px));
max-width:680px;
z-index:28;
transform-origin:top right;
opacity:0;
transform:translate3d(18px, -4px, 0) scale(.98);
transition:opacity .22s ease, transform .28s cubic-bezier(.22,1,.36,1);
}
.ts-mail-filter-shell[hidden]{
display:none !important;
}
.ts-mail-focus-shell.is-filter-open .ts-mail-filter-shell{
opacity:1;
transform:translate3d(0, 0, 0) scale(1);
}
.ts-mail-filter-overlay{
display:none;
}
.ts-mail-filter-panel{
position:relative;
border-radius:34px;
padding:22px 24px 20px 28px;
background:linear-gradient(180deg, rgba(255,255,255,.995), rgba(247,249,252,.97));
border:1px solid rgba(15,23,42,.08);
box-shadow:0 28px 52px rgba(15,23,42,.14);
}
.ts-mail-filter-panel-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:18px;
}
.ts-mail-filter-panel-head > div{
flex:1;
min-width:0;
max-width:500px;
}
.ts-mail-filter-panel-title{
margin:0;
font-size:24px;
line-height:1.12;
font-weight:800;
color:var(--ts-text-strong);
letter-spacing:-.02em;
}
.ts-mail-filter-panel-copy{
margin:8px 0 0;
font-size:13px;
line-height:1.6;
color:var(--ts-muted);
}
.ts-mail-filter-close{
width:40px;
height:40px;
border:none;
border-radius:999px;
background:rgba(23,50,77,.05);
color:var(--ts-text-strong);
font-size:14px;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:background .18s ease, color .18s ease;
}
.ts-mail-filter-close:hover{
background:rgba(23,50,77,.09);
color:#223044;
}
.ts-mail-filter-form{
display:grid;
gap:20px;
margin-top:20px;
}
.ts-mail-filter-section,
.ts-mail-filter-section-grid{
display:grid;
gap:12px;
}
.ts-mail-filter-section-grid{
grid-template-columns:minmax(0,1.25fr) minmax(220px,.9fr);
gap:24px 28px;
align-items:start;
}
.ts-mail-filter-section-title{
font-size:11px;
line-height:1.2;
letter-spacing:.12em;
text-transform:uppercase;
font-weight:800;
color:#7d8793;
}
.ts-mail-filter-choice-grid{
display:flex;
flex-wrap:wrap;
gap:10px;
}
.ts-mail-filter-choice{
position:relative;
display:block;
cursor:pointer;
}
.ts-mail-filter-choice input{
position:absolute;
inset:0;
opacity:0;
pointer-events:none;
}
.ts-mail-filter-choice span{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:40px;
padding:0 16px;
border-radius:999px;
border:1px solid rgba(15,23,42,.10);
background:#ffffff;
color:var(--ts-accent);
font-size:12px;
line-height:1.2;
font-weight:700;
transition:box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.ts-mail-filter-choice input:checked + span{
background:#223044;
border-color:#223044;
color:#fff;
}
.ts-mail-filter-range{
display:none;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
padding:14px;
border-radius:20px;
border:1px solid rgba(15,23,42,.08);
background:var(--ts-surface-muted);
}
.ts-mail-filter-range.is-visible{
display:grid;
}
.ts-mail-filter-field{
display:grid;
gap:6px;
min-width:0;
}
.ts-mail-filter-field span{
font-size:11px;
line-height:1.2;
font-weight:700;
color:#7d8793;
}
.ts-mail-filter-field input[type="date"]{
min-width:0;
min-height:44px;
padding:0 14px;
border-radius:14px;
border:1px solid rgba(15,23,42,.10);
background:#ffffff;
color:var(--ts-text-strong);
font-size:13px;
font-family:inherit;
}
.ts-mail-filter-field input[type="date"]:focus{
outline:none;
border-color:#223044;
box-shadow:0 0 0 4px rgba(34,48,68,.08);
}
.ts-mail-filter-field input[type="date"]:disabled{
opacity:.5;
cursor:not-allowed;
}
.ts-mail-filter-footer{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding-top:8px;
}
.ts-mail-filter-apply{
min-width:170px;
}
.ts-mail-filter-preferences{
margin-top:18px;
padding-top:16px;
border-top:1px solid rgba(15,23,42,.08);
}
.ts-mail-filter-preferences summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
cursor:pointer;
list-style:none;
font-size:14px;
line-height:1.3;
font-weight:800;
color:var(--ts-text-strong);
}
.ts-mail-filter-preferences summary::-webkit-details-marker{
display:none;
}
.ts-mail-filter-preferences summary small{
font-size:11px;
line-height:1;
letter-spacing:.08em;
text-transform:uppercase;
color:#8c8c91;
}
.ts-mail-filter-preferences-form{
display:grid;
gap:14px;
margin-top:14px;
}
.ts-mail-filter-preferences-form .ts-mail-secondary-link{
justify-self:start;
}
.ts-mail-section-head-actions{
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
gap:10px;
}
.ts-mail-inline-form{
margin:0;
}
.ts-mail-secondary-link,
.ts-mail-filter-chip,
.ts-mail-empty-link{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
min-height:38px;
padding:0 13px;
border-radius:999px;
border:1px solid rgba(15,23,42,.10);
background:#ffffff;
color:var(--ts-accent);
font-size:11px;
font-weight:700;
font-family:inherit;
text-decoration:none;
appearance:none;
cursor:pointer;
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ts-mail-toolbar-actions .ts-mail-secondary-link,
.ts-mail-toolbar-menu > summary.ts-mail-secondary-link{
min-height:40px;
padding:0 15px;
white-space:nowrap;
}
.ts-mail-secondary-link:hover,
.ts-mail-filter-chip:hover,
.ts-mail-empty-link:hover{
text-decoration:none;
color:inherit;
transform:none;
box-shadow:0 10px 18px rgba(15,23,42,.05);
}
.ts-mail-flash{
display:flex;
align-items:center;
gap:12px;
border-radius:24px;
padding:13px 16px;
margin-bottom:14px;
background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
}
.ts-mail-flash i{
font-size:18px;
}
.ts-mail-flash.tone-success{
border-color:rgba(29,139,99,.18);
color:#245f46;
}
.ts-mail-flash.tone-neutral{
border-color:rgba(23,50,77,.1);
color:#425164;
}
.ts-mail-control-panel{
display:grid;
gap:22px;
}
.ts-mail-control-grid{
display:grid;
grid-template-columns:minmax(0,1.35fr) minmax(300px,.95fr);
gap:18px;
align-items:start;
}
.ts-mail-control-block{
display:grid;
gap:16px;
padding:20px 22px;
border-radius:24px;
border:1px solid rgba(15,23,42,.08);
background:var(--ts-surface-muted);
}
.ts-mail-control-block-head{
display:grid;
gap:8px;
}
.ts-mail-filter-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0,1fr));
gap:16px;
}
.ts-mail-filter-group strong{
display:block;
margin-bottom:10px;
font-size:11px;
line-height:1.2;
letter-spacing:.12em;
text-transform:uppercase;
color:#7d8793;
}
.ts-mail-filter-chips{
display:flex;
flex-wrap:wrap;
gap:8px;
}
.ts-mail-filter-chip{
min-height:36px;
padding:0 14px;
font-size:12px;
background:#ffffff;
}
.ts-mail-filter-chip.is-active{
background:#223044;
border-color:#223044;
color:#fff;
box-shadow:none;
}
.ts-mail-preferences-form{
display:grid;
gap:18px;
align-content:start;
}
.ts-mail-preference-switches{
display:grid;
gap:10px;
}
.ts-mail-switch{
display:inline-flex;
align-items:center;
gap:8px;
min-height:46px;
padding:0 14px;
border-radius:999px;
border:1px solid rgba(23,50,77,.08);
background:#ffffff;
color:var(--ts-text-strong);
font-size:13px;
font-weight:700;
}
.ts-mail-switch input{
width:16px;
height:16px;
accent-color:#223044;
}
.ts-mail-preferences-form .ts-mail-secondary-link{
justify-self:start;
}
.ts-mail-section{
margin-bottom:14px;
}
.ts-mail-section-head{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:start;
justify-content:space-between;
gap:14px;
margin-bottom:14px;
}
.ts-mail-section-title{
margin:0;
font-size:22px;
line-height:1.15;
font-weight:800;
color:var(--ts-text-strong);
letter-spacing:-.02em;
}
.ts-mail-section-copy{
margin:8px 0 0;
max-width:760px;
font-size:13px;
line-height:1.6;
color:var(--ts-muted);
}
.ts-mail-featured-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:14px;
}
.ts-mail-card{
border-radius:22px;
padding:16px 16px 14px;
display:flex;
flex-direction:column;
gap:10px;
position:relative;
overflow:hidden;
background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,249,252,.94));
transition:border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ts-mail-card.tone-alert{border-color:rgba(197,91,69,.25);}
.ts-mail-card.tone-warning{border-color:rgba(185,122,30,.24);}
.ts-mail-card.tone-unread{border-color:rgba(185,122,30,.24);}
.ts-mail-card.tone-info{border-color:rgba(47,110,169,.24);}
.ts-mail-card.tone-success{border-color:rgba(29,139,99,.24);}
.ts-mail-thread{
border-radius:24px;
padding:18px 20px;
position:relative;
display:grid;
grid-template-columns:40px minmax(0,1fr);
gap:16px;
overflow:hidden;
background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,249,252,.94));
transition:border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ts-mail-thread-body{
min-width:0;
}
.ts-mail-thread.tone-alert{border-color:rgba(197,91,69,.23);}
.ts-mail-thread.tone-warning,
.ts-mail-thread.tone-unread{border-color:rgba(185,122,30,.22);}
.ts-mail-thread.tone-info{border-color:rgba(47,110,169,.22);}
.ts-mail-thread.tone-success{border-color:rgba(29,139,99,.22);}
.ts-mail-card.is-read,
.ts-mail-thread.is-read,
.ts-mail-feed-row.is-read{
background:linear-gradient(180deg, rgba(252,252,253,.9), rgba(244,245,248,.84));
box-shadow:0 8px 18px rgba(15,23,42,.035);
}
.ts-mail-card.is-read{border-color:rgba(23,50,77,.08);}
.ts-mail-thread.is-read{border-color:rgba(23,50,77,.08);}
.ts-mail-feed-row.is-read{border-color:rgba(23,50,77,.08);}
.ts-mail-card.is-read.tone-alert,
.ts-mail-thread.is-read.tone-alert,
.ts-mail-feed-row.is-read.tone-alert{border-color:rgba(197,91,69,.14);}
.ts-mail-card.is-read.tone-warning,
.ts-mail-thread.is-read.tone-warning,
.ts-mail-feed-row.is-read.tone-warning{border-color:rgba(185,122,30,.14);}
.ts-mail-card.is-read.tone-info,
.ts-mail-thread.is-read.tone-info,
.ts-mail-feed-row.is-read.tone-info{border-color:rgba(47,110,169,.14);}
.ts-mail-card.is-read.tone-success,
.ts-mail-thread.is-read.tone-success,
.ts-mail-feed-row.is-read.tone-success{border-color:rgba(29,139,99,.14);}
.ts-mail-card.is-unread::before,
.ts-mail-thread.is-unread::before,
.ts-mail-feed-row.is-unread::before{
content:"";
position:absolute;
inset:18px auto 18px 0;
width:3px;
border-radius:0 999px 999px 0;
background:linear-gradient(180deg, rgba(198,153,92,1), rgba(23,50,77,.88));
}
.ts-mail-card-head,
.ts-mail-card-footer{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-wrap:wrap;
}
.ts-mail-card-badges{
display:flex;
flex-wrap:wrap;
gap:6px;
}
.ts-mail-card-time{
display:inline-flex;
align-items:center;
gap:8px;
font-size:11px;
line-height:1.5;
color:var(--ts-muted);
}
.ts-mail-card-title-row{
display:grid;
grid-template-columns:42px minmax(0,1fr);
gap:12px;
align-items:start;
}
.ts-mail-card-icon{
width:42px;
height:42px;
border-radius:999px;
display:flex;
align-items:center;
justify-content:center;
font-size:15px;
color:#fff;
box-shadow:none;
}
.ts-mail-card-icon.tone-alert{background:#d0634b;}
.ts-mail-card-icon.tone-warning{background:#c78828;}
.ts-mail-card-icon.tone-unread{background:#c78828;}
.ts-mail-card-icon.tone-info{background:#3578c8;}
.ts-mail-card-icon.tone-success{background:#2f8f5b;}
.ts-mail-card-icon.tone-neutral{background:#1f2937;}
.ts-mail-card-order{
font-size:11px;
line-height:1.45;
color:#7c8694;
margin-bottom:4px;
}
.ts-mail-card-title{
margin:0;
font-size:18px;
line-height:1.2;
font-weight:800;
color:var(--ts-text-strong);
}
.ts-mail-card-excerpt{
font-size:13px;
line-height:1.6;
color:var(--ts-muted);
}
.ts-mail-card-steps,
.ts-mail-feed-row-steps{
display:grid;
gap:8px;
}
.ts-mail-card-steps{
grid-template-columns:1fr;
}
.ts-mail-step{
display:flex;
align-items:flex-start;
gap:9px;
min-width:0;
padding:9px 11px;
border-radius:14px;
background:#ffffff;
border:1px solid rgba(23,50,77,.08);
}
.ts-mail-step-icon{
width:30px;
height:30px;
border-radius:10px;
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
font-size:13px;
color:#fff;
background:var(--ts-neutral);
}
.ts-mail-step.is-success .ts-mail-step-icon{background:var(--ts-success);}
.ts-mail-step.is-info .ts-mail-step-icon,
.ts-mail-step.is-active .ts-mail-step-icon{background:var(--ts-info);}
.ts-mail-step.is-warning .ts-mail-step-icon,
.ts-mail-step.is-pending .ts-mail-step-icon{background:var(--ts-warning);}
.ts-mail-step.is-alert .ts-mail-step-icon{background:var(--ts-alert);}
.ts-mail-step.is-neutral .ts-mail-step-icon{background:var(--ts-neutral);}
.ts-mail-step-copy{
min-width:0;
}
.ts-mail-step-copy strong{
display:block;
font-size:12px;
line-height:1.35;
font-weight:800;
color:var(--ts-text-strong);
}
.ts-mail-step-copy span{
display:block;
margin-top:3px;
font-size:11px;
line-height:1.5;
color:var(--ts-muted);
}
.ts-mail-card-footnote{
font-size:11px;
line-height:1.6;
color:var(--ts-muted);
}
.ts-mail-card-footer{
margin-top:4px;
align-items:flex-end;
}
.ts-mail-card-footer .ts-mail-card-cta{
margin-left:auto;
}
.ts-mail-card-cta,
.ts-mail-feed-row-action,
.ts-mail-load-more{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
min-height:40px;
padding:0 15px;
border:1px solid transparent;
border-radius:999px;
background:#223044;
color:#fff;
font-size:11px;
font-weight:800;
text-decoration:none;
box-shadow:0 6px 16px rgba(15,23,42,.10);
cursor:pointer;
transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.ts-mail-card-cta:hover,
.ts-mail-feed-row-action:hover,
.ts-mail-load-more:hover{
color:#fff;
text-decoration:none;
transform:none;
box-shadow:0 12px 24px rgba(15,23,42,.12);
}
.ts-mail-feed-panel{
display:grid;
gap:16px;
}
.ts-mail-feed-toolbar{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:12px 16px;
align-items:center;
padding:15px 18px;
border-radius:20px;
border:1px solid rgba(15,23,42,.08);
background:var(--ts-surface-soft);
}
.ts-mail-feed-toolbar-copy{
display:grid;
gap:4px;
}
.ts-mail-feed-toolbar-copy-iconic{
display:flex;
align-items:center;
gap:10px;
min-height:34px;
}
.ts-mail-feed-toolbar-counter{
min-width:34px;
height:34px;
padding:0 11px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
color:var(--ts-muted);
font-size:13px;
font-weight:800;
line-height:1;
}
.ts-mail-feed-toolbar-counter.is-active{
background:#223044;
border-color:#223044;
color:#ffffff;
}
.ts-mail-feed-toolbar-copy strong{
font-size:14px;
line-height:1.35;
font-weight:800;
color:var(--ts-text-strong);
}
.ts-mail-feed-toolbar-copy span{
font-size:12px;
line-height:1.55;
color:var(--ts-muted);
}
.ts-mail-feed-bulk-form{
display:flex;
align-items:center;
justify-content:flex-end;
gap:10px;
}
.ts-mail-feed-bulk-actions{
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
gap:10px;
}
.ts-mail-feed-list{
display:grid;
gap:12px;
}
.ts-mail-visually-hidden{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}
.ts-mail-select-control{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
}
.ts-mail-select-input{
position:absolute;
inset:0;
opacity:0;
cursor:pointer;
}
.ts-mail-select-box{
width:22px;
height:22px;
border-radius:7px;
border:1px solid rgba(15,23,42,.12);
background:#ffffff;
color:transparent;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:11px;
transition:border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.ts-mail-select-input:focus + .ts-mail-select-box{
border-color:#223044;
box-shadow:0 0 0 4px rgba(34,48,68,.08);
}
.ts-mail-select-input:checked + .ts-mail-select-box{
background:#223044;
border-color:#223044;
color:#fff;
}
.ts-mail-feed-row{
border-radius:20px;
padding:16px 18px;
position:relative;
display:grid;
grid-template-columns:40px minmax(0,1fr) minmax(176px,204px);
gap:18px;
align-items:start;
background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
transition:border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ts-mail-feed-row-select,
.ts-mail-thread-select{
display:flex;
justify-content:center;
padding-top:2px;
}
.ts-mail-feed-row.is-selected,
.ts-mail-thread.is-selected{
border-color:rgba(34,48,68,.24);
box-shadow:0 12px 28px rgba(15,23,42,.07);
background:linear-gradient(180deg, rgba(255,255,255,1), rgba(244,247,251,.98));
}
.ts-mail-thread-topline,
.ts-mail-thread-footer{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-wrap:wrap;
}
.ts-mail-thread-topline{
margin-bottom:8px;
}
.ts-mail-thread-head{
display:grid;
grid-template-columns:minmax(0,1fr) 204px;
gap:16px;
align-items:start;
margin-top:0;
padding-bottom:14px;
border-bottom:1px solid rgba(15,23,42,.08);
}
.ts-mail-thread-steps{
display:grid;
grid-template-columns:1fr;
gap:0;
margin-top:14px;
padding-left:12px;
position:relative;
}
.ts-mail-thread-steps::before{
content:"";
position:absolute;
left:15px;
top:10px;
bottom:10px;
width:1px;
background:rgba(15,23,42,.12);
}
.ts-mail-thread-footer{
margin-top:16px;
padding-top:14px;
border-top:1px solid rgba(15,23,42,.08);
}
.ts-mail-thread-step{
display:grid;
grid-template-columns:32px minmax(0,1fr);
gap:10px;
align-items:flex-start;
min-width:0;
padding:0;
border-radius:0;
background:transparent;
border:none;
position:relative;
}
.ts-mail-thread-step.is-unread{
border-color:transparent;
}
.ts-mail-thread-step + .ts-mail-thread-step{
margin-top:14px;
padding-top:14px;
border-top:1px solid rgba(15,23,42,.07);
}
.ts-mail-thread-step-icon{
width:32px;
height:32px;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
color:#fff;
background:#1f2937;
position:relative;
z-index:1;
box-shadow:0 0 0 5px #ffffff;
}
.ts-mail-thread-step-icon.tone-alert{background:#d0634b;}
.ts-mail-thread-step-icon.tone-warning,
.ts-mail-thread-step-icon.tone-unread{background:#c78828;}
.ts-mail-thread-step-icon.tone-info{background:#3578c8;}
.ts-mail-thread-step-icon.tone-success{background:#2f8f5b;}
.ts-mail-thread-step-icon.tone-neutral{background:#1f2937;}
.ts-mail-thread-step-copy{
min-width:0;
}
.ts-mail-thread-step-copy strong{
display:block;
font-size:13px;
line-height:1.35;
font-weight:800;
color:var(--ts-text-strong);
}
.ts-mail-thread-step-copy span{
display:block;
margin-top:3px;
font-size:11px;
line-height:1.5;
color:var(--ts-muted);
}
.ts-mail-thread-step-copy p{
margin:6px 0 0;
font-size:12px;
line-height:1.55;
color:var(--ts-muted);
}
.ts-mail-feed-row.tone-alert{border-color:rgba(197,91,69,.23);}
.ts-mail-feed-row.tone-warning{border-color:rgba(185,122,30,.22);}
.ts-mail-feed-row.tone-unread{border-color:rgba(185,122,30,.22);}
.ts-mail-feed-row.tone-info{border-color:rgba(47,110,169,.22);}
.ts-mail-feed-row.tone-success{border-color:rgba(29,139,99,.22);}
.ts-mail-feed-row-main{
display:grid;
grid-template-columns:40px minmax(0,1fr);
gap:14px;
min-width:0;
}
.ts-mail-feed-row-icon{
width:38px;
height:38px;
border-radius:999px;
display:flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
font-size:14px;
color:#fff;
box-shadow:none;
}
.ts-mail-feed-row-icon.tone-alert{background:#d0634b;}
.ts-mail-feed-row-icon.tone-warning,
.ts-mail-feed-row-icon.tone-unread{background:#c78828;}
.ts-mail-feed-row-icon.tone-info{background:#3578c8;}
.ts-mail-feed-row-icon.tone-success{background:#2f8f5b;}
.ts-mail-feed-row-icon.tone-neutral{background:#1f2937;}
.ts-mail-feed-row-copy{
min-width:0;
}
.ts-mail-feed-row-topline{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:10px;
}
.ts-mail-feed-row-badges{
display:flex;
flex-wrap:wrap;
gap:6px;
}
.ts-mail-feed-row-relative{
white-space:nowrap;
font-size:11px;
line-height:1.45;
color:var(--ts-muted);
}
.ts-mail-feed-row-title{
margin:0;
font-size:16px;
line-height:1.28;
font-weight:800;
color:var(--ts-text-strong);
}
.ts-mail-feed-row-text{
margin:7px 0 0;
font-size:13px;
line-height:1.6;
color:var(--ts-muted);
max-width:75ch;
}
.ts-mail-feed-row-steps{
grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
margin-top:12px;
}
.ts-mail-feed-row-meta{
display:flex;
flex-direction:column;
align-items:stretch;
gap:10px;
min-width:0;
width:100%;
justify-self:stretch;
}
.ts-mail-feed-row-date{
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:8px;
align-items:center;
min-width:0;
width:100%;
min-height:64px;
padding:10px 12px;
border-radius:14px;
background:var(--ts-surface-soft);
border:1px solid rgba(23,50,77,.08);
color:var(--ts-muted);
}
.ts-mail-feed-row-date i{
font-size:14px;
color:var(--ts-accent);
}
.ts-mail-feed-row-date strong{
display:block;
font-size:12px;
line-height:1.35;
font-weight:800;
color:var(--ts-text-strong);
}
.ts-mail-feed-row-date span{
display:block;
margin-top:2px;
font-size:11px;
line-height:1.5;
}
.ts-mail-feed-row-meta .ts-mail-feed-row-action{
width:100%;
justify-content:space-between;
}
.ts-ui-badge{
display:inline-flex;
align-items:center;
gap:6px;
min-height:24px;
padding:0 9px;
border-radius:999px;
font-size:9px;
line-height:1;
font-weight:800;
border:1px solid transparent;
white-space:nowrap;
}
.ts-ui-badge i{
font-size:9px;
}
.ts-ui-badge.is-success{background:rgba(29,139,99,.09); color:#245f46; border-color:rgba(29,139,99,.14);}
.ts-ui-badge.is-info{background:rgba(47,110,169,.09); color:#31587f; border-color:rgba(47,110,169,.14);}
.ts-ui-badge.is-warning{background:rgba(185,122,30,.1); color:#7d6025; border-color:rgba(185,122,30,.14);}
.ts-ui-badge.is-unread{background:rgba(185,122,30,.1); color:#7d6025; border-color:rgba(185,122,30,.14);}
.ts-ui-badge.is-alert{background:rgba(197,91,69,.1); color:#8d4c40; border-color:rgba(197,91,69,.14);}
.ts-ui-badge.is-neutral{background:rgba(23,50,77,.05); color:#4d6077; border-color:rgba(23,50,77,.08);}
.ts-mail-card.is-read .ts-mail-card-icon,
.ts-mail-thread.is-read .ts-mail-thread-step-icon,
.ts-mail-feed-row.is-read .ts-mail-feed-row-icon{
opacity:.72;
transform:scale(.96);
}
.ts-mail-card.is-read .ts-mail-step-icon,
.ts-mail-feed-row.is-read .ts-mail-step-icon,
.ts-mail-thread.is-read .ts-mail-feed-row-date i,
.ts-mail-feed-row.is-read .ts-mail-feed-row-date i{
opacity:.72;
}
.ts-mail-card.is-read .ts-mail-card-title,
.ts-mail-thread.is-read .ts-mail-feed-row-title,
.ts-mail-feed-row.is-read .ts-mail-feed-row-title{
color:#3f4b59;
}
.ts-mail-card.is-read .ts-mail-card-order,
.ts-mail-card.is-read .ts-mail-card-time,
.ts-mail-card.is-read .ts-mail-card-excerpt,
.ts-mail-card.is-read .ts-mail-card-footnote,
.ts-mail-thread.is-read .ts-mail-feed-row-relative,
.ts-mail-thread.is-read .ts-mail-feed-row-text,
.ts-mail-thread.is-read .ts-mail-thread-step-copy span,
.ts-mail-thread.is-read .ts-mail-thread-step-copy p,
.ts-mail-feed-row.is-read .ts-mail-feed-row-relative,
.ts-mail-feed-row.is-read .ts-mail-feed-row-text{
color:#7b8592;
}
.ts-mail-card.is-read .ts-mail-step,
.ts-mail-thread.is-read .ts-mail-thread-step,
.ts-mail-thread.is-read .ts-mail-feed-row-date,
.ts-mail-feed-row.is-read .ts-mail-step,
.ts-mail-feed-row.is-read .ts-mail-feed-row-date{
background:rgba(248,249,252,.94);
border-color:rgba(23,50,77,.06);
}
.ts-mail-thread.is-read .ts-mail-thread-step{
background:transparent;
border-color:transparent;
}
.ts-mail-thread.is-read .ts-mail-thread-step + .ts-mail-thread-step{
border-top-color:rgba(23,50,77,.06);
}
.ts-mail-card.is-read .ts-mail-step-copy strong,
.ts-mail-thread.is-read .ts-mail-thread-step-copy strong,
.ts-mail-thread.is-read .ts-mail-feed-row-date strong,
.ts-mail-feed-row.is-read .ts-mail-step-copy strong,
.ts-mail-feed-row.is-read .ts-mail-feed-row-date strong{
color:#4a5563;
}
.ts-mail-card.is-read .ts-mail-step-copy span,
.ts-mail-thread.is-read .ts-mail-feed-row-date span,
.ts-mail-feed-row.is-read .ts-mail-step-copy span,
.ts-mail-feed-row.is-read .ts-mail-feed-row-date span{
color:#7d8793;
}
.ts-mail-card.is-read .ts-ui-badge,
.ts-mail-thread.is-read .ts-ui-badge,
.ts-mail-feed-row.is-read .ts-ui-badge{
opacity:.72;
}
.ts-mail-card.is-read .ts-mail-card-cta,
.ts-mail-thread.is-read .ts-mail-feed-row-action,
.ts-mail-feed-row.is-read .ts-mail-feed-row-action{
background:rgba(34,48,68,.08);
color:#425164;
border:1px solid rgba(23,50,77,.08);
box-shadow:none;
}
.ts-mail-card.is-read .ts-mail-card-cta:hover,
.ts-mail-thread.is-read .ts-mail-feed-row-action:hover,
.ts-mail-feed-row.is-read .ts-mail-feed-row-action:hover{
background:rgba(34,48,68,.12);
color:#223044;
box-shadow:0 8px 18px rgba(15,23,42,.05);
}
.ts-mail-empty-state{
border-radius:24px;
padding:28px 24px;
text-align:center;
background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,249,252,.94));
}
.ts-mail-empty-inner{
display:grid;
grid-template-columns:minmax(0,1fr);
gap:16px;
align-items:center;
justify-items:center;
}
.ts-mail-empty-icon{
width:52px;
height:52px;
border-radius:16px;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
color:#fff;
background:linear-gradient(135deg, #1d3f63, #17324d);
box-shadow:0 10px 22px rgba(23,50,77,.12);
}
.ts-mail-empty-state strong{
display:block;
font-size:22px;
line-height:1.15;
font-weight:800;
color:var(--ts-text-strong);
}
.ts-mail-empty-state p{
margin:8px auto 0;
font-size:13px;
line-height:1.6;
color:var(--ts-muted);
max-width:560px;
}
.ts-mail-empty-actions{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
margin-top:20px;
}
.ts-mail-load-wrap{
display:flex;
justify-content:center;
}
.ts-mail-feed-row.is-hidden,
.ts-mail-thread.is-hidden{
display:none;
}
@media (max-width:1420px){
.ts-notification-shell{
width:min(100%, calc(100vw - 24px));
}
.ts-mail-hero-row{
grid-template-columns:minmax(0,1.18fr) minmax(300px,.92fr);
}
.ts-mail-filter-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media (max-width:1240px){
.ts-notification-shell{
width:min(100%, calc(100vw - 20px));
padding:16px 0 32px;
}
.ts-mail-hero-row{
grid-template-columns:1fr;
gap:18px;
}
.ts-mail-summary-grid{
grid-template-columns:repeat(4,minmax(0,1fr));
}
.ts-mail-focus-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
}
.ts-mail-control-grid{
grid-template-columns:1fr;
}
.ts-mail-filter-shell{
width:min(620px, calc(100vw - 40px));
max-width:none;
}
.ts-mail-feed-row{
grid-template-columns:40px minmax(0,1fr);
align-items:flex-start;
}
.ts-mail-feed-row-meta{
grid-column:2;
justify-self:start;
width:100%;
flex-direction:row;
flex-wrap:wrap;
align-items:stretch;
}
.ts-mail-feed-row-date{
width:auto;
min-width:168px;
}
.ts-mail-feed-row-meta .ts-mail-feed-row-action{
width:auto;
min-width:200px;
}
.ts-mail-thread-head{
grid-template-columns:1fr;
}
}
@media (max-width:900px){
.ts-notification-shell{
width:min(100%, calc(100vw - 16px));
padding:12px 0 24px;
}
.ts-mail-hero-main,
.ts-mail-section{
padding:20px 18px;
}
.ts-mail-title{
font-size:28px;
max-width:none;
}
.ts-mail-summary-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.ts-mail-focus-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.ts-mail-section-head,
.ts-mail-feed-row{
grid-template-columns:1fr;
display:grid;
}
.ts-mail-focus-tools,
.ts-mail-toolbar-side,
.ts-mail-feed-row-meta{
align-items:flex-start;
min-width:0;
}
.ts-mail-focus-tools{
grid-template-columns:1fr;
width:100%;
}
.ts-mail-focus-tools .ts-mail-toolbar-badges{
justify-content:flex-start;
margin-right:0;
}
.ts-mail-toolbar-control-row,
.ts-mail-toolbar-actions{
justify-content:flex-start;
}
.ts-mail-toolbar-control-row{
flex-wrap:wrap;
width:100%;
}
.ts-mail-filter-dock,
.ts-mail-filter-summary{
align-items:flex-start;
max-width:none;
}
.ts-mail-filter-summary-tags{
justify-content:flex-start;
}
.ts-mail-filter-shell{
left:0;
right:auto;
width:min(560px, calc(100vw - 32px));
max-width:none;
transform-origin:top left;
transform:translate3d(-12px, -4px, 0) scale(.985);
}
.ts-mail-focus-shell.is-filter-open .ts-mail-filter-shell{
transform:translate3d(0, 0, 0) scale(1);
}
.ts-mail-toolbar-menu-panel{
left:0;
right:auto;
}
.ts-mail-filter-section-grid{
grid-template-columns:1fr;
}
.ts-mail-filter-grid{
grid-template-columns:1fr;
}
.ts-mail-featured-grid{
grid-template-columns:1fr;
}
.ts-mail-feed-toolbar{
grid-template-columns:1fr;
align-items:flex-start;
}
.ts-mail-feed-bulk-form,
.ts-mail-feed-bulk-actions{
width:100%;
justify-content:flex-start;
}
.ts-mail-feed-row{
grid-template-columns:40px minmax(0,1fr);
gap:14px;
}
.ts-mail-feed-row-select{
padding-top:2px;
}
.ts-mail-feed-row-main{
grid-template-columns:40px minmax(0,1fr);
}
.ts-mail-feed-row-steps{
grid-template-columns:1fr;
}
.ts-mail-feed-row-meta{
grid-column:2;
flex-direction:column;
align-items:stretch;
}
.ts-mail-feed-row-date,
.ts-mail-feed-row-meta .ts-mail-feed-row-action{
width:100%;
min-width:0;
}
.ts-mail-feed-row-topline{
flex-direction:column;
align-items:flex-start;
}
.ts-mail-thread-topline,
.ts-mail-thread-footer{
flex-direction:column;
align-items:flex-start;
}
.ts-mail-thread{
grid-template-columns:44px minmax(0,1fr);
}
.ts-mail-thread-footer .ts-mail-feed-row-action{
width:100%;
justify-content:space-between;
}
}
@media (max-width:767px){
body.ts-mail-filter-open{
overflow:hidden;
}
.ts-mail-summary-grid{
grid-template-columns:1fr;
}
.ts-mail-focus-shell{
padding:14px;
border-radius:22px;
border:1px solid var(--ts-border);
box-shadow:var(--ts-shadow-soft);
background:var(--ts-surface);
}
.ts-mail-focus-top{
gap:12px;
}
.ts-mail-focus-grid{
display:flex;
flex-wrap:nowrap;
overflow-x:auto;
gap:8px;
padding-bottom:6px;
scroll-snap-type:x proximity;
border-radius:0;
background:transparent;
border:none;
box-shadow:none;
padding:0 2px 6px 0;
}
.ts-mail-focus-card{
min-width:220px;
flex:0 0 220px;
scroll-snap-align:start;
}
.ts-mail-hero-main,
.ts-mail-toolbar,
.ts-mail-section,
.ts-mail-card,
.ts-mail-flash,
.ts-mail-thread,
.ts-mail-feed-row,
.ts-mail-empty-state{
border-radius:22px;
}
.ts-mail-title{
font-size:26px;
}
.ts-mail-toolbar-title{
font-size:20px;
}
.ts-mail-section-title{
font-size:17px;
}
.ts-mail-card-title,
.ts-mail-feed-row-title{
font-size:15px;
}
.ts-mail-filter-dock{
width:100%;
}
.ts-mail-filter-toggle{
width:100%;
justify-content:space-between;
}
.ts-mail-filter-summary{
width:100%;
}
.ts-mail-toolbar-badges{
width:100%;
margin-right:0;
}
.ts-mail-feed-toolbar{
padding:14px 16px;
}
.ts-mail-feed-bulk-actions{
display:grid;
grid-template-columns:1fr;
width:100%;
}
.ts-mail-feed-bulk-actions > .ts-mail-secondary-link,
.ts-mail-feed-bulk-actions > .ts-mail-card-cta{
width:100%;
justify-content:center;
}
.ts-mail-toolbar-actions{
display:grid;
grid-template-columns:1fr;
width:100%;
}
.ts-mail-toolbar-menu{
width:100%;
}
.ts-mail-toolbar-actions > .ts-mail-secondary-link{
width:100%;
justify-content:center;
}
.ts-mail-toolbar-menu summary{
width:100%;
}
.ts-mail-toolbar-menu-panel{
position:static;
min-width:0;
margin-top:8px;
width:100%;
box-shadow:none;
}
.ts-mail-filter-shell{
position:fixed;
inset:0;
width:auto;
max-width:none;
z-index:90;
padding:0;
opacity:1;
transform:none;
transition:none;
}
.ts-mail-filter-overlay{
display:block;
position:absolute;
inset:0;
border:none;
background:rgba(15,23,42,.28);
cursor:pointer;
}
.ts-mail-filter-panel{
margin-top:auto;
width:100%;
max-height:84vh;
overflow:auto;
border-radius:26px 26px 0 0;
padding:20px 16px 24px;
box-shadow:0 -10px 36px rgba(15,23,42,.16);
}
.ts-mail-filter-choice-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
}
.ts-mail-filter-choice span{
width:100%;
}
.ts-mail-filter-range{
grid-template-columns:1fr;
}
.ts-mail-filter-footer{
flex-direction:column-reverse;
align-items:stretch;
}
.ts-mail-filter-apply{
width:100%;
}
.ts-mail-filter-reset-link{
justify-content:center;
}
.ts-mail-filter-grid{
grid-template-columns:1fr;
}
.ts-mail-empty-state{
padding:28px 20px;
}
}
/* =========================================================
TS HEADER — DROPDOWN INTERACTION POLISH
Smart hover handoff between sibling dropdowns
========================================================= */
@media (min-width: 1200px){
.desktop-header-area .ts-hover-dropdown{
z-index: 1 !important;
}
.desktop-header-area .ts-hover-dropdown.ts-hover-open,
.desktop-header-area .ts-hover-dropdown.ts-hover-active{
z-index: 1300 !important;
}
.desktop-header-area .ts-hover-dropdown.ts-close-instant > .dropdown-menu{
transition: none !important;
}
.desktop-header-area .ts-hover-dropdown > .dropdown-menu{
transition:
opacity .14s ease,
transform .14s ease,
visibility 0s linear .14s !important;
will-change: opacity, transform;
}
.desktop-header-area .ts-hover-dropdown:hover > .dropdown-menu,
.desktop-header-area .ts-hover-dropdown.ts-hover-open > .dropdown-menu,
.desktop-header-area .ts-hover-dropdown:focus-within > .dropdown-menu,
.desktop-header-area .ts-hover-dropdown > .dropdown-menu.show{
transition-delay: 0s !important;
}
}
/* =========================================================
TS CART DROPDOWN - REMOVE BUTTON REFINED
X ve çerçeveyi daha kibar yapar
Paste to END of style.css
========================================================= */
.dropdown-cart-itembox-trash{
width: 32px !important;
min-width: 32px !important;
flex: 0 0 32px !important;
text-align: center !important;
}
.dropdown-cart-itembox-trash a,
.dropdown-cart-itembox-trash a.cart-item-delete{
width: 22px !important;
height: 22px !important;
min-width: 22px !important;
min-height: 22px !important;
margin: 0 auto !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
border-radius: 999px !important;
text-decoration: none !important;
background: #f7e8e8 !important;
border: 1px solid #cf9a9a !important;
box-shadow: none !important;
opacity: 1 !important;
overflow: hidden !important;
transition: background-color .18s ease, border-color .18s ease, transform .18s ease !important;
}
.dropdown-cart-itembox-trash i,
.dropdown-cart-itembox-trash a i,
.dropdown-cart-itembox-trash .las,
.dropdown-cart-itembox-trash .la-times{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 10px !important;
height: 10px !important;
margin: 0 !important;
padding: 0 !important;
font-size: 10px !important;
line-height: 1 !important;
font-weight: 600 !important;
color: #9f3a3a !important;
-webkit-text-fill-color: #9f3a3a !important;
text-rendering: geometricPrecision !important;
-webkit-font-smoothing: antialiased !important;
}
.dropdown-cart-itembox-trash a:hover,
.dropdown-cart-itembox-trash a.cart-item-delete:hover{
background: #f2dede !important;
border-color: #bb7d7d !important;
transform: translateY(-1px);
}
.dropdown-cart-itembox-trash a:hover i,
.dropdown-cart-itembox-trash a:hover .las,
.dropdown-cart-itembox-trash a:hover .la-times{
color: #7f1f1f !important;
-webkit-text-fill-color: #7f1f1f !important;
}
/* CART DROPDOWN - sadece X ikonunu küçült */
.desktop-header-area .dropdown-cart-itembox-trash i,
.desktop-header-area .dropdown-cart-itembox-trash a i,
.desktop-header-area .dropdown-cart-itembox-trash .las,
.desktop-header-area .dropdown-cart-itembox-trash .la-times{
font-size: 12px !important;
line-height: 1 !important;
color: #9f3a3a !important;
-webkit-text-fill-color: #9f3a3a !important;
}
/* CART DROPDOWN - X ikonunu gerçekten küçült */
.dropdown-cart-itembox-trash i.las,
.dropdown-cart-itembox-trash i.la-times,
.dropdown-cart-itembox-trash a i.las,
.dropdown-cart-itembox-trash a i.la-times{
font-size: 10px !important;
line-height: 1 !important;
width: 10px !important;
height: 10px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: #a13f3f !important;
-webkit-text-fill-color: #a13f3f !important;
margin: 0 !important;
padding: 0 !important;
}
.dropdown-cart-itembox-trash i.las::before,
.dropdown-cart-itembox-trash i.la-times::before,
.dropdown-cart-itembox-trash a i.las::before,
.dropdown-cart-itembox-trash a i.la-times::before{
font-size: 10px !important;
line-height: 1 !important;
}
/* =========================================================
STOREFRONT HEADER - STABILITY LAYER
Cleans conflicting experimental header overrides on desktop
========================================================= */
@media (min-width: 1200px){
.desktop-header-area,
.desktop-header-area .header-desktop-main-div,
.desktop-header-area .header-desktop-main-div-in,
.desktop-header-area .header-desktop-right-area,
.desktop-header-area .header-desktop-navbutton-box,
.desktop-header-area .header-desktop-call,
.desktop-header-area .top-level-menu-main-div{
overflow: visible !important;
}
.desktop-header-area{
position: relative;
z-index: 40;
}
.desktop-header-area .header-desktop-main-div-in{
width: 100% !important;
max-width: 1400px !important;
margin: 0 auto !important;
padding: 0 24px !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
gap: 24px !important;
}
.desktop-header-area .header-desktop-logo-div{
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
margin: 0 6px 0 0 !important;
}
.desktop-header-area .header-desktop-logo-div a{
display: inline-flex !important;
align-items: center !important;
}
.desktop-header-area .header-desktop-logo-div img{
display: block !important;
width: auto !important;
height: 56px !important;
max-height: 56px !important;
transform: none !important;
}
.desktop-header-area .header-desktop-right-area{
flex: 1 1 auto !important;
min-width: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 0 !important;
}
.desktop-header-area .header-desktop-search1{
flex: 1 1 360px !important;
min-width: 280px !important;
max-width: 420px !important;
margin: 0 auto 0 0 !important;
}
.desktop-header-area .header-desktop-search1 form{
width: 100% !important;
}
.desktop-header-area .header-desktop-search1 input[type="text"],
.desktop-header-area .header-desktop-search1 input[type="search"]{
width: 100% !important;
box-sizing: border-box !important;
}
.desktop-header-area .header-desktop-right-area > .header-desktop-call,
.desktop-header-area .header-desktop-right-area > .header-desktop-navbutton-box{
flex: 0 0 auto !important;
min-width: 68px !important;
margin: 0 0 0 12px !important;
}
.desktop-header-area .header-desktop-right-area > .header-desktop-call:first-child,
.desktop-header-area .header-desktop-right-area > .header-desktop-navbutton-box:first-child{
margin-left: 0 !important;
}
.desktop-header-area .header-desktop-navbutton-box{
position: relative !important;
}
.desktop-header-area .header-desktop-navbutton-box > a,
.desktop-header-area .header-desktop-call > a{
position: relative !important;
min-height: 66px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
text-align: center !important;
text-decoration: none !important;
white-space: nowrap !important;
}
.desktop-header-area .header-desktop-navbutton-box i,
.desktop-header-area .header-desktop-call i{
margin: 0 !important;
font-size: 21px !important;
line-height: 1 !important;
}
.desktop-header-area .header-desktop-navbutton-box-t,
.desktop-header-area .header-desktop-call .header-desktop-navbutton-box-t,
.desktop-header-area .header-desktop-call-t-1{
margin: 0 !important;
font-size: 12px !important;
line-height: 1.25 !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
white-space: nowrap !important;
}
.desktop-header-area .header-desktop-call,
.desktop-header-area .header-desktop-call > a,
.desktop-header-area .header-desktop-call .header-desktop-call-i,
.desktop-header-area .header-desktop-call .header-desktop-call-t{
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
gap: 0 !important;
}
.desktop-header-area .header-desktop-call{
margin-right: 0 !important;
}
.desktop-header-area .header-desktop-call .header-desktop-call-i{
margin: 0 0 6px !important;
}
.desktop-header-area .header-desktop-call .header-desktop-call-t-2,
.desktop-header-area .header-desktop-call .header-call-number{
display: none !important;
}
.desktop-header-area .header-desktop-navbutton-box-count,
.desktop-header-area .header-desktop-navbutton-box-count-cart{
top: 2px !important;
left: 50% !important;
right: auto !important;
min-width: 18px !important;
height: 18px !important;
padding: 0 5px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transform: translateX(12px) !important;
font-size: 9px !important;
font-weight: 700 !important;
line-height: 1 !important;
}
.desktop-header-area .header-desktop-navbutton-box.ts-lang-wrap,
.desktop-header-area .header-desktop-navbutton-box.ts-currency-wrap,
.desktop-header-area .header-lang-switch,
.desktop-header-area .ts-lang-wrap,
.desktop-header-area .ts-hover-dropdown{
position: relative !important;
}
.desktop-header-area .ts-hover-dropdown > .dropdown-menu,
.desktop-header-area .header-lang-switch .dropdown-menu.currency-drop,
.desktop-header-area .header-lang-switch .dropdown-menu.language-drop,
.desktop-header-area .header-lang-switch .header-lang-dropdown,
.desktop-header-area .header-lang-switch .header-lang-strip,
.desktop-header-area .ts-lang-wrap .ts-lang-menu,
.desktop-header-area .ts-lang-wrap .ts-lang-pill{
display: block !important;
top: calc(100% + 12px) !important;
right: 0 !important;
left: auto !important;
margin-top: 0 !important;
min-width: 214px !important;
max-width: min(360px, calc(100vw - 24px)) !important;
padding: 10px 12px !important;
border: 1px solid rgba(15, 23, 42, 0.08) !important;
border-radius: 18px !important;
background: #ffffff !important;
box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12) !important;
transform: translate3d(0, 8px, 0) !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
white-space: normal !important;
z-index: 1300 !important;
}
.desktop-header-area .ts-hover-dropdown:hover > .dropdown-menu,
.desktop-header-area .ts-hover-dropdown.ts-hover-open > .dropdown-menu,
.desktop-header-area .ts-hover-dropdown:focus-within > .dropdown-menu,
.desktop-header-area .ts-hover-dropdown > .dropdown-menu.show,
.desktop-header-area .header-lang-switch:hover .dropdown-menu.currency-drop,
.desktop-header-area .header-lang-switch:hover .dropdown-menu.language-drop,
.desktop-header-area .header-lang-switch:hover .header-lang-dropdown,
.desktop-header-area .header-lang-switch:hover .header-lang-strip,
.desktop-header-area .ts-lang-wrap:hover .ts-lang-menu,
.desktop-header-area .ts-lang-wrap:hover .ts-lang-pill{
display: block !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translate3d(0, 0, 0) !important;
}
.desktop-header-area .ts-hover-dropdown > .dropdown-menu::before,
.desktop-header-area .header-lang-switch .dropdown-menu.currency-drop::before,
.desktop-header-area .header-lang-switch .dropdown-menu.language-drop::before,
.desktop-header-area .header-lang-switch .header-lang-dropdown::before,
.desktop-header-area .header-lang-switch .header-lang-strip::before,
.desktop-header-area .ts-lang-wrap .ts-lang-menu::before,
.desktop-header-area .ts-lang-wrap .ts-lang-pill::before{
content: "" !important;
position: absolute !important;
top: -7px !important;
right: 20px !important;
width: 14px !important;
height: 14px !important;
background: #ffffff !important;
border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
border-left: 1px solid rgba(15, 23, 42, 0.08) !important;
transform: rotate(45deg) !important;
}
.desktop-header-area .dropdown-menu.user-drop{
width: 280px !important;
}
.desktop-header-area .dropdown-menu.bell-drop{
width: min(360px, calc(100vw - 24px)) !important;
}
.desktop-header-area .dropdown-menu.cart-drop{
width: min(392px, calc(100vw - 24px)) !important;
}
.desktop-header-area .dropdown-menu.favorites-drop{
width: min(240px, calc(100vw - 24px)) !important;
}
.desktop-header-area .dropdown-menu.currency-drop a,
.desktop-header-area .dropdown-menu.language-drop a,
.desktop-header-area .header-lang-dropdown .header-lang-item,
.desktop-header-area .header-lang-dropdown .language-change,
.desktop-header-area .header-lang-strip .header-lang-item,
.desktop-header-area .header-lang-strip .language-change,
.desktop-header-area .ts-lang-menu .language-change,
.desktop-header-area .ts-lang-pill .language-change,
.desktop-header-area .header-choice-item{
width: 100% !important;
min-height: 44px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
margin: 0 !important;
padding: 10px 0 !important;
border: 0 !important;
border-bottom: 1px solid #edf1f5 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
color: #1f2b44 !important;
text-decoration: none !important;
transform: none !important;
white-space: nowrap !important;
}
.desktop-header-area .dropdown-menu.currency-drop a:last-child,
.desktop-header-area .dropdown-menu.language-drop a:last-child,
.desktop-header-area .header-lang-dropdown .header-lang-item:last-child,
.desktop-header-area .header-lang-dropdown .language-change:last-child,
.desktop-header-area .header-lang-strip .header-lang-item:last-child,
.desktop-header-area .header-lang-strip .language-change:last-child,
.desktop-header-area .ts-lang-menu .language-change:last-child,
.desktop-header-area .ts-lang-pill .language-change:last-child,
.desktop-header-area .header-choice-item:last-child{
border-bottom: 0 !important;
}
.desktop-header-area .dropdown-menu.currency-drop a:hover,
.desktop-header-area .dropdown-menu.language-drop a:hover,
.desktop-header-area .dropdown-menu.currency-drop a.active,
.desktop-header-area .dropdown-menu.language-drop a.active,
.desktop-header-area .header-lang-dropdown .header-lang-item:hover,
.desktop-header-area .header-lang-dropdown .header-lang-item.active,
.desktop-header-area .header-lang-dropdown .language-change:hover,
.desktop-header-area .header-lang-dropdown .language-change.active,
.desktop-header-area .header-lang-strip .header-lang-item:hover,
.desktop-header-area .header-lang-strip .header-lang-item.active,
.desktop-header-area .header-lang-strip .language-change:hover,
.desktop-header-area .header-lang-strip .language-change.active,
.desktop-header-area .ts-lang-menu .language-change:hover,
.desktop-header-area .ts-lang-menu .language-change.active,
.desktop-header-area .ts-lang-pill .language-change:hover,
.desktop-header-area .ts-lang-pill .language-change.active,
.desktop-header-area .ts-lang-pill .language-change.is-active,
.desktop-header-area .header-choice-item:hover,
.desktop-header-area .header-choice-item.is-active{
color: #1f2b44 !important;
opacity: 1 !important;
pointer-events: auto !important;
}
.desktop-header-area .dropdown-menu.currency-drop .lang-label,
.desktop-header-area .dropdown-menu.language-drop .lang-label,
.desktop-header-area .dropdown-menu.currency-drop .header-lang-label,
.desktop-header-area .dropdown-menu.language-drop .header-lang-label,
.desktop-header-area .header-lang-dropdown .lang-label,
.desktop-header-area .header-lang-dropdown .header-lang-label,
.desktop-header-area .header-lang-strip .lang-label,
.desktop-header-area .header-lang-strip .header-lang-label,
.desktop-header-area .ts-lang-menu .lang-label,
.desktop-header-area .ts-lang-menu .header-lang-label,
.desktop-header-area .ts-lang-pill .lang-label,
.desktop-header-area .ts-lang-pill .header-lang-label,
.desktop-header-area .header-choice-label{
display: block !important;
font-size: 13px !important;
line-height: 1.35 !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
}
.desktop-header-area .dropdown-menu.currency-drop [class^="flag-icon-"],
.desktop-header-area .dropdown-menu.currency-drop [class*=" flag-icon-"],
.desktop-header-area .dropdown-menu.language-drop [class^="flag-icon-"],
.desktop-header-area .dropdown-menu.language-drop [class*=" flag-icon-"],
.desktop-header-area .header-lang-dropdown .header-lang-flag,
.desktop-header-area .header-lang-strip .header-lang-flag,
.desktop-header-area .ts-lang-menu .header-lang-flag,
.desktop-header-area .ts-lang-pill [class^="flag-icon-"],
.desktop-header-area .ts-lang-pill [class*=" flag-icon-"],
.desktop-header-area .header-choice-flag,
.desktop-header-area .header-choice-symbol{
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
flex: 0 0 30px !important;
border-radius: 10px !important;
overflow: hidden !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
}
.desktop-header-area .header-choice-symbol{
background: #f7f8fa !important;
color: #8a6839 !important;
}
.desktop-header-area .header-choice-check{
margin-left: auto !important;
opacity: 1 !important;
}
.desktop-header-area .header-desktop-navbutton-box.ts-lang-wrap > a .ts-lang-flag-main,
.desktop-header-area .header-desktop-navbutton-box.ts-lang-wrap > a .header-lang-flag-main,
.desktop-header-area .header-desktop-navbutton-box.ts-lang-wrap > a .lang-flag-round{
width: 32px !important;
height: 32px !important;
margin: 0 auto !important;
border-radius: 50% !important;
overflow: hidden !important;
box-shadow: none !important;
}
.desktop-header-area .dropdown-bell-list-box-baslik,
.desktop-header-area .dropdown-bell-list-box-s{
white-space: normal !important;
}
.desktop-header-area .dropdown-bell-list-box-baslik{
padding-right: 78px !important;
}
.desktop-header-area .dropdown-bell-list-box-date{
white-space: nowrap !important;
}
}
@media (min-width: 1200px) and (max-width: 1439.98px){
.desktop-header-area .header-desktop-main-div-in{
padding: 0 20px !important;
gap: 18px !important;
}
.desktop-header-area .header-desktop-logo-div img{
height: 52px !important;
max-height: 52px !important;
}
.desktop-header-area .header-desktop-search1{
max-width: 380px !important;
min-width: 240px !important;
}
.desktop-header-area .header-desktop-right-area > .header-desktop-call,
.desktop-header-area .header-desktop-right-area > .header-desktop-navbutton-box{
min-width: 62px !important;
margin-left: 10px !important;
}
.desktop-header-area .header-desktop-navbutton-box-t,
.desktop-header-area .header-desktop-call .header-desktop-navbutton-box-t,
.desktop-header-area .header-desktop-call-t-1{
font-size: 11px !important;
}
}
/* =========================================================
STOREFRONT HEADER - DROPDOWN ISOLATION
Utility dropdowns and category flyouts should not stay
active together on desktop.
========================================================= */
@media (min-width: 1200px){
.desktop-header-area{
isolation: isolate;
}
.desktop-header-area .header-desktop-main-div{
position: relative;
z-index: 80 !important;
}
.desktop-header-area .top-level-menu-main-div{
z-index: 70 !important;
}
.desktop-header-area .top-level-menu > li.dropdown-sub-have > ul:not(.sablon2-level-menu),
.desktop-header-area .top-level-menu > li.dropdown-sub-have > ul.sablon2-level-menu{
z-index: 75 !important;
}
.desktop-header-area .header-desktop-right-area .ts-hover-dropdown > .dropdown-menu,
.desktop-header-area .header-desktop-right-area .header-lang-switch .dropdown-menu,
.desktop-header-area .header-desktop-right-area .header-lang-switch .header-lang-dropdown,
.desktop-header-area .header-desktop-right-area .header-lang-switch .header-lang-strip,
.desktop-header-area .header-desktop-right-area .ts-lang-wrap .ts-lang-menu,
.desktop-header-area .header-desktop-right-area .ts-lang-wrap .ts-lang-pill{
z-index: 1200 !important;
}
.desktop-header-area:has(.header-desktop-right-area .ts-hover-dropdown:hover) .top-level-menu-main-div,
.desktop-header-area:has(.header-desktop-right-area .ts-hover-dropdown:focus-within) .top-level-menu-main-div,
.desktop-header-area:has(.header-desktop-right-area .ts-hover-dropdown.ts-hover-open) .top-level-menu-main-div,
.desktop-header-area:has(.header-desktop-right-area .ts-hover-dropdown.ts-hover-active) .top-level-menu-main-div,
.desktop-header-area:has(.header-desktop-right-area .header-lang-switch:hover) .top-level-menu-main-div,
.desktop-header-area:has(.header-desktop-right-area .header-lang-switch:focus-within) .top-level-menu-main-div,
.desktop-header-area:has(.header-desktop-right-area .ts-lang-wrap:hover) .top-level-menu-main-div,
.desktop-header-area:has(.header-desktop-right-area .ts-lang-wrap:focus-within) .top-level-menu-main-div{
pointer-events: none !important;
}
.desktop-header-area:has(.header-desktop-right-area .ts-hover-dropdown:hover) .top-level-menu > li.dropdown-sub-have > ul:not(.sablon2-level-menu),
.desktop-header-area:has(.header-desktop-right-area .ts-hover-dropdown:focus-within) .top-level-menu > li.dropdown-sub-have > ul:not(.sablon2-level-menu),
.desktop-header-area:has(.header-desktop-right-area .ts-hover-dropdown.ts-hover-open) .top-level-menu > li.dropdown-sub-have > ul:not(.sablon2-level-menu),
.desktop-header-area:has(.header-desktop-right-area .ts-hover-dropdown.ts-hover-active) .top-level-menu > li.dropdown-sub-have > ul:not(.sablon2-level-menu),
.desktop-header-area:has(.header-desktop-right-area .header-lang-switch:hover) .top-level-menu > li.dropdown-sub-have > ul:not(.sablon2-level-menu),
.desktop-header-area:has(.header-desktop-right-area .header-lang-switch:focus-within) .top-level-menu > li.dropdown-sub-have > ul:not(.sablon2-level-menu),
.desktop-header-area:has(.header-desktop-right-area .ts-lang-wrap:hover) .top-level-menu > li.dropdown-sub-have > ul:not(.sablon2-level-menu),
.desktop-header-area:has(.header-desktop-right-area .ts-lang-wrap:focus-within) .top-level-menu > li.dropdown-sub-have > ul:not(.sablon2-level-menu){
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translateY(10px) !important;
transition: none !important;
}
.desktop-header-area:has(.header-desktop-right-area .ts-hover-dropdown:hover) .top-level-menu > li.dropdown-sub-have > ul.sablon2-level-menu,
.desktop-header-area:has(.header-desktop-right-area .ts-hover-dropdown:focus-within) .top-level-menu > li.dropdown-sub-have > ul.sablon2-level-menu,
.desktop-header-area:has(.header-desktop-right-area .ts-hover-dropdown.ts-hover-open) .top-level-menu > li.dropdown-sub-have > ul.sablon2-level-menu,
.desktop-header-area:has(.header-desktop-right-area .ts-hover-dropdown.ts-hover-active) .top-level-menu > li.dropdown-sub-have > ul.sablon2-level-menu,
.desktop-header-area:has(.header-desktop-right-area .header-lang-switch:hover) .top-level-menu > li.dropdown-sub-have > ul.sablon2-level-menu,
.desktop-header-area:has(.header-desktop-right-area .header-lang-switch:focus-within) .top-level-menu > li.dropdown-sub-have > ul.sablon2-level-menu,
.desktop-header-area:has(.header-desktop-right-area .ts-lang-wrap:hover) .top-level-menu > li.dropdown-sub-have > ul.sablon2-level-menu,
.desktop-header-area:has(.header-desktop-right-area .ts-lang-wrap:focus-within) .top-level-menu > li.dropdown-sub-have > ul.sablon2-level-menu{
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
filter: blur(6px) !important;
transform: translateX(-50%) translateY(18px) scale(0.96) !important;
transition: none !important;
}
}
/* =========================================================
STOREFRONT HEADER - LANGUAGE FLAG POLISH
Keep language flags circular, evenly cropped and aligned.
========================================================= */
@media (min-width: 1200px){
.desktop-header-area .header-desktop-navbutton-box.ts-lang-wrap > a .ts-lang-flag-main,
.desktop-header-area .header-desktop-navbutton-box.ts-lang-wrap > a .header-lang-flag-main,
.desktop-header-area .header-desktop-navbutton-box.ts-lang-wrap > a .lang-flag-round{
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
display: block !important;
border-radius: 50% !important;
overflow: hidden !important;
background-position: center center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28), 0 2px 6px rgba(15, 23, 42, 0.18) !important;
}
.desktop-header-area .header-choice-flag,
.desktop-header-area .header-lang-dropdown .header-lang-flag,
.desktop-header-area .header-lang-strip .header-lang-flag,
.desktop-header-area .ts-lang-menu .header-lang-flag,
.desktop-header-area .ts-lang-pill .header-lang-flag,
.desktop-header-area .dropdown-menu.language-drop [class^="flag-icon-"],
.desktop-header-area .dropdown-menu.language-drop [class*=" flag-icon-"],
.desktop-header-area .ts-lang-pill [class^="flag-icon-"],
.desktop-header-area .ts-lang-pill [class*=" flag-icon-"]{
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
flex: 0 0 28px !important;
display: block !important;
border-radius: 50% !important;
overflow: hidden !important;
background-position: center center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08) !important;
}
.desktop-header-area .header-choice-symbol{
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
flex: 0 0 30px !important;
border-radius: 10px !important;
}
.desktop-header-area .header-choice-item,
.desktop-header-area .dropdown-menu.language-drop a,
.desktop-header-area .header-lang-dropdown .header-lang-item,
.desktop-header-area .header-lang-dropdown .language-change,
.desktop-header-area .ts-lang-menu .language-change,
.desktop-header-area .ts-lang-pill .language-change{
gap: 12px !important;
}
}
/* =========================================================
STOREFRONT HEADER - UTILITY PANEL POLISH
Notifications, Membership, Cart and Currency
========================================================= */
@media (min-width: 1200px){
.desktop-header-area .dropdown-menu.user-drop,
.desktop-header-area .dropdown-menu.bell-drop,
.desktop-header-area .dropdown-menu.cart-drop,
.desktop-header-area .dropdown-menu.currency-drop{
border-radius: 20px !important;
border-color: rgba(31, 43, 68, 0.10) !important;
box-shadow: 0 24px 54px rgba(15, 23, 42, 0.15) !important;
}
.desktop-header-area .dropdown-menu.user-drop{
width: min(292px, calc(100vw - 24px)) !important;
padding: 14px !important;
}
.desktop-header-area .dropdown-menu.bell-drop{
width: min(344px, calc(100vw - 24px)) !important;
padding: 14px !important;
}
.desktop-header-area .dropdown-menu.cart-drop{
width: min(388px, calc(100vw - 24px)) !important;
padding: 14px !important;
}
.desktop-header-area .dropdown-menu.currency-drop{
width: 224px !important;
min-width: 224px !important;
padding: 12px !important;
}
.desktop-header-area .dropdown-menu.user-drop .dropdown-user-area-header{
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
margin-bottom: 8px !important;
}
.desktop-header-area .dropdown-menu.user-drop .dropdown-user-area-header a.button-blue,
.desktop-header-area .dropdown-menu.user-drop .dropdown-user-area-header a.button-green{
width: 100% !important;
min-height: 42px !important;
border-radius: 14px !important;
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.10) !important;
}
.desktop-header-area .dropdown-menu.user-drop .dropdown-user-area-lineText{
margin: 2px 0 4px !important;
}
.desktop-header-area .dropdown-menu.user-drop .dropdown-user-area-link-area{
display: grid !important;
gap: 8px !important;
margin-top: 8px !important;
padding-top: 8px !important;
border-top: 1px solid #edf1f5 !important;
}
.desktop-header-area .dropdown-menu.user-drop .dropdown-user-area-link-area a{
min-height: 46px !important;
padding: 10px 12px !important;
border: 1px solid #e8eef5 !important;
border-radius: 14px !important;
background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}
.desktop-header-area .dropdown-menu.user-drop .dropdown-user-area-link-area a:last-child{
margin-bottom: 0 !important;
}
.desktop-header-area .dropdown-menu.user-drop .dropdown-user-area-link-area a:hover{
background: #f6f8fb !important;
border-color: #dfe7f0 !important;
}
.desktop-header-area .dropdown-menu.user-drop .dropdown-user-area-link-area a i{
width: 26px !important;
height: 26px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 8px !important;
background: #f2f5f9 !important;
color: #7b5a31 !important;
}
.desktop-header-area .dropdown-menu.user-drop .dropdown-user-area-link-area a strong{
margin-left: auto !important;
padding: 4px 7px !important;
border-radius: 999px !important;
background: #eef2f7 !important;
color: #42526a !important;
font-size: 10px !important;
}
.desktop-header-area .dropdown-bell-no,
.desktop-header-area .dropdown-cart-noitem{
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
padding: 24px 18px !important;
text-align: center !important;
border: 1px solid #e7edf4 !important;
border-radius: 18px !important;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
}
.desktop-header-area .dropdown-bell-no i,
.desktop-header-area .dropdown-cart-noitem i{
width: 54px !important;
height: 54px !important;
margin: 0 auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 16px !important;
background: #f2f5fa !important;
color: #78869a !important;
font-size: 24px !important;
}
.desktop-header-area .dropdown-bell-no-t,
.desktop-header-area .dropdown-cart-noitem-t{
margin: 0 !important;
color: #182338 !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
}
.desktop-header-area .dropdown-bell-no-s,
.desktop-header-area .dropdown-cart-noitem-s{
width: auto !important;
max-width: 25ch !important;
margin: 0 auto !important;
color: #667489 !important;
font-size: 12.5px !important;
line-height: 1.55 !important;
}
.desktop-header-area .dropdown-bell-fullhref{
padding: 12px 0 0 !important;
background: none !important;
text-align: left !important;
}
.desktop-header-area .dropdown-bell-fullhref a{
width: 100% !important;
min-height: 44px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 999px !important;
background: #1f2b44 !important;
color: #ffffff !important;
font-size: 11.5px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
box-shadow: 0 10px 24px rgba(31, 43, 68, 0.14) !important;
}
.desktop-header-area .dropdown-bell-fullhref a:hover{
background: #162038 !important;
color: #ffffff !important;
transform: translateY(-1px) !important;
}
.desktop-header-area .dropdown-cart-priceTotal{
margin: 14px 0 !important;
padding: 13px 14px !important;
border: 1px solid #e7edf4 !important;
border-radius: 16px !important;
background: #f8fafc !important;
}
.desktop-header-area .dropdown-menu.cart-drop > a:last-child,
.desktop-header-area .dropdown-menu.cart-drop > button:last-child{
min-height: 46px !important;
border-radius: 14px !important;
box-shadow: 0 10px 24px rgba(31, 43, 68, 0.14) !important;
}
.desktop-header-area .dropdown-menu.currency-drop .header-choice-item,
.desktop-header-area .dropdown-menu.currency-drop a{
min-height: 48px !important;
padding: 10px 4px !important;
gap: 12px !important;
border-bottom: 0 !important;
border-radius: 14px !important;
}
.desktop-header-area .dropdown-menu.currency-drop .header-choice-item + .header-choice-item,
.desktop-header-area .dropdown-menu.currency-drop a + a{
margin-top: 6px !important;
}
.desktop-header-area .dropdown-menu.currency-drop .header-choice-item:hover,
.desktop-header-area .dropdown-menu.currency-drop .header-choice-item.is-active,
.desktop-header-area .dropdown-menu.currency-drop a:hover,
.desktop-header-area .dropdown-menu.currency-drop a.active{
padding-left: 10px !important;
padding-right: 10px !important;
background: linear-gradient(180deg, #fbfcfe 0%, #f4f7fb 100%) !important;
border: 1px solid #e5ebf3 !important;
}
.desktop-header-area .dropdown-menu.currency-drop .header-choice-symbol{
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
flex: 0 0 32px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
background: #f2f5f9 !important;
color: #7b5a31 !important;
font-size: 15px !important;
font-weight: 700 !important;
}
.desktop-header-area .dropdown-menu.currency-drop .header-choice-label{
font-size: 14px !important;
font-weight: 600 !important;
color: #24324a !important;
}
.desktop-header-area .dropdown-menu.currency-drop .header-choice-check{
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 999px !important;
background: #1f2b44 !important;
color: #ffffff !important;
font-size: 12px !important;
}
}
/* =========================================================
STOREFRONT HEADER - BELL FEED COMPATIBILITY
Keep modern notification cards readable inside compact bell dropdowns.
========================================================= */
@media (min-width: 1200px){
.desktop-header-area .dropdown-menu.bell-drop .ts-mail-section,
.desktop-header-area .dropdown-menu.bell-drop .ts-mail-flash{
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: none !important;
box-shadow: none !important;
}
.desktop-header-area .dropdown-menu.bell-drop .ts-mail-section-head,
.desktop-header-area .dropdown-menu.bell-drop .ts-mail-feed-toolbar,
.desktop-header-area .dropdown-menu.bell-drop .ts-mail-load-wrap,
.desktop-header-area .dropdown-menu.bell-drop .ts-mail-feed-row-select,
.desktop-header-area .dropdown-menu.bell-drop .ts-mail-thread-select{
display: none !important;
}
.desktop-header-area .dropdown-menu.bell-drop .ts-mail-feed-list,
.desktop-header-area .dropdown-menu.bell-drop .ts-mail-featured-grid{
display: grid !important;
gap: 10px !important;
}
.desktop-header-area .dropdown-menu.bell-drop .ts-mail-card,
.desktop-header-area .dropdown-menu.bell-drop .ts-mail-thread,
.desktop-header-area .dropdown-menu.bell-drop .ts-mail-feed-row,
.desktop-header-area .dropdown-menu.bell-drop .ts-mail-empty-state{
margin: 0 !important;
padding: 14px !important;
border-radius: 18px !important;
box-shadow: none !important;
}
.desktop-header-area .dropdown-menu.bell-drop .ts-mail-feed-row,
.desktop-header-area .dropdown-menu.bell-drop .ts-mail-thread{
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 12px !important;
}
.desktop-header-area .dropdown-menu.bell-drop .ts-mail-feed-row-main{
grid-template-columns: 36px minmax(0, 1fr) !important;
gap: 12px !important;
}
.desktop-header-area .dropdown-menu.bell-drop .ts-mail-feed-row-topline,
.desktop-header-area .dropdown-menu.bell-drop .ts-mail-thread-topline{
flex-direction: column !important;
align-items: flex-start !important;
gap: 8px !important;
margin-bottom: 8px !important;
}
.desktop-header-area .dropdown-menu.bell-drop .ts-mail-feed-row-meta,
.desktop-header-area .dropdown-menu.bell-drop .ts-mail-thread-head,
.desktop-header-area .dropdown-menu.bell-drop .ts-mail-thread-footer{
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
width: 100% !important;
}
.desktop-header-area .dropdown-menu.bell-drop .ts-mail-thread-head{
padding-bottom: 12px !important;
}
.desktop-header-area .dropdown-menu.bell-drop .ts-mail-feed-row-title,
.desktop-header-area .dropdown-menu.bell-drop .ts-mail-thread .ts-mail-feed-row-title{
font-size: 14px !important;
line-height: 1.35 !important;
}
.desktop-header-area .dropdown-menu.bell-drop .ts-mail-feed-row-text,
.desktop-header-area .dropdown-menu.bell-drop .ts-mail-thread .ts-mail-feed-row-text{
font-size: 12px !important;
line-height: 1.55 !important;
max-width: none !important;
}
.desktop-header-area .dropdown-menu.bell-drop .ts-mail-feed-row-action,
.desktop-header-area .dropdown-menu.bell-drop .ts-mail-thread .ts-mail-feed-row-action,
.desktop-header-area .dropdown-menu.bell-drop .ts-mail-card-cta{
width: 100% !important;
justify-content: space-between !important;
}
.desktop-header-area .dropdown-menu.bell-drop .ts-mail-empty-state{
padding: 20px 18px !important;
}
.desktop-header-area .dropdown-menu.bell-drop .ts-mail-empty-state strong{
font-size: 18px !important;
}
.desktop-header-area .dropdown-menu.bell-drop .ts-mail-empty-state p{
font-size: 12px !important;
max-width: 28ch !important;
}
}
/* =========================================================
STOREFRONT HEADER - UTILITY PANEL SYSTEM FINAL
Final desktop separation layer for account/favorites/cart/
notifications/language/currency panels.
========================================================= */
@media (min-width: 1200px){
.desktop-header-area{
--ts-header-panel-radius: 20px;
--ts-header-panel-border: rgba(31, 43, 68, 0.10);
--ts-header-panel-shadow: 0 24px 54px rgba(15, 23, 42, 0.15);
--ts-header-panel-bg: #ffffff;
--ts-header-panel-row-bg: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
--ts-header-panel-row-bg-hover: linear-gradient(180deg, #fbfcfe 0%, #f4f7fb 100%);
--ts-header-panel-row-border: #e7edf4;
--ts-header-panel-muted: #667489;
--ts-header-panel-title: #182338;
--ts-header-panel-accent: #1f2b44;
--ts-header-panel-warm: #7b5a31;
--ts-header-panel-soft: #f2f5f9;
}
.desktop-header-area .dropdown-menu.user-drop,
.desktop-header-area .dropdown-menu.bell-drop,
.desktop-header-area .dropdown-menu.favorites-drop,
.desktop-header-area .dropdown-menu.cart-drop,
.desktop-header-area .dropdown-menu.language-drop,
.desktop-header-area .dropdown-menu.currency-drop,
.desktop-header-area .header-lang-switch .header-lang-dropdown,
.desktop-header-area .header-lang-switch .header-lang-strip,
.desktop-header-area .ts-lang-wrap .ts-lang-menu,
.desktop-header-area .ts-lang-wrap .ts-lang-pill{
border: 1px solid var(--ts-header-panel-border) !important;
border-radius: var(--ts-header-panel-radius) !important;
background: var(--ts-header-panel-bg) !important;
box-shadow: var(--ts-header-panel-shadow) !important;
}
.desktop-header-area .dropdown-menu.user-drop{
width: min(292px, calc(100vw - 24px)) !important;
padding: 14px !important;
}
.desktop-header-area .dropdown-menu.bell-drop{
width: min(344px, calc(100vw - 24px)) !important;
padding: 14px !important;
}
.desktop-header-area .dropdown-menu.favorites-drop{
width: min(248px, calc(100vw - 24px)) !important;
padding: 12px !important;
}
.desktop-header-area .dropdown-menu.cart-drop{
width: min(388px, calc(100vw - 24px)) !important;
padding: 14px !important;
}
.desktop-header-area .dropdown-menu.language-drop,
.desktop-header-area .dropdown-menu.currency-drop,
.desktop-header-area .header-lang-switch .header-lang-dropdown,
.desktop-header-area .header-lang-switch .header-lang-strip,
.desktop-header-area .ts-lang-wrap .ts-lang-menu,
.desktop-header-area .ts-lang-wrap .ts-lang-pill{
width: 224px !important;
min-width: 224px !important;
padding: 12px !important;
}
.desktop-header-area .dropdown-menu.user-drop::before,
.desktop-header-area .dropdown-menu.bell-drop::before,
.desktop-header-area .dropdown-menu.favorites-drop::before,
.desktop-header-area .dropdown-menu.cart-drop::before,
.desktop-header-area .dropdown-menu.language-drop::before,
.desktop-header-area .dropdown-menu.currency-drop::before,
.desktop-header-area .header-lang-switch .header-lang-dropdown::before,
.desktop-header-area .header-lang-switch .header-lang-strip::before,
.desktop-header-area .ts-lang-wrap .ts-lang-menu::before,
.desktop-header-area .ts-lang-wrap .ts-lang-pill::before{
right: 18px !important;
}
.desktop-header-area .dropdown-menu.user-drop .dropdown-user-area{
padding: 0 !important;
}
.desktop-header-area .dropdown-menu.user-drop .dropdown-user-area-header{
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
margin: 0 0 8px !important;
padding: 0 !important;
border: 0 !important;
background: none !important;
box-shadow: none !important;
}
.desktop-header-area .dropdown-menu.user-drop .dropdown-user-area-header a.button-blue,
.desktop-header-area .dropdown-menu.user-drop .dropdown-user-area-header a.button-green{
width: 100% !important;
min-height: 42px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 14px !important;
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.10) !important;
}
.desktop-header-area .dropdown-menu.user-drop .dropdown-user-area-lineText{
margin: 2px 0 4px !important;
}
.desktop-header-area .dropdown-menu.user-drop .dropdown-user-area-link-area{
display: grid !important;
gap: 8px !important;
margin-top: 8px !important;
padding-top: 8px !important;
border-top: 1px solid #edf1f5 !important;
}
.desktop-header-area .dropdown-menu.user-drop .dropdown-user-area-link-area a{
min-height: 46px !important;
padding: 10px 12px !important;
border: 1px solid var(--ts-header-panel-row-border) !important;
border-radius: 14px !important;
background: var(--ts-header-panel-row-bg) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
transition: background .16s ease, border-color .16s ease !important;
}
.desktop-header-area .dropdown-menu.user-drop .dropdown-user-area-link-area a:hover{
background: #f6f8fb !important;
border-color: #dfe7f0 !important;
transform: none !important;
}
.desktop-header-area .dropdown-menu.user-drop .dropdown-user-area-link-area a i{
width: 26px !important;
height: 26px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 8px !important;
background: var(--ts-header-panel-soft) !important;
color: var(--ts-header-panel-warm) !important;
}
.desktop-header-area .dropdown-menu.user-drop .dropdown-user-area-link-area a strong{
margin-left: auto !important;
padding: 4px 7px !important;
border-radius: 999px !important;
background: #eef2f7 !important;
color: #42526a !important;
font-size: 10px !important;
}
.desktop-header-area .dropdown-menu.bell-drop .dropdown-bell-header,
.desktop-header-area .dropdown-menu.cart-drop .dropdown-cart-header{
margin: 0 0 10px !important;
padding: 0 0 12px !important;
border: 0 !important;
border-bottom: 1px solid #edf1f5 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
}
.desktop-header-area .dropdown-menu.bell-drop .dropdown-bell-list,
.desktop-header-area .dropdown-menu.bell-drop .dropdown-bell-overflow,
.desktop-header-area .dropdown-menu.cart-drop .dropdown-cart-overflow{
gap: 0 !important;
max-height: 360px !important;
padding-right: 2px !important;
margin-right: 0 !important;
}
.desktop-header-area .dropdown-menu.bell-drop .dropdown-bell-list-box,
.desktop-header-area .dropdown-menu.cart-drop .dropdown-cart-itembox{
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: none !important;
box-shadow: none !important;
}
.desktop-header-area .dropdown-menu.bell-drop .dropdown-bell-list-box-h,
.desktop-header-area .dropdown-menu.cart-drop .dropdown-cart-itembox{
border: 0 !important;
border-bottom: 1px solid #edf1f5 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
transform: none !important;
}
.desktop-header-area .dropdown-menu.bell-drop .dropdown-bell-list-box-h{
padding: 12px 0 !important;
gap: 12px !important;
}
.desktop-header-area .dropdown-menu.bell-drop .dropdown-bell-list-box:last-child .dropdown-bell-list-box-h,
.desktop-header-area .dropdown-menu.cart-drop .dropdown-cart-itembox:last-child{
border-bottom: 0 !important;
}
.desktop-header-area .dropdown-menu.bell-drop .dropdown-bell-list-box-h-icon{
width: 34px !important;
min-width: 34px !important;
height: 34px !important;
border-radius: 10px !important;
background: #f7f8fa !important;
color: #8a6839 !important;
font-size: 15px !important;
}
.desktop-header-area .dropdown-menu.bell-drop .dropdown-bell-list-box-baslik{
padding-right: 72px !important;
color: #24324a !important;
font-size: 13.5px !important;
font-weight: 600 !important;
line-height: 1.45 !important;
}
.desktop-header-area .dropdown-menu.bell-drop .dropdown-bell-list-box-date{
top: 12px !important;
right: 0 !important;
padding: 4px 7px !important;
border: 1px solid #e6ebf2 !important;
border-radius: 999px !important;
background: #f8fafc !important;
color: #7a8699 !important;
font-size: 10px !important;
font-weight: 600 !important;
white-space: nowrap !important;
}
.desktop-header-area .dropdown-menu.bell-drop .dropdown-bell-list-box-s{
display: block !important;
margin-top: 4px !important;
color: var(--ts-header-panel-muted) !important;
font-size: 12px !important;
line-height: 1.45 !important;
text-transform: none !important;
}
.desktop-header-area .dropdown-menu.bell-drop .dropdown-bell-fullhref{
padding: 12px 0 0 !important;
background: none !important;
text-align: left !important;
}
.desktop-header-area .dropdown-menu.bell-drop .dropdown-bell-fullhref a,
.desktop-header-area .dropdown-menu.cart-drop > a:last-child,
.desktop-header-area .dropdown-menu.cart-drop > button:last-child{
width: 100% !important;
min-height: 46px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 999px !important;
background: var(--ts-header-panel-accent) !important;
color: #ffffff !important;
font-size: 11.5px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
box-shadow: 0 10px 24px rgba(31, 43, 68, 0.14) !important;
}
.desktop-header-area .dropdown-menu.bell-drop .dropdown-bell-fullhref a:hover,
.desktop-header-area .dropdown-menu.cart-drop > a:last-child:hover,
.desktop-header-area .dropdown-menu.cart-drop > button:last-child:hover{
background: #162038 !important;
color: #ffffff !important;
transform: translateY(-1px) !important;
}
.desktop-header-area .dropdown-menu.favorites-drop .dropdown-cart-favorite{
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
padding: 24px 18px !important;
text-align: center !important;
border: 1px solid var(--ts-header-panel-row-border) !important;
border-radius: 18px !important;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
}
.desktop-header-area .dropdown-menu.favorites-drop .dropdown-cart-favorite i{
width: 54px !important;
height: 54px !important;
margin: 0 auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 16px !important;
background: #fff2f5 !important;
color: #c45d7d !important;
font-size: 24px !important;
line-height: 1 !important;
}
.desktop-header-area .dropdown-menu.favorites-drop .dropdown-cart-favorite-t{
margin: 0 !important;
color: var(--ts-header-panel-title) !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
}
.desktop-header-area .dropdown-menu.favorites-drop .dropdown-cart-favorite-s{
width: auto !important;
max-width: 24ch !important;
margin: 0 auto !important;
color: var(--ts-header-panel-muted) !important;
font-size: 12.5px !important;
line-height: 1.55 !important;
}
.desktop-header-area .dropdown-menu.favorites-drop > a:last-child{
width: 100% !important;
min-height: 44px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-top: 10px !important;
border-radius: 999px !important;
background: var(--ts-header-panel-accent) !important;
color: #ffffff !important;
font-size: 11.5px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
box-shadow: 0 10px 24px rgba(31, 43, 68, 0.14) !important;
}
.desktop-header-area .dropdown-menu.favorites-drop > a:last-child:hover{
background: #162038 !important;
color: #ffffff !important;
}
.desktop-header-area .dropdown-menu.cart-drop .dropdown-cart-priceTotal{
margin: 14px 0 !important;
padding: 13px 14px !important;
border: 1px solid var(--ts-header-panel-row-border) !important;
border-radius: 16px !important;
background: #f8fafc !important;
box-shadow: none !important;
}
.desktop-header-area .dropdown-menu.cart-drop .dropdown-cart-itembox-content-img{
width: 64px !important;
min-width: 64px !important;
height: 78px !important;
border-radius: 12px !important;
background: #f8fafc !important;
box-shadow: none !important;
}
.desktop-header-area .dropdown-menu.cart-drop .dropdown-cart-itembox-trash a{
width: 32px !important;
height: 32px !important;
border-radius: 10px !important;
background: #f7f8fa !important;
color: #8a6839 !important;
}
.desktop-header-area .dropdown-menu.cart-drop .dropdown-cart-itembox-trash a:hover{
background: #f1f4f8 !important;
color: #6f522e !important;
transform: none !important;
}
.desktop-header-area .dropdown-menu.bell-drop .dropdown-bell-no,
.desktop-header-area .dropdown-menu.cart-drop .dropdown-cart-noitem{
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
padding: 24px 18px !important;
text-align: center !important;
border: 1px solid var(--ts-header-panel-row-border) !important;
border-radius: 18px !important;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
}
.desktop-header-area .dropdown-menu.bell-drop .dropdown-bell-no i,
.desktop-header-area .dropdown-menu.cart-drop .dropdown-cart-noitem i{
width: 54px !important;
height: 54px !important;
margin: 0 auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 16px !important;
background: var(--ts-header-panel-soft) !important;
color: #78869a !important;
font-size: 24px !important;
}
.desktop-header-area .dropdown-menu.bell-drop .dropdown-bell-no-t,
.desktop-header-area .dropdown-menu.cart-drop .dropdown-cart-noitem-t{
margin: 0 !important;
color: var(--ts-header-panel-title) !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
}
.desktop-header-area .dropdown-menu.bell-drop .dropdown-bell-no-s,
.desktop-header-area .dropdown-menu.cart-drop .dropdown-cart-noitem-s{
width: auto !important;
max-width: 25ch !important;
margin: 0 auto !important;
color: var(--ts-header-panel-muted) !important;
font-size: 12.5px !important;
line-height: 1.55 !important;
}
.desktop-header-area .dropdown-menu.language-drop a,
.desktop-header-area .dropdown-menu.currency-drop a,
.desktop-header-area .dropdown-menu.language-drop .header-choice-item,
.desktop-header-area .dropdown-menu.currency-drop .header-choice-item,
.desktop-header-area .header-lang-switch .header-lang-dropdown .header-lang-item,
.desktop-header-area .header-lang-switch .header-lang-dropdown .language-change,
.desktop-header-area .header-lang-switch .header-lang-strip .header-lang-item,
.desktop-header-area .header-lang-switch .header-lang-strip .language-change,
.desktop-header-area .ts-lang-wrap .ts-lang-menu .language-change,
.desktop-header-area .ts-lang-wrap .ts-lang-pill .language-change{
width: 100% !important;
min-height: 48px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 12px !important;
margin: 0 !important;
padding: 10px 12px !important;
border: 1px solid transparent !important;
border-radius: 14px !important;
background: transparent !important;
box-shadow: none !important;
color: #24324a !important;
text-decoration: none !important;
transition: background .16s ease, border-color .16s ease, padding .16s ease !important;
white-space: nowrap !important;
}
.desktop-header-area .dropdown-menu.language-drop a + a,
.desktop-header-area .dropdown-menu.currency-drop a + a,
.desktop-header-area .dropdown-menu.language-drop .header-choice-item + .header-choice-item,
.desktop-header-area .dropdown-menu.currency-drop .header-choice-item + .header-choice-item,
.desktop-header-area .header-lang-switch .header-lang-dropdown .header-lang-item + .header-lang-item,
.desktop-header-area .header-lang-switch .header-lang-dropdown .language-change + .language-change,
.desktop-header-area .header-lang-switch .header-lang-strip .header-lang-item + .header-lang-item,
.desktop-header-area .header-lang-switch .header-lang-strip .language-change + .language-change,
.desktop-header-area .ts-lang-wrap .ts-lang-menu .language-change + .language-change,
.desktop-header-area .ts-lang-wrap .ts-lang-pill .language-change + .language-change{
margin-top: 6px !important;
}
.desktop-header-area .dropdown-menu.language-drop a:hover,
.desktop-header-area .dropdown-menu.language-drop a.active,
.desktop-header-area .dropdown-menu.currency-drop a:hover,
.desktop-header-area .dropdown-menu.currency-drop a.active,
.desktop-header-area .dropdown-menu.language-drop .header-choice-item:hover,
.desktop-header-area .dropdown-menu.language-drop .header-choice-item.is-active,
.desktop-header-area .dropdown-menu.currency-drop .header-choice-item:hover,
.desktop-header-area .dropdown-menu.currency-drop .header-choice-item.is-active,
.desktop-header-area .header-lang-switch .header-lang-dropdown .header-lang-item:hover,
.desktop-header-area .header-lang-switch .header-lang-dropdown .header-lang-item.active,
.desktop-header-area .header-lang-switch .header-lang-dropdown .language-change:hover,
.desktop-header-area .header-lang-switch .header-lang-dropdown .language-change.active,
.desktop-header-area .header-lang-switch .header-lang-strip .header-lang-item:hover,
.desktop-header-area .header-lang-switch .header-lang-strip .header-lang-item.active,
.desktop-header-area .header-lang-switch .header-lang-strip .language-change:hover,
.desktop-header-area .header-lang-switch .header-lang-strip .language-change.active,
.desktop-header-area .ts-lang-wrap .ts-lang-menu .language-change:hover,
.desktop-header-area .ts-lang-wrap .ts-lang-menu .language-change.active,
.desktop-header-area .ts-lang-wrap .ts-lang-pill .language-change:hover,
.desktop-header-area .ts-lang-wrap .ts-lang-pill .language-change.active{
padding-left: 12px !important;
padding-right: 12px !important;
background: var(--ts-header-panel-row-bg-hover) !important;
border-color: #e5ebf3 !important;
color: #24324a !important;
}
.desktop-header-area .dropdown-menu.language-drop .lang-label,
.desktop-header-area .dropdown-menu.currency-drop .lang-label,
.desktop-header-area .dropdown-menu.language-drop .header-lang-label,
.desktop-header-area .dropdown-menu.currency-drop .header-lang-label,
.desktop-header-area .dropdown-menu.language-drop .header-choice-label,
.desktop-header-area .dropdown-menu.currency-drop .header-choice-label,
.desktop-header-area .header-lang-switch .header-lang-dropdown .lang-label,
.desktop-header-area .header-lang-switch .header-lang-dropdown .header-lang-label,
.desktop-header-area .header-lang-switch .header-lang-strip .lang-label,
.desktop-header-area .header-lang-switch .header-lang-strip .header-lang-label,
.desktop-header-area .ts-lang-wrap .ts-lang-menu .lang-label,
.desktop-header-area .ts-lang-wrap .ts-lang-menu .header-lang-label,
.desktop-header-area .ts-lang-wrap .ts-lang-pill .lang-label,
.desktop-header-area .ts-lang-wrap .ts-lang-pill .header-lang-label{
display: block !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.35 !important;
color: #24324a !important;
letter-spacing: 0 !important;
}
.desktop-header-area .dropdown-menu.language-drop .header-choice-flag,
.desktop-header-area .dropdown-menu.language-drop [class^="flag-icon-"],
.desktop-header-area .dropdown-menu.language-drop [class*=" flag-icon-"],
.desktop-header-area .header-lang-switch .header-lang-dropdown .header-lang-flag,
.desktop-header-area .header-lang-switch .header-lang-strip .header-lang-flag,
.desktop-header-area .ts-lang-wrap .ts-lang-menu .header-lang-flag,
.desktop-header-area .ts-lang-wrap .ts-lang-pill .header-lang-flag,
.desktop-header-area .ts-lang-wrap .ts-lang-pill [class^="flag-icon-"],
.desktop-header-area .ts-lang-wrap .ts-lang-pill [class*=" flag-icon-"]{
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
flex: 0 0 28px !important;
display: block !important;
border-radius: 50% !important;
overflow: hidden !important;
background-position: center center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08) !important;
}
.desktop-header-area .dropdown-menu.currency-drop .header-choice-symbol,
.desktop-header-area .dropdown-menu.currency-drop [class^="flag-icon-"],
.desktop-header-area .dropdown-menu.currency-drop [class*=" flag-icon-"]{
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
flex: 0 0 32px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
background: var(--ts-header-panel-soft) !important;
color: var(--ts-header-panel-warm) !important;
overflow: hidden !important;
font-size: 15px !important;
font-weight: 700 !important;
}
.desktop-header-area .dropdown-menu.language-drop .header-choice-check,
.desktop-header-area .dropdown-menu.currency-drop .header-choice-check,
.desktop-header-area .header-lang-switch .header-lang-dropdown .header-choice-check,
.desktop-header-area .header-lang-switch .header-lang-strip .header-choice-check,
.desktop-header-area .ts-lang-wrap .ts-lang-menu .header-choice-check,
.desktop-header-area .ts-lang-wrap .ts-lang-pill .header-choice-check{
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
margin-left: auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 999px !important;
background: var(--ts-header-panel-accent) !important;
color: #ffffff !important;
font-size: 12px !important;
opacity: 1 !important;
}
.desktop-header-area .dropdown-menu.language-drop .header-choice-item:not(.is-active) .header-choice-check,
.desktop-header-area .dropdown-menu.currency-drop .header-choice-item:not(.is-active) .header-choice-check{
opacity: 0 !important;
}
}
/* =========================================================
STOREFRONT HEADER - ACCOUNT PANEL REFINEMENT
Logged-in account dropdown only.
========================================================= */
@media (min-width: 1200px){
.desktop-header-area .dropdown-menu.user-drop .dropdown-userarea-header:not(.user-drop-notice){
min-height: 52px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 12px !important;
margin: 0 0 10px !important;
padding: 12px 14px !important;
border: 1px solid rgba(205, 217, 230, 0.90) !important;
border-radius: 16px !important;
background: linear-gradient(135deg, #f6f9fd 0%, #ffffff 100%) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
color: #1f2b44 !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
text-decoration: none !important;
letter-spacing: 0 !important;
white-space: nowrap !important;
}
.desktop-header-area .dropdown-menu.user-drop .dropdown-userarea-header:not(.user-drop-notice):hover{
background: linear-gradient(135deg, #f8fbff 0%, #eef4fb 100%) !important;
border-color: rgba(165, 182, 203, 0.95) !important;
color: #182338 !important;
}
.desktop-header-area .dropdown-menu.user-drop .dropdown-userarea-header:not(.user-drop-notice) i{
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
border: 1px solid rgba(140, 104, 57, 0.18) !important;
border-radius: 999px !important;
background: linear-gradient(180deg, #fff8eb 0%, #f3efe6 100%) !important;
color: #7a572d !important;
font-size: 15px !important;
line-height: 1 !important;
opacity: 1 !important;
text-shadow: none !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: geometricPrecision;
}
.desktop-header-area .dropdown-menu.user-drop .dropdown-userarea-header:not(.user-drop-notice) i::before{
font-size: 15px !important;
line-height: 1 !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.desktop-header-area .dropdown-menu.user-drop .dropdown-user-area-link-area{
gap: 10px !important;
margin-top: 0 !important;
padding-top: 0 !important;
border-top: 0 !important;
}
.desktop-header-area .dropdown-menu.user-drop .dropdown-user-area-link-area a{
min-height: 48px !important;
padding: 11px 13px !important;
border: 1px solid rgba(205, 218, 232, 0.90) !important;
border-radius: 16px !important;
background: linear-gradient(180deg, rgba(250, 252, 255, 0.98) 0%, #f4f8fd 100%) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
color: #22324b !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.35 !important;
transition: background .16s ease, border-color .16s ease, color .16s ease !important;
}
.desktop-header-area .dropdown-menu.user-drop .dropdown-user-area-link-area a:hover{
background: linear-gradient(180deg, #ffffff 0%, #edf3fb 100%) !important;
border-color: rgba(151, 170, 193, 0.78) !important;
color: #17243a !important;
}
.desktop-header-area .dropdown-menu.user-drop .dropdown-user-area-link-area a i{
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid rgba(31, 43, 68, 0.08) !important;
border-radius: 12px !important;
background: linear-gradient(180deg, #fffdf8 0%, #eef3fa 100%) !important;
color: #22324b !important;
font-size: 16px !important;
line-height: 1 !important;
opacity: 1 !important;
text-shadow: none !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
transform: translateZ(0) !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: geometricPrecision;
}
.desktop-header-area .dropdown-menu.user-drop .dropdown-user-area-link-area a i::before{
font-size: 16px !important;
line-height: 1 !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.desktop-header-area .dropdown-menu.user-drop .dropdown-user-area-link-area a strong{
min-width: 28px !important;
height: 28px !important;
padding: 0 9px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 999px !important;
background: #e8eef7 !important;
color: #445978 !important;
font-size: 10.5px !important;
font-weight: 700 !important;
box-shadow: none !important;
}
}
/* =========================================================
TS NOTIFICATIONS - LEFT TOOLBAR LAYOUT
Filter and Manage tools move into a calmer left-side rail.
========================================================= */
@media (min-width: 1200px){
.ts-mail-focus-top{
grid-template-columns:minmax(248px, 276px) minmax(0,1fr);
gap:20px;
align-items:start;
}
.ts-mail-focus-nav{
order:2;
}
.ts-mail-focus-tools{
order:1;
display:grid;
grid-template-columns:1fr;
gap:16px;
padding:18px;
border-top:0;
border:1px solid rgba(15,23,42,.08);
border-radius:24px;
background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,249,252,.94));
box-shadow:0 16px 32px rgba(15,23,42,.07);
align-self:stretch;
}
.ts-mail-toolbar-badges{
justify-content:flex-start;
margin-right:0;
align-self:auto;
}
.ts-mail-toolbar-control-row{
flex-direction:column;
align-items:stretch;
justify-content:flex-start;
gap:14px;
width:100%;
}
.ts-mail-filter-dock{
width:100%;
align-items:stretch;
}
.ts-mail-filter-toggle{
width:100%;
justify-content:space-between;
padding:0 16px;
}
.ts-mail-filter-summary{
align-items:flex-start;
width:100%;
}
.ts-mail-filter-summary-tags{
justify-content:flex-start;
}
.ts-mail-toolbar-actions{
width:100%;
justify-content:stretch;
}
.ts-mail-toolbar-menu{
width:100%;
}
.ts-mail-toolbar-actions > .ts-mail-secondary-link,
.ts-mail-toolbar-menu summary{
width:100%;
justify-content:space-between;
padding:0 16px;
}
.ts-mail-toolbar-menu-panel{
position:static;
top:auto;
right:auto;
min-width:0;
width:100%;
margin-top:8px;
padding:8px;
border-radius:18px;
box-shadow:none;
background:rgba(244,247,251,.92);
}
.ts-mail-filter-shell{
top:0;
left:calc(100% + 18px);
right:auto;
width:min(680px, calc(100vw - 390px));
max-width:680px;
transform-origin:top left;
transform:translate3d(-10px, -2px, 0) scale(.985);
}
.ts-mail-focus-shell.is-filter-open .ts-mail-filter-shell{
transform:translate3d(0, 0, 0) scale(1);
}
}
@media (min-width: 1200px) and (max-width: 1339.98px){
.ts-mail-focus-top{
grid-template-columns:minmax(228px, 250px) minmax(0,1fr);
gap:16px;
}
.ts-mail-focus-tools{
padding:16px;
}
.ts-mail-filter-shell{
width:min(620px, calc(100vw - 350px));
}
}
/* =========================================================
TS NOTIFICATIONS - PERMANENT SIDEBAR LAYOUT
Focus, filter and manage tools live in a true left rail.
========================================================= */
@media (min-width: 1200px){
.ts-notification-shell{
display:grid;
width:min(1680px, calc(100vw - 24px));
margin:0 auto 0 12px;
grid-template-columns:minmax(276px, 304px) minmax(0,1fr);
gap:18px;
align-items:start;
}
.ts-mail-hero{
grid-column:2;
grid-row:1;
margin-bottom:12px;
}
.ts-mail-focus-shell{
grid-column:1;
grid-row:1 / span 2;
align-self:start;
position:sticky;
top:22px;
margin-bottom:0;
padding:18px;
border:1px solid rgba(15,23,42,.08);
border-radius:28px;
background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,248,252,.95));
box-shadow:0 18px 34px rgba(15,23,42,.08);
}
.ts-mail-hero-main,
.ts-mail-section{
padding:22px 24px;
}
.ts-mail-hero-row{
grid-template-columns:minmax(0,1.46fr) minmax(296px,.78fr);
gap:18px;
}
.ts-mail-sidebar-head{
display:grid;
gap:8px;
margin-bottom:18px;
}
.ts-mail-sidebar-copy{
margin:0;
font-size:13px;
line-height:1.6;
color:var(--ts-muted);
}
.ts-mail-focus-top{
grid-template-columns:1fr;
gap:18px;
}
.ts-mail-focus-nav{
order:1;
}
.ts-mail-focus-tools{
order:2;
}
.ts-mail-focus-nav-sidebar{
display:grid;
gap:14px;
}
.ts-mail-focus-side-group{
display:grid;
gap:10px;
}
.ts-mail-focus-side-group + .ts-mail-focus-side-group{
padding-top:14px;
border-top:1px solid rgba(15,23,42,.08);
}
.ts-mail-focus-side-label,
.ts-mail-sidebar-manage-head{
font-size:11px;
line-height:1.2;
letter-spacing:.12em;
text-transform:uppercase;
font-weight:800;
color:#7d8793;
}
.ts-mail-focus-grid-sidebar{
grid-template-columns:1fr;
gap:10px;
}
.ts-mail-focus-grid-sidebar .ts-mail-focus-card{
min-height:60px;
padding:12px 14px;
}
.ts-mail-focus-grid-sidebar .ts-mail-focus-label{
display:block;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
font-size:14px;
}
.ts-mail-focus-tools{
grid-template-columns:1fr;
gap:18px;
padding-top:0;
border-top:none;
}
.ts-mail-toolbar-badges.ts-mail-sidebar-badges,
.ts-mail-focus-tools .ts-mail-toolbar-badges{
width:100%;
justify-content:flex-start;
margin-right:0;
align-self:auto;
}
.ts-mail-toolbar-control-row{
flex-direction:column;
align-items:stretch;
justify-content:flex-start;
gap:18px;
width:100%;
}
.ts-mail-filter-dock{
width:100%;
align-items:stretch;
gap:12px;
}
.ts-mail-filter-toggle{
display:none;
}
.ts-mail-filter-summary{
align-items:flex-start;
}
.ts-mail-filter-summary-tags{
justify-content:flex-start;
}
.ts-mail-filter-shell{
position:static;
top:auto;
right:auto;
left:auto;
width:100%;
max-width:none;
opacity:1;
transform:none;
z-index:auto;
}
.ts-mail-filter-shell[hidden]{
display:block !important;
}
.ts-mail-focus-shell.is-filter-open .ts-mail-filter-shell{
opacity:1;
transform:none;
}
.ts-mail-filter-overlay,
.ts-mail-filter-close{
display:none !important;
}
.ts-mail-filter-panel{
padding:0;
border:none;
background:transparent;
box-shadow:none;
}
.ts-mail-filter-panel-head{
display:block;
margin-bottom:14px;
}
.ts-mail-filter-panel-head > div{
max-width:none;
}
.ts-mail-filter-panel-title{
font-size:20px;
}
.ts-mail-filter-form{
gap:16px;
margin-top:0;
}
.ts-mail-filter-section-grid{
grid-template-columns:1fr;
gap:16px;
}
.ts-mail-filter-choice-grid{
display:grid;
grid-template-columns:1fr;
gap:8px;
}
.ts-mail-filter-choice span{
width:100%;
justify-content:flex-start;
min-height:44px;
border-radius:16px;
}
.ts-mail-filter-range{
grid-template-columns:1fr;
}
.ts-mail-filter-footer{
flex-direction:column;
align-items:stretch;
}
.ts-mail-filter-footer .ts-mail-filter-reset-link,
.ts-mail-filter-footer .ts-mail-card-cta{
width:100%;
justify-content:center;
}
.ts-mail-filter-apply{
min-width:0;
}
.ts-mail-filter-preferences{
margin-top:14px;
}
.ts-mail-filter-preferences-form .ts-mail-secondary-link{
width:100%;
justify-content:center;
}
.ts-mail-toolbar-actions-sidebar{
width:100%;
display:grid;
gap:10px;
}
.ts-mail-sidebar-actions{
display:grid;
gap:8px;
width:100%;
}
.ts-mail-sidebar-actions .ts-mail-inline-form{
width:100%;
}
.ts-mail-sidebar-action{
width:100%;
min-height:44px;
padding:0 16px;
border-radius:16px;
border:1px solid rgba(15,23,42,.10);
background:#ffffff;
color:var(--ts-accent);
font-size:12px;
line-height:1.35;
font-weight:700;
font-family:inherit;
text-align:left;
display:inline-flex;
align-items:center;
justify-content:flex-start;
cursor:pointer;
transition:box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.ts-mail-sidebar-action:hover{
box-shadow:0 10px 18px rgba(15,23,42,.05);
border-color:rgba(15,23,42,.14);
text-decoration:none;
color:inherit;
}
.ts-mail-body{
grid-column:2;
grid-row:2;
display:block;
min-width:0;
}
.ts-mail-main{
display:grid;
gap:16px;
align-content:start;
}
}
@media (min-width: 1200px) and (max-width: 1399.98px){
.ts-notification-shell{
width:min(1440px, calc(100vw - 20px));
margin-left:10px;
grid-template-columns:minmax(248px, 278px) minmax(0,1fr);
gap:16px;
}
.ts-mail-focus-shell{
padding:16px;
}
}
/* =========================================================
TS NOTIFICATIONS - COMPACT DESKTOP FLOW
Remove grid track gaps and pin the sidebar to the left.
========================================================= */
@media (min-width: 1200px){
.ts-notification-shell{
display:flow-root;
width:min(1720px, calc(100vw - 16px));
margin:0 auto 0 8px;
}
.ts-mail-focus-shell{
float:left;
width:304px;
margin:0 18px 18px 0;
}
.ts-mail-hero,
.ts-mail-body{
margin-left:322px;
width:auto;
}
.ts-mail-hero{
margin-bottom:14px;
}
.ts-mail-body{
clear:none;
}
}
@media (min-width: 1200px) and (max-width: 1399.98px){
.ts-notification-shell{
width:min(1460px, calc(100vw - 14px));
margin-left:6px;
}
.ts-mail-focus-shell{
width:282px;
margin-right:16px;
}
.ts-mail-hero,
.ts-mail-body{
margin-left:298px;
}
}
/* =========================================================
TS NOTIFICATIONS - RIGHT ACTION RAIL
Bulk selection tools move into a sticky bar on the right.
========================================================= */
@media (min-width: 1200px){
.ts-mail-feed-shell.has-right-rail{
grid-template-columns:minmax(0,1fr) 252px;
gap:18px 20px;
align-items:start;
display:grid;
}
.ts-mail-feed-panel{
min-width:0;
}
.ts-mail-action-rail{
position:sticky;
top:22px;
align-self:start;
}
.ts-mail-feed-toolbar-rail{
display:grid;
grid-template-columns:1fr;
gap:14px;
padding:18px 16px;
border-radius:24px;
background:linear-gradient(180deg, rgba(248,250,252,.98), rgba(242,245,249,.95));
box-shadow:0 16px 32px rgba(15,23,42,.07);
}
.ts-mail-feed-toolbar-rail .ts-mail-feed-toolbar-copy{
gap:8px;
}
.ts-mail-feed-toolbar-rail .ts-mail-feed-toolbar-copy strong{
font-size:15px;
line-height:1.35;
}
.ts-mail-feed-toolbar-rail .ts-mail-feed-toolbar-copy span{
font-size:12px;
line-height:1.6;
}
.ts-mail-feed-toolbar-rail .ts-mail-feed-bulk-form{
display:grid;
gap:12px;
justify-content:stretch;
}
.ts-mail-feed-toolbar-rail .ts-mail-feed-bulk-actions{
display:grid;
grid-template-columns:1fr;
gap:10px;
}
.ts-mail-feed-toolbar-rail .ts-mail-feed-bulk-actions > .ts-mail-secondary-link,
.ts-mail-feed-toolbar-rail .ts-mail-feed-bulk-actions > .ts-mail-card-cta{
width:100%;
justify-content:center;
min-height:42px;
}
}
@media (min-width: 1200px) and (max-width: 1399.98px){
.ts-mail-feed-shell.has-right-rail{
grid-template-columns:minmax(0,1fr) 236px;
gap:16px 18px;
}
.ts-mail-feed-toolbar-rail{
padding:16px 14px;
}
}
/* =========================================================
TS NOTIFICATIONS - COMPACT HERO BAR
Keep only the title stack on desktop.
========================================================= */
@media (min-width: 1200px){
.ts-mail-header-summary,
.ts-mail-summary-panel{
display:none;
}
.ts-mail-hero{
width:100%;
margin-bottom:10px;
}
.ts-mail-hero-main{
width:100%;
padding:12px 20px;
border-radius:20px;
}
.ts-mail-hero-main::after{
display:none;
}
.ts-mail-hero-row{
grid-template-columns:1fr;
gap:0;
align-items:center;
}
.ts-mail-title{
font-size:clamp(22px, 2.35vw, 32px);
max-width:none;
}
.ts-mail-copy{
margin-top:6px;
max-width:none;
}
}
/* =========================================================
TS NOTIFICATIONS - BULK COMMAND STRIP
Keep selection controls in a calm horizontal bar.
========================================================= */
.ts-mail-command-strip{
margin-bottom:12px;
}
@media (min-width: 1200px){
.ts-mail-feed-toolbar-strip{
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
gap:14px 18px;
padding:12px 16px;
border-radius:20px;
background:linear-gradient(180deg, rgba(248,250,252,.98), rgba(243,246,249,.95));
box-shadow:0 12px 24px rgba(15,23,42,.05);
}
.ts-mail-feed-toolbar-strip .ts-mail-feed-toolbar-copy{
gap:3px;
}
.ts-mail-feed-toolbar-strip .ts-mail-feed-toolbar-copy-iconic{
gap:10px;
}
.ts-mail-feed-toolbar-strip .ts-mail-feed-toolbar-copy strong{
font-size:14px;
}
.ts-mail-feed-toolbar-strip .ts-mail-feed-toolbar-copy span{
font-size:12px;
line-height:1.45;
}
.ts-mail-feed-toolbar-strip .ts-mail-feed-bulk-form{
display:flex;
align-items:center;
justify-content:flex-end;
gap:10px;
}
.ts-mail-feed-toolbar-strip .ts-mail-feed-bulk-actions{
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
gap:10px;
}
.ts-mail-feed-toolbar-strip .ts-mail-feed-bulk-actions > .ts-mail-secondary-link,
.ts-mail-feed-toolbar-strip .ts-mail-feed-bulk-actions > .ts-mail-card-cta{
min-height:38px;
padding:0 14px;
white-space:nowrap;
}
}
/* Header bell dropdown polish */
.dropdown-bell-list-box-h-icon{
display:inline-flex;
align-items:center;
justify-content:center;
}
.dropdown-bell-list-box-h-icon .ts-bell-icon-fallback{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
line-height:1;
font-weight:700;
}
.dropdown-bell-list-box-baslik a{
word-break:break-word;
}
@media (min-width: 1200px){
.desktop-header-area .dropdown-menu.bell-drop{
width:376px !important;
}
.desktop-header-area .dropdown-bell-list-box-h{
display:grid !important;
grid-template-columns:34px minmax(0, 1fr) !important;
column-gap:12px !important;
row-gap:8px !important;
align-items:start !important;
}
.desktop-header-area .dropdown-bell-list-box-h-icon{
grid-column:1 !important;
grid-row:1 / span 2 !important;
box-shadow:inset 0 0 0 1px #edf1f5 !important;
}
.desktop-header-area .dropdown-bell-list-box-h-icon i,
.desktop-header-area .dropdown-bell-list-box-h-icon svg,
.desktop-header-area .dropdown-bell-list-box-h-icon .ts-bell-icon-fallback{
font-size:15px !important;
line-height:1 !important;
}
.desktop-header-area .dropdown-bell-list-box-baslik{
min-width:0 !important;
padding-right:0 !important;
}
.desktop-header-area .dropdown-bell-list-box-baslik a{
display:block !important;
color:#24324a !important;
}
.desktop-header-area .dropdown-bell-list-box-date{
grid-column:2 !important;
justify-self:start !important;
margin-left:0 !important;
top:auto !important;
right:auto !important;
}
.desktop-header-area .dropdown-bell-list-box-s{
max-width:100% !important;
overflow-wrap:anywhere !important;
}
}
/* Registration country / phone empty-state icon polish */
.register-country-trigger-flag,
.register-country-option-flag{
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
}
.register-placeholder-icon{
display:block;
width:22px;
height:22px;
object-fit:contain;
background:none !important;
border:0 !important;
box-shadow:none !important;
filter:grayscale(1) contrast(1.22) brightness(.72);
}
.register-placeholder-icon-country{
width:25px;
height:25px;
filter:grayscale(1) contrast(1.35) brightness(.58);
}
.register-placeholder-icon-phone{
width:21px;
height:21px;
}
.iti.ts-phone-country-placeholder .iti__selected-dial-code,
.iti.ts-phone-country-placeholder .iti__selected-country .iti__flag,
.iti.ts-phone-country-placeholder .iti__selected-country-primary > .iti__flag,
.iti.ts-phone-country-placeholder .iti__selected-flag > .iti__flag{
display:none !important;
}
.iti.ts-phone-country-placeholder .iti__selected-country{
min-width:60px;
justify-content:center;
}
.iti.ts-phone-country-placeholder .iti__selected-country-primary,
.iti.ts-phone-country-placeholder .iti__selected-flag{
display:flex;
align-items:center;
gap:7px;
}
.iti.ts-phone-country-placeholder .ts-phone-placeholder-icon{
flex:0 0 auto;
margin-right:2px;
}
/* =========================================================
ORDER PAGES | FINAL POLISH
========================================================= */
.ts-user-order-card-meta-item.is-active{
background:#fff5e8;
color:#a96716;
}
.ts-user-order-card-meta-item.is-alert,
.ts-user-order-card-meta-item.is-locked{
background:#fff1ef;
color:#b14f48;
}
.ts-user-order-card-meta-item.is-approved,
.ts-user-order-card-meta-item.is-success{
background:#edf8f1;
color:#1f7d4e;
}
.ts-user-order-card-meta-item.is-review,
.ts-user-order-card-meta-item.is-info{
background:#eef4ff;
color:#2b67b2;
}
.ts-user-order-status-pill{
transition:background-color .18s ease, color .18s ease, transform .18s ease;
}
.ts-user-order-detail-page .ts-order-hero-chip{
transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.ts-user-order-detail-page .ts-order-hero-chip.is-info{
background:#eef4ff;
color:#2b67b2;
}
.ts-user-order-detail-page .ts-order-hero-chip.is-success{
background:#edf8f1;
color:#1f7d4e;
}
.ts-user-order-detail-page .ts-order-hero-chip.is-danger{
background:#fff1ef;
color:#b14f48;
}