/*
 * Norva tanitim sitesi.
 *
 * Belirtecler urunun tasarim sisteminden (ADR-011) birebir alindi: siteyi gorup
 * sonra urune giren biri ayni yerde oldugunu anlamali. Yazi tipleri de urunun
 * kendi dosyalari, CDN'den degil — urunun "dis bagimlilik yok" durusunu anlatan
 * bir sayfanin Google'dan font cekmesi, ilk cumlesinde kendini yalanlamasi olur.
 */

@font-face {
	font-family: 'Poppins';
	src: url('yazitipi/Poppins-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('yazitipi/Inter-Variable.woff2') format('woff2-variations'),
	     url('yazitipi/Inter-Variable.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
}

:root {
	--indigo: #312E81;
	--indigo-700: #4338CA;
	--indigo-950: #1E1B4B;
	--indigo-50: #EEF2FF;
	--indigo-200: #C7D2FE;
	--amber: #F59E0B;
	--amber-700: #B45309;

	--navy: #0F172A;
	--slate-50: #F8FAFC;
	--slate-100: #F1F5F9;
	--slate-200: #E2E8F0;
	--slate-400: #94A3B8;
	--slate-500: #64748B;
	--slate-600: #475569;
	--slate-800: #1E293B;

	--zemin: #F4F6FA;
	--yuzey: #FFFFFF;
	--metin: #0F172A;
	--metin-sonuk: #475569;

	--baslik: 'Poppins', system-ui, sans-serif;
	--govde: 'Inter', system-ui, sans-serif;

	--genislik: 1080px;
	--yuvarlak: 14px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
	margin: 0;
	background: var(--zemin);
	color: var(--metin);
	font-family: var(--govde);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
	font-family: var(--baslik);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.015em;
	margin: 0;
}

p { margin: 0; }

a { color: var(--indigo-700); }

.kap {
	width: 100%;
	max-width: var(--genislik);
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------------------------------------------------------------- ust */

.ust {
	position: sticky;
	top: 0;
	z-index: 10;
	background: rgba(244, 246, 250, 0.86);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--slate-200);
}

.ust .kap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 68px;
}

.ust img { height: 26px; display: block; }

.ust nav {
	display: flex;
	align-items: center;
	gap: 28px;
	font-size: 15px;
}

/* Dugme disarida: `.ust nav a` ondan daha ozgul ve rengini eziyordu — lacivert
 * zemine gri yazi, kontrast 1.9:1. */
.ust nav a:not(.dugme) {
	color: var(--metin-sonuk);
	text-decoration: none;
}

.ust nav a:not(.dugme):hover { color: var(--indigo-700); }

@media (max-width: 720px) {
	.ust nav a:not(.dugme) { display: none; }
}

/* ---------------------------------------------------------------- dugme */

.dugme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	border-radius: 10px;
	font-weight: 500;
	font-size: 15px;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color 120ms ease, border-color 120ms ease;
}

.dugme--birincil {
	background: var(--indigo);
	color: #fff;
}

.dugme--birincil:hover { background: var(--indigo-700); }

.dugme--sade {
	background: transparent;
	border-color: var(--slate-200);
	color: var(--metin);
}

.dugme--sade:hover { border-color: var(--indigo-200); background: var(--indigo-50); }

.dugme--acik {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.28);
	color: #fff;
}

.dugme--acik:hover { background: rgba(255, 255, 255, 0.18); }

/* ---------------------------------------------------------------- kahraman */

.kahraman {
	background:
		radial-gradient(1100px 520px at 18% -8%, #2A2A6E 0%, transparent 62%),
		radial-gradient(760px 420px at 96% 12%, #26225C 0%, transparent 58%),
		var(--navy);
	color: #fff;
	padding: 104px 0 96px;
}

.kahraman h1 {
	font-size: clamp(34px, 5.4vw, 58px);
	max-width: 15ch;
	margin-bottom: 22px;
}

.kahraman .vurgu { color: var(--amber); }

.kahraman p {
	font-size: clamp(17px, 2vw, 20px);
	color: #C9D0E0;
	max-width: 56ch;
	margin-bottom: 34px;
}

.kahraman .eylemler { display: flex; flex-wrap: wrap; gap: 12px; }

.rozet {
	display: inline-block;
	margin-bottom: 22px;
	padding: 6px 13px;
	border-radius: 999px;
	background: rgba(245, 158, 11, 0.13);
	border: 1px solid rgba(245, 158, 11, 0.32);
	color: #FCD34D;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.01em;
}

/* ---------------------------------------------------------------- bolum */

.bolum { padding: 86px 0; }
.bolum--beyaz { background: var(--yuzey); }

/* Ust serit yapiskan: bagsiz birakilirsa menuden gelen bolum basligi onun
 * altinda kaliyor ve tiklayan kisi bir sey olmadi saniyor. */
[id] { scroll-margin-top: 84px; }

.bolum > .kap > h2 {
	font-size: clamp(26px, 3.4vw, 36px);
	max-width: 20ch;
	margin-bottom: 14px;
}

.bolum .giris {
	color: var(--metin-sonuk);
	max-width: 62ch;
	margin-bottom: 44px;
}

.ustbaslik {
	font-family: var(--govde);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--amber-700);
	margin-bottom: 12px;
}

/* ---------------------------------------------------------------- kartlar */

.izgara {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 20px;
}

.kart {
	background: var(--yuzey);
	border: 1px solid var(--slate-200);
	border-radius: var(--yuvarlak);
	padding: 26px;
}

.bolum--beyaz .kart { background: var(--slate-50); }

.kart h3 {
	font-size: 19px;
	margin-bottom: 10px;
}

.kart p {
	color: var(--metin-sonuk);
	font-size: 15.5px;
}

.kart .isaret {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--indigo-50);
	color: var(--indigo);
	margin-bottom: 14px;
}

.kart .isaret svg { width: 20px; height: 20px; }

/* ---------------------------------------------------------------- yetenek listesi */

.yetenekler {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px 34px;
}

.yetenekler section h3 {
	font-size: 15px;
	font-family: var(--govde);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--indigo);
	margin: 18px 0 10px;
}

.yetenekler ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 7px;
}

.yetenekler li {
	position: relative;
	padding-left: 20px;
	font-size: 15.5px;
	color: var(--metin-sonuk);
}

.yetenekler li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 10px;
	width: 6px;
	height: 6px;
	border-radius: 2px;
	background: var(--amber);
}

/* ---------------------------------------------------------------- sorular */

.sorular {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 30px 44px;
}

.sorular h3 {
	font-size: 17px;
	margin-bottom: 8px;
}

.sorular p {
	color: var(--metin-sonuk);
	font-size: 15.5px;
}

/* ---------------------------------------------------------------- tablo */

.tablo {
	width: 100%;
	border-collapse: collapse;
	font-size: 15.5px;
}

.tablo th,
.tablo td {
	text-align: left;
	padding: 13px 16px;
	border-bottom: 1px solid var(--slate-200);
	vertical-align: top;
}

.tablo th {
	width: 34%;
	font-weight: 600;
	color: var(--metin);
}

.tablo td { color: var(--metin-sonuk); }

.tablo tr:last-child th,
.tablo tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------- yol haritasi */

.yarin {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 8px;
}

.yarin span {
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--slate-100);
	border: 1px dashed var(--slate-200);
	color: var(--slate-600);
	font-size: 14.5px;
}

/* ---------------------------------------------------------------- kapanis */

.kapanis {
	background: var(--indigo-950);
	color: #fff;
	padding: 76px 0;
}

.kapanis h2 {
	font-size: clamp(25px, 3.2vw, 34px);
	margin-bottom: 12px;
	max-width: 22ch;
}

.kapanis p {
	color: #BFC6DA;
	max-width: 54ch;
	margin-bottom: 28px;
}

.kapanis .eylemler { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------------------------------------------------------------- alt */

.alt {
	background: var(--navy);
	color: var(--slate-400);
	padding: 30px 0;
	font-size: 14.5px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.alt .kap {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
}

.alt a { color: var(--slate-200); text-decoration: none; }
.alt a:hover { color: #fff; }

/* ---------------------------------------------------------------- dar ekran */

@media (max-width: 720px) {
	.kahraman { padding: 64px 0 56px; }
	.bolum { padding: 56px 0; }
	.kapanis { padding: 56px 0; }
	.bolum .giris { margin-bottom: 30px; }
}

:where(a, button):focus-visible {
	outline: 2px solid var(--amber);
	outline-offset: 3px;
	border-radius: 6px;
}