/* nCoach tanitim — sahne katmani (mockup iskeleti).
   Sayfa: shared.css|site.css -> mock.css -> theme.css -> chrome.css

   NEDEN AYRI BIR KATMAN: on bes sahne yuvasi x iki dil = otuz cizim. Her biri
   sayfanin kendi <style> blogunda yazilirsa ayni agac/kart/asama kelime
   dagarcigi otuz kez tekrarlanir ve sayfa stilleri paylasilan tabakayla
   carpismaya devam eder. Burada duran sey SOZDIZIM ve ZAMANLAMA; sayfada
   duran sey cizimin geometrisi ve kendi dilindeki metni.

   BES KURAL — hepsi bu dosyada olculebilir bicimde bagli:

   1) DURGUN KARE = SON KARE. Hicbir sinif kendi basina hareket etmez; butun
      animasyonlar ".mock.is-playing" altinda yasar. Yani CSS'in varsayilan
      hali hikayenin BITTIGI andir. Hareket azaltmada, betik calismadigi
      yerde ve tarayici sahneyi hic oynatmadiginda gorunen sey bos kutu degil,
      tamamlanmis anlatidir. Sahne yazan kisi once son kareyi cizer, sonra
      "nereden geldigini" sinifla soyler.

   2) SURE TEK KAYNAKTAN. Her gecikme --mock-step ve --mock-hold jetonlarindan
      hesaplanir; sahnelerde ham ms/s yazilmaz. Sitenin butun temposu bu iki
      satirdan yavaslatilir. Bugunku deger bilerek yavas: bir vurus 520ms,
      vuruslar arasi 1600ms bekleme — goz kenardan bakinca "hareketli" degil
      "yavasca degisen" gorur.

   3) RENK JETONDAN. Sahne ham renk yazmaz. Asagidaki takma adlar yalnizca
      check-contrast.js'in HER zemine karsi olctugu --t-* jetonlarina baglanir.
      Metin siniflari rengi "color" ile bildirir ve fill:currentColor ile boyar
      — boylece sahne yazilari da kontrast taramasinin ICINDE kalir, SVG diye
      olcum disina dusmez. Cizgi/dolgu ise stroke/fill ile dogrudan jetondan
      gelir. --t-cyan-ink bilerek YOK: o jeton dar bir zemin listesinde
      olculuyor, sahneler her zeminde duruyor.

   4) OPAKLIK YOK. Bu dosya "opacity" ozelligini hic bildirmez. Solma gerektigi
      yerde SVG'nin kendi fill-opacity/stroke-opacity ozellikleri kullanilir ve
      metin tasiyan siniflar her zaman TAM boyada dinlenir; yalnizca girerken
      0'dan 1'e gelir. Boylece "solmus metin" diye bir dinlenme hali olusmaz ve
      check-contrast'in solma listesi bu katman yuzunden buyumez.

   5) DOKUNMA HEDEFI ACMAZ. Sahneler tiklanabilir degildir, baglanti ve dugme
      tasimaz; erisilebilirlik karsiligi tek bir role="img" + aria-label'dir.
      Ic SVG aria-hidden="true" kalir ki ekran okuyucu cizim parcalarini tek
      tek okumasin.

   OLCU: scripts/check-mock.js. */

:root{
  /* --- zamanlama --- */
  --mock-step:520ms;   /* tek vurus: bir seyin degistigi sure */
  --mock-hold:1600ms;  /* vuruslar arasi bekleme: goz okusun diye */
  --mock-rest:1200ms;  /* dongu sonunda durgun bekleme */
  --mock-ease:cubic-bezier(.22,.61,.36,1);

  /* --- renk takma adlari (yalniz her zeminde olculen jetonlar) --- */
  --mock-ink:var(--t-ink);            /* sahnedeki ana yazi */
  --mock-ink-soft:var(--t-ink-soft);  /* ikincil yazi, alt yazi */
  --mock-line:var(--t-ink-dim);       /* ANLAM tasiyan cizgi/kenar (>=3:1) */
  --mock-line-soft:var(--t-line-strong); /* yalnizca dekoratif ince cizgi */
  --mock-fill:var(--t-panel);         /* dugum/jeton dolgusu */
  --mock-surface:var(--t-surface);    /* kart dolgusu */
  --mock-accent:var(--t-accent);      /* tek vurgu rengi */
  --mock-warn:var(--t-warn);          /* uyari/riskli hal (hata degil) */

  /* --- yerlesim --- */
  /* Sahnenin ust boslugu sayfanin blok ritminden turer (theme.css --t-flow);
     cizim ile metin ayni iki basamagi kullansin diye ikinci bir sayi yok. */
  --mock-flow:var(--t-flow);
  --mock-flow-lg:var(--t-flow-lg);
  --mock-w-lg:min(560px,100%);
  --mock-w-sm:min(420px,100%);
}

/* ---------- kapsayici ---------- */
/* Kutu ONCEDEN ayrilir: ic SVG'nin viewBox'i kendi en-boy oranini tasidigi
   icin yukleme sirasinda kayma olmaz. Oran tek kaynaktan (viewBox) gelir;
   burada ikinci bir aspect-ratio yazilmaz ki iki sayi ayrisamasin. */
.mock{
  margin:0;
  width:100%;
  max-width:var(--mock-w-lg);
  container-type:inline-size; /* sahnenin ic olculeri ekrana degil kendi kutusuna bakar */
  font-family:inherit;
  --mock-b:0;    /* elemanin vurusu   — .mock-b1..9 ile degisir */
  --mock-sub:0;  /* vurus ici sira    — .mock-s1..3 ile degisir */
  --mock-dx:0;   /* .mock-move: geldigi yatay fark (kullanici birimi) */
  --mock-dy:0;   /* .mock-move: geldigi dikey fark */
}
.mock-sm{max-width:var(--mock-w-sm)}
.mock-full{max-width:var(--mock-w-lg);margin-inline:auto}

/* Ust bosluklar satir-ici style yerine iki jetondan. */
.mock-flow{margin-top:var(--mock-flow)}
.mock-flow-lg{margin-top:var(--mock-flow-lg)}

.mock-stage{display:block;position:relative}
.mock-stage>svg{display:block;width:100%;height:auto}

.mock-caption{
  margin:10px 0 0;font-size:13.5px;line-height:1.45;
  color:var(--mock-ink-soft);
}

/* ---------- cizim sozlugu ---------- */
/* SVG icinde "px" kullanici birimidir; butun sahneler viewBox genisligini 320
   olarak yazar, boylece yazi olculeri site boyunca ayni buyuklukte okunur. */
.mock-node{fill:var(--mock-fill);stroke:var(--mock-line);stroke-width:1.5}
.mock-card{fill:var(--mock-surface);stroke:var(--mock-line);stroke-width:1.5}
.mock-edge{fill:none;stroke:var(--mock-line);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mock-hair{fill:none;stroke:var(--mock-line-soft);stroke-width:1}
.mock-on{fill:var(--mock-accent);stroke:var(--mock-accent)}
.mock-on-edge{fill:none;stroke:var(--mock-accent);stroke-width:1.5;stroke-linecap:round}
.mock-risk{fill:var(--mock-warn);stroke:var(--mock-warn)}
.mock-risk-edge{fill:none;stroke:var(--mock-warn);stroke-width:1.5;stroke-linecap:round}
/* Iz: bir seyin gectigi yer. Dinlenme hali bilerek soluk — metin degil. */
.mock-trace{fill:var(--mock-line-soft);stroke:none;fill-opacity:.45}

/* Metin: renk "color"dan gelir, boya fill:currentColor ile — kontrast bekcisi
   sahne yazilarini da bu yuzden gorur. */
.mock-text{color:var(--mock-ink);fill:currentColor;font-weight:500;font-size:14px}
.mock-text-soft{color:var(--mock-ink-soft);fill:currentColor;font-weight:400;font-size:12px}
.mock-text-accent{color:var(--mock-accent);fill:currentColor;font-weight:600;font-size:14px}
.mock-text-warn{color:var(--mock-warn);fill:currentColor;font-weight:500;font-size:12px}
.mock-t-sm{font-size:12px}
.mock-t-md{font-size:14px}
.mock-t-lg{font-size:18px}
.mock-t-xl{font-size:26px}

/* ---------- vurus yerlesimi ---------- */
.mock-b1{--mock-b:1}
.mock-b2{--mock-b:2}
.mock-b3{--mock-b:3}
.mock-b4{--mock-b:4}
.mock-b5{--mock-b:5}
.mock-b6{--mock-b:6}
.mock-b7{--mock-b:7}
.mock-b8{--mock-b:8}
.mock-b9{--mock-b:9}
.mock-s1{--mock-sub:1}
.mock-s2{--mock-sub:2}
.mock-s3{--mock-sub:3}

/* ---------- dinlenme hali = son kare ---------- */
/* .mock-out tasiyan oge hikayenin sonunda YOK; durgun karede de yok. */
.mock-out{fill-opacity:0;stroke-opacity:0}
/* .mock-draw tasiyan yol sonunda TAM cizilmis. pathLength="1" ozelligi
   zorunlu: uzunluk geometriden bagimsiz olsun diye. */
.mock-draw{stroke-dasharray:1;stroke-dashoffset:0}

/* ---------- hareket ---------- */
/* Tek gecikme formulu; her sahne ayni ritmi konusur. */
.mock.is-playing .mock-in,
.mock.is-playing .mock-rise,
.mock.is-playing .mock-out,
.mock.is-playing .mock-draw,
.mock.is-playing .mock-grow,
.mock.is-playing .mock-move{
  animation-duration:var(--mock-step);
  animation-timing-function:var(--mock-ease);
  animation-fill-mode:both;
  animation-delay:calc(
    (var(--mock-step) + var(--mock-hold)) * var(--mock-b)
    + var(--mock-step) * .5 * var(--mock-sub)
  );
  transform-box:fill-box;
  transform-origin:center;
}
.mock.is-playing .mock-in{animation-name:mock-in}
.mock.is-playing .mock-rise{animation-name:mock-rise}
.mock.is-playing .mock-out{animation-name:mock-out}
.mock.is-playing .mock-draw{animation-name:mock-draw;animation-duration:calc(var(--mock-step) * 1.6)}
.mock.is-playing .mock-grow{animation-name:mock-grow;transform-origin:bottom}
.mock.is-playing .mock-move{animation-name:mock-move}

@keyframes mock-in{
  from{fill-opacity:0;stroke-opacity:0}
  to{fill-opacity:1;stroke-opacity:1}
}
@keyframes mock-rise{
  from{fill-opacity:0;stroke-opacity:0;transform:translateY(6px)}
  to{fill-opacity:1;stroke-opacity:1;transform:none}
}
@keyframes mock-out{
  from{fill-opacity:1;stroke-opacity:1}
  to{fill-opacity:0;stroke-opacity:0}
}
@keyframes mock-draw{
  from{stroke-dashoffset:1}
  to{stroke-dashoffset:0}
}
@keyframes mock-grow{
  from{transform:scaleY(0)}
  to{transform:scaleY(1)}
}
@keyframes mock-move{
  from{transform:translate(calc(var(--mock-dx) * -1px), calc(var(--mock-dy) * -1px))}
  to{transform:none}
}

/* Hareket azaltma TEK blok: sahne sistemi icin baska yerde tekrarlanmaz.
   Varsayilan hal zaten son kare oldugu icin burasi yalnizca "oynuyorsa
   durdur" der; bos kutu birakmaz. */
@media (prefers-reduced-motion:reduce){
  .mock,
  .mock *{animation:none !important;transition:none !important}
}

/* ---------- yerlesim: metin ve sahne yan yana ---------- */
/* align-items:start — bugunku clip-split'in center hizasi 494px'lik gorseli
   150px'lik metne gore ortaliyor ve bosluklari metne degil gorsele bagliyordu. */
.mock-beside{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,.9fr);
  gap:clamp(24px,4vw,56px);
  align-items:start;
}
/* Metin her zaman satirin tepesinden baslar (okuma oradan basliyor), sahne ise
   satirda ortalanir. Iki yon de gerekli: sahne metinden UZUNSA satirin boyunu
   zaten o belirler ve ortalama hicbir sey yapmaz; sahne KISAYSA (320x168 gibi
   yatik cizimler) artan bosluk altta yigilmak yerine ustle alta bolunur.
   Satirin tamamini ortalamak ise bolum basligini asagi kaydirirdi. */
.mock-beside > .mock{align-self:center}
/* Sahne SOLA gecer, DOM sirasi degismez: klavye ve ekran okuyucu sirasi ayni
   kalir, yalniz sutunlar yer degistirir. Izgara da aynada donuyor: yalnizca
   icerigi takas etmek metni dar sutuna, cizimi genis sutuna dusuruyordu ve
   cevrilmis bolumler cevrilmemislerden farkli okunuyordu. */
.mock-beside.is-flipped{grid-template-columns:minmax(280px,.9fr) minmax(0,1fr)}
.mock-beside.is-flipped>*:first-child{grid-column:2;grid-row:1}
.mock-beside.is-flipped>.mock{grid-column:1;grid-row:1}

/* Sahne sistemi TEK kirilma noktasi tasir; sayfalarin kendi 560-1280 araligi
   bu katmani ilgilendirmez. */
@media (max-width:860px){
  .mock-beside,
  .mock-beside.is-flipped{grid-template-columns:minmax(0,1fr)}
  .mock-beside>*,
  .mock-beside.is-flipped>*:first-child,
  .mock-beside.is-flipped>.mock{grid-column:1;grid-row:auto}
  /* Sira DOM sirasidir ve DOM sirasi her zaman metin-once: dar ekranda once
     bolumun ne anlattigi okunur, cizim onu takip eder. Sahneyi one alan bir
     kacis yolu bilerek YOK; olsaydi bir bolum sessizce cizimle acilirdi. */
}

/* Sahne kendi sutunundan darsa ortalanir. NEDEN: .mock-sm 420px'te duruyor,
   ama iki sutunlu yerlesimde sutun 470px'i, tek sutuna dusen ekranda ise
   sayfa genisligini buluyor; sola yapisan sahne kenarda olu alan birakiyordu.
   Satir-ici stil yazilamadigi (sahnelerde yalniz --mock-* degeri serbest) ve
   .mock-full max-width'i buyuttugu icin ortalama ayri bir sinifta durur. */
.mock-center{margin-inline:auto}

/* ---------- yerlesim: bir kaydin icinden acilan iki alt sahne ---------- */
/* NEDEN: bir bolum tek bir ana sahne ve ondan turemis iki yan sahne tasidiginda
   ucunu alt alta dizmek anlatiyi uzatiyor, yan yana dizmek icin de sayfaya
   satir-ici izgara yazmak gerekiyordu. Kirilma noktasi .mock-beside ile AYNI
   (860px) ki sahne sistemi tek bir yerde kirilsin. Sutun genisligi .mock'un
   kendi max-width'i min(560px,100%) oldugu icin ayrica sinirlanmaz. */
.mock-pair{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,4vw,56px);
  align-items:start;
}
@media (max-width:860px){
  .mock-pair{grid-template-columns:minmax(0,1fr)}
}