/* ==========================================================================
   Matematik temasi - ana stil dosyasi
   Bolumler: 1) Tokenlar  2) Reset  3) Yerlesim  4) Baslik  5) Icerik
             6) Yazi tipografisi  7) KaTeX  8) Kenar cubugu  9) Alt bilgi
            10) Formlar 11) Yorumlar 12) Yardimcilar
   ========================================================================== */

/* --- 1) Tokenlar ---------------------------------------------------------- */

:root {
	/* Renkler - acik tema */
	--c-bg:          #ffffff;
	--c-surface:     #f5f7fa;
	--c-surface-2:   #eceff4;
	--c-border:      #dde2ea;
	--c-text:        #14171c;
	--c-text-muted:  #59616e;
	--c-brand:       #2f5bd7;
	--c-brand-hover: #1e42a8;
	--c-accent:      #0d9488;
	--c-danger:      #b91c1c;

	/* Tipografi - akiskan olcek (clamp) */
	--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-serif: Georgia, "Times New Roman", serif;
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--fs-xs:   clamp(0.75rem, 0.73rem + 0.10vw, 0.8125rem);
	--fs-sm:   clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
	--fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	--fs-lg:   clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
	--fs-xl:   clamp(1.375rem, 1.28rem + 0.45vw, 1.625rem);
	--fs-2xl:  clamp(1.625rem, 1.45rem + 0.85vw, 2.125rem);
	--fs-3xl:  clamp(2rem, 1.70rem + 1.45vw, 2.875rem);

	/* Olcekler */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;

	--radius:    10px;
	--radius-sm: 6px;
	--shadow:    0 1px 2px rgb(16 24 40 / 6%), 0 4px 12px rgb(16 24 40 / 6%);

	--w-wide:    96rem;   /* dis kapsayici */
	--w-content: 44rem;   /* okuma sutunu ~70 karakter */
}

@media (prefers-color-scheme: dark) {
	:root:not([data-tema="acik"]) {
		--c-bg:          #0e1116;
		--c-surface:     #161b22;
		--c-surface-2:   #1d242e;
		--c-border:      #2a323d;
		--c-text:        #e6e9ef;
		--c-text-muted:  #9aa4b2;
		--c-brand:       #7da2ff;
		--c-brand-hover: #a5beff;
		--c-accent:      #2dd4bf;
		--c-danger:      #f87171;
		--shadow:        0 1px 2px rgb(0 0 0 / 40%), 0 4px 12px rgb(0 0 0 / 30%);
	}
}

:root[data-tema="koyu"] {
	--c-bg:          #0e1116;
	--c-surface:     #161b22;
	--c-surface-2:   #1d242e;
	--c-border:      #2a323d;
	--c-text:        #e6e9ef;
	--c-text-muted:  #9aa4b2;
	--c-brand:       #7da2ff;
	--c-brand-hover: #a5beff;
	--c-accent:      #2dd4bf;
	--c-danger:      #f87171;
	--shadow:        0 1px 2px rgb(0 0 0 / 40%), 0 4px 12px rgb(0 0 0 / 30%);
}

/* --- 2) Reset ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

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

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-text);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg, iframe {
	display: block;
	max-width: 100%;
	height: auto;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--sp-3);
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

p, ul, ol, dl, blockquote, figure, pre, table { margin: 0 0 var(--sp-5); }

a {
	color: var(--c-brand);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}
a:hover { color: var(--c-brand-hover); }

:focus-visible {
	outline: 3px solid var(--c-brand);
	outline-offset: 2px;
	border-radius: 3px;
}

hr {
	border: 0;
	border-top: 1px solid var(--c-border);
	margin: var(--sp-7) 0;
}

/* --- 3) Yerlesim ---------------------------------------------------------- */

.kapsayici {
	width: min(100% - 2rem, var(--w-wide));
	margin-inline: auto;
}

.site-govde {
	display: grid;
	gap: var(--sp-7);
	padding-block: var(--sp-6) var(--sp-8);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 62rem) {
	.site-govde.has-sidebar {
		grid-template-columns: minmax(0, 1fr) 19rem;
		gap: var(--sp-7);
	}
}

.atlama-baglantisi {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--c-brand);
	color: #fff;
	padding: var(--sp-3) var(--sp-4);
	z-index: 100;
	border-radius: 0 0 var(--radius-sm) 0;
}
.atlama-baglantisi:focus {
	left: 0;
	color: #fff;
}

/* --- 4) Baslik ve gezinme ------------------------------------------------- */

.site-basligi {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--c-bg) 88%, transparent);
	backdrop-filter: saturate(1.6) blur(10px);
	border-bottom: 1px solid var(--c-border);
}

.basligi-ic {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-4);
	min-height: 4rem;
}

.custom-logo-link {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.custom-logo {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 5rem;
}

.site-marka { margin: 0; font-size: var(--fs-lg); }

.site-marka a {
	color: var(--c-text);
	text-decoration: none;
	font-weight: 800;
	letter-spacing: -0.03em;
}
.site-marka a:hover { color: var(--c-brand); }

.site-aciklamasi {
	margin: 0;
	font-size: var(--fs-xs);
	color: var(--c-text-muted);
}

.baslik-arama {
	flex: 1 1 16rem;
	max-width: 24rem;
}
.baslik-arama input[type="search"] { min-width: 0; }

.ana-menu { margin-inline-start: auto; }

.ana-menu ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-1);
	margin: 0;
	padding: 0;
}

.ana-menu a {
	display: block;
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--radius-sm);
	color: var(--c-text);
	text-decoration: none;
	font-size: var(--fs-sm);
	font-weight: 500;
}
.ana-menu a:hover,
.ana-menu .current-menu-item > a {
	background: var(--c-surface-2);
	color: var(--c-brand);
}

.menu-dugmesi,
.tema-dugmesi {
	display: none;
	background: none;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-sm);
	color: var(--c-text);
	padding: var(--sp-2) var(--sp-3);
	font: inherit;
	font-size: var(--fs-sm);
	cursor: pointer;
	line-height: 1;
}
.tema-dugmesi { display: inline-flex; align-items: center; gap: var(--sp-2); }
.tema-dugmesi:hover { background: var(--c-surface-2); }

@media (max-width: 48rem) {
	.custom-logo { max-height: 4.5rem; }
	.marka-blok,
	.custom-logo-link { order: 1; }
	.tema-dugmesi { order: 2; }
	.menu-dugmesi { display: inline-block; order: 3; margin-inline-start: auto; }
	.baslik-arama {
		order: 4;
		flex: 1 0 100%;
		max-width: none;
		padding-bottom: var(--sp-3);
	}
	.ana-menu {
		order: 5;
		flex-basis: 100%;
		margin-inline-start: 0;
		display: none;
		padding-bottom: var(--sp-4);
	}
	.ana-menu.acik { display: block; }
	.ana-menu ul { flex-direction: column; gap: 0; }
	.ana-menu a { padding: var(--sp-3); border-bottom: 1px solid var(--c-border); }
}

/* --- 5) Icerik listeleri -------------------------------------------------- */

.arsiv-basligi {
	padding-bottom: var(--sp-4);
	margin-bottom: var(--sp-6);
	border-bottom: 1px solid var(--c-border);
}
.arsiv-basligi h1 { font-size: var(--fs-2xl); margin-bottom: var(--sp-2); }
.arsiv-aciklamasi { color: var(--c-text-muted); margin: 0; }

.yazi-listesi {
	display: grid;
	gap: var(--sp-5);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.yazi-karti {
	display: flex;
	flex-direction: column;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.yazi-karti:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow);
}

.yazi-karti .kart-gorsel {
	position: relative;
	isolation: isolate;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--c-surface-2);
}
.yazi-karti .kart-gorsel::before {
	position: absolute;
	inset: -0.75rem;
	z-index: 0;
	background-image: var(--kart-gorsel-arka, none);
	background-position: center;
	background-size: cover;
	content: "";
	filter: blur(0.75rem) brightness(0.42);
}
.yazi-karti .kart-gorsel img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}
.yazi-karti .kart-gorsel:active img { transform: scale(0.98); filter: brightness(0.88); }
.kart-gorsel-yer-tutucu { position: absolute; inset: 0; z-index: 1; background: linear-gradient(135deg, #2f5bd7, #7c4d96 55%, #0d9488); }

/* Yazi karti - YouTube karti gibi: kutu/kenarlik yok, gorsel 16:9 yuvarlak
   koseli ve merkezden kirpilir; altinda solda sinif rozeti, saginda baslik
   (en cok 2 satir), kategori ve "13 B goruntuleme - 3 yil once". */
.yazi-karti.kart-post {
	background: none;
	border: 0;
	border-radius: 0;
	overflow: visible;
	gap: var(--sp-3);
}
.yazi-karti.kart-post:hover {
	transform: none;
	box-shadow: none;
}
.kart-post .kart-gorsel {
	border-radius: 12px;
	overflow: hidden;
}

.kart-sure {
	position: absolute;
	right: 0.5rem;
	bottom: 0.5rem;
	z-index: 3;
	padding: 0.1rem 0.35rem;
	border-radius: 4px;
	background: rgb(0 0 0 / 78%);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

.kart-post .kart-govde {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--sp-3);
	padding: 0;
}
.kart-sinif {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	/* Ton sinif numarasindan gelir (--sinif-ton, bkz. matematik_sinif_tonu);
	   aciklik ve doygunluk sabit: tum siniflar ayni aile. Acik uc L 0.52'de
	   beyaz rakam her tonda >= 4.5:1. oklch desteklemeyen tarayiciya hsl. */
	background: hsl(var(--sinif-ton, 30) 62% 40%);
	background: linear-gradient(135deg, oklch(0.52 0.15 var(--sinif-ton, 30)) 0%, oklch(0.44 0.15 calc(var(--sinif-ton, 30) + 20)) 100%);
	box-shadow: inset 0 0 0 2px rgb(255 255 255 / 22%), 0 2px 6px rgb(0 0 0 / 22%);
	color: #fff;
	font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Segoe UI", system-ui, sans-serif;
	font-size: 1.2rem;
	font-weight: 900;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	text-shadow: 0 1px 2px rgb(0 0 0 / 30%);
	user-select: none;
}
.kart-sinif-site {
	/* Sinifsiz yazi: dusuk doygunlukta arduvaz mavisi - hicbir sinif
	   tonuyla (hepsi C 0.15) karismaz. */
	background: #3d4a63;
	background: linear-gradient(135deg, oklch(0.50 0.05 260) 0%, oklch(0.40 0.05 260) 100%);
	font-size: 0.72rem;
	letter-spacing: -0.02em;
}
.kart-bilgi {
	min-width: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.kart-post .kart-baslik {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	margin: 0 0 0.2rem;
	font-size: var(--fs-base);
	font-weight: 600;
	line-height: 1.4;
	overflow-wrap: anywhere;
}
.kart-kategori,
.kart-istatistik {
	margin: 0;
	font-size: var(--fs-sm);
	line-height: 1.45;
	color: var(--c-text-muted);
}
.kart-kategori {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.kart-kategori a { color: inherit; text-decoration: none; }
.kart-kategori a:hover { color: var(--c-text); }
.kart-istatistik {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.35em;
	font-variant-numeric: tabular-nums;
}

.kart-govde {
	padding: var(--sp-4);
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	flex: 1;
}

.kart-baslik {
	font-size: var(--fs-lg);
	margin: 0;
}
.kart-baslik a { color: var(--c-text); text-decoration: none; }
.kart-baslik a:hover { color: var(--c-brand); }

.kart-ozet {
	margin: 0;
	color: var(--c-text-muted);
	font-size: var(--fs-sm);
}

.yazi-ustverisi {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2) var(--sp-3);
	font-size: var(--fs-xs);
	color: var(--c-text-muted);
	margin: 0;
}
.yazi-ustverisi a { color: inherit; }
.yazi-ustverisi a:hover { color: var(--c-brand); }

.kategori-rozeti {
	display: inline-block;
	padding: 0.15em 0.6em;
	border-radius: 999px;
	background: color-mix(in srgb, var(--c-brand) 12%, transparent);
	color: var(--c-brand);
	font-size: var(--fs-xs);
	font-weight: 600;
	text-decoration: none;
}

/* Sayfalama */
.sayfalama {
	margin-top: var(--sp-7);
	display: flex;
	justify-content: center;
}
.sayfalama .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}
.sayfalama .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: var(--sp-2);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-sm);
	text-decoration: none;
	color: var(--c-text);
}
.sayfalama .page-numbers:hover { background: var(--c-surface-2); }
.sayfalama .page-numbers.current {
	background: var(--c-brand);
	border-color: var(--c-brand);
	color: #fff;
}

/* --- 6) Tekil yazi tipografisi -------------------------------------------- */

.tekil-yazi {
	width: 100%;
	max-width: 68rem;
	margin-inline: auto;
}
.tekil-yazi > * {
	width: 100%;
	max-width: 68rem;
	margin-inline: auto;
}
.tekil-yazi > .alignwide,
.tekil-yazi > .alignfull,
.tekil-yazi > figure,
.tekil-yazi > .video-cerceve,
.tekil-yazi > .ilgili-bolum,
.tekil-yazi > .wp-block-table,
.tekil-yazi > pre { max-width: 68rem; }

.yazi-kapak {
	width: min(100%, 45rem);
	max-width: 45rem;
	margin-inline: auto;
	margin-bottom: var(--sp-6);
	border-radius: var(--radius);
	overflow: hidden;
}
.yazi-kapak img {
	width: auto;
	max-width: 100%;
	margin-inline: auto;
	object-fit: contain;
}

.yazi-basligi { font-size: var(--fs-3xl); margin-bottom: var(--sp-4); }

.yazi-icerigi {
	max-width: 68rem;
	font-size: var(--fs-lg);
	line-height: 1.75;
}

.yazi-icerigi > * {
	max-width: 68rem;
	margin-inline: auto;
}
.yazi-icerigi > p:has(> iframe[src*="youtu"]) {
	width: 100%;
	max-width: 68rem;
}
.yazi-icerigi > figure,
.yazi-icerigi > .wp-block-image,
.yazi-icerigi > .wp-block-embed,
.yazi-icerigi > .wp-block-table,
.yazi-icerigi > pre,
.yazi-icerigi > .alignwide,
.yazi-icerigi > .alignfull { max-width: 68rem; }

.wp-block-embed__wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
}
.wp-block-embed__wrapper iframe,
.yazi-icerigi iframe[src*="youtube.com"],
.yazi-icerigi iframe[src*="youtube-nocookie.com"],
.yazi-icerigi iframe[src*="youtu.be"] {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

.yazi-icerigi h2 { font-size: var(--fs-2xl); margin-top: var(--sp-7); }
.yazi-icerigi h3 { font-size: var(--fs-xl); margin-top: var(--sp-6); }
.yazi-icerigi h4 { font-size: var(--fs-lg); margin-top: var(--sp-5); }

.yazi-icerigi li { margin-bottom: var(--sp-2); }
.yazi-icerigi li > ul,
.yazi-icerigi li > ol { margin-top: var(--sp-2); }

.yazi-icerigi blockquote {
	margin-inline: 0;
	padding: var(--sp-4) var(--sp-5);
	border-inline-start: 4px solid var(--c-brand);
	background: var(--c-surface);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-style: italic;
	color: var(--c-text-muted);
}
.yazi-icerigi blockquote > :last-child { margin-bottom: 0; }

.yazi-icerigi code {
	font-family: var(--font-mono);
	font-size: 0.9em;
	background: var(--c-surface-2);
	padding: 0.15em 0.4em;
	border-radius: 4px;
}

.yazi-icerigi pre {
	background: var(--c-surface-2);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	padding: var(--sp-4);
	overflow-x: auto;
	font-size: var(--fs-sm);
	line-height: 1.6;
}
.yazi-icerigi pre code { background: none; padding: 0; }

.yazi-icerigi figcaption {
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
	text-align: center;
	margin-top: var(--sp-2);
}

.yazi-icerigi table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
}
.yazi-icerigi th,
.yazi-icerigi td {
	border: 1px solid var(--c-border);
	padding: var(--sp-2) var(--sp-3);
	text-align: start;
}
.yazi-icerigi th { background: var(--c-surface-2); font-weight: 600; }

/* Tablolarin mobilde tasmasini engelle */
.tablo-sarmali { overflow-x: auto; margin-bottom: var(--sp-5); }

.etiket-listesi {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: var(--sp-6) 0;
	padding: 0;
	list-style: none;
}
.etiket-listesi a {
	display: inline-block;
	padding: 0.2em 0.7em;
	border: 1px solid var(--c-border);
	border-radius: 999px;
	font-size: var(--fs-xs);
	color: var(--c-text-muted);
	text-decoration: none;
}
.etiket-listesi a:hover {
	border-color: var(--c-brand);
	color: var(--c-brand);
}

/* Onceki / sonraki yazi */
.yazi-gezinme {
	margin-top: var(--sp-7);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--c-border);
}
.yazi-gezinme .nav-links {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.yazi-gezinme a {
	display: block;
	padding: var(--sp-4);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--c-text);
	font-weight: 600;
}
.yazi-gezinme a:hover { border-color: var(--c-brand); color: var(--c-brand); }
.yazi-gezinme .nav-next { text-align: end; }

/* --- 7) KaTeX ------------------------------------------------------------- */

/* Uzun formuller mobilde tasmasin, yatay kaysin */
.katex-display {
	overflow-x: auto;
	overflow-y: hidden;
	padding-block: var(--sp-2);
	max-width: 100%;
}
.katex-display > .katex { white-space: nowrap; }

/* Satir ici formuller satir yuksekligini bozmasin */
.katex { font-size: 1.06em; }

/* Formul render edilemezse ham metin okunabilir kalsin */
.katex-error {
	color: var(--c-danger);
	background: color-mix(in srgb, var(--c-danger) 10%, transparent);
	padding: 0.1em 0.3em;
	border-radius: 4px;
	font-family: var(--font-mono);
	font-size: 0.9em;
}

/* --- 8) Kenar cubugu ------------------------------------------------------ */

.kenar-cubugu { align-self: start; }

@media (min-width: 62rem) {
	.kenar-cubugu {
		position: sticky;
		top: 5rem;
	}
}

.widget {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	padding: var(--sp-4);
	margin-bottom: var(--sp-5);
}
.widget:last-child { margin-bottom: 0; }

.widget-title {
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--c-text-muted);
	margin-bottom: var(--sp-3);
}

.widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--fs-sm);
}
.widget li + li { margin-top: var(--sp-2); }
.widget a { text-decoration: none; }
.widget a:hover { text-decoration: underline; }

/* --- 9) Alt bilgi --------------------------------------------------------- */

.site-altbilgi {
	border-top: 1px solid var(--c-border);
	background: var(--c-surface);
	padding-block: var(--sp-6);
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}
.altbilgi-ic {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	align-items: center;
	justify-content: space-between;
}
.altbilgi-menu ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
}

/* --- 10) Formlar ---------------------------------------------------------- */

input[type="text"], input[type="email"], input[type="url"],
input[type="search"], input[type="password"], textarea, select {
	width: 100%;
	padding: var(--sp-2) var(--sp-3);
	font: inherit;
	font-size: var(--fs-sm);
	color: var(--c-text);
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-sm);
}
textarea { min-height: 8rem; resize: vertical; }

.dugme, button[type="submit"], input[type="submit"] {
	display: inline-block;
	padding: var(--sp-2) var(--sp-5);
	font: inherit;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: #fff;
	background: var(--c-brand);
	border: 1px solid var(--c-brand);
	border-radius: var(--radius-sm);
	cursor: pointer;
	text-decoration: none;
}
.dugme:hover, button[type="submit"]:hover, input[type="submit"]:hover {
	background: var(--c-brand-hover);
	border-color: var(--c-brand-hover);
	color: #fff;
}

.arama-formu { display: flex; gap: var(--sp-2); }

/* --- Eski icerik kisa kodlari -------------------------------------------- */

.kisa-kod-infobox,
.kisa-kod-accordion {
	margin-block: var(--sp-5);
	padding: var(--sp-4) var(--sp-5);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-inline-start: 4px solid var(--c-brand);
	border-radius: var(--radius-sm);
}
.kisa-kod-baslik { display: block; margin-bottom: var(--sp-2); }
.kisa-kod-vurgu {
	padding-inline: 0.18em;
	color: inherit;
	background: color-mix(in srgb, var(--c-accent) 24%, transparent);
}
.kisa-kod-accordion summary { cursor: pointer; font-weight: 700; }
.kisa-kod-accordion-icerik { padding-top: var(--sp-3); }

/* --- 11) Yorumlar --------------------------------------------------------- */

.yorumlar {
	margin-top: var(--sp-8);
	padding-top: var(--sp-6);
	border-top: 1px solid var(--c-border);
	max-width: var(--w-content);
}
.yorum-listesi { list-style: none; margin: 0 0 var(--sp-6); padding: 0; }
.yorum-listesi .children { list-style: none; padding-inline-start: var(--sp-5); }

.yorum-listesi article {
	padding: var(--sp-4);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	margin-bottom: var(--sp-4);
}
.yorum-ustveri {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin-bottom: var(--sp-3);
	font-size: var(--fs-sm);
}
.yorum-ustveri img { border-radius: 50%; }

/* --- 12) Yardimcilar ------------------------------------------------------ */

.ekran-okuyucu-metni {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.ekran-okuyucu-metni:focus {
	position: static !important;
	width: auto; height: auto;
	clip-path: none;
	white-space: normal;
}

.alignleft  { float: left;  margin: 0 var(--sp-5) var(--sp-4) 0; }
.alignright { float: right; margin: 0 0 var(--sp-4) var(--sp-5); }
.aligncenter { margin-inline: auto; }
.alignwide, .alignfull { margin-block: var(--sp-6); }

.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: var(--fs-sm); color: var(--c-text-muted); }

.bos-durum {
	padding: var(--sp-7);
	text-align: center;
	background: var(--c-surface);
	border: 1px dashed var(--c-border);
	border-radius: var(--radius);
}

/* ==========================================================================
   13) Ana sayfa, video cercevesi, indirme kutusu
   ========================================================================== */

/* --- Giris bolumu --------------------------------------------------------- */

.giris-bolumu {
	text-align: center;
	padding: var(--sp-7) var(--sp-4) var(--sp-6);
	margin-bottom: var(--sp-7);
	background:
		radial-gradient(ellipse at top, color-mix(in srgb, var(--c-brand) 10%, transparent), transparent 65%),
		var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
}
.giris-basligi { font-size: var(--fs-3xl); margin-bottom: var(--sp-2); }
.giris-metni {
	color: var(--c-text-muted);
	max-width: 44rem;
	margin-inline: auto;
	margin-bottom: var(--sp-5);
}
.giris-bolumu .arama-formu {
	max-width: 32rem;
	margin-inline: auto;
}

/* --- Bolum basliklari ----------------------------------------------------- */

.bolum-ustu {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-4);
	margin-bottom: var(--sp-4);
}
.bolum-basligi {
	font-size: var(--fs-xl);
	margin: 0 0 var(--sp-4);
}
.bolum-ustu .bolum-basligi { margin-bottom: 0; }
.bolum-baglantisi {
	font-size: var(--fs-sm);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.ilgili-bolum { margin-block: var(--sp-7); }
.sinif-bolumu { margin-block: var(--sp-7); }

/* --- Sinif kartlari ------------------------------------------------------- */

.sinif-kartlari {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-3);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
}
.sinif-kartlari a {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	align-items: center;
	justify-content: center;
	min-height: 6rem;
	padding: var(--sp-4);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--c-text);
	transition: border-color 0.15s ease, transform 0.15s ease;
}
.sinif-kartlari a:hover {
	border-color: var(--c-brand);
	transform: translateY(-2px);
	color: var(--c-brand);
}
.sinif-adi { font-size: var(--fs-lg); font-weight: 700; }
.sinif-sayi { font-size: var(--fs-xs); color: var(--c-text-muted); }

/* Müfredat ağacı sayfaları */
.mufredat-arsiv { max-width: 72rem; margin-inline: auto; }
.mufredat-arsiv > .arsiv-baslik { margin-block-end: var(--sp-6); }
.mufredat-kartlari ul,
.mufredat-sinif-gezinme ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }
.mufredat-kartlari a,
.mufredat-sinif-gezinme a { display: flex; align-items: center; justify-content: space-between; min-height: 3.5rem; padding: var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); color: var(--c-text); font-weight: 650; text-decoration: none; }
.mufredat-kartlari a:hover,
.mufredat-kartlari a:focus-visible,
.mufredat-sinif-gezinme a:hover,
.mufredat-sinif-gezinme a:focus-visible { border-color: var(--c-brand); color: var(--c-brand); transform: translateY(-1px); }
.mufredat-sinif-gezinme { margin-block-start: var(--sp-7); }
.mufredat-sinif-gezinme h2 { font-size: var(--fs-lg); }
.mufredat-pilot-baglanti { margin-block: var(--sp-6); }
.mufredat-pilot-videolari > h2,
.mufredat-pilot-pdf > h2 { margin-block: var(--sp-5) var(--sp-3); }
.mufredat-pilot-video { margin-block-end: var(--sp-5); }
.mufredat-pilot-video h3 { font-size: var(--fs-lg); }
.mufredat-pilot-pdf { margin-block: var(--sp-6); }
@media (prefers-reduced-motion: reduce) {
	.mufredat-kartlari a,
	.mufredat-sinif-gezinme a { transition: none; }
}

/* --- Ana sayfa slider ve genis akis -------------------------------------- */

.home .site-govde { padding-top: 0; }

.ana-slider {
	/* Bilgi satiri gorunurken baslik alt kenari: bilgi satirinin alti (sp-4)
	   + satir (sp-2 ust bosluk + 1.5rem + 2px cizgi) + sp-2 nefes. */
	--ana-slider-baslik-ust: calc(var(--sp-4) + var(--sp-2) + 1.5rem + 2px + var(--sp-2));
	margin-top: 1.5rem;
	margin-bottom: var(--sp-7);
	overflow: hidden;
}

/* Eski sitenin mansetiyle ayni fikir: gorsel karti doldurur, baslik ustune
   biner; fareyle ustune gelince zaman, kategori ve sayac belirir. */
.ana-slider-kart {
	position: relative;
	isolation: isolate;
	flex: 0 0 42%;
	width: 42%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius);
	background: linear-gradient(135deg, #2f5bd7, #8a3ffc 55%, #e2447c);
	box-shadow: var(--shadow);
	transform: scale(0.52);
	transition: transform 0.4s cubic-bezier(0.2, 0.75, 0.25, 1), box-shadow 0.4s ease;
}
.ana-slider-kart.swiper-slide-active {
	transform: scale(1);
	box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 24%);
}
.ana-slider .swiper-wrapper > .ana-slider-kart.swiper-slide-active { transform: scale(1) !important; }
.ana-slider .swiper-wrapper > .ana-slider-kart:not(.swiper-slide-active) { transform: scale(0.52) !important; }
.ana-slider .swiper-wrapper > .ana-slider-kart.swiper-slide-prev { transform: translateX(24%) scale(0.52) !important; }
.ana-slider .swiper-wrapper > .ana-slider-kart.swiper-slide-next { transform: translateX(-24%) scale(0.52) !important; }
.ana-slider-kart::before {
	position: absolute;
	inset: -1rem;
	z-index: 0;
	background-image: var(--ana-slider-gorsel, linear-gradient(135deg, #2f5bd7, #8a3ffc 55%, #e2447c));
	background-position: center;
	background-size: cover;
	content: "";
	filter: blur(1rem) brightness(0.42);
}

.ana-slider-baglanti {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	color: #fff;
	text-decoration: none;
}

.ana-slider-gorsel {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.4s ease;
}

.ana-slider-golge {
	position: absolute;
	inset: auto 0 0;
	z-index: 1;
	height: 55%;
	background: linear-gradient(to bottom, rgb(24 18 72 / 0%), rgb(38 22 96 / 58%) 45%, rgb(14 10 44 / 92%));
	transition: height 0.3s ease;
}

.ana-slider-baslik {
	position: absolute;
	right: var(--sp-5);
	bottom: var(--sp-5);
	left: var(--sp-5);
	z-index: 2;
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: #fff;
	font-size: var(--fs-lg);
	line-height: 1.3;
	text-shadow: 0 2px 4px rgb(0 0 0 / 60%);
	overflow-wrap: anywhere;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	transition: bottom 0.25s ease;
}
.ana-slider-kart:not(.swiper-slide-active) .ana-slider-baslik {
	-webkit-line-clamp: 2;
	line-clamp: 2;
	font-size: clamp(1.5rem, 2vw, 1.875rem);
	line-height: 1.2;
}
.ana-slider-kart:not(.swiper-slide-active) .ana-slider-golge { height: 70%; }

.ana-slider-bilgi {
	position: absolute;
	right: var(--sp-5);
	bottom: 0;
	left: var(--sp-5);
	z-index: 3;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--sp-4);
	min-height: 1.5rem;
	padding-top: var(--sp-2);
	border-top: 2px solid rgb(255 255 255 / 68%);
	color: #fff;
	font-size: var(--fs-sm);
	line-height: 1.5;
	white-space: nowrap;
	text-shadow: 0 1px 2px rgb(0 0 0 / 60%);
	opacity: 0;
	pointer-events: none;
	transition: bottom 0.25s ease, opacity 0.25s ease;
}
/* Her oge ikon + yazi tek satir: temanin genel "svg { display: block }"
   kurali ikonu yazinin ustune itmesin. Uzun kategori adi kisalir, satir kirilmaz. */
.ana-slider-bilgi > * {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 0.3em;
	min-width: 0;
}
.ana-slider-bilgi svg {
	display: inline-block;
	flex: none;
	width: 1em;
	height: 1em;
	fill: currentColor;
}
.ana-slider-bilgi > .ana-slider-kategori { flex: 0 1 auto; }
.ana-slider-kategori-ad {
	overflow: hidden;
	text-overflow: ellipsis;
}
.ana-slider-kategori { color: #fff; text-decoration: none; }
.ana-slider-kategori:hover,
.ana-slider-kategori:focus-visible { text-decoration: underline; }

.ana-slider-kart:hover .ana-slider-gorsel { transform: scale(1.05); }
.ana-slider-kart:active .ana-slider-gorsel { transform: scale(0.98); filter: brightness(0.88); }
.ana-slider-kart:hover .ana-slider-golge,
.ana-slider-kart:focus-within .ana-slider-golge { height: 80%; }
.ana-slider-kart:hover .ana-slider-baslik,
.ana-slider-kart:focus-within .ana-slider-baslik { bottom: var(--ana-slider-baslik-ust); }
.ana-slider-kart:hover .ana-slider-bilgi,
.ana-slider-kart:focus-within .ana-slider-bilgi {
	bottom: var(--sp-4);
	opacity: 1;
	pointer-events: auto;
}

/* Dokunmatik ekranda "ustune gelme" yok: bilgi satiri hep gorunur. */
@media (hover: none) {
	.ana-slider-golge { height: 80%; }
	.ana-slider-baslik { bottom: var(--ana-slider-baslik-ust); }
	.ana-slider-bilgi { bottom: var(--sp-4); opacity: 1; pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.ana-slider-kart { transition: none; }
	.ana-slider-gorsel,
	.ana-slider-golge,
	.ana-slider-baslik,
	.ana-slider-bilgi { transition: none; }
	.ana-slider-kart:hover .ana-slider-gorsel { transform: none; }
}

@media (max-width: 48rem) {
	.ana-slider-kart { flex-basis: 64%; width: 64%; transform: scale(0.52); }
	.ana-slider-kart.swiper-slide-active { transform: scale(1) !important; }
	.ana-slider .swiper-wrapper > .ana-slider-kart:not(.swiper-slide-active) { transform: scale(0.52) !important; }
	.ana-slider .swiper-wrapper > .ana-slider-kart.swiper-slide-prev { transform: translateX(22%) scale(0.52) !important; }
	.ana-slider .swiper-wrapper > .ana-slider-kart.swiper-slide-next { transform: translateX(-22%) scale(0.52) !important; }
	.ana-slider-kart:not(.swiper-slide-active) .ana-slider-baslik { font-size: 1.8rem; }
	.ana-slider { margin-top: var(--sp-4); }
	.ana-slider .swiper-button-prev,
	.ana-slider .swiper-button-next { width: 2.25rem; height: 2.25rem; }
}

.ana-slider .swiper-button-prev,
.ana-slider .swiper-button-next {
	width: 2.75rem;
	height: 2.75rem;
	color: #fff;
	background: rgb(20 23 28 / 72%);
	border: 0;
	border-radius: 999px;
}
.ana-slider .swiper-button-prev::after,
.ana-slider .swiper-button-next::after { font-size: 1rem; font-weight: 800; }
.ana-slider .swiper-pagination {
	position: static;
	margin-top: var(--sp-3);
}
.ana-slider .swiper-pagination-bullet { background: var(--c-text); }
.ana-slider .swiper-pagination-bullet-active { background: var(--c-brand); }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ana-sayfa-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 20rem;
	gap: var(--sp-7);
	align-items: start;
}
.ana-sayfa-ana { min-width: 0; }
.ana-sayfa-sidebar {
	position: sticky;
	top: 6rem;
	align-self: start;
}
.ana-sayfa-yazilar {
	/* Gorunur baslik yok; ilk kartlar kenar cubuguyla ayni hizada baslar. */
	margin-block: 0 var(--sp-7);
}
.ana-sayfa-yazilar .yazi-listesi {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ana-sayfa-yan-listesi {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ana-sayfa-yan-listesi li + li { border-top: 1px solid var(--c-border); }
.ana-sayfa-yan-listesi a {
	display: block;
	padding-block: var(--sp-2);
	color: var(--c-text);
	text-decoration: none;
}
.ana-sayfa-yan-listesi a:hover { color: var(--c-brand); }

/* Son Paylasimlar: tur rengi sekmede ve her satirda tekrar eder. Baslik ve
   panel etiketi de turu soyledigi icin renk tek ayirt etme yolu degildir. */
.son-paylasimlar {
	--paylasim-video: #2f5bd7;
	--paylasim-pdf: #7c4d96;
	--paylasim-oyun: #0d9488;
}
.ana-sayfa-sidebar {
	--paylasim-video: #2f5bd7;
	--paylasim-pdf: #7c4d96;
	--paylasim-oyun: #0d9488;
}
.son-paylasimlar .widget-title {
	color: var(--c-text);
	font-size: var(--fs-base);
	letter-spacing: 0;
	text-transform: none;
}
.paylasim-sekmeleri {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-1);
}
.paylasim-sekmeleri[hidden],
.paylasim-panel[hidden],
.paylasim-panel-baslik[hidden] { display: none; }
.paylasim-sekmesi {
	min-width: 0;
	min-height: 2.75rem;
	padding: 0.35rem 0.15rem;
	border: 1px solid var(--c-border);
	border-bottom: 3px solid var(--paylasim-vurgu);
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, var(--paylasim-vurgu) 7%, var(--c-surface));
	color: var(--c-text);
	font: inherit;
	font-size: var(--fs-xs);
	font-weight: 700;
	line-height: 1.25;
	cursor: pointer;
	overflow-wrap: anywhere;
}
.paylasim-sekmesi[aria-selected="true"] {
	background: color-mix(in srgb, var(--paylasim-vurgu) 16%, var(--c-surface));
	border-color: var(--paylasim-vurgu);
}
.paylasim-sekmesi:hover {
	background: color-mix(in srgb, var(--paylasim-vurgu) 20%, var(--c-surface));
}
.paylasim-sekmesi-video,
.paylasim-panel-video { --paylasim-vurgu: var(--paylasim-video); }
.paylasim-sekmesi-pdf,
.paylasim-panel-pdf { --paylasim-vurgu: var(--paylasim-pdf); }
.paylasim-sekmesi-oyun,
.paylasim-panel-oyun { --paylasim-vurgu: var(--paylasim-oyun); }
.paylasim-panel { margin-top: var(--sp-2); }
.paylasim-panel-baslik {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-sm);
}
.paylasim-listesi li + li {
	margin-top: var(--sp-1);
	border-top: 0;
}
.paylasim-listesi a {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.35rem 0.65rem;
	border-left: 3px solid var(--paylasim-vurgu);
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, var(--paylasim-vurgu) 11%, var(--c-surface));
	line-height: 1.3;
	overflow-wrap: anywhere;
	gap: var(--sp-2);
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.paylasim-listesi a:hover {
	background: color-mix(in srgb, var(--paylasim-vurgu) 20%, var(--c-surface));
	color: var(--c-text);
	transform: translateY(-2px);
	box-shadow: var(--shadow);
}
.paylasim-listesi a:active {
	transform: translateY(0) scale(0.985);
	background: color-mix(in srgb, var(--paylasim-vurgu) 30%, var(--c-surface));
	box-shadow: inset 0 1px 3px rgb(0 0 0 / 18%);
}
.paylasim-listesi a:focus-visible { outline: 3px solid var(--paylasim-vurgu); outline-offset: 2px; }
.paylasim-satir-gorsel {
	position: relative;
	display: block;
	flex: 0 0 7rem;
	width: 7rem;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: linear-gradient(135deg, var(--paylasim-vurgu), var(--c-surface-2));
}
.paylasim-satir-gorsel::before {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, transparent, rgb(0 0 0 / 18%));
	content: "";
}
.paylasim-satir-gorsel img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.22s ease;
}
.paylasim-listesi a:hover .paylasim-satir-gorsel img,
.paylasim-listesi a:focus-visible .paylasim-satir-gorsel img { transform: scale(1.08); }
.paylasim-listesi a:active .paylasim-satir-gorsel img { transform: scale(0.96); }
.paylasim-satir-icerik { display: grid; min-width: 0; gap: 0.15rem; }
.paylasim-satir-baslik { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.paylasim-satir-meta { color: var(--c-text-muted); font-size: var(--fs-xs); }
.paylasim-bos {
	margin: 0;
	min-height: 2.75rem;
	padding: 0.65rem;
	border-left: 3px solid var(--paylasim-vurgu);
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, var(--paylasim-vurgu) 11%, var(--c-surface));
	font-size: var(--fs-sm);
}
.ana-sayfa-sidebar > .widget:not(.son-paylasimlar) .ana-sayfa-yan-listesi li:nth-child(3n + 1) a { --kategori-ton: var(--paylasim-video); }
.ana-sayfa-sidebar > .widget:not(.son-paylasimlar) .ana-sayfa-yan-listesi li:nth-child(3n + 2) a { --kategori-ton: var(--paylasim-pdf); }
.ana-sayfa-sidebar > .widget:not(.son-paylasimlar) .ana-sayfa-yan-listesi li:nth-child(3n) a { --kategori-ton: var(--paylasim-oyun); }
.ana-sayfa-sidebar > .widget:not(.son-paylasimlar) .ana-sayfa-yan-listesi li { margin-top: 0; border-top: 0; }
.ana-sayfa-sidebar > .widget:not(.son-paylasimlar) .ana-sayfa-yan-listesi li a {
	border-radius: var(--radius-sm);
	padding: 0.45rem 0.65rem;
	border-bottom: 1px solid var(--c-border);
	transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.ana-sayfa-sidebar > .widget:not(.son-paylasimlar) .ana-sayfa-yan-listesi li a:hover,
.ana-sayfa-sidebar > .widget:not(.son-paylasimlar) .ana-sayfa-yan-listesi li a:focus-visible {
	background: color-mix(in srgb, var(--kategori-ton, var(--paylasim-video)) 36%, var(--c-surface));
	color: var(--c-text);
}
.ana-sayfa-sidebar > .widget:not(.son-paylasimlar) .ana-sayfa-yan-listesi li a:focus-visible {
	outline: 3px solid var(--kategori-ton, var(--paylasim-video));
	outline-offset: 2px;
}
.ana-sayfa-sidebar > .widget:not(.son-paylasimlar) .ana-sayfa-yan-listesi li a:active {
	transform: translateY(1px) scale(0.99);
	background: color-mix(in srgb, var(--kategori-ton, var(--paylasim-video)) 30%, var(--c-surface));
	color: var(--c-text);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-tema="acik"]) .son-paylasimlar {
		--paylasim-video: #91afff;
		--paylasim-pdf: #d1a5e6;
		--paylasim-oyun: #5dd8c9;
	}
	:root:not([data-tema="acik"]) .ana-sayfa-sidebar {
		--paylasim-video: #91afff;
		--paylasim-pdf: #d1a5e6;
		--paylasim-oyun: #5dd8c9;
	}
}
:root[data-tema="koyu"] .son-paylasimlar {
	--paylasim-video: #91afff;
	--paylasim-pdf: #d1a5e6;
	--paylasim-oyun: #5dd8c9;
}
:root[data-tema="koyu"] .ana-sayfa-sidebar {
	--paylasim-video: #91afff;
	--paylasim-pdf: #d1a5e6;
	--paylasim-oyun: #5dd8c9;
}
@media (prefers-reduced-motion: reduce) {
	.ana-slider-kart:active .ana-slider-gorsel,
	.yazi-karti .kart-gorsel:active img,
	.paylasim-listesi a:hover .paylasim-satir-gorsel img,
	.paylasim-listesi a:focus-visible .paylasim-satir-gorsel img,
	.paylasim-listesi a:active .paylasim-satir-gorsel img,
	.paylasim-listesi a:active,
	.ana-sayfa-sidebar > .widget:not(.son-paylasimlar) .ana-sayfa-yan-listesi li a:active { transform: none; }
	.paylasim-listesi a:hover,
	.paylasim-listesi a:focus-visible { transform: none; box-shadow: none; }
	.ana-sayfa-sidebar > .widget:not(.son-paylasimlar) .ana-sayfa-yan-listesi li a:hover,
	.ana-sayfa-sidebar > .widget:not(.son-paylasimlar) .ana-sayfa-yan-listesi li a:focus-visible,
	.ana-sayfa-sidebar > .widget:not(.son-paylasimlar) .ana-sayfa-yan-listesi li a:active { transform: none; }
	.paylasim-listesi a,
	.paylasim-satir-gorsel img,
	.ana-sayfa-sidebar > .widget:not(.son-paylasimlar) .ana-sayfa-yan-listesi li a { transition: none; }
}

@media (max-width: 62rem) {
	.ana-sayfa-grid { grid-template-columns: minmax(0, 1fr); }
	.ana-sayfa-yazilar .yazi-listesi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ana-sayfa-sidebar {
		position: static;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
		gap: var(--sp-5);
	}
}

@media (max-width: 48rem) {
	.ana-sayfa-yazilar .yazi-listesi { grid-template-columns: minmax(0, 1fr); }
}

/* --- Video cercevesi ------------------------------------------------------ */
/* Tiklanana kadar yalnizca kapak gorseli durur; iframe sonra olusur. */

.video-cerceve {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: var(--radius);
	overflow: hidden;
	margin-bottom: var(--sp-6);
}
.video-cerceve iframe {
	width: 100%;
	height: 100%;
	border: 0;
}
.video-oynat {
	all: unset;
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	cursor: pointer;
}
.video-oynat img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.oynat-simgesi {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	transition: transform 0.15s ease, opacity 0.15s ease;
}
.oynat-simgesi svg {
	filter: drop-shadow(0 2px 8px rgb(0 0 0 / 40%));
	opacity: 0.9;
}
.video-oynat:hover .oynat-simgesi { transform: scale(1.08); }
.video-oynat:hover .oynat-simgesi svg { opacity: 1; }
.video-oynat:focus-visible { outline: 3px solid var(--c-brand); outline-offset: -3px; }

/* Kartlardaki kucuk video isareti */
.kart-gorsel { position: relative; display: block; }
.kart-video-isareti {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
}
.kart-video-isareti::after {
	content: "";
	width: 3rem;
	height: 2.1rem;
	border-radius: 8px;
	background: rgb(255 0 0 / 88%);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	box-shadow: 0 2px 10px rgb(0 0 0 / 35%);
}
.kart-video-isareti::before {
	content: "";
	position: absolute;
	z-index: 1;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0.45rem 0 0.45rem 0.75rem;
	border-color: transparent transparent transparent #fff;
}

/* --- Indirme kutusu ------------------------------------------------------- */

.indirme-kutusu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: var(--sp-5);
	margin-bottom: var(--sp-6);
	background: color-mix(in srgb, var(--c-accent) 8%, var(--c-surface));
	border: 1px solid color-mix(in srgb, var(--c-accent) 35%, var(--c-border));
	border-radius: var(--radius);
}
.indirme-bilgi {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
}
.indirme-bilgi strong { font-size: var(--fs-lg); }
.indirme-ayrinti {
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}
.indirme-dugmesi {
	background: var(--c-accent);
	border-color: var(--c-accent);
	padding-inline: var(--sp-6);
	font-size: var(--fs-base);
}
.indirme-dugmesi:hover {
	background: color-mix(in srgb, var(--c-accent) 82%, #000);
	border-color: color-mix(in srgb, var(--c-accent) 82%, #000);
}

/* Kart icindeki kucuk indirme satiri */
.kart-alt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	margin: auto 0 0;
	padding-top: var(--sp-3);
	border-top: 1px solid var(--c-border);
	font-size: var(--fs-xs);
}
.dosya-rozeti {
	color: var(--c-text-muted);
	font-variant-numeric: tabular-nums;
}
.kart-indir {
	font-weight: 600;
	text-decoration: none;
	color: var(--c-accent);
	white-space: nowrap;
}
.kart-indir:hover { text-decoration: underline; color: var(--c-accent); }

.sure-rozeti {
	display: inline-block;
	padding: 0.1em 0.5em;
	border-radius: 4px;
	background: var(--c-surface-2);
	font-variant-numeric: tabular-nums;
}

/* --- Kenar cubugu yoksa icerigi ortala ------------------------------------ */

.kenar-cubugu-yok .site-govde { grid-template-columns: minmax(0, 1fr); }

/* --- Yazi videosu ve ilgili videolar --- */
/* Yazida gomulu video varsa one cikan gorselin yerini alir; yaninda (dar
   sutunda altinda) ilgili videolar listesi durur. Yan yana/alt alta karari
   ekran genisligine degil bolumun kendi genisligine gore verilir: kenar
   cubugu acikken ana sutun ekrandan cok daha dardir. */

.yazi-videosu {
	container-type: inline-size;
	margin-bottom: var(--sp-6);
}
.yazi-videosu-ic {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: minmax(0, 1fr);
}
.yazi-videosu .video-cerceve { margin-bottom: 0; }

.ilgili-videolar {
	display: flex;
	flex-direction: column;
	min-width: 0;
	max-height: 26rem;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	overflow: hidden;
}
.ilgili-videolar-baslik {
	flex: none;
	margin: 0;
	padding: var(--sp-3) var(--sp-4);
	border-bottom: 1px solid var(--c-border);
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--c-text);
}
.ilgili-videolar-listesi {
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	padding: var(--sp-2);
	list-style: none;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--c-border) transparent;
}
.ilgili-video + .ilgili-video { margin-top: var(--sp-1); }
.ilgili-video-baglanti {
	display: grid;
	grid-template-columns: 8rem minmax(0, 1fr);
	align-items: start;
	gap: var(--sp-3);
	padding: var(--sp-2);
	border-radius: var(--radius-sm);
	color: var(--c-text);
	text-decoration: none;
}
.ilgili-video-baglanti:hover,
.ilgili-video-baglanti:focus-visible {
	background: var(--c-surface-2);
	color: var(--c-brand);
}
.ilgili-video-baglanti:focus-visible { outline-offset: -3px; }
.ilgili-video-gorsel {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--c-surface-2);
}
.ilgili-video-gorsel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ilgili-video-simge {
	position: absolute;
	right: var(--sp-1);
	bottom: var(--sp-1);
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: rgb(0 0 0 / 70%);
}
.ilgili-video-simge::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 55%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 0.4rem 0 0.4rem 0.65rem;
	border-color: transparent transparent transparent #fff;
}
.ilgili-video-adi {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

/* Phone hero: a wide 16:9 image stays in focus; title and shade use only its foot. */
@media (max-width: 640px) {
	.ana-slider-kart {
		flex: 0 0 88vw;
		width: 88vw;
		aspect-ratio: 16 / 9;
	}
	.ana-slider-kart.swiper-slide-active {
		transform: scale(1) !important;
	}
	.ana-slider-kart.swiper-slide-active .ana-slider-golge,
	.ana-slider-kart.swiper-slide-active:hover .ana-slider-golge,
	.ana-slider-kart.swiper-slide-active:focus-within .ana-slider-golge {
		height: 35%;
	}
	.ana-slider-kart.swiper-slide-active .ana-slider-baslik {
		right: 12px;
		bottom: 12px;
		left: 12px;
		font-size: 1rem;
		line-height: 1.25;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}
	.ana-slider-kart:not(.swiper-slide-active) .ana-slider-baslik {
		display: none;
	}
	.ana-slider-bilgi {
		display: none;
	}
	.ana-slider-kart::before {
		display: none;
	}
	.ana-slider-gorsel {
		object-fit: cover;
		object-position: center;
	}
	.yazi-karti .kart-gorsel::before {
		display: none;
	}
	.yazi-karti .kart-gorsel img {
		display: block;
		object-fit: cover;
		object-position: center;
	}
	.yazi-kapak {
		aspect-ratio: 16 / 9;
	}
	.yazi-kapak img {
		display: block;
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
		object-position: center;
	}
}

@container (min-width: 44rem) {
	.yazi-videosu-ic {
		grid-template-columns: minmax(0, 1fr) clamp(15rem, 30%, 20rem);
		align-items: stretch;
	}
	/* Liste yuksekligi videoyu izler: kendi icerigi satiri uzatmaz. */
	.yazi-videosu-ic > .ilgili-videolar {
		contain: size;
		max-height: none;
	}
}