/* Cyprob — belirteçler. Geometri referanstan ölçüldü (inkwell.tech, 1440x900, ANGLE Metal).
   Ölçülen: 24 kart · r=291px · kart 63,4x63,2 · komşu mesafe 76,1 · açı adımı 15° · zemin #F6F8FA
   Bizim uyarlama: 12 kart · 236° yay · Δ=21,45° · kart/mesafe oranı 0,84 KORUNDU */

:root {
  /* ---- geometri (1440px tabanlı, vw ile ölçeklenir) ---- */
  /* 24 kart · 236° yay → Δ=10,26° (referansta 15°, bizde daha pürüzsüz)
     kiriş = 0,1789·R · kart/kiriş = 0,84 (referans oranı) → kart = 0,1503·R
     dikey bütçe 720px → R = 335px · kart 50px · kiriş 60px · boşluk 10px */
  --card-w: 5.78vmin;      /* 52px @1440 — uzun kenar, teğete paralel */
  --card-h: 4.22vmin;      /* 38px @1440 — oran 1,38 (referanstan ölçüldü) */
  --ring-r: 37.9vmin;       /* 335px @1440 — C büyüdü */
  --arc-start: -62;       /* derece: sağ üst */
  --arc-sweep: 236;       /* C'nin ağzı sağda, 124° açık */
  --gap-ratio: 0.84;      /* kart eni / komşu mesafe — referanstan ölçülen değer */
  --center-box: 41.5vmin;   /* 210px @1440 — merkez delik 620px, buzdağı içinde küçük durur */
  --scene-x: 0vmin;
  --ring-top: 50%;     /* ölçüm: çizgi ve daire merkezi cy=450/900 = ekranın tam ortası */     /* sahne sola kayar; C'nin sağ ağzı okuma alanına yer açar */

  /* ---- renk: koyu katman sahne, açık katman okuma ---- */
  --abyss:      oklch(0.062 0.014 254);
  --abyss-lift: oklch(0.118 0.022 254);
  --ice:        oklch(0.795 0.118 226);
  --ice-soft:   oklch(0.872 0.062 228);
  --ice-deep:   oklch(0.612 0.132 240);
  --surface:    oklch(0.972 0.006 232);
  --surface-2:  oklch(0.938 0.009 232);
  --ink:        oklch(0.238 0.021 252);
  --ink-soft:   oklch(0.452 0.017 252);
  --on-abyss:      oklch(0.968 0.008 232);
  --on-abyss-soft: oklch(0.742 0.014 236);
  --on-abyss-mute: oklch(0.545 0.016 240);
  --hairline: oklch(1 0 0 / 0.10);
  --hairline-up: oklch(1 0 0 / 0.22);

  /* ---- tipografi ---- */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --root: 1vw;            /* referansta kök tip tam 1vw = 14,4px @1440 */

  --step--1: clamp(0.78rem, 0.74rem + 0.16vw, 0.90rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
  --step-1:  clamp(1.26rem, 1.16rem + 0.46vw, 1.55rem);
  --step-2:  clamp(1.62rem, 1.40rem + 1.02vw, 2.30rem);
  --step-3:  clamp(2.05rem, 1.62rem + 2.10vw, 3.35rem);
  --step-4:  clamp(2.60rem, 1.70rem + 4.40vw, 5.10rem);

  /* ---- hareket: referanstan ölçülen eğri (her 200ms'te kalan oranın 0,63'ü = easeOutCubic) ---- */
  --out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  --out-quart: cubic-bezier(0.16, 1, 0.30, 1);
  --swing:     cubic-bezier(0.76, 0, 0.24, 1);

  --t-row:    420ms;   /* faz 1: bir kartın alt sıraya oturması */
  --t-stagger: 55ms;   /* kartlar arası gecikme */
  --t-turn:  1350ms;   /* faz 2: yatık halka dikleşir (referansta ölçülen geçiş süresi) */
  --t-lock:   750ms;   /* faz 3: son oturma */
  --t-center: 900ms;   /* merkez görsel çözünmesi */
  --t-micro:  160ms;
  --t-small:  280ms;
  --t-panel:  620ms;

  /* ---- 3B halka ---- */
  --ring-tilt: 74deg;   /* faz 2 başındaki yatıklık */
  --ring-depth: -280px; /* faz 2 başındaki uzaklık */

  --z-scene: 1; --z-ring: 2; --z-center: 3; --z-chrome: 40; --z-panel: 60;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-row: 1ms; --t-stagger: 0ms; --t-turn: 1ms; --t-lock: 1ms; --t-center: 1ms; --t-panel: 1ms; }
}

@media (max-width: 900px) {
  :root { --card-w: 11vmin; --card-h: 8vmin; --ring-r: 38vmin; --center-box: 52vmin; }
}