/* ================= RESET ================= */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family:Arial, Helvetica, sans-serif;
}

body{
  background:#0e0f13;
  color:#eaeaea;
}

/* ================= HEADER ================= */
.topbar{
  height:56px;
  padding:0 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #1f2230;
  position:fixed;
  top:0;
  width:100%;
  background:#0e0f13;
  z-index:100;
}

.logo-img{height:28px}

.top-right{
  display:flex;
  gap:12px;
}

.help-btn{
  background:none;
  border:1px solid #1f2230;
  color:#ccc;
  padding:6px 14px;
}

.menu-btn{
  background:none;
  border:none;
  color:#fff;
  font-size:22px;
}

/* ================= HERO SLIDER ================= */
.hero-slider{
  margin-top:64px;
  position:relative;
  overflow:hidden;
  background:#000;
}

.hero-slider .slides{
  display:flex;
  width:100%;
  transition:transform 1s ease;
}

.hero-slider .slide{
  flex:0 0 100%;
  aspect-ratio:16/9;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
}

.s1{background-image:url("../assets/slider/s1.jpg")}
.s2{background-image:url("../assets/slider/s2.jpg")}
.s3{background-image:url("../assets/slider/s3.jpg")}
.s4{background-image:url("../assets/slider/s4.jpg")}

.slider-dots{
  position:absolute;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  z-index:5;
}

.slider-dots span{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#aaa;
  opacity:.35;
}

.slider-dots span.active{
  opacity:1;
  background:#fff;
}

/* ================= ABOUT ================= */
.about{
  padding:100px 80px;
}

.about-wrap{
  max-width:1200px;
  margin:auto;
  display:flex;
  align-items:center;
  gap:60px;
}

.about-image img{
  width:100%;
  max-width:480px;
  border-radius:6px;
  box-shadow:0 20px 40px rgba(0,0,0,.6);
}

.about-text h2{
  font-size:28px;
  margin-bottom:20px;
}

.about-text p{
  color:#b0b0b0;
  line-height:1.75;
  margin-bottom:18px;
}

/* ================= BRAND VIDEO ================= */
.brand-video{
  width:100%;
  background:#000;
}

.brand-video .video-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
}

.brand-video iframe{
  width:100%;
  height:100%;
  border:0;
}

/* ================================================= */
/* ============== PRODUK UNGGULAN ================== */
/* ================================================= */

.products{
  padding:70px 24px;
}

.products h2{
  font-size:22px;
  margin-bottom:24px;
}

.product-wrapper{
  display:flex;
  align-items:center;
  gap:12px;
}

.prod-nav{
  background:none;
  border:none;
  color:#888;
  font-size:36px;
  cursor:pointer;
}

/* TRACK */
.product-track{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-behavior:smooth;
  width:100%;
  -webkit-overflow-scrolling:touch;
}

.product-track::-webkit-scrollbar{
  display:none;
}

/* ===== KARTU PRODUK (STABIL) ===== */
.product-card{
  min-width:300px;
  max-width:300px;
  background:#ffffff;
  border:1px solid #1f2230;
  padding:20px;
  position:relative;
  overflow:hidden;
  transition:transform .3s ease;
}

/* FRAME GAMBAR */
.product-card .img{
  height:160px;
  background:#f0f0f0;
  margin-bottom:16px;
  border-radius:4px;
  overflow:hidden;
  position:relative;
  isolation:isolate;
}

/* GAMBAR */
.product-card .img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  backface-visibility:hidden;
  transform:translateZ(0);
}

/* TEKS */
.product-card h4{
  font-size:15px;
  margin-bottom:12px;
  color:#111;
}

/* BUTTON */
.detail-btn{
  display:inline-block;
  padding:8px 20px;
  border:1px solid #000;
  color:#000;
  text-decoration:none;
  font-size:13px;
  transition:.25s ease;
}

.detail-btn:hover{
  background:#000;
  color:#fff;
}

/* ================= MOBILE / NON DESKTOP ================= */
@media (max-width:899px){

  .product-card{
    flex:0 0 auto;
    transform:none;
  }

}

/* ================= DESKTOP ================= */
@media (min-width:900px){

  .products{
    padding:100px 80px;
  }

  .products h2{
    font-size:28px;
    margin-bottom:40px;
  }

  .product-wrapper{
    display:block;
  }

  .prod-nav{
    display:none;
  }

  .product-track{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:32px;
    overflow:visible;
  }

  .product-card{
    min-width:auto;
    max-width:none;
  }

  .product-card:hover{
    transform:translateY(-6px);
  }
}

/* ================= FOOTER INFO ================= */
.brand-last{
  padding:90px 80px;
  border-top:1px solid #1f2230;
}

.brand-last-wrap{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:70px;
}

.brand-center{
  text-align:center;
}

.brand-center img{
  max-width:200px;
}

.brand-center .brand-year{
  font-size:12px;
  color:#9a7a45;
}

/* ================= FOOTER ================= */
.footer{
  border-top:1px solid #1f2230;
  padding:40px;
  text-align:center;
  color:#888;
}

/* ================= MOBILE FIX ================= */
@media (max-width:768px){

  .topbar{
    height:72px;
  }

  .hero-slider{
    margin-top:96px;
  }

  .hero-slider .slide{
    min-height:220px;
  }

  .about{
    padding:70px 24px;
  }

  .about-wrap{
    flex-direction:column;
    gap:30px;
    text-align:center;
  }

  .brand-last{
    padding:70px 24px;
  }

  .brand-last-wrap{
    grid-template-columns:1fr;
    text-align:center;
  }
}