/* Bu CSS, mobil cihazlarda "hover" yerine "tap" olayini dinler */
@media only screen and (max-width: 1024px) {
    .menu ul li:hover .mega-menu {
        display: block;
		position:inherit
    }
}

@media screen and (max-width:1024px) and (min-width:120px) {

    #header{
        height:auto;
        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: 98;
        }
        
        .header{
        max-width:1400px;
        padding:0px;
        margin: 0 auto;
        }
        
        .logo{
        float:left;
        padding:20px 20px 15px 10px;
        }
        
        .logo img{
        width:110px
        }
        
        .menu{
        float:left;
        margin-left:20px;
        display: inline-block;
        display: none;
        }
        
        .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;
        }
        
        .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;
          display: none;
        }
        
        .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: 27px 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: 150px;
          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: 150px;
          display: block;
          font-weight: 700;
          margin-top: -30px;
        }
        
        .model-bir{
          position: relative;
          margin-top: -200px;
          text-align: center;
          height: auto;
        }

        .model-bir img{
            width: 100%;
        }
        
        .model-iki{
          position: relative;
          margin-top: -200px;
          text-align: center;
          height: auto
        }
        
        .model-iki img{
            width: 100%;
        }

        .kadin-ozel{
          text-align: center;
          font-size: 13px;
          float: right;
          background:#fff;
          margin-top: -40px;
          position: relative;
          z-index: 99;
          padding:10px;
          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: 13px;
            float: right;
            background:#fff;
            margin-top: -40px;
            position: relative;
            z-index: 99;
            padding:10px;
            margin-right: 20px;
            border-radius:5px;
            box-shadow: 0 2px 3px rgba(0,0,0,.08);
            color: #555;
        }
        
        #content{
          min-height: 100px;
          max-width: 1400px;
          margin:0 auto;
        }
        
        .ozelbaslik{
          font-size: 22px;
          font-weight: 700;
          overflow: hidden;
          padding:20px 2% 15px 2%;
        }
        
        .onecikanurunler{
          overflow: hidden;
          display: flex;
          flex-wrap: wrap;
          padding:0 2%
        }
        
        .urunlerone{
          width: 49%;
          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: 500;
        }
        
        .bannerlar{
          padding: 20px 0 0 0;
        }
        
        .banner1{
          width: 100%;
          float: none;
          padding:0 1%
        }
        
        .banner2{
          width: 49%;
          float: left;
        }
        
        .banner3{
          width: 49%;
          float: none;
        }
        
        .banner1 img{
          width: 100%;
          height: auto;
          object-fit: cover;
        }
        
        .banner2 img{
          width: 100%;
          height: auto;
          object-fit: cover;
        }
        
        .banner3 img{
          width: 100%;
          height: auto;
          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: 14px;
          font-weight: 700;
          color: #000;
          float: left;
          padding:8px 0 0 0;
          text-align: left;
        }
        
        .gozat span{
          font-size: 11px;
          display: block;
          font-weight: 300;
          padding:5px 0 0 0;
        }
        
        .katalogbak{
          float: left;
          width: 30%;
          color: #fff;
          text-align: center;
          font-size: 12px;
          border-radius: 10px;
        }
        
        .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:20px 0;
          border-top: 1px solid #f1f1f1;
        }
        
        .footerblok{
          overflow: hidden;
          width: 50%;
          padding: 0 1% 20px 0;
        }
        
        .footer-baslik{
          font-weight: 700;
          margin-bottom: 10px;
        }
        
        .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; /* Baslangiçta saga 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:99;
}

.offcanvas-content{
padding:10px;
}

.sepet {
cursor: pointer;
}

.kategori-sol{
width:100%;
float:inherit;
}

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

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

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

.kategori-sol{
overflow:hidden;
padding:10px 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:0 10px 10px 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:10px;
}

.urun-gorsel{
width:100%;
float:none;
}

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

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

.detay-baslik span{
display:block;
font-size:13px;
font-weight:400;
padding:5px 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:24px;
font-weight:800
}

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

.mobildeacil{
display:block;
}

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

.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:none;
width:100%;
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;
}


.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:33%!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:-65px;
padding:10px 5px 5px 5px;
background-image: linear-gradient(to bottom, #fff0, #00000096);
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}

}