/* ===================================================
   Custom Styling Website Dupa Arab
   Palette: Coklat Mewah (Rich Chocolate/Oud Wood), Royal Gold, Warm Amber
   =================================================== */

:root {
  --color-gold-primary: #d4af37;
  --color-gold-light: #f7e092;
  --color-gold-dark: #aa8c2c;
  --color-choco-dark: #120a05;
  --color-choco-card: #22140a;
  --color-choco-surface: #301c0e;
  --color-bronze: #8c531b;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: var(--color-choco-dark);
  color: #f8fafc;
}

/* Tipografi Bernuansa Arab & Mewah */
.font-arabic {
  font-family: 'Amiri', serif;
}

.font-luxury {
  font-family: 'Cinzel', serif;
}

/* Gradient Emas Mewah */
.gold-gradient-text {
  background: linear-gradient(135deg, #faeec7 0%, #e5c058 35%, #d4af37 70%, #b89228 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gold-gradient-bg {
  background: linear-gradient(135deg, #f3d778 0%, #d4af37 50%, #aa851d 100%);
}

.choco-gold-gradient {
  background: linear-gradient(135deg, #361f10 0%, #241409 50%, #150a04 100%);
}

.gold-border {
  border-color: rgba(212, 175, 55, 0.3);
}

.gold-border-glow:hover {
  border-color: rgba(212, 175, 55, 0.8);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.25);
}

/* Pattern Ornamen Khas Arab di Background Berwarna Coklat Hangat */
.arabian-pattern {
  background-color: #120a05;
  background-image: radial-gradient(rgba(212, 175, 55, 0.09) 1px, transparent 0);
  background-size: 24px 24px;
}

/* Animasi Asap Dupa Halus (Subtle Incense Smoke) */
@keyframes smokeWave {
  0% {
    transform: translateY(0) scaleX(1) rotate(0deg);
    opacity: 0.2;
  }
  50% {
    transform: translateY(-25px) scaleX(1.15) rotate(3deg);
    opacity: 0.5;
  }
  100% {
    transform: translateY(-50px) scaleX(0.9) rotate(-3deg);
    opacity: 0;
  }
}

.smoke-particle {
  position: absolute;
  pointer-events: none;
  animation: smokeWave 6s ease-in-out infinite;
  filter: blur(12px);
}

/* Efek Tombol Berdenyut (Pulse CTA) */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
  }
  50% {
    box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
  }
}

.wa-pulse {
  animation: pulseGlow 2.5s infinite;
}

/* Card Glow Effect Coklat Gold Mewah */
.card-glass {
  background: rgba(34, 20, 10, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(212, 175, 55, 0.22);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.card-glass:hover {
  border: 1px solid rgba(212, 175, 55, 0.65);
  box-shadow: 0 14px 35px -5px rgba(0, 0, 0, 0.7), 0 0 25px rgba(212, 175, 55, 0.2);
  transform: translateY(-4px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scrollbar Coklat Gold */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #120a05;
}
::-webkit-scrollbar-thumb {
  background: #4a2d17;
  border-radius: 5px;
  border: 2px solid #120a05;
}
::-webkit-scrollbar-thumb:hover {
  background: #d4af37;
}

/* Transisi halus */
* {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}