/* ============================= */
/* === BASE & RESET STYLES === */
/* ============================= */
* 

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

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background-color: #ffffff;
  color: #eee;
  touch-action: pan-y;
  overflow-x: hidden; 
 overscroll-behavior: none !important;
 
 

}
img {
  max-width: 100%;
  height: auto;
  display: block;

  cursor: pointer; /* wajib iOS */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;

  transform-origin: center center;
  transition: transform 0.25s ease; /* efek normal */
    touch-action: manipulation !important;
    overscroll-behavior: none !important;
}

img.click-active {
  transform: scale(0.90); /* efek klik */
}


.container {
  max-width: 100%; 
  margin: 0 auto;
  padding: 0vw 0vw;
}

h1, h2, h3 {
  margin-bottom: 15px;
  color: #fff;
}

/* ============================= */
/* === NAVBAR === */
/* ============================= */


/* Matikan hamburger */
/* NAVBAR tetap */
.navbar {
  background-color: #ffffff;
  padding: 1px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 8vw;  /* ukuran navbar tetap */
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

/* MATIKAN HAMBURGER */
.hamburger {
  display: none !important;
}

/* MENU SELALU MUNCUL */
.nav-menu {
  display: block !important;
}

/* Supaya .active tidak merusak */
.nav-menu.active {
  display: block !important;
}

/* Style UL */
.nav-menu ul {
  display: flex;
  align-items: center;
  gap: 3vw;
}

/* Menu item */
.nav-menu ul li a {
  text-decoration: none;
  color: #2b0313;
  font-weight: bold;
  padding: 10px 15px;
}

/* Hover */
.nav-menu ul li a:hover {
  transform: scale(1.2);
  color: #f00808;
  background-color: #383737;
  box-shadow: 0 4px 10px rgba(255, 0, 0, 0.3);
}

/* Logo tetap */
.logo img {
  height: 120px;
  position: relative;
  top: -20px;
  left: -20px;
}






.hero-section {
  position: relative;
  width: 100%;
  padding: 20vw 0;
  text-align: center;
  background-size: cover;
  background-position: center;
  padding-bottom: 40px;
  scroll-margin-top: 100vw;
  
}

.hero-content h1 {
  font-size: 500 !important; /* paksa ukuran font */
  position: absolute;
  text-align: left;
  max-width: 700px;
  padding-left: 20vw;
  color: #3a3a3a;
  margin-left: -30vw; /* agak ke kiri */
  
}

.hero-image {
  width: 100vw; /* buat lebar penuh layar */
  margin-left: calc(50% - 50vw); /* hilangkan padding container */
  margin-top: calc(35% - 50vw);

}

.hero-image img {
  width: 100vw;
  position: relative;
  top: -10vw;
  padding: 0 ;
  object-fit: cover;
border-radius: 0vw;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}


/* Gambar */





/* POSISI TIDAK DIUBAH */
/* posisi about-section tetap seperti asli */
.about-section {
    padding-bottom: 90vw;
    width: 200vw;
    scroll-margin-top: 0vw;
    color: #3d3d3d;
    position: relative;
    left: -45vw;
    top: 49vw;
}

/* SLIDER MODEL LEGALITY */
.slide-vertical {
    display: flex;
    flex-direction: row;    
    gap: 0vw;                    /* jarak antar gambar, bebas */
    transition: transform 0.5s ease-in-out;
    position: relative;
    left: 70vw;
    
    
  
}

/* ITEM SLIDE MIRIP legality-item */
.slide-vertical img {
    flex-shrink: 0;
    width: 80vw;                  /* ukuran satu slide */
    height: auto;
    border-radius: 12px;
    position: relative;
    left: -38vw;

    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}


.about-section h2 {
width: 230vw;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 7vw;
display: flex;
justify-content: start;
 
color: #dd490f;
    background: linear-gradient(90deg, hsl(0, 0%, 95%), #ff3c00); 
      -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    text-shadow: 2px -8px 8px rgba(255, 0, 0, 0.4);
     line-height: 1; /* atau 0 jika benar-benar ingin rapat */
position: relative;
bottom: 90vw;
padding-left: 60vw;
right: 30vw;
padding-right: 50vw;





}

.about-section p {
width: 90vw;
height: 60vw;
position: relative;
left: 101.1vw;
top: -75vw;
background-color: #ffffff;

/* ubah ini (vw → px) */
font-size: 2vw;  
text-align: left; 

max-width: 900px;




}

img.click-effect {
    transition: transform 0.6s ease;
    touch-action: manipulation;
}

img.click-active {
    transform: scale(1.2); /* mengecil 10% */
}


/* Thumbnail Previews */



.thumbnail-previews{
width: 90VW;
position: relative;
bottom: 100vw;
left: 5vw;}
.thumbnail-previews h1{
width: 100vw;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 7vw;
display: flex;
justify-content: start;
 
color: #dd490f;
    background: linear-gradient(90deg, hsl(0, 100%, 100%), #ff3c00); 
      -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    text-shadow: 2px 1px 5px rgba(255, 0, 0, 0.4);
     line-height: 1; /* atau 0 jika benar-benar ingin rapat */
position: relative;
bottom: 300vw;
left: 2vw;







  



}
.thumbnail-previews P{
width: 10vw;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 3vw;
  color: #585858;
  position: relative;
display: flex; 
bottom: 300vw;
left: 3vw;
white-space: nowrap;


}

.thumbnail-previews h2{
width: 10vw;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 6vw;
display: flex;
justify-content: start;
  color: #dd490f;
     line-height: 1; /* atau 0 jika benar-benar ingin rapat */
position: relative;
bottom: 290vw;
left: 3vw;
text-align: left;
}
.thumbnail-previews h3{
width: 45vw;
    font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 5vw;
display: flex;
justify-content: start;
  color: #dd490f;
     line-height: 1; /* atau 0 jika benar-benar ingin rapat */
position: relative;
bottom: 205vw;
left: 46vw;
text-align: left;



}

.thumbnail-previews h4{
width: 10vw;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 6vw;
display: flex;
justify-content: start;
  color: #dd490f;
     line-height: 1; /* atau 0 jika benar-benar ingin rapat */
position: relative;
bottom: 120vw;
left: 3vw;
text-align: left;

}





/* Wrapper gambar */
.slides {
    display: flex;

  
     position: relative;
  bottom: 5vw;
  left: -0.5vw;
     

}


.thumbnail-previews Product2 {
  width: 100vw;
}


/* structure-organization */

.structure-organization {
  position: relative;
  top: -150vw;
  left: 65vw;
 

padding-right: 90vw;
 
}
.structure-organization h2 {
  position: relative;
  top: 10vw;
  left: -70vw;
width: 50vw;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 6vw;
flex-direction: column;

 
color: #dd490f;
    background: linear-gradient(90deg, hsl(0, 100%, 20%), #ff3c00); 
      -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    text-shadow: 2px 1px 5px rgba(255, 0, 0, 0.4);
     line-height: 1; /* atau 0 jika benar-benar ingin rapat */
  
}
.structure-organization img {
  position: relative;
  top: 5vw;
 left: 3Ivw;
 width: 40vw;



}



.member-card {
  position: relative;
  left: -5vw;
  
  width: 100vw; 
  overflow: hidden;
}

.slider-track {
  display: flex;
  transition: transform 0.5s ease;
}

.slider-track img {
  
  min-width: 300vw;
  height: auto;
}

 
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px;
  font-size: 24px;
  background: rgba(0,0,0,0.4);
  color: #fff;
  border-radius: 20vw;
  cursor: pointer;
  z-index: 10;

  border: none;
}

.prev { left: 4500px; }
.next { right: 500px; }
/* vlie */
.Value-section{
 position: relative;
 left: 0VW;
 top: -120VW;

  width: 100VW;
  height: auto;
  
}
.Value-section {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeAssemble 0.8s ease forwards;
}

/* Memberikan delay bertahap sesuai urutan */
.product-item:nth-child(1) { animation-delay: 0.2s; }
.product-item:nth-child(2) { animation-delay: 0.4s; }
.product-item:nth-child(3) { animation-delay: 0.6s; }
.product-item:nth-child(4) { animation-delay: 0.8s; }

/* Animasi */
@keyframes fadeAssemble {
  0% {
    opacity: 0;
    filter: brightness(50%);
    transform: translateY(40px) scale(0.95);
  }
  50% {
    opacity: 0.6;
    filter: brightness(80%);
    transform: translateY(15px) scale(1.02);
  }
  100% {
    opacity: 1;
    filter: brightness(100%);
    transform: translateY(0) scale(1);
  }
}
/* product */
.product-section {
  width: 100%;
  position: relative;
  bottom: 130vw;
 scroll-margin-top: 10vw;
}

.product-grid {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.product-item img {
  width: 200vw;      /* Atur ukuran supaya muat di layar */
  max-width: 400px; /* Biar tidak terlalu besar */
  height: auto;
}
.product-section h2 {
color: #dd490f;
    background: linear-gradient(90deg, hsl(0, 100%, 100%), #ff3c00); 
      -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    text-shadow: 2px 1px 5px rgba(255, 0, 0, 0.4);
    font-size: 7vw;
    position: relative;
    left: -25vw;
}
.product-item {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeAssemble 0.8s ease forwards;
}

/* Memberikan delay bertahap sesuai urutan */
.product-item:nth-child(1) { animation-delay: 0.2s; }
.product-item:nth-child(2) { animation-delay: 0.4s; }
.product-item:nth-child(3) { animation-delay: 0.6s; }
.product-item:nth-child(4) { animation-delay: 0.8s; }

/* Animasi */
@keyframes fadeAssemble {
  0% {
    opacity: 0;
    filter: brightness(50%);
    transform: translateY(40px) scale(0.95);
  }
  50% {
    opacity: 0.6;
    filter: brightness(80%);
    transform: translateY(15px) scale(1.02);
  }
  100% {
    opacity: 1;
    filter: brightness(100%);
    transform: translateY(0) scale(1);
  }
  
  
}



/* ================================ */
/* SURAT / LEGALITY SLIDER SECTION */
/* ================================ */
.surat-section {
  padding: 20px;
  text-align: center;
  background-color: #f5f5f5;
  position: relative;
  bottom: 60vw;
}

.surat-grid {
  display: flex;
 
  gap: 20vw;                 /* jarak antar gambar */
  transition: transform 0.5s ease-in-out; /* animasi geser */
}

.legality-item {
  flex-shrink: 0;
  width: 80vw;              /* lebar satu gambar per slide, responsive */
  position: relative;
  left:0vw;
  top: -50vw;
}

.legality-item img {
  width: 100%;              /* memenuhi item slide */
  height: auto;
  display: block;
  position: relative;
  left: 10vw;
}

/* Optional: atur judul section */
.surat-section h2 {
  font-size: 7vw;           /* responsive ukuran teks */
 position: relative;
 top: -50vw;
 left: 0vw;
color: #dd490f;
    background: linear-gradient(90deg, hsl(0, 100%, 100%), #ff3c00); 
      -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    text-shadow: 2px 1px 5px rgba(255, 0, 0, 0.4);
}

.address-section{
  width: 100vw;
  position: relative;
  left: 5vw;
  bottom: 90vw;
 
}
.address-section h2{
color: #dd490f;
    background: linear-gradient(90deg, hsl(0, 100%, 100%), #ff3c00); 
      -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    text-shadow: 2px 1px 5px rgba(255, 0, 0, 0.4);
    font-size: 7vw;
    position: relative;
    left: -34vw;
}
.address-content img {
    width: 100vw;
}




 
/* ===== FOOTER ===== */
#foot {
  width: 100%;
  background-color: #222;
  color: #fff;
  padding: 30px 20px;
  box-sizing: border-box;
  position: relative;
  top: 10vw;
}

#footer-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

#contact-info, 
#social-links {
  flex: 1 1 250px;
}

#contact-info h3, 
#social-links h3 {
  margin-bottom: 10px;
}

#contact-info p, 
#social-links a {
  margin: 5px 0;
  color: #fff;
  text-decoration: none;
}

#social-links a:hover {
  text-decoration: underline;
}

#footer-bottom {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: #ccc;
}