/* ==========================================================================
   AgroHarvest Global - Modern B2B Commodity Export Stylesheet
   Theme: "Soft Wheat Gold & Cloud Sand" (Padi Pastel & Pasir Lembut)
   Company: PT. TIGO SAUDARO ALAM MAKMUR (Pekanbaru, Riau, Indonesia)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;1,600&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  
  /* Deep Earth Charcoal Palette (Soft & Matte, No Sharp Greens) */
  --color-charcoal-950: #181614;
  --color-charcoal-900: #22201d;
  --color-charcoal-850: #2b2824;
  --color-charcoal-800: #36322d;
  --color-charcoal-700: #4a453e;
  
  /* Soft Wheat Gold Palette (Warna Padi Pastel & Gandum Lembut) */
  --color-wheat-600: #b58434;
  --color-wheat-500: #c89947;
  --color-wheat-400: #d9ac61;
  --color-wheat-300: #e8c589;
  --color-wheat-200: #f2dbb2;
  --color-wheat-100: #f9f1e1;
  --color-wheat-50:  #fdfaf3;
  
  /* Cloud Sand & Ivory Backgrounds */
  --color-sand-50:  #fdfbf8;
  --color-sand-100: #f6f2ea;
  --color-sand-200: #ede7dc;
  --color-sand-300: #ded5c5;
  --color-sand-400: #c8bca8;
  
  --color-dark: #22201d;
  --color-body: #47423b;
  --color-muted: #797166;
}

html {
  scroll-behavior: smooth;
  font-family: var(--font-sans);
  color: var(--color-body);
  background-color: var(--color-sand-50);
}

.font-serif {
  font-family: var(--font-serif);
}

.font-sans {
  font-family: var(--font-sans);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f6f2ea;
}
::-webkit-scrollbar-thumb {
  background: var(--color-sand-400);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-wheat-500);
}

/* Glassmorphism & Header */
.glass-nav {
  background: rgba(34, 32, 29, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(217, 172, 97, 0.18);
  transition: all 0.3s ease-in-out;
}

.glass-nav.scrolled {
  background: rgba(24, 22, 20, 0.98);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.25);
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.glass-card {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(222, 213, 197, 0.7);
}

/* Hero Glow - Soft Wheat & Ambient Light */
.hero-glow {
  position: absolute;
  top: 10%;
  right: 8%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(217, 172, 97, 0.22) 0%, rgba(34, 32, 29, 0) 70%);
  filter: blur(70px);
  pointer-events: none;
  z-index: 1;
}

/* Floating WhatsApp Pulse & Hover to WhatsApp Green */
@keyframes pulse-ring {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.floating-wa-btn {
  background-color: var(--color-wheat-500);
  color: var(--color-charcoal-950);
  border: 1px solid var(--color-wheat-300);
  animation: pulse-ring 2.5s infinite;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.floating-wa-btn:hover {
  background-color: #25D366 !important;
  color: #ffffff !important;
  border-color: #25D366 !important;
  box-shadow: 0 10px 25px -3px rgba(37, 211, 102, 0.5), 0 4px 6px -2px rgba(37, 211, 102, 0.2) !important;
  transform: translateY(-3px) scale(1.1);
}

/* WhatsApp CTA Button with Green Hover */
.btn-wa-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-wa-hover:hover {
  background: #25D366 !important;
  color: #ffffff !important;
  border-color: #25D366 !important;
  box-shadow: 0 10px 25px -3px rgba(37, 211, 102, 0.45) !important;
  transform: translateY(-2px);
}

.btn-wa-hover:hover svg {
  color: #ffffff !important;
  fill: currentColor !important;
}

/* Badges & Accent Pill */
.badge-wheat {
  background-color: var(--color-wheat-100);
  color: var(--color-wheat-600);
  border: 1px solid rgba(200, 153, 71, 0.3);
}

.badge-sand {
  background-color: var(--color-sand-100);
  color: var(--color-charcoal-800);
  border: 1px solid var(--color-sand-300);
}

/* Soft Wheat Gold Button */
.btn-paddy-gradient, .btn-wheat-gradient {
  background: linear-gradient(135deg, #e0b66e 0%, #c89947 50%, #b58434 100%);
  color: #181614;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(200, 153, 71, 0.22);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-paddy-gradient:hover, .btn-wheat-gradient:hover {
  background: linear-gradient(135deg, #e8c589 0%, #d9ac61 50%, #c89947 100%);
  box-shadow: 0 8px 25px rgba(200, 153, 71, 0.35);
  transform: translateY(-2px);
}

/* Smooth Transitions */
.transition-smooth {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover Zoom for Commodity Cards */
.commodity-card {
  transition: transform 0.35s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.35s ease, border-color 0.3s ease;
}
.commodity-card:hover {
  transform: translateY(-6px);
  border-color: rgba(200, 153, 71, 0.45);
  box-shadow: 0 20px 30px -10px rgba(34, 32, 29, 0.08), 0 8px 12px -6px rgba(34, 32, 29, 0.04);
}
.commodity-card:hover .commodity-img {
  transform: scale(1.06);
}
.commodity-img {
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Form Styles */
.form-input-custom:focus {
  outline: none;
  border-color: var(--color-wheat-500);
  box-shadow: 0 0 0 3px rgba(200, 153, 71, 0.16);
}

/* Tab Filter Active States */
.filter-btn.active {
  background-color: var(--color-charcoal-900);
  color: #ffffff;
  border-color: var(--color-charcoal-900);
  box-shadow: 0 4px 12px rgba(34, 32, 29, 0.16);
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.45s ease-out forwards;
}