﻿body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	/* Gradiens háttér, ami egy sötétvörös mélységet ad */
	background: radial-gradient(circle at center, #1a0505 0%, #050000 100%);
	background-attachment: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	color: #fff;
	overflow: hidden;
}

	/* Finom háttér-dekoráció (füstös hatás) */
	body::before {
		content: "";
		position: absolute;
		width: 200%;
		height: 200%;
		background: url('https://www.transparenttextures.com/patterns/carbon-fibre.png'); /* Diszkrét minta */
		opacity: 0.1;
		z-index: -1;
	}

.container {
	background: rgba(20, 20, 20, 0.95); /* Félig áttetszo sötét kártya */
	padding: 40px;
	border-radius: 12px;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8);
	border: 1px solid #4d0000;
	width: 320px;
	backdrop-filter: blur(5px); /* Üvegszeru hatás */
}

h2 {
	text-align: center;
	color: #b32d2d; /* Visszafogottabb, mattabb vörös */
	margin-bottom: 30px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-weight: 400;
	/* Eltávolítottuk az eros világítást */
}

input {
	width: 100%;
	padding: 12px;
	margin: 12px 0;
	border: 1px solid #333;
	border-radius: 6px;
	box-sizing: border-box;
	background-color: #121212;
	color: #ddd;
	outline: none;
	transition: all 0.3s;
}

	input:focus {
		border-color: #800000;
		background-color: #1a1a1a;
	}

button {
	width: 100%;
	padding: 12px;
	background-color: #800000; /* Szolidabb borvörös */
	border: none;
	color: #eee;
	border-radius: 6px;
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	margin-top: 15px;
	transition: background 0.3s, transform 0.2s;
}

	button:hover {
		background-color: #a30000;
		transform: translateY(-2px);
	}

	button:active {
		transform: translateY(0);
	}

::placeholder {
	color: #444;
}

/* Elrejtjük az alapértelmezett buborékot */
input:invalid {
	box-shadow: none;
}

.error-message {
	color: #ff4d4d;
	font-size: 12px;
	margin-top: -10px;
	margin-bottom: 10px;
	display: none; /* Alapból nem látszik */
	text-align: left;
	font-weight: bold;
}
