/**
 * Utilities Styles - UPA TIK UNTAD
 * Fokus: Helper Classes untuk Spacing, Text, & Layout
 */

:root {
    --primary-color: #004a99;
    --primary-dark: #003366;
    --secondary-color: #f39c12;
    --text-dark: #333;
    --text-light: #666;
    --bg-light: #f4f7f6;
    --white: #ffffff;
    --shadow-light: 0 4px 15px rgba(0,0,0,0.05);
    --shadow-heavy: 0 10px 30px rgba(0,0,0,0.1);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.text-center { text-align: center; }
.header-flex { display: flex; justify-content: space-between; align-items: center; }


/* --- Text Utilities --- */
.text-center  { text-align: center !important; }
.text-right   { text-align: right !important; }
.text-left    { text-align: left !important; }
.text-white   { color: #ffffff !important; }
.text-primary { color: var(--primary-color) !important; }
.text-secondary { color: var(--secondary-color) !important; }
.font-bold    { font-weight: 700; }

/* --- Spacing (Margin) --- */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 10px !important; }
.mt-2 { margin-top: 20px !important; }
.mt-3 { margin-top: 30px !important; }
.mt-4 { margin-top: 40px !important; }
.mt-5 { margin-top: 60px !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 10px !important; }
.mb-2 { margin-bottom: 20px !important; }
.mb-3 { margin-bottom: 30px !important; }
.mb-4 { margin-bottom: 40px !important; }
.mb-5 { margin-bottom: 60px !important; }

/* --- Spacing (Padding) --- */
.pt-5 { padding-top: 60px !important; }
.pb-5 { padding-bottom: 60px !important; }
.py-2 { padding-top: 20px !important; padding-bottom: 20px !important; }
.py-5 { padding-top: 60px !important; padding-bottom: 60px !important; }

/* --- Layout --- */
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }
.gap-10 { gap: 10px; }
.gap-20 { gap: 20px; }

/* --- Visibility --- */
.hide-mobile { display: block; } /* Default desktop: terlihat */

/* --- Special Section Spacing --- */
.section-padding {
    padding: 80px 0;
}