/* v3: 11 Eki 2026 — dik görsel ve WhatsApp telefon örneği ≥720px'te yazının yanında yarım genişlikte (aşağıda). v2: 11 Eki 2026 (Oğuz): kutu 1100px (iç alan 1040px);
   yazı 736px + 32px + sağ sütun 272px; sağ sütun "İlginizi Çekebilir", görselsiz kartlar.
   Ayrı dosya: ortak şablon stil paketi değişmeden yayınlanabilsin. */
.oe-sayfa.oe-ucsutun {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 clamp(16px, 4vw, 30px);
	box-sizing: border-box;
}
.oe-ucsutun > .oe-shell { padding: 0; }
/* Telefon ve tablette sağ sütun gösterilmez; sayfa sonundaki "ilgili yazılar" bölümü yeterli. */
.oe-yan { display: none; }
@media (min-width: 1100px) {
	.oe-sayfa.oe-ucsutun {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 272px;
		column-gap: 32px;
		align-items: start;
	}
	.oe-ucsutun > .oe-shell { grid-column: 1; max-width: none; margin: 0; }
	.oe-yan { display: block; grid-column: 2; position: sticky; top: 84px; margin: 0; padding-top: 22px; max-width: none; }
}
.oe-yan-baslik { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 12px; letter-spacing: 0; }
.oe-yan-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.oe-yan-kart { display: block; padding: 11px 13px; border: 1px solid var(--line-soft, var(--line)); border-left: 3px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); text-decoration: none; transition: border-color .15s ease; }
.oe-yan-kart:hover { border-color: var(--cyan); }
.oe-yan-kart:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.oe-yan-metin { display: grid; gap: 4px; min-width: 0; }
.oe-yan-t { font-size: 13.5px; line-height: 1.38; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.oe-yan-tarih { font-size: 11px; color: var(--ink-dim); }
.oe-yan-tumu { display: inline-block; margin-top: 12px; font-size: 13.5px; color: var(--cyan); }

/* Dik görsel (ContentShell/rehype `oe-dikey`) ve WhatsApp telefon örneği (.wa-sohbet): ana sütunun yarısı; yatay görsel tam genişlik.
   Yazı dolu infografikler (hizmet-infografikleri/, web-uygulama/) dik olsa da tam genişlik: yarımda iç yazıları 5–7px'e düşüyordu (Oğuz, 11 Eki).
   Telefon örneğinden hemen önceki paragraf ("1. Bilgi menüsü…") sola, örnek sağa oturur; sonraki paragraflar boşta kalan sol
   yarıya akar. 720px altında hepsi alt alta. */
@media (min-width: 720px) {
	.oe-ucsutun .oe-body img.oe-dikey:not([src*="/hizmet-infografikleri/"], [src*="/web-uygulama/"]),
	.oe-ucsutun .oe-body .wa-sohbet { float: right; width: calc(50% - 16px); max-width: 440px; margin: 4px 0 20px 32px; }
	.oe-ucsutun .oe-body img.oe-dikey:not([src*="/hizmet-infografikleri/"], [src*="/web-uygulama/"]) { height: auto; }
	.oe-ucsutun .oe-body p:has(+ .wa-sohbet) { float: left; clear: both; width: calc(50% - 16px); margin-top: 0; }
	.oe-ucsutun .oe-body .wa-sohbet + .wa-sohbet { clear: right; }
	/* Örnekten sonra gelen ilk normal paragraf, öndeki sola yaslı paragraf(lar)ın altına, örneğin soluna oturur (aksi hâlde sayfanın en üstüne çıkar). */
	.oe-ucsutun .oe-body .wa-sohbet + :where(:not(p:has(+ .wa-sohbet))) { clear: left; } /* :where → başlıkların clear:both kuralı (aşağıda) ezilmesin */
	.oe-ucsutun .oe-body :is(h2, h3, h4, table, pre, .wa-dene, .wa-akis, blockquote) { clear: both; }
	.oe-ucsutun .oe-body::after { content: ""; display: block; clear: both; }
}

/* v4: 13 Eki 2026 (Oğuz) — sağ sütunun üstünde "Bunları Okumalısın": bu sayfaya içerikçe en yakın 10 sayfa (src/lib/ilgili-sayfalar.ts).
   Sıkı numaralı liste (kartsız), altında mevcut "İlginizi Çekebilir" kartları. Sütun yapışık (sticky) kaldığı için iki liste ekrana
   sığmazsa sütun kendi içinde kayar; yoksa alt kısım sayfa sonuna kadar görünmezdi. */
@media (min-width: 1100px) {
	.oe-yan { max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 4px; }
}
.oe-oku { margin: 0 0 22px; }
.oe-oku-liste { margin: 0; padding: 0; list-style: none; counter-reset: oku; display: grid; gap: 2px; }
.oe-oku-liste li { counter-increment: oku; display: grid; grid-template-columns: 22px 1fr; align-items: baseline; }
.oe-oku-liste li::before { content: counter(oku); font-size: 11.5px; font-weight: 700; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.oe-oku-liste a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 6px 0; font-size: 13.5px; line-height: 1.38; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-soft, var(--line)); }
.oe-oku-liste li:last-child a { border-bottom: 0; }
.oe-oku-liste a:hover { color: var(--cyan); }
.oe-oku-liste a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }