* { box-sizing: border-box; }
body {
	display: grid;
	min-height: 100vh;
	margin: 0;
	place-items: center;
	padding: 24px;
	color: #172033;
	background:
		radial-gradient(circle at 12% 18%, rgba(109,93,252,.12), transparent 30%),
		radial-gradient(circle at 88% 82%, rgba(42,196,138,.10), transparent 28%),
		#f5f7fb;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: inherit; text-decoration: none; }
.login-wrap {
	width: min(440px, 100%);
	min-height: 540px;
	position: relative;
	border: 1px solid #e6e9f0;
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 30px 80px rgba(32,40,60,.13);
}
.login-wrap::before {
	position: absolute;
	top: 34px;
	left: 50%;
	display: grid;
	width: 54px;
	height: 54px;
	content: "T";
	place-items: center;
	color: #fff;
	border-radius: 16px;
	background: linear-gradient(135deg, #6d5dfc, #8b7fff);
	box-shadow: 0 12px 30px rgba(109,93,252,.25);
	transform: translateX(-50%);
	font-size: 20px;
	font-weight: 800;
}
.login-html {
	position: absolute;
	inset: 0;
	padding: 118px 48px 38px;
	background: transparent;
}
.login-html .sign-in-htm, .login-html .for-pwd-htm {
	position: absolute;
	inset: 0;
	transform: rotateY(180deg);
	backface-visibility: hidden;
	transition: all .35s linear;
}
.login-html .sign-in, .login-html .for-pwd { display: none; }
.login-html .tab {
	display: inline-block;
	margin: 0 16px 20px 0;
	padding-bottom: 9px;
	color: #98a0af;
	border-bottom: 2px solid transparent;
	font-size: 13px;
	font-weight: 700;
}
.login-html .sign-in:checked + .tab, .login-html .for-pwd:checked + .tab { color: #172033; border-color: #6d5dfc; }
.login-form { min-height: 345px; position: relative; perspective: 1000px; transform-style: preserve-3d; }
.login-form .group { margin-bottom: 17px; }
.login-form .group .label { display: block; margin-bottom: 8px; color: #758096; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.login-form .group .input, .login-form .group .button {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 0 15px;
	border: 1px solid #e6e9f0;
	outline: 0;
	border-radius: 11px;
	background: #fafbfc;
	font-size: 12px;
}
.login-form .group .input:focus { border-color: #6d5dfc; background: #fff; box-shadow: 0 0 0 3px rgba(109,93,252,.11); }
.login-form .group .button { color: #fff; border: 0; background: #6d5dfc; font-weight: 750; cursor: pointer; }
.login-form .group .button:hover { background: #5547df; }
.login-html .sign-in:checked + .tab + .for-pwd + .tab + .login-form .sign-in-htm { transform: rotate(0); }
.login-html .for-pwd:checked + .tab + .login-form .for-pwd-htm { transform: rotate(0); }
.hr { height: 1px; margin: 34px 0; background: #eceef3; }
#sonuc, #sonuc2 { color: #d92d20; font-size: 11px; }
@media (max-width: 520px) {
	.login-html { padding: 118px 24px 28px; }
	.login-wrap { min-height: 530px; border-radius: 20px; }
}