/****************** PC TASARIM ******************/
 

 #all-parts, #part-1, #part-2, #part-3, #part-4 {
    border: 1px solid rgb(223, 223, 223); /* Varsayılan border rengi */
}

#all-parts {
    border: 1px solid black; /* Başlangıçta seçili olan buton için özel stil */
}

.mode-icon {
  z-index:999999999999;
  position: absolute;
  display: block;
  padding: 12px;
  border: solid 1px black;
  background-color: white;
  border-radius: 10000px;
  font-size: 11px;
  right: 12px;
  color: black !important;
  top: 12px;
}

#light-mode {
  display: none;
}

.aropenicon {
  display: none;
}
#all-parts {
    width: 200px;
    height: 47px;
    z-index:99999999999;
    position: fixed;
    touch-action: none;
    left: 37%;
    transform: translateX(-50%);
    bottom: 13%;
    font-size: 12px;
    z-index: 9999;
    border-radius: 1000px;
    background: #ffffff00;
    font-family: 'Roboto', sans-serif;
    color: rgb(0, 0, 0);
    background-size: 100%;
    cursor: pointer;
    justify-content: center;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    touch-action: manipulation;
}

#part-1 {
    width: 120px;
    height: 47px;
    z-index:99999999999;
    position: fixed;
    touch-action: none;
    left: 50%;
    transform: translateX(-50%);
    bottom: 13%;
    z-index: 9999;
    font-size: 12px;
    border-radius: 1000px;
    background: #ffffff00;
    font-family: 'Roboto', sans-serif;
    color: rgb(0, 0, 0);
    background-size: 100%;
    cursor: pointer;
    justify-content: center;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    touch-action: manipulation;
}

#part-2 {
  width: 200px;
    height: 47px;
    z-index:99999999999;
    position: fixed;
    touch-action: none;
    left: 63%;
    transform: translateX(-50%);
    bottom: 13%;
    z-index: 9999;
    font-size: 12px;
    border-radius: 1000px;
    background: #ffffff00;
    font-family: 'Roboto', sans-serif;
    color: rgb(0, 0, 0);
    background-size: 100%;
    cursor: pointer;
    justify-content: center;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    touch-action: manipulation;
}

#part-3 {
    width: 80px;
    height: 45px;
    z-index:99999999999;
    position: fixed;
    touch-action: none;
    left: 57%;
    transform: translateX(-50%);
    bottom: 15%;
    z-index: 9999;

    border-radius: 1000px;
    background: #ffffff00;
    font-family: 'Roboto', sans-serif;
    color: rgb(0, 0, 0);
    background-size: 100%;
    cursor: pointer;
    justify-content: center;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    touch-action: manipulation;
}

#part-4 {
    width: 80px;
    height: 40px;
    z-index:99999999999;
    position: absolute;
    left: 64%;
    transform: translateX(-50%);
    bottom: 15%;
    z-index: 9999;

    border-radius: 1000px;
    background: #ffffff00;
    font-family: 'Roboto', sans-serif;
    color: rgb(0, 0, 0);
    background-size: 100%;
    cursor: pointer;
    justify-content: center;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    touch-action: manipulation;
}

 #playPauseButton{
    width: 80px;
    height: 40px;
    z-index:99999999999;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 20%;
    z-index: 9999;
    border: solid 1px rgb(0, 0, 0);
    border-radius: 1000px;
    background: #ffffff00;
    font-family: 'Roboto', sans-serif;
    color: rgb(0, 0, 0);
    background-size: 100%;
    cursor: pointer;
    justify-content: center;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    touch-action: manipulation;
 }

 #brand-logo {
        width: 200px;
  
        z-index:99999999999;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 2%;
        z-index: 9999;


        cursor: pointer;
        justify-content: center;
        overflow: hidden;
        justify-content: center;
        align-items: center;
     }
 

 @font-face {
    font-family: 'Kinetika Light';
    src: url('assets/fonts/Kastelov - Kinetika Light.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
  }
  
  
  @font-face {
    font-family: 'Nexa';
    src: url('assets/fonts/Nexa-ExtraLight.ttf') format('truetype');
    font-weight: 200; /* ExtraLight için tipik bir ağırlık değeri */
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Nexa';
    src: url('assets/fonts/Nexa-Heavy.ttf') format('truetype');
    font-weight: 800; /* Heavy için tipik bir ağırlık değeri */
    font-style: normal;
  }
  
   body {
    background: transparent;
   }
  
  
  .paye-logo {
    width: 7%;
    margin-top: 5%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
  }
  
   .modal4{
    background-color: rgb(255, 255, 255);
    width:100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999999999;
    opacity: 0;
    visibility: hidden;
    transition: all .5s;
    padding: 0em;
   }
  
  
   .modal__content4{
    width: 100%;
    z-index: 999999999;
    height: 80%;
    background-color: rgb(255, 255, 255);
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0em;
    font-size: 15px;
    border-radius: 0em;
    opacity: 0;
    visibility: hidden;
    transition: all .5s; 
   }
  
  
   #modal4:target{
    opacity: 1;
    visibility: visible;
    z-index: 999999999;
   }
  
  
   #modal4:target .modal__content4{
    opacity: 1;
    visibility: visible;
    z-index: 999999999;
   }
  
  
   .modal__close4{
    color: #ffffff;
    position: absolute;
    top: 0%;
    right: 25%;
  
    z-index: 5;
    margin: 3.3em;
    z-index: 999;
   }
  
   .modal__close4:hover{
    color: #ffffff;
    position: absolute;
    top: 0%;
    right: 25%;
  opacity: 40%;
    z-index: 5;
    margin: 3.3em;
    z-index: 999;
   }
  
  
  
   .modal__heading4{
    color: rgb(255, 255, 255);
    margin-top: 6em;
    z-index: 999;
   }
  
    
   .modal__paragraph4{
    line-height: 2em;
    color: rgb(0, 0, 0);
    margin: 1em;
    z-index: 999;
    font-family: "Gilroy-Regular", sans-serif;
    font-size: 1.1rem;
   }
  
  
  
   .modal-open4{
    display: inline-block;
    color: rgb(0, 0, 0);
    position: fixed;
    z-index: 999;
    right: 300px;
    top: 0px;
    margin: 1.5em; 
   }  
  
  
  
  .grid-container{
    width: 100vw;
    height: 100vh;
    left: 0%;
    background-color: transparent;
    top: 0%;
    position: absolute;
    display: block;
    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;
    
   }
  
  
  
  
  
  
   .evinde-button {
    width: 220px;
    height: 45px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    bottom: 0%;

    z-index: 9999;
    border: solid 1px rgb(0, 0, 0);
    border-radius: 1000px;
    background: #ffffff00;
    font-family: 'Roboto', sans-serif;
    color: rgb(0, 0, 0);
    background-size: 100%;
    cursor: pointer;
    justify-content: center;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
   
   }
  
  
  
   .evinde-button p {
  
    position:absolute;

    margin-left: 15%;
    font-size: 12px;
    display: block;
  
   }
  
   #ar-icon {
    position: absolute;
    display: block;
    width: 16px;
    margin-left:-140px;
  
  
   }
  
  
   #ar-icon-pc {
    position: absolute;
    display: block;
    width: 16px;
    margin-left:-140px;
  
  
   }
  
  
   
  
  /****************** PC TASARIM SON******************/
  
  
  
  
  .powered {
    width: 100px;
    position: absolute;
    display: block;
    z-index:99999999999;
    bottom: 10px;
    right: 10px;
    opacity: 0.5;
   }
  
  
  
  /****************** MOBİL TASARIM ******************/
  
  
  @media only screen and (max-width: 600px) {
  
  
   body {
    background: transparent;
   }
  
  
  .modal4{
    display:none;
   }
  
  
   .powered {
    width: 75px;
    position: absolute;
    display: block;
    z-index:99999999999;
    bottom: 10px;
    right: 10px;
   }
  
  
#all-parts {
    width: 110px;
    height: 45px;
    z-index:99999999999;
    position: fixed;
    touch-action: none;
    left: 19%;
    transform: translateX(-50%);
    bottom: 15%;
    font-size: 11px;
    z-index: 9999;
    border-radius: 1000px;
    background: #ffffff00;
    font-family: 'Roboto', sans-serif;
    color: rgb(0, 0, 0);
    background-size: 100%;
    cursor: pointer;
    justify-content: center;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    touch-action: manipulation;
}

#part-1 {
    width: 110px;
    height: 45px;
    z-index:99999999999;
    position: fixed;
    touch-action: none;
    left: 50%;
    transform: translateX(-50%);
    bottom: 15%;
    z-index: 9999;
    font-size: 11px;
    border-radius: 1000px;
    background: #ffffff00;
    font-family: 'Roboto', sans-serif;
    color: rgb(0, 0, 0);
    background-size: 100%;
    cursor: pointer;
    justify-content: center;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    touch-action: manipulation;
}

#part-2 {
    width: 110px;
    height: 45px;
    z-index:99999999999;
    position: fixed;
    touch-action: none;
    left: 81%;
    transform: translateX(-50%);
    bottom: 15%;
    z-index: 9999;
    font-size: 11px;
    border-radius: 1000px;
    background: #ffffff00;
    font-family: 'Roboto', sans-serif;
    color: rgb(0, 0, 0);
    background-size: 100%;
    cursor: pointer;
    justify-content: center;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    touch-action: manipulation;
}

#part-3 {
    width: 60px;
    height: 40px;
    z-index:99999999999;
    position: fixed;
    touch-action: none;
    left: 68%;
    transform: translateX(-50%);
    bottom: 16%;
    z-index: 9999;

    border-radius: 1000px;
    background: #ffffff00;
    font-family: 'Roboto', sans-serif;
    color: rgb(0, 0, 0);
    background-size: 100%;
    cursor: pointer;
    justify-content: center;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    touch-action: manipulation;
}

#part-4 {
    width: 60px;
    height: 40px;
    z-index:99999999999;
    position: fixed;
    touch-action: none;
    left: 84%;
    transform: translateX(-50%);
    bottom: 16%;
    z-index: 9999;

    border-radius: 1000px;
    background: #ffffff00;
    font-family: 'Roboto', sans-serif;
    color: rgb(0, 0, 0);
    background-size: 100%;
    cursor: pointer;
    justify-content: center;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    touch-action: manipulation;
}

  
  
   model-viewer {
    width: 100%;
    height: 100%;
    left: 0%;
    top:0%;
    position: fixed;
  
    z-index: 1; 
    --progress-mask: transparent;
   
    --poster-color: transparent;
   }
  
  
  .grid-container{
    width:100%;
    height: 100%;
    background-color: transparent;
    top: 0;
    left: 0%;
    position: fixed;
    display: block;
    grid-gap: 0px;
    z-index: 98;
   
  }

  
  
  
  
  
  .aropenicon {
    width: 230px;
    height: 45px;
    position: fixed;
    left: 50%;
    transform: translate(-50%, -50%);
    bottom: 0%;
    font-size: 12;
    z-index: 9999;
    border: solid 1px rgb(0, 0, 0);
    border-radius: 1000px;
    background: #ffffff00;
    font-family: 'Roboto', sans-serif;
    color: rgb(0, 0, 0);
    background-size: 100%;
    cursor: pointer;
    justify-content: center;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    touch-action: manipulation;
   
   }
  
  
  
   .aropenicon p {
  
    position:absolute;

    margin-left: 15%;
    font-size: 12px;
    display: block;
  
   }
  
   #ar-icon {
    position: absolute;
    display: block;
    width: 16px;
    margin-left:-130px;
  
  
   }
  
  
  
  
   #evinde-icon {
     display: none;
   }
  
  
   .paye-logo {
    width: 22%;
    margin-top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
  }
  
  
  
   }
  


   /* Tablet cihazlar için portre (dikey) modu */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  /* Portre modu için stil kodları buraya yazılacak */

  .aropenicon {
    display: flex;
  }

  .evinde-button {
    display: none;
  }
}


/* Tablet cihazlar için manzara (yatay) modu */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

  .aropenicon {
    display: flex;
  }

  .evinde-button {
    display: none;
  }

}

  
  
  /****************** MOBİL TASARIM SON ******************/
  
  
  
  
  /****************** TABLET TASARIM ******************/
  
  
  
  
  /****************** TABLET TASARIM SON ******************/