/* Offi Games tanıtım sitesi.
   Renkler uygulamanın koyu temasından (CLAUDE.md §19): zemin #0e0e0e →
   #1e1e1e, kart #1f1f1f, metin #e8ecf4. Vurgu altın sarısı, öne çıkan
   görseldeki yazıyla aynı. Yazı tipi sistemden — uygulamanın `lemon_milk`i
   ücretsiz lisansla geliyor ve web'e gömmek yeniden dağıtım sayılır. */

:root {
	--zemin: #0e0e0e;
	--zemin-alt: #1e1e1e;
	--kart: #1f1f1f;
	--cizgi: #2e2e2e;
	--metin: #e8ecf4;
	--solgun: #a8b0c0;
	--vurgu: #ffcd5a;
	--yesil: #5ce07a;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: linear-gradient(180deg, var(--zemin) 0%, var(--zemin-alt) 100%);
	background-attachment: fixed;
	color: var(--metin);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

.kap {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 0 20px;
}

/* --- üst çubuk --- */
header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	padding: 22px 0;
}

header img { width: 52px; height: auto; }
header .ad { font-size: 20px; font-weight: 700; letter-spacing: 0.3px; }
header nav { margin-left: auto; }
header nav a {
	color: var(--solgun);
	text-decoration: none;
	font-size: 15px;
	margin-left: 20px;
}
header nav a:hover { color: var(--metin); }

/* --- giriş --- */
.giris { padding: 40px 0 10px; text-align: center; }
.giris h1 {
	font-size: clamp(32px, 7vw, 52px);
	line-height: 1.15;
	margin: 0 0 14px;
	letter-spacing: -0.5px;
}
.giris h1 span { color: var(--vurgu); }
.giris p {
	font-size: clamp(16px, 2.4vw, 19px);
	color: var(--solgun);
	max-width: 620px;
	margin: 0 auto 26px;
}

.rozetler {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-bottom: 34px;
}
.rozet {
	background: var(--kart);
	border: 1px solid var(--cizgi);
	border-radius: 999px;
	padding: 7px 16px;
	font-size: 14px;
	color: var(--solgun);
}
.rozet b { color: var(--metin); font-weight: 600; }

.afis {
	width: 100%;
	border-radius: 16px;
	border: 1px solid var(--cizgi);
	display: block;
}

/* --- ekran görüntüleri --- */
.kareler {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 44px 0;
}
.kareler img {
	width: 100%;
	border-radius: 14px;
	border: 1px solid var(--cizgi);
	display: block;
}

/* --- özellikler --- */
h2 {
	font-size: 26px;
	margin: 46px 0 18px;
	letter-spacing: -0.2px;
}

.ozellikler {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
	gap: 14px;
	margin-bottom: 20px;
}
.ozellik {
	background: var(--kart);
	border: 1px solid var(--cizgi);
	border-radius: 14px;
	padding: 18px 20px;
}
.ozellik h3 { margin: 0 0 6px; font-size: 17px; }
.ozellik p { margin: 0; color: var(--solgun); font-size: 15px; }

.liste { color: var(--solgun); }
.liste b { color: var(--metin); }

/* --- metin sayfası (gizlilik) --- */
.metin { padding: 10px 0 40px; }
.metin h1 { font-size: clamp(26px, 5vw, 36px); margin: 24px 0 6px; }
.metin .tarih { color: var(--solgun); font-size: 14px; margin-bottom: 30px; }
.metin h2 { font-size: 20px; margin: 30px 0 10px; }
.metin p, .metin li { color: var(--solgun); }
.metin a { color: var(--vurgu); }
.metin ul { padding-left: 20px; }

/* --- alt --- */
footer {
	border-top: 1px solid var(--cizgi);
	margin-top: 40px;
	padding: 24px 0 40px;
	color: var(--solgun);
	font-size: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}
footer a { color: var(--solgun); }
footer .sag { margin-left: auto; }

@media (max-width: 640px) {
	.kareler { grid-template-columns: 1fr 1fr; }
	.kareler img:nth-child(3) { display: none; }
	/* Üst çubuk 390 pikselde sığmıyordu ve sayfa yatayda taşıyordu
	   (Chrome karesinde görüldü): logo + ad + üç bağlantı 391 piksel
	   ediyor, kullanılabilir genişlik 350. Bağlantılar daralıyor ve
	   gerekirse alt satıra iniyor (`flex-wrap`). */
	header nav { margin-left: auto; }
	header nav a { margin-left: 14px; font-size: 14px; }
	header .ad { font-size: 18px; }
	header img { width: 44px; }
}