/* Denizli Digitale — tema stilleri */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,500;9..144,600&display=swap');

/*
 * Denizli Digitale, staj referans projesindeki gibi SABİT koyu bir marka kimliği kullanır
 * (kullanıcının işletim sistemi light/dark tercihine göre değişmez). Logo beyaz/şeffaf
 * olduğundan ve marka kimliği referans sitede hep koyu olduğundan bu bilinçli bir tercihtir.
 */
:root {
	--color-bg: #0b0b0d;
	--color-surface: #17171b;
	--color-surface-raised: #1e1e23;
	--color-ink: #0b0b0d;
	--color-text: #f2f1ee;
	--color-muted: #9a9aa2;
	--color-border: #2a2a2f;
	--color-accent: #E82430;
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
	--shadow-lift: 0 16px 40px rgba(0, 0, 0, 0.55);
	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-display: 'Fraunces', Georgia, serif;
	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-lg: 20px;
	--container-width: 1180px;
	--transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	color: var(--color-text);
	background: var(--color-bg);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
	text-decoration: none;
}

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

h1, h2, h3 {
	font-family: var(--font-display);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.container {
	width: 100%;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 20px;
}

.main-content {
	padding-top: 8px;
}


/* Header */
.site-header {
	position: sticky;
	top: 0;
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
	z-index: 100;
}

.site-header-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 20px;
	flex-wrap: wrap;
}

.site-branding {
	display: flex;
	align-items: center;
	margin-right: auto;
}

.site-branding-logo {
	height: 46px;
	width: auto;
}

.site-search {
	position: relative;
	order: 3;
	flex: 1 1 100%;
}

.site-search-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--color-muted);
	pointer-events: none;
}

.site-search input {
	width: 100%;
	padding: 10px 16px 10px 38px;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	font-size: 0.9rem;
	font-family: var(--font-sans);
	background: var(--color-bg);
	color: var(--color-text);
	transition: border-color var(--transition), box-shadow var(--transition);
}

.site-search input:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
}

.menu-toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	order: 2;
}

.menu-toggle-bar {
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: var(--color-text);
	display: block;
	transition: transform var(--transition), opacity var(--transition);
}

.primary-navigation {
	display: none;
	width: 100%;
	order: 4;
}

.primary-navigation.is-open {
	display: block;
}

.primary-menu-list {
	list-style: none;
	margin: 0;
	padding: 4px 0 0;
	display: flex;
	flex-direction: column;
}

.primary-menu-list li {
	position: relative;
}

.primary-menu-list li a {
	display: block;
	padding: 11px 2px;
	border-bottom: 1px solid var(--color-border);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--color-text);
}

/*
 * Tarayıcının sert/varsayılan focus çerçevesi yerine markaya uygun, ince bir
 * focus stili — özellikle alt menüsü olan öğelere tıklandığında (dropdown açmak
 * için) görünen kutunun "renk farkı" gibi algılanmasını önler.
 */
.primary-menu-list li a:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

.primary-menu-list li a:focus:not(:focus-visible) {
	outline: none;
}

/* Alt başlık: varsayılan gizli, sadece üzerine gelince (veya odaklanınca) görünür bir ipucu kutusu */
.menu-item-description {
	position: absolute;
	left: 0;
	top: 100%;
	margin-top: 8px;
	background: var(--color-surface-raised);
	border: 1px solid var(--color-border);
	color: var(--color-muted);
	font-size: 0.72rem;
	font-weight: 400;
	white-space: nowrap;
	padding: 7px 12px;
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
	pointer-events: none;
	z-index: 200;
}

.primary-menu-list li a:hover .menu-item-description,
.primary-menu-list li a:focus .menu-item-description {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Alt kategorisi olan menü öğelerindeki küçük ok işareti */
.menu-item-caret {
	font-size: 0.55rem;
	margin-left: 5px;
	opacity: 0.6;
	display: inline-block;
	cursor: pointer;
	/* Görsel boyutu küçük kalsın ama dokunma alanı (tap target) mobilde
	   rahat basılabilecek kadar büyük olsun diye görünmez bir dolgu var. */
	padding: 14px 10px;
	margin: -14px -10px -14px 0;
}

/* Açılır alt menü (dropdown) — mobilde varsayılan olarak kapalı, oktuşuna
   tıklanınca açılır (bkz. assets/js/main.js, .is-submenu-open sınıfı);
   masaüstünde ise üzerine gelince belirir (aşağıdaki 1320px media query). */
.sub-menu {
	list-style: none;
	margin: 0;
	padding: 0 0 0 16px;
	display: none;
}

.primary-menu-list > li.has-submenu.is-submenu-open > .sub-menu {
	display: block;
}

.sub-menu .menu-item-label {
	font-weight: 500;
}

.sub-menu li a {
	padding: 9px 2px;
	font-size: 0.88rem;
}

/*
 * NOT: Yatay masaüstü menüsü bilinçli olarak 782px değil, daha geniş bir eşikte (1100px)
 * devreye giriyor. 9 menü öğesi + logo + arama, 782-1099px arası genişliklerde güvenilir
 * şekilde sığmıyor ve ya alt satıra kayıyor ya da üst üste biniyordu. Bu aralıkta zaten
 * iyi çalışan mobil/hamburger menü kullanılmaya devam ediyor.
 */
@media (min-width: 1320px) {
	.primary-menu-list > li.has-submenu {
		position: relative;
	}

	.primary-menu-list > li.has-submenu > .sub-menu {
		/* Mobildeki display:none'ı ezer — masaüstünde görünürlük artık
		   opacity/visibility ile kontrol ediliyor, display ile değil. */
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		margin-top: 8px;
		min-width: 230px;
		background: var(--color-surface-raised);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-sm);
		box-shadow: var(--shadow-lift);
		padding: 8px;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
		z-index: 300;
	}

	.primary-menu-list > li.has-submenu:hover > .sub-menu,
	.primary-menu-list > li.has-submenu > a:focus + .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.sub-menu li a {
		display: block;
		border-bottom: none;
		padding: 9px 12px;
		border-radius: 6px;
		white-space: nowrap;
		color: var(--color-text);
	}

	.sub-menu li a:hover {
		background: var(--color-bg);
		color: var(--color-accent);
	}

	.sub-menu li a::after {
		content: none;
	}
}

/* Hero — iki farklı durumu var (bkz. assets/js/main.js, .hero-intro-active
   sınıfı carousel index'ine göre eklenip çıkarılır):
   1) Tanıtım slaytı ("Denizli'nin hikaye evreni") aktifken: arka planda
      hero.jpg (kitap/antik sütun/şehir) durur, "Editörün Seçimi" kutusu
      TAMAMEN gizlenir.
   2) Herhangi bir haber slaytı aktifken: arka plan düz koyu renge döner,
      kutu görünür olur ve haberin fotoğrafını gösterir. */
.hero {
	position: relative;
	overflow: hidden;
	background: var(--color-bg);
	transition: background 400ms ease;
	/* Slayt değiştirme sürüklemesi artık dar .hero-inner kutusuyla değil,
	   TÜM hero kesitiyle (kenar boşlukları dahil) çalışıyor — bkz. main.js. */
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
}

.hero.is-dragging {
	cursor: grabbing;
}

.hero.hero-intro-active {
	background:
		linear-gradient(90deg, rgba(4, 4, 6, 0.55) 0%, rgba(4, 4, 6, 0.25) 45%, transparent 70%),
		linear-gradient(0deg, rgba(4, 4, 6, 0.5), transparent 40%),
		url('../images/hero.jpg') center center / cover no-repeat,
		var(--color-bg);
}

.hero.hero-intro-active .hero-slider {
	display: none;
}

/* Rozet/başlık/özeti saran ayrı bir link — "Habere Git" butonuyla aynı
   hedefe gider, böylece kullanıcı sadece butona değil metnin herhangi bir
   yerine tıklayarak da habere gidebilir (buton zaten kendi <a>'sı olduğu
   için ikisi iç içe değil, kardeş elemanlar olarak durur). */
.hero-text-link {
	display: block;
	color: inherit;
	text-decoration: none;
	/* Tarayıcının doğal link sürükleme davranışı (linki adres çubuğuna vb.
	   sürükleme) fare ile slayt değiştirme jestini ele geçirip JS'in
	   pointermove almasını engelliyordu — resimlerde yaşadığımız aynı
	   sorunun link karşılığı. */
	-webkit-user-drag: none;
}

.hero-text-link:hover .hero-title {
	color: var(--color-accent);
}

.hero-title {
	font-size: 2.4rem;
	line-height: 1.1;
	margin: 16px 0 14px;
	transition: color var(--transition);
}

.hero-title span {
	color: var(--color-accent);
}

.hero-lead {
	color: var(--color-muted);
	font-size: 1.05rem;
	max-width: 480px;
	margin: 0 0 22px;
}

.hero-cta {
	background: var(--color-accent);
	color: #fff;
	-webkit-user-drag: none;
}

.hero-inner {
	display: flex;
	flex-direction: column;
	min-height: 460px;
	padding: 56px 20px;
	max-width: 1320px;
	margin: 0 auto;
	gap: 32px;
}

/* Metin, tanıtım slaytı ile seçilen haberler arasında "Editörün Seçimi"
   kutusuyla (sağda/üstte) senkron döner — bkz. assets/js/main.js, aynı
   .auto-carousel index'i ikisini birlikte günceller. */
.hero-text-track {
	position: relative;
	min-width: 0;
}

.hero-text-slide {
	display: none;
}

.hero-text-slide.is-active {
	display: block;
	animation: hero-text-fade 450ms ease;
}

@keyframes hero-text-fade {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* "Editörün Seçimi" kutusu — sağ üstte durur. */
.hero .hero-slider {
	max-width: 420px;
}

@media (min-width: 900px) {
	.hero-inner {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		min-height: 600px;
		padding: 72px 20px;
		gap: 40px;
	}

	.hero-text-track {
		flex: 1 1 auto;
		align-self: center;
	}

	.hero .hero-slider {
		flex: 0 0 420px;
	}

	.hero-title {
		font-size: 3.4rem;
	}

	.hero-lead {
		font-size: 1.15rem;
		max-width: 560px;
	}
}

/* Hero slider — "Editörün Seçimi": tam ekran geçişli, otomatik kayan, noktalarla gezilen slider */
.hero-slider,
.mixed-slider {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lift);
	aspect-ratio: 4 / 3;
	background: var(--color-surface);
}

.mixed-slider {
	aspect-ratio: 16 / 10;
}


.hero-slider-label {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(11, 11, 13, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 7px 14px;
	border-radius: 999px;
}

.hero-news-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-accent);
	animation: pulse-dot 1.6s ease-in-out infinite;
}

.hero-slider .auto-carousel,
.hero-slider .auto-carousel-track,
.mixed-slider .auto-carousel,
.mixed-slider .auto-carousel-track {
	width: 100%;
	height: 100%;
}

.hero-slide {
	position: relative;
	display: block;
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
}

.hero-slide-image {
	width: 100%;
	height: 100%;
}

.hero-slide-image img,
.hero-slide-image .post-thumb-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-user-drag: none;
	user-select: none;
}

.hero-slide-image-intro {
	background:
		radial-gradient(circle at 75% 25%, color-mix(in srgb, var(--color-accent) 26%, transparent), transparent 55%),
		radial-gradient(circle at 20% 80%, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 50%),
		var(--color-surface);
}

.hero-slide-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 40px 20px 20px;
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.88) 85%);
}

.hero-slide-overlay .post-badge {
	margin-bottom: 8px;
}

.hero-slide-title {
	display: block;
	color: #fff;
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.25;
}

.hero-slider-dots {
	position: absolute;
	bottom: 18px;
	right: 18px;
	z-index: 20;
	display: flex;
	gap: 7px;
}

.hero-slider-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background var(--transition), transform var(--transition);
}

.hero-slider-dot:hover {
	background: rgba(255, 255, 255, 0.7);
}

.hero-slider-dot.is-active {
	background: #fff;
	transform: scale(1.3);
}

/* Son Dakika şeridi — koyu, sade; sadece etiket ve nokta kırmızı vurgulu */
.son-dakika-strip {
	background: var(--color-ink);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

.son-dakika-strip-inner {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 11px 0;
	overflow: hidden;
}

.son-dakika-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.72rem;
	color: var(--color-accent);
	white-space: nowrap;
	flex-shrink: 0;
	padding-right: 16px;
	border-right: 1px solid var(--color-border);
}

.son-dakika-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-accent);
	animation: pulse-dot 1.6s ease-in-out infinite;
}

@keyframes pulse-dot {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.35; transform: scale(0.8); }
}

.son-dakika-viewport {
	flex: 1 1 auto;
	overflow: hidden;
}

.son-dakika-track {
	display: flex;
	width: max-content;
	animation: son-dakika-marquee 32s linear infinite reverse;
}

.son-dakika-track:hover {
	animation-play-state: paused;
}

@keyframes son-dakika-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.son-dakika-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 30px;
	white-space: nowrap;
	flex-shrink: 0;
	padding-right: 30px;
}

.son-dakika-list li {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.son-dakika-time {
	color: var(--color-muted);
	font-size: 0.78rem;
	flex-shrink: 0;
}

.son-dakika-list a {
	font-size: 0.88rem;
	font-weight: 500;
	color: var(--color-text);
}

.son-dakika-list a:hover {
	color: var(--color-accent);
}

.son-dakika-more {
	flex-shrink: 0;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--color-accent);
	white-space: nowrap;
	display: none;
}

/* Ortak: rozet, kart görseli/placeholder, tarih */
.post-badge {
	display: inline-flex;
	align-items: center;
	background: color-mix(in srgb, #fff 12%, transparent);
	color: #fff;
	font-weight: 700;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 5px 12px;
	border-radius: 999px;
	margin-bottom: 14px;
	transition: background var(--transition), color var(--transition);
}

/*
 * Rozetler varsayılan olarak beyaz, içinde bulunduğu kart/bağlantı üzerine
 * gelince (hover) kategori vurgu rengine (kırmızı) dönüyor.
 */
a:hover .post-badge {
	background: color-mix(in srgb, var(--accent, var(--color-accent)) 16%, transparent);
	color: var(--accent, var(--color-accent));
}

.post-meta-date {
	color: var(--color-muted);
	font-size: 0.8rem;
}

.post-meta-dot {
	color: var(--color-border);
	margin: 0 6px;
}

.post-thumb-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.85);
}

.post-thumb-placeholder span {
	font-family: var(--font-display);
	font-size: 2.4rem;
	font-weight: 600;
}

/* Öne çıkan haber */
.featured-post {
	margin: 28px 0 44px;
}

.featured-post-link {
	display: block;
}

.featured-post-image {
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-md);
}

.featured-post-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.featured-post-body {
	padding-top: 22px;
	max-width: 760px;
}

.featured-post-title {
	font-size: 1.9rem;
	font-weight: 600;
	margin: 0 0 12px;
	transition: color var(--transition);
}

.featured-post-link:hover .featured-post-title {
	color: var(--accent, var(--color-accent));
}

.featured-post-excerpt {
	color: var(--color-muted);
	font-size: 1.05rem;
	margin: 0 0 12px;
}

/* Öne Çıkanlar: büyük kart + liste (referanstaki "ÖNE ÇIKANLAR" bölümü) */
.featured-split {
	margin: 8px 0 44px;
}

.featured-split-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
}

.featured-main .featured-post-image {
	aspect-ratio: 16 / 10;
}

.featured-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.featured-list li a {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.featured-list-thumb {
	width: 92px;
	height: 68px;
	flex-shrink: 0;
	border-radius: var(--radius-sm);
	overflow: hidden;
	border-bottom: 2px solid var(--accent, var(--color-accent));
}

.featured-list-thumb img,
.featured-list-thumb .post-thumb-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.featured-list .post-badge {
	display: block;
	margin-bottom: 4px;
}

.featured-list-title {
	display: block;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 4px;
	transition: color var(--transition);
}

.featured-list li a:hover .featured-list-title {
	color: var(--accent, var(--color-accent));
}

@media (min-width: 900px) {
	.featured-split-grid {
		grid-template-columns: 1.4fr 1fr;
		align-items: start;
	}
}

/* Karma blok: büyük kart + küçük ızgara (referanstaki "GÜNDEM" bölümü) */
.mixed-block-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
}

.post-card-large .post-card-image {
	aspect-ratio: 16 / 10;
}

.post-card-large .post-card-title {
	font-size: 1.25rem;
}

@media (min-width: 900px) {
	.mixed-block-grid {
		grid-template-columns: 1.2fr 1fr;
		align-items: start;
	}
}

/* Kategori blokları */
.category-block {
	margin: 40px 0;
}

.category-block-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 14px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--color-border);
}

.category-block-header h2 {
	margin: 0;
	font-size: 1.35rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 10px;
}

.category-block-bar {
	width: 6px;
	height: 22px;
	border-radius: 3px;
	background: var(--accent, var(--color-accent));
	display: inline-block;
}

.category-block-more {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--accent, var(--color-accent));
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: gap var(--transition);
}

.category-block-more:hover {
	gap: 8px;
}

.category-block-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
}

/*
 * Sidebar'lı dar sütun içinde (ör. tekil haber sayfasındaki "İlgili Haberler"),
 * sabit 4 sütun yerine mevcut genişliğe göre kendini ayarlayan bir ızgara kullan.
 */
.archive-main .category-block-grid {
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/*
 * Üç sütunlu düzen (sol: kategoriler, orta: içerik, sağ: popüler) — CSS Grid
 * yerine bilinçli olarak Flexbox kullanılıyor: sabit genişlikli sütunlar
 * (flex-basis) + ortadaki esnek sütun (flex: 1 1 0%) bu temada başka yerlerde
 * (ör. .post-row-link) zaten kanıtlanmış, öngörülebilir bir örüntü.
 */
.archive-layout {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	align-items: flex-start;
	margin-top: 32px;
}

.archive-main {
	flex: 1 1 100%;
	min-width: 0;
	width: 100%;
}

.post-row-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.post-row {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.post-row:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-lift);
	border-color: color-mix(in srgb, var(--accent, var(--color-accent)) 30%, var(--color-border));
}

.post-row-link {
	display: flex;
	align-items: stretch;
}

.post-row-image {
	width: 260px;
	flex-shrink: 0;
	aspect-ratio: 4 / 3;
	border-right: 3px solid var(--accent, var(--color-accent));
}

.post-row-image img,
.post-row-image .post-thumb-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-row-body {
	padding: 20px 26px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}

.post-row-body .post-badge {
	align-self: flex-start;
	margin-bottom: 10px;
}

.post-row-title {
	font-size: 1.2rem;
	font-weight: 700;
	margin: 0 0 8px;
	line-height: 1.32;
}

.post-row-excerpt {
	color: var(--color-muted);
	font-size: 0.92rem;
	line-height: 1.55;
	margin: 0 0 12px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 640px) {
	.post-row-link {
		flex-direction: column;
	}

	.post-row-image {
		width: 100%;
		aspect-ratio: 16 / 9;
		border-right: none;
		border-bottom: 3px solid var(--accent, var(--color-accent));
	}

	.post-row-body {
		padding: 16px 18px;
	}
}

.archive-sidebar {
	display: flex;
	flex-direction: column;
	gap: 24px;
	flex: 1 1 100%;
	width: 100%;
}

.sidebar-widget {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-top: 3px solid var(--accent, var(--color-accent));
	border-radius: var(--radius-md);
	padding: 22px;
}

.sidebar-widget-title {
	margin: 0 0 18px;
	font-size: 0.82rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text);
	padding-bottom: 14px;
	border-bottom: 1px solid var(--color-border);
	display: flex;
	align-items: center;
	gap: 8px;
}

.popular-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.popular-list li {
	border-bottom: 1px solid var(--color-border);
}

.popular-list li:last-child {
	border-bottom: none;
}

.popular-list a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 0;
}

.popular-list-rank {
	font-size: 1.3rem;
	font-weight: 800;
	font-style: italic;
	color: var(--accent, var(--color-accent));
	opacity: 0.8;
	flex-shrink: 0;
	line-height: 1;
	transition: opacity var(--transition);
}

.popular-list li a:hover .popular-list-rank {
	opacity: 1;
}

.popular-list-thumb {
	display: block;
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.popular-list-thumb img,
.popular-list-thumb .post-thumb-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.popular-list-body {
	min-width: 0;
}

.popular-list-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.35;
	margin-bottom: 4px;
	transition: color var(--transition);
}

.popular-list li a:hover .popular-list-title {
	color: var(--accent, var(--color-accent));
}

/* "Bu Sayfada" bölüm gezinme kutusu (TOC) — uzun/belgesel içeriklerde görünür */
.toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-left: 2px solid var(--color-border);
}

.toc-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0 8px 16px;
	margin-left: -2px;
	border-left: 2px solid transparent;
	font-size: 0.86rem;
	font-weight: 500;
	color: var(--color-muted);
	transition: color var(--transition), border-color var(--transition);
}

.toc-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-border);
	flex-shrink: 0;
	transition: background var(--transition);
}

.toc-link:hover {
	color: var(--color-text);
}

.toc-link.is-active {
	border-left-color: var(--accent, var(--color-accent));
	color: var(--color-text);
	font-weight: 700;
}

.toc-link.is-active .toc-dot {
	background: var(--accent, var(--color-accent));
}

.categories-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.categories-list li {
	border-bottom: 1px solid var(--color-border);
}

.categories-list li:last-child {
	border-bottom: none;
}

.categories-list a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 0;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--color-text);
	transition: color var(--transition);
}

.categories-list-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent, var(--color-accent));
	flex-shrink: 0;
}

.categories-list-name {
	flex: 1 1 auto;
}

.categories-list-count {
	color: var(--color-muted);
	font-size: 0.78rem;
	font-weight: 700;
}

.categories-list li a:hover,
.categories-list li.is-active a {
	color: var(--accent, var(--color-accent));
}

.categories-list li.is-active {
	position: relative;
}

.archive-sidebar-left {
	display: none;
}

@media (min-width: 1024px) {
	.archive-sidebar-left {
		display: flex;
		flex: 0 0 190px;
		width: 190px;
	}

	.archive-sidebar:not(.archive-sidebar-left) {
		flex: 0 0 260px;
		width: 260px;
	}

	/*
	 * Ana içerik uzun bir haberde sidebar'lardan çok daha fazla kayabiliyor;
	 * sidebar'lar sabit (sticky) kalarak kaydırma sırasında yukarıda "yalnız"
	 * kalıp geride kalmak yerine görünür alanda takip ediyor.
	 */
	.archive-sidebar {
		position: sticky;
		top: 96px;
		max-height: calc(100vh - 116px);
		overflow-y: auto;
	}

	.archive-main {
		flex: 1 1 0%;
		width: auto;
	}
}

/*
 * Haber listelerinin sonunda, footer'dan hemen önce: okuyucuyu başka
 * kategorilere yönlendiren yatay pill şeridi.
 */
.category-explore-strip {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--color-border);
}

.category-explore-title {
	font-size: 0.85rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-muted);
	margin: 0 0 18px;
}

.category-explore-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.category-explore-list a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	border-radius: 999px;
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--color-text);
	transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.category-explore-list a::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent, var(--color-accent));
	flex-shrink: 0;
}

.category-explore-list a:hover {
	border-color: var(--accent, var(--color-accent));
	color: var(--accent, var(--color-accent));
	background: color-mix(in srgb, var(--accent, var(--color-accent)) 10%, var(--color-surface));
}

/*
 * Otomatik carousel: kartlar belirli aralıklarla (JS ile, bkz. assets/js/main.js) bir adım kayar.
 * İlk N kart (görünür sayı kadar) track'in sonuna bir kez daha eklenir (PHP tarafında,
 * denizlidigitale_render_auto_carousel) ve döngü sonuna gelince JS animasyonsuz başa sarar.
 */
.auto-carousel {
	overflow: hidden;
	width: 100%;
	cursor: grab;
	touch-action: pan-y;
}

/* Tarayıcının doğal resim sürükleme (drag-and-drop) davranışı, fare ile
   kaydırma jestini yakalayıp JS'in pointermove almasını engeller; bu yüzden
   carousel içindeki tüm görseller için kapatılır. */
.auto-carousel img {
	-webkit-user-drag: none;
	user-select: none;
}

.auto-carousel.is-dragging {
	cursor: grabbing;
	user-select: none;
}

.auto-carousel-track {
	display: flex;
	gap: 22px;
	will-change: transform;
}

.auto-carousel .post-card-media {
	flex: 0 0 calc(25% - 16.5px);
	width: calc(25% - 16.5px);
	min-width: 220px;
}

@media (max-width: 899px) {
	.auto-carousel .post-card-media {
		flex: 0 0 78%;
		width: 78%;
	}
}

/* Görsel ağırlıklı kart — resim öne çıkar, yazı üzerinde soluk bir overlay, üzerine gelince büyür */
.post-card-media {
	position: relative;
	display: block;
	border-radius: var(--radius-md);
	overflow: hidden;
	aspect-ratio: 16 / 11;
	box-shadow: var(--shadow-sm);
	transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.post-card-media:hover {
	transform: scale(1.07);
	box-shadow: var(--shadow-lift);
	z-index: 5;
}

.post-card-media-link {
	display: block;
	width: 100%;
	height: 100%;
}

.post-card-media-image {
	width: 100%;
	height: 100%;
	border-bottom: 3px solid var(--accent, var(--color-accent));
}

.post-card-media-image img,
.post-card-media-image .post-thumb-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-card-media-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 34px 14px 12px;
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.82) 82%);
}

.post-card-media-title {
	display: block;
	color: rgba(255, 255, 255, 0.88);
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 0.98rem;
	line-height: 1.3;
	margin: 0 0 4px;
}

.post-card-media-date {
	display: block;
	color: rgba(255, 255, 255, 0.45);
	font-size: 0.72rem;
}

/* Sabit (kaymayan) ızgara — anasayfada carousel'e alternatif düzen */
.static-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 640px) {
	.static-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.static-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Bento: 1 büyük + 3 küçük */
.bento-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}

.bento-small .post-card-media {
	aspect-ratio: 16 / 11;
}

@media (min-width: 782px) {
	.bento-grid {
		grid-template-columns: 1.6fr 1fr;
		grid-auto-rows: 1fr;
	}

	.bento-main {
		grid-row: 1 / span 3;
	}

	.bento-main .post-card-media {
		height: 100%;
		aspect-ratio: auto;
	}
}

/*
 * Sekmeli alt kategori merkezi (ör. Spor) — alt kategoriler arasında JS ile
 * (bkz. main.js) sayfa yenilenmeden geçiş yapılan, sitede tekil bir bileşen.
 */
.category-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 22px;
}

.category-tab-btn {
	appearance: none;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	color: var(--color-muted);
	font-family: var(--font-sans);
	font-size: 0.85rem;
	font-weight: 700;
	padding: 9px 18px;
	border-radius: 999px;
	cursor: pointer;
	transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.category-tab-btn:hover {
	color: var(--color-text);
	border-color: var(--accent, var(--color-accent));
}

.category-tab-btn.is-active {
	background: var(--accent, var(--color-accent));
	border-color: var(--accent, var(--color-accent));
	color: #fff;
}

.category-tab-panel {
	display: none;
}

.category-tab-panel.is-active {
	display: block;
	animation: category-tab-fade 300ms ease;
}

@keyframes category-tab-fade {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Kartlar */
.post-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.post-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lift);
	border-color: color-mix(in srgb, var(--accent, var(--color-accent)) 30%, var(--color-border));
}

.post-card-link {
	display: block;
}

.post-card-image {
	aspect-ratio: 4 / 3;
	border-bottom: 3px solid var(--accent, var(--color-accent));
}

.post-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-card-body {
	padding: 16px 18px 18px;
}

.post-card-title {
	font-size: 1.05rem;
	font-weight: 600;
	margin: 0 0 8px;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.post-card-excerpt {
	color: var(--color-muted);
	font-size: 0.88rem;
	margin: 0 0 10px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/*
 * Haber detay — NOT: sınıf adı bilerek "single-post-article" (sade "single-post"
 * değil). WordPress, tekil haber sayfalarında <body> etiketine otomatik olarak
 * "single-post" class'ını zaten ekliyor (body_class()); makale kutusu da aynı
 * adı kullansaydı body'nin KENDİSİ 760px'e sıkışıp tüm sayfa düzenini bozuyordu.
 */
.single-post-article {
	max-width: 760px;
	margin: 0 auto;
	padding: 32px 0 8px;
}

.single-post-title {
	font-size: 2rem;
	font-weight: 600;
	margin: 0 0 14px;
}

.single-post-meta {
	color: var(--color-muted);
	font-size: 0.88rem;
	display: flex;
	align-items: center;
}

.single-post-image {
	margin: 24px 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	box-shadow: var(--shadow-md);
}

.single-post-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.single-post-content {
	font-size: 1.1rem;
}

.single-post-content p {
	margin: 0 0 1.3em;
}

.single-post-content h2 {
	font-size: 1.5rem;
	margin: 1.6em 0 0.7em;
	scroll-margin-top: 100px;
}

/*
 * Giriş paragrafına büyük ilk harf (drop cap) — belgesel/gazete kimliğini
 * güçlendiren editoryal bir dokunuş. Renk, o haberin kategori vurgu rengini
 * kullanıyor (--accent, .single-post-article/.hikaye-content'te satır içi
 * style ile tanımlanıyor).
 */
.single-post-content > p:first-of-type::first-letter {
	font-family: var(--font-display);
	font-size: 3.6rem;
	font-weight: 600;
	float: left;
	line-height: 0.82;
	padding: 4px 10px 0 0;
	color: var(--accent, var(--color-accent));
}

/* Alıntı (pull-quote) — haber/hikaye içeriğindeki <blockquote> için */
.single-post-content blockquote {
	position: relative;
	margin: 32px 0;
	padding: 4px 12px 4px 32px;
	border-left: 4px solid var(--accent, var(--color-accent));
}

.single-post-content blockquote::before {
	content: '\201C';
	position: absolute;
	left: -4px;
	top: -14px;
	font-family: var(--font-display);
	font-size: 3.2rem;
	color: var(--accent, var(--color-accent));
	opacity: 0.35;
	line-height: 1;
}

.single-post-content blockquote p {
	font-family: var(--font-display);
	font-size: 1.3rem;
	font-style: italic;
	line-height: 1.5;
	color: var(--color-text);
	margin: 0 0 10px;
}

.single-post-content blockquote cite {
	display: block;
	font-family: var(--font-sans);
	font-style: normal;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-muted);
}

/* Haber/hikaye içeriğine gömülü izlenebilir video */
.content-video {
	margin: 32px 0;
}

.content-video video {
	width: 100%;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	aspect-ratio: 16 / 9;
	background: #000;
	display: block;
}

.content-video-caption {
	margin: 10px 0 0;
	font-size: 0.82rem;
	color: var(--color-muted);
	font-style: italic;
}

/* "Bağlam" akordeon kutusu — <details>/<summary> ile, JS gerektirmez */
.context-box {
	margin: 40px 0;
	padding: 24px 26px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.context-box-title {
	font-size: 0.8rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-muted);
	margin: 0 0 6px;
}

.context-item {
	border-top: 1px solid var(--color-border);
}

.context-item:first-of-type {
	border-top: none;
}

.context-item summary {
	cursor: pointer;
	padding: 15px 0;
	font-weight: 700;
	font-size: 0.98rem;
	color: var(--color-text);
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.context-item summary::-webkit-details-marker {
	display: none;
}

.context-item summary::after {
	content: '+';
	flex-shrink: 0;
	font-size: 1.3rem;
	line-height: 1;
	color: var(--accent, var(--color-accent));
	transition: transform var(--transition);
}

.context-item[open] summary::after {
	transform: rotate(45deg);
}

.context-item summary:hover {
	color: var(--accent, var(--color-accent));
}

.context-item-body {
	padding: 0 0 18px;
	color: var(--color-muted);
	font-size: 0.92rem;
	line-height: 1.6;
}

.post-tag {
	display: inline-block;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	padding: 5px 14px;
	margin: 4px 6px 0 0;
	font-size: 0.8rem;
	font-weight: 500;
	transition: border-color var(--transition), color var(--transition);
}

.post-tag:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.related-posts {
	max-width: 760px;
	margin: 44px auto 0;
}

/* Arşiv / arama / 404 */
.archive-header {
	padding: 28px 20px 8px;
}

/* Kategori arşivinin üst bölümü: container'ın dışında durur ama kendi geniş
   bir üst sınırı (max-width) var, bu yüzden sağda ve solda ölçülü boşluklar
   kalır (referans görseldeki gibi) — ekranın tamamen kenarına yapışmaz.
   Solda başlık/açıklama, sağında editörün elle seçtiği önizleme kartları
   (bkz. denizlidigitale_get_category_spotlight_posts). Mobilde tek sütuna
   düşer (metin üstte, kartlar altta). */
.category-hero.has-spotlight {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: center;
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
}

/* Alt bölüm (kategoriler / haber listesi / popüler haberler), üstteki
   önizleme şeridiyle aynı genişliğe ulaşsın diye normal .container'dan
   (1180px) daha geniş bir üst sınır kullanır (bkz. archive.php). */
.container-wide {
	max-width: 1600px;
}

.category-hero-text {
	min-width: 0;
}

/* Başlığın altındaki kısa kırmızı vurgu çizgisi (referans görseldeki gibi) */
.category-hero-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.category-hero-title-bar {
	width: 46px;
	height: 4px;
	border-radius: 2px;
	background: var(--color-accent);
}

.category-hero-spotlight {
	min-width: 0;
	padding: 14px 0;
}

/* Önizleme şeridi: 4 haber TEK sırada, eşit genişlikte. İlk haber "öne çıkan"
   (tam görsel + üzerinde yazı, sürekli görünen vurgu çerçevesi), kalan 3
   haber sade (üstte görsel, altta başlık/özet/ok) kart olur — referans
   görseldeki "biri öne çıkan, diğerleri sade, hepsi aynı sırada" görünümüne
   uyar. Satırın tamamı sabit bir yüksekliğe sahiptir, böylece dört kart da
   (iç yapıları farklı olsa dahi) tam olarak aynı boyda hizalanır. */
.spotlight-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 190px;
	gap: 14px;
}

.spotlight-card-hero,
.spotlight-card {
	width: 100%;
	height: 100%;
	min-width: 0;
}

/* .post-card-media'dan miras kalan aspect-ratio, sabit satır yüksekliğiyle
   çakışıp kartı kendi grid sütunundan taşırıyordu (komşu karta biniyordu) —
   burada iptal edilip genişlik/yükseklik tamamen grid hücresine bırakıldı. */
.spotlight-card-hero {
	position: relative;
	aspect-ratio: unset;
	border: 2px solid var(--accent, var(--color-accent));
	transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.spotlight-card-hero .spotlight-card-excerpt {
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.8rem;
	margin: 4px 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.spotlight-card-hero .spotlight-card-arrow {
	position: absolute;
	right: 16px;
	bottom: 14px;
	color: var(--accent, var(--color-accent));
	font-size: 1.1rem;
}

.spotlight-card-hero:hover {
	transform: scale(1.06);
	box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6);
	z-index: 5;
}

.spotlight-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-surface);
	box-shadow: var(--shadow-sm);
	transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.spotlight-card:hover {
	transform: scale(1.06);
	box-shadow: var(--shadow-lift);
	z-index: 5;
}

.spotlight-card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.spotlight-card-image {
	flex: 0 0 58%;
	border-bottom: 3px solid var(--accent, var(--color-accent));
}

.spotlight-card-image img,
.spotlight-card-image .post-thumb-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.spotlight-card-body {
	position: relative;
	flex: 1;
	min-height: 0;
	padding: 8px 30px 10px 10px;
}

.spotlight-card-title {
	font-family: var(--font-display);
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 3px;
	color: var(--color-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.spotlight-card-excerpt {
	color: var(--color-muted);
	font-size: 0.72rem;
	line-height: 1.35;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.spotlight-card-body .spotlight-card-arrow {
	position: absolute;
	right: 10px;
	bottom: 8px;
	color: var(--accent, var(--color-accent));
	font-size: 0.95rem;
}

@media (min-width: 640px) {
	.spotlight-row {
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: 240px;
	}
}

@media (min-width: 1024px) {
	.category-hero.has-spotlight {
		grid-template-columns: minmax(240px, 340px) 1fr;
		gap: 36px;
	}

	.spotlight-row {
		grid-auto-rows: 260px;
	}
}

.archive-header h1 {
	font-size: 1.7rem;
	font-weight: 600;
}

.error-404 {
	text-align: center;
	padding: 72px 0;
	max-width: 480px;
	margin: 0 auto;
}

.error-404-code {
	display: block;
	font-family: var(--font-display);
	font-size: 5rem;
	font-weight: 600;
	color: var(--color-accent);
	line-height: 1;
	margin-bottom: 8px;
}

.error-404-search {
	margin: 24px auto;
}

.button-pill {
	display: inline-block;
	background: var(--color-text);
	color: var(--color-bg);
	padding: 10px 24px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.9rem;
	transition: opacity var(--transition);
}

.button-pill:hover {
	opacity: 0.85;
}

/* Sayfalama */
.pagination,
.navigation.pagination {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin: 32px 0;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-text);
}

.pagination .page-numbers.current {
	background: var(--color-text);
	color: var(--color-bg);
	border-color: var(--color-text);
}

/* Footer */
.site-footer {
	margin-top: 64px;
	background: var(--color-ink);
	color: rgba(255, 255, 255, 0.7);
	border-top: 1px solid var(--color-border);
}

.site-footer-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	padding-top: 48px;
	padding-bottom: 24px;
}

.footer-brand-logo {
	height: 34px;
	width: auto;
	margin-bottom: 14px;
}

.footer-about p {
	max-width: 320px;
	font-size: 0.9rem;
}

.newsletter-form {
	display: flex;
	gap: 8px;
	margin: 14px 0 18px;
}

.newsletter-form input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 14px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	font-size: 0.85rem;
}

.newsletter-form input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.newsletter-form button {
	background: var(--color-accent);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 0 20px;
	font-weight: 700;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: opacity var(--transition);
	white-space: nowrap;
}

.newsletter-form button:hover {
	opacity: 0.85;
}

.footer-social {
	display: flex;
	gap: 10px;
}

.footer-social a {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	font-weight: 700;
	transition: border-color var(--transition), color var(--transition);
}

.footer-social a:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.footer-menu-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-menu-list li a {
	display: block;
	padding: 6px 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.9rem;
	transition: color var(--transition);
}

.footer-menu-list li a:hover {
	color: #fff;
}

.footer-widget-title {
	color: #fff;
	font-size: 1rem;
	margin: 0 0 10px;
}

.site-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding: 14px 20px;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.5);
}

/* Tablet ve üzeri */
@media (min-width: 640px) {
	.category-block-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 782px) {
	.son-dakika-more {
		display: block;
	}

	.featured-post-link {
		display: grid;
		grid-template-columns: 1.3fr 1fr;
		gap: 32px;
		align-items: center;
	}

	.featured-post-body {
		padding-top: 0;
	}

	.featured-post-title {
		font-size: 2.2rem;
	}

	.category-block-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.site-footer-inner {
		grid-template-columns: 2fr 1fr 1fr;
	}
}

/*
 * Yatay masaüstü menüsü + arama + header düzeni — bkz. yukarıdaki not (1100px eşiği).
 */
@media (min-width: 1320px) {
	.menu-toggle {
		display: none;
	}

	.site-header-inner {
		flex-wrap: nowrap;
		gap: 14px;
		padding: 14px 20px;
	}

	.site-branding {
		flex-shrink: 0;
	}

	/* Son Dakika menüden kaldırılınca üstteki menüde boşluk açıldı; logo bu alanda biraz büyüyebilir. */
	.site-branding-logo {
		height: 54px;
	}

	.primary-navigation {
		display: block;
		width: auto;
		order: 2;
		/*
		 * flex-shrink: 0 — nav'ın KENDİSİ küçülmesin. Aksi halde (flex-grow/shrink
		 * serbestken) nav kutusu sığmayan içerikten daha dar bir kutuya sıkışıyor,
		 * içindeki (kendisi küçülmeyen) menü öğeleri kutunun dışına taşıp yanındaki
		 * arama ikonunun üzerine biniyordu — asıl "menü arama kutusuna biniyor" hatası buydu.
		 */
		flex-shrink: 0;
		/*
		 * Bilerek overflow:hidden/auto KULLANILMIYOR — bu, dropdown alt menülerin ve
		 * ipucu kutularının (position: absolute, taşan öğeler) kırpılmasına neden olurdu.
		 * 1320px+ eşiğinde içerik zaten rahatlıkla sığıyor.
		 */
	}

	.primary-menu-list {
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 16px;
		padding: 0;
	}

	.primary-menu-list > li {
		flex-shrink: 0;
	}

	.primary-menu-list li a {
		border-bottom: none;
		padding: 8px 0;
		position: relative;
		font-size: 0.9rem;
		white-space: nowrap;
	}

	.primary-menu-list li a::after {
		content: '';
		position: absolute;
		left: 0;
		right: 100%;
		bottom: 0;
		height: 2px;
		background: var(--color-accent);
		transition: right var(--transition);
	}

	.primary-menu-list li a:hover::after {
		right: 0;
	}

	/*
	 * Arama kutusu daralıp bir ikona dönüşür, odaklanınca normal akıştan çıkarılıp
	 * (position: absolute) sağa yaslı yüzen bir kutu olarak açılır — menünün
	 * genişliğini/yerleşimini hiç etkilemez, üzerine binme olmaz.
	 */
	.site-search {
		/* order: 99 — DOM'da zaten menüden sonra geliyor (bkz. header.php), yüksek
		   bir order değeriyle her ihtimale karşı en sonda kalması garanti ediliyor. */
		order: 99;
		flex: 0 0 auto;
		position: relative;
	}

	.site-search input {
		width: 36px;
		padding: 9px 8px 9px 34px;
		cursor: pointer;
		transition: width 200ms ease, box-shadow 200ms ease;
	}

	.site-search:focus-within input {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 240px;
		background: var(--color-surface-raised);
		box-shadow: var(--shadow-lift);
		cursor: text;
		z-index: 500;
	}
}

/* Breadcrumb */
.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 0.8rem;
	color: var(--color-muted);
	padding: 18px 0 0;
}

.breadcrumb a {
	color: var(--color-muted);
}

.breadcrumb a:hover {
	color: var(--color-accent);
}

/* Hikaye (belgesel) sayfaları */
.hikaye-archive-header {
	text-align: center;
	max-width: 640px;
	margin: 0 auto;
	padding: 36px 0 12px;
}

.hikaye-archive-header h1 {
	font-size: 2rem;
	margin: 14px 0;
}

.post-badge-outline {
	background: transparent;
	border: 1px solid var(--accent, var(--color-accent));
}

.hikaye-header {
	max-width: 780px;
	margin: 18px auto 0;
	text-align: center;
}

.hikaye-title {
	font-size: 2.3rem;
	margin: 14px 0;
}

.hikaye-lead {
	color: var(--color-muted);
	font-size: 1.1rem;
}

.hikaye-meta {
	color: var(--color-muted);
	font-size: 0.85rem;
	margin-top: 10px;
}

.hikaye-share {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 18px 0 0;
	font-size: 0.8rem;
	color: var(--color-muted);
}

.hikaye-share a {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.75rem;
	transition: border-color var(--transition), color var(--transition);
}

.hikaye-share a:hover {
	border-color: var(--accent, var(--color-accent));
	color: var(--accent, var(--color-accent));
}

.hikaye-hero-image {
	max-width: 980px;
	margin: 28px auto;
	aspect-ratio: 21 / 9;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-md);
}

.hikaye-hero-image img,
.hikaye-hero-image .post-thumb-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hikaye-body {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	max-width: 980px;
	margin: 0 auto 60px;
}

.hikaye-gallery-title {
	font-size: 1.05rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
}

.hikaye-gallery-widget {
	margin-bottom: 32px;
}

.hikaye-gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

.hikaye-gallery-grid img {
	border-radius: var(--radius-sm);
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* İlginizi Çekebilir — sayfanın altında, tam genişlikte, üzerine gelince büyüyen kartlar */
.hikaye-related-section {
	max-width: 980px;
	margin: 8px auto 60px;
}

.hikaye-related-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
}

/*
 * "En Yeni Hikaye" kapağı: sinema afişi tarzı — tüm görsel koyu bir perdeyle
 * karartılır, başlık/metin tam ortada, dramatik ve ortalanmış durur.
 */
.hikaye-cover-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--accent, var(--color-accent));
	font-size: 0.8rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	margin: 28px 0 12px;
}

.hikaye-cover {
	position: relative;
	display: block;
	min-height: 520px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	transition: box-shadow var(--transition);
}

.hikaye-cover:hover {
	box-shadow: var(--shadow-lift);
}

.hikaye-cover-image {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hikaye-cover-image img,
.hikaye-cover-image .post-thumb-placeholder,
.hikaye-cover-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hikaye-cover:hover .hikaye-cover-image img,
.hikaye-cover:hover .hikaye-cover-video {
	transform: scale(1.07);
}

.hikaye-cover-overlay {
	position: relative;
	z-index: 1;
	min-height: 520px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background:
		radial-gradient(ellipse at center, rgba(4, 4, 6, 0.55) 0%, rgba(4, 4, 6, 0.8) 62%, rgba(4, 4, 6, 0.94) 100%),
		linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, transparent 45%);
	padding: 48px 32px;
}

.hikaye-cover-body {
	max-width: 640px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.hikaye-cover-body .post-badge {
	margin-bottom: 16px;
}

.hikaye-cover-title {
	font-family: var(--font-display);
	font-size: 2.6rem;
	line-height: 1.16;
	color: #fff;
	margin: 0 0 18px;
	text-shadow: 0 4px 28px rgba(0, 0, 0, 0.55);
}

.hikaye-cover-excerpt {
	color: rgba(255, 255, 255, 0.85);
	font-size: 1.04rem;
	line-height: 1.6;
	margin: 0 0 26px;
}

.hikaye-layout {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	align-items: flex-start;
	margin-top: 36px;
}

.hikaye-main {
	flex: 1 1 100%;
	min-width: 0;
	width: 100%;
}

.hikaye-sidebar {
	flex: 1 1 100%;
	width: 100%;
}

.hikaye-sidebar .hikaye-about-text {
	color: var(--color-muted);
	font-size: 0.9rem;
	line-height: 1.65;
	margin: 0;
}

/* "Bu sayfada" kutusu mobilde giriş paragrafından sonra (bkz. single-hikaye.php),
   masaüstünde ise sidebar'da sabit görünür — aynı anda ikisi birden gösterilmez. */
.hikaye-sidebar .toc-widget {
	display: none;
}

.hikaye-toc-mobile {
	margin: 8px 0 32px;
}

@media (min-width: 900px) {
	.hikaye-sidebar .toc-widget {
		display: block;
	}

	.hikaye-toc-mobile {
		display: none;
	}
}

.category-about-text {
	color: var(--color-muted);
	font-size: 0.9rem;
	line-height: 1.65;
	margin: 0;
}

@media (max-width: 640px) {
	.hikaye-cover,
	.hikaye-cover-overlay {
		min-height: 340px;
	}

	.hikaye-cover-overlay {
		padding: 26px 22px 24px;
	}

	.hikaye-cover-title {
		font-size: 1.6rem;
	}
}

@media (min-width: 1024px) {
	.hikaye-main {
		flex: 1 1 0%;
		width: auto;
	}

	.hikaye-sidebar {
		flex: 0 0 300px;
		width: 300px;
		position: sticky;
		top: 96px;
		max-height: calc(100vh - 116px);
		overflow-y: auto;
	}

	.hikaye-main .hikaye-archive-grid {
		margin-top: 0;
	}
}

/* "Diğer Hikayeler" ızgarası: sidebar'lı dar sütunda küçük kalmasın diye
 * daha az sütun ve daha büyük kartlarla, tekil metin de biraz büyütüldü. */
.hikaye-main .hikaye-archive-grid {
	grid-template-columns: 1fr;
}

@media (min-width: 560px) {
	.hikaye-main .hikaye-archive-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.hikaye-main .hikaye-related-card {
	aspect-ratio: 4 / 3;
}

@media (min-width: 560px) {
	.hikaye-main .hikaye-related-card {
		aspect-ratio: 16 / 11;
	}
}

.hikaye-main .hikaye-related-card-title {
	font-size: 1.2rem;
	font-weight: 700;
}

.hikaye-main .hikaye-related-card-overlay {
	padding: 24px 20px 20px;
}

.hikaye-archive-grid {
	margin-top: 32px;
	margin-bottom: 40px;
}

@media (min-width: 900px) {
	.hikaye-archive-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.hikaye-related-card {
	position: relative;
	display: block;
	border-radius: var(--radius-md);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	box-shadow: var(--shadow-sm);
	border-bottom: 3px solid var(--accent, var(--color-accent));
	transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hikaye-related-card:hover {
	transform: scale(1.06);
	box-shadow: var(--shadow-lift), 0 0 0 1px color-mix(in srgb, var(--accent, var(--color-accent)) 45%, transparent);
	z-index: 5;
}

.hikaye-related-card-image {
	width: 100%;
	height: 100%;
}

.hikaye-related-card-image img,
.hikaye-related-card-image .post-thumb-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hikaye-related-card-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 18px 14px 14px;
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.9) 85%);
}

.hikaye-related-card-overlay .post-badge {
	margin-bottom: 6px;
}

.hikaye-related-card-title {
	display: block;
	color: #fff;
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
}

@media (min-width: 700px) {
	.hikaye-related-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Yorumlar */
.comments-area {
	max-width: 760px;
	margin: 40px auto 0;
}

.comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.comment-list .comment {
	border-top: 1px solid var(--color-border);
	padding: 16px 0;
}

/*
 * Yorum formu — WordPress'in comment_form() ürettiği varsayılan işaretlemeyi
 * (ID/class'ları biz seçmiyoruz, WP'nin kendisi üretiyor) koyu temaya uyduruyoruz.
 * Aksi halde form alanları tarayıcı varsayılanıyla (beyaz kutular) geliyor.
 */
.comment-respond {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--color-border);
}

.comment-reply-title {
	font-family: var(--font-display);
	font-size: 1.4rem;
	margin: 0 0 6px;
}

.comment-reply-title small a {
	font-family: var(--font-sans);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--color-accent);
	margin-left: 10px;
}

.comment-notes,
.comment-form-cookies-consent label {
	color: var(--color-muted);
	font-size: 0.85rem;
}

.comment-form p {
	margin: 0 0 18px;
}

.comment-form label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-text);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	max-width: 100%;
	padding: 10px 14px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-family: var(--font-sans);
	font-size: 0.92rem;
	color: var(--color-text);
	transition: border-color var(--transition), box-shadow var(--transition);
}

.comment-form textarea {
	resize: vertical;
	min-height: 130px;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
}

.comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: 8px;
}

.comment-form-cookies-consent input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--color-accent);
	flex-shrink: 0;
}

.comment-form-cookies-consent label {
	margin: 0;
}

.comment-form .form-submit {
	margin-bottom: 0;
}

.comment-form #submit {
	display: inline-flex;
	align-items: center;
	background: var(--color-accent);
	color: #fff;
	border: none;
	padding: 12px 28px;
	border-radius: 999px;
	font-family: var(--font-sans);
	font-size: 0.92rem;
	font-weight: 700;
	cursor: pointer;
	transition: transform var(--transition), box-shadow var(--transition);
}

.comment-form #submit:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

@media (min-width: 900px) {
	.hikaye-body {
		grid-template-columns: 2fr 1fr;
		align-items: start;
	}
}

/* Genel resim pop-up'ı (lightbox) — bir görsele bağlanan herhangi bir linke
   tıklandığında sayfadan ayrılmadan görseli büyütülmüş şekilde gösterir
   (bkz. assets/js/main.js). Sitenin geri kalanıyla tutarlı, saf koyu/siyah
   bir arka plan kullanır; renkli hiçbir öğe yoktur. */
.lightbox-overlay {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	background: rgba(4, 4, 6, 0.94);
	opacity: 0;
	visibility: hidden;
	transition: opacity 250ms ease, visibility 250ms ease;
}

.lightbox-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.lightbox-img {
	max-width: 100%;
	max-height: 100%;
	border-radius: var(--radius-md);
	box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.8);
	transform: scale(0.96);
	transition: transform 250ms ease;
}

.lightbox-overlay.is-open .lightbox-img {
	transform: scale(1);
}

.lightbox-close {
	position: absolute;
	top: 20px;
	right: 24px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	transition: color var(--transition), border-color var(--transition);
}

.lightbox-close:hover {
	color: var(--accent, var(--color-accent));
	border-color: var(--accent, var(--color-accent));
}

body.lightbox-locked {
	overflow: hidden;
}