/**
 * Hero bölümü (ana sayfa).
 * Yalnızca .gma-hero kapsamındadır; diğer bölümlere dokunmaz. home.css ve responsive.css'ten sonra yüklenir.
 * Sol: metin + butonlar + partner rozetleri. Sağ: HTML/CSS ile kurulmuş panel/laptop kompozisyonu.
 */
.gma-hero {
	position: relative;
	padding: 72px 0 64px;
	background:
		radial-gradient(60% 70% at 78% 38%, #DCEBFF 0%, rgba(220, 235, 255, 0) 70%),
		linear-gradient(180deg, #FFFFFF 0%, #F3F8FE 100%);
	overflow-x: clip;
}
.gma-hero .gma-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px;
	align-items: center;
}
.gma-hero__text { min-width: 0; }
.gma-hero__eyebrow {
	margin: 0 0 18px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: #6B7F99;
}
.gma-hero .gma-hero__title {
	font-size: clamp(34px, 3.75vw, 56px);
	line-height: 1.08;
	letter-spacing: -0.02em;
	font-weight: 800;
	color: #0B1B33;
	margin: 0 0 22px;
	overflow-wrap: break-word;
}
.gma-hero__em { color: #0B63E5; }
.gma-hero .gma-hero__desc {
	max-width: 520px;
	font-size: clamp(16px, 1.45vw, 19px);
	line-height: 1.6;
	color: #5B6B82;
	margin: 0 0 30px;
}
.gma-hero .gma-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.gma-hero .gma-hero__actions .gma-btn {
	padding: 16px 26px;
	font-size: 15px;
	border-radius: 12px;
	min-height: 52px;
	border-width: 1.5px;
}
.gma-hero .gma-btn--primary { box-shadow: 0 10px 24px -8px rgba(10, 59, 107, 0.55); }
.gma-hero .gma-partners { margin-top: 26px; gap: 12px; }
.gma-hero .gma-partners__text {
	padding: 11px 20px;
	font-size: 14px;
	background: rgba(255, 255, 255, 0.85);
	box-shadow: 0 6px 16px -8px rgba(10, 59, 107, 0.3);
}
.gma-hero .gma-partners__text .gma-icon { color: #0B63E5; width: 20px; height: 20px; }

.gma-hero .gma-hero__visual {
	min-width: 0;
	container-type: inline-size;
	display: block;
}
.gma-hero .gma-hero__img { width: 100%; max-width: 100%; height: auto; border-radius: 20px; }

/* ---------- Panel / laptop kompozisyonu (1em = sahne genişliğinin %1'i) ---------- */
.gma-scene {
	position: relative;
	width: 100%;
	aspect-ratio: 100 / 88;
	font-size: 6px; /* cqw desteklemeyen tarayıcılar için yedek */
	font-size: 1cqw;
	color: #0A2A52;
	font-family: var(--gma-font);
	pointer-events: none;
	user-select: none;
}
.gma-scene * { box-sizing: border-box; }
.gma-scene svg.gma-icon { width: 1.9em; height: 1.9em; }

.gma-scene__glow { position: absolute; inset: 8% 4% 6% 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(29, 123, 255, 0.22), rgba(29, 123, 255, 0)); }
.gma-scene__ring { position: absolute; left: 6%; top: 18%; width: 92%; height: 66%; border-radius: 50%; border: 0.2em solid rgba(29, 123, 255, 0.22); transform: rotate(-12deg); }
.gma-scene__cube { position: absolute; left: 66%; top: 3%; width: 7em; height: 7em; border-radius: 1.8em; background: linear-gradient(145deg, #A8D0FF, #4F9BFF); opacity: 0.8; box-shadow: 0 1.6em 3em -1em rgba(29, 123, 255, 0.5); transform: rotate(12deg); }

.gma-scene__laptop {
	position: absolute;
	left: 14em; top: 12em; width: 68em;
	transform: perspective(170em) rotateY(-16deg) rotateX(5deg) rotateZ(-2.5deg);
	transform-origin: 50% 60%;
}
.gma-scene__screen {
	display: flex;
	height: 42em;
	padding: 1em;
	border-radius: 2.2em;
	background: linear-gradient(160deg, #1B3A66, #0A1F3D);
	box-shadow: 0 3em 5em -1.5em rgba(10, 42, 82, 0.45), 0 0 0 0.25em #3B5784 inset;
	overflow: hidden;
}
.gma-scene__side {
	flex: 0 0 14em;
	padding: 2em 1.2em;
	border-radius: 1.4em 0 0 1.4em;
	background: linear-gradient(180deg, #0F2C55, #0A2244);
	display: flex; flex-direction: column; gap: 1em;
	font-size: 1em;
}
.gma-scene__brand { display: flex; align-items: center; gap: 0.8em; margin-bottom: 1.6em; color: #fff; }
.gma-scene__brand i { width: 2.6em; height: 2.6em; border-radius: 0.8em; background: linear-gradient(145deg, #4F9BFF, #1D7BFF); }
.gma-scene__brand b { font-size: 1.6em; font-weight: 800; letter-spacing: 0.04em; }
.gma-scene__nav { display: flex; align-items: center; gap: 0.7em; padding: 0.9em 0.8em; border-radius: 0.9em; font-size: 1.45em; font-weight: 600; color: #A9C0E2; white-space: nowrap; }
.gma-scene__nav svg.gma-icon { width: 1.3em; height: 1.3em; flex: 0 0 auto; }
.gma-scene__nav.is-on { background: #1D5FD0; color: #fff; }
.gma-scene__main { flex: 1; min-width: 0; padding: 2em 2em 1.6em; background: #F5F9FE; border-radius: 0 1.4em 1.4em 0; display: flex; flex-direction: column; }
.gma-scene__main-head { display: flex; align-items: center; gap: 0.8em; font-size: 1.7em; margin-bottom: 1em; }
.gma-scene__main-head b { margin-right: auto; font-weight: 700; color: #0A2A52; white-space: nowrap; }
.gma-scene__pill { width: 3.6em; height: 0.8em; border-radius: 1em; }
.gma-scene__pill.is-blue { background: #1D7BFF; }
.gma-scene__pill.is-green { background: #3FD0A0; }
.gma-scene__chart { flex: 1; width: 100%; min-height: 0; }
.gma-scene__base {
	height: 3.4em; margin: -0.2em -4em 0;
	border-radius: 0 0 3em 3em / 0 0 2em 2em;
	background: linear-gradient(180deg, #E8EEF6, #A9B9CD);
	box-shadow: 0 2.4em 3.4em -1em rgba(10, 42, 82, 0.4);
}

.gma-scene__card {
	position: absolute;
	padding: 1.8em;
	border-radius: 2.2em;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 2.4em 4em -1.4em rgba(10, 42, 82, 0.35), 0 0 0 0.15em rgba(255, 255, 255, 0.9) inset;
	backdrop-filter: blur(4px);
}
.gma-scene__card-title { display: flex; align-items: center; gap: 0.7em; font-size: 2.1em; font-weight: 700; color: #0A2A52; margin-bottom: 0.9em; white-space: nowrap; }
.gma-scene__card-title svg.gma-icon { width: 1.3em; height: 1.3em; color: #1D7BFF; }
.gma-scene__txt { display: flex; flex-direction: column; gap: 0.3em; min-width: 0; }
.gma-scene__txt b { display: flex; align-items: center; gap: 0.5em; font-size: 2.2em; font-weight: 800; color: #0A2A52; line-height: 1.1; }
.gma-scene__txt small { font-size: 1.55em; font-weight: 500; color: #5B6B82; white-space: nowrap; }
.gma-scene__ico { display: inline-flex; align-items: center; justify-content: center; width: 6em; height: 6em; border-radius: 1.6em; flex: 0 0 auto; }
.gma-scene__ico svg.gma-icon { width: 3.4em; height: 3.4em; }
.gma-scene__ico.is-blue { background: #E4F0FF; color: #1D7BFF; }
.gma-scene__ico.is-indigo { background: #E7EBFF; color: #3558F0; }
.gma-scene__bars { display: flex; align-items: flex-end; gap: 0.7em; margin-left: auto; height: 4.6em; }
.gma-scene__bars i { width: 1.3em; border-radius: 0.5em; background: #4F9BFF; }
.gma-scene__bars i:nth-child(1) { height: 40%; opacity: 0.5; }
.gma-scene__bars i:nth-child(2) { height: 70%; opacity: 0.75; }
.gma-scene__bars i:nth-child(3) { height: 100%; }

.gma-scene__card--google { left: 4em; top: 1em; width: 37em; display: flex; align-items: center; gap: 1.4em; transform: perspective(120em) rotateY(-12deg) rotateZ(-2deg); }
.gma-scene__card--meta { right: 1em; top: 9em; width: 34em; display: flex; align-items: center; gap: 1.4em; transform: perspective(120em) rotateY(-16deg) rotateZ(2deg); }
.gma-scene__card--strategy { left: 1em; top: 50em; width: 27em; transform: perspective(120em) rotateY(-14deg) rotateZ(-3deg); }
.gma-scene__card--strategy ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9em; font-size: 1.7em; font-weight: 600; color: #3E4F68; }
.gma-scene__card--strategy li { display: flex; align-items: center; gap: 0.7em; }
.gma-scene__card--strategy li svg.gma-icon { width: 1.5em; height: 1.5em; padding: 0.25em; border-radius: 50%; background: #2EC38B; color: #fff; stroke-width: 3; }
.gma-scene__card--journey { left: 20em; top: 57em; width: 46em; transform: perspective(120em) rotateY(-12deg) rotateZ(-2deg); }
.gma-scene__steps { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; font-size: 1.4em; font-weight: 600; color: #3E4F68; }
.gma-scene__steps span { display: flex; flex-direction: column; align-items: center; gap: 0.7em; white-space: nowrap; }
.gma-scene__steps i { display: inline-flex; align-items: center; justify-content: center; width: 3.6em; height: 3.6em; border-radius: 50%; background: #EAF3FF; color: #1D7BFF; box-shadow: 0 0.8em 1.6em -0.6em rgba(29, 123, 255, 0.5); }
.gma-scene__steps i.is-green { background: #E3F8EF; color: #1FAE76; }
.gma-scene__steps i svg.gma-icon { width: 1.9em; height: 1.9em; }
.gma-scene__steps em { flex: 1; height: 0.2em; margin-bottom: 2.6em; background: linear-gradient(90deg, #8DB8FF, #4F9BFF); border-radius: 1em; }
.gma-scene__card--audience { right: 0; top: 33em; width: 26em; transform: perspective(120em) rotateY(-16deg) rotateZ(2deg); }
.gma-scene__aud { display: flex; align-items: center; gap: 1.4em; margin-bottom: 1em; }
.gma-scene__donut { flex: 0 0 8em; width: 8em; height: 8em; border-radius: 50%; background: conic-gradient(#1D7BFF 0 45%, #38C3F0 45% 70%, #2EC38B 70% 88%, #E4ECF7 88% 100%); -webkit-mask: radial-gradient(closest-side, transparent 58%, #000 60%); mask: radial-gradient(closest-side, transparent 58%, #000 60%); }
.gma-scene__lines { display: grid; gap: 0.9em; flex: 1; }
.gma-scene__lines i { height: 0.9em; border-radius: 1em; background: #DCE7F5; }
.gma-scene__lines i:nth-child(2) { width: 75%; }
.gma-scene__lines i:nth-child(3) { width: 55%; }
.gma-scene__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6em; font-size: 1.45em; font-weight: 600; color: #3E4F68; }
.gma-scene__legend li::before { content: ""; display: inline-block; width: 0.8em; height: 0.8em; border-radius: 50%; margin-right: 0.7em; vertical-align: 0.05em; }
.gma-scene__legend .c1::before { background: #1D7BFF; }
.gma-scene__legend .c2::before { background: #38C3F0; }
.gma-scene__legend .c3::before { background: #2EC38B; }
.gma-scene__card--report { right: 3em; top: 62em; width: 28em; transform: perspective(120em) rotateY(-16deg) rotateZ(2deg); }
.gma-scene__card--report .gma-scene__txt { margin-bottom: 1em; }
.gma-scene__card--report .gma-scene__txt b svg.gma-icon { width: 1.2em; height: 1.2em; color: #1D7BFF; }
.gma-scene__prog { display: block; height: 1.1em; margin-bottom: 0.9em; border-radius: 1em; background: #E4ECF7; overflow: hidden; width: 70%; }
.gma-scene__prog i { display: block; height: 100%; border-radius: 1em; background: linear-gradient(90deg, #1D7BFF, #4F9BFF); }
.gma-scene__up { position: absolute; right: 1.6em; bottom: 2em; display: inline-flex; align-items: center; justify-content: center; width: 6em; height: 6em; border-radius: 50%; background: linear-gradient(145deg, #3FD0A0, #1FAE76); color: #fff; box-shadow: 0 1.2em 2em -0.6em rgba(31, 174, 118, 0.6); }
.gma-scene__up svg.gma-icon { width: 3em; height: 3em; }
.gma-scene__tile { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 9em; height: 9em; border-radius: 2.4em; background: rgba(255, 255, 255, 0.95); color: #1D7BFF; box-shadow: 0 2em 3em -1.2em rgba(10, 42, 82, 0.4); }
.gma-scene__tile svg.gma-icon { width: 4.6em; height: 4.6em; }
.gma-scene__tile--target { left: 45em; top: 76em; width: 10em; height: 10em; }
.gma-scene__tile--chart { left: 22em; top: 77em; width: 8em; height: 8em; }
.gma-scene__tile--users { right: 0; top: 78em; width: 8em; height: 8em; }

/* ---------- Tablet ve mobil: tek sütun ---------- */
@media (max-width: 1023px) {
	.gma-hero { padding: 48px 0 40px; }
	.gma-hero .gma-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.gma-hero .gma-hero__title { font-size: clamp(32px, 7vw, 48px); }
	.gma-hero .gma-hero__desc { max-width: 640px; }
	.gma-hero .gma-hero__visual { max-width: 560px; width: 100%; margin: 0 auto; }
}
@media (max-width: 599px) {
	.gma-hero { padding: 24px 0 28px; }
	.gma-hero .gma-hero__grid { gap: 22px; }
	.gma-hero__eyebrow { font-size: 10.5px; letter-spacing: 0.18em; margin-bottom: 10px; }
	.gma-hero .gma-hero__title { font-size: clamp(29px, 8.6vw, 36px); margin-bottom: 14px; }
	.gma-hero .gma-hero__desc { font-size: 15.5px; line-height: 1.55; margin-bottom: 20px; }
	.gma-hero .gma-hero__actions { flex-direction: column; gap: 10px; }
	.gma-hero .gma-hero__actions .gma-btn { width: 100%; min-height: 50px; padding: 13px 20px; font-size: 15px; }
	/* Rozetler: yan yana sığarsa yan yana, sığmazsa alt alta */
	.gma-hero .gma-partners { margin-top: 16px; gap: 8px; justify-content: flex-start; }
	.gma-hero .gma-partners__item { flex: 0 1 auto; min-width: 0; }
	.gma-hero .gma-partners__text { padding: 8px 12px; font-size: 12.5px; gap: 6px; white-space: nowrap; }
	.gma-hero .gma-partners__text .gma-icon { width: 16px; height: 16px; }

	/* Sahne: yalnızca ana panel + Google Ads + Meta Ads öncelikli; küçük ayrıntılar gizlenir */
	.gma-scene { aspect-ratio: 100 / 74; }
	.gma-scene__card--strategy, .gma-scene__card--journey, .gma-scene__card--audience, .gma-scene__card--report,
	.gma-scene__tile--chart, .gma-scene__tile--users, .gma-scene__cube { display: none; }
	.gma-scene__ring { top: 22%; height: 62%; }
	.gma-scene__laptop { left: 5em; top: 15em; width: 90em; }
	.gma-scene__screen { height: 52em; }
	.gma-scene__side { flex-basis: 17em; padding: 2.4em 1.4em; gap: 1.2em; }
	.gma-scene__nav:nth-of-type(n+4) { display: none; }
	.gma-scene__card--google, .gma-scene__card--meta { font-size: 1.32em; padding: 1.4em; border-radius: 1.8em; }
	.gma-scene__card--google { left: 1%; top: 0; width: 47%; transform: perspective(120em) rotateY(-10deg) rotateZ(-2deg); }
	.gma-scene__card--meta { right: 1%; left: auto; top: 12%; width: 47%; transform: perspective(120em) rotateY(-12deg) rotateZ(2deg); }
	.gma-scene__card--google .gma-scene__bars, .gma-scene__card--meta .gma-scene__bars { display: none; }
	.gma-scene__card--google .gma-scene__ico, .gma-scene__card--meta .gma-scene__ico { width: 5em; height: 5em; }
	.gma-scene__card--google .gma-scene__ico svg.gma-icon, .gma-scene__card--meta .gma-scene__ico svg.gma-icon { width: 2.8em; height: 2.8em; }
	.gma-scene__tile--target { left: auto; right: 12%; top: 61em; width: 9em; height: 9em; }
}