/* Düğme türleri, bölümlü seçici ve sekme şeridi (docs/diyar/gorsel/ARAYUZ_BILESENLERI.md).
   Taban düğme (ikincil) css/temel.css'te: `<button>` ya da `.dugme`. Türler: .birincil
   (pirinç, sayfada bir tane), .sade (çerçevesiz), .tehlike, .onay (eski adı .yesil); boylar:
   .kucuk, .buyuk; .simge-dugme yalnız simgeli kare düğme (title / aria-label şart). Dokunmatik
   ekranda (kaba işaretçi) en az 40 px. */

.dugme.birincil, button.birincil {
  background: var(--vurgu);
  border-color: var(--vurgu-koyu);
  color: var(--yazi-ters);
  font-weight: 600;
}
.dugme.birincil:hover, button.birincil:hover { background: var(--vurgu-acik);
  border-color: var(--vurgu); }
.dugme.birincil:active, button.birincil:active { background: var(--vurgu-koyu); }

.dugme.sade, button.sade { background: transparent; border-color: transparent;
  color: var(--yazi-2); }
.dugme.sade:hover, button.sade:hover { background: var(--zemin-2); color: var(--yazi-1); }

.dugme.tehlike, button.tehlike { background: var(--kotu-zemin); color: var(--kotu-yazi);
  border-color: color-mix(in srgb, var(--kotu) 55%, var(--cizgi)); }
.dugme.tehlike:hover, button.tehlike:hover { border-color: var(--kotu);
  background: color-mix(in srgb, var(--kotu) 26%, var(--zemin-1)); }
.dugme.onay, button.onay, button.yesil { background: var(--iyi-zemin); color: var(--yazi-1);
  border-color: color-mix(in srgb, var(--iyi) 50%, var(--cizgi)); }
.dugme.onay:hover, button.onay:hover, button.yesil:hover { border-color: var(--iyi);
  background: color-mix(in srgb, var(--iyi) 24%, var(--zemin-1)); }

.dugme.kucuk, button.kucuk { padding: 3px 9px; font-size: var(--boy-2); }
.dugme.buyuk, button.buyuk { min-height: 40px; padding: 8px 18px; font-size: var(--boy-4); }
.simge-dugme { width: var(--dokunma); height: var(--dokunma); padding: 0; }
.simge-dugme .simge { width: 18px; height: 18px; }

/* bölümlü seçici: tek seçimli düğme grubu (seçili: aria-pressed="true") */
.secici {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--yaricap-2);
  background: var(--zemin-0);
  border: 1px solid var(--cizgi);
}
.secici > button {
  min-height: var(--dokunma);
  padding: 0 10px;
  border: 0;
  border-radius: var(--yaricap-1);
  background: transparent;
  color: var(--yazi-2);
  font-weight: 500;
  white-space: nowrap;
}
.secici > button:hover { background: var(--zemin-2); color: var(--yazi-1); }
.secici > button[aria-pressed='true'], .secici > button.secili {
  background: var(--zemin-3);
  color: var(--yazi-1);
  box-shadow: inset 0 -2px 0 var(--vurgu);
  cursor: default;
}

/* sekme şeridi: role="tablist" içinde role="tab" düğmeler (seçili: aria-selected="true") */
.sekme-seridi { display: flex; gap: 2px; border-bottom: 1px solid var(--cizgi); }
.sekme-seridi > [role='tab'] {
  min-height: 34px;
  padding: 6px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: var(--yaricap-1) var(--yaricap-1) 0 0;
  background: none;
  color: var(--yazi-2);
  font-weight: 500;
}
.sekme-seridi > [role='tab']:hover { color: var(--yazi-1); background: var(--zemin-1); }
.sekme-seridi > [role='tab'][aria-selected='true'], .sekme-seridi > .acik {
  color: var(--yazi-1);
  border-bottom-color: var(--vurgu);
}

@media (pointer: coarse) {
  .dugme, button.birincil, .simge-dugme, .secici > button, .sekme-seridi > [role='tab'] {
    min-height: var(--dokunma-mobil);
  }
  .simge-dugme { width: var(--dokunma-mobil); }
}