/* ============================================================
   Component: buttons — önizleme tema dili (turuncu/indigo)
   Efektler: hover'da hafif yükselme + gölge, basılı (active) efekt,
   turuncu odak halkası. Renkler variables.css'ten gelir.
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 10px var(--space-5); border-radius: var(--radius-sm);
  font-size: var(--fs-base); font-weight: 600; line-height: 1;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform var(--transition), box-shadow var(--transition),
              background var(--transition), border-color var(--transition), color var(--transition);
}
.btn:disabled { opacity: .6; cursor: default; box-shadow: none; transform: none; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-glow); }
.btn:active:not(:disabled) { transform: translateY(0); }
/* Buton ikonları: kaynak ne olursa olsun (A.icons 16×16 ya da width/height'siz
   ROW_ICO tam <svg>) tutarlı 16px. Daha özgül kurallar (ör. .ab-actions .btn svg)
   üstüne yazabilir. */
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Birincil — turuncu, gölgeli, hover'da yükselir */
.btn--primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover:not(:disabled) { background: var(--brand-light); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--primary:active:not(:disabled) { background: var(--brand-dark); box-shadow: var(--shadow-sm); }

/* İndigo (ikincil) */
.btn--navy { background: var(--navy); color: #fff; box-shadow: var(--shadow-sm); }
.btn--navy:hover:not(:disabled) { background: var(--navy-mid); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--navy:active:not(:disabled) { background: var(--navy-deep); box-shadow: var(--shadow-sm); }

/* Ghost — saydam, hover'da yumuşak zemin */
.btn--ghost { background: transparent; color: var(--text-muted); border-color: transparent; }
.btn--ghost:hover:not(:disabled) { background: var(--surface-alt); color: var(--text); }

/* Çizgili turuncu (outline) — hover'da açık turuncu zemin + turuncu çerçeve/yazı */
.btn--outline-brand { background: var(--surface); color: var(--brand); border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); }
.btn--outline-brand:hover:not(:disabled) { background: var(--brand-tint); border-color: var(--brand); }

/* Tehlike — kırmızı, hover'da yükselir */
.btn--danger { background: var(--red); color: #fff; box-shadow: var(--shadow-sm); }
.btn--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--red) 88%, #000); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--danger:active:not(:disabled) { box-shadow: var(--shadow-sm); }

/* Yumuşak tehlike — açık pembe zemin + kırmızı yazı */
.btn--danger-soft { background: var(--red-soft); color: var(--red); border-color: transparent; }
.btn--danger-soft:hover:not(:disabled) { background: color-mix(in srgb, var(--red) 16%, var(--surface)); }

/* Başarı — yeşil */
.btn--success { background: var(--green); color: #fff; box-shadow: var(--shadow-sm); }
.btn--success:hover:not(:disabled) { background: color-mix(in srgb, var(--green) 88%, #000); transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn--block { width: 100%; }
.btn--sm { padding: 7px var(--space-3); font-size: var(--fs-sm); }