/* Navigation Components */
.nav-link {
    @apply font-medium text-gray-600 dark:text-gray-300 hover:text-accent-600 dark:hover:text-accent-400 transition-colors duration-200;
}

.nav-link-mobile {
    @apply font-medium text-gray-600 dark:text-gray-300 hover:text-accent-600 py-2 transition-colors;
}

.theme-toggle-btn {
    @apply p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors text-gray-700 dark:text-gray-300;
}

.btn-whatsapp {
    @apply bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-lg font-medium transition-colors flex items-center space-x-2;
}

/* Language Switcher */
.lang-btn {
    @apply px-3 py-1 text-sm font-medium rounded transition-colors;
}

.lang-btn.active {
    @apply bg-accent-600 text-white;
}

.lang-btn:not(.active) {
    @apply text-gray-600 dark:text-gray-400 hover:text-accent-600;
}

.lang-btn-mobile {
    @apply px-3 py-1 text-sm font-medium border rounded transition-colors;
}

.lang-btn-mobile.active {
    @apply bg-accent-600 text-white border-accent-600;
}

.lang-btn-mobile:not(.active) {
    @apply text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600;
}

/* Hero Section */
.hero-section {
    @apply hero-gradient text-white py-20 lg:py-28;
}

.hero-content {
    @apply max-w-4xl mx-auto text-center;
}

.hero-title {
    @apply text-4xl md:text-6xl font-heading font-bold mb-6 leading-tight;
}

.hero-subtitle {
    @apply text-xl md:text-2xl mb-8 text-gray-200 leading-relaxed;
}

.hero-actions {
    @apply flex flex-col sm:flex-row gap-4 justify-center;
}

/* Section Styles */
.section-title {
    @apply text-3xl md:text-4xl font-heading font-bold mb-4;
}

.section-subtitle {
    @apply text-xl text-gray-700 dark:text-gray-300 max-w-2xl mx-auto;
}

/* Value Proposition */
.value-grid {
    @apply grid md:grid-cols-3 gap-8 max-w-5xl mx-auto;
}

.value-card {
    @apply text-center p-6 bg-white dark:bg-gray-700 rounded-xl shadow-sm hover:shadow-md transition-shadow;
}

.value-icon {
    @apply w-16 h-16 bg-amber-200 dark:bg-accent-600/30 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl;
}

.value-title {
    @apply text-xl font-heading font-semibold mb-3;
}

.value-description {
    @apply text-gray-700 dark:text-gray-300;
}

/* Product Grid */
.product-grid {
    @apply grid md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto;
}

.product-image {
    @apply h-48 bg-gradient-to-br from-amber-50 to-orange-100 dark:from-gray-700 dark:to-gray-600 flex items-center justify-center;
}

.placeholder-image {
    @apply text-gray-400;
}

.product-content {
    @apply p-6;
}

.product-title {
    @apply text-xl font-heading font-semibold mb-2;
}

.product-description {
    @apply text-gray-700 dark:text-gray-300 mb-4;
}

.product-specs {
    @apply text-sm text-gray-600 dark:text-gray-400 space-y-1;
}

/* Hero Section Styles */
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(17, 24, 39, 0.9),
    rgba(17, 24, 39, 0.8),
    rgba(17, 24, 39, 0.7)
  );
}

/* Alternative gradient overlays */
.hero-overlay-dark {
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
}

.hero-overlay-warm {
  background: linear-gradient(
    to bottom,
    rgba(26, 32, 44, 0.9) 0%,
    rgba(217, 119, 6, 0.3) 100%
  );
}

/* Product page specific styles */
.filter-active {
  background-color: #d97706;
  color: white;
  border-color: #d97706;
}

.product-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Client Grid */
.client-grid {
    @apply grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8 items-center max-w-6xl mx-auto opacity-60;
}

.client-logo {
    @apply bg-white dark:bg-gray-700 h-20 rounded-lg flex items-center justify-center p-4 grayscale hover:grayscale-0 transition-all font-heading font-semibold text-gray-700 dark:text-gray-400;
}

/* CTA Section */
.cta-title {
    @apply text-3xl md:text-4xl font-heading font-bold mb-6;
}

.cta-subtitle {
    @apply text-xl mb-8 text-amber-100 max-w-2xl mx-auto;
}

.cta-button {
    @apply inline-flex items-center space-x-2 bg-white text-accent-600 hover:bg-gray-50 px-8 py-4 rounded-lg font-heading font-semibold text-lg transition-colors;
}

/* Footer */
.footer-grid {
    @apply grid md:grid-cols-3 gap-8 max-w-6xl mx-auto;
}

.footer-col {
    @apply space-y-4;
}

.footer-logo {
    @apply flex items-center space-x-2 mb-4;
}

.logo-icon {
    @apply w-8 h-8 bg-accent-600 rounded-lg flex items-center justify-center;
}

.logo-text {
    @apply text-xl font-heading font-bold;
}

.footer-description {
    @apply text-gray-400;
}

.footer-title {
    @apply font-heading font-semibold text-lg mb-4;
}

.footer-links {
    @apply grid grid-cols-2 gap-2;
}

.footer-link {
    @apply text-gray-400 hover:text-white transition-colors;
}

.footer-contact {
    @apply space-y-2 text-gray-400;
}

.footer-bottom {
    @apply border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 grid md:grid-cols-2 gap-4;
}

.footer-credit-link {
    @apply text-accent-400 hover:text-amber-300 transition-colors;
}

/* Local font faces (Montserrat, Roboto) */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-VariableFont_wght.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-VariableFont_wght.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

.font-heading { font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
.font-body { font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }

/* Import Lightbox2 CSS jika diperlukan (CDN removed; ensure local if used) */
/* @import url('../vendor/lightbox2/lightbox.min.css'); */

/* Additional custom styles */
.hero-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.glass-effect {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Lightbox custom styles */
.lightbox-overlay {
  background: rgba(0, 0, 0, 0.9);
}

/* Smooth scroll */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Dark mode transitions */
* {
  transition-property: background-color, border-color, color;
  transition-duration: 300ms;
  transition-timing-function: ease;
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }
}

/* Loading lazy images */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s;
}

img[loading="lazy"].loaded {
  opacity: 1;
}