* { margin:0; padding:0; box-sizing:border-box; font-family: Arial, sans-serif; }
body { margin-top: 70px; display:flex; flex-direction:column; min-height:100vh; }

header { position: fixed; top: 0; z-index:1000; width: 100%; display:flex; justify-content:space-between; align-items:center; padding:10px 20px; background:#f5f5f5; height: 70px }
header .header-left { display:flex; align-items:center; gap: 10px; }
header .logo { font-size:32px; font-weight: 700; color:#000080; text-decoration: none; }
header .logo span { color: red }
header .contact-buttons a { margin-left:10px; text-decoration:none; padding:5px 10px; border-radius:5px; color:#fff; }
header .contact-buttons a.phone { background:#e67e22; }
header .contact-buttons a.whatsapp { background:#25d366; }

.hamburger, .whatsapp-bottom { display:none; }

.wrapper { display:flex; flex:1; }
.sidebar { width:300px; background:#222; color:#fff; padding:20px; padding-top: 70px; }
.sidebar ul { list-style:none; position: sticky; top: 140px; }
.sidebar ul li { margin-bottom:10px; }
.sidebar ul li a { font-size: 20px; color:#fff; text-decoration:none; display:block; padding:5px; border-radius:3px; }
.sidebar ul li a.active { background:#e67e22; }
.sidebar ul li a:hover { text-decoration: underline; }

.main-content { flex:1; padding:40px; }
.main-content p { margin-bottom: 20px; }
.main-content h1, .main-content h2 { margin-bottom: 20px; }

.landing { background:#f5f5f5; padding:30px 20px; border-radius:8px; margin-bottom:40px; }
.landing-content { display: flex; justify-content: space-around; gap: 20px }
.landing-content img { max-width: 450px; }
.landing h1 { color:#e67e22; margin-bottom:30px; font-size: 28px }
.landing p { margin-bottom:15px; }
.landing ul {  margin-left: 16px; }
.landing ul li {  margin-bottom: 5px; }

.old-price { font-size: 18px; color: #333; margin-bottom: 5px; text-decoration: line-through; }
.price { font-size: 24px; margin-bottom: 5px; color: red; font-weight: bold; }
.landing-buttons .btn {
  display:inline-block; margin-right:10px; padding:12px 20px; background:#e67e22; color:#fff; text-decoration:none; border-radius:5px;
}
.landing-buttons .btn.whatsapp { background:#25d366; }
.landing video { height:500px; width:500px; margin-bottom: 10px; }

footer { background:#333; color:#fff; padding:20px; text-align:center; margin-top:auto; }
footer a { color:#fff; text-decoration:none; margin:0 5px; }

.products { display: flex; font-size: 14px; text-align: center; margin-bottom: 15px; }
.products a { display: flex; flex-direction: column; justify-content: space-around; align-items: center; gap: 8px; font-weight: bold; border: 1px solid #ccc; border-radius: 8px; padding: 8px; color: #000080; flex: 1; margin: 4px; background: #f9f9f9; }
.products a:hover { box-shadow: 0 0 10px rgba(0,0,0,0.1); }
.products img { width: 100%; height: 100%; max-width: 110px; max-height: 90px; object-fit: contain; }

.products.main-products a { text-decoration: none; font-size: 16px; padding-top: 10px; padding-bottom: 20px; }
.products.main-products h2 { margin-bottom: 0; }
.products.main-products p { margin-bottom: 0; color: #333; }
.products.main-products img { max-width: 200px; max-height: 180px; margin: 20px; }

.product-image { margin-bottom: 30px }
.images { display: flex; gap: 10px; justify-content: center; align-items: center; }
.images img { padding: 10px; border: 1px solid #ccc; border-radius: 5px; max-width: 150px; max-height: 100px; object-fit: contain; }

.manifacturing, .keywords { padding: 8px }
.manifacturing img { border: 1px solid #e67e22; border-radius: 5px; max-width: 320px; max-height: 320px; object-fit: contain; margin: 0 10px }

/* Mobil */
@media(max-width:768px){
  body { margin-top: 90px; }
  header { flex-direction: column; height: 90px; justify-content: space-evenly;}
  header .header-left { width: 100%; }
  header .logo { font-size: 22px }
  .wrapper { flex-direction:column; }
  .sidebar { position:fixed; top:0; left:-280px; width:280px; height:100%; transition:0.3s; z-index:999; }
  .sidebar.open { left:0; }
  .hamburger { display:block; top:15px; left:15px; font-size:32px; background:none; border:none; color:#e67e22; z-index:1001; cursor:pointer; }
  .whatsapp { display:none; }
  .main-content { margin-left:0; padding:10px; }
  .top-phone { display:block; position:fixed; top:0; right:0; background:#e67e22; padding:10px; color:#fff; border-radius:0 0 0 5px; z-index:1002; }
  .whatsapp-bottom { display:block; position:fixed; bottom:110px; right:10px; background:#25d366; color:#fff; padding:10px 15px; border-radius:50px; text-decoration:none; z-index:1002; }
  .landing-content { flex-direction:column; }
  .landing-content img { max-width: 100%; }
  .landing video { height:100%; width:100% }
  .manifacturing img {  max-width: 90%; max-height: 90%; }
  .products.main-products { flex-direction: column; }
}