/* ─── Unified Typography System (Plus Jakarta Sans) ─── */
body, h1, h2, h3, h4, h5, h6, input, textarea, button, select {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  letter-spacing: -0.015em;
}

h1, h2, h3, .font-serif-heading {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.font-brand {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800;
  letter-spacing: 0.25em;
}

body {
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f8f6f0; }
.dark ::-webkit-scrollbar-track { background: #121614; }
::-webkit-scrollbar-thumb { background: #5a7d5a; border-radius: 99px; }

/* ─── Hide Scrollbar utility ─── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ═══════════════════════════════════════════
   PAGE LOAD ANIMATIONS
   ═══════════════════════════════════════════ */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ─── Page body fade in ─── */
.animate-page {
  animation: fadeIn 0.6s ease forwards;
}

/* ─── Navbar slide down ─── */
.animate-nav {
  animation: fadeInDown 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ─── Hero elements staggered ─── */
.animate-hero-subtitle {
  opacity: 0;
  animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}
.animate-hero-title {
  opacity: 0;
  animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
}
.animate-hero-desc {
  opacity: 0;
  animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.45s forwards;
}
.animate-hero-stats {
  opacity: 0;
  animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.65s forwards;
}

/* ─── Stat cards staggered ─── */
.animate-stat-card {
  opacity: 0;
}
.animate-stat-card:nth-child(1) { animation: fadeInScale 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards; }
.animate-stat-card:nth-child(2) { animation: fadeInScale 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.95s forwards; }
.animate-stat-card:nth-child(3) { animation: fadeInScale 0.5s cubic-bezier(0.16, 1, 0.3, 1) 1.1s forwards; }

/* ═══════════════════════════════════════════
   SCROLL REVEAL SYSTEM
   ═══════════════════════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays for grids */
.stagger-1 { transition-delay: 0.05s; }
.stagger-2 { transition-delay: 0.1s; }
.stagger-3 { transition-delay: 0.15s; }
.stagger-4 { transition-delay: 0.2s; }
.stagger-5 { transition-delay: 0.25s; }
.stagger-6 { transition-delay: 0.3s; }
.stagger-7 { transition-delay: 0.35s; }
.stagger-8 { transition-delay: 0.4s; }

/* ═══════════════════════════════════════════
   PRODUCT CARD
   ═══════════════════════════════════════════ */

.product-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.3s ease,
              border-color 0.3s ease,
              opacity 0.5s ease;
}
.product-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 24px 40px -12px rgba(90, 125, 90, 0.25);
}
.product-card:active {
  transform: translateY(-2px) scale(0.99);
}

.product-card .product-img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.4s ease;
}
.product-card:hover .product-img {
  transform: scale(1.08);
  filter: brightness(1.05);
}

.product-card .quick-view-overlay {
  opacity: 0;
  transition: opacity 0.35s ease;
}
.product-card:hover .quick-view-overlay {
  opacity: 1;
}

/* ─── Product card entrance stagger ─── */
.product-card.reveal {
  opacity: 0;
  transform: translateY(40px) scale(0.96);
}
.product-card.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ─── Floating Shrinking Navbar (Full Width Awal -> Gelembung Saat Scroll) ─── */
#main-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 50;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: none !important;
  transition: top 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              bottom 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              padding 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.3s ease;
}

.dark #main-navbar {
  background-color: rgba(22, 28, 23, 0.95);
  border: none !important;
}

#navbar-container {
  transition: max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
}

#navbar-inner {
  border: 1px solid transparent;
  border-radius: 0px;
  transition: border-radius 0.35s ease,
              border-color 0.35s ease,
              background-color 0.35s ease,
              box-shadow 0.35s ease,
              height 0.35s ease,
              padding 0.35s ease;
}

/* Scrolled State: Outer bar becomes transparent, inner container becomes floating pill */
#main-navbar.navbar-scrolled {
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  pointer-events: none;
  top: auto;
  bottom: 1.25rem; /* Mobile: Menyusut ke bawah (Bottom App Nav) */
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 768px) {
  #main-navbar.navbar-scrolled {
    top: 1rem; /* Desktop: Menyusut ke atas (Top Floating Bubble) */
    bottom: auto;
    padding-left: 0;
    padding-right: 0;
  }
}

#main-navbar.navbar-scrolled #navbar-container {
  max-width: 30rem;
  pointer-events: auto;
}

@media (min-width: 768px) {
  #main-navbar.navbar-scrolled #navbar-container {
    max-width: 36rem;
  }
}

#main-navbar.navbar-scrolled #navbar-inner {
  border-radius: 9999px; /* Gelembung Floating Pill */
  border-color: rgba(229, 231, 235, 0.9);
  box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.18), 0 10px 15px -5px rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  height: 3.25rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.dark #main-navbar.navbar-scrolled #navbar-inner {
  border-color: rgba(43, 52, 46, 0.9);
  box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.6);
  background-color: rgba(28, 34, 30, 0.94);
}

/* ═══════════════════════════════════════════
   STAR RATING
   ═══════════════════════════════════════════ */

.star-rating .star {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.star-rating .star svg {
  color: #d1d5db;
  fill: transparent;
  transition: color 0.2s ease, fill 0.2s ease;
}
.dark .star-rating .star svg {
  color: #4b5563;
  fill: transparent;
}
.star-rating .star:hover {
  transform: scale(1.25);
}
.star-rating .star.active svg {
  color: #f59e0b;
  fill: #f59e0b;
}
.star-rating .star.active-click {
  animation: starPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes starPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* ═══════════════════════════════════════════
   REVIEW TICKER
   ═══════════════════════════════════════════ */

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 40s linear infinite;
  will-change: transform;
}
.ticker-track:hover {
  animation-play-state: paused;
}

@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ticker-item {
  flex-shrink: 0;
  background: #ffffff;
  border: 1px solid #f1efe9;
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  transition: background-color 0.3s ease,
              border-color 0.3s ease,
              transform 0.3s ease,
              box-shadow 0.3s ease;
}
.dark .ticker-item {
  background: #1c221e;
  border-color: #2b342e;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.ticker-item:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 20px rgba(90,125,90,0.12);
}

/* ═══════════════════════════════════════════
   FILTER PILLS
   ═══════════════════════════════════════════ */

.filter-tab {
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.filter-tab:hover {
  transform: translateY(-1px);
}
.filter-tab:active {
  transform: scale(0.95);
}
.filter-tab.active {
  background-color: #5a7d5a !important;
  color: #ffffff !important;
  border-color: #5a7d5a !important;
  box-shadow: 0 4px 16px rgba(90, 125, 90, 0.3);
}
.filter-tab.active:hover {
  background-color: #486548 !important;
  color: #ffffff !important;
  border-color: #486548 !important;
}
.dark .filter-tab.active {
  background-color: #6b956b !important;
  color: #ffffff !important;
  border-color: #6b956b !important;
}
.dark .filter-tab.active:hover {
  background-color: #5a805a !important;
  color: #ffffff !important;
  border-color: #5a805a !important;
}

/* ═══════════════════════════════════════════
   CATEGORY PILLS
   ═══════════════════════════════════════════ */

.category-pill {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.category-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(90,125,90,0.15);
}
.category-pill:active {
  transform: scale(0.95);
}
.category-pill.active {
  background-color: #5a7d5a !important;
  color: #ffffff !important;
  border-color: #5a7d5a !important;
}
.category-pill.active:hover {
  background-color: #486548 !important;
  color: #ffffff !important;
  border-color: #486548 !important;
}
.dark .category-pill.active {
  background-color: #6b956b !important;
  color: #ffffff !important;
  border-color: #6b956b !important;
}
.dark .category-pill.active:hover {
  background-color: #5a805a !important;
  color: #ffffff !important;
  border-color: #5a805a !important;
}

/* ═══════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════ */

.modal-backdrop {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(6px);
  animation: fadeIn 0.25s ease forwards;
}

.modal-content {
  animation: modalEnter 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalEnter {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-exit {
  animation: modalExit 0.2s ease forwards;
}

@keyframes modalExit {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.95) translateY(10px); }
}

/* ═══════════════════════════════════════════
   CART DRAWER
   ═══════════════════════════════════════════ */

.cart-drawer {
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.cart-drawer.open {
  transform: translateX(0);
}

.cart-drawer-backdrop {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cart-drawer-backdrop.open {
  opacity: 1;
}

/* ═══════════════════════════════════════════
   Q&A ACCORDION
   ═══════════════════════════════════════════ */

details.qa-item {
  transition: all 0.3s ease;
}
details.qa-item:hover {
  border-color: #5a7d5a/30;
  box-shadow: 0 4px 16px rgba(90,125,90,0.06);
}

details.qa-item summary::-webkit-details-marker {
  display: none;
}

details.qa-item .qa-arrow {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
details.qa-item[open] .qa-arrow {
  transform: rotate(180deg);
}

details.qa-item .qa-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s ease;
  opacity: 0;
}
details.qa-item[open] .qa-content {
  max-height: 300px;
  opacity: 1;
}

/* ═══════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════ */

.btn-wa {
  background: #25d366;
  color: white;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-wa:hover {
  background: #1eb956;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35);
  transform: translateY(-1px);
}
.btn-wa:active {
  transform: scale(0.97);
}

.btn-primary {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(90,125,90,0.25);
}
.btn-primary:active {
  transform: scale(0.97);
}

.btn-ghost {
  transition: all 0.2s ease;
}
.btn-ghost:hover {
  transform: translateY(-1px);
}
.btn-ghost:active {
  transform: scale(0.97);
}

/* ─── Add to cart button ripple effect ─── */
.btn-add-cart {
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-add-cart::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(90,125,90,0.15) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
}
.btn-add-cart:hover::after {
  opacity: 1;
}

/* ═══════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════ */

.badge-best-seller { background: #059669; color: white; }
.badge-promo       { background: #e11d48; color: white; }
.badge-baru        { background: #2563eb; color: white; }

.product-badge {
  animation: badgePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes badgePop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

/* ═══════════════════════════════════════════
   FLOATING HELP BUTTON
   ═══════════════════════════════════════════ */

.floating-help {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  animation: floatBounce 4s ease-in-out infinite;
}
.floating-help:hover {
  animation-play-state: paused;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.4);
}
.floating-help:active {
  transform: scale(0.95);
}

@keyframes floatBounce {
  0%, 100% { transform: translateY(0); }
  25%      { transform: translateY(-6px); }
  50%      { transform: translateY(0); }
  75%      { transform: translateY(-3px); }
}

.floating-help .ping-dot {
  animation: pingPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pingPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* ═══════════════════════════════════════════
   FLOATING HEART IN HERO
   ═══════════════════════════════════════════ */

@keyframes floatHeart {
  0%, 100% { transform: translateY(0) rotate(6deg) scale(1); }
  33%      { transform: translateY(-10px) rotate(12deg) scale(1.1); }
  66%      { transform: translateY(-4px) rotate(8deg) scale(1.05); }
}
.animate-float-heart {
  display: inline-block;
  animation: floatHeart 3.5s ease-in-out infinite;
}

/* ═══════════════════════════════════════════
   TOAST NOTIFICATION
   ═══════════════════════════════════════════ */

.toast-notification {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  animation: toastSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translate(-50%, 20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

.toast-notification.toast-out {
  animation: toastSlideOut 0.3s ease forwards;
}

@keyframes toastSlideOut {
  from { opacity: 1; transform: translate(-50%, 0) scale(1); }
  to   { opacity: 0; transform: translate(-50%, -10px) scale(0.9); }
}

/* ═══════════════════════════════════════════
   SOCIAL LINKS
   ═══════════════════════════════════════════ */

.social-link {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.social-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}
.social-link:active {
  transform: scale(0.97);
}

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */

.footer-brand {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.footer-brand.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════
   IMAGE HOVER ZOOM
   ═══════════════════════════════════════════ */

.img-zoom-wrapper {
  overflow: hidden;
}
.img-zoom-wrapper img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.4s ease;
}
.img-zoom-wrapper:hover img {
  transform: scale(1.08);
  filter: brightness(1.06);
}

/* ═══════════════════════════════════════════
   HERO UNDERLINE DRAW
   ═══════════════════════════════════════════ */

.hero-underline {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: drawLine 1.2s ease 0.7s forwards;
}

@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}

/* ═══════════════════════════════════════════
   COUNTER NUMBER
   ═══════════════════════════════════════════ */

.counter-number {
  display: inline-block;
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */

@media (max-width: 640px) {
  .ticker-track {
    animation-duration: 22s;
  }
  .animate-stat-card:nth-child(1) { animation-delay: 0.7s; }
  .animate-stat-card:nth-child(2) { animation-delay: 0.8s; }
  .animate-stat-card:nth-child(3) { animation-delay: 0.9s; }
}

/* ─── Reduced motion preference ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .ticker-track {
    animation: none !important;
  }
  .floating-help {
    animation: none !important;
  }
}