/* ===== Ortak UI Parçacıkları (buton, ikon-buton) =====
   Birden fazla component tarafından paylaşılır. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.btn:hover { opacity: .92; }

.btn-primary {
  background: var(--primary);
  color: #fff;
}
.btn-primary:hover { background: var(--primary-dark); opacity: 1; }

.btn-accent {
  background: var(--accent);
  color: #fff;
}
.btn-accent:hover { background: var(--accent-dark); opacity: 1; }

.btn-ghost {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.28);
  color: var(--text-on-dark);
  backdrop-filter: blur(4px);
}
.btn-ghost:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.5);
  color: #fff;
  opacity: 1;
}

.btn-outline {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
.btn-outline:hover { border-color: var(--primary); color: var(--primary); opacity: 1; }

.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-lg { padding: 13px 24px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-icon svg, .btn-icon .icon { width: 16px; height: 16px; flex-shrink: 0; }