/* ================================================================
   accessibility.css — BiTakasla Erişilebilirlik Modülü
   SADECE public web sitesi için. Admin paneli kapsam dışı.
   ================================================================ */


/* ── Footer Erişilebilirlik Butonları ───────────────────────── */

.a11y-icons [data-a11y] {
  cursor: pointer;
  color: #94a3b8;
  font-size: 22px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  transition: color 0.2s ease, transform 0.15s ease, filter 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  line-height: 1;
}

.a11y-icons [data-a11y]:hover {
  color: #facc15;
  transform: scale(1.18);
}

.a11y-icons [data-a11y]:active {
  transform: scale(0.92);
}

.a11y-icons [data-a11y]:focus-visible {
  outline: 2px solid #facc15;
  outline-offset: 3px;
  border-radius: 6px;
}

/* Aktif (açık) durum — sarı parlama */
.a11y-icons [data-a11y].a11y-active {
  color: #facc15 !important;
  filter: drop-shadow(0 0 7px rgba(250, 204, 21, 0.65));
}

/* Ölçek adım rengi — kaç adım büyütüldüğünü gösterir */
[data-a11y="scale"][data-a11y-step="1"] { color: #fbbf24 !important; }
[data-a11y="scale"][data-a11y-step="2"] { color: #f59e0b !important; }
[data-a11y="scale"][data-a11y-step="3"] {
  color: #f59e0b !important;
  animation: a11y-glow 1.8s ease-in-out infinite;
}

@keyframes a11y-glow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(245, 158, 11, 0.5)); }
  50%       { filter: drop-shadow(0 0 12px rgba(245, 158, 11, 0.95)); }
}


/* ── Font Ölçekleme — Geçiş Animasyonu ─────────────────────── */
/* JS applyScale() sırasında geçici eklenir, sonra kaldırılır  */

body.a11y-scaling p,
body.a11y-scaling span,
body.a11y-scaling a,
body.a11y-scaling h1, body.a11y-scaling h2,
body.a11y-scaling h3, body.a11y-scaling h4,
body.a11y-scaling h5, body.a11y-scaling h6 {
  transition: font-size 0.2s ease !important;
}


/* ================================================================
   Yüksek Kontrast Modu  —  body.a11y-contrast
   ──────────────────────────────────────────────────────────────
   NEDEN filter: contrast() KULLANIYORUZ?
   ──────────────────────────────────────────────────────────────
   Bitakasla hem KOYU (ana site, footer: #050b18) hem AÇIK
   (müşteri paneli: #f8fafc) arka planlara sahip.

   "color: #000 !important" zorlamak:
     ✗ Koyu arka planda beyaz metin → siyah → görünmez!

   filter: contrast(1.45) ise CSS motoru tarafından akıllıca:
     ✓ Koyu bg + #94a3b8 gri metin  → gri BEYAZA çekilir
     ✓ Açık bg + #64748b gri metin  → gri SİYAHA çekilir
     ✓ Arka planlar / gradientler BOZULMAZ (sadece ton koyulaşır)
     ✓ İkonlar / resimler → ayrı inverse filter ile korunur

   Bu yöntem tek CSS kuralıyla hem koyu hem açık temada
   doğru çalışan evrensel bir kontrast artışı sağlar.
   ================================================================ */

/* Sayfanın flash olmadan başlaması için — head'deki inline script
   localStorage'ı okur ve bu attribute'yi HTML elementine yazar */
html[data-a11y-ready="contrast"] body {
  filter: contrast(1.45) saturate(1.1);
}

body.a11y-contrast {
  filter: contrast(1.45) saturate(1.1);
}

/* ─ Görsel medya: filtreyi iptal et ─────────────────────────── */
/* contrast(1/1.45) ≈ 0.69  |  saturate(1/1.1) ≈ 0.91          */
/* Parent filter × child filter = 1.45×0.69 ≈ 1  (nötr)        */
body.a11y-contrast img,
body.a11y-contrast video,
body.a11y-contrast canvas,
body.a11y-contrast iframe,
body.a11y-contrast svg:not([aria-hidden]) {
  filter: contrast(0.69) saturate(0.91) !important;
}

/* ─ Metin opacity tam → yarı-şeffaf metinler netleşsin ────────  */
body.a11y-contrast p,
body.a11y-contrast span,
body.a11y-contrast a,
body.a11y-contrast li,
body.a11y-contrast td,
body.a11y-contrast th,
body.a11y-contrast label,
body.a11y-contrast small,
body.a11y-contrast h1, body.a11y-contrast h2,
body.a11y-contrast h3, body.a11y-contrast h4,
body.a11y-contrast h5, body.a11y-contrast h6 {
  opacity: 1 !important;
  text-shadow: none !important;
}

/* ─ Odak halkası: her arka planda görünen sarı ────────────────  */
body.a11y-contrast *:focus-visible {
  outline: 3px solid #facc15 !important;
  outline-offset: 3px !important;
  border-radius: 3px;
}

/* ─ Form sınırları: biraz daha belirgin ───────────────────────  */
body.a11y-contrast input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body.a11y-contrast select,
body.a11y-contrast textarea {
  border-width: 2px !important;
}