{{template "base/head" .}}
<div class="page-content home">
	<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);
			overflow-x: hidden;
		}

		.home-hero {
			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;
		}

		.glass-card {
			background: var(--glass-bg);
			backdrop-filter: blur(12px);
			-webkit-backdrop-filter: blur(12px);
			border: 1px solid var(--glass-border);
			border-radius: 24px;
			padding: 3rem;
			max-width: 850px;
			width: 100%;
			text-align: center;
			box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
			animation: fadeInUp 1s ease-out;
		}

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

		.brand-logo {
			font-size: 1.2rem;
			color: var(--primary-color);
			text-transform: uppercase;
			letter-spacing: 4px;
			margin-bottom: 1rem;
			font-weight: 600;
		}

		.hero-title {
			font-size: 3.5rem;
			font-weight: 800;
			margin-bottom: 1rem;
			background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			letter-spacing: -0.02em;
		}

		.hero-subtitle {
			font-size: 1.4rem;
			color: var(--text-main);
			font-weight: 500;
			margin-bottom: 0.5rem;
		}

		.hero-slogan {
			font-size: 1.1rem;
			color: var(--text-dim);
			line-height: 1.6;
			margin-bottom: 2.5rem;
			font-style: italic;
		}

		.btn-group {
			display: flex;
			gap: 1.5rem;
			justify-content: center;
			flex-wrap: wrap;
		}

		.btn-custom {
			padding: 1rem 2.5rem;
			border-radius: 12px;
			font-weight: 600;
			font-size: 1rem;
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			text-decoration: none !important;
			display: inline-flex;
			align-items: center;
			gap: 0.5rem;
		}

		.btn-primary-custom {
			background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
			color: white !important;
			box-shadow: 0 10px 15px -3px rgba(0, 210, 255, 0.3);
		}

		.btn-primary-custom:hover {
			transform: translateY(-2px);
			box-shadow: 0 20px 25px -5px rgba(0, 210, 255, 0.4);
		}

		.btn-secondary-custom {
			background: var(--glass-bg);
			color: var(--text-main) !important;
			border: 1px solid var(--glass-border);
		}

		.btn-secondary-custom:hover {
			background: rgba(255, 255, 255, 0.08);
			transform: translateY(-2px);
		}

		.stats-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
			gap: 2rem;
			margin-top: 3.5rem;
			border-top: 1px solid var(--glass-border);
			padding-top: 2rem;
		}

		.stat-item {
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
		}

		.stat-value {
			font-size: 1.5rem;
			font-weight: 700;
			color: var(--primary-color);
		}

		.stat-label {
			font-size: 0.875rem;
			color: var(--text-dim);
			text-transform: uppercase;
			letter-spacing: 0.05em;
		}
	</style>

	<section class="home-hero">
		<canvas id="bg-canvas"></canvas>
		
		<div class="glass-card">
			<div class="brand-logo">HPI • GIT • NODE</div>
			<h1 class="hero-title">hOLOlu Resmi Git Deposu</h1>
			<p class="hero-subtitle">Geleceğin kodları burada inşa ediliyor.</p>
			<p class="hero-slogan">"Kodun ötesinde, teknolojinin merkezinde: Mustafa ÖZKAYA projeleri."</p>
			
			<div class="btn-group">
				{{if .IsLogged}}
					<a href="{{AppSubUrl}}/explore/repos" class="btn-custom btn-primary-custom">
						<i class="octicon octicon-search"></i> Depoları Keşfet
					</a>
				{{else}}
					<a href="{{AppSubUrl}}/user/login" class="btn-custom btn-primary-custom">
						<i class="octicon octicon-sign-in"></i> Giriş Yap
					</a>
					{{if .ShowRegistrationButton}}
						<a href="{{AppSubUrl}}/user/sign_up" class="btn-custom btn-secondary-custom">
							<i class="octicon octicon-person"></i> Kayıt Ol
						</a>
					{{end}}
				{{end}}
				<a href="https://git.mustafaozkaya.tr/explore/repos" class="btn-custom btn-secondary-custom">
					<i class="octicon octicon-repo"></i> Genel Projeler
				</a>
			</div>

			<div class="stats-grid">
				<div class="stat-item">
					<span class="stat-value">Hızlı</span>
					<span class="stat-label">Performans Odaklı</span>
				</div>
				<div class="stat-item">
					<span class="stat-value">Güvenli</span>
					<span class="stat-label">SSL Korumalı</span>
				</div>
				<div class="stat-item">
					<span class="stat-value">Özel</span>
					<span class="stat-label">HPI Altyapısı</span>
				</div>
			</div>
		</div>
	</section>

	<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 < 80; 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();

		const card = document.querySelector('.glass-card');
		document.addEventListener('mousemove', (e) => {
			const xAxis = (window.innerWidth / 2 - e.pageX) / 70;
			const yAxis = (window.innerHeight / 2 - e.pageY) / 70;
			card.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
		});
	</script>
</div>
{{template "base/footer" .}}