:root{
    --akrk-bg-1:#0e3b47;         
    --akrk-bg-2:#0f5c6c;         
    --akrk-card:#ffffff;         
    --akrk-ink:#0f1b1f;          
    --akrk-text:#ffffff;          
    --akrk-sub:#6b7a86;          
    --akrk-accent:#25B7C6;       
    --akrk-accent-2:#a6d6e5;     
    --akrk-border:#e6edf2;       
    --radius:18px;
    --shadow:0 18px 40px rgba(4, 33, 40, .12);
    --shadow-soft:0 8px 24px rgba(4, 33, 40, .10);
    --focus:0 0 0 3px rgba(37,183,198,.25);
  }
  
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{
    height:100%;
    font-family:'Poppins', -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Ubuntu,Arial,sans-serif;
    background:#fff;            
    color:var(--akrk-ink);
  }
  
  .login-layout{
    min-height:100dvh;
    display:grid;
    grid-template-columns: 1fr 800px;   
  }
  @media (max-width: 980px){
    .login-layout{ grid-template-columns: 1fr; }
  }
  
  /* ===== LADO VISUAL (GEOMÉTRICO) ===== */
  .lado-visual{
    position:relative; overflow:hidden; background:#fff;
    display:block;
  }
  @media (max-width: 980px){ .lado-visual{ display:none; } }
  
  
  .forma-geometrica{
    position:absolute; inset:-10% 0% -10% -20%;  
    background:
      radial-gradient(1200px 800px at 20% 40%, rgba(165, 226, 236,.28), transparent 60%),
      linear-gradient(140deg, var(--akrk-bg-2) 0%, var(--akrk-bg-1) 65%);
    clip-path: polygon(0 0, 76% 0, 100% 50%, 76% 100%, 0 100%, 12% 50%);
    filter: drop-shadow(0 40px 80px rgba(8,32,40,.25));
  }
  

  .padrao-ondas{
    position:absolute; inset:0;
    background:
      repeating-linear-gradient( 90deg, rgba(255,255,255,.08) 0 2px, transparent 2px 8px),
      repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0 2px, transparent 2px 10px);
    mix-blend-mode: soft-light;
    pointer-events:none;
  }
  
  /* ===== WRAPPER DO FORM ===== */
  .lado-form{
    display:flex; align-items:center; justify-content:center;
    padding:40px 24px;
    background:#fff;
  }
  .login-wrapper{
    width:100%;
    max-width:520px;
  }
  
  /* ===== CARD ===== */
  .login-container{
    width:90%;
    background:var(--akrk-card);
    border:1px solid var(--akrk-border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:32px 28px 26px;
    position:relative;
    overflow:hidden;
    animation:pop .5s ease-out both;
  }
  
  /* faixa superior no tom da marca */
  .login-container::before{
    content:"";
    position:absolute; left:0; right:0; top:0; height:6px;
    background:linear-gradient(90deg, var(--akrk-bg-2), var(--akrk-accent), var(--akrk-bg-2));
  }
  
  /* ===== TÍTULOS ===== */
  .titulo{
    text-align:center;
    font-weight:700;
    font-size:1.9rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#16343d;
    margin-bottom:6px;
    position:relative;
  }
  
  
  .titulo::after{
    content:"";
    display:block;
    width:56px; height:22px; margin:12px auto 0;
    background:
      linear-gradient(180deg, transparent 0 35%, var(--akrk-accent) 35% 65%, transparent 65%) left/2px 100% repeat-x;
    box-shadow:inset 0 0 16px rgba(166,214,229,.25);
    background-size:6px 100%;
  }
  .subtitulo{
    text-align:center; font-weight:500; font-size:1rem; color:#5e707a; margin-bottom:22px;
  }
  
  /* ===== FORM ===== */
  .login-form{
    display:flex; flex-direction:column; gap:14px;
  }
  .login-form input{
    width:100%;
    padding:12px 14px;
    border-radius:12px;
    background:#fff;
    border:1px solid var(--akrk-border);
    color:#0f2430;
    font-size:.98rem;
    outline:none;
    transition:border .2s ease, box-shadow .2s ease, transform .08s ease;
  }
  .login-form input::placeholder{ color:#94a3ad; }
  .login-form input:hover{ border-color:#cfdbe2; }
  .login-form input:focus{
    border-color:var(--akrk-accent);
    box-shadow:var(--focus);
    transform:translateY(-1px);
  }

  /* Link "Esqueci minha senha" */

  .forgot-password {
      margin-top: 10px;
      text-align: center;
  }

  .forgot-password a {
      color: #999; /* cinza claro */
      font-size: 12px;
      text-decoration: none;
      transition: color 0.2s ease;
  }

  .forgot-password a:hover {
      color: #666; /* um pouco mais escuro no hover */
      text-decoration: underline;
  }
  

  .back-login {
    margin-top: 10px;
    text-align: center;
  }

  .back-login a {
      color: #999; /* cinza claro */
      font-size: 12px;
      text-decoration: none;
      transition: color 0.2s ease;
  }

  .back-login a:hover {
      color: #666; /* cinza mais escuro no hover */
      text-decoration: underline;
  }
  /* ===== BOTÃO ===== */
  .login-form button{
    margin-top:6px;
    padding:12px 16px;
    border:none;
    border-radius:12px;
    font-weight:700; font-size:1rem; cursor:pointer;
    color:#06323a;
    box-shadow:var(--shadow-soft);
    transition:transform .08s ease, box-shadow .2s ease, filter .2s ease;
  }
  .login-form button:hover{ transform:translateY(-2px); filter:saturate(105%); }
  .login-form button:active{ transform:translateY(0); }
  
  /* estado de carregamento */
  .login-form button.loading{
    pointer-events:none; opacity:.85; position:relative;
  }
  .login-form button.loading::after{
    content:""; position:absolute; inset:0; margin:auto; width:16px; height:16px;
    border:2px solid transparent; border-top-color:#06323a; border-radius:50%;
    animation:spin 1s linear infinite;
  }
  
  /* ===== ERRO ===== */
  .erro{
    margin-top:14px; text-align:center; font-weight:600;
    color:#9b1c1c;
    background:#fde8e8;
    border:1px solid #facdcd;
    padding:10px 12px; border-radius:10px;
  }
  
  /* ===== RODAPÉ ===== */
  .footer{
    margin-top:16px; text-align:center; color:#758993; font-size:.9rem;
  }
  
  /* ===== ACESSIBILIDADE ===== */
  :focus-visible{ outline:2px solid var(--akrk-accent); outline-offset:2px; }
  
  /* ===== ANIMAÇÕES ===== */
  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes pop{
    from{opacity:0; transform:translateY(10px) scale(.98)}
    to{opacity:1; transform:translateY(0) scale(1)}
  }
  
  /* ===== RESPONSIVO ===== */
  @media (max-width: 520px){
    .login-container{ padding:26px 20px 22px; border-radius:14px }
    .titulo{ font-size:1.6rem }
  }
  

.area-voltar {
  margin-top: 10px;
  text-align: center;
}


.botao-voltar {
  color: #999;
  font-size: 12px;
  text-decoration: none;
  line-height: 1;
  display: inline-block;
  padding: 2px 4px;         
  border-radius: 4px;
  transition: color .2s ease, text-decoration-color .2s ease;
}

.botao-voltar:hover {
  color: #666;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.botao-voltar:active {
  color: #555;
}

.botao-voltar:focus-visible {
  outline: 2px solid #0B5FFF;
  outline-offset: 2px;
}