/* =========================================================================
   Tekil Yazı Stilleri (sadece blog post)
   ========================================================================= */

.content-area--single {
	width: 100%;
	min-width: 0;
	max-width: 860px;
}

.main-content .container:has(.sidebar) .content-area--single {
	max-width: none;
}

/* -------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */

.single-post__header {
	margin-bottom: var(--space-8);
}

.single-post__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
}

.single-post__category {
	background: var(--color-primary-light);
	color: var(--color-primary);
	font-size: var(--text-xs);
	font-weight: var(--font-bold);
	padding: 3px var(--space-3);
	border-radius: var(--radius-full);
	text-transform: uppercase;
	letter-spacing: .06em;
	transition: all var(--transition-fast);
}

.single-post__category:hover {
	background: var(--color-primary);
	color: var(--color-white);
}

.single-post__title {
	font-size: var(--text-4xl);
	font-weight: var(--font-extrabold);
	line-height: var(--leading-tight);
	color: var(--color-secondary);
	margin-bottom: var(--space-6);
}

.single-post__info {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-4);
	padding: var(--space-4) 0;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

.single-post__date {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

.single-post__reading-time {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	background: var(--color-bg-alt);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
}

/* -------------------------------------------------------------------------
   Hero Görsel
   ------------------------------------------------------------------------- */

.single-post__hero {
	position: relative;
	margin-bottom: var(--space-10);
	border-radius: var(--radius-xl);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: #d5d9dc;
	isolation: isolate;
}

.single-post__hero::before {
	position: absolute;
	z-index: -2;
	inset: -24px;
	background-image: var(--single-post-hero-image);
	background-position: center;
	background-size: cover;
	content: "";
	filter: blur(22px) grayscale(0.32);
	opacity: 0.64;
	transform: scale(1.08);
}

.single-post__hero::after {
	position: absolute;
	z-index: -1;
	inset: 0;
	background: rgba(110, 118, 124, 0.24);
	content: "";
}

.single-post__hero-trigger {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: zoom-in;
}

.single-post__hero img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	position: relative;
	z-index: 1;
}

.single-post__hero-trigger img {
	display: block;
}

.blog-post-summary {
	margin: 0 0 18px;
	padding: 2px 0 18px;
	border-bottom: 1px solid #e5e9ed;
}

.blog-post-summary__categories {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-bottom: 9px;
}

.blog-post-summary__categories a {
	color: #e44b18;
	font-size: 0.62rem;
	font-weight: var(--font-bold);
	line-height: 1.25;
	text-decoration: none;
	text-transform: uppercase;
}

.blog-post-summary__categories a:not(:last-child)::after {
	margin-left: 5px;
	color: #a0a8b0;
	content: "/";
}

.blog-post-summary__title {
	margin: 0;
	color: #17212b;
	font-size: 1.05rem;
	font-weight: var(--font-extrabold);
	line-height: 1.28;
}

.blog-post-summary__info {
	display: flex;
	flex-wrap: wrap;
	gap: 7px 11px;
	margin-top: 10px;
	color: #77818b;
	font-size: 0.7rem;
	line-height: 1.35;
}

.blog-post-summary__info span::before {
	margin-right: 11px;
	color: #c1c8ce;
	content: "•";
}

/* -------------------------------------------------------------------------
   İçerik
   ------------------------------------------------------------------------- */

.single-post__content {
	font-size: var(--text-base);
	line-height: 1.7;
}

.single-post__content h2 {
	font-size: var(--text-xl);
}

.single-post__content h3 {
	font-size: var(--text-lg);
}

.single-post__content h4,
.single-post__content h5,
.single-post__content h6 {
	font-size: var(--text-base);
}

.single-post__content img[data-post-gallery-trigger] {
	cursor: zoom-in;
}

.single-post__hero-trigger:focus-visible,
.single-post__content img[data-post-gallery-trigger]:focus-visible {
	outline: 3px solid rgba(254, 0, 13, 0.28);
	outline-offset: 4px;
}

.reference-project-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin:0 0 28px; background:#e5e7eb; border:1px solid #e5e7eb; }
.reference-project-details > div { padding:14px 16px; background:#fff; }
.reference-project-details dt { color:#6b7280; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.reference-project-details dd { margin:4px 0 0; color:#102b55; font-weight:600; }
.reference-project-gallery { width:100%; min-width:0; max-width:100%; margin-top:36px; }
.reference-project-gallery h2 { margin-bottom:16px; }
.single-post__hero.reference-project-gallery { aspect-ratio:auto; overflow:visible; background:transparent; isolation:auto; }
.single-post__hero.reference-project-gallery::before, .single-post__hero.reference-project-gallery::after { display:none; }
.reference-project-gallery__stage { position:relative; overflow:hidden; aspect-ratio:16 / 9; border-radius:12px 12px 0 0; background:#0a1629; }
.reference-project-gallery__slide { width:100%; height:100%; animation:reference-gallery-fade .35s ease; }
.reference-project-gallery__slide img, .reference-project-gallery__slide video { width:100%; height:100%; object-fit:cover; display:block; }
.reference-project-gallery__slide.is-active img { cursor:zoom-in; }
.reference-project-gallery__slide.is-active img:focus-visible { outline:3px solid rgba(6,51,118,.35); outline-offset:-5px; }
.reference-project-gallery__progress { height:4px; background:#dfe5ed; overflow:hidden; }
.reference-project-gallery__progress span { display:block; width:0; height:100%; background:#063376; }
.reference-project-gallery__thumbs { display:flex; width:100%; min-width:0; max-width:100%; gap:10px; padding:14px 0 2px; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; }
.reference-project-gallery__thumb { position:relative; flex:0 0 84px; width:84px; height:62px; padding:0; overflow:hidden; border:2px solid transparent; border-radius:9px; background:#e8edf4; cursor:pointer; transition:border-color .2s ease, transform .2s ease; }
.reference-project-gallery__thumb:hover { transform:translateY(-2px); }
.reference-project-gallery__thumb.is-active { border-color:#063376; }
.reference-project-gallery__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.reference-project-gallery__play { position:absolute; inset:0; display:grid; place-items:center; background:rgba(6,51,118,.4); color:#fff; font-size:16px; }
@keyframes reference-gallery-progress { from { width:0; } to { width:100%; } }
@keyframes reference-gallery-fade { from { opacity:.45; } to { opacity:1; } }
@media (max-width:640px) { .reference-project-details { grid-template-columns:1fr; } .reference-project-gallery__thumb { flex-basis:70px; width:70px; height:52px; } }

/* -------------------------------------------------------------------------
   Footer (etiketler + paylaş)
   ------------------------------------------------------------------------- */

.single-post__footer {
	margin-top: var(--space-10);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-border);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.single-post__tags {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.single-post__tags-label {
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
   Yazı Navigasyonu
   ------------------------------------------------------------------------- */

.post-navigation {
	margin-top: var(--space-10);
}

.post-navigation .nav-links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
	margin-top: 0;
	justify-content: unset;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-4) var(--space-5);
	transition: all var(--transition-fast);
}

.post-navigation .nav-previous:hover,
.post-navigation .nav-next:hover {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-md);
}

.post-navigation .nav-next {
	text-align: right;
}

.post-navigation a {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	color: var(--color-text);
}

.post-navigation .post-navigation__label {
	font-size: var(--text-xs);
	font-weight: var(--font-semibold);
	color: var(--color-primary);
	text-transform: uppercase;
	letter-spacing: .06em;
}

.post-navigation .post-navigation__title {
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	color: var(--color-text);
	line-height: var(--leading-snug);
}

@media (max-width: 576px) {
	.post-navigation .nav-links {
		grid-template-columns: 1fr;
	}

	.single-post__title {
		font-size: var(--text-3xl);
	}
}
/* Uygulama alanı yazılarındaki bağlı ürünler */
.application-products {
	margin-top: 42px;
	padding-top: 28px;
	border-top: 1px solid #e8edf1;
}

.application-products__header {
	margin-bottom: 16px;
}

.application-products__header h2 {
	margin: 0;
	color: #17212b;
	font-size: 1.15rem;
	font-weight: var(--font-extrabold);
	line-height: 1.25;
}

.application-products__header p {
	margin: 5px 0 0;
	color: #6d7680;
	font-size: 0.82rem;
	line-height: 1.45;
}

.application-products__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.application-products__card {
	display: flex;
	min-width: 0;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid #e7ebef;
	border-radius: 7px;
	background: #ffffff;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
	color: inherit;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.application-products__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 20px rgba(15, 23, 42, 0.11);
}

.application-products__media {
	display: flex;
	height: 138px;
	align-items: center;
	justify-content: center;
	padding: 12px;
	background: #f8f9fa;
}

.application-products__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.application-products__media i {
	color: #063376;
	font-size: 2rem;
}

.application-products__body {
	padding: 11px 12px 13px;
}

.application-products__body h3 {
	margin: 0;
	color: #17212b;
	font-size: 0.84rem;
	font-weight: var(--font-bold);
	line-height: 1.3;
}

.application-products__body span {
	display: block;
	margin-top: 5px;
	color: #727b84;
	font-size: 0.7rem;
	line-height: 1.35;
}

.application-projects {
	margin-top: 42px;
	padding-top: 28px;
	border-top: 1px solid #e8edf1;
}

.application-projects__header {
	margin-bottom: 16px;
}

.application-projects__header h2 {
	margin: 0;
	color: #17212b;
	font-size: 1.15rem;
	font-weight: var(--font-extrabold);
	line-height: 1.25;
}

.application-projects__header p {
	margin: 5px 0 0;
	color: #6d7680;
	font-size: 0.82rem;
	line-height: 1.45;
}

.application-projects__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.application-projects__card {
	display: flex;
	min-width: 0;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid #e7ebef;
	border-radius: 7px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease;
}

.application-projects__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 20px rgba(15,23,42,.11);
}

.application-projects__media {
	display: grid;
	aspect-ratio: 16 / 9;
	place-items: center;
	overflow: hidden;
	background: #eef2f6;
}

.application-projects__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .25s ease;
}

.application-projects__card:hover .application-projects__media img {
	transform: scale(1.04);
}

.application-projects__body {
	display: flex;
	flex-direction: column;
	padding: 12px;
}

.application-projects__body h3 {
	display: -webkit-box;
	min-height: 2.7em;
	margin: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	color: #17212b;
	font-size: .84rem;
	font-weight: var(--font-bold);
	line-height: 1.35;
}

.application-projects__excerpt {
	margin: 5px 0 0;
	color: #727b84;
	font-size: .7rem;
	line-height: 1.35;
}

.application-projects__excerpt {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
}

.application-projects__excerpt {
	-webkit-line-clamp: 3;
	line-clamp: 3;
	color: #59646f;
}

@media (max-width: 640px) {
	.application-products__grid,
	.application-projects__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 9px;
	}

	.application-products__media {
		height: 118px;
		padding: 9px;
	}

	.application-products__body {
		padding: 10px;
	}

	.application-products__body h3 {
		font-size: 0.75rem;
	}

	.application-projects__body {
		padding: 10px;
	}

	.application-projects__body h3 {
		font-size: .75rem;
	}

	.application-projects__excerpt {
		-webkit-line-clamp: 4;
		line-clamp: 4;
		font-size: .64rem;
	}
}