/* ============================================================
   PerfectGroup CRM — Bejelentkezés (futurisztikus)
   Márkaszínek: navy #06132E · kék #1E73BE + neon-cián kiemelés
   CSS-only animációk · JS nélkül minden látszik · reduced-motion barát
   ============================================================ */

:root{
  --navy:#06132E;
  --blue:#1E73BE;
  --cyan:#38e1ff;
  --violet:#6f6bff;
  --ink:#0d1b2a;
  --glass:rgba(16,30,58,.55);
  --glass-brd:rgba(120,180,255,.28);
  --font:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body.login-body{
  margin:0;font-family:var(--font);color:#eaf2ff;
  min-height:100vh;display:grid;place-items:center;padding:1.5rem;
  background:#03081a;
  overflow:hidden;position:relative;
}

/* ---------- Animált háttér ---------- */
.fx{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.fx .orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;mix-blend-mode:screen}
.orb-1{width:46vmax;height:46vmax;left:-10vmax;top:-14vmax;
  background:radial-gradient(circle at 30% 30%,var(--blue),transparent 65%);
  animation:drift1 18s ease-in-out infinite alternate}
.orb-2{width:40vmax;height:40vmax;right:-12vmax;top:8vmax;
  background:radial-gradient(circle at 60% 40%,var(--cyan),transparent 62%);
  opacity:.4;animation:drift2 22s ease-in-out infinite alternate}
.orb-3{width:38vmax;height:38vmax;left:20vmax;bottom:-16vmax;
  background:radial-gradient(circle at 50% 50%,var(--violet),transparent 60%);
  opacity:.38;animation:drift3 26s ease-in-out infinite alternate}

@keyframes drift1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6vmax,4vmax,0) scale(1.12)}}
@keyframes drift2{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-5vmax,6vmax,0) scale(1.08)}}
@keyframes drift3{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(4vmax,-5vmax,0) scale(1.15)}}

/* Perspektivikus rács-padló */
.grid-floor{position:absolute;left:-25%;right:-25%;bottom:-10%;height:60%;
  background-image:
    linear-gradient(rgba(120,180,255,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,180,255,.16) 1px,transparent 1px);
  background-size:44px 44px;
  transform:perspective(420px) rotateX(62deg);
  transform-origin:bottom center;
  mask-image:linear-gradient(to top,#000 0%,transparent 78%);
  -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 78%);
  animation:floor 8s linear infinite}
@keyframes floor{from{background-position:0 0}to{background-position:0 44px}}

/* Finom csillag-szemcse a tetején */
.fx::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(1px 1px at 20% 30%,rgba(255,255,255,.5),transparent),
    radial-gradient(1px 1px at 70% 20%,rgba(255,255,255,.35),transparent),
    radial-gradient(1px 1px at 85% 60%,rgba(255,255,255,.3),transparent),
    radial-gradient(1px 1px at 40% 70%,rgba(255,255,255,.25),transparent);
  opacity:.6}

/* ---------- Középső tartalom ---------- */
.login-shell{position:relative;z-index:1;width:100%;max-width:420px;text-align:center}

.login-brand{margin-bottom:1.6rem}
.brand-logo{width:240px;max-width:74%;height:auto;
  filter:drop-shadow(0 0 20px rgba(56,225,255,.22));
  animation:logoGlow 4.5s ease-in-out infinite}
@keyframes logoGlow{
  0%,100%{filter:drop-shadow(0 0 16px rgba(56,225,255,.16))}
  50%{filter:drop-shadow(0 0 26px rgba(56,225,255,.34))}
}
.login-tag{margin:1rem 0 0;font-size:.82rem;letter-spacing:3px;text-transform:uppercase;color:#8fb3d9}

/* ---------- Üveg-kártya ---------- */
.glass-card{position:relative;text-align:left;padding:2rem 1.9rem 1.75rem;border-radius:18px;
  background:var(--glass);
  border:1px solid var(--glass-brd);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 30px 80px rgba(0,10,40,.55),inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden}
.glass-card::before{content:"";position:absolute;top:0;left:-60%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(160,220,255,.10),transparent);
  animation:sheen 7s ease-in-out infinite;pointer-events:none}
@keyframes sheen{0%,60%{left:-60%}85%,100%{left:120%}}

.login-h1{margin:0 0 .3rem;font-size:1.35rem;font-weight:700;color:#fff}
.login-lead{margin:0 0 1.35rem;font-size:.88rem;color:#9db6d6}

.l-field{display:block;margin-bottom:1.05rem}
.l-label{display:block;font-size:.72rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
  color:#7fa6cf;margin-bottom:.45rem}
.l-input{width:100%;padding:.8rem .9rem;border-radius:11px;font:inherit;color:#eaf2ff;
  background:rgba(6,16,36,.6);border:1px solid rgba(120,180,255,.22);
  transition:border-color .18s,box-shadow .18s,background .18s}
.l-input::placeholder{color:#5f7ea3}
.l-input:focus{outline:none;border-color:var(--cyan);background:rgba(6,16,36,.85);
  box-shadow:0 0 0 3px rgba(56,225,255,.18),0 0 22px rgba(56,225,255,.15)}

.l-btn{width:100%;margin-top:.3rem;padding:.85rem 1rem;border:none;border-radius:11px;cursor:pointer;
  font:inherit;font-weight:700;letter-spacing:.4px;color:#04122a;position:relative;
  background:linear-gradient(120deg,var(--cyan),var(--blue));
  box-shadow:0 10px 30px rgba(30,115,190,.45),0 0 0 1px rgba(160,220,255,.35) inset;
  transition:transform .15s,box-shadow .2s,filter .2s}
.l-btn:hover{transform:translateY(-1px);filter:brightness(1.06);
  box-shadow:0 14px 38px rgba(56,225,255,.5),0 0 0 1px rgba(160,220,255,.5) inset}
.l-btn:active{transform:translateY(0)}

.login-note{margin:1.1rem 0 0;font-size:.78rem;color:#7c96b7;text-align:center}
.login-foot{margin-top:1.4rem;font-size:.75rem;color:#5b769a;text-align:center}

/* Hiba-üzenet dark stílusban */
.l-error{padding:.7rem .9rem;border-radius:11px;margin-bottom:1.1rem;font-size:.86rem;
  background:rgba(192,57,43,.16);border:1px solid rgba(255,120,110,.4);color:#ffc9c3}

/* ---------- Reszponzív ---------- */
@media (max-width:560px){
  .glass-card{padding:1.6rem 1.3rem}
  .brand-logo{width:190px}
}

/* ---------- Mozgás-érzékenység ---------- */
@media (prefers-reduced-motion:reduce){
  .orb-1,.orb-2,.orb-3,.grid-floor,.brand-logo,.glass-card::before{animation:none}
}