/* ==========================================================
   HERO V4 PREMIUM
   BÖLÜM 1
   HERO SECTION + LEFT
========================================================== */

.hero-section {
	position: relative;
	width: 100%;
	min-height: 720px;
	padding-top: 110px;
	overflow: hidden;
	background: radial-gradient(circle at 82% 18%,rgba(46,230,214,.10),transparent 35%), radial-gradient(circle at 10% 30%,rgba(8,191,255,.08),transparent 32%), #050816;
}

	.hero-section::before {
		content: "";
		position: absolute;
		top: -260px;
		right: -200px;
		width: 650px;
		height: 650px;
		border-radius: 50%;
		background: radial-gradient( circle, rgba(46,230,214,.12) 0%, rgba(46,230,214,.05) 45%, transparent 75% );
		filter: blur(80px);
		z-index: 0;
	}

	.hero-section::after {
		content: "";
		position: absolute;
		left: -220px;
		bottom: -220px;
		width: 520px;
		height: 520px;
		border-radius: 50%;
		background: radial-gradient( circle, rgba(8,191,255,.08), transparent 70% );
		filter: blur(70px);
		z-index: 0;
	}

.hero-wrapper {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 28px;
	min-height: 620px;
	z-index: 5;
}

/* ==========================================================
   LEFT
========================================================== */

.hero-left {
	position: relative;
	width: 44%;
	z-index: 5;
	animation: heroLeft .8s ease;
}

/* ==========================================================
   BADGE
========================================================== */

.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 12px 22px;
	border-radius: 50px;
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.08);
	backdrop-filter: blur(18px);
	margin-bottom: 28px;
}

	.hero-badge span {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: #2EE6D6;
		box-shadow: 0 0 25px rgba(46,230,214,.8);
	}

	.hero-badge p {
		margin: 0;
		color: #E5EDF8;
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 1.6px;
	}

/* ==========================================================
   TITLE
========================================================== */

.hero-title {
	margin: 0 0 24px;
	font-size: 58px;
	line-height: 1.05;
	font-weight: 900;
	color: #fff;
}

	.hero-title span {
		display: block;
		color: #fff;
	}

	.hero-title strong {
		display: block;
		color: #2EE6D6;
		text-shadow: 0 0 35px rgba(46,230,214,.35);
	}

/* ==========================================================
   DESCRIPTION
========================================================== */

.hero-description {
	width: 92%;
	margin-bottom: 40px;
	color: #AEB8C9;
	font-size: 18px;
	line-height: 1.9;
}

/* ==========================================================
   BUTTONS
========================================================== */

.hero-buttons {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}

.hero-btn {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 56px;
	padding: 0 34px;
	border-radius: 999px;
	overflow: hidden;
	text-decoration: none;
	font-size: 15px;
	font-weight: 700;
	transition: .35s ease;
}

	.hero-btn::before {
		content: "";
		position: absolute;
		left: -120%;
		top: 0;
		width: 120%;
		height: 100%;
		background: linear-gradient( 90deg, transparent, rgba(255,255,255,.28), transparent );
		transition: .6s;
	}

	.hero-btn:hover::before {
		left: 120%;
	}

.hero-btn-primary {
	background: linear-gradient( 135deg, #2EE6D6, #08BFFF );
	color: #06131E;
	box-shadow: 0 0 35px rgba(46,230,214,.22);
}

	.hero-btn-primary:hover {
		color: #06131E;
		transform: translateY(-3px);
		box-shadow: 0 0 45px rgba(46,230,214,.35);
	}

.hero-btn-outline {
	color: #fff;
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.10);
	backdrop-filter: blur(16px);
}

	.hero-btn-outline:hover {
		background: rgba(255,255,255,.08);
		color: #fff;
	}
/* ==========================================================
   HERO V4 PREMIUM
   BÖLÜM 2
   RIGHT SIDE + VIDEO PANEL
========================================================== */

/* ===========================
            RIGHT
=========================== */

.hero-right {
	position: relative;
	width: 56%;
	min-height: 620px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	overflow: visible;
	animation: heroRight .8s ease;
}

	/* ===========================
        BACK LIGHT
=========================== */

	.hero-right::before {
		content: "";
		position: absolute;
		width: 760px;
		height: 760px;
		right: -120px;
		top: 50%;
		transform: translateY(-50%);
		border-radius: 50%;
		background: radial-gradient( circle, rgba(46,230,214,.16), transparent 72% );
		filter: blur(60px);
		animation: heroGlow 14s linear infinite;
		z-index: 0;
	}

	.hero-right::after {
		content: "";
		position: absolute;
		width: 520px;
		height: 520px;
		right: 70px;
		top: 50%;
		transform: translateY(-50%);
		border-radius: 50%;
		background: radial-gradient( circle, rgba(8,191,255,.12), transparent 75% );
		filter: blur(45px);
		z-index: 0;
	}

/* ===========================
        VIDEO PANEL
=========================== */

.hero-video-panel {
	position: relative;
	width: 100%;
	max-width: 760px;
	height: 510px;
	margin-left: -35px;
	overflow: visible;
	border-radius: 36px;
	background: linear-gradient( 180deg, rgba(24,32,48,.30), rgba(10,15,24,.58) );
	border: 1px solid rgba(255,255,255,.10);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	box-shadow: 0 35px 90px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
}

	/* ÜST CAM EFEKTİ */

	.hero-video-panel::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 36px;
		background: linear-gradient( 180deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 35%, rgba(255,255,255,0) );
		pointer-events: none;
		z-index: 2;
	}

	/* İNCE DIŞ PARLAMA */

	.hero-video-panel::after {
		content: "";
		position: absolute;
		inset: -1px;
		border-radius: 36px;
		border: 1px solid rgba(46,230,214,.12);
		box-shadow: 0 0 35px rgba(46,230,214,.10);
		pointer-events: none;
		z-index: 3;
	}

/* ===========================
            VIDEO
=========================== */

.hero-bg-video {
	position: absolute;
	top: 12px;
	left: 12px;
	right: 12px;
	bottom: 12px;
	width: calc(100% - 24px);
	height: calc(100% - 24px);
	object-fit: cover;
	border-radius: 28px;
	z-index: 1;
}

/* ===========================
        VIDEO INFO
=========================== */

.hero-video {
	position: absolute;
	right: -45px;
	bottom: -28px;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px 28px;
	border-radius: 24px;
	background: rgba(16,24,38,.78);
	backdrop-filter: blur(28px);
	-webkit-backdrop-filter: blur(28px);
	border: 1px solid rgba(255,255,255,.14);
	box-shadow: 0 22px 60px rgba(0,0,0,.45), 0 0 30px rgba(46,230,214,.08);
	z-index: 100;
	transition: .35s ease;
}

	.hero-video:hover {
		transform: translateY(-4px);
	}

	.hero-video button {
		width: 58px;
		height: 58px;
		border: none;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		background: linear-gradient( 135deg, #2EE6D6, #08BFFF );
		color: #04131D;
		font-size: 22px;
		transition: .35s;
	}

		.hero-video button:hover {
			transform: scale(1.08);
		}

	.hero-video span {
		display: block;
		color: #BFCADA;
		font-size: 13px;
	}

	.hero-video strong {
		display: block;
		color: #fff;
		font-size: 18px;
		margin-top: 3px;
	}
/* ==========================================================
   HERO V4 PREMIUM
   BÖLÜM 3
   ANIMATIONS + EFFECTS
========================================================== */

/* ===========================
        CONTENT ANIMATION
=========================== */

.hero-left {
	animation: heroLeft .8s ease;
}

.hero-right {
	animation: heroRight .8s ease;
}

@keyframes heroLeft {

	from {
		opacity: 0;
		transform: translateX(-45px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes heroRight {

	from {
		opacity: 0;
		transform: translateX(45px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* ===========================
        GLOW ROTATION
=========================== */

@keyframes heroGlow {

	0% {
		transform: translateY(-50%) rotate(0deg) scale(1);
	}

	50% {
		transform: translateY(-50%) rotate(180deg) scale(1.05);
	}

	100% {
		transform: translateY(-50%) rotate(360deg) scale(1);
	}
}

/* ===========================
        VIDEO FLOAT
=========================== */

.hero-video-panel {
	animation: videoFloat 7s ease-in-out infinite;
}

@keyframes videoFloat {

	0% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-8px);
	}

	100% {
		transform: translateY(0px);
	}
}

/* ===========================
        PANEL GLOW
=========================== */

.hero-video-panel {
	transition: transform .45s ease, box-shadow .45s ease;
}

	.hero-video-panel:hover {
		transform: translateY(-6px);
		box-shadow: 0 45px 95px rgba(0,0,0,.50), 0 0 55px rgba(46,230,214,.10), inset 0 1px 0 rgba(255,255,255,.08);
	}

/* ===========================
        VIDEO ZOOM
=========================== */

.hero-bg-video {
	transition: transform 8s linear;
}

.hero-video-panel:hover .hero-bg-video {
	transform: scale(1.05);
}

/* ===========================
        PLAY BUTTON
=========================== */

.hero-video button {
	position: relative;
	overflow: hidden;
}

	.hero-video button::before {
		content: "";
		position: absolute;
		inset: -2px;
		border-radius: 50%;
		border: 2px solid rgba(255,255,255,.18);
		animation: playPulse 2s infinite;
	}

@keyframes playPulse {

	0% {
		transform: scale(1);
		opacity: 1;
	}

	100% {
		transform: scale(1.45);
		opacity: 0;
	}
}

/* ===========================
        BUTTON SHINE
=========================== */

.hero-btn {
	position: relative;
}

	.hero-btn::before {
		content: "";
		position: absolute;
		left: -120%;
		top: 0;
		width: 120%;
		height: 100%;
		background: linear-gradient( 90deg, transparent, rgba(255,255,255,.35), transparent );
		transition: .7s;
	}

	.hero-btn:hover::before {
		left: 120%;
	}

/* ===========================
        CARD HOVER
=========================== */

.hero-video {
	transition: transform .35s ease, box-shadow .35s ease;
}

	.hero-video:hover {
		transform: translateY(-6px) scale(1.02);
		box-shadow: 0 28px 65px rgba(0,0,0,.55), 0 0 35px rgba(46,230,214,.12);
	}
/* ==========================================================
   HERO V4 PREMIUM
   BÖLÜM 4
   RESPONSIVE
========================================================== */

@media (max-width:1400px) {

	.hero-wrapper {
		gap: 24px;
	}

	.hero-left {
		width: 45%;
	}

	.hero-right {
		width: 55%;
	}

	.hero-video-panel {
		max-width: 700px;
		height: 470px;
	}
}

@media (max-width:1200px) {

	.hero-wrapper {
		gap: 20px;
	}

	.hero-title {
		font-size: 50px;
	}

	.hero-description {
		width: 100%;
		font-size: 17px;
	}

	.hero-video-panel {
		max-width: 620px;
		height: 430px;
	}

	.hero-video {
		right: -20px;
		bottom: -20px;
	}
}

@media (max-width:992px) {

	.hero-section {
		padding-top: 120px;
	}

	.hero-wrapper {
		flex-direction: column;
		text-align: center;
		min-height: auto;
	}

	.hero-left {
		width: 100%;
		order: 2;
	}

	.hero-right {
		width: 100%;
		order: 1;
		justify-content: center;
		min-height: auto;
		margin-bottom: 40px;
	}

	.hero-buttons {
		justify-content: center;
	}

	.hero-badge {
		margin-left: auto;
		margin-right: auto;
	}

	.hero-video-panel {
		margin-left: 0;
		max-width: 720px;
		width: 100%;
		height: 420px;
	}

	.hero-video {
		right: 20px;
		bottom: 20px;
	}
}

@media (max-width:768px) {

	.hero-section {
		min-height: auto;
	}

	.hero-title {
		font-size: 40px;
	}

	.hero-description {
		font-size: 16px;
	}

	.hero-buttons {
		flex-direction: column;
	}

	.hero-btn {
		width: 100%;
	}

	.hero-video-panel {
		height: 340px;
		border-radius: 26px;
	}

	.hero-bg-video {
		border-radius: 20px;
	}

	.hero-video {
		position: absolute;
		right: 15px;
		bottom: 15px;
		transform: scale(.92);
		transform-origin: right bottom;
	}
}

@media (max-width:576px) {

	.hero-section {
		padding-top: 105px;
	}

	.hero-title {
		font-size: 32px;
		line-height: 1.15;
	}

	.hero-description {
		font-size: 15px;
	}

	.hero-badge {
		padding: 9px 16px;
	}

		.hero-badge p {
			font-size: 11px;
			letter-spacing: 1px;
		}

	.hero-video-panel {
		height: 270px;
		border-radius: 22px;
	}

	.hero-bg-video {
		border-radius: 16px;
	}

	.hero-video {
		transform: scale(.82);
		right: 8px;
		bottom: 8px;
	}
}
/* ==========================================================
   HERO V4 PREMIUM
   BÖLÜM 5
   FINE TUNING
========================================================== */

/* Video paneli daha canlı */

.hero-video-panel {
	transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}

	.hero-video-panel:hover {
		transform: translateY(-8px);
		border-color: rgba(46,230,214,.20);
		box-shadow: 0 45px 90px rgba(0,0,0,.45), 0 0 60px rgba(46,230,214,.10), inset 0 1px 0 rgba(255,255,255,.08);
	}

/* Video biraz daha canlı */

.hero-bg-video {
	filter: brightness(1.02) contrast(1.05) saturate(1.08);
}

/* Play kartı */

.hero-video {
	transition: transform .35s, box-shadow .35s, background .35s;
}

	.hero-video:hover {
		background: rgba(18,28,45,.88);
		transform: translateY(-6px);
	}

	/* Buton */

	.hero-video button {
		box-shadow: 0 0 25px rgba(46,230,214,.28);
	}

		.hero-video button:hover {
			box-shadow: 0 0 40px rgba(46,230,214,.45);
		}

/* Başlık */

.hero-title {
	text-wrap: balance;
}

/* Açıklama */

.hero-description {
	max-width: 560px;
}