* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  .next-button {
    padding: 12px 30px;
    background-color: #4a4a4a;
    border: solid 1px gray;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    position: absolute;
    display: none!important;
    bottom:-20px;
    right: 5px;
    z-index:9999999999999;
  }

  .next-button:hover {
    opacity: 0.8;
  }


  .ar-icon {
    width: 14px;
    height: 14px;
  margin-left: -20px;
  margin-top: -1.5px;
  position: absolute;
  display: inline-block;
  }


.qr-button {
  padding: 16px 30px;
  background-color: #4a4a4a;
  border: solid 1px gray;
  border-radius: 444px;
  font-size: 11px;
  padding-left: 50px;
  cursor: pointer;
  display: block;
  z-index:99999999999999;
  color: white !important;
  position: absolute;

}



.buttons-main-container {
  position: fixed;
  bottom: 10px;
  right: 16px;
  height: 40px;
  width:200px;

  z-index: 1000; /* Yine yüksek ama çok abartılı değil */
  background: rgba(255,255,255,0.9); /* Gerekliyse */
  /* Diğer tasarım ayarları */
}


  @font-face {
    font-family: 'Milk Pro Light';
    src: url('assets/new-assets/Marsnev-LEMON-milkProLight.otf') format('opentype');
  }


  /* Allow scrolling only in the right panel */
.right-panel {
    position: absolute;  /* Ekranın belirli bir konumuna sabitle */
    right: 10%;           /* Ekranın sağından 4% boşluk bırak */
    top: 50%;            /* Üstten %50 hizala */
    transform: translateY(-50%); /* Kendi yüksekliğinin yarısı kadar yukarı kaydırarak dikey ortala */
    width: auto;         /* İçeriğe göre genişlik ayarla */
    background: #ffffff00; /* Arkaplan rengi (şeffaf yapabilirsin) */
    padding: 0px;
    border-radius: 8px;
    

    flex-direction: column;
    display: none;
    z-index: 99999999; /* En üste çık */
}
  /* Başlık ve select’ler temel stil */
  .right-panel h3 {
    font-size: 14px;
    margin: 0; /* Üstüne altına gap devreye girecek */
    font-weight: 600;
  }
  

/* SELECT (Sağ Panel) */

/* Renk Seçim Paneli (Daha dar ve kompakt) */
.colors-container {
  top: 120px;
  right: 20px;
  width: 620px;           /* Panel genişliği biraz daraltıldı (650→600) */
  height: auto;
  overflow-y: none;
  padding: 0px;          /* İç boşluk biraz azaltıldı */
  z-index: 9999;
  background: rgba(255, 255, 255, 0);
  border-radius: 8px;
}

/* Başlıklar */
.colors-title {
  font-size: 1em;
  font-weight: 600; 
  color: #333;
  margin-bottom: 8px;     /* Biraz küçültüldü */
  text-transform: uppercase;
  border-bottom: 2px solid #ccc;
  padding-bottom: 5px;
  text-align: left;       /* Başlıkları da sola hizala */
}

/* Renkleri içeren grid */
.colors-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); /* Responsive grid */
  gap: 0px;               /* Aralıklar daraltıldı */
  justify-content: center;
  padding: 0px;           /* İç padding küçültüldü */
  box-sizing: border-box;
  margin-top: 10px;       /* Biraz küçültüldü */
}

/* Grid içindeki resimlere stil */
.colors-grid img {
  padding: 2px;           /* Kenar boşluğu azaldı */
  border: 1px solid #d0d0d0;
  border-radius: 6px;
}

/* Renk kutuları */
.color-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;  
  width: 60px;
  height: 81px;          /* Sabit yükseklik */
  margin-bottom: 10px;
  text-align: center;
  box-sizing: border-box;
}

/* Görsel */
.color-box img {
  width: 100%;
  width: 50px;
  height: 50px;
}

/* Renk isimleri: iki satıra taşsa bile kutu boyu sabit kalır */
.color-box p {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
  line-height: 1.2em;
  text-align: center;
  max-height: 2.4em;       /* 1.2em x 2 satır = 2.4em */
  overflow: hidden;
  
  /* İki satırı aşarsa kesilsin isterseniz: 
     -webkit-line-clamp, -webkit-box-orient kullanabilirsiniz */
  display: -webkit-box;
  -webkit-line-clamp: 2;   /* Maksimum 2 satır göster */
  -webkit-box-orient: vertical; 
}



  
  .text-en, .text-ar {
    display: block;
  }
  
  

  
  .dimension-container {
    position: absolute;
    left:0px;
    display: block;
    margin-top: -80px;
  }
 
  .pied-container {
    position: absolute;
    left:230px;
    display: block;
    margin-top: -80px;
  }


  
 

  .right-panel select {

    padding: 10px 18px;
    background-color: #4a4a4a;
    color: #fff;
    border: none;
    border-radius: 4px;
    text-align: left;       /* Metni sola hizala */
    margin-top: 4px;
  }
  



  
  
  
.baslik-header {
  position: relative; /* Absolute'dan relative yapıldı */
  top: 1em; /* Yukarıdan boşluk eklemek için artırıldı */
  display: block;
  color: rgb(103, 103, 103);
  font-size: 0.8em !important;
  border-bottom: 1px solid gray;
  width: 50%;
  padding-bottom: 2px;
  margin-bottom: 5px; /* Altında boşluk eklemek için artırıldı */
}
  
  
 

  
    


  

  

  

  #realARbutton {
    display: none;
  }
  
.modal4{
  background-color: rgba(0, 0, 0, 0.724);

  width:100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999999;
  opacity: 0;
  visibility: hidden;
  transition: all .5s;
  padding: 0em;
 }


 .modal__content4{
    width: 420px;
    z-index: 999999999;
    height: 600px;
    background: rgb(255, 255, 255);
    backdrop-filter: blur(12.1px);
    -webkit-backdrop-filter: blur(12.1px);
    position: fixed;
    top: 50%;
  
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0em;
    border: solid 1px rgb(169, 169, 169);
    border-radius: 12px;
    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: -4%;
  right: -2%;
cursor: pointer;
  z-index: 5;
  margin: 3.3em;
  z-index: 999;
 }

 .modal__close4:hover{
  color: #ffffff;
  position: absolute;
  top: -4%;
  right: -2%;
opacity: 0.6;
  z-index: 5;
  margin: 3.3em;
  z-index: 999;
 }






  .modal__paragraph4{
    line-height: 2em;
    color: rgb(104, 104, 104);
    margin-top: 3vw;
    width:70%;
    z-index: 999;
    font-family: 'Milk Pro Light', sans-serif;
    font-size: 16px;
   }





  .aropenicon {
    display: none !important;
  }
  
  body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #ffffff;
  }



  .real-buttons {
    display: none !important;
  }



  header {
    position: fixed;
    top: 2em;
    left: 50%;
    Transform: translate(-50%, -50%);
    width: 95%;
    height: 4em;
    background-color: rgba(128, 19, 19, 0);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 99999999;
    opacity: 0.7;

  }

  
  .wongleon-logo{
    width:5%;
    margin-left: 0%;
  }
  
  .share-icon {
    width:3%;
    opacity: 0.7;
  }
  
  .info-icon {
    width:20%;
    opacity: 0.7;
  }
  
  
  
.model-container {
  width:100%;
  height:99%;

  position: fixed;
  display: block;
  top: 0%;
}

.couleurs-mention {
  position: absolute; 
  bottom: 10px;       /* model-container’ın en altında bulunsun */
  left: 20px;         /* soldan biraz boşluk */
  font-size: 14px;    /* istediğiniz boy */
  color: red; 
  font-weight: bold;  /* isteğe bağlı kalın yazı */
}


model-viewer {
  width:100%;
  height: 100%;
  display: block;

  top: 0%;
  left:0%;
  z-index: 9999999999999;
 }
  
  

  /* Track */
  ::-webkit-scrollbar-track {
    background: #f1f1f1; 
    
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: rgb(220, 220, 220); 
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: rgb(211, 211, 211); 
  }
  


#qrimage{
  margin-top: 10%;
}

#ozellik-kapat {
  display: none;
}


.ar-button {

  display: none;

}







.buy-button {
  width: calc((18% - 20px) / 2);
  height: 4em;
  background-color: rgb(255, 255, 255);
  bordeR: solid 1px gray;
  border-radius: 2000px;
  margin-right: -1em;
  font-size: 12px;
  top: 0%;
  cursor: pointer;
  display: inline-block;
  z-index:99999999999999;

color: gray;

}

.buy-button-text {
  color: gray;
  font-family: 'Milk Pro Light', sans-serif;
}

#modal-image {
  width: 25%;
  opacity: 0.5;
position: absolute;
display: block;
left: 50.5%;
top: 16%;
transform: translate(-50%, -50%);

}


#modal-image-2 {
  width: 35%;
  opacity: 0.8;
  position: absolute;
  display: block;
z-index:-99;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}









  

.modal5{
  background: rgb(255 255 255 / 22%);
  backdrop-filter: blur(12.1px);
  -webkit-backdrop-filter: blur(12.1px);
  
    width:100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999999;
    opacity: 0;
    visibility: hidden;
    transition: all .5s;
    padding: 0em;
   }
  
  
   .modal__content5{
    width: 420px;
    z-index: 999999999;
    height: 600px;
    background: rgb(255, 255, 255);
    backdrop-filter: blur(12.1px);
    -webkit-backdrop-filter: blur(12.1px);
    position: fixed;
    top: 50%;
  
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0em;
    border: solid 1px rgb(169, 169, 169);
    border-radius: 12px;
    opacity: 0;
    visibility: hidden;
    transition: all .5s; 
   }
  
  
   #modal5:target{
    opacity: 1;
    visibility: visible;
    z-index: 999999999;
   }
  
  
   #modal5:target .modal__content5{
    opacity: 1;
    visibility: visible;
    z-index: 999999999;
   }
  
  
   .modal__close5{
    color: #ffffff;
    position: absolute;
    top: 14px;
    right:14px;
  cursor: pointer;
    z-index: 5;

    z-index: 999;
   }
  
   .modal__close5:hover{
    color: #ffffff;
    position: absolute;
    top: 14px;
    right:14px;
  cursor: pointer;
    z-index: 5;

    z-index: 999;
   }
  
  
  
  
   .modal__paragraph5{
    line-height: 24px;
    text-align:center;
    color: rgb(104, 104, 104);
    margin-top: 210px;
    width:auto;
    padding: 36px;
    z-index: 99999;
    font-family: 'Milk Pro Light', sans-serif;
    font-size: 14px;
   }

   .base-logo {
    width: 120px;
    bottom: 10px;
    opacity: 0.8;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
  
  }
    


#modal-image {
    width: 25%;
    opacity: 0.5;
  position: absolute;
  display: block;
  left: 50.5%;
  top: 16%;
  transform: translate(-50%, -50%);
  
  }
  
  
  #modal-image-2 {
    width: 280px;
    opacity: 0.8;
    position: absolute;
    display: block;
  z-index:-99;
    top: 160px;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  
.modal-selection {
  display: none;                /* Başlangıçta görünmesin */
  position: absolute;             /* Ekran konumuna sabitlenir */
  bottom:205px; 
  right:510px;
  background-color: rgb(255, 255, 255) !important;
  background: transparent;
  z-index: 999999999999999; 
  /* Ortada göstermek için Flex ayarları: */


}

.modal__content-selection {
  position: absolute;
  display: block;
  background-color: #ffffff; /* Daha belirgin beyaz arka plan */
  border-radius: 16px;
  width:500px; 
  height: 200px;     
  padding: 30px; /* Padding artırıldı */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  text-align: center;
  line-height: 1.8; /* Yazılar arasındaki boşluk artırıldı */
  letter-spacing: 0.5px; /* Harfler arasındaki boşluk artırıldı */
  border: solid 1px green;
}

#selection-summary{
  padding-top: 0px;
}



/* X (kapatma butonu) */
.modal__close-selection {
  position: absolute;
  top: 15px;
  right: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.3s;
}
.modal__close-selection:hover {
  opacity: 0.6;
}






@media screen and (max-width: 600px) {
  /* Body normal akış; dikey kaydırma açık */
  html, body {
    margin: 0; 
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;  /* Dış kaydırmayı kapattık */
  }




  .qr-button {
    padding: 12px 42px;
    background-color: #4a4a4a;
    border: solid 1px gray;
    border-radius: 4px;
    font-size: 10px;
    padding-left: 50px;
    cursor: pointer;
    display: none;
    z-index:99999999999999;
    color: white !important;
    position: absolute;
  
  }
  

  /* Model: ekranın ortasına sabit, header’ın 60px altından başlıyor */
  .model-container {
    width: 100%;
    height: 50%; /* veya istediğiniz başka bir oransal yükseklik */
    top: 0;
    left: 0;
    transform: none;
  }

  .couleurs-mention {
    position: absolute; 
    bottom: 120px;       /* model-container’ın en altında bulunsun */
    left: 5px;         /* soldan biraz boşluk */
    font-size: 12px;    /* istediğiniz boy */
    color: red; 
    font-weight: bold;  /* isteğe bağlı kalın yazı */
  }
  

  #realARbutton {
    display: block;
  }
  model-viewer {
    width: 100%;
    height: 100%;
    z-index: 9999999999999;
  }

  #copy-button {
    background-color: #f1f1f1;
    border: none;
    padding: 5px 8px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
    margin-left: 8px;
  }
  
  #copy-button:hover {
    background-color: #ddd;
  }
  
  #copy-message {
    font-size: 12px;
    color: green;
    margin-top: 5px;
    display: none;
  }


  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    height: 60px;
    padding: 0 15px;
  }

  .info-icon {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 25px; /* Adjust size if needed */
  }

  .wongleon-logo {
    width: 30%;
    max-width: 150px;
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .buy-button {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 90px; /* Adjust width for better readability */
    height: 35px; /* Increase height for better spacing */
    font-size: 14px; /* Slightly larger text */
    padding: 5px 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap; /* Ensure text stays in one line */
  }

/* Mobilde 5 sabit sütun yerine, ‘auto-fit’ yaklaşımı */
.colors-grid {
  display: flex;
  overflow-x: auto; /* Yatay kaydırma çubuklarını göster */
  gap: 0px; /* İçerik arasındaki boşluğu ayarla */
  width: 100%; /* Gridin genişliğini %100 olarak ayarla */
  height: 100px; /* Gridin sabit yüksekliğini ayarla */
  box-sizing: border-box; /* Kutu modelini border-box olarak ayarla */
  white-space: nowrap; /* İçeriği tek bir satırda tutar */
  justify-content: left;


}

.color-box {
  flex: 0 0 auto; /* Öğelerin esneklik davranışını kontrol et */
  width: auto; /* Renk kutusunun genişliğini ayarla */
  height: 80px; /* Renk kutusunun yüksekliğini ayarla */
  text-align: center; /* Metni merkezle */
  background-color: #cccccc00; /* Arka plan rengi */
  margin-right: 10px; /* Sağdaki boşluk ayarla */
  box-sizing: border-box; /* Kutu modelini border-box olarak ayarla */
  margin-top: 0px;
}
/* Resimler de dar ekranda taşmaması için orantılı küçülsün */
.color-box img {
  width: 48px;
  height: auto;
  display: block;
}

.color-box p {
  font-size: 11px;
  color: #666;
  margin-top: 5px;
  line-height: 1.2em;
  text-align: center;
  max-height: 2.4em;       /* 1.2em x 2 satır = 2.4em */
  overflow: hidden;
  
  /* İki satırı aşarsa kesilsin isterseniz: 
     -webkit-line-clamp, -webkit-box-orient kullanabilirsiniz */
  display: -webkit-box;
  -webkit-line-clamp: 2;   /* Maksimum 2 satır göster */
  -webkit-box-orient: vertical; 
}

/* Başlıklar */
.colors-title {

  font-weight: 600; 
  color: #333;

  text-transform: uppercase;
  border-bottom: 2px solid #ccc;
  padding-bottom: 5px;
  text-align: left;       /* Başlıkları da sola hizala */
  position: fixed;
  margin-top: -30px!important;

}

  /* Alt sabit butonlar (AR/QR) */
  .buttons-main-container {
    background-color: rgb(255, 255, 255);
    position: fixed;
    display: block;
    bottom: 310px;

    width: 70px;

    right: 10px;
    transform: none;
  }
  .ar-icon {
    width: 16px;
    height: 16px;
  margin-left: -24px;
  margin-top: 0px;
  position: absolute;
  display: inline-block;
  }
  
  
  .ar-button {
    padding: 8px 8px;
    background-color: #4a4a4a;
    border: solid 1px gray;
    border-radius: 4px;
    font-size: 14px;
    padding-left: 36px;
    cursor: pointer;
    display: block;
    z-index:99999999999999;
    color: white !important;
    position: absolute;
  
  }
  



  #selection-summary{
    padding-top: 50px;
  }
  
  
  .dimension-container {
    position: absolute;
    left:5px;
    display: block;
    margin-top: 35px;
  }
 
  .pied-container {
    position: absolute;
    left:180px;
    display: block;
    margin-top: 35px;
  }


.colors-container {

  bottom: 0px;
  right: 0px;
  width: 99%; /* Panel genişletildi */
  height: auto;
  padding: 0px;
  z-index: 9999;
  background: rgba(255, 255, 255, 0);
  border-radius: 8px;
  position: absolute;

  display: block;


}



.right-panel select {

  padding: 0px 0px;
  width: 170px;
  height: 30px;
  background-color: #4a4a4a;
  color: #fff;
  border: none;
  border-radius: 4px;
  text-align: left;       /* Metni sola hizala */
  margin-top: 5px;
}

.right-panel {
  position: fixed;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 320px;

  background: transparent;
  z-index: 9997;
  box-sizing: border-box;
  padding: 0px;
  transform: none;

  top: auto;

}

.modal-selection {
  display: none;                /* Başlangıçta görünmesin */
  position: absolute;             /* Ekran konumuna sabitlenir */
  bottom:0px; 

  right:0%;
  width: 100%;
  heighT: 40%;
  background-color: rgb(255, 255, 255);
  background: transparent;
  z-index: 9999999; 
  /* Ortada göstermek için Flex ayarları: */

}


.modal__content-selection {
  position: absolute;
  display: block;
  background-color: #ffffff; /* Daha belirgin beyaz arka plan */
  border-radius: 16px;
  width:100%; 
  height: 100%;     
  padding: 30px; /* Padding artırıldı */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  text-align: center;
  line-height: 1.8; /* Yazılar arasındaki boşluk artırıldı */
  letter-spacing: 0.5px; /* Harfler arasındaki boşluk artırıldı */
  border: solid 1px green;
}




/* X (kapatma butonu) */
.modal__close-selection {
  position: absolute;
  top: 15px;
  right: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.3s;
}
.modal__close-selection:hover {
  opacity: 0.6;
}


.next-button {
  padding: 8px 20px;
  background-color: #4a4a4a;
  border: solid 1px gray;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  position: absolute;
  display: none !important;
  bottom: 4px;
  right: 6px;
  z-index:9999999999999;

}

.next-button:hover {
  opacity: 0.8;
}

}