/* =========================
   Sadece Giriş Formu Tasarımı + Sabit Alt Footer
   ========================= */
:root{
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --bg-1:#f6f9ff; --bg-2:#eef3ff; --bg-dark:#0e131a;
  --card-bg:rgba(255,255,255,.64); --card-bg-dark:rgba(24,30,38,.64);
  --text:#17202a; --text-light:#4c5a6b; --text-dark:#e7edf6;
  --border:rgba(0,0,0,.08); --border-dark:rgba(255,255,255,.12);
  --accent:#1e63ff; --accent-2:#ff7a00; --accent-3:#6366f1;
  --radius-sm:8px; --radius-md:14px; --radius-lg:22px;
  --shadow-md:0 12px 34px -12px rgba(0,0,0,.28);
  --focus:0 0 0 4px rgba(30,99,255,.25);
  --blur:18px;
  --transition:160ms cubic-bezier(.4,0,.2,1);
  --footer-h:52px; /* sabit footer yüksekliği */
}
@media (prefers-color-scheme: dark){
  :root{
    --bg-1:#0e131a; --bg-2:#141c26;
    --text:#eff4fb; --text-light:#96a3b5;
    --card-bg:var(--card-bg-dark); --border:var(--border-dark);
  }
}

html,body{height:100%; margin:0; padding:0;}
/* Sayfa kaymasın */
html{overflow:hidden;}
body.auth-body{
  font-family:var(--font);
  color:var(--text);
  background:linear-gradient(180deg,var(--bg-1),var(--bg-2));
  -webkit-font-smoothing:antialiased;
  height:100svh; /* dinamik viewport */
  min-height:100svh;
  overflow:hidden; /* dikey kaydırma yok */
  display:flex;
  flex-direction:column;
  position:relative;
}

/* Arka plan dekor */
.bg-soft{position:fixed; inset:0; pointer-events:none; z-index:-1;}
.bg-mesh{
  position:absolute; inset:-20%;
  background:
    radial-gradient(35% 45% at 15% 20%, rgba(99,102,241,.22), transparent 60%),
    radial-gradient(45% 55% at 85% 80%, rgba(30,99,255,.18), transparent 60%),
    radial-gradient(30% 40% at 70% 15%, rgba(255,122,0,.12), transparent 60%);
  filter:blur(18px);
}
.bg-dots{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(0,0,0,.06) 1px, transparent 1px);
  background-size:18px 18px; mix-blend-mode:multiply; opacity:.35;
}
@media (prefers-color-scheme: dark){
  .bg-dots{background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);}
}

/* Tek sütun layout: yüksekliği footer yüksekliğine göre ayarla */
.auth-layout{
  width:100%;
  height:calc(100svh - var(--footer-h) - env(safe-area-inset-bottom, 0px));
  min-height:calc(100svh - var(--footer-h) - env(safe-area-inset-bottom, 0px));
  display:grid;
  grid-template-columns:minmax(300px, 560px);
  align-items:center;
  justify-content:center;
  padding:0 4vw;
  box-sizing:border-box;
}

/* Form Kartı */
.auth-card{
  position:relative; background:var(--card-bg);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:1.2rem 1rem 1.2rem;
  box-shadow:var(--shadow-md); backdrop-filter:blur(var(--blur));
  display:flex; flex-direction:column;
  max-height:100%; /* kart içeriği taşmasın */
}

/* Form üstü intro: logo + başlık */
.form-intro{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem; margin:0 0 .8rem 0;
}

/* LOGO ROZETİ: büyütülmüş + çerçeve */
.brand-badge{
  width:120px; height:120px; border-radius:50%; position:relative;
  display:grid; place-items:center;
  background:radial-gradient(circle at 30% 30%, rgba(30,99,255,.22), rgba(99,102,241,.15) 55%, rgba(255,255,255,.08));
  box-shadow:0 14px 26px -12px rgba(0,0,0,.35);
  outline:5px solid rgba(30,99,255,.25);
  outline-offset:10px;
}
.brand-logo{width:90px; height:auto; filter:drop-shadow(0 4px 10px rgba(0,0,0,.25));}
.form-title{
  font-size:1.28rem; font-weight:800; letter-spacing:.4px; margin:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-3) 55%,var(--accent-2));
  -webkit-background-clip:text; color:transparent; text-align:center;
}

/* Kart başlığı açıklama */
.card-head{margin:0 0 .7rem 0;}
.card-desc{
  margin:0; color:var(--text); font-size:.92rem; font-weight:600; letter-spacing:.25px;
}

/* Alert slot sabit yükseklik */
.alert-slot{min-height:54px; display:flex; align-items:flex-start;}
.alert{
  display:flex; gap:.7rem; padding:.65rem .85rem; font-size:.78rem;
  border-radius:var(--radius-md); border:1px solid;
  background:rgba(198,40,40,.08); border-color:rgba(198,40,40,.35); color:#a52727;
}
.alert-icon{font-size:.95rem; line-height:1;}

/* Form */
.auth-form{display:flex; flex-direction:column; gap:.85rem;}
.form-group{display:flex; flex-direction:column; gap:.4rem;}
.form-label{font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--text-light);}
.input-wrapper{position:relative; display:flex; align-items:center;}
.input-icon{position:absolute; left:.8rem; top:50%; transform:translateY(-50%); font-size:.85rem; opacity:.75; pointer-events:none;}
.form-input{
  width:100%; font:inherit; font-size:.95rem; padding:.8rem .9rem .8rem 2.1rem;
  border:1px solid var(--border); border-radius:var(--radius-md); outline:none; color:var(--text);
  background:rgba(255,255,255,.6); transition:var(--transition);
}
@media (prefers-color-scheme: dark){.form-input{background:rgba(32,40,52,.6); color:var(--text);}}
.form-input::placeholder{color:#96a3b2;}
.form-input:focus{border-color:var(--accent); box-shadow:var(--focus); background:rgba(255,255,255,.82);}

.toggle-password{
  position:absolute; right:.45rem; top:50%; transform:translateY(-50%);
  background:none; border:0; color:var(--accent);
  font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.7px;
  padding:.3rem .5rem; cursor:pointer; border-radius:6px;
}
.toggle-password:hover,.toggle-password:focus{background:rgba(30,99,255,.12);}

.capslock-slot{min-height:18px;}
.capslock-hint{font-size:.65rem; color:#c62828; font-weight:700; letter-spacing:.3px;}

.form-options{display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:.2rem;}
.checkbox{display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; cursor:pointer; user-select:none;}
.checkbox input{width:15px; height:15px; accent-color:var(--accent); cursor:pointer;}
.forgot-link{
  color:var(--accent); font-weight:700; font-size:.72rem; text-decoration:none; letter-spacing:.4px; position:relative;
}
.forgot-link::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--accent); transition:width var(--transition);
}
.forgot-link:hover::after,.forgot-link:focus::after{width:100%;}
.btn{
  border:0; display:inline-flex; align-items:center; justify-content:center;
  gap:.55rem; font-weight:700; border-radius:var(--radius-md); transition:var(--transition);
}
.btn-primary{
  color:#fff; background:linear-gradient(90deg,var(--accent),var(--accent-3) 55%,var(--accent-2));
  padding:.9rem 1.15rem; font-size:.95rem; box-shadow:0 6px 16px -8px rgba(30,99,255,.45);
}
.btn-primary:hover{filter:brightness(.97); transform:translateY(-1px);}
.btn-primary:active{transform:translateY(0);}
.btn-spinner{width:15px; height:15px; border:2px solid rgba(255,255,255,.55); border-top-color:#fff; border-radius:50%; animation:spin 1s linear infinite; display:none;}
.submit-btn.loading .btn-spinner{display:inline-block;}
.submit-btn.loading .btn-label{opacity:.6;}
@keyframes spin{to{transform:rotate(360deg);}}

/* Yasal metin */
.legal-text{
  margin-top:.6rem;
  text-align:center;
  font-size:.88rem;
  color:var(--text);
  font-weight:600;
  letter-spacing:.2px;
}
.legal-text small{font:inherit; opacity:.95;}

/* Sabit alt footer: sayfanın içinde, formun dışında */
.site-footer{
  position:fixed;
  left:0; right:0; bottom:0;
  height:calc(var(--footer-h) + env(safe-area-inset-bottom, 0px));
  padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  color:var(--text-light);
  border-top:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.55));
  backdrop-filter:blur(8px);
  z-index:10;
}
@media (prefers-color-scheme: dark){
  .site-footer{
    background:linear-gradient(180deg, rgba(24,30,38,.65), rgba(24,30,38,.55));
  }
}

/* Mobil uyarlamalar: tüm içerik görünür, kaydırma yok */
@media (max-width:640px){
  .auth-layout{
    padding:max(8px, env(safe-area-inset-top)) 4vw 0;
    grid-template-columns:minmax(300px, 520px);
  }
  .auth-card{padding:1rem .9rem 1rem;}
  .brand-badge{
    width:104px; height:104px;
    outline:4px solid rgba(30,99,255,.28); outline-offset:8px;
  }
  .brand-logo{width:82px;}
  .form-title{font-size:1.2rem;}
  .card-desc{font-size:.9rem;}
  .submit-btn{width:100%;}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn-spinner{animation:none;}
}