/* Giriş ekranı — cam görünüm (01.10.2026, kullanıcı onayı). İKİ PANELDE ORTAK:
   public/admin/loginGlass.css ve license-panel/public/loginGlass.css BİREBİR
   aynı (test/otpCode.test.js denetler). style.css'ten SONRA yüklenir, giriş
   ekranının eski kart stilini ezer. Giriş ekranı temadan bağımsız hep koyu.
   Logo: orijinal renkli görsel, hâlesiz (kullanıcı kararı). */

.login-screen {
  background:
    radial-gradient(40% 32% at 18% 28%, rgba(45,189,139,.30), transparent 70%),
    radial-gradient(36% 30% at 82% 74%, rgba(16,80,68,.55), transparent 70%),
    #0b0f12;
  color: #e7edf1;
}
/* Çapraz ince çizgiler: kıvrımlı çizgilerin arkasında yavaşça kayar. */
.login-screen::before {
  content: '';
  position: absolute;
  inset: -10%;
  z-index: -2;
  pointer-events: none;
  background: repeating-linear-gradient(115deg, transparent 0 46px, rgba(45,189,139,.055) 46px 48px);
  animation: loginStripes 40s linear infinite;
}
@keyframes loginStripes { to { transform: translate3d(-103px, 48px, 0); } }
@media (prefers-reduced-motion: reduce) { .login-screen::before { animation: none; } }

.login-screen .login-card {
  width: 400px;
  max-width: calc(100vw - 32px);
  padding: 38px 34px 30px;
  border-radius: 26px;
  color: #e7edf1;
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  animation: loginCardIn .6s cubic-bezier(.2,.8,.2,1) both;
}
/* Köşelerdeki cam kareler. */
.login-screen .login-card::before,
.login-screen .login-card::after {
  content: '';
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.035);
  pointer-events: none;
  z-index: -1;
}
.login-screen .login-card::before { left: -26px; top: -26px; }
.login-screen .login-card::after { right: -26px; bottom: -26px; }
@keyframes loginCardIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

.login-screen .login-card h1,
.login-screen .login-brand-title { color: #fff; }
.login-screen .login-sub { color: #93a1b4; }
.login-screen .login-sub-company { color: #e7edf1; }
.login-screen .login-card form span { color: #93a1b4; font-size: 13px; }
.login-screen .login-card form label.login-checkbox-row span { color: #cfd8df; }
.login-screen .login-card code { color: #cfd8df; }

/* Uzun :not zinciri bilinçli: lisans panelinin genel input kuralını (5 öznitelik) ezmek için. */
.login-screen .login-card form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]) {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.28);
  color: #f1f5f7;
  color-scheme: dark;
  font-size: 15px;
  transition: border-color .2s, box-shadow .2s;
}
.login-screen .login-card form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):focus {
  outline: none;
  border-color: #2DBD8B;
  box-shadow: 0 0 0 3px rgba(45,189,139,.18);
}
.login-screen .login-card form input[type="checkbox"] { accent-color: #2DBD8B; }

.login-screen .login-card form button,
.login-screen .login-card > button:not(.link-btn):not(.btn-secondary),
.login-screen .login-card > div > button:not(.link-btn):not(.btn-secondary) {
  padding: 13px;
  border-radius: 14px;
  background: linear-gradient(90deg, #1c8f68, #2DBD8B);
  box-shadow: 0 10px 28px rgba(45,189,139,.28);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  transition: filter .2s, transform .1s;
}
.login-screen .login-card form button:hover,
.login-screen .login-card > button:not(.link-btn):not(.btn-secondary):hover { background: linear-gradient(90deg, #1c8f68, #2DBD8B); filter: brightness(1.08); }
.login-screen .login-card form button:active { transform: scale(.99); }
.login-screen .login-card form button:disabled { cursor: default; filter: none; }

.login-screen .login-card .btn-secondary {
  font-size: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  color: #cfd8df;
  border-radius: 12px;
}
.login-screen .login-card .btn-secondary:hover { background: rgba(255,255,255,.1); color: #fff; }
.login-screen .form-error { color: #ff8a8f; }
.login-screen .login-powered-by { color: rgba(255,255,255,.35); }

/* Kod ekranının başlık simgesi (anahtar). */
.login-ic {
  width: 52px; height: 52px; margin: 0 auto 14px;
  border-radius: 15px; display: grid; place-items: center;
  color: #2DBD8B; border: 1px solid rgba(45,189,139,.45); background: rgba(45,189,139,.08);
}

/* ---- Doğrulama kodu kutuları (otpCode.js) ---- */
.login-card form label:has(.otp-wrap) > span { display: none; }
.otp-wrap { position: relative; height: 128px; display: grid; place-items: center; margin: 6px 0 10px; }
.otp-boxes { display: flex; gap: 9px; justify-content: center; position: relative; cursor: text; }
.otp-box {
  width: 46px; height: 56px;
  display: grid; place-items: center;
  border-radius: 13px;
  border: 1.5px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.28);
  color: #fff;
  font: 700 23px/1 Inter, system-ui, sans-serif;
  transform: translate(0, 0) rotate(0);
  transition: transform .5s cubic-bezier(.3,1.3,.4,1), opacity .35s, border-color .2s, box-shadow .2s;
}
.otp-box.filled { border-color: rgba(45,189,139,.6); animation: otpPop .22s ease-out; }
.otp-box.cur { border-color: #2DBD8B; box-shadow: 0 0 18px rgba(45,189,139,.45); }
.otp-box.cur::after { content: ''; width: 2px; height: 24px; background: #2DBD8B; animation: otpCaret 1s steps(1) infinite; }
@keyframes otpPop { 50% { transform: scale(1.1); } }
@keyframes otpCaret { 50% { opacity: 0; } }
/* Gerçek giriş alanı kutuların üstünde, görünmez. 16px: iOS yakınlaştırmasın. */
.login-screen .login-card form .otp-wrap input.otp-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
.otp-wrap input.otp-input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; font-size: 16px; caret-color: transparent; cursor: text;
}
/* Yedek kod (rakam dışı) yazılınca normal metin kutusu. */
.otp-wrap.otp-text { height: auto; display: block; }
.otp-wrap.otp-text .otp-boxes, .otp-wrap.otp-text .otp-ring { display: none; }
.login-screen .login-card form .otp-wrap.otp-text input.otp-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
.otp-wrap.otp-text input.otp-input { position: static; opacity: 1; height: auto; caret-color: auto; letter-spacing: 1px; }

/* Doğrulanıyor: kutular halkaya dizilip döner. */
.otp-wrap.busy .otp-boxes { animation: otpSpin 2.4s linear infinite; }
.otp-wrap.busy .otp-box { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(.72); border-color: rgba(45,189,139,.7); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
@keyframes otpSpin { to { transform: rotate(360deg); } }

/* Onaylandı: kutular söner, yeşil halka + onay işareti belirir. */
.otp-ring {
  position: absolute; width: 112px; height: 112px; border-radius: 50%;
  border: 3px solid #2DBD8B; color: #2DBD8B;
  display: grid; place-items: center;
  box-shadow: 0 0 34px rgba(45,189,139,.45), inset 0 0 26px rgba(45,189,139,.18);
  opacity: 0; transform: scale(.6); pointer-events: none;
  transition: opacity .35s, transform .5s cubic-bezier(.3,1.4,.4,1);
}
.otp-ring svg path { stroke-dasharray: 24; stroke-dashoffset: 24; }
.otp-wrap.ok .otp-box { opacity: 0; transform: scale(.4); }
.otp-wrap.ok .otp-ring { opacity: 1; transform: scale(1); }
.otp-wrap.ok .otp-ring svg path { animation: otpCheck .45s .2s ease-out forwards; }
@keyframes otpCheck { to { stroke-dashoffset: 0; } }

/* Hatalı kod: kutular kızarır ve sallanır. */
.otp-wrap.bad .otp-boxes { animation: otpShake .45s; }
.otp-wrap.bad .otp-box { border-color: #ff6b70; box-shadow: 0 0 14px rgba(255,107,112,.35); }
@keyframes otpShake { 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }

.otp-btn-busy::before {
  content: ''; display: inline-block; width: 13px; height: 13px; margin-right: 8px; vertical-align: -2px;
  border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%;
  animation: otpSpin .8s linear infinite;
}
@media (max-width: 420px) { .otp-box { width: 40px; height: 50px; font-size: 20px; } .otp-boxes { gap: 7px; } }
@media (prefers-reduced-motion: reduce) {
  .otp-wrap.busy .otp-boxes { animation: none; }
  .login-screen .login-card { animation: none; }
}