/* =========================================================
   ZENKA DİJİTAL — TEMEL STİLLER
   ---------------------------------------------------------
   1) Sıfırlama: Tarayıcıların kendi varsayılan stillerini
      düzeltir; böylece site her tarayıcıda aynı görünür.
   2) Genel yazı stilleri: başlık, paragraf, bağlantı...
   3) Yardımcı sınıflar: .kapsayici, .ekran-okuyucu...
   Bu dosya degiskenler.css'ten SONRA yüklenmelidir.
   ========================================================= */


/* ---------- 1) SIFIRLAMA ---------- */

/* Genişlik hesabına kenarlık ve iç boşluk dahil olsun.
   (Bir kutuya 300px dediğimizde gerçekten 300px olur.) */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Varsayılan dış boşlukları kaldır; boşlukları biz yöneteceğiz */
* {
  margin: 0;
}

html {
  /* Telefon yan çevrildiğinde yazıların kendiliğinden büyümesini engeller */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Sayfa içi bağlantılarda (#bolum) yumuşak kaydırma */
  scroll-behavior: smooth;
  /* Üstte sabit menü olacağı için, sayfa içi bağlantıya
     gidildiğinde başlık menünün altında kalmasın */
  scroll-padding-top: 5rem;
}

body {
  min-height: 100vh;
  font-family: var(--font-metin);
  font-size: var(--boyut-md);
  line-height: var(--satir-normal);
  color: var(--renk-metin);
  background-color: var(--renk-arkaplan);
  /* Yazıların ekranda daha pürüzsüz görünmesi için */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Tema değişince renkler aniden değil, yumuşakça geçsin */
  transition: background-color var(--gecis-normal), color var(--gecis-normal);
}

/* Görseller taşmasın, satır içi boşluk bırakmasın */
img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Form öğeleri sayfanın yazı tipini kullansın */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

/* "hidden" özelliği verilen öğe, başka bir stil ne derse desin gizlensin */
[hidden] {
  display: none !important;
}

/* Uzun kelimeler (ör. uzun bir web adresi) kutudan taşmasın */
p,
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}


/* ---------- 2) GENEL YAZI STİLLERİ ---------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-baslik);
  font-weight: 700;
  line-height: var(--satir-dar);
  letter-spacing: -0.02em;      /* Büyük başlıklar biraz sıkı daha şık durur */
  color: var(--renk-metin);
  text-wrap: balance;           /* Başlık satırlarını dengeli böler (destekleyen tarayıcılarda) */
}

h1 { font-size: var(--boyut-3xl); font-weight: 800; }
h2 { font-size: var(--boyut-2xl); }
h3 { font-size: var(--boyut-xl); }
h4 { font-size: var(--boyut-lg); }

p {
  text-wrap: pretty;            /* Paragraf sonunda tek kelime kalmasını azaltır */
}

a {
  color: var(--renk-vurgu);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--gecis-hizli);
}

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

strong, b {
  font-weight: 600;
}

/* Satır içi kod: `ornek` */
code,
kbd,
pre {
  font-family: var(--font-kod);
  font-size: 0.9em;
}

:not(pre) > code {
  padding: 0.15em 0.4em;
  border-radius: 6px;
  background-color: var(--renk-yuzey-2);
}

/* Kod bloğu */
pre {
  overflow-x: auto;             /* Uzun kod satırı yatayda kaydırılabilir */
  padding: var(--bosluk-5);
  border-radius: var(--kose-orta);
  background-color: var(--renk-yuzey-2);
  line-height: 1.6;
}

hr {
  border: 0;
  border-top: 1px solid var(--renk-kenarlik);
}

/* Fareyle metin seçildiğinde marka renginde görünsün */
::selection {
  background-color: var(--renk-vurgu);
  color: var(--renk-vurgu-uzerinde);
}


/* ---------- 3) ERİŞİLEBİLİRLİK ---------- */

/* Klavyeyle (Tab tuşuyla) gezinirken odaklanılan öğe
   belirgin bir çerçeveyle gösterilir. Fareyle tıklayınca çıkmaz. */
:focus-visible {
  outline: 3px solid var(--renk-vurgu);
  outline-offset: 3px;
  border-radius: 4px;
}

/* "İçeriğe atla" bağlantısı: normalde gizli, Tab'a basınca görünür.
   Klavye kullanıcıları her sayfada menüyü tek tek geçmek zorunda kalmaz. */
.icerige-atla {
  position: absolute;
  top: var(--bosluk-3);
  left: var(--bosluk-3);
  z-index: 1000;
  padding: var(--bosluk-2) var(--bosluk-4);
  border-radius: var(--kose-kucuk);
  background-color: var(--renk-vurgu);
  color: var(--renk-vurgu-uzerinde);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--gecis-hizli);
}

.icerige-atla:focus {
  transform: translateY(0);
  color: var(--renk-vurgu-uzerinde);
}

/* Ekranda görünmez ama ekran okuyucular okur.
   Ör. sadece simgeden oluşan bir düğmeye açıklama eklemek için. */
.ekran-okuyucu {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Hareket hassasiyeti olan ziyaretçiler, bilgisayarlarında
   "animasyonları azalt" seçeneğini açtıysa animasyonları kapatırız. */
@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;
  }
}


/* ---------- 4) YARDIMCI SINIFLAR ---------- */

/* İçeriği ortalar ve en fazla belirli genişlikte tutar.
   Neredeyse her bölümün içinde kullanacağız. */
.kapsayici {
  width: 100%;
  max-width: var(--genislik-icerik);
  margin-inline: auto;           /* Sağ ve sol boşluğu eşit: ortala */
  padding-inline: var(--kenar-boslugu);
}

/* Okuma genişliğinde dar kapsayıcı (yazı detay sayfası için) */
.kapsayici--dar {
  max-width: calc(var(--genislik-okuma) + 2 * var(--kenar-boslugu));
}

/* Sayfa bölümleri arasında standart dikey boşluk */
.bolum {
  padding-block: var(--bosluk-8);
}

@media (min-width: 1024px) {
  .bolum {
    padding-block: var(--bosluk-9);
  }
}