/* ==========================================================================
   EDITOR ICERIGI — panelden CKEditor ile girilen HTML'in tipografisi.

   Kullanim: icerigin basildigi kapsayiciya "editor-content" sinifi verilir.
     - blog-detail.php  -> <div class="yazi-icerik editor-content">
     - sayfa-icerik.php -> <div class="sayfa-metni editor-content">

   AMAC: editorden (ve Word / ChatGPT yapistirmasindan) gelen bicimlendirme
   degil, temanin kurallari gecerli olsun. Icerikte fiilen su artiklar var:
     - 17.000+ inline style="text-align:justify"
     - Word artiklari: MsoNormal, mso-list, tab-stops, margin-top:0cm, <o:p>
     - ChatGPT yapistirmasindan Tailwind sinif adlari (prose, markdown, flex...)
     - CKEditor 5 sarmalayicilari: <figure class="table">, <figure class="image">

   !important iki yerde kullaniliyor, ikisi de zorunlu:
     a) inline style'i baska turlu ezmek mumkun degil (hizalama, yazi tipi,
        satir ici olcu/renk, Word bosluklari),
     b) tema bolum baglamina gore dogrudan etiketi hedefliyor (orn. blog.css:
        ".blog-posts p { font-size:16px }") ve bu kurallar kapsayicidan gelen
        miras olcuyu eziyor — govde ve baslik olculeri bu yuzden !important.
   Bunlarin disinda kalan her sey normal oncelikte; sayfaya ozel bir kural
   gerektiginde ezilebilir kaliyor.

   Bootstrap 4.6 ile carpisma: yapistirilan icerikte ".table" ve ".mx-auto"
   sinif adlari geciyor (CKEditor'un kendi figure.table sarmalayicisi dahil).
   Asagidaki tablo kurallari onlardan daha ozel secicilerle yaziliyor; ayrica
   bu dosya head.php'de en son yuklenmeli.
   ========================================================================== */

/* --- Kapsayici --- */
.editor-content {
	font-family: "Inter Tight", sans-serif;
	font-size: 18px;
	line-height: 30px;
	font-weight: 400;
	color: var(--text--color);
	/* Panelde bazen bosluksuz uzun adresler yapistiriliyor; sutunu tasirmasin. */
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* ==========================================================================
   1) NOTRLEME — editorden gelen gorsel dayatmalari geri al
   ========================================================================== */

/* Yazi tipi her zaman temadan. Liste bilerek "*" degil: icerikte ikon
   amacli <i class="fa-..."> bulunursa ikon yazi tipini bozmayalim. */
.editor-content,
.editor-content p,
.editor-content div,
.editor-content span,
.editor-content font,
.editor-content li,
.editor-content td,
.editor-content th,
.editor-content a,
.editor-content strong,
.editor-content b,
.editor-content em,
.editor-content h1,
.editor-content h2,
.editor-content h3,
.editor-content h4,
.editor-content h5,
.editor-content h6,
.editor-content blockquote,
.editor-content figcaption {
	font-family: "Inter Tight", sans-serif !important;
	letter-spacing: normal !important;
	text-indent: 0 !important;
	text-shadow: none !important;
}

/* Hizalama: icerikteki 17.000+ "text-align:justify" ezilir, tema sola dayali.
   Dar sutunda iki yana yaslama kelime aralarini acip "nehir" olusturuyor ve
   sitenin geri kalani zaten sola dayali. */
.editor-content,
.editor-content p,
.editor-content div,
.editor-content ul,
.editor-content ol,
.editor-content li,
.editor-content dl,
.editor-content dt,
.editor-content dd,
.editor-content h1,
.editor-content h2,
.editor-content h3,
.editor-content h4,
.editor-content h5,
.editor-content h6,
.editor-content blockquote,
.editor-content table,
.editor-content th,
.editor-content td,
.editor-content address,
.editor-content pre {
	text-align: left !important;
}

/* Satir ici etiketler govde olcusunu/rengini miras alsin: editorun yazi
   boyutu, rengi ve vurgu zemini eklentileri buradan devre disi kaliyor.
   Baglanti ve <mark> ayri ele aliniyor (asagida), listeye alinmiyor. */
.editor-content span,
.editor-content font,
.editor-content b,
.editor-content strong,
.editor-content em,
.editor-content i,
.editor-content u,
.editor-content small,
.editor-content s,
.editor-content del,
.editor-content ins {
	font-size: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
	background-color: transparent !important;
}

/* Word'un bos namespace etiketi: <o:p></o:p>. Gorunmez ama satir arasinda
   bosluk uretebiliyor. */
.editor-content o\:p {
	display: none !important;
}

/* Word bloklara "margin-top:0cm" gibi degerler basiyor; boslugu tema versin. */
.editor-content .MsoNormal,
.editor-content .MsoListParagraph,
.editor-content [style*="mso-"] {
	margin-top: 0 !important;
}

/* Yapistirma artigi sinif adlari (Tailwind / editor secim izleri). Temada
   karsiliklari yok ama Bootstrap'in ".table" ve ".mx-auto" kurallari
   tutuyordu; hepsi burada sifirlaniyor. */
.editor-content .prose,
.editor-content .markdown,
.editor-content .flex,
.editor-content .inline,
.editor-content .group,
.editor-content .relative,
.editor-content .isSelectedEnd,
.editor-content .whitespace-normal,
.editor-content .break-words,
.editor-content .w-full,
.editor-content .w-fit,
.editor-content .mx-auto,
.editor-content .text-base,
.editor-content .text-start {
	display: revert;
	width: auto;
	max-width: none;
	min-width: 0;
	margin: revert;
	padding: revert;
	color: inherit;
	background-color: transparent;
	font-size: inherit;
	line-height: inherit;
}

/* Govde olculeri: bloklar kapsayiciyi izlesin.
   Yalnizca kapsayiciya font-size vermek YETMIYOR — tema bolum baglamina gore
   dogrudan etiketi hedefliyor (orn. blog.css: ".blog-posts p { font-size:16px;
   line-height:24px }") ve bu kural miras kaliminin onune geciyor; ayni yazi
   icinde paragraflar 16px, liste ogeleri 18px cikiyordu. Bolum baglami ne
   olursa olsun icerik alani tek olcu kullansin diye !important. */
.editor-content p,
.editor-content li,
.editor-content dd,
.editor-content dt,
.editor-content div,
.editor-content address {
	font-size: inherit !important;
	line-height: inherit !important;
}

/* ==========================================================================
   2) BASLIKLAR
   ========================================================================== */

.editor-content h1,
.editor-content h2,
.editor-content h3,
.editor-content h4,
.editor-content h5,
.editor-content h6 {
	margin-top: 34px;
	margin-bottom: 14px;
	font-weight: 800;
	color: var(--black--color);
}

/* Icerikte 11 adet <h1> var; sayfanin kendi H1'i zaten baslikta oldugu icin
   bunlar h2 olcusunde gosteriliyor (isaretleme panelde duzeltilene kadar). */
.editor-content h1,
.editor-content h2 {
	font-size: 30px !important;
	line-height: 38px !important;
}

.editor-content h3 {
	font-size: 24px !important;
	line-height: 32px !important;
}

/* t_sayfa icerikleri (kurumsal sayfalar) neredeyse tamamen h4 kullaniyor. */
.editor-content h4 {
	font-size: 21px !important;
	line-height: 29px !important;
}

.editor-content h5 {
	font-size: 19px !important;
	line-height: 27px !important;
}

.editor-content h6 {
	font-size: 17px !important;
	line-height: 25px !important;
	font-weight: 700;
}

/* Ust ustte gelen basliklarda ikinci boslugu yut. */
.editor-content h1+h2,
.editor-content h2+h3,
.editor-content h3+h4,
.editor-content h4+h5,
.editor-content h5+h6 {
	margin-top: 18px;
}

/* ==========================================================================
   3) METIN BLOKLARI
   ========================================================================== */

.editor-content p {
	margin-top: 0;
	margin-bottom: 18px;
}

/* CKEditor bos paragraflari <p>&nbsp;</p> olarak birakiyor; bunlar cift
   bosluk uretiyor, boslugu tema kurallari versin. */
.editor-content p:empty {
	display: none;
}

.editor-content br {
	line-height: inherit;
}

.editor-content address {
	margin-bottom: 18px;
	font-style: normal;
}

/* ==========================================================================
   4) LISTELER
   ========================================================================== */

.editor-content ul,
.editor-content ol {
	margin-top: 0 !important;
	margin-bottom: 18px;
	padding-left: 22px;
}

.editor-content ul {
	list-style: disc outside;
}

.editor-content ol {
	list-style: decimal outside;
}

.editor-content li {
	margin-bottom: 8px;
	padding-left: 2px;
}

/* Ic ice listeler: disaridakinden farkli isaret, arada fazladan bosluk yok. */
.editor-content li>ul,
.editor-content li>ol {
	margin-top: 8px;
	margin-bottom: 0;
}

.editor-content li>ul {
	list-style: circle outside;
}

.editor-content li>ul ul {
	list-style: square outside;
}

.editor-content li>ol {
	list-style: lower-alpha outside;
}

.editor-content li:last-child {
	margin-bottom: 0;
}

.editor-content dl {
	margin-bottom: 18px;
}

.editor-content dt {
	font-weight: 700;
	color: var(--black--color);
}

.editor-content dd {
	margin-left: 0;
	margin-bottom: 10px;
}

/* ==========================================================================
   5) BAGLANTI
   ========================================================================== */

/* Govde renginden (#636363) ayrilsin diye logo grisi ve alti cizili,
   uzerine gelince marka yesili. */
.editor-content a {
	color: var(--logo--grey--color) !important;
	text-decoration: underline;
	transition: color 0.2s ease-out;
}

.editor-content a:hover,
.editor-content a:focus {
	color: var(--primary--color) !important;
}

/* Baglanti icindeki kalin/span'lar da ayni rengi alsin. */
.editor-content a strong,
.editor-content a b,
.editor-content a span {
	color: inherit !important;
}

/* ==========================================================================
   6) VURGU VE SATIR ICI ETIKETLER
   ========================================================================== */

.editor-content strong,
.editor-content b {
	font-weight: 700;
	color: var(--black--color) !important;
}

.editor-content em,
.editor-content i {
	font-style: italic;
}

.editor-content u,
.editor-content ins {
	text-decoration: underline;
}

.editor-content s,
.editor-content del {
	text-decoration: line-through;
	color: var(--text--color2) !important;
}

/* Editorun sari fosforlu vurgusu yerine marka tonunda bir vurgu. */
.editor-content mark {
	padding: 1px 4px;
	border-radius: 4px;
	color: var(--black--color) !important;
	background-color: rgba(var(--primary--rgb), 0.22) !important;
}

.editor-content small {
	font-size: 15px !important;
	color: var(--text--color2) !important;
}

.editor-content sub,
.editor-content sup {
	font-size: 72% !important;
	line-height: 0 !important;
}

.editor-content code,
.editor-content kbd,
.editor-content samp {
	padding: 2px 6px;
	font-family: ui-monospace, "SFMono-Regular", Consolas, monospace !important;
	font-size: 15px !important;
	border-radius: 4px;
	color: var(--black--color) !important;
	background-color: var(--grey--color4) !important;
}

.editor-content pre {
	margin-bottom: 20px;
	padding: 18px 20px;
	overflow-x: auto;
	font-family: ui-monospace, "SFMono-Regular", Consolas, monospace !important;
	font-size: 15px;
	line-height: 24px;
	border-radius: 12px;
	background-color: var(--grey--color4);
}

.editor-content pre code {
	padding: 0;
	background-color: transparent !important;
}

/* ==========================================================================
   7) ALINTI
   ========================================================================== */

.editor-content blockquote {
	margin: 26px 0;
	padding: 4px 0 4px 22px;
	font-size: 19px;
	line-height: 31px;
	color: var(--black--color);
	border-left: 3px solid var(--primary--color);
}

.editor-content blockquote p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   8) TABLO
   CKEditor 5 tabloyu <figure class="table"> icine sariyor; Bootstrap'in
   ".table" kurali da tam o sarmalayiciyi yakaliyor, once o notrleniyor.
   ========================================================================== */

.editor-content figure.table {
	width: auto;
	max-width: 100%;
	margin: 0 0 22px;
	padding: 0;
	color: inherit;
	background-color: transparent;
}

.editor-content table {
	width: 100%;
	margin-bottom: 22px;
	border-collapse: collapse;
	font-size: 16px;
	line-height: 25px;
	color: var(--text--color);
	background-color: transparent;
}

.editor-content figure.table table {
	margin-bottom: 0;
}

.editor-content table caption {
	padding: 0 0 10px;
	font-size: 15px;
	color: var(--text--color2);
	caption-side: bottom;
}

.editor-content table th,
.editor-content table td {
	font-size: inherit !important;
	line-height: inherit !important;
	padding: 12px 14px;
	vertical-align: top;
	border: 1px solid var(--border--color2);
}

.editor-content table th {
	font-weight: 700;
	color: var(--black--color);
	background-color: var(--light--grey--color);
}

.editor-content table tbody tr:nth-child(even) td {
	background-color: rgba(240, 240, 240, 0.45);
}

.editor-content table p {
	margin-bottom: 0;
}

/* ==========================================================================
   9) GORSEL VE FIGURE
   ========================================================================== */

.editor-content img {
	max-width: 100%;
	height: auto;
	margin: 10px 0 20px;
	border-radius: 20px;
}

.editor-content figure {
	max-width: 100%;
	margin: 0 0 22px;
}

.editor-content figure img {
	margin: 0;
}

.editor-content figcaption {
	margin-top: 10px;
	font-size: 15px !important;
	line-height: 24px;
	color: var(--text--color2) !important;
	text-align: center !important;
}

/* CKEditor 5 hizalama sinifleri: yazarin bilincli tercihi oldugu icin
   korunuyor, olcu ve bosluklar temadan. */
.editor-content figure.image-style-align-center,
.editor-content figure.image-style-block-align-center {
	margin-left: auto;
	margin-right: auto;
}

.editor-content figure.image-style-align-left,
.editor-content figure.image-style-block-align-left {
	margin-right: auto;
	margin-left: 0;
}

.editor-content figure.image-style-align-right,
.editor-content figure.image-style-block-align-right {
	margin-left: auto;
	margin-right: 0;
}

.editor-content figure.image-style-side {
	float: right;
	max-width: 45%;
	margin: 6px 0 20px 24px;
}

.editor-content hr {
	height: 1px;
	margin: 32px 0;
	border: 0;
	background-color: var(--border--color2);
}

/* ==========================================================================
   10) GOMULU ICERIK (YouTube, harita)
   ========================================================================== */

.editor-content iframe,
.editor-content video,
.editor-content embed,
.editor-content object {
	max-width: 100%;
	margin-bottom: 22px;
	border: 0;
	border-radius: 16px;
}

/* CKEditor 5 video gomulerini <figure class="media"> icine sariyor;
   oranini koruyan bir kutu icine aliniyor. */
.editor-content figure.media {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	border-radius: 16px;
}

.editor-content figure.media iframe,
.editor-content figure.media .ck-media__wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin-bottom: 0;
}

/* ==========================================================================
   11) BOSLUK DUZELTMELERI
   ========================================================================== */

/* Ilk ogenin ust, son ogenin alt boslugu kapsayicinin kendi boslugunu
   bozmasin. */
.editor-content> :first-child {
	margin-top: 0 !important;
}

.editor-content> :last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   12) OLCEKLEME
   ========================================================================== */

@media (max-width: 991px) {
	.editor-content {
		font-size: 17px;
		line-height: 28px;
	}

	.editor-content h1,
	.editor-content h2 {
		font-size: 27px !important;
		line-height: 35px !important;
	}

	.editor-content h3 {
		font-size: 22px !important;
		line-height: 30px !important;
	}

	.editor-content h4 {
		font-size: 20px !important;
		line-height: 28px !important;
	}
}

@media (max-width: 767px) {
	.editor-content {
		font-size: 16px;
		line-height: 27px;
	}

	.editor-content h1,
	.editor-content h2,
	.editor-content h3,
	.editor-content h4,
	.editor-content h5,
	.editor-content h6 {
		margin-top: 28px;
		margin-bottom: 12px;
	}

	.editor-content h1,
	.editor-content h2 {
		font-size: 24px !important;
		line-height: 32px !important;
	}

	.editor-content h3 {
		font-size: 20px !important;
		line-height: 28px !important;
	}

	.editor-content h4 {
		font-size: 18px !important;
		line-height: 26px !important;
	}

	.editor-content h5,
	.editor-content h6 {
		font-size: 17px !important;
		line-height: 25px !important;
	}

	.editor-content blockquote {
		margin: 22px 0;
		padding-left: 16px;
		font-size: 17px;
		line-height: 28px;
	}

	.editor-content img {
		border-radius: 14px;
	}

	/* Genis tablolar sayfayi tasirmasin: tablo kendi icinde yatay kaysin. */
	.editor-content figure.table,
	.editor-content table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.editor-content table th,
	.editor-content table td {
		padding: 10px 12px;
		white-space: nowrap;
	}

	/* Dar ekranda yandan saran gorsel tam genislige gecsin. */
	.editor-content figure.image-style-side {
		float: none;
		max-width: 100%;
		margin: 0 0 20px;
	}
}

/* ==========================================================================
   BELGE KARTLARI
   Panelden yazilan metin icinde kullanilan kart izgarasi (Belgelerimiz
   sayfasi). Kart: ikon + baslik + kisa aciklama; belge gorseli gelince
   .belge-gorsel icine <img> eklenmesi yeterli.
   ========================================================================== */

/* Metin kolonu ~1400px: 360px alt sinir genis ekranda 3 sutun (~450px kart)
   verir; 260-320px'te 4 sutun cikip kartlar ince kaliyordu. Son satirda tek
   kart kalsa da sutun genisligi sabit oldugu icin kart yayilmaz. */
.editor-content .belge-izgara {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	gap: 26px;
	margin: 34px 0 44px;
}

.editor-content .belge-kart {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border--color2);
	border-radius: 20px;
	padding: 34px 32px;
	background-color: #fff;
	transition: box-shadow .25s ease, transform .25s ease;
}

.editor-content .belge-kart:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, .08);
}

/* Renk/zemin/olcu !important: yukaridaki notrleme blogu editorden gelen
   satir ici stilleri temizlemek icin span/i etiketlerine "color: inherit" ve
   "background-color: transparent" dayatiyor; ikon dairesi onu asmali. */
.editor-content .belge-kart .belge-ikon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	align-self: flex-start;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	margin-bottom: 20px;
	font-size: 24px !important;
	color: var(--primary--color) !important;
	background-color: rgba(var(--primary--rgb), .08) !important;
}

.editor-content .belge-kart .belge-ikon i {
	font-size: 22px !important;
	color: inherit !important;
}

.editor-content .belge-kart h3 {
	font-size: 21px;
	margin: 0 0 12px;
}

.editor-content .belge-kart p {
	margin: 0;
	font-size: 15px;
}

/* Tek basina kalan son kart da ayni oranda kalsin diye kart icerigi
   yukaridan baslar, bos alan altta toplanir. */
.editor-content .belge-kart .belge-gorsel {
	margin-top: auto;
}

/* Kup orani yalnizca kartlar yan yana dizildiginde anlamli; tek sutuna
   dusunce (tablet ve telefon) sabit yukseklik bos alan biraktigi icin yok. */
@media (min-width: 992px) {
	.editor-content .belge-kart {
		min-height: 360px;
	}
}

@media (max-width: 575px) {
	.editor-content .belge-kart {
		padding: 28px 24px;
	}
}

/* Belge gorseli sonradan panelden eklenir; bos kaldiginda yer kaplamaz. */
.editor-content .belge-kart .belge-gorsel:empty {
	display: none;
}

.editor-content .belge-kart .belge-gorsel img {
	width: 100%;
	height: auto;
	margin-top: 18px;
	border: 1px solid var(--border--color2);
	border-radius: 12px;
}