/* ==========================================================================
   صفحه‌ی ورود پنل همراهان SMP
   --------------------------------------------------------------------------
   همه‌ی قواعد زیر با کلاس‌های sma- شروع می‌شوند و داخل
   body.sma-login-page محصور هستند، پس به هیچ صفحه‌ی دیگری سرایت
   نمی‌کنند. متغیرهای رنگ از style.css قالب می‌آیند.
   ========================================================================== */

.sma-login-page {
	--sma-ch: 34px;                       /* اندازه‌ی گوشه‌ی بریده */
	--sma-ink: #E7EEF5;                   /* متن اصلی روی شیشه */
	--sma-ink-soft: #A7BCCE;              /* متن کم‌رنگ */
	--sma-line: rgba(255, 255, 255, .13);
	--sma-field: rgba(6, 20, 34, .55);
	--sma-teal: #37C6CF;
	--sma-danger: #F6A49B;
	--sma-ok: #8FD6A4;

	margin: 0;
	min-height: 100dvh;
	background: #040C15;
	color: var(--sma-ink);
	font-family: var(--sm-font, "Vazirmatn", Tahoma, sans-serif);
	-webkit-font-smoothing: antialiased;
}

/* صفحه‌ی ورود هیچ نوار افقی نباید بسازد — نورهای پس‌زمینه از لبه
   بیرون می‌زنند و بدون این قاعده روی موبایل اسکرول افقی می‌آورند. */
.sma-login-page {
	overflow-x: clip;
}

.sma-login {
	position: relative;
	min-height: 100dvh;
	display: grid;
	place-items: center;
	padding: clamp(1rem, 0.5rem + 2.5vw, 3rem) 1rem;
	isolation: isolate;
}


/* --------------------------------------------------------------------------
   ۱. پس‌زمینه
   -------------------------------------------------------------------------- */

.sma-login__bg {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	background: #040C15;
}

/* سه تصویر دقیقاً روی هم، هر کدام ۵ ثانیه نوبتِ خودش را دارد.
   چرخه‌ی ۱۵ ثانیه‌ای با تأخیرِ ۰ و ۵ و ۱۰ ثانیه، پس همیشه یکی
   دیده می‌شود و گذرِ بینشان یک‌ثانیه‌ای و نرم است. */
.sma-login__shot {
	position: absolute;
	inset: 0;
	opacity: 0;
	animation: sma-shots 15s linear infinite;
	animation-delay: calc(var(--i) * 5s);
}

.sma-login__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ⚠️ زمان‌بندی اینجا دقیق است و سرسری نیست.
   چرخه ۱۵ ثانیه و تأخیرِ هر لایه ۵ ثانیه است. محوشدنِ لایه‌ی قبلی
   باید *همپوشان* با ظاهرشدنِ لایه‌ی بعدی باشد، نه پشت‌سرِ آن. در
   نسخه‌ی اول محوشدن دقیقاً سرِ ثانیه‌ی ۵ تمام می‌شد و لایه‌ی بعدی
   تازه از صفر شروع می‌کرد — نتیجه یک پرشِ سیاه در هر تعویض بود.
   حالا هر لایه تا ثانیه‌ی ۵ کامل می‌ماند (۳۳٫۳۳٪) و تا ثانیه‌ی ۶
   محو می‌شود (۴۰٪)، درست وقتی بعدی دارد ظاهر می‌شود. */
@keyframes sma-shots {
	0%      { opacity: 0; }
	6.667%  { opacity: .62; }
	33.333% { opacity: .62; }
	40%     { opacity: 0; }
	100%    { opacity: 0; }
}

/* لایه‌ی سرمه‌ای روی عکس. بدون آن تصویر فیروزه‌ای غالب می‌شود و
   صفحه از هویت رنگی برند (سرمه‌ای) فاصله می‌گیرد. */
.sma-login__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 90% at 78% 12%, rgba(12, 36, 60, .12), rgba(4, 12, 21, .82) 66%),
		linear-gradient(165deg, rgba(7, 26, 43, .68), rgba(4, 12, 21, .90));
}

.sma-login__glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: .5;
	pointer-events: none;
}

.sma-login__glow--teal {
	width: 44vmax;
	height: 44vmax;
	top: -14vmax;
	right: -10vmax;
	background: radial-gradient(circle, rgba(55, 198, 207, .40), transparent 68%);
	animation: sma-drift-a 26s ease-in-out infinite alternate;
}

.sma-login__glow--gold {
	width: 38vmax;
	height: 38vmax;
	bottom: -16vmax;
	left: -12vmax;
	background: radial-gradient(circle, rgba(198, 160, 90, .30), transparent 68%);
	animation: sma-drift-b 32s ease-in-out infinite alternate;
}

/* نشان آکادمی به‌عنوان واترمارک. خیلی کم‌رنگ است تا متن پنل را
   شلوغ نکند ولی در نگاه اول «مال این برند بودنِ» صفحه را می‌رساند. */
.sma-login__watermark {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(92vmin, 880px);
	height: auto;
	translate: -50% -50%;
	opacity: .38;

	/* ⚠️ حالت ترکیب screen عمدی است. نشان آکادمی سرمه‌ای تیره است و
	   روی زمینه‌ی تیره با opacity ساده اصلاً دیده نمی‌شود. با screen
	   فقط بخش‌های روشنِ نشان — حلقه‌ی طلایی و نوشته — بیرون می‌آیند
	   و سرمه‌ایِ تیره در زمینه حل می‌شود. نتیجه یک واترمارک طلاییِ
	   کم‌رنگ است، نه یک لکه‌ی خاکستری. */
	mix-blend-mode: screen;
	filter: saturate(.9) brightness(1.12);
	pointer-events: none;
	animation: sma-breathe 18s ease-in-out infinite alternate;
}

@keyframes sma-drift-a {
	to { transform: translate3d(-6vmax, 5vmax, 0) scale(1.12); }
}

@keyframes sma-drift-b {
	to { transform: translate3d(5vmax, -4vmax, 0) scale(1.08); }
}

@keyframes sma-breathe {
	to { opacity: .5; transform: scale(1.05); }
}


/* --------------------------------------------------------------------------
   ۲. قاب و پنل شیشه‌ای
   -------------------------------------------------------------------------- */

.sma-login__main {
	width: 100%;
	max-width: 27.5rem;
	display: grid;
	gap: 1.4rem;
}

/* قاب بیرونی فقط «خط مرزی» است: یک پس‌زمینه‌ی گرادیانی که ۱ پیکسل
   از هر طرف بیرون پنل می‌ماند. چون گوشه‌ها بریده‌اند، border معمولی
   کار نمی‌کند و باید این‌طور ساخته شود. */
.sma-login__frame {
	position: relative;
	padding: 1px;
	clip-path: polygon(
		var(--sma-ch) 0,
		100% 0,
		100% calc(100% - var(--sma-ch)),
		calc(100% - var(--sma-ch)) 100%,
		0 100%,
		0 var(--sma-ch)
	);
	background:
		linear-gradient(145deg,
			rgba(255, 255, 255, .38),
			rgba(255, 255, 255, .06) 36%,
			rgba(198, 160, 90, .42) 72%,
			rgba(255, 255, 255, .10));
	box-shadow: 0 30px 70px rgba(2, 8, 15, .62);
	animation: sma-rise .7s cubic-bezier(.22, .9, .3, 1) both;
}

/* خط طلایی روی لبه‌ی بریده‌ی بالا-چپ — همان «زبانه»ی تصویر مرجع،
   اما با رنگ برند. */
.sma-login__frame::before {
	content: "";
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	width: calc(var(--sma-ch) * 1.4143);
	height: 2px;
	transform-origin: 0 0;
	transform: translateY(var(--sma-ch)) rotate(-45deg);
	background: linear-gradient(90deg, var(--sm-gold-400, #C6A05A), rgba(198, 160, 90, 0));
}

.sma-login__panel {
	position: relative;
	clip-path: polygon(
		var(--sma-ch) 0,
		100% 0,
		100% calc(100% - var(--sma-ch)),
		calc(100% - var(--sma-ch)) 100%,
		0 100%,
		0 var(--sma-ch)
	);
	padding: clamp(1.5rem, 1rem + 3vw, 2.5rem) clamp(1.25rem, 0.8rem + 2.6vw, 2.25rem) clamp(1.4rem, 1rem + 2vw, 2rem);
	background: linear-gradient(160deg, rgba(11, 32, 52, .70), rgba(5, 15, 26, .82));
	-webkit-backdrop-filter: blur(22px) saturate(145%);
	backdrop-filter: blur(22px) saturate(145%);
}

/* اگر مرورگر backdrop-filter نداشت، شیشه‌ی نیمه‌شفاف خوانا نیست —
   پس‌زمینه را پررنگ‌تر می‌کنیم. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
	.sma-login__panel {
		background: linear-gradient(160deg, #0C2134, #061120);
	}
}

/* کاربری که شفافیت کمتر خواسته، شیشه نمی‌خواهد. */
@media (prefers-reduced-transparency: reduce) {
	.sma-login__panel {
		background: #08192A;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

@keyframes sma-rise {
	from { opacity: 0; transform: translateY(18px) scale(.985); }
	to   { opacity: 1; transform: none; }
}


/* --------------------------------------------------------------------------
   ۳. سربرگ برند
   -------------------------------------------------------------------------- */

.sma-login__brand {
	display: grid;
	justify-items: center;
	gap: .3rem;
	text-align: center;
	margin-bottom: 1.15rem;
}

.sma-login__seal {
	width: 4.9rem;
	height: auto;
	border-radius: 50%;
	filter: drop-shadow(0 6px 18px rgba(2, 8, 15, .7));
	box-shadow:
		0 0 0 1px rgba(198, 160, 90, .35),
		0 0 0 7px rgba(198, 160, 90, .07),
		0 0 34px rgba(198, 160, 90, .18);
}

.sma-login__academy {
	margin: .45rem 0 0;
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--sma-ink);
}

.sma-login__kicker {
	margin: 0;
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--sm-gold-300, #DCC189);
}

.sma-login__title {
	margin: 0 0 .35rem;
	font-size: clamp(1.18rem, 1rem + 1vw, 1.4rem);
	font-weight: 800;
	line-height: 1.45;
	letter-spacing: -.015em;
	text-align: center;
	color: #fff;
}

.sma-login__lede {
	margin: 0 0 1.3rem;
	font-size: .85rem;
	line-height: 1.85;
	text-align: center;
	color: var(--sma-ink-soft);
}


/* --------------------------------------------------------------------------
   ۴. پیام‌ها
   -------------------------------------------------------------------------- */

/* وضعیت فقط با رنگ منتقل نمی‌شود: آیکون + متن + خط کناری هم هست. */
.sma-login__alert {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	margin: 0 0 1.1rem;
	padding: .7rem .85rem;
	border: 1px solid rgba(246, 164, 155, .40);
	border-inline-start: 3px solid var(--sma-danger);
	border-radius: 10px;
	background: rgba(130, 42, 32, .22);
	font-size: .82rem;
	line-height: 1.75;
	color: var(--sma-danger);
}

.sma-login__alert--ok {
	border-color: rgba(143, 214, 164, .40);
	border-inline-start-color: var(--sma-ok);
	background: rgba(34, 86, 50, .22);
	color: var(--sma-ok);
}

.sma-login__alert-ic {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin-top: .18rem;
}

.sma-login__alert:focus,
.sma-login__alert:focus-visible {
	outline: 2px solid var(--sma-danger);
	outline-offset: 3px;
}

.sma-login__alert--ok:focus,
.sma-login__alert--ok:focus-visible {
	outline-color: var(--sma-ok);
}


/* --------------------------------------------------------------------------
   ۵. فیلدها
   -------------------------------------------------------------------------- */

.sma-login__form {
	display: grid;
	gap: 1rem;
}

/* تله‌ی ربات. display:none استفاده نشده چون بعضی ربات‌ها دقیقاً
   همان را تشخیص می‌دهند؛ این روش از دید کاربر و صفحه‌خوان هر دو
   بیرون است. */
.sma-login__trap {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.sma-login__field {
	display: grid;
	gap: .4rem;
}

.sma-login__label {
	font-size: .8rem;
	font-weight: 600;
	color: var(--sma-ink);
}

.sma-login__input {
	position: relative;
	display: flex;
	align-items: center;
	border: 1px solid var(--sma-line);
	border-radius: 10px;
	background: var(--sma-field);
	transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.sma-login__input:focus-within {
	border-color: rgba(198, 160, 90, .65);
	background: rgba(6, 20, 34, .72);
	box-shadow: 0 0 0 3px rgba(198, 160, 90, .18);
}

.sma-login__ic {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin-inline-start: .8rem;
	color: var(--sma-ink-soft);
	transition: color .2s ease;
}

.sma-login__input:focus-within .sma-login__ic {
	color: var(--sm-gold-300, #DCC189);
}

/* ⚠️ dir=ltr روی input لازم است تا ایمیل و نام کاربری لاتین با
   ترتیب درست تایپ شوند، ولی text-align راست می‌ماند تا فیلد در
   چیدمان راست‌به‌چپ سرگردان نشود. */
.sma-login__input input {
	flex: 1 1 auto;
	min-width: 0;
	height: 3.1rem;
	padding: 0 .75rem;
	border: 0;
	background: none;
	color: #fff;
	font: inherit;
	font-size: .92rem;
	text-align: right;
	outline: none;
}

.sma-login__input input::placeholder {
	color: rgba(167, 188, 206, .55);
}

/* پرکردن خودکار مرورگر پس‌زمینه‌ی سفید می‌گذارد و متن سفید را
   ناخوانا می‌کند. این ترفند تنها راه پایدار برای خنثی کردنش است. */
.sma-login__input input:-webkit-autofill,
.sma-login__input input:-webkit-autofill:focus {
	-webkit-text-fill-color: #fff;
	caret-color: #fff;
	transition: background-color 9999s ease-in-out 0s;
}

.sma-login__eye {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 2.9rem;
	height: 2.9rem;
	margin-inline-end: .1rem;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--sma-ink-soft);
	cursor: pointer;
	transition: color .2s ease, background-color .2s ease;
}

.sma-login__eye:hover,
.sma-login__eye:focus-visible {
	color: var(--sm-gold-300, #DCC189);
	background: rgba(255, 255, 255, .06);
}

.sma-login__eye svg {
	width: 1.2rem;
	height: 1.2rem;
}

.sma-login__caps {
	margin: 0;
	font-size: .76rem;
	color: var(--sm-gold-300, #DCC189);
}

.sma-login__caps[hidden] {
	display: none;
}


/* --------------------------------------------------------------------------
   ۶. ردیف «مرا به خاطر بسپار»
   -------------------------------------------------------------------------- */

.sma-login__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
	font-size: .8rem;
}

.sma-login__check {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 2.75rem;
	color: var(--sma-ink-soft);
	cursor: pointer;
}

/* چک‌باکس واقعی پنهان می‌شود ولی از درخت دسترس‌پذیری بیرون نمی‌رود،
   پس صفحه‌خوان و کیبورد همچنان آن را می‌بینند. */
.sma-login__check input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.sma-login__box {
	position: relative;
	flex: 0 0 auto;
	width: 1.1rem;
	height: 1.1rem;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 5px;
	background: var(--sma-field);
	transition: background-color .2s ease, border-color .2s ease;
}

.sma-login__box::after {
	content: "";
	position: absolute;
	top: 46%;
	left: 50%;
	width: .32rem;
	height: .58rem;
	border: solid #071A2B;
	border-width: 0 2px 2px 0;
	opacity: 0;
	transform: translate(-50%, -55%) rotate(45deg);
	transition: opacity .15s ease;
}

.sma-login__check input:checked + .sma-login__box {
	border-color: var(--sm-gold-400, #C6A05A);
	background: var(--sm-gold-400, #C6A05A);
}

.sma-login__check input:checked + .sma-login__box::after {
	opacity: 1;
}

.sma-login__check input:focus-visible + .sma-login__box {
	outline: 2px solid var(--sm-gold-400, #C6A05A);
	outline-offset: 2px;
}

.sma-login__link {
	color: var(--sm-gold-200, #E9D6AA);
	text-decoration: none;
	border-bottom: 1px solid rgba(233, 214, 170, .32);
	transition: color .2s ease, border-color .2s ease;
}

.sma-login__link:hover,
.sma-login__link:focus-visible {
	color: #fff;
	border-color: #fff;
}


/* --------------------------------------------------------------------------
   ۷. دکمه‌ی ورود
   -------------------------------------------------------------------------- */

/* متن سرمه‌ای روی طلایی: نسبت کنتراست ۵:۱ — بالاتر از حد AA. */
.sma-login__submit {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	width: 100%;
	min-height: 3.25rem;
	padding: 0 1.1rem;
	border: 0;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--sm-gold-400, #C6A05A), var(--sm-gold-500, #A8843C));
	color: #071A2B;
	font: inherit;
	font-size: .95rem;
	font-weight: 800;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(168, 132, 60, .26);
	transition: transform .18s ease, box-shadow .2s ease, filter .2s ease;
}

.sma-login__submit:hover {
	filter: brightness(1.06);
	box-shadow: 0 10px 26px rgba(168, 132, 60, .38);
	transform: translateY(-1px);
}

.sma-login__submit:active {
	transform: scale(.985);
	box-shadow: 0 4px 12px rgba(168, 132, 60, .28);
}

.sma-login__submit:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.sma-login__submit-ar {
	width: 1.05rem;
	height: 1.05rem;
	transition: transform .2s ease;
}

.sma-login__submit:hover .sma-login__submit-ar {
	transform: translateX(-3px);
}

.sma-login__spin {
	position: absolute;
	width: 1.2rem;
	height: 1.2rem;
	border: 2px solid rgba(7, 26, 43, .35);
	border-top-color: #071A2B;
	border-radius: 50%;
	opacity: 0;
	animation: sma-spin .7s linear infinite;
}

/* حالت «در حال بررسی». دکمه غیرفعال می‌شود تا فرم دوبار ارسال نشود. */
.sma-login__submit[data-loading] {
	cursor: progress;
	filter: saturate(.85);
}

.sma-login__submit[data-loading] .sma-login__submit-tx,
.sma-login__submit[data-loading] .sma-login__submit-ar {
	opacity: 0;
}

.sma-login__submit[data-loading] .sma-login__spin {
	opacity: 1;
}

@keyframes sma-spin {
	to { transform: rotate(360deg); }
}

.sma-login__status {
	margin: 0;
	min-height: 1rem;
	font-size: .78rem;
	text-align: center;
	color: var(--sm-gold-300, #DCC189);
}


/* --------------------------------------------------------------------------
   ۸. پاورقی داخل پنل
   -------------------------------------------------------------------------- */

.sma-login__foot {
	margin-top: 1.25rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--sma-line);
	text-align: center;
}

.sma-login__foot-ask {
	margin: 0 0 .45rem;
	font-size: .82rem;
	color: var(--sma-ink-soft);
}

.sma-login__foot-note {
	margin: 0;
	font-size: .74rem;
	line-height: 1.8;
	color: rgba(167, 188, 206, .72);
}

/* --------------------------------------------------------------------------
   ۹. موبایل و تنظیمات کاربر
   -------------------------------------------------------------------------- */

@media (max-width: 420px) {

	.sma-login-page {
		--sma-ch: 22px;
	}

	.sma-login__watermark {
		width: 92vmin;
	}
}

/* کاربری که انیمیشن کمتر خواسته: همه‌چیز ساکن، ولی هیچ عنصری
   نامرئی نمی‌ماند. */
@media (prefers-reduced-motion: reduce) {

	.sma-login__frame,
	.sma-login__glow,
	.sma-login__watermark,
	.sma-login__shot,
	.sma-login__spin {
		animation: none !important;
	}

	/* چرخش تصویرها متوقف می‌شود، ولی صفحه نباید بی‌پس‌زمینه بماند:
	   تصویر اول ثابت سر جایش می‌ایستد. */
	.sma-login__shot {
		opacity: 0;
	}

	.sma-login__shot:first-of-type {
		opacity: .62;
	}

	.sma-login__frame {
		opacity: 1;
		transform: none;
	}

	.sma-login__submit:hover,
	.sma-login__submit:active {
		transform: none;
	}

	.sma-login__submit[data-loading] .sma-login__spin {
		opacity: 1;
		border-top-color: #071A2B;
	}
}

/* تصویر تنها: بدون چرخش، ثابت و کاملاً شفاف. */
.sma-login__shot--solo {
	opacity: .62;
	animation: none;
}