/* Retrobesto — bölümlerin paylaştığı temel stiller.
   Bölüme özel her kural ilgili blocks/<blok>/style.css içindedir. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--rb-krem);
  color: var(--rb-murdum-koyu);
  font-family: var(--rb-font-govde);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: clamp(84px, 8vw, 116px);
}

h1, h2, h3, h4 { margin: 0; font-weight: 400; }
img { display: block; max-width: 100%; }
a { color: var(--rb-kiremit); text-decoration: none; }
a:hover { color: var(--rb-turuncu); }
::selection { background: var(--rb-secim); }
:focus-visible { outline: 2px solid var(--rb-turuncu); outline-offset: 2px; }

/* Blok tema sarmalayıcıları tasarıma karışmasın */
.wp-site-blocks > * { margin-block: 0; }

/* Bölüm kabukları */
.rb-wrap { max-width: var(--rb-max); margin: 0 auto; padding: var(--rb-bolum-y) var(--rb-bolum-x); }
.rb-bolum { border-bottom: var(--rb-cizgi); }
.rb-koyu { background: var(--rb-murdum); color: var(--rb-kum); border-bottom: 2px solid var(--rb-murdum-koyu); }
.rb-turuncu-zemin { background: var(--rb-turuncu); color: var(--rb-murdum); border-bottom: var(--rb-cizgi); }

/* Tipografi yardımcıları */
.rb-kicker { font-family: var(--rb-font-mono); font-size: var(--rb-fs-mono); letter-spacing: .2em; color: var(--rb-kahve); margin: 0; }
.rb-koyu .rb-kicker { color: var(--rb-bej); }
.rb-h1 { font-family: var(--rb-font-baslik); font-size: var(--rb-fs-h1); line-height: .94; letter-spacing: -.01em; color: var(--rb-murdum); text-wrap: balance; }
.rb-h2 { font-family: var(--rb-font-baslik); font-size: var(--rb-fs-h2); line-height: 1; color: var(--rb-murdum); }
.rb-koyu .rb-h2 { color: var(--rb-kum); }
.rb-h2-kucuk { font-family: var(--rb-font-baslik); font-size: var(--rb-fs-h2-kucuk); line-height: 1.02; color: var(--rb-murdum); }
.rb-h3 { font-family: var(--rb-font-baslik); font-size: var(--rb-fs-h3); color: var(--rb-murdum); }
.rb-koyu .rb-h3 { color: var(--rb-kum); }
.rb-lead { max-width: 46ch; font-size: var(--rb-fs-lead); line-height: 1.6; color: var(--rb-mor-soluk); text-wrap: pretty; }
.rb-p { max-width: 52ch; font-size: var(--rb-fs-govde); line-height: 1.65; color: var(--rb-mor-soluk); text-wrap: pretty; }
.rb-p-guclu { max-width: 52ch; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; color: var(--rb-murdum); font-weight: 500; text-wrap: pretty; }

.rb-bolum-basi { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(22px, 3vw, 36px); }
.rb-bolum-basi .rb-kicker { letter-spacing: var(--rb-ls-mono); }

/* Hikâye metni WYSIWYG alanından, hero metni düz alanlardan gelir:
   sarmalayıcının içindeki her paragraf prototipteki sınıflara denk gelmeli. */
.rb-hikaye-metin p { max-width: 52ch; font-size: var(--rb-fs-govde); line-height: 1.65; color: var(--rb-mor-soluk); text-wrap: pretty; }
.rb-hikaye-metin p:first-of-type { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; color: var(--rb-murdum); font-weight: 500; }
.rb-hikaye-metin h2 { margin-bottom: 20px; }
.rb-hero-metin p { max-width: 46ch; font-size: var(--rb-fs-lead); line-height: 1.6; color: var(--rb-mor-soluk); text-wrap: pretty; margin: clamp(18px, 2.4vw, 30px) 0 0; }

/* Butonlar */
.rb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--rb-font-baslik); font-size: 15px; padding: 13px 16px; border: 2px solid var(--rb-murdum); border-radius: var(--rb-radius); background: transparent; color: var(--rb-murdum); cursor: pointer; white-space: nowrap; }
.rb-btn:hover { background: var(--rb-murdum); color: var(--rb-kum); }
.rb-btn-dolu { background: var(--rb-turuncu); color: var(--rb-murdum); }
.rb-btn-dolu:hover { background: var(--rb-murdum); color: var(--rb-kum); }
.rb-btn-cizgi-acik { background: transparent; color: var(--rb-turuncu); border: 2px solid var(--rb-turuncu); font-family: var(--rb-font-mono); font-size: 11px; letter-spacing: var(--rb-ls-mono); padding: 10px 14px; cursor: pointer; }
.rb-btn-cizgi-acik:hover { background: var(--rb-turuncu); color: var(--rb-murdum); }

/* Ortak parçalar */
.rb-ilerleme { margin-top: 12px; height: 4px; background: var(--rb-ilerleme-zemin); }
.rb-ilerleme > span { display: block; height: 100%; background: var(--rb-turuncu); width: 0; }
.rb-dinle-not { font-family: var(--rb-font-mono); font-size: var(--rb-fs-mono); letter-spacing: .18em; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Şablon parçası sarmalayıcısı: yapışkanlık burada olmazsa başlık
   kendi yüksekliği kadar alanda sıkışır ve sayfayla birlikte kayar. */
.rb-yapiskan-ust { position: sticky; top: 0; z-index: 30; }

/* Bölümler prototipte bitişik: aralarındaki çizgi bölümün kendi kenarlığıdır.
   WordPress akış yerleşimi kardeş bloklara 24px blok aralığı verir; bölüm
   yığınında bu sıfırlanır. Editörün araya eklediği normal bloklar etkilenmez. */
.wp-block-post-content > .rb-bolum,
.wp-block-post-content > .rb-koyu,
.wp-block-post-content > .rb-turuncu-zemin { margin-block-start: 0; }