/* ----------------------
   فونت و تنظیمات پایه
------------------------*/
@font-face {
  font-family: 'Yekan Bakh FaNum';
  src: url('fonts/YekanBakhFaNum-Regular.woff2') format('woff2'),
       url('fonts/YekanBakhFaNum-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Yekan Bakh FaNum';
  src: url('fonts/YekanBakhFaNum-Bold.woff2') format('woff2'),
       url('fonts/YekanBakhFaNum-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* {
  font-family: 'Yekan Bakh FaNum', sans-serif;
  direction: rtl;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  background: #0a0a0a;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100vw;
  overflow-x: hidden;
}

/* ----------------------
   Wrapper کل
------------------------*/
.auth-wrapper {
  display: flex;
  max-width: 1100px;
  width: 100%;
  min-height: 80vh;
  background: #1b1b1f;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.15);
}

/* ----------------------
   سمت چپ info
------------------------*/
.auth-info {
  flex: 1;
  position: relative;
  padding: 2rem; /* کاهش padding برای حذف فضای خالی */
  display: flex;
  flex-direction: column;
  justify-content: center; /* وسط‌چین عمودی */
  align-items: center; /* وسط‌چین افقی */
  background: radial-gradient(circle at top left, #0f1a2f, #000);
  color: #fff;
  overflow: hidden;
}

#bg-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.info-content {
  position: relative;
  z-index: 1;
  max-width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center; /* وسط‌چین محتوا */
}

.info-logo {
  display: block;
  max-width: 130px;
  width: auto;
  margin: 0 auto 1rem; /* وسط‌چین افقی و فاصله از پایین */
  animation: logo-bounce 2s infinite ease-in-out;
}

.info-content h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  text-shadow: 0 0 15px #00ffff, 0 0 25px #ff00ff;
  text-align: center;
}
.info-content p {
  font-size: 1rem;
  margin-bottom: 1rem;
  color: #ccc;
  text-align: center;
}

.status-bar {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  font-weight: bold;
  justify-content: center; /* وسط‌چین */
}
.status-bar .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 0.5rem;
  animation: pulse 1.5s infinite;
}
.status-bar .online { background-color: #0f0; }
.status-bar .updates { background-color: #ff0; }
.status-bar .time-dot { background-color: #0ff; }

.features-list {
  list-style: none;
  padding: 0;
  margin-bottom: 1rem;
  text-align: center;
}
.features-list li {
  margin-bottom: 0.6rem;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center; /* وسط‌چین */
  gap: 0.5rem;
  transition: transform 0.3s, color 0.3s;
}
.features-list li:hover {
  transform: translateX(5px);
  color: #00ffff;
}
.features-list li i {
  color: #ff4081;
  transition: transform 0.3s;
}
.features-list li:hover i {
  transform: scale(1.3);
}

.announcement-marquee {
  max-width: 100%; /* عرض محدود برای تعادل */
  margin: 0rem auto; /* وسط‌چین افقی و فاصله عمودی */
  padding: 0.8rem 1rem;
  border-radius: 12px;
  background: #111;
  border: 1px solid #00ffff;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
  font-weight: bold;
  font-size: 0.95rem;
  color: #ffffff;
  text-align: center;
  overflow: hidden;
}

.announcement-marquee span {
  display: block;
  padding: 2px 0;
  color: #ffffff;
  text-shadow: 0 0 3px rgba(0, 255, 255, 0.4);
}

.extra-status {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center; /* وسط‌چین */
}
.extra-status .indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: #fff;
}
.extra-status .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ff4081;
  animation: blink 1.2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}

/* ----------------------
   فرم ورود سمت راست
------------------------*/
.auth-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0; /* حذف کامل padding برای پوشش حداکثری */
  background: radial-gradient(circle at top right, #0f1a2f, #000);
  border-left: 2px solid rgba(0, 255, 255, 0.15);
  border-radius: 0 12px 12px 0;
  min-height: 100vh; /* پوشش کامل ارتفاع صفحه */
  width: 100%; /* پوشش کامل عرض */
}

.auth-box {
  width: 100%;
  max-width: 420px;
  background: transparent;
  border-radius: 12px;
  padding: 2rem; /* کاهش padding برای تعادل */
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.auth-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.25), 0 0 15px rgba(255, 0, 255, 0.1);
}

.auth-title {
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  color: #00ffff;
  margin-bottom: 1.5rem; /* کاهش فاصله برای چیدمان فشرده‌تر */
  text-shadow: 0 0 10px #00ffff, 0 0 15px #ff00ff;
}

.auth-toggle {
  display: flex;
  margin-bottom: 1.2rem; /* کاهش فاصله */
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}
.auth-tab {
  flex: 1;
  padding: 0.8rem 1rem;
  text-align: center;
  border: none;
  background: transparent;
  color: #ccc;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}
.auth-tab.active {
  background: #00ffff;
  color: #000;
  box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.3);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* کاهش فاصله برای چیدمان بهتر */
}
.input-group {
  display: flex;
  align-items: center;
  background: #222;
  border-radius: 10px;
  border: 1px solid rgba(0, 255, 255, 0.1);
  padding: 0.6rem 0.8rem; /* کاهش padding */
  transition: all 0.3s ease;
}
.input-group:hover {
  border-color: #00ffff;
}
.input-group input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: 1rem;
  direction: ltr;
}
.prefix {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  font-weight: bold;
  color: #00ffff;
}

.btn-submit {
  padding: 0.8rem;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #00ffff, #ff00ff);
  color: #000;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.25), 0 0 10px rgba(255, 0, 255, 0.15);
}
.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.35), 0 0 15px rgba(255, 0, 255, 0.2);
}

.social-login {
  text-align: center;
  margin-top: 1.5rem; /* کاهش فاصله */
  color: #ccc;
  font-size: 0.9rem;
}
.social-icons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.5rem;
}
.social-icons a {
  font-size: 1.5rem;
  color: #00ffff;
  transition: all 0.3s ease;
}
.social-icons a:hover {
  color: #ff4081;
  transform: scale(1.2);
}

.terms {
  text-align: center;
  font-size: 0.75rem;
  color: #aaa;
  margin-top: 1.2rem; /* کاهش فاصله */
}
.terms a {
  color: #00ffff;
  text-decoration: underline;
  transition: all 0.3s;
}
.terms a:hover {
  color: #ff4081;
}

/* ----------------------
   Responsive Design
------------------------*/
@media (max-width: 768px) {
  body {
    background: radial-gradient(circle at top right, #0f1a2f, #000);
  }
  .auth-wrapper {
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    border-radius: 12px;
    padding: 0.5rem; /* کاهش padding برای استفاده بهتر از فضا */
  }
  .auth-info {
    display: none;
  }
  .auth-container {
    padding: 1rem; /* کاهش padding */
    border-radius: 12px;
    border-left: none;
    width: 100%;
    max-width: 100%;
    background: radial-gradient(circle at top right, #0f1a2f, #000);
  }
  .auth-box {
    padding: 1.5rem;
    max-width: 100%;
  }
  .auth-title {
    font-size: 1.5rem;
    margin-bottom: 1.2rem;
  }
  .auth-toggle {
    margin-bottom: 1rem;
  }
  .auth-tab {
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
  }
  .input-group {
    padding: 0.5rem 0.6rem;
  }
  .input-group input {
    font-size: 0.9rem;
  }
  .btn-submit {
    padding: 0.6rem;
    font-size: 0.9rem;
  }
  .social-login {
    margin-top: 1.2rem;
    font-size: 0.85rem;
  }
  .social-icons a {
    font-size: 1.3rem;
  }
  .terms {
    font-size: 0.7rem;
    margin-top: 1rem;
  }
}

@media (max-width: 480px) {
  .auth-container {
    padding: 0.8rem;
  }
  .auth-box {
    padding: 1rem;
  }
  .auth-title {
    font-size: 1.3rem;
    margin-bottom: 1rem;
  }
  .auth-toggle {
    margin-bottom: 0.8rem;
  }
  .auth-tab {
    padding: 0.5rem 0.6rem;
    font-size: 0.85rem;
  }
  .input-group {
    padding: 0.4rem 0.5rem;
  }
  .input-group input {
    font-size: 0.85rem;
  }
  .btn-submit {
    padding: 0.5rem;
    font-size: 0.85rem;
  }
  .social-login {
    margin-top: 1rem;
    font-size: 0.8rem;
  }
  .social-icons a {
    font-size: 1.2rem;
  }
  .terms {
    font-size: 0.65rem;
    margin-top: 0.8rem;
  }
}
/* ----------------------
   Responsive Design
------------------------*/
@media (max-width: 768px) {
  body {
    background: radial-gradient(circle at top right, #0f1a2f, #000);
  }
  .auth-wrapper {
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    border-radius: 12px;
    padding: 0.5rem;
  }
  .auth-info {
    display: none;
  }
  .auth-container {
    flex: 1; /* این باعث میشه کل ارتفاع رو بگیره */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    border-radius: 12px;
    border-left: none;
    width: 100%;
    max-width: 100%;
    min-height: 100vh; /* این خط باعث میشه از بالا تا پایین کشیده شه */
    background: radial-gradient(circle at top right, #0f1a2f, #000);
  }
  .auth-box {
    padding: 1.5rem;
    width: 100%;
    max-width: 420px; /* همچنان محدودیت عرض برای قشنگی */
    min-height: 90vh; /* جعبه هم کشیده‌تر بشه */
    display: flex;
    flex-direction: column;
    justify-content: center; /* محتوای فرم وسط عمودی */
  }
  .auth-title {
    font-size: 1.5rem;
    margin-bottom: 1.2rem;
  }
}

@media (max-width: 480px) {
  .auth-container {
    padding: 0.8rem;
    min-height: 100vh; /* همچنان تمام ارتفاع */
  }
  .auth-box {
    padding: 1rem;
    min-height: 95vh; /* تقریبا کل صفحه رو پر کنه */
  }
  .auth-title {
    font-size: 1.3rem;
    margin-bottom: 1rem;
  }
}
.mobile-logo {
  display: none; /* پیش‌فرض دسکتاپ پنهان */
}

@media (max-width: 768px) {
  .mobile-logo {
    display: block;
    width: 240px;        /* سایز بزرگتر */
    max-width: 240px;
    margin: 0 auto 1.5rem auto; /* فاصله از عنوان فرم */
    animation: logo-bounce 2s infinite ease-in-out;
  }
}

@media (max-width: 480px) {
  .mobile-logo {
    width: 220px;        /* برای موبایل خیلی کوچک کمی کوچکتر */
    max-width: 220px;
    margin-bottom: 3rem;
  }
}