/* ============================================================
   ÇEKİRDEK — her temada aynı. Değiştirme, sadece :root'u ez.
   Sıra: cekirdek.css ÖNCE, tema.css SONRA.
   ============================================================ */

/* --- 1. TOKEN SÖZLEŞMESİ ------------------------------------
   Buradaki her değişken tema.css'te YENİDEN TANIMLANMALI.
   Buradaki değerler sadece "tanımsız kalmasın" içindir; nötrdür
   ve kasten sıkıcıdır. Temanız bunları kullanıyorsa tema yoktur.
   ------------------------------------------------------------ */
:root {
  /* renk */
  --bg:          #ffffff;   /* ana zemin */
  --bg-elev:     #f5f5f4;   /* yükseltilmiş yüzey */
  --ink:         #1a1a1a;   /* ana metin */
  --ink-muted:   #6b6b6b;   /* ikincil metin */
  --line:        #e0e0e0;   /* ayraç */
  --accent:      #333333;   /* eylem rengi — SADECE eylemde */
  --accent-ink:  #ffffff;   /* aksan üzerindeki metin */

  /* tipografi */
  --font-display: Georgia, serif;
  --font-body:    system-ui, sans-serif;
  --font-util:    ui-monospace, monospace;

  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.50vw, 1.50rem);
  --step-2:  clamp(1.56rem, 1.35rem + 1.05vw, 2.25rem);
  --step-3:  clamp(1.95rem, 1.55rem + 2.00vw, 3.38rem);
  --step-4:  clamp(2.44rem, 1.70rem + 3.70vw, 5.06rem);
  --step-5:  clamp(3.05rem, 1.75rem + 6.50vw, 7.59rem);

  --leading-sikisik: 1.05;
  --leading-baslik:  1.15;
  --leading-govde:   1.6;
  --measure: 68ch;          /* okuma genişliği */

  /* uzam */
  --space-3xs: 0.25rem;  --space-2xs: 0.5rem;   --space-xs: 0.75rem;
  --space-s:   1rem;     --space-m:   1.5rem;   --space-l:  2.5rem;
  --space-xl:  4rem;     --space-2xl: 6rem;     --space-3xl: 9rem;

  --kenar: clamp(1rem, 5vw, 5rem);   /* sayfa yan boşluğu */
  --kolon: 1200px;                   /* içerik tavanı */
  --radius: 0px;

  /* hareket */
  --dur-anlik:  120ms;
  --dur-hizli:  180ms;
  --dur-orta:   260ms;
  --dur-yavas:  420ms;

  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* --- 2. RESET ----------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* `hidden` ÖZNİTELİĞİ HER ZAMAN KAZANIR.
   Tarayıcının kendi taslak sayfası `[hidden]{display:none}` diyor ama
   bu özgüllüğü sıfır bir kural: bileşene `display:grid` yazan HERHANGİ
   bir satır onu eziyor ve `hidden` sessizce işlevsiz kalıyor.
   Ölçülen hâli: filo'nun 3B bölümünde dört araç künyesinden üçü
   `hidden` olduğu hâlde görünüyordu ve bölüm 900 px yerine 2557 px
   yer kaplıyordu. HTML spesifikasyonunun önerdiği taslak da zaten
   `!important` kullanıyor. */
[hidden] { display: none !important; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-govde);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4 { overflow-wrap: break-word; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--leading-baslik); text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }

:where(:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* --- 3. DÜZEN YARDIMCILARI ---------------------------------- */
.kabuk   { width: min(100% - var(--kenar) * 2, var(--kolon)); margin-inline: auto; }
.olcu    { max-width: var(--measure); }
.yigin > * + * { margin-block-start: var(--akis, var(--space-s)); }
.bolum   { padding-block: var(--space-2xl); }

/* --- 4. MİKRO ETKİLEŞİM ------------------------------------- */
.basilabilir { transition: transform var(--dur-hizli) var(--ease-out); }
.basilabilir:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .kaldir { transition: transform var(--dur-hizli) var(--ease-out); }
  .kaldir:hover { transform: translateY(-2px); }
}

/* --- 5. SCROLL DESENLERİ ------------------------------------
   Kural: animation-duration YOK (scroll saat), fill-mode: both ZORUNLU,
   animation-timeline kısayoldan SONRA.
   ------------------------------------------------------------ */

/* 5.1 Açılma — S1 varsayılanı */
@keyframes ss-reveal {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
.ss-reveal {
  animation: ss-reveal both linear;
  animation-timeline: view();
  animation-range: entry 10% cover 35%;
}

/* 5.2 Yandan açılma */
@keyframes ss-reveal-yan {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: none; }
}
.ss-reveal-yan {
  animation: ss-reveal-yan both linear;
  animation-timeline: view();
  animation-range: entry 5% cover 30%;
}

/* 5.3 Stagger — kapsayıcıdaki çocuklara sırayla */
.ss-sira > * {
  animation: ss-reveal both linear;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}

/* 5.4 Okuma ilerlemesi — genişlik değil scaleX */
@keyframes ss-buyut { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ss-progress {
  transform-origin: left;
  animation: ss-buyut both linear;
  animation-timeline: scroll(root block);
}

/* 5.5 Parallax — sadece transform */
@keyframes ss-parallax { from { transform: translateY(8%); } to { transform: translateY(-8%); } }
.ss-parallax {
  animation: ss-parallax both linear;
  animation-timeline: view();
  animation-range: cover;
}

/* 5.6 Sticky sahne — S2 */
.ss-sahne { height: var(--sahne, 300vh); position: relative; }
.ss-pin   { position: sticky; top: 0; height: 100svh; overflow: clip;
            display: grid; place-items: center; }

/* 5.7 Kart yığını */
.ss-yigin-kart { position: sticky; top: calc(8vh + var(--i, 0) * 14px); }

/* 5.8 Yatay bant — G4 */
.ss-bant-sahne { height: var(--sahne, 400vh); }
.ss-bant-pin   { position: sticky; top: 0; height: 100svh; overflow: clip;
                 display: flex; align-items: center; }
@keyframes ss-kaydir { to { transform: translateX(calc(-100% + 100vw)); } }
.ss-bant {
  display: flex; gap: var(--space-m); padding-inline: var(--kenar);
  animation: ss-kaydir both linear;
  animation-timeline: scroll(nearest block);
}

/* 5.9 Clip-path açılma — görsel için */
@keyframes ss-perde { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.ss-perde {
  animation: ss-perde both linear;
  animation-timeline: view();
  animation-range: entry 5% cover 40%;
}

/* --- 6. ZARİF DÜŞÜŞ ----------------------------------------- */
/* Destek yoksa: animasyon yok, öğe TAM GÖRÜNÜR. Yarım efekt gösterme. */
@supports not (animation-timeline: view()) {
  .ss-reveal, .ss-reveal-yan, .ss-sira > *,
  .ss-parallax, .ss-perde {
    animation: none; opacity: 1; transform: none; clip-path: none;
  }
  .ss-progress { transform: scaleX(0); }
}

/* --- 7. AZALTILMIŞ HAREKET ---------------------------------- */
/* Sıfır animasyon değil: opaklık kalır, yer değiştirme gider.
   Öğelerin opacity:0'da TAKILI KALMAMASI kritik. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .ss-reveal, .ss-reveal-yan, .ss-sira > *,
  .ss-parallax, .ss-perde, .ss-bant {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .ss-sahne, .ss-bant-sahne { height: auto !important; }
  .ss-pin, .ss-bant-pin { position: static !important; height: auto !important; }
  .ss-bant { flex-wrap: wrap; }
  .ss-yigin-kart { position: static !important; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}