/* Bayraktar Robotik: sitenin tek stil dosyası.

   Düzen: 1 renkler (açık + koyu), 2 yazı ve boşluk ölçeği, 3 temel, 4 üst bant ve proje çubuğu, 5 bölümler ve
   kartlar, 6 ana sayfa, 7 proje sayfaları (Meow Ops, Financial AI ve yenileri), 8 metin sayfaları, 9 alt bant,
   10 404, 11 hareket ve baskı.

   Renkler Ortak R logosundan (brand/README.md): mandalina #E85D10, mürekkep #2A1F1A, krem #FFF5EA, nane #2BC4A4.
   Mandalina ve nane yalnız grafikte ve büyük öğelerde; düz metin rengi --accent'tir (iki temada AA, check.py ölçer).
   Koyu tema işletim sisteminin ayarından (prefers-color-scheme). Harici yazı tipi yok: sistem yazı tipleri. */

/* 1 · Renkler ---------------------------------------------------------------------------------------------------- */

:root {
  color-scheme: light dark;
  --brand: #e85d10;
  --brand-ink: #2a1f1a;
  --brand-cream: #fff5ea;
  --brand-mint: #2bc4a4;
  --bg: #fff8f1;
  --surface: #ffffff;
  --surface-2: #fdeee0;
  --text: #2a1f1a;
  --muted: #66564b;
  --line: #ead9c8;
  --accent: #b0440b;
  --accent-hover: #873205;
  --accent-soft: #ffe7d4;
  --focus: #0b6b58;
  --game-bg: #1d1410;
  --game-text: #fff5ea;
  --game-muted: #e6d2bf;
  --game-accent: #ffb07f;
  --shadow: 0 1px 2px rgb(42 31 26 / 0.06), 0 12px 32px -14px rgb(42 31 26 / 0.28);
  --shadow-lift: 0 2px 4px rgb(42 31 26 / 0.08), 0 22px 44px -18px rgb(42 31 26 / 0.38);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17110d;
    --surface: #211914;
    --surface-2: #2a1f18;
    --text: #fff5ea;
    --muted: #cbb9a9;
    --line: #3d3027;
    --accent: #ff9a5c;
    --accent-hover: #ffbd93;
    --accent-soft: #3b2519;
    --focus: #5fe0c5;
    --shadow: 0 1px 0 rgb(255 245 234 / 0.04), 0 12px 32px -16px rgb(0 0 0 / 0.7);
    --shadow-lift: 0 1px 0 rgb(255 245 234 / 0.06), 0 22px 44px -18px rgb(0 0 0 / 0.8);
  }
}

/* 2 · Yazı ve boşluk ölçeği -------------------------------------------------------------------------------------- */

:root {
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.1875rem;
  --fs-lg: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --fs-xl: clamp(1.625rem, 1.3rem + 1.3vw, 2.25rem);
  --fs-2xl: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);
  --fs-3xl: clamp(2.375rem, 1.5rem + 4vw, 4.25rem);
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 6rem;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --wrap: 72rem;
  --measure: 44rem;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
}

/* 3 · Temel ------------------------------------------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: var(--fs-base)/1.6 var(--font);
  overflow-wrap: break-word;
}

main {
  flex: 1 0 auto;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: var(--accent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--accent-hover);
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-2xl);
  font-weight: 800;
  margin: 0 0 var(--sp-3);
}

h2 {
  font-size: var(--fs-xl);
  font-weight: 800;
  margin: var(--sp-7) 0 var(--sp-4);
}

h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  margin: var(--sp-6) 0 var(--sp-2);
}

p,
ul,
ol,
dl {
  margin: 0 0 var(--sp-4);
}

ul,
ol {
  padding-left: 1.4rem;
}

li + li {
  margin-top: 0.35rem;
}

strong {
  font-weight: 700;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Erişilebilirlik: klavyeyle ilk sekmede görünen "İçeriğe geç" bağlantısı */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -10rem;
  z-index: 20;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--focus);
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  top: 0.5rem;
}

.eyebrow {
  margin: 0 0 var(--sp-3);
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.lead {
  font-size: var(--fs-md);
  color: var(--muted);
  max-width: var(--measure);
}

.subtitle {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--muted);
}

.meta {
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* Düğmeler: hap biçimi; birincil düğme metin renginde (iki temada tersine döner), üstüne gelince mandalina */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: var(--sp-5) 0 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
  padding: 0.6rem 1.25rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.btn-primary {
  background: var(--text);
  color: var(--bg);
}

.btn-primary:hover {
  background: var(--brand);
  color: var(--brand-ink);
}

.btn-ghost {
  border-color: var(--line);
  color: var(--text);
}

.btn-ghost:hover {
  border-color: var(--brand);
  color: var(--text);
}

/* Etiketler ve durum */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  padding: 0;
  list-style: none;
}

.chips li {
  margin: 0;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: var(--accent-soft);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.status::before {
  content: "";
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--brand-mint);
  box-shadow: 0 0 0 4px rgb(43 196 164 / 0.22);
}

.status-soon::before {
  background: var(--brand);
  box-shadow: 0 0 0 4px rgb(232 93 16 / 0.22);
}

.inline-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-5);
  padding: 0;
  list-style: none;
}

.inline-links li + li {
  margin-top: 0;
}

/* 4 · Üst bant ve proje çubuğu ----------------------------------------------------------------------------------- */

.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-5);
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-2);
}

.brand {
  display: block;
  margin-right: auto;
  padding: var(--sp-1) 0;
  border-radius: 8px;
}

.brand img {
  width: 150px;
  height: auto;
}

.site-nav {
  order: 3;
  flex-basis: 100%;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav li + li {
  margin-top: 0;
}

.site-nav a {
  display: inline-block;
  padding: var(--sp-2) 0;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

.site-nav a:hover {
  border-bottom-color: var(--brand);
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.3rem 0.95rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
}

.lang-switch:hover {
  border-color: var(--brand);
  color: var(--text);
}

@media (min-width: 48rem) {
  .brand img {
    width: 169px;
  }

  .header-inner {
    padding-top: var(--sp-4);
    padding-bottom: var(--sp-4);
  }

  .site-nav {
    order: 0;
    flex-basis: auto;
  }
}

/* Proje çubuğu: proje sayfalarının üstünde "Projeler" ve projenin kendi sayfaları */
.project-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}

.project-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-2);
}

.crumb {
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
}

.crumb:hover {
  color: var(--text);
}

.crumb-sep {
  color: var(--muted);
}

.project-bar ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-bar li + li {
  margin-top: 0;
}

.project-bar ul a {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.project-bar ul a:hover {
  background: var(--accent-soft);
}

.project-bar ul a[aria-current="page"] {
  background: var(--text);
  color: var(--bg);
}

/* 5 · Bölümler ve kartlar ---------------------------------------------------------------------------------------- */

.section {
  padding: var(--sp-7) 0;
}

@media (min-width: 52rem) {
  .section {
    padding: var(--sp-8) 0;
  }
}

.section h2 {
  margin-top: 0;
}

.section-tint {
  background: var(--surface-2);
}

.section-head {
  max-width: var(--measure);
  margin-bottom: var(--sp-6);
}

.section-head p {
  color: var(--muted);
  font-size: var(--fs-md);
  margin-bottom: 0;
}

/* Bölüm başlığının önündeki küçük mandalina çizgi */
.section h2::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 0.375rem;
  margin-bottom: var(--sp-4);
  border-radius: 999px;
  background: var(--brand);
}

.card {
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.card h3 {
  margin-top: 0;
}

.card p:last-child {
  margin-bottom: 0;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.grid-3 > li + li {
  margin-top: 0;
}

/* Simge kutusu (alanlar, öne çıkanlar, ilkeler) */
.icon-tile {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: var(--sp-4);
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
}

.icon-tile svg {
  width: 1.75rem;
  height: 1.75rem;
}

/* Kısa bilgiler (dl) */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(10.5rem, 100%), 1fr));
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
}

@media (min-width: 48rem) {
  .facts {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }
}

.facts div {
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.facts dt {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.facts dd {
  margin: 0.15rem 0 0;
  font-weight: 700;
}

/* Proje kartları: ana sayfadaki "Projeler" listesi. Yeni proje: README, "Yeni proje ekleme". auto-fit: iki kart
   geniş ekranda satırı paylaşır, üç ve fazlası üç sütun; tablette iki, telefonda bir sütun. */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-grid > li + li {
  margin-top: 0;
}

.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: transform 0.2s, box-shadow 0.2s;
}

.project-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.project-card:has(.project-link:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.project-media {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}

.project-media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.project-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  padding: var(--sp-5);
}

.project-kind {
  margin: 0 0 var(--sp-1);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.project-body h3 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xl);
}

.project-link {
  color: var(--text);
  text-decoration: none;
}

/* Kartın tamamı başlık bağlantısıyla tıklanır; kartın alt bağlantıları bunun üstünde kalır */
.project-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.project-link:focus-visible {
  outline: none;
}

.project-card:hover .project-link {
  color: var(--accent);
}

.project-body .status {
  margin-top: auto;
}

.card-links {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-5);
  width: 100%;
  margin: 0;
  padding: var(--sp-3) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.card-links li + li {
  margin-top: 0;
}

/* 6 · Ana sayfa -------------------------------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: var(--sp-6) 0 var(--sp-5);
}

.hero-grid {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}

.hero h1 {
  font-size: var(--fs-3xl);
  max-width: 17ch;
}

.hero .lead {
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
}

/* Sağdaki kolaj: büyük amblem kutusu, arkada mandalina daire, iki küçük proje kutusu */
.hero-art {
  position: relative;
  width: min(80%, 19rem);
  aspect-ratio: 1;
  margin: 0 auto;
}

.hero-art .blob {
  position: absolute;
  inset: 6% 0 0 8%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff8a4c, var(--brand) 70%);
}

.hero-art .ring {
  position: absolute;
  left: -2%;
  bottom: 2%;
  width: 26%;
  aspect-ratio: 1;
  border: 0.9rem solid var(--text);
  border-radius: 50%;
}

.hero-art .dot {
  position: absolute;
  top: 2%;
  right: 12%;
  width: 7%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--brand-mint);
}

.hero-mark {
  position: absolute;
  inset: 22% 14% 14% 20%;
  display: grid;
  place-items: center;
  padding: 12%;
  background: var(--surface);
  border-radius: 28%;
  box-shadow: var(--shadow-lift);
  rotate: -4deg;
}

.hero-mark img {
  width: 100%;
  height: auto;
}

.hero-chip {
  position: absolute;
  display: grid;
  place-items: center;
  width: 24%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 4px solid var(--surface);
  border-radius: 24%;
  box-shadow: var(--shadow-lift);
}

.hero-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-chip-game {
  top: 8%;
  left: 6%;
  rotate: -9deg;
}

.hero-chip-research {
  right: 2%;
  bottom: 6%;
  background: var(--brand-ink);
  color: var(--brand);
  rotate: 8deg;
}

.hero-chip-research svg {
  width: 52%;
  height: 52%;
}

@media (min-width: 52rem) {
  .hero {
    padding: var(--sp-8) 0 var(--sp-9);
  }

  .hero-grid {
    grid-template-columns: 1.15fr 1fr;
  }

  .hero-art {
    width: min(100%, 26rem);
  }
}

.about-grid {
  display: grid;
  gap: var(--sp-6);
  align-items: start;
}

.about-text p {
  font-size: var(--fs-md);
  max-width: var(--measure);
}

@media (min-width: 52rem) {
  .about-grid {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--sp-8);
  }

  .about-grid .facts {
    grid-template-columns: 1fr;
  }
}

/* Henüz projesi olmayan alan (niyet): kesikli çerçeve, gölgesiz */
.area-intent {
  background: transparent;
  border-style: dashed;
  border-width: 2px;
  box-shadow: none;
}

.contact-card .btn {
  margin-top: var(--sp-1);
}

.email-link {
  font-size: var(--fs-md);
  font-weight: 700;
}

/* Vinç: ana sayfanın kaydırmaya bağlı süsü (README "Vinç"). Geniş ekranda sağ boşlukta, sayfanın sağ kenarına bağlı
   eklemli kol; halatın ucunda logolu bir konteyner. Sayfa aşağı kaydıkça konteyner iner ve İletişim'in yanında alt
   bandın çizgisine (zemin) konar; sonra forklift konteynerden bir sandık alır, döner ve sol boşluktaki mini fabrikaya
   götürür. Dar ekranda kol yok: konteyner, forklift ve fabrika İletişim bölümünün altındaki şeritte, aynı sahneyle.
   Burada sahnenin SON hali duruyor ("Hareketi azalt" bunu gösterir); hareket açıkken 11. bölüm başlangıç halini koyar
   ve kaydırmaya bağlar. Ölçüler çizim birimiyle: --u bir birim; kol, konteyner ve fabrika 144 birim genişliğinde
   çerçevelere çizili. --ff fabrika çerçevesinin, --cf konteyner (kol) çerçevesinin sol kenarı, .crane'in sol
   kenarından. Örnek: sandık konteynerin kapı aralığında, çerçevenin 25,5 biriminde: left = --cf + 24,5u (çizimin
   1 birimlik payı). Bütün sayılar tools/vinc.py'den. Süs (aria-hidden), tıklanmaz, sayfa düzenine girmez. */
main {
  position: relative;
}

.crane {
  display: none;
}

@supports (container-type: inline-size) {
  /* Dar ekran (şerit): 1 birim ≤ 1 px; fabrika metin sütununun solunda, konteyner sağında */
  .crane {
    --u: clamp(0.75px, (100cqw - 2 * var(--gutter)) / 380, 1px);
    --ff: calc(var(--gutter) - 10 * var(--u));
    --cf: calc(100cqw - var(--gutter) - 120 * var(--u));
    --crane-land: 1rem;
    --crane-head: 8rem;
    display: block;
    position: absolute;
    inset: 0;
    overflow-x: clip;
    container-type: inline-size;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
  }

  /* Geniş ekran: metin sütununun iki yanındaki boşluklar (≥ ~124 px); çerçeve boşluğa göre 96-192 px, metinden en
     az 18 px uzakta. 1280 px'te kol oyuncak gibi küçük kalıyordu (2026-10-02 denemesi); orada şerit düzeni. */
  @media (min-width: 84.5rem) {
    .crane {
      --g: calc((100cqw - var(--wrap)) / 2 + var(--gutter));
      --u: calc(min(var(--g) - 2.25rem, 12rem) / 144);
      --ff: calc((var(--g) - 144 * var(--u)) / 2);
      --cf: calc(100cqw - (var(--g) + 144 * var(--u)) / 2);
    }
  }

  /* Dar ekranda sahneye yer: son bölümün (İletişim) altına şerit. :has() bilmeyen tarayıcıda dar ekranda sahne yok.
     Bu blok dıştaki @supports'a bağlı: o koşul tutmazsa (README "Vinç", "Kapatmak") şerit de kalkar. */
  @supports selector(:has(*)) {
    @media screen and (width < 84.5rem) {
      main:has(> .crane) > section:last-of-type {
        padding-bottom: calc(var(--sp-6) + 5.5rem);
      }
    }
  }

  @supports not selector(:has(*)) {
    @media (width < 84.5rem) {
      .crane {
        display: none;
      }
    }
  }
}

/* Kol ve konteyner çerçevesi. Dar ekranda yalnız konteyner, zeminde. */
.crane-frame {
  position: absolute;
  z-index: 3;
  left: var(--cf);
  bottom: 0;
  width: calc(144 * var(--u));
  height: calc(72 * var(--u));
  container-type: inline-size;
}

.crane-arm,
.crane-cable,
.crane-hook,
.crane-brace,
.crane-mount {
  display: none;
}

/* Kol sağ kenara bağlı: omuzdan sağa giden yatay kol çizimin dışına taşar (overflow: visible) ve sayfanın sağ
   kenarında kesilir (.crane'in overflow-x: clip'i); ucunda, kenara yaslı duvar plakası (.crane-mount) ve yatay kolun
   altında payanda (.crane-brace). Çerçeve boşluğun ortasında olduğu için plaka ile omuz arası ekran genişledikçe uzar
   (1352-1600 px'te ~19-35 px, 1920'de ~115 px, 2560'ta ~275 px); payanda onunla büyür. */
.crane-arm {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Payanda --bw × --bh: görünen yatay kolun (omuz ekleminin sağı --cf + 135u ile plaka arası) %45'i, en az 8 birim;
   45°, en çok 48 birim. Plaka CSS kutusu: payandanın ayağına kadar uzar (cıvatalar ::before/::after);
   forced-color-adjust: yüksek karşıtlık modunda rengi silinmesin. */
.crane-brace,
.crane-mount {
  --bw: max(8 * var(--u), (100cqw - var(--cf) - 142 * var(--u)) * 0.45);
  --bh: min(var(--bw), 48 * var(--u));
  position: absolute;
  z-index: 4;
}

.crane-brace {
  top: calc(51 * var(--u));
  right: calc(7 * var(--u));
  width: var(--bw);
  height: var(--bh);
  overflow: visible;
}

.crane-mount {
  top: calc(24 * var(--u));
  right: 0;
  width: calc(7 * var(--u));
  height: max(44 * var(--u), var(--bh) + 34 * var(--u));
  border-radius: calc(1.5 * var(--u));
  background: var(--text);
  forced-color-adjust: none;
}

.crane-mount::before,
.crane-mount::after {
  content: "";
  position: absolute;
  left: calc(1.8 * var(--u));
  width: calc(3.4 * var(--u));
  height: calc(3.4 * var(--u));
  border-radius: 50%;
  background: var(--bg);
}

.crane-mount::before {
  top: calc(3.3 * var(--u));
}

.crane-mount::after {
  bottom: calc(3.3 * var(--u));
}

/* Halat ve yük: kolun ucundan zemine kadar uzanan, dışarı taşanı kesen kuyu. Yük kuyunun dibinde durur (son hal);
   inişte yukarıdan aşağı kayar. Halat yükle birlikte iner ve üstü kuyunun ağzında kesilir; yalnız transform ile
   "uzar". */
.crane-shaft {
  position: absolute;
  inset: 0;
  overflow: hidden;
  overflow: clip;
  container-type: size;
}

@media (min-width: 84.5rem) {
  .crane-frame {
    top: 0;
    height: auto;
  }

  .crane-arm,
  .crane-cable,
  .crane-brace,
  .crane-mount {
    display: block;
  }

  .crane-hook {
    display: inline;
  }

  .crane-shaft {
    top: 136.11cqw;
  }
}

.crane-cable {
  position: absolute;
  left: calc(47.22% - 0.75px);
  bottom: 50cqw;
  width: 1.5px;
  height: 100cqh;
  background: var(--muted);
}

.crane-load {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

.crane-load svg {
  width: 100%;
  height: auto;
}

.crane-logo {
  position: absolute;
  top: 22.22cqw;
  left: 48.09%;
  width: 22.22cqw;
}

.crane-logo img {
  width: 100%;
}

.crane-shadow {
  position: absolute;
  bottom: -2cqw;
  left: 11.11%;
  width: 72.22%;
  height: 6cqw;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(42 31 26 / 0.26), rgb(42 31 26 / 0));
}

/* Zemindeki sahne. Katlar: 1 konteynerin ve fabrikanın karanlık içi, 2 sandıklar ve forklift, 3 konteyner (kol
   çerçevesi) ve fabrikanın ön yüzü; açılan kapıların ardında içerisi ve sandık görünür. */
.crane-hollow {
  position: absolute;
  z-index: 1;
  background: var(--brand-ink);
}

.crane-hold {
  left: calc(var(--cf) + 19 * var(--u));
  bottom: calc(2 * var(--u));
  width: calc(31 * var(--u));
  height: calc(41 * var(--u));
}

.crane-mill-hollow {
  left: calc(var(--ff) + 80 * var(--u));
  bottom: 0;
  width: calc(36 * var(--u));
  height: calc(34 * var(--u));
}

.crane-crate {
  position: absolute;
  z-index: 2;
  bottom: var(--u);
  width: calc(20 * var(--u));
  height: calc(17 * var(--u));
}

.crane-crate-a {
  left: calc(var(--cf) + 24.5 * var(--u));
  opacity: 0;
}

.crane-crate-c {
  left: calc(var(--ff) + 88 * var(--u));
}

/* Forkliftin yolu: 0 = sandığı fabrikanın kapısına bıraktığı yer, 100% = konteynerden aldığı yer. Araba yolun
   genişliğinde; translate yüzdesi bu yüzden yolun yüzdesidir. */
.crane-track {
  position: absolute;
  z-index: 2;
  left: calc(var(--ff) + 88 * var(--u));
  right: calc(100cqw - var(--cf) + 19.5 * var(--u));
  bottom: 0;
  height: calc(42 * var(--u));
}

/* Yolun çizim birimiyle genişliği (tekerleklerin dönüşü, crane-roll): yol --ff + 88u'dan --cf - 19,5u'ya, eni
   --cf - --ff - 107,5u; tan(atan2(L, u)) = L / u, birimsiz sayı. Düzene göre ~162 (≤ 414 px) ile ~1720 (1352 px)
   arası. Betik de aynısını yolun kutusundan ölçüp yazar (trigonometri işlevlerini bilmeyen tarayıcı için). */
.crane {
  --crane-tw: tan(atan2(var(--cf) - var(--ff) - 107.5 * var(--u), var(--u)));
}

.crane-carriage {
  position: absolute;
  inset: 0;
  translate: calc(30 * var(--u)) 0;
}

.crane-forklift {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(64 * var(--u));
  height: calc(42 * var(--u));
  scale: -1 1;
}

.crane-crate-b {
  opacity: 0;
}

.crane-mill {
  position: absolute;
  z-index: 3;
  left: var(--ff);
  bottom: 0;
  width: calc(144 * var(--u));
  height: calc(86 * var(--u));
}

/* Çizgiler ekranda aynı kalınlıkta (non-scaling-stroke); kolun mandalina kolları çizimle ölçeklenir */
.crane-ink {
  fill: var(--text);
}

.crane-skin {
  fill: var(--surface);
}

.crane-strut {
  fill: none;
  stroke: var(--text);
  stroke-width: calc(3 * var(--u));
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.crane-line,
.crane-joint,
.crane-box,
.crane-rib,
.crane-slat,
.crane-sling,
.crane-smoke {
  stroke: var(--text);
  stroke-width: 1.75px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.crane-line,
.crane-rib,
.crane-slat,
.crane-sling,
.crane-smoke {
  fill: none;
}

.crane-joint {
  fill: var(--bg);
  stroke-width: 2px;
}

.crane-rib,
.crane-slat {
  stroke: var(--muted);
  stroke-width: 1px;
  opacity: 0.7;
}

.crane-sling,
.crane-smoke {
  stroke: var(--muted);
  stroke-width: 1.25px;
}

.crane-link {
  fill: none;
  stroke: var(--brand);
  stroke-width: 14;
  stroke-linecap: round;
}

.crane-link-2 {
  stroke-width: 10;
}

.crane-body {
  fill: var(--brand);
}

/* Forkliftin parçaları. Kaldırma takımı (direk ve başlığı, çatal ve sırtlık) çelik renginde, iç kademe ondan soluk
   (--surface'a doğru; açıkta açık, koyuda koyu): açık temada metin rengi konteynerin ve fabrikanın koyu içiyle aynı,
   direk ve çatal orada görünmüyordu. Eğim silindiri ve direksiyon çizimle ölçeklenen çizgi, zincir tek çizgi; lambalar
   iki temada aynı renkte (ışık), far metin renginde bir yuvada. */
.crane-mast,
.crane-fork,
.crane-steel {
  fill: var(--muted);
}

@supports (fill: color-mix(in srgb, red 50%, blue)) {
  .crane-steel {
    fill: color-mix(in srgb, var(--muted) 55%, var(--surface));
  }
}

.crane-rod {
  fill: none;
  stroke: var(--text);
  stroke-linecap: round;
}

.crane-chain {
  fill: none;
  stroke: var(--muted);
  stroke-width: 0.5;
}

.crane-beacon {
  fill: #f5a623;
}

.crane-headlamp {
  fill: #ffe08a;
}

.crane-tail {
  fill: #d8342c;
}

.crane-box {
  fill: var(--accent-soft);
}

.crane-led,
.crane-lamp {
  fill: var(--brand-mint);
}

.crane-lamp-off {
  fill: var(--line);
}

.crane-j1,
.crane-j2,
.crane-j3,
.crane-door,
.crane-gate,
.crane-forks,
.crane-mast2,
.crane-tyre,
.crane-smoke {
  transform-box: view-box;
}

.crane-j1 {
  transform-origin: 176px 46px;
}

/* Tekerlekler kendi merkezlerinde döner; --crane-r yarıçap (çizim birimi), crane-roll dönüşü bundan hesaplar */
.crane-tyre-f {
  --crane-r: 5;
  transform-origin: 33px 37px;
}

.crane-tyre-r {
  --crane-r: 3.9;
  transform-origin: 9.5px 38.1px;
}

.crane-j2 {
  transform-origin: 72px 100px;
}

.crane-j3 {
  transform-origin: 120px 160px;
}

.crane-door-l {
  transform-origin: 71px 0;
}

.crane-door-r {
  transform-origin: 102.5px 0;
}

.crane-gate {
  transform-origin: 0 66px;
  scale: 1 0.14;
}

@media (prefers-color-scheme: dark) {
  .crane-hollow {
    background: #0c0806;
  }

  .crane-shadow {
    background: radial-gradient(closest-side, rgb(0 0 0 / 0.6), rgb(0 0 0 / 0));
  }
}

/* 7 · Proje sayfaları -------------------------------------------------------------------------------------------- */

/* Proje başlığı (Financial AI ve yeni projeler): metin + çizim */
.project-hero {
  padding: var(--sp-7) 0;
  background: var(--surface-2);
}

.project-hero-grid {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}

.project-hero h1 {
  font-size: var(--fs-3xl);
  margin-bottom: var(--sp-1);
}

.project-hero-art img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

@media (min-width: 52rem) {
  .project-hero {
    padding: var(--sp-8) 0;
  }

  .project-hero-grid {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--sp-8);
  }
}

/* Oyun bandı (Meow Ops): iki temada da koyu, oyunun kapak resmiyle */
.game-hero {
  position: relative;
  overflow: hidden;
  padding: var(--sp-7) 0;
  background:
    radial-gradient(60rem 30rem at 10% 0%, rgb(232 93 16 / 0.28), transparent 70%),
    radial-gradient(40rem 30rem at 100% 100%, rgb(232 93 16 / 0.16), transparent 70%),
    var(--game-bg);
  color: var(--game-text);
}

.game-hero-grid {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}

.game-hero h1 {
  font-size: var(--fs-3xl);
  margin-bottom: var(--sp-1);
}

.game-hero .eyebrow {
  color: var(--game-accent);
}

.game-hero .subtitle,
.game-hero .lead {
  color: var(--game-muted);
}

.game-hero a {
  color: var(--game-text);
}

.game-hero :focus-visible {
  outline-color: #5fe0c5;
}

.app-icon {
  width: 96px;
  height: 96px;
  margin-bottom: var(--sp-5);
  border-radius: 22%;
  box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.6);
}

.cover {
  justify-self: center;
  width: min(72vw, 20rem);
  margin: 0;
}

.cover img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -24px rgb(0 0 0 / 0.75), 0 0 0 1px rgb(255 245 234 / 0.08);
  rotate: 2deg;
}

@media (min-width: 52rem) {
  .game-hero {
    padding: var(--sp-8) 0;
  }

  .game-hero-grid {
    grid-template-columns: 1.25fr 1fr;
    gap: var(--sp-8);
  }

  .app-icon {
    width: 112px;
    height: 112px;
  }

  .cover {
    width: 100%;
    max-width: 22rem;
  }
}

/* App Store yer tutucusu: Apple'ın rozeti değil; yayından sonra resmî rozetle değişir */
.store-slot {
  display: inline-flex;
  flex-direction: column;
  gap: var(--sp-1);
  max-width: 100%;
  margin: var(--sp-5) 0 0;
  padding: var(--sp-3) var(--sp-5);
  border: 2px dashed rgb(255 245 234 / 0.4);
  border-radius: var(--radius);
  color: var(--game-muted);
  font-size: var(--fs-sm);
}

.store-slot p {
  margin: 0;
}

.store-slot .store-slot-title {
  color: var(--game-text);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 800;
}

/* Öne çıkanlar */
.feature h3 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-md);
}

.feature p {
  color: var(--muted);
}

/* Ekran görüntüleri: dar ekranda kaydırmalı şerit (yalnız CSS, scroll-snap), geniş ekranda iki sütun */
.gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(86%, 34rem);
  gap: var(--sp-4);
  margin: 0 calc(-1 * var(--gutter));
  padding: var(--sp-1) var(--gutter) var(--sp-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.gallery > li {
  scroll-snap-align: start;
}

.gallery > li + li {
  margin-top: 0;
}

.gallery figure {
  margin: 0;
}

.gallery img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.gallery figcaption {
  margin-top: var(--sp-2);
  color: var(--muted);
  font-size: var(--fs-sm);
}

.gallery-hint {
  color: var(--muted);
  font-size: var(--fs-sm);
}

@media (min-width: 64rem) {
  .gallery {
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6) var(--sp-5);
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .gallery-hint {
    display: none;
  }
}

/* Bağlantı kartları (destek, gizlilik ...) */
.link-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.link-cards li + li {
  margin-top: 0;
}

.link-cards a {
  display: block;
  height: 100%;
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}

.link-cards a:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
}

.link-cards strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--accent);
}

.link-cards span {
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* Uyarı kutusu (Financial AI: yatırım tavsiyesi değildir); proje başlığının hemen altında */
.notice-wrap {
  padding-top: var(--sp-6);
}

.notice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--accent-soft);
  border: 2px solid var(--brand);
  border-radius: var(--radius-lg);
}

.notice h2 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-lg);
}

.notice h2::before {
  display: none;
}

.notice p:last-child {
  margin-bottom: 0;
}

.notice-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--brand);
  color: var(--brand-ink);
}

.notice-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

@media (max-width: 30rem) {
  .notice {
    grid-template-columns: 1fr;
  }
}

/* Adımlar (Financial AI: nasıl çalışır) */
.steps {
  display: grid;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps > li + li {
  margin-top: 0;
}

.steps > li {
  position: relative;
  padding: var(--sp-5) var(--sp-5) var(--sp-5) 4.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  counter-increment: step;
}

.steps > li::before {
  content: counter(step);
  position: absolute;
  left: var(--sp-5);
  top: var(--sp-5);
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: 800;
}

.steps h3 {
  margin: 0.2rem 0 var(--sp-2);
  font-size: var(--fs-md);
}

.steps p {
  margin: 0;
  color: var(--muted);
}

@media (max-width: 30rem) {
  .steps > li {
    padding-left: var(--sp-5);
  }

  .steps > li::before {
    position: static;
    margin-bottom: var(--sp-3);
  }
}

@media (min-width: 52rem) {
  .steps {
    grid-template-columns: 1fr 1fr;
  }

  .steps > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

.prose-block {
  max-width: var(--measure);
}

.prose-block p,
.prose-block li {
  font-size: var(--fs-md);
}

/* 8 · Metin sayfaları (gizlilik, destek, künye) ------------------------------------------------------------------ */

main.prose {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  padding-top: var(--sp-7);
  padding-bottom: var(--sp-8);
}

main.prose h1 {
  font-size: clamp(2rem, 1.5rem + 2.2vw, 2.875rem);
}

main.prose h2 {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
}

main.prose h3 {
  font-size: var(--fs-md);
}

.info-list {
  display: grid;
  gap: var(--sp-3);
  margin: var(--sp-5) 0;
  padding: 0;
}

.info-list div {
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.info-list dt {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.info-list dd {
  margin: 0.15rem 0 0;
  font-weight: 700;
}

/* Vurgulu not (destek sayfası) */
.note {
  padding: var(--sp-3) var(--sp-4);
  background: var(--accent-soft);
  border-left: 5px solid var(--brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* 9 · Alt bant --------------------------------------------------------------------------------------------------- */

.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-sm);
}

.footer-grid {
  display: grid;
  gap: var(--sp-6);
  padding-top: var(--sp-7);
  padding-bottom: var(--sp-6);
}

.footer-logo {
  display: inline-block;
  margin-bottom: var(--sp-3);
  border-radius: 8px;
}

.footer-logo img {
  width: 148px;
  height: auto;
}

.footer-about p {
  max-width: 26rem;
  margin-bottom: var(--sp-2);
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--sp-5);
}

.footer-title {
  margin: 0 0 var(--sp-2);
  color: var(--text);
  font-weight: 700;
}

.footer-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav a,
.footer-bottom a,
.footer-about a {
  color: var(--muted);
}

.footer-nav a:hover,
.footer-bottom a:hover,
.footer-about a:hover {
  color: var(--accent);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-5);
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-5);
  border-top: 1px solid var(--line);
}

.footer-bottom p {
  margin: 0;
}

@media (min-width: 52rem) {
  .footer-grid {
    grid-template-columns: 1.2fr 1fr;
  }
}

/* 10 · 404 ------------------------------------------------------------------------------------------------------- */

.not-found {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-8);
}

.big-404 {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: clamp(5rem, 3rem + 10vw, 9rem);
  font-weight: 800;
  line-height: 1;
  color: var(--brand);
}

.not-found [lang="en"] {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}

.not-found h2 {
  margin-top: 0;
  font-size: var(--fs-lg);
}

/* 11 · Hareket ve baskı ------------------------------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .hero-mark {
    animation: float 7s ease-in-out infinite;
  }

  .hero-chip-game {
    animation: float 6s ease-in-out -2s infinite;
  }

  .hero-chip-research {
    animation: float 8s ease-in-out -4s infinite;
  }
}

@keyframes float {
  50% {
    translate: 0 -8px;
  }
}

/* Vinç: kaydırmaya bağlı, zamana bağlı döngü yok; yukarı kaydırınca her şey geri sarar. Üç ilerleme:
   iniş (P): kolun gövdesinin (main) görünümüne bağlı; main'in tepesi ekranın tepesindeyken 0, zemin (main'in altı)
     ekranın altından --crane-land kadar yukarıdayken 1. Yalnız geniş ekranda.
   kol (A): kolun ekrandan çıkışı (exit -38% … exit 62%); omuz, dirsek ve bilek ters kinematikle (tools/vinc.py).
   son (E): alt bandın (footer) ekrana girişi; zemin ekranın altından --crane-land kadar yukarıdayken 0; sayfanın
     sonunda ya da (daha önce gelirse) zemin ekranın tepesinden --crane-head kadar aşağıdayken 1. Bu üst sınır kısa
     ekranlar için (yatay telefon, araç çubuklu iPhone SE): alt bant ekrandan uzunsa son sahne, sahnenin tepesi
     ekrandan çıkmadan biter. Sahne yalnız zemin göründüğü sürece oynar: geniş ekranda alt bandın boyu kadar
     (~275 px), telefonda ~400-490 px kaydırma. Geniş ekranda bu kısa: tek tekerlek adımı forklifti yolun çoğunu
     götürür. Bu yüzden E'yi betik sürer (--crane-e; betik yoksa zaman çizelgesi): kaydırmayı izler ama ileri en çok
     belli bir hızla gider (1440 px'te bütün sahne en az ~4,8 s), kaydırmanın önüne hiç geçmez; geri kaydırmada
     kaydırmayla birlikte geri sarar. Böylece E > 0 iken konteyner hep zemindedir.
   E'nin akışı (yüzde): 3-11 konteynerin kapıları açılır · 6-14 forklift kapıya girer · 14 sandığı alır (A sandığı
   gizlenir, çataldaki B görünür) · 14-20 kaldırır · 20-26 geri çıkar · 24-32 kapılar kapanır · 26-31 döner · 31-78
   fabrikaya gider · 60-72 fabrikanın kapısı açılır · 78-84 sandığı indirir (B gizlenir, kapıdaki C görünür) · 84-92
   geri çekilir · 88-98 bacadan duman, kapının üstündeki nane lamba yanar (sayfanın en sonundan biraz önce tamam).
   CSS kaydırma zaman çizelgelerini (ve timeline-scope'u) bilen tarayıcıda inişi ve kolu CSS sürer; son sahneyi de
   betik yoksa. Bilmeyende js/crane.js kaydırmayı kare başına tek değişkene (--crane-y) yazar; iniş ve kol
   ilerlemesini (--crane-p, --crane-a) CSS bundan ve betiğin yalnız açılışta ve boyut değişince ölçtüğü sayılardan
   hesaplar; aynı anahtar kareler duraklatılmış animasyon ve eksi gecikmeyle o konuma gelir. Betik yoksa vinç
   başlangıç halinde durur. */
@keyframes crane-drop {
  from {
    translate: 0 calc(54.17cqw - 100cqh);
  }

  to {
    translate: 0 0;
  }
}

@keyframes crane-shadow {
  from,
  94% {
    opacity: 0;
    scale: 0.55 1;
  }

  to {
    opacity: 1;
    scale: 1 1;
  }
}

@keyframes crane-shoulder {
  25% {
    transform: rotate(-0.85deg);
  }

  50% {
    transform: rotate(-2.75deg);
  }

  75% {
    transform: rotate(-4.68deg);
  }

  100% {
    transform: rotate(-5.57deg);
  }
}

@keyframes crane-elbow {
  25% {
    transform: rotate(1.63deg);
  }

  50% {
    transform: rotate(5.29deg);
  }

  75% {
    transform: rotate(9.08deg);
  }

  100% {
    transform: rotate(10.85deg);
  }
}

@keyframes crane-wrist {
  25% {
    transform: rotate(-0.78deg);
  }

  50% {
    transform: rotate(-2.54deg);
  }

  75% {
    transform: rotate(-4.41deg);
  }

  100% {
    transform: rotate(-5.28deg);
  }
}

@keyframes crane-hold {
  from {
    opacity: 0;
  }

  1%,
  to {
    opacity: 1;
  }
}

@keyframes crane-crate-a {
  from {
    opacity: 0;
  }

  1%,
  14% {
    opacity: 1;
  }

  14.01%,
  to {
    opacity: 0;
  }
}

@keyframes crane-crate-b {
  from,
  14% {
    opacity: 0;
  }

  14.01%,
  84% {
    opacity: 1;
  }

  84.01%,
  to {
    opacity: 0;
  }
}

@keyframes crane-crate-c {
  from,
  84% {
    opacity: 0;
  }

  84.01%,
  to {
    opacity: 1;
  }
}

@keyframes crane-door {
  from,
  3% {
    scale: 1 1;
  }

  11%,
  24% {
    scale: 0.1 1;
  }

  32%,
  to {
    scale: 1 1;
  }
}

/* crane-roll bunun eşi: durak, yumuşatma ya da 30/34 birimlik ayaklar değişirse crane-roll'daki 30, -4, 38, 68 de
   değişir (check.py durak ve yumuşatmaları karşılaştırır). */
@keyframes crane-drive {
  from,
  6% {
    translate: calc(100% - 30 * var(--u)) 0;
    animation-timing-function: ease-in-out;
  }

  14%,
  20% {
    translate: 100% 0;
    animation-timing-function: ease-in-out;
  }

  26%,
  31% {
    translate: calc(100% - 34 * var(--u)) 0;
    animation-timing-function: cubic-bezier(0.35, 0, 0.65, 1);
  }

  78%,
  84% {
    translate: 0 0;
    animation-timing-function: ease-in-out;
  }

  92%,
  to {
    translate: calc(30 * var(--u)) 0;
  }
}

@keyframes crane-turn {
  from,
  26% {
    scale: 1 1;
    animation-timing-function: ease-in-out;
  }

  31%,
  to {
    scale: -1 1;
  }
}

@keyframes crane-lift {
  from,
  14% {
    translate: 0 0;
  }

  20%,
  78% {
    translate: 0 -7px;
  }

  84%,
  to {
    translate: 0 0;
  }
}

/* Direğin iç kademesi çatalın yarısı kadar kalkar (gerçek iki kademeli direkte zincir çatalı iki kat hızla kaldırır) */
@keyframes crane-lift2 {
  from,
  14% {
    translate: 0 0;
  }

  20%,
  78% {
    translate: 0 -3.5px;
  }

  84%,
  to {
    translate: 0 0;
  }
}

/* Tekerlekler yol kadar döner (kaymadan yuvarlanır): açı = gidilen yol / yarıçap, ikisi de çizim biriminde (--u).
   Duraklar ve yumuşatmalar crane-drive'ınkiyle aynı, böylece dönüş her an yolla orantılı. Forkliftin kendi yönünde
   ileri gidiş artı: sağa bakarken 6-14 ileri 30, 20-26 geri 34; döndükten sonra (çizim aynalı) 31-78 ileri yol - 34,
   84-92 geri 30. Yolun genişliği (--crane-tw, birimsiz) düzene göre değişir; .crane'de CSS hesaplar, betik de ölçüp
   yazar (6. bölüm). check.py iki anahtar karenin durak ve yumuşatma listelerinin aynı olduğuna bakar. */
@keyframes crane-roll {
  from,
  6% {
    rotate: 0rad;
    animation-timing-function: ease-in-out;
  }

  14%,
  20% {
    rotate: calc(30rad / var(--crane-r));
    animation-timing-function: ease-in-out;
  }

  26%,
  31% {
    rotate: calc(-4rad / var(--crane-r));
    animation-timing-function: cubic-bezier(0.35, 0, 0.65, 1);
  }

  78%,
  84% {
    rotate: calc((var(--crane-tw) - 38) * 1rad / var(--crane-r));
    animation-timing-function: ease-in-out;
  }

  92%,
  to {
    rotate: calc((var(--crane-tw) - 68) * 1rad / var(--crane-r));
  }
}

@keyframes crane-gate {
  from,
  60% {
    scale: 1 1;
  }

  72%,
  to {
    scale: 1 0.14;
  }
}

@keyframes crane-lamp {
  from,
  90% {
    opacity: 0;
  }

  98%,
  to {
    opacity: 1;
  }
}

@keyframes crane-smoke {
  from,
  88% {
    opacity: 0;
    translate: 0 5px;
  }

  98%,
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Hareket açıkken animasyonsuz hal BAŞLANGIÇ hali olur: zaman çizelgesi ilk karede henüz çözülmemişse ya da betik
     yoksa sahne en baştaki gibi görünür; son hal yalnız "Hareketi azalt"ta. */
  .crane-hold,
  .crane-crate-c,
  .crane-lamp,
  .crane-smoke {
    opacity: 0;
  }

  .crane-carriage {
    translate: calc(100% - 30 * var(--u)) 0;
  }

  .crane-forklift,
  .crane-gate {
    scale: 1 1;
  }

  .crane-j1 {
    animation: crane-shoulder 1s linear both;
  }

  .crane-j2 {
    animation: crane-elbow 1s linear both;
  }

  .crane-j3 {
    animation: crane-wrist 1s linear both;
  }

  .crane-hold {
    animation: crane-hold 1s linear both;
  }

  .crane-crate-a {
    animation: crane-crate-a 1s linear both;
  }

  .crane-crate-b {
    animation: crane-crate-b 1s linear both;
  }

  .crane-crate-c {
    animation: crane-crate-c 1s linear both;
  }

  .crane-door {
    animation: crane-door 1s linear both;
  }

  .crane-carriage {
    animation: crane-drive 1s linear both;
    will-change: translate;
  }

  .crane-forklift {
    animation: crane-turn 1s linear both;
  }

  .crane-forks {
    animation: crane-lift 1s linear both;
  }

  .crane-mast2 {
    animation: crane-lift2 1s linear both;
  }

  .crane-tyre {
    animation: crane-roll 1s linear both;
  }

  .crane-gate {
    animation: crane-gate 1s linear both;
  }

  .crane-lamp {
    animation: crane-lamp 1s linear both;
  }

  .crane-smoke {
    animation: crane-smoke 1s linear both;
  }

  @media (min-width: 84.5rem) {
    .crane-load,
    .crane-cable {
      translate: 0 calc(54.17cqw - 100cqh);
      animation: crane-drop 1s linear both;
    }

    .crane-load {
      will-change: translate;
    }

    .crane-shadow {
      opacity: 0;
      animation: crane-shadow 1s linear both;
    }
  }

  /* Son sahne (E) her tarayıcıda betiğin yazdığı --crane-e ile (hızı sınırlı, js/crane.js); betik yoksa ve zaman
     çizelgesi de yoksa başlangıç halinde durur. */
  .crane-hold,
  .crane-crate-a,
  .crane-crate-b,
  .crane-crate-c,
  .crane-door,
  .crane-carriage,
  .crane-forklift,
  .crane-forks,
  .crane-mast2,
  .crane-tyre,
  .crane-gate,
  .crane-lamp,
  .crane-smoke {
    animation-play-state: paused;
    animation-delay: calc(var(--crane-e, 0) * -1s);
  }

  @supports (animation-timeline: view()) and (timeline-scope: none) {
    body:has(> main > .crane) {
      timeline-scope: --crane-end;
    }

    body:has(> main > .crane) > .site-footer {
      view-timeline: --crane-end block;
    }

    .crane {
      view-timeline: --crane-main block;
    }

    .crane-arm {
      view-timeline: --crane-arm block;
    }

    .crane-load,
    .crane-cable,
    .crane-shadow {
      animation-duration: auto;
      animation-timeline: --crane-main;
      animation-range: contain 0% exit var(--crane-land);
    }

    .crane-j1,
    .crane-j2,
    .crane-j3 {
      animation-duration: auto;
      animation-timeline: --crane-arm;
      animation-range: exit -38% exit 62%;
    }

    /* Betik yoksa son sahneyi de zaman çizelgesi sürer (scripting: none); betik varsa yukarıdaki --crane-e.
       Karar stil anında: çalışan animasyonun zaman çizelgesini betikle sonradan değiştirmek onu Chromium'da boşta
       (idle) bırakabiliyor; bu yüzden betik hiçbir sınıf eklemez. */
    @media (scripting: none) {
      .crane-hold,
      .crane-crate-a,
      .crane-crate-b,
      .crane-crate-c,
      .crane-door,
      .crane-carriage,
      .crane-forklift,
      .crane-forks,
      .crane-mast2,
      .crane-tyre,
      .crane-gate,
      .crane-lamp,
      .crane-smoke {
        animation-duration: auto;
        animation-timeline: --crane-end;
        animation-range: entry var(--crane-land) entry 100%;
        animation-play-state: running;
        animation-delay: 0s;
      }

      /* Üst sınır: sahne kısa ekranda tepeden çıkmadan biter (yukarıdaki E). min()'i burada bilmeyen tarayıcı eski
         aralıkta kalır. svh: araç çubukları açıkken; ekran büyüyünce zemin daha da aşağıda kalır. */
      @supports (animation-range-end: entry min(100%, 1px)) {
        .crane-hold,
        .crane-crate-a,
        .crane-crate-b,
        .crane-crate-c,
        .crane-door,
        .crane-carriage,
        .crane-forklift,
        .crane-forks,
        .crane-mast2,
        .crane-tyre,
        .crane-gate,
        .crane-lamp,
        .crane-smoke {
          animation-range-end: entry min(100%, 100svh - var(--crane-head));
        }
      }
    }
  }

  @supports not ((animation-timeline: view()) and (timeline-scope: none)) {
    /* Betik kaydırmayı (--crane-y) ve açılışta ölçtüğü başlangıç ve uzunlukları (px, birimsiz) yazar */
    .crane {
      --crane-p: clamp(0, (var(--crane-y, 0) - var(--crane-p0, 0)) / var(--crane-pl, 1), 1);
      --crane-a: clamp(0, (var(--crane-y, 0) - var(--crane-a0, 0)) / var(--crane-al, 1), 1);
    }

    .crane-load,
    .crane-cable,
    .crane-shadow {
      animation-play-state: paused;
      animation-delay: calc(var(--crane-p, 0) * -1s);
    }

    .crane-j1,
    .crane-j2,
    .crane-j3 {
      animation-play-state: paused;
      animation-delay: calc(var(--crane-a, 0) * -1s);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }

  .project-card:hover,
  .link-cards a:hover {
    transform: none;
  }
}

@media print {
  .skip-link,
  .site-nav,
  .lang-switch,
  .project-bar,
  .store-slot,
  .hero-art,
  .crane {
    display: none;
  }

  body,
  .game-hero,
  .project-hero,
  .section-tint {
    background: #fff;
    color: #000;
  }

  a {
    color: inherit;
  }
}