/* Buttons System (GDS Vol 3 Bab 3-5, Vol 4 Bab 19) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-standard), 
                transform var(--duration-ultra-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard);
    border: 1px solid transparent;
}

.btn:active {
    transform: scale(0.98);
}

/* Button Sizes */
.btn-sm { height: 36px; padding: 0 var(--space-sm); font-size: var(--font-size-xs); }
.btn-md { height: 44px; padding: 0 var(--space-md); font-size: var(--font-size-sm); }
.btn-lg { height: 52px; padding: 0 var(--space-lg); font-size: var(--font-size-base); }

/* Button Variants */
.btn-primary { background-color: var(--color-accent); color: #FFFFFF; }
.btn-primary:hover { background-color: var(--color-accent-hover); }

.btn-secondary { background-color: var(--color-primary); color: var(--color-bg-body); }
.btn-secondary:hover { opacity: 0.9; }

.btn-outline { background-color: transparent; border-color: var(--color-primary); color: var(--color-primary); }
.btn-outline:hover { background-color: var(--color-primary); color: var(--color-bg-body); }

.btn-ghost { background-color: transparent; color: var(--color-primary); }
.btn-ghost:hover { background-color: var(--color-bg-surface); }

.btn-link { background: none; border: none; color: var(--color-accent); padding: 0; text-decoration: underline; }

.btn:disabled, .btn.disabled {
    background-color: var(--color-border) !important;
    color: var(--color-text-muted) !important;
    cursor: not-allowed;
    transform: none !important;
}

/* Form Inputs (GDS Vol 3 Bab 7-13) */
.input-text, .textarea-field {
    width: 100%;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    background-color: var(--color-bg-body);
    color: var(--color-text-main);
    font-family: var(--font-sans);
    transition: border-color var(--duration-fast) var(--ease-standard);
}

.input-text:focus, .textarea-field:focus {
    border-color: var(--color-focus-outline);
    outline: none;
}

.checkbox-custom, .radio-custom {
    width: 20px;
    height: 20px;
    accent-color: var(--color-accent);
}