/*
 * Mobil oyun sayfası: hero'daki masal dünyasını (gökyüzü, yüzen adalar,
 * altın paralar, kesikli yollar) alt bölümlere taşır.
 * Yalnızca page-mobile-games.php şablonunda yüklenir.
 */
.games-page {
	--g-sky: #dbeafb;
	--g-sky-soft: #eaf3fc;
	--g-cream: #f8f3e6;
	--g-meadow: #eff5e7;
	--g-grass: #5cbf78;
	--g-grass-deep: #2f8f68;
	--g-soil: #8d6a42;
	--g-coin-deep: #c9962c;
	--g-path: rgba(21, 94, 239, .3);
	--g-card-shadow: 0 26px 40px -30px rgba(20, 42, 68, .55), 0 10px 24px -18px rgba(20, 42, 68, .18);
	--g-coin: radial-gradient(circle at 34% 30%, #fff6c8 0 16%, #f6dc78 42%, #e3b645 100%);
	--g-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48V24C120 6 240 6 360 22s240 18 360 2 240-18 360-2 240 18 360 0V48Z'/%3E%3C/svg%3E");
	background: var(--g-cream);
}

/* ---------- Bölüm zeminleri ve dalgalı geçişler ---------- */
.games-page > .section {
	position: relative;
	isolation: isolate;
	border-block: 0;
}
.games-page > .section::before {
	position: absolute;
	right: 0;
	bottom: calc(100% - 1px);
	left: 0;
	height: clamp(22px, 3.4vw, 48px);
	content: "";
	pointer-events: none;
	background: var(--g-top);
	-webkit-mask: var(--g-wave) center bottom / 100% 100% no-repeat;
	mask: var(--g-wave) center bottom / 100% 100% no-repeat;
}
.games-page .games-capabilities { --g-top: var(--g-cream); background: linear-gradient(180deg, var(--g-cream) 0%, var(--g-meadow) 100%); }
.games-page .service-types { --g-top: var(--g-sky); background: linear-gradient(180deg, var(--g-sky) 0%, var(--g-sky-soft) 100%); }
.games-page .service-included { --g-top: var(--g-meadow); background: linear-gradient(180deg, var(--g-meadow) 0%, var(--g-cream) 100%); }
.games-page .games-process { --g-top: var(--g-sky); background: linear-gradient(180deg, var(--g-sky) 0%, var(--g-sky-soft) 100%); }
.games-page .games-faq { --g-top: var(--g-cream); background: linear-gradient(180deg, var(--g-cream) 0%, #f3eedf 100%); }
.games-page .games-contact {
	--g-top: var(--g-sky);
	padding-bottom: calc(clamp(76px, 10vw, 130px) + clamp(50px, 7vw, 100px));
	background: linear-gradient(180deg, var(--g-sky) 0%, var(--g-sky-soft) 55%, #eef6e6 100%);
}

/* Hero'nun göl kıyısı: köpük çizgisi */
.games-page .page-hero--play::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	display: block;
	height: calc(clamp(22px, 3.4vw, 48px) + 9px);
	content: "";
	pointer-events: none;
	background: rgba(255, 255, 255, .6);
	-webkit-mask: var(--g-wave) center bottom / 100% 100% no-repeat;
	mask: var(--g-wave) center bottom / 100% 100% no-repeat;
}

/* Gökyüzü bölümlerinde bulutlar */
.games-page .service-types::after,
.games-page .games-process::after,
.games-page .games-contact .container::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	content: "";
	pointer-events: none;
	background:
		radial-gradient(58px 30px at 86% 16%, #fff 98%, #fff0 100%),
		radial-gradient(40px 26px at 83% 12%, #fff 98%, #fff0 100%),
		radial-gradient(46px 24px at 90% 18%, #fff 98%, #fff0 100%),
		radial-gradient(38px 20px at 58% 9%, rgba(255, 255, 255, .85) 98%, #fff0 100%),
		radial-gradient(28px 18px at 56.5% 7%, rgba(255, 255, 255, .85) 98%, #fff0 100%),
		radial-gradient(30px 16px at 60% 10%, rgba(255, 255, 255, .85) 98%, #fff0 100%);
	animation: games-drift 28s ease-in-out infinite alternate;
}
.games-page .games-contact .container { position: relative; }
.games-page .games-contact .container::before { inset: -40px -60px; }

/* Ortak "çimenli ada" başlığı */
.games-page .service-capabilities__list li::before,
.games-page .service-included__list::before,
.games-page .games-contact .contact-form-panel::before {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 20px;
	content: "";
	pointer-events: none;
	background:
		radial-gradient(circle at 50% 0, var(--grass, var(--g-grass)) 8px, transparent 8.5px) 0 5px / 20px 14px repeat-x,
		linear-gradient(var(--grass, var(--g-grass)), var(--grass, var(--g-grass))) 0 0 / 100% 7px no-repeat;
}

.games-page .pressgpt-pipeline.service-capabilities__list li,
.games-page .service-included__list,
.games-page .games-contact .contact-form-panel { overflow: hidden; }

/* Altın para rozeti */
.games-page .service-capabilities__list .pressgpt-pipeline__step small,
.games-page .games-process .process-list span {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	color: #7a5230;
	background: var(--g-coin);
	box-shadow: inset 0 0 0 3px rgba(201, 150, 44, .5), 0 4px 0 var(--g-coin-deep), 0 8px 14px -6px rgba(122, 82, 48, .45);
	font: 800 .76rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
	letter-spacing: 0;
}

/* ---------- 1) Neler yapıyoruz: yüzen adalar ---------- */
.games-page .pressgpt-pipeline.service-capabilities__list {
	position: relative;
	gap: clamp(16px, 2vw, 26px);
	overflow: visible;
	padding-top: 8px;
	border: 0;
	background: none;
	box-shadow: none;
}
.games-page .pressgpt-pipeline.service-capabilities__list::before {
	position: absolute;
	top: 56%;
	right: 8%;
	left: 8%;
	z-index: 0;
	border-top: 3px dashed var(--g-path);
	content: "";
}
.games-page .pressgpt-pipeline.service-capabilities__list li {
	z-index: 1;
	padding: 38px 24px 26px;
	border: 0;
	border-radius: 24px;
	background: #fff;
	box-shadow: var(--g-card-shadow);
	animation: games-bob 6s ease-in-out infinite;
}
.games-page .pressgpt-pipeline.service-capabilities__list li::after { display: none; }
.games-page .pressgpt-pipeline.service-capabilities__list li:nth-child(2) { --grass: #4eae72; animation-delay: -1.5s; }
.games-page .pressgpt-pipeline.service-capabilities__list li:nth-child(3) { --grass: #7dcc96; animation-delay: -3s; }
.games-page .pressgpt-pipeline.service-capabilities__list li:nth-child(4) { --grass: #49a56e; animation-delay: -4.5s; }
.games-page .pressgpt-pipeline.service-capabilities__list li:hover { background: #fff; animation-play-state: paused; }
.games-page .service-capabilities__list .card__icon {
	border-color: rgba(47, 143, 104, .22);
	border-radius: 50%;
	color: var(--g-grass-deep);
	background: #e4f5ea;
}
.games-page .pressgpt-pipeline.service-capabilities__list li:hover .card__icon {
	border-color: var(--g-grass-deep);
	color: #fff;
	background: var(--g-grass-deep);
}
.games-page .service-capabilities__list h3 { font-size: 1.05rem; }

/* ---------- 2) Hangi oyunlar: çiçekli kartlar ---------- */
.games-page .services-approach__grid--four {
	gap: clamp(16px, 2vw, 22px);
	overflow: visible;
	border: 0;
	background: none;
}
.games-page .services-approach__grid--four article {
	--petal: #f2a0bc;
	--heart: #ffe08a;
	position: relative;
	padding: 72px 24px 26px;
	border: 0;
	border-radius: 24px;
	background: rgba(255, 255, 255, .9);
	box-shadow: 0 24px 40px -30px rgba(30, 70, 120, .55), inset 0 0 0 1px rgba(255, 255, 255, .9);
	transition: translate .3s cubic-bezier(.22, 1, .36, 1), rotate .3s cubic-bezier(.22, 1, .36, 1), background .2s;
}
.games-page .services-approach__grid--four article:nth-child(2) { --petal: #f4b07a; --heart: #ffe8c4; }
.games-page .services-approach__grid--four article:nth-child(3) { --petal: #cbb6f0; --heart: #fff4c8; }
.games-page .services-approach__grid--four article:nth-child(4) { --petal: #8fd4c4; --heart: #fff6d0; }
.games-page .services-approach__grid--four article:hover { translate: 0 -6px; rotate: -1deg; background: #fff; }
.games-page .services-approach__grid--four article:nth-child(even):hover { rotate: 1deg; }
.games-page .services-approach__grid--four article::before {
	position: absolute;
	top: 22px;
	right: 22px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	content: "";
	background: radial-gradient(circle, var(--heart) 0 26%, var(--petal) 29% 100%);
	box-shadow: 0 0 0 7px color-mix(in srgb, var(--petal) 28%, transparent);
}
.games-page .services-approach__grid--four span {
	position: absolute;
	top: 24px;
	left: 24px;
	margin: 0;
	padding: 6px 11px;
	border-radius: 999px;
	color: var(--g-ink, #10243e);
	background: color-mix(in srgb, var(--petal) 38%, #fff);
	font-size: .68rem;
	letter-spacing: .06em;
}
.games-page .services-approach__grid--four h3 { font-size: 1.08rem; }

/* ---------- 3) Olmazsa olmazlar: toplanan yapraklar ---------- */
.games-page .service-included__list {
	position: relative;
	gap: 16px 26px;
	padding: 46px 30px 30px;
	border: 0;
	border-radius: 26px;
	background: #fff;
	box-shadow: var(--g-card-shadow);
}
.games-page .service-included__list li { padding-left: 36px; }
.games-page .service-included__list li::before {
	top: -1px;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	color: #fff;
	background: var(--g-grass);
	box-shadow: 0 3px 0 var(--g-grass-deep);
	font-size: .7rem;
}

/* ---------- 4) Süreç: seviye haritası ---------- */
.games-page .games-process .process-list {
	position: relative;
	border: 0;
	background: none;
}
.games-page .games-process .process-list li {
	position: relative;
	gap: 18px;
	padding: 10px 22px 10px 10px;
	border: 0;
	border-radius: 20px;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 18px 30px -24px rgba(30, 70, 120, .55);
	transition: translate .25s cubic-bezier(.22, 1, .36, 1);
}
.games-page .games-process .process-list li + li { margin-top: 22px; }
.games-page .games-process .process-list li + li::before {
	position: absolute;
	top: -26px;
	left: 28.5px;
	height: 30px;
	border-left: 3px dashed var(--g-path);
	content: "";
}
.games-page .games-process .process-list li:hover { translate: 4px 0; }
.games-page .games-process .process-list li:last-child span {
	color: #fff;
	background: radial-gradient(circle at 34% 30%, #a8e6b8 0 14%, #5cbf78 46%, #2f8f68 100%);
	box-shadow: inset 0 0 0 3px rgba(31, 107, 85, .35), 0 4px 0 #1f6b55, 0 8px 14px -6px rgba(31, 107, 85, .5);
}

/* ---------- 5) SSS ---------- */
.games-page .games-faq .faq-list--compact details {
	border-color: rgba(141, 106, 66, .14);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 14px 26px -24px rgba(20, 42, 68, .5);
}
.games-page .games-faq .faq-list--compact details[open] {
	border-color: rgba(47, 143, 104, .45);
	box-shadow: 0 20px 34px -26px rgba(31, 107, 85, .55);
}
.games-page .games-faq .faq-list--compact summary i {
	border-color: rgba(201, 150, 44, .35);
	color: #9a6b12;
	background: #fff1c2;
}
.games-page .games-faq .faq-list--compact details[open] summary i {
	border-color: var(--g-grass-deep);
	color: #fff;
	background: var(--g-grass-deep);
}

/* ---------- 6) İletişim: çimenli tepeler footer'a iner ---------- */
.games-page .games-contact::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	height: clamp(56px, 8vw, 116px);
	content: "";
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23a9dcb4' d='M0 64C170 22 330 18 520 56s350 58 540 14 300-40 380-18V120H0Z'/%3E%3Cpath fill='%237dcc96' d='M0 88c200-36 390-40 610-6s420 40 620 4c90-16 160-18 210-10V120H0Z'/%3E%3Cpath fill='%235cbf78' d='M0 108c260-22 520-24 760-8s460 16 680-4V120H0Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}
.games-page .games-contact .contact-form-panel {
	position: relative;
	padding-top: 44px;
	border: 0;
	border-radius: 26px;
	box-shadow: 0 30px 50px -34px rgba(20, 42, 68, .55), 0 10px 24px -18px rgba(20, 42, 68, .18);
}

/* ---------- Animasyonlar ---------- */
@keyframes games-bob {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -7px; }
}
@keyframes games-drift {
	from { translate: -12px 0; }
	to { translate: 12px 0; }
}

/* ---------- Duyarlı düzen ---------- */
@media (max-width: 1060px) {
	.games-page .pressgpt-pipeline.service-capabilities__list::before { display: none; }
}
@media (max-width: 540px) {
	.games-page .service-included__list { padding: 42px 22px 24px; }
}

@media (prefers-reduced-motion: reduce) {
	.games-page .pressgpt-pipeline.service-capabilities__list li,
	.games-page .service-types::after,
	.games-page .games-process::after,
	.games-page .games-contact .container::before { animation: none; }
	.games-page .services-approach__grid--four article,
	.games-page .games-process .process-list li { transition: none; }
}