body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background-color: #f0f2f5; 
    display: flex; 
    justify-content: center; 
    align-items: flex-start; /* Dikey ortalamayı iptal edip en üste alır */
    min-height: 100vh; 
    margin: 0; 
    padding-top: 40px;       /* En üstten biraz estetik boşluk bırakır */
}
.container { 
	background: white; padding: 30px; 
	border-radius: 15px; 
	box-shadow: 0 10px 25px rgba(0,0,0,0.1); 
	width: 100%; 
	max-width: 450px; 
}

h2 { 
	color: #2c3e50; 
	text-align: center; 
	margin-bottom: 25px; 
	border-bottom: 2px solid #3498db; 
	padding-bottom: 10px; 
}

.input-group { 
	margin-bottom: 15px; 
}

label { 
	display: block; 
	margin-bottom: 8px; 
	font-weight: 600; 
	color: #444; 
	font-size: 0.95rem; 
}

input, select { 
	width: 100%; 
	padding: 12px; 
	border: 1px solid #ccd1d1; 
	border-radius: 8px; 
	box-sizing: border-box; 
	transition: border 0.3s; 
}

input:focus, select:focus { 
	border-color: #3498db; 
	outline: none; 
}

button { 
	width: 100%; 
	padding: 14px; 
	background-color: #3498db; 
	color: white; border: none; 
	border-radius: 8px; cursor: pointer; 
	font-size: 16px; 
	font-weight: bold; 
	margin-top: 15px; 
	transition: background 0.3s; 
}

button:hover { 
	background-color: #2980b9; 
}

.result-box { 
	margin-top: 25px; 
	padding: 20px; 
	background-color: #faffff; 
	border: 1px solid #d1f2eb; 
	border-left: 6px solid #1abc9c; 
	border-radius: 8px; 
}

.res-item { 
	display: flex; 
	justify-content: space-between; 
	margin-bottom: 10px; 
	font-size: 1rem; 
}

hr { 
	border: 0; 
	border-top: 1px solid #eee; 
	margin: 10px 0; 
}

strong { 
	color: #2c3e50; 
}