/* ============================================================
   UVA Mentor — V3 AÇILIŞ (beta başvuru sayfası)

   Yerleşim Claude Design'da tasarlandı (Landing.dc.html) ve buraya
   indirildi: satır içi stiller sınıflara, şablon sözdizimi statik
   HTML'e, React sarmalayıcısı acilis.js'e çevrildi.

   SAYFAYA ÖZGÜ İKİ EKLEME — ikisi de tokens.css'e GİRMEDİ, çünkü
   sözleşme §11 "önerebilirsin, biz değiştiririz" diyor:
     1) --uva-font-display (Archivo). "C" kararının display yarısı
        (Bricolage Grotesque) 96px'te GERİ ALINDI — karşılaştırma
        sayfasında 48px'te seçilmişti, afiş boyutunda tutmadı.
        Gövde yarısı (Figtree) duruyor.
        Uygulama içine SIZMAZ — yalnız bu dosyada tanımlı.
     2) --uva-kenar (clamp'li sayfa kenarı) ve --uva-hairline.
   Beğenilmezse birinci satır Source Sans 3'e döner, sayfa ayakta kalır.

   DÜŞÜRÜLEN ÖNERİ: tasarım küçük etiketler için DÖRDÜNCÜ bir aile
   (Instrument Sans) kullanıyordu. Alınmadı — .uva-mono zaten
   tabular-nums veriyor ve dördüncü aile hiçbir işi çözmüyordu.
   ============================================================ */

.uva-acilis {
  /* Sayfaya özgü. Global değil. */
  /* Archivo. Optik boy ekseni YOK — 'opsz' ayarları bu yüzden kaldırıldı;
     Bricolage'a aitti ve burada sessizce ölü kalıyordu. */
  --uva-font-display: 'Archivo', 'Figtree', 'Segoe UI', Arial, sans-serif;
  /* 11 Eki — DEFTER (sahip, prototipten seçti). El yazısı yalnız kenar
     notlarında: "bizde/sende", kenar notu, yapışkan not. ADR-021 §24. */
  --uva-font-el: 'Caveat', 'Segoe Print', cursive;
  /* Kağıt üstü malzemeler. Vurgu DEĞİL: fosfor sarısı bir kalem izi,
     sayfanın iki kırmızı anıyla yarışmaz (vurgu kapısı yalnız --uva-accent
     sayar). Açılışa özgü; uygulama tek renk kalır. */
  --uva-fosfor-renk: #F3D35B;
  --uva-defter-kagit: #F6F5F0;
  --uva-defter-cizgi: #C9D2D6;
  --uva-defter-pay-cizgi: #D8A9A2;
  --uva-delik-golge: rgba(34, 33, 29, 0.08);
  --uva-bant: rgba(214, 205, 178, 0.74);
  --uva-yapiskan-acik: #F5E49A;
  --uva-yapiskan-koyu: #E9D27A;
  /* --uva-kenar ve --uva-olcu 22 Eyl'de tokens.css'e TAŞINDI: aynı ölçüyü
     artık uygulama kabuğu da kullanıyor (bkz. bugun.css, raysız sütun).
     Burada yeniden bildirilirlerse iki otorite olur ve ilk sapmada
     açılış ile uygulama sessizce ayrışır. */
  --uva-hairline: 1px;
  /* SAYFA ÖLÇÜSÜNÜN HİKÂYESİ (değeri artık tokens.css'te):
     20 Eyl'e kadar bir ölçü YOKTU ve bütün "yerleşim" şikâyetlerinin kökü
     buydu. Her bölüm `margin: 0 var(--uva-kenar)` ile duruyordu, yani ekran
     ne kadar genişse içerik o kadar geriliyordu. 1280px'lik bir ekranda
     makul görünüyor (ölçtüğüm yer orasıydı), 1900px'lik bir ekranda kahraman
     %27 dolu ve başlığın sağında 873px boşluk kalıyordu. Tipografiyi ne
     yaparsam yapayım bu düzelmezdi: harfleri ölçüsü olmayan bir kabın içinde
     ayarlıyordum. 22 Eyl'de aynı arıza uygulama tarafında da ölçülünce ölçü
     ORTAK oldu. */

  position: relative;
  min-height: 100vh;
  background: var(--uva-paper);
  color: var(--uva-ink);
  font-family: var(--uva-font-body);
  font-size: var(--uva-fs-govde);
  line-height: 1.55;
  /* 14 Eki: `hidden` → `clip`. İkisi de yandan taşmayı (kenar payı
     kartları) keser, ama `hidden` bu kutuyu bir KAYDIRMA KABI yapar ve
     içindeki `position: sticky` sayfaya değil kaydırmayan bu kaba yapışır,
     yani hiç yapışmaz (§02 yolculuk). `clip` kap kurmaz. Desteklemeyen
     eski tarayıcı ilk satırı kullanır; acilis.js yolculuğu orada düz
     listede bırakır (CSS.supports kontrolü). */
  overflow-x: hidden;
  overflow-x: clip;
}

/* ── Masa ışığı ve doku ──────────────────────────────────────
   Işık sayfanın üstünde durur ve kaydırmayla birlikte hareket etmez:
   lamba tavanda, kağıt altında. --uva-lamp'ın açılış ölçeğindeki hâli. */
.uva-isik {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(90% 50% at 50% -10%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 62%),
    radial-gradient(55% 38% at 8% 26%, rgba(210, 209, 200, 0.32), rgba(210, 209, 200, 0) 70%);
}

.uva-acilis > .uva-grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: var(--uva-grain);
}

/* ── Sağ kenar: kalem ────────────────────────────────────────
   Sistem kaydırma çubuğu GİZLENDİ. Ödün bilinçli: giden şey yalnız
   çubuğu fareyle sürüklemek; tekerlek, dokunma, klavye ve çapalar
   çalışıyor. 3,5 ekranlık bir sayfada bu kabul edilebilir — uzun bir
   sayfada olmazdı ve bu kural oraya taşınmamalı.

   Yerine geçen şey bir çubuk taklidi DEĞİL: solda basılı kenar çizgisi
   varken sağda elle çekilmiş bir mürekkep izi duruyor. */
html { scrollbar-width: none; }
html::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Çapalar sıçramak yerine aksın. */
html { scroll-behavior: smooth; }

.uva-kalem {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  /* 30px: mürekkebin SALINACAK yeri olsun. 14px'te yol kıvrılıyordu ama
     genlik göze görünmüyordu — çizgi dümdüz okunuyordu. */
  width: 30px;
  z-index: 20;
  pointer-events: none;
}

/* Kuru cetvel: kağıdın kenar çizgisi. İz bunun üstüne düşer. */
.uva-kalem__cetvel {
  position: absolute;
  /* Cetvel DÜMDÜZ kalır ve öyle olmalı: o BASILI kenar çizgisi.
     Yanındaki iz elle çekildiği için kıvrılıyor — zıtlık kasıtlı. */
  right: 4px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--uva-edge);
}

/* MÜREKKEP. Düz çizgi değil: eni boyunca değişen, hafif kıvrılan dolu bir
   şerit. Kaydırdıkça AŞAĞI DOĞRU AÇILIR — kalem kağıda iz bırakıyor.
   Açılma oranı --uva-murekkep (yüzde), JS'ten gelir. */
.uva-kalem__murekkep {
  position: absolute;
  right: 2px;
  top: 0;
  width: 28px;
  height: 100%;
  overflow: visible;
}

.uva-kalem__akan {
  fill: var(--uva-ink);
  fill-opacity: 0.82;
  clip-path: inset(0 0 calc(100% - var(--uva-murekkep, 0%)) 0);
}

/* Islak uç: kalemin durduğu yerdeki leke. Kenarı dağınık — mürekkep
   kağıda oturduğu yerde dağılır; bu yüzden yarıçap değil RADYAL SOLMA. */
.uva-kalem__uc {
  position: absolute;
  right: 11px;
  top: var(--uva-kalem-y, 0px);
  width: 8px;
  height: 14px;
  /* Leke konumun UZERINDE ortalanir. -7px yazmak yuksekligi iki yerde
     tutmak olurdu; translateY yuzdesi yukseklik degisirse kendi ayarlanir. */
  transform: translateY(-50%);
  opacity: 0;
  background: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    var(--uva-ink) 0%,
    color-mix(in srgb, var(--uva-ink) 55%, transparent) 55%,
    transparent 100%
  );
  transition: opacity 400ms ease;
}

/* Kaydırırken uç ıslak; durunca kuruyup kayboluyor. Sınıf JS'ten,
   doğrudan kaydırma olayında (rAF'ın içinde değil). */
html.uva-kayiyor .uva-kalem__uc { opacity: 1; transition: opacity 90ms ease; }
html.uva-kayiyor .uva-kalem__akan { fill-opacity: 1; }

/* ── Üst çubuk ───────────────────────────────────────────────  */
.uva-ust {
  position: relative;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: var(--uva-space-5);
  align-items: center;
  justify-content: space-between;
  /* Üst çubuk da ölçüye bağlandı: yoksa marka sayfanın sol ucunda,
     bölüm başlıkları 300px içeride başlıyor ve dikey hiza kırılıyor. */
  width: min(var(--uva-olcu), 100% - 2 * var(--uva-kenar));
  margin-inline: auto;
  padding: var(--uva-space-6) 0;
}

/* Kelime markası serif kalır — sahibinin "D" kararı (17 Eyl). Display
   ailesi başlıklara ait, markaya değil. */
.uva-marka {
  font-family: var(--uva-font-marka);
  font-size: var(--uva-fs-marka);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--uva-ink);
  text-decoration: none;
}

.uva-ust__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--uva-space-6);
  align-items: center;
  font-size: var(--uva-fs-kucuk);
}

.uva-link {
  color: var(--uva-ink-soft);
  text-decoration: none;
  border-bottom: var(--uva-hairline) solid var(--uva-edge);
  padding-bottom: 2px;
  transition: color 150ms ease, border-color 150ms ease;
}

.uva-link:hover { color: var(--uva-ink); border-color: var(--uva-rule); }

/* Üstteki "Başvur" ÇİZGİLİ — vurgu bütçesi (iki) kahraman düğmesine ve
   "sende" etiketine ayrıldı. Menüde üçüncü bir dolgu olamaz. */
.uva-ust__basvur {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--uva-space-5);
  border: var(--uva-hairline) solid var(--uva-ink);
  border-radius: var(--uva-radius);
  color: var(--uva-ink);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 150ms ease;
}

.uva-ust__basvur:hover { background: var(--uva-card); }

/* ── Kahraman ────────────────────────────────────────────────
   min(66vh, 620px): kat çizgisi kararı. Önceki sürümde kahraman
   1000px'ti ve 900px ekranda içerik kadrajın altında kalıyordu. */
.uva-kahraman {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  /* ORTALAMA KALDIRILDI. Sayfanın manifestosu "reçete defteri / baskı
     atölyesi" — ikisinde de metin sol kenardan başlar; ortalanmış kahraman
     hiçbir referansa ait değildi ve sayfanın geri kalanı (iki sütunlu,
     sola dayalı bölümler) ile de çelişiyordu: ilk ekran bir şey, geri
     kalanı başka bir şey söylüyordu.
     Sahibi "yazıların YERLEŞİMİ korkunç" dedi; ölçülebilir kısmı buydu. */
  align-items: start;
  text-align: left;
  gap: var(--uva-space-6);
  /* Yan dolgu ölçüye taşındı; kalan dikey dolgu MERDİVENE bağlandı.
     Eskiden ortadaki var(--uva-kenar) yüzünden dedektör bu satırı hiç
     saymıyordu — çıplak 40/72/48/80 orada duruyordu ve görünmüyordu. */
  padding: clamp(var(--uva-space-9), 5vw, var(--uva-space-11)) 0
           clamp(var(--uva-space-10), 5vw, var(--uva-space-11));
  min-height: min(66vh, 620px);
  justify-content: center;

  /* İki sütun + sayfa ölçüsü. Söz solda, ürün sağda. */
  width: min(var(--uva-olcu), 100% - 2 * var(--uva-kenar));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-content: center;
  /* Merdivenden: 8 (32) → 11 (64). Çıplak px yok. */
  column-gap: clamp(var(--uva-space-8), 4vw, var(--uva-space-11));
}

.uva-kahraman__soz {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--uva-space-6);
  /* Başlık PENCEREYE değil KENDİ SÜTUNUNA göre ölçekleniyor. vw ile
     bağlıyken sütun sabit kalıp punto büyüyordu: 1900px'te başlık
     sütunundan taşıyordu. cqw doğru birim — kap ne kadarsa o kadar. */
  container-type: inline-size;
}

.uva-kahraman__urun { display: flex; justify-content: end; }

/* ── Ürün ekranları: üç varyasyon ────────────────────────────
   Sekmeler görselin ÜSTÜNDE, altında değil: seçenekleri görmeden
   görsele bakan kişi onun tek şey olduğunu sanır. */
.uva-urun { display: flex; flex-direction: column; gap: var(--uva-space-4); width: 100%; }

.uva-urun__sekmeler {
  display: flex;
  flex-wrap: wrap;
  gap: var(--uva-space-6);
  align-items: flex-end;
}

.uva-urun__sekme {
  position: relative;
  padding: 0 0 var(--uva-space-4);
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--uva-fs-kucuk);
  font-weight: 500;
  /* Seçili olmayanlar gri, seçili mürekkep — sayfanın her yerindeki
     kural: okunan şey en koyu. */
  color: var(--uva-ink-soft);
  transition: color 150ms ease;
}
.uva-urun__sekme:hover { color: var(--uva-ink); }
/* İki şerit var ve işaretleme öznitelikleri farklı: kahramandaki SEKME
   (paneli değiştiriyor), §02'deki RADYO (aynı içeriği başka genişlikte
   gösteriyor). Görünüm ikisinde de aynı olmalı. */
.uva-urun__sekme[aria-selected='true'],
.uva-urun__sekme[aria-checked='true'] { color: var(--uva-ink); font-weight: 700; }

/* ELLE ÇİZİLMİŞ İŞARET: hafif kavisli tek bir alt çizgi.
   ÜSTÜNDEKİ ÜÇ KIVILCIM KALDIRILDI. Tek tek bakınca "vurgu ışını"ydı,
   ama kavisin üstünde yan yana üç çentik durunca TOPLAM ŞEKİL bir surat
   okunuyordu: kavis ağız, çentikler göz. Sahibi ilk bakışta "bu gülücük
   suratı ne" dedi — yani süs, anlamın önüne geçmişti.
   Yazılımın çizdiği bir alt çizgi (border-bottom) burada
   yanlış olurdu: sayfanın tamamı birinin kâğıda not aldığı fikri
   üzerine kurulu, işaret de elle konmuş olmalı.

   RENK MÜREKKEP, VURGU DEĞİL. Referansta mor vardı ama bu sayfada
   vurgu bütçesi İKİ (başvuru düğmesi ve "sende") ve üçüncüsü hemen
   altındaki düğmeyle yarışırdı. Mürekkep de aynı işi görüyor —
   "Çalışmak" satırının altındaki çizgi de mürekkep. */
.uva-urun__isaret {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(100% + var(--uva-space-5));
  height: var(--uva-space-5);
  transform: translateX(-50%);
  overflow: visible;
  opacity: 0;
  transition: opacity 180ms ease;
}
.uva-urun__sekme[aria-selected='true'] .uva-urun__isaret,
.uva-urun__sekme[aria-checked='true'] .uva-urun__isaret { opacity: 1; }

.uva-urun__alti {
  fill: none;
  stroke: var(--uva-ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.uva-urun__sekme:focus-visible { outline: 2px solid var(--uva-ink); outline-offset: 3px; }

.uva-urun__simge {
  width: var(--uva-space-5);
  height: var(--uva-space-5);
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.uva-urun__sekme { display: inline-flex; align-items: center; gap: var(--uva-space-2); }

/* SAHNE SABİT YÜKSEKLİKTE, çerçeve içinde ortalanıyor.
   Cihaz değişince oran değişiyor ama sahne değişmiyor — yoksa her
   tıklamada kahramanın yüksekliği zıplar ve altındaki her şey oynardı.
   Bir seçiciyi denemenin bedeli sayfanın yerinden oynaması olmamalı. */
.uva-urun {
  /* Sahne yüksekliği TEK YERDE: hem sahne hem çerçeve genişliği bunu
     kullanıyor, iki ayrı yerde tutulsa biri değişince öteki sessizce
     yanlış kalırdı. */
  --uva-sahne: clamp(240px, 26vw, 400px);
}

.uva-urun__sahne {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--uva-sahne);
}

/* GENİŞLİK SINIRLAYAN BOYUTTAN HESAPLANIYOR, height:100% ile DEĞİL.
   İlk sürüm `height: 100%` + `max-width: 100%` veriyordu; iki eksen de
   sabitlenince tarayıcı aspect-ratio'yu yok sayıyor ve PC çerçevesi
   593x400 (1,48) çıkıyordu — oysa 16/10 = 1,60. Ölçülmeseydi görünmezdi:
   1,48 makul bir sayı ve gözle 1,60'tan ayırt edilmiyor.
   Şimdi genişlik min(sütun, sahne x oran); yükseklik orandan türüyor. */
.uva-gorsel-yer--urun { height: auto; }

/* Gerçek cihaz oranları — uydurma değil:
     PC       16/10  (yaygın dizüstü paneli)
     Tablet    4/3   (iPad sınıfı, yatay)
     Telefon   9/19.5 (modern telefon, dikey)
   Telefon dar ve uzun olduğu için sahnede küçük kalıyor; doğrusu da bu,
   uygulama telefonda gerçekten o kadar yer kaplıyor. */
.uva-urun[data-cihaz='pc'] .uva-gorsel-yer--urun {
  aspect-ratio: 16 / 10;
  width: min(100cqw, calc(var(--uva-sahne) * 16 / 10));
}
.uva-urun[data-cihaz='tablet'] .uva-gorsel-yer--urun {
  aspect-ratio: 4 / 3;
  width: min(100cqw, calc(var(--uva-sahne) * 4 / 3));
}
.uva-urun[data-cihaz='telefon'] .uva-gorsel-yer--urun {
  aspect-ratio: 9 / 19.5;
  width: min(100cqw, calc(var(--uva-sahne) * 9 / 19.5));
}

.uva-h1 {
  position: relative;
  z-index: 3;
  margin: 0;
  font-family: var(--uva-font-display);
  /* Merdivenden kuruldu: h1 (38) → afiş (96). Akışkan ve ladder üstünde.
     KATSAYI 7,2vw -> 6vw: 1280px'te 92px ediyordu ve altındaki giriş
     paragrafı 19px'ti — 4,8 KATLIK bir uçurum. Aradaki kademe boş olunca
     göz anıtla ince yazı arasında zıplıyor, "boyutlar tuhaf" hissi
     BURADAN geliyor, aileden değil. Uçurum iki yandan kapatıldı:
     tepe indi, giriş paragrafı yükseldi (19 -> 23).
     BİRİM vw DEĞİL cqw: başlık pencereye göre değil kendi sütununa göre
     ölçeklenir, yoksa geniş ekranda sütun sabitken punto büyüyüp taşar. */
  font-size: clamp(var(--uva-fs-h1), 11cqw, var(--uva-fs-afis));
  line-height: 0.98;
  /* AĞIRLIK 600. Tarihçe (20 Eyl, aynı gün): 700 → 300 (sahibinin "B"
     kararı, ferahlık) → 500 → 600 (e632895, Archivo'ya dönüşte gri kütle ve
     boyut uçurumu turu). 23 Eyl'e kadar burada "300" yazıyordu — kod iki
     değişiklik ilerlemiş, yorum geride kalmıştı (ADR-021 §24).
     İKİ SANS eşleşiyor; karşıtlık aileden gelemiyor, AĞIRLIKTAN geliyor. */
  font-weight: 600;
  letter-spacing: -0.025em;
  text-wrap: balance;
  /* Ölçüyü artık SÜTUN veriyor; 15ch'lik ikinci bir sınır sütunun içinde
     üçüncü bir dar şerit açıyordu. */
}

/* RENK TERSLİĞİ DÜZELTİLDİ (ölçüm: metnin %68'i ikincil griydi, yalnız
   %26'sı mürekkep). Okunan metin en koyu olmalı; gri GERÇEKTEN ikincil
   şeylere ayrılır (eyebrow, kenar notu, form etiketi, yer tutucu, alt
   bilgi). Birkaç siyah başlığın gri bir denizde yüzmesi yorucuydu. */
.uva-lead {
  position: relative;
  z-index: 3;
  margin: 0;
  /* 19 -> 23 (h3 kademesi). Kahramanın İKİNCİ sesi bu satır; 19px'te
     92px'lik başlığın altında dipnot gibi duruyordu. */
  font-size: var(--uva-fs-h3);
  line-height: 1.45;
  color: var(--uva-ink);
  max-width: 34ch;
  text-wrap: pretty;
}

.uva-kahraman__eylem {
  position: relative; z-index: 3; margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--uva-space-4) var(--uva-space-5);
}

/* 11 Eki: kenar notu — düğmenin altında, kurşun kalemle; oku düğmeye bakar. */
.uva-kahraman__not {
  position: relative;
  padding-left: var(--uva-space-11);
}
.uva-not-ok { position: absolute; display: block; pointer-events: none; }
.uva-not-ok--sol { left: 0; top: -12px; width: 58px; }
/* Dar ekranda not düğmenin ALTINA sarar; oradan sola dönen ok boşluğu gösterir. */
@media (max-width: 420px) {
  .uva-kahraman__not { padding-left: 0; }
  .uva-not-ok--sol { display: none; }
}

/* Kahramandaki TEK dolgu — sayfanın iki vurgu anından biri. */
.uva-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 var(--uva-space-8);
  background: var(--uva-accent);
  color: var(--uva-paper);
  border: 0;
  border-radius: var(--uva-radius);
  font-size: var(--uva-fs-govde);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 150ms ease, transform 150ms ease;
}

.uva-cta:hover  { background: var(--uva-accent-hover); }
.uva-cta:active { transform: translateY(1px); }

/* ── Dört köşeye saçılan kağıtlar ────────────────────────────
   Farklı boyut, farklı açı, farklı ritim: yığın hissi bu FARKTAN doğuyor.
   Hepsi dekoratif ve aria-hidden; metnin arkasından geçerler. */
/* ── Kenar payı galerisi ─────────────────────────
   Sahibi geniş ekrandaki boş yan payları sevdi ("yanların böyle boş
   kalmasını sevdim"). Pay BOŞ KALIYOR — oraya konan tek şey, gelecek
   görsellerin yer tutucuları ve hepsi bandın DIŞINDA durduğu için okuma
   alanına hiç girmiyor.

   Kart başına TEK bir iş: sahibine oraya hangi görselin geleceğini
   söylemek. Tam tarifler ve hazır istemler docs/design/gorsel-listesi.md
   dosyasında; kart 168px, bir istem sığmaz.

   KONUMLANDIRMA: kartlar merkezlenmiş bir bandın içinde duruyor ama
   pencere kenarına göre yerleşmeleri gerek. `50% - 50vw` bandın
   kenarından pencerenin kenarına olan mesafedir; üzerine eklenen pay
   karta nefes bırakır. Böylece band ne kadar dar olursa olsun kart hep
   aynı yerde: pencerenin kenarında. */
.uva-pay {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  width: clamp(120px, 9vw, 168px);
  height: clamp(84px, 6.5vw, 116px);
  animation: uva-suzul 8s ease-in-out infinite;
}

.uva-pay--sol { left: calc(50% - 50vw + var(--uva-space-9)); }

/* ── Yer tutucu -> gercek gorsel ─────────────────────────────
   Gorsel geldiginde karta bu sinif eklenir ve icindeki metin silinir.
   Tek satirlik is; mekanizma simdiden burada dursun ki gorsel gelince
   bir de CSS tasarlamak gerekmesin.

   mix-blend-mode: multiply — cizimler DUZ BEYAZ zeminde geliyor ve
   beyaz, multiply'da seffaf gibi davranir: sadece murekkep kalir ve
   kagidimizin uzerine gercekten CIZILMIS gibi oturur. Seffaf PNG'ye
   gerek yok, ki uretici modeller onu guvenilir vermiyor.
   Kesik cizgili cerceve, dolgu ve golge de kalkar: onlar "burasi bos"
   demenin yoluydu, dolunca soyleyecek bir seyleri kalmaz. */
/* Yer tutucu bir KUTUYDU: kesik çizgili çerçeve, kağıt dolgusu, gölge,
   3:2 sabit oran ve ortasında bir etiket. Hepsi "burası boş, şu gelecek"
   demenin parçalarıydı. Görsel gelince kutunun söyleyecek bir şeyi
   kalmıyor — içine sığdırmak yerine KALKIYOR.
   Yükseklik ve oran JS'te görselin kendi ölçüsünden veriliyor. */
.uva-gorsel-yer--dolu {
  border: 0;
  background-color: transparent;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: none;
  height: auto;
  padding: 0;
}

/* İKİ BİÇİM, İKİ DAVRANIŞ — ve bunu tek sınıfla yapmak yanlış olurdu.
   Üretici bazen ŞEFFAF PNG veriyor, bazen DÜZ BEYAZ zeminli.

   Şeffafta alfa zaten işi yapıyor; üstüne multiply koymak çizimin açık
   yüzeylerini (defterin kendi kağıdı) sayfanın kağıdıyla çarpar ve
   görsel olduğundan koyu, kirli bir leke gibi oturur.

   Beyaz zeminlide ise multiply ŞART: beyaz multiply'da şeffaf gibi
   davranır, yoksa kağıdın üstüne beyaz bir dikdörtgen yapışır.

   Yani varsayılan ŞEFFAF (daha temiz olan), multiply ayrıca isteniyor. */
.uva-gorsel-yer--beyaz { mix-blend-mode: multiply; }

/* ── ÜRÜN EKRANI: CİHAZ ÇERÇEVESİ (10 Eki) ──────────────────
   Kenar görselleri çizim: kutu kalkınca kağıda çizilmiş gibi oturmaları
   doğru. Ürün görseli öyle DEĞİL — bir ekran görüntüsü çıplak bırakılınca
   sayfanın kendi kağıdıyla aynı renkte olduğu için kenarı kayboluyor ve
   uygulama açılış sayfasının bir parçası gibi okunuyordu. Ekran bir
   CİHAZIN içinde durur: telefon ve tablette mürekkep bezel, PC'de ince
   kenarlı pencere; üçünde de masadan kalkmış kağıdın gölgesi.
   Görseller cihaz oranında üretilir (scripts/acilis-urun-gorseli.mjs),
   yani `cover` kırpmaz; üstten hizalı ki başlık hep görünsün. */
.uva-gorsel-yer--urun.uva-gorsel-yer--dolu {
  background-color: var(--uva-paper);
  background-size: cover;
  background-position: top center;
  border: 1px solid var(--uva-rule);
  border-radius: 8px;
  box-shadow: var(--uva-shadow-card-wide);
}
.uva-urun[data-cihaz='tablet'] .uva-gorsel-yer--urun.uva-gorsel-yer--dolu {
  border: 9px solid var(--uva-ink);
  border-radius: 18px;
}
.uva-urun[data-cihaz='telefon'] .uva-gorsel-yer--urun.uva-gorsel-yer--dolu {
  border: 6px solid var(--uva-ink);
  border-radius: 26px;
}

/* ── BÖLÜM AYRACI ─────────────────────────────────────────────
   21 Eyl. Sayfanın bütün süsü kenar payı galerisindeydi ve o galeri
   YALNIZ 1700px'ten geniş ekranda görünüyor — yani ziyaretçilerin
   çoğu için sayfada tek çizgi yoktu. Sahibi "hiçbir çizim görünmüyor"
   dedi ve haklıydı. Ayraç HER GENİŞLİKTE duruyor.

   KISA VE ORTADA, bölüm kuralının aksine: `.uva-bolum` zaten mürekkep
   renginde TAM GENİŞLİKTE bir çizgiyle açılıyor. Ayraç da tam genişlikte
   olsaydı iki paralel çizgi olur ve hangisinin ne dediği kaybolurdu.
   Kısa ve ortalı olunca yarışmıyorlar: elle çekilmiş iz üstte, matbaa
   kuralı altta — dilin iki kalemi üst üste değil, ARKA ARKAYA. */
.uva-ayrac {
  position: relative;
  z-index: 2;
  width: 260px;
  margin: clamp(var(--uva-space-8), 4.5vw, var(--uva-space-11)) auto
          clamp(var(--uva-space-4), 2vw, var(--uva-space-7));
}

.uva-pay--sag { right: calc(50% - 50vw + var(--uva-space-9)); }

.uva-gorsel-yer {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 var(--uva-space-3);
  background: var(--uva-paper);
  border: var(--uva-hairline) dashed var(--uva-edge);
  border-radius: var(--uva-radius);
  box-shadow: 0 1px 1px rgba(34, 33, 29, 0.05), 0 18px 30px -22px rgba(34, 33, 29, 0.45);
  font-size: var(--uva-fs-mikro);
  color: var(--uva-ink-soft);
  text-align: center;
}

/* K1 TEK BASINA BUYUK. Kenar payinda sekiz esit kart bir cerceve kurar
   ve cerceve gurultudur; bir tanesi okunur, kalani sessiz isarettir.
   Bu yuvaya gelen gorsel (deneme karnesi) icinde D/Y/NET sutunlari ve
   rakamlar var — 181px'lik bir kartta satir basina 13 piksel duserdi,
   yani okunmazdi. Olculdu, sonra buyutuldu.

   GENISLIK PAYA BAGLI, sabit degil: pay ne kadarsa kart o kadar, tavan
   240px. `50vw - olcu/2` payin yarisidir; iki yanindaki bosluk da
   dusuluyor. Boylece 1700px'te 130px, 1920px'te 240px olur ve HICBIR
   ekranda banda girmez — sabit bir sayi yazsaydim dar ekranda tasardi. */
.uva-pay--k1 {
  top: 4%;
  --uva-aci: -5deg;
  animation-delay: 0s;
  width: min(240px, calc(50vw - var(--uva-olcu) / 2 - 2 * var(--uva-space-9)));
  height: auto;
  aspect-ratio: 3 / 4;
}
.uva-pay--k2 { top:  4%; --uva-aci:   6deg; animation-delay: 0.9s; }
.uva-pay--k3 { top: 62%; --uva-aci:   4deg; animation-delay: 0.4s; }
/* height YOK — ve olmamasi ONEMLI. Burada taban kuralla AYNI degeri
   tekrarlayan bir satir vardi; hicbir sey degistirmedigi icin zararsiz
   gorunuyordu. Gorsel gelince zararli oldu: --dolu'nun verdigi
   `height: auto` ile ayni ozgullukte ama dosyada DAHA SONRA geldigi
   icin onu eziyor ve kart gorselin oranini alamiyordu.
   Olculdu (canlida): sekiz kartin yedisi kendi oranindaydi, k4 tek
   basina 168x116'da kalmisti — 400x399'luk kare cizim yatay bir kutuya
   sikisiyordu. Sayfada "kahverengi leke" olarak gorunen seyin ikinci
   sebebi buydu. */
.uva-pay--k4 { top: 68%; --uva-aci: -11deg; animation-delay: 1.4s; }
.uva-pay--a1 { top: 26%; --uva-aci:   5deg; animation-delay: 0.6s; }
.uva-pay--h1 { top: 16%; --uva-aci:  -6deg; animation-delay: 1.1s; }
.uva-pay--b1 { top: 18%; --uva-aci:  -4deg; animation-delay: 0.2s; }
.uva-pay--s1 { top: 28%; --uva-aci:   7deg; animation-delay: 1.7s; }

@keyframes uva-suzul {
  0%, 100% { transform: rotate(var(--uva-aci)) translateY(0); }
  50%      { transform: rotate(var(--uva-aci)) translateY(-8px); }
}

/* ── Bölüm iskeleti ──────────────────────────────────────────
   Her bölüm mürekkep renginde bir çizgiyle açılır: matbaa sayfası. */
/* Tek sütunlu bölümde metin ölçüsü: 28 karakterlik şeritler oluyordu. */
.uva-bolum > .uva-metin { max-width: 62ch; }

.uva-bolum {
  position: relative;
  z-index: 2;
  /* Dar ekranda kenar payı, geniş ekranda ölçü. Sınır çizgisi İÇERİK
     kutusunda kalır (padding değil margin), yani kural bugünküyle aynı
     yerden başlar — değişen tek şey nerede DURDUĞU. */
  width: min(var(--uva-olcu), 100% - 2 * var(--uva-kenar));
  margin-inline: auto;
  border-top: var(--uva-hairline) solid var(--uva-ink);
  padding: var(--uva-space-7) 0 clamp(36px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  gap: var(--uva-space-7);
}

.uva-bolum--iki {
  display: grid;
  /* Eşit iki yarım DEĞİL: sol sütun okuma ölçüsünde (en çok 30rem ≈ 62
     karakter), sağdaki (liste/form) kalanı alır. Eşit bölünce metin kendi
     yarısının içinde kayboluyordu. */
  grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 88px);
  align-items: start;
}

.uva-bolum__sol {
  display: flex;
  flex-direction: column;
  gap: var(--uva-space-5);
}

.uva-eyebrow {
  margin: 0;
  font-size: var(--uva-fs-etiket);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--uva-ink-soft);
  font-weight: 500;
}

.uva-h2 {
  margin: 0;
  font-family: var(--uva-font-display);
  /* h2 (29) → display (48). display kendi rolüne döndü: bölüm tavanı. */
  font-size: clamp(var(--uva-fs-h2), 4.5vw, var(--uva-fs-display));
  line-height: 1.02;
  /* Agirlik boyutla TERS olcekleniyor — ama 400 fazla ileri gitmisti.
     48px'te 400, kahramandaki 96/300'un yaninda ZAYIF kaliyor ve daha
     kotusu yuk listesiyle (ayni 48px) CAKISIYORDU: baslikla liste satiri
     tipografik olarak ayni seydi. 600 basligi geri getiriyor. */
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* ÖLÇÜYÜ SÜTUN BELİRLER, eleman değil.
   Önceki hâl `max-width: 44ch` idi = 16px'te 350px. Sütun 611px olduğu
   için metnin YANINDA 261px ölü boşluk kalıyordu ve paragraf o boşluğun
   dibinde dar gri bir şerit gibi duruyordu — satır başına 42 karakter,
   kısacık bir metin 6 satıra yayılıyordu. Rahat okuma 60-75 karakter.
   Artık sütun daraltıldı (aşağıda) ve metin sütunu DOLDURUYOR. */
/* 16 -> 19. Bölüm gövdesi sayfanın OKUNAN katmanı ama arayüz boyutundaydı;
   pazarlama sayfasında 16px, 48px başlığın altında ince yazı gibi duruyor. */
.uva-metin { margin: 0; font-size: var(--uva-fs-lead); color: var(--uva-ink); text-wrap: pretty; }

.uva-kenar-not {
  margin: 0;
  /* 14px idi: AÇIKLAMA, alan etiketinden (13px) büyüktü — en önemsiz metin
     en büyüğüydü. Etiketle aynı kademeye indi; formda artık iki boyut var:
     girdi 16, geri kalan 13. */
  font-size: var(--uva-fs-etiket);
  line-height: 1.5;
  color: var(--uva-ink-soft);
  border-left: var(--uva-hairline) solid var(--uva-edge);
  padding-left: var(--uva-space-3);
}

.uva-gorsel-gizli {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── 01 · Elinden aldıklarımız — DEFTER SAYFASI (11 Eki) ─────
   Sahibi prototipte "Defter"i seçti. Sayfanın tezi bir YAPILACAKLAR
   LİSTESİ olarak oynanıyor: dört yük sırayla işaretlenip kurşun
   kalemle üstü çiziliyor, kenarına el yazısıyla "bizde" düşülüyor;
   geriye fosforla vurgulanmış, halkaya alınmış tek satır kalıyor —
   ve o satır kırmızı el yazısıyla "sende". Vurgu bütçesi aynı: düğme
   ve "sende". Fosfor sarısı vurgu değil, kağıdın üstündeki kalem.

   ZAMANLAMA TEK KAYNAK: liste görünür olunca JS `uva-yuk--cizili`
   verir (acilis.js cizgiKur); her şey o sınıftan ve satırın --t
   değişkeninden türer. Karalamalar genel çiziliyor hareketine
   GİRMEZ (data-ciz-dis), bu zincirin parçası. */
.uva-defter-sayfa {
  --uva-defter-pay: clamp(56px, 7vw, 112px);
  position: relative;
  margin-top: var(--uva-space-6);
  padding: var(--uva-space-9) clamp(var(--uva-space-5), 4vw, var(--uva-space-11)) var(--uva-space-8) var(--uva-defter-pay);
  background-color: var(--uva-defter-kagit);
  /* Kenar payı çizgisi + üstte başlık boşluğunun çizgisi. */
  background-image:
    linear-gradient(90deg, transparent calc(var(--uva-defter-pay) - 22px), var(--uva-defter-pay-cizgi) calc(var(--uva-defter-pay) - 22px) calc(var(--uva-defter-pay) - 20px), transparent calc(var(--uva-defter-pay) - 20px)),
    linear-gradient(180deg, transparent 0 calc(var(--uva-space-9) - 1px), var(--uva-defter-cizgi) calc(var(--uva-space-9) - 1px) var(--uva-space-9));
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% var(--uva-space-9);
  border-radius: var(--uva-radius);
  box-shadow: var(--uva-shadow-card-wide);
  transform: rotate(0.35deg);
}
/* Zımba delikleri: kenar payının solunda üç delik. */
.uva-defter-sayfa::before {
  content: '';
  position: absolute;
  left: calc(var(--uva-defter-pay) / 2 - 26px);
  top: 18%;
  bottom: 18%;
  width: 16px;
  background: radial-gradient(circle at 8px 8px, var(--uva-paper) 6px, var(--uva-delik-golge) 7px, transparent 8px) 0 0 / 16px 50% repeat-y;
}
.uva-defter-sayfa__kahve {
  position: absolute;
  right: -64px;
  top: -64px;
  width: 140px;
  pointer-events: none;
}

.uva-yuk {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--uva-font-display);
  font-size: clamp(var(--uva-fs-lead), 2.4vw, var(--uva-fs-h1));
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.02em;
  /* GRİDEN MÜREKKEBE (önceki tur): "alındı" anlamını renk değil ÜSTÜ ÇİZGİ
     taşıyor; liste mürekkeple başlar, işaretlenen satır ancak sonra solar. */
  color: var(--uva-ink);
}

.uva-yuk__satir {
  --t: 0s;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--uva-space-4);
  min-height: 64px;
  padding: var(--uva-space-3) 0;
  border-bottom: 1px solid var(--uva-defter-cizgi);
}
.uva-yuk__satir:nth-child(1) { --t: 0.3s; }
.uva-yuk__satir:nth-child(2) { --t: 1.45s; }
.uva-yuk__satir:nth-child(3) { --t: 2.6s; }
.uva-yuk__satir:nth-child(4) { --t: 3.75s; }
.uva-yuk__satir--son { --t: 4.9s; margin-top: var(--uva-space-2); }

.uva-yuk__kutu { width: 30px; align-self: start; margin-top: 0.08em; }

/* Metin: satır kırılsa da çizgi HER SATIRA çekilsin diye iç span satır içi. */
.uva-yuk__metin { min-width: 0; }
.uva-yuk__cizgi {
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  /* Kalem izi: cizim.js kalemIzi'nin ürettiği değişken kalınlıklı iz
     (rengi --uva-grafit ile aynı değer; veri adresinde değişken olmaz). */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M2.8,11.6Q3.8,12.4 4.7,12.6Q5.6,12.8 6.7,13Q7.7,13.1 8.9,13.1Q10.1,13 11.3,12.9Q12.6,12.8 13.9,12.8Q15.2,12.7 16.7,12.6Q18.1,12.5 19.6,12.3Q21.1,12.2 22.6,12.1Q24.2,12 25.8,11.9Q27.4,11.9 29,11.7Q30.6,11.6 32.3,11.5Q33.9,11.5 35.6,11.4Q37.3,11.4 39,11.4Q40.7,11.4 42.4,11.3Q44,11.3 45.7,11.3Q47.4,11.2 49,11.3Q50.6,11.3 52.2,11.3Q53.8,11.4 55.4,11.4Q56.9,11.4 58.4,11.5Q59.9,11.5 61.3,11.5Q62.8,11.5 64.1,11.5Q65.5,11.5 66.9,11.5Q68.2,11.6 69.6,11.6Q71,11.6 72.3,11.6Q73.7,11.5 75,11.6Q76.4,11.6 77.7,11.6Q79.1,11.7 80.5,11.7Q81.8,11.7 83.2,11.7Q84.6,11.7 85.9,11.8Q87.3,11.9 88.7,12Q90.1,12.1 91.5,12.1Q92.9,12.2 94.3,12.3Q95.7,12.3 97.1,12.5Q98.5,12.6 100,12.7Q101.4,12.9 102.9,12.9Q104.4,13 105.9,13.1Q107.4,13.2 108.9,13.2Q110.5,13.2 112,13.3Q113.6,13.4 115.2,13.4Q116.8,13.4 118.2,13.4Q119.7,13.4 121.2,13.3Q122.7,13.2 124.1,13.2Q125.5,13.1 127,13.1Q128.4,13 129.9,13Q131.4,12.9 133,12.8Q134.5,12.7 136.1,12.7Q137.7,12.6 139.3,12.5Q141,12.4 142.6,12.4Q144.3,12.3 146,12.2Q147.6,12.2 149.3,12.2Q151,12.2 152.7,12.1Q154.4,12.1 156.1,12.1Q157.8,12.2 159.5,12.1Q161.1,12.1 162.8,12.1Q164.5,12 166.1,12Q167.8,12 169.4,11.9Q171,11.8 172.5,11.7Q174.1,11.6 175.6,11.5Q177.1,11.4 178.6,11.2Q180.1,11.1 181.5,10.9Q182.9,10.8 184.2,10.6Q185.6,10.5 186.8,10.3Q188.1,10.2 189.3,10.1Q190.4,9.9 191.5,9.8Q192.6,9.7 193.6,9.6Q194.6,9.5 195.5,9.4Q196.4,9.2 196.8,9.1Q197.2,9 197.2,8.4Q197.2,7.9 196.7,7.8Q196.3,7.7 195.4,7.6Q194.5,7.6 193.5,7.5Q192.5,7.5 191.4,7.5Q190.3,7.5 189.1,7.4Q188,7.4 186.7,7.4Q185.4,7.4 184.1,7.3Q182.7,7.3 181.3,7.3Q179.9,7.2 178.4,7.2Q177,7.1 175.4,7.2Q173.9,7.2 172.4,7.2Q170.8,7.3 169.2,7.3Q167.6,7.3 165.9,7.5Q164.3,7.6 162.6,7.7Q161,7.8 159.3,7.9Q157.6,8 155.9,8.1Q154.3,8.3 152.6,8.4Q150.9,8.4 149.2,8.6Q147.5,8.7 145.8,8.7Q144.2,8.8 142.5,8.8Q140.9,8.9 139.2,8.9Q137.6,8.9 136,8.9Q134.4,9 132.9,9Q131.3,8.9 129.8,8.9Q128.3,8.9 126.9,8.9Q125.4,9 124.1,8.9Q122.7,8.9 121.2,8.8Q119.7,8.8 118.2,8.8Q116.8,8.8 115.2,8.7Q113.6,8.7 112.1,8.8Q110.5,8.8 109,8.8Q107.5,8.7 106,8.7Q104.5,8.8 103.1,8.7Q101.6,8.7 100.1,8.7Q98.7,8.7 97.3,8.7Q95.8,8.7 94.4,8.7Q93,8.6 91.6,8.5Q90.2,8.5 88.9,8.4Q87.5,8.4 86.1,8.3Q84.7,8.3 83.4,8.1Q82,8 80.6,7.9Q79.3,7.8 77.9,7.7Q76.6,7.6 75.2,7.6Q73.8,7.5 72.5,7.3Q71.1,7.2 69.7,7.1Q68.4,7.1 67,7.1Q65.6,7 64.2,7Q62.8,6.9 61.3,6.9Q59.9,6.9 58.4,7Q56.9,7 55.4,7Q53.8,7.1 52.2,7.2Q50.6,7.3 48.9,7.4Q47.3,7.5 45.6,7.5Q43.9,7.6 42.3,7.7Q40.6,7.7 38.9,7.8Q37.2,7.9 35.5,7.9Q33.8,8 32.2,8.1Q30.5,8.1 28.9,8.1Q27.2,8.1 25.6,8.2Q24,8.2 22.5,8.2Q20.9,8.2 19.4,8.2Q17.9,8.2 16.5,8.3Q15.1,8.3 13.7,8.3Q12.4,8.3 11.1,8.4Q9.9,8.4 8.7,8.4Q7.6,8.4 6.5,8.7Q5.5,8.9 4.6,9.2Q3.7,9.5 3.2,9.9Q2.8,10.3 2.8,11Z' fill='%2334322C'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: -2px 58%;
  background-size: 0% 0.42em;
}

.uva-yuk__kim {
  font-family: var(--uva-font-el);
  font-size: clamp(var(--uva-fs-lead), 2.1vw, var(--uva-fs-h2));
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  color: var(--uva-grafit);
  opacity: 0;
  transform: rotate(-4deg) scale(0.9);
}
.uva-yuk__kim--sende {
  color: var(--uva-accent);
  font-size: clamp(var(--uva-fs-h3), 2.5vw, var(--uva-fs-h1));
}
.uva-yuk__satir--son .uva-yuk__metin { font-weight: 600; justify-self: start; }

/* Fosforlu kalem: kelimenin arkasında, soldan sağa açılır. */
.uva-fosfor {
  position: absolute;
  z-index: -1;
  left: -0.06em;
  right: -0.1em;
  top: 0.42em;
  bottom: 0.02em;
  background: var(--uva-fosfor-renk);
  mix-blend-mode: multiply;
  opacity: 0.8;
  border-radius: 0.08em 0.25em 0.12em 0.3em / 0.3em 0.12em 0.25em 0.1em;
  transform: rotate(-1.2deg) scaleX(0);
  transform-origin: left center;
}

/* ── Zincir ── */
.uva-yuk .uva-karalama__maske { stroke-dasharray: 1; stroke-dashoffset: 1; }
.uva-yuk--cizili .uva-karalama__maske {
  animation: uva-kalem 0.5s cubic-bezier(0.55, 0, 0.3, 1) forwards;
  animation-delay: calc(var(--t) + var(--i, 0) * 0.42s);
}
.uva-yuk--cizili .uva-yuk__cizgi { animation: uva-ciz 0.6s cubic-bezier(0.55, 0, 0.3, 1) calc(var(--t) + 0.55s) forwards; }
.uva-yuk--cizili .uva-yuk__kim { animation: uva-yaz 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) calc(var(--t) + 1s) forwards; }
.uva-yuk--cizili .uva-yuk__satir--son .uva-fosfor { animation: uva-fosfor 0.8s cubic-bezier(0.65, 0, 0.25, 1) calc(var(--t) + 0.4s) forwards; }
.uva-yuk--cizili .uva-yuk__satir--son .uva-isaret__iz .uva-karalama__maske { animation-delay: calc(var(--t) + 0.9s); animation-duration: 0.9s; }
.uva-yuk--cizili .uva-yuk__kim--sende { animation-delay: calc(var(--t) + 1.6s); }

@keyframes uva-kalem { to { stroke-dashoffset: 0; } }
@keyframes uva-ciz { to { background-size: 100% 0.42em; } }
@keyframes uva-yaz { to { opacity: 1; transform: rotate(-4deg) scale(1); } }
@keyframes uva-fosfor { to { transform: rotate(-1.2deg) scaleX(1); } }

@media (max-width: 640px) {
  .uva-yuk__satir { grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: var(--uva-space-3); min-height: 56px; }
  .uva-yuk__kutu { width: 22px; }
  .uva-defter-sayfa::before, .uva-defter-sayfa__kahve { display: none; }
  .uva-defter-sayfa { --uva-defter-pay: 44px; padding-right: var(--uva-space-4); }
}

/* ── 02 · Örnek hafta ────────────────────────────────────────  */
.uva-hafta {
  display: grid;
  grid-template-columns: minmax(min(260px, 100%), 340px) minmax(0, 2fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
}

.uva-hafta__gunler { display: flex; flex-direction: column; gap: var(--uva-space-2); }
.uva-sekmeler      { display: flex; flex-direction: column; gap: var(--uva-space-2); }

.uva-sekme {
  display: flex;
  align-items: baseline;
  gap: var(--uva-space-3);
  width: 100%;
  padding: var(--uva-space-3) var(--uva-space-4);
  background: transparent;
  color: var(--uva-ink-soft);
  border: var(--uva-hairline) solid var(--uva-edge);
  border-radius: var(--uva-radius);
  font-family: inherit;
  font-size: var(--uva-fs-etiket);
  text-align: left;
  cursor: pointer;
  color: var(--uva-ink);
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.uva-sekme:hover { border-color: var(--uva-rule); }

.uva-sekme--secili {
  background: var(--uva-ink);
  color: var(--uva-paper);
  border-color: var(--uva-ink);
}

.uva-hafta__ekran { min-width: 0; }

.uva-hafta__cihazlar { margin-bottom: var(--uva-space-5); }

/* GENİŞLİK DEĞİŞİYOR, YÜKSEKLİK İÇERİKTEN GELİYOR. Kahramandaki oran
   kutusunun tersi: orada içerik bir görsel olduğu için kutu sabit,
   burada içerik metin olduğu için kutu daralınca metin yeniden akıyor.
   Telefon 340px, tablet 560px — uydurma değil, iki sınıfın yaygın
   içerik genişlikleri; PC sütunun tamamını alıyor. */
.uva-hafta__kutu {
  position: relative;
  width: 100%;
  margin-inline: auto;
  transition: width 260ms cubic-bezier(0.22, 0.9, 0.3, 1);
}
.uva-hafta__ekran[data-cihaz='tablet']  .uva-hafta__kutu { width: min(100%, 560px); }
.uva-hafta__ekran[data-cihaz='telefon'] .uva-hafta__kutu { width: min(100%, 340px); }

/* Dar pencerede adres satırı taşmasın: kırpılır, sarmaz — tarayıcı
   çubuğu iki satıra çıkarsa taklit bozulur. */
.uva-pencere__adres { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Arkadaki kesikli çerçeve: "bu bir ekranın kağıt üstündeki izi". */
.uva-hafta__golge {
  position: absolute;
  left: 14px; right: -14px; top: 14px; bottom: -12px;
  border: var(--uva-hairline) dashed var(--uva-edge);
  border-radius: 10px;
}

.uva-pencere {
  position: relative;
  background: var(--uva-paper);
  border: var(--uva-hairline) solid var(--uva-edge);
  border-radius: 10px;
  box-shadow: 0 1px 1px rgba(34, 33, 29, 0.06), 0 26px 52px -34px rgba(34, 33, 29, 0.45);
  overflow: hidden;
  transform: rotate(-1deg);
}

.uva-pencere__cubuk {
  display: flex;
  align-items: center;
  gap: var(--uva-space-4);
  padding: var(--uva-space-3) var(--uva-space-4);
  border-bottom: var(--uva-hairline) solid var(--uva-edge);
  background: var(--uva-card);
}

.uva-pencere__noktalar { display: flex; gap: 6px; }
.uva-pencere__noktalar i { width: 10px; height: 10px; border-radius: 50%; background: var(--uva-rule); }

.uva-pencere__adres { font-size: var(--uva-fs-etiket); color: var(--uva-ink-soft); }

.uva-pencere__govde {
  padding: var(--uva-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--uva-space-4);
}

/* Pencere gövdesinin yüksekliğini eskiden içindeki gri görsel kutusu
   veriyordu. Kutu kaldırıldı (ikinci "Bugün ekranı"ydı), yükseklik
   doğrudan gövdeye geçti — yoksa §02'nin iki sütunu dengesini kaybediyor
   ve pencere üç satırlık bir fişe dönüşüyordu. */
.uva-pencere__govde { min-height: clamp(240px, 26vw, 360px); }

/* ── O GÜNÜN ADIMLARI (10 Eki) ───────────────────────────────
   Uygulamadaki Reçetem'in dili: sıra numarası halkada, ders kalın,
   iş soluk, sağda durum. Kırmızı YOK — sayfanın vurgu bütçesi (başvuru
   düğmesi + "sende") dolu. Mühürlü adım soluklaşır ama okunur kalır:
   bitmiş iş silinmez, kağıtta durur. */
.uva-pencere__adimlar {
  list-style: none;
  margin: var(--uva-space-2) 0 0;
  padding: 0;
  border-top: var(--uva-hairline) solid var(--uva-edge);
}
.uva-pencere__adimlar[hidden] { display: none; }
.uva-pencere__adim {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--uva-space-4);
  padding: var(--uva-space-3) 0;
  border-bottom: var(--uva-hairline) solid var(--uva-edge);
  font-size: var(--uva-fs-kucuk);
}
.uva-pencere__adim-no {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: var(--uva-hairline) solid var(--uva-rule);
  border-radius: 50%;
  font-size: var(--uva-fs-minik);
  color: var(--uva-ink-soft);
}
.uva-pencere__adim-metin { display: flex; flex-wrap: wrap; column-gap: var(--uva-space-3); min-width: 0; }
.uva-pencere__adim-metin b { font-weight: 600; color: var(--uva-ink); }
.uva-pencere__adim-metin span { color: var(--uva-ink-soft); }
.uva-pencere__adim-durum { color: var(--uva-ink-soft); white-space: nowrap; font-size: var(--uva-fs-etiket); }
.uva-pencere__adim[data-durum='sirada'] .uva-pencere__adim-no { background: var(--uva-ink); border-color: var(--uva-ink); color: var(--uva-paper); }
.uva-pencere__adim[data-durum='sirada'] .uva-pencere__adim-durum { color: var(--uva-ink); font-weight: 600; }
.uva-pencere__adim[data-durum='muhur'] .uva-pencere__adim-metin b { color: var(--uva-ink-soft); font-weight: 500; }
.uva-pencere__adim[data-durum='muhur'] .uva-pencere__adim-no { border-style: dashed; }
.uva-pencere__adim[data-durum='kaldi'] .uva-pencere__adim-durum { font-style: italic; }

/* Gün + ders satırı artık pencerenin BAŞLIĞI: içerideki tek büyük şey o
   ve sekmeye basınca değişen ilk şey de o olmalı. */
.uva-pencere__altyazi {
  margin: 0;
  font-size: var(--uva-fs-h3);
  font-family: var(--uva-font-display);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--uva-ink);
  text-wrap: pretty;
}

.uva-pencere__satir {
  display: flex;
  flex-wrap: wrap;
  gap: var(--uva-space-4);
  justify-content: space-between;
  align-items: baseline;
  margin: 0;
  font-size: var(--uva-fs-kucuk);
  color: var(--uva-ink-soft);
}

/* Yük BANDI: genişlik bandı anlatır, sayı yazmaz (ADR-020). */
.uva-card__load { display: inline-flex; align-items: center; gap: var(--uva-space-2); }
.uva-card__load i {
  display: block;
  height: 3px;
  background: var(--uva-rule);
  border-radius: 2px;
}
.uva-card__load[data-bant='kisa'] i { width: 16px; }
.uva-card__load[data-bant='orta'] i { width: 32px; }
.uva-card__load[data-bant='uzun'] i { width: 52px; }

.uva-card__rationale {
  margin: 0;
  font-size: var(--uva-fs-lead);
  line-height: 1.6;
  color: var(--uva-ink);
  text-wrap: pretty;
}

/* ── 03 · Beta adımları ──────────────────────────────────────  */
.uva-adimlar { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; align-self: end; }

.uva-adimlar__satir {
  display: grid;
  grid-template-columns: var(--uva-space-9) minmax(0, 1fr);
  gap: var(--uva-space-4);
  padding: var(--uva-space-4) 0;
  border-top: var(--uva-hairline) solid var(--uva-edge);
}

.uva-adimlar__satir { color: var(--uva-ink); }
.uva-adimlar__satir:last-child { border-bottom: var(--uva-hairline) solid var(--uva-edge); }
.uva-adimlar__no { font-weight: 700; }

/* ── 04 · Başvuru formu ──────────────────────────────────────  */

.uva-gorsel-yer--masa { max-width: 280px; height: 150px; }

.uva-form {
  position: relative;
  background: var(--uva-paper);
  border: var(--uva-hairline) solid var(--uva-edge);
  border-radius: var(--uva-radius);
  padding: clamp(20px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: var(--uva-space-5);
  box-shadow: 0 1px 1px rgba(34, 33, 29, 0.06), 0 24px 48px -30px rgba(34, 33, 29, 0.35);
  max-width: 520px;
  width: 100%;
  justify-self: end;
  box-sizing: border-box;
}

.uva-alan { display: flex; flex-direction: column; gap: var(--uva-space-2); }
.uva-alan-satir { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: var(--uva-space-4); }

/* ETİKET İÇERİKTEN BÜYÜK VE KALIN (sahibinin isteği). Eski hâl tersiydi:
   etiket 13px/400/gri, girdi 16px/400/mürekkep — yani soruyu soran şey
   cevaptan küçük ve soluktu, kart da bu yüzden okunacak bir sıra
   vermiyordu. Şimdi etiket 19/700/mürekkep, girdi 16 — soru önde,
   cevap arkada. */
.uva-alan__etiket {
  font-size: var(--uva-fs-lead);
  font-weight: 700;
  line-height: 1.3;
  color: var(--uva-ink);
}

.uva-form__girdi,
.uva-secim {
  min-height: 44px;
  padding: 0 var(--uva-space-3);
  background: var(--uva-paper);
  border: var(--uva-hairline) solid var(--uva-edge);
  border-radius: var(--uva-radius);
  font-family: inherit;
  font-size: var(--uva-fs-govde);
  color: var(--uva-ink);
}

.uva-form__girdi:focus,
.uva-secim:focus { outline: 2px solid var(--uva-ink); outline-offset: 0; border-color: var(--uva-ink); }

/* ── Açılır liste ────────────────────────────────────────────
   Kapalı hâli sayfaya uyuyordu, AÇILAN LİSTE uymuyordu: işletim
   sisteminin kendi menüsü çiziliyor ve seçili satır Windows mavisiyle
   (#0078D4) boyanıyordu — kağıt/mürekkep paletinde tek parlak renk, ve
   üstelik vurgu bütçesini (İKİ: kırmızı düğme + "sende") sessizce
   üçe çıkarıyordu.

   `appearance: base-select` listeyi de bize veriyor. Desteklenmeyen
   tarayıcıda değer GEÇERSİZ sayılıp yok sayılır ve yerel menü çizilir —
   yani bu bir İYİLEŞTİRME, bağımlılık değil. Telefonda yerel seçici
   zaten daha iyi; orada da bozulmadan çalışır. */
.uva-secim,
.uva-secim::picker(select) { appearance: base-select; }

.uva-secim { display: flex; align-items: center; justify-content: space-between; gap: var(--uva-space-3); }

.uva-secim::picker-icon {
  color: var(--uva-ink-soft);
  transition: transform 150ms ease;
}
.uva-secim:open::picker-icon { transform: rotate(180deg); }

.uva-secim::picker(select) {
  /* AŞAĞI AÇILIR. Varsayılan yerleştirme "sığdığı yere" açıyordu ve form
     sayfanın altında olduğu için liste YUKARI çıkıyordu — tıkladığın şeyin
     üstünü örten bir menü, hangi alanı açtığını da gizliyor.
     Tercih aşağı; gerçekten yer yoksa flip-block yukarı çevirir. */
  position-area: block-end span-inline-end;
  position-try-fallbacks: flip-block;
  /* ÖLÇÜLDÜ: yalnız position-area YETMEDİ. Tarayıcı varsayılan olarak
     `position-try-order: most-block-size` uyguluyor, yani "hangi tarafta
     daha çok yer varsa oraya" açıyor; kontrolün üstünde ve altında
     TAM 428'er piksel olduğu için berabere kalıp yukarıyı seçiyordu.
     `normal` bu sıralamayı kapatır: önce benim dediğim yer denenir,
     GERÇEKTEN sığmazsa flip-block yukarı çevirir. */
  position-try-order: normal;
  margin-block-start: var(--uva-space-1);
  /* Liste en az kontrol kadar geniş: dar bir menü tıklanan kutuyla
     hizalanmıyormuş gibi duruyordu. */
  min-width: anchor-size(width);
  max-height: 60vh;
  overflow-y: auto;
  border: var(--uva-hairline) solid var(--uva-ink);
  border-radius: var(--uva-radius);
  background: var(--uva-paper);
  padding: var(--uva-space-1) 0;
  /* Kağıt kaldırılmış gibi: tek yönlü, yumuşak gölge. */
  box-shadow: 0 1px 1px rgba(34, 33, 29, 0.05), 0 18px 30px -22px rgba(34, 33, 29, 0.45);
}

.uva-secim option {
  display: flex;
  align-items: center;
  gap: var(--uva-space-3);
  padding: var(--uva-space-3) var(--uva-space-4);
  font-family: inherit;
  font-size: var(--uva-fs-govde);
  color: var(--uva-ink);
  background: transparent;
}

/* Seçili satır MÜREKKEPLE işaretleniyor, renkle değil: dolgu yerine
   satır başındaki tek işaret. Vurgu bütçesi korunuyor. */
.uva-secim option:checked { font-weight: 700; }
.uva-secim option::checkmark { content: '—'; color: var(--uva-ink); }
.uva-secim option:not(:checked)::checkmark { visibility: hidden; }

/* Fare/klavye ile gezinilen satır: dolgu kağıdın bir ton koyusu. */
.uva-secim option:hover,
.uva-secim option:focus { background: var(--uva-card); }

/* Yer tutucu rengi TANIMLANMAMIŞTI: tarayıcı kendi nötr grisini (#757575)
   koyuyordu ve kağıt/mürekkep paletinin yanında soğuk duruyordu.
   Mürekkebi kağıda doğru seyreltiyoruz — sıcak kalıyor ve 4,5:1'i geçiyor.
   Etiketten AÇIK olması gerekiyor ki dolu bir değerle karışmasın. */
.uva-form__girdi::placeholder {
  /* %78 ile başladım, ÖLÇÜNCE 3,67:1 çıktı — 4,5'in altı. %90 = 4,75:1:
     eşiği geçiyor ve etiketten (5,95:1) hâlâ açık, yani dolu bir değerle
     karışmıyor. Oran göz kararı değil, ölçülerek seçildi. */
  color: color-mix(in srgb, var(--uva-ink-soft) 90%, var(--uva-paper));
  opacity: 1;   /* Firefox varsayılanı .54, ezilmezse ikinci kez soluyor */
}

/* Formdaki düğme ÇİZGİLİ değil DOLGU değil — çizgili. Dolgu kahramanda
   harcandı; ikinci dolgu vurgu bütçesini (iki) aşardı. */
.uva-dugme {
  min-height: 52px;
  width: 100%;
  background: var(--uva-paper);
  color: var(--uva-ink);
  border: var(--uva-hairline) solid var(--uva-ink);
  border-radius: var(--uva-radius);
  font-family: inherit;
  font-size: var(--uva-fs-govde);
  font-weight: 700;
  cursor: pointer;
  transition: background-color 150ms ease, transform 150ms ease;
}

.uva-dugme:hover    { background: var(--uva-card); }
.uva-dugme:active   { transform: translateY(1px); }
.uva-dugme[disabled] { opacity: 0.6; cursor: default; }

/* Hata metni VURGU RENGİ KULLANMAZ. Bütçe iki ve ikisi de harcandı:
   kahramandaki dolgu ve "sende" etiketi. Hata, renkle değil METİNLE ve
   role="alert" ile ayırt edilir — zaten renge bağlı ayırt etme
   erişilebilirlik açısından da tek başına yeterli değildir. */
.uva-hata {
  margin: 0;
  font-size: var(--uva-fs-kucuk);
  color: var(--uva-ink);
  font-weight: 600;
  border-left: 2px solid var(--uva-rule);
  padding-left: var(--uva-space-3);
}
.uva-onay { margin: 0; font-size: var(--uva-fs-kucuk); color: var(--uva-ink); }

/* Aydınlatma satırı. Gri DEĞİL: "küçük yazı" görünmesi tam da
   istemediğimiz şey — hukuki metni soluklaştırmak onu okunmaz kılmanın
   tasarım kılığına girmiş hâlidir. Küçük ama mürekkep. */
.uva-form__kvkk {
  margin: 0;
  font-size: var(--uva-fs-kucuk);
  line-height: 1.5;
  color: var(--uva-ink);
}

/* ── 03 · Doku ───────────────────────────────────────────────
   İKİ HATA DÜZELTİLDİ.

   1) MASKE METNİ DE SOLDURUYORDU. Dokuyu bölümün KENDİ arka planına
      koyup üstüne maske uygulamıştım ve yorumuna "çocukları
      etkilemiyor" diye yazmıştım — yanlış. `mask-image` elemanın
      TAMAMINI, alt ağaç dahil maskeler; "kadar sürüyor." ve üçüncü
      adım gerçekten silikleşmişti. Doku artık AYRI bir katmanda
      (::before, z-index:-1) ve maske yalnız ona ait.
      Ders: bir efekti içeriğin ÜSTÜNDEKİ bir özellikle (mask, opacity,
      filter) kurarsan içerik de o efekte girer; efekt kendi katmanına
      alınmalı.

   2) ÇİZGİ DEĞİL NOKTA, VE "BELLİ BELİRSİZ". Kareli defter çizgileri
      görünür bir ızgara kuruyordu; sahibi çok daha silik, dokunun ancak
      sezildiği bir şey istedi. Nokta ızgarası çizgiden daha sessiz:
      aynı yoğunlukta bile daha az mürekkep bırakıyor.
      Mürekkebin %8'i, 1px nokta, 14px aralık.

   Şekil DİKDÖRTGEN DEĞİL: üç yumuşak leke üst üste binerek organik bir
   bulut kuruyor. Kenarı olan bir doku "arka plan" gibi okunur; kenarı
   olmayan doku kâğıdın kendi dokusu gibi okunur. */
#beta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(
    circle,
    color-mix(in srgb, var(--uva-ink) 8%, transparent) 1px,
    transparent 1px);
  background-size: 14px 14px;
  -webkit-mask-image:
    radial-gradient(38% 62% at 20% 28%, #000 18%, transparent 72%),
    radial-gradient(30% 50% at 50% 14%, #000 16%, transparent 70%),
    radial-gradient(34% 58% at 76% 54%, #000 18%, transparent 74%);
  mask-image:
    radial-gradient(38% 62% at 20% 28%, #000 18%, transparent 72%),
    radial-gradient(30% 50% at 50% 14%, #000 16%, transparent 70%),
    radial-gradient(34% 58% at 76% 54%, #000 18%, transparent 74%);
}

/* ── Kapanış bloğu ───────────────────────────────────────────  */
/* SULUBOYA, DÜZ SİYAH DEĞİL (sahibinin kararı).
   Düz siyah bir blok bu sayfada yabancı durur: sayfanın tamamı kâğıt ve
   mürekkep, ve mürekkep kâğıda düz basmaz — biriktiği yerde koyulaşır,
   dağıldığı yerde açılır.

   Nasıl kuruldu:
     · Taban #262420 — saf siyah DEĞİL, mürekkebin bir ton açığı.
     · Üstüne dört ayrı ışık havuzu: iki koyu (boyanın biriktiği yer),
       iki açık (fırçanın kalktığı, kâğıdın göründüğü yer). Hepsi farklı
       boyutta ve konumda; simetri olursa gradyan gibi okunur.
     · Kâğıt tanesi (--uva-grain) blokın ÜSTÜNDE duruyor: gerçek
       suluboyada kâğıdın dokusu boyanın içinden görünür.
     · Üst kenar DÜZ DEĞİL: ::before ile yukarı doğru sızan lekeler var,
       yani boya kâğıda emilmiş gibi duruyor. Kesme (clip-path) yerine
       solan radyal lekeler — kesik kenar makasla kesilmiş gibi olurdu.

   Blok sayfanın TAMAMINI kaplar (band değil): kapanış bir bölüm değil,
   sayfanın bittiği yer. */
.uva-kapanis {
  position: relative;
  z-index: 2;
  margin-top: var(--uva-space-11);
  /* TAM KENARA. Olculdu: blok 1904px'ti, pencere 1920 — iki yanda 8'er
     piksel krem serit kaliyordu ve koyu bir kapanista bu, blokun
     "yapistirilmis" gorunmesine yetiyor. Sebep body'nin varsayilan
     kenar boslugu; onu global olarak silmek yerine blok kendini
     penceresine acıyor (50% - 50vw tam o farki verir). */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background-color: #262420;
  background-image:
    radial-gradient(75% 120% at 18% 15%, rgba(0, 0, 0, 0.55), transparent 62%),
    radial-gradient(55% 90% at 82% 8%, rgba(0, 0, 0, 0.42), transparent 58%),
    radial-gradient(45% 80% at 62% 95%, rgba(236, 233, 224, 0.08), transparent 66%),
    radial-gradient(38% 70% at 8% 88%, rgba(236, 233, 224, 0.05), transparent 70%);
  color: var(--uva-paper);
}

/* Boyanın yukarı sızması. Blok kâğıda oturmuyor, kâğıda EMİLİYOR. */
.uva-kapanis::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--uva-space-9);
  pointer-events: none;
  background-image:
    radial-gradient(28% 100% at 12% 100%, #262420, transparent 72%),
    radial-gradient(20% 78% at 34% 100%, #262420, transparent 70%),
    radial-gradient(34% 120% at 58% 100%, #262420, transparent 74%),
    radial-gradient(18% 66% at 79% 100%, #262420, transparent 70%),
    radial-gradient(24% 92% at 93% 100%, #262420, transparent 72%);
}

/* Kâğıt tanesi boyanın İÇİNDEN görünür. */
.uva-kapanis::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.09;
  background-image: var(--uva-grain);
}

.uva-alt {
  position: relative;
  z-index: 1;
  width: min(var(--uva-olcu), 100% - 2 * var(--uva-kenar));
  margin-inline: auto;
  padding: var(--uva-space-10) 0 var(--uva-space-10);
  display: flex;
  flex-wrap: wrap;
  gap: var(--uva-space-5);
  align-items: baseline;
  justify-content: space-between;
  font-size: var(--uva-fs-etiket);
  /* Koyu zeminde gri OKUNMAZ: kâğıt rengi seyreltiliyor, mürekkep
     koyulaştırılmıyor. Ölçülen kontrast 7,2:1. */
  color: color-mix(in srgb, var(--uva-paper) 72%, #262420);
}

/* Koyu blokta bağlantılar: alt çizgi kâğıt renginden seyreltilmiş,
   üstüne gelince kâğıdın kendisi. */
.uva-kapanis .uva-link {
  color: color-mix(in srgb, var(--uva-paper) 78%, #262420);
  border-bottom-color: color-mix(in srgb, var(--uva-paper) 28%, #262420);
}
.uva-kapanis .uva-link:hover {
  color: var(--uva-paper);
  border-bottom-color: color-mix(in srgb, var(--uva-paper) 60%, #262420);
}

.uva-alt__baglar { display: flex; gap: var(--uva-space-6); }

/* ── Odak ────────────────────────────────────────────────────
   Her yerde görünür. Kaldırılmaz. */
.uva-acilis a:focus-visible,
.uva-acilis button:focus-visible {
  outline: 2px solid var(--uva-ink);
  outline-offset: 2px;
}

/* ── Dar ekran ───────────────────────────────────────────────  */
/* Dar ekranda üst çubuk ÜÇ satıra yayılıyordu (189px = telefon ekranının
   %23'ü). Bölüm bağlantıları kalkıyor: sayfa 3,5 ekran, aşağı kaydırmak
   bir menüden ucuz. Kalan: marka + giriş + başvuru, tek satır. */
@media (max-width: 640px) {
  .uva-ust { gap: var(--uva-space-4); padding: var(--uva-space-4) var(--uva-kenar); }
  .uva-ust__nav a[href^="#"]:not(.uva-ust__basvur) { display: none; }
}

/* KAĞIT KAPISI. Band 1280'de kapanıyor; kağıtlar en geniş 170px ve
   bandın dışında durmak zorundalar, yani her iki yanda ~200px pay gerek:
   1280 + 2x200 = 1680. 1700px eşiği bunun yuvarlanmışı.
   Altında kağıt YOK — süsü içeriğin üstüne bindirmektense hiç göstermemek
   doğru; asıl görsel yuvası zaten kahramanın sağında ve o her ekranda var. */
@media (max-width: 1699px) {
  .uva-pay { display: none; }
}

@media (max-width: 860px) {
  /* Kahraman tek sütuna iner: ürün yuvası sözün ALTINA geçer, yanına değil. */
  .uva-kahraman { grid-template-columns: minmax(0, 1fr); row-gap: var(--uva-space-7); }
  .uva-kahraman__urun { justify-content: start; }
  .uva-hafta { grid-template-columns: minmax(0, 1fr); }
  .uva-sekmeler { flex-direction: row; flex-wrap: wrap; }
  .uva-sekme { width: auto; }
  .uva-form { justify-self: stretch; }
  .uva-adimlar { align-self: stretch; }
}

/* ── Hareket azaltma ─────────────────────────────────────────
   Süs olan her şey durur; İÇERİK GÖRÜNÜR KALIR. Üstü çizilme ve
   "sende" satırı animasyonla değil, doğrudan son hâlinde verilir —
   aksi halde hareketi kapatan kullanıcı metni hiç göremezdi. */
@media (prefers-reduced-motion: reduce) {
  .uva-pay {
    animation: none;
    transform: rotate(var(--uva-aci));
  }
  /* Defter listesi SON HÂLİYLE: işaretli, çizili, "bizde"/"sende" yazılı.
     "sende" kırmızı kalır — o renk süs değil, cümlenin kendisi. */
  .uva-yuk--cizili .uva-karalama__maske,
  .uva-yuk .uva-karalama__maske { animation: none; stroke-dashoffset: 0; }
  .uva-yuk--cizili .uva-yuk__cizgi { animation: none; background-size: 100% 0.42em; }
  .uva-yuk--cizili .uva-yuk__kim, .uva-yuk__kim { animation: none; opacity: 1; transform: rotate(-4deg); }
  .uva-yuk__kim--sende,
  .uva-yuk--cizili .uva-yuk__kim--sende { color: var(--uva-accent); }
  .uva-yuk--cizili .uva-yuk__satir--son .uva-fosfor, .uva-fosfor { animation: none; transform: rotate(-1.2deg) scaleX(1); }
  .uva-cta, .uva-dugme, .uva-link, .uva-sekme, .uva-ust__basvur { transition: none; }
  /* Genişlik SIÇRAR, akmaz: değişimin kendisi kalıyor, animasyonu değil. */
  .uva-hafta__kutu { transition: none; }
  /* Akan kaydırma vestibüler rahatsızlık sebebidir; kapanır. Mürekkep de
     ıslanmaz — ama İZ GÖRÜNÜR KALIR: konum bilgisi bir süs değil, sistem
     çubuğunun yerini tuttuğu için kaybolamaz. */
  html { scroll-behavior: auto; }
  .uva-kalem__uc { transition: none; opacity: 1; }
  .uva-cta:active, .uva-dugme:active { transform: none; }
}

/* ── KVKK aydınlatma metni (diyalog) ─────────────────────────
   AYRI SAYFA DEĞİL. Sahibi "tıklayınca ekranda çıksın" dedi; /gizlilik
   rotası artık buraya yönlendiriyor, yani metnin paylaşılabilir bir
   adresi var ama İKİ KOPYA yok — tek kaynak bu diyalog.

   <dialog>'un getirdikleri elle yazılmıyor: Esc, odak tuzağı, arka planı
   inert'leştirme, ::backdrop. Elle yazılan modallerin çoğu bunlardan
   birini eksik bırakır. */
.uva-kvkk {
  /* Diyalog ÖLÇÜSÜ okumaya göre: 42rem + 19px gövde = satır başına
     ~65 karakter (ölçüldü). Afiş bandı değil, metin sütunu. */
  --uva-kvkk-olcu: 42rem;

  width: min(var(--uva-kvkk-olcu), 100% - 2 * var(--uva-space-9));
  max-height: min(84vh, 56rem);
  padding: 0;
  border: var(--uva-hairline) solid var(--uva-ink);
  border-radius: var(--uva-radius);
  background: var(--uva-paper);
  color: var(--uva-ink);
  font-family: var(--uva-font-body);
  font-size: var(--uva-fs-lead);
  line-height: 1.6;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(34, 33, 29, 0.06), 0 40px 60px -32px rgba(34, 33, 29, 0.5);
}

/* Kağıt, masanın üstüne konuyor: arka plan karartılmıyor, SİSLENİYOR.
   Karartma bu paletin dışında; sayfanın kendi kağıdı arkada duruyor. */
.uva-kvkk::backdrop {
  background: color-mix(in srgb, var(--uva-ink) 34%, transparent);
  backdrop-filter: blur(2px);
}

.uva-kvkk__cerceve { position: relative; max-height: inherit; display: flex; flex-direction: column; }

.uva-kvkk__kapat-sar {
  position: absolute;
  top: var(--uva-space-4);
  right: var(--uva-space-4);
  z-index: 2;
  margin: 0;
}

.uva-kvkk__kapat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--uva-space-9);
  height: var(--uva-space-9);
  padding: 0;
  cursor: pointer;
  color: var(--uva-ink);
  background: var(--uva-paper);
  border: var(--uva-hairline) solid var(--uva-edge);
  border-radius: var(--uva-radius);
  transition: border-color 150ms ease, background-color 150ms ease;
}
.uva-kvkk__kapat:hover { border-color: var(--uva-ink); background: var(--uva-card); }

.uva-kvkk__govde {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--uva-space-9) var(--uva-space-9) var(--uva-space-10);
}

.uva-kvkk__h1 {
  margin: 0;
  font-family: var(--uva-font-display);
  font-size: var(--uva-fs-h2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.uva-kvkk__lead {
  margin: var(--uva-space-5) 0 0;
  font-size: var(--uva-fs-lead);
  color: var(--uva-ink);
  text-wrap: pretty;
}

.uva-kvkk__bolum {
  margin-top: var(--uva-space-9);
  padding-top: var(--uva-space-5);
  border-top: var(--uva-hairline) solid var(--uva-edge);
}

.uva-kvkk__h2 {
  margin: 0 0 var(--uva-space-4);
  font-family: var(--uva-font-display);
  font-size: var(--uva-fs-h3);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.uva-kvkk__bolum p { margin: 0 0 var(--uva-space-4); text-wrap: pretty; }
.uva-kvkk__bolum p:last-child { margin-bottom: 0; }

.uva-kvkk__liste {
  margin: 0 0 var(--uva-space-4);
  padding-left: var(--uva-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--uva-space-2);
}

/* Not gövdeden ayrılır ama SOLMAZ — ayıran şey kenardaki çizgi, gri
   değil. Buradaki notlar tam da en dikkatle okunması gerekenler. */
.uva-kvkk__not {
  border-left: var(--uva-space-1) solid var(--uva-rule);
  padding-left: var(--uva-space-4);
  color: var(--uva-ink);
}

.uva-kunye { margin: 0 0 var(--uva-space-4); display: flex; flex-direction: column; gap: var(--uva-space-3); }
.uva-kunye > div {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: var(--uva-space-4);
  align-items: baseline;
}
.uva-kunye dt { color: var(--uva-ink-soft); font-size: var(--uva-fs-kucuk); }
.uva-kunye dd { margin: 0; }

.uva-kvkk__tarih { margin: var(--uva-space-9) 0 0; font-size: var(--uva-fs-etiket); color: var(--uva-ink-soft); }

@media (max-width: 640px) {
  .uva-kvkk { width: 100%; max-height: 92vh; }
  .uva-kvkk__govde { padding: var(--uva-space-8) var(--uva-space-5) var(--uva-space-9); }
  .uva-kunye > div { grid-template-columns: minmax(0, 1fr); gap: var(--uva-space-1); }
}

/* GÖRSEL YERİNE ÇİZİM. Üç uzantı da bulunamayan yuva kesik çizgili boş
   bir kutu olarak kalıyordu; §04'ün masa yuvası dar ekranda da görünür,
   yani ziyaretçi sayfanın ortasında boş bir kutu görüyordu.
   Kutunun kendisi "burası boş" demenin yoluydu — çizim gelince söyleyecek
   bir şeyi kalmıyor, tıpkı görsel gelince kalkması gibi.
   En sonda, çünkü `--masa` sabit yükseklik veriyor ve çizim kendi
   oranında durmalı. Görsel geldiği gün bu sınıf hiç eklenmiyor. */
.uva-gorsel-yer--cizim {
  border: 0;
  background: none;
  box-shadow: none;
  height: auto;
  padding: 0;
}

/* ── İKİ SÜTUN DAR EKRANDA TEK SÜTUN ──────────────────────────
   Ölçüldü (canlı, 390px): sağdaki sütun 0 piksel genişliğinde ve
   ekranın dışında (x=362) kalıyordu — kullanıcı yalnız 01/02/03
   numaralarını görüyordu, açıklamalar kayboluyordu.
   Sebep: `minmax(0, 30rem)` ilk izi 480px'e kadar büyütüyor ve dar
   ekranda kalana yer bırakmıyor.
   EŞİK ÖLÇÜMDEN: ikinci sütun 520px'e kadar tam SIFIR, 820px'te
   260px — adım metni için hâlâ dar. 900'ün altında tek sütun.
   ============================================================ */
@media (max-width: 900px) {
  .uva-bolum--iki {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Esnek kutunun içeriği taşırmasın: `min-width: auto` uzun bir
     kelimede kutuyu şişirir. */
  .uva-adimlar { min-width: 0; }
}

/* 23 Eyl: `hidden` her öğede kazanır (bkz. bugun.css — Ödeme'de gizlenen
   birincil düğme display:block ile ekranda kalıyordu). Bu sayfa kabuğu
   yüklemediği için kural burada da. */
.uva-acilis [hidden] { display: none !important; }

/* T-7 dokunma hedefi (kabuksuz) */
/* bugun.css T-7 ile ayni kural: bu sayfa kabugu yuklemiyor. Olculdu (390px):
   denetimler 36-41px, sifre goster 28px, baglantilar 17-23px. */
@media (pointer: coarse), (max-width: 959px) {
  .uva-acilis button,
  .uva-acilis select,
  .uva-acilis input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]) {
    min-height: 44px;
  }
  .uva-acilis button { min-width: 44px; }
  .uva-acilis label:has(> input[type="checkbox"]),
  .uva-acilis label:has(> input[type="radio"]) { min-height: 44px; align-items: center; }
  .uva-acilis .uva-link,
  .uva-acilis .uva-marka,
  .uva-acilis .uva-ust__basvur {
    display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
  }
}

/* ── KALEM KARALAMALARI (10 Eki) ─────────────────────────────
   Not defteri: başlıktaki tek kelimenin altı çizilir ya da halkaya
   alınır, ürün görselinin köşesine parıltı, başvuru başlığından
   forma ok. Çizimler cizim.js'ten (karalamaYap) gelir; burada yalnız
   YERLEŞTİRME. Kırmızı YOK — sayfanın vurgu bütçesi (düğme + "sende")
   dolu. Karalama kelimenin kutusuna taşan bir katman: satır yüksekliği,
   satır kırılması ve başlık hizası değişmez. */
.uva-isaret {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  /* Fosfor (z-index: -1) kelimenin ARKASINDA, sayfanın önünde kalsın. */
  isolation: isolate;
}
.uva-isaret__iz {
  position: absolute;
  pointer-events: none;
}
.uva-isaret__iz .uva-karalama { width: 100%; height: 100%; }
/* Alt çizgi: kelimenin altında, iki yana biraz taşar. */
.uva-isaret__iz--alti {
  left: -3%;
  right: -5%;
  bottom: -0.2em;
  height: 0.3em;
}
/* Halka: kelimeyi çevreler, sağa ve sola nefes payı. */
.uva-isaret__iz--halka {
  inset: -0.22em -0.42em -0.18em -0.38em;
}
/* Başlıktaki alt çizgi, başlık yüklenip okunduktan sonra çizilir. */
.uva-h1 .uva-isaret__iz { --uva-ciz-gecikme: 450ms; --uva-ciz-sure: 1100ms; }

/* Ürün görselinin SAĞ ÜST köşesinin dışında üç parıltı — ekranın içine
   değil (ilk denemede "UVA" yazısının üstüne biniyordu). Görsel yuvası
   yüklenince içi temizlendiği için küme sahnede; çerçeve ortalı ve eni
   cihaz oranından geldiği için köşe aynı formülle bulunur. Sahne bir
   kap (container): `top` içinde % YÜKSEKLİK demek, cqw ise hep genişlik. */
.uva-urun__sahne { position: relative; container-type: inline-size; }
.uva-parilti-kume {
  --uva-cerceve: min(100cqw, calc(var(--uva-sahne) * 16 / 10));
  position: absolute;
  /* Dar ekranda çerçeve sahneyi doldurur: küme taşmasın, köşenin içine çekilir. */
  /* 11 Eki: sağ üst köşe artık bandın yeri; parıltılar çerçevenin SAĞ KENARINA,
     ortanın biraz üstüne taşındı. */
  right: max(-8px, calc((100cqw - var(--uva-cerceve)) / 2 - 46px));
  top: 34%;
  width: 58px;
  z-index: 1;
  pointer-events: none;
  --uva-ciz-gecikme: 700ms;
  --uva-ciz-sure: 700ms;
}
.uva-urun[data-cihaz='tablet'] .uva-parilti-kume {
  --uva-cerceve: min(100cqw, calc(var(--uva-sahne) * 4 / 3));
}
.uva-urun[data-cihaz='telefon'] .uva-parilti-kume {
  --uva-cerceve: min(100cqw, calc(var(--uva-sahne) * 9 / 19.5));
}

/* Başvuru başlığından forma kıvrık ok — yalnız sütun arası boşluk okun
   sığacağı kadar genişse (ölçüldü: 980–1300px'te forma biniyordu); tek
   sütunda form zaten başlığın altında. AKIŞTA DEĞİL: ilk
   denemede başlık ile alt paragraf arasında 80px boşluk açıyordu. Sol
   sütunun sağ üst köşesine asılı, başlığın bittiği yerden forma bakar. */
.uva-basvur-ok { display: none; }
@media (min-width: 1360px) {
  #basvur .uva-bolum__sol { position: relative; }
  .uva-basvur-ok {
    display: block;
    position: absolute;
    /* Sütunlar arası boş şeritte: başlığın sağından forma. */
    right: -150px;
    top: 2.2em;
    width: 120px;
    pointer-events: none;
    --uva-ciz-gecikme: 300ms;
  }
}


/* ============================================================
   DEFTER MALZEMELERİ (11 Eki) — el yazısı, fosfor, bant, yapışkan not
   ------------------------------------------------------------
   Sahip prototipten "Defter"i seçti. Hepsi açılışa özgü; uygulama
   tek renk kalır. Hiçbiri veri taşımaz: hepsi aria-hidden ya da
   ekran okuyucuya zaten açık bir cümlenin kendisi (el yazısı not).
   Hareket: açılışta keyframe serbest (uygulama kuralı 6aa67f9f
   uygulama sayfaları için); hepsi azaltılmış harekette son hâlinde.
   ============================================================ */
.uva-el-notu {
  display: inline-block;
  font-family: var(--uva-font-el);
  font-weight: 600;
  font-size: clamp(var(--uva-fs-h3), 1.9vw, var(--uva-fs-h2));
  line-height: 1;
  color: var(--uva-grafit);
  transform: rotate(-3deg);
}
/* Yazılıyor: kalem sağa ilerler — kırpma adım adım açılır (harf harf hissi). */
.uva-yaziliyor { clip-path: inset(0 100% 0 0); animation: uva-yazi-ac 1.1s steps(18, end) var(--uva-yazi-gec, 2s) forwards; }
@keyframes uva-yazi-ac { to { clip-path: inset(0 0 0 0); } }

/* Başlıktaki fosfor yükleme anında geçer; listedekini zincir yönetir. */
.uva-fosfor--yukle { animation: uva-fosfor 0.9s cubic-bezier(0.65, 0, 0.25, 1) 0.35s forwards; }
.uva-h1 .uva-isaret__iz { --uva-ciz-gecikme: 1100ms; }
.uva-kahraman__not .uva-yaziliyor { --uva-yazi-gec: 1.9s; }
.uva-kahraman__not .uva-karalama { --uva-ciz-gecikme: 1500ms; }

/* Ürünün altındaki not: sağa yaslı, oku ekrana kıvrılır. */
.uva-urun__not { position: relative; margin: var(--uva-space-2) 0 0; padding-right: calc(var(--uva-space-11) + var(--uva-space-2)); text-align: right; }
.uva-urun__not .uva-yaziliyor { --uva-yazi-gec: 2.5s; }
.uva-not-ok--yukari { right: 0; top: -44px; width: 64px; }
.uva-urun__not .uva-karalama { --uva-ciz-gecikme: 3000ms; }

/* Bantlar ve yapışkan not ÇERÇEVENİN köşelerine bağlı. Çerçeve sahnede
   ortalı ve eni cihaz oranından geliyor (parıltıyla aynı formül). */
.uva-bant,
.uva-yapiskan {
  --uva-cerceve: min(100cqw, calc(var(--uva-sahne) * 16 / 10));
  --uva-cerceve-boy: calc(var(--uva-cerceve) * 10 / 16);
  --uva-sol-kenar: calc((100cqw - var(--uva-cerceve)) / 2);
  --uva-ust-kenar: calc((var(--uva-sahne) - var(--uva-cerceve-boy)) / 2);
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.uva-urun[data-cihaz='tablet'] :is(.uva-bant, .uva-yapiskan) {
  --uva-cerceve: min(100cqw, calc(var(--uva-sahne) * 4 / 3));
  --uva-cerceve-boy: calc(var(--uva-cerceve) * 3 / 4);
}
.uva-urun[data-cihaz='telefon'] :is(.uva-bant, .uva-yapiskan) { display: none; }

.uva-bant {
  width: 112px;
  height: 32px;
  background: var(--uva-bant);
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 2px, transparent 2px 9px);
  box-shadow: 0 1px 2px rgba(34, 33, 29, 0.08);
  clip-path: polygon(3% 0, 97% 4%, 100% 22%, 96% 46%, 100% 70%, 97% 100%, 2% 96%, 0 74%, 4% 50%, 0 26%);
  opacity: 0;
  animation: uva-bant 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}
.uva-bant--sol { --uva-bant-aci: -32deg; left: calc(var(--uva-sol-kenar) - 38px); top: calc(var(--uva-ust-kenar) - 4px); animation-delay: 0.8s; }
.uva-bant--sag { --uva-bant-aci: 28deg; right: calc(var(--uva-sol-kenar) - 32px); top: calc(var(--uva-ust-kenar) - 8px); animation-delay: 0.95s; }
@keyframes uva-bant {
  from { opacity: 0; transform: rotate(var(--uva-bant-aci)) scale(1.14); }
  to   { opacity: 1; transform: rotate(var(--uva-bant-aci)) scale(1); }
}

.uva-yapiskan {
  left: calc(var(--uva-sol-kenar) - 34px);
  bottom: calc(var(--uva-ust-kenar) + 18px);
  width: clamp(92px, 9vw, 124px);
  aspect-ratio: 1 / 0.92;
  padding: var(--uva-space-3);
  background: linear-gradient(170deg, var(--uva-yapiskan-acik) 0%, var(--uva-yapiskan-koyu) 100%);
  font-family: var(--uva-font-el);
  font-weight: 600;
  font-size: clamp(var(--uva-fs-lead), 1.9vw, var(--uva-fs-h2));
  line-height: 0.95;
  color: var(--uva-grafit);
  box-shadow: 0 1px 1px rgba(34, 33, 29, 0.06), 6px 14px 18px -10px rgba(34, 33, 29, 0.45);
  border-radius: 2px 2px 14px 2px / 2px 2px 26px 2px;
  opacity: 0;
  transform: rotate(-6deg);
  animation: uva-yapis 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) 1.4s forwards, uva-salin 6s ease-in-out 2.4s infinite;
}
.uva-yapiskan__tik { position: absolute; right: 12px; bottom: 12px; width: 26px; display: block; }
.uva-yapiskan__tik { --uva-ciz-gecikme: 900ms; }
@keyframes uva-yapis {
  from { opacity: 0; transform: rotate(-6deg) translateY(-10px) scale(0.92); }
  to   { opacity: 1; transform: rotate(-6deg); }
}
@keyframes uva-salin { 50% { transform: rotate(-4.6deg); } }

@media (max-width: 640px) {
  .uva-not-ok--yukari { display: none; }
  .uva-urun__not { padding-right: 0; }
  .uva-bant { width: 84px; height: 26px; }
}

/* Serbest bantlar: çerçeve formülü yok, kendi kağıdının köşesine asılı.
   Görünür alana gelmeden yapışmasınlar diye açılış gecikmesi yok; bantta
   yalnız yerinde durma hâli var (yükleme animasyonu ilk ekrana ait). */
.uva-bant--serbest { opacity: 1; animation: none; transform: rotate(var(--uva-bant-aci)); z-index: 3; }
.uva-bant--pencere { --uva-bant-aci: -4deg; left: calc(50% - 56px); top: -16px; }
.uva-bant--form { --uva-bant-aci: 34deg; right: -34px; top: -6px; }

@media (prefers-reduced-motion: reduce) {
  .uva-yaziliyor { animation: none; clip-path: none; }
  .uva-fosfor--yukle { animation: none; transform: rotate(-1.2deg) scaleX(1); }
  .uva-bant { animation: none; opacity: 1; transform: rotate(var(--uva-bant-aci)); }
  .uva-yapiskan { animation: none; opacity: 1; }
}


/* ============================================================
   02 · BİR YANLIŞIN YOLCULUĞU (14 Eki)
   ------------------------------------------------------------
   Prototip motion-graphics'te (uva-yanlisin-yolculugu) kare kare
   onaylandı; burada aynı defter, kaydırmaya bağlı.

   İKİ HÂL. Varsayılan DÜZ LİSTE: başlık + altında kendi defter sayfası,
   beş kez. `uva-yol--canli` (acilis.js verir) bölümü ekrana yapıştırır:
   solda başlık, sağda defter; kaydırma adımı seçer, seçilen adım
   aria-current="step" taşır. Azaltılmış harekette, JS'siz ya da eski
   tarayıcıda canlı hâl HİÇ kurulmaz — gizlenen içerik yok.

   DEFTERİN İÇİ 520×460'lık bir tasarım kutusunda (tuval) yerleşir ve
   sütuna göre ÖLÇEKLENİR (--uva-yol-olcek, JS). Yazı boyutları merdiven
   rolleri; ekrandaki boyut ölçekle büyür ya da küçülür.

   HAREKET KURALI: yer değiştirme yok (kart 6aa67f9f). Yalnız opaklık,
   kırpma ve kalemin çizgisi. Kırmızı YOK: bütçe (düğme + "sende") dolu.
   ============================================================ */
.uva-yol__sol { display: flex; flex-direction: column; gap: var(--uva-space-3); }
.uva-yol__sayac { display: none; }

.uva-yol__adimlar {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--uva-space-11);
}
.uva-yol__adim { display: flex; flex-direction: column; gap: var(--uva-space-5); }
.uva-yol__baslik {
  margin: 0;
  font-family: var(--uva-font-display);
  font-size: clamp(var(--uva-fs-h2), 4.5vw, var(--uva-fs-display));
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--uva-ink);
  text-wrap: balance;
}

/* Defter sayfası: kâğıt ve gölge kapta, çizgiler ölçeklenen tuvalde. */
.uva-yol__sahne {
  position: relative;
  width: min(100%, 640px);
  aspect-ratio: 520 / 460;
  overflow: hidden;
  background: var(--uva-defter-kagit);
  border-radius: var(--uva-radius);
  box-shadow: var(--uva-shadow-card-wide);
}
.uva-yol__tuval {
  position: absolute;
  left: 0;
  top: 0;
  width: 520px;
  height: 460px;
  transform-origin: 0 0;
  transform: scale(var(--uva-yol-olcek, 1));
  background-image:
    linear-gradient(90deg, transparent 54px, var(--uva-defter-pay-cizgi) 54px 56px, transparent 56px),
    repeating-linear-gradient(180deg, transparent 0 31px, var(--uva-defter-cizgi) 31px 32px);
}
/* Delikler: pay çizgisinin solunda üç tane. */
.uva-yol__tuval::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 22%;
  bottom: 22%;
  width: 14px;
  background: radial-gradient(circle at 7px 7px, var(--uva-paper) 5px, var(--uva-delik-golge) 6px, transparent 7px) 0 0 / 14px 50% repeat-y;
}
.uva-yol__p { position: absolute; margin: 0; }
.uva-yol__katman { position: absolute; left: 0; top: 0; width: 520px; height: 460px; overflow: visible; pointer-events: none; }
.uva-yol__iz { position: absolute; display: block; pointer-events: none; }
.uva-yol__iz .uva-karalama { width: 100%; height: 100%; }

/* Soru fişi: denemeden kesilip deftere bantlanmış kâğıt. */
.uva-yol__fis {
  display: flex;
  flex-direction: column;
  gap: var(--uva-space-4);
  padding: var(--uva-space-6);
  background: var(--uva-paper);
  border-radius: 3px;
  box-shadow: var(--uva-shadow-card);
  transform-origin: 0 0;
}
.uva-yol__etiket {
  font-size: var(--uva-fs-etiket);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--uva-ink-soft);
  white-space: nowrap;
}
.uva-yol__soru {
  font-family: var(--uva-font-display);
  font-size: var(--uva-fs-h2);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--uva-ink);
  white-space: pre-line;
}
.uva-yol__siklar {
  display: flex;
  justify-content: space-between;
  font-size: var(--uva-fs-lead);
  font-variant-numeric: tabular-nums;
}
.uva-yol__sik { position: relative; white-space: nowrap; }
.uva-yol__sik b { font-weight: 500; color: var(--uva-ink-soft); }
/* Halka şıkkın çevresinde; üstünü çizen iz şıkkın ortasından geçer. */
.uva-yol__sik .uva-yol__iz--halka { left: -22%; right: -22%; top: -30%; bottom: -30%; }
.uva-yol__sik .uva-yol__iz--ustu { left: -6%; right: -6%; top: 38%; height: 0.32em; }
.uva-yol__sik .uva-yol__iz--tik { right: -40%; top: -70%; width: 26px; height: 21px; }

.uva-yol__ad {
  font-family: var(--uva-font-display);
  font-size: var(--uva-fs-h3);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--uva-ink);
}
.uva-yol__kucuk { font-size: var(--uva-fs-kucuk); color: var(--uva-ink-soft); }
.uva-yol__islem {
  font-family: var(--uva-font-display);
  font-size: var(--uva-fs-lead);
  font-weight: 500;
  color: var(--uva-ink);
  white-space: pre;
}
.uva-yol__islem .uva-isaret { white-space: pre; }

/* Konu haritası: basılı kutular, elle çekilmiş bağlar. */
.uva-yol__dugum {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1.5px solid var(--uva-cizim);
  border-radius: var(--uva-radius);
  background: var(--uva-defter-kagit);
  font-family: var(--uva-font-display);
  font-size: var(--uva-fs-govde);
  font-weight: 500;
  color: var(--uva-ink);
  white-space: nowrap;
}
.uva-yol__dugum--kok { font-size: var(--uva-fs-lead); font-weight: 600; }
.uva-yol__hap {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1.5px solid var(--uva-cizim);
  border-radius: 999px;
  background: var(--uva-defter-kagit);
  font-size: var(--uva-fs-kucuk);
  font-variant-numeric: tabular-nums;
  color: var(--uva-ink-soft);
  white-space: nowrap;
}
.uva-yol__hap--koyu { border-color: var(--uva-grafit); color: var(--uva-ink); font-weight: 600; }

/* Reçete kartı: defterin üstüne bantlanmış ayrı kâğıt. */
.uva-yol__recete {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--uva-space-1);
  padding: var(--uva-space-6) var(--uva-space-7) var(--uva-space-3);
  background: var(--uva-paper);
  border-radius: 3px;
  box-shadow: var(--uva-shadow-card);
  transform: rotate(-0.6deg);
}
.uva-yol__recete .uva-yol__ad { font-size: var(--uva-fs-h2); }
.uva-yol__recete .uva-yol__kucuk { margin-bottom: var(--uva-space-3); }
.uva-yol__satir {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: var(--uva-space-2);
  row-gap: var(--uva-space-1);
  padding: var(--uva-space-3) 0;
  border-top: var(--uva-hairline) solid var(--uva-edge);
}
.uva-yol__satir-no { font-size: var(--uva-fs-etiket); font-weight: 600; color: var(--uva-ink-soft); font-variant-numeric: tabular-nums; line-height: 1.9; }
.uva-yol__satir-ad { font-family: var(--uva-font-display); font-size: var(--uva-fs-lead); font-weight: 500; color: var(--uva-ink); white-space: nowrap; }
.uva-yol__satir-ad span { color: var(--uva-ink-soft); }
.uva-yol__sebep { grid-column: 2; font-size: var(--uva-fs-kucuk); line-height: 1.4; color: var(--uva-ink-soft); }
.uva-yol__sebep b { font-weight: 600; color: var(--uva-ink); }

.uva-yol__yapiskan {
  box-sizing: border-box;
  padding: var(--uva-space-4);
  background: linear-gradient(170deg, var(--uva-yapiskan-acik) 0%, var(--uva-yapiskan-koyu) 100%);
  box-shadow: 0 1px 1px rgba(34, 33, 29, 0.06), 6px 14px 18px -10px rgba(34, 33, 29, 0.45);
  border-radius: 2px 2px 14px 2px / 2px 2px 26px 2px;
  font-family: var(--uva-font-el);
  font-size: var(--uva-fs-h3);
  font-weight: 600;
  line-height: 0.95;
  color: var(--uva-grafit);
  white-space: pre-line;
  transform: rotate(5deg);
}
.uva-yol__not {
  font-family: var(--uva-font-el);
  font-size: var(--uva-fs-h2);
  font-weight: 600;
  line-height: 1;
  color: var(--uva-grafit);
  white-space: nowrap;
  transform: rotate(-3deg);
  transform-origin: 0 50%;
}
.uva-yol__gun { display: flex; flex-direction: column; align-items: center; gap: var(--uva-space-1); }
/* Büyük harf metnin kendisinde (JS, tr yereli): sözleşme §2 uppercase'i iki sınıfa ayırıyor. */
.uva-yol__gun span { font-size: var(--uva-fs-etiket); font-weight: 600; letter-spacing: 0.1em; color: var(--uva-ink-soft); }
.uva-yol__gun b { font-family: var(--uva-font-display); font-size: var(--uva-fs-lead); font-weight: 500; color: var(--uva-ink-soft); font-variant-numeric: tabular-nums; }
.uva-yol__gun--uc b { font-weight: 700; color: var(--uva-ink); }
.uva-yol .uva-bant { opacity: 1; animation: none; }

/* Düz hâlde fosfor sürülmüş durur; canlı hâlde adım gelince sürülür. */
.uva-yol .uva-fosfor { transform: rotate(-1.2deg) scaleX(1); }

/* ── Canlı hâl: yapışık iki sütun ─────────────────────────── */
/* Adım başına ~0,6 ekran kaydırma. Beş adım + bir ekran yapışma payı. */
.uva-yol--canli .uva-yol__ray { height: calc(100svh + 5 * 62svh); }
.uva-yol--canli .uva-yol__sabit {
  position: sticky;
  top: 0;
  height: 100svh;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: minmax(0, 1fr);
  column-gap: clamp(var(--uva-space-8), 5vw, var(--uva-space-12));
  padding: var(--uva-space-10) 0;
}
.uva-yol--canli .uva-yol__sol { grid-column: 1; grid-row: 1; justify-content: space-between; }
.uva-yol--canli .uva-yol__sayac { display: flex; align-items: center; gap: var(--uva-space-2); }
.uva-yol--canli .uva-yol__adimlar {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 1;
  grid-template-columns: subgrid;
  gap: 0;
}
.uva-yol--canli .uva-yol__adim {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
  gap: 0;
  /* Giden adım, gelen adım üstüne oturana kadar BEKLER, sonra kaybolur:
     kâğıt hiçbir anda yarı saydam olmaz. */
  opacity: 0;
  transition: opacity 10ms linear 400ms;
}
.uva-yol--canli .uva-yol__adim[aria-current="step"] { opacity: 1; z-index: 1; transition: opacity 380ms ease; }
.uva-yol--canli .uva-yol__baslik { grid-column: 1; min-width: 0; padding-right: var(--uva-space-6); }
.uva-yol--canli .uva-yol__sahne {
  grid-column: 2;
  justify-self: end;
  width: min(100%, calc((100svh - 2 * var(--uva-space-10)) * 520 / 460));
}

.uva-yol__sayac i { display: block; width: var(--uva-space-6); height: 3px; border-radius: 2px; background: var(--uva-rule); transition: width 300ms ease, background-color 300ms ease; }
.uva-yol__sayac i.uva-yol__sayac--gecti { background: var(--uva-ink); }
.uva-yol__sayac i.uva-yol__sayac--simdi { width: var(--uva-space-11); background: var(--uva-ink); }
.uva-yol__sayac span { white-space: nowrap; margin-left: var(--uva-space-3); font-size: var(--uva-fs-kucuk); font-weight: 600; color: var(--uva-ink-soft); font-variant-numeric: tabular-nums; }

/* Seçilen adımın içi sırayla gelir: parça (belir), el yazısı (yazı),
   fosfor; kalem izleri cizim.css'in data-ciz geçişiyle çizilir. */
.uva-yol--canli .uva-yol__belir { opacity: 0; transition: opacity 360ms ease; }
.uva-yol--canli .uva-yol__adim[aria-current="step"] .uva-yol__belir { opacity: 1; transition-delay: var(--g, 0ms); }
.uva-yol--canli .uva-yol__yazi { clip-path: inset(-30% 104% -40% -6%); transition: clip-path 900ms steps(16, end); }
.uva-yol--canli .uva-yol__adim[aria-current="step"] .uva-yol__yazi { clip-path: inset(-30% -12% -40% -6%); transition-delay: var(--g, 0ms); }
.uva-yol--canli .uva-fosfor { transform: rotate(-1.2deg) scaleX(0); transition: transform 700ms cubic-bezier(0.65, 0, 0.25, 1); }
.uva-yol--canli .uva-yol__adim[aria-current="step"] .uva-fosfor { transform: rotate(-1.2deg) scaleX(1); transition-delay: var(--g, 0ms); }

@media (max-width: 860px) {
  .uva-yol--canli .uva-yol__sabit {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: var(--uva-space-5);
    padding: var(--uva-space-8) 0 var(--uva-space-6);
  }
  .uva-yol--canli .uva-yol__sol { flex-direction: row; align-items: center; justify-content: space-between; }
  .uva-yol--canli .uva-yol__adimlar { grid-column: 1; grid-row: 2; grid-template-columns: minmax(0, 1fr); }
  /* Dar ekranda başlık + defter, kalan yüksekliğin ortasında. */
  .uva-yol--canli .uva-yol__adim { grid-column: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: var(--uva-space-5); }
  .uva-yol--canli .uva-yol__sahne { width: min(100%, calc((100svh - 300px) * 520 / 460)); align-self: center; }
  .uva-yol__sayac i { width: var(--uva-space-3); }
  .uva-yol__sayac i.uva-yol__sayac--simdi { width: var(--uva-space-7); }
}

/* ============================================================
   KAHRAMAN · K0 KENAR NOTLARI (14 Eki)
   Gerçek ekran görüntüsünün ÜSTÜNE kalem: "4 adım" halkaya alınır,
   sebep cümlesinin altı çizilir, "her adımın sebebi" notunun oku o
   cümleye bağlanır. Görsele arayüz EKLENMEZ — yalnız kalem (K0 kuralı:
   ürünün kendisi, uydurma değil). İz görselin piksel koordinatında
   (viewBox = görselin boyu), yani çerçeve ne kadarsa iz o kadar.
   ============================================================ */
.uva-urun { position: relative; }
.uva-gorsel-yer--urun { position: relative; }
.uva-k0-iz {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.uva-k0-ok { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 3; }
/* Hesaplanan ok çizildiyse genel yukarı ok emekli: aynı notun iki oku olmaz. */
.uva-urun--k0-ok .uva-not-ok--yukari { display: none; }

/* ============================================================
   05 · BAŞVURU · MÜHÜR ANI (14 Eki)
   Yalnız sunucu başvuruyu KABUL ETTİĞİNDE oynar (y.ok). Form üçe
   katlanır, zarfa girer, kapak kapanır, kör kabartma mühür basılır.
   Kırmızı mühür YOK: üçüncü kırmızı olurdu; mühür token'ları
   (--uva-seal-*) giriş sayfasındaki damlanın aynısı.
   Katlanan kâğıt formun KOPYASI (inert, aria-hidden); gerçek form
   yerinde görünmez durur, sayfa bir piksel bile oynamaz. Onay cümlesi
   kopyada değil formda, role="status" — ekran okuyucu duyar.
   ============================================================ */
.uva-form--muhurlu { background: transparent; border-color: transparent; box-shadow: none; }
.uva-form--muhurlu > :not(.uva-muhur):not(.uva-muhur__onay) { visibility: hidden; }

.uva-muhur {
  position: absolute;
  inset: -1px;
  perspective: 1600px;
  pointer-events: none;
  z-index: 4;
}
.uva-muhur__mektup {
  position: absolute;
  inset: 0;
  z-index: 3;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
}
.uva-muhur__dilim {
  position: absolute;
  left: 0;
  width: 100%;
  height: calc(100% / 3);
  transform-style: preserve-3d;
  transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1);
}
.uva-muhur__dilim--ust { top: 0; transform-origin: 50% 100%; z-index: 3; }
.uva-muhur__dilim--orta { top: calc(100% / 3); z-index: 1; }
.uva-muhur__dilim--alt { top: calc(200% / 3); transform-origin: 50% 0; z-index: 2; }
.uva-muhur__yuz {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  background: var(--uva-paper);
  border-inline: var(--uva-hairline) solid var(--uva-edge);
}
.uva-muhur__dilim--ust .uva-muhur__yuz { border-top: var(--uva-hairline) solid var(--uva-edge); }
.uva-muhur__dilim--alt .uva-muhur__yuz { border-bottom: var(--uva-hairline) solid var(--uva-edge); }
.uva-muhur__yuz--arka { transform: rotateX(180deg); border: var(--uva-hairline) solid var(--uva-edge); }
.uva-muhur__kopya { position: absolute; left: 0; width: 100%; max-width: none; box-shadow: none; border-color: transparent; }

.uva-muhur--katla1 .uva-muhur__dilim--alt { transform: rotateX(180deg); }
.uva-muhur--katla2 .uva-muhur__dilim--ust { transform: rotateX(-180deg); }
.uva-muhur--zarfa .uva-muhur__mektup { transform: translateY(var(--uva-muhur-y, 0px)) scale(var(--uva-muhur-s, 0.8)); }

/* Zarf: arka (1) · açık kapak (2) · mektup (3) · ön cep (4) · kapalı kapak (5) · mühür (6) */
.uva-muhur__zarf-arka,
.uva-muhur__zarf-on,
.uva-muhur__kapak {
  position: absolute;
  left: calc(50% - var(--uva-zarf-g) / 2);
  top: var(--uva-zarf-ust);
  width: var(--uva-zarf-g);
  height: calc(var(--uva-zarf-g) / 2);
  opacity: 0;
  transition: opacity 300ms ease;
}
.uva-muhur__zarf-arka { z-index: 1; background: var(--uva-edge); border-radius: 3px; box-shadow: var(--uva-shadow-card-wide); }
.uva-muhur__zarf-on { z-index: 4; overflow: visible; }
.uva-muhur__zarf-on .is-cep { fill: var(--uva-card); }
.uva-muhur__zarf-on .is-kat { fill: none; stroke: var(--uva-edge); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.uva-muhur__kapak {
  z-index: 2;
  height: calc(var(--uva-zarf-g) / 2 * 0.58);
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  transform: rotateX(180deg);
  transition: opacity 300ms ease, transform 520ms cubic-bezier(0.65, 0, 0.35, 1), z-index 0s linear 260ms;
}
.uva-muhur__kapak i {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  backface-visibility: hidden;
  background: var(--uva-card);
}
.uva-muhur__kapak i + i { transform: rotateX(180deg); background: var(--uva-edge); }
.uva-muhur--zarf :is(.uva-muhur__zarf-arka, .uva-muhur__zarf-on, .uva-muhur__kapak) { opacity: 1; }
.uva-muhur--kapali .uva-muhur__kapak { transform: rotateX(0deg); z-index: 5; }

.uva-muhur__damga {
  position: absolute;
  left: calc(50% - 32px);
  top: calc(var(--uva-zarf-ust) + var(--uva-zarf-g) / 2 * 0.56 - 50px);
  width: 64px;
  height: 83px;
  z-index: 6;
  overflow: visible;
  opacity: 0;
  transform: rotate(-4deg) scale(1.35);
  transition: opacity 160ms ease, transform 380ms cubic-bezier(0.3, 1.6, 0.5, 1);
}
.uva-muhur__damga path { fill: none; stroke-width: 1.3; stroke-linejoin: round; }
.uva-muhur__damga .is-dolgu { fill: var(--uva-seal-ink); fill-opacity: var(--uva-seal-ink-opacity); stroke: none; }
.uva-muhur__damga .is-kabartma { stroke: var(--uva-seal-relief); }
.uva-muhur__damga .is-iz { stroke: rgba(34, 33, 29, 0.22); }
/* Harf boyu SVG niteliği (font-size="7", kullanıcı birimi): mühür viewBox 34×44, punto o kutuya göre. */
.uva-muhur__damga text { font-family: var(--uva-font-heading); font-weight: 600; letter-spacing: 0.12em; fill: rgba(34, 33, 29, 0.28); }
.uva-muhur--basildi .uva-muhur__damga { opacity: 1; transform: rotate(-4deg) scale(1); }

.uva-muhur__not {
  position: absolute;
  right: calc(50% - var(--uva-zarf-g) / 2 - var(--uva-space-2));
  top: calc(var(--uva-zarf-ust) - var(--uva-space-12));
  z-index: 7;
  clip-path: inset(-30% 104% -40% -6%);
  transition: clip-path 900ms steps(16, end);
}
.uva-muhur--bitti .uva-muhur__not { clip-path: inset(-30% -12% -40% -6%); }
/* Onay cümlesi zarfın ALTINDA; gerçek formun içinde, kopyada değil. */
.uva-muhur__onay {
  position: absolute;
  left: calc(50% - var(--uva-zarf-g) / 2);
  top: calc(var(--uva-zarf-ust) + var(--uva-zarf-g) / 2 + var(--uva-space-6));
  width: var(--uva-zarf-g);
  z-index: 5;
  margin: 0;
  padding-left: var(--uva-space-3);
  border-left: 2px solid var(--uva-rule);
  font-size: var(--uva-fs-kucuk);
  font-weight: 600;
  color: var(--uva-ink);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .uva-yol__adim, .uva-yol__belir { opacity: 1; transition: none; }
  .uva-yol__yazi { clip-path: none; transition: none; }
  .uva-yol .uva-fosfor { transform: rotate(-1.2deg) scaleX(1); transition: none; }
  .uva-muhur__mektup, .uva-muhur__dilim, .uva-muhur__kapak, .uva-muhur__damga,
  .uva-muhur__zarf-arka, .uva-muhur__zarf-on, .uva-muhur__not { transition: none; }
}