/* ============================================================
   İzmir Oyun Terapi — Tema v13
   Toprak paleti + bölüm paneli düzeni.
   En son yüklenir; style.css ve luxury.css üzerine yazar.
   ============================================================ */

:root {
  /* --- Toprak paleti --- */
  --kil:        #f3ede4;   /* ana zemin */
  --kum:        #e6d9c8;   /* panel ara tonu */
  --kum-acik:   #ede3d6;   /* yumuşak ara ton */
  --kagit:      #faf6f0;   /* kart / açık panel */
  --toprak:     #3d3630;   /* metin */
  --toprak-ac:  #6b6058;   /* ikincil metin */
  --terrakota:  #b56a45;   /* vurgu */
  --terrakota-k:#8f5134;   /* koyu vurgu */
  --adacayi:    #7d8c6f;   /* ikinci vurgu */
  --adacayi-k:  #5f6d53;
  --koyu:       #2e2a26;   /* koyu panel zemini */
  --koyu-derin: #241f1c;
  --cizgi:      #ddd0bd;   /* ince çizgi */

  /* --- Eski token'ları toprak paletine bağla --- */
  --bone: var(--kil);
  --ivory: var(--kum-acik);
  --sand: var(--kum);
  --stone: var(--cizgi);
  --paper: var(--kagit);
  --night: var(--toprak);
  --night-deep: var(--koyu);
  --smoke: var(--toprak-ac);
  --walnut: var(--terrakota);
  --walnut-soft: #c78a68;
  --sage: var(--adacayi);
  --hairline: var(--cizgi);
  --ink: var(--toprak);
  --muted: var(--toprak-ac);
  --line: var(--cizgi);
  --clay: var(--terrakota);
  --cream: var(--kum);
  --blue: var(--kum-acik);
  --wood: var(--terrakota);
  --wood2: var(--kum);
  --ice: var(--kum-acik);

  --golge-yumusak: 0 1px 2px rgba(61, 54, 48, .04), 0 12px 30px rgba(61, 54, 48, .07);
  --golge:         0 2px 4px rgba(61, 54, 48, .05), 0 24px 56px rgba(61, 54, 48, .10);
  --panel-bosluk:  clamp(3.25rem, 7vw, 6.5rem);
}

body {
  background: var(--kil);
  color: var(--toprak);
}

/* ============================================================
   1 — Tam genişlik panel sistemi
   ============================================================ */

/* Kenardan kenara zemin: taşma yaratmadan (clip-path ile kırpılır) */
.panel {
  padding: var(--panel-bosluk) clamp(1rem, 3vw, 2rem);
}
.panel > .panel-ic {
  max-width: 760px;
  margin-inline: auto;
}
.panel--genis > .panel-ic { max-width: 1180px; }

.panel--kil    { background: var(--kil); }
.panel--kum    { background: var(--kum); }
.panel--acik   { background: var(--kum-acik); }
.panel--kagit  { background: var(--kagit); }

.panel--koyu {
  background: var(--koyu);
  color: #efe6d9;
}
.panel--koyu h2, .panel--koyu h3, .panel--koyu strong { color: #fbf6ee; }
.panel--koyu p, .panel--koyu li { color: #d8cec1; }
.panel--koyu a { color: #e9b48f; }
.panel--koyu .eyebrow { color: #d69a72; }

/* Bölüm sayfalarında (.section) tam genişlik zemin — HTML değişmeden */
.panel-zemin {
  box-shadow: 0 0 0 100vmax var(--zemin-rengi, var(--kum));
  clip-path: inset(0 -100vmax);
  background: var(--zemin-rengi, var(--kum));
}
main > .section:nth-of-type(even) {
  --zemin-rengi: var(--kum-acik);
  box-shadow: 0 0 0 100vmax var(--zemin-rengi);
  clip-path: inset(0 -100vmax);
  background: var(--zemin-rengi);
}

/* ============================================================
   2 — Yazı kapağı (blog başlığı yerine)
   ============================================================ */
.article { max-width: none; padding: 0; margin: 0; }

.yazi-kapak {
  position: relative;
  padding: clamp(3.5rem, 9vw, 7.5rem) clamp(1rem, 3vw, 2rem) clamp(3rem, 7vw, 5.5rem);
  background: linear-gradient(168deg, var(--koyu) 0%, #3a332d 62%, #453b32 100%);
  color: #f6efe4;
  overflow: hidden;
}
.yazi-kapak::after {           /* dokulu ışık lekesi */
  content: "";
  position: absolute;
  right: -12%;
  top: -35%;
  width: 62%;
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%, rgba(181, 106, 69, .40), transparent 68%);
  pointer-events: none;
}
.yazi-kapak > .panel-ic { position: relative; max-width: 860px; margin-inline: auto; }
.yazi-kapak .eyebrow {
  color: #dda87f;
  letter-spacing: .16em;
  font-size: .8rem;
}
.yazi-kapak h1 {
  color: #fdf8f1;
  font-size: clamp(2.3rem, 5.4vw, 4.2rem);
  line-height: 1.08;
  margin: .85rem 0 1.25rem;
  max-width: 19ch;
  text-wrap: balance;
}
.yazi-kapak .lead {
  color: #ddd2c4;
  font-size: clamp(1.08rem, 1.7vw, 1.32rem);
  line-height: 1.62;
  max-width: 60ch;
  margin: 0;
}
.yazi-kapak .kapak-cizgi {
  width: 64px;
  height: 3px;
  background: var(--terrakota);
  border: 0;
  margin: 0 0 1.6rem;
}

/* ============================================================
   3 — Panel içi tipografi
   ============================================================ */
.panel-ic h2 {
  font-size: clamp(1.72rem, 3.1vw, 2.65rem);
  line-height: 1.16;
  margin: 0 0 1.4rem;
  max-width: 26ch;
  text-wrap: balance;
}
.panel-ic > p, .panel-ic > ul, .panel-ic > ol {
  font-size: 1.07rem;
  line-height: 1.78;
  max-width: 66ch;
}
.panel-ic > p { margin: 0 0 1.15rem; }
.panel-ic > ul, .panel-ic > ol { padding-left: 1.35rem; margin: 0 0 1.3rem; }
.panel-ic li { margin-bottom: .78rem; line-height: 1.72; }
.panel-ic li:last-child { margin-bottom: 0; }

/* Bölüm numarası: panele sessiz bir ritim verir */
.panel-ic .bolum-no {
  display: block;
  font-family: var(--font-sans);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--terrakota);
  margin-bottom: .75rem;
}
.panel--koyu .panel-ic .bolum-no { color: #d69a72; }

/* ============================================================
   4 — Bileşenler (toprak paletine uyarlandı)
   ============================================================ */
.cikarim-kutu {
  margin: 2rem 0;
  padding: 1.5rem 1.7rem;
  background: var(--kagit);
  border: 0;
  border-left: 3px solid var(--terrakota);
  border-radius: 0 14px 14px 0;
  box-shadow: var(--golge-yumusak);
}
.panel--kum .cikarim-kutu, .panel--acik .cikarim-kutu { background: var(--kagit); }
.panel--koyu .cikarim-kutu {
  background: rgba(255, 255, 255, .06);
  border-left-color: #d69a72;
  box-shadow: none;
}

.dikkat-notu {
  margin: 1.85rem 0;
  padding: 1.15rem 1.35rem;
  border: 1px dashed var(--cizgi);
  border-radius: 12px;
  background: transparent;
  font-size: .95rem;
  color: var(--toprak-ac);
}
.panel--koyu .dikkat-notu { border-color: rgba(255, 255, 255, .22); color: #cec3b6; }

.notice {
  border-left: 3px solid var(--terrakota);
  background: var(--kagit);
  padding: 1.05rem 1.25rem;
  border-radius: 0 12px 12px 0;
  box-shadow: var(--golge-yumusak);
}

/* Akordeon */
.acilir summary::after { border-color: var(--cizgi); color: var(--terrakota); }
.acilir details[open] summary::after {
  background: var(--terrakota);
  border-color: var(--terrakota);
  color: #fff;
}
.acilir summary:hover { color: var(--terrakota); }
.panel--koyu .acilir, .panel--koyu .acilir details { border-color: rgba(255, 255, 255, .16); }
.panel--koyu .acilir summary { color: #f6efe4; }
.panel--koyu .acilir summary::after { border-color: rgba(255, 255, 255, .3); color: #e9b48f; }

/* Kartlar / bağlantı listeleri */
.card {
  background: var(--kagit);
  border: 1px solid var(--cizgi);
  border-radius: 16px;
  box-shadow: var(--golge-yumusak);
}
.inline-links a {
  background: var(--kagit);
  border: 1px solid var(--cizgi);
  border-radius: 10px;
  font-weight: 600;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.inline-links a:hover {
  background: var(--kum);
  border-color: var(--terrakota);
  transform: translateY(-2px);
}

.author-box {
  background: var(--kum);
  border: 1px solid var(--cizgi);
  border-radius: 18px;
  padding: 1.35rem;
}
.panel--koyu .author-box {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .14);
}

/* Butonlar */
.button {
  border-radius: 12px;
  border: 2px solid var(--toprak);
  background: var(--toprak);
  font-weight: 700;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.button:hover { transform: translateY(-2px); box-shadow: var(--golge-yumusak); }
.button.secondary { background: transparent; color: var(--toprak); }
.button.secondary:hover { background: var(--kagit); }
.button.soft { background: var(--kum); border-color: var(--kum); color: var(--toprak); }
.panel--koyu .button { background: var(--terrakota); border-color: var(--terrakota); color: #fff; }
.panel--koyu .button.secondary { background: transparent; border-color: rgba(255,255,255,.4); color: #f6efe4; }

.cta-band {
  background: var(--koyu);
  border-radius: 20px;
  color: #efe6d9;
}
.cta-band p { color: #cec3b6; }
.cta-band .button { background: var(--terrakota); border-color: var(--terrakota); color: #fff; }

/* Başlık ve altbilgi */
.site-header {
  background: rgba(243, 237, 228, .93);
  border-bottom: 1px solid var(--cizgi);
}
.main-nav a:hover, .main-nav a[aria-current="page"] {
  background: var(--kum);
  color: var(--toprak);
}
.site-footer { background: var(--koyu-derin); }
.site-footer a:hover { color: #e9b48f; }
.footer-note { color: #b3a698; }

.eyebrow { color: var(--terrakota); letter-spacing: .14em; }
.breadcrumb { color: var(--toprak-ac); }
:focus-visible { outline: 3px solid var(--terrakota); outline-offset: 3px; }

/* Fotoğraf blokları — toprak temada daha baskın */
.page-photo img, .photo-band img {
  border-radius: 16px;
  box-shadow: var(--golge);
}
figcaption { color: var(--toprak-ac); font-size: .9rem; margin-top: .6rem; }

/* Tema kartları (Oyunu Anlamak) */
.tema-grid article {
  background: var(--kagit);
  border: 1px solid var(--cizgi);
  box-shadow: var(--golge-yumusak);
}
.tema-grid article:hover { box-shadow: var(--golge); }
.tema-grid .tema-no { color: var(--terrakota); letter-spacing: .16em; }

/* Soru keşif kartları */
.soru-kesif a {
  background: var(--kagit);
  border: 1px solid var(--cizgi);
  box-shadow: var(--golge-yumusak);
}
.soru-kesif a::after { color: var(--terrakota); }
.soru-kesif a:hover, .soru-kesif a:focus-visible {
  border-color: var(--terrakota);
  box-shadow: var(--golge);
}

/* Rehber kartları */
.rehber-grid article {
  background: var(--kagit);
  border: 1px solid var(--cizgi);
  border-radius: 16px;
  box-shadow: var(--golge-yumusak);
  transition: transform .35s cubic-bezier(.16,.84,.44,1), box-shadow .35s ease;
}
.rehber-grid article:hover { transform: translateY(-3px); box-shadow: var(--golge); }
.rehber-etiket { color: var(--terrakota); }
.filtre-dugme {
  background: var(--kagit);
  border: 1px solid var(--cizgi);
  color: var(--toprak);
  border-radius: 999px;
}
.filtre-dugme[aria-pressed="true"] {
  background: var(--toprak);
  border-color: var(--toprak);
  color: var(--kil);
}

/* Materyal listesi */
.materyal-liste article { border-top-color: var(--cizgi); }

/* ============================================================
   5 — Panel geçiş animasyonu (kaydırdıkça açılır)
   ============================================================ */
html.js .panel-ac {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.16, .84, .44, 1);
}
html.js .panel-ac.goster { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.js .panel-ac { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   6 — Mobil
   ============================================================ */
@media (max-width: 900px) {
  .main-nav { background: var(--kagit); border-color: var(--cizgi); }
}
@media (max-width: 720px) {
  :root { --panel-bosluk: 2.75rem; }
  .yazi-kapak { padding: 3rem 1rem 2.5rem; }
  .yazi-kapak h1 { font-size: 2.15rem; max-width: none; }
  .panel-ic h2 { max-width: none; font-size: 1.6rem; }
  .panel-ic > p, .panel-ic > ul, .panel-ic > ol { font-size: 1.02rem; }
}