/* ==========================================================================================
   VENTIRA GİRİŞ KATMANI — Authelia 4.39 giriş sayfası (giris.portal.ventira.com.tr) · 10.10.2026
   ------------------------------------------------------------------------------------------
   Ne yapar: tam ekran koyu GES fotoğrafları (12 kare, yumuşak geçişli gösteri) + koyu örtü, formun arkasında yarı saydam
   koyu "cam" panel, büyük logo (vektör logo.svg), marka kırmızısı birincil düğme, koyu zeminde okunur
   alanlar. "Powered by Authelia" GÖRÜNÜR kalır (bakımcılar atıf istiyor; gizlenmez).

   Yükleme: Caddy (replace-response modüllü yapı) Authelia HTML'inde </head> önüne
     <link rel="stylesheet" href="/ventira-giris/giris.css">
   ekler; /ventira-giris/* (giris.css, arka-NN.webp, arka-mobil.webp, logo.svg, simge*) Caddy'den statik sunulur.
   Gösteri bloğu (bölüm 2) portal/kurulum/giris_foto_uret.py ile ÜRETİLİR: elle değil giris_fotolar.json'dan.
   Authelia CSP'si: style-src 'self' + nonce, img-src = default-src 'self'. Bu yüzden bu dosyada
   satır içi stil, data: URI, dış yazı tipi YOKTUR; tüm görseller aynı kökendendir.
   Logo: Authelia <img src="./static/media/logo.png" class="w-16"> basar. Netlik için Caddy bu yolu
   logo.svg ile yanıtlamalı (Content-Type image/svg+xml); yapılmazsa APNG büyütülür (çalışır, bulanık).

   Basamaklama: Authelia CSS'i Tailwind v4'tür; yardımcı sınıflar @layer utilities/base içinde, tema
   jetonları ([data-theme=dark]{--primary:…}) katmansızdır. Bu dosya katmansızdır → bütün yardımcı
   sınıfları özgüllükten bağımsız ezer; jetonları ise daha yüksek özgüllükle (aşağıda) ezer.

   Seçiciler (10.10.2026 canlı DOM + Authelia JS parçalarından okundu; karma css-xxxx sınıfı YOK):
     #root, header, #language-button                       düzen iskeleti
     [id$="-stage"][class*="min-h"]                        LoginLayout sahnesi (first-factor-stage,
                                                           second-factor-stage, consent… — id prop'u)
     div:has(> div > img[alt="Logo"])                      cam panel = logo + başlık + form + alt bilgi
     img[alt="Logo"]                                       logo
     input[data-slot="floating-input" | "input"]           metin/parola alanları (shadcn yuvaları)
     [data-slot="checkbox"][data-checked]                  "Beni hatırla"
     [data-slot="button"][data-variant="default"]          birincil düğme (#sign-in-button)
     [class~="rounded-[10px]"], [class~="min-w-[300px]"]   2FA yöntem kutusu (TOTP / passkey / push)
     #otp-input input                                      TOTP hane kutuları
     a[href*="authelia.com"]                               "Powered by Authelia"
   Güvenli çöküş: bir Authelia sürümünde yapı değişirse yalnız eşleşmeyen kural düşer. Jeton ezmeleri
   ve arka plan yapıdan bağımsızdır → sayfa her durumda koyu, okunur ve kullanılabilir kalır (cam panel
   veya büyük logo kaybolur, form Authelia'nın kendi düzeninde çalışır). :has() desteklemeyen eski
   tarayıcıda panel kuralı yalnız id'li sahne yoluyla uygulanır (:is() bağışlayıcı liste).
   ========================================================================================== */

/* ---- 1. Tema jetonları: her tema değerinde koyu cam görünüm ----------------------------------
   Authelia jetonları hem <html> hem <body> üzerinde [data-theme=…] (0,1,0) ile tanımlar; body kendi
   değerini taşıdığı için yalnız :root'u ezmek yetmez. :root:root (0,2,0) / :root:root body (0,2,1). */
:root:root,
:root:root body,
:root [data-theme] {
  --background: #0a0d12;
  --foreground: #f3f5f7;
  --card: #141920;
  --card-foreground: #f3f5f7;
  --popover: #161b22;
  --popover-foreground: #f3f5f7;
  --primary: #c40c0e;
  --primary-foreground: #fff;
  --muted: #1b2129;
  --muted-foreground: rgb(226 231 237 / 0.68);
  --accent: rgb(255 255 255 / 0.08);
  --accent-foreground: #fff;
  --border: rgb(255 255 255 / 0.12);
  --input: rgb(255 255 255 / 0.18);
  --ring: #ff4a50;
  --divider: rgb(255 255 255 / 0.12);
  --custom-icon: #fff;
  --custom-loading-bar: #e00010;
  color-scheme: dark;
}

/* ---- 2. Zemin: fotoğraf gösterisi + koyu örtü; fotoğraf yoksa marka tonlu koyu degrade ----------
   Yedek degrade <html>'dedir (tuval): fotoğraf katmanları (body::before/::after) boşken ya da yüklenemezken görünür. */
html {
  background-color: #07090c;
  background-image:
    /* fotoğrafı andıran koyu gök + ufukta marka kırmızısı ışıma */
    radial-gradient(ellipse 85% 55% at 50% 108%, rgb(196 12 14 / 0.38), transparent 62%),
    radial-gradient(ellipse 60% 45% at 80% 6%, rgb(70 120 190 / 0.16), transparent 70%),
    linear-gradient(170deg, #111a27 0%, #0b1119 42%, #06080c 100%);
  background-attachment: fixed;
  scrollbar-color: rgb(255 255 255 / 0.22) transparent;
}

body {
  background-color: transparent;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
}

/* >>> giris_foto_uret.py — arka plan gösterisi. ELLE DEĞİŞTİRMEYİN: portal/kurulum/giris_fotolar.json → giris_foto_uret.py
   12 kare × 8 sn (geçiş 1,5 sn) = 96 sn döngü. A = body::before (tek sıradakiler), B = body::after
   (çift sıradakiler, saydamlığı döner). Telefon, kısa ekran ve 'hareket azaltma': tek kare, B gizli (indirilmez).
   Alanlara yazılınca gösteri duraklar. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: auto, auto, cover;
  background-image: radial-gradient(ellipse 75% 62% at 50% 48%, rgb(6 8 12 / 0.04) 0%, rgb(6 8 12 / 0.42) 66%, rgb(4 5 8 / 0.82) 100%), linear-gradient(180deg, rgb(5 7 11 / 0.62) 0%, rgb(5 7 11 / 0.18) 32%, rgb(5 7 11 / 0.3) 64%, rgb(3 4 7 / 0.86) 100%), url("/ventira-giris/arka-mobil.webp");
  background-position: center, center, 50% 50%;
}

body::after {
  display: none;
}

@media (min-width: 481px) {
  body::before {
    background-image: radial-gradient(ellipse 75% 62% at 50% 48%, rgb(6 8 12 / 0.04) 0%, rgb(6 8 12 / 0.42) 66%, rgb(4 5 8 / 0.82) 100%), linear-gradient(180deg, rgb(5 7 11 / 0.62) 0%, rgb(5 7 11 / 0.18) 32%, rgb(5 7 11 / 0.3) 64%, rgb(3 4 7 / 0.86) 100%), url("/ventira-giris/arka-01.webp");
    background-position: center, center, 50% 60%;
  }
}

@media (min-width: 481px) and (min-height: 500px) and (prefers-reduced-motion: no-preference) {
  body::before {
    animation: vg-a 96s step-end infinite;
  }

  body::after {
    display: block;
    opacity: 0;
    background-image: radial-gradient(ellipse 75% 62% at 50% 48%, rgb(6 8 12 / 0.04) 0%, rgb(6 8 12 / 0.42) 66%, rgb(4 5 8 / 0.82) 100%), linear-gradient(180deg, rgb(5 7 11 / 0.62) 0%, rgb(5 7 11 / 0.18) 32%, rgb(5 7 11 / 0.3) 64%, rgb(3 4 7 / 0.86) 100%), url("/ventira-giris/arka-02.webp");
    background-position: center, center, 60% 70%;
    animation: vg-b 96s step-end infinite, vg-op 16s ease-in-out infinite;
  }

  body:has(#username-textfield:not(:placeholder-shown), #password-textfield:not(:placeholder-shown))::before,
  body:has(#username-textfield:not(:placeholder-shown), #password-textfield:not(:placeholder-shown))::after {
    animation-play-state: paused;
  }
}

@keyframes vg-a {
  0% {
    background-image: radial-gradient(ellipse 75% 62% at 50% 48%, rgb(6 8 12 / 0.04) 0%, rgb(6 8 12 / 0.42) 66%, rgb(4 5 8 / 0.82) 100%), linear-gradient(180deg, rgb(5 7 11 / 0.62) 0%, rgb(5 7 11 / 0.18) 32%, rgb(5 7 11 / 0.3) 64%, rgb(3 4 7 / 0.86) 100%), url("/ventira-giris/arka-01.webp");
    background-position: center, center, 50% 60%;
  }
  8.854% {
    background-image: radial-gradient(ellipse 75% 62% at 50% 48%, rgb(6 8 12 / 0.04) 0%, rgb(6 8 12 / 0.42) 66%, rgb(4 5 8 / 0.82) 100%), linear-gradient(180deg, rgb(5 7 11 / 0.62) 0%, rgb(5 7 11 / 0.18) 32%, rgb(5 7 11 / 0.3) 64%, rgb(3 4 7 / 0.86) 100%), url("/ventira-giris/arka-03.webp");
    background-position: center, center, 50% 80%;
  }
  25.521% {
    background-image: radial-gradient(ellipse 75% 62% at 50% 48%, rgb(6 8 12 / 0.04) 0%, rgb(6 8 12 / 0.42) 66%, rgb(4 5 8 / 0.82) 100%), linear-gradient(180deg, rgb(5 7 11 / 0.62) 0%, rgb(5 7 11 / 0.18) 32%, rgb(5 7 11 / 0.3) 64%, rgb(3 4 7 / 0.86) 100%), url("/ventira-giris/arka-05.webp");
    background-position: center, center, 50% 50%;
  }
  42.188% {
    background-image: radial-gradient(ellipse 75% 62% at 50% 48%, rgb(6 8 12 / 0.04) 0%, rgb(6 8 12 / 0.42) 66%, rgb(4 5 8 / 0.82) 100%), linear-gradient(180deg, rgb(5 7 11 / 0.62) 0%, rgb(5 7 11 / 0.18) 32%, rgb(5 7 11 / 0.3) 64%, rgb(3 4 7 / 0.86) 100%), url("/ventira-giris/arka-07.webp");
    background-position: center, center, 50% 70%;
  }
  58.854% {
    background-image: radial-gradient(ellipse 75% 62% at 50% 48%, rgb(6 8 12 / 0.04) 0%, rgb(6 8 12 / 0.42) 66%, rgb(4 5 8 / 0.82) 100%), linear-gradient(180deg, rgb(5 7 11 / 0.62) 0%, rgb(5 7 11 / 0.18) 32%, rgb(5 7 11 / 0.3) 64%, rgb(3 4 7 / 0.86) 100%), url("/ventira-giris/arka-09.webp");
    background-position: center, center, 50% 50%;
  }
  75.521% {
    background-image: radial-gradient(ellipse 75% 62% at 50% 48%, rgb(6 8 12 / 0.04) 0%, rgb(6 8 12 / 0.42) 66%, rgb(4 5 8 / 0.82) 100%), linear-gradient(180deg, rgb(5 7 11 / 0.62) 0%, rgb(5 7 11 / 0.18) 32%, rgb(5 7 11 / 0.3) 64%, rgb(3 4 7 / 0.86) 100%), url("/ventira-giris/arka-11.webp");
    background-position: center, center, 50% 50%;
  }
  92.188% {
    background-image: radial-gradient(ellipse 75% 62% at 50% 48%, rgb(6 8 12 / 0.04) 0%, rgb(6 8 12 / 0.42) 66%, rgb(4 5 8 / 0.82) 100%), linear-gradient(180deg, rgb(5 7 11 / 0.62) 0%, rgb(5 7 11 / 0.18) 32%, rgb(5 7 11 / 0.3) 64%, rgb(3 4 7 / 0.86) 100%), url("/ventira-giris/arka-01.webp");
    background-position: center, center, 50% 60%;
  }
}

@keyframes vg-b {
  0% {
    background-image: radial-gradient(ellipse 75% 62% at 50% 48%, rgb(6 8 12 / 0.04) 0%, rgb(6 8 12 / 0.42) 66%, rgb(4 5 8 / 0.82) 100%), linear-gradient(180deg, rgb(5 7 11 / 0.62) 0%, rgb(5 7 11 / 0.18) 32%, rgb(5 7 11 / 0.3) 64%, rgb(3 4 7 / 0.86) 100%), url("/ventira-giris/arka-02.webp");
    background-position: center, center, 60% 70%;
  }
  17.188% {
    background-image: radial-gradient(ellipse 75% 62% at 50% 48%, rgb(6 8 12 / 0.04) 0%, rgb(6 8 12 / 0.42) 66%, rgb(4 5 8 / 0.82) 100%), linear-gradient(180deg, rgb(5 7 11 / 0.62) 0%, rgb(5 7 11 / 0.18) 32%, rgb(5 7 11 / 0.3) 64%, rgb(3 4 7 / 0.86) 100%), url("/ventira-giris/arka-04.webp");
    background-position: center, center, 50% 65%;
  }
  33.854% {
    background-image: radial-gradient(ellipse 75% 62% at 50% 48%, rgb(6 8 12 / 0.04) 0%, rgb(6 8 12 / 0.42) 66%, rgb(4 5 8 / 0.82) 100%), linear-gradient(180deg, rgb(5 7 11 / 0.62) 0%, rgb(5 7 11 / 0.18) 32%, rgb(5 7 11 / 0.3) 64%, rgb(3 4 7 / 0.86) 100%), url("/ventira-giris/arka-06.webp");
    background-position: center, center, 50% 60%;
  }
  50.521% {
    background-image: radial-gradient(ellipse 75% 62% at 50% 48%, rgb(6 8 12 / 0.04) 0%, rgb(6 8 12 / 0.42) 66%, rgb(4 5 8 / 0.82) 100%), linear-gradient(180deg, rgb(5 7 11 / 0.62) 0%, rgb(5 7 11 / 0.18) 32%, rgb(5 7 11 / 0.3) 64%, rgb(3 4 7 / 0.86) 100%), url("/ventira-giris/arka-08.webp");
    background-position: center, center, 50% 60%;
  }
  67.188% {
    background-image: radial-gradient(ellipse 75% 62% at 50% 48%, rgb(6 8 12 / 0.04) 0%, rgb(6 8 12 / 0.42) 66%, rgb(4 5 8 / 0.82) 100%), linear-gradient(180deg, rgb(5 7 11 / 0.62) 0%, rgb(5 7 11 / 0.18) 32%, rgb(5 7 11 / 0.3) 64%, rgb(3 4 7 / 0.86) 100%), url("/ventira-giris/arka-10.webp");
    background-position: center, center, 50% 50%;
  }
  83.854% {
    background-image: radial-gradient(ellipse 75% 62% at 50% 48%, rgb(6 8 12 / 0.04) 0%, rgb(6 8 12 / 0.42) 66%, rgb(4 5 8 / 0.82) 100%), linear-gradient(180deg, rgb(5 7 11 / 0.62) 0%, rgb(5 7 11 / 0.18) 32%, rgb(5 7 11 / 0.3) 64%, rgb(3 4 7 / 0.86) 100%), url("/ventira-giris/arka-12.webp");
    background-position: center, center, 50% 50%;
  }
}

@keyframes vg-op {
  0% {
    opacity: 0;
  }
  40.625% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  90.625% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* <<< giris_foto_uret.py */

::selection {
  background-color: rgb(224 0 16 / 0.5);
  color: #fff;
}

/* ---- 3. Üst çubuk: dil düğmesi küçük cam hap ------------------------------------------------- */
#language-button {
  padding: 6px 12px;
  color: rgb(255 255 255 / 0.9);
  background-color: rgb(10 13 18 / 0.45);
  border: 1px solid rgb(255 255 255 / 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

#language-button:hover {
  background-color: rgb(255 255 255 / 0.1);
  border-color: rgb(255 255 255 / 0.2);
}

/* ---- 4. Cam panel ---------------------------------------------------------------------------- */
:is(#root div:has(> div > img[alt="Logo"]),
    [id$="-stage"][class*="min-h"] > div > div:only-child) {
  position: relative;
  isolation: isolate;
  padding: 22px 28px 14px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgb(24 29 37 / 0.68) 0%, rgb(11 14 19 / 0.78) 100%);
  border: 1px solid rgb(255 255 255 / 0.1);
  box-shadow:
    0 30px 70px -22px rgb(0 0 0 / 0.78),
    0 0 0 1px rgb(0 0 0 / 0.28),
    inset 0 1px 0 rgb(255 255 255 / 0.07);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  animation: vg-belir 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* üst kenarda ince marka kırmızısı ışık çizgisi + panel içinde çok hafif kırmızı hâle */
:is(#root div:has(> div > img[alt="Logo"]),
    [id$="-stage"][class*="min-h"] > div > div:only-child)::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 14%;
  right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(255 64 70 / 0.85), transparent);
  pointer-events: none;
}

:is(#root div:has(> div > img[alt="Logo"]),
    [id$="-stage"][class*="min-h"] > div > div:only-child)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(ellipse 70% 38% at 50% 0%, rgb(224 0 16 / 0.1), transparent 70%);
  pointer-events: none;
}

@keyframes vg-belir {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
  }
}

/* cam desteklenmiyorsa / saydamlık azaltılmak isteniyorsa: opak koyu panel */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :is(#root div:has(> div > img[alt="Logo"]),
      [id$="-stage"][class*="min-h"] > div > div:only-child) {
    background: rgb(14 17 22 / 0.95);
  }
}

@media (prefers-reduced-transparency: reduce) {
  :is(#root div:has(> div > img[alt="Logo"]),
      [id$="-stage"][class*="min-h"] > div > div:only-child) {
    background: #11151b;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ---- 5. Logo ---------------------------------------------------------------------------------- */
#root img[alt="Logo"] {
  display: block;
  width: 168px;
  height: auto;
  margin: 0 auto 4px;
}

/* ---- 6. Başlık ve alt başlık (panelin doğrudan satırları; 2FA kutusundaki h6'ya dokunmaz) ------ */
#root div:has(> div > img[alt="Logo"]) > div > h5 {
  margin-top: 2px;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: #fff;
}

#root div:has(> div > img[alt="Logo"]) > div > h6 {
  color: var(--muted-foreground);
}

/* ---- 7. Alanlar -------------------------------------------------------------------------------- */
#root input:is([data-slot="floating-input"], [data-slot="input"]) {
  color: #fff;
  background-color: rgb(255 255 255 / 0.045);
  border-color: rgb(255 255 255 / 0.16);
  border-radius: 12px;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

#root input:is([data-slot="floating-input"], [data-slot="input"]):hover:not(:focus):not(:disabled) {
  border-color: rgb(255 255 255 / 0.3);
}

#root input:is([data-slot="floating-input"], [data-slot="input"]):focus {
  background-color: rgb(255 255 255 / 0.07);
  border-color: rgb(255 80 86 / 0.9);
  box-shadow: 0 0 0 3px rgb(224 0 16 / 0.25);
}

#root input:is([data-slot="floating-input"], [data-slot="input"])[aria-invalid="true"] {
  border-color: var(--destructive);
}

#root input:is([data-slot="floating-input"], [data-slot="input"])[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgb(255 70 70 / 0.25);
}

/* tarayıcı otomatik doldurması koyu alanı açık mavi/sarıya boyamasın (ayrı kurallar: bir tarayıcı
   tanımadığı sözde sınıf yüzünden bütün listeyi düşürmesin) */
#root input:-webkit-autofill,
#root input:-webkit-autofill:hover {
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  -webkit-box-shadow: 0 0 0 40px #1a2028 inset;
  box-shadow: 0 0 0 40px #1a2028 inset;
  transition: background-color 9999s ease-out 0s;
}

#root input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 40px #1d232c inset, 0 0 0 3px rgb(224 0 16 / 0.25);
  box-shadow: 0 0 0 40px #1d232c inset, 0 0 0 3px rgb(224 0 16 / 0.25);
}

#root input:autofill {
  filter: none;
}

#root [data-slot="checkbox"] {
  border-color: rgb(255 255 255 / 0.38);
  background-color: rgb(255 255 255 / 0.04);
  border-radius: 5px;
}

#root [data-slot="checkbox"][data-checked] {
  border-color: var(--primary);
  background-color: var(--primary);
}

/* ---- 8. Düğmeler ------------------------------------------------------------------------------- */
#root [data-slot="button"][data-variant="default"] {
  color: #fff;
  background-color: #c40c0e;
  background-image: linear-gradient(180deg, #df141b 0%, #b30a0f 100%);
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  box-shadow: 0 12px 28px -12px rgb(224 0 16 / 0.85), inset 0 1px 0 rgb(255 255 255 / 0.22);
  transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

#root [data-slot="button"][data-variant="default"]:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow: 0 14px 34px -12px rgb(224 0 16 / 1), inset 0 1px 0 rgb(255 255 255 / 0.25);
}

#root [data-slot="button"][data-variant="default"]:active:not(:disabled) {
  transform: translateY(1px);
  filter: brightness(0.96);
}

#root [data-slot="button"][data-variant="default"]:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

#root [data-slot="button"][data-variant="default"]:disabled {
  opacity: 0.55;
  box-shadow: none;
}

#sign-in-button {
  height: 46px;
}

/* koyu zeminde okunur bağlantı kırmızısı (text-primary = #c40c0e koyu camda 3:1'in altında kalır) */
#root .text-primary {
  color: #ff6469;
}

/* ---- 9. 2FA yöntem kutusu (TOTP / passkey / push) ve "kimliği doğrulandı" kutusu --------------- */
#root [class~="rounded-[10px]"] {
  background-color: rgb(255 255 255 / 0.03);
  border-color: rgb(255 255 255 / 0.1);
  border-radius: 16px;
}

#otp-input input {
  color: #fff;
  background-color: rgb(255 255 255 / 0.05);
  border-color: rgb(255 255 255 / 0.24);
  border-radius: 9px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#otp-input input:focus {
  outline: none;
  border-color: rgb(255 80 86 / 0.9);
  box-shadow: 0 0 0 3px rgb(224 0 16 / 0.25);
}

#otp-input input[aria-invalid="true"] {
  border-color: var(--destructive);
}

/* ---- 10. Alt bilgi: "Powered by Authelia" görünür ama sakin -------------------------------------- */
#root div:has(> a[href*="authelia.com"]) {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgb(255 255 255 / 0.06);
}

#root a[href*="authelia.com"] {
  color: rgb(226 232 240 / 0.52);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  transition: color 0.15s ease;
}

#root a[href*="authelia.com"]:hover {
  color: rgb(255 255 255 / 0.85);
}

/* ---- 11. Telefon / kısa ekran ------------------------------------------------------------------- */
@media (max-width: 480px) {
  :is([id$="-stage"][class*="min-h"] > div, #root div:has(> div > div > img[alt="Logo"])) {
    padding-left: 12px;
    padding-right: 12px;
  }

  :is(#root div:has(> div > img[alt="Logo"]),
      [id$="-stage"][class*="min-h"] > div > div:only-child) {
    padding: 16px 16px 12px;
    border-radius: 18px;
  }

  #root img[alt="Logo"] {
    width: 140px;
  }

  /* 2FA kutusu 300 px alt sınırı + 32 px iç boşlukla 375 px ekrandan taşmasın */
  #root [class~="min-w-[300px]"] {
    min-width: 0;
  }

  #root [class~="rounded-[10px]"] {
    padding: 20px 10px;
  }
}

@media (max-height: 680px) and (min-width: 481px) {
  #root img[alt="Logo"] {
    width: 132px;
  }
}

/* ---- 12. Erişilebilirlik ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  :is(#root div:has(> div > img[alt="Logo"]),
      [id$="-stage"][class*="min-h"] > div > div:only-child) {
    animation: none;
  }
}

@media (forced-colors: active) {
  body::before,
  body::after {
    display: none;
  }

  :is(#root div:has(> div > img[alt="Logo"]),
      [id$="-stage"][class*="min-h"] > div > div:only-child) {
    background: Canvas;
    border-color: CanvasText;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}