/* =========================================================================
   PORTFOLYO — editoryal düzen. Blog ızgarası DEĞİL.
   Koşullu yüklenir: yalnız proje arşivi/detay/kategori sayfalarında.
   ========================================================================= */

/* ─────────────────────────── ARŞİV HERO ─────────────────────────── */
.tk-proj-hero__inner {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
	flex-wrap: wrap;
	padding-block: var(--tk-section-y);
}
.tk-proj-hero__count { text-align: right; flex-shrink: 0; }
.tk-proj-hero__num {
	display: block;
	font: 800 4.5rem/1 var(--tk-font-head);
	color: var(--tk-primary);
	letter-spacing: -3px;
}
.tk-proj-hero__lbl {
	font: 500 var(--tk-fs-xs) var(--tk-font-body);
	color: var(--tk-on-dark-muted);
	letter-spacing: .5px;
}
@media (max-width: 782px) {
	.tk-proj-hero__inner { align-items: flex-start; }
	.tk-proj-hero__count { text-align: left; }
	.tk-proj-hero__num { font-size: 3rem; }
}

/* ────────────────────────── FİLTRE SAYACI ────────────────────────── */
.tk-filter__n {
	display: inline-block;
	margin-left: 7px;
	font-size: .75em;
	opacity: .6;
	font-variant-numeric: tabular-nums;
}

/* ──────────────────────────── İŞ SATIRI ──────────────────────────── */
.tk-works { display: flex; flex-direction: column; gap: 20px; }

.tk-work {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 0;
	background: var(--tk-white);
	border: 1.5px solid var(--tk-line);
	border-radius: var(--tk-r-xl);
	overflow: hidden;
	transition: border-color var(--tk-t-med), box-shadow var(--tk-t-med), transform var(--tk-t-med);
}
.tk-work:hover {
	border-color: var(--tk-primary);
	box-shadow: var(--tk-shadow-card);
	transform: translateY(-4px);
}

/* Dönüşümlü: görsel sağa geçer — liste tekdüze görünmesin */
.tk-work--flip .tk-work__media { order: 2; }

/* İlk proje: tam genişlik vitrin */
.tk-work--hero {
	grid-template-columns: 1fr;
}
.tk-work--hero .tk-work__media { aspect-ratio: 21 / 9; }
.tk-work--hero .tk-work__body { padding: 40px 44px 44px; }
.tk-work--hero .tk-work__t { font-size: var(--tk-fs-h2); letter-spacing: var(--tk-ls-h2); }

.tk-work__media {
	position: relative;
	overflow: hidden;
	background: var(--tk-ink);
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tk-work__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
	transition: transform var(--tk-t-slow);
}
.tk-work:hover .tk-work__img { transform: scale(1.045); }

/* Görsel yoksa: baş harf — kırık görsel yerine tasarımlı boşluk */
.tk-work__ph {
	font: 800 4rem var(--tk-font-head);
	color: var(--tk-primary);
	opacity: .55;
}

.tk-work__body {
	position: relative;
	padding: 34px 36px 36px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.tk-work__n {
	position: absolute;
	right: 28px;
	top: 24px;
	font: 800 2.25rem var(--tk-font-head);
	color: var(--tk-line);
	line-height: 1;
	transition: color var(--tk-t-med);
	pointer-events: none;
}
.tk-work:hover .tk-work__n { color: var(--tk-primary); }

.tk-work__cat {
	font: 600 var(--tk-fs-label) var(--tk-font-body);
	letter-spacing: var(--tk-ls-label);
	text-transform: uppercase;
	color: var(--tk-primary);
	margin-bottom: 12px;
}
.tk-work__t {
	font: 800 var(--tk-fs-h2-sm)/1.15 var(--tk-font-head);
	letter-spacing: -.8px;
	margin-bottom: 14px;
	max-width: 22ch;
}
.tk-work__t a { color: var(--tk-ink); }
.tk-work:hover .tk-work__t a { color: var(--tk-ink); }
.tk-work__x {
	font: 400 var(--tk-fs-sm)/1.65 var(--tk-font-body);
	color: var(--tk-gray);
	margin-bottom: 20px;
	max-width: 52ch;
}

/* Künye — yatay, ince */
.tk-work__meta {
	display: flex;
	gap: 28px;
	flex-wrap: wrap;
	list-style: none;
	margin: 0 0 22px;
	padding: 18px 0 0;
	border-top: 1px solid var(--tk-line);
}
.tk-work__meta li {
	font: 600 var(--tk-fs-xs) var(--tk-font-head);
	color: var(--tk-ink);
}
.tk-work__meta span {
	display: block;
	font: 600 var(--tk-fs-label) var(--tk-font-body);
	letter-spacing: var(--tk-ls-label);
	text-transform: uppercase;
	color: var(--tk-dim-soft);
	margin-bottom: 4px;
}

.tk-work__link {
	font: 600 var(--tk-fs-xs) var(--tk-font-head);
	color: var(--tk-ink);
	align-self: flex-start;
}
.tk-work__link:hover { color: var(--tk-primary); }

@media (max-width: 900px) {
	.tk-work,
	.tk-work--hero { grid-template-columns: 1fr; }
	.tk-work--flip .tk-work__media { order: 0; }
	.tk-work__media,
	.tk-work--hero .tk-work__media { aspect-ratio: 16 / 10; }
	.tk-work__body,
	.tk-work--hero .tk-work__body { padding: 28px 24px 30px; }
	.tk-work__n { right: 20px; top: 18px; font-size: 1.75rem; }
	.tk-work__t { max-width: none; }
}

/* ─────────────────────────── BOŞ DURUM ─────────────────────────── */
.tk-empty {
	text-align: center;
	max-width: 560px;
	margin-inline: auto;
	padding: 40px 0 20px;
}
.tk-empty .tk-btn-row { justify-content: center; }

/* ────────────────────────── PROJE DETAY ────────────────────────── */
/* Vaka anlatısı: istek → iş → çıktı → sonuç */
.tk-story { display: grid; gap: 20px; }
.tk-story__block {
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: 28px;
	padding: 32px 0;
	border-top: 1px solid var(--tk-line);
	align-items: start;
}
.tk-story__k {
	font: 600 var(--tk-fs-label) var(--tk-font-body);
	letter-spacing: var(--tk-ls-label);
	text-transform: uppercase;
	color: var(--tk-primary);
	padding-top: 4px;
}
.tk-story__v {
	font: 400 1.0625rem/1.75 var(--tk-font-body);
	color: var(--tk-gray);
	white-space: pre-line;   /* satır sonları korunur */
	max-width: 68ch;
}
/* "Çıktılar" madde listesi gibi */
.tk-story__block--cikti .tk-story__v { white-space: normal; }
.tk-story__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tk-story__list li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font: 500 var(--tk-fs-sm)/1.55 var(--tk-font-body);
	color: var(--tk-ink);
}
.tk-story__list li::before {
	content: "✓";
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tk-primary);
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
	margin-top: 1px;
}

@media (max-width: 782px) {
	.tk-story__block { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
}

/* ═══════════════════ MOBİL — ÖLÇÜLEREK DÜZELTİLDİ ═══════════════════
   Canlıda 390px'te ölçülen sorunlar:
   · hero 399px (ekranın %47'si) — dolgu 57px kalmıştı
   · filtre satırı 156px — 5 filtre alt alta sarıyordu
   · kart 704px — başlık 30px, künye 127px, özet 124px
   Sonuç: tek proje kartı neredeyse tam ekran, liste taranamıyordu.

   NOT: Bu kurallar components.css'e yazılmıştı ama page-projects.css
   ondan SONRA yüklendiği için eziliyordu. Doğru ev burası. */

@media (max-width: 782px) {

	/* --- HERO: sıkı --- */
	.tk-proj-hero__inner {
		padding-block: 32px 26px !important;
		gap: 18px;
	}
	.tk-proj-hero__num { font-size: 2.5rem; letter-spacing: -1.5px; }
	.tk-proj-hero__lbl { font-size: .75rem; }
	.tk-proj-hero .tk-lead { font-size: var(--tk-fs-sm); max-width: none; }

	/* --- FİLTRELER: yatay kaydırma, alt alta sarmasın --- */
	.tk-filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin-inline: calc(var(--tk-gutter) * -1);
		padding-inline: var(--tk-gutter);
		padding-bottom: 4px;
		margin-bottom: 28px;
		-webkit-overflow-scrolling: touch;
	}
	.tk-filters::-webkit-scrollbar { display: none; }
	.tk-filter {
		flex: 0 0 auto;
		white-space: nowrap;
		padding: 10px 16px;
		font-size: var(--tk-fs-eyebrow);
	}

	/* --- KART: taranabilir yükseklik --- */
	.tk-works { gap: 16px; }

	.tk-work__media,
	.tk-work--hero .tk-work__media { aspect-ratio: 16 / 10; }

	.tk-work__body,
	.tk-work--hero .tk-work__body { padding: 22px 20px 24px; }

	/* Başlık 30px'ti — mobilde 3 satıra taşıyordu */
	.tk-work__t,
	.tk-work--hero .tk-work__t {
		font-size: 1.375rem;
		letter-spacing: -.5px;
		margin-bottom: 10px;
	}

	/* Özet 3 satırla sınırlı — kart uzamasın */
	.tk-work__x {
		font-size: var(--tk-fs-xs);
		margin-bottom: 16px;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* Künye 127px'ti — yatay ve sıkı */
	.tk-work__meta {
		gap: 8px 18px;
		padding-top: 14px;
		margin-bottom: 16px;
	}
	.tk-work__meta li { font-size: var(--tk-fs-eyebrow); }
	.tk-work__meta span { font-size: .625rem; margin-bottom: 2px; }
	/* Mobilde 2 künye yeter — üçüncüsü satır kaydırıyor */
	.tk-work__meta li:nth-child(n+3) { display: none; }

	.tk-work__n { font-size: 1.5rem; right: 16px; top: 14px; }
}

@media (max-width: 480px) {
	.tk-work__t,
	.tk-work--hero .tk-work__t { font-size: 1.25rem; }
	.tk-work__media,
	.tk-work--hero .tk-work__media { aspect-ratio: 3 / 2; }
}