*{
outline:none;
box-sizing: border-box;
}

.parlaklik {
  overflow: hidden;
  position: relative;
}

.parlaklik::before {
  position: absolute;
  top: 0;
  left: -85%;
  z-index: 1;
  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);
}

@keyframes shine {
  10% {
    opacity: 1;
    top: 1%;
    left: 135%;
    transition-property: left, top, opacity;
    transition-duration: 0.6s, 0.6s, 0.15s;
    transition-timing-function: ease;
  }
  100% {
    opacity: 0;
    top: 125%;
    left: 124%;
    transition-property: left, top, opacity;
  }
}

.parlaklik:hover::before {
  animation: shine 5s ease-in-out forwards; /* Hover durumunda animasyonu başlat ve sonunda durdur */
}

a{
color:#000;
text-decoration:none;
transition: color 0.3s ease-in-out;
}

a:hover{
color:#555;
}



body{
margin:0 auto;
padding:0;
font-family: "Open Sans", sans-serif;
font-size:1rem;
font-weight:400;
max-width:1600px;
}

#header{
height:80px;
width: 100%;
}

.sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0 2px 3px rgba(0,0,0,.08);
  background:#fff;
  z-index: 999;
}

.header{
max-width:1400px;
padding:0px;
margin: 0 auto;
}

.logo{
float:left;
padding:20px 20px 0 10px;
}

.logo img{
width:110px
}

.menu{
float:left;
margin-left:20px;
display: inline-block;
}

.menu ul{
list-style: none;
padding: 0;
margin: 0;
}

.menu li{
float:left;
position: relative;
display: inline-block;
}

.menu li::after{
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-color: transparent;
transition: background-color 0.3s ease;
}

.menu li:hover::after{
background-color: #555;
}

.menu li a{
display:block;
padding:30px 20px;
cursor:pointer;
}

.mega-menu{
background:#fdfdfd;
box-shadow: 0 2px 3px rgba(0,0,0,.08);
display: none;
position: absolute;
top: 100%;
width:400px;
transition: transform 0.5s ease;
padding: 10px 0;
z-index: 999;
}

.menu ul li:hover .mega-menu {
display: block;
}

.mega-menu ul{
margin:0 auto;
list-style:none;
padding:0;
}

.mega-menu li{
padding:0;
width:50%
}

.mega-menu li a{
display:block;
padding:10px 15px;
font-size:14px;
font-weight:400
}

.mega-menu li a:hover{
background:#f3f3f3;
}

.mega-menu li:hover::after{
background-color:#f3f3f3;
}

.mega-menu-trigger i{
padding:3px 0 0 0px;
display:block;
float:right;
transition: transform 0.3s ease;
margin-left:5px;
}

.mega-menu-trigger:hover i {
transform: rotate(180deg);
}

.signin {
float: inline-end;
padding:0 10px 0 0 ;
}

.arama{
  margin: 16px 0 0 0;
  border: 1px solid #ddd;
  border-radius:4px;
  padding: 2px;
  width: 60%;
  margin: 0 auto;
  background: #fff;
}

.aramayap{
  float: left;
  margin: 24px 0 0 0;
  border-radius:4px;
  padding: 2px;
  font-size: 20px;
  cursor: pointer;
}

.arama input{
  width: 90%;
  height: 40px;
  border:none;
  padding: 0 10px;
  font-family: "Open Sans", sans-serif;
}

.arama button{
  background:none;
  border: none;
  font-size: 21px;
  display: block;
  float: right;
  margin-top: 7px;
  cursor: pointer;
  display: block;
  float: right;
  width: 5%;
  text-align: center;
}

.signin{
  float: right;
}

.giris{
  float: left;
  padding: 25px 0 0 40px
}

.sepet{
  float: right;
  padding: 25px 0 0 40px;
  font-size: 21px;
}

.sepet i{
  display: block;
  float: left;
}

.sepet span{
  width: 18px;
  height: 18px;
  background:#555;
  display: block;
  font-size: 10px;
  color: #fff;
  text-align: center;
  border-radius: 50%;
  line-height: 18px;
  position: relative;
  margin-left:-8px;
  display: block;
  float: left;
  font-weight: 600;
}

#slayt{
 overflow: hidden;
  padding:0px;
  width: 100%;
  margin-top: 10px;
}

.slayt{
  max-width: 1400px;
  margin: 0 auto;
}

.slayt-bir{
  width: 50%;
  float: left;
  background:#f4f4f4;
}

.slayt-iki{
  width: 50%;
  float: right;
  background:#ece7e3;
}

.yazi-ufak{
  text-align: right;
  padding: 50px 20px 0 0;
  font-size: 42px;
  opacity: 0.04;
}

.yazi-ufak span{
  font-size: 200px;
  display: block;
  font-weight: 700;
  margin-top: -30px;
}

.yazi-ufak-iki{
  padding: 50px 0px 0 20px;
  font-size: 42px;
  text-align: left;
  opacity: 0.04;
}

.yazi-ufak-iki span{
  font-size: 200px;
  display: block;
  font-weight: 700;
  margin-top: -30px;
}

.model-bir{
  position: relative;
  margin-top: -300px;
  text-align: center;
  height: 600px;
}

.model-iki{
  position: relative;
  margin-top: -300px;
  text-align: center;
  height: 600px
}

.kadin-ozel{
  text-align: center;
  font-size: 20px;
  float: right;
  background:#fff;
  margin-top: -150px;
  position: relative;
  z-index: 99;
  padding:20px;
  margin-right: 20px;
  border-radius:5px;
  box-shadow: 0 2px 3px rgba(0,0,0,.08);
  color: #555;
}

.erkek-ozel{
  text-align: center;
  font-size: 20px;
  float: left;
  background:#fff;
  margin-top: -150px;
  position: relative;
  z-index: 99;
  padding:20px;
  margin-left: 20px;
  border-radius:5px;
  box-shadow: 0 2px 3px rgba(0,0,0,.08);
  color: #555;
}

#content{
  min-height: 400px;
  max-width: 1400px;
  margin:0 auto;
}

.ozelbaslik{
  font-size: 22px;
  font-weight: 700;
  padding:20px 2% 20px 2%;
}

.onecikanurunler{
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  padding:0 2%
}

.urunlerone{
  width: 19%;
  float: left;
  border: 1px solid #f1f1f1;
  border-radius: 4px;
  transition: color 0.3s ease-in-out;
  padding:5px 5px 0 5px;
  margin-right: 1%;
  margin-bottom: 1%;
}

.urunlerone:hover{
  box-shadow: 0 2px 3px rgba(0,0,0,.08);
}

.onresim{
  overflow: hidden;
}

.onresim img{
  width: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.onbaslik{
  overflow: hidden;
}

.onbaslik a{
  font-size: 13px;
  font-weight: 600;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding:10px 10px 5px 0
}

.onbaslik span{
  padding: 0 0 10px 0;
  display: block;
  font-weight: 700;
  font-size:17px;
}

.bannerlar{
  padding: 50px 0 0 0;
}

.banner1{
  width: 58%;
  float: left;
}

.banner2{
  width: 20%;
  float: left;
  margin-left: 1%;
}

.banner3{
  width: 20%;
  float: right;
}

.banner1 img{
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.banner2 img{
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.banner3 img{
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.katalog{
  overflow: hidden;
  padding:20px;
  max-width: 1400px;
  margin: 30px auto;
  border: 1px solid #f1f1f1;
}

.gozat{
  overflow: hidden;
  width: 70%;
  font-size: 24px;
  font-weight: 700;
  color: #000;
  float: left;
}

.gozat span{
  font-size: 14px;
  display: block;
  font-weight: 300;
  padding:5px 0 0 0;
}

.katalogbak{
  float: left;
  width: 30%;
  
  color: #fff;
  text-align: center;
}

.katalogbak a{
  color: #fff;
  display: block;
  padding:20px 0;
  background-color: #000;
}

.katalogbak a:hover{
  background-color: #333;
}

#footer{
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 2%
}

.footer{
  max-width: 1400px;
  margin: 0 auto;
  min-height: 100px;
  display: flex;
  flex-wrap: wrap;
  padding:50px 0;
  border-top: 1px solid #f1f1f1;
}

.footerblok{
  overflow: hidden;
  width: 16%;
  padding: 0 1% 0 0;
}

.footer-baslik{
  font-weight: 700;
  margin-bottom: 20px;
}

.blok{
  padding: 5px 0;
  font-size: 13px;
  color: #333;
}

#copy{
 overflow: hidden;
 padding: 0 2%
}

.copy{
  max-width: 1400px;
  margin: 0 auto;
  padding:10px 0;
  border-top: 1px solid #f1f1f1;
  font-size: 13px;
}

.copy span{
  float: right;
  display: block;
}

.copy span img{
  width: 200px;
}

#aramodal{
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 99999;
  background:#3333335e;
  top: 0;
  padding-top: 20px;
  display:none;
}

#bread{
clear:both;
max-width:1400px;
margin:0 auto;
text-align:center;
border-top:1px solid #f1f1f1;
border-bottom:1px solid #f1f1f1;
padding:15px 0 10px 0;
display: flex;
justify-content: center;
background-image: radial-gradient(circle at 50% 13%,#f7f7f7a3,#ffffff);
}

#bread span{
font-size:14px;
font-weight:600;
color:#333;
}

#bread i{
font-size:18px;
margin:4px 0 0 0;
}


.offcanvas {
position: fixed;
top: 0;
right: -310px; /* Başlangıçta sağa gizle */
width: 300px;
height: 100%;
background-color: #fff;
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
transition: right 0.3s ease-in-out;
z-index:999999;
}

.offcanvas-content{
height:100vh;
overflow:auto;
padding:10px;
}

.sepet{
cursor: pointer;
}

.kategori-sol{
width:20%;
float:left;
}

.kategori-sag{
width:80%;
overflow:hidden;
}

#onecikanurunler .urunlerone{
width:24%!important;
}

.ozelbaslik span{
float:right;
font-weight:400;
font-size:13px;
line-height:30px;
margin-right:1%;
}

.kategori-sol{
overflow:hidden;
padding:25px 0 0 0;
}

.kategori-sol ul{
list-style: none;
padding: 0;
margin: 0;
}

.kategori-sol li{
padding:10px;
background-image: radial-gradient(circle at 50% 13%,#f7f7f7a3,#ffffff);
border-bottom:1px solid #f1f1f1;
}

.filtrele{
padding:10px;
border-bottom:1px solid #f1f1f1;
font-weight:600
}

.filtrele i{
display:block;
float:left;
padding:2px 4px 0 0;
}

.urundetay{
max-width:1400px;
margin:0 auto;
overflow:hidden;
padding:20px 0;
}

.urun-gorsel{
width:400px;
float:left;
}

.urun-gorsel img{
width:100%;
object-fit:cover;
}

.detay-baslik{
overflow:hidden;
font-size:32px;
font-weight:600;
padding:0 0 10px 0;
font-family: 'Pathway Gothic One', sans-serif;
color:#1c1c1c
}

.detay-baslik span{
display:block;
font-size:13px;
font-weight:400;
padding:10px 0 0 0 ;
font-family:open sans;
}

.detay-yildiz{
color:#FFCC00;
font-size:20px;
}

.detay-fiyat{
font-family: 'Pathway Gothic One', sans-serif;
font-size:44px;
font-weight:800
}

.detay-fiyat span{
font-size:13px;
font-weight:normal;
color:#333;
display:block;
font-family:open sans;
}

.mobildeacil{
display:none;
}

.urungorsel{
overflow:hidden;
width:755px;
float:left;
}

.bigimg{
width:500px;
float:left;
overflow:hidden;
margin-right:5px;
}

.bigimg img{
width:503px;
object-fit:cover;
}

.smallimg{
width:250px;
float:left;
}

.resimufak img{
width:100%;
}

.urun-bilgi{
float:right;
width:620px;
overflow:hidden;
}


.eklebeden{
overflow:hidden;
padding:10px;
}

.squareBase{
min-width:35px;
padding:0 5px;
height:35px;
line-height:35px;
text-align:center;
display:block;
float:left;
margin-right:10px;
border:1px solid #ddd;
font-size:14px;
cursor:pointer;
font-weight:600;
}

.eklebeden input{
display:none;
}

.bedensecin{
border-bottom:1px solid #eee;
font-size:16px;
margin-bottom:10px;
padding:20px 0 8px 0;
font-weight:600;
}

.bedensecin i{
display:block;
float:left;
margin-top:3px;
margin-right:3px;
}

.sbuton{
border-radius:4px;
padding:10px;
margin:0 auto;
margin-bottom:10px;
overflow:hidden;
margin-top:10px;
font-weight:normal
}

.bedeninfo{
font-size:11px;
font-weight:400;
padding:0 10px;
}

.sadet{
overflow:hidden;
width:80%;
float:left;
}

.skapat{
width:20%;
float:right;
background:#eee;
line-height:40px;
text-align:center;
font-size:14px;
}

.sadet button{
background:#ffa310;
color:#fff;
width:100%;
border:none;
outline:none;
padding:0 10px;
font-size:17px;
height:40px;
cursor:pointer;
}

.eklebeden input[type="radio"]:checked + .squareBase  {
  background-image: radial-gradient(circle at 50% 13%,#ffa310,#ffa310);
  color:#fff;
  border:1px solid #ffa310;
}

.sepetegitsinmi{
overflow:hidden;
position:fixed;
width:90%;
background:#fff;
box-shadow: 0px 0px 8px 1px rgb(0 0 0 / 15%);
z-index:999999;
top:30%;
left:5%;
}

.sepetegitsinmi b{
text-align:center;
display:block;
font-weight:normal;
margin:10px;
border:1px solid #eee;
padding:10px 0;
}

.success-message{
padding:10px;
background:#a1de53;
border:1px solid #74b324;
text-align:center;
font-size:13px;
color:#fff;
border-radius:4px;
margin:0 2%;
margin-bottom:10px;
}

#toastMessage {
    position: fixed;
    bottom: 10%;
	margin:0 auto;
    margin-left: 5%;
	width:90%;
    background:linear-gradient(to right, #ff416c, #ff4b2b);
    color: #fff;
    padding:10px 0;
	text-align:center;
    border-radius: 5px;
    transition: opacity 0.5s;
    opacity: 0;
	display:none;
	
}

#toastMessage.show {
    opacity: 1;
	display:block;
	z-index:99999999999;
}

.hidden {
    display: none;
}



.kat-urun img{
width:100%;
object-fit:cover;
border-radius:5px;
}

.benzer{
width:20%!important;
float:left;
height:160px;
overflow:hidden;
padding:2% 0 0% 2%;
}

.benzer img{
width:100%;
object-fit:cover;
border-radius:5px;
}

.kat-urun span{
display:block;
text-overflow: ellipsis;
overflow: hidden; 
white-space: nowrap;
font-size:12px;
color:#fff;
}

.kat-urun em{
display:block;
font-size:18px;
font-family: 'Pathway Gothic One', sans-serif;
font-style:normal;
color:#fff;
font-size:16px;
font-weight:600;
letter-spacing:1px
}

.urun-fiyat{
overflow:hidden;
position:relative;
margin-top:-76px;
padding:10px 5px 5px 5px;
background-image: linear-gradient(to bottom, #fff0, #00000096);
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}


.sepetlegitsin{
overflow:hidden;
border:1px solid #eee;
margin-bottom:15px;
padding:5px 5px 5px 5px;
box-shadow: 0px 0px 7px -1px rgb(0 0 0 / 14%);
}

.sepetleresim{
width:15%;
overflow:hidden;
float:left;
padding:5px 0 0 0;
}

.sepetlebilgi{
float:left;
overflow:hidden;
width:85%;
}

.sepetleresim img{
width:100%;
}

.sepetleurunadi{
overflow:hidden;
padding:0 10px;
font-size:14px;
font-weight:600;
color:#000
}

.sepetleurunadi span{
display:block;
font-size:12px;
font-weight:normal;
}

.sepetlefiyatlar{
padding:0 10px;
overflow:hidden;
margin-top:5px;
padding:0 10px
}

.sepetlefiyatlar span{
display:block;
float:left;
width:31%;
font-size:13px;
padding:2px 0;
font-weight:500;
}


.sepetlefiyatlar span:nth-child(1)::before{
display:none;
}

.sepetlefiyatlar span:nth-child(4){
width:7%;
font-size:18px;
}

.sepetlefiyatlar span i{
padding:14px 0 0 0;
display:block;
color:#8f8f8f;
}

.sepetlefiyatlar span em{
display:block;
font-size:11px;
font-style:normal;
font-weight:600;
color:#3d3e46;
}

.sepetlefiyatlar span b{
display:block;
float:left;
width:20px;
height:20px;
background:#2778c4;
text-align:center;
font-weight:normal;
color:#fff;
border-radius:4px;
}

.sepetlefiyatlar span a{
display:block;
float:left;
width:20px;
height:20px;
text-align:center;
font-weight:600;
}

.sepettitlem{
overflow:hidden;
font-size:21px;
padding:0 0 10px 0;
}

#sepetsatinal{
width:100%;
overflow:hidden;
z-index:9;
bottom:0;
left:0;
font-size:12px;
}

.odemebutonus{
overflow:hidden;
background:linear-gradient(to right, #2778c4, #2778c4);
color:#fff;
font-size:16px;
padding:10px 0;
width:50%;
float:right;
text-align:center;
margin-right:2%;
margin-top:6px;
font-family: 'Pathway Gothic One', sans-serif;
cursor:pointer;
}

.odemetoplamfiyat{
float:left;
overflow:hidden;
text-align:center;
width:45%;
padding:7px 0 0 0;
font-family: 'Pathway Gothic One', sans-serif;
font-size:24px;
}

.odemetoplamfiyat span{
display:block;
font-size:11px;
}

.sepetbosimg{
overflow:hidden;
text-align:center;
padding:20px 0 0 0;
}

.sepetbosimg img{
width:60%;
}

.sepetyoktext{
text-align:center;
padding:20px 0 0 0;
}