.elementor-10 .elementor-element.elementor-element-b10cba0{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-48b65a0{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10 .elementor-element.elementor-element-9fb287d{--display:flex;}.elementor-10 .elementor-element.elementor-element-77e0160{--display:flex;}.elementor-10 .elementor-element.elementor-element-41e48a3{--display:flex;}.elementor-10 .elementor-element.elementor-element-c136f6c{--display:flex;}.elementor-10 .elementor-element.elementor-element-8310219{--display:flex;}.elementor-10 .elementor-element.elementor-element-063ddec{--display:flex;}.elementor-10 .elementor-element.elementor-element-c009604{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-67fe5bd *//* Animasi Melayang (Floating Effect) untuk Gambar Hero */
.hero-image-wrapper {
  animation: float-hero 6s ease-in-out infinite;
}

@keyframes float-hero {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px); /* Bergerak ke atas sedikit */
  }
  100% {
    transform: translateY(0px);
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c59d4ba *//* --- Styling Dasar --- */
.elektronik-products { padding: 60px 0; background-color: #f8f9fa; overflow: hidden; font-family: 'Inter', sans-serif, Arial; }
.container-produk { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.header-produk { text-align: center; margin-bottom: 40px; }
.header-produk h2 { font-size: 2rem; color: #333; margin-bottom: 10px; }
.header-produk p { color: #666; font-size: 1.1rem; }

/* --- Carousel Layout --- */
.carousel-container { position: relative; display: flex; align-items: center; }
.carousel-track-wrapper { overflow: hidden; width: 100%; padding: 10px 0; margin: -10px 0; }
.carousel-track { display: flex; transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); }

.card-slide {
  flex: 0 0 33.333%; /* Desktop 3 Produk */
  padding: 10px 15px;
  box-sizing: border-box;
}

/* --- Card Styling --- */
.card-produk {
  background: #fff;
  border-radius: 15px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}
.card-produk:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.12); }

.foto-wrapper {
  width: 100%;
  /* height: 200px; */
  aspect-ratio: 16 / 9; /* Ini akan membuat tinggi gambar menyesuaikan dengan rasio 16:9 */
  overflow: hidden;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.foto-produk { width: 100%; height: 100%; object-fit: cover; }

.konten-produk {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.nama-produk { font-size: 1.2rem; margin: 0 0 10px; color: #333; min-height: 3rem;}
.desc-produk { font-size: 0.9rem; color: #777; line-height: 1.5; margin-bottom: 20px; flex-grow: 1;}

.footer-card { margin-top: auto; }
.harga-produk { font-size: 1.3rem; color: #0056b3; margin: 0 0 5px; font-weight: 800; }
.stok-produk { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 4px 8px; border-radius: 4px; margin-bottom: 15px; }

.stok-tersedia { background: #e6f4ea; color: #1e8e3e; }
.stok-menipis { background: #fef7e0; color: #f29900; }
.stok-habis { background: #fce8e6; color: #d93025; }

/* --- Tombol Beli --- */
.btn-beli {
  width: 100%;
  padding: 12px;
  border: none;
  background: #007bff;
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-beli:hover { background: #0056b3; }
.btn-beli:disabled { background: #ccc; color: #666; cursor: not-allowed; }

/* =========================================
   PERBAIKAN: NAVIGASI CAROUSEL KIRI-KANAN
   ========================================= */
.carousel-btn {
  position: absolute;
  /* KUNCI: Ubah posisi agar persis di tengah-tengah tinggi Gambar (110px) */
  top: 110px; 
  transform: translateY(-50%);
  width: 45px; 
  height: 45px; 
  border-radius: 50%; 
  border: 1px solid #ddd;
  background: #ffffff; 
  color: #333333;
  font-size: 1.2rem;
  font-family: Arial, sans-serif; /* Mencegah font kustom merusak icon panah */
  cursor: pointer; 
  z-index: 10;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: 0.2s;
  
  /* KUNCI: Memaksa icon panah tetap tepat di tengah, tidak hilang */
  display: flex; 
  align-items: center; 
  justify-content: center;
  padding: 0;
  margin: 0;
}

.carousel-btn:hover { background: #007bff; color: #fff; border-color: #007bff; }

/* Posisi Kiri dan Kanan Sedikit Keluar */
.prev-btn { left: -15px; }
.next-btn { right: -15px; }

/* --- Responsive --- */
@media (max-width: 992px) { 
  .card-slide { flex: 0 0 50%; } 
}
@media (max-width: 600px) { 
  .card-slide { flex: 0 0 100%; } 
  .prev-btn { left: -5px; }
  .next-btn { right: -5px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e7b459e *//* --- Penyesuaian Navigasi Anchor --- */
.target-section {
  /* Memberikan ruang napas di atas section saat di-link dari menu Header Sticky (tinggi header sekitar 80px) */
  scroll-margin-top: 80px;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-beb6c04 *//* --- Pengaturan Track Carousel (DIKUNCI HANYA UNTUK TESTIMONI) --- */
#testimoni .carousel-track {
  /* 25s adalah kecepatan. Jika kartunya banyak, perbesar angkanya. */
  animation: gerak-terus 25s linear infinite;
}

/* KUNCI UX: Pause jika kursor diarahkan (Desktop) atau saat jari menahan layar (HP) */
#testimoni .carousel-wrapper:hover .carousel-track,
#testimoni .carousel-wrapper:active .carousel-track {
  animation-play-state: paused;
}

/* --- KUNCI MATEMATIKA ANTI-GAGAL --- */
/* (Keyframes tidak perlu dikunci karena hanya dipanggil oleh #testimoni) */
@keyframes gerak-terus {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Menggeser persis sebesar 100% panjang Jalur 1, ditambah jarak 24px (1.5rem) dari 'gap-6'. */
    transform: translateX(calc(-100% - 1.5rem));
  }
}/* End custom CSS */