/*
Theme Name: Masal Diyarı
Theme URI: https://example.com/masal-diyari
Author: Claude
Author URI: https://claude.ai
Description: Çocuklar için hazırlanmış masal ve hikâye sitelerine özel, sıcak ve oyunbaz bir WordPress teması. Sabahın aydınlığından yatmadan önceki gece gökyüzüne uzanan bir "gün içinde hikâye" akışıyla tasarlanmıştır. Standart Yazılar ve Kategoriler ile çalışır; isteğe bağlı bir Yaş Grubu taksonomisi içerir.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: masal-diyari
Tags: blog, custom-post-type, custom-menu, featured-images, theme-options, translation-ready

Masal Diyarı, çocuklara yönelik masal/hikâye sitelerinde kullanılmak üzere
tasarlanmıştır. Tasarım dili: sıcak krem tonlu bir "gündüz" başlangıcı,
renkli kitap sırtı kartları ve yıldızlı bir "gece" alt bilgi ile biter —
tıpkı bir masal okuma ritüeli gibi.
*/

/* =========================================================
   0. DESIGN TOKENS
   ========================================================= */
:root {
  /* -- Renkler -- */
  --paper: #FFF6E9;       /* sayfa zemini: sıcak krem kâğıt */
  --paper-2: #FFEFDA;     /* ikinci zemin tonu */
  --ink: #33253F;         /* ana metin: koyu erguvan-mürekkep */
  --ink-soft: #5B4B68;    /* ikincil metin */
  --coral: #FF6F51;       /* birincil vurgu: gün batımı mercanı */
  --coral-dark: #E85A3D;
  --meadow: #3E8E63;      /* ikincil vurgu: çayır yeşili */
  --meadow-dark: #2F6E4C;
  --sky: #3E93C4;         /* üçüncül vurgu: gökyüzü mavisi */
  --gold: #F0A93E;        /* küçük vurgular: yıldız sarısı */
  --plum: #8B5FBF;        /* dördüncül vurgu: erik moru */
  --night: #1B1533;       /* alt bilgi zemini: gece laciverti */
  --night-2: #2A2150;     /* gece ikinci ton */
  --star: #FFE9B3;        /* yıldız/ay rengi */
  --line: rgba(51, 37, 63, 0.12);
  --shadow: 0 10px 30px rgba(51, 37, 63, 0.12);
  --shadow-soft: 0 4px 14px rgba(51, 37, 63, 0.08);

  /* -- Tipografi -- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Nunito", -apple-system, "Segoe UI", sans-serif;

  /* -- Ölçek & boşluk -- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --container: 1160px;
  --gap: clamp(1.25rem, 2.5vw, 2.5rem);
}

/* =========================================================
   1. TEMEL SIFIRLAMA
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--coral-dark); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--coral); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 0.5em;
  font-weight: 600;
}

h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-optical-sizing: auto; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }

p { max-width: 68ch; }
.container p { max-width: 68ch; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

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

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75em 1.25em;
  z-index: 1000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* =========================================================
   2. ÜST BİLGİ / GEZİNME  — "kitap sırtı" sekmeleri
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 246, 233, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 2px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.9rem 0;
}

.site-branding { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.site-branding:hover { color: inherit; }

.site-branding .brand-mark {
  width: 42px; height: 42px; flex-shrink: 0;
}

.site-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.site-title a { color: inherit; text-decoration: none; }

.site-description {
  display: block;
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-weight: 600;
}

.primary-nav ul {
  list-style: none;
  display: flex;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
}

.primary-nav a {
  display: inline-block;
  padding: 0.55em 1.1em;
  border-radius: 999px 999px 6px 6px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  position: relative;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.primary-nav a:hover,
.primary-nav a:focus-visible {
  background: var(--coral);
  color: #fff;
  transform: translateY(-2px);
}
.primary-nav .current-menu-item > a {
  background: var(--ink);
  color: var(--paper);
}

.menu-toggle {
  display: none;
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.5em 0.75em;
  font-size: 1.3rem;
  cursor: pointer;
}

/* =========================================================
   3. BUTONLAR
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.85em 1.6em;
  border-radius: 999px;
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn-primary {
  background: var(--coral);
  color: #fff;
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--coral-dark);
  color: #fff;
  transform: translateY(-3px) rotate(-0.5deg);
  box-shadow: var(--shadow);
}
.btn-ghost {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

/* =========================================================
   4. KAHRAMAN (HERO) — gündüz
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(4rem, 9vw, 7rem);
  text-align: center;
  background:
    radial-gradient(ellipse at 20% -10%, rgba(240, 169, 62, 0.35), transparent 55%),
    radial-gradient(ellipse at 85% 0%, rgba(62, 147, 196, 0.25), transparent 50%);
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--meadow-dark);
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
}

.hero h1 { max-width: 16ch; margin-inline: auto; }
.hero h1 em {
  font-style: italic;
  color: var(--coral-dark);
  position: relative;
}

.hero-lede {
  max-width: 52ch;
  margin: 1.1rem auto 2rem;
  font-size: 1.15rem;
  color: var(--ink-soft);
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.hero-hills {
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  width: 100%;
  line-height: 0;
  z-index: 0;
}

.hero-inner { position: relative; z-index: 1; }

@keyframes book-open {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.hero-inner > * { animation: book-open 0.7s cubic-bezier(.2,.7,.3,1) both; }
.hero-inner > *:nth-child(2) { animation-delay: 0.08s; }
.hero-inner > *:nth-child(3) { animation-delay: 0.16s; }
.hero-inner > *:nth-child(4) { animation-delay: 0.24s; }

/* =========================================================
   5. YAŞ / KATEGORİ ROZETLERİ — "ayraç" sekmeleri
   ========================================================= */
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  list-style: none;
  margin: 0 0 3rem;
  padding: 0;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.5em 1.05em;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--line);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.2s ease, transform 0.15s ease;
}
.pill:hover { border-color: currentColor; transform: translateY(-2px); color: var(--coral-dark); }
.pill .dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.pill.c-coral  { color: var(--coral-dark); }
.pill.c-meadow { color: var(--meadow-dark); }
.pill.c-sky    { color: var(--sky); }
.pill.c-gold   { color: #B7791F; }
.pill.c-plum   { color: var(--plum); }

/* =========================================================
   6. BÖLÜM BAŞLIKLARI
   ========================================================= */
.section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.section-head p { margin: 0.35rem 0 0; color: var(--ink-soft); }
.section-link { font-weight: 800; white-space: nowrap; }

/* =========================================================
   7. MASAL KARTLARI — "kitap sırtlı" kartlar
   ========================================================= */
.story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--gap);
}

.story-card {
  position: relative;
  background: #fff;
  border-radius: 4px var(--radius-lg) var(--radius-sm) var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--line);
  transition: transform 0.22s cubic-bezier(.2,.7,.3,1), box-shadow 0.22s ease;
  display: flex;
  flex-direction: column;
}
.story-card:hover, .story-card:focus-within {
  transform: translateY(-6px) rotate(-0.4deg);
  box-shadow: var(--shadow);
}

.story-card::before {
  /* kitap sırtı şeridi */
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 9px;
  background: var(--spine, var(--coral));
}

.story-card .story-thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-2);
  margin-left: 9px;
}
.story-card .story-thumb img { width: 100%; height: 100%; object-fit: cover; }
.story-card .story-thumb .placeholder-emoji {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem;
  background: linear-gradient(135deg, var(--paper-2), var(--paper));
}

.story-body {
  padding: 1.1rem 1.3rem 1.4rem;
  margin-left: 9px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.story-meta {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: none;
  color: var(--ink-soft);
}
.story-meta span { display: inline-flex; align-items: center; gap: 0.3em; }

.story-card h3 { margin: 0; font-size: 1.25rem; }
.story-card h3 a { text-decoration: none; color: var(--ink); }
.story-card h3 a::after { content: ""; position: absolute; inset: 0; }
.story-card h3 a:hover { color: var(--coral-dark); }

.story-excerpt { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }

.story-card .story-cta {
  margin-top: auto;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--coral-dark);
}

/* renk varyasyonları — kategoriye göre sırt rengi (gövdede satır içi style ile de ayarlanabilir) */
.spine-meadow { --spine: var(--meadow); }
.spine-sky    { --spine: var(--sky); }
.spine-gold   { --spine: var(--gold); }
.spine-plum   { --spine: var(--plum); }
.spine-coral  { --spine: var(--coral); }

/* =========================================================
   8. ÖNE ÇIKAN MASAL ŞERİDİ
   ========================================================= */
.featured-band {
  background: var(--paper-2);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.featured-band .story-thumb {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 5 / 4;
}
.featured-band .story-thumb img { width: 100%; height: 100%; object-fit: cover; }
.featured-band .kicker {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--meadow-dark);
  margin-bottom: 0.4rem;
  display: block;
}

/* =========================================================
   9. NEDEN BİZ — özellik kartları (aynı köşe yuvarlağı değil, kasıtlı çeşitlilik)
   ========================================================= */
.feature-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--gap);
}
.feature {
  padding: 1.6rem;
  background: #fff;
  border: 1px solid var(--line);
}
.feature:nth-child(1) { border-radius: var(--radius-lg) var(--radius-sm) var(--radius-sm) var(--radius-sm); border-top: 4px solid var(--coral); }
.feature:nth-child(2) { border-radius: var(--radius-sm) var(--radius-lg) var(--radius-sm) var(--radius-sm); border-top: 4px solid var(--meadow); }
.feature:nth-child(3) { border-radius: var(--radius-sm) var(--radius-sm) var(--radius-lg) var(--radius-sm); border-top: 4px solid var(--sky); }
.feature:nth-child(4) { border-radius: var(--radius-sm) var(--radius-sm) var(--radius-sm) var(--radius-lg); border-top: 4px solid var(--gold); }
.feature .feature-icon { font-size: 1.8rem; display: block; margin-bottom: 0.6rem; }
.feature h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.feature p { margin: 0; color: var(--ink-soft); font-size: 0.92rem; }

/* =========================================================
   10. TEK MASAL SAYFASI
   ========================================================= */
.story-hero {
  background: var(--paper-2);
  padding: clamp(2.5rem, 6vw, 4rem) 0 3rem;
}
.story-hero .breadcrumb {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}
.story-hero .breadcrumb a { color: var(--ink-soft); }
.story-hero h1 { max-width: 22ch; text-align: left; margin: 0 0 0.6rem; }
.story-hero .story-meta { font-size: 0.85rem; margin-bottom: 1rem; }

.reading-card {
  max-width: 760px;
  margin: -2.5rem auto 0;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(1.75rem, 5vw, 3.25rem);
  position: relative;
}
.reading-card .story-cover {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 1.75rem;
}

.story-content {
  font-size: 1.15rem;
  line-height: 1.85;
  color: var(--ink);
}
.story-content p { max-width: none; }
.story-content p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 3.4rem;
  float: left;
  line-height: 0.8;
  padding: 0.1em 0.12em 0 0;
  color: var(--coral-dark);
}

.moral-box {
  margin-top: 2.5rem;
  padding: 1.5rem 1.75rem;
  background: var(--paper);
  border-left: 5px solid var(--meadow);
  border-radius: var(--radius-sm);
}
.moral-box h2 {
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.moral-box p { margin: 0; color: var(--ink-soft); }

.story-tags {
  margin-top: 2rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.story-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  max-width: 760px;
  margin: 2.5rem auto 0;
}
.story-nav a {
  display: block;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--ink);
}
.story-nav a:hover { border-color: var(--coral); }
.story-nav .dir { font-size: 0.78rem; font-weight: 800; color: var(--ink-soft); display: block; margin-bottom: 0.2rem; }
.story-nav .next { text-align: right; }

/* =========================================================
   11. KENAR ÇUBUĞU & DAR SAYFALAR
   ========================================================= */
.content-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--gap);
  align-items: start;
}
.widget-area .widget {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.4rem;
  margin-bottom: 1.5rem;
}
.widget-area .widget h2,
.widget-area .widget .widget-title {
  font-size: 1rem;
  text-transform: none;
  margin-bottom: 0.8rem;
}
.widget-area ul { list-style: none; padding: 0; margin: 0; }
.widget-area li { padding: 0.35rem 0; border-bottom: 1px dashed var(--line); }
.widget-area li:last-child { border-bottom: none; }

.page-content { padding: clamp(2rem, 5vw, 3.5rem) 0; }
.page-header { text-align: center; margin-bottom: 2rem; }

/* =========================================================
   12. SAYFALAMA / ARAMA
   ========================================================= */
.pagination {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}
.pagination a, .pagination span {
  padding: 0.5em 0.9em;
  border-radius: 999px;
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.9rem;
}
.pagination .current { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pagination a:hover { border-color: var(--coral); color: var(--coral-dark); }

.search-form {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.6rem;
}
.search-form input[type="search"] {
  flex: 1;
  padding: 0.7em 1em;
  border-radius: 999px;
  border: 2px solid var(--line);
  font-family: var(--font-body);
  font-size: 0.95rem;
}
.search-form button {
  border-radius: 999px;
  border: none;
  background: var(--ink);
  color: var(--paper);
  padding: 0.7em 1.2em;
  font-weight: 800;
  cursor: pointer;
}

/* =========================================================
   13. ALT BİLGİ — gece gökyüzü
   ========================================================= */
.site-footer {
  position: relative;
  overflow: hidden;
  margin-top: clamp(3rem, 6vw, 5rem);
  background: radial-gradient(ellipse at 80% 0%, var(--night-2), var(--night) 60%);
  color: #E7E1F5;
  padding: clamp(3rem, 7vw, 5rem) 0 2rem;
}

.footer-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.9;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%, var(--star), transparent),
    radial-gradient(1.5px 1.5px at 30% 55%, var(--star), transparent),
    radial-gradient(2px 2px at 50% 15%, var(--star), transparent),
    radial-gradient(1.5px 1.5px at 68% 40%, var(--star), transparent),
    radial-gradient(1.5px 1.5px at 82% 70%, var(--star), transparent),
    radial-gradient(2px 2px at 92% 25%, var(--star), transparent),
    radial-gradient(1.5px 1.5px at 15% 80%, var(--star), transparent),
    radial-gradient(1.5px 1.5px at 45% 85%, var(--star), transparent);
  background-repeat: no-repeat;
}

.footer-inner { position: relative; z-index: 1; }

.footer-top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: var(--gap);
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(231, 225, 245, 0.15);
}

.footer-brand h2 {
  color: var(--star);
  font-size: 1.4rem;
  margin-bottom: 0.6rem;
}
.footer-brand p { color: rgba(231, 225, 245, 0.75); font-size: 0.95rem; }

.footer-col h3 {
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--star);
  margin-bottom: 0.9rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0.55rem; }
.footer-col a {
  color: rgba(231, 225, 245, 0.8);
  text-decoration: none;
  font-size: 0.92rem;
}
.footer-col a:hover { color: var(--star); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 1.5rem;
  font-size: 0.82rem;
  color: rgba(231, 225, 245, 0.6);
}
.footer-moon { display: flex; align-items: center; gap: 0.5rem; }

/* =========================================================
   14. DUYARLILIK (RESPONSIVE)
   ========================================================= */
@media (max-width: 900px) {
  .featured-band { grid-template-columns: 1fr; }
  .content-layout { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .menu-toggle { display: inline-flex; align-items: center; gap: 0.4em; }
  .primary-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--paper);
    border-bottom: 2px solid var(--line);
    padding: 1rem 1.25rem 1.5rem;
    display: none;
  }
  .primary-nav.is-open { display: block; }
  .primary-nav ul { flex-direction: column; }
  .story-nav { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }
}