/* ================================================================
   DISKOMINFO UTILS — Pengganti Bytewave utility classes
   Agar semua halaman yang sudah ada tetap berfungsi
================================================================ */

/* ----------------------------------------------------------------
   TYPOGRAPHY
---------------------------------------------------------------- */
.heading1 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.5px; }
.heading2 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700; line-height: 1.18; letter-spacing: -0.3px; }
.heading3 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.2px; }
.heading4 { font-size: clamp(1.2rem, 2.5vw, 1.7rem); font-weight: 700; line-height: 1.3; }
.heading5 { font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 700; line-height: 1.4; }
.heading6 { font-size: clamp(1rem, 1.5vw, 1.1rem); font-weight: 700; line-height: 1.4; }

.body1  { font-size: 1.1rem; line-height: 1.75; }
.body2  { font-size: 1rem;   line-height: 1.75; }
.body3  { font-size: 0.9rem; line-height: 1.7; }

.caption1 { font-size: 0.875rem; line-height: 1.6; }
.caption2 { font-size: 0.75rem;  line-height: 1.5; }

.text-button       { font-size: 1rem;    font-weight: 600; line-height: 1.5; }
.text-button-small { font-size: 0.875rem; font-weight: 600; line-height: 1.5; }
.text-label        { font-size: 0.75rem; font-weight: 600; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.5px; }

/* ----------------------------------------------------------------
   FONT WEIGHTS
---------------------------------------------------------------- */
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }

/* ----------------------------------------------------------------
   FONT SIZES (px-based, as used in pages)
---------------------------------------------------------------- */
.fs-12 { font-size: 12px !important; }
.fs-14 { font-size: 14px !important; }
.fs-16 { font-size: 16px !important; }
.fs-18 { font-size: 18px !important; }
.fs-20 { font-size: 20px !important; }
.fs-24 { font-size: 24px !important; }
.fs-28 { font-size: 28px !important; }
.fs-32 { font-size: 32px !important; }
.fs-48 { font-size: 48px !important; }

/* ----------------------------------------------------------------
   FLEXBOX UTILITIES
---------------------------------------------------------------- */
.flex-center         { display: flex !important; align-items: center !important; justify-content: center !important; }
.flex-between        { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.flex-item-center    { display: flex !important; align-items: center !important; }
.flex-column         { display: flex !important; flex-direction: column !important; }
.flex-column-item-center { display: flex !important; flex-direction: column !important; align-items: center !important; }
.flex-wrap           { flex-wrap: wrap !important; }
.item-start          { align-items: flex-start !important; }

/* ----------------------------------------------------------------
   DISPLAY
---------------------------------------------------------------- */
.display-inline-block { display: inline-block !important; }
.display-none         { display: none !important; }

/* ----------------------------------------------------------------
   BORDER RADIUS
---------------------------------------------------------------- */
.bora-2  { border-radius: 2px !important; }
.bora-4  { border-radius: 4px !important; }
.bora-6  { border-radius: 6px !important; }
.bora-8  { border-radius: 8px !important; }
.bora-10 { border-radius: 10px !important; }
.bora-12 { border-radius: 12px !important; }
.bora-16 { border-radius: 16px !important; }
.bora-20 { border-radius: 20px !important; }
.bora-50 { border-radius: 50% !important; }
.bora-99 { border-radius: 99px !important; }

/* ----------------------------------------------------------------
   COLORS — tokens
---------------------------------------------------------------- */
:root {
    --clr-primary:      #B91C1C;
    --clr-primary-dark: #7F1D1D;
    --clr-gold:         #CA8A04;
    --clr-dark:         #0F172A;
    --clr-dark-2:       #1E293B;
    --clr-muted:        #64748B;
    --clr-border:       #E2E8F0;
    --clr-bg-light:     #F8FAFC;
    --clr-surface:      #F1F5F9;
    --clr-primary-bg:     rgba(185, 28, 28, 0.08);
    --clr-primary-darker: #991B1B;
    --clr-pale-red:       #FCA5A5;
}

/* ----------------------------------------------------------------
   COLOR CLASSES
---------------------------------------------------------------- */
.text-on-surface          { color: #0F172A !important; }
.text-on-surface-variant1 { color: #64748B !important; }
.text-on-surface-variant2 { color: #94A3B8 !important; }
.text-blue                { color: #B91C1C !important; }   /* override ke merah logo */

.bg-surface               { background-color: #F1F5F9 !important; }
.bg-on-surface            { background-color: #0F172A !important; }
.bg-blue-surface          { background-color: rgba(185,28,28,0.08) !important; }
.bg-grey                  { background-color: #F1F5F9 !important; }

.border-on-surface        { border: 1px solid #E2E8F0 !important; }
.border-line              { border-top: 1px solid #E2E8F0 !important; width: 100%; }

/* ----------------------------------------------------------------
   SIZE UTILITIES (px-based)
---------------------------------------------------------------- */
.w-25  { width: 25px !important; }
.w-32  { width: 32px !important; }
.w-40  { width: 40px !important; }
.w-48  { width: 48px !important; }
.w-50  { width: 50px !important; }
.h-25  { height: 25px !important; }
.h-32  { height: 32px !important; }
.h-40  { height: 40px !important; }
.h-48  { height: 48px !important; }
.h-50  { height: 50px !important; }

/* ----------------------------------------------------------------
   SPACING — PADDING TOP
   (Override Bootstrap's pt-1..5 dengan nilai pixel Bytewave)
---------------------------------------------------------------- */
.pt-4  { padding-top:  4px !important; }
.pt-8  { padding-top:  8px !important; }
.pt-12 { padding-top: 12px !important; }
.pt-16 { padding-top: 16px !important; }
.pt-20 { padding-top: 20px !important; }
.pt-24 { padding-top: 24px !important; }
.pt-28 { padding-top: 28px !important; }
.pt-32 { padding-top: 32px !important; }
.pt-36 { padding-top: 36px !important; }
.pt-40 { padding-top: 40px !important; }
.pt-48 { padding-top: 48px !important; }
.pt-60 { padding-top: 60px !important; }
.pt-64 { padding-top: 64px !important; }
.pt-80 { padding-top: 80px !important; }

/* ----------------------------------------------------------------
   SPACING — PADDING BOTTOM
---------------------------------------------------------------- */
.pb-4  { padding-bottom:  4px !important; }
.pb-8  { padding-bottom:  8px !important; }
.pb-12 { padding-bottom: 12px !important; }
.pb-16 { padding-bottom: 16px !important; }
.pb-20 { padding-bottom: 20px !important; }
.pb-24 { padding-bottom: 24px !important; }
.pb-28 { padding-bottom: 28px !important; }
.pb-32 { padding-bottom: 32px !important; }
.pb-36 { padding-bottom: 36px !important; }
.pb-40 { padding-bottom: 40px !important; }
.pb-48 { padding-bottom: 48px !important; }
.pb-60 { padding-bottom: 60px !important; }
.pb-64 { padding-bottom: 64px !important; }
.pb-80 { padding-bottom: 80px !important; }

/* ----------------------------------------------------------------
   SPACING — PADDING LEFT / RIGHT
---------------------------------------------------------------- */
.pl-8  { padding-left:  8px !important; }
.pl-10 { padding-left: 10px !important; }
.pl-12 { padding-left: 12px !important; }
.pl-16 { padding-left: 16px !important; }
.pl-20 { padding-left: 20px !important; }
.pl-24 { padding-left: 24px !important; }
.pl-28 { padding-left: 28px !important; }
.pl-36 { padding-left: 36px !important; }
.pl-40 { padding-left: 40px !important; }
.pl-45 { padding-left: 45px !important; }

.pr-8  { padding-right:  8px !important; }
.pr-10 { padding-right: 10px !important; }
.pr-12 { padding-right: 12px !important; }
.pr-16 { padding-right: 16px !important; }
.pr-20 { padding-right: 20px !important; }
.pr-24 { padding-right: 24px !important; }
.pr-28 { padding-right: 28px !important; }
.pr-36 { padding-right: 36px !important; }
.pr-40 { padding-right: 40px !important; }
.pr-45 { padding-right: 45px !important; }

/* ----------------------------------------------------------------
   SPACING — PADDING ALL SIDES
---------------------------------------------------------------- */
.p-12 { padding: 12px !important; }
.p-16 { padding: 16px !important; }
.p-20 { padding: 20px !important; }
.p-24 { padding: 24px !important; }
.p-32 { padding: 32px !important; }
.p-40 { padding: 40px !important; }
.p-80 { padding: 80px !important; }

/* ----------------------------------------------------------------
   SPACING — MARGIN TOP
---------------------------------------------------------------- */
.mt-4  { margin-top:  4px !important; }
.mt-8  { margin-top:  8px !important; }
.mt-12 { margin-top: 12px !important; }
.mt-16 { margin-top: 16px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-24 { margin-top: 24px !important; }
.mt-28 { margin-top: 28px !important; }
.mt-32 { margin-top: 32px !important; }
.mt-36 { margin-top: 36px !important; }
.mt-40 { margin-top: 40px !important; }
.mt-48 { margin-top: 48px !important; }
.mt-60 { margin-top: 60px !important; }
.mt-80 { margin-top: 80px !important; }

/* ----------------------------------------------------------------
   SPACING — MARGIN BOTTOM / LEFT / RIGHT
---------------------------------------------------------------- */
.mb-8  { margin-bottom:  8px !important; }
.mb-12 { margin-bottom: 12px !important; }
.mb-16 { margin-bottom: 16px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-32 { margin-bottom: 32px !important; }
.mb-40 { margin-bottom: 40px !important; }

.ml-30 { margin-left: 30px !important; }

/* ----------------------------------------------------------------
   SPACING — GAP
---------------------------------------------------------------- */
.gap-4  { gap:  4px !important; }
.gap-6  { gap:  6px !important; }
.gap-8  { gap:  8px !important; }
.gap-10 { gap: 10px !important; }
.gap-12 { gap: 12px !important; }
.gap-16 { gap: 16px !important; }
.gap-20 { gap: 20px !important; }
.gap-24 { gap: 24px !important; }
.gap-28 { gap: 28px !important; }
.gap-32 { gap: 32px !important; }
.gap-40 { gap: 40px !important; }
.gap-48 { gap: 48px !important; }

/* ----------------------------------------------------------------
   ROW GAPS (Bootstrap row-gap-*)
---------------------------------------------------------------- */
.row-gap-12 { row-gap: 12px !important; }
.row-gap-16 { row-gap: 16px !important; }
.row-gap-32 { row-gap: 32px !important; }
.row-gap-40 { row-gap: 40px !important; }

/* ----------------------------------------------------------------
   BOOTSTRAP COLUMN EXTENSION — 5-column grid
---------------------------------------------------------------- */
@media (min-width: 1200px) {
    .col-xl-2-4 { flex: 0 0 auto; width: 20%; }
}

/* ----------------------------------------------------------------
   RESPONSIVE SPACING OVERRIDES
---------------------------------------------------------------- */
@media (max-width: 992px) {
    .pr-col-lg-0 { padding-right: 0 !important; }
    .ml-col-lg-0 { margin-left:   0 !important; }
}

/* ----------------------------------------------------------------
   HOVER UTILITIES
---------------------------------------------------------------- */
.hover-underline { position: relative; text-decoration: none; }
.hover-underline:hover { text-decoration: underline; }

.hover-box-shadow { transition: box-shadow 0.3s ease; }
.hover-box-shadow:hover { box-shadow: 0 8px 32px rgba(15,23,42,0.12); }

.hover-button-blue:hover { background-color: #B91C1C !important; color: #fff !important; }

/* ----------------------------------------------------------------
   MISC
---------------------------------------------------------------- */
.border-none { border: none !important; }
.overflow-hidden { overflow: hidden !important; }
.pointer { cursor: pointer; }
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }