/* =====================================================================
   ✅ Blog — /assets/css/blog.css  (FINAL - Theme Safe)
   ---------------------------------------------------------------------
   Amaç:
   - Blog sayfaları için tipografi + spacing + card UI + mobil uyum
   - Dark/Light uyumu:
       1) prefers-color-scheme (senin sitede aktif)
       2) body.dark / body[data-theme="dark"] / html[data-theme="dark"] fallback
   - Her şey sadece blog sayfasında çalışsın diye scope:
       body[data-aill-menu="blog"] ...
===================================================================== */

body[data-aill-menu="blog"]{
	/* Varsayılan (Light) */
	--blog-text: rgba(0,0,0,.88);
	--blog-muted: rgba(0,0,0,.65);
	--blog-border: rgba(0,0,0,.14);
	--blog-card-bg: rgba(0,0,0,.03);
	--blog-card-bg-strong: rgba(0,0,0,.06);
	--blog-link: inherit;
	--blog-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* Dark (prefers-color-scheme) */
@media (prefers-color-scheme: dark) {
	body[data-aill-menu="blog"]{
		--blog-text: rgba(255,255,255,.92);
		--blog-muted: rgba(255,255,255,.72);
		--blog-border: rgba(255,255,255,.16);
		--blog-card-bg: rgba(255,255,255,.05);
		--blog-card-bg-strong: rgba(255,255,255,.08);
		--blog-shadow: 0 12px 34px rgba(0,0,0,.35);
	}
}

/* Dark (fallback: class/attribute) */
html[data-theme="dark"] body[data-aill-menu="blog"],
body[data-theme="dark"][data-aill-menu="blog"],
body.dark[data-aill-menu="blog"]{
	--blog-text: rgba(255,255,255,.92);
	--blog-muted: rgba(255,255,255,.72);
	--blog-border: rgba(255,255,255,.16);
	--blog-card-bg: rgba(255,255,255,.05);
	--blog-card-bg-strong: rgba(255,255,255,.08);
	--blog-shadow: 0 12px 34px rgba(0,0,0,.35);
}

/* ------------------------------------------------------------
   Layout fix: header altında kalmasın
------------------------------------------------------------ */
body[data-aill-menu="blog"] .blog-main{
	/* Senin header yüksek; içerik üstte ezilmesin */
	padding-top: 16px;
}

@media (max-width: 900px){
	body[data-aill-menu="blog"] .blog-main{ padding-top: 14px; }
}

/* ------------------------------------------------------------
   Blog container / cards
------------------------------------------------------------ */
body[data-aill-menu="blog"] .blog-merged{
	gap: 18px;
}

body[data-aill-menu="blog"] .blog-left{
	/* Sol taraf daha “okunur” */
	border-radius: 18px;
	background: var(--blog-card-bg);
	border: 1px solid var(--blog-border);
	box-shadow: var(--blog-shadow);
	overflow: hidden;
}

body[data-aill-menu="blog"] .blog-hero{
	padding: 16px 16px 10px 16px;
	border-bottom: 1px solid var(--blog-border);
	background: var(--blog-card-bg-strong);
}

body[data-aill-menu="blog"] .blog-title{
	font-size: 28px;
	line-height: 1.18;
	letter-spacing: -0.2px;
	margin: 10px 0 8px 0;
	color: var(--blog-text);
}

body[data-aill-menu="blog"] .blog-subtitle{
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 10px 0;
	color: var(--blog-muted);
}

body[data-aill-menu="blog"] .blog-meta{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	font-size: 12px;
	color: var(--blog-muted);
}

body[data-aill-menu="blog"] .blog-badges{
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

body[data-aill-menu="blog"] .blog-badge{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 900;
	padding: 7px 10px;
	border-radius: 999px;
	border: 1px solid var(--blog-border);
	background: var(--blog-card-bg);
	color: var(--blog-text);
}

body[data-aill-menu="blog"] .blog-badge.secondary{
	font-weight: 800;
	opacity: .95;
}

/* ------------------------------------------------------------
   Article typography
------------------------------------------------------------ */
body[data-aill-menu="blog"] .blog-article{
	padding: 6px 16px 16px 16px;
	color: var(--blog-text);
}

body[data-aill-menu="blog"] .blog-section{
	margin: 18px 0;
}

body[data-aill-menu="blog"] .blog-article h2{
	font-size: 19px;
	margin: 18px 0 10px 0;
	letter-spacing: -0.1px;
	color: var(--blog-text);
}

body[data-aill-menu="blog"] .blog-article h3{
	font-size: 15px;
	margin: 12px 0 8px 0;
	color: var(--blog-text);
	opacity: .95;
}

body[data-aill-menu="blog"] .blog-article p{
	font-size: 14px;
	line-height: 1.75;
	margin: 8px 0;
	color: var(--blog-text);
}

body[data-aill-menu="blog"] .blog-article ul{
	margin: 8px 0 8px 18px;
	padding: 0;
}

body[data-aill-menu="blog"] .blog-article li{
	margin: 6px 0;
	line-height: 1.65;
	color: var(--blog-text);
}

body[data-aill-menu="blog"] .blog-article code{
	padding: 2px 6px;
	border-radius: 8px;
	border: 1px solid var(--blog-border);
	background: var(--blog-card-bg);
	font-size: 12px;
}

/* ------------------------------------------------------------
   Callout
------------------------------------------------------------ */
body[data-aill-menu="blog"] .blog-callout{
	margin: 12px 0;
	padding: 12px 12px;
	border-radius: 14px;
	border: 1px solid var(--blog-border);
	background: var(--blog-card-bg-strong);
	font-size: 13px;
	line-height: 1.65;
	color: var(--blog-text);
}

body[data-aill-menu="blog"] .blog-inline-note{
	font-size: 13px;
	line-height: 1.65;
	padding: 10px 12px;
	border-radius: 14px;
	border: 1px dashed var(--blog-border);
	background: var(--blog-card-bg);
	color: var(--blog-muted);
	margin-top: 10px;
}

/* ------------------------------------------------------------
   Table (dark görünür)
------------------------------------------------------------ */
body[data-aill-menu="blog"] .blog-table-wrap{
	margin-top: 10px;
	overflow-x: auto;
	border-radius: 14px;
	border: 1px solid var(--blog-border);
	background: var(--blog-card-bg);
}

body[data-aill-menu="blog"] .blog-table{
	width: 100%;
	border-collapse: collapse;
	min-width: 680px;
}

body[data-aill-menu="blog"] .blog-table th,
body[data-aill-menu="blog"] .blog-table td{
	text-align: left;
	padding: 10px 10px;
	border-bottom: 1px solid var(--blog-border);
	font-size: 13px;
	vertical-align: top;
	color: var(--blog-text);
}

body[data-aill-menu="blog"] .blog-table thead th{
	font-weight: 900;
	background: var(--blog-card-bg-strong);
}

/* ------------------------------------------------------------
   Sidebar cards
------------------------------------------------------------ */
body[data-aill-menu="blog"] .blog-right .blog-sidecard{
	padding: 14px;
	border-radius: 16px;
	border: 1px solid var(--blog-border);
	background: var(--blog-card-bg);
	box-shadow: var(--blog-shadow);
	margin-bottom: 12px;
	position: sticky;
	top: 92px;
	color: var(--blog-text);
}

body[data-aill-menu="blog"] .blog-right .blog-sidecard h3{
	margin: 0 0 10px 0;
	font-size: 14px;
}

body[data-aill-menu="blog"] .blog-toc ul{ margin: 0; padding-left: 16px; }
body[data-aill-menu="blog"] .blog-toc li{ margin: 6px 0; }

body[data-aill-menu="blog"] .blog-toc a{
	text-decoration: none;
	font-size: 13px;
	color: var(--blog-text);
	opacity: .92;
}

body[data-aill-menu="blog"] .blog-toc a:hover{ opacity: 1; }

body[data-aill-menu="blog"] .blog-side-desc{
	font-size: 13px;
	color: var(--blog-muted);
	margin: 0 0 10px 0;
}

body[data-aill-menu="blog"] .blog-tool-links{ display: grid; gap: 8px; }

body[data-aill-menu="blog"] .blog-tool{
	display: block;
	padding: 10px 10px;
	border-radius: 12px;
	border: 1px solid var(--blog-border);
	background: var(--blog-card-bg-strong);
	text-decoration: none;
	font-size: 13px;
	font-weight: 900;
	color: var(--blog-text);
}

/* ------------------------------------------------------------
   CTA
------------------------------------------------------------ */
body[data-aill-menu="blog"] .blog-cta{
	margin: 12px 16px 16px 16px;
	padding: 14px;
	border-radius: 18px;
	border: 1px solid var(--blog-border);
	background: var(--blog-card-bg-strong);
	color: var(--blog-text);
}

body[data-aill-menu="blog"] .blog-cta-title{ margin: 0 0 8px 0; font-size: 16px; }
body[data-aill-menu="blog"] .blog-cta-desc{ margin: 0 0 12px 0; font-size: 13px; color: var(--blog-muted); }

body[data-aill-menu="blog"] .blog-cta-actions{ display: flex; gap: 10px; flex-wrap: wrap; }

body[data-aill-menu="blog"] .blog-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid var(--blog-border);
	text-decoration: none;
	font-weight: 900;
	font-size: 13px;
	color: var(--blog-text);
	background: var(--blog-card-bg);
}

body[data-aill-menu="blog"] .blog-btn.primary{
	background: var(--blog-card-bg-strong);
}

/* ------------------------------------------------------------
   Mobile
------------------------------------------------------------ */
@media (max-width: 900px){
	body[data-aill-menu="blog"] .blog-right .blog-sidecard{ position: static; top: auto; }
	body[data-aill-menu="blog"] .blog-title{ font-size: 23px; }
	body[data-aill-menu="blog"] .blog-hero{ padding: 14px; }
	body[data-aill-menu="blog"] .blog-article{ padding: 6px 14px 14px 14px; }
	body[data-aill-menu="blog"] .blog-cta{ margin: 12px 14px 14px 14px; }
}





/* =====================================================================
   ✅ BLOG LAYOUT FIX — Sağ sidebar sağda dursun
   Not: Sadece blog sayfalarında çalışır (data-aill-menu="blog")
===================================================================== */

body[data-aill-menu="blog"] .merged-layout.blog-merged{
	display: flex !important;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: nowrap; /* wrap olmasın, yan yana dursun */
}

/* Sol içerik: kalan alanı alsın */
body[data-aill-menu="blog"] .left-column-main.blog-left{
	flex: 1 1 auto;
	min-width: 0; /* overflow taşmalarını engeller */
}

/* Sağ sidebar: sabit genişlikte sağda kalsın */
body[data-aill-menu="blog"] .right-column-main.blog-right{
	flex: 0 0 340px;
	max-width: 360px;
	min-width: 300px;
	margin-left: auto;
}

/* Tablet/Mobil: sidebar alta insin (bilerek) */
@media (max-width: 1100px){
	body[data-aill-menu="blog"] .merged-layout.blog-merged{
		flex-direction: column;
	}
	body[data-aill-menu="blog"] .right-column-main.blog-right{
		flex: 1 1 auto;
		max-width: 100%;
		min-width: 0;
		margin-left: 0;
	}
}







/* =====================================================================
   ✅ BLOG SPACING + RIGHT GUTTER + STICKY FIX
   - Sol kart soldan/ alttan boşluk
   - Sağ sidebar sağdan boşluk
   - Sticky çakışma: sadece TOC sticky, Tools normal
===================================================================== */

/* Sayfanın iki yanına genel “gutter” (boşluk) */
body[data-aill-menu="blog"] .blog-main{
	padding-left: 16px;
	padding-right: 16px;
	padding-bottom: 18px; /* alttan genel boşluk */
}

/* Sol büyük kart: alttan ekstra boşluk */
body[data-aill-menu="blog"] .left-column-main.blog-left{
	margin-bottom: 18px;
}

/* Sağ kolon: sağdan boşluk (ekstra güvenlik) */
body[data-aill-menu="blog"] .right-column-main.blog-right{
	padding-right: 6px;   /* iç padding */
	margin-right: 10px;   /* dış boşluk: sağa yapışmayı keser */
}

/* ------------------------------------------------------------
   STICKY ÇAKIŞMA ÇÖZÜMÜ (3. resimdeki karışıklık)
   - Sadece ilk kart (İçindekiler) sticky kalsın
   - İkinci kart (Hızlı Araçlar) sticky olmasın
------------------------------------------------------------ */

/* İçindekiler kartı sticky */
body[data-aill-menu="blog"] .blog-right .blog-sidecard:first-of-type{
	position: sticky;
	top: 92px;
	z-index: 30;

	/* Üstte gezerken “okunur” dursun diye biraz daha koyu + blur */
	background: var(--blog-card-bg-strong);
	backdrop-filter: blur(8px);
}

/* Hızlı Araçlar kartı sticky olmasın (çakışmayı kökten bitirir) */
body[data-aill-menu="blog"] .blog-right .blog-sidecard:nth-of-type(2){
	position: static;
	z-index: 1;
	margin-top: 12px;
}

/* Reklam bloğu ile araya nefes */
body[data-aill-menu="blog"] .blog-right .ad-box{
	margin-top: 14px;
}

/* Mobilde zaten column: ama boşluklar daha iyi dursun */
@media (max-width: 900px){
	body[data-aill-menu="blog"] .blog-main{
		padding-left: 12px;
		padding-right: 12px;
		padding-bottom: 14px;
	}
	body[data-aill-menu="blog"] .right-column-main.blog-right{
		margin-right: 0;
		padding-right: 0;
	}
}










/* =====================================================================
   ✅ BLOG OVERFLOW FIX PATCH (MOBİL YANA TAŞMA KESİN ÇÖZÜM)
   - Tablo/uzun kelime/görsel overflowunu engeller
   - Flex child min-width problemini çözer
===================================================================== */

/* Blog scope içinde box sizing + yatay taşmayı kes */
body[data-aill-menu="blog"],
body[data-aill-menu="blog"] *{
	box-sizing: border-box;
}

/* ❌ body'de overflow-x hidden sticky'yi bozabiliyor (desktop efekti öldürür)
   ✅ body overflow'a dokunmuyoruz */
body[data-aill-menu="blog"]{
	overflow-x: visible;
}


/* Flex layout çocukları taşmasın */
body[data-aill-menu="blog"] .merged-layout.blog-merged,
body[data-aill-menu="blog"] .left-column-main.blog-left,
body[data-aill-menu="blog"] .right-column-main.blog-right{
	min-width: 0;
}

/* Görsel taşması */
body[data-aill-menu="blog"] .blog-article img,
body[data-aill-menu="blog"] .blog-figure img{
	max-width: 100%;
	height: auto;
	display: block;
}

/* Tablo wrapper kesin sınır */
body[data-aill-menu="blog"] .blog-table-wrap{
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Uzun kelime/URL taşması (özellikle mobilde) */
body[data-aill-menu="blog"] .blog-article,
body[data-aill-menu="blog"] .blog-article p,
body[data-aill-menu="blog"] .blog-article li,
body[data-aill-menu="blog"] .blog-article td,
body[data-aill-menu="blog"] .blog-article th{
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Inline code taşması */
body[data-aill-menu="blog"] .blog-article code{
	white-space: pre-wrap;
	word-break: break-word;
}






/* =====================================================================
   ✅ BLOG HORIZONTAL OVERFLOW — SAFE FIX (Sticky'yi bozmaz)
   - Sağa kaymayı sol içerikte keser
   - Sağ sidebar sticky efektine dokunmaz
===================================================================== */
body[data-aill-menu="blog"] .left-column-main.blog-left,
body[data-aill-menu="blog"] .blog-article{
	overflow-x: clip; /* hidden yerine clip: daha temiz */
}

/* Çok uzun code/URL olursa yine taşmasın */
body[data-aill-menu="blog"] .blog-article pre,
body[data-aill-menu="blog"] .blog-article code{
	max-width: 100%;
	overflow-x: auto;
}















































/* =====================================================================
   ✅ PAGE-SPECIFIC OVERFLOW FIX — image-formats-guide (MOBİL)
   - Aynı CSS kullanan diğer blogları etkilemez
   - Taşma yapan tablo/pre/geniş elementleri güvenli biçimde keser
===================================================================== */

/* 1) Bu sayfada article içindeki tabloları garanti “scrollable” yap */
body[data-aill-menu="blog"][data-aill-tool="image-formats-guide"] .blog-article table{
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-collapse: collapse;
}

/* 2) Tablo hücreleri/başlıklar uzun içerikte patlamasın */
body[data-aill-menu="blog"][data-aill-tool="image-formats-guide"] .blog-article th,
body[data-aill-menu="blog"][data-aill-tool="image-formats-guide"] .blog-article td{
	white-space: nowrap; /* tabloyu yatay scroll'a yönlendirir */
}

/* 3) Kod blokları / uzun satırlar varsa taşırmasın */
body[data-aill-menu="blog"][data-aill-tool="image-formats-guide"] .blog-article pre,
body[data-aill-menu="blog"][data-aill-tool="image-formats-guide"] .blog-article code{
	max-width: 100%;
	overflow-x: auto;
}

/* 4) SON ÇARE (sadece mobilde): body yatay taşmayı kes
      - Desktop sticky'ye dokunmaz (sadece mobil breakpoint) */
@media (max-width: 900px){
	body[data-aill-menu="blog"][data-aill-tool="image-formats-guide"]{
		overflow-x: hidden;
	}
}


/* =====================================================================
   ✅ BLOG MOBILE NO-HORIZONTAL-SCROLL (GARANTİ)
   - Sadece mobilde uygula
   - Sticky/desktop efektlerini etkilemez
===================================================================== */
@media (max-width: 900px){

	/* En garantisi: yatay taşmayı kökten kes */
	html{
		overflow-x: hidden !important;
	}

	body[data-aill-menu="blog"]{
		overflow-x: hidden !important;
		width: 100%;
		max-width: 100vw;
	}

	body[data-aill-menu="blog"] .blog-main,
	body[data-aill-menu="blog"] .merged-layout.blog-merged,
	body[data-aill-menu="blog"] .left-column-main.blog-left,
	body[data-aill-menu="blog"] .right-column-main.blog-right{
		max-width: 100vw;
		min-width: 0;
	}

	/* Taşma yapan klasik suçlular */
	body[data-aill-menu="blog"] img,
	body[data-aill-menu="blog"] svg,
	body[data-aill-menu="blog"] video,
	body[data-aill-menu="blog"] iframe{
		max-width: 100% !important;
		height: auto;
	}

	/* Tablo ve code blokları: yatay scroll kendi içinde olsun */
	body[data-aill-menu="blog"] table{
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	body[data-aill-menu="blog"] pre,
	body[data-aill-menu="blog"] code{
		max-width: 100%;
		overflow-x: auto;
	}
}
















/* =====================================================================
   ✅ WebP yazısı - mobil overflow fix
   - Ad iframe veya uzun code satırları taşma yapıyor olabilir.
   - Bu patch mobilde kesin keser.
===================================================================== */
@media (max-width: 900px){
  body[data-aill-menu="blog"] .blog-article,
  body[data-aill-menu="blog"] .blog-article *,
  body[data-aill-menu="blog"] iframe,
  body[data-aill-menu="blog"] pre,
  body[data-aill-menu="blog"] code {
    max-width: 100% !important;
    overflow-x: hidden !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  /* Ads iframe taşıyorsa */
  body[data-aill-menu="blog"] iframe{
    display: block;
    width: 100% !important;
  }
}









/* =====================================================================
   ✅ AdSense hizalama & overflow fix (mobil + tablet)
   - "no_div" hatası sonrası bozuk <ins> div hizalarını sıfırlar
   - Aşağıdaki stiller yalnızca blog sayfalarında aktif olur
===================================================================== */

body[data-aill-menu="blog"] ins.adsbygoogle {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 16px auto !important;
	padding: 0 !important;
	overflow: hidden !important;
	text-align: center !important;
	position: static !important;
	box-sizing: border-box !important;
}

/* AdSense konteyneri boşken sayfayı taşırmasın */
body[data-aill-menu="blog"] .adsbygoogle:empty {
	display: none !important;
}

/* Mobilde alt boşluk / ortalama düzeltmesi */
@media (max-width: 900px){
	body[data-aill-menu="blog"] ins.adsbygoogle {
		margin-left: auto !important;
		margin-right: auto !important;
	}
}
























/* =====================================================================
   ✅ BLOG INDEX (blog.php) — Extra CSS (Scoped)
   - Sadece blog listeleme sayfasını etkiler
   - Dark/Light varsayılan blog değişkenlerini kullanır
===================================================================== */
body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-index-searchbar{
	margin-top: 12px;
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-index-search-input{
	flex: 1 1 260px;
	min-width: 200px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid var(--blog-border);
	background: var(--blog-card-bg);
	color: var(--blog-text);
	font-size: 13px;
	outline: none;
}

body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-index-search-input:focus{
	background: var(--blog-card-bg-strong);
}

body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-index-search-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid var(--blog-border);
	background: var(--blog-card-bg-strong);
	color: var(--blog-text);
	font-size: 13px;
	font-weight: 900;
	cursor: pointer;
}

body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-index-search-hint{
	margin-top: 8px;
	font-size: 12px;
	color: var(--blog-muted);
}

/* List cards */
body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-index-list{
	padding: 12px 16px 16px 16px;
	display: grid;
	gap: 14px;
}

body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-index-card{
	border: 1px solid var(--blog-border);
	background: var(--blog-card-bg);
	border-radius: 16px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 190px 1fr;
	min-height: 150px;
}

body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-index-cover{
	display: block;
	width: 100%;
	height: 100%;
	background: var(--blog-card-bg-strong);
}

body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-index-cover img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-index-body{
	padding: 12px 12px;
	min-width: 0;
}

body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-index-topmeta{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	font-size: 12px;
	color: var(--blog-muted);
	margin-bottom: 8px;
}

body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-index-dot{
	opacity: .8;
}

body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-index-title{
	margin: 0 0 8px 0;
	font-size: 16px;
	line-height: 1.35;
	letter-spacing: -0.1px;
}

body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-index-title a{
	text-decoration: none;
	color: var(--blog-text);
}

body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-index-excerpt{
	margin: 0 0 10px 0;
	font-size: 13px;
	line-height: 1.7;
	color: var(--blog-muted);
}

body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-index-actions{
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* Loader */
body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-index-loader{
	padding: 0 16px 16px 16px;
	display: none;
}

body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-index-loader.show{
	display: block;
}

body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-index-loader-line{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid var(--blog-border);
	background: var(--blog-card-bg-strong);
	color: var(--blog-text);
	font-size: 13px;
}

body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-index-spinner{
	width: 16px;
	height: 16px;
	border-radius: 999px;
	border: 2px solid var(--blog-border);
	border-top-color: transparent;
	display: inline-block;
	animation: aillSpin .85s linear infinite;
}

@keyframes aillSpin{
	from{ transform: rotate(0deg); }
	to{ transform: rotate(360deg); }
}

/* Search Modal */
body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-search-modal{
	position: fixed;
	inset: 0;
	display: none;
	z-index: 9999;

	/* ✅ Modal kendi içinde aşağı kayabilsin */
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;

	/* küçük nefes */
	padding: 10px 0;
}


body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-search-modal.open{
	display: block;
}

body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-search-backdrop{
	position: absolute;
	inset: 0;

	/* ✅ Hem dark hem light: daha koyu + daha “net” */
	background: rgba(0,0,0,.72);
	backdrop-filter: blur(2px);
}


body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-search-panel{
	position: relative;
	width: min(920px, calc(100vw - 24px));
	margin: 70px auto 24px auto;
	border-radius: 18px;
	border: 1px solid var(--blog-border);

	/* ✅ Light’ta daha opak (şeffaflığı azaltır) */
	background: rgba(255,255,255,.96);

	box-shadow: var(--blog-shadow);
	overflow: hidden;

	/* ✅ İçerik çok uzarsa panel ekran dışına taşmasın */
	max-height: calc(100vh - 110px);
}
/* ✅ Dark tema: paneli daha koyu ve opak yap */
@media (prefers-color-scheme: dark) {
	body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-search-panel{
		background: rgba(14,18,26,.96);
	}
}
html[data-theme="dark"] body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-search-panel,
body[data-theme="dark"][data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-search-panel,
body.dark[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-search-panel{
	background: rgba(14,18,26,.96);
}


body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-search-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 12px;
	border-bottom: 1px solid var(--blog-border);
}

body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-search-title{
	font-weight: 900;
	color: var(--blog-text);
}

body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-search-close{
	border: 1px solid var(--blog-border);
	background: var(--blog-card-bg);
	color: var(--blog-text);
	border-radius: 12px;
	padding: 8px 10px;
	cursor: pointer;
	font-weight: 900;
}

body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-search-body{
	padding: 12px;

	/* ✅ Asıl scroll burada: sonuçlar uzarsa içeride kayar */
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;

	/* Panel max-height’e uyumlu bir “iç scroll” alanı */
	max-height: calc(100vh - 190px);
}


body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-search-status{
	font-size: 13px;
	color: var(--blog-muted);
	margin-bottom: 10px;
}

body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-search-results{
	display: grid;
	gap: 10px;
}

body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-search-item{
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 10px;
	padding: 10px;
	border-radius: 16px;
	border: 1px solid var(--blog-border);
	background: var(--blog-card-bg);
	text-decoration: none;
	color: inherit;
}

body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-search-thumb img{
	width: 100%;
	height: 78px;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}

body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-search-item-title{
	font-weight: 900;
	font-size: 13px;
	color: var(--blog-text);
	margin-bottom: 6px;
}

body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-search-item-meta{
	font-size: 12px;
	color: var(--blog-muted);
	margin-bottom: 6px;
}

body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-search-item-excerpt{
	font-size: 12px;
	line-height: 1.6;
	color: var(--blog-muted);
}

/* Mobile */
@media (max-width: 900px){
	body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-index-list{
		padding: 12px 14px 14px 14px;
	}
	body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-index-card{
		grid-template-columns: 1fr;
	}
	body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-index-cover img{
		height: 170px;
	}

	/* ✅ Mobil: panel daha az boşlukla dursun + max-height daha iyi */
	body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-search-panel{
		margin-top: 54px;
		max-height: calc(100vh - 80px);
	}

	/* ✅ Mobil: body scroll alanı */
	body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-search-body{
		max-height: calc(100vh - 160px);
		overflow-y: auto;
	}

	body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-search-item{
		grid-template-columns: 1fr;
	}
	body[data-aill-menu="blog"][data-aill-tool="blog-index"] .blog-search-thumb img{
		height: 150px;
	}
}