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

.nx-section-sm,
.nx-section-md,
.nx-section-lg {
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  box-sizing: border-box !important;
  
  /* Reset horizontal: safe zone kiri-kanan dikontrol oleh nx-container */
  padding-left: 0px !important;
  padding-right: 0px !important;
  --padding-left: 0px !important;
  --padding-right: 0px !important;
  --padding-inline-start: 0px !important;
  --padding-inline-end: 0px !important;
}

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

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

/* Section Large (Hero Showcase, Galeri Interaktif, Kokpit Spek) */
.nx-section-lg {
  padding-top: clamp(64px, 8vw, 130px) !important;
  padding-bottom: clamp(64px, 8vw, 130px) !important;
  --padding-top: clamp(64px, 8vw, 130px) !important;
  --padding-bottom: clamp(64px, 8vw, 130px) !important;
}

                     .nx-container-sm,
.nx-container-md,
.nx-container-lg {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  --padding-top: 0px !important;
  --padding-bottom: 0px !important;

  /* SAFE PADDING KANAN-KIRI DINAMIS (CLAMP) ADA DI SINI: */
  padding-left: clamp(16px, 2.5vw, 24px) !important;
  padding-right: clamp(16px, 2.5vw, 24px) !important;
  --padding-left: clamp(16px, 2.5vw, 24px) !important;
  --padding-right: clamp(16px, 2.5vw, 24px) !important;
  --padding-inline-start: clamp(16px, 2.5vw, 24px) !important;
  --padding-inline-end: clamp(16px, 2.5vw, 24px) !important;
}

/* ==========================================================================
   2. SECTION BACKGROUND UTILITIES (CANVAS LEVEL)
   Ditempelkan berdampingan dengan class nx-section-* di Elementor
   ========================================================================== */

/* Dark Mode Canvas Base (Default) */
.nx-bg-canvas {
  background-color: var(--nx-bg-dark-base, #080c10) !important;
}

/* Dark Mode Canvas Subtle (Untuk variasi seksi selang-seling/zebra) */
.nx-bg-canvas-subtle {
  background-color: var(--nx-bg-dark-subtle, #0e131a) !important;
}

/* Light Mode Canvas (Editorial Slate Terang) */
.nx-bg-light {
  background-color: #f8fafc !important;
}

.nx-bg-light-subtle {
  background-color: #f1f5f9 !important;
}
```[cite: 1]

---

**Panduan Penggunaan di Tab CSS Classes Elementor:**
* **Section Standar Gelap Atto 1:** Masukkan `nx-section-md nx-bg-canvas theme-atto1`[cite: 1]
* **Section Showcase Luas Selang-Seling:** Masukkan `nx-section-lg nx-bg-canvas-subtle theme-atto1`[cite: 1]
* **Section Terang:** Masukkan `nx-section-md nx-bg-light`[cite: 1]