/* Mobile Login V1 — _LoginLayout only.
   Desktop: wrappers are display:contents. Visual rules are
   max-width 720px + body.auth-body only. */

.m-auth,
.m-auth-card,
.m-auth-alert { display: contents; }

.auth-title-m,
.auth-sub-m,
.auth-foot-m,
.m-auth-role,
.m-auth-forgot,
.auth-btn__spin,
.auth-btn__ok { display: none; }

@media (max-width: 720px) {
  html,
  body.auth-body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    background: #e9edf2;
    font-family: Inter, "Segoe UI", system-ui, sans-serif;
  }

  body.auth-body .auth-title-desk,
  body.auth-body .auth-sub-desk,
  body.auth-body .auth-foot-desk { display: none; }

  body.auth-body .auth-title-m,
  body.auth-body .m-auth-role { display: block; }

  body.auth-body .auth-sub,
  body.auth-body .auth-sub-m,
  body.auth-body .auth-sub-desk { display: none !important; }

  body.auth-body .auth-foot-m { display: block; }

  body.auth-body .auth-title:not(:has(.auth-title-m)) {
    font-size: 0;
    line-height: 0;
  }

  body.auth-body .auth-title:not(:has(.auth-title-m))::after {
    content: "Personel Portalı";
    display: block;
    font-size: 1.28rem;
    font-weight: 650;
    letter-spacing: -0.03em;
    line-height: 1.25;
    color: #1a2433;
  }

  body.auth-body .auth-visual { display: none; }

  body.auth-body .auth-shell {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    min-height: 100svh;
    background: #e9edf2;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body.auth-body .auth-main {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    min-height: 100svh;
    padding: calc(1.5rem + env(safe-area-inset-top, 0px)) clamp(1rem, 4.5vw, 1.5rem) calc(1.5rem + env(safe-area-inset-bottom, 0px));
    background: #e9edf2;
  }

  body.auth-body .m-auth {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(24.25rem, 100%);
  }

  body.auth-body .m-auth-card { display: block; width: 100%; }

  body.auth-body .auth-main__inner {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(1.85rem, 6.4vw, 2.45rem) clamp(1.25rem, 5.2vw, 1.85rem) clamp(1.6rem, 5vw, 2rem);
    border: 0;
    border-radius: clamp(2.1rem, 11vw, 3.1rem);
    background: #eef1f5;
    box-shadow:
      12px 18px 32px rgba(28, 41, 58, 0.1),
      -8px -10px 22px rgba(255, 255, 255, 0.78),
      inset 0 1px 0 rgba(255, 255, 255, 0.72);
  }

  body.auth-body .auth-logo {
    display: block;
    margin: 0 0 0.35rem;
    text-align: center;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    color: #1a2433;
  }

  body.auth-body .auth-logo .auth-wordmark__spil,
  body.auth-body .auth-logo .auth-wordmark__net {
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.28em;
  }

  body.auth-body .auth-logo .auth-wordmark__spil {
    color: #168af4;
  }

  body.auth-body .auth-logo .auth-wordmark__net {
    color: #d71920;
  }

  body.auth-body .m-auth-role,
  body.auth-body .auth-logo::after {
    display: block;
    margin-top: 0.28rem;
    padding-left: 0.34em;
    font-size: 0.66rem;
    font-weight: 650;
    letter-spacing: 0.34em;
    text-align: center;
    color: #7a8796;
  }

  body.auth-body .auth-logo:has(+ .m-auth-role)::after,
  body.auth-body .auth-logo:has(.m-auth-role)::after { content: none; }

  body.auth-body .auth-logo:not(:has(+ .m-auth-role))::after {
    content: "POS";
  }

  body.auth-body .auth-title {
    margin: 1.15rem 0 1.25rem;
    text-align: center;
    font-size: 1.28rem;
    font-weight: 650;
    letter-spacing: -0.03em;
    line-height: 1.25;
    color: #1a2433;
  }

  body.auth-body .m-auth-alert {
    display: block;
    min-height: 1.35rem;
    margin: 0 0 0.55rem;
  }

  body.auth-body .validation-summary,
  body.auth-body .validation-summary-errors {
    margin: 0;
    color: #8a2b2b;
    font-size: 0.82rem;
    line-height: 1.4;
    text-align: center;
  }

  body.auth-body .validation-summary-valid { display: none; }

  body.auth-body .validation-summary ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  body.auth-body .form-group { margin-bottom: 0.8rem; }

  body.auth-body .field-validation-error {
    display: block;
    min-height: 1rem;
    margin-top: 0.28rem;
    color: #8a2b2b;
    font-size: 0.78rem;
    line-height: 1.35;
    text-align: left;
    padding-left: 0.85rem;
  }

  body.auth-body .auth-input {
    width: 100%;
    min-height: 3.25rem;
    padding: 0.7rem 1.05rem 0.7rem 2.85rem;
    border: 0;
    border-radius: 999px;
    background-color: #e8ecf1;
    background-repeat: no-repeat;
    background-position: 1rem 50%;
    background-size: 1.12rem 1.12rem;
    color: #1a2433;
    font-size: 16px;
    letter-spacing: 0;
    box-shadow:
      inset 3px 4px 8px rgba(28, 41, 58, 0.08),
      inset -2px -2px 6px rgba(255, 255, 255, 0.72);
    transition: box-shadow 180ms ease, background-color 180ms ease;
  }

  body.auth-body .form-group:first-of-type .auth-input,
  body.auth-body #Input_EmailOrUserName {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23788799' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='3.1'/%3E%3Cpath d='M5.4 19.2c1.5-2.8 3.8-4.2 6.6-4.2s5.1 1.4 6.6 4.2'/%3E%3C/svg%3E");
  }

  body.auth-body .auth-pass .auth-input,
  body.auth-body #login-password {
    padding-right: 3rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23788799' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8.2a4 4 0 0 1 8 0V11'/%3E%3C/svg%3E");
  }

  body.auth-body .auth-input::placeholder {
    color: #8a97a8;
    text-transform: none;
    font-size: 16px;
    letter-spacing: 0.01em;
  }

  body.auth-body .auth-input:focus {
    background-color: #e7ebf0;
    box-shadow:
      inset 3px 4px 9px rgba(28, 41, 58, 0.1),
      inset -2px -2px 6px rgba(255, 255, 255, 0.62),
      0 0 0 1.5px rgba(47, 91, 234, 0.38);
    outline: none;
  }

  body.auth-body .auth-pass__btn {
    width: 2.75rem;
    height: 2.75rem;
    color: #6b7789;
  }

  body.auth-body .auth-meta { display: none; }

  body.auth-body .btn.btn-primary.auth-btn,
  body.auth-body .btn.btn-primary.auth-btn:hover,
  body.auth-body .btn.btn-primary.auth-btn:focus-visible {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3.25rem;
    margin: 0.35rem 0 0;
    padding: 0 1rem;
    border: 0;
    border-radius: 999px;
    background: #eef1f5;
    color: #2f5bea;
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    text-transform: none;
    box-shadow:
      6px 8px 14px rgba(28, 41, 58, 0.1),
      -4px -5px 12px rgba(255, 255, 255, 0.9);
    transition: transform 140ms ease, box-shadow 140ms ease, color 140ms ease;
  }

  body.auth-body .btn.btn-primary.auth-btn:focus-visible {
    outline: 2px solid #2f5bea;
    outline-offset: 2px;
  }

  body.auth-body .btn.btn-primary.auth-btn:active {
    transform: translateY(1px);
    box-shadow:
      inset 3px 4px 8px rgba(28, 41, 58, 0.12),
      inset -2px -2px 6px rgba(255, 255, 255, 0.7);
  }

  body.auth-body .auth-form {
    position: relative;
  }

  body.auth-body .m-auth-forgot,
  body.auth-body .auth-form:not(:has(.m-auth-forgot))::after {
    display: block;
    width: 100%;
    margin: 0.85rem 0 0;
    padding: 0.35rem 0 0;
    border: 0;
    background: none;
    box-shadow: none;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 550;
    letter-spacing: 0.02em;
    line-height: 1.4;
    color: #6b7789;
  }

  body.auth-body .auth-form:not(:has(.m-auth-forgot))::after {
    content: "Şifremi Unuttum";
  }

  body.auth-body .m-auth-forgot:hover,
  body.auth-body .m-auth-forgot:focus-visible {
    color: #2f5bea;
    outline: none;
  }

  body.auth-body .m-auth-forgot:focus-visible {
    outline: 2px solid #2f5bea;
    outline-offset: 2px;
    border-radius: 6px;
  }

  body.auth-body .auth-btn.is-loading,
  body.auth-body .auth-btn.is-ok {
    pointer-events: none;
    color: transparent;
  }

  body.auth-body .auth-btn.is-loading .auth-btn__text,
  body.auth-body .auth-btn.is-ok .auth-btn__text {
    opacity: 0;
  }

  body.auth-body .auth-btn.is-loading .auth-btn__spin { display: block; }
  body.auth-body .auth-btn.is-ok .auth-btn__ok { display: block; }

  body.auth-body .auth-btn__spin,
  body.auth-body .auth-btn__ok {
    position: absolute;
    width: 1.15rem;
    height: 1.15rem;
  }

  body.auth-body .auth-btn__spin {
    border: 2px solid rgba(47, 91, 234, 0.22);
    border-top-color: #2f5bea;
    border-radius: 50%;
    animation: m-login-spin 0.55s linear infinite;
  }

  body.auth-body .auth-btn.is-loading::after,
  body.auth-body .auth-btn.is-ok::after {
    content: "";
    position: absolute;
    width: 1.15rem;
    height: 1.15rem;
    left: 50%;
    top: 50%;
    margin: -0.575rem 0 0 -0.575rem;
  }

  body.auth-body .auth-btn.is-loading::after {
    border: 2px solid rgba(47, 91, 234, 0.22);
    border-top-color: #2f5bea;
    border-radius: 50%;
    animation: m-login-spin 0.55s linear infinite;
  }

  body.auth-body .auth-btn.is-ok::after {
    border: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%231b4f72' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M5 13.2 9.2 17.5 19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
    animation: none;
  }

  body.auth-body .auth-main__inner.is-out {
    opacity: 0.55;
    transform: scale(0.985);
    transition: opacity 280ms ease, transform 280ms ease;
  }

  body.auth-body .auth-foot,
  body.auth-body .auth-foot-desk,
  body.auth-body .auth-foot-m {
    display: none !important;
  }

  body.auth-body .auth-main::after {
    content: "SPİLNET\AGüvenli Personel Erişimi\A© 2026 Spilnet";
    display: block;
    margin-top: 1.4rem;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: #7a8796;
    white-space: pre-line;
  }
}

@media (max-width: 720px) and (max-height: 700px) {
  body.auth-body .auth-main {
    padding-top: calc(1rem + env(safe-area-inset-top, 0px));
    justify-content: flex-start;
  }

  body.auth-body .auth-main__inner {
    padding: 1.45rem 1.2rem 1.3rem;
  }

  body.auth-body .auth-title { margin-top: 0.85rem; }
}

@media (max-width: 360px) {
  body.auth-body .auth-main { padding-left: 0.85rem; padding-right: 0.85rem; }
}

@media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
  body.auth-body .auth-logo {
    animation: m-login-enter 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  body.auth-body .auth-main__inner {
    animation: m-login-enter 560ms 40ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.auth-body .auth-main__inner,
  body.auth-body .auth-logo,
  body.auth-body .auth-input,
  body.auth-body .auth-btn,
  body.auth-body .auth-btn__spin,
  body.auth-body .auth-btn.is-loading::after {
    animation: none !important;
    transition: none !important;
  }

  body.auth-body .btn.btn-primary.auth-btn:active { transform: none; }

  body.auth-body .auth-main__inner.is-out {
    opacity: 1;
    transform: none;
  }
}

@keyframes m-login-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes m-login-spin {
  to { transform: rotate(360deg); }
}