/* ==============================================================================
   SHEDCO - CUSTOM STYLES
   CSS tambahan minimal untuk melengkapi utilitas Tailwind CSS
   ============================================================================== */

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

html {
  scroll-behavior: smooth;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #F4EFEA;
}

::-webkit-scrollbar-thumb {
  background: #C59159;
  border-radius: 5px;
  border: 2px solid #F4EFEA;
}

::-webkit-scrollbar-thumb:hover {
  background: #6B3E1E;
}

/* Glassmorphism Navbar effect */
.glass-nav {
  background: rgba(253, 251, 247, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Line clamp helpers */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Subtle image hover scale */
.card-hover-zoom {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-hover-zoom:hover {
  transform: translateY(-6px);
}

/* Floating WhatsApp Gentle Pulse Animation */
@keyframes softPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.wa-pulse {
  animation: softPulse 2.4s infinite;
}

/* Modal animation */
.modal-backdrop {
  transition: opacity 0.25s ease-out;
}

.modal-content {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease-out;
}

/* Badge glow effect */
.badge-eco {
  background: linear-gradient(135deg, #2D5A27 0%, #3D7336 100%);
}

.badge-earth {
  background: linear-gradient(135deg, #6B3E1E 0%, #8A5229 100%);
}

/* Texture Pattern Overlay for Hero */
.bg-subtle-pattern {
  background-image: radial-gradient(#C59159 0.75px, transparent 0.75px), radial-gradient(#C59159 0.75px, #FAF7F2 0.75px);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
  background-opacity: 0.15;
}