/*
 * xloji — 16:9 blur-fill kapak
 *
 * Fikir: aynı görselin İKİ kopyası üst üste konur.
 *   • zemin  → `cover` + bulanık + hafif büyütme → boşluğu doldurur
 *   • ön     → `contain` → KIRPILMADAN ortalanır
 *
 * `--xloji-oran` ve `--xloji-bulanik` değişkenleri PHP tarafından satır içi
 * yazılır; böylece her örnek kendi oranını taşır ve tek bir CSS dosyası yeter.
 *
 * Saf CSS — JavaScript yok.
 */

.xloji-kapak {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0;
	width: 100%;
	aspect-ratio: var(--xloji-oran, 16 / 9);
	background: #111;   /* aspect-ratio desteklenmeyen tarayıcıda düz zemin */
}

.xloji-kapak__zemin,
.xloji-kapak__on {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.xloji-kapak__zemin {
	object-fit: cover;
	filter: blur(var(--xloji-bulanik, 24px));
	/* Bulanıklık kenarlarda saydamlık bırakır; büyütme o bandı kapatır. */
	transform: scale(1.15);
	/* Dekoratif: fare/dokunma olaylarını öndeki görsele bırak. */
	pointer-events: none;
}

.xloji-kapak__on {
	object-fit: contain;
	/* Öndeki görsel zeminin üstünde kalmalı. */
	position: relative;
	z-index: 1;
}

/*
 * aspect-ratio desteklenmeyen eski tarayıcılar (Safari < 15) için yedek:
 * padding-top hilesiyle 16:9 oranı korunur. Modern tarayıcılarda @supports
 * bloğu devreye girmediği için ek maliyet yoktur.
 */
@supports not (aspect-ratio: 16 / 9) {
	.xloji-kapak {
		height: 0;
		padding-top: 56.25%;   /* 16:9 varsayılanı */
	}
	/* Dikey oranlarda yedek dolgu farklıdır; aksi hâlde eski tarayıcıda
	   dikey görsel yatay çerçeveye sıkışırdı. */
	.xloji-kapak[style*="9 / 16"]  { padding-top: 177.78%; }
	.xloji-kapak[style*="3 / 4"]   { padding-top: 133.33%; }
	.xloji-kapak[style*="2 / 3"]   { padding-top: 150%; }
	.xloji-kapak[style*="4 / 3"]   { padding-top: 75%; }
	.xloji-kapak[style*="1 / 1"]   { padding-top: 100%; }
	.xloji-kapak[style*="3 / 2"]   { padding-top: 66.67%; }
	.xloji-kapak[style*="21 / 9"]  { padding-top: 42.86%; }
}

/* Hareket azaltma tercihi: bulanıklık bir animasyon değil, dokunulmaz. */

/* ─────────────────────────────────────────────────────────────────────────
 * İçindekiler + okuma süresi
 * Tema renklerine karışmamak için currentColor kullanılır; yalnız yapı verilir.
 * ───────────────────────────────────────────────────────────────────────── */

.xloji-ic {
	margin: 1.5em 0;
	padding: 1em 1.25em;
	border: 1px solid rgba(127, 127, 127, 0.3);
	border-radius: 6px;
}

.xloji-ic__baslik {
	margin: 0 0 0.5em;
	font-weight: 600;
}

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

.xloji-ic__ogem {
	margin: 0.25em 0;
	line-height: 1.4;
}

/* Girinti başlık seviyesini yansıtır (h2 = 0, h3 = 1 kademe, ...). */
.xloji-ic__s3 { padding-inline-start: 1.25em; }
.xloji-ic__s4 { padding-inline-start: 2.5em; }
.xloji-ic__s5 { padding-inline-start: 3.75em; }
.xloji-ic__s6 { padding-inline-start: 5em; }

.xloji-okuma {
	margin: 0.5em 0;
	opacity: 0.75;
	font-size: 0.9em;
}

/* Çapa bağlantısıyla atlandığında başlık yapışkan başlığın altında kalmasın. */
.xloji-ic ~ * :is(h2, h3, h4, h5, h6)[id] {
	scroll-margin-top: 2em;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Gömme çerçeveleri (chatbot / Multibot / araç)
 * ───────────────────────────────────────────────────────────────────────── */

.xloji-cerceve {
	margin: 1.5em 0;
	width: 100%;
}

.xloji-cerceve iframe {
	display: block;
	width: 100%;
	border: 1px solid rgba(127, 127, 127, 0.25);
	border-radius: 8px;
	background: transparent;
	/* Yükseklik satır içi olarak PHP tarafından yazılır (her örnek farklı). */
}

/* Yalnız düzenleyicilere görünen "yapılandırılmadı" uyarısı.
   Ziyaretçiye gösterilmez — eksik kurulum ziyaretçinin sorunu değildir. */
.xloji-eksik {
	margin: 1.5em 0;
	padding: 0.9em 1.1em;
	border: 1px dashed rgba(127, 127, 127, 0.5);
	border-radius: 6px;
	opacity: 0.8;
	font-size: 0.95em;
}

/* Varsayılan kapak — zemin modu (kapağı olmayan yazılar için). */
.xloji-vkapak {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 1.5em;
	width: 100%;
	aspect-ratio: 16 / 9;
	text-align: center;
}

.xloji-vkapak__yazi {
	font-size: clamp(1rem, 2.6vw, 1.9rem);
	font-weight: 700;
	line-height: 1.25;
	/* Uzun başlık kutuyu taşırmasın. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Slider — xloji.com `MinimalTemplate` uyarlaması.
 * Geçiş FADE'dir, kaydırma değil (sözleşme gereği).
 * ───────────────────────────────────────────────────────────────────────── */

.xloji-slider {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 8px;
	background: #000;
}

.xloji-slider__liste {
	margin: 0;
	padding: 0;
	list-style: none;
	height: 100%;
}

.xloji-slider__slayt {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .7s ease;
	/* Görünmeyen slayt tıklanabilir kalmasın. */
	pointer-events: none;
}

.xloji-slider__slayt.etkin {
	opacity: 1;
	pointer-events: auto;
}

.xloji-slider__slayt a { display: block; height: 100%; text-decoration: none; }

.xloji-slider__slayt img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.xloji-slider__yazi {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 2.5em 1.2em 1.2em;
	color: #fff;
	/* Alttan yukarı koyulaşan degrade: başlık her görselde okunur kalsın. */
	background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,0));
}

.xloji-slider__yazi strong {
	display: block;
	font-size: clamp(1.05rem, 2.4vw, 1.9rem);
	line-height: 1.25;
}

.xloji-slider__yazi em {
	display: block;
	margin-top: .35em;
	font-style: normal;
	font-size: .9em;
	opacity: .9;
}

.xloji-slider__ok {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(0,0,0,.4);
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}

.xloji-slider__ok:hover,
.xloji-slider__ok:focus-visible { background: rgba(0,0,0,.65); }
.xloji-slider__ok--geri  { inset-inline-start: 10px; }
.xloji-slider__ok--ileri { inset-inline-end: 10px; }

.xloji-slider__noktalar {
	position: absolute;
	inset-inline: 0;
	bottom: 10px;
	display: flex;
	gap: 6px;
	justify-content: center;
	z-index: 2;
}

.xloji-slider__nokta {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255,255,255,.55);
	cursor: pointer;
	transition: width .2s, background .2s;
}

.xloji-slider__nokta.etkin { width: 24px; background: #fff; }

@media (prefers-reduced-motion: reduce) {
	.xloji-slider__slayt { transition: none; }
	.xloji-slider__nokta { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Yazı listesi (yan sütun widget'ı / kısa kod)
 * ───────────────────────────────────────────────────────────────────────── */

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

.xloji-yazilar__oge { margin: 0 0 1em; }
.xloji-yazilar__oge a { text-decoration: none; color: inherit; display: block; }
.xloji-yazilar__oge img { display: block; border-radius: 6px; }

.xloji-yazilar__oge--buyuk img { width: 100%; height: auto; margin-bottom: .45em; }

.xloji-yazilar__oge--kucuk a {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: .7em;
	align-items: center;
}
.xloji-yazilar__oge--kucuk img { width: 64px; height: 64px; object-fit: cover; }
/* Görseli olmayan küçük öge tek sütuna düşsün, boş kare kalmasın. */
.xloji-yazilar__oge--kucuk a:not(:has(img)) { grid-template-columns: 1fr; }

.xloji-yazilar__baslik { line-height: 1.35; font-weight: 600; }

/* Yazar kutusu (xloji profili) */
.xloji-yazar {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 1em;
	align-items: start;
	margin: 2em 0;
	padding: 1.1em;
	border: 1px solid rgba(127,127,127,.25);
	border-radius: 8px;
}
/* Fotoğrafı olmayan profilde boş sütun kalmasın. */
.xloji-yazar:not(:has(.xloji-yazar__foto)) { grid-template-columns: 1fr; }

.xloji-yazar__foto { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.xloji-yazar__ad { margin: 0 0 .2em; font-weight: 700; font-size: 1.05em; }
.xloji-yazar__bilgi { margin: 0 0 .5em; opacity: .75; font-size: .9em; }
.xloji-yazar__hakkinda p { margin: 0 0 .5em; }
.xloji-yazar__baglanti { margin: .5em 0 0; font-size: .9em; }