body {
	font-family: "Inter", sans-serif;
	background-color: #0f172a;
	color: #e2e8f0;
	overscroll-behavior: none;
	-webkit-tap-highlight-color: transparent;
	/* derin arka plan */
	background-image: radial-gradient(
			circle at 0% 0%,
			rgba(79, 70, 229, 0.15) 0%,
			transparent 50%
		),
		radial-gradient(
			circle at 100% 100%,
			rgba(192, 132, 252, 0.15) 0%,
			transparent 50%
		);
}

/* arka plan ışıkları */
.ambient-light {
	position: fixed;
	border-radius: 50%;
	filter: blur(100px);
	z-index: -1;
	opacity: 0.6;
	animation: float 10s ease-in-out infinite;
}

@keyframes float {
	0%,
	100% {
		transform: translate(0, 0);
	}
	50% {
		transform: translate(-20px, 20px);
	}
}

/* glassmorphism utilities */
.glass-panel {
	background: rgba(15, 23, 42, 0.6);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

.glass-input {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	transition: all 0.3s ease;
}

.glass-input:focus {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(129, 140, 248, 0.5);
	box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.2);
}

.glass-button {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(5px);
}

.glass-button:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.2);
}

/* animasyonlu logo */
@keyframes shine {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.animated-logo {
	font-family: "Outfit", sans-serif;
	background: linear-gradient(300deg, #818cf8, #c084fc, #38bdf8, #818cf8);
	background-size: 300% 300%;
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	animation: shine 6s ease infinite;
	filter: drop-shadow(0 0 10px rgba(129, 140, 248, 0.4));
	letter-spacing: -0.5px;
}

/* loader */
@keyframes progress-loading {
	0% {
		width: 0%;
	}
	50% {
		width: 70%;
	}
	100% {
		width: 100%;
	}
}
.animate-progress {
	animation: progress-loading 1.5s ease-in-out forwards;
}
.loader-fade-out {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease-out;
}

/* scrollbar */
::-webkit-scrollbar {
	width: 4px;
	height: 4px;
}
::-webkit-scrollbar-track {
	background: transparent;
}
::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.2);
}

/* slider */
input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	background: transparent;
	height: 24px;
	cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	height: 16px;
	width: 16px;
	border-radius: 50%;
	background: #a5b4fc;
	margin-top: -6px;
	box-shadow: 0 0 10px rgba(165, 180, 252, 0.5);
	transition: transform 0.1s;
	border: 2px solid rgba(255, 255, 255, 0.8);
}
input[type="range"]::-webkit-slider-thumb:hover {
	transform: scale(1.2);
	background: #fff;
}
input[type="range"]::-webkit-slider-runnable-track {
	width: 100%;
	height: 4px;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 2px;
}

/* canvas grid */
.canvas-bg-pattern {
	background-image: linear-gradient(
			45deg,
			rgba(255, 255, 255, 0.03) 25%,
			transparent 25%
		),
		linear-gradient(-45deg, rgba(255, 255, 255, 0.03) 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.03) 75%),
		linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.03) 75%);
	background-size: 20px 20px;
	background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.tab-btn {
	position: relative;
	color: #94a3b8;
	transition: all 0.3s ease;
}
.tab-btn:hover {
	color: #e2e8f0;
	background: rgba(255, 255, 255, 0.05);
}
.tab-btn.active {
	color: #818cf8;
	background: rgba(129, 140, 248, 0.1);
}
.tab-btn.active::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, transparent, #818cf8, transparent);
	box-shadow: 0 -2px 10px rgba(129, 140, 248, 0.8);
}

.filter-card:hover img {
	transform: scale(1.1);
}
.style-btn.active {
	background-color: rgba(129, 140, 248, 0.2);
	color: #a5b4fc;
	border-color: rgba(129, 140, 248, 0.5);
}
.canvas-text-mode {
	cursor: move;
}
input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}