/* V2 giriş ekranı (yalnız uygulamanın kendi girişi: #app .login). Giriş sonrası kabuğa/ekranlara kural sızmaz.
 * Agency CRM giriş/vitrin kalıbı: Inter, marka #2f3fbf, 8px yarıçap, beyaz kart, tutarlı düğme/form.
 * KENDİ KENDİNE YETER: tokens.css yüklenmese de çalışır (değişkenler --az-*). Eski CSS'lere dokunmaz; en sonda yüklenir.
 * Mantıksal özellikler kullanılır (RTL için). Belge/teklif yüzeyi renklerine dokunulmaz (portal makbuz sayfası ayrı belgedir). */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  --az-brand: #2f3fbf; --az-brand-2: #2331a3; --az-brand-soft: #e9ecff;
  --az-canvas: #f2f4f8; --az-surface: #fff; --az-surface-2: #f7f8fb;
  --az-ink: #0e1530; --az-ink-2: #39425e; --az-muted: #5d6781; --az-line: #e1e5ee; --az-line-2: #edf0f6;
  --az-good: #0c8a5c; --az-good-soft: #def6ea; --az-bad: #c0332b; --az-bad-soft: #fde4e1; --az-warn-soft: #fdefd3; --az-warn: #8a4f06;
  --az-night: #10153a;
  --az-font: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --az-r: 8px; --az-r-sm: 6px;
  --az-sh-sm: 0 1px 2px rgba(14, 21, 48, .06);
  --az-sh-lg: 0 18px 40px rgba(14, 21, 48, .18), 0 4px 12px rgba(14, 21, 48, .08);
  --az-ring: 0 0 0 3px rgba(47, 63, 191, .25);
}

/* ======================= 1) GİRİŞ EKRANI (#app .login): Agency .center-screen + .card.narrow ölçüleri ======================= */
html body #app .login {
  min-height: 100vh; display: grid; place-items: center; padding: 20px; font-family: var(--az-font); font-size: 14px; line-height: 1.5;
  background: radial-gradient(1000px 500px at 12% -5%, #2a3290 0, transparent 60%), var(--az-night);
}
html body #app .login form {
  position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 100%; max-width: 400px; margin: 0; padding: 28px;
  background: var(--az-surface); color: var(--az-ink); border: 1px solid var(--az-line); border-radius: var(--az-r); overflow: visible;
  box-shadow: var(--az-sh-lg); font-family: var(--az-font);
}
html body #app .login form::before { display: none; }
/* marka bloğu: logo kartın üstünde, beyaz (koyu zeminde okunur); kart ölçüleri Agency ile birebir kalır */
html body #app .login img { position: absolute; left: 0; bottom: calc(100% + 18px); width: auto; height: 36px; max-width: 220px; margin: 0; display: block; filter: brightness(0) invert(1); object-fit: contain; object-position: left bottom; }
/* acenta portalı logosu 3:2 tuvalde küçük duruyor (içerik ~%30): tuvali büyütüp boşluğu negatif boşlukla alıyoruz */
html body #app .login img[src*="k=logo"] { height: 120px; max-width: none; left: -4px; bottom: calc(100% - 16px); }
html body #app .login h1 { font: 650 1.4rem/30px var(--az-font); letter-spacing: 0; text-align: start; margin: 0 0 16px; color: var(--az-ink); }
html body #app .login p { font-size: 14px; line-height: 21px; text-align: start; color: var(--az-muted); margin: 0 0 12px; }
html body #app .login label { display: block; font: 550 .8rem/1.5 var(--az-font); color: var(--az-ink-2); margin: 0 0 14px; }
html body #app .login input {
  display: block; box-sizing: border-box; width: 100%; min-height: 38px; height: auto; margin-top: 5px; padding: 8px 11px; font: 400 14px/1.5 var(--az-font); color: var(--az-ink);
  background: var(--az-surface); border: 1px solid var(--az-line); border-radius: var(--az-r-sm); box-shadow: none; transition: border-color .12s, box-shadow .12s;
}
html body #app .login input:hover { border-color: #98a1b6; }
html body #app .login input:focus { outline: 2px solid transparent; border-color: var(--az-brand); box-shadow: 0 0 0 3px rgba(47, 63, 191, .2); }
html body #app .login .primary {
  align-self: flex-end; width: auto; min-width: 0; min-height: 36px; height: auto; margin: 0; padding: 7px 13px; font: 550 14px/1.5 var(--az-font); letter-spacing: 0;
  color: #fff; background: var(--az-brand); border: 1px solid var(--az-brand); border-radius: var(--az-r-sm); box-shadow: var(--az-sh-sm); transition: background .1s, border-color .1s;
}
html body #app .login .primary:not(:disabled):hover { background: var(--az-brand-2); border-color: var(--az-brand-2); }
html body #app .login .primary:disabled { opacity: .5; cursor: not-allowed; background: var(--az-brand); }
html body #app .login .primary:focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 3px rgba(47, 63, 191, .3); }
html body #app .login .err, html body #app .login .error {
  margin: 16px 0 0; padding: 10px 12px; font-size: 14px; color: var(--az-bad); background: var(--az-bad-soft);
  border: 1px solid rgba(192, 51, 43, .4); border-radius: var(--az-r-sm);
}
html body #app .login .err:empty { display: none; }
html body #app .login select { width: auto; min-height: 32px; padding: 0 10px; font: 500 13px var(--az-font); color: var(--az-ink); background: var(--az-surface); border: 1px solid var(--az-line); border-radius: var(--az-r-sm); }

/* Sayfa düzeni (yalnız giriş görünürken geçerli; giriş sonrası #app .login yok olunca kurallar da biter):
 * sayfa ekrana sığar, altbilgi şeridi giriş zemini renginde. */
body:has(#app > .login), body:has(#app > .fatal) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: var(--az-night); color-scheme: light; }
body:has(#app > .login) #app, body:has(#app > .fatal) #app { flex: 1 0 auto; display: flex; flex-direction: column; }
html body:has(#app > .login) #app > .login { flex: 1 0 auto; min-height: 0; }
html body:has(#app > .fatal) #app { display: grid; place-items: center; min-height: 0; }
body:has(#app > .login) .azt-alt, body:has(#app > .fatal) .azt-alt { flex: none; background: var(--az-night); color: #8f98c9; }

/* Oturumsuz/açılış hata ekranı ("Uygulama başlatılamadı ..."): giriş kartı gibi sade kart */
html body #app:has(> .fatal) { min-height: 0; display: grid; place-items: center; padding: 20px; font-family: var(--az-font); background: radial-gradient(1000px 500px at 12% -5%, #2a3290 0, transparent 60%), var(--az-night); }
html body #app > .fatal {
  flex: none; box-sizing: border-box; width: 100%; max-width: 400px; margin: 0; padding: 28px; text-align: start;
  background: var(--az-surface); color: var(--az-bad); border: 1px solid var(--az-line); border-radius: var(--az-r); box-shadow: var(--az-sh-lg);
  font: 550 14px/1.5 var(--az-font); overflow-wrap: anywhere;
}
html body #app > .fatal button, html body #app > .fatal .btn {
  margin-top: 16px; min-height: 36px; padding: 7px 13px; font: 550 14px/1.5 var(--az-font); color: #fff; background: var(--az-brand); border: 1px solid var(--az-brand); border-radius: var(--az-r-sm); box-shadow: var(--az-sh-sm); cursor: pointer;
}