{{template "base/head" .}}
<div class="page-content auth-page">
	<style>
		:root {
			--primary-color: #00d2ff;
			--secondary-color: #3a7bd5;
			--bg-dark: #0f172a;
			--glass-bg: rgba(255, 255, 255, 0.03);
			--glass-border: rgba(255, 255, 255, 0.1);
			--text-main: #f8fafc;
			--text-dim: #94a3b8;
		}

		body {
			background-color: var(--bg-dark) !important;
			color: var(--text-main);
		}

		.auth-container {
			position: relative;
			min-height: calc(100vh - 100px);
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 2rem;
			z-index: 1;
		}

		#bg-canvas {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
		}

		.auth-card {
			background: var(--glass-bg);
			backdrop-filter: blur(16px);
			-webkit-backdrop-filter: blur(16px);
			border: 1px solid var(--glass-border);
			border-radius: 24px;
			padding: 2.5rem;
			max-width: 450px;
			width: 100%;
			box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
		}

		.auth-header {
			text-align: center;
			margin-bottom: 2rem;
		}

		.auth-header h2 {
			font-size: 2rem;
			font-weight: 700;
			background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.ui.form input:not([type]), .ui.form input[type="date"], .ui.form input[type="datetime-local"], .ui.form input[type="email"], .ui.form input[type="number"], .ui.form input[type="password"], .ui.form input[type="search"], .ui.form input[type="tel"], .ui.form input[type="time"], .ui.form input[type="text"], .ui.form input[type="url"] {
			background: rgba(255, 255, 255, 0.05) !important;
			border: 1px solid var(--glass-border) !important;
			color: white !important;
			border-radius: 10px !important;
			padding: 0.8rem !important;
		}

		.ui.form .field > label {
			color: var(--text-dim) !important;
			font-weight: 500 !important;
			margin-bottom: 0.5rem !important;
		}

		.ui.primary.button {
			background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
			border-radius: 10px !important;
			padding: 1rem !important;
			font-weight: 600 !important;
			width: 100% !important;
			margin-top: 1rem !important;
			transition: all 0.3s !important;
		}

		.ui.primary.button:hover {
			transform: translateY(-2px) !important;
			box-shadow: 0 10px 15px -3px rgba(0, 210, 255, 0.3) !important;
		}

		.auth-footer {
			margin-top: 1.5rem;
			text-align: center;
			color: var(--text-dim);
			font-size: 0.9rem;
		}

		.auth-footer a {
			color: var(--primary-color);
			text-decoration: none;
			font-weight: 600;
		}
	</style>

	<div class="auth-container">
		<canvas id="bg-canvas"></canvas>
		
		<div class="auth-card">
			<div class="auth-header">
				<h2>Yeni Hesap Oluştur</h2>
				<p style="color: var(--text-dim)">hOLOlu Git Geliştirici Topluluğuna Katılın</p>
			</div>

			<form class="ui form" action="{{.SignUpLink}}" method="post">
				{{.CsrfTokenHtml}}
				<div class="required field {{if .Err_UserName}}error{{end}}">
					<label for="user_name">Kullanıcı Adı</label>
					<input id="user_name" name="user_name" value="{{.user_name}}" autofocus required>
				</div>
				<div class="required field {{if .Err_Email}}error{{end}}">
					<label for="email">E-posta Adresi</label>
					<input id="email" name="email" type="email" value="{{.email}}" required>
				</div>
				<div class="required field {{if .Err_Password}}error{{end}}">
					<label for="password">Parola</label>
					<input id="password" name="password" type="password" value="{{.password}}" required>
				</div>
				<div class="required field {{if .Err_Password}}error{{end}}">
					<label for="retype">Parolayı Onaylayın</label>
					<input id="retype" name="retype" type="password" value="{{.retype}}" required>
				</div>
				
				<button class="ui primary button">Kayıt Ol</button>
			</form>

			<div class="auth-footer">
				Zaten bir hesabınız var mı? <a href="{{AppSubUrl}}/user/login">Giriş Yapın</a>
			</div>
		</div>
	</div>

	<script>
		// Particle Background Script
		const canvas = document.getElementById('bg-canvas');
		const ctx = canvas.getContext('2d');
		let particles = [];
		function resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }
		window.addEventListener('resize', resize);
		resize();
		class Particle {
			constructor() { this.reset(); }
			reset() {
				this.x = Math.random() * canvas.width;
				this.y = Math.random() * canvas.height;
				this.vx = (Math.random() - 0.5) * 0.4;
				this.vy = (Math.random() - 0.5) * 0.4;
				this.radius = Math.random() * 2;
				this.alpha = Math.random() * 0.5 + 0.1;
			}
			update() {
				this.x += this.vx; this.y += this.vy;
				if (this.x < 0 || this.x > canvas.width || this.y < 0 || this.y > canvas.height) this.reset();
			}
			draw() {
				ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
				ctx.fillStyle = `rgba(0, 210, 255, ${this.alpha})`; ctx.fill();
			}
		}
		for (let i = 0; i < 60; i++) particles.push(new Particle());
		function animate() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.strokeStyle = 'rgba(0, 210, 255, 0.05)';
			for (let i = 0; i < particles.length; i++) {
				for (let j = i + 1; j < particles.length; j++) {
					const dx = particles[i].x - particles[j].x;
					const dy = particles[i].y - particles[j].y;
					const dist = Math.sqrt(dx * dx + dy * dy);
					if (dist < 150) {
						ctx.beginPath(); ctx.moveTo(particles[i].x, particles[i].y);
						ctx.lineTo(particles[j].x, particles[j].y); ctx.stroke();
					}
				}
			}
			particles.forEach(p => { p.update(); p.draw(); });
			requestAnimationFrame(animate);
		}
		animate();
	</script>
</div>
{{template "base/footer" .}}