/* ============================================================
   BEEZUI — Button  v1.0
   ============================================================ */

/* ── Base ── */
.bz-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  padding:         0 14px;
  height:          32px;
  font-family:     inherit;
  font-size:       13px;
  font-weight:     500;
  line-height:     1;
  white-space:     nowrap;
  text-decoration: none;
  cursor:          pointer;
  user-select:     none;
  border:          1px solid transparent;
  border-radius:   var(--bz-radius);
  outline:         none;
  position:        relative;
  overflow:        hidden;
  transition:
    background var(--bz-transition),
    border-color var(--bz-transition),
    color var(--bz-transition),
    box-shadow var(--bz-transition),
    opacity var(--bz-transition);
}

.bz-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(26,111,196,.30);
}

/* ── Sizes ── */
.bz-btn-xs { height: 22px; padding: 0  8px; font-size: 11px; gap: 4px; }
.bz-btn-sm { height: 26px; padding: 0 10px; font-size: 12px; gap: 5px; }
.bz-btn-lg { height: 38px; padding: 0 20px; font-size: 14px; gap: 7px; }
.bz-btn-xl { height: 44px; padding: 0 26px; font-size: 15px; gap: 8px; }

/* ── Block (full width) ── */
.bz-btn-block { display: flex; width: 100%; }

/* ── Shapes ── */
.bz-btn-pill   { border-radius: 999px; }
.bz-btn-square { border-radius: 0; }

/* Icon-only: eşit padding */
.bz-btn-icon-only         { padding: 0; width: 32px; }
.bz-btn-icon-only.bz-btn-xs { width: 22px; }
.bz-btn-icon-only.bz-btn-sm { width: 26px; }
.bz-btn-icon-only.bz-btn-lg { width: 38px; }
.bz-btn-icon-only.bz-btn-xl { width: 44px; }

/* ── Icon spans ── */
.bz-btn-icon-l,
.bz-btn-icon-r {
  display:     inline-flex;
  align-items: center;
  font-style:  normal;
  flex-shrink: 0;
  line-height: 1;
}

/* ── Spinner (loading state) ── */
.bz-btn-spinner {
  display:       inline-block;
  width:         13px;
  height:        13px;
  border:        2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  flex-shrink:   0;
  animation:     bz-btn-spin .65s linear infinite;
}
.bz-btn-sm .bz-btn-spinner,
.bz-btn-xs .bz-btn-spinner { width: 11px; height: 11px; }
.bz-btn-lg .bz-btn-spinner,
.bz-btn-xl .bz-btn-spinner { width: 15px; height: 15px; border-width: 2.5px; }

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

/* Loading state: düşük opaklık + tıklanamaz */
.bz-btn.bz-btn-loading {
  pointer-events: none;
  opacity: .75;
}

/* Disabled */
.bz-btn:disabled,
.bz-btn.bz-btn-disabled {
  opacity:        .5;
  cursor:         not-allowed;
  pointer-events: none;
}

/* ── Ripple ── */
.bz-btn-ripple {
  position:      absolute;
  border-radius: 50%;
  transform:     scale(0);
  background:    rgba(255,255,255,.35);
  pointer-events: none;
  animation:     bz-ripple .55s linear;
}
@keyframes bz-ripple {
  to { transform: scale(4); opacity: 0; }
}

/* ================================================================
   SOLID VARIANTS
================================================================ */

/* Primary */
.bz-btn-primary {
  background: var(--bz-primary);
  border-color: var(--bz-primary);
  color: #fff;
}
.bz-btn-primary:hover  { background: var(--bz-primary-dark); border-color: var(--bz-primary-dark); }
.bz-btn-primary:active { background: #0f4278; border-color: #0f4278; }

/* Secondary */
.bz-btn-secondary {
  background:   #64748b;
  border-color: #64748b;
  color: #fff;
}
.bz-btn-secondary:hover  { background: #475569; border-color: #475569; }
.bz-btn-secondary:active { background: #334155; border-color: #334155; }

/* Success */
.bz-btn-success {
  background:   #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.bz-btn-success:hover  { background: #15803d; border-color: #15803d; }
.bz-btn-success:active { background: #166534; border-color: #166534; }

/* Warning */
.bz-btn-warning {
  background:   #d97706;
  border-color: #d97706;
  color: #fff;
}
.bz-btn-warning:hover  { background: #b45309; border-color: #b45309; }
.bz-btn-warning:active { background: #92400e; border-color: #92400e; }

/* Danger */
.bz-btn-danger {
  background:   #dc2626;
  border-color: #dc2626;
  color: #fff;
}
.bz-btn-danger:hover  { background: #b91c1c; border-color: #b91c1c; }
.bz-btn-danger:active { background: #991b1b; border-color: #991b1b; }

/* Info */
.bz-btn-info {
  background:   #0891b2;
  border-color: #0891b2;
  color: #fff;
}
.bz-btn-info:hover  { background: #0e7490; border-color: #0e7490; }
.bz-btn-info:active { background: #155e75; border-color: #155e75; }

/* Dark */
.bz-btn-dark {
  background:   #1e2432;
  border-color: #1e2432;
  color: #fff;
}
.bz-btn-dark:hover  { background: #111827; border-color: #111827; }
.bz-btn-dark:active { background: #030712; border-color: #030712; }

/* Light */
.bz-btn-light {
  background:   #f1f5f9;
  border-color: #e2e8f0;
  color: var(--bz-text);
}
.bz-btn-light:hover  { background: #e2e8f0; border-color: #cbd5e1; }
.bz-btn-light:active { background: #cbd5e1; border-color: #94a3b8; }

/* ================================================================
   OUTLINE VARIANTS
================================================================ */

.bz-btn-outline-primary   { color: var(--bz-primary); border-color: var(--bz-primary);   background: transparent; }
.bz-btn-outline-secondary { color: #64748b;            border-color: #64748b;             background: transparent; }
.bz-btn-outline-success   { color: #16a34a;            border-color: #16a34a;             background: transparent; }
.bz-btn-outline-warning   { color: #d97706;            border-color: #d97706;             background: transparent; }
.bz-btn-outline-danger    { color: #dc2626;            border-color: #dc2626;             background: transparent; }
.bz-btn-outline-info      { color: #0891b2;            border-color: #0891b2;             background: transparent; }
.bz-btn-outline-dark      { color: #1e2432;            border-color: #1e2432;             background: transparent; }

.bz-btn-outline-primary:hover   { background: var(--bz-primary); color: #fff; }
.bz-btn-outline-secondary:hover { background: #64748b;            color: #fff; }
.bz-btn-outline-success:hover   { background: #16a34a;            color: #fff; }
.bz-btn-outline-warning:hover   { background: #d97706;            color: #fff; }
.bz-btn-outline-danger:hover    { background: #dc2626;            color: #fff; }
.bz-btn-outline-info:hover      { background: #0891b2;            color: #fff; }
.bz-btn-outline-dark:hover      { background: #1e2432;            color: #fff; }

.bz-btn-outline-primary:active   { background: var(--bz-primary-dark); border-color: var(--bz-primary-dark); color: #fff; }
.bz-btn-outline-secondary:active { background: #475569; border-color: #475569; color: #fff; }
.bz-btn-outline-success:active   { background: #15803d; border-color: #15803d; color: #fff; }
.bz-btn-outline-warning:active   { background: #b45309; border-color: #b45309; color: #fff; }
.bz-btn-outline-danger:active    { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.bz-btn-outline-info:active      { background: #0e7490; border-color: #0e7490; color: #fff; }
.bz-btn-outline-dark:active      { background: #111827; border-color: #111827; color: #fff; }

/* ================================================================
   GHOST & LINK
================================================================ */

.bz-btn-ghost {
  background:   transparent;
  border-color: var(--bz-border);
  color: var(--bz-text);
}
.bz-btn-ghost:hover  { background: var(--bz-border-light); border-color: var(--bz-border); }
.bz-btn-ghost:active { background: #e2e8f0; }

.bz-btn-link {
  background:   transparent;
  border-color: transparent;
  color: var(--bz-primary);
  padding-left: 4px;
  padding-right: 4px;
}
.bz-btn-link:hover  { color: var(--bz-primary-dark); text-decoration: underline; }
.bz-btn-link:active { color: #0f4278; }
.bz-btn-link:focus-visible { box-shadow: none; text-decoration: underline; }

/* ================================================================
   GLASS  (renkli / koyu arka plan üzerinde toolbar butonları)
================================================================ */

.bz-btn-glass {
  background:   rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.25);
  color:        rgba(255,255,255,.92);
  backdrop-filter: blur(4px);
}
.bz-btn-glass:hover  { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.4); color: #fff; }
.bz-btn-glass:active { background: rgba(255,255,255,.30); }
.bz-btn-glass:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,.35); }

/* ================================================================
   SOFT VARIANTS  (hafif arka plan)
================================================================ */

.bz-btn-soft-primary   { background: #e8f0fb; border-color: #c5d9f5; color: var(--bz-primary); }
.bz-btn-soft-success   { background: #dcfce7; border-color: #bbf7d0; color: #15803d; }
.bz-btn-soft-warning   { background: #fef3c7; border-color: #fde68a; color: #b45309; }
.bz-btn-soft-danger    { background: #fee2e2; border-color: #fecaca; color: #b91c1c; }
.bz-btn-soft-info      { background: #e0f2fe; border-color: #bae6fd; color: #0e7490; }
.bz-btn-soft-secondary { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }

.bz-btn-soft-primary:hover   { background: #d1e4f7; }
.bz-btn-soft-success:hover   { background: #bbf7d0; }
.bz-btn-soft-warning:hover   { background: #fde68a; }
.bz-btn-soft-danger:hover    { background: #fecaca; }
.bz-btn-soft-info:hover      { background: #bae6fd; }
.bz-btn-soft-secondary:hover { background: #e2e8f0; }

/* ================================================================
   TOGGLE & RADIO GROUP (active state)
================================================================ */

.bz-btn-toggle.bz-btn-active,
.bz-btn-toggle[aria-pressed="true"],
.bz-btn-in-radio.bz-btn-active,
.bz-btn-in-radio[aria-pressed="true"] {
  box-shadow: inset 0 2px 4px rgba(0,0,0,.15);
  filter: brightness(.88);
}

/* Outline butonlar seçilince dolup renk alır */
.bz-btn-in-radio.bz-btn-outline-primary.bz-btn-active   { background: var(--bz-primary); color: #fff; }
.bz-btn-in-radio.bz-btn-outline-secondary.bz-btn-active { background: #64748b;            color: #fff; }
.bz-btn-in-radio.bz-btn-outline-success.bz-btn-active   { background: #16a34a;            color: #fff; }
.bz-btn-in-radio.bz-btn-outline-warning.bz-btn-active   { background: #d97706;            color: #fff; }
.bz-btn-in-radio.bz-btn-outline-danger.bz-btn-active    { background: #dc2626;            color: #fff; }
.bz-btn-in-radio.bz-btn-outline-info.bz-btn-active      { background: #0891b2;            color: #fff; }
.bz-btn-in-radio.bz-btn-outline-dark.bz-btn-active      { background: #1e2432;            color: #fff; }

/* Ghost buton seçilince primary renk alır */
.bz-btn-in-radio.bz-btn-ghost.bz-btn-active {
  background: var(--bz-primary-light);
  border-color: var(--bz-primary);
  color: var(--bz-primary);
  filter: none;
}

/* ================================================================
   BUTTON GROUP
================================================================ */

.bz-btn-group {
  display:  inline-flex;
  gap: 0;
}

.bz-btn-group > .bz-btn {
  border-radius: 0;
}
.bz-btn-group > .bz-btn:first-child { border-radius: var(--bz-radius) 0 0 var(--bz-radius); }
.bz-btn-group > .bz-btn:last-child  { border-radius: 0 var(--bz-radius) var(--bz-radius) 0; }
.bz-btn-group > .bz-btn:not(:first-child) { margin-left: -1px; }
.bz-btn-group > .bz-btn:hover,
.bz-btn-group > .bz-btn:focus { z-index: 1; }

/* Pill group */
.bz-btn-group-pill > .bz-btn:first-child { border-radius: 999px 0 0 999px; }
.bz-btn-group-pill > .bz-btn:last-child  { border-radius: 0 999px 999px 0; }

/* Vertical group */
.bz-btn-group-v {
  display:        inline-flex;
  flex-direction: column;
  gap: 0;
}
.bz-btn-group-v > .bz-btn              { border-radius: 0; width: 100%; }
.bz-btn-group-v > .bz-btn:first-child  { border-radius: var(--bz-radius) var(--bz-radius) 0 0; }
.bz-btn-group-v > .bz-btn:last-child   { border-radius: 0 0 var(--bz-radius) var(--bz-radius); }
.bz-btn-group-v > .bz-btn:not(:first-child) { margin-top: -1px; }

/* ── Toolbar ── */
.bz-btn-toolbar {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
  align-items: center;
}

/* ── End-aligned group ── */
.bz-btn-group-end {
  display:         flex;
  justify-content: flex-end;
  gap:             8px;
}

/* ================================================================
   SPLIT BUTTON
================================================================ */

.bz-btn-split {
  display: inline-flex;
  position: relative;
}

.bz-btn-split > .bz-btn:first-child {
  border-radius: var(--bz-radius) 0 0 var(--bz-radius);
  border-right:  none;
}

.bz-btn-split > .bz-btn-split-caret {
  padding:       0 8px;
  border-radius: 0 var(--bz-radius) var(--bz-radius) 0;
  border-left:   1px solid rgba(255,255,255,.25);
  font-size:     10px;
}