#urunler{} #urunler .head1{position:relative;z-index:1;padding-top:24%;margin:0 0 50px 0;} #urunler .head1:before{ content:"";position:absolute;z-index:2;left:0;top:0;width:100%;height:100%;background:#000;opacity:0.6; } #urunler .head1 img.back{ display:block; position:absolute;z-index:1;left:0;top:0;width:100%;height:100%;object-fit:cover; } #urunler .head1 img.mover{ position:absolute;z-index:3;left:56%;top:0;width:auto;height:100%; scale:1.2; transform:translate(-50%,0); animation-name:head1effect1; animation-delay:2000ms; animation-duration:3000ms; animation-timing-function:ease; animation-iteration-count:infinite; animation-direction:alternate; } #urunler .head1 h1{ position:absolute;z-index:4;left:50%;bottom:10px;translate:-50% 0;text-align:center; padding:0!important;margin:0!important;font-weight:normal;font-size:3rem;letter-spacing:2px; /*-webkit-text-stroke: 1px #30d5c8;color:transparent;*/color:#fff; } @media only screen and (max-width:1200px){ #urunler .head1 h1{font-size:2rem;} } @media only screen and (max-width:1000px){ #urunler .head1{padding-top:25%;} } @media only screen and (max-width:700px){ #urunler .head1{padding-top:40%;} #urunler .head1 h1{font-size:1.8rem;} } @media only screen and (max-width:500px){ #urunler .head1{padding-top:55%;} #urunler .head1 h1{font-size:1.1rem;} } @keyframes head1effect1 { /* 0%{} 50%{left:90%;} */ 0%{left:56%;} 100%{left:90%;} } #urunler .grid1wrap{margin:40px 0 0 0;} #urunler .grid1{min-height:30vh;display:grid;grid-template-columns:280px 1fr;grid-gap:60px;} #urunler .grid1s{} #urunler .grid1s.s1{/*background:#e5e5e5;*/} #urunler .grid1s.s1 .nav1wrapper{ position: sticky; top:130px; } #urunler .grid1s.s1 .nav1_toggle_wrap{display:none;padding:0 15px;text-align:right;} #urunler .grid1s.s1 a.nav1_toggle{ display:inline-block;padding:6px 15px;color:#2db8c5;font-family:'poppins_semibold'; background:#fff;border:1px solid #2db8c5; } #urunler .grid1s.s1 a.nav1_toggle span.text{margin:0 10px 0 0;} #urunler .grid1s.s1 a.nav1_toggle span.icon{} #urunler .grid1s.s1 .nav1{} #urunler .grid1s.s1 .nav1 ul{list-style:none;} #urunler .grid1s.s1 .nav1 ul li{background:#DADADA;} #urunler .grid1s.s1 .nav1 > ul > li{margin:0 0 5px 0;background:#DADADA;} #urunler .grid1s.s1 .nav1 ul li a{ position:relative;z-index:1; display:block;padding:15px 20px; font-size:0.9rem;font-family:'poppins_semibold';color:#333; text-decoration:none; border-bottom:1px solid #ddd; } #urunler .grid1s.s1 .nav1 ul li a .first{font-family:'poppins_extrabold';} #urunler .grid1s.s1 .nav1 ul li a .icon1{display:none; position:absolute;z-index:1;right:0;top:50%;transform:translate(0,-50%); } #urunler .grid1s.s1 .nav1 ul li a .icon1 img{height:30px;width:auto;} #urunler .grid1s.s1 .nav1 ul ul{display:none;} #urunler .grid1s.s1 .nav1 ul ul li{} #urunler .grid1s.s1 .nav1 ul ul li a{padding:8px 20px 8px 40px;background:#fff;} #urunler .grid1s.s1 .nav1 ul li a:before{ content:"";position:absolute;z-index:-2;left:0;top:0;width:100%;height:100%; /*box-shadow:inset 0 0 10px 0 #000;*/ } #urunler .grid1s.s1 .nav1 ul li a:after{ opacity:0; content:"";position:absolute;z-index:-2;left:0;top:0;width:4px;height:100%; background:transparent;/*box-shadow:inset 0 0 20px 2px #000;*/ background:#f1a500; transition:opacity 400ms; } #urunler .grid1s.s1 .nav1 ul li a:hover:after{opacity:1;} #urunler .grid1s.s1 .nav1 ul li.selected a:after{opacity:1;background:#f1a500;} #urunler .grid1s.s1 .nav1 ul li.selected > a .icon1{display:block;} #urunler .grid1s.s1 .nav1 ul li.selected > a .icon1 img{transform:translate(120%,0);} #urunler .grid1s.s2{} #urunler .grid1s.s2 h1.pagetitle{padding:0;margin:0 0 30px 0;font-weight:normal;color:#f1a500;font-size:1.5rem;font-family:'poppins_medium';text-align:left;} #urunler .grid1s.s2 .h1after{margin:0 0 20px 0;} #urunler .list1{position:relative;} #urunler .list1 .mover{ position:absolute;z-index:1;left:0;top:0;width:0;height:0;background:#22b9c4; } #urunler .list1 .grid{display:grid;grid-template-columns:1fr 1fr 1fr;grid-gap:20px;} #urunler .list1 .grid .s{position:relative;z-index:1;padding:15px;border:1px solid #ddd;} /*#urunler .list1 .grid .s:after{ content:"";position:absolute;z-index:-1;right:0;bottom:0;width:75px;max-width:50%;height:75px;max-height:50%; border-radius:0 0 25px 0;box-shadow:5px 5px 5px -5px #aaa; } */ #urunler .list1 .grid .s:before{ content:"";position:absolute;z-index:-1;left:0;top:0;width:100%;height:100%;background:#fff; opacity:0;transition:1500ms opacity; box-shadow:0 0 25px #aaa; } #urunler .list1 .grid .s:hover:before{opacity:1;} #urunler .list1 .grid .s a.img{position:relative;display:block;margin:0 0 5px 0;padding-top:100%;} #urunler .list1 .grid .s .img img{ position:absolute;z-index:1;left:0;top:0;width:100%;height:100%;object-fit:contain; } #urunler .list1 .grid .s .cat{margin:0 0 2px 0;text-align:left;font-size:0.9rem;} #urunler .list1 .grid .s .cat a{font-size:0.9rem;color:#999;} #urunler .list1 .grid .s a.name{display:block;margin:0 0 2px 0;/*font-family:'poppins_semibold';*/font-size:1.1rem;color:#00203e;} #urunler .list1 .grid .s .urunkodu{margin:0 0 2px 0;color:#f1a500;opacity:0.5;text-align:right;font-size:0.9rem;} #urunler .list1 .grid .s .info{color:#aaa;} @media only screen and (max-width:1600px){ #urunler .grid1{grid-template-columns:250px 1fr;} #urunler .grid1s.s1{padding:15px 0;} #urunler .grid1s.s1 .nav1 ul li a{padding:10px 10px;font-size:0.9rem;} #urunler .grid1s.s2{padding:0 0 0 0;} } @media only screen and (max-width:1350px){ #urunler .list1 .grid{grid-template-columns:1fr 1fr 1fr;} } @media only screen and (max-width:1100px){ #urunler .list1 .grid{grid-template-columns:1fr 1fr;} } @media only screen and (max-width:950px){ #urunler .grid1{grid-template-columns:1fr;} #urunler .grid1s.s1 .nav1_toggle_wrap{display:block;} #urunler .grid1s.s1 .nav1{display:none;margin:15px 0 0 0;} #urunler .grid1s.s1 .nav1 ul li.selected > a .icon1 img{display:none;} } @media only screen and (max-width:500px){ #urunler .list1 .grid{grid-template-columns:1fr;} }