/* ===================================
   2. STRUKTUR HEADER UTAMA
   =================================== */
.main-header {
  height: var(--header-height);
  width: 100%;
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  z-index: 1000;
  transition: var(--transition);
}

.header-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo img {
  height: 30px;
  display: block;
  transform: scale(1);
transition: all 0.3s ease;
}
.logo img:hover {
	transform: scale(1.02);
}
/* ===================================
   3. MOBILE NAVIGATION (MOBILE-FIRST)
   =================================== */

/* Header Right Side */
.header-right-side {
  display: block;
}

/* Menu Toggle Button */
.menu-toggle {
  background: none;
  border: none;
  font-size: 26px;
  cursor: pointer;
  z-index: 1002;
  position: relative;
  width: 30px;
  height: 30px;
  transition: var(--transition);
}

.menu-toggle .fa-times {
  font-size: 28px;
}

/* Main Navigation */
.main-nav {
  position: absolute;
  top: var(--header-height);
  left: 0;
  right: 0;
  background-color: var(--white);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07);
  z-index: 1001;
  
  /* Hidden state */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease-in-out;
}

.main-nav.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.mobile-menu-content {
  padding: 10px 30px 30px;
}

/* Navigation Links */
.main-nav .nav-links li a {
  display: block;
  padding: 15px 5px;
  border-bottom: 1px solid var(--border-color);
  transition: color 0.3s ease;
  transition: var(--transition);
  font-size: 0.95rem;
  font-weight: 600;
}

.main-nav .nav-links li a:hover {
  transition: all 0.3s ease-in-out;
}

/* ===================================
   4. MOBILE AUTHENTICATION
   =================================== */

/* Mobile Auth Container */
.main-nav .mobile-auth-links {
  margin-top: 20px;
}

/* Login Button */
.mobile-auth-links .btn-login {
  display: block;
  text-align: center;
  width: 100%;
  margin-top: 20px;
  padding: 12px 20px;
  background-color: var(--primary);
  color: var(--white);
  border-radius: 8px;
  font-weight: 600;
  transition: var(--transition);
}

.mobile-auth-links .btn-login:hover {
  background-color: var(--primary-dark);
}

/* User Menu Dropdown */
.mobile-auth-links .user-menu-dropdown {
  position: relative;
}

.mobile-auth-links .user-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 15px 5px;
  font-size: 18px;
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  transition: var(--transition);
}

.mobile-auth-links .user-toggle i {
  transition: transform 0.3s ease;
}

.user-menu-dropdown.active .user-toggle i {
  transform: rotate(180deg);
}

/* Dropdown Menu */
.mobile-auth-links .dropdown-menu {
  display: none;
  position: static;
  box-shadow: none;
  border: none;
  width: 100%;
  padding-left: 20px;
}

.user-menu-dropdown.active .dropdown-menu {
  display: block;
}

.mobile-auth-links .dropdown-menu li a {
  display: block;
  padding: 12px 5px;
  font-size: 16px;
  border-bottom: 1px solid var(--border-color);
  transition: var(--transition);
}

.mobile-auth-links .dropdown-menu li:last-child a {
  border-bottom: none;
}

.mobile-auth-links .dropdown-menu li a:hover {
}
.mobile-auth-links .logout-link {
}
.mobile-auth-links .logout-link:hover {
}


/* === 4. TAMPILAN DESKTOP (Layar > 993px) === */

@media (min-width: 993px) {
    /* 1. Sembunyikan HANYA tombol hamburger */
    .header-right-side {
        display: none;
    }

    /* 2. KEMBALIKAN GAYA NAVIGASI KE MODE DESKTOP */
    .main-nav {
        /* Properti ini mengembalikan nav ke posisi normal di kanan */
        position: static;
        display: flex; /* Aktifkan flex untuk mensejajarkan nav-links dan auth-links */
        align-items: center;
        width: auto;
        height: auto;
        gap: 30px; /* Jarak antara nav-links dan auth-links */
        
        /* Reset total style mobile */
        background-color: transparent;
        box-shadow: none;
        visibility: visible;
        opacity: 1;
        transform: none;
    }

    /* 3. Atur .mobile-menu-content agar menjadi flex-container di desktop */
    .mobile-menu-content {
        display: flex; /* KUNCI PERBAIKAN UTAMA */
        align-items: center;
        padding: 0; /* Hapus padding mobile */
        gap: 30px;
		font-size: 1.1rem;
    }

    /* 4. Atur link-link utama untuk desktop */
    .main-nav .nav-links {
        display: flex; /* Tampilkan sebagai baris */
        gap: 1rem; /* Jarak antar link */
    }

    .main-nav .nav-links li a {
        display: flex;
        align-items: center;
        padding: 8px 0;
        border: none;
     }
    
    .main-nav .nav-links li a::before {
        content: '•';
        color: var(--primary-color);
        font-size: 1.2em;
        margin-right: 8px;
        opacity: 0;
        transform: scale(0);
        transition: all 0.3s ease;
    }

    .main-nav .nav-links li a:hover::before {
        opacity: 1;
        transform: scale(1.02);
    }
    
    /* 5. Atur area auth (login/user) untuk desktop */
    .main-nav .mobile-auth-links {
        margin: 0;
        border: none;
    }
    
    /* Tombol login di desktop */
    .mobile-auth-links .btn-login {
        display: inline-block; /* Bukan block lagi */
        width: auto;
        margin-top: 0;
    }

    /* 6. Kembalikan gaya dropdown user ke mode desktop (melayang) */
    .mobile-auth-links .user-menu-dropdown {
        position: relative;
    }
    
    .mobile-auth-links .user-toggle {
        padding: 0; /* Hapus padding mobile */
        font-size: 16px; /* Kembalikan font desktop */
    }

    .mobile-auth-links .dropdown-menu {
        display: none;
        position: absolute;
        top: calc(100% + 15px);
        right: 0;
        background-color: var(--white);
        border-radius: 8px;
        box-shadow: var(--shadow);
        min-width: 200px;
        overflow: hidden;
        z-index: 1001;
        border: 1px solid var(--border-color);
        padding-left: 0;
    }

    .user-menu-dropdown.active .dropdown-menu {
        display: block;
    }
    
    .mobile-auth-links .dropdown-menu li a {
        padding: 12px 20px;
        font-size: 15px;
        border: none;
    }
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
  /* Typography adjustments - Perbaikan ukuran font untuk mobile */
  :root {
    --h1-size: clamp(1.5rem, 6vw, 2rem); /* Diperkecil untuk mobile */
    --h2-size: clamp(1.25rem, 5vw, 1.5rem); /* Diperkecil untuk mobile */
    --h3-size: clamp(1.1rem, 4vw, 1.25rem); /* Diperkecil untuk mobile */
    --h4-size: clamp(1rem, 3vw, 1.1rem); /* Diperkecil untuk mobile */
    --font-body-size: clamp(0.85rem, 2.5vw, 0.95rem); /* Diperkecil untuk mobile */
  }
  
  body {
    font-size: var(--font-body-size);
    padding: 0;
  }
  
  h1, h2, h3, .h1, .h2, .h3 {
    margin-bottom: 0.6rem; /* Diperkecil untuk mobile */
    letter-spacing:normal;
  }
  
  p {
    margin-bottom: 0.6rem; /* Diperkecil untuk mobile */
  }
  .hero-content {
    flex-direction: column;
    gap: 40px;
  }
  
  .hero-text {
    animation: fadeInUp 0.8s ease-out;
  }
  
  .hero-text h1 {
    font-size: clamp(1.5rem, 6vw, 2rem);
    margin-bottom: 1rem;
  }
  
  .hero-text p {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }
  
  .hero-buttons {
    align-items: center;
    gap: 10px;
  }
 
  /* Grid layouts */
  .features-grid,
  .pricing-grid,
  .testimonial-grid,
  .gallery-grid,
  .product-grid,
  .payment-product-grid {
    grid-template-columns: 1fr;
    gap: 15px; /* Diperkecil untuk mobile */
  }
  
  .process-steps {
    flex-direction: column;
    gap: 15px; /* Diperkecil untuk mobile */
  }
  
  .step:not(:last-child)::after {
    display: none;
  }
  
 
  .payment-message-format {
      flex-direction: column;
      align-items: flex-start;
  }
  
  .section-header {
    margin-bottom: 30px; /* Diperkecil untuk mobile */
  }
  
  /* Blog layout */
  .two-column-layout {
    grid-template-columns: 1fr;
    padding: 1.5rem; /* Diperkecil untuk mobile */
    gap: 15px; /* Diperkecil untuk mobile */
  }
  
  .article,
  .comment-section {
    padding: 1.5rem; /* Diperkecil untuk mobile */
  }
  
  /* Product detail */
  .product-detail-layout {
    flex-direction: column;
    gap: 15px; /* Diperkecil untuk mobile */
    padding: 15px; /* Diperkecil untuk mobile */
  }
  
  .product-gallery-container,
  .product-info-container {
    min-width: 100%;
  }
  
  .slider-main-image {
    height: 250px; /* Diperkecil untuk mobile */
  }
  
  /* Forms */
  .form-row {
    grid-template-columns: 1fr;
    gap: 12px; /* Diperkecil untuk mobile */
  }
  
  /* Payment section */
  .payment-container {
    margin: 15px auto; /* Diperkecil untuk mobile */
    padding: 0 10px; /* Diperkecil untuk mobile */
  }
  
  .payment-card-body {
    padding: 15px; /* Diperkecil untuk mobile */
  }
  
  .payment-amount h1 {
    font-size: 1.2rem; /* Diperkecil untuk mobile */
    padding: 6px 12px; /* Diperkecil untuk mobile */
  }
  
  /* Buttons */
  .cta-button-whatsapp,
  .payment-whatsapp-link {
    padding: 8px 14px; /* Diperkecil untuk mobile */
    font-size: 0.9rem; /* Ukuran font yang konsisten */
  }
  
  /* Footer */
  .footer-content {
    grid-template-columns: 1fr;
    gap: 25px; /* Diperkecil untuk mobile */
    text-align: center;
  }
  
  .footer-column {
    justify-content: center;
    gap: 10px; /* Diperkecil untuk mobile */
  }
  
  /* Modal */
  .modal-content {
    width: 95%;
    padding: 15px; /* Diperkecil untuk mobile */
    margin: 10% auto;
  }
  
  /* Lightbox */
  .lightbox-image-container {
    height: 60vh;
  }
  
  .lightbox-close {
    width: 35px; /* Diperkecil untuk mobile */
    height: 35px; /* Diperkecil untuk mobile */
    font-size: 24px; /* Diperkecil untuk mobile */
    top: 12px; /* Diperkecil untuk mobile */
    right: 12px; /* Diperkecil untuk mobile */
  }
  
  /* Testimonials */
  .testimonial-header {
    gap:15px;
  }
  
  .testimonial-avatar {
    margin-right: 0;
    margin-bottom: 8px; /* Diperkecil untuk mobile */
  }
  
  /* Gallery */
  .image-container {
    height: 180px; /* Diperkecil untuk mobile */
  }
  
  /* Pricing */
  .pricing-card.featured::before {
    top: 12px; /* Diperkecil untuk mobile */
    right: -25px; /* Diperkecil untuk mobile */
    padding: 3px 25px; /* Diperkecil untuk mobile */
    font-size: 10px;
  }
  
  /* FAQ */
  .faq-question {
    padding: 12px; /* Diperkecil untuk mobile */
    font-size: 0.9rem; /* Ukuran font yang konsisten */
  }
  
  .faq-answer {
    font-size: 0.85rem; /* Ukuran font yang konsisten */
  }
  
  /* Comments */
  .comment-item {
    gap: 10px; /* Diperkecil untuk mobile */
  }
  
  .comment-avatar {
    margin: 0 auto 8px; /* Diperkecil untuk mobile */
  }
  
  .comment-header {
    gap: 4px; /* Diperkecil untuk mobile */
  }
  
  /* Product card */
  .product-image-container {
    height: 180px; /* Diperkecil untuk mobile */
  }
  
  .product-title {
    height: auto;
    -webkit-line-clamp: 3;
  }
  
  /* CTA section */
  .cta {
    padding: 3rem 1rem; /* Diperkecil untuk mobile */
  }
  
  .cta h2 {
    font-size: 1.5rem; /* Menggunakan variabel */
  }
  
  /* Filter buttons */
  .filter-buttons {
    gap: 8px; /* Diperkecil untuk mobile */
    margin-bottom: 20px; /* Diperkecil untuk mobile */
  }
  
  .filter-btn,
  .btn-detail {
    padding: 6px 14px; /* Diperkecil untuk mobile */
    font-size: 0.8rem; /* Ukuran font yang konsisten */
  }
}

@media (max-width: 480px) {
  /* Typography adjustments - Perbaikan ukuran font untuk mobile kecil */
  :root {
    --h1-size: clamp(1.25rem, 6vw, 1.5rem); /* Diperkecil untuk mobile kecil */
    --h2-size: clamp(1.1rem, 5vw, 1.25rem); /* Diperkecil untuk mobile kecil */
    --h3-size: clamp(1rem, 4vw, 1.1rem); /* Diperkecil untuk mobile kecil */
    --h4-size: clamp(0.95rem, 3vw, 1rem); /* Diperkecil untuk mobile kecil */
    --font-body-size: clamp(0.9rem, 2.5vw, 0.95rem); /* Diperkecil untuk mobile kecil */
  }
  .logo img {
      height: 25px;
      display: block;
  }
  /* Sections */
  .section {
    margin-bottom: 30px; /* Diperkecil untuk mobile kecil */
  }
    .hero-content {
    gap: 30px;
  }
  
  .hero-text h1 {
    font-size: 1.5rem;
  }
  
  .hero-text p {
    font-size: 0.95rem;
  }
  .btn {
    padding: .5em 1em;

}
  .hero,
  .hero-simple,
  .features,
  .pricing,
  .process,
  .testimonials,
  .faq,
  .gallery {
    padding: 1rem 0; /* Diperkecil untuk mobile kecil */
  }
  
  /* Cards */
  .feature-card,
  .pricing-card,
  .testimonial-card,
  .gallery-item,
  .product-card {

  }
	.gallery-item {padding:0;}
  
  /* Blog */
  .two-column-layout,
  .article,
  .comment-section {
    padding: 1rem; /* Diperkecil untuk mobile kecil */
  }
  
  /* Product detail */
  .slider-main-image {
    height: 200px; /* Diperkecil untuk mobile kecil */
  }
  
  .slider-thumbnails .thumb {
    width: 50px; /* Diperkecil untuk mobile kecil */
    height: 50px; /* Diperkecil untuk mobile kecil */
  }
  
  
  /* Payment */
  .payment-card-body {
    padding: 12px; /* Diperkecil untuk mobile kecil */
  }
  
  .payment-amount h1 {
    font-size: 1rem; /* Diperkecil untuk mobile kecil */
    padding: 5px 10px; /* Diperkecil untuk mobile kecil */
  }
  
  /* Footer */
  footer {
    padding: 25px 0 0; /* Diperkecil untuk mobile kecil */
  }
  
  .footer-bottom {
    font-size: 0.75rem; /* Ukuran font yang konsisten */
    padding-top: 10px; /* Diperkecil untuk mobile kecil */
  }
  
  /* Product card */
  .product-image-container {
    height: 180px; /* Diperkecil untuk mobile kecil */
  }
  
  /* Gallery */
  .image-container {
    height: 160px; /* Diperkecil untuk mobile kecil */
  }
  
  /* Testimonial avatar */
  .testimonial-avatar {
    width: 40px; /* Diperkecil untuk mobile kecil */
    height: 40px; /* Diperkecil untuk mobile kecil */
  }
}