/* nCoach tanitim — cihaz katmani (telefon mockupi).
   Sayfa: shared.css|site.css -> device.css -> theme.css -> chrome.css

   NEDEN AYRI BIR KATMAN, sahne katmanina (assets/css/mock.css) EK OLARAK:
   sahne katmani CIZER, fotograf tasimaz — bu bir tercih degil, olculen bir
   kural: scripts/check-mock.js her figure.mock icinde <img> gorurse duser
   ("sahneler cizilir, fotograflanmaz") ve mock.css "opacity" ozelligini hic
   bildirmez. Uygulamanin gercek ekran goruntusu ise ne cizimdir ne de SVG
   fill-opacity ile solabilir. Iki isin kurallari ayri oldugu icin katman da
   ayri; ortak olan sey disiplin, kod degil.

   DORT KURAL — hepsi scripts/check-device.js ile olculur:

   1) DURGUN KARE = ILK KARE. Hicbir kare kendi basina hareket etmez. CSS'in
      varsayilan hali "ilk ekran gorunur, otekiler sahnenin sagi disinda"dir;
      kareyi degistiren tek sey betigin taktigi .is-current sinifi. Betik hic
      yuklenmezse, hareket azaltma acikken ve IntersectionObserver yoksa
      ekranda bos kutu degil, okunabilir ILK ekran durur.

   2) GECIS TEK TIP: SAYFA CEVIRME. Her kare sahnenin sagindan girer, soldan
      cikar; solma da dagilma da yok. Uc gerekce: (a) bu katman opaklikla
      calisamaz — yari saydam bir ekran goruntusu iki temada iki ayri renge
      bulanir ve kontrast olcumunun gormedigi yerden okunurlugu dusurur;
      (b) anlati dogru: bunlar ayni ekranin degisen halleri degil, uygulamanin
      AYRI ekranlari — parmakla kaydirilarak gecilirler; (c) yalnizca transform
      degistigi icin donguyu tarayici birlestirme katmaninda cizer, on uc
      gorselin durdugu sayfada her karede yeniden boyama olmaz.
      Dongunun basa sardigi adim da AYNI gecistir: sirada bekleyen kare once
      sahnenin sagina sessizce alinir (ekran disinda, gozle gorulmez), sonra
      her zamanki gibi soldan iceri kayar.

   3) SURE TEK KAYNAKTAN: --device-turn (gecis) ve --device-hold (okuma payi).
      Sahnelerde ham ms yazilmaz; oynatici da bu jetonlari OKUR.

   4) RENK JETONDAN, OPAKLIK YOK. Kabuk ve alt yazi yalnizca --t-* jetonlarina
      baglanir; bu dosya "opacity" ozelligini hic bildirmez.

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

:root{
  /* --- zamanlama --- */
  --device-turn:520ms;   /* bir ekranin yerini otekine birakma suresi */
  --device-hold:2600ms;  /* duran karenin okunma payi: sahne cizimlerinden
                            uzun, cunku okunan sey bir cizim degil bir ekran */
  --device-ease:cubic-bezier(.22,.61,.36,1);

  /* --- olcu --- */
  /* Telefon govdesi metnin yanindaki sutuna oturur; 320px'in ustunde mockup
     anlatiyi degil kendini gosterir. */
  --device-w:min(320px,100%);
  --device-bezel:10px;
  --device-radius:38px;
  /* Ekran goruntulerinin gercek en-boy orani. Kutu YUKLEMEDEN once bu oranla
     ayrilir, boylece gec gelen gorsel sayfayi kaydirmaz. Sayi burada TEK
     kopya duruyor ve dosyalarin gercek olcusuyle karsilastiriliyor
     (scripts/check-device.js), yani bayatlayamaz. */
  --device-ratio:645/1398;
}

/* ---------- kapsayici ---------- */
.device{
  margin:0;
  width:100%;
  max-width:var(--device-w);
}
.device-center{margin-inline:auto}
.device-flow{margin-top:var(--t-flow)}

/* ---------- govde ---------- */
/* Kabuk her iki temada AYNI koyu lacivert: ekran goruntuleri uygulamanin acik
   temasinda cekildi, yani ekranin kendisi beyaz. Kabugu temaya baglasaydik
   acik zeminde beyaz ekran beyaz sayfaya karisirdi; sabit koyu govde iki
   temada da ekrani sayfadan ayirir. Iki renk de tema jetonu degil marka
   sabiti (theme.css: her iki blokta ayni deger). */
.device-frame{
  position:relative;
  padding:var(--device-bezel);
  border-radius:var(--device-radius);
  background:var(--t-navy-900);
  border:1px solid var(--t-navy-800);
  box-shadow:0 22px 54px var(--t-shadow);
}
/* Yan tus: govdenin telefon olarak okunmasi icin tek dekoratif isaret. */
.device-frame::after{
  content:"";
  position:absolute;right:-1px;top:22%;
  width:2px;height:9%;
  border-radius:2px;
  background:var(--t-navy-800);
}

.device-screen{
  position:relative;
  overflow:hidden;
  aspect-ratio:var(--device-ratio);
  border-radius:calc(var(--device-radius) - var(--device-bezel));
  background:var(--t-bg-soft);
}

/* ---------- kareler ---------- */
/* Dinlenme yeri sahnenin SAGI; iceri giren kare .is-current ile 0'a gelir,
   yerini birakan kare .is-past ile sola cikar. Ucunu de transform yapar. */
.device-shot{
  position:absolute;inset:0;
  display:block;width:100%;height:100%;
  transform:translateX(100%);
  transition:transform var(--device-turn) var(--device-ease);
}
.device-shot.is-current{transform:none}
.device-shot.is-past{transform:translateX(-100%)}
/* Sirasi gelen kare sahnenin sagina alinirken gecis kapanir: o an kare zaten
   ekran disinda, gozle gorulmez; gorunen tek hareket her zamanki kaydirmadir. */
.device-shot.is-instant{transition:none}

/* ---------- sira gostergesi ---------- */
.device-dots{
  display:flex;justify-content:center;gap:6px;
  margin-top:14px;
}
.device-dot{
  width:6px;height:6px;border-radius:999px;
  background:var(--t-line-strong);
}
.device-dot.is-on{background:var(--t-accent)}

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

/* Hareket azaltma TEK blok. Varsayilan hal zaten ilk kare oldugu icin burasi
   yalnizca "oynuyorsa dur" der; bos kutu birakmaz. */
@media (prefers-reduced-motion:reduce){
  .device,
  .device *{transition:none !important;animation:none !important}
}

/* ---------- yerlesim: metin ve cihaz yan yana ---------- */
/* Sahne izgarasindan ayri: cizimler yatik (320 x 200 civari), telefon dik.
   Dik kolon 240px'in altina inince ekran goruntusu okunmaz hale geliyor, o
   yuzden alt sinir orada ve pay metne birakiliyor (.7fr). */
.device-beside{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(240px,.7fr);
  gap:clamp(24px,4vw,56px);
  align-items:start;
}
.device-beside > .device{align-self:center}
/* Cihaz SOLA gecer, DOM sirasi degismez: klavye ve ekran okuyucu sirasi ayni
   kalir, yalniz sutunlar yer degistirir. */
.device-beside.is-flipped{grid-template-columns:minmax(240px,.7fr) minmax(0,1fr)}
.device-beside.is-flipped>*:first-child{grid-column:2;grid-row:1}
.device-beside.is-flipped>.device{grid-column:1;grid-row:1}

/* Bolum metnin altinda IKINCI bir blok tasiyabilir (Ajanda'daki kart izgarasi).
   O zaman cihaz iki satiri birden kaplar ve DOM sirasi
   metin -> cihaz -> ek blok olur: dar ekranda mockup basligin hemen ardinda
   okunur, alti kartin altina dusup bolumden kopmaz. Satir araligi sifir, cunku
   ikinci blogun kendi ust boslugu zaten var; iki bosluk ust uste binmesin. */
.device-beside.has-more{row-gap:0}
/* Sutunlar ELLE yazilir: cihaz iki satira kilitlenince otomatik yerlestirme
   onu ilk bos hucreye, yani sol sutuna atiyordu. */
.device-beside.has-more>*{grid-column:1}
.device-beside.has-more>.device{grid-column:2;grid-row:1 / span 2}

/* Tek kirilma noktasi; sayfalarin kendi araligi bu katmani ilgilendirmez. */
@media (max-width:860px){
  .device-beside,
  .device-beside.is-flipped{grid-template-columns:minmax(0,1fr)}
  .device-beside>*,
  .device-beside.is-flipped>*:first-child,
  .device-beside.is-flipped>.device,
  .device-beside.has-more>*,
  .device-beside.has-more>.device{grid-column:1;grid-row:auto}
  /* Tek sutunda satir araligi sifir kaliyor; mockupun kendi nefesi burada. */
  .device-beside.has-more>.device{margin-block:var(--t-flow-lg)}
  /* Sira DOM sirasidir ve DOM sirasi her zaman metin-once: dar ekranda once
     bolumun ne anlattigi okunur, mockup onu takip eder. */
}