html{
    scroll-behavior: smooth;
}

body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

a, button, input, textarea, select, option{
    font-family: 'Montserrat', sans-serif;
}

a{
    text-decoration: none;
    color: rgb(255, 255, 255);
    transition: ease .4s;
}

.urunler-kategori-div{
    position: fixed;
    z-index: 10;
    background-color: ;
    text-align: center;
    padding: 0.5vh;
    margin-left: 64vh;
    top: 15%;
    padding-top: 5vh;
    transition: visibility 0.3s linear,opacity 0.3s linear;
    opacity: 0%;
    visibility: hidden;
}

.urunler-kategori-div a{
    color: white;
    font-size: 1.8vh;
    background-color: rgb(22, 22, 22);
    padding: 0.5vh;
    border: 0.2vh solid white;
    border-radius: 1vh;
    display: inline-block;
    margin-top: 0.3vh;
    width: 15vh;
}

.whatsapp{
    width: 6vh;
    z-index: 10;
    position: fixed;
    top: 90%;
    left: 2%;
    animation: whatsapp 4000ms infinite ease;
}

@keyframes whatsapp {
    25%{
        top: 88%;
        -webkit-filter: drop-shadow(0vh 0vh 5vh rgb(0, 255, 0));
        filter: drop-shadow(0vh 0vh 5vh rgb(0, 255, 0));
    }
    50%{
        top: 90%;
        -webkit-filter: none;
        filter: none;
    }
}

.banner{
    background: url(banner.jpg) no-repeat center center fixed; 
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
    height: 60vh;
    display: inline-block;
}

.banner h1{
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    margin-top: 35vh;
    font-size: 4.5vh;
    letter-spacing: 1vh;
}

.header-cont{
    position: fixed;
    width: 100%;
    height: auto;
    z-index: 3;
}

.header-info-div{
    width: 100%;
    height: auto;
    background-color: rgba(29, 29, 29, 0.63);
    margin-top: 0vh;
    display: inline-block;
    border-bottom: 0.3vh solid #ecbc36;
}

.header-info-div img{
    width: 12vh;
    margin-left: 20%;
    float: left;
    margin-top: 1vh;
}

/* HEADER SAĞ TARAFI */

.header-info-cont{
    margin-right: 20%;
}

.header-info-sag{
    float: right;
    width: auto;
    height: auto;
    margin: 2vh;
}

.header-info-sag p{
    font-weight: 600;
    font-size: 1.8vh;
    color: #ecbc36;
}

.header-info-sag span{
    font-size: 1.7vh;
    font-weight: 500;
}

.header-info-sag a{
    border-bottom: 0.3vh solid transparent;
}

.header-info-sag a:hover{
    border-bottom: 0.3vh solid #ecbc36;
}

.header-info-sag i{
    color: #ecbc36 ;
}

/* HEADER SAĞ TARAFI BİTİŞ */

/* Header link başlangıç */

header{
    width: 100%;
    height: 8vh;
    margin-top: -0.4vh;
    background-color: rgba(29, 29, 29, 0.63);
    border-bottom-left-radius: 20vh;
    border-bottom-right-radius: 20vh;
    transition: ease .4s;
}

.header-logo{
    width: 7vh;
    float: left;
    margin-left: 10%;
    margin-top: 1vh;
    transition: visibility 0.3s linear,opacity 0.3s linear;
    visibility: hidden;
    opacity: 0%;
}

.header-link-cont{
    background-color: ;
    float: left;
    margin-left: 7%;
    margin-top: 1.5vh;
}

.header-link-cont button{
    padding: 1vh;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.5vh;
    background: none;
    border: 0.3vh solid transparent;
    transition: ease .4s;
    margin: 0.5vh;
    color: white;
    width: auto;
}

.header-link-cont button:hover{
    background-color: #ecbc36;
    color: white;
    border-radius: 1.5vh;
    transform: scale(1.2, 1.2);
}

.header-dil-cont{
    float: right;
    background-color: ;
    margin-right: 40vh;
}

.dil{
    width: 3.5vh;
    display: inline-block;
    margin-left: 1vh;
    float: left;
    margin-top: 2vh;
}

.mesaj-birakin{
    float: left;
    margin-right: 0%;
}

.mesaj-birakin button{
    padding: 1vh;
    padding-right: 1.5vh;
    padding-left: 1.5;
    background: #ecbc36;
    border: 0.3vh solid transparent;
    color: rgb(31, 31, 31);
    font-weight: 600;
    font-size: 1.7vh;
    transition: ease .4s;
    margin-top: 1.5vh;
    border-radius: 1vh;
    width: 20vh;
}

.mesaj-birakin button:hover{
    background-color: rgb(31, 31, 31);
    color: white;
}

/* Header link bitiş */

li{
    list-style: none;
  }
  
  .slider{
    width: 100%;
      height: 100vh;
      overflow: hidden;
    z-index: 1;
  }
  
  .slider > ul {
    height: 90vh;
  }
  .slider > ul > li{
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      z-index: 1;	
        -webkit-transition: all 2000ms ease;
        -moz-transition: all 2000ms ease;
        -ms-transition: all 2000ms ease;
        -o-transition: all 2000ms ease;
        transition: all 2000ms ease;
  }
  .slider > #input-slide-0:checked ~ ul > li.slide-0,
  .slider > #input-slide-1:checked ~ ul > li.slide-1,
  .slider > #input-slide-2:checked ~ ul > li.slide-2,
  .slider > #input-slide-3:checked ~ ul > li.slide-3{
      opacity: 1;
      z-index: 2;
  }
  .slider > ul > li.slide-0{
    background: url(slider1.jpg) no-repeat center center fixed; 
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
    height: 100vh;
    padding: 0;
    margin: 0 auto;
  }
  .slider > ul > li.slide-1{
    background: url(slider2.jpg) no-repeat center center fixed; 
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
    height: 100vh;
    padding: 0;
    margin: 0 auto;
  }
  .slider > ul > li.slide-2{
    background: url(slider3.jpg) no-repeat center center fixed; 
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
    height: 100vh;
    padding: 0;
    margin: 0 auto;
  }
  .slider > ul > li.slide-3{
    background: url(slider4.jpg) no-repeat center center fixed; 
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
    height: 100vh;
    padding: 0;
    margin: 0 auto;
  }
  
  .slider > .slider-arrow-prev,
  .slider > .slider-arrow-next {
      position: absolute;
      top: 50%;
      left: 0;
      z-index: 10;
  }
  .slider > .slider-arrow-prev > label,
  .slider > .slider-arrow-next > label {
      position: absolute;
      width: 5vw;
      height: 5vw;
      margin-top: -2.5vw;
      opacity: 0;
      background-size: 100% auto;
      background-position: center;
  
      z-index: -1;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
  }
  .slider > #input-slide-0:checked ~ .slider-arrow-prev > label.slide-3,
  .slider > #input-slide-0:checked ~ .slider-arrow-next > label.slide-1, 
  .slider > #input-slide-1:checked ~ .slider-arrow-prev > label.slide-0,
  .slider > #input-slide-1:checked ~ .slider-arrow-next > label.slide-2, 
  .slider > #input-slide-2:checked ~ .slider-arrow-prev > label.slide-1,
  .slider > #input-slide-2:checked ~ .slider-arrow-next > label.slide-3, 
  .slider > #input-slide-3:checked ~ .slider-arrow-prev > label.slide-2,
  .slider > #input-slide-3:checked ~ .slider-arrow-next > label.slide-0 {
      z-index: 1;
  }
  .slider:hover > .slider-arrow-prev > label,
  .slider:hover > .slider-arrow-next > label{
      opacity: 1;
  }
  .slider > .slider-arrow-prev > label {
      left: 5vw;
      background-image: url(http://panikaro.interiowo.pl/img/arrow-left.png);
  }
  .slider > .slider-arrow-next > label {
      right: 5vw;
      background-image: url(http://panikaro.interiowo.pl/img/arrow-right.png);
  }
  
  .slider > .slider-dot {
      position: relative;
      margin-top: -4vw;
      text-align: center;
      z-index: 300;
      font-size: 0;
  }
  .slider > .slider-dot > label {
      position: relative;
      display: inline-block;
      margin: 1vw 0.5vw;
      width: 1vw;
      height: 1vw;
      border-radius: 50%;
  
      background-color: #FFF;
  }
  .slider > #input-slide-0:checked ~ .slider-dot > label.slide-0,
  .slider > #input-slide-1:checked ~ .slider-dot > label.slide-1,
  .slider > #input-slide-2:checked ~ .slider-dot > label.slide-2,
  .slider > #input-slide-3:checked ~ .slider-dot > label.slide-3 {
      background-color: #ecbc36;
  }
  .slider > .slider-dot > label:hover{
      background-color: #ecbc36 !important;
  }
  
  .slider > .slide-description{
      position: absolute;
      width: 50%;
      top: calc(50% - 3vw);
      left: 25%;
      z-index: 200;
  }
  .slider > .slide-description > label{
      position: absolute;
      width: 100%;
      top: 0;	
      left: 0;
    cursor: default;
  
      z-index: 0;
      opacity: 0;
      visibility: hidden;
        -webkit-transition: all 0.75s ease;
        -moz-transition: all 0.75s ease;
        -ms-transition: all 0.75s ease;
        -o-transition: all 0.75s ease;
        transition: all 0.75s ease;	
  }
  .slider > #input-slide-0:checked ~ .slide-description > .slide-0,
  .slider > #input-slide-1:checked ~ .slide-description > .slide-1,
  .slider > #input-slide-2:checked ~ .slide-description > .slide-2,
  .slider > #input-slide-3:checked ~ .slide-description > .slide-3{
      z-index: 2;
      opacity: 1;
      visibility: visible;	
  }
  .slider > .slide-description > label > .text-slide{
      margin: 0 auto;
      line-height: 6vw;
      text-align: center;
  }
  .slider > .slide-description > .slide-0{
    font-family: 'Kumbh Sans', sans-serif;
  }
  .slider > .slide-description > .slide-1{
    font-family: 'Kumbh Sans', sans-serif;
  }
  .slider > .slide-description > .slide-2{
    font-family: 'Kumbh Sans', sans-serif;
  }
  .slider > .slide-description > .slide-3{
    font-family: 'Kumbh Sans', sans-serif;
  }
  
  @-webkit-keyframes slide{
      0%, 100% { opacity: 0; }
      6%, 25% { opacity: 1; z-index: 2; }
      30%, 50% { opacity: 0; z-index: 2; }
  }
  @-moz-keyframes slide{
      0%, 100% { opacity: 0; }
      6%, 24% { opacity: 1; z-index: 2; }
      30%, 50% { opacity: 0; z-index: 2; }
  }
  @-ms-keyframes slide{
      0%, 100% { opacity: 0; }
      6%, 25% { opacity: 1; z-index: 2; }
      30%, 50% { opacity: 0; z-index: 2; }
  }
  @-o-keyframes slide{
      0%, 100% { opacity: 0; }
      6%, 25% { opacity: 1; z-index: 2; }
      30%, 50% { opacity: 0; z-index: 2; }
  }
  @keyframes slide{
      0%, 100% { opacity: 0; }
      6%, 25% { opacity: 1; z-index: 2; }
      30%, 50% { opacity: 0; z-index: 2; }
  }
  .slider > #input-slide-autoplay:checked ~ ul > li.slide-0{
      -webkit-animation: slide 32000ms infinite -2000ms linear;
      -moz-animation: slide 32000ms infinite -2000ms linear;
      -ms-animation: slide 32000ms infinite -2000ms linear;
      -o-animation: slide 32000ms infinite -2000ms linear;
      animation: slide 32000ms infinite -2000ms linear;
  }
  .slider > #input-slide-autoplay:checked ~ ul > li.slide-1{
      -webkit-animation: slide 32000ms infinite 6000ms linear;
      -moz-animation: slide 32000ms infinite 6000ms linear;
      -ms-animation: slide 32000ms infinite 6000ms linear;
      -o-animation: slide 32000ms infinite 6000ms linear;
      animation: slide 32000ms infinite 6000ms linear;	
  }
  .slider > #input-slide-autoplay:checked ~ ul > li.slide-2{
      -webkit-animation: slide 32000ms infinite 14000ms linear;
      -moz-animation: slide 32000ms infinite 14000ms linear;
      -ms-animation: slide 32000ms infinite 14000ms linear;
      -o-animation: slide 32000ms infinite 14000ms linear;
      animation: slide 32000ms infinite 14000ms linear;	
  }
  .slider > #input-slide-autoplay:checked ~ ul > li.slide-3{
      -webkit-animation: slide 32000ms infinite 22000ms linear;
      -moz-animation: slide 32000ms infinite 22000ms linear;
      -ms-animation: slide 32000ms infinite 22000ms linear;
      -o-animation: slide 32000ms infinite 22000ms linear;
      animation: slide 32000ms infinite 22000ms linear;	
  }
  .slider > #input-slide-autoplay:checked ~ ul > li{
      -webkit-transition: none;
      -moz-transition: none;
      -ms-transition: none;
      -o-transition: none;
      transition: none;	
  }
  /* -------------------------------------------------------- autoplay arrow */
  @-webkit-keyframes arrow {
      0%, 24% { z-index: 1; }
      25%, 100% { z-index: -1; }
  }
  @-moz-keyframes arrow {
      0%, 24% { z-index: 1; }
      25%, 100% { z-index: -1; }
  }
  @-ms-keyframes arrow {
      0%, 24% { z-index: 1; }
      25%, 100% { z-index: -1; }
  }
  @-o-keyframes arrow {
      0%, 24% { z-index: 1; }
      25%, 100% { z-index: -1; }
  }
  @keyframes arrow {
      0%, 24% { z-index: 1; }
      25%, 100% { z-index: -1; }
  }
  .slider > #input-slide-autoplay:checked ~ .slider-arrow-prev > label.slide-3,
  .slider > #input-slide-autoplay:checked ~ .slider-arrow-next > label.slide-1{
      -webkit-animation: arrow 32000ms infinite -2000ms;
      -moz-animation: arrow 32000ms infinite -2000ms;
      -ms-animation: arrow 32000ms infinite -2000ms;
      -o-animation: arrow 32000ms infinite -2000ms;
      animation: arrow 32000ms infinite -2000ms;	
  }
  .slider > #input-slide-autoplay:checked ~ .slider-arrow-prev > label.slide-0,
  .slider > #input-slide-autoplay:checked ~ .slider-arrow-next > label.slide-2{
      -webkit-animation: arrow 32000ms infinite 6000ms;
      -moz-animation: arrow 32000ms infinite 6000ms;
      -ms-animation: arrow 32000ms infinite 6000ms;
      -o-animation: arrow 32000ms infinite 6000ms;
      animation: arrow 32000ms infinite 6000ms;	
  }
  .slider > #input-slide-autoplay:checked ~ .slider-arrow-prev > label.slide-1,
  .slider > #input-slide-autoplay:checked ~ .slider-arrow-next > label.slide-3{
      -webkit-animation: arrow 32000ms infinite 14000ms;
      -moz-animation: arrow 32000ms infinite 14000ms;
      -ms-animation: arrow 32000ms infinite 14000ms;
      -o-animation: arrow 32000ms infinite 14000ms;
      animation: arrow 32000ms infinite 14000ms;	
  }
  .slider > #input-slide-autoplay:checked ~ .slider-arrow-prev > label.slide-2,
  .slider > #input-slide-autoplay:checked ~ .slider-arrow-next > label.slide-0{
      -webkit-animation: arrow 32000ms infinite 22000ms;
      -moz-animation: arrow 32000ms infinite 22000ms;
      -ms-animation: arrow 32000ms infinite 22000ms;
      -o-animation: arrow 32000ms infinite 22000ms;
      animation: arrow 32000ms infinite 22000ms;	
  }
  /* -------------------------------------------------------- autoplay dot */
  @-webkit-keyframes dot {
      0%, 24%	{ background-color: #ecbc36; }
      25%, 100% { background: #FFF; }
  }
  @-moz-keyframes dot {
      0%, 24%	{ background-color: #ecbc36; }
      25%, 100% { background: #FFF; }
  }
  @-ms-keyframes dot {
      0%, 24%	{ background-color: #ecbc36; }
      25%, 100% { background: #FFF; }
  }
  @-o-keyframes dot {
      0%, 24%	{ background-color: #ecbc36; }
      25%, 100% { background: #FFF; }
  }
  @keyframes dot {
      0%, 24%	{ background-color: #ecbc36; }
      25%, 100% { background: #FFF; }
  }
  .slider > #input-slide-autoplay:checked ~ .slider-dot > label.slide-0{
      -webkit-animation: dot 32000ms infinite -2000ms;
      -moz-animation: dot 32000ms infinite -2000ms;
      -ms-animation: dot 32000ms infinite -2000ms;
      -o-animation: dot 32000ms infinite -2000ms;
      animation: dot 32000ms infinite -2000ms;	
  }
  .slider > #input-slide-autoplay:checked ~ .slider-dot > label.slide-1{
      -webkit-animation: dot 32000ms infinite 6000ms;
      -moz-animation: dot 32000ms infinite 6000ms;
      -ms-animation: dot 32000ms infinite 6000ms;
      -o-animation: dot 32000ms infinite 6000ms;
      animation: dot 32000ms infinite 6000ms;	
  }
  .slider > #input-slide-autoplay:checked ~ .slider-dot > label.slide-2{
      -webkit-animation: dot 32000ms infinite 14000ms;
      -moz-animation: dot 32000ms infinite 14000ms;
      -ms-animation: dot 32000ms infinite 14000ms;
      -o-animation: dot 32000ms infinite 14000ms;
      animation: dot 32000ms infinite 14000ms;	
  }
  .slider > #input-slide-autoplay:checked ~ .slider-dot > label.slide-3{
      -webkit-animation: dot 32000ms infinite 22000ms;
      -moz-animation: dot 32000ms infinite 22000ms;
      -ms-animation: dot 32000ms infinite 22000ms;
      -o-animation: dot 32000ms infinite 22000ms;
      animation: dot 32000ms infinite 22000ms;	
  }
  /* -------------------------------------------------------- autoplay description */
  @-webkit-keyframes description{
      0%, 5% { opacity: 0; z-index: 2; visibility: visible; }
      6%, 24% { opacity: 1; z-index: 2; visibility: visible; }
      25%, 100% { opacity: 0; z-index: 0; visibility: hidden; }
  }
  @-moz-keyframes description{
      0%, 5% { opacity: 0; z-index: 2; visibility: visible; }
      6%, 24% { opacity: 1; z-index: 2; visibility: visible; }
      25%, 100% { opacity: 0; z-index: 0; visibility: hidden; }
  }
  @-ms-keyframes description{
      0%, 5% { opacity: 0; z-index: 2; visibility: visible; }
      6%, 24% { opacity: 1; z-index: 2; visibility: visible; }
      25%, 100% { opacity: 0; z-index: 0; visibility: hidden; }
  }
  @-o-keyframes description{
      0%, 5% { opacity: 0; z-index: 2; visibility: visible; }
      6%, 24% { opacity: 1; z-index: 2; visibility: visible; }
      25%, 100% { opacity: 0; z-index: 0; visibility: hidden; }
  }
  @keyframes description{
      0%, 5% { opacity: 0; z-index: 2; visibility: visible; }
      6%, 24% { opacity: 1; z-index: 2; visibility: visible; }
      25%, 100% { opacity: 0; z-index: 0; visibility: hidden; }
  }
  .slider > #input-slide-autoplay:checked ~ .slide-description > .slide-0{
      -webkit-animation: description 32000ms infinite -2000ms ease;
      -moz-animation: description 32000ms infinite -2000ms ease;
      -ms-animation: description 32000ms infinite -2000ms ease;
      -o-animation: description 32000ms infinite -2000ms ease;
      animation: description 32000ms infinite -2000ms ease;
  }
  .slider > #input-slide-autoplay:checked ~ .slide-description > .slide-1{
      -webkit-animation: description 32000ms infinite 6000ms ease;
      -moz-animation: description 32000ms infinite 6000ms ease;
      -ms-animation: description 32000ms infinite 6000ms ease;
      -o-animation: description 32000ms infinite 6000ms ease;
      animation: description 32000ms infinite 6000ms ease;
  }
  .slider > #input-slide-autoplay:checked ~ .slide-description > .slide-2{
      -webkit-animation: description 32000ms infinite 14000ms ease;
      -moz-animation: description 32000ms infinite 14000ms ease;
      -ms-animation: description 32000ms infinite 14000ms ease;
      -o-animation: description 32000ms infinite 14000ms ease;
      animation: description 32000ms infinite 14000ms ease;
  }
  .slider > #input-slide-autoplay:checked ~ .slide-description > .slide-3{
      -webkit-animation: description 32000ms infinite 22000ms ease;
      -moz-animation: description 32000ms infinite 22000ms ease;
      -ms-animation: description 32000ms infinite 22000ms ease;
      -o-animation: description 32000ms infinite 22000ms ease;
      animation: description 32000ms infinite 22000ms ease;
  }
  .slider > #input-slide-autoplay:checked ~ .slide-description > label{
        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
        transition: none;  	
  }

  footer{
    width: 100%;
    height: auto;
    background: url(footer-bg.jpg) no-repeat center center fixed; 
    background-attachment: fixed;
    background-size: cover;
    border-top: 0.3vh solid #ecbc36;
    padding-bottom: 2vh;
}

.footer-div{
    width: 60%;
    height: 50vh;
    background-color: ;
    margin: 0 auto;
    text-align: center;
}

.footer-div div{
    width: 33.3%;
    height: 100%;
    background-color: ;
    float: left;
}

.footer-sol{
    background-color: ;
}

.footer-sol img{
    width: 20vh;
    margin-top: 3vh;
}

.sosyal-link-footer{
    color: #ecbc36;
    font-size: 2.8vh;
    margin: 0.5vh;
    transition: ease .4s;
}

.sosyal-link-footer:hover{
    color: white;
}

.footer-sol p{
    font-size: 1.7vh;
}

.footer-orta{
    background-color: ;
    text-align: left;
}

.footer-orta h1{
    color: white;
    font-size: 3vh;
    margin-top: 5vh;
    margin-left: 3vh;
}

.footer-orta p{
    color: #ecbc36;
    font-size: 1.8vh;
    margin-left: 3vh;
}

.footer-orta a{
    color: white;
    font-size: 1.8vh;
    margin-left: 3vh;
}

.footer-orta img{
    width: 2vh
}

.footer-sag{
    background-color: ;
}

.footer-sag iframe{
    width: 90%;
    height: 80%;
    border-radius: 5vh;
    margin-top: 4vh;
}

.imza-div{
    width: 100%;
    height: 10vh;
    background-color: rgb(22, 22, 22);
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    border-top: 0.3vh solid #1eb1ff;
    border-bottom: 0.3vh solid #1eb1ff;
}

.imza-div p{
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 2vh;
}

.imza-div img{
    width: 22vh;
}

.nav-header-logo{
    display: none;
}

.nav-btn{
    display: none;
}

nav{
    display: none;
}

@media only screen and (max-width: 768px) {

    header{
        display: none;
    }

    .header-cont{
        display: none;
    }
    
    .whatsapp{
        width: 5vh;
        left: 4%;
    }

    .nav-header-logo{
        z-index: 10;
        width: 10vh;
        left: 78%;
        top: 1%;
        position: fixed;
        display: block;
    }

    .slider > ul > li.slide-0{
        background: url(mobilslider1.jpg); 
        background-attachment: fixed;
        background-size: cover;
        width: 100%;
        height: 100vh;
        padding: 0;
        margin: 0 auto;
      }
      .slider > ul > li.slide-1{
        background: url(mobilslider2.jpg) no-repeat center center fixed; 
        background-attachment: fixed;
        background-size: cover;
        width: 100%;
        height: 100vh;
        padding: 0;
        margin: 0 auto;
      }
      .slider > ul > li.slide-2{
        background: url(mobilslider3.jpg) no-repeat center center fixed; 
        background-attachment: fixed;
        background-size: cover;
        width: 100%;
        height: 100vh;
        padding: 0;
        margin: 0 auto;
      }
      .slider > ul > li.slide-3{
        background: url(mobilslider4.jpg) no-repeat center center fixed; 
        background-attachment: fixed;
        background-size: cover;
        width: 100%;
        height: 100vh;
        padding: 0;
        margin: 0 auto;
      }

    .nav-btn{
        z-index: 10;
        position: fixed;
        padding: 1.5vh;
        font-size: 1.9vh;
        border-radius: 1vh;
        background-color: #ecbc36;
        border: none;
        color: white;
        margin: 2vh;
        display: block;
    }

    nav{
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: rgb(19, 19, 19);
        position: fixed;
        z-index: 1000;
        transition: visibility 0.3s linear,opacity 0.3s linear;
        opacity: 0%;
        visibility: hidden;
        text-align: center;
        display: block;
    }

    .nav-logo{
        width: 20vh;
        margin-top: 7vh;
    }

    nav button{
        width: 80%;
        height: 4vh;
        margin-top: 2vh;
        background-color: white;
        border: 0.3vh solid #ecbc36;
        color: rgb(22, 22, 22);
        font-weight: 600;
        border-radius: 1vh;
        font-size: 1.8vh;
    }

    .nav-dil{
        width: 4vh;
    }

    .nav-urun{
        width: auto;
        background-color: rgb(22, 22, 22);
        color: white;
        margin: 2vh;
    }

    .nav-kapat{
        color: red;
        position: absolute;
        left: 70%;
        font-weight: bold;
        z-index: 20;
    }

    #nav-urun-div{
        transition: visibility 0.3s linear,opacity 0.3s linear;
        opacity: 0%;
        visibility: hidden;
    }
    
    .banner{
        background: url(banner.jpg) no-repeat center center fixed; 
        background-attachment: fixed;
        background-size: cover;
        width: 100%;
        height: 60vh;
        display: inline-block;
    }
    
    .banner h1{
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        margin-top: 30vh;
        font-size: 4.5vh;
        letter-spacing: 1vh;
        padding-left: 5vh;
        padding-right: 5vh;
    }

    footer{
        width: 100%;
        height: 150vh;
        background: url(footer-bg.jpg) no-repeat center center fixed; 
        background-attachment: fixed;
        background-size: cover;
        border-top: 0.3vh solid #ecbc36;
    }
    
    .footer-div{
        width: 90%;
        height: 50vh;
        background-color: ;
        margin: 0 auto;
        text-align: center;
    }
    
    .footer-div div{
        width: 100%;
        height: 100%;
        background-color: ;
        float: none;
    }
    
    .footer-sol{
        background-color: ;
    }
    
    .footer-sol img{
        width: 20vh;
        margin-top: 3vh;
    }
    
    .sosyal-link-footer{
        color: #ecbc36;
        font-size: 2.8vh;
        margin: 0.5vh;
        transition: ease .4s;
    }
    
    .sosyal-link-footer:hover{
        color: white;
    }
    
    .footer-sol p{
        font-size: 1.7vh;
    }
    
    .footer-orta{
        background-color: ;
        text-align: left;
    }
    
    .footer-orta h1{
        color: white;
        font-size: 3vh;
        margin-top: 5vh;
        margin-left: 3vh;
    }
    
    .footer-orta p{
        color: #ecbc36;
        font-size: 1.8vh;
        margin-left: 3vh;
    }
    
    .footer-orta a{
        color: white;
        font-size: 1.8vh;
        margin-left: 3vh;
    }
    
    .footer-sag{
        background-color: ;
    }
    
    .footer-sag iframe{
        width: 90%;
        height: 80%;
        border-radius: 5vh;
        margin-top: 4vh;
    }
    
    .imza-div{
        width: 100%;
        height: 10vh;
        background-color: rgb(22, 22, 22);
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        border-top: 0.3vh solid #1eb1ff;
        border-bottom: 0.3vh solid #1eb1ff;
    }
    
    .imza-div p{
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-size: 1.5vh;
    }
    
    .imza-div img{
        width: 19vh;
    }

}