/* ============================= */
/* === 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: 20px;
}

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

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



.navbar {
  background-color: #ffffff;
  padding: 1px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 30vw;
}

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

/*============== OPTIONAL: buka menu saat hamburger aktif ==============*/
/* Saat hamburger di-klik */
.nav-menu.active {
  display: block !important;
  width: 100%;
  background: white;
  padding: 15px 0;
  position: absolute;
  top: 25vw;
  left: 0;
  border-top: 1px solid #ddd;
 
}

/* UL jadi kolom */
.nav-menu.active ul {
  display: flex;
  
  align-items: center;
  width: 100%;
  gap: 1vw;
  margin: 0;
  padding: 0;
  position: relative;
  left:5vw;
}

/* Tampilan item */
.nav-menu.active ul li a {
  width: 70%;
  padding: 12px 20px;
  background: white;
  border-radius: 10px;
  text-align: center;
  display: block;
  color: #2b0313;
  font-weight: bold;
 text-decoration: none;}
 /* Efek hover */
.nav-menu ul li a:hover {
  transform: scale(1.2);
  color: #f00808;
  background-color: #383737; /* efek latar belakang lembut */
  box-shadow: 0 4px 10px rgba(255, 0, 0, 0.3); /* sedikit glow merah */
}
/* Matikan menu besar karena mobile-first */
.nav-menu {
  display: none !important;
}

/* Hamburger SELALU tampil */
.hamburger {
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  position: relative;
  top: -2vw;
}

.hamburger span {
  width: 6vw;
  height: 1vw;
  background: #2b0313;
  border-radius: 5px;
  transition: .3s;
}

/* Logo */
.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: -10px;
  padding: 0 ;
  object-fit: cover;
border-radius: 10vw;
  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: 150vw;                  /* ukuran satu slide */
    height: auto;
    border-radius: 12px;
    position: relative;
    left: -18vw;

    -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: 8vw;
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 1px 5px rgba(255, 0, 0, 0.4);
     line-height: 1; /* atau 0 jika benar-benar ingin rapat */
position: relative;
bottom: 190vw;
padding-left: 60vw;
right: 30vw;
padding-right: 50vw;





}

.about-section p {
  width: 90vw;
position: relative;
left: 45vw;
top: -20vw;




}

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;
}
.thumbnail-previews h1{
width: 100vw;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14vw;
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: 320vw;
left: 6vw;







  



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


}

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



}
.thumbnail-previews h4{
width: 10vw;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 9vw;
display: flex;
justify-content: start;
  color: #dd490f;
     line-height: 1; /* atau 0 jika benar-benar ingin rapat */
position: relative;
bottom: 155vw;
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: -60vw;
 

padding-right: 90vw;
 
}
.structure-organization h2 {
  position: relative;
  top: -10vw;
  left: -5vw;
width: 100vw;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14vw;
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 */
  
}
.structure-organization img {
  position: relative;
  top: 5vw;
 left: 3vw;



}



.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: 5px; }
.next { right: 5px; }
/* vlie */
.Value-section{
 position: relative;
 left: -17VW;
 top: -40VW;

  width: 130VW;
  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: 60vw;
  scroll-margin-top: 30vw;
}

.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: 150px; /* 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: 10vw;
    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;
}

.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;
}

/* Optional: atur judul section */
.surat-section h2 {
  font-size: 10vw;           /* 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: 125vw;
  position: relative;
  left: -5vw;
  bottom: 40vw;
}
.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: 10vw;
    position: relative;
    left: -35vw;
}
#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;
}