/* ============================================
   Nomagri E-Ticaret - Button Components
   Premium buton stilleri
   ============================================ */

/* ===== BASE BUTTON ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-8);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    border-radius: var(--radius-base);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    white-space: nowrap;
}

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

.btn svg {
    width: 18px;
    height: 18px;
}

/* ===== PRIMARY BUTTON ===== */
.btn--primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.btn--primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn--primary:active {
    transform: translateY(0);
}

/* ===== SECONDARY BUTTON ===== */
.btn--secondary {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn--secondary:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* ===== ACCENT BUTTON ===== */
.btn--accent {
    background-color: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
}

.btn--accent:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
}

/* ===== OUTLINE BUTTON ===== */
.btn--outline {
    background-color: transparent;
    color: var(--color-gray-700);
    border-color: var(--color-gray-300);
}

.btn--outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ===== GHOST BUTTON ===== */
.btn--ghost {
    background-color: transparent;
    color: var(--color-gray-700);
    border-color: transparent;
}

.btn--ghost:hover {
    background-color: var(--color-cream);
    color: var(--color-primary);
}

/* ===== WHITE BUTTON ===== */
.btn--white {
    background-color: var(--color-white);
    color: var(--color-primary);
    border-color: var(--color-white);
}

.btn--white:hover {
    background-color: var(--color-cream);
    border-color: var(--color-cream);
}

/* ===== DARK BUTTON ===== */
.btn--dark {
    background-color: var(--color-gray-900);
    color: var(--color-white);
    border-color: var(--color-gray-900);
}

.btn--dark:hover {
    background-color: var(--color-black);
}

/* ===== BUTTON SIZES ===== */
.btn--sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-xs);
}

.btn--lg {
    padding: var(--space-5) var(--space-10);
    font-size: var(--font-size-base);
}

.btn--xl {
    padding: var(--space-6) var(--space-12);
    font-size: var(--font-size-lg);
}

/* ===== FULL WIDTH ===== */
.btn--full {
    width: 100%;
}

/* ===== ROUNDED ===== */
.btn--rounded {
    border-radius: var(--radius-full);
}

/* ===== ICON BUTTON ===== */
.btn--icon {
    padding: var(--space-3);
    width: 48px;
    height: 48px;
}

.btn--icon.btn--sm {
    width: 36px;
    height: 36px;
    padding: var(--space-2);
}

.btn--icon.btn--lg {
    width: 56px;
    height: 56px;
}

/* ===== LOADING STATE ===== */
.btn--loading {
    position: relative;
    color: transparent !important;
}

.btn--loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: btn-spin 0.8s linear infinite;
}

.btn--primary.btn--loading::after {
    border-top-color: var(--color-white);
}

@keyframes btn-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ===== BUTTON GROUP ===== */
.btn-group {
    display: inline-flex;
}

.btn-group .btn {
    border-radius: 0;
}

.btn-group .btn:first-child {
    border-radius: var(--radius-base) 0 0 var(--radius-base);
}

.btn-group .btn:last-child {
    border-radius: 0 var(--radius-base) var(--radius-base) 0;
}

.btn-group .btn + .btn {
    margin-left: -2px;
}

/* ===== LINK BUTTON ===== */
.btn-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    transition: all var(--transition-fast);
}

.btn-link:hover {
    color: var(--color-primary-dark);
    gap: var(--space-3);
}

.btn-link svg {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-fast);
}

.btn-link:hover svg {
    transform: translateX(4px);
}

/* ===== ADD TO CART BUTTON ===== */
.btn--add-cart {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    position: relative;
    overflow: hidden;
}

.btn--add-cart::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left var(--transition-slow);
}

.btn--add-cart:hover::before {
    left: 100%;
}

.btn--add-cart:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* ===== WISHLIST BUTTON ===== */
.btn--wishlist {
    background-color: transparent;
    border: 1px solid var(--color-gray-300);
    color: var(--color-gray-500);
    padding: var(--space-3);
}

.btn--wishlist:hover {
    border-color: var(--color-error);
    color: var(--color-error);
}

.btn--wishlist.active {
    background-color: var(--color-error-light);
    border-color: var(--color-error);
    color: var(--color-error);
}

.btn--wishlist svg {
    width: 20px;
    height: 20px;
}