* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Rokkitt', serif;
	height: 100vh;
	overflow: hidden;
	position: relative;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #00f2fe 100%);
	background-size: 400% 400%;
	animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

.background-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	overflow: hidden;
}

.animated-bg {
	position: absolute;
	width: 200%;
	height: 200%;
	top: -50%;
	left: -50%;
	background: 
		radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
		radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
		radial-gradient(circle at 40% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
	animation: rotate 20s linear infinite;
}

@keyframes rotate {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.floating-elements {
	position: absolute;
	width: 100%;
	height: 100%;
}

.floating-circle {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	animation: float 6s ease-in-out infinite;
}

.circle-1 {
	width: 300px;
	height: 300px;
	top: 10%;
	left: 10%;
	animation-delay: 0s;
}

.circle-2 {
	width: 200px;
	height: 200px;
	top: 60%;
	right: 15%;
	animation-delay: 1.5s;
}

.circle-3 {
	width: 150px;
	height: 150px;
	bottom: 20%;
	left: 20%;
	animation-delay: 3s;
}

.circle-4 {
	width: 250px;
	height: 250px;
	top: 30%;
	right: 30%;
	animation-delay: 4.5s;
}

@keyframes float {
	0%, 100% {
		transform: translateY(0px) scale(1);
		opacity: 0.6;
	}
	50% {
		transform: translateY(-30px) scale(1.1);
		opacity: 0.8;
	}
}

.center-container {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	padding: 20px;
}

.safe-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	animation: slideUp 0.8s ease-out;
	margin-bottom: 20px;
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.code-display {
	display: flex;
	gap: 20px;
	margin-bottom: 30px;
	justify-content: center;
}

.code-digit {
	width: 60px;
	height: 60px;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20px);
	border-radius: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Rokkitt', serif;
	font-size: 36px;
	font-weight: 700;
	color: #1a1a1a;
	box-shadow: 
		0 10px 30px rgba(0, 0, 0, 0.3),
		0 0 0 1px rgba(255, 255, 255, 0.5) inset,
		0 0 20px rgba(255, 255, 255, 0.2);
	transition: all 0.3s ease;
	border: 2px solid transparent;
}

.code-digit.filled {
	color: #667eea;
	border-color: rgba(102, 126, 234, 0.5);
	box-shadow: 
		0 10px 30px rgba(102, 126, 234, 0.3),
		0 0 0 1px rgba(102, 126, 234, 0.5) inset,
		0 0 30px rgba(102, 126, 234, 0.4);
	animation: digitPop 0.3s ease;
}

@keyframes digitPop {
	0% { transform: scale(1); }
	50% { transform: scale(1.2); }
	100% { transform: scale(1); }
}

.safe-dial-wrapper {
	position: relative;
	filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
	transition: transform 0.3s ease;
}

.safe-dial-wrapper:hover {
	transform: scale(1.02);
}

#kodazavstop {
	display: none;
}

/* SAFE LOCK DIAL STYLES */
.de {
	user-select: none;
	position: relative;
	width: 240px;
	height: 240px;
	border-radius: 100%;
	box-shadow: 0 0 25px rgba(0, 0, 0, .2);
	background-color: transparent;
}

.de .den, .de .dene, .de .denem, .de .deneme, .de .light, .de .dot {
	position: absolute;
	left: 50%;
	top: 50%;
}

.den {
	position: relative;
	width: 230px;
	height: 230px;
	margin: -115px 0 0 -115px;
	border-radius: 100%;
	box-shadow: inset 0 3px 10px rgba(0, 0, 0, .6), 0 2px 20px rgba(255, 255, 255, 0.8);
	background: #667eea;
	background: -moz-radial-gradient(center, ellipse cover, #667eea 0%, #764ba2 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #667eea), color-stop(100%, #764ba2));
	background: -webkit-radial-gradient(center, ellipse cover, #667eea 0%, #764ba2 100%);
	background: -o-radial-gradient(center, ellipse cover, #667eea 0%, #764ba2 100%);
}

.dene {
	z-index: 4;
	width: 150px;
	height: 150px;
	margin: -75px 0 0 -75px;
	border-radius: 100%;
	box-shadow: inset 0 2px 2px rgba(255, 255, 255, .4), 0 3px 13px rgba(0, 0, 0, .85);
	background: #f2f6f5;
	background: -moz-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f6f5), color-stop(100%, #cbd5d6));
	background: -webkit-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
	background: -o-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
}

.denem {
	width: 130px;
	height: 130px;
	margin: -65px 0 0 -65px;
	border-radius: 100%;
	background: #cbd5d6;
	background: -moz-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cbd5d6), color-stop(100%, #f2f6f5));
	background: -webkit-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);
	background: -o-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);
}

.deneme {
	width: 110px;
	height: 110px;
	margin: -55px 0 0 -55px;
	border-radius: 100%;
	box-shadow: inset 0 2px 3px rgba(255, 255, 255, .6), 0 8px 20px rgba(0, 0, 0, .9);
	background: #eef7f6;
	background: -moz-linear-gradient(top, #eef7f6 0%, #8d989a 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eef7f6), color-stop(100%, #8d989a));
	background: -webkit-linear-gradient(top, #eef7f6 0%, #8d989a 100%);
	background: -o-linear-gradient(top, #eef7f6 0%, #8d989a 100%);
}

.den .switch {
	z-index: 3;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.den .switch label {
	z-index: 2;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50%;
	height: 60px;
	margin-top: -30px;
	transform-origin: 0% 50%;
	-webkit-transform-origin: 0% 50%;
	-o-transform-origin: 0% 50%;
	cursor: pointer;
	transition: all 0.2s ease;
}

.den .switch label.safe-number {
	z-index: 2;
}

.den .switch label.safe-number:hover {
	z-index: 3;
}

.den .switch label.safe-number:hover span {
	color: #fff;
	text-shadow: 0 0 15px rgba(102, 126, 234, 1), 0 2px 4px rgba(0, 0, 0, 0.5);
	transition: all 0.2s ease;
}

/* Combine scale with existing rotation for each number on hover */
.den .switch label:nth-child(1):hover span { transform: rotate(90deg) scale(1.2); }
.den .switch label:nth-child(2):hover span { transform: rotate(54deg) scale(1.2); }
.den .switch label:nth-child(3):hover span { transform: rotate(18deg) scale(1.2); }
.den .switch label:nth-child(4):hover span { transform: rotate(-18deg) scale(1.2); }
.den .switch label:nth-child(5):hover span { transform: rotate(-54deg) scale(1.2); }
.den .switch label:nth-child(6):hover span { transform: rotate(-90deg) scale(1.2); }
.den .switch label:nth-child(7):hover span { transform: rotate(-126deg) scale(1.2); }
.den .switch label:nth-child(8):hover span { transform: rotate(-162deg) scale(1.2); }
.den .switch label:nth-child(9):hover span { transform: rotate(-198deg) scale(1.2); }
.den .switch label:nth-child(10):hover span { transform: rotate(-234deg) scale(1.2); }

.den .switch label.safe-number:active span {
	transform: scale(1.1) !important;
}

.den .switch label:after {
	content: "";
	position: absolute;
	top: 6px;
	left: 1px;
	width: 100%;
	height: 25px;
	transform: rotate(-18deg);
	-webkit-transform: rotate(-18deg);
	-o-transform: rotate(-18deg);
}

.den .switch label:before {
	content: "";
	position: absolute;
	bottom: 6px;
	left: 1px;
	width: 100%;
	height: 25px;
	transform: rotate(18deg);
	-webkit-transform: rotate(18deg);
	-o-transform: rotate(18deg);
}

.den .switch label span {
	z-index: 2;
	position: absolute;
	top: 0;
	right: 0;
	width: 35px;
	height: 100%;
	font-weight: bold;
	font-size: 14px;
	line-height: 60px;
	text-align: center;
	color: #eee;
	text-shadow: 0 1px 0 #444;
	font-family: 'Rokkitt', serif;
}

/* Position labels for 10 digits (0-9) - 36 degrees apart */
.den .switch label:nth-child(1) { transform: rotate(-90deg); }
.den .switch label:nth-child(1) span { transform: rotate(90deg); }

.den .switch label:nth-child(2) { transform: rotate(-54deg); }
.den .switch label:nth-child(2) span { transform: rotate(54deg); }

.den .switch label:nth-child(3) { transform: rotate(-18deg); }
.den .switch label:nth-child(3) span { transform: rotate(18deg); }

.den .switch label:nth-child(4) { transform: rotate(18deg); }
.den .switch label:nth-child(4) span { transform: rotate(-18deg); }

.den .switch label:nth-child(5) { transform: rotate(54deg); }
.den .switch label:nth-child(5) span { transform: rotate(-54deg); }

.den .switch label:nth-child(6) { transform: rotate(90deg); }
.den .switch label:nth-child(6) span { transform: rotate(-90deg); }

.den .switch label:nth-child(7) { transform: rotate(126deg); }
.den .switch label:nth-child(7) span { transform: rotate(-126deg); }

.den .switch label:nth-child(8) { transform: rotate(162deg); }
.den .switch label:nth-child(8) span { transform: rotate(-162deg); }

.den .switch label:nth-child(9) { transform: rotate(198deg); }
.den .switch label:nth-child(9) span { transform: rotate(-198deg); }

.den .switch label:nth-child(10) { transform: rotate(234deg); }
.den .switch label:nth-child(10) span { transform: rotate(-234deg); }

.den .switch input {
	position: absolute;
	opacity: 0;
	visibility: hidden;
}

/* SWITCH LIGHT */
.den .light {
	z-index: 1;
	width: 50%;
	height: 80px;
	margin-top: -40px;
	transform-origin: 0% 50%;
	-webkit-transform-origin: 0% 50%;
	-o-transform-origin: 0% 50%;
	transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-webkit-transition: all .5s;
	transition: all .5s;
	-o-transition: all .5s;
}

.den .light span {
	opacity: .4;
	position: absolute;
	top: 0;
	left: 15px;
	width: 80px;
	height: 80px;
	background: -moz-radial-gradient(center, ellipse cover, rgba(102, 126, 234, 0.8) 0%, rgba(118, 75, 162, 0.4) 42%, rgba(111, 113, 179, 0) 72%, rgba(67, 34, 137, 0) 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(102, 126, 234, 0.8)), color-stop(42%, rgba(118, 75, 162, 0.4)), color-stop(72%, rgba(111, 113, 179, 0)), color-stop(100%, rgba(67, 34, 137, 0)));
	background: -webkit-radial-gradient(center, ellipse cover, rgba(102, 126, 234, 0.8) 0%, rgba(118, 75, 162, 0.4) 42%, rgba(111, 113, 179, 0) 72%, rgba(67, 34, 137, 0) 100%);
	background: -o-radial-gradient(center, ellipse cover, rgba(102, 126, 234, 0.8) 0%, rgba(118, 75, 162, 0.4) 42%, rgba(111, 113, 179, 0) 72%, rgba(67, 34, 137, 0) 100%);
}

/* Light will be controlled by JavaScript */

/* SWITCH DOT */
.den .dot {
	z-index: 6;
	width: 50%;
	height: 10px;
	margin-top: -5px;
	transform-origin: 0% 50%;
	-webkit-transform-origin: 0% 50%;
	-o-transform-origin: 0% 50%;
	transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
}

.den .dot span {
	position: absolute;
	top: 0;
	left: 30px;
	width: 10px;
	height: 10px;
	border-radius: 100%;
	background: #dae2e4;
	background: -moz-linear-gradient(top, #dae2e4 0%, #ecf5f4 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dae2e4), color-stop(100%, #ecf5f4));
	background: -webkit-linear-gradient(top, #dae2e4 0%, #ecf5f4 100%);
	background: -o-linear-gradient(top, #dae2e4 0%, #ecf5f4 100%);
}

/* Dot will be controlled by JavaScript */
.den .dot span {
	opacity: 0.6;
	transition: opacity 0.3s ease;
}

.den .dot.active span {
	opacity: 0.9;
}

/* LINE */
.den hr.line {
	z-index: 1;
	position: absolute;
	top: 50%;
	width: 100%;
	height: 0;
	margin-top: -1px;
	border-width: 1px 0;
	border-style: solid;
	border-top-color: #3c3d3f;
	border-bottom-color: #666769;
}

.den hr.line:nth-child(1) {
	transform: rotate(-60deg);
	-webkit-transform: rotate(-60deg);
	-o-transform: rotate(-60deg);
}

.den hr.line:nth-child(2) {
	transform: rotate(60deg);
	-webkit-transform: rotate(60deg);
	-o-transform: rotate(60deg);
}

.den hr.line:nth-child(3) {
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
}

.logo-container {
	margin-top: 40px;
	animation: fadeIn 1s ease-out 0.3s both;
	opacity: 0.9;
	transition: opacity 0.3s ease;
}

.logo-container:hover {
	opacity: 1;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 0.9;
		transform: translateY(0);
	}
}

#login-logo-bottom {
	max-width: 200px;
	height: auto;
	filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
}

/* Shake animation for invalid input */
@keyframes shake {
	0%, 100% { transform: translateX(0); }
	10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
	20%, 40%, 60%, 80% { transform: translateX(10px); }
}

.shake {
	animation: shake 0.5s ease-in-out;
}

.safe-container.shake {
	animation: shake 0.5s ease-in-out;
}

/* Responsive design */
@media (max-width: 768px) {
	.code-display {
		gap: 15px;
	}
	
	.code-digit {
		width: 50px;
		height: 50px;
		font-size: 28px;
	}
	
	.de {
		width: 160px;
		height: 160px;
	}
	
	.den {
		width: 150px;
		height: 150px;
		margin: -75px 0 0 -75px;
	}
	
	.dene {
		width: 95px;
		height: 95px;
		margin: -47.5px 0 0 -47.5px;
	}
	
	.denem {
		width: 80px;
		height: 80px;
		margin: -40px 0 0 -40px;
	}
	
	.deneme {
		width: 70px;
		height: 70px;
		margin: -35px 0 0 -35px;
	}
	
	.den .switch label {
		height: 50px;
		margin-top: -25px;
	}
	
	.den .switch label span {
		font-size: 12px;
		line-height: 50px;
		width: 30px;
	}
	
	.den .light {
		height: 70px;
		margin-top: -35px;
	}
	
	.den .light span {
		width: 70px;
		height: 70px;
	}
	
	.circle-1, .circle-2, .circle-3, .circle-4 {
		opacity: 0.3;
	}
	
	#login-logo-bottom {
		max-width: 150px;
	}
}