/* ==========================================================================
   İslami Davet — ortak tasarım sistemi (Kur'an ve Dualar temalarıyla aynı) + Çocuk platformu katmanı (12. bölüm)
   Mobil öncelikli · açık/karanlık · erişilebilir · hareket azaltma tercihine saygılı
   ========================================================================== */

/* ---------- 1. Tasarım belirteçleri ---------- */
:root {
	--bg: #fbfaf7;
	--bg-tint: #f4f1ea;
	--surface: #ffffff;
	--surface-2: #f8f6f1;
	--ink: #14201b;
	--ink-2: #36423d;
	--muted: #5f6b65;
	--line: #e6e1d6;
	--line-strong: #d3ccbd;
	--primary: #0e5a45;
	--primary-ink: #ffffff;
	--primary-soft: #e3efe9;
	--primary-strong: #0a4334;
	--accent: #a87f32;
	--accent-soft: #f5ecd9;
	--focus: #c28a1d;
	--danger: #a23b2a;
	--page-paper: #fffdf6;
	--shadow-sm: 0 1px 2px rgb(20 32 27 / 6%);
	--shadow: 0 1px 2px rgb(20 32 27 / 5%), 0 8px 24px -12px rgb(20 32 27 / 14%);
	--shadow-lg: 0 24px 60px -24px rgb(20 32 27 / 28%);

	--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-serif: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
	--font-arabic: "Amiri Quran", "KFGQPC Uthmanic Script HAFS", "Scheherazade New", "Traditional Arabic", serif;

	--step--1: clamp(0.83rem, 0.8rem + 0.1vw, 0.88rem);
	--step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	--step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.3rem);
	--step-2: clamp(1.35rem, 1.2rem + 0.7vw, 1.7rem);
	--step-3: clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem);
	--step-4: clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem);

	--radius-sm: 10px;
	--radius: 16px;
	--radius-lg: 24px;
	--gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
	--section: clamp(3rem, 2rem + 4vw, 6rem);
	--container: 1200px;
	--narrow: 760px;
	--header-h: 64px;
	--tabbar-h: 64px;
	--ease: cubic-bezier(.2, .7, .2, 1);

	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #0c1311;
		--bg-tint: #111a17;
		--surface: #131c19;
		--surface-2: #18231f;
		--ink: #e9eee9;
		--ink-2: #c8d1cb;
		--muted: #94a29b;
		--line: #24312c;
		--line-strong: #33433d;
		--primary: #5cc6a0;
		--primary-ink: #06261c;
		--primary-soft: #16302a;
		--primary-strong: #86dcbc;
		--accent: #d9b56b;
		--accent-soft: #2a2416;
		--focus: #e7c071;
		--page-paper: #f3eedf;
		--shadow-sm: none;
		--shadow: 0 1px 0 rgb(255 255 255 / 3%) inset, 0 10px 30px -18px rgb(0 0 0 / 70%);
		--shadow-lg: 0 30px 60px -20px rgb(0 0 0 / 70%);
		color-scheme: dark;
	}
}
:root[data-theme="dark"] {
	--bg: #0c1311;
	--bg-tint: #111a17;
	--surface: #131c19;
	--surface-2: #18231f;
	--ink: #e9eee9;
	--ink-2: #c8d1cb;
	--muted: #94a29b;
	--line: #24312c;
	--line-strong: #33433d;
	--primary: #5cc6a0;
	--primary-ink: #06261c;
	--primary-soft: #16302a;
	--primary-strong: #86dcbc;
	--accent: #d9b56b;
	--accent-soft: #2a2416;
	--focus: #e7c071;
	--page-paper: #f3eedf;
	--shadow-sm: none;
	--shadow: 0 1px 0 rgb(255 255 255 / 3%) inset, 0 10px 30px -18px rgb(0 0 0 / 70%);
	--shadow-lg: 0 30px 60px -20px rgb(0 0 0 / 70%);
	color-scheme: dark;
}

/* ---------- 2. Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: var(--step-0);
	line-height: 1.65;
	font-feature-settings: "cv11", "ss01";
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}
@media (min-width: 960px) { body { padding-bottom: 0; } }
img, video, iframe, svg { max-width: 100%; }
img, video { height: auto; display: block; }
:where(figure) { margin: 0 0 1.5em; }
.wp-video { max-width: 100%; }
.wp-video video, video.wp-video-shortcode { width: 100%; height: auto; background: #000; border-radius: var(--radius); }
audio.wp-audio-shortcode { width: 100%; }
/* Gömülü YouTube/Vimeo videoları çekirdek blok stilleri yüklenmese de 16:9 kalır. */
.prose iframe[src*="youtube"], .prose iframe[src*="vimeo"], .wp-block-embed iframe[src*="youtube"], .wp-block-embed iframe[src*="vimeo"] { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--primary-strong); }
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 .5em; font-optical-sizing: auto; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--accent-soft); color: var(--ink); }
[hidden] { display: none !important; }
.arabic { font-family: var(--font-arabic); font-feature-settings: normal; letter-spacing: 0; line-height: 2; }
.muted { color: var(--muted); }
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px;
	overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important;
}
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 1000; background: var(--ink); color: var(--bg); padding: .75rem 1rem; border-radius: var(--radius-sm); }
.skip-link:focus { top: 1rem; }
.icon { flex: none; display: inline-block; vertical-align: middle; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 0s !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- 3. Düzen ---------- */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(var(--narrow) + var(--gutter) * 2); }
.section { padding-block: var(--section); }
.section--flush { padding-block: 0 var(--section); }
.section--tint { background: var(--bg-tint); border-block: 1px solid var(--line); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem); }
.section-title { font-size: var(--step-3); margin: 0; }
.subsection-title { font-size: var(--step-2); margin: 2.5rem 0 1rem; }
.eyebrow { font-family: var(--font-sans); font-size: var(--step--1); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 .5rem; }
.eyebrow a { color: inherit; text-decoration: none; }
.link-more { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; font-size: var(--step--1); text-decoration: none; white-space: nowrap; }
.lead-text { font-size: var(--step-1); color: var(--ink-2); max-width: 60ch; }

/* ---------- 4. Bileşenler: düğmeler, çipler, alanlar ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	min-height: 44px; padding: .6rem 1.1rem; border-radius: 999px; border: 1px solid transparent;
	font-weight: 600; font-size: .95rem; line-height: 1.2; text-decoration: none; white-space: nowrap;
	transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.btn--primary { background: var(--primary); color: var(--primary-ink); }
.btn--primary:hover { background: var(--primary-strong); color: var(--primary-ink); }
.btn--ghost { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn--ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn--sm { min-height: 38px; padding: .45rem .9rem; font-size: .875rem; }
.btn--lg { min-height: 52px; padding: .8rem 1.4rem; font-size: 1rem; }
.icon-btn {
	display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px;
	border: 1px solid transparent; background: transparent; color: var(--ink-2);
	transition: background-color .15s var(--ease), color .15s var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn[aria-pressed="true"], .icon-btn.is-active { color: var(--primary); background: var(--primary-soft); }

.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.chip {
	display: inline-flex; align-items: center; gap: .4rem; min-height: 38px; padding: .4rem .9rem;
	border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
	font-size: .9rem; font-weight: 500; text-decoration: none; white-space: nowrap;
	transition: border-color .15s var(--ease), color .15s var(--ease), background-color .15s var(--ease);
}
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip.is-active, .chip[aria-current] { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.chip__count { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.chip.is-active .chip__count { color: inherit; opacity: .8; }
.chip-scroll { margin: 0 calc(var(--gutter) * -1) 1.5rem; padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; }
.chip-scroll::-webkit-scrollbar { display: none; }
.chip-scroll .chip-row { flex-wrap: nowrap; }
@media (min-width: 960px) { .chip-scroll .chip-row { flex-wrap: wrap; } }

.segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.segmented button {
	display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; padding: .3rem .8rem; border: 0;
	border-radius: 999px; background: transparent; color: var(--muted); font-size: .85rem; font-weight: 600; white-space: nowrap;
}
.segmented button:hover { color: var(--ink); }
.segmented button.is-active, .segmented button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.segmented--sm button { min-height: 32px; padding: .2rem .6rem; }

.select { display: inline-flex; flex-direction: column; gap: .2rem; min-width: 0; }
.select__label { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-left: .2rem; }
.select select, .select input {
	min-height: 44px; padding: .5rem 2.2rem .5rem .85rem; border-radius: var(--radius-sm);
	border: 1px solid var(--line-strong); background-color: var(--surface); color: var(--ink); width: 100%;
	appearance: none; -webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235f6b65' stroke-width='1.8' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right .7rem center;
}
.select input { padding-right: .85rem; background-image: none; font-variant-numeric: tabular-nums; }
.select--sm select, .select--sm input { width: 5.5rem; }
.select--lg select { min-height: 54px; font-size: 1.05rem; }

.field { display: flex; align-items: center; gap: .5rem; min-height: 46px; padding: 0 .9rem; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted); }
.field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); padding: .5rem 0; }
.field:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

.search-form { display: flex; align-items: center; gap: .5rem; padding: .35rem .35rem .35rem 1rem; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); max-width: 560px; color: var(--muted); }
.search-form input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); min-height: 40px; }
.search-form:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

/* ---------- 5. Üst bilgi ---------- */
.site-header {
	position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent);
	backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px);
	border-bottom: 1px solid transparent; transition: border-color .2s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.admin-bar .site-header { top: 46px; }
@media (min-width: 783px) { .admin-bar .site-header { top: 32px; } }
.site-header__inner { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }
.brand { flex: none; }
.brand__link { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--ink); }
.brand__mark { color: var(--primary); display: inline-grid; }
.brand__mark svg { width: 34px; height: 34px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-family: var(--font-serif); font-weight: 650; font-size: 1.15rem; letter-spacing: -0.01em; }
.brand__tag { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.custom-logo { max-height: 44px; width: auto; }

.primary-nav { display: none; margin-inline: auto; }
@media (min-width: 960px) { .primary-nav { display: block; } .menu-btn { display: none; } }
.nav-menu { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.nav-menu > li { position: relative; display: flex; align-items: center; }
.nav-menu > li > a { display: block; padding: .55rem .8rem; border-radius: 999px; color: var(--ink-2); font-weight: 550; font-size: .95rem; text-decoration: none; }
.nav-menu > li > a:hover, .nav-menu > .current-menu-item > a, .nav-menu > .current-menu-ancestor > a { color: var(--ink); background: var(--surface-2); }
.submenu-toggle { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: -.4rem; border: 0; background: none; color: var(--muted); border-radius: 999px; }
.submenu-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.nav-menu .sub-menu {
	position: absolute; top: calc(100% + 8px); left: 0; min-width: 300px; list-style: none; margin: 0; padding: .5rem;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg);
	display: none; z-index: 60;
}
.nav-menu li.is-open > .sub-menu { display: block; }
@media (hover: hover) and (min-width: 960px) {
	.nav-menu > li:hover > .sub-menu { display: block; }
	.nav-menu > li:hover > .sub-menu::before { content: ""; position: absolute; inset: -10px 0 auto; height: 10px; }
}
.nav-menu .sub-menu a { display: flex; gap: .75rem; align-items: flex-start; padding: .65rem .75rem; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-size: .95rem; }
.nav-menu .sub-menu a:hover { background: var(--surface-2); }
.nav-menu .sub-menu strong { display: block; font-weight: 600; }
.nav-menu .sub-menu small { display: block; color: var(--muted); font-size: .82rem; line-height: 1.4; }
.sub-menu__icon { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--primary-soft); color: var(--primary); }
.nav-menu .sub-menu .sub-menu { position: static; display: block; box-shadow: none; border: 0; padding: 0 0 0 1rem; min-width: 0; }

.header-actions { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
@media (min-width: 960px) { .header-actions { margin-left: 0; } }
.header-cta { display: none; margin-left: .35rem; }
@media (min-width: 720px) { .header-cta { display: inline-flex; } }
.theme-icon--sun { display: none; }
[data-theme-toggle][aria-pressed="true"] .theme-icon--sun { display: inline; }
[data-theme-toggle][aria-pressed="true"] .theme-icon--moon { display: none; }

/* Arama penceresi */
.search-dialog { width: min(680px, calc(100% - 2rem)); max-height: min(80vh, 640px); margin: 10vh auto auto; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); }
.search-dialog::backdrop { background: rgb(8 14 12 / 55%); backdrop-filter: blur(3px); }
.search-dialog__inner { padding: .75rem; }
.search-dialog__form { display: flex; align-items: center; gap: .6rem; padding: .35rem .5rem .35rem 1rem; border-bottom: 1px solid var(--line); color: var(--muted); }
.search-dialog__form input { flex: 1; min-width: 0; min-height: 52px; border: 0; outline: 0; background: transparent; font-size: 1.15rem; color: var(--ink); }
.search-dialog__suggest { padding: 1rem; }
.quick-results__list { list-style: none; margin: .5rem 0 0; padding: 0; }
.quick-results__list a { display: grid; grid-template-columns: 2.25rem 1fr auto; align-items: center; gap: .75rem; padding: .6rem .75rem; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; }
.quick-results__list a:hover, .quick-results__list a:focus-visible { background: var(--surface-2); }
.quick-results__no { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 10px; background: var(--primary-soft); color: var(--primary); font-weight: 700; font-size: .85rem; }
.quick-results__ar { font-size: 1.4rem; color: var(--ink-2); line-height: 1.4; }

/* Çekmece */
.drawer { position: fixed; inset: 0; z-index: 100; }
.drawer__backdrop { position: absolute; inset: 0; background: rgb(8 14 12 / 50%); }
.drawer__panel { position: absolute; inset: 0 0 0 auto; width: min(420px, 92vw); background: var(--bg); overflow-y: auto; padding: 1rem var(--gutter) 2rem; box-shadow: var(--shadow-lg); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.drawer__nav { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.drawer__nav .nav-menu { flex-direction: column; align-items: stretch; }
.drawer__nav .nav-menu > li { flex-wrap: wrap; }
.drawer__nav .nav-menu > li > a { flex: 1; }
.drawer__nav .sub-menu { position: static; width: 100%; box-shadow: none; border: 0; padding: 0 0 .5rem; min-width: 0; background: transparent; }
html.has-drawer { overflow: hidden; }

/* Mobil sekme çubuğu */
.tabbar {
	position: fixed; inset: auto 0 0; z-index: 40; background: color-mix(in srgb, var(--surface) 92%, transparent);
	backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line);
	padding-bottom: env(safe-area-inset-bottom);
}
.tabbar ul { display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; margin: 0; padding: 0; }
.tabbar a, .tabbar button {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%;
	height: var(--tabbar-h); border: 0; background: none; color: var(--muted); font-size: .7rem; font-weight: 600; text-decoration: none;
}
.tabbar a[aria-current] { color: var(--primary); }
@media (min-width: 960px) { .tabbar { display: none; } }
.reader-focus .tabbar, .reader-focus .site-header { display: none; }

/* ---------- 6. İçerik haritası ve sayfa başlığı ---------- */
.breadcrumbs { font-size: .85rem; color: var(--muted); margin-bottom: 1.25rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--line-strong); }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--primary); }
.breadcrumbs .separator { margin-inline: .35rem; color: var(--line-strong); }
.page-hero { padding: clamp(1.5rem, 1rem + 2vw, 3rem) 0 clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.page-hero__title { font-size: var(--step-4); margin: 0; max-width: 22ch; }
.page-hero__lead { margin-top: .9rem; font-size: var(--step-1); color: var(--ink-2); max-width: 62ch; }
.page-hero__lead p:last-child { margin-bottom: 0; }
.page-hero__meta { margin: .75rem 0 0; color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
.page-hero__search { margin-top: 1.5rem; }
.page-hero--compact { padding-bottom: 1rem; }
.page-hero--compact .page-hero__title { font-size: var(--step-3); }
@media (max-width: 559px) { .page-hero--compact .page-hero__lead { display: none; } .page-hero--compact { padding-top: 1rem; } .page-hero--compact .breadcrumbs { margin-bottom: .5rem; } }

/* ---------- 7. Ortak küçük bileşenler ---------- */
.empty-state { padding: clamp(2rem, 1.5rem + 3vw, 4rem) 1.5rem; margin-bottom: 2rem; text-align: center; border-radius: var(--radius-lg); border: 1px dashed var(--line-strong); background: var(--surface); }
.empty-state__mark { color: var(--accent); display: inline-grid; margin-bottom: 1rem; }
.empty-state__title { font-size: var(--step-2); }
.empty-state p { color: var(--muted); max-width: 46ch; margin-inline: auto; }
.empty-state .chip-row { justify-content: center; margin-top: 1.25rem; }

.disclosure { margin-top: 2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.disclosure > summary { cursor: pointer; padding: 1rem 1.25rem; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--muted); }
.disclosure[open] > summary::after { content: "−"; }
.disclosure > :not(summary) { padding: 0 1.25rem 1.25rem; }
.disclosure .row-list { padding: 0; }

.pagination { margin-top: 2.5rem; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; }
.pagination .page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .75rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.pagination .page-numbers.current { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.pagination a.page-numbers:hover { border-color: var(--primary); color: var(--primary); }
.pagination .dots { border: 0; background: none; }

.social { display: flex; gap: .4rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); }
.social a:hover { color: var(--primary); border-color: var(--primary); }

/* ---------- 9. Tekil içerik ---------- */
.entry-header { padding: clamp(1.25rem, 1rem + 2vw, 2.5rem) 0 1.25rem; }
.entry-title { font-size: var(--step-4); max-width: 24ch; margin-bottom: 1rem; }
.entry--video .entry-title, .entry--mushaf .entry-title { font-size: var(--step-3); }
.entry-header__bar { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; justify-content: space-between; padding-top: 1rem; border-top: 1px solid var(--line); }
.entry-header__tools { display: flex; gap: .5rem; align-items: center; }
.post-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; list-style: none; margin: 0; padding: 0; color: var(--muted); font-size: .88rem; }
.post-meta li { display: inline-flex; align-items: center; gap: .35rem; }
.entry-thumb { margin: 0 0 2rem; }
.entry-thumb img { border-radius: var(--radius-lg); width: 100%; }

.media-stage video, .media-stage iframe, .media-stage .wp-video, .media-stage .wp-block-embed__wrapper { width: 100% !important; max-width: 100%; border-radius: var(--radius); background: #000; }
.media-stage iframe[src*="youtube"], .media-stage iframe[src*="vimeo"] { aspect-ratio: 16 / 9; height: auto; }
.media-stage .wp-video { margin-bottom: 1.5rem; }
.media-stage figure { margin: 0 0 1.5rem; }
.media-stage p:empty { display: none; }


.prose { --prose-scale: 1; font-size: calc(var(--step-0) * var(--prose-scale, 1)); color: var(--ink-2); overflow-wrap: anywhere; }
.prose--reading { font-family: var(--font-serif); font-size: calc(1.15rem * var(--prose-scale, 1)); line-height: 1.85; color: var(--ink); }
.prose > * + * { margin-top: 1.1em; }
.prose p { margin: 0; }
.prose > * + p, .prose > p + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--step-2); margin-top: 2.2em; }
.prose h3 { font-size: var(--step-1); margin-top: 1.8em; }
.prose h4 { font-size: 1.05rem; margin-top: 1.5em; font-family: var(--font-sans); }
.prose img { border-radius: var(--radius-sm); }
.prose figure { margin-inline: 0; }
.prose blockquote { margin-inline: 0; padding: 1rem 1.25rem; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-family: var(--font-serif); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose table { width: 100%; border-collapse: collapse; font-size: .92em; display: block; overflow-x: auto; }
.prose th, .prose td { padding: .5rem .75rem; border: 1px solid var(--line); text-align: left; }
.prose [lang="ar"], .prose [dir="rtl"], .prose .arabic { font-family: var(--font-arabic); font-size: 1.45em; line-height: 2.1; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; }
.prose .aligncenter { margin-inline: auto; }
.prose .alignleft { float: left; margin: .3em 1.5em 1em 0; }
.prose .alignright { float: right; margin: .3em 0 1em 1.5em; }
.prose .wp-caption-text, .prose figcaption { font-size: .85rem; color: var(--muted); text-align: center; margin-top: .5rem; }
.prose--wide img { margin-inline: auto; }


.pager { display: grid; gap: .75rem; margin-top: 3rem; }
@media (min-width: 640px) { .pager { grid-template-columns: 1fr 1fr; } }
.pager__link { display: flex; flex-direction: column; gap: .25rem; padding: 1rem 1.25rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; }
.pager__link:hover { border-color: var(--primary); color: var(--primary); }
.pager__link--next { text-align: right; grid-column: 2; }
@media (max-width: 639px) { .pager__link--next { grid-column: auto; } }
.pager__link .eyebrow { margin: 0; }

.tag-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 2rem; }
.tag-row a { padding: .3rem .75rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); font-size: .82rem; text-decoration: none; }
.tag-row a:hover { color: var(--primary); border-color: var(--primary); }
.related { margin-top: 2.5rem; padding-bottom: var(--section); }
.page-own-content { padding-top: 0; }

/* Yorumlar */
.comments { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.comment-list { list-style: none; padding: 0; }
.comment-list .comment { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.comment-form input:not([type="checkbox"]):not([type="submit"]), .comment-form textarea { width: 100%; padding: .65rem .85rem; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface); }
.comment-form .submit { min-height: 44px; padding: .6rem 1.2rem; border-radius: 999px; border: 0; background: var(--primary); color: var(--primary-ink); font-weight: 600; }


/* ---------- 10. Alt bilgi ---------- */
.site-footer { margin-top: var(--section); padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0 2rem; background: var(--bg-tint); border-top: 1px solid var(--line); font-size: .95rem; }
.section--tint + .site-footer, .site-main > :last-child.section--tint { margin-top: 0; }
.site-footer__grid { display: grid; gap: 2rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.site-footer__about { grid-column: 1 / -1; }
@media (min-width: 860px) { .site-footer__about { grid-column: auto; } }
.site-footer__about p { color: var(--muted); margin-top: 1rem; max-width: 40ch; }
.site-footer__title { font-family: var(--font-sans); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .9rem; }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.site-footer__col a { color: var(--ink-2); text-decoration: none; }
.site-footer__col a:hover { color: var(--primary); }
.site-footer__widgets { margin-top: 2rem; }
.site-footer__bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
.site-footer__bottom p { margin: 0; }
.site-footer__ayah { font-size: 1.5rem; color: var(--accent); line-height: 1.6; }

/* WordPress çekirdek sınıfları */
.alignwide { max-width: 1100px; }
.alignfull { max-width: none; }
.sticky, .bypostauthor, .gallery-caption { }
.wp-block-image img { border-radius: var(--radius-sm); }
.widget { margin-bottom: 1.5rem; }
.widget-title { font-family: var(--font-sans); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* Yazdırma */
@media print {
	.site-header, .site-footer, .tabbar, .player, .reader__bar, .reader__turn, .entry-header__tools, .related, .toc, .read-progress { display: none !important; }
	body { background: #fff; color: #000; padding: 0; }
}

/* ==========================================================================
   11. Fihrist, kategori ve arama (Kur'an ve Dualar temalarıyla ortak)
   ========================================================================== */
/* ---------- 11.1 Bölüm fihristi ---------- */
.cat-index__tools { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-bottom: 1.25rem; }
.cat-index__tools .field { flex: 1 1 280px; max-width: 520px; background: var(--surface); }
.cat-index__meta { margin: 0; font-size: .88rem; font-variant-numeric: tabular-nums; }
.cat-index__cols { columns: 1; column-gap: 1.25rem; }
@media (min-width: 720px) { .cat-index__cols { columns: 2; } }
@media (min-width: 1100px) { .cat-index__cols { columns: 3; } }
.cat-index__group { break-inside: avoid; margin: 0 0 1.25rem; padding: 1rem 1rem .75rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.cat-index__title { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin: 0 0 .4rem; font-size: 1.1rem; }
.cat-index__title a { color: var(--ink); text-decoration: none; }
.cat-index__title a:hover { color: var(--primary); }
.cat-index ul, .side-tree ul { list-style: none; margin: 0; padding: 0; }
.cat-index ul ul, .side-tree ul ul { padding-left: .9rem; margin-left: .35rem; border-left: 1px solid var(--line); }
.cat-index li a, .side-tree li a { display: flex; justify-content: space-between; gap: .75rem; padding: .4rem .5rem; min-height: 40px; align-items: center; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-size: .93rem; line-height: 1.35; }
.cat-index li a:hover, .side-tree li a:hover { background: var(--surface-2); color: var(--primary); }
.cat-index li.is-match > a { background: var(--accent-soft); color: var(--ink); }
.cat-index__n { flex: none; font-size: .75rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.cat-index__empty { padding: 1.5rem; text-align: center; color: var(--muted); }

/* ---------- 11.2 Kategori sayfası ---------- */
.page-hero--archive .page-hero__lead { font-size: var(--step-0); color: var(--ink-2); }
.page-hero--archive .page-hero__lead p + p { margin-top: .75em; }
.archive-layout { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 1024px) { .archive-layout--side { grid-template-columns: minmax(0, 1fr) 300px; gap: 2.5rem; } }
.archive-layout__main { min-width: 0; }
.archive-tools { display: grid; gap: .75rem; margin-bottom: 1.5rem; }
.archive-tools .chip-scroll { margin-bottom: 0; }
.archive-tools .search-form { max-width: none; }
.archive-layout__side { display: none; }
@media (min-width: 1024px) { .archive-layout__side { display: block; } .side-sticky { position: sticky; top: calc(var(--header-h) + 1rem); max-height: calc(100vh - var(--header-h) - 2rem); overflow-y: auto; } }
.side-tree { padding: 1rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.side-tree__title { margin: 0 0 .5rem; font-family: var(--font-serif); font-weight: 600; font-size: 1.1rem; }
.side-tree__title a { color: var(--ink); text-decoration: none; }
.side-tree a[aria-current] { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.chip-row li { display: flex; }

/* Arama sayfası */
.search-filter { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin-bottom: 1.5rem; }
.search-filter .search-form { flex: 1 1 300px; max-width: none; padding-right: 1rem; }
.search-filter .select { flex: 1 1 220px; max-width: 320px; }

/* Arama penceresi sonuçları */
.quick-results__head { margin: 1rem .75rem .25rem; }
.quick-results__list a { grid-template-columns: 2rem 1fr auto; }
.quick-results__icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 10px; background: var(--primary-soft); color: var(--primary); }
.quick-results__meta { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.quick-results__status { margin: .75rem; font-size: .9rem; }
.quick-results__all { display: inline-flex; margin: .5rem .75rem 0; }

/* Çekmece */
.drawer__label { margin: 1.25rem 0 .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.drawer__more { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }

.entry-header__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.entry-header__meta .fmt-badges { margin: 0; }
.entry-footer { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: grid; gap: 1.25rem; }
.entry-footer__row .eyebrow { margin-bottom: .6rem; }
.entry-footer__tags summary { cursor: pointer; color: var(--muted); font-size: .9rem; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.entry-footer__tags .tag-row { margin-top: .5rem; list-style: none; padding: 0; }
.entry-footer .pager { margin-top: .5rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 599px) { .entry-footer .pager { grid-template-columns: 1fr; } .entry-footer .pager__link--next { grid-column: auto; } }
.fihrist-group { margin-bottom: 1rem; }

/* ==========================================================================
   12. Çocuk platformu katmanı
   Ortak üst bilgi, menü, yazı tipleri ve karanlık mod aynı kalır; içerik alanı daha
   renkli, yuvarlak ve oyunculdur. Yedi dünya renk tonu ile ayrılır (.tone-*).
   ========================================================================== */

/* ---------- 12.1 Belirteçler ve renk tonları ---------- */
:root {
	--bg: #fffaf1;
	--bg-tint: #fff2dc;
	--font-kid: "Nunito", "Inter", ui-rounded, ui-sans-serif, system-ui, sans-serif;
	--radius-kid: 22px;
	--radius-blob: 32px;
	--shadow-pop: 0 2px 0 rgb(20 32 27 / 6%), 0 14px 30px -16px rgb(20 32 27 / 30%);
	--sky-top: #bfe4ff;
	--sky-bottom: #fff6e6;
	--sky-ink: #ffffff;
	--sky-star: #fbbf24;
	--sky-ground: #2f9e6b;
	--tone: #15803d; --tone-bright: #22c55e; --tone-ink: #ffffff;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) { --bg: #0c1311; --bg-tint: #111a17; --sky-top: #0a1a33; --sky-bottom: #12233a; --sky-ink: #20344f; --sky-star: #fde68a; --sky-ground: #1b3a2f; --shadow-pop: 0 12px 30px -16px rgb(0 0 0 / 70%); }
}
:root[data-theme="dark"] { --bg: #0c1311; --bg-tint: #111a17; --sky-top: #0a1a33; --sky-bottom: #12233a; --sky-ink: #20344f; --sky-star: #fde68a; --sky-ground: #1b3a2f; --shadow-pop: 0 12px 30px -16px rgb(0 0 0 / 70%); }

.tone-green  { --tone: #15803d; --tone-bright: #22c55e; }
.tone-blue   { --tone: #1d4ed8; --tone-bright: #3b82f6; }
.tone-orange { --tone: #c2410c; --tone-bright: #fb923c; }
.tone-purple { --tone: #6d28d9; --tone-bright: #a78bfa; }
.tone-pink   { --tone: #be185d; --tone-bright: #f472b6; }
.tone-red    { --tone: #b91c1c; --tone-bright: #f87171; }
.tone-yellow { --tone: #a16207; --tone-bright: #facc15; }
[class*="tone-"] { --tone-soft: color-mix(in srgb, var(--tone-bright) 18%, var(--surface)); --tone-line: color-mix(in srgb, var(--tone-bright) 45%, var(--surface)); }
/* Karanlık modda tonlar açılır, üzerlerindeki yazı koyulaşır (okunurluk için). */
:root[data-theme="dark"] .tone-green  { --tone: #4ade80; } :root[data-theme="dark"] .tone-blue { --tone: #93c5fd; } :root[data-theme="dark"] .tone-orange { --tone: #fdba74; }
:root[data-theme="dark"] .tone-purple { --tone: #c4b5fd; } :root[data-theme="dark"] .tone-pink { --tone: #f9a8d4; } :root[data-theme="dark"] .tone-red { --tone: #fca5a5; } :root[data-theme="dark"] .tone-yellow { --tone: #fde047; }
:root[data-theme="dark"] [class*="tone-"] { --tone-ink: #0b1310; --tone-soft: color-mix(in srgb, var(--tone-bright) 14%, var(--surface)); --tone-line: color-mix(in srgb, var(--tone-bright) 35%, var(--surface)); }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .tone-green { --tone: #4ade80; } :root:not([data-theme="light"]) .tone-blue { --tone: #93c5fd; } :root:not([data-theme="light"]) .tone-orange { --tone: #fdba74; }
	:root:not([data-theme="light"]) .tone-purple { --tone: #c4b5fd; } :root:not([data-theme="light"]) .tone-pink { --tone: #f9a8d4; } :root:not([data-theme="light"]) .tone-red { --tone: #fca5a5; } :root:not([data-theme="light"]) .tone-yellow { --tone: #fde047; }
	:root:not([data-theme="light"]) [class*="tone-"] { --tone-ink: #0b1310; --tone-soft: color-mix(in srgb, var(--tone-bright) 14%, var(--surface)); --tone-line: color-mix(in srgb, var(--tone-bright) 35%, var(--surface)); }
}

/* Çocuk başlıkları yuvarlak ve kalın; üst bilgi ve menü ortak yazı tiplerinde kalır. */
.kid-heading, .rail__title, .kid-hero__title, .page-hero__title, .entry--kid .entry-title, .kid-card__title, .world-door__title, .act__label, .nook__title, .kid-subheading, .parents-card__title, .section-title, .subsection-title, .empty-state__title, .series__title, .game-stage__start-label {
	font-family: var(--font-kid); font-weight: 850; letter-spacing: -0.01em;
}
.kid-heading { font-size: var(--step-3); margin: 0 0 1.25rem; }
.kid-subheading { display: flex; align-items: center; gap: .5rem; font-size: var(--step-2); margin: 2rem 0 1rem; color: var(--tone); }
.btn { font-family: var(--font-kid); font-weight: 800; }
.btn--tone { background: var(--tone); color: var(--tone-ink); border-color: var(--tone); }
.btn--tone:hover { background: color-mix(in srgb, var(--tone) 85%, #000); color: var(--tone-ink); }
.btn--tone[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip { font-family: var(--font-kid); font-weight: 750; border-width: 2px; }
.section { padding-block: clamp(2rem, 1.4rem + 2.5vw, 3.75rem); }
.section-lead { color: var(--muted); margin: .4rem 0 0; max-width: 60ch; }
.container--media { max-width: calc(980px + var(--gutter) * 2); }

/* ---------- 12.2 Karşılama: gökyüzü, mevcut banner, arama ---------- */
.kid-hero { position: relative; overflow: hidden; padding: clamp(1rem, .6rem + 1.5vw, 2rem) 0 clamp(5rem, 3rem + 6vw, 8rem); background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 78%); }
.sky { position: absolute; inset: 0; pointer-events: none; color: var(--sky-ink); }
.sky svg { position: absolute; display: block; }
.sky__moon { top: 8%; right: 6%; width: clamp(40px, 5vw, 70px); height: auto; color: var(--sky-star); transform: rotate(-20deg); }
.sky__star { color: var(--sky-star); }
.sky__star--1 { top: 18%; left: 8%; }
.sky__star--2 { top: 10%; left: 30%; }
.sky__star--3 { top: 28%; right: 22%; }
.sky__cloud--1 { top: 34%; left: -20px; opacity: .9; }
.sky__cloud--2 { top: 14%; right: 18%; opacity: .75; }
.sky__mosque { left: 0; right: 0; bottom: 0; width: 100%; height: clamp(60px, 9vw, 120px); color: var(--sky-ground); opacity: .28; }
@media (prefers-reduced-motion: no-preference) {
	.sky__cloud--1 { animation: idc-drift 38s linear infinite alternate; }
	.sky__cloud--2 { animation: idc-drift 52s linear infinite alternate-reverse; }
	.sky__star { animation: idc-twinkle 3.2s ease-in-out infinite; }
	.sky__star--2 { animation-delay: 1.1s; } .sky__star--3 { animation-delay: 2s; }
}
@keyframes idc-drift { from { transform: translateX(0); } to { transform: translateX(60px); } }
@keyframes idc-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
@media (max-width: 599px) { .sky__cloud--1, .sky__star--2 { display: none; } }

.kid-hero__stage { position: relative; }
/* Banner olduğu gibi gösterilir: kırpılmaz, esnetilmez, üzerine metin binmez; zemin her zaman beyaz. */
.kid-banner { position: relative; margin: 0 auto; max-width: calc(var(--banner-w, 9999px) + 16px); padding: 8px; border-radius: var(--radius-blob); background: #fff; box-shadow: var(--shadow-lg); border: 4px solid #fff; outline: 3px dashed color-mix(in srgb, var(--sky-star) 70%, transparent); outline-offset: 6px; }
.kid-banner img { display: block; width: 100%; height: auto; max-width: none; object-fit: contain; border-radius: calc(var(--radius-blob) - 12px); }
.kid-banner__link { display: block; }
.kid-banner--missing { display: grid; gap: .35rem; place-items: center; min-height: 140px; padding: 1.5rem; text-align: center; color: var(--muted); background: var(--surface-2); border: 3px dashed var(--line-strong); outline: 0; box-shadow: none; }
@media (max-width: 599px) { .kid-banner { padding: 4px; border-width: 2px; border-radius: 18px; outline-offset: 3px; } .kid-banner img { border-radius: 14px; } }

.kid-hero__panel {
	position: relative; display: grid; gap: clamp(1rem, .8rem + 1vw, 1.75rem); margin-top: clamp(1.5rem, .8rem + 2vw, 2.25rem);
	padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); border-radius: var(--radius-blob); background: var(--surface); box-shadow: var(--shadow-pop); border: 3px solid color-mix(in srgb, var(--sky-top) 70%, var(--surface));
}
@media (min-width: 960px) { .kid-hero__panel { grid-template-columns: 1fr 1.05fr; align-items: center; column-gap: 3rem; } }
.kid-hero__panel > * { min-width: 0; }
.kid-hero__title { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); line-height: 1.05; margin: 0 0 .6rem; color: var(--ink); }
.kid-hero__lead { color: var(--ink-2); margin: 0; font-size: var(--step-1); max-width: 46ch; }
.kid-hero__search .search-form { max-width: none; min-height: 62px; border-width: 3px; border-color: var(--line-strong); box-shadow: var(--shadow-sm); padding-left: 1.2rem; }
.kid-hero__search .search-form input { font-size: 1.1rem; font-family: var(--font-kid); font-weight: 700; }
.kid-hero__search .search-form .btn { min-height: 48px; padding-inline: 1.3rem; }
.kid-hero__quick { margin-top: .9rem; }
@media (max-width: 599px) { .kid-hero__quick { flex-wrap: nowrap; overflow-x: auto; margin-inline: -1.25rem; padding-inline: 1.25rem; scrollbar-width: none; } .kid-hero__quick::-webkit-scrollbar { display: none; } }
/* Bannersız karşılama (varsayılan): gökyüzü görünür kalır, panelin köşesinde kitap ve hilal rozeti. */
.kid-hero--no-banner { padding-top: clamp(3.5rem, 2rem + 4vw, 5.5rem); }
.kid-hero--no-banner .kid-hero__panel { margin-top: 0; }
.kid-hero__art { --art: clamp(72px, 50px + 5vw, 116px); position: absolute; top: calc(var(--art) * -.72); right: clamp(1rem, .5rem + 2vw, 2.5rem); width: var(--art); color: var(--sky-star); filter: drop-shadow(0 8px 14px rgb(15 23 42 / 18%)); z-index: 1; }
.kid-hero__art svg { display: block; width: 100%; height: auto; }
.kid-hero__art path[stroke] { stroke: #b45309; }
@media (prefers-reduced-motion: no-preference) { .kid-hero__art { animation: idc-bob 4s ease-in-out infinite; } }
@keyframes idc-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(3deg); } }
@media (max-width: 599px) { .kid-hero--no-banner .kid-hero__intro .eyebrow { padding-right: 56px; } }
.kid-hero--no-banner .sky__moon { display: none; }

/* ---------- 12.3 "Bugün ne yapmak istersin?" ---------- */
.section--acts { margin-top: clamp(-4.5rem, -3rem - 3vw, -3rem); position: relative; padding-top: 0; }
.section--acts .kid-heading { text-align: center; }
.acts { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(46%, 140px), 1fr)); }
.act {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; height: 100%; min-height: 128px; padding: 1rem .75rem;
	border-radius: var(--radius-kid); background: var(--surface); border: 3px solid var(--tone-line); color: var(--ink); text-decoration: none; text-align: center;
	box-shadow: 0 5px 0 var(--tone-line); transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.act:hover { color: var(--ink); border-color: var(--tone-bright); box-shadow: 0 7px 0 var(--tone-bright); transform: translateY(-3px) rotate(-1deg); }
.act:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--tone-bright); }
.act__icon { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--tone-bright); color: #fff; box-shadow: inset 0 -5px 0 rgb(0 0 0 / 12%); }
.tone-yellow .act__icon, .act.tone-yellow .act__icon { color: #422006; }
.act__label { font-size: 1.02rem; line-height: 1.2; }
@media (max-width: 599px) {
	/* Telefonda daha sık: üçlü sıra, son düğme (Sürpriz) tek kalırsa satırı doldurur. */
	.acts { grid-template-columns: repeat(3, 1fr); gap: .55rem; }
	.act { min-height: 104px; padding: .75rem .4rem; gap: .4rem; }
	.act__icon { width: 50px; height: 50px; }
	.act__icon svg { width: 24px; height: 24px; }
	.act__label { font-size: .9rem; }
	.acts > li:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
	.acts > li:last-child:nth-child(3n + 1) .act { flex-direction: row; min-height: 0; }
}
@media (prefers-reduced-motion: no-preference) { .act:hover .act__icon { animation: idc-bounce .5s var(--ease); } }
@keyframes idc-bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px) scale(1.06); } 70% { transform: translateY(1px); } }

/* ---------- 12.4 Dünya kapıları ---------- */
.world-doors { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.world-door {
	position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; column-gap: 1rem; row-gap: .25rem; align-items: center; height: 100%;
	padding: 1.25rem; border-radius: var(--radius-blob); background: var(--tone-soft); border: 3px solid transparent; color: var(--ink); text-decoration: none; overflow: hidden; isolation: isolate;
	transition: transform .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.world-door::after { content: ""; position: absolute; right: -36px; bottom: -36px; width: 120px; height: 120px; border-radius: 50%; background: var(--tone-bright); opacity: .18; z-index: -1; }
.world-door:hover { color: var(--ink); border-color: var(--tone-bright); transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.world-door__icon { grid-row: span 2; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 24px; background: var(--tone-bright); color: #fff; transform: rotate(-6deg); box-shadow: inset 0 -6px 0 rgb(0 0 0 / 12%); }
.tone-yellow .world-door__icon { color: #422006; }
.world-door__title { font-size: 1.25rem; line-height: 1.15; align-self: end; }
.world-door__desc { color: var(--ink-2); font-size: .9rem; line-height: 1.4; align-self: start; }
@media (max-width: 599px) {
	.world-doors--doors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
	.world-doors--doors .world-door { grid-template-columns: 1fr; text-align: left; padding: 1rem; gap: .6rem; }
	.world-doors--doors .world-door__icon { grid-row: auto; width: 52px; height: 52px; border-radius: 18px; }
	.world-doors--doors .world-door__title { font-size: 1.02rem; }
	.world-doors--doors .world-door__desc { display: none; }
}
.world-doors--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.world-doors--compact .world-door { grid-template-columns: auto 1fr; grid-template-rows: auto; padding: .7rem; border-radius: 18px; gap: .6rem; }
.world-doors--compact .world-door::after { display: none; }
.world-doors--compact .world-door__icon { grid-row: auto; width: 40px; height: 40px; border-radius: 14px; transform: none; }
.world-doors--compact .world-door__title { font-size: .98rem; align-self: center; }
@media (min-width: 720px) { .section .world-doors--compact, .empty-state .world-doors--compact { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } }
.empty-state .world-doors--compact { margin-top: 1.25rem; text-align: left; }

/* ---------- 12.5 Raflar ---------- */
.rail-wrap { padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); scroll-margin-top: calc(var(--header-h) + 1rem); }
.rail-wrap:nth-of-type(even) { background: var(--bg-tint); }
.rail__head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.rail__icon { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; background: var(--tone-bright); color: #fff; transform: rotate(-6deg); box-shadow: inset 0 -5px 0 rgb(0 0 0 / 12%); }
.tone-yellow .rail__icon { color: #422006; }
.rail__titles { min-width: 0; flex: 1; }
.rail__titles .eyebrow { color: var(--tone); margin-bottom: .1rem; }
.rail__title { font-size: var(--step-3); margin: 0; line-height: 1.1; }
.rail__tools { display: flex; align-items: center; gap: .35rem; }
.rail__btn { background: var(--surface); border: 2px solid var(--line); }
.rail__btn:disabled { opacity: .35; cursor: default; }
@media (max-width: 719px) { .rail__btn { display: none; } .rail__icon { width: 44px; height: 44px; border-radius: 14px; } .rail__icon svg { width: 22px; height: 22px; } }
.rail__track {
	display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 260px); gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
	padding: .35rem max(var(--gutter), calc((100vw - var(--container)) / 2)) 1.1rem; scroll-padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2)); scrollbar-width: thin;
}
.rail__track > * { scroll-snap-align: start; }
@media (max-width: 599px) { .rail__track { grid-auto-columns: 72%; gap: .75rem; } }
.rail-wrap .nook-grid--compact { margin-top: .5rem; }

/* ---------- 12.6 Kartlar ---------- */
.kid-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
@media (max-width: 599px) { .kid-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; } }
.kid-card {
	position: relative; display: flex; flex-direction: column; border-radius: var(--radius-kid); background: var(--surface); overflow: hidden;
	border: 3px solid var(--line); box-shadow: 0 4px 0 var(--line); transition: transform .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.kid-card:hover { transform: translateY(-4px); border-color: var(--tone-bright); box-shadow: 0 8px 0 var(--tone-line); }
.kid-card:has(.kid-card__link:focus-visible) { outline: 4px solid var(--focus); outline-offset: 3px; }
.kid-card__media { position: relative; aspect-ratio: 29 / 16; background: var(--tone-soft); overflow: hidden; }
.kid-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease); }
.kid-card:hover .kid-card__media img { transform: scale(1.04); }
.kid-card__ph { display: grid; place-items: center; width: 100%; height: 100%; color: var(--tone); background: radial-gradient(circle at 30% 30%, var(--surface) 0 10%, transparent 11%), radial-gradient(circle at 75% 70%, var(--tone-line) 0 18%, transparent 19%), var(--tone-soft); }
.kid-card__badge { position: absolute; left: .55rem; top: .55rem; }
.kid-card__play { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgb(255 255 255 / 92%); color: var(--tone); box-shadow: 0 6px 18px -6px rgb(0 0 0 / 45%); padding-left: 3px; transition: transform .15s var(--ease); }
.kid-card:hover .kid-card__play { transform: scale(1.12); }
.kid-card__body { display: flex; flex-direction: column; gap: .3rem; padding: .8rem .95rem 1rem; flex: 1; }
.kid-card__kicker { margin: 0; font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--tone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kid-card__title { margin: 0; font-size: 1.08rem; line-height: 1.25; }
.kid-card__link { color: var(--ink); text-decoration: none; }
.kid-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.kid-card__link:focus-visible { outline: 0; }
.kid-card__cta { margin-top: auto; padding-top: .45rem; display: inline-flex; align-items: center; gap: .3rem; align-self: flex-start; font-family: var(--font-kid); font-weight: 850; font-size: .88rem; color: var(--tone); }
@media (max-width: 599px) { .kid-card__body { padding: .6rem .7rem .75rem; } .kid-card__title { font-size: .95rem; } .kid-card__play { width: 40px; height: 40px; } .kid-card__kicker { font-size: .66rem; } }

.type-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .6rem .22rem .5rem; border-radius: 999px; font-family: var(--font-kid); font-size: .75rem; font-weight: 850; color: #fff; background: #6d28d9; box-shadow: 0 2px 0 rgb(0 0 0 / 15%); }
.type-badge--oyna { background: #be185d; } .type-badge--boya { background: #c2410c; } .type-badge--izle { background: #b91c1c; } .type-badge--dinle { background: #1d4ed8; } .type-badge--oku { background: #6d28d9; }

/* Bölüm kutucukları (alt kategoriler) */
.nook-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.nook { display: flex; align-items: center; gap: .8rem; height: 100%; padding: .85rem 1rem; border-radius: 18px; background: var(--surface); border: 2px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .15s var(--ease), background-color .15s var(--ease); }
.nook:hover { border-color: var(--tone-bright); background: var(--tone-soft); color: var(--ink); }
.nook__icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--tone-soft); color: var(--tone); }
.nook__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.nook__title { font-size: 1rem; line-height: 1.2; }
.nook__desc { color: var(--muted); font-size: .85rem; line-height: 1.35; }
.nook__count { flex: none; min-width: 2rem; padding: .15rem .5rem; border-radius: 999px; background: var(--tone-soft); color: var(--tone); font-size: .8rem; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.nook-grid--compact { display: flex; flex-wrap: wrap; gap: .45rem; }
.nook-grid--compact .nook { padding: .3rem .85rem .3rem .3rem; border-radius: 999px; gap: .5rem; min-height: 44px; }
.nook-grid--compact .nook__icon { width: 34px; height: 34px; border-radius: 50%; }
.nook-grid--compact .nook__title { font-size: .9rem; white-space: nowrap; }
@media (max-width: 599px) { .rail-wrap .nook-grid--compact { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; } .rail-wrap .nook-grid--compact::-webkit-scrollbar { display: none; } }

/* ---------- 12.7 Ayet ve ebeveyn köşesi ---------- */
.kid-split { display: grid; gap: 1rem; }
@media (min-width: 860px) { .kid-split { grid-template-columns: 1fr 1.2fr; } }
.ayah-card { margin: 0; padding: 1.5rem; border-radius: var(--radius-blob); background: var(--tone-soft); text-align: center; display: grid; gap: .25rem; align-content: center; }
.ayah-card .eyebrow { color: var(--tone); }
.ayah-card__ar { margin: 0; font-size: clamp(2rem, 1.6rem + 1.5vw, 2.8rem); line-height: 1.8; color: var(--ink); }
.ayah-card figcaption { font-family: var(--font-kid); font-weight: 700; color: var(--ink-2); }
.parents-card { display: flex; gap: 1rem; align-items: flex-start; padding: 1.5rem; border-radius: var(--radius-blob); background: var(--surface); border: 2px dashed var(--line-strong); }
.parents-card__icon { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; background: var(--primary-soft); color: var(--primary); }
.parents-card__title { font-size: var(--step-1); margin: 0 0 .35rem; }
.parents-card p { margin: 0; color: var(--ink-2); font-size: .95rem; }

/* ---------- 12.8 Dünya (kategori) sayfası ---------- */
.page-hero__row { display: flex; align-items: center; gap: 1rem; }
.page-hero__row .eyebrow { margin-bottom: .2rem; }
.page-hero__icon { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 24px; background: var(--tone-bright, var(--primary)); color: #fff; transform: rotate(-6deg); box-shadow: inset 0 -6px 0 rgb(0 0 0 / 12%); }
.tone-yellow .page-hero__icon { color: #422006; }
.page-hero--world { position: relative; overflow: hidden; background: var(--tone-soft); margin-bottom: 1.75rem; border-bottom: 4px solid var(--tone-line); }
.page-hero--world::before, .page-hero--world::after { content: ""; position: absolute; border-radius: 50%; background: var(--tone-bright); opacity: .14; pointer-events: none; }
.page-hero--world::before { width: 260px; height: 260px; right: -80px; top: -90px; }
.page-hero--world::after { width: 120px; height: 120px; right: 18%; bottom: -60px; }
.page-hero--world .eyebrow { color: var(--tone); }
.page-hero--world .page-hero__lead { max-width: 70ch; }
.page-hero__title { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem); }
@media (max-width: 599px) { .page-hero__icon { width: 52px; height: 52px; border-radius: 18px; } .page-hero__icon svg { width: 26px; height: 26px; } }
.archive-tools .chip { min-height: 44px; }
.archive-tools .chip[aria-current] { background: var(--tone, var(--primary)); border-color: var(--tone, var(--primary)); color: var(--tone-ink, #fff); }
.side-tree a[aria-current] { background: var(--tone-soft, var(--primary-soft)); color: var(--tone, var(--primary)); }
.pagination .page-numbers { border-width: 2px; font-family: var(--font-kid); font-weight: 850; }
.tone-green .pagination .page-numbers.current, [class*="tone-"] .pagination .page-numbers.current { background: var(--tone); border-color: var(--tone); color: var(--tone-ink); }

/* ---------- 12.9 Tekil içerik: hikâye, video, oyun ---------- */
.kid-entry-header { padding-bottom: .75rem; }
.kid-entry-header__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.kid-entry-header__cat { font-family: var(--font-kid); font-weight: 850; font-size: .95rem; color: var(--tone, var(--primary)); text-decoration: none; }
.entry--kid .entry-title { font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.9rem); line-height: 1.1; max-width: 26ch; }
.entry--kid .entry-header__bar { border-top: 2px dashed var(--line); }
.entry--kid .entry-thumb img { border-radius: var(--radius-blob); border: 4px solid var(--surface); box-shadow: var(--shadow-pop); }
.read-aloud[hidden] { display: none; }

.prose--kids { color: var(--ink); }
.prose--kids h2, .prose--kids h3 { font-family: var(--font-kid); font-weight: 850; color: var(--tone, var(--primary)); }
.prose--reading.prose--kids { font-family: var(--font-kid); font-weight: 500; font-size: calc(1.22rem * var(--prose-scale, 1)); line-height: 1.9; }
.prose--reading.prose--kids p { max-width: 64ch; }
.prose--kids img { border-radius: 18px; height: auto; }
.prose--kids .alignleft, .prose--kids .alignright { max-width: 46%; }
@media (max-width: 599px) { .prose--kids .alignleft, .prose--kids .alignright { float: none; max-width: 100%; margin: 0 0 1em; } }
.prose--kids blockquote { border-left: 0; border-radius: var(--radius-kid); background: var(--tone-soft, var(--accent-soft)); padding: 1.25rem 1.5rem; font-family: var(--font-kid); font-weight: 700; }
.prose--kids .kid-ar, .prose--kids [lang="ar"] { font-family: var(--font-arabic); font-size: 1.55em; line-height: 2.2; text-align: right; font-weight: 400; }
.prose--kids .kid-ar { padding: .8rem 1.1rem; border-radius: 18px; background: var(--page-paper); border: 1px solid var(--line); color: #14201b; }
.prose--kids .kid-ar .kid-ar { padding: 0; border: 0; background: none; font-size: inherit; }
/* Eski içerikteki kırmızı vurgular dünya rengine; diğer satır içi renkler karanlık modda okunur kalır. */
.prose--kids [style*="color: #ff0000"], .prose--kids [style*="color:#ff0000"], .prose--kids [style*="color: #e53e3e"], .prose--kids [style*="color: #993300"], .prose--kids [style*="color: red"] { color: var(--tone, var(--accent)) !important; }
:root[data-theme="dark"] .prose--kids [style*="color"] { color: inherit !important; }
:root[data-theme="dark"] .prose--kids [style*="background"]:not(a) { background: transparent !important; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .prose--kids [style*="color"] { color: inherit !important; }
	:root:not([data-theme="light"]) .prose--kids [style*="background"]:not(a) { background: transparent !important; }
}
.prose--kids a[data-external]::after { content: "↗"; display: inline-block; margin-left: .2em; font-size: .8em; font-weight: 800; color: var(--muted); text-decoration: none; }
.prose--kids .is-reading, .prose--kids.is-reading { scroll-margin-top: calc(var(--header-h) + 2rem); }
.prose--kids.is-reading { box-shadow: -6px 0 0 var(--tone-line, var(--line)); padding-left: 1rem; transition: box-shadow .2s var(--ease); }

/* Video sahnesi */
.media-stage video, .media-stage iframe, .media-stage .wp-video { width: 100% !important; max-width: 100%; border-radius: var(--radius-kid); background: #000; }
.media-stage .wp-video, .media-stage iframe { margin-bottom: 1.5rem; box-shadow: 0 0 0 5px var(--surface), 0 0 0 9px var(--tone-line, var(--line)), var(--shadow-lg); }
.media-stage iframe[src*="youtube"], .media-stage iframe[src*="vimeo"] { aspect-ratio: 16 / 9; height: auto; }
.media-stage > p:has(> a:only-child[href$=".mp4"]) { display: none; }
.media-stage p:empty { display: none; }
.media-stage { margin-top: .75rem; }

/* Oyun sahnesi */
.game-stage { margin: .5rem 0 1rem; padding: clamp(.5rem, .3rem + 1vw, 1rem); border-radius: calc(var(--radius-blob) + 6px); background: var(--tone, #be185d); box-shadow: inset 0 -8px 0 rgb(0 0 0 / 18%), var(--shadow-lg); }
.game-stage__screen { position: relative; aspect-ratio: var(--game-ratio, 4 / 3); max-height: 78vh; margin-inline: auto; border-radius: var(--radius-kid); background: #0b1310; overflow: hidden; display: grid; place-items: center; }
.game-stage__poster { position: absolute; inset: 0; }
.game-stage__poster img, .game-stage__poster .kid-card__ph { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.1) brightness(.72); }
.game-stage__start {
	position: relative; display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 1rem 1.5rem; border: 0; background: none; color: #fff; cursor: pointer;
}
.game-stage__start-icon { display: grid; place-items: center; width: clamp(84px, 12vw, 120px); height: clamp(84px, 12vw, 120px); border-radius: 50%; background: #fff; color: var(--tone, #be185d); padding-left: 8px; box-shadow: 0 0 0 10px rgb(255 255 255 / 30%), 0 12px 30px -8px rgb(0 0 0 / 60%); transition: transform .15s var(--ease); }
.game-stage__start:hover .game-stage__start-icon { transform: scale(1.07); }
.game-stage__start-label { font-size: clamp(1.05rem, .95rem + .7vw, 1.45rem); padding: .3em 1em; border-radius: 999px; background: var(--tone, #be185d); color: #fff; box-shadow: 0 4px 0 rgb(0 0 0 / 18%); }
.game-stage__start:disabled { cursor: progress; opacity: .85; }
@media (prefers-reduced-motion: no-preference) { .game-stage__start-icon { animation: idc-pulse 2.2s ease-in-out infinite; } }
@keyframes idc-pulse { 0%, 100% { box-shadow: 0 0 0 10px rgb(255 255 255 / 30%), 0 12px 30px -8px rgb(0 0 0 / 60%); } 50% { box-shadow: 0 0 0 20px rgb(255 255 255 / 12%), 0 12px 30px -8px rgb(0 0 0 / 60%); } }
.game-stage__status { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; margin: 0; padding: .6rem 1rem; border-radius: 14px; background: rgb(0 0 0 / 70%); color: #fff; font-weight: 700; text-align: center; }
.game-stage.is-playing .game-stage__screen { background: #000; }
.game-stage__player, .game-stage__screen ruffle-player, .game-stage__screen ruffle-object { width: 100%; height: 100%; display: block; }
.game-stage__screen:fullscreen { max-height: none; border-radius: 0; aspect-ratio: auto; width: 100vw; height: 100vh; }
.game-stage__bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .75rem .25rem .1rem; }
.game-stage__bar .btn--tone { background: #fff; color: var(--tone, #be185d); border-color: #fff; }
.game-stage__bar .btn--ghost { background: transparent; color: #fff; border-color: rgb(255 255 255 / 55%); }
.game-stage__bar .btn--ghost:hover { border-color: #fff; color: #fff; }
.game-stage__hint { flex: 1 1 260px; margin: 0; color: rgb(255 255 255 / 90%); font-size: .85rem; line-height: 1.4; display: flex; gap: .4rem; align-items: flex-start; }
:root[data-theme="dark"] .game-stage__bar .btn--tone, :root[data-theme="dark"] .game-stage__start-icon { color: #0b1310; }
:root[data-theme="dark"] .game-stage__hint, :root[data-theme="dark"] .game-stage__bar .btn--ghost { color: #0b1310; border-color: rgb(0 0 0 / 35%); }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .game-stage__bar .btn--tone, :root:not([data-theme="light"]) .game-stage__start-icon { color: #0b1310; }
	:root:not([data-theme="light"]) .game-stage__hint, :root:not([data-theme="light"]) .game-stage__bar .btn--ghost { color: #0b1310; border-color: rgb(0 0 0 / 35%); }
}
.prose--howto { padding: 1.25rem 1.5rem; border-radius: var(--radius-kid); background: var(--tone-soft, var(--surface)); border: 2px solid var(--tone-line, var(--line)); text-align: center; }
.prose--howto p { margin-inline: auto; max-width: 60ch; }
.prose--howto [style*="font-size"] { font-size: 1.1rem !important; }

/* Seri bölümleri */
.series { margin: 0 0 1.5rem; padding: 1rem 1.1rem; border-radius: var(--radius-kid); background: var(--tone-soft, var(--surface)); }
.series__title { display: flex; align-items: center; gap: .4rem; margin: 0 0 .65rem; font-size: 1rem; color: var(--tone, var(--primary)); }
.series__list { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.series__list a { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 .6rem; border-radius: 16px; background: var(--surface); border: 2px solid var(--tone-line, var(--line)); color: var(--ink); font-family: var(--font-kid); font-weight: 900; text-decoration: none; font-variant-numeric: tabular-nums; }
.series__list a:hover { border-color: var(--tone-bright, var(--primary)); }
.series__list a[aria-current] { background: var(--tone, var(--primary)); border-color: var(--tone, var(--primary)); color: var(--tone-ink, #fff); }

.pager--kid .pager__link { border-width: 2px; border-radius: var(--radius-kid); font-family: var(--font-kid); font-weight: 800; }
.pager--kid .pager__link small { display: inline-flex; align-items: center; gap: .3rem; color: var(--tone, var(--muted)); font-weight: 850; }
.pager--kid .pager__link--next small { justify-content: flex-end; }
.pager--kid .pager__link:hover { border-color: var(--tone-bright, var(--primary)); color: var(--ink); }

/* ---------- 12.10 İç sayfalarda banner şeridi ---------- */
.kid-strip { padding: .6rem 0; background: linear-gradient(180deg, var(--sky-top), var(--bg)); }
.kid-banner--strip { max-width: calc(min(var(--banner-w, 9999px), 720px) + 8px); padding: 4px; border-radius: 16px; outline: 0; border-width: 2px; box-shadow: var(--shadow-sm); }
.kid-banner--strip img { border-radius: 12px; }
@media (max-width: 599px) { .kid-strip { padding: .4rem 0; } }

/* ---------- 12.11 Menü, çekmece ve sekme çubuğu ---------- */
.nav-menu > li > a { font-family: var(--font-kid); font-weight: 800; }
.nav-menu > li[class*="tone-"] > a:hover { background: var(--tone-soft); color: var(--tone); }
.nav-menu > li[class*="tone-"] .sub-menu__icon { background: var(--tone-soft); color: var(--tone); }
.drawer .world-doors--compact { margin-bottom: 1rem; }
.tabbar a, .tabbar button { font-family: var(--font-kid); font-weight: 800; font-size: .72rem; }
.tabbar a[aria-current] { color: var(--tone, var(--primary)); }
.tabbar a[aria-current] .icon { background: var(--tone-soft, var(--primary-soft)); border-radius: 12px; box-sizing: content-box; padding: 3px 12px; margin-bottom: -2px; }

/* Arama ve fihrist */
.search-form { border-width: 2px; }
.cat-index__group { border-width: 2px; border-radius: var(--radius-kid); }
.cat-index__title { font-family: var(--font-kid); font-weight: 850; }
.site-footer { background: var(--bg-tint); }