/* ===========================================================================
 * F2GO Panel — giriş sayfaları (Kullanici/Giris + SMS kod adımı, Kullanici/TwoFactor)
 *
 * Yalnız Views/Shared/_AuthLayout.cshtml bağlar. Bu sayfalarda app.css YÜKLENMEZ: Tailwind yok, tüm sınıflar
 * "lp-" önekli ve bu dosyada. giris.js'in eklediği / aradığı sınıflar da burada tanımlı:
 *   callout callout-danger|success|info, otp-box, is-filled, is-error, is-shake, is-success, is-loading,
 *   text-warning-ink, text-danger-ink, sr-only, tnum (+ ui.js'in olası toast'ları).
 *
 * Görsel dil Ortak Platform girişinden: açık zemin + silik kare ızgara, üst ortada turuncu / sol altta mavi
 * hare, dağınık dış hatlı altıgenler, iki tonlu Fraunces başlık, beyaz kart (üstte ince turuncu ışık),
 * solda turuncu "Operasyon", sağda mavi "Kontrol" yan kartları. Her şey açık temadır (color-scheme: light).
 * Süsler ucuz: arka plan CSS degrade, altıgenler statik satır içi SVG; sonsuz animasyon YOK.
 * ========================================================================= */

/* ---------- Fontlar (kendi sunucumuzdan; tools/vendor.mjs kopyalar). Türkçe ş/ğ/İ latin-ext dilimindedir ---------- */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../lib/fonts/manrope/manrope-latin-wght-normal.woff2") format("woff2-variations"),
       url("../lib/fonts/manrope/manrope-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../lib/fonts/manrope/manrope-latin-ext-wght-normal.woff2") format("woff2-variations"),
       url("../lib/fonts/manrope/manrope-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces: opsz (9–144) + wght eksenli dosya — optik boyut yazı boyutuna göre kendiliğinden ayarlanır (Google Fonts ile aynı görünüm) */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../lib/fonts/fraunces/fraunces-latin-opsz-normal.woff2") format("woff2-variations"),
       url("../lib/fonts/fraunces/fraunces-latin-opsz-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../lib/fonts/fraunces/fraunces-latin-ext-opsz-normal.woff2") format("woff2-variations"),
       url("../lib/fonts/fraunces/fraunces-latin-ext-opsz-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Belirteçler ---------- */
:root {
  --lp-brand: #f05e21;         /* Fuel2Go turuncusu (logo) */
  --lp-brand-ink: #c9470f;     /* küçük turuncu metin (beyazda 4,8:1) */
  --lp-brand-soft: #fff1e8;
  --lp-btn: #f05e21;           /* birincil düğme: tasarımdaki parlak turuncu (beyaz metinle 3,3:1). WCAG AA gerekirse #cf4711 (4,6:1) */
  --lp-btn-hover: #e04d10;
  --lp-ink: #1f2a37;
  --lp-ink-2: #435363;
  --lp-ink-3: #5c6b7a;
  --lp-line: #e6eaf0;
  --lp-border: #b0bbc8;
  --lp-field: #fbfcfd;
  --lp-blue: #1a6fa8;
  --lp-blue-soft: #eaf4fb;
  --lp-danger: #b42318;
  color-scheme: light;
}

/* ---------- Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: #f4f7fb;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--lp-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
h1, h2, p { margin: 0; }
img { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; margin: 0; }
:focus-visible { outline: 2px solid var(--lp-brand); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.tnum { font-variant-numeric: tabular-nums; }
.lp-nowrap { white-space: nowrap; }

/* ---------- Sayfa: üç kolon (yan kart · giriş · yan kart), zemin ızgara + hareler ---------- */
.lp {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(300px, 380px) minmax(160px, 1fr);
  grid-template-areas:
    "wl main wr"
    ".  copy .";
  align-items: start;
  align-content: start;
  padding: clamp(2.75rem, 7vh, 4.75rem) 1.5rem 2rem;
  background-color: #f4f7fb;
  background-image:
    radial-gradient(ellipse 48% 34% at 50% 6%, rgb(240 94 33 / 0.13) 0%, transparent 60%),
    radial-gradient(ellipse 28% 26% at 12% 78%, rgb(26 111 168 / 0.07) 0%, transparent 70%),
    radial-gradient(ellipse 24% 22% at 88% 22%, rgb(240 94 33 / 0.06) 0%, transparent 68%),
    linear-gradient(rgb(31 42 55 / 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgb(31 42 55 / 0.022) 1px, transparent 1px),
    linear-gradient(180deg, #ffffff 0%, #f3f6fa 55%, #eef2f7 100%);
  background-size: auto, auto, auto, 34px 34px, 34px 34px, auto;
}

/* ---------- Altıgen alanı (statik; konum / boyut / opaklık burada, renk sınıfla) ---------- */
.lp-hexes {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.lp-hex {
  position: absolute;
  display: block;
  height: auto;
  aspect-ratio: 1;
  opacity: 0.18;
  overflow: visible;
}
.lp-hex polygon { fill: none; }
.lp-hex--brand polygon { stroke: var(--lp-brand); fill: rgb(240 94 33 / 0.03); }
.lp-hex--blue polygon { stroke: var(--lp-blue); fill: rgb(26 111 168 / 0.03); }
.lp-hex--ink polygon { stroke: #7a8a9a; fill: rgb(31 42 55 / 0.015); }
.lp-hex--soft polygon { stroke: var(--lp-brand); }
.lp-hex--soft-blue polygon { stroke: var(--lp-blue); }

.lp-hex--1  { width: 110px; left: 4%;   top: 10%;    opacity: 0.2;  transform: rotate(-8deg); }
.lp-hex--2  { width: 64px;  left: 14%;  top: 28%;    opacity: 0.14; transform: rotate(12deg); }
.lp-hex--3  { width: 86px;  left: 7%;   top: 58%;    opacity: 0.16; transform: rotate(4deg); }
.lp-hex--4  { width: 48px;  left: 18%;  top: 72%;    opacity: 0.12; transform: rotate(-18deg); }
.lp-hex--5  { width: 72px;  left: 3%;   bottom: 8%;  opacity: 0.15; transform: rotate(22deg); }
.lp-hex--6  { width: 52px;  left: 22%;  top: 8%;     opacity: 0.1;  transform: rotate(6deg); }
.lp-hex--7  { width: 120px; right: 3%;  top: 14%;    opacity: 0.18; transform: rotate(10deg); }
.lp-hex--8  { width: 58px;  right: 14%; top: 32%;    opacity: 0.13; transform: rotate(-14deg); }
.lp-hex--9  { width: 92px;  right: 6%;  top: 52%;    opacity: 0.16; transform: rotate(8deg); }
.lp-hex--10 { width: 44px;  right: 18%; top: 68%;    opacity: 0.11; transform: rotate(20deg); }
.lp-hex--11 { width: 78px;  right: 2%;  bottom: 10%; opacity: 0.15; transform: rotate(-6deg); }
.lp-hex--12 { width: 56px;  right: 22%; top: 6%;     opacity: 0.1;  transform: rotate(-10deg); }
.lp-hex--13 { width: 40px;  left: 38%;  bottom: 6%;  opacity: 0.09; transform: rotate(15deg); }
.lp-hex--14 { width: 36px;  right: 36%; bottom: 10%; opacity: 0.08; transform: rotate(-12deg); }
.lp-hex--15 { width: 28px;  left: 32%;  top: 12%;    opacity: 0.08; transform: rotate(4deg); }
.lp-hex--16 { width: 30px;  right: 30%; top: 18%;    opacity: 0.08; transform: rotate(-5deg); }

/* ---------- Yan kartlar ---------- */
.lp-wing {
  position: relative;
  z-index: 1;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.75rem clamp(0.5rem, 2vw, 1.5rem);
  pointer-events: none;
}
.lp-wing--l { grid-area: wl; align-items: flex-end; padding-right: clamp(1rem, 3vw, 2.25rem); }
.lp-wing--r { grid-area: wr; align-items: flex-start; padding-left: clamp(1rem, 3vw, 2.25rem); }

.lp-wing-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 200px;
  padding: 0.95rem 0.95rem 0.9rem;
  border-radius: 16px;
  border: 1px solid rgb(230 234 240 / 0.95);
  background: linear-gradient(165deg, rgb(255 255 255 / 0.92) 0%, rgb(251 252 253 / 0.88) 100%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 28px rgb(31 42 55 / 0.055);
}
.lp-wing--r .lp-wing-card { background: linear-gradient(165deg, rgb(255 255 255 / 0.92) 0%, rgb(248 251 254 / 0.9) 100%); }
.lp-wing-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--lp-brand), rgb(240 94 33 / 0.2));
}
.lp-wing--r .lp-wing-card::before {
  left: auto;
  right: 0;
  background: linear-gradient(180deg, var(--lp-blue), rgb(26 111 168 / 0.2));
}

.lp-kicker {
  margin-bottom: 0.4rem;
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lp-brand-ink);
}
.lp-wing--r .lp-kicker { color: var(--lp-blue); }

.lp-wing-title {
  margin: 0 0 0.7rem;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--lp-ink);
  text-wrap: balance;
}

.lp-wing-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.lp-wing-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--lp-ink-2);
}
.lp-wing-list .ti {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--lp-brand-soft);
  color: var(--lp-brand);
  font-size: 15px;
  line-height: 1;
}
.lp-wing--r .lp-wing-list .ti { background: var(--lp-blue-soft); color: var(--lp-blue); }

/* ---------- Orta: marka başlığı + kart ---------- */
.lp-main {
  grid-area: main;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 340px;
  justify-self: center;
  /* Ortak Platform'daki giriş hareketi, panelin hız kuralıyla (≤ 150 ms, DESIGN §11): kart gecikmeden görünür */
  animation: lp-rise 150ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes lp-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.lp-brand {
  position: relative;
  margin-bottom: 1.05rem;
  padding-bottom: 0.95rem;
  text-align: center;
}
.lp-brand::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 36px;
  height: 2px;
  margin-left: -18px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--lp-brand), transparent);
  opacity: 0.9;
}
.lp-logo {
  position: relative;
  display: inline-flex;
  margin-bottom: 1.3rem;
  border-radius: 8px;
}
.lp-logo::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 190px;
  height: 120px;
  margin: -60px 0 0 -95px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(240 94 33 / 0.12), transparent);
  pointer-events: none;
}
.lp-logo img { width: auto; height: 46px; }

.lp-title {
  margin: 0 0 0.35rem;
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: clamp(1.65rem, 4vw, 1.95rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--lp-ink);
}
.lp-title span { color: var(--lp-brand); }

.lp-lede {
  max-width: 34ch;
  margin: 0 auto;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--lp-ink-3);
  text-wrap: balance;
}

/* Beyaz kart: üstte ince turuncu ışık, köşelerde çok hafif turuncu / mavi hare */
.lp-card {
  position: relative;
  padding: 1.15rem 1.2rem 1.05rem;
  border-radius: 18px;
  border: 1px solid rgb(230 234 240 / 0.95);
  background-color: rgb(255 255 255 / 0.88);
  background-image:
    radial-gradient(120px 60px at 12% 0%, rgb(240 94 33 / 0.04), transparent 70%),
    radial-gradient(100px 50px at 100% 100%, rgb(26 111 168 / 0.035), transparent 70%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.98),
    0 4px 14px rgb(31 42 55 / 0.035),
    0 22px 48px rgb(31 42 55 / 0.08);
}
.lp-card::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, transparent 0%, var(--lp-brand) 35%, var(--lp-brand) 65%, transparent 100%);
}

.lp-head {
  margin-bottom: 0.75rem;
  text-align: center;
}
.lp-head h2 {
  margin: 0 0 0.2rem;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--lp-ink);
}
.lp-head p {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--lp-ink-3);
  text-wrap: pretty;
}
.lp-head strong { font-weight: 700; color: var(--lp-ink); overflow-wrap: anywhere; }
.lp-head-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 0.55rem;
  border-radius: 12px;
  background: var(--lp-brand-soft);
  color: var(--lp-brand);
  font-size: 21px;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgb(240 94 33 / 0.14);
}

/* ---------- Uyarılar (sunucu TempData + giris.js'in callout'ları) ---------- */
.lp-alerts > * { margin-bottom: 0.75rem; }
.callout {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-radius: 9px;
  border: 1px solid #f0c4be;
  background: #fdf4f2;
  color: #8a3329;
  font-size: 0.82rem;
  line-height: 1.4;
  text-align: left;
}
.callout > .ti { flex: none; font-size: 1rem; line-height: 1.15rem; color: #c9372c; }
.callout > span { min-width: 0; overflow-wrap: anywhere; }  /* uzun sunucu mesajı (ör. NetGSM yanıtı) kartı taşırmasın */
.callout-success { border-color: #b8ddc6; background: #f1f8f3; color: #1e5a37; }
.callout-success > .ti { color: #2e8b57; }
.callout-warning { border-color: #ebd4a8; background: #fff8eb; color: #7a5114; }
.callout-warning > .ti { color: #b7791f; }
.callout-info { border-color: #c9dff0; background: #f2f8fc; color: #1d4f75; }
.callout-info > .ti { color: var(--lp-blue); }

/* ---------- Alanlar ---------- */
.lp-field { margin-bottom: 0.7rem; }
.lp-field > label {
  display: block;
  margin-bottom: 0.28rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--lp-ink-2);
}
.lp-control {
  position: relative;
  display: flex;
  align-items: center;
}
.lp-ico {
  position: absolute;
  left: 11px;
  z-index: 1;
  font-size: 1rem;
  line-height: 1;
  color: var(--lp-ink-3);
  pointer-events: none;
  transition: color 0.15s;
}
.lp-control input {
  width: 100%;
  height: 40px;
  padding: 0 40px 0 35px;
  border-radius: 10px;
  border: 1px solid var(--lp-border);
  background: var(--lp-field);
  color: var(--lp-ink);
  font-size: 0.88rem;
  font-weight: 500;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.lp-control input::placeholder { color: #9aa8b6; opacity: 1; }
.lp-control input:focus {
  background: #fff;
  border-color: var(--lp-brand);
  box-shadow: 0 0 0 3px rgb(240 94 33 / 0.12);
}
.lp-control:focus-within > .lp-ico { color: var(--lp-brand); }
/* Tarayıcı otomatik doldurması sarı/mavi zemin boyamasın */
.lp-control input:-webkit-autofill,
.lp-control input:-webkit-autofill:hover,
.lp-control input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--lp-ink);
  caret-color: var(--lp-ink);
  box-shadow: 0 0 0 1000px var(--lp-field) inset;
  transition: background-color 99999s ease-out;
}
.lp-control input:-webkit-autofill:focus {
  border-color: var(--lp-brand);
  box-shadow: 0 0 0 1000px #fff inset, 0 0 0 3px rgb(240 94 33 / 0.12);
}

/* Parola göster / gizle (giris.js içteki <i>'nin sınıfını değiştirir: stil kapsayıcıdan) */
.lp-eye {
  position: absolute;
  right: 5px;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--lp-ink-3);
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}
.lp-eye > .ti { font-size: 1.05rem; line-height: 1; }
.lp-eye:hover { color: var(--lp-ink); background: #f3f5f8; }
.lp-eye:focus-visible { outline-offset: 0; }

.lp-meta {
  display: flex;
  align-items: center;
  margin: 0.45rem 0 0.9rem;
}
.lp-remember {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--lp-ink-2);
  cursor: pointer;
  user-select: none;
}
.lp-remember input {
  width: 15px;
  height: 15px;
  accent-color: var(--lp-brand);
  cursor: pointer;
}

.lp-field-error {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: -0.3rem 0 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--lp-danger);
}
.lp-field-error::before {
  content: "\ea05";
  content: "\ea05" / "";
  flex: none;
  font-family: "tabler-icons";
  font-weight: 400;
  font-size: 1rem;
  line-height: 1;
}

/* ---------- Birincil düğme (ok işareti ::after: giris.js içeriği değiştirse de kalır) ---------- */
.lp-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 42px;
  padding: 0 1rem;
  border: 1px solid transparent; /* yüksek karşıtlık (forced-colors) modunda düğme kenarı görünsün */
  border-radius: 10px;
  background: var(--lp-btn);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 16px rgb(240 94 33 / 0.2);
  transition: background-color 0.15s, transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.lp-submit::after {
  content: "\ea1f";
  content: "\ea1f" / "";
  font-family: "tabler-icons";
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1;
  -webkit-text-stroke: 0.6px currentColor; /* ince çizgili ikonu tasarımdaki dolgun ok gibi kalınlaştırır */
  transition: transform 0.15s;
}
.lp-submit:hover {
  background: var(--lp-btn-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgb(240 94 33 / 0.26);
}
.lp-submit:hover::after { transform: translateX(2px); }
.lp-submit:active { transform: none; }
.lp-submit:focus-visible { outline: 2px solid var(--lp-ink); outline-offset: 2px; }
.lp-submit:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
  box-shadow: none;
}
.lp-submit.is-loading { cursor: progress; opacity: 0.88; }
.lp-submit:disabled::after,
.lp-submit.is-loading::after { content: none; }
.lp-submit .ti { font-size: 1.05rem; line-height: 1; }
.lp-submit .ti-loader-2 { animation: lp-spin 0.8s linear infinite; }
@keyframes lp-spin { to { transform: rotate(360deg); } }

.lp-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 0.75rem;
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-ink-3);
}
.lp-secure::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lp-brand);
}

.lp-copy {
  grid-area: copy;
  position: relative;
  z-index: 2;
  margin: 1rem 0 0;
  text-align: center;
  font-size: 0.72rem;
  color: #7a8797;
}

/* ---------- SMS doğrulama kodu adımı ---------- */
.lp-otp {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.45rem;
  min-width: 0;
  margin: 0 0 0.7rem;
  padding: 0;
  border: 0;
}
.lp-otp .otp-box {
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--lp-border);
  background: var(--lp-field);
  color: var(--lp-ink);
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  caret-color: var(--lp-brand);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.lp-otp .otp-box:focus {
  background: #fff;
  border-color: var(--lp-brand);
  box-shadow: 0 0 0 3px rgb(240 94 33 / 0.12);
}
.lp-otp .otp-box.is-filled { border-color: rgb(240 94 33 / 0.55); background: var(--lp-brand-soft); }
.lp-otp .otp-box:disabled { background: #f3f5f8; color: var(--lp-ink-3); cursor: not-allowed; }
.lp-otp.is-error .otp-box { border-color: #d9534f; background: #fdf4f2; }
.lp-otp.is-success .otp-box { border-color: #3c9d6b; background: #f1f8f3; }
.lp-otp.is-shake { animation: lp-shake 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes lp-shake {
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

.lp-otp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.9rem;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--lp-ink-3);
}
.lp-otp-meta > span { display: inline-flex; align-items: center; gap: 0.3rem; }
.lp-otp-meta .ti { font-size: 0.95rem; line-height: 1; }
.lp-otp-timer { font-weight: 700; color: var(--lp-ink-2); }
.lp .text-warning-ink { color: #b45309; }
.lp .text-danger-ink { color: var(--lp-danger); }

.lp-otp-actions {
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--lp-line);
  font-size: 0.78rem;
}
.lp-resend {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  color: var(--lp-ink-3);
}
.lp-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--lp-brand-ink);
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgb(240 94 33 / 0.35);
  text-underline-offset: 2px;
}
.lp-link:hover { color: #a93a0c; text-decoration-color: currentColor; }
.lp-link:disabled { color: var(--lp-ink-3); cursor: default; text-decoration: none; }
.lp-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 30px;
  padding: 0 0.6rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--lp-ink-2);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.lp-ghost .ti { font-size: 0.95rem; line-height: 1; }
.lp-ghost:hover { background: #f3f5f8; color: var(--lp-ink); }

/* ---------- ui.js toast'u (giriş akışı toast açmaz; yine de düzgün görünsün) ---------- */
.toast-root {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: grid;
  gap: 0.5rem;
  width: min(calc(100vw - 2rem), 380px);
  transform: translateX(-50%);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  border: 1px solid var(--lp-line);
  background: #fff;
  color: var(--lp-ink);
  font-size: 0.82rem;
  box-shadow: 0 14px 34px -12px rgb(15 23 42 / 0.25);
  pointer-events: auto;
}
.toast > .ti { flex: none; font-size: 1.1rem; color: var(--lp-blue); }
.toast-error > .ti { color: #c9372c; }
.toast-success > .ti { color: #2e8b57; }
.toast-warning > .ti { color: #b7791f; }
.toast-body { flex: 1; min-width: 0; }
.toast-title { font-weight: 700; }
.toast-close { padding: 0; border: 0; background: none; color: var(--lp-ink-3); cursor: pointer; font-size: 1rem; }
.toast.is-leaving { opacity: 0; transition: opacity 0.12s; }

/* ---------- Tablet: tek kolon; yan kartlar girişin altında yan yana ---------- */
@media (max-width: 980px) {
  .lp {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "main main"
      "wl   wr"
      "copy copy";
    padding: 2.25rem 1.25rem 1.75rem;
  }
  .lp-main { max-width: 360px; }
  .lp-brand { margin-bottom: 0.95rem; padding-bottom: 0.85rem; }
  .lp-logo { margin-bottom: 1.1rem; }
  .lp-logo img { height: 42px; }
  .lp-card { padding: 1.1rem 1.1rem 1rem; }
  .lp-wing { min-height: 0; margin-top: 1.5rem; padding: 0; justify-content: flex-start; }
  .lp-wing--l { padding-right: 0.5rem; }
  .lp-wing--r { padding-left: 0.5rem; }
  .lp-wing-card { max-width: 250px; }
  .lp-copy { margin-top: 1.5rem; }
  .lp-control input { height: 44px; font-size: 1rem; }
  .lp-hex--2, .lp-hex--4, .lp-hex--6, .lp-hex--8, .lp-hex--10, .lp-hex--12,
  .lp-hex--13, .lp-hex--14, .lp-hex--15, .lp-hex--16 { display: none; }
  .lp-hex--1, .lp-hex--3, .lp-hex--5, .lp-hex--7, .lp-hex--9, .lp-hex--11 { opacity: 0.1; }
}

/* ---------- Telefon: yalnız giriş kartı (tam genişlik), dokunma hedefleri büyük, iOS yakınlaştırmasın (≥16px) ---------- */
@media (max-width: 640px) {
  .lp {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "main"
      "copy";
    padding:
      calc(1.5rem + env(safe-area-inset-top))
      max(1rem, env(safe-area-inset-right))
      calc(1.25rem + env(safe-area-inset-bottom))
      max(1rem, env(safe-area-inset-left));
  }
  .lp-wing { display: none; }
  .lp-main { max-width: 440px; }
  .lp-card { padding: 1.15rem 1rem 1rem; border-radius: 16px; }
  .lp-card::before { left: 18px; right: 18px; }
  .lp-control input { height: 46px; }
  .lp-eye { right: 4px; width: 38px; height: 38px; }
  .lp-remember { min-height: 32px; }
  .lp-remember input { width: 18px; height: 18px; }
  .lp-submit { height: 48px; font-size: 0.95rem; }
  .lp-otp { gap: 0.375rem; }
  .lp-otp .otp-box { height: 50px; }
  .lp-link, .lp-ghost { min-height: 36px; }
  .lp-copy { margin-top: 1.25rem; }
}
@media (max-width: 420px) {
  .lp-hexes { opacity: 0.7; }
}
/* Yatay telefon / kısa ekran: marka bloğu sıkışır, form ekrana daha yukarıda girer */
@media (max-height: 560px) and (max-width: 980px) {
  .lp { padding-top: calc(1rem + env(safe-area-inset-top)); }
  .lp-logo { margin-bottom: 0.7rem; }
  .lp-logo img { height: 34px; }
  .lp-title { font-size: 1.5rem; }
  .lp-brand { margin-bottom: 0.8rem; padding-bottom: 0.7rem; }
}
/* Dokunmatik büyük ekranlar (iPad yatay) de iOS odak yakınlaştırması yapmasın */
@media (pointer: coarse) {
  .lp-control input { font-size: 1rem; }
}

@media (forced-colors: active) {
  .lp-hexes { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-main,
  .lp-otp.is-shake { animation: none; }
  .lp-submit,
  .lp-submit::after { transition: none; }
  .lp-submit:hover,
  .lp-submit:hover::after { transform: none; }
}