/* ==========================================
   NX DESIGN SYSTEM - FLUID SYSTEM (DIRECT VALUES)
   ========================================== */
/* ==========================================
   1. SECTION PADDING (VERTIKAL + RESET HORIZONTAL)
   ========================================== */
.nx-section-hero {
  padding-top: clamp(4rem, 2.5rem + 6.4vw, 8rem) !important;       /* 64px -> 128px */
  padding-bottom: clamp(4rem, 2.5rem + 6.4vw, 8rem) !important;    /* 64px -> 128px */
  padding-left: 0 !important;                                      /* Reset default Elementor 10px */
  padding-right: 0 !important;                                     /* Reset default Elementor 10px */
}

.nx-section {
  padding-top: clamp(3rem, 1.85rem + 4.9vw, 6rem) !important;      /* 48px -> 96px */
  padding-bottom: clamp(3rem, 1.85rem + 4.9vw, 6rem) !important;   /* 48px -> 96px */
  padding-left: 0 !important;                                      /* Reset default Elementor 10px */
  padding-right: 0 !important;                                     /* Reset default Elementor 10px */
}

.nx-section-compact {
  padding-top: clamp(2rem, 1.38rem + 2.6vw, 3.5rem) !important;   /* 32px -> 56px */
  padding-bottom: clamp(2rem, 1.38rem + 2.6vw, 3.5rem) !important;/* 32px -> 56px */
  padding-left: 0 !important;                                      /* Reset default Elementor 10px */
  padding-right: 0 !important;                                     /* Reset default Elementor 10px */
}

/* ==========================================
   2. SAFE AREA (HORIZONTAL + RESET VERTIKAL)
   ========================================== */
.nx-safe-area {
  padding-left: clamp(1rem, 0.5rem + 2vw, 2.5rem) !important;     /* 16px -> 40px */
  padding-right: clamp(1rem, 0.5rem + 2vw, 2.5rem) !important;    /* 16px -> 40px */
  padding-top: 0 !important;                                       /* Reset default Elementor 10px */
  padding-bottom: 0 !important;                                    /* Reset default Elementor 10px */
}

/* 2. SAFE AREA (HORIZONTAL PADDING) */
.nx-safe-area {
  padding-left: clamp(1rem, 0.5rem + 2vw, 2.5rem) !important;     /* 16px -> 40px */
  padding-right: clamp(1rem, 0.5rem + 2vw, 2.5rem) !important;    /* 16px -> 40px */
}

/* 3. MARGIN BOTTOM (TYPOGRAPHY RHYTHM) */
.nx-mb-sm {
  margin-bottom: clamp(0.375rem, 0.25rem + 0.5vw, 0.625rem) !important; /* 6px -> 10px */
}

.nx-mb-md {
  margin-bottom: clamp(0.625rem, 0.45rem + 0.75vw, 1rem) !important;   /* 10px -> 16px */
}

.nx-mb-lg {
  margin-bottom: clamp(1.25rem, 0.9rem + 1.4vw, 2rem) !important;     /* 20px -> 32px */
}

/* 4. CONTAINER GAP UTILITIES */
.nx-gap-sm {
  gap: clamp(0.625rem, 0.45rem + 0.75vw, 1rem) !important;   /* 10px -> 16px */
}

.nx-gap-md {
  gap: clamp(1rem, 0.75rem + 1.07vw, 1.5rem) !important;     /* 16px -> 24px */
}

.nx-gap-lg {
  gap: clamp(1.25rem, 0.85rem + 1.7vw, 2rem) !important;    /* 20px -> 32px */
}