/* Mobil öncelik — hostes girişi */

:root {

  --bg-page: #0d0d0d;

  --bg-card: #141414;

  --bg-input: #1c1c1c;

  --border: #2a2a2a;

  --text: #f4f4f5;

  --text-muted: #a3a3a3;

  --label-accent: #ffffff;

  --splash-bg: #0d0d0d;

  --brand: #ff4013;

  --brand-hover: #ff6a45;

  --focus-ring: rgba(255, 64, 19, 0.45);

  --safe-t: env(safe-area-inset-top, 0px);

  --safe-r: env(safe-area-inset-right, 0px);

  --safe-b: env(safe-area-inset-bottom, 0px);

  --safe-l: env(safe-area-inset-left, 0px);

}



*,

*::before,

*::after {

  box-sizing: border-box;

}



html {

  -webkit-text-size-adjust: 100%;

  text-size-adjust: 100%;

  overflow-x: hidden;

}



body {

  margin: 0;

  min-height: 100vh;

  min-height: -webkit-fill-available;

  min-height: 100dvh;

  overflow-x: hidden;

  font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  background: var(--bg-page);

  color: var(--text);

  -webkit-tap-highlight-color: transparent;

}



.page {

  width: 100%;

  max-width: 100%;

  margin: 0 auto;

  min-height: 100vh;

  min-height: -webkit-fill-available;

  min-height: 100dvh;

  padding-left: max(1rem, var(--safe-l));

  padding-right: max(1rem, var(--safe-r));

  padding-bottom: max(1rem, var(--safe-b));

}



.page--login {

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding-top: max(1rem, var(--safe-t));

}



.login {

  width: 100%;

  max-width: 22rem;

  margin: 0 auto;

}



.login__header {

  text-align: center;

  margin-bottom: 1.75rem;

}



.login__brand {

  display: block;

  width: min(82vw, 270px);

  height: auto;

  margin: 0 auto 1.25rem;

  object-fit: contain;

  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 20px rgba(255, 80, 45, 0.2));

}



.login__title {

  font-size: clamp(1.35rem, 5vw, 1.5rem);

  font-weight: 700;

  letter-spacing: -0.02em;

  margin: 0 0 0.5rem;

  line-height: 1.2;

}



.login__subtitle {

  margin: 0;

  font-size: 0.9rem;

  line-height: 1.45;

  color: var(--text-muted);

}



.login__hint {

  margin: 0.75rem 0 0;

  font-size: 0.8rem;

  line-height: 1.4;

  color: var(--text-muted);

  opacity: 0.9;

}



.login__form {

  background: var(--bg-card);

  border: 1px solid var(--border);

  border-radius: 16px;

  padding: 1.35rem 1.25rem 1.25rem;

  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);

}



.field {

  margin-bottom: 1.1rem;

}



.field:last-of-type {

  margin-bottom: 1.25rem;

}



.field__label {

  display: block;

  font-size: 0.8rem;

  font-weight: 600;

  color: var(--label-accent);

  margin-bottom: 0.4rem;

  letter-spacing: 0.02em;

}



.field__input {

  width: 100%;

  min-height: 48px;

  padding: 0.65rem 0.85rem;

  font-size: 1rem;

  line-height: 1.25;

  color: var(--text);

  background: var(--bg-input);

  border: 1px solid var(--border);

  border-radius: 12px;

  outline: none;

  transition: border-color 0.15s ease, box-shadow 0.15s ease;

}



.field__input::placeholder {

  color: #737373;

}



.field__input:focus {

  border-color: var(--brand);

  box-shadow: 0 0 0 3px var(--focus-ring);

}



.btn {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  min-height: 50px;

  padding: 0.75rem 1rem;

  font-size: 1rem;

  font-weight: 700;

  letter-spacing: 0.02em;

  border: none;

  border-radius: 12px;

  cursor: pointer;

  touch-action: manipulation;

  transition: background 0.15s ease, transform 0.1s ease;

}



.btn--primary {

  background: var(--brand);

  color: #fff;

}



.btn--primary:hover {

  background: var(--brand-hover);

}



.btn--primary:active {

  transform: scale(0.98);

}



.login__meta {

  margin: 1rem 0 0;

  text-align: center;

}



.login__link {

  font-size: 0.875rem;

  color: var(--text-muted);

  text-decoration: underline;

  text-underline-offset: 3px;

}



.login__link:hover {

  color: var(--text);

}



/* Açılış (splash) */

.splash {

  position: fixed;

  inset: 0;

  z-index: 9999;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);

  background: var(--splash-bg);

  transition: opacity 0.45s ease, visibility 0.45s ease;

}



.splash--hide {

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

}



.splash__logo {

  display: block;

  width: min(85vw, 330px);

  max-width: 100%;

  height: auto;

  object-fit: contain;

  filter: drop-shadow(0 3px 14px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 22px rgba(255, 80, 45, 0.22));

}



@media (prefers-reduced-motion: reduce) {

  .splash {

    transition-duration: 0.01ms;

  }

  .modal {

    transition-duration: 0.01ms;

  }

  .btn--primary:active {

    transform: none;

  }

}



/* Giriş modalları — cam efekt, animasyon, yükleme */

@keyframes modalBackdropIn {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

}

@keyframes modalBoxIn {

  from {

    opacity: 0;

    transform: scale(0.92) translateY(12px);

  }

  to {

    opacity: 1;

    transform: scale(1) translateY(0);

  }

}

@keyframes modalCheckPop {

  0% {

    opacity: 0;

    transform: scale(0.5);

  }

  70% {

    transform: scale(1.08);

  }

  100% {

    opacity: 1;

    transform: scale(1);

  }

}

@keyframes modalSpin {

  to {

    transform: rotate(360deg);

  }

}

@keyframes modalProgressFill {

  from {

    transform: scaleX(0);

  }

  to {

    transform: scaleX(1);

  }

}

@keyframes modalPulseRing {

  0%,

  100% {

    opacity: 0.45;

    transform: scale(1);

  }

  50% {

    opacity: 0.15;

    transform: scale(1.08);

  }

}

@keyframes modalShimmer {

  to {

    background-position: 200% center;

  }

}

.modal {

  position: fixed;

  inset: 0;

  z-index: 10000;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: max(1rem, var(--safe-t)) max(1rem, var(--safe-r)) max(1rem, var(--safe-b)) max(1rem, var(--safe-l));

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition: opacity 0.35s ease, visibility 0.35s ease;

}

.modal--open {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

}

.modal--open .modal__backdrop {

  animation: modalBackdropIn 0.35s ease forwards;

}

.modal--open .modal__box {

  animation: modalBoxIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;

}

.modal__backdrop {

  position: absolute;

  inset: 0;

  background: rgba(6, 8, 12, 0.78);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

}

.modal__box {

  position: relative;

  z-index: 1;

  width: 100%;

  max-width: 20.5rem;

  background: linear-gradient(165deg, rgba(32, 32, 36, 0.98) 0%, rgba(18, 18, 22, 0.99) 100%);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 20px;

  padding: 1.5rem 1.35rem 1.35rem;

  text-align: center;

  box-shadow:

    0 0 0 1px rgba(0, 0, 0, 0.35) inset,

    0 24px 64px rgba(0, 0, 0, 0.55),

    0 0 80px rgba(255, 64, 19, 0.06);

  opacity: 0;

}

.modal__box--success {

  border-color: rgba(34, 197, 94, 0.25);

  box-shadow:

    0 0 0 1px rgba(34, 197, 94, 0.12) inset,

    0 24px 64px rgba(0, 0, 0, 0.55),

    0 0 60px rgba(34, 197, 94, 0.12);

}

.modal__box--error {

  border-color: rgba(239, 68, 68, 0.22);

  box-shadow:

    0 0 0 1px rgba(239, 68, 68, 0.1) inset,

    0 24px 64px rgba(0, 0, 0, 0.55),

    0 0 48px rgba(239, 68, 68, 0.08);

}

.modal__success-visual {

  margin-bottom: 1rem;

}

.modal__success-check {

  width: 58px;

  height: 58px;

  margin: 0 auto;

  border-radius: 50%;

  background: linear-gradient(145deg, #34d399, #16a34a);

  box-shadow: 0 10px 32px rgba(34, 197, 94, 0.45);

  position: relative;

  animation: modalCheckPop 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) 0.12s both;

}

.modal__success-check::after {

  content: "";

  position: absolute;

  left: 50%;

  top: 45%;

  width: 11px;

  height: 20px;

  margin: -10px 0 0 -6px;

  border: solid #fff;

  border-width: 0 3px 3px 0;

  transform: rotate(45deg);

}

.modal__title {

  font-size: 1.2rem;

  font-weight: 700;

  margin: 0 0 0.4rem;

  letter-spacing: -0.02em;

}

.modal__title--error {

  color: #fecaca;

}

.modal__text {

  margin: 0;

  color: var(--text-muted);

  font-size: 0.92rem;

  line-height: 1.45;

}

.modal__progress-track {

  margin-top: 1rem;

  height: 4px;

  border-radius: 4px;

  background: rgba(255, 255, 255, 0.08);

  overflow: hidden;

}

.modal__progress-fill {

  height: 100%;

  width: 100%;

  border-radius: 4px;

  background: linear-gradient(90deg, #16a34a, #4ade80);

  transform-origin: left center;

  transform: scaleX(0);

}

.modal--open .modal__box--success .modal__progress-fill {

  animation: modalProgressFill 2.6s linear forwards;

}

.modal__error-visual {

  margin-bottom: 0.85rem;

}

.modal__error-icon {

  width: 52px;

  height: 52px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  font-size: 1.5rem;

  font-weight: 800;

  color: #fef3c7;

  background: linear-gradient(145deg, #f59e0b, #d97706);

  box-shadow: 0 8px 28px rgba(245, 158, 11, 0.35);

  position: relative;

}

.modal__error-icon::after {

  content: "";

  position: absolute;

  inset: -6px;

  border-radius: 50%;

  border: 2px solid rgba(245, 158, 11, 0.35);

  animation: modalPulseRing 2s ease-in-out infinite;

}

.modal__warn {

  font-size: 0.8rem;

  line-height: 1.5;

  color: #fecaca;

  margin: 0.75rem 0 0;

  text-align: left;

  padding: 0.75rem 0.85rem;

  background: rgba(239, 68, 68, 0.1);

  border-radius: 12px;

  border: 1px solid rgba(239, 68, 68, 0.2);

}

.modal__ip-card {

  margin: 1rem 0 0;

  padding: 0.75rem 0.85rem;

  text-align: left;

  border-radius: 12px;

  background: rgba(0, 0, 0, 0.35);

  border: 1px solid rgba(255, 255, 255, 0.06);

}

.modal__ip-card .modal__ip-label {

  display: block;

  font-size: 0.68rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: #71717a;

  margin-bottom: 0.35rem;

}

.modal__ip-line {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 0.5rem;

  min-height: 1.5rem;

}

.modal__ip-value {

  font-family: ui-monospace, "Cascadia Code", monospace;

  font-size: 0.88rem;

  color: #e4e4e7;

  word-break: break-all;

}

.modal__ip-loader {

  display: none;

  width: 16px;

  height: 16px;

  flex-shrink: 0;

  border-radius: 50%;

  border: 2px solid rgba(255, 255, 255, 0.1);

  border-top-color: #f59e0b;

  animation: modalSpin 0.7s linear infinite;

}

.modal__box--ip-loading .modal__ip-loader {

  display: block;

}

.modal__box--ip-loading .modal__ip-value {

  background: linear-gradient(90deg, #52525b 0%, #a1a1aa 40%, #52525b 80%);

  background-size: 200% auto;

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

  animation: modalShimmer 1.2s linear infinite;

}

.btn--modal {

  width: 100%;

  margin-top: 1rem;

  min-height: 48px;

  border-radius: 12px;

  box-shadow: 0 4px 20px rgba(255, 64, 19, 0.25);

}

@media (prefers-reduced-motion: reduce) {

  .modal__backdrop,

  .modal__box,

  .modal__success-check,

  .modal__error-icon::after {

    animation: none !important;

  }

  .modal--open .modal__box {

    opacity: 1;

    transform: none;

  }

  .modal__ip-loader {

    animation: none;

    border-top-color: rgba(255, 255, 255, 0.4);

  }

  .modal--open .modal__box--success .modal__progress-fill {

    animation: none;

    transform: scaleX(1);

  }

  .modal__box--ip-loading .modal__ip-value {

    animation: none;

    color: #a1a1aa;

    background: none;

    -webkit-background-clip: unset;

    background-clip: unset;

  }

}