/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Open Sans', sans-serif;
  line-height: 1.6;
  color: #222;
}
/* Container */
.container {
  width: 90%;
  max-width: 1200px;
  margin: auto;
}

/* Header */
.site-header {
  background: #fff;
  border-bottom: 1px solid #ddd;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .4rem 0;
}
.nav ul {
  display: flex;
  gap: 1.2rem;
  list-style: none;
}
.nav a {
  text-decoration: none;
  color: #c00;
  font-weight: bold;
}
.btn-outline {
  border: 2px solid #c00;
  padding: .4rem .8rem;
}
.logo img {
  max-height: 70px;
}

/* Hero */
.hero {
  position: relative;
  color: #fff;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 5%;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* mirip background-size: cover */
  z-index: -1;         /* taruh di belakang teks */
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: rgba(200,0,0,0.6);
  z-index: 0;
}

.hero .container {
  position: relative;
  z-index: 1;  /* supaya teks tetap di atas overlay & gambar */
  max-width: 50%;
  margin-left: 0px;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.hero p {
  margin-bottom: 1.5rem;
  max-width: 400px; /* batas lebar teks */
}

/* Button */
.btn1 {
  background: rgba(204, 0, 0, 0);
  border:#fff 2px solid;
  color: #fff;
  padding: .6rem 1.2rem;
  text-decoration: none;
}
.btn1:hover {
  background: #a00;
}

.btn2 {
  background: rgba(204, 0, 0, 0);
  border:#a00 2px solid;
  color: #a00;
  padding: .6rem 1.2rem;
  text-decoration: none;
  position: center;        /* biar jadi elemen blok */    /* teks di dalam tombol tetap center */
}

.btn2:hover {
  background: #a00;
  color: rgb(255, 255, 255);
} 

/* Produk */
.produk {
  padding: 3rem 0;
  text-align: center;
}

.produk h2 {
  color: #c00;
  margin-bottom: 2rem;
  font-size: 2rem; /* ukuran font diperbesar */
}
.produk-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* jarak antar gambar */
}

.baris-pertama,
.baris-kedua,
.baris-ketiga {
  display: flex;
  flex-direction: row;
  gap: 1.5rem; /* jarak antar gambar */
}

/* Semua produk punya tinggi sama */
.produk-item1,
.produk-item4,
.produk-item5{
  position: relative;
  overflow: hidden;
  width: 500px; 
  height: 100%;          /* full kolom grid */  /* tinggi otomatis sama sesuai lebar */
}

/* Semua produk punya tinggi sama */
.produk-item2,
.produk-item3,
.produk-item6 {
  position: relative;
  overflow: hidden;
  width: 700px; /* lebar tetap 300px */
  height: 100%;         /* full kolom grid */
}

.produk-item1 img,
.produk-item2 img,
.produk-item3 img,
.produk-item4 img,
.produk-item5 img,
.produk-item6 img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* gambar menyesuaikan frame */
  display: block;
}


/* Pastikan wrapper horizontal */
.produk-swiper .swiper-wrapper {
  display: flex;             /* supaya slide tersusun ke kanan */
}


/* Swiper container */
.produk-swiper {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
object-fit: contain;  }

/* Slide */
.produk-swiper .swiper-slide {
  flex-shrink: 0;
  width: 100% !important;     /* biar 1 gambar = 1 slide */
  display: flex;
  align-items: center;
  justify-content: center;
}

.produk-swiper img {
  width: 100%;
  height: auto;
  max-height: 400px;
  margin: auto;
  object-fit: contain; 
}

.produk-item1 figcaption,
.produk-item2 figcaption,
.produk-item3 figcaption,
.produk-item4 figcaption,
.produk-item5 figcaption,
.produk-item6 figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%; 
  background: linear-gradient(to top, rgba(0,0,0,0.6) 20%, rgba(0,0,0,0) 80%);
  color: #fff;
  display: flex;
  align-items: flex-end; 
  justify-content: left;
  padding: 1rem;
  font-size: 1.2rem; /* ukuran font diperbesar */
  text-align: left;
  font-weight: bold; 
  max-height: 300px;
}
/* Keunggulan */
.keunggulan {
  padding: 3rem 0;
  margin-right: 0; 
}
.keunggulan-inner {
  display: flex;
  gap: 4rem;
  align-items: center;
  justify-content: space-between;
}
.keunggulan-text h2 {
  color: #c00;
  margin-bottom: 1rem;
  font-size: 2rem;
}
.keunggulan-text ul {
  margin-bottom: 1.5rem;
  max-width: 400px; 
}
.keunggulan-text li {
  margin-bottom: .8rem;
}
.keunggulan-img img {
  width: 480px;
  margin-left: auto;
}

/* Alamat */
.alamat {
  padding: 3rem 0;
}
.alamat-inner {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  justify-content: space-between;  
}
.alamat h2 {
  color: #c00;
  margin-bottom: 1rem;
  font-size: 2rem;
}
.alamat-map iframe {
  border: 0;
  width: 400px;
  height: 400px; /* tinggi peta */
}

/* Footer */
p a {
  color: #fff;             /* putih */
  text-decoration: underline;
  text-decoration-color: #fff; /* garis bawah putih juga */
}

.site-footer {
  background: #222;
  color: #fff;
  padding: 2rem 0 1rem;
  padding-bottom: 0;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1rem;
  height: 150px; /* tinggi footer */
}
.footer-col h3 {
  margin-bottom: .5rem;
  color: rgb(255, 255, 255);
}
.footer-bottom {
  background-color: #c00;
  padding-top: .10rem;
  font-size: .9rem;
   text-align: center; /* bikin semua isi di tengah */ 
}
.footer-middle {
   padding: .5rem;
  font-size: .9rem;
  text-align: center; /* bikin semua isi di tengah */ 
  height: 100%;
  gap: 1rem;
}
.footer-middle nav {
  display: flex;
  justify-content: center; /* biar rata tengah */
  gap: 2rem; /* jarak antar link */
}

.footer-middle nav a {
  color: #fff;
  text-decoration: none;
}

.footer-bottom a {
  color: #fff;
  margin: 0 1rem; /* ganti margin kiri jadi kanan-kiri */
  text-decoration: none;
}
.footer-bottom a:hover {
  text-decoration: underline;
}

/* Floating WhatsApp Button */
.wa-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 20px;
  right: 20px;
  background: #c00; /* merah */
  color: #fff;
  border-radius: 50%;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}
.wa-float:hover {
  transform: scale(1.1);
}
.wa-float img {
  width: 45px;
  height: 45px;
}

.legal-nav {
  margin-left: auto; /* biar ke kanan */
}

.btn-home {
   background: rgba(204, 0, 0, 0);
  border:#a00 2px solid;
  color: #a00;
  padding: .6rem 1.2rem;
  text-decoration: none;
}

.btn-home:hover {
   background: #a00;
  color: rgb(255, 255, 255);
} 

.legal-page {
  max-width: 800px;      /* supaya teks tidak terlalu melebar */
  margin: 40px auto;     /* auto = rata tengah, 40px atas & bawah */
  padding: 20px;         /* jarak dalam box */
  background: #fff;      /* putih (opsional kalau mau ada kotak) */
  border-radius: 12px;   /* sudut sedikit membulat */
  box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* bayangan lembut */
}

.artikel {
  padding: 60px 0;
}

.artikel-search {
  margin-bottom: 30px;
  text-align: center;
}

.artikel-search input {
  width: 60%;
  max-width: 400px;
  padding: 10px 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 14px;
}

.artikel-search button {
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  background: #333;
  color: #fff;
  font-size: 14px;
  margin-left: 8px;
  cursor: pointer;
  transition: background 0.3s;
}

.artikel-search button:hover {
  background: #555;
}

.artikel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 kolom */
  gap: 24px;
}

.artikel-item {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}

.artikel-item:hover {
  transform: translateY(-5px);
}

.artikel-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.artikel-item h3 {
  font-size: 18px;
  margin: 16px 16px 8px 16px;
  color: #333;
}

.artikel-tanggal {
  display: block;
  font-size: 13px;
  color: #999;
  margin: 0 16px 12px 16px;
}

.artikel-item p {
  font-size: 14px;
  margin: 0 16px 20px 16px;
  color: #666;
}

.artikel-item a {
  color: inherit;
  text-decoration: none;
  display: block;
}



/* Responsive */
@media(max-width: 992px) {
  /* Produk jadi 1 kolom */
  .produk-grid {
    gap: 1rem;
  }

  .baris-pertama,
  .baris-kedua,
  .baris-ketiga {
    flex-direction: column;
    align-items: center;
  }

  .produk-item1,
  .produk-item2,
  .produk-item3,
  .produk-item4,
  .produk-item5,
  .produk-item6 {
    width: 100%;      /* full width */
    height: auto;     /* biar menyesuaikan */
  }
  .produk-swiper img {
  width: 100%;          /* biar isi container */
  height: 100%;         /* penuh tinggi container */
  object-fit: cover;    /* crop sesuai rasio, tidak gepeng */
  object-position: center; /* fokus tengah, bisa diganti 'right bottom' kalau mau kanan bawah */
  border-radius: 8px;   /* opsional, biar agak rounded */
}


  .produk-swiper {
    height: 220px;    /* lebih kecil di mobile */
  }

  .produk-item1 figcaption,
  .produk-item2 figcaption,
  .produk-item3 figcaption,
  .produk-item4 figcaption,
  .produk-item5 figcaption,
  .produk-item6 figcaption {
    font-size: 1rem;
    padding: .6rem;
  }
}
.hamburger {
  font-size: 1.8rem;
  background: none;
  border: none;
  color: #c00;
  cursor: pointer;
  display: none; /* default hidden */
}

.artikel-grid {
    grid-template-columns: repeat(3, 1fr); /* tablet 2 kolom */
  }

@media(max-width: 768px) {
  /* Header */
     .header-inner {
        flex-direction: row;
        gap: .5rem;
    }
    
  .hamburger {
    display: block; /* tampilkan tombol di mobile */
  }

  .nav {
    position: absolute;
    top: 70px; /* sejajar header */
    right: 0;
    background: #fff;
    width: 200px;
    padding: 1rem;
    border: 1px solid #ddd;
    display: none; /* default sembunyi */
    flex-direction: column;
    gap: 1rem;
    text-align: right;
    z-index: 999;
  }

  .nav.active {
    display: flex; /* muncul ketika klik hamburger */
  }

  .nav ul {
    flex-direction: column;
    gap: 1rem;
  }

  .nav a {
    color: #c00;
    font-weight: bold;
  }
  /* Hero */
  .hero {
  padding-left: 0;
    justify-content: end;
    text-align: center;
    min-height: 75vh;
    height: auto;
  }

  .hero-bg {
     object-fit: cover;          /* supaya nutup penuh */
  object-position: 90% 100%
  }

   .hero::before {
    width: 100%;        /* penuh lebar */
    height: 50%;        /* hanya setengah tinggi */
    top: auto;          /* reset posisi atas */
    bottom: 0;          /* tempel di bawah */
    left: 0;            /* mulai dari kiri */
  }
  .hero .container {
    max-width: 100%;
    max-height: 50%;
    margin-bottom:10px;
    margin-left: 30px;
    margin-right: 30px;
  }

    .hero-content {
    position: absolute;
    bottom: 40px; /* jarak dari bawah */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    padding: 0 20px;
    place-content: 0px;
  }
  
  .hero h1 {
    font-size: 1.8rem;
    margin-bottom: 10px;
  }
  .hero p {
    max-width: 100%;
    font-size: .95rem;
    margin-bottom: 10px;
  }


  .btn1{
  display: block;        /* biar jadi elemen blok */
  margin: 1rem auto;     /* auto bikin center horizontal */
  text-align: center;    /* teks di dalam tombol tetap center */
}
  
  /* Biar btn2 center di mobile */
.btn2 {
  display: block;        /* biar jadi elemen blok */
  margin: 1rem auto;     /* auto bikin center horizontal */
  text-align: center;    /* teks di dalam tombol tetap center */
}


  /* Keunggulan */
  .keunggulan-inner {
    flex-direction: column;
    gap: 2rem;
    text-align: justify;
  }
  .keunggulan-img img {
    width: 100%;
    max-width: 350px;
  }

  /* Alamat */
  .alamat-inner {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }
   .alamat-map {
    position: relative;
    width: 100%;
    padding-bottom: 70%; /* lebih tinggi biar enak di mobile */
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    margin: 1rem 0;
  }

  .alamat-map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 12px;
  }

  /* Footer */
  .site-footer {
    min-height: 250px; 
 }

  .footer-inner {
    flex-direction: column;
    align-items: center;
    height: 100%;
    text-align: center;
  }
  .footer-col {
    margin-bottom: 1rem;
  }
  .footer-middle nav {
    flex-direction: column;
    gap: .5rem;
  }
   .artikel-grid {
    grid-template-columns: 1fr; /* hp 1 kolom */
  }
  .artikel-search input {
    width: 70%;
  }
}