@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/vazirmatn/Vazirmatn-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/vazirmatn/Vazirmatn-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/vazirmatn/Vazirmatn-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/vazirmatn/Vazirmatn-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/vazirmatn/Vazirmatn-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/vazirmatn/Vazirmatn-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/vazirmatn/Vazirmatn-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/vazirmatn/Vazirmatn-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/vazirmatn/Vazirmatn-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --brand: #252772;
  --button: #5b5c9e;
  --page-gray: #e9e9e9;
  --panel: #ffffff;
  --panel-width: clamp(360px, 32vw, 500px);
  --logo-size: clamp(168px, 27vh, 250px);
  --shadow: 0 14px 34px rgba(35, 36, 116, 0.12);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--panel);
  color: var(--brand);
  font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
  direction: ltr;
}

.page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  background: var(--page-gray);
}

.login-panel {
  width: min(100%, var(--panel-width));
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--panel);
  direction: rtl;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: clamp(34px, 7vh, 64px) clamp(22px, 4vw, 30px) 14px;
}

.top-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.brand-card {
  width: var(--logo-size);
  height: var(--logo-size);
  display: grid;
  place-items: center;
  border-radius: clamp(48px, 8vh, 72px);
  background: #ffffff;
  box-shadow: var(--shadow);
}

.brand-card img {
  width: 75%;
  height: 75%;
  object-fit: contain;
  display: block;
}

.brand-copy {
  margin-top: clamp(24px, 5vh, 40px);
  text-align: center;
}

.brand-copy h1 {
  margin: 0;
  color: var(--brand);
  font-size: clamp(28px, 4.2vh, 34px);
  line-height: 1.25;
  font-weight: 700;
}

.brand-copy p {
  margin: 8px 0 0;
  color: var(--brand);
  font-size: clamp(16px, 2.55vh, 20px);
  line-height: 1.7;
  font-weight: 400;
}

.bottom-content {
  width: min(100%, 440px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 4.5vh, 34px);
}

button {
  width: 100%;
  display: block;
  margin-inline: auto;
  height: clamp(50px, 6.8vh, 60px);
  border: 0;
  border-radius: 10px;
  background: var(--button);
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: clamp(15px, 2.2vh, 17px);
  font-weight: 700;
  box-shadow: 0 18px 34px rgba(91, 92, 158, 0.22);
}

button:hover {
  background: #515292;
}

button:active {
  transform: translateY(1px);
}

.version {
  color: var(--brand);
  font-size: clamp(13px, 1.9vh, 15px);
  line-height: 1;
  direction: rtl;
  unicode-bidi: isolate;
}

@media (max-height: 760px) and (min-width: 641px) {
  :root {
    --panel-width: 460px;
    --logo-size: 190px;
  }

  .login-panel {
    padding-top: 32px;
  }

  .brand-copy {
    margin-top: 22px;
  }

  .bottom-content {
    gap: 18px;
  }
}

@media (max-width: 768px) {
  :root {
    --panel-width: min(100vw, 430px);
    --logo-size: clamp(136px, 38vw, 170px);
  }

  body {
    background: var(--page-gray);
  }

  .login-panel {
    width: min(100vw, var(--panel-width));
    padding: clamp(34px, 8vh, 58px) 18px 14px;
  }

  .bottom-content {
    width: 100%;
    max-width: 340px;
    gap: clamp(18px, 3.2vh, 28px);
    padding: 0;
  }

  .brand-card {
    border-radius: clamp(38px, 11vw, 56px);
  }

  .brand-copy {
    margin-top: clamp(22px, 4.5vh, 34px);
  }

  .brand-copy h1 {
    font-size: clamp(24px, 7vw, 30px);
  }

  .brand-copy p {
    font-size: clamp(12px, 3.8vw, 16px);
  }

  button {
    width: 100%;
    height: clamp(48px, 6.2vh, 56px);
    font-size: clamp(13px, 3.7vw, 16px);
  }

  button:active {
    transform: translateY(1px);
  }
}

@media (max-width: 480px) {
  :root {
    --panel-width: 100vw;
  }

  html,
  body {
    background: var(--panel);
    width: 100vw;
    height: 100%;
    overflow: hidden;
    scrollbar-width: none;
  }

  body::-webkit-scrollbar {
    display: none;
  }

  .page,
  .login-panel {
    width: 100vw;
    min-width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .page {
    background: var(--panel);
  }

  .bottom-content {
    max-width: calc(100vw - 48px);
  }
}