/* ===================================================================
   [ - ] FLEXBOX & GRID SYSTEM CONTAINERS (PARENT BASE)
   =================================================================== */
.stack-horizontal-flex {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.stack-vertical-flex {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.stack-horizontal-grid {
  display: grid;
  grid-auto-flow: column; /* Samping */
}

.stack-vertical-grid {
  display: grid;
  grid-auto-flow: row; /* Bawah */
  width: 100%;
}

/* ===================================================================
   [ - ] 9-POINT COORDINATE MODIFIERS (ALL PROBABILITIES)
   =================================================================== */

/* -------------------------------------------------------------------
   BARIS 1: TOP POSITIONINGS (ATAS)
   ------------------------------------------------------------------- */

/* --- [ 1 ] TOP LEFT (Atas Kiri) --- */
.stack-horizontal-flex.align-top-left {
  justify-content: flex-start;
  align-items: flex-start;
}

.stack-vertical-flex.align-top-left {
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
}

.stack-horizontal-grid.align-top-left,
.stack-vertical-grid.align-top-left {
  place-content: start;
  place-items: start;
  text-align: left;
}

/* --- [ 2 ] TOP CENTER / BARIS ATAS TENGAH --- */
.stack-horizontal-flex.align-top-center {
  justify-content: center;
  align-items: flex-start;
}

.stack-vertical-flex.align-top-center {
  justify-content: flex-start;
  align-items: center;
  text-align: center;
}

.stack-horizontal-grid.align-top-center,
.stack-vertical-grid.align-top-center {
  place-content: start center;
  place-items: start center;
  text-align: center;
}

/* --- [ 3 ] TOP RIGHT (Atas Kanan) --- */
.stack-horizontal-flex.align-top-right {
  justify-content: flex-end;
  align-items: flex-start;
}

.stack-vertical-flex.align-top-right {
  justify-content: flex-start;
  align-items: flex-end;
  text-align: right;
}

.stack-horizontal-grid.align-top-right,
.stack-vertical-grid.align-top-right {
  place-content: start end;
  place-items: start end;
  text-align: right;
}

/* -------------------------------------------------------------------
   BARIS 2: CENTER POSITIONINGS (TENGAH SEARA VERTIDAL / Y-AXIS)
   ------------------------------------------------------------------- */

/* --- [ 4 ] LEFT CENTER (Tengah Samping, Rata Kiri fisik) --- */
.stack-horizontal-flex.align-left-center {
  justify-content: flex-start;
  align-items: center;
}

.stack-vertical-flex.align-left-center {
  justify-content: center;
  align-items: flex-start;
  text-align: left;
}

.stack-horizontal-grid.align-left-center,
.stack-vertical-grid.align-left-center {
  place-content: center start;
  place-items: center start;
  text-align: left;
}

/* --- [ 5 ] ALL CENTER / MUTLAK TENGAH (Tengah X & Tengah Y) --- */
.stack-horizontal-flex.align-all-center,
.stack-vertical-flex.align-all-center {
  justify-content: center;
  align-items: center;
  text-align: center;
}

.stack-horizontal-grid.align-all-center,
.stack-vertical-grid.align-all-center {
  place-content: center;
  place-items: center;
  text-align: center;
}

.align-all-center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* --- [ 6 ] RIGHT CENTER (Tengah Samping, Rata Kanan fisik) --- */
.stack-horizontal-flex.align-right-center {
  justify-content: flex-end;
  align-items: center;
}

.stack-vertical-flex.align-right-center {
  justify-content: center;
  align-items: flex-end;
  text-align: right;
}

.stack-horizontal-grid.align-right-center,
.stack-vertical-grid.align-right-center {
  place-content: center end;
  place-items: center end;
  text-align: right;
}

/* -------------------------------------------------------------------
   BARIS 3: BOTTOM POSITIONINGS (BAWAH)
   ------------------------------------------------------------------- */

/* --- [ 7 ] BOTTOM LEFT (Bawah Kiri) --- */
.stack-horizontal-flex.align-bottom-left {
  justify-content: flex-start;
  align-items: flex-end;
}

.stack-vertical-flex.align-bottom-left {
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;
}

.stack-horizontal-grid.align-bottom-left,
.stack-vertical-grid.align-bottom-left {
  place-content: end start;
  place-items: end start;
  text-align: left;
}

/* --- [ 8 ] BOTTOM CENTER (Bawah Tengah) --- */
.stack-horizontal-flex.align-bottom-center {
  justify-content: center;
  align-items: flex-end;
}

.stack-vertical-flex.align-bottom-center {
  justify-content: flex-end;
  align-items: center;
  text-align: center;
}

.stack-horizontal-grid.align-bottom-center,
.stack-vertical-grid.align-bottom-center {
  place-content: end center;
  place-items: end center;
  text-align: center;
}

/* --- [ 9 ] BOTTOM RIGHT (Bawah Kanan) --- */
.stack-horizontal-flex.align-bottom-right {
  justify-content: flex-end;
  align-items: flex-end;
}

.stack-vertical-flex.align-bottom-right {
  justify-content: flex-end;
  align-items: flex-end;
  text-align: right;
}

.stack-horizontal-grid.align-bottom-right,
.stack-vertical-grid.align-bottom-right {
  place-content: end;
  place-items: end;
  text-align: right;
}

/* ===================================================================
   [ - ] DYNAMIC TEXT ALIGNMENT SYSTEM (ALL PROBABILITIES)
   =================================================================== */

/* --- 1. Probabilitas Rata Kiri (Default & Override) --- */
.align-text-left {
  text-align: left !important;
}

/* --- 2. Probabilitas Rata Tengah (Center) --- */
.align-text-center {
  text-align: center !important;
}

/* --- 3. Probabilitas Rata Kanan (Right) --- */
.align-text-right {
  text-align: right !important;
}

/* --- 4. Probabilitas Rata Kanan-Kiri (Justify) --- */
.align-text-justify {
  text-align: justify !important;
}

/* --- 5. Probabilitas Mengikuti Induk / Dinamis (Inherit/Initial) --- */
.align-text-inherit {
  text-align: inherit !important; /* Mewarisi align dari parent pembungkusnya */
}