/* --- صفحه ورود جدید مجتمع مس شهر بابک --- */

  :root { 
    --app-vh: 1vh; 
    /* فیکس viewport consistency */
    --viewport-width: 100vw;
    --viewport-height: 100vh;
  }
  
  /* تشخیص support برای viewport units جدید */
  @supports (height: 100dvh) {
    :root {
      --viewport-height: 100dvh;
    }
  }
  
  @supports (height: 100svh) {
    :root {
      --viewport-height: 100svh;
    }
  }
  
  body.mes-landing {
    background: linear-gradient(180deg,#0f1745 0%,#233871 20%,#284082 50%,#233871 80%,#0f1745 100%);
    /* لایه‌های مختلف برای حداکثر سازگاری: */
    min-height: 100vh;          /* قدیمی */
    min-height: 100svh;         /* کوچک (stable) */
    min-height: 100dvh;         /* dynamic viewport جدید */
    min-height: calc(var(--app-vh, 1vh) * 100); /* JS fallback دقیق */
    overflow: hidden;
    padding-top: env(safe-area-inset-top,0);
    padding-bottom: env(safe-area-inset-bottom,0);
    /* فیکس consistency */
    width: 100vw;
    width: var(--viewport-width);
    position: relative;
    box-sizing: border-box;
  }

  /* نرمال‌سازی نمایش برای نسبت‌های بسیار بلند (کاهش کشیدگی فاصله‌ها) */
  .very-tall body.mes-landing .landing-stack {
    gap: 28px;
    padding-top: 32px;
    padding-bottom: 90px;
  }
  .very-tall body.mes-landing .corp-logo { width: 180px !important; }
  .very-tall body.mes-landing .btn--main { max-width: 340px; font-size: clamp(18px,3.8vw,26px) !important; }
  .very-tall body.mes-landing .top-basmallah { font-size: 16px; }

  .tall-ratio body.mes-landing .landing-stack {
    gap: 48px;
    padding-top: 48px;
    padding-bottom: 110px;
  }
  .tall-ratio body.mes-landing .corp-logo { width: 220px !important; }
  .tall-ratio body.mes-landing .btn--main { max-width: 380px; }
  
  .wide-ratio body.mes-landing .landing-stack {
    gap: clamp(40px,8vh,85px);
    padding-top: clamp(40px,6vh,70px);
    padding-bottom: clamp(80px,12vh,130px);
  }
  .wide-ratio body.mes-landing .corp-logo { width: clamp(200px,32vw,280px) !important; }
  .wide-ratio body.mes-landing .btn--main { max-width: 450px; }

  .hero {
    position: relative;
    width: 100%;
    width: var(--viewport-width);
    height: 100%;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    min-height: calc(var(--app-vh, 1vh) * 100);
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0 22px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .landing-stack {
    width: 100%;
    max-width: 780px;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    min-height: calc(var(--app-vh, 1vh) * 100);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(32px,6vh,72px);
    padding: clamp(32px,5vh,58px) 0 clamp(70px,11vh,120px);
    text-align: center;
    position: relative;
    box-sizing: border-box;
  }

  .top-basmallah {
    position:absolute;
    top:24px;
    left:0;
    right:0;
    margin:0;
    font-size:20px;
    font-weight:500;
    color:#fff;
    text-shadow:0 2px 10px rgba(0,0,0,.35);
    letter-spacing:.55px;
  }

  .corp-logo {
    width: clamp(160px,28vw,240px) !important;
    max-width: 55vw;
    height: auto;
    filter: drop-shadow(0 6px 20px rgba(0,0,0,.4)) drop-shadow(0 2px 8px rgba(0,0,0,.3));
    margin: 0; /* فاصله اکنون توسط gap کنترل می‌شود */
    animation: logoIn .9s cubic-bezier(.4,.8,.25,1);
  }

  @keyframes logoIn {
    from {
      opacity: 0;
      transform: translateY(-18px) scale(.94);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .btn--main {
    margin: 0;
    width: 100%;
    max-width: 400px;
    padding: clamp(18px,2.6vh,26px) 34px clamp(20px,2.8vh,28px);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 32px;
    font-size: clamp(20px,4.2vw,30px);
    font-weight: 800;
    letter-spacing: .45px;
    color: #fff;
    background: linear-gradient(135deg, #233871 0%, #2d4588 50%, #1e2f5c 100%);
    box-shadow: 0 18px 48px -12px rgba(0,0,0,.85),0 8px 26px -10px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.2), inset 0 1px 0 rgba(255,255,255,.1);
    transition: box-shadow .28s,background .5s, transform .28s;
    position: relative;
    overflow: hidden;
  }

  .btn--main:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,rgba(255,255,255,.3),rgba(255,255,255,0) 40%,rgba(255,255,255,.25));
    mix-blend-mode: overlay;
    opacity: .9;
    pointer-events: none;
  }

  .btn--main-active {
    cursor: pointer;
  }

  @media (hover:hover) and (pointer:fine) {
    .btn--main-active:hover {
      background: linear-gradient(135deg, #2a4082 0%, #345095 50%, #233871 100%);
      box-shadow: 0 26px 64px -16px rgba(0,0,0,.9),0 10px 34px -10px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.25), inset 0 1px 0 rgba(255,255,255,.15);
      transform: translateY(-3px);
    }
  }

  .btn--main-active:active {
    transform: scale(.965);
  }

  .btn--main-disabled {
    background: #5d708d;
    color: #e5e5e5;
    cursor: not-allowed;
    opacity: .9;
  }

  .credit-block {
    position: fixed;
    bottom: calc(14px + env(safe-area-inset-bottom,0));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none; /* جلوگیری از پوشاندن دکمه اصلی */
  }
  .credit-block * { pointer-events: auto; }

  .payab-logo {
    width: 32px;
    height: auto;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.45));
    opacity: .97;
    animation: fadeIn 1.1s ease .2s both;
  }

  .credit-text {
    font-size: 10px;
    letter-spacing: .25px;
    color: rgba(255,255,255,0.6);
    font-weight: 300;
    text-align: center;
    text-shadow: 0 2px 10px rgba(0,0,0,.4);
  }

  .credit-text span {
    font-weight: 700;
    color: #fff;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ——— پایه ——— */

  * {
    box-sizing: border-box;
  }

  html, body {
    height: 100%;
  }

  body {
    margin: 0;
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,"IRANSans","Vazirmatn",sans-serif;
    color: #fff;
    background-color: #111;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* —— Loader Overlay —— */

  .loader {
    position: fixed;
    inset: 0;
    background: rgba(15,15,15,.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: opacity .35s ease, visibility .35s ease;
  }

  .loader.hidden {
    opacity: 0;
    visibility: hidden;
  }

  .loader__box {
    width: min(400px,86vw);
    background: #1d1d1f;
    border: 1px solid #2c2c30;
    border-radius: 22px;
    padding: 26px 24px 30px;
    box-shadow: 0 10px 40px -8px rgba(0,0,0,.55);
    position: relative;
    animation: pop .45s cubic-bezier(.4,.78,.25,1);
  }

  @keyframes pop {
    from {
      opacity: 0;
      transform: translateY(18px) scale(.96);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .loader__title {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 14px;
    letter-spacing: .3px;
  }

  .loader__bar {
    width: 100%;
    height: 14px;
    background: #2a2a2d;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 0 1px #333;
  }

  .loader__bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg,#ff6a00,#ffb300);
    width: 0%;
    border-radius: inherit;
    transition: width .15s ease;
    position: relative;
  }

  .loader__percent {
    margin-top: 10px;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .5px;
  }

  .loader__msg {
    margin-top: 4px;
    font-size: 12.8px;
    color: #bbb;
    min-height: 18px;
  }

  .loader__cancel {
    margin-top: 18px;
    background: #343437;
    color: #fff;
    border: 0;
    padding: 9px 18px;
    font-size: 13px;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 14px -4px rgba(0,0,0,.6);
  }

  .loader__cancel:active {
    transform: translateY(1px);
  }

  body.mes-landing .site-credit {
    display: none;
  }

  @media (max-width:480px){
    .landing-stack {gap: clamp(30px,6vh,60px); padding: clamp(26px,5vh,46px) 0 clamp(70px,13vh,110px);}
    .top-basmallah {top:20px; font-size:15px;}
    .btn--main {border-radius:28px; max-width:360px;}
    .credit-block {bottom: calc(36px + env(safe-area-inset-bottom,0));}
    .payab-logo {width:48px;}
    .credit-text {font-size:11px;}
  }
  @media (max-height:700px){
    .landing-stack {gap: clamp(24px,5vh,56px); padding: 30px 0 82px;}
    .top-basmallah {top:18px;}
    .btn--main {padding:22px 34px 24px;}
  }
/* فاصله دکمه تا فوتر ثابت وقتی ارتفاع خیلی کم است */
@media (max-height:620px){ .landing-stack {gap: clamp(20px,5vh,40px); padding: 26px 0 70px;} }

/* گوشی‌های خیلی کوچک مثل iPhone SE */
@media (max-width:375px){
  .landing-stack {gap: clamp(26px,7vh,50px); padding:24px 0 80px;}
  .top-basmallah {top:15px; font-size:14px; letter-spacing:.4px;}
  .corp-logo {width:140px !important;}
  .btn--main {font-size:22px; padding:18px 28px 20px; border-radius:24px; max-width:300px;}
  .credit-block {bottom: calc(24px + env(safe-area-inset-bottom,0)); gap:6px;}
  .payab-logo {width:40px;}
  .credit-text {font-size:10px;}
}

/* گوشی‌های فوق کوچک */
@media (max-width:320px){
  .landing-stack {gap: clamp(22px,8vh,44px); padding:20px 0 70px;}
  .top-basmallah {top:12px; font-size:13px;}
  .corp-logo {width:120px !important;}
  .btn--main {font-size:20px; padding:16px 24px 18px; max-width:260px;}
  .credit-block {bottom: calc(20px + env(safe-area-inset-bottom,0));}
  .payab-logo {width:36px;}
  .credit-text {font-size:9px;}
}

  /* نسبت‌های خیلی کشیده (گوشی‌های فوق بلند مثل 20:9 یا 19.5:9) */
  @media (min-aspect-ratio: 9/20) {
    .landing-stack {padding-top: clamp(40px,7vh,80px); padding-bottom: clamp(60px,10vh,110px);} 
  }

  /* نسبت‌های نزدیک مربع (کوچک یا split screen) */
  @media (max-aspect-ratio: 9/15) {
    .landing-stack {padding-top: clamp(20px,4vh,50px); padding-bottom: clamp(60px,9vh,100px);} 
  }