/**
 * Erişilebilirlik temeli.
 *
 * Reset'ten hemen sonra yüklenir; bileşen dosyaları bunun üstüne yazar.
 * Buradaki kurallar bileşene özel değildir — tüm arayüzün tabanıdır.
 */

/* ---------------------------------------------------------------- *
 * 1. Yalnız ekran okuyucu
 * ---------------------------------------------------------------- */

/* Görsel olarak gizler ama erişilebilirlik ağacında bırakır.
   `display:none` ve `visibility:hidden` okuyucudan da siler — kullanmayın. */
.cmc-gorsel-gizli {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Klavyeyle odaklanınca görünür olur — "içeriğe atla" bağlantısı gibi. */
.cmc-gorsel-gizli--odakta:focus-visible {
  position: fixed;
  top: var(--cmc-space-2);
  inset-inline-start: var(--cmc-space-2);
  z-index: calc(var(--cmc-z-kilit) + 10);
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--cmc-space-2) var(--cmc-space-4);
  overflow: visible;
  clip-path: none;
  border-radius: var(--cmc-radius-md);
  background: var(--cmc-yuzey-yuzen);
  color: var(--cmc-metin);
  box-shadow: var(--cmc-golge-md);
}

/* ---------------------------------------------------------------- *
 * 2. Odak
 * ---------------------------------------------------------------- */

/* Tek kaynak: her odaklanabilir öğe aynı halkayı alır. Fare tıklamasında
   halka çıkmaz (`:focus-visible`), klavyede çıkar. Bileşen kendi halkasını
   tanımlıyorsa bu kuralı ezer. Köşe yarıçapına dokunulmaz; düğmenin kendi
   yuvarlak kenarı odak sırasında da durur. */
.cmc-reset-box :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--cmc-accent);
  outline-offset: 2px;
}

/* Düğmenin halkası kutu gölgesidir ve kendi köşe yarıçapını izler.
   Düz outline bunu köşeli bir çerçeveyle ezer. */
.cmc-reset-box :is(a, button).cmc-buton:focus-visible {
  outline: none;
}

/* Tarayıcının varsayılan odak halkası, kendi halkamızla çakışmasın. */
.cmc-reset-box :is(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

/* Dış kutu :focus-within ile halka veriyorsa iç kontrolde ikinci halka yok. */
.cmc-reset-box :is(
  .cmc-etiketli-alan,
  .cmc-filtre__arama,
  .cmc-telefon-alan,
  .cmc-girdi-tarih,
  .cmc-girdi-saat
) :is(input, textarea, select, button, [tabindex], .cmc-secim, .cmc-girdi):focus-visible,
.cmc-reset-box :is(
  .cmc-etiketli-alan,
  .cmc-filtre__arama,
  .cmc-telefon-alan,
  .cmc-girdi-tarih,
  .cmc-girdi-saat
) :is(input, textarea, select, button, [tabindex], .cmc-secim, .cmc-girdi):focus {
  outline: none;
}

/* ---------------------------------------------------------------- *
 * 3. Seçim ve imleç
 * ---------------------------------------------------------------- */

.cmc-reset-box ::selection {
  background: color-mix(in srgb, var(--cmc-accent) 26%, transparent);
  color: var(--cmc-metin);
}

.cmc-reset-box :is(input, textarea, [contenteditable]) {
  caret-color: var(--cmc-accent);
}

/* ---------------------------------------------------------------- *
 * 4. Dokunma hedefi
 * ---------------------------------------------------------------- */

/* Kaba işaretleyicide (parmak) tıklanabilir öğe en az 44px olmalı.
   Görsel boyut küçük kalabilir; hedef alanı büyür.
   Dokunma anında tarayıcının mavi vurgu katmanı ve aksan odak halkası çıkmaz.
   İnce işaretleyici (fare, klavye) halkayı korur. */
@media (pointer: coarse) {
  html.cmc-reset-box {
    --cmc-odak-glow: none !important;
    --cmc-odak-halka: none !important;
    -webkit-tap-highlight-color: transparent;
  }

  html.cmc-reset-box * {
    -webkit-tap-highlight-color: transparent;
  }

  html.cmc-reset-box :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: none !important;
  }

  .cmc-reset-box :is(button, a[href], [role="button"], [role="menuitem"]) {
    min-block-size: var(--cmc-dokunma-min);
  }

  /* Parça kapsülün içine sığar; dokunma alanı kapsülün kendisidir */
  .cmc-reset-box .cmc-filtre__durum-btn,
  .cmc-reset-box .cmc-filtre__liste-islemler > .cmc-buton {
    min-block-size: 0;
  }
}

/* Parmak basınca mavi vurgu yerine kısa bir oturma. Yalnız en içteki
   öğe oynar; kartın içindeki düğme kartı da küçültmez. Girdi küçülmez. */
@keyframes cmc-dokunma {
  0% { transform: scale(0.97); }
  100% { transform: scale(1); }
}

@media (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  html.cmc-reset-box :is(
    button,
    a[href],
    summary,
    [role="button"],
    [role="menuitem"],
    [role="tab"],
    .cmc-kart--satir,
    .cmc-sistem-kart
  ):active:not(:disabled):not([aria-disabled="true"]):not(:has(:active)) {
    animation: cmc-dokunma 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
}

/* ---------------------------------------------------------------- *
 * 5. Yüksek kontrast / zorunlu renk
 * ---------------------------------------------------------------- */

/* Windows yüksek kontrast kipi kendi paletini dayatır. Kenarları
   `currentColor` yaparak yapının kaybolmasını engelleriz; aksi halde
   yalnız arka planla ayrılan kutular tamamen görünmez olur. */
@media (forced-colors: active) {
  .cmc-reset-box :is(.cmc-kart, .cmc-girdi, .cmc-secim, .cmc-buton, .cmc-katman, .cmc-menu) {
    border: 1px solid currentColor;
  }

  .cmc-reset-box :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }

  /* Yalnız renk farkıyla anlatılan durumlar metin/kenar desteği alır. */
  .cmc-reset-box :is(.cmc-girdi--hata, .cmc-secim.cmc-girdi--hata) {
    border-style: dashed;
  }
}

/* Kullanıcı daha yüksek kontrast istiyorsa kenar, hat ve ikincil metni koyulaştır. */
@media (prefers-contrast: more) {
  .cmc-reset-box {
    --cmc-kenar: color-mix(in srgb, var(--cmc-metin) 48%, transparent);
    --cmc-metin-zayif: color-mix(in srgb, var(--cmc-metin) 82%, transparent);
    --cmc-hat: color-mix(in srgb, var(--cmc-accent) 45%, var(--cmc-kenar));
    --cmc-hat-guclu: color-mix(in srgb, var(--cmc-accent) 70%, var(--cmc-kenar));
  }

  .cmc-reset-box :focus-visible {
    outline-width: 3px;
  }
}

/* ---------------------------------------------------------------- *
 * 6. Hareket
 * ---------------------------------------------------------------- */

/* `cmc-tokens.css` süreleri kısaltıyor; burada kaydırma ve dönen
   göstergeler de durur. Vestibüler rahatsızlık gerçek bir engeldir. */
@media (prefers-reduced-motion: reduce) {
  .cmc-reset-box {
    scroll-behavior: auto;
  }

  .cmc-reset-box *,
  .cmc-reset-box *::before,
  .cmc-reset-box *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}