/*
Theme Name: SadeOku
Theme URI: https://example.com/sadeoku
Author: SadeOku
Author URI: https://example.com
Description: Beyaz, sade, büyük puntolu, AdSense uyumlu, yaşlı ve geniş kitleye uygun WordPress blog teması. Öne çıkan görsel yazının en başında yer alır. Reklam alanları (header, içerik arası, kenar çubuğu, alt bilgi) widget alanları olarak hazırdır.
Version: 1.0.0
Requires at least: 5.9
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sadeoku
Tags: blog, one-column, two-columns, custom-menu, featured-images, translation-ready, accessibility-ready

SadeOku, kullanıcıların yaşça büyük ve okuma zorluğu yaşayabilecek ziyaretçilere
hitap eden siteler için tasarlanmıştır. Yüksek kontrast, büyük yazı tipleri ve
sade beyaz arkaplan kullanır.
*/

/* =========================================================
   0) DEĞİŞKENLER (CSS Custom Properties)
   ========================================================= */
:root {
  --renk-arkaplan: #ffffff;
  --renk-metin: #1a1a1a;
  --renk-baslik: #101010;
  --renk-vurgu: #0b5fff;
  --renk-vurgu-koyu: #0846c4;
  --renk-cizgi: #e2e2e2;
  --renk-kutu-arka: #f7f7f7;
  --renk-yardimci: #4b4b4b;

  --font-aile: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;

  /* Büyük punto tabanı: yaşlı kitle için okunabilirlik önceliklidir */
  --font-taban: 20px;
  --satir-yuksekligi: 1.8;
  --icerik-genislik: 800px;
}

/* Erişilebilirlik: kullanıcı A+ / A- düğmesiyle bu ölçeği değiştirir (bkz. accessibility.js) */
html {
  font-size: var(--font-taban);
  -webkit-text-size-adjust: 100%;
}

* {
  box-sizing: border-box;
}

body {
  background: var(--renk-arkaplan);
  color: var(--renk-metin);
  font-family: var(--font-aile);
  font-size: 1rem;
  line-height: var(--satir-yuksekligi);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--renk-vurgu);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover,
a:focus {
  color: var(--renk-vurgu-koyu);
}

/* Klavye kullanan ziyaretçiler için görünür odak halkası */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--renk-vurgu);
  outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--renk-baslik);
  line-height: 1.3;
  font-weight: 700;
  margin: 1.4em 0 0.6em;
}

h1 { font-size: 2.4rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.3rem; }

p { margin: 0 0 1.3em; }

/* Erişilebilirlik: içeriğe atla bağlantısı */
.atla-baglantisi {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--renk-baslik);
  color: #fff;
  padding: 14px 20px;
  z-index: 999999;
  font-size: 1.1rem;
  border-radius: 0 0 6px 0;
}

.atla-baglantisi:focus {
  left: 0;
  top: 0;
}

/* =========================================================
   1) DÜZEN / KAPSAYICILAR
   ========================================================= */
.sade-kapsayici {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.sade-govde {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding: 40px 0 60px;
}

@media (min-width: 900px) {
  .sade-govde.kenar-cubuklu {
    grid-template-columns: minmax(0, var(--icerik-genislik)) 300px;
  }
}

.icerik-alani { min-width: 0; }

/* =========================================================
   2) ÜST BİLGİ (HEADER)
   ========================================================= */
.site-ustbilgi {
  border-bottom: 1px solid var(--renk-cizgi);
  background: var(--renk-arkaplan);
  padding: 22px 0;
}

.ustbilgi-ic {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-logo-baslik {
  display: flex;
  align-items: center;
  gap: 14px;
}

.site-logo-baslik img {
  max-height: 64px;
  width: auto;
}

.site-basligi {
  font-size: 1.9rem;
  font-weight: 800;
  margin: 0;
}

.site-basligi a {
  color: var(--renk-baslik);
  text-decoration: none;
}

.site-slogan {
  font-size: 1.05rem;
  color: var(--renk-yardimci);
  margin: 4px 0 0;
}

/* Yazı boyutu ayarlayıcı (A- A A+) */
.punto-ayarlayici {
  display: flex;
  align-items: center;
  gap: 6px;
}

.punto-ayarlayici button {
  font-family: var(--font-aile);
  background: var(--renk-kutu-arka);
  border: 2px solid var(--renk-cizgi);
  color: var(--renk-baslik);
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 700;
  cursor: pointer;
  min-width: 48px;
  min-height: 48px;
}

.punto-ayarlayici button:hover {
  background: var(--renk-cizgi);
}

.punto-ayarlayici span {
  font-size: 0.95rem;
  color: var(--renk-yardimci);
  margin-right: 4px;
}

/* Ana menü */
.ana-menu {
  width: 100%;
}

.ana-menu ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 18px 0 0;
  padding: 0;
}

.ana-menu a {
  display: inline-block;
  padding: 12px 16px;
  color: var(--renk-baslik);
  text-decoration: none;
  font-size: 1.15rem;
  font-weight: 600;
  border-radius: 8px;
}

.ana-menu a:hover,
.ana-menu a:focus {
  background: var(--renk-kutu-arka);
  color: var(--renk-vurgu-koyu);
}

/* =========================================================
   3) REKLAM ALANLARI (AdSense widget bölgeleri)
   ========================================================= */
.reklam-alani {
  max-width: 1100px;
  margin: 28px auto;
  padding: 0 24px;
  text-align: center;
}

.reklam-alani .widget {
  overflow: hidden;
}

.reklam-etiket {
  display: block;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9a9a9a;
  margin-bottom: 8px;
}

.reklam-alani--icerik-ustu,
.reklam-alani--icerik-alti {
  max-width: var(--icerik-genislik);
}

/* =========================================================
   4) YAZI KARTLARI (ANA SAYFA / ARŞİV LİSTESİ)
   ========================================================= */
.yazi-listesi {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.yazi-karti {
  border-bottom: 1px solid var(--renk-cizgi);
  padding-bottom: 36px;
}

.yazi-karti:last-child {
  border-bottom: none;
}

.yazi-karti-gorsel {
  margin: 0 0 18px;
  border-radius: 10px;
  overflow: hidden;
}

.yazi-karti-gorsel img {
  width: 100%;
  height: auto;
}

.yazi-karti-baslik {
  font-size: 1.7rem;
  margin: 0 0 10px;
}

.yazi-karti-baslik a {
  color: var(--renk-baslik);
  text-decoration: none;
}

.yazi-karti-baslik a:hover {
  color: var(--renk-vurgu);
  text-decoration: underline;
}

.yazi-meta {
  font-size: 1rem;
  color: var(--renk-yardimci);
  margin: 0 0 14px;
}

.yazi-ozet {
  font-size: 1.1rem;
}

.devamini-oku {
  display: inline-block;
  margin-top: 8px;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 10px 18px;
  border: 2px solid var(--renk-vurgu);
  border-radius: 8px;
  text-decoration: none;
}

.devamini-oku:hover {
  background: var(--renk-vurgu);
  color: #fff;
}

/* =========================================================
   5) TEKİL YAZI SAYFASI
   ========================================================= */
.tekil-yazi-basligi {
  font-size: 2.3rem;
  margin: 20px 0 10px;
}

.tekil-yazi-gorsel {
  margin: 0 0 24px;
  border-radius: 10px;
  overflow: hidden;
}

.tekil-yazi-gorsel img {
  width: 100%;
  height: auto;
}

.tekil-yazi-icerik {
  font-size: 1.2rem;
}

.tekil-yazi-icerik p {
  margin-bottom: 1.5em;
}

.tekil-yazi-icerik h2 { font-size: 1.8rem; }
.tekil-yazi-icerik h3 { font-size: 1.5rem; }

.tekil-yazi-icerik blockquote {
  border-left: 5px solid var(--renk-vurgu);
  margin: 1.6em 0;
  padding: 6px 22px;
  background: var(--renk-kutu-arka);
  font-size: 1.15rem;
  color: var(--renk-yardimci);
}

.etiketler {
  margin-top: 30px;
  font-size: 1.05rem;
}

.etiketler a {
  display: inline-block;
  background: var(--renk-kutu-arka);
  padding: 6px 12px;
  border-radius: 20px;
  margin: 4px 4px 0 0;
  text-decoration: none;
  color: var(--renk-baslik);
}

/* =========================================================
   6) KENAR ÇUBUĞU (SIDEBAR)
   ========================================================= */
.kenar-cubugu .widget {
  margin-bottom: 32px;
  padding: 22px;
  background: var(--renk-kutu-arka);
  border-radius: 10px;
}

.kenar-cubugu .widget-title {
  font-size: 1.3rem;
  margin: 0 0 14px;
}

.kenar-cubugu ul {
  padding-left: 20px;
  font-size: 1.05rem;
}

.kenar-cubugu li {
  margin-bottom: 10px;
}

/* =========================================================
   7) ARAMA FORMU
   ========================================================= */
.arama-formu {
  display: flex;
  gap: 8px;
}

.arama-formu input[type="search"] {
  flex: 1;
  font-size: 1.1rem;
  padding: 12px 14px;
  border: 2px solid var(--renk-cizgi);
  border-radius: 8px;
  font-family: var(--font-aile);
}

.arama-formu button {
  font-size: 1.1rem;
  font-weight: 700;
  padding: 12px 18px;
  border: none;
  background: var(--renk-vurgu);
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
}

.arama-formu button:hover {
  background: var(--renk-vurgu-koyu);
}

/* =========================================================
   8) SAYFALAMA
   ========================================================= */
.sade-sayfalama {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 40px;
  font-size: 1.1rem;
}

.sade-sayfalama a,
.sade-sayfalama span {
  padding: 10px 16px;
  border: 2px solid var(--renk-cizgi);
  border-radius: 8px;
  text-decoration: none;
  color: var(--renk-baslik);
}

.sade-sayfalama .current {
  background: var(--renk-vurgu);
  border-color: var(--renk-vurgu);
  color: #fff;
  font-weight: 700;
}

.sade-sayfalama a:hover {
  background: var(--renk-kutu-arka);
}

/* =========================================================
   9) YORUMLAR
   ========================================================= */
.yorumlar-alani {
  margin-top: 50px;
  border-top: 1px solid var(--renk-cizgi);
  padding-top: 30px;
}

.yorum-listesi {
  list-style: none;
  padding: 0;
}

.yorum-listesi .comment {
  margin-bottom: 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--renk-cizgi);
}

.yorum-yazari {
  font-weight: 700;
  font-size: 1.1rem;
}

.yorum-tarihi {
  color: var(--renk-yardimci);
  font-size: 0.95rem;
  margin-left: 8px;
}

.yorum-formu input,
.yorum-formu textarea {
  width: 100%;
  font-size: 1.1rem;
  padding: 12px;
  border: 2px solid var(--renk-cizgi);
  border-radius: 8px;
  font-family: var(--font-aile);
  margin-bottom: 14px;
}

.yorum-formu button {
  font-size: 1.1rem;
  font-weight: 700;
  padding: 12px 20px;
  background: var(--renk-vurgu);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

/* =========================================================
   10) ALT BİLGİ (FOOTER)
   ========================================================= */
.site-altbilgi {
  border-top: 1px solid var(--renk-cizgi);
  background: var(--renk-kutu-arka);
  padding: 40px 0;
  margin-top: 40px;
}

.altbilgi-widgetlar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin-bottom: 20px;
}

@media (min-width: 700px) {
  .altbilgi-widgetlar {
    grid-template-columns: repeat(3, 1fr);
  }
}

.altbilgi-telifhakki {
  text-align: center;
  font-size: 1rem;
  color: var(--renk-yardimci);
  padding-top: 20px;
  border-top: 1px solid var(--renk-cizgi);
}

/* =========================================================
   11) MOBİL UYUM
   ========================================================= */
@media (max-width: 600px) {
  :root {
    --font-taban: 19px;
  }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.7rem; }

  .tekil-yazi-basligi { font-size: 1.9rem; }

  .ustbilgi-ic {
    flex-direction: column;
    align-items: flex-start;
  }
}