/* ==========================================================
   NX DESIGN SYSTEM - AUTOMOTIVE OVERLAY GRADIENTS
   ========================================================== */

/* OPTION A: Dark Cinematic / Speed Vignette (Paling Populer)
   Menjaga teks putih terbaca di area kiri/tengah, serta memberi efek gelap sinematik di pinggir */
.nx-auto-overlay-dark {
  position: relative;
}
.nx-auto-overlay-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 12, 0.75) 0%,
    rgba(10, 10, 12, 0.40) 50%,
    rgba(10, 10, 12, 0.90) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* OPTION B: Sporty Carbon / Neon Accent Glow
   Cocok untuk branding otomotif modern/racing dengan sentuhan bayangan biru-karbon */
.nx-auto-overlay-carbon {
  position: relative;
}
.nx-auto-overlay-carbon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(15, 17, 21, 0.88) 0%,
    rgba(15, 17, 21, 0.50) 60%,
    rgba(5, 7, 10, 0.92) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* OPTION C: Left Hero Text Readability Gradient
   Cocok jika Teks/Headline berada di sebelah kiri (Mobile-First / Desktop Left-Aligned) */
.nx-auto-overlay-left-hero {
  position: relative;
}
.nx-auto-overlay-left-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(12, 12, 14, 0.92) 0%,
    rgba(12, 12, 14, 0.65) 45%,
    rgba(12, 12, 14, 0.20) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Memastikan Teks & Konten Selalu Di Atas Layer Overlay */
.nx-auto-overlay-dark > *,
.nx-auto-overlay-carbon > *,
.nx-auto-overlay-left-hero > * {
  position: relative;
  z-index: 2;
}

/* Helper Class: Teks Putih + Text Shadow Sinematik */
.nx-text-auto-white {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}