/*
 * Blog Liste (posts arşivi) — Sprint 09.
 *
 * Tüm selector'lar `.blog-archive` / `.blog-sidebar` altında scope
 * edilmiştir; global Header/Footer'a sızmaz. Masaüstü (1366-1920) ölçüleri
 * `--abn-scale`/`--abn-container-width` sistemiyle (main.css) tutarlı
 * biçimde `calc(...px * var(--abn-scale))` kullanır. Ölçü kaynağı:
 * references/discovery/04-page-and-component-map.md (Blog Liste bölümü) +
 * references/discovery/05-design-tokens.md (255px kenar marjı, 450px kart
 * genişliği, 30px gutter — tümü XD exact atomik değerler) ve Ana Sayfa Blog
 * bölümüyle (`template-parts/home/blog-card.php`) paylaşılan aynı büyük
 * kart bileşeni (Component 17/18/19). Sidebar kolon genişliği ve grid–
 * sidebar boşluğu bu atomik değerlerden türetilmiştir (XD derived, bkz.
 * references/qa/sprint-09-report.md).
 *
 * Mobil/tablet için doğrulanmış bir XD kaynağı yoktur; ≤1024/768/480
 * blokları 10-approved-decisions.md madde 4 (davranışsal ilkeler) ve bu
 * temanın zaten kabul edilmiş breakpoint kümesiyle (main.css/home.css:
 * 1024/768/480) tutarlı biçimde geliştirme kararı olarak uygulanmıştır.
 *
 * Revizyon notu: Aşağıdaki ölçüler `references/rendered/02-blog-list-desktop-1920.png`
 * dosyası Python/PIL ile piksel piksel taranarak doğrulandı (bkz.
 * references/qa/sprint-09-report.md, "Revizyon — ölçülen değerler" bölümü):
 * header→H1 58px, breadcrumb→grid 51px, kart alanı 932px, grid–sidebar
 * boşluğu 80px, sidebar genişliği 400px, marka kartları ALT ALTA (dikey
 * stack, yan yana DEĞİL), sidebar blokları arası 50px, içerik sonu→footer
 * ~101px.
 */

.blog-archive {
	box-sizing: border-box;
	max-width: var(--abn-container-width);
	margin: 0 auto;
	/* Revizyon 04 — alt padding kaldırıldı: `.site-footer` (footer.css)
	   kendi `margin-top`'una zaten sahip (100px×scale masaüstü, 64/48/40px
	   responsive kademeleri) ve bu, Ana Sayfa dahil TÜM sayfalarda içerik–
	   footer boşluğunu tek başına sağlıyor. Buradaki eski `calc(100px*scale)`
	   alt padding, footer'ın kendi margin-top'unun ÜSTÜNE binerek boşluğu
	   iki katına çıkarıyordu (ölçüldü: 154px, Ana Sayfa'da aynı mekanizmayla
	   77px). Alt padding 0'a çekilerek Blog Liste, Ana Sayfa ile birebir aynı
	   tek mekanizmayı (yalnızca footer margin-top) kullanır hâle getirildi —
	   bu nedenle yazı sayısından/sayfa numarasından bağımsız olarak sabit
	   kalır. */
	padding: calc(58px * var(--abn-scale)) 0 0;
}

.blog-archive__header,
.blog-archive__breadcrumb,
.blog-archive__title,
.blog-archive__card-title,
.blog-archive__card-excerpt,
.blog-archive__card-meta,
.blog-sidebar__brand-card,
.blog-sidebar__contact-title,
.blog-sidebar__contact-description,
.blog-sidebar__recent-title,
.blog-sidebar__recent-item-title,
.blog-sidebar__recent-date {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ---------- Sayfa başlığı + breadcrumb ---------- */

.blog-archive__title {
	margin: 0;
	font-size: calc(42px * var(--abn-scale));
	font-weight: 800;
	line-height: 1.2;
	color: var(--abn-color-primary);
}

.blog-archive__breadcrumb {
	margin-top: calc(22px * var(--abn-scale));
}

.blog-archive__breadcrumb-list {
	display: flex;
	align-items: center;
	gap: calc(10px * var(--abn-scale));
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: calc(16px * var(--abn-scale));
	line-height: 1.4;
}

.blog-archive__breadcrumb-item a {
	color: #666666;
	text-decoration: none;
}

.blog-archive__breadcrumb-item a:hover,
.blog-archive__breadcrumb-item a:focus-visible {
	color: var(--abn-color-primary);
	text-decoration: underline;
}

.blog-archive__breadcrumb-item--current {
	color: #333333;
	font-weight: 500;
}

.blog-archive__breadcrumb-sep {
	width: calc(4px * var(--abn-scale));
	height: calc(4px * var(--abn-scale));
	flex-shrink: 0;
	border-radius: 50%;
	background-color: #a7a7a7;
}

/* ---------- İçerik alanı (2 kolon): kart grid + sidebar ---------- */

.blog-archive__layout {
	display: grid;
	grid-template-columns: calc(930px * var(--abn-scale)) calc(400px * var(--abn-scale));
	gap: calc(80px * var(--abn-scale));
	align-items: start;
	margin-top: calc(51px * var(--abn-scale));
}

.blog-archive__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: calc(30px * var(--abn-scale));
}

/* ---------- Blog kartı (Ana Sayfa Blog bölümüyle aynı bileşen) ---------- */

.blog-archive__card {
	display: flex;
	flex-direction: column;
}

.blog-archive__card-image-wrap {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: calc(30px * var(--abn-scale));
}

.blog-archive__card-image-wrap--placeholder {
	aspect-ratio: 450 / 350;
	background-color: #e5e5e5;
}

.blog-archive__card-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 450 / 350;
	object-fit: cover;
	transition: transform 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
	.blog-archive__card-image-wrap:hover .blog-archive__card-image {
		transform: scale(1.04);
	}
}

@media (prefers-reduced-motion: reduce) {
	.blog-archive__card-image {
		transition: none;
	}

	.blog-archive__card-image-wrap:hover .blog-archive__card-image {
		transform: scale(1);
	}
}

.blog-archive__card-body {
	display: flex;
	flex-direction: column;
	padding-top: calc(24px * var(--abn-scale));
}

.blog-archive__card-title {
	margin: 0;
	font-size: calc(26px * var(--abn-scale));
	font-weight: 700;
	line-height: 1.25;
	color: var(--abn-color-primary);
}

.blog-archive__card-title a {
	color: inherit;
	text-decoration: none;
}

.blog-archive__card-title a:hover,
.blog-archive__card-title a:focus-visible {
	text-decoration: underline;
}

.blog-archive__card-excerpt {
	margin: calc(16px * var(--abn-scale)) 0 0;
	font-size: calc(18px * var(--abn-scale));
	font-weight: 400;
	line-height: 1.5;
	color: #333333;
}

.blog-archive__card-meta {
	display: flex;
	align-items: center;
	gap: calc(10px * var(--abn-scale));
	margin: calc(20px * var(--abn-scale)) 0 0;
	font-size: calc(18px * var(--abn-scale));
	font-weight: 400;
	color: #999999;
}

.blog-archive__card-meta-sep {
	width: calc(4px * var(--abn-scale));
	height: calc(4px * var(--abn-scale));
	flex-shrink: 0;
	border-radius: 50%;
	background-color: #a7a7a7;
}

/* ---------- Pagination ---------- */

.blog-archive__posts .pagination {
	margin-top: calc(60px * var(--abn-scale));
}

.blog-archive__posts .pagination .nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(12px * var(--abn-scale));
}

.blog-archive__posts .pagination .page-numbers {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: calc(50px * var(--abn-scale));
	height: calc(50px * var(--abn-scale));
	padding: 0 calc(6px * var(--abn-scale));
	border-radius: 50%;
	background-color: #f5f6fc;
	color: var(--abn-color-primary);
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	font-size: calc(18px * var(--abn-scale));
	font-weight: 600;
	text-decoration: none;
}

.blog-archive__posts .pagination .page-numbers:hover,
.blog-archive__posts .pagination .page-numbers:focus-visible {
	background-color: var(--abn-color-primary);
	color: #ffffff;
}

.blog-archive__posts .pagination .page-numbers.current {
	background-color: var(--abn-color-primary);
	color: #ffffff;
}

.blog-archive__posts .pagination .page-numbers.dots {
	background-color: transparent;
}

.blog-archive__posts .pagination .page-numbers.next,
.blog-archive__posts .pagination .page-numbers.prev {
	font-size: 0;
}

.blog-archive__posts .pagination .page-numbers.next::after,
.blog-archive__posts .pagination .page-numbers.prev::after {
	font-size: calc(18px * var(--abn-scale));
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

.blog-archive__posts .pagination .page-numbers.next::after {
	content: "\2192";
}

.blog-archive__posts .pagination .page-numbers.prev::after {
	content: "\2190";
}

/* ---------- Sidebar ---------- */

.blog-sidebar {
	display: flex;
	flex-direction: column;
}

.blog-sidebar__brands {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: calc(16px * var(--abn-scale));
	padding: calc(15px * var(--abn-scale));
	background-color: var(--abn-color-primary);
	border-radius: calc(30px * var(--abn-scale));
}

.blog-sidebar__brand-card {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(99px * var(--abn-scale));
	padding: calc(20px * var(--abn-scale)) calc(24px * var(--abn-scale));
	background-color: #ffffff;
	border-radius: calc(20px * var(--abn-scale));
}

.blog-sidebar__brand-image {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	object-fit: contain;
}

/* Revizyon 03 — iki marka asseti farklı en-boy oranına sahip (ARKONÇELİK
   ~4.54:1, ARKONLINE maskot+wordmark ~2.875:1); aynı max-height ile
   sınırlandırıldığında ARKONLINE belirgin biçimde daha küçük görünüyordu.
   Kart dış kutusuna/padding'ine dokunulmadı — kart `min-height` + flex
   ortalama sayesinde görsel doğal olarak büyüdükçe kendiliğinden genişler. */
.blog-sidebar__brand-image--1 {
	max-width: calc(260px * var(--abn-scale));
	max-height: calc(64px * var(--abn-scale));
}

.blog-sidebar__brand-image--2 {
	max-width: calc(200px * var(--abn-scale));
	max-height: calc(76px * var(--abn-scale));
}

/* ---------- Sidebar: İletişim (CF7) ---------- */

.blog-sidebar__contact {
	box-sizing: border-box;
	margin-top: calc(50px * var(--abn-scale));
	padding: calc(36px * var(--abn-scale));
	background-color: var(--abn-color-primary);
	border-radius: calc(30px * var(--abn-scale));
	color: #ffffff;
}

.blog-sidebar__contact-title {
	margin: 0;
	font-size: calc(28px * var(--abn-scale));
	font-weight: 800;
	line-height: 1.2;
	color: #ffffff;
}

.blog-sidebar__contact-description {
	margin: calc(12px * var(--abn-scale)) 0 0;
	font-size: calc(15px * var(--abn-scale));
	font-weight: 400;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
}

.blog-sidebar__contact-form {
	margin-top: calc(20px * var(--abn-scale));
}

.blog-sidebar__contact-form .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: calc(16px * var(--abn-scale));
}

.blog-sidebar__contact-form .wpcf7-form p {
	margin: 0;
}

.blog-sidebar__contact-form .wpcf7-form-control-wrap {
	display: block;
}

.blog-sidebar__contact-form .wpcf7-form-control {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.blog-sidebar__contact-form .wpcf7-text,
.blog-sidebar__contact-form .wpcf7-tel,
.blog-sidebar__contact-form .wpcf7-email,
.blog-sidebar__contact-form .wpcf7-textarea {
	box-sizing: border-box;
	display: block;
	width: 100%;
	background-color: #ffffff;
	border: 1px solid #eaeaea;
	border-radius: calc(10px * var(--abn-scale));
	padding: 0 calc(16px * var(--abn-scale));
	font-size: calc(15px * var(--abn-scale));
	color: #333333;
}

.blog-sidebar__contact-form .wpcf7-text,
.blog-sidebar__contact-form .wpcf7-tel,
.blog-sidebar__contact-form .wpcf7-email {
	height: calc(50px * var(--abn-scale));
}

.blog-sidebar__contact-form .wpcf7-textarea {
	height: calc(120px * var(--abn-scale));
	padding-top: calc(14px * var(--abn-scale));
	padding-bottom: calc(14px * var(--abn-scale));
	resize: vertical;
}

.blog-sidebar__contact-form .wpcf7-text::placeholder,
.blog-sidebar__contact-form .wpcf7-tel::placeholder,
.blog-sidebar__contact-form .wpcf7-email::placeholder,
.blog-sidebar__contact-form .wpcf7-textarea::placeholder {
	color: #666666;
	opacity: 1;
}

.blog-sidebar__contact-form .wpcf7-form-control:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

.blog-sidebar__contact-form .wpcf7-not-valid {
	border-color: #ffb4b4;
}

.blog-sidebar__contact-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: calc(6px * var(--abn-scale));
	font-size: calc(13px * var(--abn-scale));
	font-weight: 400;
	color: #ffd7d7;
}

.blog-sidebar__contact-form .wpcf7-acceptance {
	display: block;
}

.blog-sidebar__contact-form .wpcf7-list-item {
	margin: 0;
}

.blog-sidebar__contact-form .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: calc(10px * var(--abn-scale));
	cursor: pointer;
}

.blog-sidebar__contact-form .wpcf7-list-item input[type="checkbox"] {
	box-sizing: border-box;
	flex-shrink: 0;
	width: calc(20px * var(--abn-scale));
	height: calc(20px * var(--abn-scale));
	margin: 2px 0 0;
}

.blog-sidebar__contact-form .wpcf7-list-item-label {
	font-size: calc(13px * var(--abn-scale));
	font-weight: 400;
	line-height: 1.5;
	color: #ffffff;
}

.blog-sidebar__contact-form .wpcf7-list-item-label a {
	color: inherit;
	text-decoration: underline;
}

.blog-sidebar__contact-form .wpcf7-list-item-label a:hover,
.blog-sidebar__contact-form .wpcf7-list-item-label a:focus-visible {
	color: #ffffff;
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

.blog-sidebar__contact-form .wpcf7-submit {
	box-sizing: border-box;
	width: 100%;
	height: calc(54px * var(--abn-scale));
	border: none;
	border-radius: calc(10px * var(--abn-scale));
	background-color: #ffffff;
	color: var(--abn-color-primary);
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	font-size: calc(22px * var(--abn-scale));
	font-weight: 700;
	cursor: pointer;
}

.blog-sidebar__contact-form .wpcf7-submit:not(:disabled):hover,
.blog-sidebar__contact-form .wpcf7-submit:not(:disabled):focus-visible {
	background-color: var(--abn-color-primary-dark);
	color: #ffffff;
}

.blog-sidebar__contact-form .wpcf7-submit:disabled {
	cursor: not-allowed;
	opacity: 0.7;
}

.blog-sidebar__contact-form .wpcf7-form[data-status="submitting"] .wpcf7-submit {
	opacity: 0.7;
	cursor: progress;
}

.blog-sidebar__contact-form .wpcf7-spinner {
	margin: calc(8px * var(--abn-scale)) auto 0;
}

.blog-sidebar__contact-form .wpcf7-response-output {
	box-sizing: border-box;
	margin: 0;
	padding: calc(14px * var(--abn-scale)) calc(18px * var(--abn-scale));
	border-radius: calc(10px * var(--abn-scale));
	border: 1px solid rgba(255, 255, 255, 0.4);
	font-size: calc(14px * var(--abn-scale));
	color: #ffffff;
}

.blog-sidebar__contact-form .wpcf7-form[data-status="mail-sent"] .wpcf7-response-output {
	background-color: rgba(80, 200, 130, 0.18);
	border-color: #7ee2a8;
	color: #eafff2;
}

.blog-sidebar__contact-form .wpcf7-form[data-status="validation-failed"] .wpcf7-response-output,
.blog-sidebar__contact-form .wpcf7-form[data-status="mail-failed"] .wpcf7-response-output,
.blog-sidebar__contact-form .wpcf7-form[data-status="aborted"] .wpcf7-response-output,
.blog-sidebar__contact-form .wpcf7-form[data-status="spam"] .wpcf7-response-output {
	background-color: rgba(220, 80, 80, 0.18);
	border-color: #ffb4b4;
	color: #fff0f0;
}

/* ---------- Sidebar: Son Yazılar ---------- */

.blog-sidebar__recent {
	box-sizing: border-box;
	margin-top: calc(50px * var(--abn-scale));
	padding: calc(36px * var(--abn-scale));
	background-color: #ffffff;
	border: 1px solid var(--abn-color-divider);
	border-radius: calc(30px * var(--abn-scale));
}

.blog-sidebar__recent-title {
	margin: 0 0 calc(24px * var(--abn-scale));
	padding-bottom: calc(20px * var(--abn-scale));
	border-bottom: 1px solid var(--abn-color-divider);
	font-size: calc(28px * var(--abn-scale));
	font-weight: 600;
	color: var(--abn-color-primary);
}

.blog-sidebar__recent-list {
	display: flex;
	flex-direction: column;
	gap: calc(28px * var(--abn-scale));
	margin: 0;
	padding: 0;
	list-style: none;
}

.blog-sidebar__recent-link {
	display: flex;
	align-items: flex-start;
	gap: calc(18px * var(--abn-scale));
	text-decoration: none;
	color: inherit;
}

.blog-sidebar__recent-image-wrap {
	display: block;
	flex-shrink: 0;
	width: calc(96px * var(--abn-scale));
	height: calc(96px * var(--abn-scale));
	overflow: hidden;
	border-radius: calc(18px * var(--abn-scale));
	background-color: #e5e5e5;
}

.blog-sidebar__recent-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-sidebar__recent-body {
	display: flex;
	flex-direction: column;
	gap: calc(8px * var(--abn-scale));
	min-width: 0;
	padding-top: calc(2px * var(--abn-scale));
}

.blog-sidebar__recent-item-title {
	font-size: calc(19px * var(--abn-scale));
	font-weight: 700;
	line-height: 1.35;
	color: var(--abn-color-primary);
}

@media (hover: hover) and (pointer: fine) {
	.blog-sidebar__recent-link:hover .blog-sidebar__recent-item-title,
	.blog-sidebar__recent-link:focus-visible .blog-sidebar__recent-item-title {
		text-decoration: underline;
	}
}

.blog-sidebar__recent-date {
	font-size: calc(13px * var(--abn-scale));
	font-weight: 400;
	color: #999999;
}

/* ==========================================================================
   Responsive — Sprint 09 (mobil/tablet için doğrulanmış XD kaynağı yoktur;
   davranış 10-approved-decisions.md madde 4 + bu temanın zaten kabul
   edilmiş breakpoint kümesine [1024/768/480] göre geliştirme kararıdır).
   Yukarıdaki masaüstü (1366-1920, --abn-scale sistemi) kuralları bu
   bölümde DEĞİŞTİRİLMEZ; yalnızca dosyanın SONUNA açık @media blokları
   eklenir.
   ========================================================================== */

@media (max-width: 1024px) {
	.blog-archive {
		padding: 56px 32px 0;
	}

	.blog-archive__title {
		font-size: 36px;
	}

	.blog-archive__layout {
		grid-template-columns: 1fr;
		gap: 0;
		margin-top: 40px;
	}

	.blog-archive__grid {
		gap: 24px;
	}

	.blog-archive__card-title {
		font-size: 22px;
	}

	.blog-sidebar {
		margin-top: 48px;
	}

	.blog-sidebar__brands,
	.blog-sidebar__contact,
	.blog-sidebar__recent {
		border-radius: 24px;
	}
}

@media (max-width: 768px) {
	.blog-archive {
		padding: 40px 24px 0;
	}

	.blog-archive__title {
		font-size: 30px;
	}

	.blog-archive__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.blog-archive__posts .pagination {
		margin-top: 40px;
	}
}

@media (max-width: 480px) {
	.blog-archive {
		padding: 32px 16px 0;
	}

	.blog-archive__title {
		font-size: 24px;
	}

	.blog-archive__breadcrumb-list {
		font-size: 13px;
		flex-wrap: wrap;
	}

	.blog-archive__card-title {
		font-size: 19px;
	}

	.blog-archive__card-excerpt {
		font-size: 15px;
	}

	.blog-archive__card-meta {
		font-size: 13px;
	}

	.blog-archive__posts .pagination .page-numbers {
		min-width: 44px;
		height: 44px;
		font-size: 15px;
	}

	.blog-sidebar__brands {
		padding: 16px;
		gap: 10px;
		border-radius: 20px;
	}

	.blog-sidebar__brand-card {
		min-height: 64px;
		padding: 12px;
		border-radius: 16px;
	}

	.blog-sidebar__brand-image {
		max-height: 32px;
	}

	.blog-sidebar__contact,
	.blog-sidebar__recent {
		padding: 20px;
		border-radius: 20px;
	}

	.blog-sidebar__contact-title {
		font-size: 22px;
	}

	.blog-sidebar__contact-form .wpcf7-text,
	.blog-sidebar__contact-form .wpcf7-tel,
	.blog-sidebar__contact-form .wpcf7-email,
	.blog-sidebar__contact-form .wpcf7-textarea {
		font-size: 16px;
	}

	.blog-sidebar__recent-title {
		font-size: 19px;
	}

	.blog-sidebar__recent-image-wrap {
		width: 56px;
		height: 56px;
	}

	.blog-sidebar__recent-item-title {
		font-size: 14px;
	}
}