/* ==========================================================================
   1. SECTION SPACING SYSTEM (FLUID VERTICAL RHYTHM)
   Pasang di Container Parent Terluar (Full Width Section Elementor)
   ========================================================================== */

.nx-section-sm,
.nx-section-md,
.nx-section-lg {
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  box-sizing: border-box !important;
  padding-inline: 0 !important;
}

/* Section Compact: Banner Promo, Sub-bar, Minimal Divider */
.nx-section-sm {
  padding-block: clamp(36px, 4.5vw, 64px) !important;
}

/* Section Standard: Fitur Kendaraan, Grid Spek, Testimoni */
.nx-section-md {
  padding-block: clamp(52px, 6vw, 96px) !important;
}

/* Section Large: Hero Showcase, Galeri Interaktif, Split 60:40 */
.nx-section-lg {
  padding-block: clamp(64px, 8vw, 130px) !important;
}

/* ==========================================================================
   2. CONTAINER MAX-WIDTH & SAFE-PADDING
   Pasang di Container Dalam (Inner Container Elementor)
   ========================================================================== */

.nx-container-sm,
.nx-container-md,
.nx-container-lg {
  width: 100% !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
  padding-block: 0 !important;
  padding-inline: clamp(16px, 3vw, 32px) !important;
}

/* Batasan Lebar Kontainer Terukur */
.nx-container-sm { max-width: 840px !important; }   /* Content focus */
.nx-container-md { max-width: 1140px !important; }  /* Standard Feature Grid */
.nx-container-lg { max-width: 1280px !important; }  /* Showroom Hero & Showcase */

/* ==========================================================================
   3. SECTION CANVAS BACKGROUND UTILITIES (SEMANTIC & ADAPTIVE)
   ========================================================================== */

/* Default Canvas */
.nx-bg-canvas,
.nx-bg-light {
  background-color: var(--nx-bg-base, #f2f3f5) !important;
}

/* Subtle Canvas */
.nx-bg-canvas-subtle,
.nx-bg-light-subtle {
  background-color: var(--nx-bg-subtle, #e4e7ed) !important;
}

/* Pure Surface Canvas */
.nx-bg-surface {
  background-color: var(--nx-bg-surface, #ffffff) !important;
}

/* Dark Hybrid Utility */
.nx-bg-dark {
  background-color: #0b132b !important;
  color: #94a3b8 !important;
  --nx-c-heading: #ffffff;
  --nx-c-lead: #cbd5e1;
  --nx-c-body: #94a3b8;
  --nx-c-border: rgba(255, 255, 255, 0.1);
  --nx-c-accent: #409eff;
}

.nx-bg-dark h1,
.nx-bg-dark h2,
.nx-bg-dark h3,
.nx-bg-dark .nx-h1,
.nx-bg-dark .nx-h2,
.nx-bg-dark .nx-h3 {
  color: #ffffff !important;
}

.nx-bg-dark-subtle {
  background-color: #080f20 !important;
}