/* KokpitSoft login surface
 *
 * The base background intentionally lives in styles.css. This file only
 * upgrades the login surface, controls and motion layers on top of it.
 */
:root {
  --login-blue: #4f7cff;
  --login-blue-deep: #3868f7;
  --login-ink: #182338;
  --login-muted: #6f7d92;
  --login-line: #dfe6f1;
  --login-error: #d64c5c;
  --login-success: #18866b;
}

.login {
  --login-enter-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Atmospheric motion stays deliberately subtle and does not replace the
 * existing gradient, grid or pointer glow defined in styles.css. */
.login-atmosphere {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.login-atmosphere span {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(145, 237, 228, .42);
  box-shadow: 0 0 22px rgba(94, 220, 210, .34);
  opacity: .18;
  animation: loginAtmosphereFloat 19s ease-in-out infinite;
  will-change: transform, opacity;
}

.login-atmosphere span:nth-child(1) { left: 13%; top: 24%; animation-delay: -3s; }
.login-atmosphere span:nth-child(2) { left: 42%; top: 72%; animation-delay: -11s; transform: scale(.7); }
.login-atmosphere span:nth-child(3) { right: 31%; top: 17%; animation-delay: -6s; transform: scale(.55); }
.login-atmosphere span:nth-child(4) { right: 11%; bottom: 21%; animation-delay: -14s; transform: scale(.8); }
.login-atmosphere span:nth-child(5) { left: 58%; bottom: 12%; animation-delay: -8s; transform: scale(.45); }

.login-logo-row,
.login-hero-copy,
.login-benefits,
.login-pace {
  animation: loginIntro 1.2s var(--login-enter-ease) both;
  will-change: transform, opacity, filter;
}

.login-logo-row { animation-delay: .08s; }
.login-hero-copy { animation-delay: .24s; }
.login-benefits { animation-delay: .56s; }
.login-pace { animation-delay: .84s; }

.login-hero-copy > * {
  animation: loginLineIn 1.1s var(--login-enter-ease) both;
  will-change: transform, opacity;
}

.login-hero-copy > :nth-child(1) { animation-delay: .28s; }
.login-hero-copy > :nth-child(2) { animation-delay: .46s; }
.login-hero-copy > :nth-child(3) { animation-delay: .64s; }

.hero-title span {
  animation: loginTitleLine 1.25s var(--login-enter-ease) both;
  will-change: transform, opacity;
}

.hero-title span:first-child { animation-delay: .40s; }
.hero-title span:last-child { animation-delay: .62s; }

.hero-title .hero-line:first-child { color: #f8fbff; }
.hero-title .hero-line.hero-accent { color: #67d9cc; }

.login-benefit {
  animation: loginBenefitIn 1s var(--login-enter-ease) both;
  will-change: transform, opacity;
  transition: color .2s ease, filter .2s ease, transform .2s ease;
}

.login-benefit:nth-child(1) { animation-delay: .68s; }
.login-benefit:nth-child(2) { animation-delay: .84s; }
.login-benefit:nth-child(3) { animation-delay: 1s; }
.login-benefit:nth-child(4) { animation-delay: 1.16s; }

.login-benefit:hover {
  filter: drop-shadow(0 0 12px rgba(110, 225, 212, .17));
  transform: translate3d(3px, -1px, 0);
}

.login-benefit > span {
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.login-benefit:hover > span {
  border-color: rgba(138, 226, 211, .78);
  background: rgba(109, 224, 212, .15);
  box-shadow: 0 0 18px rgba(101, 218, 205, .18);
}

.login-panel-wrap {
  perspective: 1100px;
}

.login-panel {
  border-radius: 24px;
  background: #ffffff;
  border-color: rgba(255, 255, 255, .9);
  box-shadow: 0 25px 80px rgba(0, 0, 0, .18);
  opacity: 0;
  transform: translate3d(28px, 0, 0);
  filter: blur(7px);
  animation: loginCardIn 1.35s var(--login-enter-ease) .3s forwards;
  transition: transform .25s ease, box-shadow .25s ease, opacity .3s ease, filter .3s ease;
  will-change: transform, opacity, filter;
}

.login-panel:hover {
  transform: translate3d(0, -4px, 0);
  box-shadow: 0 30px 88px rgba(0, 0, 0, .22);
}

.login-panel-head {
  align-items: flex-start;
}

.login-panel-mark {
  border-radius: 13px;
  color: var(--login-blue-deep);
  background: linear-gradient(145deg, #edf3ff, #e4edff);
  box-shadow: inset 0 0 0 1px rgba(79, 124, 255, .05);
}

.login-panel h2 {
  color: var(--login-ink);
  letter-spacing: -.02em;
}

.login-panel p {
  color: var(--login-muted);
}

.login-panel-head > div {
  min-width: 0;
}

.login-panel-head .firebase-status {
  display: inline-flex;
  margin-top: 12px;
  padding: 5px 9px;
  border: 1px solid #e4eaf3;
  border-radius: 999px;
  color: #77849a;
  background: #f7f9fc;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .02em;
}

.login-panel-head .firebase-status::before {
  width: 5px;
  height: 5px;
  margin-right: 6px;
  box-shadow: none;
}

.login-form {
  gap: 16px;
}

.login-form label {
  color: #46546a;
  gap: 8px;
}

.input-shell {
  min-height: 54px;
  position: relative;
  gap: 11px;
  padding: 0 14px;
  border: 1px solid var(--login-line);
  border-radius: 14px;
  color: #8b9bb3;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease, background .25s ease;
}

.input-shell:hover {
  border-color: #c6d3e5;
}

.input-shell:focus-within {
  border-color: var(--login-blue);
  background: #fbfdff;
  box-shadow: 0 0 0 4px rgba(79, 124, 255, .13), 0 10px 26px rgba(79, 124, 255, .08);
  transform: translate3d(0, -1px, 0);
}

.input-shell.has-error {
  border-color: #e16b78;
  background: #fffafb;
  box-shadow: 0 0 0 4px rgba(214, 76, 92, .11);
}

.input-shell input {
  min-height: 52px;
  color: var(--login-ink);
}

.input-shell input::placeholder {
  color: #a2afc1;
  transition: opacity .2s ease, transform .2s ease;
}

.input-shell input:focus::placeholder {
  opacity: 0;
  transform: translate3d(-6px, 0, 0);
}

.input-shell > i {
  color: #8b9bb3;
  transition: color .25s ease, transform .25s ease;
}

.input-shell:focus-within > i {
  color: var(--login-blue);
  transform: scale(1.05);
}

.password-toggle {
  border-radius: 9px;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}

.password-toggle.is-changing {
  animation: loginIconSwap .26s ease both;
}

.login-options {
  margin-top: 1px;
}

.remember-row {
  color: #6c7b90;
}

.link-button,
.login-links button {
  transition: color .2s ease, transform .2s ease;
}

.link-button:hover,
.login-links button:hover {
  color: var(--login-blue-deep);
  transform: translateY(-1px);
}

.login-submit,
.login-submit.btn.primary {
  min-height: 54px;
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(180deg, var(--login-blue), var(--login-blue-deep));
  background-image: linear-gradient(180deg, var(--login-blue), var(--login-blue-deep));
  box-shadow: 0 14px 28px rgba(56, 104, 247, .25);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease, opacity .2s ease;
}

.login-submit:hover {
  color: #ffffff;
  background: linear-gradient(180deg, #5b86ff, #3868f7);
  box-shadow: 0 18px 34px rgba(56, 104, 247, .34);
  transform: translate3d(0, -3px, 0);
}

.login-submit:active {
  transform: translate3d(0, 0, 0) scale(.985);
}

.login-submit:disabled {
  cursor: wait;
  opacity: .8;
}

.login-submit-progress {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.login-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, .38);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: loginSpin .72s linear infinite;
}

.login-feedback-stack {
  display: grid;
  gap: 8px;
  margin-top: -4px;
}

.login-feedback {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  max-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 11px;
  opacity: 0;
  transform: translate3d(0, -6px, 0);
  transition: max-height .3s ease, opacity .25s ease, transform .3s ease, padding .3s ease;
  font-size: 12px;
  line-height: 1.45;
}

.login-feedback.is-visible {
  max-height: 100px;
  padding-top: 10px;
  padding-bottom: 10px;
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.login-feedback i {
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

.login-error {
  color: #a83d4b;
  border-color: #f4cfd4;
  background: #fff5f6;
}

.login-success {
  color: #166c56;
  border-color: #c6ecdf;
  background: #f0fbf7;
}

.login-panel.has-error {
  animation: loginCardIn 1.35s var(--login-enter-ease) .3s forwards, loginShake .42s ease .05s;
}

.login-panel.is-success {
  pointer-events: none;
  opacity: 0;
  filter: blur(4px);
  transform: translate3d(0, 8px, 0) scale(.965);
  box-shadow: 0 15px 45px rgba(0, 0, 0, .08);
}

.login-links {
  padding-top: 7px;
}

@keyframes loginIntro {
  from { opacity: 0; transform: translate3d(0, 14px, 0); filter: blur(3px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

@keyframes loginLineIn {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes loginTitleLine {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes loginBenefitIn {
  from { opacity: 0; transform: translate3d(-12px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes loginCardIn {
  from { opacity: 0; transform: translate3d(28px, 0, 0); filter: blur(7px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

@keyframes loginAtmosphereFloat {
  0%, 100% { opacity: .12; transform: translate3d(0, 0, 0) scale(1); }
  50% { opacity: .38; transform: translate3d(18px, -16px, 0) scale(1.15); }
}

@keyframes loginIconSwap {
  0% { opacity: .5; transform: scale(.78) rotate(-8deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes loginSpin {
  to { transform: rotate(360deg); }
}

@keyframes loginShake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(6px, 0, 0); }
  50% { transform: translate3d(-5px, 0, 0); }
  75% { transform: translate3d(3px, 0, 0); }
}

/* Giriş ekranı tipografisi, uygulama temasından bağımsız olarak sabitlenir.
 * Kokpit tarafındaki tema/ölçü değişiklikleri bu ekranı etkilemez. */
.login label {
  font-size: 11.5px;
  font-weight: 650;
}

.login input,
.login select,
.login textarea {
  min-height: 40px;
  font-size: 13px;
}

.login .input-shell input {
  min-height: 52px;
  border-radius: 0;
  font-size: 13px;
}

.login .btn,
.login-modal .btn {
  min-height: 38px;
  border-radius: 8px;
  font-size: 12.8px;
  font-weight: 700;
}

.login .login-submit,
.login .login-submit.btn.primary {
  min-height: 54px;
  border-radius: 14px;
}

@media (max-width: 1180px) {
  .login-panel-wrap { justify-self: stretch; }
}

@media (max-width: 680px) {
  .login-panel { border-radius: 20px; }
  .login-panel:hover { transform: none; }
  .login-atmosphere span:nth-child(n+4) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .login-logo-row,
  .login-hero-copy,
  .login-hero-copy > *,
  .hero-title span,
  .login-benefits,
  .login-benefit,
  .login-pace,
  .login-panel,
  .login-atmosphere span,
  .login-spinner {
    animation: none !important;
    transition-duration: .01ms !important;
  }

  .login-panel { opacity: 1; transform: none; filter: none; }
}