html { scroll-behavior: smooth; }
body { margin: 0; font-family: Arial, sans-serif; }

/* HEADER */
header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px; background-color: #fff; position: sticky; top: 0; z-index: 1000;
}
.logo-container { display: flex; align-items: center; }
.logo-container img { height: 50px; margin-right: 10px; }
nav { display: flex; gap: 10px; }
nav a { background: #ff9900; padding: 10px 15px; border-radius: 4px; color: white; text-decoration: none; font-weight: bold; }
nav a:hover { background: #cc7a00; }
.menu-icon { display: none; flex-direction: column; cursor: pointer; }
.menu-icon div { width: 25px; height: 3px; background: black; margin: 4px 0; }
.nav-links { display: flex; }
@media (max-width: 768px) {
  .nav-links { display: none; flex-direction: column; position: absolute; top: 60px; right: 20px; background: #fff; padding: 10px; border-radius: 5px; width: 150px; }
  .nav-links.show { display: flex !important; }
  .nav-links a { margin: 5px 0; }
  .menu-icon { display: flex; }
}

/* SLIDESHOW */
.slideshow-container { position: relative; max-width: 100%; overflow: hidden; }
.slides { display: none; animation: fade 1s; transition: transform 0.9s ease-in-out; }
.slides img { width: 100%; height: auto; object-fit: cover; user-select: none; }
@keyframes fade { from { opacity: 0.4; } to { opacity: 1; } }
.text-center { text-align: center; padding: 20px; }

/* PRODUK */
.product-grid {
  display: grid; gap: 10px; grid-template-columns: repeat(4, 1fr); padding: 20px;
}
.product-grid img {
  width: 100%; border-radius: 5px; cursor: pointer; user-select: none; object-fit: cover; height: 300px; transition: transform 0.3s ease;
}
.product-grid img:hover { transform: scale(1.05); }
@media (max-width: 768px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }

.cta-btn { display: inline-block; padding: 15px 25px; background: green; color: white; border-radius: 5px; text-decoration: none; font-size: 18px; }
footer { background: #fff; color: black; padding: 20px; text-align: center; }

/* LIGHTBOX */
.lightbox { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); justify-content: center; align-items: center; }
.lightbox img { max-width: 90%; max-height: 90%; border-radius: 8px; user-select: none; }
.close-btn, .lightbox-prev, .lightbox-next {
  position: absolute; color: white; font-size: 40px; cursor: pointer; font-weight: bold; user-select: none;
}
.close-btn { top: 20px; right: 30px; }
.lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }

/* Floating WhatsApp */
.whatsapp-float {
  display: none; position: fixed; width: 60px; height: 60px; bottom: 20px; right: 20px;
  background-color: #25d366; border-radius: 50%; box-shadow: 2px 2px 5px rgba(255,255,255,0.5); z-index: 10000; cursor: pointer; transition: background-color 0.3s ease;
}
.whatsapp-float img { width: 36px; height: 36px; margin: 12px; pointer-events: none; }
.whatsapp-float:hover { background-color: #1ebe57; }
@media (max-width: 768px) { .whatsapp-float { display: block; } }