/*=============================================================================================================*/
/*=============================================================================================================*/
/*=============================================================================================================*/




 @media screen and (orientation:portrait) { 

  input,
textarea,
button,
select,
image,
div,
p,
a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

  body {
    font-family: 'Roboto', sans-serif;
  }
  




  #index-arrow {
    position: absolute;
    display: block;
    width: 3%;
    right: 4%;
    top: 14%;
}

  
  
  
  
  td:first-child {
  width: 33%;
  font-family: monospace;
  }
  .demo {
  position: relative;
  }
  .demo > ar-button {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  }
  .demo > img {
  border-radius: 0.5rem;
  }
  
  ar-button:not([ar="unsupported"]) .unsupported {
  display: none;
  }
  ar-button[ar="unsupported"] {
  
  pointer-events: none;
  }
  ar-button[ar="unsupported"] .prompt {
  display: none;
  }








  #left-arrow {
    position: absolute;
    width:2.5%;
    display: none;
    top: 12.2%;
    left: 2.5%;
    transform: rotate(180deg);
    z-index:9;
  }
  
  #right-arrow {
    position: absolute;
    display: none;
    width:2.5%;
    top: 12.2%;
    right: 6.5%;
  }
  
  #right-arrow2 {
    position: absolute;
    display: none;
    display:none;
    width:2.5%;
    top: 12.2%;
    right: 6.5%;
  }
  



  
  
  
  
  .urunler-container {
    position: fixed;
    margin-top:1.5%;
    margin-left: -0.5%;
    text-align: center;

    width:100%;
    height: 65%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }

  .urunler-container ul li a{
    display: none;
  }
  
  
  .urun-gorsel {
    width: 100%;
    border-radius: 10px;
    margin-top: 0%;
  }



#rotateimg {
  position: fixed;
  display: block;
  width: 180%;

  bottom:4%;
  left: -40%;
  z-index: 999999;
}

#rotate-div {
  display: none;
}


  
    
  .aropenicon {
    width: 240px;
    height: 85px;
    position: absolute;
    right: 2%;
    bottom: 4%;
    font-size: 24px;
    z-index: 9999;
    box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.31);
    border-radius: 10px;
    background: #ffffff;
    font-family: 'Roboto', sans-serif;
    color: rgb(120, 120, 120);
    background-size: 100%;
   cursor: pointer;
   justify-content: center;
    overflow: hidden;
    display: none;

  }
  

  
  
  
  .search-container{
    position: relative;
    width: 100%;
  
    margin-top: 4%;
    margin-bottom: 0%;
    margin-left: -0.7%;
    text-align: center;
  }
  
  
  
  .container {
    margin: 0 auto;
    margin-top: 15%;
    margin-left: 2%;
    padding: 0 10px;
  
    max-width:730px;
  }
  
  .navBar {
    background: #5b5b5b;
  }
  
  .nav {
    margin: 0 -10px;
    padding: 10px 15px;
  
    display: flex;
    
    margin-bottom: 20px;
    margin-bottom: 20px;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }
  
  
  
  ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 5px;
    height: 5px;
  }
  
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(159, 159, 159, 0.5);
   
  }
  
  
  
  
  .krc-logo {
    top: 4%;
    left: 35%;
    position: fixed;
  
  }
  
  .logo {
    width: 40%;
  }
  
  
  .renksecenekleri-container{
    position: fixed;
    margin-top: 0%;
    text-align: center;
  }
  
  
  #myInput:focus { outline:0 !important;
  border-color: rgb(128, 128, 128); }
  
  
  
  
  #myInput {
  background-image: url('assets/search-icon.jpg');
  background-position: 165px ;
  background-repeat: no-repeat;
  background-size: 6.5%;
  width: 50%;
  font-size: 15px;
  
  text-align: center;
  border-radius: 10px;
  
  
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
  }
  
  
  
  
  
  
  
  #myUL {
  list-style-type: none;
  padding: 0;
  
  margin: 0;
  text-align: center;
  
  }
  
  
  #myUL p {
   color: rgb(164, 164, 164);
    text-align: center;
    font-size: 9px;
    margin-top: -5%;
    }
  
  
    #myUL h4 {
      color: #575757;
       text-align: center;
       font-size: 10px;
       margin-top: 3%;
       line-height: 15px;
       }
  
  #myUL li a {
    border-radius: 10px;
  border: 1px solid #ddd;
  margin-top: 15px; /* Prevent double borders */
  margin-left: 20px;
  
  padding: 12px;
  text-decoration: none;
  font-size: 16px;
  color: black;
  display: inline-block;
  float: left;
  height: 197px;
  width:155px;
  }
  
  #myUL li a:hover:not(.header) {
  background-color: #eee;
  }
  
  
  
  #iconrenk {
    position: relative;
  margin-left: auto;
  display: block;
  margin-top: 10px;
  margin-right: auto;
  margin-left: auto;
    cursor: pointer;
  }
  
  
  
  .btn {
  border: none;
  outline: none;
  padding: 12px 26px;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
  cursor: pointer;
  
  }
  
  .btn:hover {
  
  color: rgb(210, 210, 210);
  border-radius: 10px;
  }
  
  .btn.active {
    background: #383838;
  color: white;
  border-radius: 6px;
  }
  
  
  
  
  

  
  .urun-close {
  position: absolute;
  box-shadow: 0px -5px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.31);
  border-radius: 15px;
  top:7.3%;
  right: 4%;
  border: none;
  background-color: white;
  font-size: 15px;
  cursor: pointer;
  width: 14%;
  height: 5%;
  
  }
  

    



  .model-viewer-close-button {
    width: 240px;
    height: 85px;
    position: absolute;
    left: 17%;
    bottom: 7%;
    font-size: 24px;
    z-index: 9999;
    box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.31);
    border-radius: 10px;
    background: #ffffff;
    border: none;
    font-family: 'Roboto', sans-serif;
    color: rgb(120, 120, 120);
    background-size: 100%;
   cursor: pointer;
   justify-content: center;
    overflow: hidden;
    display: none;

  }
  
  .model-viewer-close-button  p {

    position:absolute;
    color: rgb(120, 120, 120);
 top: -8%;
 left: 43%;
 text-align: center;
    display: block;

  }
  
  
  .model-viewer-open-button {
    width: 240px;
    height: 85px;
    position: absolute;
    left: 17%;
    bottom: 7%;
    font-size: 24px;
    z-index: 9999;
    box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.31);
    border-radius: 10px;
    background: #ffffff;
    border: none;
    font-family: 'Roboto', sans-serif;
    color: rgb(120, 120, 120);
    background-size: 100%;
   cursor: pointer;
   justify-content: center;
    overflow: hidden;

  }
  
  .model-viewer-open-button  p {

    position:absolute;
    color: rgb(120, 120, 120);
 top: -8%;
 left: 43%;
 text-align: center;
    display: block;

  }
 
  #ar-icon {
    position: absolute;
    width: 21%;
    top: 18%;
    left: 13%;

   }
 
  
  
    #ar-icon2 {
      position: absolute;
      width: 21%;
      top: 18%;
      left: 14%;
  
     }
  
     #ar-icon-close{
      position: absolute;
      width: 21%;
      top: 18%;
      left: 14%;
  
     }
  


  
  #ar-open-button {
    width: 240px;
    height: 85px;
    position: absolute;
    display: none;
    left: 52%;
    bottom: 7%;
    font-size: 24px;
    z-index: 9999;
    box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.31);
    border-radius: 10px;
    border: none;
    background: #ffffff;
    font-family: 'Roboto', sans-serif;
    color: rgb(120, 120, 120);
    background-size: 100%;
   cursor: pointer;
   justify-content: center;
    overflow: hidden;
  }

  #ar-open-button-real {
    width: 240px;
    height: 85px;
    position: absolute;
    left: 52%;
    bottom: 7%;
    font-size: 24px;
    z-index: 9999;
    border: none;
    box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.31);
    border-radius: 10px;
    background: #ffffff;
    font-family: 'Roboto', sans-serif;
    color: rgb(120, 120, 120);
    background-size: 100%;
   cursor: pointer;
   justify-content: center;
    overflow: hidden;
  }
  
  


    
  #ar-open-button  p {

    position:absolute;
    color: rgb(120, 120, 120);
 top: -8%;
 left: 42%;
 text-align: center;
    display: block;

  }

  #ar-open-button-real  p {

    position:absolute;
    color: rgb(120, 120, 120);
 top: -8%;
 left: 42%;
 text-align: center;
    display: block;

  }
  
  
  
  
  
  
  
  .urun-slide-text {
    position: relative;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: -5%;
  margin-top: 12%;
  top: 5%;
  color: #686868;
  font-family: 'Roboto', sans-serif;
  font-size: 30px;
  width: 50%;
  }
  
  .urun-slide-text  h3{
  
  font-size: 30px;
  }
  
  .urun-slide-text  p{
  
    font-size: 22px;
    color: rgb(169, 169, 169);
    }
  
  
  .slide-img {
    width: 80%;
    border-radius: 30px;
    position: absolute;
  top: 0%;
    left: -18%;
  }
  
  
  .slideshow {
  width: 640px;
  height: 360px;
  position: relative;
  text-align: center;
  line-height: 750px;
  padding-bottom: 30px;
  }
  
  .slideshow[data-transition="zoom"] {
  overflow: hidden;
  }
  
  /* slideshow item */
  .slideshow--item {
  width: 640px;
  height: 360px;
  line-height: 1.5;
  position: absolute;
  top: 20%;
  visibility: hidden;
  }
  
  .slideshow--bullet:checked + .slideshow--item {
  visibility: visible;
  }
  
  .slideshow[data-transition="fade"] .slideshow--item {
  visibility: visible;
  opacity: 0;
  transition: .3s ease-out opacity;
  }
  
  .slideshow[data-transition="fade"] .slideshow--bullet:checked + .slideshow--item {
  opacity: 1;
  }
  
  .slideshow[data-transition="zoom"] .slideshow--item {
  visibility: visible;
  opacity: 1;
  transform: scale(0.000001);
  transition: .3s ease-out transform;
  }
  
  .slideshow[data-transition="zoom"] .slideshow--bullet:checked + .slideshow--item {
  opacity: 1;
  transform: scale(1);
  }
  
  /* slideshow navigation */
  .slideshow--nav{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  display: none;
  z-index: 88;
  cursor: pointer;
  color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  }
  
  .slideshow--nav:after {
    display: none;
  content: '\25B6';
    font-size: 3em;
  
    color: #686868;
  position: absolute;
    top: 80%;
  
  
  right: -35px;
    
  }
  
  
  .slideshow--nav-previous {
  left: -45px;
    
  display: block;
  }
  
  .slideshow--nav-previous:after {
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  transform: scaleX(-1);
  right: auto;
  left: 10px;
  }
  
  .slideshow--nav-next {
  left: 50%;
  display: block;
  }
  
  /* Radiobuttons to control the slideshow */
  .slideshow--bullet {
  font-size: .75em;
  display: none;
  width: 1em;
  height: 1em;
  
    position: relative;
    top: 90%;
  z-index: 99;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #686868;
  border-radius: 1em;
  transition: .3s ease-out background,
        .3s ease-out transform;
  }
  
  .slideshow--bullet:checked {
  background: #999;
  outline: none;
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  transform: scale(1.3);
  }
  
  
  
  #urun-container{
      display: none;
     z-index: 99;
     position: fixed;
     background-color: rgb(255, 255, 255);
     height: 90%;
      width: 100%;
      left: 0%;
      margin-top: 0%;
      margin-left:auto;
    margin-right: auto;
    
  
  }
  
  #urun-container2{
    display: block;
    background-color: rgb(255, 255, 255);
  
    width: 36%;
   
    left: 0%;
  margin-top: 0%;
    margin-left: auto;
    margin-right: auto;
    height: 50%;
  }
  
  
  .urun-3d-arr {
  width: 100%;
  display: none;
  height: 100%;
  
  position: absolute;
  
  top: -3%;
  left: 0%;
  z-index:9999;
  }
  
  

  
  

  


  .butonlar {
    position:relative;
  z-index:99;
  top: 31%;
  
   }






  .grid-container{
    width: 99%;
    height: 50%;
    left: 0%;

    background-color: transparent;
    top: 20%;
    position: absolute;
    display: block;
    visibility: hidden;
    grid-gap: 0px;
    z-index: 999;
   }
  
  
  
  model-viewer {
    width:100%;
    height: 100%;

    position: absolute;
    top: 0%;
    left:0%;
    z-index: 1;
   }
  
  
   model-viewer{
    --progress-mask: transparent;
   
   --poster-color: transparent;
    z-index: 1;
    
   }



.product-next-arrow {
  position: absolute;
  display: block;
  width:10%;
  top: 46%;
  right: 1%;
}

  .product-back-arrow {
  position: absolute;
  display: block;
  width:10%;
  transform: rotate(180deg);
  top: 46%;
  left: 1%;
}




  }







/*=============================================================================================================*/
/*=============================================================================================================*/
/*=============================================================================================================*/








 @media screen and (orientation:landscape) { 

  input,
textarea,
button,
select,
image,
a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}


body {
  font-family: 'Roboto', sans-serif;
  
}


#index-arrow {
  position: absolute;
  display: block;
  width: 3%;
  right: 4%;
  top: 3.5%;
}


.product-next-arrow {
  position: absolute;
  display: block;
  width:4%;
  top: 40.2%;
  right: 1%;
}

  .product-back-arrow {
  position: absolute;
  display: block;
  width:4%;
  transform: rotate(180deg);
  top: 40.2%;
  left: 1%;
}

#left-arrow {
  position: absolute;
  display:none;
  width:2.5%;
  top: 4.2%;
  left: 20.5%;
  transform: rotate(180deg);
  z-index:9;
}

#right-arrow {
  position: absolute;
  display: none;
  width:2.5%;
  top: 4.2%;
  right: 7.5%;
}

#right-arrow2 {
  position: absolute;
  display: none;
  display:none;
  width:2.5%;
  top: 4.2%;
  right: 7.5%;
}


.grid-container{
  width: 50%;
  height: 100vh;
  left: 0%;
  background-color: transparent;
  top: 0%;
  position: absolute;
  display: block;
  visibility: hidden;
  grid-gap: 0px;
  z-index: 98;
 }



model-viewer {
  width:100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left:0%;
  z-index: 1;
 }


 model-viewer{
  --progress-mask: transparent;
 
 --poster-color: transparent;
  z-index: 1;
  
 }





td:first-child {
width: 33%;
font-family: monospace;
}
.demo {
position: relative;
}
.demo > ar-button {
position: absolute;
right: 2rem;
bottom: 2rem;
}
.demo > img {
border-radius: 0.5rem;
}

ar-button:not([ar="unsupported"]) .unsupported {
display: none;
}
ar-button[ar="unsupported"] {

pointer-events: none;
}
ar-button[ar="unsupported"] .prompt {
display: none;
}




.urunler-container {
  position: fixed;
  margin-top: -2.7%;
  margin-left: 1.7%;
  text-align: center;

  width: 95.5%;
  height: 78%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}


.urun-gorsel {
  width: 100%;
  border-radius: 10px;
  margin-top: 0%;
}


#rotate-div {
  display: none;
}

#rotateimg {
  position: fixed;
  display: block;
  width: 100%;
  left: 0%;
  top: -9%;
  z-index: 999999;
}




.search-container{
  position: relative;
  width: 30%;

  margin-top: -5%;
  margin-bottom: 3%;
  margin-left: -1.7%;
  text-align: center;
}



.container {
  margin: 0 auto;
  margin-top: -1%;
  margin-left: 27%;
  padding: 0 10px;

  max-width:760px;
}

.navBar {
  background: #5b5b5b;
}

.nav {
  margin: 0 -10px;
  padding: 10px 15px;

  display: flex;
  
  margin-bottom: 20px;
  margin-bottom: 20px;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}



::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: rgba(159, 159, 159, 0.5);
 
}




.krc-logo {
  top: 3%;
  left: 7%;
  position: fixed;
  width: 20%;

}

.logo {
  width: 65%;
}


.renksecenekleri-container{
  position: fixed;
  margin-top: 0%;
  text-align: center;
}


#myInput:focus { outline:0 !important;
border-color: rgb(128, 128, 128); }




#myInput {
background-image: url('assets/search-icon.jpg');
background-position: 65px ;
background-repeat: no-repeat;
background-size: 12.5%;
width: 50%;
font-size: 15px;

text-align: center;
border-radius: 10px;


padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}







#myUL {
list-style-type: none;
padding: 0;

margin: 0;
text-align: center;

}


#myUL p {
 color: rgb(164, 164, 164);
  text-align: center;
  font-size: 10px;
  margin-top: -3%;
  }


  #myUL h4 {
    color: #787878;
     text-align: center;
     font-size: 14px;
     margin-top: 8%;
     line-height: 17px;
     }

#myUL li a {
  border-radius: 10px;
border: 1px solid #ddd;
margin-top: 15px; /* Prevent double borders */
margin-left: 20px;

padding: 12px;
text-decoration: none;
font-size: 16px;
color: black;
display: inline-block;
float: left;
height: 235px;
width:140px;
}

#myUL li a:hover:not(.header) {
background-color: #eee;
}



#iconrenk {
  position: relative;
margin-left: auto;
display: block;
margin-top: 10px;
margin-right: auto;
margin-left: auto;
  cursor: pointer;
}



.btn {
border: none;
outline: none;
padding: 12px 22.2px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
background-color: white;
cursor: pointer;

}

.btn:hover {

color: rgb(210, 210, 210);
border-radius: 10px;
}

.btn.active {
  background: #383838;
color: white;
border-radius: 6px;
}




#ar-icon {
position: absolute;
width: 11%;
top: 15%;
left: 10%;
z-index: 99;

}

#ar-icon-2 {
  position: absolute;
  width: 11%;
  top: 15%;
  left: 10%;
  z-index: 99;
  
  }
  
  





.slideshow {
width: 640px;
height: 360px;
position: relative;
text-align: center;
line-height: 750px;
padding-bottom: 30px;
}

.slideshow[data-transition="zoom"] {
overflow: hidden;
}

/* slideshow item */
.slideshow--item {
width: 640px;
height: 360px;
line-height: 1.5;
position: absolute;
top: 20%;
visibility: hidden;
}

.slideshow--bullet:checked + .slideshow--item {
visibility: visible;
}

.slideshow[data-transition="fade"] .slideshow--item {
visibility: visible;
opacity: 0;
transition: .3s ease-out opacity;
}

.slideshow[data-transition="fade"] .slideshow--bullet:checked + .slideshow--item {
opacity: 1;
}

.slideshow[data-transition="zoom"] .slideshow--item {
visibility: visible;
opacity: 1;
transform: scale(0.000001);
transition: .3s ease-out transform;
}

.slideshow[data-transition="zoom"] .slideshow--bullet:checked + .slideshow--item {
opacity: 1;
transform: scale(1);
}

/* slideshow navigation */
.slideshow--nav{
position: absolute;
top: 0;
bottom: 0;
width: 50%;
display: none;
z-index: 88;
cursor: pointer;
color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.slideshow--nav:after {
  display: none;
content: '\25B6';
  font-size: 3em;

  color: #686868;
position: absolute;
  top: 80%;


right: -35px;
  
}


.slideshow--nav-previous {
left: -45px;
  
display: block;
}

.slideshow--nav-previous:after {
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
transform: scaleX(-1);
right: auto;
left: 10px;
}

.slideshow--nav-next {
left: 50%;
display: block;
}

/* Radiobuttons to control the slideshow */
.slideshow--bullet {
font-size: .75em;
display: none;
width: 1em;
height: 1em;

  position: relative;
  top: 90%;
z-index: 99;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #686868;
border-radius: 1em;
transition: .3s ease-out background,
      .3s ease-out transform;
}

.slideshow--bullet:checked {
background: #999;
outline: none;
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
transform: scale(1.3);
}



#urun-container{
    display: none;
   z-index: 99;
   position: fixed;
   background-color: rgb(255, 255, 255);
   height: 110%;
    width: 100%;
    left: 0%;
    margin-top: 0%;
    margin-left:auto;
  margin-right: auto;
  

}


.urun-close {
  position: fixed;
  box-shadow: 0px -5px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.31);
  border-radius: 8px;
  top:8%;
  right: 5%;
  border: none;
  background-color: white;
  font-size: 14px;
  cursor: pointer;
  color: grey;
  width: 7%;
  height: 6%;
  
  }
  
  
  .aropenicon {
    width: 50px;
    height: 50px;
    position: absolute;
    right: 2%;
    bottom: 4%;
    font-size: 12px;
    z-index: 9999;
    box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.31);
    border-radius: 10px;
    background: #ffffff;
    font-family: 'Roboto', sans-serif;
    color: rgb(120, 120, 120);
    background-size: 100%;
   cursor: pointer;
   justify-content: center;
    overflow: hidden;
    display: none;

  }

  

  
  .model-viewer-open-button {
    width: 240px;
    height: 85px;
    position: absolute;
    display: block;
    left: 53%;
    top: 60%;
    font-size: 24px;
    z-index: 9999;
    border: none;
    box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.31);
    border-radius: 10px;
    background: #ffffff;
    font-family: 'Roboto', sans-serif;
    color: rgb(120, 120, 120);
    background-size: 100%;
   cursor: pointer;
   justify-content: center;
    overflow: hidden;

  }
  
  .model-viewer-open-button  p {

    position:absolute;
    color: rgb(120, 120, 120);
 top: -8%;
 left: 43%;
 text-align: center;
    display: block;

  }
 


    
  .model-viewer-close-button {
    width: 240px;
    height: 85px;
    position: absolute;
    display: none;
    left: 53%;
    top: 60%;
    font-size: 24px;
    z-index: 9999;
    border: none;
    box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.31);
    border-radius: 10px;
    background: #ffffff;
    font-family: 'Roboto', sans-serif;
    color: rgb(120, 120, 120);
    background-size: 100%;
   cursor: pointer;
   justify-content: center;
    overflow: hidden;

  }
  
  .model-viewer-close-button  p {

    position:absolute;
    color: rgb(120, 120, 120);
 top: -8%;
 left: 43%;
 text-align: center;
    display: block;

  }
    #ar-icon {
     position: absolute;
     width: 21%;
     top: 18%;
     left: 13%;
 
    }
 
  
  
    #ar-icon2 {
      position: absolute;
      width: 21%;
      top: 18%;
      left: 14%;
  
     }

     #ar-icon-close {
      position: absolute;
      width: 21%;
      top: 18%;
      left: 14%;
  
     }
  


  
  #ar-open-button {
    width: 240px;
    height: 85px;
    position: absolute;
    display: none;
    left: 76%;
    top: 60%;
    border: none;
    font-size: 24px;
    z-index: 9999;
    box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.31);
    border-radius: 10px;
    background: #ffffff;
    font-family: 'Roboto', sans-serif;
    color: rgb(120, 120, 120);
    background-size: 100%;
   cursor: pointer;
   justify-content: center;
    overflow: hidden;
  }
  



    
  #ar-open-button  p {

    position:absolute;
    color: rgb(120, 120, 120);
 top: -8%;
 left: 42%;
 text-align: center;
    display: block;

  }




.urun-slide-text {
  position: relative;
text-align: left;
margin-left: auto;
margin-right: auto;
left: 28%;
margin-top: 13%;

width: 40%;
color: #686868;
font-family: 'Roboto', sans-serif;
font-size: 40px;
}

.urun-slide-text  h3{

font-size: 35px;
}

.urun-slide-text  p{
  margin-top: -1%;
  font-size: 23px;
  color: rgb(169, 169, 169);
  }



.slide-img {
  width: 75%;
  border-radius: 30px;
  top: 1%;
  left: 18%;
  position: absolute;
}

#urun-container2{
  display: block;

  width: 36%;
 
  left: 0%;
top: 1%;
position: absolute;

  height: 50%;
}







.butonlar {
  position:relative;
z-index:99;
top: 33%;

 }












}