/* ==========================================================================
   Login page — Orbit adapter (page-scoped)
   --------------------------------------------------------------------------
   Loaded ONLY by Views/Account/Login.cshtml (the legacy login.css keeps
   serving ForgotPassword / MailCheck until those pages are ported too).
   The page body carries .ds-skin, so orbit-skin.css supplies the field
   (.cari-ara) and button (.egk-btn-primary) primitives. This file only holds
   the login-specific layout: card, logo, eye toggle, reset link, orbital
   canvas. Every value is a --ds-* token from ds.css. Shared rules must NOT
   go here — orbit-skin.css stays byte-identical with Core.
   ========================================================================== */

/* tenant background image (inline style from AccountController) wins over this */
body.ds-skin {
	min-height: 100vh;
	background: var(--ds-surface-page);
}

/* animated orbital canvas — rendered only when the tenant has no background
   image. Two concentric hairline ellipses engraved into the neumorphic
   surface; small dark comets (dense head, thinning tail) glide along the
   tracks. Only transform rotates, so the GPU composites it cheaply. */
.orbit-field {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

/* soft light pool under the card — neumorphic key light */
.orbit-field::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(55% 55% at 50% 42%,
		rgba(255, 255, 255, 0.85) 0%,
		rgba(255, 255, 255, 0.25) 45%,
		transparent 100%);
}

/* each plane centers one elliptical track; both share the same tilt so the
   rings stay concentric and calm */
.orbit-plane {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-14deg) scaleY(0.38);
}

.orbit-plane--b, .orbit-plane--b .orbit-spin, .orbit-plane--b .orbit-track { width: 78vmax; height: 78vmax; }
.orbit-plane--c, .orbit-plane--c .orbit-spin, .orbit-plane--c .orbit-track { width: 108vmax; height: 108vmax; }

/* engraved hairline: dark line + tight white highlight = carved groove */
.orbit-track {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid rgba(114, 132, 156, 0.5);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* spinner carries the comet around its track */
.orbit-spin {
	position: absolute;
	inset: 0;
	animation: orbit-spin linear infinite;
}
.orbit-plane--b .orbit-spin { animation-duration: 62s; animation-direction: reverse; }
.orbit-plane--c .orbit-spin { animation-duration: 84s; }
/* extra comets spread around their rings via negative delays */
.orbit-plane--b .orbit-spin--offset { animation-delay: -31s; }
.orbit-plane--c .orbit-spin--offset { animation-delay: -28s; }
.orbit-plane--c .orbit-spin--offset2 { animation-delay: -56s; }

/* the comet: a stretched ellipse riding the track tangentially — dense
   rounded head at the leading end, long thinning tail behind. The spinner
   rotation keeps it aligned with the direction of travel everywhere. */
.orbit-tail {
	position: absolute;
	top: -10px;
	left: 50%;
	width: 190px;
	height: 20px;
	margin-left: -95px;
	border-radius: 50%;
	background: radial-gradient(ellipse farthest-side at 85% 50%,
		rgba(10, 12, 15, 0.95) 0%,
		rgba(10, 12, 15, 0.6) 14%,
		rgba(28, 32, 38, 0.35) 38%,
		rgba(28, 32, 38, 0.12) 62%,
		transparent 92%);
	filter: blur(0.5px);
}
/* reversed spin — head leads on the left instead */
.orbit-spin--reverse .orbit-tail {
	background: radial-gradient(ellipse farthest-side at 15% 50%,
		rgba(10, 12, 15, 0.95) 0%,
		rgba(10, 12, 15, 0.6) 14%,
		rgba(28, 32, 38, 0.35) 38%,
		rgba(28, 32, 38, 0.12) 62%,
		transparent 92%);
}

@keyframes orbit-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.orbit-spin { animation: none; }
	.orbit-plane--b .orbit-spin { transform: rotate(215deg); }
	.orbit-plane--b .orbit-spin--offset { transform: rotate(35deg); }
	.orbit-plane--c .orbit-spin { transform: rotate(120deg); }
	.orbit-plane--c .orbit-spin--offset { transform: rotate(240deg); }
	.orbit-plane--c .orbit-spin--offset2 { transform: rotate(0deg); }
}

/* placement driven by the LoginPosition tenant setting */
.context {
	display: flex;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
	justify-content: var(--login-position-horizontal);
	align-items: var(--login-position-vertical);
}

/* --------------------------------------------------------------------------
   Card — the raised neumorphic surface. The translucent surface mix reads as
   the solid canvas color on the plain page and as frosted glass over a
   tenant background photo.
   -------------------------------------------------------------------------- */
.login-shell {
	display: flex;
	align-items: center;
	gap: var(--ds-space-6);
	max-width: calc(100vw - 2 * var(--ds-space-6));
	margin: var(--ds-space-6);
}

.login-container {
	background: color-mix(in srgb, var(--ds-surface) 88%, transparent);
	background-image: var(--ds-gradient-raise);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-radius: var(--ds-radius-card);
	box-shadow: var(--ds-shadow-neu);
	padding: var(--ds-space-8) var(--ds-space-8) var(--ds-space-4);
	width: min(400px, calc(100vw - 2 * var(--ds-space-6)));
	flex: 0 0 auto;
	z-index: 2;
}

.logo-container {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 120px;
	margin-bottom: var(--ds-space-4);
}

.logo-container img {
	max-width: 180px;
	min-width: 140px;
}

/* transition notice — independent Orbit info card beside the login card */
.login-announcement {
	display: flex;
	align-items: flex-start;
	gap: var(--ds-space-3);
	width: min(360px, calc(100vw - 2 * var(--ds-space-6)));
	padding: var(--ds-space-6);
	border: 1px solid var(--ds-state-info-border);
	border-radius: var(--ds-radius-card);
	background: color-mix(in srgb, var(--ds-state-info-bg) 82%, var(--ds-surface));
	box-shadow: var(--ds-shadow-neu);
	color: var(--ds-state-info-text);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	flex: 0 0 auto;
}

.login-announcement__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: var(--ds-radius-full);
	background: var(--ds-surface);
	box-shadow: var(--ds-shadow-neu-sm);
	color: var(--ds-state-info-icon);
	font-size: var(--ds-text-h5);
}

.login-announcement__content {
	min-width: 0;
}

.login-announcement__eyebrow {
	display: block;
	margin-bottom: var(--ds-space-1);
	font-size: var(--ds-text-caption);
	font-weight: var(--ds-fw-semibold);
	line-height: var(--ds-lh-snug);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.login-announcement p {
	margin: 0;
	font-size: var(--ds-text-body-sm);
	line-height: var(--ds-lh-snug);
}

.login-announcement strong {
	display: block;
	margin-bottom: var(--ds-space-1);
	font-weight: var(--ds-fw-semibold);
}

.login-announcement__phone {
	display: inline-flex;
	align-items: center;
	gap: var(--ds-space-2);
	margin-top: var(--ds-space-4);
	padding: var(--ds-space-2) var(--ds-space-3);
	border-radius: var(--ds-radius-btn);
	background: var(--ds-surface);
	box-shadow: var(--ds-shadow-neu-sm);
	color: var(--ds-state-info-text);
	font-size: var(--ds-text-body-sm);
	font-weight: var(--ds-fw-semibold);
	text-decoration: none;
	transition: var(--ds-transition-base);
}

.login-announcement__phone i {
	color: var(--ds-state-info-icon);
}

.login-announcement__phone:hover {
	color: var(--ds-text-1);
	box-shadow: var(--ds-shadow-neu-hover);
	transform: var(--ds-lift-hover);
}

.login-announcement__phone:focus-visible {
	outline: var(--ds-bw-thin) solid var(--ds-state-info-icon);
	outline-offset: var(--ds-space-1);
}

@media (max-width: 860px) {
	.context {
		position: relative;
		height: auto;
		min-height: 100%;
		padding-block: var(--ds-space-6);
	}

	.login-shell {
		flex-direction: column;
		gap: var(--ds-space-4);
	}

	.login-container,
	.login-announcement {
		width: min(400px, calc(100vw - 2 * var(--ds-space-6)));
	}
}

.login-form {
	display: flex;
	flex-direction: column;
	padding: 0;
}

.login-field {
	margin-bottom: var(--ds-space-4);
}

/* customize.css sets Poppins on *, which beats inheritance — force the DS face */
.ds-skin .cari-ara .txt-aranacak-ifade {
	font-family: var(--ds-font-body);
}

/* room for the eye button on the right */
.password-field .txt-aranacak-ifade {
	padding-right: 44px;
}

/* eye toggle — quiet ghost disc, mirrors orbit-skin's .btn-temizle recipe */
.toggle-password {
	position: absolute;
	right: var(--ds-space-2);
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: none;
	border-radius: var(--ds-radius-full);
	background: transparent;
	color: var(--ds-text-3);
	cursor: pointer;
	transition: var(--ds-transition-base);
	z-index: 2;
}

.toggle-password:hover {
	background: var(--ds-accent-subtle);
	color: var(--ds-text-1);
}

.toggle-password.hidden {
	display: none;
}

#login-btn {
	width: 100%;
	height: 44px;
	margin: var(--ds-space-2) 0 var(--ds-space-4);
	font-weight: var(--ds-fw-semibold);
}

/* password reset — quiet text link, brand wash on hover */
#password-btn {
	color: var(--ds-text-2);
	font-size: var(--ds-text-caption);
	padding: var(--ds-space-1) var(--ds-space-2);
	border-radius: var(--ds-radius-sm);
	text-decoration: none;
	transition: var(--ds-transition-base);
}

#password-btn:hover {
	background: var(--ds-accent-subtle);
	color: var(--ds-text-1);
}

/* MVC validation output */
.field-validation-error,
.validation-summary-errors {
	color: var(--ds-error);
	font-size: var(--ds-text-caption);
	margin-bottom: var(--ds-space-2);
}

:focus {
	outline: none;
}