/* ===== GLOBAL VARIABLES ===== */
:root {
  /* Fluid spacing (min, preferred, max) */
  --gap-sm: clamp(1.5rem, 3vw, 3rem);  /* 1.5rem (mobile) → 3rem (desktop) */
  --gap-md: clamp(2.5rem, 4vw, 5rem);
  --gap-lg: clamp(3.5rem, 6vw, 7rem);
  
  /* Side padding responsif - DIUBAH dari 5vw ke 10vw */
  --padding-side: clamp(1rem, 5vw, 7rem); /* 1rem (mobile) → 10vw → 3rem (desktop besar) */
}

/* ===== UTILITY CLASSES ===== */
.padding-global {
  padding-left: var(--padding-side) !important;
  padding-right: var(--padding-side) !important;
}

/* Padding section dengan fallback mobile-first */
.padd-sec-small  { padding-block: var(--gap-sm) !important; }
.padd-sec-medium { padding-block: var(--gap-md) !important; }
.padd-sec-large  { padding-block: var(--gap-lg) !important; }

/* Grid gap responsif */
.g-grid {
  display: grid !important;
  gap: var(--gap-md) !important;
}


/* ===== RESPONSIVE CONTAINERS ===== */

/* Base container responsif */
.responsive-container {
 width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--padding-side);
  padding-right: var(--padding-side);
  box-sizing: border-box;
}

/* Container dengan max-width 48rem (768px) */
.container-small {
  max-width: 48rem;
}

/* Container dengan max-width 64rem (1024px) */
.container-medium {
  max-width: 64rem;
}



/* ===== MAX WIDTH UTILITY FOR TEXT ELEMENTS ===== */

/* Lebar sangat kecil (contoh: untuk heading pendek) */
.max-width-xxs { 
  width: 100%;
  max-width: 20rem;
  display: block;
  margin-inline: auto;
}

/* Lebar kecil */
.max-width-xs { 
  width: 100%;
  max-width: 25rem;
  display: block;
  margin-inline: auto;
}

/* Lebar sedang */
.max-width-s { 
  width: 100%;
  max-width: 30rem;
  display: block;
  margin-inline: auto;
}

/* Lebar menengah */
.max-width-md { 
  width: 100%;
  max-width: 35rem;
  display: block;
  margin-inline: auto;
}

/* Lebar besar (misal paragraf panjang) */
.max-width-lg { 
  width: 100%;
  max-width: 48rem;
  display: block;
  margin-inline: auto;
}

/* ===== RESPONSIVE SPACERS USING CLAMP ===== */

/* clamp(min, ideal, max) → skala responsif dari mobile ke desktop */
.spacer-025 { height: clamp(0.25rem, 1vh, 0.5rem) !important; }
.spacer-05  { height: clamp(0.5rem, 1.5vh, 1rem) !important; }
.spacer-1   { height: clamp(1rem, 2vh, 1.5rem) !important; }
.spacer-15  { height: clamp(1.5rem, 3vh, 2rem) !important; }
.spacer-2   { height: clamp(2rem, 4vh, 3rem) !important; }
.spacer-3   { height: clamp(3rem, 5vh, 4rem) !important; }
.spacer-4   { height: clamp(4rem, 6vh, 5rem) !important; }
.spacer-5   { height: clamp(5rem, 8vh, 6rem) !important; }
.spacer-6   { height: clamp(6rem, 10vh, 8rem) !important; }

/* Common base for all spacer clamp classes (optional) */
[class^="spacer-clamp"] {
  display: block;
  width: 100%;






/* Font size responsif dari 15px (mobile) → 18px (tablet) → 28px (desktop) */
.font-28 {
  font-size: clamp(1rem, 2vw + 0.5rem, 1.75rem); /* ~15px → 18px → 28px */
}

/* Font size responsif dari 15px (mobile) → 18px (desktop) */
.font-18 {
  font-size: clamp(0.9375rem, 1vw + 0.5rem, 1.125rem); /* 15px → 18px */
}

/* Font size responsif dari 14px (mobile) → 15px (desktop) */
.font-15 {
  font-size: clamp(0.875rem, 0.8vw + 0.3rem, 0.9375rem); /* 14px → 15px */
}

/* Heading size responsif dari 32px (mobile) → 50px (desktop) */
.heading-50 {
  font-size: clamp(2rem, 5vw + 1rem, 3.125rem); /* 32px → ~40px → 50px */
}