/* ═══════════════════════════════════════════════════════════════
   İzmirim App — Erişilebilirlik Bileşenleri
   (_erisilebilirlik.cshtml partial'ı ile birlikte çalışır; davranış
   erisilebilirlik.js'te. İçerik: sağ kenar erişilebilirlik paneli,
   weaccess.ai aracı yerleşim override'ları, signfordeaf Engelsiz
   Çeviri buton override'ı. Kaynak davranış: bizvariz
   AccessibilityWidget → İzmirim tasarım diline uyarlandı.)
   ═══════════════════════════════════════════════════════════════ */

/* ── Engelsiz Çeviri (signfordeaf) butonu ─────────────────────────
   Eklentinin kendi ürettiği buton; solda yarı gizli çekmece görünümü
   (kaynak: izmir.bel.tr custom.css). z-index bilinçli düşük: header
   (1000) üstü, modallar/overlay'ler (1050+) altı — tam ekran
   karartmaların üstüne çıkmamalı. */
#engelsizCeviriBtn {
  width: auto !important;
  border-radius: 13px;
  position: fixed;
  padding: 8px 23px;
  display: flex;
  align-items: center;
  gap: 23px;
  transition: transform ease-in-out 300ms;
  border: none;
  z-index: 1020;
  left: 0;
  top: 20%;
  overflow: hidden;
  transform: translateX(calc(-100% + (23px * 2) + 28px));
}

/* BIZYEN-738: kapalıyken görünen şerit 74px'ten 40px'e (sağ iç boşluk + logo
   boşluğu 23→6px). 1024–1366px'te içerik x≈44'ten başlıyor; 74px'lik şerit
   sayfa başlığının ilk harfini örtüyordu. Eklenti kendi <style>'ını bu
   dosyadan SONRA ekleyip aynı #engelsizCeviriBtn seçicisiyle padding/gap/
   transform'u ezdiği için daha özgül seçici kullanılır (BIZYEN-740 tespiti).
   Üzerine gelince açılma eklentinin :hover !important kuralıyla sürer. */
body #engelsizCeviriBtn {
  padding: 8px 6px 8px 23px;
  gap: 6px;
  transform: translateX(calc(-100% + (6px * 2) + 28px));
}

/* ── Sağ kenar erişilebilirlik paneli ───────────────────────────── */
.erisilebilirlik-panel {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 98;
}

.erisilebilirlik-cubuk {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-right: none;
  border-radius: 16px 0 0 16px;
  box-shadow: var(--shadow-card);
}

.erisilebilirlik-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: none;
  cursor: pointer;
  transition: background 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

.erisilebilirlik-btn:hover,
.erisilebilirlik-btn:focus-visible {
  background: var(--color-bg-hover-card);
  transform: scale(1.05);
}

.erisilebilirlik-btn img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

/* ── weaccess.ai yerleşimi ───────────────────────────────────────
   Aracın kendi yüzen butonu gizlenir (paneldeki buton onun yerine
   tetikler), diyalogları sağ kenarda açılır. */
.widget-avatar {
  display: none !important;
}

#wetool-container,
.wetool-sidebar,
.wetool-dialog,
[class*="wetool-"] {
  left: auto !important;
  right: 0 !important;
}

.wetool-sidebar {
  right: 0 !important;
  left: auto !important;
  transform: none !important;
}

/* ── Mobil: panel gizli, kenar sekmesiyle açılır ────────────────── */
.erisilebilirlik-toggle {
  display: none;
}

@media (max-width: 767px) {
  .erisilebilirlik-panel {
    display: none;
    top: 60%;
  }

  .erisilebilirlik-panel.acik {
    display: block;
  }

  .erisilebilirlik-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 60%;
    right: 0;
    transform: translateY(-50%);
    width: 28px;
    height: 56px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-right: none;
    border-radius: 12px 0 0 12px;
    background: var(--color-bg-card);
    box-shadow: var(--shadow-card);
    color: var(--color-primary);
    cursor: pointer;
    transition: right 0.3s var(--ease-out);
    z-index: 98;
  }

  /* Panel açıkken sekme panelin soluna kayar (panel genişliği: 44 + 2×8 padding) */
  .erisilebilirlik-toggle.acik {
    right: 60px;
  }

  .erisilebilirlik-toggle svg {
    transition: transform 0.3s var(--ease-out);
  }

  .erisilebilirlik-toggle.acik svg {
    transform: rotate(180deg);
  }
}

/* ── weaccess "Gri Tonlama" ve "Koyu Mod" tamamlayıcıları (23.10.2026 test geri bildirimi 13–14) ─────────────────
   Gri Tonlama eklentide yalnız görsellere uygulanır; sınıfı erisilebilirlik.js verir ve sayfanın tamamı griye döner.
   !important: eklentinin "Doygunluk" ayarı html'e satır içi filter yazar; gri tonlama açıkken o geçersiz kalır.
   Kök öğedeki filter, sabit konumlu öğelerin (çerez bandı, asistan) yerleşimini bozmaz. */
html.erisim-gri-ton {
  filter: grayscale(1) !important;
}

/* Koyu Mod (html[data-wa-dark-mode]) bütün öğelerin zeminini !important ile saydam yapar; sayfanın üstünde duran
   katmanlar (yapışkan başlık, çerez bandı, pencereler, açılır menüler, asistan) içeriğin üstüne saydam biniyordu.
   Bu katmanlar koyu zemin alır; seçiciler eklentinin "html[data-wa-dark-mode] *" seçicisinden daha özgüldür. */
html[data-wa-dark-mode] .bizizmir-header,
html[data-wa-dark-mode] .cerez-banner,
html[data-wa-dark-mode] .cookie-wrapper,
html[data-wa-dark-mode] .sticky-cta-bar,
html[data-wa-dark-mode] .silent-signin-card,
html[data-wa-dark-mode] .modal-content,
html[data-wa-dark-mode] .dropdown-menu,
html[data-wa-dark-mode] .leaving-card,
html[data-wa-dark-mode] .erisilebilirlik-panel,
html[data-wa-dark-mode] #akilli-asistan,
html[data-wa-dark-mode] #chatBox {
  background-color: #1e1e1e !important;
}

html[data-wa-dark-mode] .hizmet-lightbox,
html[data-wa-dark-mode] .leaving-overlay,
html[data-wa-dark-mode] .onboarding-overlay,
html[data-wa-dark-mode] .popup-overlay,
html[data-wa-dark-mode] .cookie-overlay {
  background-color: rgba(0, 0, 0, 0.75) !important;
}

html[data-wa-dark-mode] .modal-backdrop.show {
  background-color: #000 !important;
}