:root {
    --primary-color: #c5a847;
    /* Warna emas khas logo MCS */
    --primary-hover: #aa8f36;
    --bg-body: #f8fafc;
    --bg-card: #ffffff;
    --text-main: #334155;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    --focus-ring: rgba(197, 168, 71, 0.2);
    --radius: 10px;
}

.auth .register-half-bg {
    background-size: auto;
    background-position-y: top;
    background-position-x: right;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.card {
    padding: 1rem !important;
    border-radius: 0.45rem !important;
}

.reg-form {
    overflow-y: scroll;
}

.form-control {
    padding: 0.75rem 1rem !important;
}

.form-control,
.select2-container--default .select2-selection--single {
    border-color: #d7d5d5 !important;
    border-radius: 0.45rem !important;
    font-size: 1.05rem !important;
}

.top-25 {
    top: 25% !important;
}

/**
* Tabs
*/
/* Container utama untuk membungkus semua tab */

/* 1. Container Utama (ul.nav-tabs) */
ul.nav-tabs#myTab {
    display: flex;
    background-color: #e2e8f0;
    /* Warna latar belakang abu-abu lembut */
    border-radius: 50px;
    /* Membuat bentuk kapsul/pill */
    gap: 8px;
    /* Jarak antar tombol */
    border-bottom: none;
}

/* 2. Pembungkus List (li.nav-item) */
ul.nav-tabs#myTab .nav-item {
    flex: 1;
    /* Membuat semua tab membagi rata lebar container */
    margin-bottom: 0;
    /* Menghilangkan margin bawaan Bootstrap */
}

/* 3. Tombol Link (a.nav-link) - Kondisi Normal/Pasif */
ul.nav-tabs#myTab .nav-link {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 20px;
    color: #64748b;
    /* Warna teks abu-abu saat pasif */
    background: transparent;
    /* Menghilangkan warna latar bawaan */
    border: none !important;
    /* Menghilangkan border bawaan Bootstrap */
    border-radius: 50px;
    /* Mengikuti bentuk melingkar */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

/* 4. Efek Hover (Saat Kursor Diarahkan ke Tab Pasif) */
ul.nav-tabs#myTab .nav-link:hover {
    color: #334155;
    background-color: rgba(255, 255, 255, 0.5);
    /* Background putih transparan */
}

/* 5. Kondisi AKTIF (a.nav-link.active) - Seperti tab emas di gambar */
ul.nav-tabs#myTab .nav-link.active {
    color: #ffffff !important;
    /* Warna teks putih */
    background: linear-gradient(135deg, #c5a847, #aa8f36) !important;
    /* Gradasi emas MCS */
    box-shadow: 0 4px 10px rgba(197, 168, 71, 0.35) !important;
    /* Efek bayangan emas */
}