/**
 * RaportAI Design System — Buttons (FE-15 wave 1)
 *
 * Merkezi button component katmanı. Bootstrap 5 ile CO-EXIST eder; bypass
 * etmez. modern-theme.css'teki .btn / .btn-primary / .btn-success /
 * .btn-warning / .btn-danger / .btn-outline-primary base override'ları
 * korunur (!important taşıyorlar). Bu dosya:
 *   - EKSIK varyantları (sm/lg/icon, secondary, loading, focus-visible) ekler.
 *   - Semantic token (FE-07) kullanır → dark mode otomatik.
 *   - Accessibility-first: focus-visible ring, aria-label pattern,
 *     reduced-motion respect.
 *
 * Specificity stratejisi: !important KULLANMAZ. Bootstrap ve modern-theme
 * mevcut .btn-primary tonunu korur; bu dosya yeni davranış ekler.
 */

/* ────────────────────────────────────────────────────────────────────
 * Base — sadece eksik varsayılanları doldurur, modern-theme'i ezmez
 * ──────────────────────────────────────────────────────────────────── */
.btn {
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.4;
  /* font-weight, padding, border-radius zaten modern-theme'de !important
     ile var; burada tekrar yazmıyoruz. */
}

.btn:disabled,
.btn[aria-disabled="true"],
.btn.disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
}

/* A11y — klavye odağı için belirgin ring. Mouse click'te ring çıkmaz. */
.btn:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* Reduced motion: animasyon tercihi kapalıysa transform'u nötrle */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn:hover,
  .btn:active {
    transition: none !important;
    transform: none !important;
  }
}

/* ────────────────────────────────────────────────────────────────────
 * Semantic variants — modern-theme'de eksik olanları ekler
 * ──────────────────────────────────────────────────────────────────── */
.btn-secondary {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
}

.btn-secondary:hover {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

/* Ghost — sadece text, container yok; toolbar/secondary action için */
.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid transparent;
}

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

/* ────────────────────────────────────────────────────────────────────
 * Size modifiers — modern-theme'de yok, net-new
 * ──────────────────────────────────────────────────────────────────── */
.btn-sm {
  padding: 0.375rem 0.75rem !important;
  font-size: 0.875rem !important;
  border-radius: var(--radius-sm) !important;
}

.btn-lg {
  padding: 0.875rem 1.75rem !important;
  font-size: 1.0625rem !important;
  border-radius: var(--radius-md) !important;
}

/* ────────────────────────────────────────────────────────────────────
 * Icon-only — accessibility: aria-label ZORUNLU
 * Kullanım: <button class="btn btn-icon" aria-label="Sil"><i class="fa-trash"></i></button>
 * ──────────────────────────────────────────────────────────────────── */
.btn-icon {
  padding: 0.5rem !important;
  width: 2.5rem;
  height: 2.5rem;
  justify-content: center;
  border-radius: var(--radius) !important;
}

.btn-icon.btn-sm {
  width: 2rem;
  height: 2rem;
  padding: 0.375rem !important;
}

.btn-icon.btn-lg {
  width: 3rem;
  height: 3rem;
  padding: 0.75rem !important;
}

/* ────────────────────────────────────────────────────────────────────
 * Loading state — <button class="btn btn-primary" data-loading="true">
 * Text görünmez, spinner görünür. Tıklanamaz.
 * ──────────────────────────────────────────────────────────────────── */
.btn[data-loading="true"] {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn[data-loading="true"] > * {
  visibility: hidden;
}

.btn[data-loading="true"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin-top: -0.5rem;
  margin-left: -0.5rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  color: var(--text-inverse);
  animation: ds-btn-spin 0.6s linear infinite;
  visibility: visible;
}

.btn-secondary[data-loading="true"]::after,
.btn-ghost[data-loading="true"]::after,
.btn-outline-primary[data-loading="true"]::after {
  color: var(--text-primary);
}

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

@media (prefers-reduced-motion: reduce) {
  .btn[data-loading="true"]::after {
    animation-duration: 1.6s;
  }
}

/* ────────────────────────────────────────────────────────────────────
 * Block — full width helper
 * ──────────────────────────────────────────────────────────────────── */
.btn-block {
  display: flex;
  width: 100%;
  justify-content: center;
}