/* Margin Keseluruhan */
.m-0 { margin: 0; }

/* Margin Top */
.mt-0 { margin-top: 0; }
.mt-6 { margin-top: 0.375rem; }  /* 6px */
.mt-33 { margin-top: 2.0625rem; }  /* 33px */
.mt-44 { margin-top: 2.75rem; }  /* 44px */
.mt-48 { margin-top: 3rem; }  /* 48px */
.mt-50 { margin-top: 3.125rem; }  /* 50px */
.mt-auto { margin-top: auto; }

/* Margin Bottom */
.mb-5 { margin-bottom: 0.313rem; }  /* 5px */
.mb-15 { margin-bottom: 0.9375rem; }  /* 15px */
.mb-16 { margin-bottom: 1rem; }  /* 16px */
.mb-24 { margin-bottom: 1.5rem; }  /* 24px */
.mb-40 { margin-bottom: 2.5rem; }  /* 40px */

/* Margin Bottom Pixel */
.mb-1px { margin-bottom: 1px; }

/* Margin Left */
.ml-10 { margin-left: 0.625rem; }  /* 10px */

/* Margin Y (atas dan bawah) */
.my-48 { margin-top: 3rem; margin-bottom: 3rem; }  /* 48px */

/* Margin X (kiri dan kanan) */
.mx-20 { margin-left: 1.25rem; margin-right: 1.25rem; }  /* 20px */
.mx-auto { margin-left: auto; margin-right: auto; }

/* Padding Keseluruhan */
.p-3 { padding: 0.1875rem; }  /* 3px  */
.p-5 { padding: 0.313rem; }  /* 5px */
.p-8 { padding: 0.5rem; }  /* 8px */
.p-10 { padding: 0.625rem; }  /* 10px */
.p-16 { padding: 1rem; }  /* 16px */
.p-24 { padding: 1.5rem; }  /* 24px */

/* Padding Top */
.pt-16 { padding-top: 1rem; }  /* 16px */
.pt-20 { padding-top: 1.25rem; }  /* 20px */

/* Padding Bottom */
.pb-2 { padding-bottom: 0.125rem; }  /* 2px */
.pb-3 { padding-bottom: 0.1875rem; }  /* 3px */
.pb-5 { padding-bottom: 0.313rem; }  /* 5px */
.pb-40 { padding-bottom: 2.5rem; } /* 40px */

/* Padding Y (atas dan bawah) */
.py-3 { padding-top: 0.1875rem; padding-bottom: 0.1875rem; }  /* 3px */
.py-4 { padding-top: 0.25rem; padding-bottom: 0.25rem; }  /* 4px */
.py-8 { padding-top: 0.5rem; padding-bottom: 0.5rem; }  /* 8px */
.py-10 { padding-top: 0.625rem; padding-bottom: 0.625rem; }  /* 10px */
.py-16 { padding-top: 1rem; padding-bottom: 1rem; }  /* 16px */
.py-35 { padding-top: 2.188rem; padding-bottom: 2.188rem; }  /* 35px */

/* Padding X (kiri dan kanan) */
.px-7  { padding-left: 0.4375rem; padding-right: 0.4375rem; }  /* 7px */
.px-8  { padding-left: 0.5rem; padding-right: 0.5rem; }  /* 8px */
.px-10 { padding-left: 0.625rem; padding-right: 0.625rem; }  /* 10px */
.px-12 { padding-left: 0.75rem; padding-right: 0.75rem; }  /* 12px */
.px-16 { padding-left: 1rem; padding-right: 1rem; }  /* 16px */

/* Width */
.w-40 { width: 40px; }
.w-59 { width: 59px; }
.w-140 {width: 140px; }
.w-175 { width: 175px; }
.w-700 { width: 700px; }
.w-full { width: 100%; }
.w-mc { width: max-content; }

/* Min Width */
.minw-mc { min-width: max-content; }

/* Max Width */
.maxw-336 { max-width: 336px; }
.maxw-675 { max-width: 675px; }
.maxw-955 { max-width: 955px; }
.maxw-1320 { max-width: 1320px; }
.maxw-66p { max-width: 66%; }

/* Height */
.h-24 { height: 24px; }
.h-26 { height: 26px; }
.h-28 { height: 28px; }
.h-32 { height: 32px; }
.h-175 { height: 175px; }
.h-full { height: 100%; }

/* Min Height */
.minh-200 { min-height: 200px; }
.minh-226 { min-height: 226px; }

/* Max Height */
.maxh-0 { max-height: 0; }
.maxh-360 { max-height: 360px; }

/* White Space */
.ws-n { white-space: normal; }
.ws-nw { white-space: nowrap; }
.ws-p { white-space: pre; }
.ws-pl { white-space: pre-line; }
.ws-pw { white-space: pre-wrap; }

/* Object Fit */
.of-f { object-fit: fill; }
.of-c { object-fit: contain; }
.of-cv { object-fit: cover; }
.of-n { object-fit: none; }
.of-sd { object-fit: scale-down; }

/* Display */
.d-n { display: none; }
.d-f { display: flex; }
.d-if { display: inline-flex; }
.d-g { display: grid; }

/* Align Items */
.ai-fs { align-items: flex-start; }
.ai-fe { align-items: flex-end; }
.ai-c { align-items: center; } 

/* Text Align */
.ta-c { text-align: center; }

/* Justify Content */
.jc-s { justify-content: start; }
.jc-fs { justify-content: flex-start; }
.jc-c { justify-content: center; }
.jc-sb { justify-content: space-between; }

/* Flex */
.f-1 { flex: 1; }
.f-1-1-25 { flex: 1 1 25%; }
.f-1-1-35 { flex: 1 1 35%; }
.f-1-1-60 { flex: 1 1 60%; }
.f-1-1-65 { flex: 1 1 65%; }

/* Flex Wrap */
.fw-w { flex-wrap: wrap; }

/* Flex Basic */
.fb-full { flex-basis: 100%; }

/* Flex Direction */
.fd-rr { flex-direction: row-reverse; }
.fd-c { flex-direction: column; }
.fd-r { flex-direction: row; }

/* Flex Shrink */
.fs-0 { flex-shrink: 0; }
.fs-1 { flex-shrink: 1; }

/* Grid Template Columns dengan repeat(auto-fit/fill, minmax) */
.gtc-af260 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Position */
.pos-s { position: static; }
.pos-r { position: relative; }
.pos-a { position: absolute; }
.pos-f { position: fixed; }
.pos-st { position: sticky; }

/* Positioning Offsets Top */
.top-0 { top: 0; }
.top-50p { top: 50%; }

/* Positioning Offsets Bottom */
.bottom-0 { bottom: 0; }

/* Positioning Offsets Left */
.left-0 { left: 0; }
.left-50p { left: 50%; }

/* Inset (shorthand untuk top, right, bottom, left) */
.inset-0 { inset: 0; }

/* Z Index */
.zi-1 { z-index: 1; }
.zi-2 { z-index: 2; }
.zi-10 { z-index: 10; }
.zi-99999 { z-index: 99999; }

/* Overflow */
.o-h { overflow: hidden; }

/* Overflow-X */
.ox-a { overflow-x: auto; }

/* Scrollbar Width */
.sw-t { scrollbar-width: thin; }

/* Scrollbar Color */
.sc-999-333333 { scrollbar-color: #999 #333333; }

/* Gap */
.gap-5 { gap: 0.313rem; }  /* 5px */
.gap-6 { gap: 0.375rem; }  /* 6px */
.gap-10 { gap: 0.625rem; }  /* 10px */
.gap-16 { gap: 1rem; }  /* 16px */
.gap-24 { gap: 1.5rem; }  /* 24px */
.gap-30 { gap: 1.875rem; }  /* 30px */

/* User Select */
.us-n { user-select: none; }

/* Border Keseluruhan */
.b-1 { border: 1px solid; }

/* Border width top */
.bt-4 { border-top: 4px solid; }

/* Border width Y (atas dan bawah) */
.by-1 { border-top: 1px solid; border-bottom: 1px solid; }

/* Border Color */
.bc-dddddd { border-color: #dddddd; }
.bc-1976d2 { border-color: #1976d2; }

/* Border Radius */
.br-4 { border-radius: 4px; }
.br-5 { border-radius: 5px; }
.br-6 { border-radius: 6px; }
.br-8 { border-radius: 8px; }

/* Color */
.c-ffffff { color: #ffffff; }
.c-dbdbdb { color: #DBDBDB; }
.c-121212 { color: #121212; }
.c-0066cc { color: #0066cc; }

/* Color Hover */
.c-ffffff-h:hover { Color: #FFFFFF; }

/* Background Color */
.bg-fff { background: #fff; }
.bg-000 { background: #000; }
.bg-f6f6f6 { background: #f6f6f6; }
.bg-333333 { background: #333333; }
.bg-E5E5E5 { background: #E5E5E5; }
.bg-white-20 { background: rgba(255, 255, 255, 0.2); }
.bg-white-60 { background: rgba(255, 255, 255, 0.6); }
.bg-black-70 { background: rgba(0, 0, 0, 0.7); }
.bg-grad-135-1976d2-42a5f5 { background: linear-gradient(135deg, #1976d2, #42a5f5); }
.bg-grad-135-e1f5fe-ffffff { background: linear-gradient(135deg, #e1f5fe, #ffffff); }

/* Background Color Hover */
.bg-black-90-h:hover { background: rgba(0, 0, 0, 0.9); }

/* Background Size */
.bgs-a { background-size: auto; }
.bgs-cv { background-size: cover; }
.bgs-c { background-size: contain; }

/* Background Position */
.bgp-c { background-position: center; }

/* Background Repeat */
.bgr-nr { background-repeat: no-repeat; }

/* Box Shadow */
.bs-x3-y-3-c999 { box-shadow: 3px -3px 0 #999999; }

/* Font Size */
.font-11 { font-size: 0.688rem; }  /* 11px */
.font-12 { font-size: 0.75rem; }  /* 12px */
.font-14 { font-size: 0.875rem; }  /* 14px */
.font-16 { font-size: 1rem; }  /* 16px */
.font-18 { font-size: 1.125rem; }  /* 18px */
.font-24 { font-size: 1.5rem; }  /* 24px */
.font-25 { font-size: 1.563rem; }  /* 25px */

/* Font Size Pixel */
.font-14px { font-size: 14px; }  /* 14px */
.font-16px { font-size: 16px; }  /* 16px */
.font-18px { font-size: 18px; }  /* 18px */

/* Font Weight */
.fontw-l { font-weight: 300; } /* Light */
.fontw-n { font-weight: 400; } /* Normal */
.fontw-m { font-weight: 500; } /* Medium */
.fontw-sb { font-weight: 600; } /* Semi-bold */
.fontw-b { font-weight: 700; } /* Bold */
.fontw-eb { font-weight: 800; } /* Extra bold */
.fontw-bl { font-weight: 900; } /* Black */

/* Text Transform */
.tt-n { text-transform: none; }
.tt-u { text-transform: uppercase; }
.tt-l { text-transform: lowercase; }
.tt-c { text-transform: capitalize; }

/* Line-height unitless */
.lh-1_3 { line-height: 1.3; }
.lh-1_4 { line-height: 1.4; }
.lh-1_6 { line-height: 1.6; }
.lh-n { line-height: normal; }

/* Line-height fixed pixel */
.lh-13  { line-height: 0.813rem; }  /* 13px */

/* Text Decoration */
.td-n { text-decoration: none; }
.td-u { text-decoration: underline; }
.td-o { text-decoration: overline; }
.td-lt { text-decoration: line-through; }

/* Cursor */
.cursor-p { cursor: pointer; }

/* User Select */
.us-n { user-select: none; }

/* Transition Max Height */
.trans-maxh-0_3 { transition: max-height 0.3s ease-in-out; }

/* Transition Transform */
.trans-tf-0_6 { transition: transform 0.6s ease-in-out; }

/* Transition Transform Ease*/
.trans-tf-0_5-e { transition: transform 0.5s ease; }

/* Transition Opacity Transform Ease*/
.trans-opct-tf-0_5-e { transition: opacity 0.5s ease, transform 0.5s ease; }

/* Opacity */
.opct-1 { opacity: 1 ; }

/* Opacity Hover */
.opct-0_8-h:hover { opacity: 0.8; }

/* Transition Opacity */
.trans-opct-0_3 { transition: opacity 0.3s ease-in-out; }

/* Transition Opacity Ease*/
.trans-opct-0_5-e { transition: opacity 0.5s ease; }

/* Will Change */
.wc-o { will-change: opacity; }

/* Aspect Ratio */
.ar-16-9 { aspect-ratio: 16 / 9; }

/* Filter */
.f-bright_ { filter: brightness(); }
.f-bright-0_6 { filter: brightness(0.6); }

/* Transform TranslateY */
.trans-y-0 { transform: translateY(0); }
.trans-y--full { transform: translateY(-100%); }

/* Transform Translate */
.trans-x--50-y--50 { transform: translate(-50%, -50%); }

/* Webkit Line Clamp (terpadu: mengatur display, box-orient, overflow, dan line-clamp) */
.wlc-1 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1; } /* 1 baris */
.wlc-2 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; } /* 2 baris */
.wlc-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 3; } /* 3 baris */
.wlc-4 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 4; } /* 4 baris */
.wlc-5 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 5; } /* 5 baris */
.wlc-n { display: block; -webkit-box-orient: initial; overflow: visible; -webkit-line-clamp: none; } /* Tanpa clamp */

@media (max-width: 992px) {
  /* Margin Top */
  .mt-lg-0 { margin-top: 0; }
  .mt-lg-44 { margin-top: 2.75rem; }  /* 44px */

  /* Margin Bottom */
  .mb-lg-0 { margin-bottom: 0; }
  .mb-lg-16 { margin-bottom: 1rem; }  /* 16px */
  
  /* Padding Keseluruhan */
  .p-lg-0 { padding: 0; }
  .p-lg-16 { padding: 1rem; }
  
  /* Padding Top */
  .pt-lg-0  { padding-top: 0; }

  /* Padding Bottom */
  .pb-lg-16 { padding-bottom: 1rem; }
  
  /* Padding X (kiri dan kanan) */
  .px-lg-0  { padding-left: 0; padding-right: 0; }
  
  /* Max Width */
  .maxw-lg-full { max-width: 100%; }

  /* Display */
  .d-lg-f { display: flex; }

  /* Flex */
  .f-lg-1-1-full { flex: 1 1 100%; }
  
  /* Flex Direction */
  .fd-lg-c { flex-direction: column; }
  
  /* Gap */
  .gap-lg-0 { gap: 0; }

  /* Background Color */
  .bg-lg-fff { background: #fff; }
}

@media (max-width: 768px) {
  /* Margin Bottom */
  .mb-md-0 { margin-bottom: 0; }
  
  /* Margin Left */
  .ml-md-0 { margin-left: 0; }
  .ml-md-5 { margin-left: 0.313rem; }  /* 5px */

  /* Margin X (kiri dan kanan) */
  .mx-md-0 { margin-left: 0; margin-right: 0; }
  
  /* Padding Top */
  .pt-md-3 { padding-top: 0.188rem; }  /* 3px  */

  /* Padding Bottom */
  .pb-md-1 { padding-bottom: 0.063rem; }  /* 1px  */
  
  /* Padding X (kiri dan kanan) */
  .px-md-3 { padding-left: 0.188rem; padding-right: 0.188rem; }  /* 3px */

  /* Width */
  .w-md-40 { width: 40px; }
  .w-md-80 { width: 80px; }
  .w-md-full { width: 100%; }
  
  /* Max Width */
  .maxw-md-full { max-width: 100%; }
  
  /* Height */
  .h-md-80 { height: 80px; }
  .h-md-full { height: 100%; }
  
  /* Min Height */
  .minh-md-170 { min-height: 170px; }
  
  /* Max Height */
  .maxh-md-170 { max-height: 170px; }
  .maxh-md-225 { max-height: 225px; }
  
  /* Align Items */
  .ai-md-c { align-items: center; } 

  /* Flex Direction */
  .fd-md-c { flex-direction: column; }
  
  /* Gap */
  .gap-md-15 { gap: 0.938rem; }  /* 15px */
  
  /* Font Size */
  .font-md-12 { font-size: 0.75rem; }  /* 12px */
  .font-md-18 { font-size: 1.125rem; }  /* 18px */
  .font-md-22 { font-size: 1.375rem; }  /* 22px */
  
  /* Font Weight */
  .fontw-md-l { font-weight: 300; } /* Light */
  .fontw-md-n { font-weight: 400; } /* Normal */
  .fontw-md-m { font-weight: 500; } /* Medium */
  .fontw-md-sb { font-weight: 600; } /* Semi-bold */
  .fontw-md-b { font-weight: 700; } /* Bold */
  .fontw-md-eb { font-weight: 800; } /* Extra bold */
  .fontw-md-bl { font-weight: 900; } /* Black */

  /* Position */
  .pos-md-f { position: fixed; }
  
  /* Positioning Offsets Bottom */
  .bottom-md--1 { bottom: -1px; }
  
  /* Z Index */
  .zi-md-999 { z-index: 999; }
  
  /* Border Radius */
  .br-md-0 { border-radius: 0; }
  
  /* Justify Content */
  .jc-md-e { justify-content: end; }
  
  /* Webkit Line Clamp (terpadu: mengatur display, box-orient, overflow, dan line-clamp) */
  .wlc-md-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 3; } /* 3 baris */
}