/* ============================================================
   temp-solves — "Yakında" (Coming Soon) — Solves tasarımı
   page.png (1920x1080) referans. Sahne HER ekranı tam kaplar;
   kompozisyon --u birimiyle görünüş alanına oranlı ölçeklenir
   (1920x1080'de --u = 1px → tasarımla birebir).
   Font: Albert Sans
   ============================================================ */

:root {
	/* 1 tasarım pikseli. 1920x1080'de 1px, diğer ekranlarda oranlı. */
	--u: min(0.05208vw, 0.09259vh);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

body {
	font-family: 'Albert Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	font-optical-sizing: auto;
	background: #132850;
	color: #fff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow: hidden;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Görünüş alanı + arka plan ---------- */
.vp {
	position: fixed;
	inset: 0;
	overflow: hidden;
	background: #132850;
}

.bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background:
		radial-gradient(1500px 1300px at -2% 108%, rgba(150,180,222,.5), rgba(150,180,222,0) 52%),
		radial-gradient(1250px 1000px at -4% -10%, rgba(122,155,208,.42), rgba(122,155,208,0) 50%),
		radial-gradient(1500px 1150px at 104% -12%, rgba(120,150,205,.30), rgba(120,150,205,0) 52%),
		radial-gradient(1600px 1200px at 118% 60%, rgba(16,38,80,.5), rgba(16,38,80,0) 55%),
		linear-gradient(120deg, #29497f 0%, #1a3a68 24%, #132850 50%, #29497f 74%, #1e3d70 100%);
}

/* Tasarımdaki yumuşak lacivert doku (4 (Traced)-1.png, küçültülmüş) */
.bg-tex {
	position: absolute;
	inset: 0;
	background: url("../images/bg-texture.jpg") center / cover no-repeat;
	mix-blend-mode: soft-light;
	opacity: .7;
	pointer-events: none;
}

.bg > img {
	position: absolute;
	bottom: 0;
	right: 0;
	pointer-events: none;
	user-select: none;
}

/* Tasarımdaki büyük, çok soluk "check" — görünüş alanını kaplar, oranı korur */
.ck {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: .05;
	pointer-events: none;
	user-select: none;
}

/* ---------- Sahne — görünüş alanını tam kaplar ---------- */
.stage {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	overflow: hidden;
	z-index: 1;
}

/* ---------- Çerçeve ---------- */
.frame {
	position: absolute;
	inset: 12px;
	border-width: 2px;
	border-style: solid;
	border-image: linear-gradient(to top right, rgb(255 255 255 / 40%), transparent, transparent, rgb(255 255 255 / 40%)) 1;
	border-radius: 0;
	pointer-events: none;
	z-index: 7;
}

/* ---------- Üst / alt kayan şeritler (kenarlıklı kutular) ---------- */
.tick {
	position: absolute;
	left: 24px;
	right: 24px;
	height: calc(46 * var(--u));
	min-height: 34px;
	overflow: hidden;
	display: flex;
	align-items: center;
	border: 1px solid rgba(255,255,255,.16);
	border-radius: 0;
	background: rgb(255 255 255 / 10%);
	z-index: 4;
}
.tick-top { top: 24px; }
.tick-bot { bottom: 24px; left: calc(200 * var(--u)); right: calc(200 * var(--u)); height: calc(36 * var(--u));min-height: 26px;}

.tick-track { display: inline-flex; flex: none; align-items: center; white-space: nowrap; will-change: transform; }
.tick-top .tick-track { animation: mq 95s linear infinite; }
.tick-bot .tick-track { animation: mq 160s linear infinite; padding-left: calc(210 * var(--u)); }
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.tu, .tu2 {
	display: inline-flex;
	align-items: center;
	flex: none;
	font-size: calc(15 * var(--u));
	font-weight: 300;
	letter-spacing: .04em;
}
.tu  { color: rgba(255,255,255,.9); }
.tu2 { color: rgba(255,255,255,.52); }
.tu2 strong { font-weight: 600; color: rgba(255,255,255,.92); letter-spacing: .02em; }

.sp {
	width: calc(13 * var(--u));
	height: calc(13 * var(--u));
	flex: none;
	margin: 0 calc(26 * var(--u));
	color: rgba(255,255,255,.78);
}
.tu2 .sp { color: rgba(255,255,255,.6); }

/* ---------- Sahte tarayıcı barı ---------- */
.bar {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100 * var(--u));
	height: calc(48 * var(--u));
	z-index: 4;
	color: rgba(206,217,236,.72);
}
.bar-l, .bar-r {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: calc(20 * var(--u));
}
.bar-l { left: 26%; }
.bar-r { right: 24%; gap: calc(22 * var(--u)); }
.bar-c {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	gap: calc(20 * var(--u));
}
.ic { width: calc(23 * var(--u)); height: calc(23 * var(--u)); flex: none; display: block; }
.ic-sm { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
.dots { display: inline-flex; gap: calc(6 * var(--u)); margin-right: calc(4 * var(--u)); }
.dots i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: rgba(206,217,236,.62); display: block; }
.addr {
	display: flex;
	align-items: center;
	gap: calc(9 * var(--u));
	height: calc(34 * var(--u));
	min-width: calc(300 * var(--u));
	padding: 0 calc(13 * var(--u));
	border-radius: 6px;
	border: 1px solid rgba(255,255,255,.24);
	background: rgb(255 255 255 / 20%);
}
.addr-div { width: 1px; height: calc(15 * var(--u)); background: rgba(255,255,255,.28); flex: none; }
.addr-u {
	flex: 1;
	text-align: center;
	color: #fff;
	font-size: calc(15 * var(--u));
	font-weight: 600;
	letter-spacing: .005em;
	white-space: nowrap;
}

/* ---------- Merkez blok (dikeyde ortalı) ---------- */
.center {
	position: absolute;
	left: 50%;
	top: 44.8%;
	transform: translate(-50%, -50%);
	width: min(96vw, calc(1040 * var(--u)));
	text-align: center;
	z-index: 6;
}

.card {
    position: relative;
    width: calc(260 * var(--u));  /* Genişlik artırıldı (yatay form için) */
    height: calc(196 * var(--u));
    margin: 0 auto;
    background: #fff;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;                    /* Padding kaldırılarak logonun kenarlara yaklaşması sağlandı */
}

.card img,
.card .card-media {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.card .hnd {
	position: absolute;
	width: calc(9 * var(--u));
	height: calc(9 * var(--u));
	border-radius: 50%;
	background: #fff;
	border: 1px solid rgba(150,180,235,.95);
	z-index: 2;
}
.card::before {
	content: "";
	position: absolute;
	inset: calc(-10 * var(--u));
	border: 1px solid rgba(255,255,255,.75);
	pointer-events: none;
}
.h-tl { top: calc(-14 * var(--u)); left: calc(-14 * var(--u)); }
.h-tr { top: calc(-14 * var(--u)); right: calc(-14 * var(--u)); }
.h-bl { bottom: calc(-14 * var(--u)); left: calc(-14 * var(--u)); }
.h-br { bottom: calc(-14 * var(--u)); right: calc(-14 * var(--u)); }

.club {
	margin-top: calc(30 * var(--u));
	font-size: calc(24 * var(--u));
	font-weight: 600;
	letter-spacing: .01em;
	line-height: .8;
	color: #fff;
}

.social {
	margin-top: calc(12 * var(--u));
	display: flex;
	justify-content: center;
	gap: calc(15 * var(--u));
}
.social .s {
	width: calc(37 * var(--u));
	height: calc(37 * var(--u));
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.42);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	transition: background .2s, border-color .2s;
}
.social .s svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); display: block; }
.social .s:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.85); }

.k1 {
	margin-top: calc(36 * var(--u));
	font-size: calc(38 * var(--u));
	font-weight: 400;
	line-height: .8;
	color: #fff;
}
.k2 {
	margin-top: calc(30 * var(--u));
	font-size: calc(98 * var(--u));
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.012em;
	color: #fff;
}
.k3 {
	margin: calc(24 * var(--u)) auto 0;
	max-width: calc(900 * var(--u));
	font-size: calc(31 * var(--u));
	font-weight: 400;
	line-height: 1.35;
	color: rgba(255,255,255,.96);
}

/* ---------- Güneş (animasyonlu) ----------
   sun-corona.png artık TAM DAİRE (güncel parçalardan), merkezi görsel merkezi. */
.sun {
	position: absolute;
	left: calc(-210 * var(--u));
	bottom: calc(-10 * var(--u));
	width: calc(375 * var(--u));
	height: calc(375 * var(--u));
	z-index: 9;
	pointer-events: none;
}

/* Korona + disk: yavaşça döner */
.sun-corona {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform-origin: center;
	animation: spin 95s linear infinite;
}

/* Yörünge halkası + noktalar: ters yönde, farklı hızda döner */
.sun-orbit {
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(360 * var(--u));
	height: calc(360 * var(--u));
	margin: calc(-180 * var(--u)) 0 0 calc(-180 * var(--u));
	border: 1.5px solid rgba(255,255,255,.42);
	border-radius: 50%;
	transform-origin: center;
	animation: spin 52s linear infinite reverse;
}
.sun-orbit .od {
	position: absolute;
	width: calc(9 * var(--u));
	height: calc(9 * var(--u));
	border-radius: 50%;
	background: #fff;
}
.od1 { top: 6%; right: 7%; }
.od2 { bottom: 20%; right: calc(-3 * var(--u)); }
.od3 { bottom: calc(-3 * var(--u)); left: 30%; }

/* Kamyon & uçak: güneşin ETRAFINDA, birbirinden BAĞIMSIZ döner.
   .orb 0x0 nokta (güneş merkezi); ikon yörünge yarıçapında; ikon ters dönerek dik kalır. */
.orb {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0;
	height: 0;
}
.orb img {
	position: absolute;
	top: calc(-180 * var(--u));       /* yörünge yarıçapı */
	max-width: none;                  /* .orb 0px genişlikte; global max-width:100% ezilmeli */
	filter: drop-shadow(0 0 calc(3 * var(--u)) rgba(15,34,71,.15));
}
.orb-truck     { animation: orb-t 26s linear infinite; }
.orb-truck img { width: calc(24 * var(--u)); left: calc(-20 * var(--u)); animation: orb-ti 26s linear infinite; }
.orb-plane     { animation: orb-p 34s linear infinite; }
.orb-plane img { width: calc(24 * var(--u)); left: calc(-17 * var(--u)); animation: orb-pi 34s linear infinite; }

@keyframes spin   { to { transform: rotate(360deg); } }
/* Kamyon 25°'den başlar */
@keyframes orb-t  { from { transform: rotate(25deg);   } to { transform: rotate(385deg);   } }
@keyframes orb-ti { from { transform: rotate(-25deg);  } to { transform: rotate(-385deg);  } }
/* Uçak 150°'den başlar, biraz daha yavaş → bağımsız görünür */
@keyframes orb-p  { from { transform: rotate(150deg);  } to { transform: rotate(510deg);   } }
@keyframes orb-pi { from { transform: rotate(-150deg); } to { transform: rotate(-510deg);  } }

@media (prefers-reduced-motion: reduce) {
	.sun-corona, .sun-orbit, .orb, .orb img, .tick-track { animation: none; }
}

/* ---------- Solves imza bloğu (alta sabitli) ---------- */
.solves {
	position: absolute;
	left: calc(200 * var(--u));
	bottom: calc(90 * var(--u));
	z-index: 6;
}
.solves-logo { width: calc(220 * var(--u)); }
.s-by {
	margin-top: calc(18 * var(--u));
	font-size: calc(27 * var(--u));
	font-weight: 400;
	line-height: 1;
	color: #fff;
}
.s-line {
	margin-top: calc(14 * var(--u));
	font-size: calc(18 * var(--u));
	font-weight: 400;
	line-height: 1;
	color: rgba(255,255,255,.9);
}
.s-line:first-of-type { margin-top: calc(28 * var(--u)); }

/* ---------- Sağ alt slogan ---------- */
.tagline {
	position: absolute;
	right: calc(44 * var(--u));
	bottom: calc(60 * var(--u));
	width: calc(104 * var(--u));
	z-index: 6;
}

/* ============================================================
   İnce hareketler — düzeni bozmayan mikro animasyonlar
   Hepsi .bg içinde, arka planda; pointer-events:none; yalnız
   opacity/transform/filter animasyonu (reflow yok). Masaüstü
   imleç efektleri JS ile .vp.fx-on sınıfına bağlı; dokunmatikte
   ve prefers-reduced-motion'da tamamen kapanır.
   ============================================================ */

/* İmleç ışığı — imleci takip eden yumuşak parıltı (JS: --mx/--my). */
.spot {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity .8s ease;
	background: radial-gradient(circle calc(340 * var(--u)) at var(--mx, 50%) var(--my, 50%),
		rgba(150,190,245,.22), rgba(140,175,235,.10) 40%, rgba(140,175,235,0) 72%);
	mix-blend-mode: screen;
}
.vp.fx-on .spot { opacity: 1; }

/* Arka plan aurora — iki dev bulanık renk lekesi çok yavaş gezinir + hafifçe
   nefes alır. screen blend ile lacivert zeminde belirgin ama yumuşak. */
.aura {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(calc(85 * var(--u)));
	mix-blend-mode: screen;
	will-change: transform, opacity;
}
.aura-1 {
	width: calc(1040 * var(--u)); height: calc(1040 * var(--u));
	left: -14%; top: -28%;
	background: radial-gradient(circle, rgba(96,148,240,.78), rgba(96,148,240,0) 66%);
	animation: aura-a 42s ease-in-out infinite alternate;
}
.aura-2 {
	width: calc(1220 * var(--u)); height: calc(1220 * var(--u));
	right: -18%; bottom: -32%;
	background: radial-gradient(circle, rgba(66,104,205,.7), rgba(66,104,205,0) 66%);
	animation: aura-b 55s ease-in-out infinite alternate;
}
@keyframes aura-a {
	from { transform: translate(0, 0) scale(1);      opacity: .42; }
	to   { transform: translate(calc(150 * var(--u)), calc(110 * var(--u))) scale(1.2); opacity: .82; }
}
@keyframes aura-b {
	from { transform: translate(0, 0) scale(1.08);   opacity: .8; }
	to   { transform: translate(calc(-170 * var(--u)), calc(-80 * var(--u))) scale(.88); opacity: .45; }
}

/* Soluk yıldız parıltıları — 18 minik nokta, farklı ritimlerde yanıp söner. */
.stars { position: absolute; inset: 0; pointer-events: none; }
.stars i {
	position: absolute;
	width: calc(4 * var(--u)); height: calc(4 * var(--u));
	border-radius: 50%;
	background: rgba(255,255,255,.9);
	box-shadow: 0 0 calc(7 * var(--u)) rgba(200,220,255,.55);
	opacity: .1;
	animation: twinkle 5.5s ease-in-out infinite;
}
.stars i:nth-child(1)  { left: 12%; top: 24%; animation-duration: 5.4s; animation-delay: 0s;   }
.stars i:nth-child(2)  { left: 79%; top: 17%; animation-duration: 6.9s; animation-delay: 1.3s; }
.stars i:nth-child(3)  { left: 63%; top: 64%; animation-duration: 4.7s; animation-delay: .6s;  }
.stars i:nth-child(4)  { left: 28%; top: 73%; animation-duration: 7.3s; animation-delay: 2.2s; }
.stars i:nth-child(5)  { left: 89%; top: 46%; animation-duration: 5.1s; animation-delay: 1.7s; }
.stars i:nth-child(6)  { left: 45%; top: 10%; animation-duration: 6.3s; animation-delay: .3s;  }
.stars i:nth-child(7)  { left:  6%; top: 52%; animation-duration: 6.1s; animation-delay: 2.8s; }
.stars i:nth-child(8)  { left: 21%; top: 39%; animation-duration: 4.9s; animation-delay: .9s;  }
.stars i:nth-child(9)  { left: 35%; top: 88%; animation-duration: 7.7s; animation-delay: 3.4s; }
.stars i:nth-child(10) { left: 52%; top: 33%; animation-duration: 5.8s; animation-delay: 1.1s; }
.stars i:nth-child(11) { left: 71%; top: 41%; animation-duration: 6.6s; animation-delay: 2.4s; }
.stars i:nth-child(12) { left: 84%; top: 71%; animation-duration: 5.3s; animation-delay: .4s;  }
.stars i:nth-child(13) { left: 94%; top: 28%; animation-duration: 7.1s; animation-delay: 1.9s; }
.stars i:nth-child(14) { left: 58%; top: 82%; animation-duration: 4.6s; animation-delay: 3.1s; }
.stars i:nth-child(15) { left: 17%; top: 62%; animation-duration: 6.8s; animation-delay: .7s;  }
.stars i:nth-child(16) { left: 40%; top: 55%; animation-duration: 5.6s; animation-delay: 2.6s; }
.stars i:nth-child(17) { left: 76%; top: 55%; animation-duration: 7.4s; animation-delay: 1.5s; }
.stars i:nth-child(18) { left: 67%; top: 22%; animation-duration: 5.0s; animation-delay: 3.7s; }
@keyframes twinkle {
	0%, 100% { opacity: .07; transform: scale(.65); }
	50%      { opacity: .5;  transform: scale(1); }
}

/* Logo kartı — beyaz yüzeyde ~9sn'de bir ince ışık süzülmesi.
   .sheen kartın tam ölçüsünde ve overflow:hidden; kartı kırpmaz
   (kenar çizgisi ve köşe tutamaçları dışarıda kalır). */
.card .sheen {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 1;
}
.card .sheen::before {
	content: "";
	position: absolute;
	top: -60%;
	left: -75%;
	width: 45%;
	height: 220%;
	background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
	transform: rotate(18deg);
	animation: sheen 4s ease-in-out infinite;
}
@keyframes sheen {
	0%, 74%   { left: -75%; }
	90%, 100% { left: 145%; }
}

/* İmleç parallax — imlece göre birkaç piksel kayma (JS: --px/--py). */
.bg > img { transform: translate(calc(var(--px, 0) * 16 * var(--u)),  calc(var(--py, 0) * 16 * var(--u))); }
.sun      { transform: translate(calc(var(--px, 0) * -24 * var(--u)), calc(var(--py, 0) * -18 * var(--u))); }
.tagline  { transform: translate(calc(var(--px, 0) * -11 * var(--u)), calc(var(--py, 0) * -9 * var(--u))); }

@media (prefers-reduced-motion: reduce) {
	.aura, .stars i, .card .sheen::before { animation: none; }
	.spot { display: none; }
	.bg > img, .sun, .tagline { transform: none; }
}

/* ============================================================
   Mobil / dar ekran — dikey yığılma
   Ayrıca kareye yakın / dikey-ish geniş ekranlar (yarım monitör,
   dik tablet: en-boy < 1.3) da aynı dikey dizilimi kullanır; 16:9
   kompozisyonu bu oranlarda küçük kalıp ortada yüzüyordu.
   ============================================================ */
@media (max-width: 900px), (max-aspect-ratio: 13 / 10) {
	:root { --u: 1px; }
	body { overflow: auto; }
	.vp { position: static; height: auto; min-height: 100dvh; overflow-x: hidden; background: #0f2247; }
	.bg { position: fixed; }
	.stage {
		position: relative;
		inset: auto;
		height: auto;
		min-height: 100dvh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		padding: 84px 22px 90px;
	}

	/* arka plan check: mobilde de çok soluk, sağ-üstte */
	.ck { inset: auto; right: -40vw; top: -18vh; left: auto; bottom: auto; width: 150vw; height: 150vw; opacity: .05; }
	.bg-tex { opacity: .5; }
	.frame { position: fixed; inset: 9px; z-index: 20; }

	.tick { height: 42px; }
	.tick-bot .tick-track { padding-left: 24px; }
	.tu, .tu2 { font-size: 12px; letter-spacing: .03em; }
	.sp { width: 10px; height: 10px; margin: 0 18px; }

	.bar {
		position: static; transform: none;
		width: 100%; max-width: 440px; height: auto; margin: 8px 0 0;
	}
	.bar-l, .bar-r { display: none; }
	.bar-c { position: static; transform: none; width: 100%; gap: 12px; }
	.addr { width: 100%; min-width: 0; height: 36px; }
	.ic { width: 22px; height: 22px; } .ic-sm { width: 16px; height: 16px; }
	.addr-u { font-size: 14px; }

	.center {
		position: static; transform: none; top: auto;
		width: 100%; max-width: 560px; margin-top: 30px;
	}
	.center > * { max-width: 100%; }
	.card { width: 190px; height: 184px; padding: 12px; }
	.card img, .card .card-media { width: 158px; height: 158px; }
	.club { font-size: 21px; margin-top: 18px; }
	.social { gap: 13px; margin-top: 18px; }
	.social .s { width: 38px; height: 38px; }
	.social .s svg { width: 20px; height: 20px; }
	.k1 { font-size: clamp(17px, 4.9vw, 30px); margin-top: 24px; overflow-wrap: anywhere; }
	.k2 { font-size: clamp(34px, 10.6vw, 78px); margin-top: 12px; white-space: nowrap; letter-spacing: -.02em; }
	.k3 { font-size: clamp(13px, 3.6vw, 19px); max-width: 94%; margin-top: 13px; }

	.sun { display: none; }
	.solves {
		position: static; transform: none;
		margin: 40px auto 0; width: 100%; max-width: 380px; text-align: center;
	}
	.solves-logo { margin: 0 auto; width: 190px; }
	.s-by { font-size: 21px; margin-top: 20px; }
	.s-line { font-size: 15px; margin-top: 15px; }
	.s-line:first-of-type { margin-top: 18px; }
	.tagline { right: 14px; bottom: 52px; width: 74px; }
}

/* ---- Geniş ama kareye yakın ekranlarda (yarım monitör vb.) dikey dizilim
        devrede; fazladan yatay alanı kullanmak için kolonu biraz genişlet. ---- */
@media (min-width: 901px) and (max-aspect-ratio: 13 / 10) {
	.stage { padding: 92px 26px 100px; }
	.center { max-width: 640px; }
	.bar { max-width: 520px; }
	.solves { max-width: 440px; }
	.k2 { font-size: clamp(46px, 7.4vw, 82px); }
}

/* ---- Dar yatay ekranlar (en-boy ≈ 1.3–1.55): masaüstü dizilim korunur;
        kompozisyon üstte kalıp altta boşluk bırakıyordu, dikeyde ortala. ---- */
@media (min-width: 901px) and (min-aspect-ratio: 13 / 10) and (max-aspect-ratio: 31 / 20) {
	.center { top: 50%; }
}

/* ---- Solves imza bloğu: --u ile ölçeklenen alt payı, sabit konumlu alt
        şeride (.tick-bot) küçük ekranlarda yapışıyordu. Şeridin üstünde
        kalacak bir taban payı garanti et (1920'de görünüm değişmez). ---- */
@media (min-width: 901px) and (max-width: 1919px) {
	.solves { bottom: max(calc(90 * var(--u)), 82px); }
}

@media (max-width: 560px) {
	.stage { padding: 74px 16px 82px; }
	.center { max-width: 100%; }
	.card { width: 172px; height: 166px; }
	.card img, .card .card-media { width: 146px; height: 146px; }
	.club { font-size: 20px; }
	.social { gap: 11px; }
	.social .s { width: 35px; height: 35px; }
	.social .s svg { width: 19px; height: 19px; }
	.k1 { font-size: min(5vw, 23px); }
	.k2 { font-size: min(10vw, 46px); }
	.k3 { font-size: min(3.8vw, 17px); max-width: 100%; }
	.solves { max-width: 320px; }
	.solves-logo { width: 168px; }
	.s-by { font-size: 19px; }
	.tu, .tu2 { font-size: 11px; letter-spacing: .025em; }
	.sp { margin: 0 14px; }
}