/* ============================================================================
 * Bizden Haberler — haber detayı (single-haber.php)
 *
 * Kırıntı + TEK iki kolonlu blok: solda öne çıkarılan görsel paneli, sağda
 * H1 + Gutenberg içeriği + galeri (yayın tarihi yalnız liste kartında).
 * Konteyner genişlikleri, kırıntı tipografisi ve sayfa başlığı ritmi tarif
 * detayıyla (recipe-detail.css) ve main.css'teki sayfa başlığı token'larıyla
 * aynıdır; başlık/gövde ölçeği sitenin görsel+metin kartlarından gelir.
 *
 * GÖRSEL PANELİ: İÇERİK GÜDÜMLÜ YÜKSEKLİK + EKRAN TAVANI + STICKY.
 * Yüklenen görselin ölçüleri sayfa düzenini ASLA değiştirmez; yalnız panel
 * içindeki kırpma farklılaşır. Ayrıntı: "İki kolonlu blok".
 *
 * Kırılımlar:
 *   ≥ 1024px    iki kolon (46fr / 54fr), aralık clamp(36px, 3.5vw, 48px),
 *               içerik güdümlü + sticky görsel paneli
 *   ≤ 1023px    tek kolon: önce görsel (16/11 çerçeve, sticky yok), sonra içerik
 * ==========================================================================*/

.haber-detail-main {
	padding-bottom: 72px;
}
@media (max-width: 1100px) {
	.haber-detail-main { padding-bottom: 56px; }
}
@media (max-width: 767px) {
	.haber-detail-main { padding-bottom: 40px; }
}

.haber-detail__inner {
	width: min(1640px, calc(100vw - 100px));
	margin: 0 auto;
}
@media (min-width: 1101px) and (max-width: 1600px) {
	.haber-detail__inner { width: calc(100vw - 209px); }
}
@media (max-width: 1100px) {
	.haber-detail__inner { width: calc(100% - 48px); }
}
@media (max-width: 767px) {
	.haber-detail__inner { width: calc(100% - 32px); }
}

/* ---- Kırıntı — tarif detayındakiyle birebir aynı görünüm ---- */
.haber-detail__breadcrumb {
	margin: var(--tada-page-head-top) 0 var(--tada-page-head-bottom);
	font-size: 0;
}
.haber-detail__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: #000;
}
.haber-detail__crumbs li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}
.haber-detail__crumbs li:not(:last-child)::after {
	content: "›";
	font-weight: 500;
	color: #000;
}
.haber-detail__crumbs a,
.haber-detail__crumbs a:link,
.haber-detail__crumbs a:visited {
	color: #000;
	text-decoration: none;
	transition: color .2s ease;
}
.haber-detail__crumbs a:hover,
.haber-detail__crumbs a:focus-visible {
	color: var(--tada-red-active);
}
.haber-detail__crumbs .is-current {
	color: #000;
	overflow-wrap: anywhere;
}

/* ---- İki kolonlu blok ----
 *
 * Tarif detayının medya ilkesi (recipe-detail.css → .recipe-hero):
 * ızgara öğeleri GERİLİR, medya kolonu sağdaki içerik kolonunun yüksekliğini
 * alır, fotoğraf o yüksekliği `object-fit: cover` ile doldurur; tabanı kendi
 * genişliğine göre (cqw) tanımlanır. Haberde buna tek ek: uzun makalede
 * panel ekran yüksekliğiyle sınırlanır ve sticky olur.
 *
 *   kısa içerik : panel yüksekliği = içerik kolonu (H1 + metin + galeri)
 *   uzun içerik : panel = ekran tavanı, sticky; makale yanında kayar,
 *                 sticky bölüm sonunda (medya kolonunun sonunda) doğal
 *                 olarak biter
 *   taban       : panel asla kendi genişliğinin 3/4'ünden (4:3) kısa olmaz —
 *                 çok kısa bir haberde ince bir şeride dönüşmesin
 *
 * Sitenin başlığı sticky DEĞİL (sayfayla kayar); bu yüzden sticky üst payı
 * ve tavanın alt/üst nefesi sayfa ritim token'ıdır (--tada-page-head-bottom:
 * masaüstünde 40px, ≤1100'de 28px).
 */
.haber-detail__body {
	display: grid;
	/* minmax(0, …): uzun bir kelime ya da geniş bir galeri kolonun
	   min-content'ini büyütüp sayfayı yatay taşırmasın. */
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}
@media (min-width: 1024px) {
	.haber-detail__body {
		grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
		/* Görsel ↔ metin aralığı: 1024'te 36, 1280'de ~45, 1440'ta 48px. */
		gap: clamp(36px, 3.5vw, 48px);
		/* Medya kolonu içerik kolonunun yüksekliğine gerilir. */
		align-items: stretch;
	}
}
/* Öne çıkarılan görsel yoksa içerik tek başına, okunur bir satır
   uzunluğunda kalır — boş bir sol kolon bırakılmaz. */
.haber-detail__body--no-media {
	grid-template-columns: minmax(0, 860px);
}

.haber-detail__media {
	margin: 0;
	min-width: 0;
}
/* Çerçeve: fotoğrafın görünen alanı. Tek kolonda tarif detayının yığılmış
   düzenindeki gibi sabit 16/11 editoryal çerçeve. Köşe yuvarlaması
   çerçeveye uygulanır. */
.haber-detail__frame {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 11;
	border-radius: var(--tada-radius-md);
}
/* Fotoğraf çerçeveyi MUTLAK konumla doldurur (tarif detayındaki
   .recipe-hero__photo-img ile aynı teknik). Böylece görselin kendi doğal
   yüksekliği satır yüksekliğine HİÇ katkı vermez: satırı içerik kolonu
   belirler, çerçeve ona uyar. (Akışta kalsaydı 0.8 oranlı bir görsel
   544px genişlikte 680px'lik doğal yüksekliğiyle satırı büyütüp içerik
   kolonunu kendine gerdirirdi — ölçüldü.) */
.haber-detail__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
@media (min-width: 1024px) {
	.haber-detail__media {
		/* cqw tabanı için: çerçeve kendi kolon genişliğine göre ölçülür. */
		container-type: inline-size;
	}
	.haber-detail__frame {
		position: sticky;
		top: var(--tada-page-head-bottom);
		aspect-ratio: auto;
		/* İçerik kolonunun yüksekliği (kolon gerildiği için %100) … */
		height: 100%;
		/* … ama en az 4:3 … */
		min-height: 75cqw;
		/* … ve en fazla, üstte ve altta bir ritim payı bırakarak ekran. */
		max-height: calc(100svh - 2 * var(--tada-page-head-bottom));
	}
}
@media (min-width: 1101px) {
	.haber-detail__frame { border-radius: 28px; }
}

.haber-detail__content {
	min-width: 0;
}

/*
 * Başlık: sitenin görsel+metin kartlarındaki başlık ölçeği
 * (insan-kaynaklari.css → .ik-card__title: Montserrat 800,
 * clamp(22px, 1.67vw, 32px), satır yüksekliği 1.2 — XD'den türetilmiş;
 * 1440'ta ~24px). Sayfa başlığı ölçeği (38px, --tada-page-title-size)
 * BİLEREK kullanılmıyor: o, kırıntının ÜSTÜNDEKİ tam genişlik sayfa
 * başlığı içindir; dar bir kolonda 3 satıra yayılıp bloğa hâkim oluyordu.
 * Renk, sitenin tüm H1'lerinde olduğu gibi koyu kırmızı.
 */
.haber-detail__title {
	margin: 0 0 clamp(16px, 1.25vw, 24px);
	font-family: Montserrat, Arial, sans-serif;
	font-size: clamp(22px, 1.67vw, 32px);
	font-weight: 800;
	line-height: 1.2;
	color: var(--tada-red-dark);
	overflow-wrap: break-word;
}
@media (max-width: 768px) {
	.haber-detail__title { font-size: 24px; margin-bottom: 14px; }
}

/* ---- Gutenberg gövdesi ----
   Gövde metni sitenin içerik metniyle aynı ölçek: .ik-card__description
   (Montserrat 400, clamp(13px, 0.83vw, 16px)) — uzun okuma metni olduğu
   için satır yüksekliği hukuki sayfaların gövdesindeki gibi 1.7
   (legal-page.css → .legal-content). */
.haber-detail__text {
	font-family: Montserrat, Arial, sans-serif;
	font-size: clamp(13px, 0.83vw, 16px);
	font-weight: 400;
	line-height: 1.7;
	color: var(--tada-black);
	overflow-wrap: break-word;
	/* Okunur satır uzunluğu (~80–85 karakter); geniş ekranda metin kolonu
	   dikey görselin yanında çok uzun satırlara yayılmasın. */
	max-width: 80ch;
}
.haber-detail__text p { margin: 0 0 1.1em; }
.haber-detail__text a {
	color: var(--tada-red);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.haber-detail__text a:hover,
.haber-detail__text a:focus-visible {
	color: var(--tada-red-active);
	opacity: 1;
}
.haber-detail__text h2,
.haber-detail__text h3,
.haber-detail__text h4 {
	color: var(--tada-red-dark);
}

/* Gutenberg görsel / galeri blokları: konteynerden taşmaz, köşeler
   sitenin kart diliyle yumuşatılır. Galeri düzenini çekirdeğin blok
   CSS'i kurar; burada yalnız aralık ve köşe verilir. */
.haber-detail__text figure,
.haber-detail__text .wp-block-image,
.haber-detail__text .wp-block-gallery {
	max-width: 100%;
	margin: 1.6em 0;
}
/* Gövdenin son bloğu (çoğu haberde galeri) alt boşluk bırakmaz — paylaşılan
   `.tada-rich > :last-child` kuralı yukarıdaki figür kuralıyla ezildiği için
   burada yeniden verilir. Böylece görsel paneli içeriğin GÖRÜNEN sonunda biter. */
.haber-detail__text > :last-child {
	margin-bottom: 0;
}
.haber-detail__text img {
	max-width: 100%;
	height: auto;
	border-radius: var(--tada-radius-sm);
}
/* Aralık ÇEKİRDEĞİN DEĞİŞKENİYLE verilir: galeri sütun genişliklerini
   `--wp--style--unstable-gallery-gap` üzerinden hesaplıyor. Yalnız `gap`
   değiştirilirse genişlik + aralık %100'ü aşar ve satır kırılır (ölçüldü:
   3 sütun 2+1'e, mobilde 2 sütun 1'e düşüyordu). */
.haber-detail__text .wp-block-gallery.has-nested-images {
	--wp--style--unstable-gallery-gap: 12px;
	gap: var(--wp--style--unstable-gallery-gap);
}
.haber-detail__text figcaption {
	margin-top: .6em;
	font-size: 13px;
	line-height: 1.5;
	color: var(--tada-gray-700);
}
.haber-detail__text .wp-block-embed,
.haber-detail__text iframe {
	max-width: 100%;
}

/* ---- Galeri büyütme penceresi (assets/js/haber-detail.js) ----
 * Kabuk main.css'teki ortak modal sınıflarıdır (.home-brands__modal,
 * -backdrop, -close; z-index 1000, %75 siyah perde). Burada yalnız görsel
 * sahnesi, önceki/sonraki düğmeleri ve sayaç var. Görsel `contain` ile
 * sığdırılır: oran korunur, kırpılmaz. Sahne tıklamayı geçirir; görselin
 * dışındaki her tıklama perdeye düşer ve pencereyi kapatır.
 */
.haber-lightbox-trigger {
	cursor: zoom-in;
}
.haber-lightbox-trigger:focus-visible {
	outline: 2px solid var(--tada-red-dark);
	outline-offset: 3px;
}
.haber-lightbox__stage {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	margin: 0;
	pointer-events: none;
}
.haber-lightbox__image {
	display: block;
	width: auto;
	height: auto;
	max-width: min(calc(100vw - 160px), 1600px);
	max-height: calc(100vh - 112px);
	max-height: calc(100dvh - 112px);
	object-fit: contain;
	border-radius: var(--tada-radius-sm);
	box-shadow: 0 30px 80px rgb(0 0 0 / 40%);
	pointer-events: auto;
}
.haber-lightbox__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-top: -24px;
	padding: 0;
	background: rgb(255 255 255 / 15%);
	color: #fff;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color .25s ease-out;
}
.haber-lightbox__nav[hidden] {
	display: none;
}
.haber-lightbox__nav--prev { left: 24px; }
.haber-lightbox__nav--next { right: 24px; }
.haber-lightbox__nav:hover,
.haber-lightbox__nav:focus-visible {
	background: #9e262d;
}
.haber-lightbox__close {
	top: 20px;
	right: 20px;
}
.haber-lightbox__count {
	position: absolute;
	left: 50%;
	bottom: 20px;
	z-index: 2;
	margin: 0;
	transform: translateX(-50%);
	font-family: Montserrat, Arial, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	pointer-events: none;
}
/* Telefonda görsel neredeyse tam genişlik; düğmeler alta, sayacın iki yanına. */
@media (max-width: 767px) {
	.haber-lightbox {
		padding: 16px;
	}
	.haber-lightbox__image {
		max-width: calc(100vw - 32px);
		max-height: calc(100vh - 168px);
		max-height: calc(100dvh - 168px);
	}
	.haber-lightbox__close {
		top: 12px;
		right: 12px;
	}
	.haber-lightbox__nav {
		top: auto;
		bottom: 12px;
		margin-top: 0;
		width: 44px;
		height: 44px;
	}
	.haber-lightbox__nav--prev { left: calc(50% - 96px); }
	.haber-lightbox__nav--next { right: calc(50% - 96px); }
	.haber-lightbox__count {
		bottom: 26px;
	}
}