/* Webmail giriş sayfası: elastic'in giriş stillerinin üzerine yazar */

:root {
	--login-bg: #f4f5f7;
	--login-card: #ffffff;
	--login-border: #e4e6ea;
	--login-text: #16181d;
	--login-muted: #6b7280;
	--login-input-border: #d1d5db;
	--login-accent: #2563eb;
	--login-accent-hover: #1d4ed8;
	--login-focus: rgba(37, 99, 235, .18);
}

@media (prefers-color-scheme: dark) {
	:root {
		--login-bg: #0f1115;
		--login-card: #171a21;
		--login-border: #262a33;
		--login-text: #e8eaee;
		--login-muted: #9aa1ad;
		--login-input-border: #343a46;
		--login-accent: #3b82f6;
		--login-accent-hover: #60a5fa;
		--login-focus: rgba(59, 130, 246, .28);
	}
}

body.task-login,
body.task-login #layout {
	background: var(--login-bg);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.task-login #layout-content {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 24px 16px;
	text-align: left;
	background: transparent;
}

.task-login #logo {
	display: none;
}

.login-card {
	width: 100%;
	max-width: 400px;
	padding: 36px 32px 32px;
	background: var(--login-card);
	border: 1px solid var(--login-border);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);
}

.login-brand {
	text-align: center;
	margin-bottom: 28px;
}

.login-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 16px;
	border-radius: 12px;
	background: var(--login-accent);
	color: #fff;
}

.login-domain {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--login-text);
	word-break: break-word;
}

.login-subtitle {
	margin-top: 6px;
	font-size: 14px;
	color: var(--login-muted);
}

#login-form {
	top: auto;
	width: 100%;
	max-width: none;
	margin: 0;
}

#login-form tr {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* elastic td.input'u input-group (flex) yapar; flex kalmazsa input %1 genişlikte kalır */
#login-form td.input {
	display: flex;
	width: 100%;
	margin: 0;
	padding: 0;
}

#login-form tr.form-group {
	margin-bottom: 14px;
}

#login-form .input-group-prepend {
	display: none;
}

#login-form .form-control {
	flex: 1 1 auto;
	width: 100%;
	height: 46px;
	padding: 0 14px;
	font-size: 16px; /* 16px altı iOS'ta odaklanınca sayfayı yakınlaştırır */
	color: var(--login-text);
	background: var(--login-card);
	border: 1px solid var(--login-input-border);
	border-radius: 10px !important;
	box-shadow: none;
}

#login-form .form-control::placeholder {
	color: var(--login-muted);
}

#login-form .form-control:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px var(--login-card) inset;
	-webkit-text-fill-color: var(--login-text);
}

#login-form .form-control:focus {
	border-color: var(--login-accent);
	box-shadow: 0 0 0 4px var(--login-focus);
}

#login-form .formbuttons {
	margin: 6px 0 0;
	padding: 0;
	border: 0;
}

#rcmloginsubmit {
	height: 46px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none !important;
	color: #fff;
	background: var(--login-accent);
	border: 0;
	border-radius: 10px;
	box-shadow: none;
}

#rcmloginsubmit:hover,
#rcmloginsubmit:focus {
	background: var(--login-accent-hover);
}

#login-footer {
	flex: none;
	margin-top: 20px;
	font-size: 13px;
	color: var(--login-muted);
	text-align: center;
}

/* Telefon: kart üstten başlar, klavye açılınca sayfa kaydırılabilir */
@media (max-width: 480px) {
	.task-login #layout-content {
		justify-content: flex-start;
		padding: 10vh 16px 24px;
		overflow-y: auto;
	}

	.login-card {
		padding: 28px 20px 24px;
		border-radius: 12px;
	}

	.login-brand {
		margin-bottom: 22px;
	}

	.login-mark {
		width: 40px;
		height: 40px;
		margin-bottom: 14px;
	}

	.login-domain {
		font-size: 19px;
	}
}