/* Arkatin Jaya Kusen - Custom Styles & Color Palette */

:root {
  --color-teak-gold: #C19A6B;
  --color-teak-dark: #A47D4C;
  --color-charcoal: #222222;
  --color-charcoal-light: #2D2D2D;
  --color-offwhite: #F9F9F9;
}

body {
  font-family: 'Roboto', sans-serif;
  color: var(--color-charcoal);
  background-color: #FFFFFF;
  scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: 'Poppins', 'Inter', sans-serif;
}

.bg-teak-gold { background-color: var(--color-teak-gold); }
.bg-teak-dark { background-color: var(--color-teak-dark); }
.bg-charcoal { background-color: var(--color-charcoal); }
.bg-charcoal-light { background-color: var(--color-charcoal-light); }
.bg-offwhite { background-color: var(--color-offwhite); }

.text-teak-gold { color: var(--color-teak-gold); }
.text-teak-dark { color: var(--color-teak-dark); }
.text-charcoal { color: var(--color-charcoal); }

.border-teak-gold { border-color: var(--color-teak-gold); }

.btn-primary {
  background-color: var(--color-teak-gold);
  color: #FFFFFF;
  font-weight: 600;
  transition: all 0.3s ease;
}
.btn-primary:hover {
  background-color: var(--color-teak-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(193, 154, 107, 0.3);
}

.btn-secondary {
  background-color: var(--color-charcoal);
  color: #FFFFFF;
  font-weight: 600;
  transition: all 0.3s ease;
}
.btn-secondary:hover {
  background-color: #000000;
  transform: translateY(-2px);
}

/* Glassmorphism & Cards */
.card-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
}

.badge-warranty {
  animation: pulse-border 2.5s infinite;
}

@keyframes pulse-border {
  0% { box-shadow: 0 0 0 0 rgba(193, 154, 107, 0.7); }
  70% { box-shadow: 0 0 0 12px rgba(193, 154, 107, 0); }
  100% { box-shadow: 0 0 0 0 rgba(193, 154, 107, 0); }
}

/* Floating WA Button */
.float-wa {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.float-wa:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4);
}