/* ========================================
   Kuningan Hub — Button System
   Satu sistem tombol konsisten dipakai di semua halaman, menggantikan
   .btn-primary-solid / .btn-outline-neutral / .btn-cta-light yang sebelumnya
   didefinisikan terpisah-pisah dan terasa belum matang.
   ======================================== */

.btn-kh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.8rem 1.75rem;
    border-radius: var(--radius-sm, 8px);
    font-family: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1;
    border: 1.5px solid transparent;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--transition-fast, 0.15s ease),
                border-color var(--transition-fast, 0.15s ease),
                color var(--transition-fast, 0.15s ease),
                box-shadow var(--transition-fast, 0.15s ease),
                transform var(--transition-fast, 0.15s ease);
}

.btn-kh i,
.btn-kh svg {
    font-size: 0.95em;
}

.btn-kh:focus-visible {
    outline: 2px solid var(--brand-primary, #0093E9);
    outline-offset: 2px;
}

.btn-kh:active {
    transform: translateY(0) !important;
}

/* --- Size variants --- */
.btn-kh-lg {
    padding: 0.95rem 2.1rem;
    font-size: 1rem;
    border-radius: var(--radius-md, 12px);
}

.btn-kh-sm {
    padding: 0.55rem 1.15rem;
    font-size: 0.85rem;
}

.btn-kh-block {
    width: 100%;
}

/* --- Primary: solid brand color, elevasi halus saat hover --- */
.btn-kh-primary {
    background: var(--brand-primary, #0093E9);
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 147, 233, 0.15);
}

.btn-kh-primary:hover {
    background: #0079c2;
    color: #fff;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* --- Outline: netral, dipakai untuk aksi sekunder --- */
.btn-kh-outline {
    background: var(--bg-surface, #fff);
    border-color: var(--border-subtle, #E5E8EC);
    color: var(--text-primary, #14181F);
}

.btn-kh-outline:hover {
    border-color: var(--brand-primary, #0093E9);
    color: var(--brand-primary, #0093E9);
    background: rgba(0, 147, 233, 0.04);
}

/* --- Ghost: tanpa border, dipakai di dalam card/modal yang sudah punya kontainer --- */
.btn-kh-ghost {
    background: transparent;
    color: var(--text-secondary, #4B5563);
}

.btn-kh-ghost:hover {
    background: var(--bg-surface-alt, #F2F4F7);
    color: var(--text-primary, #14181F);
}

/* --- Light: dipakai di atas background gradient/warna solid (mis. CTA banner) --- */
.btn-kh-light {
    background: #fff;
    color: var(--brand-primary, #0093E9);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.btn-kh-light:hover {
    color: var(--brand-primary, #0093E9);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* --- Danger: aksi merusak (hapus, keluar) --- */
.btn-kh-danger {
    background: var(--bg-surface, #fff);
    border-color: var(--border-subtle, #E5E8EC);
    color: var(--danger-color, #D14343);
}

.btn-kh-danger:hover {
    background: rgba(209, 67, 67, 0.06);
    border-color: var(--danger-color, #D14343);
}

.btn-kh:disabled,
.btn-kh.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* --- Icon-only round/square button (dipakai di chat input, modal close, dsb) --- */
.btn-kh-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm, 8px);
    border: 1.5px solid transparent;
    background: var(--brand-primary, #0093E9);
    color: #fff;
    cursor: pointer;
    transition: var(--transition-fast, 0.15s ease);
    flex-shrink: 0;
}

.btn-kh-icon:hover {
    background: #0079c2;
    box-shadow: var(--shadow-sm);
}

.btn-kh-icon:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}