/* ============================================================
   MUNTIJI VISUAL IDENTITY KERNEL
   Accounts / Login R2
   Enterprise Authentication Surface
   ============================================================ */

:root{
  --mt-brand-50:#f3f6ff;
  --mt-brand-100:#e6edff;
  --mt-brand-200:#ccd9ff;
  --mt-brand-300:#a9beff;
  --mt-brand-400:#7898ff;
  --mt-brand-500:#4d70f5;
  --mt-brand-600:#3159e8;
  --mt-brand-700:#2648c7;
  --mt-brand-800:#233da0;
  --mt-brand-900:#21377f;

  --mt-ink-950:#10182b;
  --mt-ink-900:#172036;
  --mt-ink-800:#27334a;
  --mt-ink-700:#3c4961;
  --mt-ink-600:#59667c;
  --mt-ink-500:#768197;
  --mt-ink-400:#9aa4b5;

  --mt-surface:#ffffff;
  --mt-surface-soft:#f8faff;
  --mt-canvas:#f4f7fb;

  --mt-line:#e4e9f2;
  --mt-line-strong:#d6deeb;

  --mt-success:#179b69;
  --mt-danger:#d63c4a;

  --mt-radius-sm:10px;
  --mt-radius-md:14px;
  --mt-radius-lg:20px;
  --mt-radius-xl:28px;

  --mt-shadow-sm:0 5px 18px rgba(24,38,70,.05);
  --mt-shadow-md:0 18px 50px rgba(25,40,75,.09);
  --mt-shadow-lg:0 28px 80px rgba(25,42,80,.12);

  --mt-field-height:56px;

  --mt-transition:180ms cubic-bezier(.2,.7,.3,1);
}


*{
  box-sizing:border-box;
}


html{
  min-height:100%;
  background:var(--mt-canvas);
}


body.muntiji-auth-page{
  margin:0;
  min-height:100vh;
  color:var(--mt-ink-900);
  background:
    radial-gradient(circle at 85% 5%,rgba(49,89,232,.07),transparent 27rem),
    radial-gradient(circle at 10% 85%,rgba(77,112,245,.045),transparent 24rem),
    var(--mt-canvas);
  font-family:
    "IBM Plex Sans Arabic",
    "Noto Sans Arabic",
    "Segoe UI",
    Tahoma,
    Arial,
    sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}


a{
  color:inherit;
}


/* ============================================================
   Header
   ============================================================ */

.site-header{
  position:relative;
  z-index:10;
  width:100%;
  border-bottom:1px solid rgba(214,222,235,.85);
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}


.site-header .inner{
  width:min(1180px,calc(100% - 40px));
  min-height:82px;
  margin:0 auto;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:36px;
}


.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-width:0;
  text-decoration:none;
}


.brand-badge,
.signature-badge{
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
  font-weight:800;
  color:#fff;
  background:linear-gradient(145deg,var(--mt-brand-600),var(--mt-brand-500));
  box-shadow:0 10px 25px rgba(49,89,232,.22);
}


.brand-badge{
  width:46px;
  height:46px;
  border-radius:15px;
  font-size:20px;
}


.brand-text{
  display:flex;
  flex-direction:column;
  min-width:0;
  gap:2px;
}


.brand-title{
  font-size:18px;
  line-height:1.35;
  color:var(--mt-ink-950);
  font-weight:800;
}


.brand-subtitle{
  color:var(--mt-ink-600);
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
}


.main-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}


.main-nav a{
  position:relative;
  padding:10px 14px;
  color:var(--mt-ink-700);
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  border-radius:10px;
  transition:
    color var(--mt-transition),
    background var(--mt-transition);
}


.main-nav a:hover{
  color:var(--mt-brand-700);
  background:var(--mt-brand-50);
}


.header-action{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 19px;
  border-radius:13px;
  background:var(--mt-brand-600);
  color:#fff;
  font-size:13px;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 10px 24px rgba(49,89,232,.18);
  transition:
    transform var(--mt-transition),
    background var(--mt-transition),
    box-shadow var(--mt-transition);
}


.header-action:hover{
  transform:translateY(-1px);
  background:var(--mt-brand-700);
  box-shadow:0 13px 28px rgba(49,89,232,.23);
}


/* ============================================================
   Main frame
   ============================================================ */

.page-main{
  width:100%;
  padding:48px 20px 34px;
}


.auth-frame{
  width:min(1150px,100%);
  min-height:650px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(400px,.94fr);
  overflow:hidden;
  border:1px solid rgba(214,222,235,.9);
  border-radius:var(--mt-radius-xl);
  background:var(--mt-surface);
  box-shadow:var(--mt-shadow-lg);
}


/* ============================================================
   Showcase
   ============================================================ */

.showcase{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:650px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:52px 48px 34px;
  color:#fff;
  background:
    linear-gradient(
      145deg,
      #294ecb 0%,
      #315be6 46%,
      #426cf0 100%
    );
}


.showcase::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:440px;
  height:440px;
  top:-250px;
  left:-140px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
}


.showcase::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:330px;
  height:330px;
  bottom:-215px;
  right:-105px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.11);
}


.showcase-glow{
  position:absolute;
  z-index:-2;
  pointer-events:none;
  border-radius:50%;
  filter:blur(2px);
}


.showcase-glow-one{
  width:360px;
  height:360px;
  top:-130px;
  right:-120px;
  background:rgba(132,163,255,.18);
}


.showcase-glow-two{
  width:300px;
  height:300px;
  bottom:-130px;
  left:-90px;
  background:rgba(18,43,138,.18);
}


.showcase-content{
  position:relative;
  z-index:1;
}


.showcase-eyebrow{
  width:max-content;
  max-width:100%;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 13px;
  margin-bottom:25px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:rgba(255,255,255,.93);
  font-size:12px;
  font-weight:800;
  backdrop-filter:blur(10px);
}


.eyebrow-mark{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 5px rgba(255,255,255,.09);
}


.showcase h1{
  max-width:510px;
  margin:0;
  color:#fff;
  font-size:clamp(42px,4.4vw,64px);
  line-height:1.12;
  letter-spacing:-1.6px;
  font-weight:850;
}


.showcase h1 span{
  color:#dce5ff;
}


.showcase-lead{
  max-width:520px;
  margin:23px 0 0;
  color:rgba(255,255,255,.78);
  font-size:16px;
  line-height:1.95;
  font-weight:500;
}


.feature-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:34px;
}


.feature-item{
  min-height:100px;
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:16px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:17px;
  background:rgba(255,255,255,.075);
  backdrop-filter:blur(12px);
  transition:
    transform var(--mt-transition),
    background var(--mt-transition),
    border-color var(--mt-transition);
}


.feature-item:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.24);
  background:rgba(255,255,255,.11);
}


.feature-icon{
  width:36px;
  height:36px;
  flex:0 0 36px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.16);
  border-radius:11px;
  background:rgba(255,255,255,.11);
}


.feature-icon svg{
  width:19px;
  height:19px;
  stroke:#fff;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}


.feature-copy{
  display:flex;
  flex-direction:column;
  gap:4px;
}


.feature-copy strong{
  color:#fff;
  font-size:13px;
  line-height:1.6;
  font-weight:800;
}


.feature-copy span{
  color:rgba(255,255,255,.69);
  font-size:11px;
  line-height:1.7;
  font-weight:500;
}


.showcase-bottom{
  position:relative;
  z-index:1;
  margin-top:32px;
  padding-top:23px;
  border-top:1px solid rgba(255,255,255,.13);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}


.brand-signature{
  display:flex;
  align-items:center;
  gap:10px;
}


.signature-badge{
  width:38px;
  height:38px;
  border-radius:12px;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:none;
}


.brand-signature > span:last-child{
  display:flex;
  flex-direction:column;
}


.brand-signature strong{
  color:#fff;
  font-size:13px;
  font-weight:800;
}


.brand-signature small{
  margin-top:2px;
  color:rgba(255,255,255,.62);
  font-size:10px;
}


.showcase-status{
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(255,255,255,.7);
  font-size:10px;
  font-weight:700;
}


.status-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#72e4b4;
  box-shadow:0 0 0 5px rgba(114,228,180,.11);
}


/* ============================================================
   Login side
   ============================================================ */

.login-shell{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:42px 42px;
  background:
    linear-gradient(180deg,#fff 0%,#fbfcff 100%);
}


.login-card{
  width:100%;
  max-width:430px;
  margin:auto;
}


.login-card-head{
  margin-bottom:30px;
}


.security-label{
  width:max-content;
  max-width:100%;
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:31px;
  padding:0 11px;
  margin-bottom:16px;
  border:1px solid var(--mt-brand-100);
  border-radius:999px;
  color:var(--mt-brand-700);
  background:var(--mt-brand-50);
  font-size:11px;
  font-weight:800;
}


.security-label svg{
  width:15px;
  height:15px;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}


.login-card-head h2{
  margin:0;
  color:var(--mt-ink-950);
  font-size:34px;
  line-height:1.3;
  letter-spacing:-.7px;
  font-weight:850;
}


.login-card-head p{
  margin:10px 0 0;
  color:var(--mt-ink-600);
  font-size:13px;
  line-height:1.85;
  font-weight:500;
}


/* ============================================================
   Messages
   ============================================================ */

.messages,
.form-alert{
  display:grid;
  gap:8px;
  margin-bottom:18px;
}


.message,
.form-alert{
  padding:11px 13px;
  border-radius:var(--mt-radius-sm);
  font-size:12px;
  line-height:1.7;
}


.message{
  border:1px solid var(--mt-brand-100);
  color:var(--mt-brand-800);
  background:var(--mt-brand-50);
}


.message.error,
.form-alert{
  border:1px solid #ffd8dc;
  color:#a82935;
  background:#fff5f6;
}


.message.success{
  border-color:#ccefe1;
  color:#08764c;
  background:#f1fbf7;
}


/* ============================================================
   Form
   ============================================================ */

.field{
  margin-bottom:19px;
}


.field label{
  display:block;
  margin:0 0 8px;
  color:var(--mt-ink-800);
  font-size:12px;
  line-height:1.5;
  font-weight:800;
}


.input-wrap{
  position:relative;
}


.field input[type="text"],
.field input[type="password"]{
  width:100%;
  height:var(--mt-field-height);
  padding:0 48px 0 16px;
  outline:none;
  border:1px solid var(--mt-line-strong);
  border-radius:var(--mt-radius-md);
  background:#fff;
  color:var(--mt-ink-900);
  font:inherit;
  font-size:13px;
  direction:rtl;
  transition:
    border-color var(--mt-transition),
    box-shadow var(--mt-transition),
    background var(--mt-transition);
}


.field input::placeholder{
  color:#a4adbd;
}


.field input:hover{
  border-color:#c4cede;
}


.field input:focus{
  border-color:var(--mt-brand-500);
  background:#fff;
  box-shadow:
    0 0 0 4px rgba(77,112,245,.11),
    0 5px 18px rgba(49,89,232,.05);
}


.field-icon{
  position:absolute;
  z-index:2;
  top:50%;
  right:16px;
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  color:var(--mt-ink-500);
  transform:translateY(-50%);
  pointer-events:none;
}


.field-icon svg{
  width:19px;
  height:19px;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}


.field:focus-within .field-icon{
  color:var(--mt-brand-600);
}


.field-errors{
  display:grid;
  gap:4px;
  margin-top:7px;
  color:var(--mt-danger);
  font-size:11px;
  font-weight:600;
}


.form-options{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin:3px 0 22px;
}


.remember-control{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  margin:0 !important;
  color:var(--mt-ink-700) !important;
  cursor:pointer;
  white-space:nowrap;
}


.remember-control input{
  width:16px;
  height:16px;
  margin:0;
  accent-color:var(--mt-brand-600);
}


.recovery-links{
  display:flex;
  align-items:flex-end;
  flex-direction:column;
  gap:6px;
}


.recovery-links a{
  color:var(--mt-brand-700);
  font-size:11px;
  font-weight:750;
  text-decoration:none;
}


.recovery-links a:hover{
  text-decoration:underline;
}


/* ============================================================
   Buttons
   ============================================================ */

.btn{
  width:100%;
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 18px;
  border:0;
  border-radius:var(--mt-radius-md);
  cursor:pointer;
  font:inherit;
  font-size:13px;
  font-weight:850;
  text-decoration:none;
  transition:
    transform var(--mt-transition),
    background var(--mt-transition),
    border-color var(--mt-transition),
    box-shadow var(--mt-transition);
}


.btn-primary{
  color:#fff;
  background:
    linear-gradient(135deg,var(--mt-brand-600),var(--mt-brand-500));
  box-shadow:0 11px 26px rgba(49,89,232,.20);
}


.btn-primary svg{
  width:18px;
  height:18px;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transform:scaleX(-1);
}


.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 31px rgba(49,89,232,.26);
}


.btn-primary:active{
  transform:translateY(0);
}


.btn-secondary{
  min-height:49px;
  border:1px solid var(--mt-line-strong);
  color:var(--mt-ink-800);
  background:#fff;
}


.btn-secondary:hover{
  border-color:var(--mt-brand-200);
  color:var(--mt-brand-700);
  background:var(--mt-brand-50);
}


.account-divider{
  position:relative;
  margin:19px 0;
  text-align:center;
}


.account-divider::before{
  content:"";
  position:absolute;
  top:50%;
  right:0;
  left:0;
  height:1px;
  background:var(--mt-line);
}


.account-divider span{
  position:relative;
  z-index:1;
  display:inline-block;
  padding:0 11px;
  color:var(--mt-ink-500);
  background:#fff;
  font-size:10px;
  font-weight:700;
}


/* ============================================================
   Help / footer
   ============================================================ */

.account-help{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin-top:23px;
  padding-top:19px;
  border-top:1px solid var(--mt-line);
  color:var(--mt-ink-500);
  font-size:10px;
  line-height:1.8;
}


.help-icon{
  width:20px;
  height:20px;
  flex:0 0 20px;
  display:grid;
  place-items:center;
  margin-top:1px;
  border-radius:50%;
  color:var(--mt-brand-700);
  background:var(--mt-brand-50);
  font-size:11px;
  font-weight:900;
}


.account-help a{
  color:var(--mt-ink-700);
  font-weight:750;
  text-decoration:none;
}


.account-help a:hover{
  color:var(--mt-brand-700);
  text-decoration:underline;
}


.login-card-foot{
  margin-top:25px;
  padding-top:18px;
  border-top:1px solid var(--mt-line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  color:var(--mt-ink-500);
  font-size:10px;
  font-weight:650;
}


.login-card-foot a{
  color:var(--mt-ink-700);
  text-decoration:none;
  font-weight:750;
}


.login-card-foot a:hover{
  color:var(--mt-brand-700);
}


.foot-security{
  display:inline-flex;
  align-items:center;
  gap:6px;
}


.foot-security svg{
  width:15px;
  height:15px;
  stroke:var(--mt-success);
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}


.site-footer{
  padding:0 20px 28px;
}


.footer-inner{
  width:min(1150px,100%);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  color:var(--mt-ink-500);
  font-size:10px;
  font-weight:600;
}


.footer-brand{
  color:var(--mt-ink-600);
}


/* ============================================================
   Accessibility
   ============================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible{
  outline:3px solid rgba(77,112,245,.24);
  outline-offset:3px;
}


@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}


/* ============================================================
   Responsive
   ============================================================ */

@media (max-width:980px){

  .site-header .inner{
    grid-template-columns:auto 1fr;
  }

  .main-nav{
    display:none;
  }

  .header-action{
    justify-self:end;
  }

  .auth-frame{
    grid-template-columns:1fr;
    max-width:720px;
  }

  .showcase{
    min-height:auto;
    padding:43px 40px 31px;
  }

  .showcase h1{
    max-width:600px;
    font-size:48px;
  }

  .login-shell{
    padding:48px 40px;
  }

  .login-card{
    max-width:500px;
  }
}


@media (max-width:640px){

  .site-header .inner{
    width:min(100% - 28px,1180px);
    min-height:70px;
    gap:15px;
  }

  .brand-badge{
    width:40px;
    height:40px;
    border-radius:13px;
  }

  .brand-subtitle{
    display:none;
  }

  .header-action{
    min-height:40px;
    padding:0 14px;
    font-size:11px;
  }

  .page-main{
    padding:22px 13px 25px;
  }

  .auth-frame{
    border-radius:21px;
  }

  .showcase{
    padding:34px 25px 27px;
  }

  .showcase h1{
    font-size:39px;
    letter-spacing:-1px;
  }

  .showcase-lead{
    font-size:14px;
  }

  .feature-list{
    grid-template-columns:1fr;
    margin-top:28px;
  }

  .feature-item{
    min-height:auto;
  }

  .showcase-bottom{
    align-items:flex-start;
    flex-direction:column;
  }

  .login-shell{
    padding:35px 24px;
  }

  .login-card-head h2{
    font-size:29px;
  }

  .form-options{
    align-items:flex-start;
    flex-direction:column;
    gap:13px;
  }

  .recovery-links{
    align-items:flex-start;
  }

  .login-card-foot{
    align-items:flex-start;
    flex-direction:column;
  }

  .footer-inner{
    align-items:flex-start;
    flex-direction:column;
    gap:5px;
  }
}


@media (max-width:390px){

  .brand-title{
    font-size:16px;
  }

  .header-action{
    padding:0 11px;
  }

  .showcase{
    padding-right:21px;
    padding-left:21px;
  }

  .showcase h1{
    font-size:34px;
  }

  .login-shell{
    padding-right:20px;
    padding-left:20px;
  }
}


/* ============================================================
   Login R2.3 — Visual Fit
   Desktop viewport refinement
   ============================================================ */

@media (min-width:981px){

  /*
   * Keep the authentication experience visible as one coherent
   * surface on common laptop/desktop viewports.
   */
  .page-main{
    padding-top:34px;
    padding-bottom:26px;
  }

  .auth-frame{
    width:min(1150px,100%);
    min-height:0;
    grid-template-columns:minmax(0,.96fr) minmax(430px,1.04fr);
  }

  /*
   * Brand side remains distinctive without overpowering
   * the authentication task.
   */
  .showcase{
    min-height:610px;
    padding:42px 40px 28px;
  }

  .showcase-eyebrow{
    margin-bottom:18px;
  }

  .showcase h1{
    max-width:500px;
    font-size:clamp(42px,3.7vw,55px);
    line-height:1.13;
    letter-spacing:-1.2px;
  }

  .showcase-lead{
    max-width:500px;
    margin-top:18px;
    font-size:14px;
    line-height:1.85;
  }

  .feature-list{
    gap:10px;
    margin-top:25px;
  }

  .feature-item{
    min-height:88px;
    padding:13px 14px;
  }

  .feature-icon{
    width:34px;
    height:34px;
    flex-basis:34px;
  }

  .feature-copy strong{
    font-size:12px;
  }

  .feature-copy span{
    font-size:10px;
    line-height:1.6;
  }

  .showcase-bottom{
    margin-top:23px;
    padding-top:18px;
  }


  /*
   * Authentication side receives slightly more visual weight.
   */
  .login-shell{
    padding:32px 46px;
  }

  .login-card{
    max-width:440px;
  }

  .login-card-head{
    margin-bottom:23px;
  }

  .security-label{
    margin-bottom:12px;
  }

  .login-card-head h2{
    font-size:32px;
  }

  .login-card-head p{
    margin-top:7px;
    line-height:1.7;
  }

  .field{
    margin-bottom:15px;
  }

  .field input[type="text"],
  .field input[type="password"]{
    height:52px;
  }

  .form-options{
    margin-top:1px;
    margin-bottom:18px;
  }

  .btn{
    min-height:50px;
  }

  .account-divider{
    margin:15px 0;
  }

  .btn-secondary{
    min-height:47px;
  }

  .account-help{
    margin-top:18px;
    padding-top:15px;
  }

  .login-card-foot{
    margin-top:18px;
    padding-top:15px;
  }

  .site-footer{
    padding-bottom:20px;
  }
}


/*
 * Short laptop screens.
 * Safari/Chrome with browser chrome can leave < 800px usable height.
 */
@media (min-width:981px) and (max-height:800px){

  .site-header .inner{
    min-height:72px;
  }

  .brand-badge{
    width:42px;
    height:42px;
    border-radius:13px;
  }

  .page-main{
    padding-top:24px;
    padding-bottom:20px;
  }

  .auth-frame{
    min-height:570px;
  }

  .showcase{
    min-height:570px;
    padding-top:34px;
    padding-bottom:24px;
  }

  .showcase-eyebrow{
    margin-bottom:14px;
  }

  .showcase h1{
    font-size:48px;
  }

  .showcase-lead{
    margin-top:14px;
  }

  .feature-list{
    margin-top:20px;
  }

  .feature-item{
    min-height:80px;
    padding-top:11px;
    padding-bottom:11px;
  }

  .showcase-bottom{
    margin-top:18px;
    padding-top:14px;
  }

  .login-shell{
    padding-top:25px;
    padding-bottom:25px;
  }

  .login-card-head{
    margin-bottom:18px;
  }

  .security-label{
    margin-bottom:9px;
  }

  .login-card-head h2{
    font-size:30px;
  }

  .login-card-head p{
    margin-top:5px;
  }

  .field{
    margin-bottom:12px;
  }

  .field label{
    margin-bottom:6px;
  }

  .field input[type="text"],
  .field input[type="password"]{
    height:49px;
  }

  .form-options{
    margin-bottom:14px;
  }

  .btn{
    min-height:47px;
  }

  .account-divider{
    margin:12px 0;
  }

  .btn-secondary{
    min-height:44px;
  }

  .account-help{
    margin-top:14px;
    padding-top:12px;
  }

  .login-card-foot{
    margin-top:14px;
    padding-top:12px;
  }
}


/* ============================================================
   Login R2.9 — Final Visual Polish
   Refined enterprise balance / typography / viewport rhythm
   ============================================================ */

@media (min-width:981px){

  /*
   * Slightly tighter overall composition.
   */
  .page-main{
    padding-top:28px;
    padding-bottom:22px;
  }

  .auth-frame{
    width:min(1150px,calc(100% - 8px));
    grid-template-columns:minmax(0,.94fr) minmax(440px,1.06fr);
    border-radius:26px;
  }


  /*
   * Brand panel:
   * preserve identity while reducing visual dominance.
   */
  .showcase{
    min-height:590px;
    padding:36px 39px 26px;
  }

  .showcase-eyebrow{
    margin-bottom:14px;
    padding:7px 12px;
    font-size:11px;
  }

  .showcase h1{
    max-width:480px;
    font-size:clamp(40px,3.35vw,50px);
    line-height:1.14;
    letter-spacing:-1px;
  }

  .showcase-lead{
    max-width:490px;
    margin-top:15px;
    font-size:13px;
    line-height:1.9;
    color:rgba(255,255,255,.82);
  }

  .feature-list{
    gap:9px;
    margin-top:21px;
  }

  .feature-item{
    min-height:78px;
    padding:11px 13px;
    border-radius:15px;
  }

  .feature-icon{
    width:32px;
    height:32px;
    flex-basis:32px;
    border-radius:10px;
  }

  .feature-icon svg{
    width:17px;
    height:17px;
  }

  .feature-copy{
    gap:2px;
  }

  .feature-copy strong{
    font-size:12px;
    line-height:1.45;
  }

  .feature-copy span{
    font-size:10px;
    line-height:1.55;
    color:rgba(255,255,255,.73);
  }

  .showcase-bottom{
    margin-top:18px;
    padding-top:15px;
  }

  .brand-signature small,
  .showcase-status{
    color:rgba(255,255,255,.72);
  }


  /*
   * Login panel:
   * make the authentication task the primary focal point.
   */
  .login-shell{
    padding:27px 48px;
  }

  .login-card{
    max-width:446px;
  }

  .login-card-head{
    margin-bottom:19px;
  }

  .security-label{
    margin-bottom:10px;
  }

  .login-card-head h2{
    font-size:31px;
    line-height:1.22;
  }

  .login-card-head p{
    margin-top:6px;
    color:var(--mt-ink-600);
    font-size:12px;
    line-height:1.7;
  }

  .field{
    margin-bottom:13px;
  }

  .field label{
    margin-bottom:6px;
    color:var(--mt-ink-800);
  }

  .field input[type="text"],
  .field input[type="password"]{
    height:50px;
    border-color:#d4ddeb;
  }

  .field input::placeholder{
    color:#929db0;
  }

  .form-options{
    margin-top:0;
    margin-bottom:14px;
  }

  .recovery-links a{
    font-size:10.5px;
  }

  .btn{
    min-height:48px;
  }

  .btn-primary{
    box-shadow:0 9px 22px rgba(49,89,232,.18);
  }

  .btn-primary:hover{
    box-shadow:0 12px 27px rgba(49,89,232,.23);
  }

  .account-divider{
    margin:12px 0;
  }

  .btn-secondary{
    min-height:44px;
  }

  .account-help{
    margin-top:13px;
    padding-top:12px;
    color:var(--mt-ink-600);
  }

  .account-help a{
    color:var(--mt-ink-800);
  }

  .login-card-foot{
    margin-top:13px;
    padding-top:12px;
    color:var(--mt-ink-600);
  }

  .login-card-foot a{
    color:var(--mt-ink-800);
  }


  /*
   * Header receives slightly stronger structure
   * so it belongs to the same identity system.
   */
  .site-header .inner{
    min-height:76px;
  }

  .brand-title{
    font-size:18px;
  }

  .main-nav a{
    color:var(--mt-ink-800);
  }


  /*
   * Footer closer to the main auth surface.
   */
  .site-footer{
    padding-top:0;
    padding-bottom:17px;
  }

  .footer-inner{
    color:var(--mt-ink-600);
  }
}


/*
 * Safari / laptop viewport refinement.
 */
@media (min-width:981px) and (max-height:800px){

  .site-header .inner{
    min-height:68px;
  }

  .page-main{
    padding-top:18px;
    padding-bottom:16px;
  }

  .auth-frame{
    min-height:0;
  }

  .showcase{
    min-height:555px;
    padding-top:29px;
    padding-bottom:21px;
  }

  .showcase h1{
    font-size:44px;
  }

  .showcase-lead{
    margin-top:11px;
  }

  .feature-list{
    margin-top:17px;
  }

  .feature-item{
    min-height:73px;
    padding-top:9px;
    padding-bottom:9px;
  }

  .showcase-bottom{
    margin-top:14px;
    padding-top:12px;
  }

  .login-shell{
    padding-top:20px;
    padding-bottom:20px;
  }

  .login-card-head{
    margin-bottom:15px;
  }

  .security-label{
    margin-bottom:7px;
  }

  .login-card-head h2{
    font-size:29px;
  }

  .field{
    margin-bottom:10px;
  }

  .field input[type="text"],
  .field input[type="password"]{
    height:47px;
  }

  .form-options{
    margin-bottom:11px;
  }

  .btn{
    min-height:45px;
  }

  .account-divider{
    margin:10px 0;
  }

  .btn-secondary{
    min-height:42px;
  }

  .account-help{
    margin-top:10px;
    padding-top:10px;
  }

  .login-card-foot{
    margin-top:10px;
    padding-top:10px;
  }

  .site-footer{
    padding-bottom:12px;
  }
}

/* Language Center - Login Header */

.login-language-box{
    display:flex;
    align-items:center;
    margin-inline-start:12px;
}

.login-language-box .muntiji-language-selector{
    width:auto;
    padding:0;
    background:transparent;
    border:0;
}

.login-language-box .muntiji-language-selector__form{
    flex-direction:row;
    align-items:center;
    gap:8px;
}

.login-language-box .muntiji-language-selector__label{
    display:none;
}

.login-language-box .muntiji-language-selector__select{
    min-height:38px;
    width:auto;
    padding:6px 12px;
    border-radius:12px;
}

@media(max-width:700px){
    .login-language-box{
        margin-inline-start:0;
        margin-top:10px;
    }
}


/* Login Header Language Alignment */

.login-language-box{
    position:absolute;
    left:24px;
    top:50%;
    transform:translateY(-50%);
    z-index:10;
}

.login-language-box .muntiji-language-selector__select{
    min-width:120px;
    height:42px;
    border-radius:14px;
    background:#fff;
    border:1px solid #dbe3f0;
    font-weight:600;
}

.header-action{
    margin-inline-start:170px;
}

@media(max-width:900px){

    .login-language-box{
        position:static;
        transform:none;
        margin:10px auto;
    }

    .header-action{
        margin-inline-start:0;
    }

}


/* ============================================================
   Login language-context ownership
   Arabic = true RTL composition
   English / Turkish = LTR composition

   HTML source order:
     1. .showcase
     2. .login-shell

   Therefore:
     LTR -> showcase left, login right
     RTL -> login left, showcase right
   ============================================================ */

/*
 * Do not depend on CSS Grid's implicit direction behavior.
 * Explicit column ownership keeps the authentication composition
 * deterministic for every supported language.
 */
@media (min-width:981px){

  html[dir="ltr"] .auth-frame > .showcase{
    grid-column:1;
    grid-row:1;
  }

  html[dir="ltr"] .auth-frame > .login-shell{
    grid-column:2;
    grid-row:1;
  }

  html[dir="rtl"] .auth-frame > .showcase{
    grid-column:2;
    grid-row:1;
  }

  html[dir="rtl"] .auth-frame > .login-shell{
    grid-column:1;
    grid-row:1;
  }
}


/* Textual context follows the active document language. */

html[dir="rtl"] .login-card,
html[dir="rtl"] .showcase{
  direction:rtl;
  text-align:right;
}

html[dir="ltr"] .login-card,
html[dir="ltr"] .showcase{
  direction:ltr;
  text-align:left;
}


/*
 * Credentials can contain Latin characters even on the Arabic UI,
 * so `unicode-bidi: plaintext` lets the entered value determine its
 * own bidi flow while the control placement follows the page language.
 */
html[dir="rtl"] .field input[type="text"],
html[dir="rtl"] .field input[type="password"]{
  direction:rtl;
  text-align:right;
  unicode-bidi:plaintext;
}

html[dir="ltr"] .field input[type="text"],
html[dir="ltr"] .field input[type="password"]{
  direction:ltr;
  text-align:left;
  unicode-bidi:plaintext;
}


/* Icon/padding ownership for the two writing directions. */

html[dir="rtl"] .field input[type="text"],
html[dir="rtl"] .field input[type="password"]{
  padding-left:48px;
  padding-right:16px;
}

html[dir="ltr"] .field input[type="text"],
html[dir="ltr"] .field input[type="password"]{
  padding-left:16px;
  padding-right:48px;
}


/*
 * Below desktop width the frame is a single-column surface.
 * Restore normal document flow and avoid desktop grid placement
 * leaking into responsive layouts.
 */
@media (max-width:980px){

  .auth-frame > .showcase,
  .auth-frame > .login-shell{
    grid-column:auto;
    grid-row:auto;
  }
}


/* ============================================================
   Login R3 — Physical language layout

   Important:
   CSS Grid line numbering follows `direction`.
   Keep the grid coordinate system physically LTR so column 1
   is always the left column and column 2 is always the right.
   Child content still follows the active document language.
   ============================================================ */

@media (min-width:981px){

  .auth-frame{
    direction:ltr;
  }

  html[dir="ltr"] .auth-frame > .showcase{
    grid-column:1;
    grid-row:1;
  }

  html[dir="ltr"] .auth-frame > .login-shell{
    grid-column:2;
    grid-row:1;
  }

  html[dir="rtl"] .auth-frame > .login-shell{
    grid-column:1;
    grid-row:1;
  }

  html[dir="rtl"] .auth-frame > .showcase{
    grid-column:2;
    grid-row:1;
  }

}


/* Arabic content ownership */
html[dir="rtl"] .showcase,
html[dir="rtl"] .login-shell,
html[dir="rtl"] .login-card{
  direction:rtl;
  text-align:right;
}


/* English / Turkish content ownership */
html[dir="ltr"] .showcase,
html[dir="ltr"] .login-shell,
html[dir="ltr"] .login-card{
  direction:ltr;
  text-align:left;
}