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

/* Margin Top */
.mt-0 { margin-top: 0; }
.mt-6 { margin-top: 0.375rem; }  /* 6px */
.mt-8 { margin-top: 0.5rem; }  /* 8px */
.mt-10 { margin-top: 0.625rem; }  /* 10px */
.mt-16 { margin-top: 1rem; }  /* 16px */
.mt-20 { margin-top: 1.25rem; }  /* 20px */
.mt-30 { margin-top: 1.875rem; }  /* 30px */
.mt-33 { margin-top: 2.0625rem; }  /* 33px */
.mt-40 { margin-top: 2.5rem; }  /* 40px */
.mt-44 { margin-top: 2.75rem; }  /* 44px */
.mt-48 { margin-top: 3rem; }  /* 48px */
.mt-50 { margin-top: 3.125rem; }  /* 50px */
.mt-70 { margin-top: 4.375rem; }  /* 70px */
.mt-auto { margin-top: auto; }

/* Margin Bottom */
.mb-0 { margin-bottom: 0; }
.mb-5 { margin-bottom: 0.313rem; }  /* 5px */
.mb-8 { margin-bottom: 0.5rem; }  /* 8px */
.mb-10 { margin-bottom: 0.625rem; }  /* 10px */
.mb-15 { margin-bottom: 0.9375rem; }  /* 15px */
.mb-16 { margin-bottom: 1rem; }  /* 16px */
.mb-20 { margin-bottom: 1.25rem; }  /* 20px */
.mb-24 { margin-bottom: 1.5rem; }  /* 24px */
.mb-30 { margin-bottom: 1.875rem; }  /* 30px */
.mb-40 { margin-bottom: 2.5rem; }  /* 40px */
.mb-48 { margin-bottom: 3rem; }  /* 48px */
.mb-50 { margin-bottom: 3.125rem; }  /* 50px */
.mb-60 { margin-bottom: 3.75rem; }  /* 60px */

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

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

/* Margin Right */
.mr-5 { margin-right: 0.313rem; }  /* 5px */

/* Margin Y (atas dan bawah) */
.my-8 { margin-top: 0.5rem; margin-bottom: 0.5rem; }  /* 8px */
.my-10 { margin-top: 0.625rem; margin-bottom: 0.625rem; }  /* 10px */
.my-15 { margin-top: 0.9375rem; margin-bottom: 0.9375rem; }  /* 15px */
.my-16 { margin-top: 1rem; margin-bottom: 1rem; }  /* 16px */
.my-20 { margin-top: 1.25rem; margin-bottom: 1.25rem; }  /* 20px */
.my-48 { margin-top: 3rem; margin-bottom: 3rem; }  /* 48px */

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

/* Padding Keseluruhan */
.p-0 { padding: 0; }
.p-2 { padding: 0.125rem; }  /* 2px */
.p-3 { padding: 0.1875rem; }  /* 3px  */
.p-5 { padding: 0.313rem; }  /* 5px */
.p-6 { padding: 0.375rem; }  /* 6px */
.p-8 { padding: 0.5rem; }  /* 8px */
.p-10 { padding: 0.625rem; }  /* 10px */
.p-15 { padding: 0.9375rem; }  /* 15px */
.p-16 { padding: 1rem; }  /* 16px */
.p-20 { padding: 1.25rem; }  /* 20px */
.p-24 { padding: 1.5rem; }  /* 24px */
.p-30 { padding: 1.875rem; }  /* 30px */
.p-33 { padding: 2.0625rem; }  /* 33px */
.p-40 { padding: 2.5rem; }  /* 40px */

/* Padding Top */
.pt-8 { padding-top: 0.5rem; }  /* 8px */
.pt-15 { padding-top: 0.9375rem; }  /* 15px */
.pt-16 { padding-top: 1rem; }  /* 16px */
.pt-20 { padding-top: 1.25rem; }  /* 20px */
.pt-24 { padding-top: 1.5rem; }  /* 24px */
.pt-33 { padding-top: 2.0625rem; }  /* 33px */
.pt-44 { padding-top: 2.75rem; }  /* 44px */

/* Padding Bottom */
.pb-2 { padding-bottom: 0.125rem; }  /* 2px */
.pb-3 { padding-bottom: 0.1875rem; }  /* 3px */
.pb-5 { padding-bottom: 0.313rem; }  /* 5px */
.pb-12 { padding-bottom: 0.75rem; }  /* 12px */
.pb-15 { padding-bottom: 0.9375rem; }  /* 15px */
.pb-16 { padding-bottom: 1rem; }  /* 16px */
.pb-40 { padding-bottom: 2.5rem; } /* 40px */

/* Padding Left */
.pl-10 { padding-left: 0.625rem; }  /* 10px */
.pl-24 { padding-left: 1.5rem; }  /* 24px */

/* Padding Right */
.pr-10 { padding-right: 0.625rem; }  /* 10px */

/* Padding Y (atas dan bawah) */
.py-1 { padding-top: 0.063rem; padding-bottom: 0.063rem; }  /* 1px */
.py-2 { padding-top: 0.125rem; padding-bottom: 0.125rem; }  /* 2px */
.py-3 { padding-top: 0.1875rem; padding-bottom: 0.1875rem; }  /* 3px */
.py-4 { padding-top: 0.25rem; padding-bottom: 0.25rem; }  /* 4px */
.py-5 { padding-top: 0.313rem; padding-bottom: 0.313rem; }  /* 5px */
.py-6 { padding-top: 0.375rem; padding-bottom: 0.375rem; }  /* 6px */
.py-7 { padding-top: 0.4375rem; padding-bottom: 0.4375rem; }  /* 7px */
.py-8 { padding-top: 0.5rem; padding-bottom: 0.5rem; }  /* 8px */
.py-10 { padding-top: 0.625rem; padding-bottom: 0.625rem; }  /* 10px */
.py-11 { padding-top: 0.688rem; padding-bottom: 0.688rem; }  /* 11px */
.py-16 { padding-top: 1rem; padding-bottom: 1rem; }  /* 16px */
.py-18 { padding-top: 1.125rem; padding-bottom: 1.125rem; }  /* 18px */
.py-20 { padding-top: 1.25rem; padding-bottom: 1.25rem; }  /* 20px */
.py-24 { padding-top: 1.5rem; padding-bottom: 1.5rem; }  /* 24px */
.py-25 { padding-top: 1.563rem; padding-bottom: 1.563rem; }  /* 25px */
.py-30 { padding-top: 1.875rem; padding-bottom: 1.875rem; }  /* 30px */
.py-35 { padding-top: 2.188rem; padding-bottom: 2.188rem; }  /* 35px */
.py-50 { padding-top: 3.125rem; padding-bottom: 3.125rem; }  /* 50px */
.py-80 { padding-top: 5rem; padding-bottom: 5rem; }  /* 80px */
.py-90 { padding-top: 5.625rem; padding-bottom: 5.625rem; }  /* 90px */

/* Padding X (kiri dan kanan) */
.px-2 { padding-left: 0.125rem; padding-right: 0.125rem; }  /* 2px */
.px-5 { padding-left: 0.313rem; padding-right: 0.313rem; }  /* 5px */
.px-6 { padding-left: 0.375rem; padding-right: 0.375rem; }  /* 6px */
.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-15 { padding-left: 0.938rem; padding-right: 0.938rem; }  /* 15px */
.px-16 { padding-left: 1rem; padding-right: 1rem; }  /* 16px */
.px-18 { padding-left: 1.125rem; padding-right: 1.125rem; }  /* 18px */
.px-19 { padding-left: 1.188rem; padding-right: 1.188rem; }  /* 19px */
.px-20 { padding-left: 1.25rem; padding-right: 1.25rem; }  /* 20px */
.px-22 { padding-left: 1.375rem; padding-right: 1.375rem; }  /* 22px */
.px-30 { padding-left: 1.875rem; padding-right: 1.875rem; }  /* 30px */
.px-40 { padding-left: 2.5rem; padding-right: 2.5rem; }  /* 40px */

/* Width */
.w-24 { width: 24px; }
.w-30 { width: 30px; }
.w-33 { width: 33px; }
.w-36 { width: 36px; }
.w-37 { width: 37px; }
.w-38 { width: 38px; }
.w-40 { width: 40px; }
.w-50 { width: 50px; }
.w-55 { width: 55px; }
.w-59 { width: 59px; }
.w-80 { width: 80px; }
.w-100 { width: 100px; }
.w-110 { width: 110px; }
.w-120 { width: 120px; }
.w-140 { width: 140px; }
.w-150 { width: 150px; }
.w-156 { width: 156px; }
.w-175 { width: 175px; }
.w-180 { width: 180px; }
.w-300 { width: 300px; }
.w-700 { width: 700px; }
.w-25p { width: 25%; }
.w-30p { width: 30%; }
.w-70p { width: 70%; }
.w-90p { width: 90%; }
.w-full { width: 100%; }
.w-mc { width: max-content; }

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

/* Max Width */
.maxw-230 { max-width: 230px; }
.maxw-252 { max-width: 252px; }
.maxw-336 { max-width: 336px; }
.maxw-465 { max-width: 465px; }
.maxw-675 { max-width: 675px; }
.maxw-728 { max-width: 728px; }
.maxw-797 { max-width: 797px; }
.maxw-860 { max-width: 860px; }
.maxw-944 { max-width: 944px; }
.maxw-955 { max-width: 955px; }
.maxw-961 { max-width: 961px; }
.maxw-970 { max-width: 970px; }
.maxw-1100 { max-width: 1100px; }
.maxw-1320 { max-width: 1320px; }
.maxw-1332 { max-width: 1332px; }
.maxw-1425 { max-width: 1425px; }
.maxw-66p { max-width: 66%; }
.maxw-100p { max-width: 100%; }

/* Height */
.h-20 { height: 20px; }
.h-24 { height: 24px; }
.h-25 { height: 25px; }
.h-26 { height: 26px; }
.h-28 { height: 28px; }
.h-30 { height: 30px; }
.h-32 { height: 32px; }
.h-33 { height: 33px; }
.h-34 { height: 34px; }
.h-37 { height: 37px; }
.h-38 { height: 38px; }
.h-47 { height: 47px; }
.h-50 { height: 50px; }
.h-80 { height: 80px; }
.h-100 { height: 100px; }
.h-120 { height: 120px; }
.h-150 { height: 150px; }
.h-175 { height: 175px; }
.h-280 { height: 280px; }
.h-full { height: 100%; }
.h-auto { height: auto; }

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

/* Max Height */
.maxh-0 { max-height: 0; }
.maxh-66 { max-height: 66px; }
.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-b { display: block; }
.d-ib { display: inline-block; }
.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; }
.ta-l { text-align: Left; }
.ta-r { text-align: right; }

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

/* Flex */
.f-1 { flex: 1; }
.f-3 { flex: 3; }
.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; }

/* Flex Grow */
.fg-0 { flex-grow: 0; }
.fg-1 { flex-grow: 1; }

/* Grid Template Columns */
.gtc-1fr { grid-template-columns: 1fr; }
.gtc-2fr { grid-template-columns: 1fr 1fr; }
.gtc-3fr { grid-template-columns: 1fr 1fr 1fr; }

/* Grid Template Columns */
.gtc-r1fr { grid-template-columns: repeat(1, 1fr); }
.gtc-r2fr { grid-template-columns: repeat(2, 1fr); }
.gtc-r3fr { grid-template-columns: repeat(3, 1fr); }
.gtc-r4fr { grid-template-columns: repeat(4, 1fr); }

/* 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-16 { top: 16px; }
.top-20 { top: 20px; }
.top-40p { top: 40%; }
.top-50p { top: 50%; }

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

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

/* Positioning Offsets Right */
.right-15 { right: 15px; }
.right-16 { right: 16px; }

/* 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-100 { z-index: 100; }
.zi-99999 { z-index: 99999; }

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

/* 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-8 { gap: 0.5rem; }  /* 8px */
.gap-10 { gap: 0.625rem; }  /* 10px */
.gap-12 { gap: 0.75rem; }  /* 12px */
.gap-15 { gap: 0.9375rem; }  /* 15px */
.gap-16 { gap: 1rem; }  /* 16px */
.gap-20 { gap: 1.25rem; }  /* 20px */
.gap-24 { gap: 1.5rem; }  /* 24px */
.gap-30 { gap: 1.875rem; }  /* 30px */
.gap-r20-c20 { row-gap: 1.25rem; column-gap: 1.25rem; }  /* 20px */

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

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

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

/* Border width Bottom */
.bb-1 { border-bottom: 1px solid; }

/* Border Width Left */
.bl-4 { border-left: 4px solid; }
.bl-7 { border-left: 7px solid; }
.bl-8 { border-left: 8px solid; }

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

/* Border Dotted Keseluruhan */
.bd-1 { border: 1px dotted; }

/* Border Color */
.bc-ffffff { border-color: #ffffff; }
.bc-121212 { border-color: #121212; }
.bc-cccccc { border-color: #cccccc; }
.bc-dddddd { border-color: #dddddd; }
.bc-1976d2 { border-color: #1976d2; }
.bc-0066cc { border-color: #0066cc; }
.bc-334155 { border-color: #334155; }
.bc-93c5fd { border-color: #93c5fd; }
.bc-rgb-203-213-225 { border-color: rgb(203 213 225); }

/* Border Color Hover*/
.bc-cccccc-h:hover { border-color: #cccccc; }

/* Border Color Left */
.blc-60a5fa { border-left-color: #60a5fa; }

/* Border Radius */
.br-3 { border-radius: 3px; }
.br-4 { border-radius: 4px; }
.br-5 { border-radius: 5px; }
.br-6 { border-radius: 6px; }
.br-8 { border-radius: 8px; }
.br-10 { border-radius: 10px; }
.br-12 { border-radius: 12px; }
.br-50 { border-radius: 50px; }
.br-50p { border-radius: 50%; }

/* Border Collapse */
.bcl-c { border-collapse: collapse; } /* Border digabung */
.bcl-s { border-collapse: separate; } /* Border terpisah */

/* Color */
.c-ffffff { color: #ffffff; }
.c-cccccc { color: #cccccc; }
.c-dbdbdb { color: #DBDBDB; }
.c-121212 { color: #121212; }
.c-555555 { color: #555555; }
.c-666666 { color: #666666; }
.c-777777 { color: #777777; }
.c-0066cc { color: #0066cc; }
.c-008b8b { color: #008b8b; }
.c-cc6600 { color: #cc6600; }
.c-1e3a8a { color: #1e3a8a; }
.c-475569 { color: #475569; }
.c-e0f0ff { color: #e0f0ff; }
.c-60a5fa { color: #60a5fa; }
.c-0869C8 { color: #0869C8; }
.c-3A68B1 { color: #3A68B1; }
.c-c00 { color: #c00; }
.c-ccc { color: #ccc; }

/* Color Hover */
.c-ffffff-h:hover { color: #FFFFFF; }
.c-3b82f6-h:hover { color: #3b82f6; }
.c-0869C8-h:hover { color: #0869C8; }

/* Color Focus */
.c-3b82f6-f:focus { color: #3b82f6; }

/* Background Color */
.bg-transparent { background: transparent; }
.bg-fff { background: #fff; }
.bg-000 { background: #000; }
.bg-121212 { background: #121212; }
.bg-f5f5f5 { background: #f5f5f5; }
.bg-f6f6f6 { background: #f6f6f6; }
.bg-f9f9f9 { background: #f9f9f9; }
.bg-333333 { background: #333333; }
.bg-E5E5E5 { background: #E5E5E5; }
.bg-EEEEEE { background: #EEEEEE; }
.bg-E60023 { background: #E60023; }
.bg-2b6cb0 { background: #2b6cb0; }
.bg-34495e { background: #34495e; }
.bg-e0f0ff { background: #e0f0ff; }
.bg-e53935 { background: #e53935; }
.bg-1877F2 { background: #1877F2; }
.bg-25D366 { background: #25D366; }
.bg-white-20 { background: rgba(255, 255, 255, 0.2); }
.bg-white-30 { background: rgba(255, 255, 255, 0.3); }
.bg-white-60 { background: rgba(255, 255, 255, 0.6); }
.bg-black-70 { background: rgba(0, 0, 0, 0.7); }
.bg-rgba-30_41_59-0_9 { background: rgba(30, 41, 59, 0.9); }
.bg-rgba-25_118_210-0_9 { background: rgba(25, 118, 210, 0.9); }
.bg-grad-135-1976d2-42a5f5 { background: linear-gradient(135deg, #1976d2, #42a5f5); }
.bg-grad-135-e1f5fe-ffffff { background: linear-gradient(135deg, #e1f5fe, #ffffff); }
.bg-grad-135-1e3a8a-60a5fa { background: linear-gradient(135deg, #1e3a8a, #60a5fa); }
.bg-grad-135-0f172a_0p-1e293b_100p { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); }
.bg-grad-180-eff6ff_0p-dbeafe_100p { background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%); }

/* Background Color Hover */
.bg-f6f6f6-h:hover { background: #f6f6f6; }
.bg-0066cc-h:hover { background: #0066cc; }
.bg-3498db-h:hover { background: #3498db; }
.bg-eaeaea-h:hover { background: #eaeaea; }
.bg-dddddd-h:hover { background: #dddddd; }
.bg-black-90-h:hover { background: rgba(0, 0, 0, 0.9); }

/* Transition Background Ease*/
.trans-bg-0_2-e { transition: background 0.2s ease; }

/* Transition Background Transform Ease*/
.trans-bg-tf-0_3-e { transition: background 0.3s ease, transform 0.3s ease; }

/* 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; }

/* Webkit Background Clip */
.wbgc-bb { -webkit-background-clip: border-box; } /* Kliping hingga border */
.wbgc-pb { -webkit-background-clip: padding-box; } /* Kliping hingga padding */
.wbgc-t { -webkit-background-clip: text; } /* Kliping ke teks */

/* Webkit Text Fill Color */
.wtfc-t { -webkit-text-fill-color: transparent; } /* Teks transparan */
.wtfc-bk { -webkit-text-fill-color: black; } /* Teks hitam */
.wtfc-w { -webkit-text-fill-color: white; } /* Teks putih */
.wtfc-r { -webkit-text-fill-color: red; } /* Teks merah */

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

/* Font Size */
.font-10 { font-size: 0.625rem; }  /* 10px */
.font-11 { font-size: 0.688rem; }  /* 11px */
.font-12 { font-size: 0.75rem; }  /* 12px */
.font-13 { font-size: 0.813rem; }  /* 13px */
.font-14 { font-size: 0.875rem; }  /* 14px */
.font-15 { font-size: 0.938rem; }  /* 15px */
.font-16 { font-size: 1rem; }  /* 16px */
.font-18 { font-size: 1.125rem; }  /* 18px */
.font-20 { font-size: 1.25rem; }  /* 20px */
.font-22 { font-size: 1.375rem; }  /* 22px */
.font-24 { font-size: 1.5rem; }  /* 24px */
.font-25 { font-size: 1.563rem; }  /* 25px */
.font-26 { font-size: 1.625rem; }  /* 26px */
.font-28 { font-size: 1.75rem; }  /* 28px */
.font-30 { font-size: 1.875rem; }  /* 30px */
.font-60 { font-size: 3.75rem; }  /* 60px */

/* 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 */

/* Font Style */
.fs-i { font-style: italic; } /* Teks miring */
.fs-n { font-style: normal; } /* Teks normal */
.fs-o { font-style: oblique; } /* Teks miring artifisial */

/* Font Family */
.font-hiragino {
  font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN W3', 'メイリオ', Meiryo, sans-serif !important;
}

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

/* Letter Spacing */
.lsp-1 { letter-spacing: 1px; }

/* Line-height unitless */
.lh-1_2 { line-height: 1.2; }
.lh-1_3 { line-height: 1.3; }
.lh-1_4 { line-height: 1.4; }
.lh-1_5 { line-height: 1.5; }
.lh-1_6 { line-height: 1.6; }
.lh-1_7 { line-height: 1.7; }
.lh-12px { line-height: 12px; }
.lh-n { line-height: normal; }

/* Line-height Pixel */
.lh-13px  { line-height: 13px; }
.lh-20px  { line-height: 20px; }

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

/* Text Decoration Hover */
.td-u-h:hover { text-decoration: underline; }

/* Text Decoration Focus */
.td-u-f:focus { text-decoration: underline; }

/* 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_3-e { transition: transform 0.3s ease; }
.trans-tf-0_4-e { transition: transform 0.4s ease; }
.trans-tf-0_5-e { transition: transform 0.5s ease; }

/* Transition All Ease*/
.trans-all-0_3-e { transition: all 0.3s ease; }

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

/* Transform: Scale */
.tf-s1_05 { transform: scale(1.05); }

/* 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_3-e { transition: opacity 0.3s ease; }
.trans-opct-0_5-e { transition: opacity 0.5s ease; }

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

/* 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 */

/* Touch Action */
.tch-a { touch-action: auto; } /* Default browser */
.tch-n { touch-action: none; } /* Nonaktifkan semua interaksi sentuhan */
.tch-px { touch-action: pan-x; } /* Izinkan panning horizontal */
.tch-py { touch-action: pan-y; } /* Izinkan panning vertikal */
.tch-m { touch-action: manipulation; } /* Izinkan panning dan pinch-zoom */

/* List Style */
.ls-n { list-style: none; }
.ls-d { list-style: disc; }
.ls-c { list-style: circle; }
.ls-s { list-style: square; }
.ls-dec { list-style: decimal; }
.ls-lr { list-style: lower-roman; }
.ls-ur { list-style: upper-roman; }

/* Vertical Align */
.va-bl { vertical-align: baseline; } /* Penyelarasan baseline */
.va-t { vertical-align: top; } /* Penyelarasan atas */
.va-m { vertical-align: middle; } /* Penyelarasan tengah */
.va-b { vertical-align: bottom; } /* Penyelarasan bawah */
.va-tt { vertical-align: text-top; } /* Penyelarasan atas teks */
.va-tb { vertical-align: text-bottom; } /* Penyelarasan bawah teks */

@media (max-width: 992px) {
  /* Margin Keseluruhan */
  .m-lg-0 { margin: 0; }

  /* Margin Top */
  .mt-lg-0 { margin-top: 0; }
  .mt-lg-20 { margin-top: 1.25rem; }  /* 20px */
  .mt-lg-44 { margin-top: 2.75rem; }  /* 44px */

  /* Margin Bottom */
  .mb-lg-0 { margin-bottom: 0; }
  .mb-lg-6 { margin-bottom: 0.375rem; } /* 6px */
  .mb-lg-15 { margin-bottom: 0.938rem; }  /* 15px */
  .mb-lg-16 { margin-bottom: 1rem; }  /* 16px */
  .mb-lg-20 { margin-bottom: 1.25rem; }  /* 20px */
  .mb-lg-25 { margin-bottom: 1.563rem; }  /* 25px */
  .mb-lg-40 { margin-bottom: 2.5rem; }  /* 40px */
  
  /* Margin Y (atas dan bawah) */
  .my-lg-10 { margin-top: 0.625rem; margin-bottom: 0.625rem; }  /* 10px */

  /* Margin X (kiri dan kanan) */
  .mx-lg-5 { margin-left: 0.313rem; margin-right: 0.313rem; }  /* 5px */

  /* Padding Keseluruhan */
  .p-lg-0 { padding: 0; }
  .p-lg-2 { padding: 0.125rem; }  /* 2px */
  .p-lg-10 { padding: 0.625rem; }  /* 10px */
  .p-lg-16 { padding: 1rem; }  /* 16px */
  
  /* Padding Top */
  .pt-lg-0  { padding-top: 0; }
  .pt-lg-10  { padding-top: 0.625rem; }  /* 10px */
  
  /* Padding Bottom */
  .pb-lg-0 { padding-bottom: 0; }
  .pb-lg-16 { padding-bottom: 1rem; }
  .pb-lg-20 { padding-bottom: 1.25rem; }  /* 20px */
  
  /* Padding Y (atas dan bawah) */
  .py-lg-0 { padding-top: 0; padding-bottom: 0; }
  .py-lg-2 { padding-top: 0.125rem; padding-bottom: 0.125rem; }  /* 2px */
  .py-lg-5 { padding-top: 0.313rem; padding-bottom: 0.313rem; }  /* 5px */
  .py-lg-20 { padding-top: 1.25rem; padding-bottom: 1.25rem; }  /* 20px */
  .py-lg-24 { padding-top: 1.5rem; padding-bottom: 1.5rem; }  /* 24px */

  /* Padding X (kiri dan kanan) */
  .px-lg-0  { padding-left: 0; padding-right: 0; }
  .px-lg-10 { padding-left: 0.625rem; padding-right: 0.625rem; }  /* 10px */
  .px-lg-16 { padding-left: 1rem; padding-right: 1rem; }  /* 16px */
  .px-lg-17 { padding-left: 1.063rem; padding-right: 1.063rem; }  /* 17px */
  
  /* Width */
  .w-lg-30 { width: 30px; }
  .w-lg-80 { width: 80px; }
  .w-lg-100 { width: 100px; }
  .w-lg-full { width: 100%; }
  
  /* Max Width */
  .maxw-lg-full { max-width: 100%; }

  /* Height */
  .h-lg-21 { height: 21px; }
  .h-lg-40 { height: 40px; }
  .h-lg-80 { height: 80px; }
  .h-lg-full { height: 100%; }
  
  /* Max Height */
  .maxh-lg-48 { max-height: 48px; }

  /* Display */
  .d-lg-n { display: none; }
  .d-lg-b { display: block; }
  .d-lg-f { display: flex; }
  .d-lg-g { display: grid; }

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

  /* Justify Content */
  .jc-lg-fe { justify-content: flex-end; }

  /* Flex */
  .f-lg-1 { flex: 1; }
  .f-lg-1-1-full { flex: 1 1 100%; }
  
  /* Flex Shrink */
  .fs-lg-0 { flex-shrink: 0; }

  /* Flex Direction */
  .fd-lg-c { flex-direction: column; }
  .fd-lg-cr { flex-direction: column-reverse; }
  .fd-lg-r { flex-direction: row; }
  
  /* Flex Grow */
  .fg-lg-1 { flex-grow: 1; }

  /* Gap */
  .gap-lg-0 { gap: 0; }
  .gap-lg-5 { gap: 0.313rem; }  /* 5px */
  .gap-lg-6 { gap: 0.375rem; }  /* 6px */
  .gap-lg-8 { gap: 0.5rem; }  /* 8px */
  .gap-lg-10 { gap: 0.625rem; }  /* 10px */
  .gap-lg-12 { gap: 0.75rem; }  /* 12px */

  /* Font Size */
  .font-lg-11 { font-size: 0.688rem; }  /* 11px */
  .font-lg-12 { font-size: 0.75rem; }  /* 12px */
  .font-lg-16 { font-size: 1rem; }  /* 16px */
  .font-lg-18 { font-size: 1.125rem; }  /* 18px */
  
  /* Font Weight */
  .fontw-lg-l { font-weight: 300; } /* Light */
  .fontw-lg-n { font-weight: 400; } /* Normal */
  .fontw-lg-m { font-weight: 500; } /* Medium */
  .fontw-lg-sb { font-weight: 600; } /* Semi-bold */
  .fontw-lg-b { font-weight: 700; } /* Bold */
  .fontw-lg-eb { font-weight: 800; } /* Extra bold */
  .fontw-lg-bl { font-weight: 900; } /* Black */
  
  /* Position */
  .pos-lg-s { position: static; }
  .pos-lg-r { position: relative; }
  .pos-lg-a { position: absolute; }
  
  /* Color */
  .c-lg-0066cc { color: #0066cc; }
  .c-lg-121212 { color: #121212; }
  
  /* Background Color */
  .bg-lg-fff { background: #fff; }
  
  /* Border width Top first-child */
  .btfc-lg-1:first-child { border-top: 1px solid; }
  
  /* Border Color first-child */
  .btfcc-lg-dddddd:first-child { border-color: #dddddd; }
  
  /* Border width top */
  .bt-lg-3 { border-top: 3px solid; }

  /* Border width Bottom */
  .bb-lg-1 { border-bottom: 1px solid; }

  /* Border Radius */
  .br-lg-0 { border-radius: 0; }
  .br-lg-5 { border-radius: 5px; }
  
  /* Border Color */
  .bc-lg-dddddd { border-color: #dddddd; }
  .bc-lg-0066cc { border-color: #0066cc; }
  
  /* Background Color */
  .bg-lg-fff { background: #fff; }

  /* Aspect Ratio */
  .ar-lg-a { aspect-ratio: auto; }

  /* Webkit Line Clamp (terpadu: mengatur display, box-orient, overflow, dan line-clamp) */
  .wlc-lg-1 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1; } /* 1 baris */
  .wlc-lg-2 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; } /* 2 baris */
  
  /* Order */
  .ord-lg-0 { order: 0; }
  .ord-lg-1 { order: 1; }
  .ord-lg-2 { order: 2; }
  .ord-lg-3 { order: 3; }
  
  /* Grid Template Columns */
  .gtc-lg-r1fr { grid-template-columns: repeat(1, 1fr); }
  .gtc-lg-r2fr { grid-template-columns: repeat(2, 1fr); }
  
  /* Text Align */
  .ta-lg-c { text-align: center; }
  
  /* Inset */
  .i-lg-0 { inset: 0; } /* inset: 0 */
  
  /* Z Index */
  .zi-lg-1 { z-index: 1; }

  /* Vertical Align */
  .va-lg-bl { vertical-align: baseline; } /* Penyelarasan baseline */
  .va-lg-t { vertical-align: top; } /* Penyelarasan atas */
  .va-lg-m { vertical-align: middle; } /* Penyelarasan tengah */
  .va-lg-b { vertical-align: bottom; } /* Penyelarasan bawah */
  .va-lg-tt { vertical-align: text-top; } /* Penyelarasan atas teks */
  .va-lg-tb { vertical-align: text-bottom; } /* Penyelarasan bawah teks */

}

@media (max-width: 768px) {
  /* Margin Top */
  .mt-md-0 { margin-top: 0; }
  .mt-md-2 { margin-top: 0.125rem; }  /* 2px */
  .mt-md-auto { margin-top: auto; }
  
  /* Margin Bottom */
  .mb-md-0 { margin-bottom: 0; }
  .mb-md-8 { margin-bottom: 0.5rem; }  /* 8px */
  .mb-md-15 { margin-bottom: 0.938rem; }  /* 15px */
  .mb-md-30 { margin-bottom: 1.875rem; }  /* 30px */
  
  /* Margin Left */
  .ml-md-0 { margin-left: 0; }
  .ml-md-5 { margin-left: 0.313rem; }  /* 5px */

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

  /* Margin X (kiri dan kanan) */
  .mx-md-0 { margin-left: 0; margin-right: 0; }
  
  /* Padding Keseluruhan */
  .p-md-16 { padding: 1rem; }  /* 16px */
  .p-md-24 { padding: 1.5rem; }  /* 24px */
  
  /* Padding Top */
  .pt-md-3 { padding-top: 0.188rem; }  /* 3px  */
  .pt-md-10 { padding-top: 0.625rem; }  /* 10px  */

  /* Padding Bottom */
  .pb-md-1 { padding-bottom: 0.063rem; }  /* 1px  */
  .pb-md-10 { padding-bottom: 0.625rem; }  /* 10px  */
  .pb-md-20 { padding-bottom: 1.25rem; }  /* 20px  */
  
  /* Padding Y (atas dan bawah) */
  .py-md-1 { padding-top: 0.063rem; padding-bottom: 0.063rem; }  /* 1px */
  .py-md-10 { padding-top: 0.625rem; padding-bottom: 0.625rem; }  /* 10px */
  .py-md-20 { padding-top: 1.25rem; padding-bottom: 1.25rem; }  /* 20px */
  .py-md-40 { padding-top: 2.5rem; padding-bottom: 2.5rem; }  /* 40px */
  .py-md-60 { padding-top: 3.75rem; padding-bottom: 3.75rem; }  /* 60px */
  
  /* Padding X (kiri dan kanan) */
  .px-md-3 { padding-left: 0.188rem; padding-right: 0.188rem; }  /* 3px */
  .px-md-6 { padding-left: 0.375rem; padding-right: 0.375rem; }  /* 6px */
  .px-md-10 { padding-left: 0.625rem; padding-right: 0.625rem; }  /* 10px */
  .px-md-16 { padding-left: 1rem; padding-right: 1rem; }  /* 16px */

  /* Width */
  .w-md-40 { width: 40px; }
  .w-md-60 { width: 60px; }
  .w-md-80 { width: 80px; }
  .w-md-100 { width: 100px; }
  .w-md-full { width: 100%; }
  
  /* Min Width */
  .minw-md-full { min-width: 100%; }
  
  /* Max Width */
  .maxw-md-full { max-width: 100%; }
  
  /* Height */
  .h-md-60 { height: 60px; }
  .h-md-80 { height: 80px; }
  .h-md-100 { height: 100px; }
  .h-md-full { height: 100%; }
  
  /* Min Height */
  .minh-md-120 { min-height: 120px; }
  .minh-md-170 { min-height: 170px; }
  
  /* Max Height */
  .maxh-md-170 { max-height: 170px; }
  .maxh-md-225 { max-height: 225px; }
  
  /* Display */
  .d-md-n { display: none; }
  .d-md-b { display: block; }
  .d-md-ib { display: inline-block; }
  .d-md-f { display: flex; }
  .d-md-if { display: inline-flex; }
  .d-md-g { display: grid; }

  /* Align Items */
  .ai-md-c { align-items: center; } 

  /* Flex Direction */
  .fd-md-c { flex-direction: column; }
  
  /* Text Align */
  .ta-md-c { text-align: center; }
  .ta-md-l { text-align: Left; }
  .ta-md-r { text-align: right; }

  /* Gap */
  .gap-md-10 { gap: 0.625rem; }  /* 10px */
  .gap-md-15 { gap: 0.938rem; }  /* 15px */
  
  /* Font Size */
  .font-md-10 { font-size: 0.625rem; } /* 10px */
  .font-md-12 { font-size: 0.75rem; }  /* 12px */
  .font-md-14 { font-size: 0.875rem; }  /* 14px */
  .font-md-16 { font-size: 1rem; }  /* 16px */
  .font-md-18 { font-size: 1.125rem; }  /* 18px */
  .font-md-20 { font-size: 1.25rem; }  /* 20px */
  .font-md-22 { font-size: 1.375rem; }  /* 22px */
  .font-md-24 { font-size: 1.5rem; }  /* 24px */
  .font-md-30 { font-size: 1.875rem; }  /* 30px */
  
  /* 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; }
  .jc-md-c { justify-content: center; }
  
  /* 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 */
  
  /* Grid Template Columns */
  .gtc-md-1fr { grid-template-columns: 1fr; }

  /* Grid Template Columns */
  .gtc-md-r1fr { grid-template-columns: repeat(1, 1fr); }
}