/* =====================================================================
   IT Fix • Auth Login (ortak) — Açık, ferah, kurumsal SaaS giriş ekranı
   Body class: .auth-page.admin-login-page  /  .auth-page.customer-login-page
   Manzara arka planı CSS değişkeni ile kolay değiştirilir:
     --auth-bg-image. Görsel yoksa açık soft gradient'e düşer (ekran bozulmaz).
   Harici CDN yok; ikonlar inline SVG, font system-ui. Animasyon yok.
   ===================================================================== */

.auth-page{
  /* ---- Renk paleti (açık tema) ---- */
  --auth-primary:#22b8ad;        /* kurumsal soft turkuaz (gradient başı) */
  --auth-primary-dark:#0f95a3;   /* gradient sonu / link */
  --auth-focus:#159da3;          /* input focus border */
  --auth-text:#182337;           /* başlık koyu lacivert/gri */
  --auth-muted:#667085;          /* soft alt metin */
  --auth-border:#cfd9e6;
  --auth-card-bg:rgba(255,255,255,.76);
  --auth-ring:rgba(21,157,163,.14);
  --auth-radius:32px;
  --auth-font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --auth-bg-image:none;          /* sayfa sınıfı override eder */
}

/* Arka plan görselleri — buradan kolayca değiştirilebilir.
   Admin ve müşteri AYNI tasarım dilini/paletini kullanır.
   JPG'ler eklendiğinde otomatik öne geçer; mevcut webp manzara yedek kalır. */
.customer-login-page{ --auth-bg-image:url("../img/auth/customer-bg.jpg"), url("../img/auth/auth-bg.webp"); }
.admin-login-page{ --auth-bg-image:url("../img/auth/admin-bg.jpg"), url("../img/auth/auth-bg.webp"); }

*,
.auth-page *,
.auth-page *::before,
.auth-page *::after{ box-sizing:border-box; }

html,body{ height:100%; }

.auth-page{
  margin:0; min-height:100vh;
  color:var(--auth-text);
  font-family:var(--auth-font);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  display:flex; align-items:center; justify-content:flex-end;
  padding:48px clamp(3rem,8vw,9rem);
  overflow-x:hidden;
  position:relative;
  isolation:isolate;

  /* Katmanlar (üstten alta):
     1) çok hafif açık renk dengeleme
     2) sayfa görseli (admin/customer jpg varsa onu, yoksa auth-bg.webp)
     3) görsel yoksa fallback açık gradient */
  background-image:
    linear-gradient(135deg, rgba(248,250,252,.06), rgba(241,245,249,.10)),
    var(--auth-bg-image),
    linear-gradient(120deg, #e8f6f4 0%, #eaf1fb 55%, #f6f9fc 100%);
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}

.auth-page::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.28) 48%,
      rgba(255,255,255,.72) 100%);
}

/* ---------------- Login kartı ---------------- */
.auth-card{
  position:relative;
  z-index:1;
  width:min(460px, 100%);
  background:var(--auth-card-bg);
  border:1px solid rgba(255,255,255,.88);
  border-radius:var(--auth-radius);
  box-shadow:
    0 34px 90px rgba(15,23,42,.20),
    0 8px 24px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(24px) saturate(135%);
          backdrop-filter:blur(24px) saturate(135%);
  padding:44px 42px;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .auth-card{ background:rgba(255,255,255,.94); }
}

/* Logo + başlık */
.auth-head{ text-align:center; margin-bottom:1.8rem; }
.auth-logo{ display:inline-block; margin-bottom:1.15rem; }
.auth-logo img{ width:198px; max-width:72%; height:auto; object-fit:contain; display:block; }
.auth-title{ margin:0 0 .42rem; font-size:28px; line-height:1.2; font-weight:750; letter-spacing:-.2px; color:var(--auth-text); }
.auth-sub,
.auth-subtitle{ margin:0; font-size:15px; color:var(--auth-muted); line-height:1.55; }

/* Alert — kompakt ve zarif (~44px) */
.auth-alert{
  display:flex; align-items:center; gap:.5rem; min-height:42px;
  margin-bottom:1.1rem; padding:10px 14px;
  font-size:.84rem; line-height:1.35; border-radius:14px; border:1px solid transparent;
}
.auth-alert svg{ width:16px; height:16px; flex:0 0 auto; }
.auth-alert.err,
.auth-alert.error{ color:#b42318; background:rgba(254,242,242,.82); border-color:rgba(248,113,113,.42); }
.auth-alert.info,
.auth-alert.success{ color:#0f766e; background:rgba(236,253,245,.78); border-color:rgba(45,212,191,.38); }

/* Form alanları */
.auth-field{ margin-bottom:1.1rem; }
.auth-field label{ display:block; margin-bottom:.4rem; font-size:.84rem; font-weight:600; color:#334155; }
.auth-input{
  display:flex; align-items:center;
  background:rgba(255,255,255,.86); border:1px solid var(--auth-border); border-radius:16px;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.auth-input .pre{ display:grid; place-items:center; width:50px; height:56px; color:#8091aa; flex:0 0 auto; }
.auth-input .pre svg{ width:18px; height:18px; }
.auth-input input{
  flex:1 1 auto; min-width:0; height:56px; border:0; outline:0; background:transparent;
  color:#1f2a3d; font-size:15px; font-family:inherit; padding:0 .4rem 0 0;
}
.auth-input input::placeholder{ color:#8795aa; }
.auth-input .toggle{
  flex:0 0 auto; width:50px; height:56px; display:grid; place-items:center;
  background:transparent; border:0; cursor:pointer; color:#8091aa;
  transition:color .18s ease;
}
.auth-input .toggle:hover{ color:var(--auth-primary-dark); }
.auth-input .toggle svg{ width:18px; height:18px; }
.auth-input:focus-within{
  border-color:var(--auth-focus); background:rgba(255,255,255,.94);
  box-shadow:0 0 0 4px var(--auth-ring);
}

/* Beni hatırla + şifremi unuttum */
.auth-row{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap; margin:.2rem 0 1.3rem; }
.auth-check{ display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; user-select:none; font-size:.86rem; color:#475569; }
.auth-check input{ position:absolute; opacity:0; width:0; height:0; }
.auth-check .box{
  width:18px; height:18px; border-radius:5px; flex:0 0 auto;
  border:1px solid #cbd5e1; background:#fff; display:grid; place-items:center;
  transition:all .15s ease;
}
.auth-check .box svg{ width:12px; height:12px; color:#fff; opacity:0; transition:opacity .15s ease; }
.auth-check input:checked + .box{ background:var(--auth-primary); border-color:var(--auth-primary); }
.auth-check input:checked + .box svg{ opacity:1; }
.auth-check input:focus-visible + .box{ box-shadow:0 0 0 4px var(--auth-ring); }
.auth-link{ font-size:.86rem; color:var(--auth-primary-dark); text-decoration:none; font-weight:600; }
.auth-link:hover{ text-decoration:underline; }

/* Ana buton */
.auth-btn{
  width:100%; min-height:56px; border:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.9rem 1rem; border-radius:16px;
  font-size:16px; font-weight:700; font-family:inherit; color:#fff;
  background:linear-gradient(135deg, #22b8ad 0%, #0f95a3 100%);
  box-shadow:
    0 16px 34px rgba(15,149,163,.26),
    inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.auth-btn svg{ width:18px; height:18px; }
.auth-btn:hover{
  transform:translateY(-1px);
  box-shadow:
    0 20px 40px rgba(15,149,163,.32),
    inset 0 1px 0 rgba(255,255,255,.30);
  filter:saturate(1.04);
}
.auth-btn:active{ transform:translateY(0); filter:brightness(.97); }

/* Ayraç */
.auth-divider{ display:flex; align-items:center; gap:.8rem; margin:1.15rem 0; color:#9aa7bd; font-size:.77rem; }
.auth-divider::before,.auth-divider::after{ content:""; height:1px; flex:1; background:var(--auth-border); }

/* Microsoft butonu — beyaz, border'lı, kurumsal (yalnızca aktifken render edilir) */
.auth-ms{
  width:100%; min-height:52px; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.75rem 1rem; border-radius:14px; cursor:pointer; text-decoration:none;
  font-size:.92rem; font-weight:600; color:#334155;
  background:#fff; border:1px solid #dce3ec;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.auth-ms:hover{ background:#f8fafc; border-color:#c6cfdb; box-shadow:0 6px 16px -10px rgba(15,23,42,.2); }
.auth-ms .ms-logo{ width:18px; height:18px; flex:0 0 auto; }

/* Alt güven notu */
.auth-foot{ margin-top:1.4rem; text-align:center; }
.auth-foot .secure{ display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; color:var(--auth-muted); }
.auth-foot .secure svg{ width:15px; height:15px; color:var(--auth-primary-dark); }

.hidden{ display:none !important; }

/* ---------------- Müşteri girişi — sol editorial metin alanı ----------------
   Yalnızca .customer-login-page için. KUTU YOK: metin doğrudan manzara
   üzerinde durur; okunurluk için yalnızca kenarsız/yumuşak lokal bir ışık
   yıkaması (radial fade) + ince text-shadow kullanılır. Login kartı ana
   odak olarak kalır, manzara mümkün olduğunca görünür kalır. */
.customer-login-page{ justify-content:space-between; gap:clamp(1.5rem,5vw,4rem); }

.customer-login-page .auth-aside{
  position:relative; z-index:1;
  flex:1 1 auto; min-width:0;
  max-width:460px;
  align-self:stretch;
  display:flex; flex-direction:column; justify-content:center; /* sol orta */
}
.customer-login-page .auth-aside-inner{
  position:relative;
  max-width:420px;
  /* kart/padding hissi yok — yalnızca içeriğin kapladığı alan kadar */
}
/* Metnin arkasında kenarı belli olmayan, feather'lı yumuşak ışık.
   Hiçbir border/radius/blur yok; sadece şeffaflığa giden radial gradient. */
.customer-login-page .auth-aside-inner::before{
  content:"";
  position:absolute; inset:-10% -16%;
  z-index:-1; pointer-events:none;
  background:radial-gradient(115% 95% at 26% 42%,
              rgba(248,250,252,.50) 0%,
              rgba(248,250,252,.28) 40%,
              rgba(248,250,252,0) 72%);
}
.customer-login-page .auth-aside-title{
  margin:0 0 1rem;
  font-size:clamp(33px,3vw,42px); line-height:1.16;
  font-weight:740; letter-spacing:-.6px;
  color:#16233b;                 /* soft koyu lacivert */
  text-shadow:0 1px 2px rgba(255,255,255,.55), 0 2px 16px rgba(255,255,255,.32);
}
.customer-login-page .auth-aside-desc{
  margin:0 0 1.55rem;
  font-size:16.5px; line-height:1.62;
  color:#3b4a61;                 /* sakin slate */
  max-width:42ch;
  text-shadow:0 1px 2px rgba(255,255,255,.5);
}
.customer-login-page .auth-aside-tags{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.customer-login-page .auth-aside-tags li{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.74rem; font-weight:600; letter-spacing:.3px; color:#23364f;
  padding:.3rem .72rem; border-radius:999px;
  background:rgba(255,255,255,.34);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 1px 2px rgba(15,23,42,.06);
}
/* Küçük teal aksan noktası — editorial premium dokunuş */
.customer-login-page .auth-aside-tags li::before{
  content:""; flex:0 0 auto;
  width:5px; height:5px; border-radius:50%;
  background:var(--auth-primary-dark);
}

/* ---------------- Responsive ---------------- */
@media (max-width:900px){
  /* Tablet: kart ortaya yaklaşır */
  .auth-page{ justify-content:center; padding:32px clamp(1rem,4vw,3rem); }
}
@media (max-width:520px){
  /* Mobil: kart ortada, tam genişliğe yakın; arka plan devam eder */
  .auth-page{ padding:24px 16px; align-items:center; }
  .auth-page::before{
    background:linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.38) 42%, rgba(255,255,255,.68) 100%);
  }
  .auth-card{ width:100%; padding:32px 24px; border-radius:26px; }
  .auth-logo img{ width:176px; max-width:74%; }
  .auth-title{ font-size:24px; }
}

/* Müşteri girişi: dar ekranlarda sol panel gizlenir, kart ortalanır.
   (Paylaşılan tablet media'sındaki ortalamayı specificity için tekrar eder.) */
@media (max-width:1024px){
  .customer-login-page{ justify-content:center; gap:0; }
  .customer-login-page .auth-aside{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .auth-input,.auth-btn,.auth-ms,.auth-link,.auth-check .box{ transition:none; }
}