/*
Theme Name: Masal Vakti
Theme URI: https://keremilemasalvakti.com
Author: Kerem ile Masal Vakti
Description: Kerem ile Masal Vakti için hazırlanmış özel tema. Her masalın teması kendi rengini taşır; sayfa sayfa okunur, tek dokunuşla dinlenir.
Version: 1.1.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: masalvakti
Tags: custom-menu, featured-images, translation-ready
*/

/* =========================================================================
   1. Tokenlar

   Renk kuralı: tema rengi DOLGULARDA yaşar — nokta, şerit, düğme zemini,
   oynat tuşu, ilk harf. Yazı her zaman lacivert kalır. Böylece sarı kadar
   açık bir tema rengi bile okunaklılığı bozmaz.
   ====================================================================== */

:root {
	/* Zemin ve mürekkep */
	--zemin: #edf5ff;
	--yuzey: #ffffff;
	--murekkep: #16324f;
	--murekkep-soluk: #5a7590;
	--cizgi: #d9e7f5;
	--baglanti: #0f62c4;

	/* Masal tema renkleri — sarılar, turuncular, pembeler, maviler */
	--pembe: #ff6fa8;
	--mercan: #ff7d6b;
	--turuncu: #ff9422;
	--sari: #ffce2b;
	--turkuaz: #2fd4c8;
	--gok: #56aeff;

	/* Kahraman vurgusu */
	--vurgu: #e03a80;

	/* Geçerli sayfanın tema rengi */
	--tema: #ff9422;
	/* Tema renginin ÜZERİNE gelen yazı ve simge rengi. Terim ekranından
	   seçiliyor; seçilmemişse parlaklığa göre hesaplanıyor. Eskiden sabit
	   mürekkepti ve koyu temalarda yazılar zemine karışıyordu (29 Ago). */
	--tema-yazi: #16324f;
	--tema-koyu: #b45f10;
	--tema-koyu: color-mix(in srgb, var(--tema) 55%, var(--murekkep));

	/* Yazı tipleri */
	--display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
	--govde: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
	--nesir: "Lora", Georgia, "Times New Roman", serif;

	/* Ölçüler */
	--kapsa: 1160px;
	--dar: 720px;
	--bosluk: clamp(1.15rem, 4vw, 2rem);
	--yuvarlak: 22px;
	--yuvarlak-kucuk: 14px;

	/* Gölgeler */
	--golge: 0 2px 4px rgba(22, 50, 79, 0.05), 0 12px 28px rgba(22, 50, 79, 0.08);
	--golge-kalkik: 0 4px 8px rgba(22, 50, 79, 0.07), 0 22px 48px rgba(22, 50, 79, 0.15);
}

/* =========================================================================
   2. Sıfırlama
   ====================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 90px;
}

body {
	margin: 0;
	background: var(--zemin);
	color: var(--murekkep);
	font-family: var(--govde);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

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

img {
	height: auto;
}

a {
	color: inherit;
}

button {
	font: inherit;
	color: inherit;
	cursor: pointer;
}

input,
textarea,
select {
	font: inherit;
	color: inherit;
}

[hidden] {
	display: none !important;
}

/* =========================================================================
   3. Tipografi
   ====================================================================== */

h1,
h2,
h3,
h4 {
	font-family: var(--display);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.015em;
	margin: 0 0 0.5em;
	overflow-wrap: break-word;
}

p {
	margin: 0 0 1.15em;
}

p:last-child {
	margin-bottom: 0;
}

strong {
	font-weight: 700;
}

/* =========================================================================
   4. Yardımcılar
   ====================================================================== */

.kapsa {
	width: 100%;
	max-width: var(--kapsa);
	margin-inline: auto;
	padding-inline: var(--bosluk);
}

.kapsa.dar {
	max-width: var(--dar);
}

.ana {
	flex: 1;
}

.sadece-okuyucu,
.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;
}

.atla {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--murekkep);
	color: #fff;
	padding: 0.85rem 1.4rem;
	border-radius: 0 0 var(--yuvarlak-kucuk) 0;
	font-weight: 600;
	text-decoration: none;
}

.atla:focus {
	left: 0;
}

:where(a, button, input, textarea, summary):focus-visible {
	outline: 3px solid var(--murekkep);
	outline-offset: 3px;
	border-radius: 6px;
}

/* =========================================================================
   5. Şerit — sitenin imzası
   Altı tema rengi bir arada; bir masalın içindeyken o masalın rengine döner.
   ====================================================================== */

.serit {
	height: 6px;
	background: linear-gradient(
		90deg,
		var(--pembe) 0 16.66%,
		var(--mercan) 16.66% 33.33%,
		var(--turuncu) 33.33% 50%,
		var(--sari) 50% 66.66%,
		var(--turkuaz) 66.66% 83.33%,
		var(--gok) 83.33% 100%
	);
}

.masal-sayfasi .serit,
.tax-masal_temasi .serit {
	background: var(--tema);
}

/* =========================================================================
   6. Üst bilgi
   ====================================================================== */

.ust {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(237, 245, 255, 0.9);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--cizgi);
}

.ust-ic {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 76px;
}

.marka {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	text-decoration: none;
	color: var(--murekkep);
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(1.15rem, 2.8vw, 1.45rem);
	letter-spacing: -0.02em;
}

.marka-im {
	display: inline-flex;
	color: var(--tema);
	flex: none;
}

.marka-im svg {
	width: clamp(40px, 5vw, 50px);
	height: auto;
}

.marka-ad {
	white-space: nowrap;
}

.marka img {
	max-height: 48px;
	width: auto;
}

/* Gezinme */

.gezinme-liste,
.alt-liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gezinme-liste {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.gezinme-liste a {
	display: block;
	padding: 0.5rem 0.9rem;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.98rem;
	color: var(--murekkep-soluk);
	transition: color 0.18s ease, background-color 0.18s ease;
}

.gezinme-liste a:hover,
.gezinme-liste .current-menu-item > a,
.gezinme-liste .current_page_item > a {
	color: var(--murekkep);
	background: rgba(22, 50, 79, 0.08);
}

/* Mobil menü düğmesi */

.menu-dugme {
	display: none;
	background: var(--yuzey);
	border: 1px solid var(--cizgi);
	border-radius: 12px;
	padding: 0.55rem 0.7rem;
	line-height: 0;
}

.menu-im {
	display: block;
	width: 20px;
}

.menu-im i {
	display: block;
	height: 2px;
	background: var(--murekkep);
	border-radius: 2px;
	transition: transform 0.22s ease, opacity 0.22s ease;
}

.menu-im i + i {
	margin-top: 4px;
}

/* Masaüstünde menü başlığı, rastgele bağlantısı ve kadro gizli */

.gezinme-bas,
.gezinme-sansim,
.gezinme-kadro,
.menu-kapat {
	display: none;
}

/* Tam ekran mobil menü */

@media (max-width: 820px) {
	.menu-dugme {
		display: block;
	}

	.gezinme {
		position: fixed;
		inset: 0;
		z-index: 60;
		background: var(--zemin);
		display: none;
		flex-direction: column;
		padding: var(--bosluk);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.menu-acik .gezinme {
		display: flex;
		animation: msv-menu-acil 0.28s ease-out;
	}

	/*
	 * Üst şeritteki backdrop-filter kendi konumlandırma bağlamını
	 * yaratıyor; menü tam ekran yerine şeridin içine hapsoluyordu
	 * (76px). Menü açıkken şerit zaten görünmediği için bulanıklığı
	 * kapatmak görsel kayba yol açmıyor.
	 */
	.menu-acik .ust {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.menu-acik {
		overflow: hidden;
	}

	@keyframes msv-menu-acil {
		from { opacity: 0; transform: translateY(-10px); }
		to { opacity: 1; transform: none; }
	}

	/* Üst şerit: marka + kapatma */

	.gezinme-bas {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding-bottom: 1.25rem;
		border-bottom: 1px solid var(--cizgi);
	}

	.gezinme-marka {
		display: inline-flex;
		align-items: center;
		gap: 0.6rem;
		font-family: var(--display);
		font-weight: 700;
		font-size: 1.05rem;
		color: var(--murekkep);
	}

	.gezinme-marka .marka-im {
		color: var(--turuncu);
	}

	.menu-kapat {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		flex: none;
		background: var(--yuzey);
		border: 1px solid var(--cizgi);
		border-radius: 50%;
		font-size: 26px;
		line-height: 1;
		color: var(--murekkep);
	}

	.menu-kapat:hover {
		border-color: var(--turuncu);
	}

	/* Bağlantılar: büyük ve sırayla belirir */

	.gezinme-liste {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-top: 0.75rem;
	}

	.gezinme-liste li {
		border-bottom: 1px solid var(--cizgi);
	}

	.menu-acik .gezinme-liste li {
		opacity: 0;
		animation: msv-menu-satir 0.35s ease-out forwards;
	}

	.menu-acik .gezinme-liste li:nth-child(1) { animation-delay: 0.06s; }
	.menu-acik .gezinme-liste li:nth-child(2) { animation-delay: 0.12s; }
	.menu-acik .gezinme-liste li:nth-child(3) { animation-delay: 0.18s; }
	.menu-acik .gezinme-liste li:nth-child(4) { animation-delay: 0.24s; }

	@keyframes msv-menu-satir {
		from { opacity: 0; transform: translateX(-14px); }
		to { opacity: 1; transform: none; }
	}

	.gezinme-liste a {
		padding: 1.1rem 0.25rem;
		font-family: var(--display);
		font-size: 1.5rem;
		font-weight: 600;
		color: var(--murekkep);
		border-radius: 0;
	}

	.gezinme-liste a:hover,
	.gezinme-liste .current-menu-item > a,
	.gezinme-liste .current_page_item > a {
		background: transparent;
		color: var(--turuncu);
	}

	/* Rastgele masal */

	.gezinme-sansim {
		display: block;
		margin: 1.5rem 0 0;
	}

	.gezinme-sansim a {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		background: var(--sari);
		color: var(--murekkep);
		font-weight: 700;
		text-decoration: none;
		padding: 0.8rem 1.3rem;
		border-radius: 999px;
		box-shadow: 0 4px 0 rgba(22, 50, 79, 0.18);
	}

	/* Ayıcık ve robot menünün altından bakar */

	.gezinme-kadro {
		display: block;
		position: relative;
		flex: 1;
		min-height: 160px;
		margin: 0 calc(var(--bosluk) * -1) calc(var(--bosluk) * -1);
		pointer-events: none;
	}

	.gezinme-kadro .ayicik.ayicik-menu {
		position: absolute;
		left: 6%;
		bottom: -18px;
		width: clamp(96px, 26vw, 140px);
		margin: 0;
		color: var(--turuncu);
		animation: msv-zipla 5s ease-in-out infinite;
	}

	.gezinme-kadro .robot.robot-menu {
		position: absolute;
		right: 6%;
		bottom: -14px;
		width: clamp(84px, 22vw, 120px);
		color: var(--gok);
		animation: msv-sallan 5.5s ease-in-out infinite;
	}
}

/* =========================================================================
   7. Düğmeler — renkli zemin, lacivert yazı
   ====================================================================== */

.dugme {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.65rem 1.25rem;
	border: 2px solid transparent;
	border-radius: 999px;
	font-family: var(--govde);
	font-weight: 700;
	font-size: 0.96rem;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.dugme-dolu {
	background: var(--tema);
	color: var(--tema-yazi);
	box-shadow: 0 4px 0 rgba(22, 50, 79, 0.18);
}

.dugme-dolu:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 0 rgba(22, 50, 79, 0.2);
}

.dugme-dolu:active {
	transform: translateY(2px);
	box-shadow: 0 1px 0 rgba(22, 50, 79, 0.2);
}

.dugme-cizgi {
	background: transparent;
	color: var(--murekkep);
	border-color: var(--cizgi);
}

.dugme-cizgi:hover {
	border-color: var(--tema);
	background: var(--yuzey);
}

/* =========================================================================
   8. Tema çipleri — canlı renklerin sistemi
   ====================================================================== */

.cipler {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin-top: clamp(1.5rem, 4vw, 2.25rem);
}

.cip {
	--cip-renk: var(--tema);
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.6rem 1.15rem;
	background: var(--yuzey);
	border: 2px solid var(--cizgi);
	border-radius: 999px;
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(0.95rem, 2.2vw, 1.05rem);
	color: var(--murekkep);
	text-decoration: none;
	transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.cip::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--cip-renk);
	flex: none;
}

/* Çipin sonundaki masal sayısı */

.cip-sayi {
	font-family: var(--govde);
	font-size: 0.82em;
	font-weight: 700;
	color: var(--murekkep-soluk);
	background: var(--zemin);
	border-radius: 999px;
	padding: 0.05em 0.5em;
	margin-left: 0.1em;
}

.cip:hover .cip-sayi {
	background: color-mix(in srgb, var(--cip-renk) 22%, var(--yuzey));
	color: var(--murekkep);
}

/* "Tümü" çipi arşiv sayfasında ilk sırada durur ve renk yerine
   paletin tamamını taşır. */

.cipler > .cip:first-child:not([style])::before {
	background: linear-gradient(135deg, var(--pembe), var(--turuncu) 40%, var(--sari) 60%, var(--gok));
}

.cip:hover {
	border-color: var(--cip-renk);
	transform: translateY(-2px);
}

.cip-etkin {
	background: var(--cip-renk);
	border-color: var(--cip-renk);
	color: var(--murekkep);
}

.cip-etkin::before {
	background: rgba(22, 50, 79, 0.55);
}

.cip-etkin .cip-sayi {
	background: rgba(22, 50, 79, 0.16);
	color: var(--murekkep);
}

.cipler > .cip-etkin:first-child .cip-sayi {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

.cipler > .cip-etkin:first-child {
	background: var(--murekkep);
	border-color: var(--murekkep);
	color: #fff;
}

.cipler > .cip-etkin:first-child::before {
	background: linear-gradient(135deg, var(--pembe), var(--turuncu) 40%, var(--sari) 60%, var(--gok));
}

/* =========================================================================
   9. Kahraman
   ====================================================================== */

.kahraman {
	padding: clamp(2.75rem, 8vw, 5.5rem) 0 0;
}

.kahraman-ust {
	font-family: var(--govde);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--murekkep-soluk);
	margin-bottom: 0.9rem;
}

.kahraman-baslik {
	font-size: clamp(2.6rem, 8.5vw, 5rem);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.03em;
	margin-bottom: 0.45em;
	max-width: 14ch;
}

.kahraman-baslik em {
	font-style: normal;
	color: var(--vurgu);
	text-decoration: underline wavy var(--sari);
	text-decoration-thickness: 0.055em;
	text-underline-offset: 0.16em;
}

.kahraman-alt {
	font-size: clamp(1.05rem, 2.6vw, 1.28rem);
	color: var(--murekkep-soluk);
	max-width: 46ch;
	margin-bottom: 0;
}

.kahraman-alt strong {
	color: var(--murekkep);
}

/* Kararsız kalanlar için rastgele masal */

.sansim {
	margin: 1.35rem 0 0;
	font-size: 1rem;
	color: var(--murekkep-soluk);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.7rem;
}

.sansim-dugme {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 700;
	color: var(--murekkep);
	text-decoration: none;
	border-bottom: 2px solid var(--sari);
	padding-bottom: 1px;
	transition: border-color 0.18s ease, gap 0.18s ease;
}

.sansim-dugme svg {
	color: var(--turuncu);
}

.sansim-dugme:hover {
	border-color: var(--turuncu);
	gap: 0.6rem;
}

/* =========================================================================
   10. Bölümler
   ====================================================================== */

.bolum {
	padding: clamp(1.75rem, 5vw, 3rem) 0 clamp(2.5rem, 7vw, 4.5rem);
}

.bolum-acik {
	background: var(--yuzey);
	border-top: 1px solid var(--cizgi);
	padding-top: clamp(2.5rem, 7vw, 4.5rem);
}

.bolum-bas {
	margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
	max-width: 52ch;
}

.bolum-baslik {
	font-size: clamp(1.7rem, 4.5vw, 2.5rem);
	margin-bottom: 0.35em;
}

.bolum-alt {
	color: var(--murekkep-soluk);
	font-size: 1.05rem;
	margin-bottom: 0;
}

.bolum-son {
	margin-top: clamp(1.75rem, 4vw, 2.5rem);
	text-align: center;
}

/* Sayfa başlığı (arşivler) */

.sayfa-bas {
	padding: clamp(2.25rem, 6vw, 3.75rem) 0 0;
}

.sayfa-ust {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--murekkep-soluk);
	margin-bottom: 0.65rem;
}

.sayfa-ust::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--tema);
}

.sayfa-baslik {
	font-size: clamp(2.1rem, 6vw, 3.4rem);
	margin-bottom: 0.3em;
}

.sayfa-alt {
	color: var(--murekkep-soluk);
	font-size: clamp(1rem, 2.4vw, 1.15rem);
	max-width: 52ch;
	margin-bottom: 0;
}

/* =========================================================================
   11. Masal kartları
   ====================================================================== */

.izgara {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
	gap: clamp(1.1rem, 3vw, 1.75rem);
}

.izgara-bos {
	text-align: center;
	color: var(--murekkep-soluk);
	padding: 3rem 1rem 0;
	font-size: 1.1rem;
}

.kart {
	display: flex;
	flex-direction: column;
	background: var(--yuzey);
	border: 1px solid var(--cizgi);
	border-radius: var(--yuvarlak);
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.kart:hover {
	transform: translateY(-4px);
	border-color: var(--tema);
	box-shadow: var(--golge-kalkik);
}

.kart-gorsel {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--zemin);
	overflow: hidden;
}

.kart-gorsel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.kart:hover .kart-gorsel img {
	transform: scale(1.04);
}

.kart-bos {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--zemin), var(--yuzey));
}

.kart-oynat {
	position: absolute;
	left: 0.85rem;
	bottom: 0.85rem;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--tema);
	color: var(--tema-yazi);
	box-shadow: 0 4px 14px rgba(22, 50, 79, 0.3);
	transition: transform 0.2s ease;
}

.kart-oynat svg {
	margin-left: 2px;
}

.kart:hover .kart-oynat {
	transform: scale(1.1);
}

.kart-govde {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.05rem 1.15rem 1.15rem;
}

.kart-ust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.85rem;
	margin-bottom: 0.5rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--murekkep-soluk);
}

.kart-tema {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--murekkep);
}

.nokta {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--tema);
	flex: none;
}

.kart-baslik {
	font-size: clamp(1.08rem, 2.4vw, 1.22rem);
	font-weight: 600;
	line-height: 1.25;
	margin-bottom: 1rem;
	flex: 1;
}

.kart-baslik a {
	text-decoration: none;
}

.kart-baslik a:hover {
	color: var(--tema-koyu);
}

.kart-eylem {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
}

.kart-eylem .dugme {
	padding: 0.5rem 1rem;
	font-size: 0.9rem;
}

/* =========================================================================
   12. Yazı kartları (blog)
   ====================================================================== */

.yazi-izgara {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: clamp(1.5rem, 4vw, 2.5rem);
}

.yazi-kart {
	display: flex;
	flex-direction: column;
}

.yazi-gorsel {
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: var(--yuvarlak-kucuk);
	overflow: hidden;
	margin-bottom: 0.9rem;
	background: var(--zemin);
}

.yazi-gorsel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.yazi-tarih {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--murekkep-soluk);
	margin-bottom: 0.35rem;
}

.yazi-baslik {
	font-size: clamp(1.15rem, 2.6vw, 1.4rem);
	font-weight: 600;
	line-height: 1.25;
	margin-bottom: 0.5rem;
}

.yazi-baslik a {
	text-decoration: none;
}

.yazi-baslik a:hover {
	color: var(--baglanti);
}

.yazi-ozet {
	color: var(--murekkep-soluk);
	font-size: 0.98rem;
	margin-bottom: 0;
}

/* =========================================================================
   13. Masal sayfası
   ====================================================================== */

.masal-bas {
	padding: clamp(2.25rem, 6vw, 3.5rem) 0 clamp(1.5rem, 4vw, 2.25rem);
}

.masal-ust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 1.1rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--murekkep-soluk);
	margin-bottom: 0.9rem;
}

.masal-okunma {
	margin-top: 1.6rem;
	font-size: 0.92rem;
	color: var(--murekkep-soluk);
	text-align: center;
}

.masal-tema {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--murekkep);
	text-decoration: none;
	padding: 0.3rem 0.9rem 0.3rem 0.7rem;
	border-radius: 999px;
	background: #fff;
	background: color-mix(in srgb, var(--tema) 24%, var(--yuzey));
	border: 1px solid transparent;
	border-color: color-mix(in srgb, var(--tema) 45%, transparent);
}

.masal-tema:hover {
	background: color-mix(in srgb, var(--tema) 40%, var(--yuzey));
}

.masal-baslik {
	font-size: clamp(2rem, 6vw, 3.35rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	margin-bottom: 0.3em;
}

.masal-giris {
	font-size: clamp(1.05rem, 2.5vw, 1.22rem);
	color: var(--murekkep-soluk);
	margin-bottom: 0;
}

/* Oynatıcı */

.oynatici {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--yuvarlak);
	overflow: hidden;
	background: var(--murekkep);
	box-shadow: var(--golge-kalkik);
	scroll-margin-top: 90px;
}

.oynatici-gorsel {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.oynatici-dugme {
	position: absolute;
	inset: 0;
	width: 100%;
	display: grid;
	place-items: center;
	background: rgba(22, 50, 79, 0.2);
	border: 0;
	color: var(--murekkep);
	transition: background-color 0.22s ease;
}

.oynatici-dugme svg {
	width: 76px;
	height: 76px;
	padding: 20px;
	border-radius: 50%;
	background: var(--tema);
	box-shadow: 0 10px 30px rgba(22, 50, 79, 0.42);
	transition: transform 0.22s ease;
	margin-left: 4px;
	box-sizing: content-box;
}

.oynatici-dugme:hover {
	background: rgba(22, 50, 79, 0.32);
}

.oynatici-dugme:hover svg {
	transform: scale(1.08);
}

.oynatici-acik iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

/* Ayraç başlık */

.ayrac {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: clamp(2.5rem, 6vw, 3.5rem) 0 clamp(1.25rem, 3vw, 1.75rem);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--murekkep-soluk);
	scroll-margin-top: 90px;
}

.ayrac::before,
.ayrac::after {
	content: "";
	height: 3px;
	flex: 1;
	background: var(--tema);
	border-radius: 3px;
}

/* Masal metni */

.masal-metin {
	font-family: var(--nesir);
	font-size: clamp(1.14rem, 2.4vw, 1.32rem);
	line-height: 1.85;
	max-width: 62ch;
	margin-inline: auto;
}

.masal-metin p {
	margin-bottom: 1.35em;
}

/* İlk harf bir blok içinde durur. "I" gibi dar harfler de böylece
   çizgi gibi değil, harf gibi okunur. */

.masal-metin > p:first-of-type::first-letter {
	font-family: var(--display);
	font-size: 2.3em;
	font-weight: 700;
	line-height: 1;
	float: left;
	margin: 0.1em 0.28em 0.04em 0;
	padding: 0.14em 0.24em;
	border-radius: 16px;
	background: var(--zemin);
	background: color-mix(in srgb, var(--tema) 24%, var(--yuzey));
	color: var(--tema-koyu);
}

.masal-metin h2,
.masal-metin h3 {
	font-family: var(--display);
	margin-top: 1.6em;
}

.masal-metin img {
	border-radius: var(--yuvarlak-kucuk);
	margin-block: 1.6em;
}

.masal-metin a {
	color: var(--baglanti);
	text-underline-offset: 3px;
}

/* Ders kutusu */

.ders {
	margin: clamp(2.25rem, 5vw, 3rem) auto 0;
	max-width: 62ch;
	padding: clamp(1.25rem, 3.5vw, 1.85rem);
	border-radius: var(--yuvarlak);
	background: var(--yuzey);
	background: color-mix(in srgb, var(--tema) 18%, var(--yuzey));
	border: 2px solid var(--tema);
}

.ders-ust {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--govde);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--murekkep-soluk);
	margin-bottom: 0.5rem;
}

.ders-ust::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--murekkep);
}

.ders-metin {
	font-family: var(--display);
	font-size: clamp(1.15rem, 2.8vw, 1.45rem);
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: 0;
}

.youtube-not {
	max-width: 62ch;
	margin: 2rem auto 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--cizgi);
	color: var(--murekkep-soluk);
	font-size: 0.98rem;
}

.youtube-not a {
	color: var(--baglanti);
	font-weight: 600;
}

/* Önceki / sonraki */

.masal-gecis {
	margin-top: clamp(2.5rem, 6vw, 4rem);
	padding-block: clamp(1.5rem, 4vw, 2.25rem);
	border-top: 1px solid var(--cizgi);
}

.gecis-ic {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.gecis-ic {
		grid-template-columns: 1fr 1fr;
	}
}

.gecis {
	display: block;
	padding: 1rem 1.25rem;
	background: var(--yuzey);
	border: 1px solid var(--cizgi);
	border-radius: var(--yuvarlak-kucuk);
	text-decoration: none;
	transition: border-color 0.18s ease, transform 0.18s ease;
}

.gecis:hover {
	border-color: var(--tema);
	transform: translateY(-2px);
}

.gecis-sonraki {
	text-align: right;
}

.gecis-etiket {
	display: block;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--murekkep-soluk);
	margin-bottom: 0.3rem;
}

.gecis-ad {
	display: block;
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.3;
}

/* =========================================================================
   14. Tekil yazı ve sayfa
   ====================================================================== */

.yazi-bas {
	padding: clamp(2.25rem, 6vw, 3.5rem) 0 clamp(1.25rem, 3vw, 1.75rem);
}

.yazi-ust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 1rem;
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 0.8rem;
}

.yazar-kutusu {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	margin: 2.4rem 0 3.2rem;
	padding: 1.2rem 1.3rem;
	background: var(--yuzey);
	border: 1px solid var(--cizgi);
	border-radius: 14px;
}

.yazar-avatar {
	width: 68px;
	height: 68px;
	border-radius: 50%;
	flex: none;
	background: var(--zemin);
}

.yazar-ad {
	font-weight: 700;
	margin-bottom: 0.2rem;
}

.yazar-metin {
	font-size: 0.92rem;
	color: var(--murekkep-soluk);
	line-height: 1.5;
	margin: 0;
}

.yazi-yazar {
	color: var(--murekkep);
	font-weight: 600;
}

.yazi-kategori {
	color: var(--baglanti);
	text-decoration: none;
}

.yazi-tekil-baslik {
	font-size: clamp(1.9rem, 5.5vw, 3.1rem);
	letter-spacing: -0.025em;
	margin-bottom: 0;
}

.yazi-one-cikan {
	margin: 0 0 clamp(1.5rem, 4vw, 2.25rem);
}

.yazi-one-cikan img {
	border-radius: var(--yuvarlak);
	width: 100%;
}

.foto-kredi {
	margin-top: 0.6rem;
	font-size: 0.82rem;
	color: var(--murekkep-soluk);
	text-align: right;
}

.foto-kredi a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.foto-kredi a:hover {
	color: var(--murekkep);
}

.yazi-metin {
	font-size: clamp(1.06rem, 2.2vw, 1.15rem);
	line-height: 1.78;
	padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.yazi-metin h2 {
	font-size: clamp(1.45rem, 3.6vw, 1.9rem);
	margin-top: 1.7em;
}

.yazi-metin h3 {
	font-size: clamp(1.2rem, 3vw, 1.45rem);
	margin-top: 1.5em;
}

.yazi-metin ul,
.yazi-metin ol {
	padding-left: 1.3em;
	margin-bottom: 1.3em;
}

.yazi-metin li {
	margin-bottom: 0.5em;
}

.yazi-metin img {
	border-radius: var(--yuvarlak-kucuk);
	margin-block: 1.6em;
}

.yazi-metin a {
	color: var(--baglanti);
	text-underline-offset: 3px;
}

.yazi-metin blockquote {
	margin: 1.8em 0;
	padding: 0.2em 0 0.2em 1.3em;
	border-left: 4px solid var(--tema);
	font-family: var(--nesir);
	font-size: 1.1em;
	color: var(--murekkep-soluk);
}

/* =========================================================================
   15. Boş durumlar ve 404
   ====================================================================== */

.bos-durum {
	text-align: center;
	padding: clamp(2.5rem, 8vw, 5rem) 1rem;
	color: var(--murekkep-soluk);
}

.bos-durum h1,
.bos-durum h2 {
	color: var(--murekkep);
	font-size: clamp(1.5rem, 4vw, 2.2rem);
}

.bos-durum a {
	color: var(--baglanti);
	font-weight: 600;
}

.bos-durum-buyuk {
	padding-block: clamp(3rem, 10vw, 6rem);
}

.dortyuz {
	font-family: var(--display);
	font-size: clamp(4.5rem, 18vw, 9rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	background: linear-gradient(100deg, var(--pembe), var(--turuncu) 35%, var(--sari) 60%, var(--gok));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin-bottom: 0.15em;
}

.bos-eylem {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	justify-content: center;
	margin-top: 1.75rem;
}

/* =========================================================================
   16. Sayfalama
   ====================================================================== */

.pagination {
	margin-top: clamp(2.25rem, 5vw, 3.25rem);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
}

.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 0.75rem;
	border-radius: 999px;
	background: var(--yuzey);
	border: 1px solid var(--cizgi);
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.18s ease;
}

.pagination .page-numbers:hover {
	border-color: var(--tema);
}

.pagination .page-numbers.current {
	background: var(--tema);
	border-color: var(--tema);
	color: var(--tema-yazi);
}

.pagination .dots {
	border-color: transparent;
	background: transparent;
}

/* =========================================================================
   17. Arama formu
   ====================================================================== */

.ara {
	display: flex;
	gap: 0.5rem;
	max-width: 480px;
	margin-top: 1.5rem;
}

.ara-alan {
	flex: 1;
	min-width: 0;
	padding: 0.7rem 1.1rem;
	border: 2px solid var(--cizgi);
	border-radius: 999px;
	background: var(--yuzey);
}

.ara-alan:focus {
	outline: none;
	border-color: var(--tema);
}

/* =========================================================================
   18. Yorumlar
   ====================================================================== */

.comments-area {
	padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.comments-title,
.comment-reply-title {
	font-size: clamp(1.3rem, 3.2vw, 1.6rem);
}

.comment-list {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem;
}

.comment-list li {
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--cizgi);
}

.comment-form input:not([type="submit"]),
.comment-form textarea {
	width: 100%;
	padding: 0.7rem 1rem;
	border: 2px solid var(--cizgi);
	border-radius: var(--yuvarlak-kucuk);
	background: var(--yuzey);
	margin-top: 0.3rem;
}

.comment-form input:focus,
.comment-form textarea:focus {
	outline: none;
	border-color: var(--tema);
}

.comment-form .submit {
	padding: 0.7rem 1.5rem;
	border: 0;
	border-radius: 999px;
	background: var(--tema);
	color: var(--tema-yazi);
	font-weight: 700;
}

/* =========================================================================
   19. Alt bilgi
   ====================================================================== */

.alt {
	background: var(--murekkep);
	color: #cfe0f0;
	margin-top: auto;
}

.alt-ic {
	display: grid;
	gap: 2rem;
	padding-block: clamp(2.5rem, 6vw, 3.75rem);
}

@media (min-width: 620px) {
	.alt-ic {
		grid-template-columns: repeat(2, 1fr);
		align-items: start;
	}
}

@media (min-width: 960px) {
	.alt-ic {
		grid-template-columns: 1.6fr 1fr 1fr 1fr;
	}
}

.alt-sutun-baslik {
	font-size: 0.95rem;
	font-weight: 700;
	margin: 0 0 0.6rem;
	color: inherit;
	opacity: 0.75;
}

.alt-marka .marka-im {
	color: var(--turuncu);
	margin-bottom: 0.5rem;
	display: block;
}

.alt-ad {
	font-family: var(--display);
	font-weight: 700;
	font-size: 1.3rem;
	color: #fff;
	margin-bottom: 0.4rem;
}

.alt-not {
	max-width: 40ch;
	font-size: 0.98rem;
	opacity: 0.8;
	margin-bottom: 0;
}

.alt-liste {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.alt-liste a {
	color: #cfe0f0;
	text-decoration: none;
	font-weight: 600;
}

.alt-liste a:hover {
	color: var(--sari);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.alt-son {
	padding-block: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 0.9rem;
	opacity: 0.75;
}

.alt-son p {
	margin: 0;
}

/* =========================================================================
   20. Gökyüzü — yukarıda gündüz, aşağıda gece

   Sayfa yukarıdan aşağıya gün batımı gibi ilerler: kahramanda güneş,
   bulutlar ve uçan balonlar; en altta ay ve yıldızlar. Masal vakti zaten
   gündüzün geceye döndüğü an.

   Süslemeler metnin arkasında, sağ boşlukta durur; dar ekranlarda azalır.
   ====================================================================== */

.kahraman {
	position: relative;
	overflow: hidden;
}

.gokyuzu {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.kahraman > .kapsa {
	position: relative;
	z-index: 1;
}

.gok-oge {
	position: absolute;
	display: block;
}

.gok-oge svg {
	width: 100%;
	height: auto;
}

.gunes {
	color: var(--sari);
	width: clamp(62px, 8vw, 104px);
	top: 8%;
	right: 6%;
}

.bulut {
	color: #fff;
}

.bulut-1 {
	width: clamp(100px, 13vw, 172px);
	top: 32%;
	right: 21%;
	opacity: 0.95;
	animation: msv-kay 34s ease-in-out infinite;
}

.bulut-2 {
	width: clamp(64px, 7vw, 96px);
	top: 6%;
	right: 38%;
	opacity: 0.55;
	animation: msv-kay 46s ease-in-out infinite reverse;
}

.balon-1 {
	color: var(--pembe);
	width: clamp(28px, 3vw, 42px);
	top: 20%;
	right: 15%;
	animation: msv-suzul 8s ease-in-out infinite;
}

.balon-2 {
	color: var(--turkuaz);
	width: clamp(24px, 2.6vw, 36px);
	top: 54%;
	right: 30%;
	animation: msv-suzul 11s ease-in-out infinite 1.5s;
}

@keyframes msv-suzul {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-18px);
	}
}

@keyframes msv-kay {
	0%,
	100% {
		transform: translateX(0);
	}

	50% {
		transform: translateX(24px);
	}
}

/* Dar ekranlarda sadeleşir — metnin üstüne binmesin. */

@media (max-width: 1080px) {
	.bulut-1 {
		top: 4%;
		right: 3%;
		opacity: 0.8;
	}

	.gunes {
		top: 26%;
		right: 8%;
	}

	.balon-2,
	.bulut-2 {
		display: none;
	}
}

@media (max-width: 700px) {
	.gunes {
		width: 54px;
		top: 2%;
		right: 4%;
	}

	.bulut-1 {
		width: 88px;
		top: 13%;
		right: 2%;
		opacity: 0.7;
	}

	.balon-1 {
		width: 24px;
		top: 4%;
		right: 26%;
	}
}

/* Gece — alt bilginin üst şeridinde */

.alt {
	position: relative;
	overflow: hidden;
}

.gece {
	position: absolute;
	inset: 0 0 auto 0;
	height: clamp(78px, 12vw, 124px);
	pointer-events: none;
}

.alt > .kapsa {
	position: relative;
	z-index: 1;
}

.gece-oge {
	position: absolute;
	display: block;
}

.gece-oge svg {
	width: 100%;
	height: auto;
}

.ay {
	color: var(--sari);
	width: clamp(42px, 5vw, 62px);
	top: 22%;
	right: 6%;
	opacity: 0.95;
}

.yildiz {
	color: #fff;
}

.yildiz-1 {
	width: 20px;
	top: 30%;
	right: 17%;
	opacity: 0.55;
}

.yildiz-2 {
	width: 13px;
	top: 64%;
	right: 26%;
	opacity: 0.35;
}

.yildiz-3 {
	width: 16px;
	top: 22%;
	right: 38%;
	opacity: 0.4;
}

.yildiz-4 {
	width: 11px;
	top: 58%;
	right: 52%;
	opacity: 0.28;
}

.yildiz-5 {
	width: 15px;
	top: 34%;
	right: 72%;
	opacity: 0.3;
}

@media (max-width: 700px) {
	.yildiz-4,
	.yildiz-5 {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * Kadro: ayıcık ve robot
 * ---------------------------------------------------------------------- */

.ayicik,
.robot {
	display: block;
	color: var(--tema);
}

.ayicik svg,
.robot svg {
	width: 100%;
	height: auto;
	overflow: visible;
}

/* Boş sayfalarda ortada durur */

.ayicik {
	width: clamp(104px, 15vw, 148px);
	margin: 0 auto 1.75rem;
	color: var(--turuncu);
}

/* Kahramanda sağ alt köşede, el sallar */

.ayicik.ayicik-kahraman {
	position: absolute;
	right: 6%;
	bottom: 0;
	width: clamp(104px, 12vw, 168px);
	margin: 0;
	color: var(--turuncu);
	z-index: 0;
	animation: msv-zipla 5s ease-in-out infinite;
}

.ayi-kol {
	transform-box: view-box;
	transform-origin: 104px 116px;
	animation: msv-selam 1.5s ease-in-out infinite;
}

@keyframes msv-selam {
	0%,
	100% {
		transform: rotate(-8deg);
	}

	50% {
		transform: rotate(22deg);
	}
}

@keyframes msv-zipla {
	0%,
	62%,
	100% {
		transform: translateY(0);
	}

	70% {
		transform: translateY(-20px);
	}

	78% {
		transform: translateY(0);
	}

	85% {
		transform: translateY(-8px);
	}

	92% {
		transform: translateY(0);
	}
}

/* Robot — ebeveyn rehberi bölümünün üstünden sarkar */

.bolum-acik {
	position: relative;
}

.robot {
	position: absolute;
	right: 5%;
	top: clamp(-62px, -5vw, -44px);
	width: clamp(96px, 10vw, 146px);
	color: var(--gok);
	z-index: 2;
	animation: msv-sallan 5.5s ease-in-out infinite;
}

.robot-isik {
	animation: msv-yanip-son 2.4s ease-in-out infinite;
}

.robot-kus {
	transform-box: view-box;
	transform-origin: 128px 72px;
	animation: msv-kus 3.2s ease-in-out infinite;
}

@keyframes msv-sallan {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-11px);
	}
}

@keyframes msv-yanip-son {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.35;
	}
}

@keyframes msv-kus {
	0%,
	100% {
		transform: rotate(0);
	}

	50% {
		transform: rotate(-7deg);
	}
}

/* Dar ekran: kahramanda ayıcığa yer aç, robot küçülsün */

@media (max-width: 760px) {
	.kahraman {
		padding-bottom: 132px;
	}

	.ayicik.ayicik-kahraman {
		width: 86px;
		right: 4%;
	}

	.robot {
		width: 84px;
		right: 4%;
		top: -40px;
	}
}

/* =========================================================================
   21. Hareketi azalt
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.kart:hover,
	.gecis:hover,
	.cip:hover,
	.dugme-dolu:hover {
		transform: none;
	}
}