/* ============================================================
   ÇİZİM DİLİ — İKİ KALEM
   ------------------------------------------------------------
   21 Eyl: bu katman bugun.css'in içindeydi, yani YALNIZ uygulama
   sayfalarında yükleniyordu. Açılış sayfası bugun.css'i yüklemiyor;
   sahibi siteye bakıp "hiçbir çizim görünmüyor" dedi ve haklıydı —
   çizimlerin hepsi giriş arkasındaydı. JS tarafında cizim.js ile
   yapılanın aynısı: dil ortak dosyaya çıktı, YERLEŞTİRME (koridor,
   boş durum) bugun.css'te kaldı.

   Renk buraya da yazılmaz: kademeler tokens.css'te.
   ============================================================ */

.uva-cizim {
  display: block;
  width: 100%;
  height: auto;
  /* Süstür: ekran okuyucu görmez, odak sırasına girmez (HTML'de de
     aria-hidden var; burada seçilememesi için). */
  pointer-events: none;
  user-select: none;
}

.uva-cizim__basili {
  fill: none;
  stroke: var(--uva-cizim);
  stroke-width: var(--uva-cizim-kalinlik);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.uva-cizim__el {
  fill: var(--uva-cizim-el);
  stroke: none;
}

/* ORTAM KADEMESİ: başlık arkasına serilen sahne. Okunmak için değil,
   sayfaya el değmiş hissi için orada — 1,5:1. */
.uva-cizim--fon .uva-cizim__basili { stroke: var(--uva-cizim-fon); }
.uva-cizim--fon .uva-cizim__el { fill: var(--uva-cizim); }

/* ============================================================
   ÇİZİLMİŞ SAHNELER — maske olarak
   ------------------------------------------------------------
   Bunlar kalem çizimi dosyalar, ama <img> DEĞİL: ölçüldü, her
   dosyanın %99'u saydam ve çizgi ALFA kanalında duruyor — yani
   dosya zaten bir maske. `mask-image` ile kullanılınca renk
   token'dan gelir, bu dosyanın en başındaki "renk buraya
   yazılmaz" kuralı bozulmaz ve koyu temada çizim kaybolmaz.
   <img> olsaydı siyah kalır, koyu zeminde görünmezdi.

   Oran her sınıfta yazılı: kutu önceden ayrılsın ki görsel
   gelince kenar çubuğu yerinden oynamasın.
   ============================================================ */
.uva-cizim-resim {
  /* YUKSEKLIK TAVANI. Oran serbest birakilinca dik cizimler kenar
     cubugunu ele geciriyordu: olculdu, cetvel (oran 0,34) 179x521 px
     cikti — yani sayfanin en buyuk gorsel kutlesi bir sus oldu.
     Tavan gelince maske `contain` ile kucululup ortalaniyor, cizim
     bozulmuyor. */
  max-height: clamp(120px, 18vh, 180px);
  background-color: var(--uva-cizim-fon);
  -webkit-mask-image: var(--uva-cizim-kaynak);
          mask-image: var(--uva-cizim-kaynak);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  pointer-events: none;
  user-select: none;
}

.uva-cizim-resim--acik-defter { --uva-cizim-kaynak: url('/img/cizim/acik-defter.webp'); aspect-ratio: 0.9583; }
.uva-cizim-resim--bloknot { --uva-cizim-kaynak: url('/img/cizim/bloknot.webp'); aspect-ratio: 1.1511; }
.uva-cizim-resim--bos-sayfa { --uva-cizim-kaynak: url('/img/cizim/bos-sayfa.webp'); aspect-ratio: 0.775; }
.uva-cizim-resim--cetvel { --uva-cizim-kaynak: url('/img/cizim/cetvel.webp'); aspect-ratio: 0.3438; }
.uva-cizim-resim--cizelge { --uva-cizim-kaynak: url('/img/cizim/cizelge.webp'); aspect-ratio: 1.9512; }
.uva-cizim-resim--defter-sekmeli { --uva-cizim-kaynak: url('/img/cizim/defter-sekmeli.webp'); aspect-ratio: 0.7917; }
.uva-cizim-resim--deste { --uva-cizim-kaynak: url('/img/cizim/deste.webp'); aspect-ratio: 1.203; }
.uva-cizim-resim--dumen { --uva-cizim-kaynak: url('/img/cizim/dumen.webp'); aspect-ratio: 1.0084; }
.uva-cizim-resim--duyuru { --uva-cizim-kaynak: url('/img/cizim/duyuru.webp'); aspect-ratio: 1.1911; }
.uva-cizim-resim--grafik { --uva-cizim-kaynak: url('/img/cizim/grafik.webp'); aspect-ratio: 1.337; }
.uva-cizim-resim--hedef { --uva-cizim-kaynak: url('/img/cizim/hedef.webp'); aspect-ratio: 2.2222; }
.uva-cizim-resim--kesif { --uva-cizim-kaynak: url('/img/cizim/kesif.webp'); aspect-ratio: 1.0573; }
.uva-cizim-resim--kitaplar { --uva-cizim-kaynak: url('/img/cizim/kitaplar.webp'); aspect-ratio: 1.4861; }
.uva-cizim-resim--mercek { --uva-cizim-kaynak: url('/img/cizim/mercek.webp'); aspect-ratio: 0.8562; }
.uva-cizim-resim--onay { --uva-cizim-kaynak: url('/img/cizim/onay.webp'); aspect-ratio: 0.8; }
.uva-cizim-resim--recete { --uva-cizim-kaynak: url('/img/cizim/recete.webp'); aspect-ratio: 0.8229; }
.uva-cizim-resim--rota { --uva-cizim-kaynak: url('/img/cizim/rota.webp'); aspect-ratio: 1.2938; }
.uva-cizim-resim--rozet { --uva-cizim-kaynak: url('/img/cizim/rozet.webp'); aspect-ratio: 1.194; }
.uva-cizim-resim--sohbet { --uva-cizim-kaynak: url('/img/cizim/sohbet.webp'); aspect-ratio: 1.4076; }
.uva-cizim-resim--soru { --uva-cizim-kaynak: url('/img/cizim/soru.webp'); aspect-ratio: 0.8375; }
.uva-cizim-resim--video { --uva-cizim-kaynak: url('/img/cizim/video.webp'); aspect-ratio: 1.4634; }

/* ============================================================
   KALEM KARALAMALARI VE ÇİZİLİYOR HAREKETİ (10–11 Eki)
   ------------------------------------------------------------
   Sahibi: "çocuksu olmasın; not defteri havası, animasyonla";
   prototipte "Defter" yönünü seçti (11 Eki). Karalama = jest
   (altını çiz, halkaya al, ok çek, kutuyu işaretle), sahne değil.
   İz bir ÇİZGİ değil, kalınlığı değişen bir DOLGU (cizim.js
   kalemIzi): rengi --uva-grafit (kurşun kalem), dokusu #uva-grafit.
   Çiziliyor hareketi dolgunun MASKESİNDE: maskenin çizgisi açılır.

   HAREKET KURALI (kart 6aa67f9f, "dikey sıçrama"): keyframe YOK,
   yer değiştirme YOK. Yalnız `transition` ve yalnız çizginin
   görünen boyu (stroke-dashoffset), opaklık ve kırpma. Bekleme
   durumunu JS yazar (cizim.js `cizimHareketiKur`): JS yoksa ya da
   azaltılmış hareket isteniyorsa çizimler TAMAM hâliyle durur.
   ============================================================ */
.uva-karalama {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  pointer-events: none;
  user-select: none;
}
.uva-karalama__iz { fill: var(--uva-grafit); }
/* Maskenin çizgisi: beyaz = görünür. Kalınlığı JS verir (izin kalınlığı × 2,4),
   yani maske izi hep tamamen örter; burada yalnız biçim. */
.uva-karalama__maske {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Çizgi uzunluğu pathLength=1'e normalize: 1 = tamamı. */
[data-ciz] .uva-karalama__maske,
[data-ciz] .uva-cizim__basili { stroke-dasharray: 1; }
[data-ciz='bekliyor'] .uva-karalama__maske,
[data-ciz='bekliyor'] .uva-cizim__basili { stroke-dashoffset: 1; }
[data-ciz='bekliyor'] .uva-cizim__el { opacity: 0; }

[data-ciz='cizildi'] .uva-karalama__maske,
[data-ciz='cizildi'] .uva-cizim__basili {
  stroke-dashoffset: 0;
  /* Yavaş başlar, yavaş biter: kalem hızlanır ve yavaşlar.
     Her çizgi bir öncekinden biraz sonra (--i: yoldaki sırası). */
  transition: stroke-dashoffset var(--uva-ciz-sure, 900ms) cubic-bezier(0.65, 0, 0.35, 1)
              calc(var(--uva-ciz-gecikme, 0ms) + var(--i, 0) * 180ms);
}
/* Sahne çizimlerinde basılı yolların sırası DOM sırası; tek tek gecikme
   yerine hepsi birlikte çizilir, kalem şeritleri ardından belirir. */
[data-ciz='cizildi'] .uva-cizim__el {
  opacity: 1;
  transition: opacity 500ms ease calc(var(--uva-ciz-gecikme, 0ms) + 600ms);
}

/* Başlık işareti (her sayfada eyebrow'un üstündeki kısa çizgi): cetvelle
   çekilmiş 1px çizgi yerine kurşun kalem darbesi. KUTU 32×1 KALIR —
   başlık hizası kapısı (v3-baslik-hizasi) bu kutunun yerine bağlı; darbe
   kutudan taşan bir katman, yerleşime girmez. */
.uva .uva-marker {
  position: relative;
  background: none;
}
.uva .uva-marker::before {
  content: '';
  position: absolute;
  left: -1px;
  right: -6px;
  top: -4px;
  height: 9px;
  background: var(--uva-rule);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 9'%3E%3Cpath d='M1.5 5.2C6 4.1 10 3.6 15 4.3S24 6.3 29 5.4 36 3.4 38.5 3.6' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 9'%3E%3Cpath d='M1.5 5.2C6 4.1 10 3.6 15 4.3S24 6.3 29 5.4 36 3.4 38.5 3.6' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.uva-marker[data-ciz='bekliyor']::before,
.uva-cizim-koridor[data-ciz='bekliyor'] { clip-path: inset(0 100% 0 0); }
.uva-marker[data-ciz='cizildi']::before {
  clip-path: inset(0 0 0 0);
  transition: clip-path 650ms cubic-bezier(0.65, 0, 0.35, 1) 120ms;
}
/* Kenar koridorundaki kalem çizimi soldan sağa "çizilir" (oturumda bir kez). */
.uva-cizim-koridor[data-ciz='cizildi'] {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1400ms cubic-bezier(0.65, 0, 0.35, 1) 200ms;
}

@media (prefers-reduced-motion: reduce) {
  [data-ciz] .uva-karalama__maske,
  [data-ciz] .uva-cizim__basili { stroke-dashoffset: 0; transition: none; }
  [data-ciz] .uva-cizim__el { opacity: 1; transition: none; }
  .uva-marker::before, .uva-cizim-koridor { clip-path: none; transition: none; }
}

/* Kupa izi kurşun değil, kahve: aynı mürekkep, çok soluk. */
.uva-karalama--kahve .uva-karalama__iz { opacity: 0.4; }