/* ============================================================
   STYLE CUSTOM & DESIGN SYSTEM: TOKO KARNUS KABUPATEN PEMALANG
   Palet Warna Sesuai Panduan:
   - Primary Green   : #2A7C13
   - Secondary Green : #76C457
   - Soft Cream      : #FFF8CF
   - Peach Cream     : #FBE6C2
   ============================================================ */

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

:root {
  --karnus-green-primary: #2A7C13;
  --karnus-green-dark: #1e590d;
  --karnus-green-light: #76C457;
  --karnus-green-soft: #f2faed;
  --karnus-cream-soft: #FFF8CF;
  --karnus-cream-peach: #FBE6C2;
  --karnus-gold: #FBE6C2;
  --karnus-gold-hover: #edd19d;
  --karnus-text-dark: #1c2b18;
  --karnus-bg-light: #fffdf0;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--karnus-text-dark);
  background-color: var(--karnus-bg-light);
  overflow-x: hidden;
}

/* Utility Sembunyikan Scrollbar Browser */
.no-scrollbar::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.no-scrollbar {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* Custom Navigation Glassmorphism */
.navbar-karnus {
  background: rgba(42, 124, 19, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s ease-in-out;
  border-bottom: 2px solid var(--karnus-cream-peach);
}

/* Hero Section Custom Gradient & Pattern */
.hero-karnus {
  background: linear-gradient(135deg, #1e590d 0%, #2A7C13 55%, #38941f 100%);
  position: relative;
  overflow: hidden;
}

.hero-karnus::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(251, 230, 194, 0.25) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
}

.hero-badge {
  background: rgba(251, 230, 194, 0.25);
  border: 1px solid rgba(251, 230, 194, 0.5);
  color: #FFF8CF;
}

/* Cards & UI Components */
.card-karnus {
  border: 1px solid #e8ebd1;
  border-radius: 16px;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  background: #ffffff;
}

.card-karnus:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 30px -10px rgba(42, 124, 19, 0.18);
  border-color: var(--karnus-green-light);
}

.btn-karnus-primary {
  background-color: var(--karnus-green-primary);
  color: #ffffff;
  font-weight: 700;
  border-radius: 12px;
  padding: 12px 24px;
  transition: all 0.3s ease;
  border: none;
}

.btn-karnus-primary:hover {
  background-color: var(--karnus-green-dark);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -5px rgba(42, 124, 19, 0.4);
}

.btn-karnus-gold {
  background-color: var(--karnus-cream-peach);
  color: #1e590d;
  font-weight: 800;
  border-radius: 12px;
  padding: 12px 24px;
  transition: all 0.3s ease;
  border: 1px solid rgba(42, 124, 19, 0.2);
}

.btn-karnus-gold:hover {
  background-color: var(--karnus-gold-hover);
  color: #1e590d;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -5px rgba(251, 230, 194, 0.6);
}

.btn-whatsapp {
  background-color: #25d366;
  color: #ffffff;
  font-weight: 700;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.btn-whatsapp:hover {
  background-color: #128c7e;
  color: #ffffff;
  transform: scale(1.02);
  box-shadow: 0 8px 16px -4px rgba(37, 211, 102, 0.4);
}

/* Badge Status Pre-Order */
.badge-po {
  background-color: var(--karnus-cream-peach);
  color: #854d0e;
  font-weight: 700;
  border: 1px solid #f8d7a1;
}

.badge-ready {
  background-color: #e2f7d5;
  color: #2A7C13;
  font-weight: 700;
  border: 1px solid #b8e6a3;
}

/* Floating WhatsApp Button Animation */
.floating-wa {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background-color: #25D366;
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  z-index: 999;
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.floating-wa:hover {
  transform: scale(1.12) rotate(8deg);
  background-color: #1ebd59;
  color: white;
  box-shadow: 0 15px 30px rgba(37, 211, 102, 0.6);
}

/* Hero Quick Action Buttons Hover Styles */
.hero-btn-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-btn-title {
  color: #ffffff;
  transition: color 0.3s ease;
}

.hero-btn-sub {
  color: #FBE6C2;
  transition: color 0.3s ease;
}

.hero-btn-card:hover .hero-btn-title {
  color: #1e590d !important;
}

.hero-btn-card:hover .hero-btn-sub {
  color: #2A7C13 !important;
}

@keyframes pulse-wa {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* Store locator list card */
.store-card {
  border-left: 5px solid var(--karnus-green-primary);
}

.section-title {
  position: relative;
  display: inline-block;
  color: var(--karnus-green-dark);
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background-color: var(--karnus-green-light);
  border-radius: 2px;
}

/* ============================================================
   HERO TEXT ENTRANCE ANIMATION (FADE IN SLIDE UP)
   ============================================================ */
@keyframes fadeInUpSmooth {
  0% {
    opacity: 0;
    transform: translateY(32px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUpSmooth 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0; /* Mulai dari transparan sebelum animasi berjalan */
}

/* Stagger Delays */
.delay-100 { animation-delay: 0.15s; }
.delay-200 { animation-delay: 0.35s; }
.delay-300 { animation-delay: 0.55s; }
.delay-400 { animation-delay: 0.75s; }
.delay-500 { animation-delay: 0.95s; }

/* Hide Scrollbar for Horizontal Touch Swiping on Mobile */
.scrollbar-none::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.scrollbar-none {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch;
}