/**
 * CMC düğme sistemi — Bootstrap benzeri katmanlı sınıf yapısı
 *
 * Temel:     .cmc-buton
 * Renk:      .cmc-buton--birincil | --ikincil | --basari | --tehlike | --uyari | --bilgi | --acik | --koyu
 * Çizgili:   .cmc-buton--cizgili-birincil | … (outline)
 * Yumuşak:   .cmc-buton--yumusak-birincil | … (soft / tinted)
 * Stil:      .cmc-buton--ghost | --metin | --baglanti
 * Boyut:     .cmc-buton--kucuk | --buyuk
 * Düzen:     .cmc-buton--tam | --kare
 * Grup:      .cmc-buton-grup | .cmc-buton-grup--dikey | --bosluklu
 */

:root {
  --cmc-bilgi: #0ea5e9;
  --cmc-bilgi-hover: #0284c7;
  --cmc-bilgi-yumusak: color-mix(in srgb, #0ea5e9 12%, transparent);
  --cmc-buton-ikincil-bg: color-mix(in srgb, var(--cmc-metin-zayif) 10%, var(--cmc-yuzey));
  --cmc-buton-ikincil-bg-hover: color-mix(in srgb, var(--cmc-metin-zayif) 16%, var(--cmc-yuzey));
  --cmc-buton-ikincil-kenar: color-mix(in srgb, var(--cmc-metin-zayif) 22%, var(--cmc-kenar));
  --cmc-buton-koyu-bg: color-mix(in srgb, var(--cmc-metin) 88%, #000);
  --cmc-buton-koyu-bg-hover: var(--cmc-metin);
  --cmc-buton-beyaz: #fff;
}

/* ── Temel ─────────────────────────────────────────────────────────────── */

.cmc-buton,
a.cmc-buton {
  --cmc-buton-bg: transparent;
  --cmc-buton-bg-hover: transparent;
  --cmc-buton-bg-active: transparent;
  --cmc-buton-renk: var(--cmc-metin);
  --cmc-buton-renk-hover: var(--cmc-buton-renk);
  --cmc-buton-kenar: transparent;
  --cmc-buton-kenar-hover: var(--cmc-buton-kenar);
  --cmc-buton-golge: none;
  --cmc-buton-golge-hover: var(--cmc-golge-sm);
  --cmc-buton-odak: var(--cmc-odak-halka);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cmc-space-2);
  min-height: var(--cmc-dokunma-min);
  padding: 0 var(--cmc-space-4);
  border: 1px solid var(--cmc-buton-kenar);
  border-radius: var(--cmc-radius-md);
  background: var(--cmc-buton-bg);
  color: var(--cmc-buton-renk);
  box-shadow: var(--cmc-buton-golge);
  font: inherit;
  font-size: var(--cmc-font-sm);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  transition:
    background var(--cmc-gecis-hizli),
    border-color var(--cmc-gecis-hizli),
    color var(--cmc-gecis-hizli),
    box-shadow var(--cmc-gecis-hizli),
    transform var(--cmc-gecis-hizli);
}

button.cmc-buton {
  appearance: none;
}

.cmc-buton:hover:not(:disabled):not([aria-disabled='true']) {
  background: var(--cmc-buton-bg-hover);
  border-color: var(--cmc-buton-kenar-hover);
  color: var(--cmc-buton-renk-hover);
  box-shadow: var(--cmc-buton-golge-hover);
}

.cmc-buton:active:not(:disabled):not([aria-disabled='true']) {
  background: var(--cmc-buton-bg-active, var(--cmc-buton-bg-hover));
  transform: translateY(1px);
}

.cmc-buton:focus-visible {
  outline: none;
  box-shadow: var(--cmc-buton-odak);
}

.cmc-buton:disabled,
.cmc-buton[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

.cmc-buton--aktif,
.cmc-buton.cmc-buton--aktif {
  background: var(--cmc-buton-bg-hover);
  border-color: var(--cmc-buton-kenar-hover);
  color: var(--cmc-buton-renk-hover);
}

/* Sportif mikro-etkileşim — dolu varyantlar hover'da hafifçe yükselir */
.cmc-buton--birincil:hover:not(:disabled):not([aria-disabled='true']),
.cmc-buton--basari:hover:not(:disabled):not([aria-disabled='true']),
.cmc-buton--tehlike:hover:not(:disabled):not([aria-disabled='true']),
.cmc-buton--uyari:hover:not(:disabled):not([aria-disabled='true']),
.cmc-buton--bilgi:hover:not(:disabled):not([aria-disabled='true']),
.cmc-buton--koyu:hover:not(:disabled):not([aria-disabled='true']) {
  transform: translateY(-2px);
}

.cmc-buton--birincil:active:not(:disabled):not([aria-disabled='true']),
.cmc-buton--basari:active:not(:disabled):not([aria-disabled='true']),
.cmc-buton--tehlike:active:not(:disabled):not([aria-disabled='true']),
.cmc-buton--uyari:active:not(:disabled):not([aria-disabled='true']),
.cmc-buton--bilgi:active:not(:disabled):not([aria-disabled='true']),
.cmc-buton--koyu:active:not(:disabled):not([aria-disabled='true']) {
  transform: translateY(0) scale(0.98);
}

/* ── Dolu renk varyantları (btn-primary vb.) ───────────────────────────── */

.cmc-buton--birincil {
  --cmc-buton-bg: var(--cmc-accent-gradyan);
  --cmc-buton-bg-hover: var(--cmc-accent-gradyan);
  --cmc-buton-bg-active: var(--cmc-accent-gradyan);
  --cmc-buton-renk: var(--cmc-buton-beyaz);
  --cmc-buton-renk-hover: var(--cmc-buton-beyaz);
  --cmc-buton-kenar: transparent;
  --cmc-buton-kenar-hover: transparent;
  --cmc-buton-golge: 0 2px 8px color-mix(in srgb, var(--cmc-accent) 28%, transparent);
  --cmc-buton-golge-hover: 0 8px 20px color-mix(in srgb, var(--cmc-accent) 38%, transparent);
}

.cmc-buton--ikincil {
  --cmc-buton-bg: var(--cmc-buton-ikincil-bg);
  --cmc-buton-bg-hover: var(--cmc-buton-ikincil-bg-hover);
  --cmc-buton-renk: var(--cmc-metin);
  --cmc-buton-kenar: var(--cmc-buton-ikincil-kenar);
  --cmc-buton-golge: none;
}

.cmc-buton--basari {
  --cmc-buton-bg: var(--cmc-basari);
  --cmc-buton-bg-hover: color-mix(in srgb, var(--cmc-basari) 85%, #000);
  --cmc-buton-renk: var(--cmc-buton-beyaz);
  --cmc-buton-renk-hover: var(--cmc-buton-beyaz);
  --cmc-buton-kenar: var(--cmc-basari);
  --cmc-buton-kenar-hover: color-mix(in srgb, var(--cmc-basari) 85%, #000);
  --cmc-buton-golge: var(--cmc-golge-sm);
}

.cmc-buton--tehlike {
  --cmc-buton-bg: var(--cmc-hata);
  --cmc-buton-bg-hover: color-mix(in srgb, var(--cmc-hata) 85%, #000);
  --cmc-buton-renk: var(--cmc-buton-beyaz);
  --cmc-buton-renk-hover: var(--cmc-buton-beyaz);
  --cmc-buton-kenar: var(--cmc-hata);
  --cmc-buton-kenar-hover: color-mix(in srgb, var(--cmc-hata) 85%, #000);
  --cmc-buton-golge: var(--cmc-golge-sm);
}

.cmc-buton--uyari {
  --cmc-buton-bg: var(--cmc-uyari);
  --cmc-buton-bg-hover: color-mix(in srgb, var(--cmc-uyari) 85%, #000);
  --cmc-buton-renk: var(--cmc-buton-beyaz);
  --cmc-buton-renk-hover: var(--cmc-buton-beyaz);
  --cmc-buton-kenar: var(--cmc-uyari);
  --cmc-buton-kenar-hover: color-mix(in srgb, var(--cmc-uyari) 85%, #000);
  --cmc-buton-golge: var(--cmc-golge-sm);
}

.cmc-buton--bilgi {
  --cmc-buton-bg: var(--cmc-bilgi);
  --cmc-buton-bg-hover: var(--cmc-bilgi-hover);
  --cmc-buton-renk: var(--cmc-buton-beyaz);
  --cmc-buton-renk-hover: var(--cmc-buton-beyaz);
  --cmc-buton-kenar: var(--cmc-bilgi);
  --cmc-buton-kenar-hover: var(--cmc-bilgi-hover);
  --cmc-buton-golge: var(--cmc-golge-sm);
}

.cmc-buton--acik {
  --cmc-buton-bg: var(--cmc-yuzey-ust);
  --cmc-buton-bg-hover: var(--cmc-yuzey-zemin);
  --cmc-buton-renk: var(--cmc-metin);
  --cmc-buton-kenar: var(--cmc-kenar);
  --cmc-buton-golge: none;
}

.cmc-buton--koyu {
  --cmc-buton-bg: var(--cmc-buton-koyu-bg);
  --cmc-buton-bg-hover: var(--cmc-buton-koyu-bg-hover);
  --cmc-buton-renk: var(--cmc-yuzey-ust);
  --cmc-buton-renk-hover: var(--cmc-yuzey-ust);
  --cmc-buton-kenar: var(--cmc-buton-koyu-bg);
  --cmc-buton-kenar-hover: var(--cmc-buton-koyu-bg-hover);
  --cmc-buton-golge: var(--cmc-golge-sm);
}

/* ── Çizgili / outline varyantları ─────────────────────────────────────── */

.cmc-buton--cizgili-birincil {
  --cmc-buton-bg: transparent;
  --cmc-buton-bg-hover: var(--cmc-accent);
  --cmc-buton-renk: var(--cmc-accent);
  --cmc-buton-renk-hover: var(--cmc-buton-beyaz);
  --cmc-buton-kenar: var(--cmc-accent);
  --cmc-buton-kenar-hover: var(--cmc-accent);
}

.cmc-buton--cizgili-ikincil {
  --cmc-buton-bg: transparent;
  --cmc-buton-bg-hover: var(--cmc-buton-ikincil-bg);
  --cmc-buton-renk: var(--cmc-metin-zayif);
  --cmc-buton-renk-hover: var(--cmc-metin);
  --cmc-buton-kenar: var(--cmc-buton-ikincil-kenar);
}

.cmc-buton--cizgili-basari {
  --cmc-buton-bg: transparent;
  --cmc-buton-bg-hover: var(--cmc-basari);
  --cmc-buton-renk: var(--cmc-basari);
  --cmc-buton-renk-hover: var(--cmc-buton-beyaz);
  --cmc-buton-kenar: var(--cmc-basari);
}

.cmc-buton--cizgili-tehlike {
  --cmc-buton-bg: transparent;
  --cmc-buton-bg-hover: var(--cmc-hata);
  --cmc-buton-renk: var(--cmc-hata);
  --cmc-buton-renk-hover: var(--cmc-buton-beyaz);
  --cmc-buton-kenar: var(--cmc-hata);
}

.cmc-buton--cizgili-uyari {
  --cmc-buton-bg: transparent;
  --cmc-buton-bg-hover: var(--cmc-uyari);
  --cmc-buton-renk: var(--cmc-uyari);
  --cmc-buton-renk-hover: var(--cmc-buton-beyaz);
  --cmc-buton-kenar: var(--cmc-uyari);
}

.cmc-buton--cizgili-bilgi {
  --cmc-buton-bg: transparent;
  --cmc-buton-bg-hover: var(--cmc-bilgi);
  --cmc-buton-renk: var(--cmc-bilgi);
  --cmc-buton-renk-hover: var(--cmc-buton-beyaz);
  --cmc-buton-kenar: var(--cmc-bilgi);
}

/* ── Yumuşak / soft varyantlar (tinted arka plan) ──────────────────────── */

.cmc-buton--yumusak-birincil {
  --cmc-buton-bg: var(--cmc-accent-yumusak);
  --cmc-buton-bg-hover: color-mix(in srgb, var(--cmc-accent) 18%, var(--cmc-yuzey));
  --cmc-buton-renk: var(--cmc-accent);
  --cmc-buton-kenar: color-mix(in srgb, var(--cmc-accent) 35%, var(--cmc-kenar));
  --cmc-buton-kenar-hover: color-mix(in srgb, var(--cmc-accent) 50%, var(--cmc-kenar));
}

.cmc-buton--yumusak-ikincil {
  --cmc-buton-bg: var(--cmc-buton-ikincil-bg);
  --cmc-buton-bg-hover: var(--cmc-buton-ikincil-bg-hover);
  --cmc-buton-renk: var(--cmc-metin-zayif);
  --cmc-buton-renk-hover: var(--cmc-metin);
  --cmc-buton-kenar: var(--cmc-buton-ikincil-kenar);
}

.cmc-buton--yumusak {
  --cmc-buton-bg: var(--cmc-buton-ikincil-bg);
  --cmc-buton-bg-hover: var(--cmc-buton-ikincil-bg-hover);
  --cmc-buton-renk: var(--cmc-metin);
  --cmc-buton-renk-hover: var(--cmc-metin);
  --cmc-buton-kenar: var(--cmc-buton-ikincil-kenar);
  --cmc-buton-kenar-hover: color-mix(in srgb, var(--cmc-accent) 35%, var(--cmc-kenar));
}

.cmc-buton--yumusak-basari {
  --cmc-buton-bg: color-mix(in srgb, var(--cmc-basari) 14%, var(--cmc-yuzey));
  --cmc-buton-bg-hover: color-mix(in srgb, var(--cmc-basari) 22%, var(--cmc-yuzey));
  --cmc-buton-renk: var(--cmc-basari);
  --cmc-buton-kenar: color-mix(in srgb, var(--cmc-basari) 40%, var(--cmc-kenar));
  --cmc-buton-kenar-hover: color-mix(in srgb, var(--cmc-basari) 55%, var(--cmc-kenar));
}

.cmc-buton--yumusak-tehlike {
  --cmc-buton-bg: color-mix(in srgb, var(--cmc-hata) 12%, var(--cmc-yuzey));
  --cmc-buton-bg-hover: color-mix(in srgb, var(--cmc-hata) 20%, var(--cmc-yuzey));
  --cmc-buton-renk: var(--cmc-hata);
  --cmc-buton-kenar: color-mix(in srgb, var(--cmc-hata) 35%, var(--cmc-kenar));
}

.cmc-buton--yumusak-uyari {
  --cmc-buton-bg: color-mix(in srgb, var(--cmc-uyari) 14%, var(--cmc-yuzey));
  --cmc-buton-bg-hover: color-mix(in srgb, var(--cmc-uyari) 22%, var(--cmc-yuzey));
  --cmc-buton-renk: var(--cmc-uyari);
  --cmc-buton-kenar: color-mix(in srgb, var(--cmc-uyari) 40%, var(--cmc-kenar));
}

.cmc-buton--yumusak-bilgi {
  --cmc-buton-bg: var(--cmc-bilgi-yumusak);
  --cmc-buton-bg-hover: color-mix(in srgb, var(--cmc-bilgi) 18%, var(--cmc-yuzey));
  --cmc-buton-renk: var(--cmc-bilgi);
  --cmc-buton-kenar: color-mix(in srgb, var(--cmc-bilgi) 35%, var(--cmc-kenar));
}

/* ── Ghost, metin, bağlantı ────────────────────────────────────────────── */

.cmc-buton--ghost {
  --cmc-buton-bg: transparent;
  --cmc-buton-bg-hover: color-mix(in srgb, var(--cmc-metin) 6%, var(--cmc-yuzey));
  --cmc-buton-bg-active: color-mix(in srgb, var(--cmc-metin) 10%, var(--cmc-yuzey));
  --cmc-buton-renk: var(--cmc-metin);
  --cmc-buton-kenar: transparent;
  --cmc-buton-kenar-hover: var(--cmc-kenar);
  --cmc-buton-golge: none;
  --cmc-buton-golge-hover: none;
}

.cmc-buton--metin,
.cmc-buton--baglanti {
  --cmc-buton-bg: transparent;
  --cmc-buton-bg-hover: var(--cmc-accent-yumusak);
  --cmc-buton-bg-active: color-mix(in srgb, var(--cmc-accent) 16%, var(--cmc-yuzey));
  --cmc-buton-renk: var(--cmc-accent);
  --cmc-buton-renk-hover: var(--cmc-accent-hover);
  --cmc-buton-kenar: transparent;
  --cmc-buton-golge: none;
  --cmc-buton-golge-hover: none;
  min-height: auto;
  padding: var(--cmc-space-2) var(--cmc-space-3);
}

.cmc-buton--baglanti {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cmc-buton--baglanti:hover:not(:disabled):not([aria-disabled='true']) {
  text-decoration: underline;
}

/* ── Boyutlar ──────────────────────────────────────────────────────────── */

.cmc-buton--kucuk {
  min-height: calc(var(--cmc-dokunma-min) * 0.72);
  padding: 0 var(--cmc-space-3);
  font-size: var(--cmc-font-xs);
  border-radius: var(--cmc-radius-sm);
  gap: var(--cmc-space-1);
}

.cmc-buton--buyuk {
  min-height: calc(var(--cmc-dokunma-min) * 1.12);
  padding: 0 var(--cmc-space-5);
  font-size: var(--cmc-font-base);
  border-radius: var(--cmc-radius-lg);
}

/* ── Düzen ─────────────────────────────────────────────────────────────── */

.cmc-buton--tam {
  width: 100%;
}

.cmc-buton--kare {
  width: var(--cmc-dokunma-min);
  min-width: var(--cmc-dokunma-min);
  padding: 0;
}

.cmc-buton--kare.cmc-buton--kucuk {
  width: calc(var(--cmc-dokunma-min) * 0.72);
  min-width: calc(var(--cmc-dokunma-min) * 0.72);
}

.cmc-buton--sola {
  justify-content: flex-start;
  text-align: left;
}

/* ── Düğme grubu (btn-group) ───────────────────────────────────────────── */

.cmc-buton-grup {
  display: inline-flex;
  flex-wrap: nowrap;
  vertical-align: middle;
}

.cmc-buton-grup > .cmc-buton {
  position: relative;
  border-radius: 0;
}

.cmc-buton-grup > .cmc-buton:first-child {
  border-top-left-radius: var(--cmc-radius-md);
  border-bottom-left-radius: var(--cmc-radius-md);
}

.cmc-buton-grup > .cmc-buton:last-child {
  border-top-right-radius: var(--cmc-radius-md);
  border-bottom-right-radius: var(--cmc-radius-md);
}

.cmc-buton-grup > .cmc-buton + .cmc-buton {
  margin-left: -1px;
}

.cmc-buton-grup > .cmc-buton:focus-visible,
.cmc-buton-grup > .cmc-buton:hover {
  z-index: 1;
}

.cmc-buton-grup--dikey {
  flex-direction: column;
  align-items: stretch;
}

.cmc-buton-grup--dikey > .cmc-buton {
  width: 100%;
  margin-left: 0;
}

.cmc-buton-grup--dikey > .cmc-buton + .cmc-buton {
  margin-top: -1px;
  margin-left: 0;
}

.cmc-buton-grup--dikey > .cmc-buton:first-child {
  border-radius: var(--cmc-radius-md) var(--cmc-radius-md) 0 0;
}

.cmc-buton-grup--dikey > .cmc-buton:last-child {
  border-radius: 0 0 var(--cmc-radius-md) var(--cmc-radius-md);
}

.cmc-buton-grup--bosluklu {
  gap: var(--cmc-space-2);
}

.cmc-buton-grup--bosluklu > .cmc-buton {
  border-radius: var(--cmc-radius-md);
  margin: 0;
}

.cmc-buton-grup--bosluklu.cmc-buton-grup--dikey > .cmc-buton:first-child,
.cmc-buton-grup--bosluklu.cmc-buton-grup--dikey > .cmc-buton:last-child {
  border-radius: var(--cmc-radius-md);
}

/* Kaydet + bitişik ok (kaydet ve yeni) */
.cmc-kaydet-bol {
  position: relative;
  flex: 0 0 auto;
}

.cmc-kaydet-bol > .cmc-buton:hover,
.cmc-kaydet-bol > .cmc-buton:active {
  transform: none;
}

.cmc-buton-grup.cmc-kaydet-bol > .cmc-buton:first-child {
  border-radius: var(--cmc-radius-md) 0 0 var(--cmc-radius-md);
}

.cmc-buton-grup.cmc-kaydet-bol > .cmc-kaydet-bol__ok {
  min-width: var(--cmc-dokunma-min);
  padding-inline: 0;
  border-radius: 0 var(--cmc-radius-md) var(--cmc-radius-md) 0;
}

.cmc-kaydet-bol__menu {
  position: fixed;
  z-index: calc(var(--cmc-z-katman) + 16);
  min-width: 12rem;
  padding: var(--cmc-space-2);
  background: var(--cmc-yuzey-yuzen);
  border: 1px solid var(--cmc-kenar);
  border-radius: var(--cmc-radius-md);
  box-shadow: var(--cmc-golge-md);
}

/* ── İstek bekleniyor — CmcIstek düğmeyi yanıta kadar kilitler ───────────── */

.cmc-bekle {
  cursor: progress;
  pointer-events: none;
}

.cmc-buton.cmc-bekle:disabled,
.cmc-buton.cmc-bekle[aria-disabled='true'] {
  opacity: 0.8;
}

.cmc-bekle__donen {
  display: inline-block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  margin-inline-end: 0.4em;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  vertical-align: -0.15em;
  animation: cmc-bekle-don 0.7s linear infinite;
}

.cmc-buton > .cmc-bekle__donen {
  margin-inline-end: 0;
}

.cmc-bekle--ikon > :not(.cmc-bekle__donen) {
  display: none !important;
}

.cmc-bekle--ikon > .cmc-bekle__donen {
  margin: 0;
}

.cmc-kaydet-bol:has(> .cmc-bekle) > .cmc-kaydet-bol__ok {
  pointer-events: none;
  opacity: 0.8;
}

@keyframes cmc-bekle-don {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .cmc-bekle__donen {
    animation-duration: 2s;
  }
}

.cmc-buton[hidden] {
  display: none;
}

.cmc-kaydet-bol__menu[hidden] {
  display: none;
}

@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  .cmc-kaydet-bol__menu:not([hidden]) {
    inset: auto 0 0 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    min-width: 0;
    max-width: none;
    border-radius: var(--cmc-radius-xl, 1rem) var(--cmc-radius-xl, 1rem) 0 0;
    border-bottom: 0;
    padding: var(--cmc-space-3);
    padding-bottom: calc(var(--cmc-space-3) + env(safe-area-inset-bottom, 0px));
    box-shadow: var(--cmc-golge-lg, var(--cmc-golge-md));
    animation: cmc-kaydet-bol-sheet-acil 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .cmc-kaydet-bol__menu:not([hidden])::before {
    content: '';
    display: block;
    width: 2.75rem;
    height: 0.28rem;
    margin: 0 auto 0.75rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cmc-metin-zayif) 55%, transparent);
  }

  @keyframes cmc-kaydet-bol-sheet-acil {
    from { opacity: 0; transform: translateY(40%); }
    to { opacity: 1; transform: translateY(0); }
  }
}