/* L7WAF — giriş / 2FA ekranları v3: uzay zemini + Dünya ufku, ortada dikey kart (üstte fotoğraf bandı, altta form).
   app.css'e bağımlı değil. 2fa-setup.php'nin eski .login-* sınıfları .auth altında eşlenir. */
@property --rim { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
:root {
  --bg: #000;
  --panel: #000;
  --field: #0b0c0f;
  --line: rgba(255,255,255,.09);
  --line-2: #262a31;
  --text: #eceef2;
  --text-2: #c9cdd4;
  --text-dim: #9aa1ac;
  --text-faint: #5f6570;
  --accent: #63a4e2;
  --accent-hi: #7db4ea;
  --accent-ink: #06111d;
  --ok: #25c997;
  --bad: #ff6b7d;
  --warn: #f5c94a;
  --r: 7px;
  --f-ui: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.auth {
  min-height: 100vh; min-height: 100dvh; background: var(--bg); color: var(--text);
  font: 400 14px/1.55 var(--f-ui); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
.auth a { color: var(--text-2); text-decoration: none; }
.auth a:hover { color: #fff; }
.auth :focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }

/* ---------------- arka plan görseli (hafif karartılmış) ---------------- */
.auth-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: #000 url("/assets/auth/bg.svg") left center / cover no-repeat;   /* kalkan kartın sağında açıkta kalsın */
}
.auth-bg::after {         /* %50 karartma + her yere ek %30 (toplam ~%65) + hafif kenar vinyeti */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(rgba(0,0,0,.30), rgba(0,0,0,.30)),
    linear-gradient(rgba(0,0,0,.50), rgba(0,0,0,.50)),
    radial-gradient(120% 95% at 50% 45%, transparent 50%, rgba(0,0,0,.45) 100%);
}
@media (max-width: 560px) { .auth-bg { background-position: 72% center; } }

/* ---------------- uzay + ufuk (önceki zemin; şu an kullanılmıyor) ---------------- */
.stars { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; display: block; }
.planet {
  position: fixed; z-index: 1; pointer-events: none;
  left: 50%; top: 54vh; width: max(1100px, 104vw); aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0%, #0a1322 0%, #050a13 22%, #020306 48%);
  box-shadow:
    0 -1px 0 0 rgba(170,210,255,.55),
    0 -3px 12px 0 rgba(110,170,255,.55),
    0 -26px 80px 0 rgba(40,110,255,.30),
    0 -80px 200px 20px rgba(30,80,200,.16),
    inset 0 2px 5px rgba(150,200,255,.40),
    inset 0 30px 120px rgba(30,90,220,.14);
}
.planet::after {          /* ufuk boyunca ara sıra geçen ışık */
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  background: conic-gradient(from var(--rim), transparent 0deg 330deg, rgba(200,230,255,.9) 345deg, transparent 360deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 99.3%, #000 99.7%, #000 100%, transparent 100%);
          mask: radial-gradient(circle closest-side, transparent 99.3%, #000 99.7%, #000 100%, transparent 100%);
  filter: blur(.4px); opacity: .9;
}

/* ---------------- yerleşim ---------------- */
.auth-wrap {
  position: relative; z-index: 2; min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center; align-content: center; gap: 22px;
  padding: 40px 16px;
}
/* dikey kart: üstte fotoğraf bandı, altta form */
.auth-card {
  width: min(440px, 100%);
  display: grid; grid-template-columns: 1fr;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  box-shadow: 0 40px 120px -10px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.6), 0 0 90px -40px rgba(60,130,240,.45);
}

/* üst: fotoğraf */
.auth-media {
  position: relative; overflow: hidden; min-height: 250px;
  background: #061024 url("/assets/auth/waf.jpg") center 30% / cover no-repeat;
}
.auth-media::before {      /* görselin tamamı %20 karartılır; logo/slogan okunsun diye alt kısım ayrıca koyulaşır */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.45) 30%, transparent 62%),
    linear-gradient(rgba(0,0,0,.20), rgba(0,0,0,.20));
}
.auth-media::after {      /* fotoğraftan forma yumuşak geçiş */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(125,180,234,.35), transparent);
}
.media-brand { position: absolute; z-index: 1; left: 36px; right: 36px; bottom: 22px; }
.media-brand img { height: 28px; width: auto; display: block; filter: drop-shadow(0 4px 18px rgba(0,0,0,.7)); }
.media-brand p { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.88); text-shadow: 0 1px 12px rgba(0,0,0,.8); }
.media-brand p span { color: rgba(255,255,255,.55); }

/* alt: form */
.auth-side { display: flex; flex-direction: column; padding: 34px 36px 30px; }
.panel-title { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.005em; color: #fff; }
.panel-sub { margin: 12px 0 32px; font-size: 13.5px; color: var(--text-dim); }

.notice { display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: start; margin: -10px 0 22px; padding: 10px 12px; border-radius: var(--r); font-size: 13px; line-height: 1.5; }
.notice svg { width: 16px; height: 16px; margin-top: 2px; }
.notice.err { background: rgba(255,107,125,.08); border: 1px solid rgba(255,107,125,.28); color: #ffb3bd; }
.notice.ok { background: rgba(37,201,151,.08); border: 1px solid rgba(37,201,151,.28); color: #8be4c7; }

.auth-form { display: grid; gap: 20px; }
.field { display: grid; gap: 9px; }
.field > label { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.control { position: relative; display: flex; align-items: center; }
.control input, .otp {
  width: 100%; height: 46px; padding: 0 15px;
  background: var(--field); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r);
  font: 400 14px var(--f-ui); outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
.control input::placeholder, .otp::placeholder { color: var(--text-faint); }
.control input:hover, .otp:hover { border-color: #353a43; }
.control input:focus, .otp:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,164,226,.18); background: #0d0f13; }
.control input:-webkit-autofill { -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 40px #0d0f13 inset; caret-color: var(--text); }
.has-reveal input { padding-right: 46px; }
.control .reveal { position: absolute; right: 5px; width: 36px; height: 36px; display: grid; place-items: center; background: transparent; border: 0; border-radius: 6px; color: var(--text-faint); cursor: pointer; }
.control .reveal:hover { color: var(--text); background: rgba(255,255,255,.04); }
.control .reveal svg { width: 18px; height: 18px; }
.control .reveal .eye-off, .control .reveal[aria-pressed="true"] .eye-on { display: none; }
.control .reveal[aria-pressed="true"] .eye-off { display: block; }
.hint { margin: 0; font-size: 12px; color: var(--text-faint); }
.hint.caps { color: var(--warn); display: flex; align-items: center; gap: 6px; }
.hint[hidden] { display: none; }

.submit {
  position: relative; overflow: hidden; margin-top: 4px; height: 42px; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 6px; cursor: pointer;
  font: 600 14px var(--f-ui); letter-spacing: .005em;
  transition: background .15s, box-shadow .2s, transform .1s;
}
.submit::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); transform: translateX(-130%); transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.submit:hover { background: var(--accent-hi); box-shadow: 0 8px 26px -10px rgba(99,164,226,.9); }
.submit:hover::before { transform: translateX(130%); }
.submit:active { transform: translateY(1px); }
.submit .spin { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(6,17,29,.3); border-top-color: var(--accent-ink); animation: spin .7s linear infinite; }
.submit.is-busy { pointer-events: none; }
.submit.is-busy .spin { display: inline-block; }
.submit:disabled { opacity: .45; cursor: not-allowed; }
@keyframes spin { to { transform: rotate(360deg); } }

.otp { height: 56px; text-align: center; font: 500 26px/1 var(--f-mono); letter-spacing: .5em; padding: 0 0 0 .5em; font-variant-numeric: tabular-nums; }
.otp.is-recovery { font-size: 18px; letter-spacing: .18em; padding-left: .18em; text-transform: uppercase; }
.otp-meta { margin-top: 20px; display: grid; gap: 14px; }
.ttl { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; font-size: 12.5px; color: var(--text-dim); }
.ttl b { font: 500 12.5px var(--f-mono); color: var(--text); font-variant-numeric: tabular-nums; }
.ttl .bar { grid-column: 1 / -1; height: 2px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.ttl .bar i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; transition: transform 1s linear, background .3s; }
.ttl.is-low b { color: var(--warn); }
.ttl.is-low .bar i { background: var(--warn); }
.links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 18px; font-size: 13px; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--text-2); font: inherit; cursor: pointer; }
.linkbtn:hover { color: #fff; }
.form-foot { margin-top: 30px; display: grid; justify-items: center; gap: 12px; font-size: 13px; color: var(--text-dim); }
.form-foot a { color: var(--text-2); }
.form-foot .sec { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-faint); }
.form-foot .sec svg { width: 12px; height: 12px; color: var(--ok); }
.auth-copy { position: relative; z-index: 2; font-size: 11.5px; color: var(--text-faint); text-align: center; }

/* ---------------- hareket ---------------- */
@media (prefers-reduced-motion: no-preference) {
  .planet::after { animation: rim 26s linear infinite; }
  .auth-card { animation: cardin .8s cubic-bezier(.2,.7,.2,1) both; }
  .auth-side > * { animation: rise .6s cubic-bezier(.2,.7,.2,1) both; }
  .auth-side > *:nth-child(2) { animation-delay: .06s; } .auth-side > *:nth-child(3) { animation-delay: .12s; }
  .auth-side > *:nth-child(4) { animation-delay: .18s; } .auth-side > *:nth-child(5) { animation-delay: .24s; } .auth-side > *:nth-child(n+6) { animation-delay: .3s; }
  @keyframes rim { from { --rim: 210deg; } to { --rim: 570deg; } }
  @keyframes cardin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* ---------------- dar ekran ---------------- */
@media (max-height: 820px) and (min-width: 561px) {   /* alçak ekran: kart sığsın (bant alçalmaz: kalkan logoya binmesin) */
  .auth-wrap { padding: 18px 16px; gap: 14px; }
  .auth-side { padding: 24px 36px 22px; }
  .panel-sub { margin: 8px 0 20px; }
  .auth-form { gap: 15px; }
  .form-foot { margin-top: 16px; gap: 8px; }
}
@media (max-width: 560px) {
  .auth-wrap { place-items: start center; padding: 20px 14px 28px; }
  .auth-media { min-height: 232px; }
  .media-brand { left: 24px; right: 24px; bottom: 22px; }
  .media-brand img { height: 28px; }
  .media-brand p { margin-top: 14px; font-size: 13px; }
  .auth-side { padding: 30px 22px 26px; }
  .planet { top: 64vh; }
}

/* ---------------- 2fa-setup.php eski sınıf eşlemesi ---------------- */
.auth .login-title { font-size: 19px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.auth .login-sub { color: var(--text-dim); font-size: 13.5px; margin: 0 0 22px; }
.auth .login-err { background: rgba(255,107,125,.08); border: 1px solid rgba(255,107,125,.28); color: #ffb3bd; font-size: 13px; padding: 10px 12px; border-radius: var(--r); margin-bottom: 16px; }
.auth .login-form { display: grid; gap: 16px; }
.auth .login-form .fld { display: grid; gap: 9px; }
.auth .login-form .fld span { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.auth .login-form .inp { width: 100%; height: 46px; background: var(--field); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r); font: 400 14px var(--f-ui); padding: 0 15px; outline: none; transition: border-color .15s, box-shadow .15s; }
.auth .login-form .inp:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,164,226,.18); }
.auth .login-otp { font: 500 24px var(--f-mono) !important; letter-spacing: .45em; text-align: center; height: 54px !important; }
.auth .login-btn { display: block; width: 100%; height: 42px; line-height: 42px; padding: 0; text-align: center; border: 0; border-radius: 6px; cursor: pointer; font: 600 14px var(--f-ui); color: var(--accent-ink); background: var(--accent); text-decoration: none; }
.auth .login-btn:hover { background: var(--accent-hi); color: var(--accent-ink); }
.auth .mfa-steps { color: var(--text-dim) !important; }
.auth .mfa-key { background: var(--field) !important; border-color: var(--line-2) !important; }
.auth .btn.btn-ghost { height: 40px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--field); color: var(--text); font: 500 13px var(--f-ui); cursor: pointer; }
.auth .btn.btn-ghost:hover { border-color: #3a3f48; }
.auth .skip-wrap { border-top-color: var(--line) !important; }
.auth .skip-btn { border-radius: 6px !important; }

/* ================= ACIK TEMA (giris / 2FA) ================= */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef2f5;
  --panel: #ffffff;
  --field: #f5f7fa;
  --line: rgba(16,24,40,.10);
  --line-2: #d6dbe3;
  --text: #141a26;
  --text-2: #364152;
  --text-dim: #5d6676;
  --text-faint: #6f7a8b;
  --accent: #1b66cb;
  --accent-hi: #2a74d8;
  --accent-ink: #ffffff;
  --bad: #c42d3f;
}
:root[data-theme="light"] .auth-bg { background-image: url("/assets/auth/bg-light.svg") !important; background-color: #f6f8fa; }
:root[data-theme="light"] .auth-bg::after {
  background: linear-gradient(rgba(255,255,255,.18), rgba(255,255,255,.18)),
              radial-gradient(120% 95% at 50% 45%, transparent 55%, rgba(16,24,40,.05) 100%);
}
:root[data-theme="light"] .auth-card { box-shadow: 0 30px 80px -24px rgba(16,24,40,.28), 0 0 0 1px rgba(16,24,40,.03); }
:root[data-theme="light"] .control input:hover, :root[data-theme="light"] .otp:hover { border-color: #c2c9d3; }
:root[data-theme="light"] .control input:focus, :root[data-theme="light"] .otp:focus { background: #fff; box-shadow: 0 0 0 3px rgba(27,102,203,.15); }
:root[data-theme="light"] .control input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #f5f7fa inset; }
:root[data-theme="light"] .control .reveal:hover { background: rgba(16,24,40,.05); }
:root[data-theme="light"] .submit .spin { border-color: rgba(255,255,255,.4); border-top-color: #fff; }
:root[data-theme="light"] .submit:hover { box-shadow: 0 8px 22px -10px rgba(27,102,203,.7); }
:root[data-theme="light"] .notice.err { background: rgba(214,58,76,.07); border-color: rgba(214,58,76,.25); color: #b42335; }
:root[data-theme="light"] .notice.ok { background: rgba(6,125,89,.07); border-color: rgba(6,125,89,.25); color: #066a4c; }
:root[data-theme="light"] .ttl .bar { background: rgba(16,24,40,.08); }
:root[data-theme="light"] .panel-title, :root[data-theme="light"] .auth .login-title { color: var(--text); }
:root[data-theme="light"] .auth a:hover, :root[data-theme="light"] .linkbtn:hover { color: var(--text); }
:root[data-theme="light"] .auth .login-err { background: rgba(196,45,63,.07); border-color: rgba(196,45,63,.25); color: #a8243a; }
:root[data-theme="light"] .form-foot .sec svg { color: #067d59; }
/* 2fa-setup.php ic stilleri (koyu zemine gore yazilmis) */
:root[data-theme="light"] .auth .mfa-warn { color: #6f4a00 !important; background: rgba(245,201,74,.14) !important; border-color: rgba(190,140,0,.35) !important; }
:root[data-theme="light"] .auth .mfa-key { color: var(--text) !important; }
:root[data-theme="light"] .auth .mfa-codes code { color: var(--text) !important; background: var(--field) !important; border-color: var(--line-2) !important; }
:root[data-theme="light"] .auth .mfa-qr { box-shadow: 0 0 0 1px var(--line-2); }
:root[data-theme="light"] .auth .mfa-key { background: var(--field) !important; border-color: var(--line-2) !important; }
:root[data-theme="light"] .auth .mfa-steps { color: var(--text-2); }
:root[data-theme="light"] .auth .mfa-lbl { color: var(--text-dim); }
:root[data-theme="light"] .auth .skip-wrap { border-top-color: var(--line); }
:root[data-theme="light"] .auth .skip-btn { color: var(--accent); background: rgba(27,102,203,.07); border-color: rgba(27,102,203,.3); }
:root[data-theme="light"] .auth .skip-btn:hover { color: #154f9e; background: rgba(27,102,203,.12); border-color: rgba(27,102,203,.45); }
:root[data-theme="light"] .auth .skip-note { color: var(--text-faint); }
:root[data-theme="light"] .auth a[href^="/login.php?restart"] { color: var(--accent) !important; }

/* tema dugmesi (sag ust kose) */
.auth-theme {
  position: fixed; z-index: 5; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center; cursor: pointer; color: var(--text-2);
  background: rgba(0,0,0,.35); border: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .15s, color .15s;
}
.auth-theme:hover { color: var(--text); background: rgba(0,0,0,.5); }
.auth-theme svg { width: 17px; height: 17px; }
.auth-theme .i-moon, :root[data-theme="light"] .auth-theme .i-sun { display: none; }
:root[data-theme="light"] .auth-theme .i-moon { display: block; }
:root[data-theme="light"] .auth-theme { background: rgba(255,255,255,.75); }
:root[data-theme="light"] .auth-theme:hover { background: #fff; }
/* dil dugmesi (tema dugmesinin solu) */
.auth-lang {
  position: fixed; z-index: 5; top: 16px; right: 62px; height: 38px; min-width: 38px; padding: 0 10px; border-radius: 10px;
  cursor: pointer; color: var(--text-2); font: 700 12px/1 'Manrope', system-ui, sans-serif; letter-spacing: .06em;
  background: rgba(0,0,0,.35); border: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .15s, color .15s;
}
.auth-lang:hover { color: var(--text); background: rgba(0,0,0,.5); }
:root[data-theme="light"] .auth-lang { background: rgba(255,255,255,.75); }
:root[data-theme="light"] .auth-lang:hover { background: #fff; }
.theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }

/* ---- beyaz etiket: bayi logosu / firma adi (inc/brand.php) ---- */
.media-brand img.wl-logo { height: 34px; max-width: 240px; object-fit: contain; }
.media-brand .wl-name { display: block; font-size: 24px; font-weight: 700; letter-spacing: .2px; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.8); }