/* ==========================================================================
   Alperen AI — Hero Section
   Tam ekran hero: canvas 3D küre, floating tag animasyonları, premium tipografi.
   ========================================================================== */

/* ── Hero Section ──────────────────────────────────────────────────────── */
.hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background-color: var(--color-bg-primary);
	padding-top: calc(var(--header-height) + var(--space-8));
	padding-bottom: var(--space-12);
}

@media (min-width: 1024px) {
	.hero {
		padding-top: calc(var(--header-height-lg) + var(--space-12));
		padding-bottom: var(--space-16);
	}
}

/* Admin bar düzeltmesi */
body.admin-bar .hero {
	padding-top: calc(var(--header-height) + 32px + var(--space-8));
}

@media screen and (max-width: 782px) {
	body.admin-bar .hero {
		padding-top: calc(var(--header-height) + 46px + var(--space-8));
	}
}

/* ── Arka Plan Efektleri ve Dokular ──────────────────────────────────────── */
.hero__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

/* Aurora parıltı efekti */
.hero__aurora {
	position: absolute;
	top: -30%;
	left: 50%;
	transform: translateX(-50%);
	width: 140%;
	height: 80%;
	background:
		radial-gradient(
			ellipse at 30% 50%,
			rgba(124, 58, 237, 0.18) 0%,
			transparent 55%
		),
		radial-gradient(
			ellipse at 70% 30%,
			rgba(34, 211, 238, 0.12) 0%,
			transparent 55%
		);
	filter: blur(80px);
}

[data-theme="light"] .hero__aurora {
	opacity: 0.45;
}

/* Nokta deseni */
.hero__dotgrid {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(
		circle at center,
		var(--color-text-tertiary) 1px,
		transparent 1px
	);
	background-size: 32px 32px;
	opacity: 0.06;
}

/* Gelişmiş Noise/Kumlanma Dokusu */
.hero__noise {
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
	opacity: 0.015;
	mix-blend-mode: overlay;
}

[data-theme="light"] .hero__noise {
	opacity: 0.01;
}

/* Alt geçiş */
.hero__fade {
	position: absolute;
	inset: auto 0 0;
	height: 12rem;
	background: linear-gradient(to bottom, transparent, var(--color-bg-primary));
}

/* ── Hero Grid ─────────────────────────────────────────────────────────── */
.hero__grid {
	position: relative;
	z-index: var(--z-base);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
	align-items: center;
}

@media (min-width: 1024px) {
	.hero__grid {
		grid-template-columns: 6.5fr 5.5fr;
		gap: var(--space-12);
	}
}

/* ── Hero İçerik ───────────────────────────────────────────────────────── */
.hero__content {
	text-align: center;
	order: 2;
}

@media (min-width: 1024px) {
	.hero__content {
		text-align: left;
		order: 1;
	}
}

/* Durum rozeti */
.hero__status {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-full);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	margin-bottom: var(--space-6);
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
}

.hero__status-dot {
	position: relative;
	width: 0.5rem;
	height: 0.5rem;
}

.hero__status-dot::before,
.hero__status-dot::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--radius-full);
	background: var(--color-accent-green);
}

.hero__status-dot::before {
	animation: status-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
	opacity: 0.75;
}

@keyframes status-ping {
	75%, 100% {
		transform: scale(2.5);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero__status-dot::before {
		animation: none;
	}
}

/* İsim */
.hero__name {
	font-family: var(--font-display);
	font-weight: var(--font-extrabold);
	font-size: var(--text-hero-name);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--color-text-primary);
	margin-bottom: var(--space-4);
}

.hero__name-gradient {
	background: var(--gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-block;
}

/* Unvan */
.hero__title {
	font-family: var(--font-display);
	font-weight: var(--font-semibold);
	font-size: var(--text-hero-title);
	color: var(--color-text-primary);
	margin-bottom: var(--space-3);
	line-height: var(--leading-tight);
}

/* Uzmanlık etiketleri satırı */
.hero__tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2);
	margin-bottom: var(--space-6);
	font-size: var(--text-sm);
	font-family: var(--font-mono);
	color: var(--color-text-tertiary);
	letter-spacing: 0.05em;
}

@media (min-width: 1024px) {
	.hero__tags {
		justify-content: flex-start;
	}
}

.hero__tags-divider {
	color: var(--color-border-hover);
}

/* Açıklama */
.hero__description {
	max-width: 36rem;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--space-8);
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--color-text-secondary);
}

@media (min-width: 640px) {
	.hero__description {
		font-size: var(--text-lg);
	}
}

@media (min-width: 1024px) {
	.hero__description {
		margin-left: 0;
		margin-right: 0;
	}
}

/* ── Hero Butonları ────────────────────────────────────────────────────── */
.hero__buttons {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
}

@media (min-width: 640px) {
	.hero__buttons {
		flex-direction: row;
		justify-content: center;
	}
}

@media (min-width: 1024px) {
	.hero__buttons {
		justify-content: flex-start;
		gap: var(--space-5);
	}
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: var(--font-semibold);
	border-radius: var(--radius-xl);
	white-space: nowrap;
	transition: all var(--duration-normal) var(--ease-out);
	text-decoration: none;
}

.btn--primary {
	color: #fff;
	background: var(--gradient-accent);
	box-shadow: 0 8px 30px var(--color-accent-purple-glow);
}

.btn--primary:hover {
	color: #fff;
	box-shadow: 0 10px 44px rgba(124, 58, 237, 0.5);
	transform: translateY(-2px);
}

.btn--outline {
	color: var(--color-text-primary);
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--color-border);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.btn--outline:hover {
	color: var(--color-text-primary);
	border-color: var(--color-accent-cyan);
	background: var(--color-surface);
	transform: translateY(-2px);
}

/* Sade Metin Bağlantı Butonu */
.btn--text {
	color: var(--color-text-secondary);
	background: transparent;
	padding: var(--space-3) var(--space-4);
	font-weight: var(--font-medium);
	font-size: var(--text-sm);
	gap: var(--space-1);
}

.btn--text:hover {
	color: var(--color-text-primary);
}

.btn__arrow {
	transition: transform var(--duration-fast) var(--ease-out);
}

.btn:hover .btn__arrow {
	transform: translateX(3px);
}

.btn__arrow-diagonal {
	transition: transform var(--duration-fast) var(--ease-out);
}

.btn--text:hover .btn__arrow-diagonal {
	transform: translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
	.btn--primary:hover,
	.btn--outline:hover,
	.btn:hover .btn__arrow,
	.btn--text:hover .btn__arrow-diagonal {
		transform: none;
		box-shadow: none;
	}
}

/* ── Canvas 3D Küre ve Yüzen Etiketler Yerleşimi ──────────────────────── */
.hero__visual {
	order: 1;
	display: flex;
	justify-content: center;
	position: relative;
}

@media (min-width: 1024px) {
	.hero__visual {
		order: 2;
	}
}

.hero__canvas-container {
	position: relative;
	width: 100%;
	max-width: 440px;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero__canvas {
	width: 100%;
	height: 100%;
	display: block;
	z-index: var(--z-base);
}

/* Gelecekte merkezine profil fotoğrafı yerleştirilebilecek boş yapı */
.hero__photo-anchor {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80px;
	height: 80px;
	border-radius: var(--radius-full);
	border: 1px dashed var(--color-border);
	background: radial-gradient(circle, rgba(12c, 58, 237, 0.05) 0%, transparent 80%);
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--duration-slow) var(--ease-out);
}

.hero__canvas-container:hover .hero__photo-anchor {
	opacity: 0.4;
}

/* Yüzen Uzmanlık Etiketleri (Floating Tags) */
.hero__floating-tag {
	position: absolute;
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-lg);
	background: rgba(3, 0, 20, 0.6);
	border: 1px solid var(--color-border);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: var(--font-semibold);
	color: var(--color-text-primary);
	white-space: nowrap;
	pointer-events: none;
	z-index: 10;
	animation: float-animation 6s ease-in-out infinite;
	animation-delay: var(--float-delay);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

[data-theme="light"] .hero__floating-tag {
	background: rgba(255, 255, 255, 0.7);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Tag pozisyonları */
.tag-ai {
	top: 12%;
	left: 8%;
	border-color: rgba(124, 58, 237, 0.3);
}
.tag-production {
	top: 22%;
	right: 4%;
	border-color: rgba(34, 211, 238, 0.3);
}
.tag-chemistry {
	bottom: 18%;
	left: 4%;
	border-color: rgba(34, 211, 238, 0.3);
}
.tag-digital {
	bottom: 12%;
	right: 8%;
	border-color: rgba(124, 58, 237, 0.3);
}

@keyframes float-animation {
	0%, 100% {
		transform: translateY(0) rotate(0deg);
	}
	50% {
		transform: translateY(-10px) rotate(1deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero__floating-tag {
		animation: none;
	}
}

/* ── Kaydırma Göstergesi ───────────────────────────────────────────────── */
.hero__scroll {
	display: none;
}

@media (min-width: 768px) {
	.hero__scroll {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-2);
		position: absolute;
		bottom: var(--space-6);
		left: 50%;
		transform: translateX(-50%);
		color: var(--color-text-tertiary);
	}
}

.hero__scroll-text {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.2em;
}

.hero__scroll-icon {
	animation: scroll-bounce 2s ease-in-out infinite;
	color: var(--color-accent-cyan);
}

@keyframes scroll-bounce {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
	.hero__scroll-icon {
		animation: none;
	}
}

/* ── Hero Giriş Animasyonları ──────────────────────────────────────────── */
.js-enabled .hero__animate {
	opacity: 0;
	transform: translateY(20px);
	filter: blur(6px);
	transition: opacity 0.8s var(--ease-out),
	            transform 0.8s var(--ease-out),
	            filter 0.8s var(--ease-out);
}

.js-enabled .hero__animate.is-visible {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
}

/* Sıralı gecikmeler */
.js-enabled .hero__animate--delay-1 { transition-delay: 0.1s; }
.js-enabled .hero__animate--delay-2 { transition-delay: 0.25s; }
.js-enabled .hero__animate--delay-3 { transition-delay: 0.4s; }
.js-enabled .hero__animate--delay-4 { transition-delay: 0.55s; }
.js-enabled .hero__animate--delay-5 { transition-delay: 0.7s; }
.js-enabled .hero__animate--delay-6 { transition-delay: 0.85s; }

@media (prefers-reduced-motion: reduce) {
	.js-enabled .hero__animate {
		opacity: 1;
		transform: none;
		filter: none;
		transition: none;
	}
}