/* =========================================================================
   TEMEL — tipografi, düzen kabı, bölüm ritmi.
   Renk/ölçü daima var(--tk-*) — tokens.css tek kaynak.
   ========================================================================= */

/* --- GeneratePress tam genişlik zinciri (CLAUDE.md §7.5) ---
   100vw hilesi YASAK; GP'nin kendi kaplarını düzleştiriyoruz.

   ⚠ Zincirin TAMAMI gerekli — eksik bırakılan her halka bölümü sıkıştırır:
   · #page.grid-container  → max-width:1200px, içeriği kutuya kilitler
   · #content.site-content → display:flex (içerik + sidebar düzeni için).
     Blok'a çevrilmezse bölümlerimiz FLEX ÖĞESİ olur, yan yana dizilir ve
     sayfa yatay taşar. Bu iki halka atlanınca hero 1280px'de 435px'e
     düşüyor ve sayfa 790px taşıyordu — canlıda ölçüldü. */
body.tk-full #page,
body.tk-full #content,
body.tk-full .site-content,
body.tk-full .content-area,
body.tk-full .site-main,
body.tk-full .entry-content,
body.tk-full .page-content,
body.tk-full .inside-article {
	display: block !important;   /* flex düzenini kır */
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}
body.tk-full .entry-content > *:not(.tk-section):not(.alignfull) {
	max-width: var(--tk-container);
	margin-inline: auto;
	padding-inline: var(--tk-gutter);
}

/* --- Gövde --- */
body {
	font-family: var(--tk-font-body);
	font-size: var(--tk-fs-body);
	line-height: var(--tk-lh-body);
	color: var(--tk-ink);
	background: var(--tk-white);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.tk-h1, .tk-h2, .tk-h3 {
	font-family: var(--tk-font-head);
	color: var(--tk-ink);
	line-height: var(--tk-lh-head);
	margin: 0 0 .5em;
}

a { color: var(--tk-ink); text-decoration: none; transition: color var(--tk-t-fast); }
a:hover, a:focus { color: var(--tk-primary); }

img { max-width: 100%; height: auto; display: block; }

/* Klavye odağı görünür kalsın — WCAG. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--tk-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

/* İçeriğe atla bağlantısı */
.tk-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--tk-ink);
	color: var(--tk-on-dark);
	padding: 12px 20px;
	font: 600 var(--tk-fs-sm)/1 var(--tk-font-head);
}
.tk-skip:focus { left: 0; color: var(--tk-on-dark); }

/* --- Kap & bölüm --- */
.tk-container {
	max-width: var(--tk-container);
	margin-inline: auto;
	padding-inline: var(--tk-gutter);
	width: 100%;
}
.tk-section { padding-block: var(--tk-section-y); }
.tk-section--sm { padding-block: var(--tk-section-y-sm); }
.tk-section--flush-top { padding-top: 0; }
.tk-section--flush-bottom { padding-bottom: 0; }

.tk-dark { background: var(--tk-ink); color: var(--tk-on-dark); }
.tk-dark h1, .tk-dark h2, .tk-dark h3 { color: var(--tk-on-dark); }
.tk-dark p { color: var(--tk-on-dark-muted); }
.tk-surface { background: var(--tk-surface); }

/* --- Başlık ölçekleri --- */
.tk-hero-title {
	font: 800 var(--tk-fs-hero)/var(--tk-lh-tight) var(--tk-font-head);
	letter-spacing: var(--tk-ls-hero);
	margin-bottom: .35em;
}
.tk-page-title {
	font: 800 var(--tk-fs-h1)/var(--tk-lh-tight) var(--tk-font-head);
	letter-spacing: var(--tk-ls-h1);
}
.tk-h2 {
	font: 800 var(--tk-fs-h2)/1.08 var(--tk-font-head);
	letter-spacing: var(--tk-ls-h2);
}
.tk-h2-sm {
	font: 800 var(--tk-fs-h2-sm)/1.1 var(--tk-font-head);
	letter-spacing: -1px;
}
.tk-h3 {
	font: 700 var(--tk-fs-h3) var(--tk-font-head);
	letter-spacing: var(--tk-ls-h3);
}
.tk-accent { color: var(--tk-primary); }

.tk-lead {
	font: 400 var(--tk-fs-lead)/1.65 var(--tk-font-body);
	color: var(--tk-gray);
	max-width: 46ch;
}
.tk-dark .tk-lead { color: var(--tk-on-dark-muted); }

.tk-body { font: 400 var(--tk-fs-body)/1.6 var(--tk-font-body); color: var(--tk-gray); }
.tk-small { font: 400 var(--tk-fs-sm)/1.55 var(--tk-font-body); color: var(--tk-gray); }

/* --- Eyebrow (çizgi + küçük büyük harf etiket) --- */
.tk-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	font: 600 var(--tk-fs-eyebrow) var(--tk-font-body);
	letter-spacing: var(--tk-ls-wide);
	text-transform: uppercase;
	color: var(--tk-gray);
}
.tk-eyebrow::before {
	content: "";
	width: 34px;
	height: 2px;
	background: var(--tk-primary);
	flex-shrink: 0;
}
.tk-eyebrow--plain::before { display: none; }
.tk-dark .tk-eyebrow { color: var(--tk-primary); }

.tk-label {
	font: 600 var(--tk-fs-label) var(--tk-font-body);
	letter-spacing: var(--tk-ls-label);
	text-transform: uppercase;
	color: var(--tk-primary);
}

/* --- Bölüm başlığı (sol blok + sağ açıklama) --- */
.tk-section-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 48px;
}
.tk-section-head__aside { max-width: 380px; }

/* --- Izgaralar --- */
.tk-grid { display: grid; gap: 20px; }
.tk-grid--2 { grid-template-columns: repeat(2, 1fr); }
.tk-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tk-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 24px; }
.tk-split {
	display: grid;
	grid-template-columns: 1fr .82fr;
	gap: 56px;
	align-items: center;
}
.tk-split--even { grid-template-columns: 1fr 1fr; }

/* --- Görsel çerçevesi (gerçek <img>, CSS background DEĞİL — CLAUDE.md §3) ---
   Kırpma kararı YALNIZ burada verilir; WP tarafında büyük boy yumuşak
   kırpılır (bkz. functions.php). Böylece görsel iki kez kırpılmaz. */
.tk-frame {
	border-radius: var(--tk-r-xl);
	overflow: hidden;
	position: relative;
	background: var(--tk-surface);   /* yüklenene kadar boşluk zıplamasın */
}
.tk-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Konu genelde üst-ortada (portre, ürün, ekran görüntüsü) — merkez yerine
	   biraz yukarı hizalamak baş/başlık kesilmesini önler. */
	object-position: center 42%;
	display: block;
}
.tk-frame--card { border-radius: var(--tk-r-lg); }

/* Logo/banner gibi kırpılmaması gereken görseller */
.tk-frame--contain { background: var(--tk-surface); }
.tk-frame--contain img { object-fit: contain; object-position: center; padding: 8%; }

/* --- Duyarlılık --- */
@media (max-width: 1024px) {
	.tk-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.tk-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.tk-split { gap: 40px; }
}
@media (max-width: 782px) {
	.tk-split,
	.tk-split--even,
	.tk-grid--2 { grid-template-columns: 1fr; }
	.tk-section-head { align-items: flex-start; margin-bottom: 32px; }
	.tk-section-head__aside { max-width: none; }
}
@media (max-width: 560px) {
	.tk-grid--3,
	.tk-grid--4 { grid-template-columns: 1fr; }
}