/**
 * App host chrome — focus ring, nexus images, lightbox (v3-42).
 */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
  border-radius: var(--radius-xs, 2px);
}

.nexus-image-wrapper img {
  max-width: 100%;
  border-radius: var(--radius-xs, 4px);
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
  cursor: zoom-in;
  transition:
    transform var(--motion-base) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}

.nexus-image-wrapper img:hover {
  transform: scale(var(--motion-scale-hover));
  border-color: var(--primary);
}

#veraius-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(var(--overlay-scrim-rgb), 0.9);
  z-index: var(--z-lightbox);
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(var(--blur-sm));
  cursor: zoom-out;
}

/* Kapat düğmesi: lightbox'ın TEK odaklanabilir öğesi (ölçüldü 2026-09-11 —
   öncesinde hiç yoktu, klavye kullanıcısı pencereye giremiyordu). Sağ üstte,
   görselin üstünde durur; imleç lightbox'ta zoom-out olduğu için burada
   açıkça pointer'a döner. */
#lightbox-close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-container-high);
  color: var(--on-surface);
  border: none;
  border-radius: var(--btn-radius);
  cursor: pointer;
  transition: background var(--transition-btn);
}

#lightbox-close:hover {
  background: var(--surface-container-highest);
}

#lightbox-close:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

#veraius-lightbox img {
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0 0 50px rgba(var(--overlay-scrim-rgb), 0.8);
  border: 2px solid color-mix(in srgb, var(--primary) 30%, transparent);
}

/* ============================================================
   Global App Footer — owned here (always-loaded chrome sheet)
   instead of the per-component scoped bundle, which is lazy-loaded
   per department and went stale across themes/routes. Using the
   plain .app-footer class guarantees one identical slim footer on
   every route and in every theme (dark / light / mixed). The scoped
   .razor.css only adds the inner layout (footer-single-inner etc.).
   ============================================================ */
.app-footer {
  position: relative;
  width: 100%;
  margin-top: auto;
  flex-shrink: 0;
  background-color: var(--surface-container-low);
  color: var(--on-surface-variant);
  padding: var(--space-2, 0.5rem) var(--space-5, 1.25rem);
}

/* Brand-tinted hairline on the top edge — premium accent, no flat border. */
.app-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--primary) 45%, var(--ghost-border)) 50%,
    transparent
  );
  pointer-events: none;
}

/* Theme parity: mixed must match dark/light geometry exactly. Only the
   surface tier shifts with the theme tokens — never the shape. */
[data-theme="mixed"] .app-footer,
.theme-mixed .app-footer {
  background-color: var(--surface-container-low);
  box-shadow: none;
  border-top: none;
}

/* Mobile: BottomNavBar owns the bottom edge — hide the global footer. */
@media (max-width: 767px) {
  .app-footer {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Programatik başlık odağı — görünür halka YOK.

   Routes.razor `<FocusOnNavigate Selector="h1"/>` kullanır: her gezinmede Blazor
   sayfanın h1'ine odaklanır. Bu ERİŞİLEBİLİRLİK İÇİN DOĞRUDUR — ekran okuyucu
   yeni sayfanın başlığını okur, klavye kullanıcısı içeriğin başından devam eder.
   Ancak tarayıcı bu programatik odağa da odak halkası çizer ve her sayfa
   açılışında başlığın etrafında bir kutu belirir (ÖLÇÜLDÜ 2026-08-25: /home'da
   h1.home-hero-title, outline solid 2px rgb(154,208,211)) — kimse Tab'lamamışken.

   Çözüm: KLAVYE odağını değil yalnız GÖRSELİ bastır. :focus-visible kullanmıyoruz
   çünkü tarayıcılar programatik odağı bazen "görünür" sayar; ölçüt daha kesin:
   yalnızca tabindex="-1" olan (yani Tab sırasında OLMAYAN, sadece programatik
   odaklanabilen) başlıklar halkasız kalır. Gerçekten Tab'lanabilir bir öğe bundan
   etkilenmez, odak göstergesi korunur.

   :focus-visible DE hedeflenir: tarayıcı FocusOnNavigate'in programatik odağını
   "görünür odak" sayıyor ve global `:focus-visible { outline: 2px solid }` kuralı
   (veraius-responsive/animations/host-chrome) devreye giriyor. Yalnız `:focus`
   yazmak yetmedi — ÖLÇÜLDÜ 2026-08-25: h1 hâlâ `solid 2px` alıyordu.
   KONUM: bu kural veraius-base.css'te DEĞİL burada — base ilk yüklenir ve global
   `:focus-visible` kuralları (responsive/animations/host-chrome) sonra gelip eşit
   özgüllükte onu ezer. host-chrome son yüklenen dosya olduğu için kural burada kazanır.
   ───────────────────────────────────────────────────────────────────────────── */
h1[tabindex="-1"]:focus,
h1[tabindex="-1"]:focus-visible,
h2[tabindex="-1"]:focus,
h2[tabindex="-1"]:focus-visible,
h3[tabindex="-1"]:focus,
h3[tabindex="-1"]:focus-visible,
[role="heading"][tabindex="-1"]:focus,
[role="heading"][tabindex="-1"]:focus-visible {
    outline: none;
    box-shadow: none;
}