/* =====================================================================
   📁 Dosya: /assets/css/sayfalar.css — FINAL SÜRÜM

   ===================================================================== */



/* ================================================================
   SAYFALAR → MENÜ GRUBU BAŞLIĞI
================================================================= */
.sayfa-group-head {
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 20px 8px;
    text-align: center;
}
.sayfa-group-head__crumb {
    display: inline-block;
    margin: 0 0 8px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6d28d9;
    background: rgba(124, 58, 237, .1);
}
body.dark .sayfa-group-head__crumb {
    color: #c4b5fd;
    background: rgba(139, 92, 246, .18);
}
.sayfa-group-head h1 {
    margin: 0 0 8px;
    font-size: clamp(1.4rem, 3vw, 1.85rem);
    color: inherit;
}
.sayfa-group-head p {
    margin: 0 auto;
    max-width: 640px;
    font-size: 14px;
    color: #64748b;
}
body.dark .sayfa-group-head p { color: #94a3b8; }

/* ================================================================
   SAYFALAR → ALT MENÜ KARTLARI
================================================================= */

.tool-cards-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
    padding: 24px 20px 80px;
}

/* KART */
.tool-card {
    background: #0D1B2A;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 16px;
    padding: 28px 22px;
    text-align: center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body:not(.dark) .tool-card {
    background: #ffffff;
    border-color: #eaeaea;
    box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

/* Hover */
.tool-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* İKON */
.tool-icon {
    font-size: 40px;
    margin-bottom: 14px;
}

/* BAŞLIK */
.tool-card h3 {
    margin: 12px 0;
    font-size: 20px;
}

/* AÇIKLAMA */
.tool-card p {
    font-size: 14px;
    opacity: 0.85;
    margin-bottom: 20px;
}

/* BUTON */
.tool-btn {
    display: inline-block;
    background: #3577FF;
    color: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 15px;
    transition: background .2s;
}

.tool-btn:hover {
    background: #1d5beb;
}

/* Dark Mode Buton */
body.dark .tool-btn {
    background: #1DD1A1;
    color: #0D1B2A;
}

body.dark .tool-btn:hover {
    background: #18b78f;
}

.pro-card {
    padding: 18px;
    background: #ffffff;               /* 🔥 Açık tema */
    border: 1px solid #d5d7de;         /* Light border */
    border-radius: 12px;
    text-align: center;
    color: #333;                       /* siyah metin */
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* DARK MODE – PRO Kart */
body.dark .pro-card {
    background: #0f1a2b;               /* eski koyu renk */
    border: 1px solid #375886;
    color: #fff;
}
.pro-upgrade-btn {
    background: linear-gradient(90deg, #ffb300, #ff8c00);
    border: none;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    color: #000;
    margin-top: 5px;
}
.pro-upgrade-btn:hover {
    opacity: 0.85;
}
/* Format Bilgilendiricisi */
.format-note {
    margin-top: 8px;
    font-size: 12px;
    color: #888;
    text-align: center;
    line-height: 1.4;
}














/* =====================================================================
   ✅ MENU SEO ARTICLE — Ortak Blog Bloğu (Tüm menüler)
   - Dark/Light uyumlu
   - Mobilde tablo taşmasını önler
===================================================================== */

.menu-article{
	max-width: 1100px;
	margin: 0 auto;
	padding: 10px 20px 70px;
}

.menu-article-h1{
	font-size: 28px;
	line-height: 1.25;
	margin: 10px 0 14px;
	letter-spacing: -0.2px;
}

.menu-article-body{
	font-size: 16px;
	line-height: 1.75;
	opacity: 0.95;
}

.menu-article-body h2{
	margin: 22px 0 10px;
	font-size: 20px;
	line-height: 1.35;
}

.menu-article-body h3{
	margin: 16px 0 8px;
	font-size: 17px;
	line-height: 1.35;
	opacity: 0.95;
}

.menu-article-body p{
	margin: 0 0 14px;
}

.menu-article-body a{
	text-decoration: underline;
	text-underline-offset: 3px;
}

.menu-article-callout{
	margin: 14px 0 18px;
	padding: 14px 14px;
	border-radius: 14px;
	border: 1px solid rgba(53,119,255,0.28);
	background: rgba(53,119,255,0.08);
}

body.dark .menu-article-callout{
	border-color: rgba(29,209,161,0.30);
	background: rgba(29,209,161,0.10);
}

.menu-article-list{
	margin: 10px 0 16px 18px;
}

.menu-article-steps{
	margin: 10px 0 18px 18px;
}

.menu-article-checklist{
	display: grid;
	gap: 10px;
	margin: 12px 0 18px;
	padding: 14px;
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,0.08);
	background: rgba(0,0,0,0.12);
}

body:not(.dark) .menu-article-checklist{
	border-color: #e6e6e6;
	background: #f8f9fb;
}

.menu-article-checklist label{
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	opacity: 0.95;
}

.menu-article-faqbox{
	margin-top: 12px;
	display: grid;
	gap: 10px;
}

.menu-article-faqbox details{
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 14px;
	padding: 12px 14px;
	background: rgba(0,0,0,0.10);
}

body:not(.dark) .menu-article-faqbox details{
	border-color: #e6e6e6;
	background: #ffffff;
}

.menu-article-faqbox summary{
	cursor: pointer;
	font-weight: 700;
}

.menu-article-tablewrap{
	overflow-x: auto;
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,0.08);
	margin: 12px 0 18px;
}

body:not(.dark) .menu-article-tablewrap{
	border-color: #e6e6e6;
}

.menu-article-table{
	width: 100%;
	min-width: 760px;
	border-collapse: collapse;
}

.menu-article-table th,
.menu-article-table td{
	padding: 12px 12px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	vertical-align: top;
}

body:not(.dark) .menu-article-table th,
body:not(.dark) .menu-article-table td{
	border-bottom-color: #ededed;
}

.menu-article-table th{
	text-align: left;
	font-size: 13px;
	opacity: 0.9;
	letter-spacing: 0.2px;
}

.menu-article-bottomnote{
	margin-top: 18px;
	font-size: 13px;
	opacity: 0.85;
}









/* ================================================================
   ✅ SEO / ADSENSE UYUMLU YAZI BLOĞU (ORTAK)
   - Tüm footer menu sayfalarında aynı class'lar
================================================================= */

.aill-seo-block{
	padding: 10px 20px 70px;
}

.aill-seo-inner{
	max-width: 980px;
	margin: 0 auto;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 18px;
	padding: 26px 22px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.20);
}

body:not(.dark) .aill-seo-inner{
	background: #ffffff;
	border-color: #e9e9ef;
	box-shadow: 0 10px 24px rgba(0,0,0,0.10);
}

.aill-article h1{
	font-size: 26px;
	line-height: 1.2;
	margin: 0 0 10px;
}

.aill-article h2{
	font-size: 18px;
	margin: 20px 0 10px;
}

.aill-article h3{
	font-size: 16px;
	margin: 14px 0 8px;
}

.aill-lead{
	font-size: 15px;
	opacity: .92;
	line-height: 1.7;
	margin: 0 0 10px;
}

.aill-meta{
	font-size: 12.5px;
	opacity: .85;
	margin: 8px 0 0;
}

.aill-article p, .aill-article li, .aill-article dd{
	line-height: 1.75;
}

.aill-article a{
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.aill-callout{
	margin: 16px 0;
	padding: 14px 14px;
	border-radius: 14px;
	background: rgba(53,119,255,0.12);
	border: 1px solid rgba(53,119,255,0.22);
}

body.dark .aill-callout{
	background: rgba(29,209,161,0.10);
	border-color: rgba(29,209,161,0.22);
}

.aill-note{
	font-size: 13px;
	opacity: .85;
	margin-top: 10px;
}

.aill-mini-grid{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 12px 0 0;
}

@media (max-width: 720px){
	.aill-mini-grid{ grid-template-columns: 1fr; }
	.aill-seo-inner{ padding: 18px 14px; }
	.aill-article h1{ font-size: 22px; }
}

.aill-mini-card{
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 14px;
	padding: 12px 12px;
}

body:not(.dark) .aill-mini-card{
	background: #fafafb;
	border-color: #ededf3;
}

/* Table wrapper (mobilde taşma olmasın) */
.aill-table-wrap{
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 10px 0;
}

.aill-table{
	width: 100%;
	border-collapse: collapse;
	min-width: 520px;
	font-size: 14px;
}

.aill-table th, .aill-table td{
	padding: 10px 10px;
	text-align: left;
	border-bottom: 1px solid rgba(255,255,255,0.10);
}

body:not(.dark) .aill-table th,
body:not(.dark) .aill-table td{
	border-bottom-color: #ececf2;
}

/* Definition list */
.aill-dl dt{
	font-weight: 800;
	margin-top: 10px;
}

.aill-dl dd{
	margin: 4px 0 0 0;
	opacity: .9;
}

/* Footer tags */
.aill-tags{
	margin-top: 10px;
	font-size: 12.5px;
	opacity: .85;
}




















/* =====================================================================
   ✅ MENU SEO BLOKLARI — ORTAK CSS (BİRLEŞTİR / FİLİGRAN / EFEKT)
   Dosya: /assets/css/sayfalar.css (EN ALTINA EKLE)
   - Dark/Light uyumlu (hem theme.js hem prefers-color-scheme)
   - Mobil uyumlu
   - A11Y uyumlu
===================================================================== */

/* ------------------------------------------------------------
   1) Tema değişkenleri (DEFAULT = LIGHT)
------------------------------------------------------------ */
:root{
	--seo-bg: rgba(255,255,255,.72);
	--seo-border: rgba(15,23,42,.10);
	--seo-shadow: 0 10px 28px rgba(15,23,42,.08);

	--seo-title: #0f172a;
	--seo-subtitle: #111827;
	--seo-text: #1f2937;
	--seo-muted: rgba(31,41,55,.78);

	--seo-link: #2563eb;
	--seo-link-underline: rgba(37,99,235,.30);

	--seo-tags-bg: rgba(37,99,235,.08);
	--seo-tags-border: rgba(37,99,235,.18);

	--seo-table-bg: rgba(255,255,255,.92);
	--seo-table-border: rgba(15,23,42,.12);
	--seo-table-head-bg: rgba(2,6,23,.06);
	--seo-table-head-text: #0f172a;
	--seo-row-hover: rgba(37,99,235,.06);

	--seo-note-bg: rgba(16,185,129,.09);
	--seo-note-border: rgba(16,185,129,.20);

	--seo-radius: 16px;
	--seo-pad: 18px;
}

/* ------------------------------------------------------------
   2) DARK: theme.js class/attr yakalama (GARANTİLİ)
   - Bu seçicilerden hangisi sende varsa otomatik devreye girer.
------------------------------------------------------------ */
html[data-theme="dark"],
body[data-theme="dark"],
.theme-dark,
.dark{
	--seo-bg: rgba(2,6,23,.58);
	--seo-border: rgba(255,255,255,.12);
	--seo-shadow: 0 12px 30px rgba(0,0,0,.40);

	--seo-title: rgba(229,231,235,.98);
	--seo-subtitle: rgba(229,231,235,.95);
	--seo-text: rgba(229,231,235,.92);
	--seo-muted: rgba(229,231,235,.74);

	--seo-link: #60a5fa;
	--seo-link-underline: rgba(96,165,250,.32);

	--seo-tags-bg: rgba(96,165,250,.12);
	--seo-tags-border: rgba(96,165,250,.22);

	--seo-table-bg: rgba(2,6,23,.45);
	--seo-table-border: rgba(255,255,255,.12);
	--seo-table-head-bg: rgba(255,255,255,.08);
	--seo-table-head-text: rgba(229,231,235,.95);
	--seo-row-hover: rgba(96,165,250,.10);

	--seo-note-bg: rgba(16,185,129,.14);
	--seo-note-border: rgba(16,185,129,.26);
}

/* OS dark tercihi: sadece kullanıcı site temasını seçmemişse */
@media (prefers-color-scheme: dark){
	html:not([data-theme="light"]) body:not(.dark):not([data-theme="light"]) {
		--seo-bg: rgba(2,6,23,.58);
		--seo-border: rgba(255,255,255,.12);
		--seo-shadow: 0 12px 30px rgba(0,0,0,.40);
		--seo-title: rgba(229,231,235,.98);
		--seo-subtitle: rgba(229,231,235,.95);
		--seo-text: rgba(229,231,235,.92);
		--seo-muted: rgba(229,231,235,.74);
		--seo-link: #60a5fa;
		--seo-link-underline: rgba(96,165,250,.32);
		--seo-tags-bg: rgba(96,165,250,.12);
		--seo-tags-border: rgba(96,165,250,.22);
		--seo-table-bg: rgba(2,6,23,.45);
		--seo-table-border: rgba(255,255,255,.12);
		--seo-table-head-bg: rgba(255,255,255,.08);
		--seo-table-head-text: rgba(229,231,235,.95);
		--seo-row-hover: rgba(96,165,250,.10);
		--seo-note-bg: rgba(16,185,129,.14);
		--seo-note-border: rgba(16,185,129,.26);
	}
}

/* ------------------------------------------------------------
   4) BLOK WRAPPER
------------------------------------------------------------ */
.menu-seo-section{
	width: 100%;
	margin: 22px 0 0;
	padding: 0;
}

.menu-seo-container{
	max-width: 1120px;
	margin: 0 auto;
	padding: var(--seo-pad);
	border-radius: var(--seo-radius);
	background: var(--seo-bg);
	border: 1px solid var(--seo-border);
	box-shadow: var(--seo-shadow);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	overflow: hidden; /* iç taşmalar */
}

/* İçerik aralığı – bloklar birbirine yapışmasın */
.menu-seo-container > *:first-child{ margin-top: 0; }
.menu-seo-container > *:last-child{ margin-bottom: 0; }

/* ------------------------------------------------------------
   5) TYPOGRAPHY (okunurluk + mobil ölçek)
------------------------------------------------------------ */
.menu-seo-container h2{
	margin: 0 0 10px;
	line-height: 1.18;
	font-weight: 900;
	letter-spacing: -0.2px;
	font-size: clamp(18px, 2.2vw, 24px);
	color: var(--seo-title);
}

.menu-seo-container h3{
	margin: 16px 0 8px;
	line-height: 1.22;
	font-weight: 850;
	font-size: clamp(14.5px, 1.6vw, 17px);
	color: var(--seo-subtitle);
}

.menu-seo-container p{
	margin: 10px 0;
	line-height: 1.68;
	font-size: clamp(13.6px, 1.35vw, 15px);
	color: var(--seo-text);
}

.menu-seo-container small,
.menu-seo-container .menu-seo-muted{
	color: var(--seo-muted);
}

/* ------------------------------------------------------------
   6) LISTS
------------------------------------------------------------ */
.menu-seo-container ul,
.menu-seo-container ol{
	margin: 10px 0 12px;
	padding-left: 18px;
	color: var(--seo-text);
}

.menu-seo-container li{
	margin: 7px 0;
	line-height: 1.6;
}

/* Daha temiz bullet */
.menu-seo-container ul li::marker{
	color: var(--seo-link);
	opacity: .75;
}

/* ------------------------------------------------------------
   7) LINKS (A11Y + hover)
------------------------------------------------------------ */
.menu-seo-container a{
	color: var(--seo-link);
	text-decoration: none;
	font-weight: 800;
	border-bottom: 1px dashed var(--seo-link-underline);
	transition: transform .12s ease, opacity .12s ease, border-color .12s ease;
}

.menu-seo-container a:hover{
	opacity: .95;
	border-bottom-style: solid;
}

.menu-seo-container a:active{
	transform: translateY(1px);
}

.menu-seo-container a:focus-visible{
	outline: 3px solid rgba(96,165,250,.28);
	outline-offset: 3px;
	border-radius: 10px;
}

/* ------------------------------------------------------------
   8) TAGS
------------------------------------------------------------ */
.menu-seo-tags{
	margin-top: 12px;
	padding: 10px 12px;
	border-radius: 14px;
	background: var(--seo-tags-bg);
	border: 1px solid var(--seo-tags-border);
	color: var(--seo-text);
	font-size: clamp(13px, 1.2vw, 13.8px);
	line-height: 1.65;
}

/* ------------------------------------------------------------
   9) NOTE (opsiyonel)
------------------------------------------------------------ */
.menu-seo-note{
	margin-top: 12px;
	padding: 10px 12px;
	border-radius: 14px;
	background: var(--seo-note-bg);
	border: 1px solid var(--seo-note-border);
	color: var(--seo-text);
	font-size: clamp(13px, 1.2vw, 13.8px);
	line-height: 1.65;
}

/* ------------------------------------------------------------
   10) TABLE (masaüstü + mobil scroll garantili)
------------------------------------------------------------ */
.menu-seo-table{
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin: 12px 0 6px;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--seo-table-border);
	background: var(--seo-table-bg);
}

.menu-seo-table thead th{
	text-align: left;
	padding: 12px 12px;
	font-size: 13px;
	font-weight: 900;
	color: var(--seo-table-head-text);
	background: var(--seo-table-head-bg);
	border-bottom: 1px solid var(--seo-table-border);
}

.menu-seo-table tbody td{
	padding: 11px 12px;
	font-size: clamp(13px, 1.2vw, 13.6px);
	line-height: 1.55;
	color: var(--seo-text);
	border-bottom: 1px solid color-mix(in srgb, var(--seo-table-border) 70%, transparent);
}

.menu-seo-table tbody tr:last-child td{
	border-bottom: 0;
}

.menu-seo-table tbody tr:hover td{
	background: var(--seo-row-hover);
}

/* Mobilde tablo taşma çözümü: dış wrapper yoksa bile çalışsın */
@media (max-width: 760px){
	.menu-seo-container{
		padding: 14px 12px;
		border-radius: 14px;
	}

	/* Tabloyu block yapıp yatay kaydır */
	.menu-seo-table{
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Başlık ve hücreler min genişlik alsın */
	.menu-seo-table thead,
	.menu-seo-table tbody,
	.menu-seo-table tr{
		display: table;
		width: 100%;
		table-layout: fixed;
	}

	.menu-seo-table thead th,
	.menu-seo-table tbody td{
		min-width: 220px;
	}
}

/* Çok küçük ekran: daha sıkı */
@media (max-width: 420px){
	.menu-seo-container{
		padding: 12px 10px;
	}
	.menu-seo-tags,
	.menu-seo-note{
		padding: 9px 10px;
		border-radius: 12px;
	}
}