/* ESHIK · P5.1 Threshold Light · D (ışık + iz) — TEMİZ REFERANS UYGULAMA. Release değildir; web'e entegre edilmedi.
   Onaylı tasarım (16.10.2026, M33): aşağı yayılım · çekirdek 0,618·T (alt sınır 1,25em, üst sınır yok) · 30° / 0,6em · düzlem eşiğe bitişik ·
   SAKİN zamanlama · iz çekirdekle aynı genişlik. Değerler V3 prototipinin onaylanan yapılandırmasıyla birebir aynıdır
   (`../p5-1-controls-v3/`, core=ratio · angle=steep · plane=flush · tempo=calm · trace=same).
   Hover ile doğan safran ışık yalnız bu kontrol ailesinde geçerli, sınırlı marka istisnasıdır (genel hover rengi değildir).
   Renkler yalnız dört MASTER rengi. Yayılım: düz, sert kenarlı, %30 safran. Blur / gradyan / glow / gölge yok. */

/* ---------- tokenlar ---------- */
:root {
  --eshik-olive:#6A7840; --eshik-chalk:#ECEBE6; --eshik-graphite:#3B3F39; --eshik-saffron:#E1A623;
  --tl-plane-color:rgb(225 166 35 / .3);                 /* ILLUMINATED havuz emsali: safran %30, düz */
  --tl-ease-in:cubic-bezier(.2, 0, 0, 1);                /* doğuş */
  --tl-ease-out:cubic-bezier(.4, 0, .6, 1);              /* çekiliş */
  /* SAKİN: çekirdek doğar → yayılım gecikmeyle açılır; çekiliş: yayılım → çekirdek.
     Kural: yayılımın çekilişi (160) ≤ yeni yayılımın gecikmesi (160) → hızlı geçişte iki yayılım üst üste binmez. */
  --tl-core-in:240ms; --tl-spread-delay:160ms; --tl-spread-in:360ms;
  --tl-spread-out:160ms; --tl-core-out:220ms; --tl-core-out-delay:120ms;
}

/* ---------- zeminler (onaylı üç yüzey) ---------- */
[data-tl-surface="graphite"] { --tl-bg:var(--eshik-graphite); --tl-ink:var(--eshik-chalk); }
[data-tl-surface="olive"]    { --tl-bg:var(--eshik-olive);    --tl-ink:var(--eshik-chalk); }
[data-tl-surface="chalk"]    { --tl-bg:var(--eshik-chalk);    --tl-ink:var(--eshik-graphite); }
[data-tl-surface] { background:var(--tl-bg); color:var(--tl-ink); }

/* ---------- kontrol ----------
   T = etiketin görünen genişliği (JS, ResizeObserver → --tl-T) · çekirdek = max(1,25em; 0,618·T) ·
   yayılım: düz yamuk, yükseklik 0,6em, yan kenarlar dikeyle 30° (tan 30° = 0,5774), üst kenar = çekirdek. */
.tl { --tl-T:60px; --tl-thick:0; --tl-press:0;
  --tl-core:max(1.25em, calc(var(--tl-T) * .618));
  --tl-h:.6em; --tl-tan:.5774;
  --tl-bw:calc(var(--tl-core) + 2 * var(--tl-h) * var(--tl-tan));
  position:relative; display:inline-flex; align-items:center; gap:12px; min-height:60px; margin:0; border:0; background:none; color:var(--tl-ink);
  padding:14px 16px calc(.6em + 2px + 10px); font:600 20px/1 Manrope, sans-serif; letter-spacing:.08em; cursor:pointer; text-decoration:none;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.tl:focus { outline:none; }
.tl:focus-visible, .tl:has(input:focus-visible) { outline:2px solid transparent; outline-offset:3px; box-shadow:0 0 0 3px var(--tl-bg), 0 0 0 5px var(--tl-ink); }
.tl input { position:absolute; inset:0; margin:0; opacity:0; cursor:pointer; }
.tl-w { position:relative; display:inline-block; padding-bottom:.42em; transform:translateY(calc(var(--tl-press) * 1px)); }
.tl-lbl { display:block; line-height:normal; white-space:nowrap; margin-right:-.08em; } /* son harfin izi dengelenir: T = görünen metin */
.tl-thr { position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--tl-ink); border-radius:1px; transform-origin:center bottom; transform:scaleY(calc(1 + var(--tl-thick) * .75)); }
.tl:active, .tl.is-press { --tl-thick:1; --tl-press:1; }
.tl-chk, .tl-arr { flex:none; }
.tl-chk path, .tl-arr path { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:square; stroke-linejoin:miter; }
.tl-chk { width:13px; height:11px; visibility:hidden; }
.tl.is-sel .tl-chk { visibility:visible; } /* seçim renkten bağımsız da okunur */

/* çekirdek: eşiğin üzerinde, eşikle aynı kalınlıkta safran segment */
.tl-core { position:absolute; left:50%; bottom:0; z-index:1; width:var(--tl-core); height:2px; background:var(--eshik-saffron); border-radius:1px;
  transform:translateX(-50%) scaleX(0); transition:transform var(--tl-core-out) var(--tl-ease-out) var(--tl-core-out-delay); } /* ortalama transform ile: ölçü değişince yerleşim kaymaz */
.tl.is-sel .tl-core { transform:translateX(-50%) scaleX(1); }   /* kalıcı iz: çekirdekle aynı genişlik, hareketsiz, ışık vermez */
.tl.is-lit .tl-core { transform:translateX(-50%) scaleX(1); transition:transform var(--tl-core-in) var(--tl-ease-in) 0ms; }
/* ışık düzlemi: çekirdekten aşağı açılan düz yamuk; eşiğe bitişik */
.tl-plane { position:absolute; left:50%; top:100%; width:var(--tl-bw); height:var(--tl-h); background:var(--tl-plane-color); pointer-events:none;
  clip-path:polygon(calc(var(--tl-h) * var(--tl-tan)) 0, calc(100% - var(--tl-h) * var(--tl-tan)) 0, 100% 100%, 0 100%);
  transform-origin:center top; transform:translateX(-50%) scaleY(0); transition:transform var(--tl-spread-out) var(--tl-ease-out) 0ms; }
.tl.is-lit .tl-plane { transform:translateX(-50%) scaleY(1); transition:transform var(--tl-spread-in) var(--tl-ease-in) var(--tl-spread-delay); }

/* JS yoksa: ışık yok; seçim yine iz ve onay işaretiyle görünür (yerel :checked) */
:root:not(.tl-ready) .tl:has(input:checked) .tl-chk { visibility:visible; }
:root:not(.tl-ready) .tl:has(input:checked) .tl-core { transform:translateX(-50%) scaleX(1); }

/* ---------- azaltılmış hareket: durum anında, hareket yok ---------- */
@media (prefers-reduced-motion: reduce) {
  .tl-core, .tl-plane { transition:none !important; }
}

/* ---------- forced-colors ---------- */
@media (forced-colors: active) {
  .tl:focus-visible, .tl:has(input:focus-visible) { outline:3px solid CanvasText; outline-offset:3px; }
  .tl-thr { forced-color-adjust:none; background:CanvasText; }
  .tl-core { forced-color-adjust:none; background:Highlight; }
  .tl-plane { forced-color-adjust:none; background:transparent; outline:1px dashed Highlight; }
}

/* ---------- dar ekran ---------- */
@media (max-width: 559.98px) {
  .tl { font-size:17px; padding-left:12px; padding-right:12px; }
}