:root {
    /* Gunakan nama yang deskriptif, misalnya --primary-color atau --brand-red */
    /* --brand-red: #ee2225; */
    --brand-red: #e0232a;
    --brand-red-dark: #c11b1e; /* Versi lebih gelap untuk hover */
    --brand-red-light: rgba(238, 34, 37, 0.1); /* Versi transparan untuk background */
    --brand-red-hover: #d11d21;
    --brand-red-active: #b5191d;
    --brand-red-shadow: rgba(238, 34, 37, 0.5);
}

.text-nyata {
    color: var(--brand-red);
}

.bg-nyata {
    background-color: var(--brand-red);
}

.btn-nyata {
    color: #fff;
    background-color: var(--brand-red);
    border-color: var(--brand-red);
}

/* State Hover */
.btn-nyata:hover,
.btn-nyata:focus,
.btn-nyata:active {
    color: #fff;
    background-color: var(--brand-red-hover);
    border-color: var(--brand-red-hover);
}

/* Disabled State */
.btn-nyata:disabled {
    opacity: 0.65;
    pointer-events: none;
}

.btn-outline-nyata {
    color: var(--brand-red);
    background-color: transparent;
    background-image: none;
    border: 1px solid var(--brand-red);
}

/* State Hover: Latar berubah jadi merah, teks jadi putih */
.btn-outline-nyata:hover,
.btn-outline-nyata:focus,
.btn-outline-nyata:active {
    color: #fff;
    background-color: var(--brand-red);
    border-color: var(--brand-red);
}
/* Disabled State */
.btn-outline-nyata:disabled {
    color: var(--brand-red);
    background-color: transparent;
    opacity: 0.5;
}