/*
 * S14 · Çeviri Blog (#s14-blog) — Figma 68:4801 (1440) / 165:4345 (390).
 * Başlık → öne çıkan yazı kartı (16:10 görsel + gövde) → sonraki 3 yazının satırları → "Tüm Yazıları İnceleyin".
 * Kapsam: .bt-hs--s14-blog. Ölçüler figma-home/build/s14-blog/spec.json. JS yok; yalnız üzerine gelme/odak geçişleri.
 */

.bt-hs--s14-blog .bt-hs__inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* ---------------------------------------------------------------- Başlık (Section heading, kicker yok) */

.bt-hs--s14-blog .s14-head {
	max-width: var(--hs-measure);
}

.bt-hs--s14-blog .s14-lead {
	max-width: var(--hs-measure);
}

/* ---------------------------------------------------------------- Meta satırı (Blog/Meta row 68:4527) */

.bt-hs--s14-blog .s14-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	min-height: 22px;
	color: var(--hs-muted);
	font-size: var(--hs-fs-small);
	line-height: var(--hs-lh-small);
}

.bt-hs--s14-blog .s14-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

/* 6×6 halka, 1.5 px iç çizgi. Chrome 1.5 px kenarlığı 1 px'e yuvarlıyor (Figma'dan açık çıkıyor); iç gölge 1.5 px'i
   kesirli çizer. Dekoratif (aria-hidden), zorlanmış renklerde kaybolması sorun değil. */
.bt-hs--s14-blog .s14-sep {
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1.5px var(--hs-gold);
}

.bt-hs--s14-blog .s14-cat {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: var(--hs-radius-pill);
	background: var(--hs-navy-tint);
	color: var(--hs-navy);
	font-size: var(--hs-fs-chip-13);
	font-weight: 600;
	line-height: var(--hs-lh-ui);
}

/* ---------------------------------------------------------------- Öne çıkan yazı (Blog/Featured post 68:4611) */

.bt-hs--s14-blog .s14-feature {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 568fr) minmax(0, 526fr);
	align-items: center;
	column-gap: 40px;
	padding: 24px 40px 24px 24px;
	border: 1px solid var(--hs-navy-tint-line);
	border-radius: var(--hs-radius-bento);
	background: var(--hs-white);
	/* Shadow/Card (0 1px 2px ink .06, 0 12px 32px −12px navy .18) Chrome'da Figma çiziminin yaklaşık yarısı kadar koyu
	   çıkıyor (ref-desktop.png ölçümü: kart altında 5/15/23 px'te beyazdan fark 29/16/8, belirteçle 15/7/3); Figma
	   görüntüsüne oturan değer. */
	box-shadow: 0 1px 2px rgba(25, 25, 25, 0.06), 0 12px 40px -12px rgba(27, 42, 74, 0.32);
}

.bt-hs--s14-blog .s14-media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 16px;
	background: var(--hs-navy-tint);
}

.bt-hs--s14-blog .s14-media__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Öne çıkan görseli olmayan yazı (Thumbnail=Fallback 68:4591): 160° lacivert gradyan + 2 altın halka (yüksekliğin
   %62'si 2 px .55, %39,4'ü 1 px .35; ortada). */
.bt-hs--s14-blog .s14-media--fallback {
	background: linear-gradient(160deg, var(--hs-navy-500) 13.4%, var(--hs-navy) 53.7%, var(--hs-navy-deep-900) 86.6%);
}

.bt-hs--s14-blog .s14-media--fallback::before,
.bt-hs--s14-blog .s14-media--fallback::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	aspect-ratio: 1;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.bt-hs--s14-blog .s14-media--fallback::before {
	height: 62%;
	border: 2px solid var(--hs-gold);
	opacity: 0.55;
}

.bt-hs--s14-blog .s14-media--fallback::after {
	height: 39.4%;
	border: 1px solid var(--hs-gold);
	opacity: 0.35;
}

.bt-hs--s14-blog .s14-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	min-width: 0;
}

.bt-hs--s14-blog .s14-feature__title {
	color: var(--hs-ink);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: var(--hs-ls-h2);
}

/* Başlık bağlantısı yazının tek hedefidir; görünmez katmanı kartın tamamını kaplar (görsel dahil). */
.bt-hs--s14-blog .s14-feature__link {
	color: inherit;
	text-decoration: none;
	text-decoration-color: var(--hs-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.bt-hs--s14-blog .s14-feature__link::after {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: 1;
	border-radius: var(--hs-radius-bento);
}

.bt-hs--s14-blog .s14-feature__link:hover,
.bt-hs--s14-blog .s14-feature__link:focus-visible {
	color: var(--hs-ink);
	text-decoration-line: underline;
}

.bt-hs--s14-blog .s14-excerpt {
	color: var(--hs-muted);
	font-size: var(--hs-fs-body);
	line-height: var(--hs-lh-body);
}

/* Metin bağlantısı satırı Figma'da 20 px (etiket kutusu), çizgiyle 25 px. */
.bt-hs--s14-blog .bt-hs-link__label {
	line-height: 20px;
}

.bt-hs--s14-blog .s14-more {
	display: flex;
}

/* "Yazıyı Okuyun" (Button/Text link 5:64): 600 16/19.2 lacivert, 8 px, 18 px ok, 3 px altında 2 px altın çizgi.
   Kart bağlantısının üstünde kalır; dokunma alanı görünmez katmanla 44 px'e büyür. */
.bt-hs--s14-blog .s14-more__link {
	position: relative;
	z-index: 2;
	padding-bottom: 5px;
}

.bt-hs--s14-blog .s14-more__link::before,
.bt-hs--s14-blog .s14-all__link::before {
	content: "";
	position: absolute;
	inset: -10px -4px;
}

.bt-hs--s14-blog .bt-hs-link:focus-visible {
	color: var(--hs-ink);
}

/* ---------------------------------------------------------------- Yazı satırları (Blog/Post row 68:4560) */

.bt-hs--s14-blog .s14-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px 32px;
}

.bt-hs--s14-blog .s14-list__item {
	display: flex;
	min-width: 0;
}

.bt-hs--s14-blog .s14-row {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
	min-height: 48px;
	padding-top: 20px;
	border-top: 1px solid var(--hs-line);
}

/* Accent (hover/focus): 40×2 altın çubuk, saç çizgisinin üstünde. */
.bt-hs--s14-blog .s14-row::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 40px;
	height: 2px;
	background: var(--hs-gold);
	opacity: 0;
	transition: opacity var(--hs-dur-fast) ease;
}

.bt-hs--s14-blog .s14-row:is(:hover, :focus-within)::before {
	opacity: 1;
}

.bt-hs--s14-blog .s14-row__title {
	color: var(--hs-navy);
	font-size: 19px;
	font-weight: 600;
	line-height: 25px; /* 19/24.7; Figma kutusu 25 */
	letter-spacing: 0;
}

.bt-hs--s14-blog .s14-row__link {
	color: inherit;
	text-decoration: none;
}

.bt-hs--s14-blog .s14-row__link:hover {
	color: inherit;
	text-decoration: none;
}

/* Satırın tamamı bağlantının dokunma alanıdır (≥ 48 px). */
.bt-hs--s14-blog .s14-row__link::after {
	content: "";
	position: absolute;
	inset: -1px 0 0;
}

/* ---------------------------------------------------------------- Tüm yazılar */

.bt-hs--s14-blog .s14-all {
	display: flex;
	justify-content: flex-end;
}

/* Metin bağlantısı 25 px; dokunma alanı görünmez katmanla 45 px (mobilde 48 px hap, katman yok). */
.bt-hs--s14-blog .s14-all__link {
	position: relative;
}

.bt-hs--s14-blog .s14-all__link .bt-icon {
	transition: color var(--hs-dur-fast) ease;
}

/* ---------------------------------------------------------------- Düzenleyici: yazı yok önizlemesi (70:2700) */

.bt-hs--s14-blog .s14-empty {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 40px;
	border-radius: var(--hs-radius-bento);
	/* 1.5 px kesikli #C9C7D3 (8/6): 3 px'lik çizginin yarısı kutu dışında kırpılır. */
	background: var(--hs-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='24' fill='none' stroke='%23C9C7D3' stroke-width='3' stroke-dasharray='8 6'/%3E%3C/svg%3E");
}

.bt-hs--s14-blog .s14-empty__skeleton {
	display: flex;
	align-items: center;
	gap: 32px;
}

.bt-hs--s14-blog .s14-empty__img {
	flex: none;
	width: 320px;
	max-width: 100%;
	height: 200px;
	border-radius: 16px;
	background: var(--hs-surface);
}

.bt-hs--s14-blog .s14-empty__bars {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.bt-hs--s14-blog .s14-empty__bar {
	display: block;
	max-width: 100%;
	height: 12px;
	border-radius: var(--hs-radius-pill);
	background: var(--hs-line);
}

.bt-hs--s14-blog .s14-empty__bar--1 { width: 180px; }
.bt-hs--s14-blog .s14-empty__bar--2 { width: 520px; height: 22px; }
.bt-hs--s14-blog .s14-empty__bar--3 { width: 440px; }
.bt-hs--s14-blog .s14-empty__bar--4 { width: 300px; }

.bt-hs--s14-blog .s14-empty__text {
	color: var(--hs-muted);
	font-size: var(--hs-fs-body);
	line-height: var(--hs-lh-body);
}

/* ---------------------------------------------------------------- Tablet (≤1024; tasarlanmadı — spec önerisi) */

@media (max-width: 1024px) {
	.bt-hs--s14-blog .s14-feature {
		column-gap: 32px;
		padding: 20px 32px 20px 20px;
	}

	.bt-hs--s14-blog .s14-excerpt {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		line-clamp: 3;
	}

	.bt-hs--s14-blog .s14-list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------- Mobil (≤767; Figma 390) */

@media (max-width: 767px) {
	.bt-hs--s14-blog .bt-hs__inner {
		gap: 32px;
	}

	.bt-hs--s14-blog .s14-feature {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 20px;
		padding: 16px 16px 24px;
	}

	/* 1.5 px iç çizgi: Chrome 1.5 px kenarlığı 1 px çizer; 1 px kenarlık (zorlanmış renklerde kalır) + 0.5 px iç gölge. */
	.bt-hs--s14-blog .s14-all__link {
		justify-content: center;
		width: 100%;
		min-height: 48px;
		padding: 0 22px;
		border: 1px solid var(--hs-ink);
		border-radius: var(--hs-radius-pill);
		background: transparent;
		box-shadow: inset 0 0 0 0.5px var(--hs-ink);
		transition: background-color var(--hs-dur-fast) ease, color var(--hs-dur-fast) ease;
	}

	.bt-hs--s14-blog .s14-all__link::before {
		content: none;
	}

	.bt-hs--s14-blog .s14-all__link .bt-icon {
		color: var(--hs-ink);
	}

	/* Hover ve klavye odağı: mürekkep zemin, beyaz metin (+ odak halkası). */
	.bt-hs--s14-blog .s14-all__link:is(:hover, :focus-visible) {
		background: var(--hs-ink);
		color: var(--hs-white);
	}

	.bt-hs--s14-blog .s14-all__link:is(:hover, :focus-visible) .bt-icon {
		color: var(--hs-white);
	}

	.bt-hs--s14-blog .s14-all__link:focus-visible {
		border-radius: var(--hs-radius-pill);
	}

	.bt-hs--s14-blog .s14-empty {
		padding: 24px;
	}

	.bt-hs--s14-blog .s14-empty__skeleton {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
	}

	.bt-hs--s14-blog .s14-empty__img {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 10;
	}
}