:root {
  --login-bg: #eef3f8;
  --navy: #132033;
  --navy-2: #203a5d;
  --blue: #2f86ff;
  --blue-soft: #e8f1ff;
  --green: #20b486;
  --gold: #c69a48;
  --text: #132236;
  --muted: #6b7a90;
  --line: #d8e2ee;
  --panel: rgba(255, 255, 255, .92);
  --shadow: 0 28px 70px rgba(19, 32, 51, .22);
}

/* Logo based loading override
   Ustteki genel loading kurallarinin son asamada logo ile ezilmesi icin
   dosyanin sonunda tutulur. SVG zaten statik ve kucuk oldugu icin performans
   maliyeti dusuktur; animasyon sadece transform/opacity uzerinden calisir. */
/* ==========================================
   1. ANIMASYON TANIMLAMALARI
   ========================================== */

/* Dışarıdaki İnce Halkanın Dönme Efekti */
@keyframes ulLogoRotateSpinner {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Ortadaki Logonun Nefes Alma Efekti */
@keyframes ulLogoBreathEffect {
  0%, 100% {
    transform: translate(-50%, -50%) scale(0.94);
    opacity: 0.9;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.04);
    opacity: 1;
  }
}

/* uniGUI login window frame cleanup
   TUniLoginForm, ExtJS tarafinda dista bir window/panel cercevesi uretir.
   Ekrandaki kalin gri cizgi bu wrapper'dan gelir. Asagidaki kurallar sadece
   login sayfasi CSS'inde calistigi icin ana uygulamadaki pencere/grid
   cercevelerini hedeflemez. */
body:has(.ul-login-shell) > .x-window,
body:has(.ul-login-shell) > .x-panel,
body:has(.ul-login-shell) > .x-container,
body:has(.ul-login-shell) > .x-window-default,
body:has(.ul-login-shell) > .x-panel-default,
body:has(.ul-login-shell) > .x-window-default-framed,
body:has(.ul-login-shell) > .x-panel-default-framed {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:has(.ul-login-shell) > .x-window .x-window-body,
body:has(.ul-login-shell) > .x-window .x-panel-body,
body:has(.ul-login-shell) > .x-panel .x-panel-body,
body:has(.ul-login-shell) > .x-container .x-panel-body,
body:has(.ul-login-shell) > .x-window-default-framed .x-window-body,
body:has(.ul-login-shell) > .x-panel-default-framed .x-panel-body {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:has(.ul-login-shell) > .x-window .x-window-header,
body:has(.ul-login-shell) > .x-panel .x-panel-header {
  display: none !important;
}

body:has(.ul-login-shell) > .x-css-shadow,
body:has(.ul-login-shell) .x-css-shadow,
body:has(.ul-login-shell) .x-window-default-outer-border-l,
body:has(.ul-login-shell) .x-window-default-outer-border-r,
body:has(.ul-login-shell) .x-window-default-outer-border-b,
body:has(.ul-login-shell) .x-panel-default-outer-border-l,
body:has(.ul-login-shell) .x-panel-default-outer-border-r,
body:has(.ul-login-shell) .x-panel-default-outer-border-b,
body:has(.ul-login-shell) .x-window-wrap,
body:has(.ul-login-shell) .x-window-bodyWrap {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ExtJS framed window/panel bilesenlerinde alt koseler ayri frame
   hucreleri olarak render edilebiliyor. Ana border kaldirilsa bile bu
   hucrelerin eski arka plan resmi sag/sol altta kucuk bir parca gibi
   kalabiliyor; sadece gorsel katmani sifirliyoruz, boyut/layout'a
   dokunmuyoruz. */
body:has(.ul-login-shell) .x-frame,
body:has(.ul-login-shell) .x-frame-tl,
body:has(.ul-login-shell) .x-frame-tr,
body:has(.ul-login-shell) .x-frame-tc,
body:has(.ul-login-shell) .x-frame-ml,
body:has(.ul-login-shell) .x-frame-mr,
body:has(.ul-login-shell) .x-frame-mc,
body:has(.ul-login-shell) .x-frame-bl,
body:has(.ul-login-shell) .x-frame-br,
body:has(.ul-login-shell) .x-frame-bc,
body:has(.ul-login-shell) .x-window-default-framed-tl,
body:has(.ul-login-shell) .x-window-default-framed-tr,
body:has(.ul-login-shell) .x-window-default-framed-tc,
body:has(.ul-login-shell) .x-window-default-framed-ml,
body:has(.ul-login-shell) .x-window-default-framed-mr,
body:has(.ul-login-shell) .x-window-default-framed-mc,
body:has(.ul-login-shell) .x-window-default-framed-bl,
body:has(.ul-login-shell) .x-window-default-framed-br,
body:has(.ul-login-shell) .x-window-default-framed-bc,
body:has(.ul-login-shell) .x-panel-default-framed-tl,
body:has(.ul-login-shell) .x-panel-default-framed-tr,
body:has(.ul-login-shell) .x-panel-default-framed-tc,
body:has(.ul-login-shell) .x-panel-default-framed-ml,
body:has(.ul-login-shell) .x-panel-default-framed-mr,
body:has(.ul-login-shell) .x-panel-default-framed-mc,
body:has(.ul-login-shell) .x-panel-default-framed-bl,
body:has(.ul-login-shell) .x-panel-default-framed-br,
body:has(.ul-login-shell) .x-panel-default-framed-bc {
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* uniGUI component login form
   Bu blok HTML prototipten bagimsiz olarak, LoginForm.dfm icindeki gercek
   TUniEdit/TUniButton/TUniPanel bilesenlerine verilen "ul-*" class'larini
   hedefler. Boylece degerleri Delphi tarafinda EdtKullaniciAdi.Text,
   EdtSifre.Text ve EdtKod*.Text seklinde okuyabilir, buton click eventlerinde
   kendi SMS/e-posta/kullanici dogrulama fonksiyonlarini tetikleyebilirsin. */
.ul-login-shell {
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 18px !important;
  /* uniGUI/ExtJS bazi tarayici kombinasyonlarinda alt koselerde 1px'lik
     wrapper kalintisi gorunebiliyor. Ana karti 1px iceriden kirparak bu
     kalintiyi tasarim olcusunu hissedilir sekilde degistirmeden gizliyoruz. */
  -webkit-clip-path: inset(0 1px 1px 1px round 18px) !important;
  clip-path: inset(0 1px 1px 1px round 18px) !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 24px 58px rgba(19, 32, 51, .18) !important;
}

.ul-login-shell,
.ul-login-shell > .x-panel-body,
.ul-login-shell .x-panel-body,
.ul-login-shell .x-box-inner {
  border-width: 0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

.ul-brand-panel {
  overflow: hidden !important;
  border-radius: 18px 0 0 18px !important;
  color: #fff !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(145deg, rgba(19, 32, 51, .98) 0%, rgba(27, 51, 82, .98) 52%, rgba(19, 32, 51, .98) 100%) !important;
  background-size: 72px 72px, 72px 72px, auto !important;
}

.ul-form-panel {
  overflow: hidden !important;
  border-radius: 0 18px 18px 0 !important;
}

.ul-brand-panel > .x-panel-body,
.ul-form-panel > .x-panel-body,
.ul-content-panel > .x-panel-body {
  background: transparent !important;
  border: 0 !important;
}

.ul-brand-icon-box,
.ul-hero-icon-box {
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .11) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

.ul-hero-icon-box {
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 50% 34%, rgba(216,234,255,.18), transparent 56%),
    linear-gradient(145deg, rgba(255,255,255,.17), rgba(255,255,255,.055)) !important;
  box-shadow: 0 28px 60px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.ul-brand-icon-label,
.ul-hero-icon-label {
  color: transparent !important;
  line-height: 52px !important;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif !important;
  font-weight: 700 !important;
  background: url("../avatarimage/icer-modern-logo-loading.svg") center / 42px 42px no-repeat !important;
}

.ul-hero-icon-label {
  line-height: 138px !important;
  background-size: 130px 130px !important;
}

.ul-brand-title,
.ul-brand-subtitle,
.ul-hero-title,
.ul-hero-text {
  color: #fff !important;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif !important;
}

.ul-hero-title {
  font-weight: 600 !important;
  line-height: 1.22 !important;
}

.ul-hero-text {
  line-height: 1.7 !important;
}

.ul-brand-subtitle,
.ul-hero-text {
  color: rgba(255, 255, 255, .68) !important;
}

.ul-watermark {
  color: rgba(255, 255, 255, .055) !important;
  transform: rotate(-12deg);
}

.ul-form-panel {
  background:
    radial-gradient(circle at 82% 12%, rgba(47, 134, 255, .10), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,251,255,.94)) !important;
}

.ul-content-panel {
  background: transparent !important;
  overflow: visible !important;
}

.ul-content-panel > .x-panel-body,
.ul-content-panel .x-panel-body,
.ul-content-panel .x-box-inner {
  overflow: visible !important;
}

.ul-form-title {
  color: var(--navy) !important;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif !important;
}

.ul-form-subtitle {
  color: var(--muted) !important;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif !important;
  line-height: 1.55 !important;
}

.ul-field-caption {
  color: #42526b !important;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif !important;
}

.ul-edit,
.ul-code-edit {
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 12px 28px rgba(19, 32, 51, .06) !important;
  overflow: hidden !important;
}

.ul-edit input,
.ul-code-edit input,
.ul-edit .x-form-text,
.ul-code-edit .x-form-text {
  height: 50px !important;
  min-height: 50px !important;
  padding: 0 16px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--text) !important;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 50px !important;
  box-shadow: none !important;
}

.ul-edit .x-form-trigger-wrap,
.ul-edit .x-form-text-wrap,
.ul-code-edit .x-form-trigger-wrap,
.ul-code-edit .x-form-text-wrap {
  height: 52px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ul-edit .x-form-item-body,
.ul-code-edit .x-form-item-body {
  border: 0 !important;
  background: transparent !important;
}

.ul-code-edit input {
  font-size: 20px !important;
  font-weight: 600 !important;
  text-align: center !important;
}

.ul-edit.x-form-focus,
.ul-code-edit.x-form-focus,
.ul-edit:focus-within,
.ul-code-edit:focus-within {
  border-color: rgba(47, 134, 255, .75) !important;
  box-shadow: 0 16px 34px rgba(47, 134, 255, .14) !important;
}

.ul-primary-button,
.ul-method-button,
.ul-back-button,
.ul-ghost-button {
  border: 0 !important;
  border-radius: 12px !important;
  background-image: none !important;
  box-shadow: none !important;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif !important;
  font-weight: 600 !important;
}

.ul-primary-button .x-btn-button,
.ul-method-button .x-btn-button,
.ul-back-button .x-btn-button,
.ul-ghost-button .x-btn-button {
  height: 100% !important;
}

.ul-primary-button .x-btn-inner,
.ul-method-button .x-btn-inner,
.ul-back-button .x-btn-inner,
.ul-ghost-button .x-btn-inner {
  color: inherit !important;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif !important;
  font-weight: 600 !important;
  line-height: 52px !important;
  text-shadow: none !important;
}

.ul-primary-button {
  color: #fff !important;
  background: linear-gradient(135deg, #1b4f8a, #2f86ff) !important;
  box-shadow: 0 16px 32px rgba(47, 134, 255, .24) !important;
}

.ul-primary-button .x-btn-inner {
  color: #fff !important;
  font-size: 15px !important;
  line-height: 54px !important;
}

.ul-method-button {
  color: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 26px rgba(19, 32, 51, .10) !important;
}

.ul-sms-method {
  background: linear-gradient(135deg, #1f67c7, #2f86ff) !important;
}

.ul-email-method {
  background: linear-gradient(135deg, #334967, #1f3148) !important;
}

.ul-method-active {
  box-shadow: 0 0 0 3px rgba(47, 134, 255, .16), 0 16px 32px rgba(19, 32, 51, .14) !important;
}

.ul-back-button,
.ul-ghost-button {
  color: #42526b !important;
  border: 1px solid #d6e2ef !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .72) !important;
}

.ul-ghost-button {
  position: relative !important;
  border-radius: 12px !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ul-ghost-button .x-btn-inner {
  font-size: 0 !important;
}

.ul-ghost-button .x-btn-inner::before {
  content: "\f06e";
  color: #7c8fa8;
  font-family: "Font Awesome 5 Free";
  font-size: 13px;
  font-weight: 900;
  line-height: 52px;
}

.ul-forgot-label {
  color: #2f72d8 !important;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif !important;
}

.ul-timer-label {
  color: #0d7b5f !important;
  border-radius: 999px !important;
  background: #e6f8f1 !important;
  line-height: 28px !important;
}

.ul-copyright {
  color: var(--muted) !important;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif !important;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(circle at 16% 28%, rgba(47, 134, 255, .18), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(32, 180, 134, .14), transparent 26%),
    linear-gradient(135deg, #f8fbff 0%, var(--login-bg) 42%, #dfe9f4 100%);
}

.login-page {
  position: relative;
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: clamp(24px, 5vw, 72px);
  overflow: hidden;
}

.login-page::before,
.login-page::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.login-page::before {
  width: 760px;
  height: 760px;
  right: -240px;
  top: -180px;
  border-radius: 50%;
  background:
    linear-gradient(135deg, rgba(19, 32, 51, .10), rgba(47, 134, 255, .10)),
    radial-gradient(circle, rgba(255, 255, 255, .72), transparent 64%);
  filter: blur(4px);
}

.login-page::after {
  left: 7vw;
  bottom: 8vh;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(19, 32, 51, .08);
  border-radius: 42px;
  transform: rotate(-12deg);
  background: rgba(255, 255, 255, .18);
}

.login-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(360px, 1.05fr) minmax(360px, .95fr);
  width: min(1120px, 100%);
  min-height: 560px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(22px);
}

.brand-panel {
  position: relative;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  justify-content: space-between;
  padding: 42px;
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(19, 32, 51, .96) 0%, rgba(27, 51, 82, .98) 52%, rgba(19, 32, 51, .96) 100%);
}

.brand-panel::before {
  position: absolute;
  content: "";
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(135deg, transparent 0%, #000 28%, #000 76%, transparent 100%);
  opacity: .34;
}

.brand-panel::after {
  position: absolute;
  content: "";
  width: 360px;
  height: 360px;
  right: -118px;
  bottom: -118px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 134, 255, .34), transparent 66%);
}

.brand-mark,
.brand-copy,
.insight-row,
.office-board,
.brand-hero {
  position: relative;
  z-index: 1;
}

.brand-mark {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 14px;
  color: #9cc6ff;
  background: rgba(255, 255, 255, .11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  font-size: 23px;
}

.brand-logo-image {
  display: block;
  width: 42px;
  height: 42px;
}

.brand-mark strong {
  display: block;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0;
}

.brand-mark small {
  display: block;
  margin-top: 2px;
  color: rgba(255, 255, 255, .62);
  font-size: 12px;
}

.brand-copy {
  max-width: 520px;
  margin: 72px 0 46px;
}

.office-copy {
  margin: 56px 0 24px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: #98d8c3;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.brand-copy h1 {
  margin: 0;
  font-size: clamp(31px, 4vw, 48px);
  line-height: 1.16;
  font-weight: 600;
  letter-spacing: 0;
}

.brand-copy p {
  max-width: 440px;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, .70);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 400;
}

.brand-hero {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 310px;
  margin: 24px 0;
  text-align: center;
}

.hero-emblem {
  position: relative;
  display: grid;
  width: 126px;
  height: 126px;
  margin-bottom: 28px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 34px;
  color: #d9eaff;
  background:
    radial-gradient(circle at 50% 34%, rgba(216, 234, 255, .18), transparent 56%),
    linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));
  box-shadow:
    0 28px 60px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .18);
}

.hero-emblem::before {
  position: absolute;
  content: "";
  inset: -18px;
  border: 1px solid rgba(156, 198, 255, .12);
  border-radius: 44px;
}

.hero-logo-image {
  display: block;
  width: 108px;
  height: 108px;
}

.brand-hero h1 {
  max-width: 500px;
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 3.3vw, 43px);
  line-height: 1.22;
  font-weight: 600;
  letter-spacing: 0;
}

.brand-hero p {
  max-width: 420px;
  margin: 20px 0 0;
  color: rgba(255, 255, 255, .68);
  font-size: 15px;
  line-height: 1.7;
  font-weight: 400;
}

.office-copy h1 {
  font-size: clamp(30px, 3.4vw, 42px);
}

.office-copy p {
  margin-top: 12px;
  color: rgba(255, 255, 255, .66);
}

.office-board {
  display: grid;
  gap: 16px;
}

.office-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
}

.office-status span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.office-status i {
  color: #9cc6ff;
}

.office-status strong {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.office-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.office-metrics article {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 86px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .06));
}

.office-metrics i {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 11px;
  color: #9cc6ff;
  background: rgba(156, 198, 255, .13);
  font-size: 16px;
}

.office-metrics span {
  display: block;
  color: #fff;
  font-size: 22px;
  line-height: 1.1;
  font-weight: 600;
}

.office-metrics small {
  display: block;
  margin-top: 5px;
  color: rgba(255, 255, 255, .62);
  font-size: 11px;
  line-height: 1.35;
}

.office-agenda {
  padding: 17px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  background: rgba(9, 18, 31, .26);
}

.agenda-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.agenda-title span {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.agenda-title strong {
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  color: #0f6b51;
  background: #c9f7e6;
  font-size: 11px;
  line-height: 24px;
  font-weight: 700;
  white-space: nowrap;
}

.office-agenda ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.office-agenda li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .10);
}

.office-agenda li:first-child {
  padding-top: 0;
  border-top: 0;
}

.office-agenda time {
  color: #98d8c3;
  font-size: 12px;
  font-weight: 700;
}

.office-agenda li span {
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  line-height: 1.5;
}

.insight-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.insight-row article {
  min-height: 104px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  background: rgba(255, 255, 255, .08);
}

.insight-row i {
  color: #9cc6ff;
  font-size: 17px;
}

.insight-row span {
  display: block;
  margin-top: 12px;
  font-size: 23px;
  font-weight: 600;
}

.insight-row small {
  display: block;
  color: rgba(255, 255, 255, .62);
  font-size: 11px;
}

.legal-watermark {
  position: absolute;
  right: 38px;
  bottom: 132px;
  z-index: 0;
  color: rgba(255, 255, 255, .055);
  font-size: 210px;
  transform: rotate(-12deg);
}

.form-panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(32px, 4.4vw, 54px) clamp(32px, 4.4vw, 54px) 14px;
  background:
    radial-gradient(circle at 82% 12%, rgba(47, 134, 255, .10), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 251, 255, .94));
}

.form-header {
  margin-bottom: 26px;
}

.secure-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #cde8dc;
  border-radius: 999px;
  color: #087a5c;
  background: #e9fbf5;
  font-size: 12px;
  font-weight: 600;
}

.form-header h2 {
  margin: 0 0 7px;
  color: var(--navy);
  font-size: 31px;
  line-height: 1.2;
  font-weight: 600;
}

.form-header p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.login-form {
  display: grid;
  gap: 17px;
}

.field {
  display: grid;
  gap: 8px;
}

.field > span {
  color: #42526b;
  font-size: 12px;
  font-weight: 600;
}

.control {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(19, 32, 51, .06);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.control:focus-within {
  border-color: rgba(47, 134, 255, .75);
  box-shadow: 0 16px 34px rgba(47, 134, 255, .14);
  transform: translateY(-1px);
}

.control > i {
  color: #7c8fa8;
  font-size: 15px;
}

.control input,
.control select {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  font: inherit;
  font-size: 14px;
}

.select-control {
  grid-template-columns: 22px minmax(0, 1fr);
}

.ghost-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 10px;
  color: #7c8fa8;
  background: transparent;
  cursor: pointer;
}

.ghost-icon:hover {
  color: var(--blue);
  background: var(--blue-soft);
}

.form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 2px 0 6px;
  color: var(--muted);
  font-size: 13px;
}

.form-options-single {
  justify-content: flex-end;
}

.remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.remember input {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
}

a {
  color: #2f72d8;
  font-weight: 500;
  text-decoration: none;
}

a:hover {
  color: #1857ad;
}

.login-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 54px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #1b4f8a, #2f86ff);
  box-shadow: 0 16px 32px rgba(47, 134, 255, .24);
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  transition: transform .18s ease, box-shadow .18s ease;
}

.login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(47, 134, 255, .30);
}

.form-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 0;
  color: var(--muted);
  font-size: 12px;
}

.verify-panel {
  position: relative;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  min-height: 34px;
  margin-bottom: 22px;
  padding: 0 12px;
  border: 1px solid #d6e2ef;
  border-radius: 999px;
  color: #42526b;
  background: rgba(255, 255, 255, .72);
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 10px 22px rgba(19, 32, 51, .06);
}

.back-link:hover {
  color: #1f67c7;
  border-color: #bdd3ed;
  background: #ffffff;
}

.verify-header {
  margin-bottom: 22px;
}

.verify-form {
  gap: 15px;
}

.verify-choice {
  display: grid;
  gap: 12px;
}

.method-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  box-shadow: 0 12px 26px rgba(19, 32, 51, .10);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.method-button:hover,
.method-button.active {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(19, 32, 51, .14);
  filter: saturate(1.06);
}

.sms-method {
  background: linear-gradient(135deg, #1f67c7, #2f86ff);
}

.email-method {
  background: linear-gradient(135deg, #334967, #1f3148);
}

.verify-method {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid #dbe7f3;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(242, 247, 253, .86));
  box-shadow: 0 12px 28px rgba(19, 32, 51, .055);
}

.verify-icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border-radius: 13px;
  font-size: 18px;
}

.verify-icon.sms {
  color: #1f67c7;
  background: #e8f1ff;
}

.verify-icon.email {
  color: #0d7b5f;
  background: #e6f8f1;
}

.verify-method strong {
  display: block;
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
}

.verify-method span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.code-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
}

.code-row-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 330px;
  margin: 0 auto;
}

.code-row input {
  width: 100%;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: 0;
  color: var(--navy);
  background: #fff;
  box-shadow: 0 10px 24px rgba(19, 32, 51, .055);
  font: inherit;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.code-row input:focus {
  border-color: rgba(47, 134, 255, .78);
  box-shadow: 0 16px 30px rgba(47, 134, 255, .14);
  transform: translateY(-1px);
}

.verify-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--muted);
  font-size: 12px;
}

.verify-actions span {
  min-width: 54px;
  padding: 5px 9px;
  border-radius: 999px;
  color: #0d7b5f;
  background: #e6f8f1;
  text-align: center;
  font-weight: 700;
}

@media (max-width: 920px) {
  .login-page {
    padding: 18px;
  }

  .login-shell {
    grid-template-columns: 1fr;
    min-height: min(560px, calc(100vh - 36px));
  }

  .brand-panel {
    display: none;
  }
}

@media (max-width: 560px) {
  .brand-panel,
  .form-panel {
    padding: 26px;
  }

  .insight-row {
    grid-template-columns: 1fr;
  }

  .form-options,
  .form-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .code-row {
    gap: 7px;
  }

  .code-row input {
    height: 46px;
    border-radius: 10px;
    font-size: 18px;
  }
}

/* Login initial loading center fix
   ------------------------------------------------------------
   uniGUI ilk yukleme sirasinda #loading-msg bazi ekranlarda ust kenara yakin
   olusabiliyor. Bu blok sadece ilk yukleme maskesini viewport merkezine alir;
   form, popup veya frame layout'una dokunmaz. */
#loading,
#loading-mask {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
}

#loading-msg,
#loading .loading-indicator {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  z-index: 999999 !important;
}