/* ==========================================================
   Oyunda Kal — alt sayfa bileşenleri
   ok.css'ten sonra yüklenir. WordPress'te bu dosyanın karşılığı
   assets/css/pages.css olacak.
   ========================================================== */

/* ---------- sayfa başlığı (page hero) ---------- */
.page-hero{padding:clamp(44px,6.5vh,84px) 0 clamp(28px,4vh,52px)}
.page-hero .crumb{
  font-size:13.5px;font-weight:600;color:var(--muted);
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;
}
.page-hero .crumb a:hover{color:var(--coral)}
.page-hero h1{
  /* 18ch sınırı "Belgelerimiz ve Raporlarımız" gibi başlıkları ikiye
     bölüyordu; sayfa başlıkları kısa olduğu için sınır kaldırıldı,
     genişliği sarmalayıcı belirler. */
  font-size:clamp(30px,4.2vw,58px);text-transform:none;max-width:none;
}
.page-hero .lead{
  margin-top:18px;font-size:clamp(16.5px,1.35vw,20px);
  color:var(--muted);max-width:60ch;
}
.page-hero.with-art .wrap{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(28px,4vw,64px);align-items:center;
}
.page-art{width:min(100%,360px);aspect-ratio:1/1;margin-inline:auto}
.page-art canvas{width:100%;height:100%;display:block}

/* ---------- iki sütun içerik ---------- */
/* İçindekiler yalnızca bir gezinme listesi; alanın %42'sini kaplıyordu.
   Sabit dar bir sütuna alınır, metin kalan genişliğe yayılır. */
.split{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:clamp(28px,4vw,68px)}
.split-aside{position:sticky;top:104px;align-self:start}
.split-aside h3{margin-bottom:14px}
.side-nav{list-style:none;display:flex;flex-direction:column;gap:2px}
.side-nav a{
  display:block;padding:10px 14px;border-radius:5px;font-weight:600;font-size:15.5px;
  border-left:3px solid transparent;
}
.side-nav a:hover{background:rgba(30,39,62,.05)}
.side-nav a[aria-current]{border-color:var(--coral);background:rgba(255,107,107,.09)}

.prose h3{margin-top:clamp(26px,3.4vh,40px)}
.prose h3:first-child{margin-top:0}
.prose p{margin-top:14px;color:var(--muted);font-size:17px}
.prose ul{margin-top:14px;padding-left:20px;color:var(--muted)}
.prose li{margin-top:8px}
.prose .box{
  margin-top:22px;background:#fff;border-radius:var(--r);
  padding:24px 26px;border-left:5px solid var(--teal);
}
.prose .box p{margin-top:8px}

/* ---------- doküman listesi ---------- */
.docs{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.docs a{
  display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:16px 18px;font-weight:700;font-size:15.5px;
  transition:border-color .16s,transform .16s;
}
.docs a:hover{border-color:var(--coral);transform:translateY(-2px)}
.docs svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2}
.docs small{display:block;font-weight:500;color:var(--muted);font-size:13px;margin-top:2px}

/* ---------- ekip ---------- */
/* auto-fill: sütun sayısı kişi sayısına göre değil, alana göre belirlenir.
   auto-fit ile 3 kişilik kurul, 5 kişilik kuruldan daha iri görünüyordu. */
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:clamp(12px,1.6vw,20px)}
.member{text-align:center}
.member .ph{
  aspect-ratio:1/1;border-radius:50%;background:rgba(30,39,62,.06);
  display:grid;place-items:center;font-size:11.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin-bottom:14px;
}
.member h4{font-size:17px;font-weight:800}
.member p{font-size:14.5px;color:var(--muted);margin-top:4px}

/* ---------- filtre çubuğu ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(22px,3vh,34px)}
.filters button{
  font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;
  border:1.5px solid var(--line);background:#fff;color:var(--muted);
  border-radius:999px;padding:9px 18px;transition:all .16s;
}
.filters button:hover{border-color:var(--navy);color:var(--navy)}
.filters button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--bej)}

/* ---------- form ---------- */
.form{background:#fff;border-radius:var(--r);padding:clamp(24px,3vw,38px)}
.field{margin-top:18px}
.field:first-child{margin-top:0}
.field label{display:block;font-size:14.5px;font-weight:700;margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:16px;color:var(--navy);
  border:1.5px solid var(--line);border-radius:5px;padding:12px 14px;
  background:var(--bej);transition:border-color .16s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--teal);outline:none;
}
.field textarea{min-height:120px;resize:vertical}
.field .hint{font-size:13px;color:var(--muted);margin-top:6px}
.check{display:flex;gap:11px;align-items:flex-start;margin-top:16px;font-size:14.5px;color:var(--muted)}
.check input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--teal)}
.form .btn{margin-top:24px;width:100%;justify-content:center}
.form-note{font-size:13px;color:var(--muted);margin-top:14px;text-align:center}

/* ---------- bağış tutarları ---------- */
.amounts{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.amounts button{
  font:inherit;font-size:18px;font-weight:900;cursor:pointer;
  border:2px solid var(--line);background:var(--bej);color:var(--navy);
  border-radius:5px;padding:16px 8px;transition:all .16s;
}
.amounts button:hover{border-color:var(--navy)}
.amounts button[aria-pressed="true"]{background:var(--coral);border-color:var(--coral)}
.freq{display:flex;gap:8px;margin-bottom:16px}
.freq button{
  flex:1;font:inherit;font-size:15px;font-weight:700;cursor:pointer;
  border:1.5px solid var(--line);background:var(--bej);color:var(--muted);
  border-radius:5px;padding:11px;transition:all .16s;
}
.freq button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--bej)}

/* ---------- adım listesi ---------- */
.steps{list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:2px}
.steps li{
  counter-increment:s;display:flex;gap:16px;padding:18px 0;
  border-top:1px solid var(--line);
}
.steps li:before{
  content:counter(s);flex:none;width:32px;height:32px;border-radius:50%;
  background:var(--coral);color:var(--navy);display:grid;place-items:center;
  font-weight:900;font-size:15px;
}
.steps h4{font-size:17px;font-weight:800}
.steps p{font-size:15.5px;color:var(--muted);margin-top:5px}

/* ---------- SSS ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:18px 0;font-weight:800;font-size:17px;
  display:flex;justify-content:space-between;gap:16px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'+';font-size:22px;font-weight:400;color:var(--coral)}
.faq details[open] summary:after{content:'–'}
.faq p{padding:0 0 20px;color:var(--muted);font-size:16px;max-width:70ch}

/* ---------- iletişim ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(12px,1.6vw,20px)}
.contact-card{background:#fff;border-radius:var(--r);padding:26px 24px;border-top:5px solid var(--teal)}
.contact-card:nth-child(2){border-color:var(--coral)}
.contact-card:nth-child(3){border-color:var(--orange)}
.contact-card h4{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:800}
.contact-card p{margin-top:12px;font-size:17px;font-weight:700}
.contact-card small{display:block;font-weight:500;color:var(--muted);font-size:14.5px;margin-top:6px}

/* ---------- etki hikâyesi ---------- */
.story{
  background:#fff;border-radius:var(--r);padding:clamp(26px,3vw,40px);
  border-left:5px solid var(--coral);
}
.story blockquote{font-size:clamp(18px,1.8vw,24px);font-weight:700;line-height:1.4;letter-spacing:-.01em}
.story cite{display:block;margin-top:16px;font-style:normal;font-size:15px;color:var(--muted);font-weight:600}

/* ---------- 404 ---------- */
.err{min-height:60vh;display:grid;place-items:center;text-align:center}
.err h1{font-size:clamp(56px,10vw,120px);text-transform:none}
.err p{margin-top:12px;font-size:18px;color:var(--muted)}
.err .btn{margin-top:26px}

@media(max-width:920px){
  .split{grid-template-columns:1fr}
  .split-aside{position:static}
  .page-hero.with-art .wrap{grid-template-columns:1fr}
  .amounts{grid-template-columns:repeat(2,1fr)}
}