/* ==========================================================================
   COMPONENT: BUTTON (Extended)
   Suite tasarım diline uyumlu genişletilmiş buton stilleri.
   app.css'deki .btn temel stillerini tamamlar.
   ========================================================================== */

/* --- Dark Button --- */
.btn-dark {
    background-color: var(--color-text);
    color: var(--color-bg);
    border-color: var(--color-text);
}

.btn-dark:hover:not(:disabled) {
    opacity: 0.88;
    transform: translateY(-1px);
}

/* --- White Button --- */
.btn-white {
    background-color: #fff;
    color: var(--color-text);
    border-color: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.btn-white:hover:not(:disabled) {
    background-color: var(--color-surface);
    transform: translateY(-1px);
}

/* --- Brand Outline (secondary with brand border) --- */
.btn-brand-outline {
    background: transparent;
    color: var(--color-brand);
    border: 1.5px solid var(--color-brand);
}

.btn-brand-outline:hover:not(:disabled) {
    background: var(--color-brand-subtle);
}

/* --- Size Variants --- */
.btn--sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    min-height: 36px;
    border-radius: var(--radius-sm);
}

.btn--lg {
    padding: var(--space-4) var(--space-8);
    font-size: 15px;
    min-height: 52px;
    border-radius: var(--radius-lg);
}

.btn--xl {
    padding: var(--space-5) var(--space-10);
    font-size: var(--text-base);
    min-height: 56px;
    border-radius: var(--radius-lg);
}

/* --- Full Width --- */
.btn--full {
    width: 100%;
}

/* --- Icon Button --- */
.btn--icon {
    padding: var(--space-2);
    min-height: auto;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
}

/* --- Button with Icon Gap --- */
.btn > svg,
.btn > .icon {
    flex-shrink: 0;
}

/* --- Loading State --- */
.btn.is-loading {
    pointer-events: none;
    opacity: 0.7;
}

.btn.is-loading::after {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: var(--radius-full);
    animation: spin var(--duration-slow) linear infinite;
    margin-left: var(--space-2);
}