/* ========================================
   CUSTOM ICON SYSTEM (Font Awesome Style)
   ======================================== */

/* Base class - mirip .jis di Font Awesome */
.jis {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor; /* warna mengikuti text color */
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  vertical-align: -0.125em; /* biar sejajar dengan teks */
}

/* Icon: Classic Slalom */
.ji-classic-slalom {
  -webkit-mask-image: url('../icons/classic-slalom.svg');
  mask-image: url('../icons/classic-slalom.svg');
}

.ji-speed-slalom {
  -webkit-mask-image: url('../icons/speed-slalom.svg');
  mask-image: url('../icons/speed-slalom.svg');
}

.ji-pair-slalom {
  -webkit-mask-image: url('../icons/pair-slalom.svg');
  mask-image: url('../icons/pair-slalom.svg');
}

.ji-freestyle-slide {
  -webkit-mask-image: url('../icons/freestyle-slide.svg');
  mask-image: url('../icons/freestyle-slide.svg');
}


/* ========================================
   SIZE VARIANTS (opsional, seperti ji)
   ======================================== */
.ji-xs { font-size: 0.75em; }
.ji-sm { font-size: 0.875em; }
.ji-lg { font-size: 1.25em; }
.ji-2x { font-size: 2em; }
.ji-3x { font-size: 3em; }
.ji-4x { font-size: 4em; }
.ji-5x { font-size: 5em; }

/* ========================================
   ROTATION & FLIP (opsional)
   ======================================== */
.ji-rotate-90  { transform: rotate(90deg); }
.ji-rotate-180 { transform: rotate(180deg); }
.ji-rotate-270 { transform: rotate(270deg); }
.ji-flip-horizontal { transform: scaleX(-1); }
.ji-flip-vertical   { transform: scaleY(-1); }