:root{
  --brand:#0F212C; /* lacivert marka rengi (arka plan) */
  --ink:#e7eef6; --muted:#9db3c5; --bg:#0A141C; --soft:#0f1b26; --line:#162331;
  --ok:#12B886; --warn:#f08c00; --err:#ff6b6b; --white:#fff;
  --radius:14px; --r-lg:20px; --shadow:0 14px 40px rgba(0,0,0,.35);
  --ring:#2b5cff;                 /* focus halkası */
  --focusGlow:0 0 0 3px rgba(43,92,255,.25);
  --header-h:60px;                /* header yüksekliği varsayımı */
}

*{ box-sizing:border-box }
html,body{ height:100% }

/* Global (header’ı bozmaz) */
body{
  margin:0;
  font-family: Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background: var(--brand);   /* TAM LACİVERT ARKA PLAN */
  color: var(--ink);
}

/* === Sayfa kapsayıcısı: içerik ortalama + header’dan bağımsız === */
.wrap{
  width:100%;
  max-width:900px;
  margin:0 auto;              /* yatay merkez */
  padding:24px 16px;
  min-height: calc(100dvh - var(--header-h));  /* header yüksekliği düşülmüş */
  display:flex;
  flex-direction:column;
  justify-content:center;     /* dikey merkez */
  gap:18px;
}

/* HERO / Üst Bant */
.wrap .hero{
  background: var(--soft);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  padding:28px;
}
.wrap .brand{ margin:0 0 .4rem; color:#cfe6ff }
.wrap .brand span{ font-weight:400 }
.wrap .brand b{ font-weight:800 }
.wrap h1{ margin:.2rem 0 .6rem; font-size:2rem; color:#fff }
.wrap .note{ color:var(--muted); font-size:.95rem }

/* GRID */
.wrap .grid{
  display:grid;
  gap:18px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width:900px){
  .wrap .grid{ grid-template-columns:1fr; }
}

/* CARD */
.wrap .card{
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent), var(--soft);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}
.wrap .card h2{
  color:#cfe6ff; font-size:1.25rem; margin:0 0 .6rem;
}

/* FORM ALANLARI */
.wrap .field{ display:flex; flex-direction:column; gap:8px; margin:.6rem 0 }
.wrap label{ font-weight:700; color:#cfe6ff }
.wrap input[type="email"]{
  appearance:none; width:100%;
  padding:.9rem 1rem; border-radius:12px;
  border:1px solid var(--line);
  background:#0c1721; color:var(--ink);
  outline:none; transition:.15s border-color ease, .15s box-shadow ease, .15s background ease, .15s transform ease;
}
.wrap input[type="email"]::placeholder{ color:var(--muted); opacity:.9 }
.wrap input[type="email"]:focus{
  border-color:var(--ring);
  box-shadow: var(--focusGlow);
  background:#0d1b28;
}
.wrap .hint{ color:var(--muted); font-size:.9rem }
.wrap .error{ color:var(--err); font-size:.92rem; display:none }
.wrap .status{ margin-top:10px; font-size:.95rem; display:none }
.wrap .status.ok{ color:var(--ok) }
.wrap .status.warn{ color:var(--warn) }
.wrap .status.err{ color:var(--err) }

/* Hata/başarı (opsiyonel sınıflar) */
.wrap .field.has-error input[type="email"],
.wrap input[type="email"][aria-invalid="true"]{
  border-color: var(--err);
  box-shadow: 0 0 0 3px rgba(255,107,107,.16);
}
.wrap .field.has-success input[type="email"]{
  border-color: var(--ok);
  box-shadow: 0 0 0 3px rgba(18,184,134,.18);
}

/* AKSİYONLAR & BUTONLAR */
.wrap .actions{ display:flex; gap:10px; align-items:center; margin-top:.6rem; flex-wrap:wrap }
.wrap button{
  background: linear-gradient(180deg, #2A6BFF, #1A4ED8);
  color:var(--white);
  border:1px solid rgba(255,255,255,.06);
  padding:.9rem 1.05rem; border-radius:12px; font-weight:800; cursor:pointer;
  transition: transform .05s ease, opacity .2s ease, box-shadow .15s ease, filter .15s ease;
}
.wrap button:hover{ box-shadow:0 10px 26px rgba(42,107,255,.25); filter:brightness(1.03) }
.wrap button:focus{ outline:none; box-shadow: var(--focusGlow) }
.wrap button:disabled{ opacity:.6; cursor:not-allowed }
.wrap button:active{ transform: translateY(1px) }

/* BAĞLANTILAR */
.wrap .links{ margin-top:10px }
.wrap .links a{ color:#9ecbff; font-weight:700; text-decoration:none }
.wrap .links a:hover{ text-decoration:underline }

/* YARDIM KARTI */
.wrap .help-card{ display:flex; flex-direction:column; gap:8px }
.wrap .list{ margin:.2rem 0 .2rem 1rem; color:#d6e6f7 }
.wrap .list li{ margin:.15rem 0 }
.wrap .mini{ color:var(--muted); font-size:.9rem; margin-top:6px }

/* Autofill kontrast */
.wrap input:-webkit-autofill{
  -webkit-text-fill-color: var(--ink);
  transition: background-color 9999s ease-in-out 0s;
}

/* Hareketi azalt */
@media (prefers-reduced-motion: reduce){
  .wrap *, .wrap *::before, .wrap *::after{
    animation:none !important; transition:none !important;
  }
}

/* MOBİL UYUM */
@media (max-width:768px){
  .wrap{ padding:18px 14px; }
  .wrap h1{ font-size:1.6rem }
  .wrap .hero{ padding:20px }
  .wrap .card h2{ font-size:1.1rem }
  .wrap button{ width:100% }       /* mobilde buton tek satır */
  .wrap .actions{ gap:8px }
}

@media (max-width:480px){
  .wrap{ padding:16px 12px; }
  .wrap h1{ font-size:1.4rem }
  .wrap .hero{ padding:16px }
  .wrap .grid{ gap:12px }
  .wrap .card{ padding:14px }
  .wrap .field label{ font-size:.85rem }
  .wrap .hint, .wrap .mini{ font-size:.82rem }
}