/* ==========================================================================
   EB Temel — ortak temel stiller (prototip/css/site.css "Temel" → "Rozet, kategori, etiket" bölümleri).
   Yalnızca theme.json'un ürettiği değişkenleri kullanır (--wp--preset--*, --wp--custom--*); eşleme:
   docs/tema-spesifikasyonu.md §2b.2.
   ========================================================================== */

/* Şablon parçaları (header, main, footer) arasında çekirdeğin blockGap boşluğu olmasın. */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* ---------- Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: light;
  /* Menüden bölüme gidişte sabit header payı: tek kaynak custom.kaydirma.pay (Tur 14a; hedeflerde scroll-margin yok,
     iki pay toplanmasın). */
  scroll-padding-top: calc(var(--wp--custom--kaydirma--pay) + var(--wp-admin--admin-bar--height, 0px));
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
html.kaydirma-kilitli { overflow: hidden; }
body {
  margin: 0;
  background: var(--wp--preset--color--zemin);
  color: var(--wp--preset--color--metin-2);
  font-family: var(--wp--preset--font-family--govde);
  font-size: var(--wp--preset--font-size--m);
  word-spacing: var(--wp--custom--word-spacing--govde); /* Jakarta'nın dar kelime boşluğu için */
  line-height: var(--wp--custom--line-height--govde);
  font-optical-sizing: auto;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--wp--custom--duration--orta) var(--wp--custom--ease--standart), color var(--wp--custom--duration--orta) var(--wp--custom--ease--standart);
}
h1, h2, h3, h4 {
  margin: 0;
  color: var(--wp--preset--color--metin);
  font-family: var(--wp--preset--font-family--baslik);
  font-weight: var(--wp--custom--font-weight--baslik);
  letter-spacing: var(--wp--custom--letter-spacing--baslik);
  line-height: var(--wp--custom--line-height--baslik);
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
img, svg, picture { display: block; max-width: 100%; }
a { color: var(--wp--preset--color--baglanti); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--wp--preset--color--baglanti-hover); }
button { font: inherit; color: inherit; }
code { font-size: 0.92em; padding: 0.1em 0.35em; border-radius: var(--wp--custom--radius--s); background: var(--wp--preset--color--yuzey-2); color: var(--wp--preset--color--metin); }
::selection { background: var(--wp--preset--color--bant); color: var(--wp--preset--color--metin); }

:focus-visible {
  outline: 3px solid var(--wp--custom--renk--odak);
  outline-offset: 3px;
  border-radius: var(--wp--custom--radius--s);
}

/* ---------- Yardımcılar ---------- */
.kapsayici {
  width: 100%;
  max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--wp--custom--layout--kenar));
  margin-inline: auto;
  padding-inline: var(--wp--custom--layout--kenar);
}
.gorunmez {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.atla {
  position: fixed; left: 1rem; top: 1rem; z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--wp--preset--color--ters-zemin); color: var(--wp--preset--color--ters-metin);
  border-radius: var(--wp--custom--radius--m);
  transform: translateY(-200%);
}
.atla:focus { transform: none; color: var(--wp--preset--color--ters-metin); }
.ikon { width: 1.15em; height: 1.15em; flex: none; }

/* ---------- Marka logoları (Tur 14c; inc/marka-ikonlari.php, §2d.6) ----------
   SVG logolar paketteki marka renginde (X koyu modda beyaz). Raster logoların yüksekliği --marka-logo-boy; LinkedIn
   açık modda mavi "in" düz beyaz zemin üstünde, koyu modda beyaz "in" (zemin yok; boşluk aynı, yerleşim kaymaz). */
.ikon--marka-whatsapp { color: var(--wp--custom--marka--whatsapp); }
.ikon--marka-x { color: var(--wp--custom--marka--x); }
.ikon--marka-telegram { color: var(--wp--custom--marka--telegram); }
.marka-logo { --marka-logo-boy: 1.25rem; display: inline-flex; flex: none; align-items: center; justify-content: center; line-height: 0; }
.marka-logo__gorsel { width: auto; height: var(--marka-logo-boy); }
.marka-logo__gorsel--koyu { display: none; }
:root[data-tema="koyu"] .marka-logo__gorsel--acik { display: none; }
:root[data-tema="koyu"] .marka-logo__gorsel--koyu { display: block; }
.marka-logo--linkedin { padding: 0.2rem; border-radius: 0.25rem; background: var(--wp--custom--marka--logo-zemin); }
:root[data-tema="koyu"] .marka-logo--linkedin { background: transparent; }

/* ---------- Düğmeler & bağlantılar ---------- */
.dugme {
  --dugme-yukseklik: 3rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: var(--dugme-yukseklik);
  padding: 0 1.35em;
  border: 0; border-radius: var(--wp--custom--radius--tam);
  font-family: var(--wp--preset--font-family--govde); font-weight: 600; font-size: var(--wp--preset--font-size--s);
  line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform var(--wp--custom--duration--kisa) var(--wp--custom--ease--standart), box-shadow var(--wp--custom--duration--orta) var(--wp--custom--ease--cikis), background-position var(--wp--custom--duration--orta) var(--wp--custom--ease--cikis);
}
.dugme .ikon { transition: transform var(--wp--custom--duration--orta) var(--wp--custom--ease--cikis); }
.dugme:hover .ikon { transform: translateX(3px); }
.dugme:active { transform: scale(0.98); }
.dugme--ana {
  /* Parlak gradyan ZEMİN, metin koyu lacivert (≥ 5.3:1 ölçüldü) */
  background: var(--wp--preset--gradient--ana);
  background-size: 160% 100%;
  color: var(--wp--custom--renk--dugme-metin);
  box-shadow: 0 8px 20px -10px rgb(0 158 255 / 0.55);
}
.dugme--ana:hover { color: var(--wp--custom--renk--dugme-metin); background-position: 100% 0; box-shadow: 0 14px 26px -12px rgb(0 158 255 / 0.65); }
.dugme--cam {
  color: #fff;
  background: rgb(255 255 255 / 0.1);
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.65);
}
.dugme--cam:hover { color: #fff; background: rgb(255 255 255 / 0.2); }
.dugme--kucuk { --dugme-yukseklik: 2.5rem; padding: 0 1.1em; }

.ikon-dugme {
  display: inline-grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 0; border-radius: var(--wp--custom--radius--tam);
  background: transparent; color: inherit; cursor: pointer;
  transition: background-color var(--wp--custom--duration--kisa) var(--wp--custom--ease--standart);
}
.ikon-dugme:hover { background: color-mix(in srgb, currentColor 10%, transparent); }

.metin-baglanti {
  display: inline-flex; align-items: center; gap: 0.4em;
  color: var(--wp--preset--color--baglanti);
  font-weight: 600; text-decoration: none;
}
.metin-baglanti:hover { text-decoration: underline; }
.metin-baglanti .ikon { transition: transform var(--wp--custom--duration--orta) var(--wp--custom--ease--cikis); }
.metin-baglanti:hover .ikon { transform: translateX(4px); }

/* ---------- Rozet, kategori, etiket ---------- */
.rozet {
  display: inline-flex; align-items: center;
  padding: 0.2em 0.6em;
  border-radius: var(--wp--custom--radius--tam);
  background: var(--wp--preset--color--yuzey-2);
  color: var(--wp--preset--color--metin-2);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.3;
}
.rozet--canli { background: var(--wp--preset--color--bant); color: var(--wp--preset--color--metin); }
.rozet--canli::before {
  content: ""; width: 0.45em; height: 0.45em; margin-right: 0.4em; border-radius: 50%;
  background: var(--wp--custom--renk--su-2);
}
.rozet--ornek { background: var(--wp--preset--color--bant-2); color: var(--wp--preset--color--metin); }

.kategori {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-size: var(--wp--preset--font-size--xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--wp--preset--color--baglanti);
}
.kategori__nokta { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--wp--custom--renk--su-2); }
.kategori--mor { color: var(--wp--preset--color--kategori-mor-metin); }
.kategori--mor .kategori__nokta { background: var(--wp--custom--renk--kategori-mor); }
[data-tema="koyu"] .kategori--mor .kategori__nokta { background: var(--wp--preset--color--kategori-mor-metin); }
.kategori--turuncu { color: var(--wp--preset--color--kategori-turuncu-metin); }
.kategori--turuncu .kategori__nokta { background: var(--wp--custom--renk--kategori-turuncu); }

.etiketler { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; }
.etiket {
  padding: 0.3em 0.75em;
  border: 1px solid var(--wp--preset--color--cizgi);
  border-radius: var(--wp--custom--radius--tam);
  background: var(--wp--preset--color--yuzey-2);
  color: var(--wp--preset--color--metin-2);
  font-size: var(--wp--preset--font-size--xs); font-weight: 500; line-height: 1.35;
}
.etiketler--kucuk .etiket { font-size: 0.75rem; }

/* ---------- Bölüm iskeleti (anasayfa bölümleri; Rehber de kullanır) ---------- */
.bolum { padding-block: var(--wp--preset--spacing--80); }
.bolum--bant { background: var(--wp--preset--color--bant); }
.bolum--bant-2 { background: var(--wp--preset--color--bant-2); }
/* Aynı zeminli ardışık bölümlerde üst boşluk ikiye katlanmasın. */
.bolum:not(.bolum--bant, .bolum--bant-2) + .bolum:not(.bolum--bant, .bolum--bant-2) { padding-top: 0; }
.bolum__bas { margin-bottom: var(--wp--preset--spacing--50); }
.bolum__bas--yan { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; }
.ust-baslik {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin-bottom: var(--wp--preset--spacing--30);
  color: var(--wp--preset--color--vurgu-metin);
  font-size: var(--wp--preset--font-size--xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}
.ust-baslik::before { content: ""; width: 1.6rem; height: 3px; border-radius: 3px; background: var(--wp--preset--gradient--vurgu); }
.bolum__baslik { font-size: var(--wp--preset--font-size--xxl); }
.ikon-kutu {
  display: inline-grid; place-items: center; flex: none;
  width: 2.5rem; height: 2.5rem; border-radius: var(--wp--custom--radius--m);
  background: var(--wp--preset--gradient--ana); color: var(--wp--custom--renk--dugme-metin);
}

/* ---------- Kısaltılabilir metin / satır sınırı: yalnızca JS varken (metin HTML'de tamdır) ---------- */
html.js .satir-sinir { display: -webkit-box; -webkit-line-clamp: var(--satir, 3); -webkit-box-orient: vertical; overflow: hidden; }
html.js .kisalt__metin { display: -webkit-box; -webkit-line-clamp: var(--satir, 3); -webkit-box-orient: vertical; overflow: hidden; }
html.js .kisalt.acik .kisalt__metin { display: block; overflow: visible; }
.kisalt__dugme { margin-top: 0.35rem; padding: 0; border: 0; background: none; cursor: pointer; font-size: var(--wp--preset--font-size--s); }

/* ---------- Görseller: bulanık yer tutucu (eb_gorsel(); görsel inene kadar --yt zemini görünür, JS gerekmez) ---------- */
.gorsel { position: relative; overflow: hidden; background-color: var(--wp--preset--color--yuzey-2); }
.gorsel::before {
  content: ""; position: absolute; inset: 0;
  background: var(--yt, none) center / cover no-repeat;
  filter: blur(18px); transform: scale(1.12);
}
.gorsel img { position: relative; width: 100%; height: 100%; object-fit: cover; }
/* Portre yedeği (eb_portre_yedegi(); Tur 14e): portre boşken aynı kutuda baş harf dairesi. Dış kutunun boyutu çağıran
   sınıftan; daire (harf öğesi) kutuyu doldurur. Ters zemin + ters metin (seçili anahtar dilimiyle aynı çift). */
.portre-yedek { display: block; }
.portre-yedek__harf {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: var(--wp--preset--color--ters-zemin); color: var(--wp--preset--color--ters-metin);
  font-family: var(--wp--preset--font-family--baslik); font-weight: var(--wp--custom--font-weight--baslik);
  line-height: 1; letter-spacing: 0.02em; user-select: none;
}
/* Koyu temada parlak ekran görüntüleri göz almasın */
[data-tema="koyu"] .proje-kart__gorsel img, [data-tema="koyu"] .yazi-kart__gorsel img { filter: brightness(0.88); }

/* Anasayfa gövde metni: prototipte site.css body metin-2'dir (yazi.css'teki .yazi-sayfa kuralıyla aynı gerekçe,
   Tur 6b'de yalnızca yazı/sayfa şablonlarına uygulanmıştı; Tur 7'de anasayfaya da uygulanır, § küçük düzeltme c). */
body.home #icerik { color: var(--wp--preset--color--metin-2); }