/* =====================================================
   lc.css — 80 ÇİZGİSİ sahnesi (piyasa.html)
   29 Tem 2026: arşivden (arsiv/perde/80-cizgisi.html) üretime alındı.
   Ana sayfaya 2. ekran olarak eklenmesi durdurulmuştu; yeri burası çıktı
   çünkü anlattığı şey (puan · 80 eşiği · puan-fiyat ayrışması) piyasa
   sayfasının konusu.

   Karakter: aşırı kısıtlama. Saç teli çizgi, tek yeşil, tabular rakam,
   sıfır süs. Sahne boyunca ekranda tek bir yatay çizgi durur (80 puan)
   ve her şey ona göre konumlanır.

   Mimari: tek-değer ilkesi. Bölümün kaydırma ilerlemesi TEK bir sayıyı
   besler (gösterge 80.00 → 90.00); tahtadaki her kahve, sönme, huzme
   hepsi o sayıdan türer. Scroll dinleyici yok; tek rAF karede bir ölçer.
   Sürücü: js/lc.js · veri: /api/catalog (canlı).
   ===================================================== */

.lc-shell{ max-width: var(--shell); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }
/* ---- Sahne: enstrüman sabit durur, metin üstünden akar ---- */
.lc{ display: grid; --lc-ver: 8; }   /* sürüm damgası: js/lc.js LC_VER ile eşleşmeli (önbellek uyuşmazlığı yakalanır) */
.lc > *{ grid-area: 1 / 1; }
/* Pin kabı artık HER ekranda `contents` (27 Ağu: mobil de masaüstü gramerini
   kullanıyor, ayrı pin sınırı kalmadı). Kap DOM'da duruyor çünkü js/lc.js
   mobil/masaüstü ayrımını bu kutunun hesaplanmış display'inden okur.
   ⚠️ `contents` TEK BAŞINA YETMİYOR ve bu ölçümle yakalandı: kutu kaybolsa da
   seçici kalıyor — `.lc > *` hâlâ SARMALAYICIYA uyuyor ve `grid-area` kutusu
   olmayan bir öğede etkisiz kalıyor; sahne yığından düşüp 2. satıra kaçtı
   (ölçüldü: sabit kalması gereken sahne 74px yerine 2347px'te). O yüzden
   yığın kuralı pin'in çocuğunu da anmak zorunda. */
.lc-pin{ display: contents; }
.lc-pin > *{ grid-area: 1 / 1; }

.lc-stage{
  position: sticky; top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  height: calc(100dvh - var(--nav-h));
  overflow: hidden;
}

/* Geliş tohumu: hero'nun roast eğrisi sağ üstten devam eder, inip YATAYLAŞIR
   ve 80 çizgisine dönüşür. Ayrı bir çizgi çizilmez; çizgi eğrinin kuyruğudur. */
.lc-svg{ position: absolute; inset: 0; width: 100%; height: 100%; }
.lc-seed{
  fill: none; stroke: var(--pop); stroke-width: 1.2; vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000);
  opacity: 0.55;
}
.lc-svg.is-in .lc-seed{ transition: stroke-dashoffset 1.5s var(--ease-o); stroke-dashoffset: 0; }

/* Çizginin etiketi ve huzme yatağı: çizgi SVG'de, bu katman onun üstünde. */
.lc-line{ position: absolute; left: 0; right: 0; top: 72.14%; height: 0; pointer-events: none; }
.lc-line__lbl{
  position: absolute; left: var(--gut); top: 0.5rem;
  font-family: var(--font-m); font-size: 0.68rem; color: var(--pop);
  letter-spacing: 0.06em; font-variant-numeric: tabular-nums;
}
/* Huzme çekimi: mint bant 80 ÇİZGİSİNİN üstünde koşar ve okunan kahvenin
   hizasında durur. Ana sayfadaki tpSweep ile aynı süre ve renk, başka yatak. */
.lc-sweep{
  position: absolute; left: 0; top: -1px; height: 3px; width: 0;
  background: linear-gradient(90deg, transparent, var(--save));
  opacity: 0; transition: width 0.8s var(--ease-o), opacity 0.25s var(--ease);
}
.lc-sweep.is-on{ opacity: 0.9; }

/* ---- Tahta: kahveler kendi PUAN yüksekliğinde akar ---- */
.lc-field{ position: absolute; inset: 0; will-change: transform; }
.lc-dot{
  position: absolute; display: flex; align-items: center; gap: 0.5rem;
  transform: translateY(-50%); white-space: nowrap;
  transition: opacity 0.45s var(--ease);
  /* Nokta artık ürün sayfasına giden bir bağlantı. Üstüne gelince akış durur
     (lc.js `duruyor`), yani hedef hareketli değil. */
  cursor: pointer; text-decoration: none;
}
.lc-dot::before{
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--cream-dim); flex: none;
  transition: background var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease);
}
.lc-dot__t{
  font-family: var(--font-m); font-size: 0.66rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-3) var(--ease);
}
.lc-dot__t b{ font-weight: 500; color: var(--cream-dim); }
/* Gizleme yok, söndürme var: göstergenin altında kalan kahve DOM'da durur. */
.lc-dot.is-dim{ opacity: 0.18; }
.lc-dot.is-on::before{ background: var(--save); box-shadow: 0 0 0 4px color-mix(in srgb, var(--save) 16%, transparent); }
.lc-dot.is-on .lc-dot__t{
  color: var(--save);
  /* Tıklanabilirliğin tek işareti: okunan kayıt altı çizili gelir. */
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--save) 45%, transparent);
}
.lc-dot.is-on .lc-dot__t b{ color: var(--cream); }

/* ---- Gösterge: 80 ÇİZGİSİNİN ALTINDA, sol dip. Üst yarı tahtanın ve metnin;
   çizginin altı perde boyunca boş kalan tek alan, gösterge oraya oturur. ---- */
.lc-gauge{
  position: absolute; left: var(--gut); bottom: 7%;
  display: flex; align-items: baseline; gap: 0.55rem;
}
.lc-gauge__sep{ height: 1.05em; font-size: 0.55em; align-self: flex-end; padding-bottom: 0.12em; }
.lc-gauge__n{ display: flex; align-items: flex-start; font-family: var(--font-m); font-weight: 800;
  font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: 1.05; color: var(--cream);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.lc-gauge__col{ height: 1.05em; overflow: hidden; }
.lc-gauge__strip{ display: block; transition: transform 0.22s var(--ease-o); }
.lc-gauge__strip.is-snap{ transition: none; }
.lc-gauge__strip span{ display: block; height: 1.05em; }
.lc-gauge__sep{ opacity: 0.4; }
.lc-gauge__unit{ font-family: var(--font-m); font-size: 0.68rem; color: var(--muted-2); letter-spacing: 0.08em; }

/* ---- Açılım: kahvenin noktası on başlıklı puan dökümüne açılır ---- */
.lc-detay{
  /* Göstergenin sağında durur: ikisi de sol dipte, çakışmasınlar. */
  position: absolute; left: calc(var(--gut) + 24rem); bottom: 1.6rem;
  width: min(23rem, 38vw);
  height: 0; overflow: hidden; opacity: 0;
  transition: height 0.34s var(--ease-o), opacity 0.3s var(--ease-o);
}
.lc-detay.is-open{ opacity: 1; }
.lc-detay__in{ padding-top: 0.9rem; border-top: 1px solid var(--border-2); }
.lc-detay__h{ font-family: var(--font-d); font-weight: 600; font-size: 0.95rem; color: var(--cream); }
.lc-detay__h i{ display: block; font-style: normal; font-family: var(--font-b); font-size: 0.76rem; color: var(--cream-dim); margin-top: 0.12rem; }
.lc-detay__rows{ list-style: none; margin-top: 0.7rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.1rem 1.2rem; }
.lc-detay__rows li{ display: flex; justify-content: space-between; gap: 0.6rem;
  font-family: var(--font-m); font-size: 0.62rem; color: var(--muted);
  font-variant-numeric: tabular-nums; padding: 0.12rem 0; }
.lc-detay__rows li b{ color: var(--cream-dim); font-weight: 400; }
/* Panelin kendisi tıklanamaz (fare tahtadan ayrılınca kapanır); bu satır
   panelin değil, üstünde durulan NOKTANIN nereye gittiğini söyler. */
.lc-detay__go{ font-family: var(--font-m); font-size: 0.62rem; color: var(--save);
  letter-spacing: 0.04em; margin-top: 0.6rem; }
/* CVA uyarısı: dökümün neden basılmadığını söyler. Uyarı rengi değil nötr —
   satıcıyı ya da puanı kusurlu göstermiyoruz, farklı bir form olduğunu yazıyoruz. */
.lc-detay__uyari{ font-family: var(--font-m); font-size: 0.6rem; color: var(--muted-2);
  line-height: 1.5; margin-top: 0.55rem; padding-top: 0.5rem;
  border-top: 1px solid var(--border-2); }

/* ---- Metin sütunu: enstrümanın üstünden akar ---- */
/* Metin katmanı sticky sahnenin ÜSTÜNDE duruyor ve duraklar tam ekran kaplıyor.
   Fareyi de yakalarsa tahtadaki hiçbir noktaya erişilemez — kutu şeffaf olsa
   bile hit-test'i o kazanır. Katman olayı geçirir, yalnız yazının kendisi
   (`__in`) fareyi geri alır: metin hâlâ seçilebilir ve tıklanabilir kalır. */
.lc-text{ position: relative; z-index: 2; pointer-events: none; }
.lc-stop{ min-height: 100dvh; display: flex; flex-direction: column; justify-content: center;
  padding-left: var(--gut); padding-right: var(--gut); }
.lc-stop__in{ pointer-events: auto; }
/* Metin tahtanın üstünden geçiyor: okunurluk için ince bir perde şart.
   Kutu değil, zeminin kendisinin yoğunlaşmış hâli. */
.lc-stop__in{
  padding: 1.5rem 1.7rem;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(5px);
}

/* Durak 1 · full-bleed */
.lc-stop--full .lc-stop__in{ max-width: 46rem; }
/* Durak 2 · 50/50 split (sol yarı enstrüman, sağ yarı metin) */
.lc-stop--split .lc-stop__in{ width: min(30rem, 44vw); margin-left: auto; }
/* Durak 3 · dar bant */
.lc-stop--band .lc-stop__in{ width: min(25rem, 40vw); margin-left: auto;
  border-top: 1px solid var(--border-2); border-bottom: 1px solid var(--border-2);
  padding: 1.5rem 0; }

.lc-h{ font-family: var(--font-m); font-weight: 800; font-size: clamp(3.2rem, 11vw, 7rem);
  line-height: 0.9; color: var(--cream); letter-spacing: -0.045em; margin-bottom: 1.2rem;
  font-variant-numeric: tabular-nums; }
.lc-h small{ display: block; font-family: var(--font-d); font-weight: 600; font-style: italic;
  font-size: 0.22em; letter-spacing: 0; color: var(--pop); margin-top: 0.5rem; }
.lc-p{ font-family: var(--font-b); font-size: 1rem; line-height: 1.7; color: var(--cream-dim); max-width: 40rem; }
.lc-p + .lc-p{ margin-top: 0.85rem; }
.lc-p b{ color: var(--cream); font-weight: 500; }
.lc-note{ margin-top: 1.1rem; font-family: var(--font-m); font-size: 0.68rem; color: var(--muted-2); }
.lc-note::before{ content: "// "; }
/* Kaynaklı dipnot: tek satırlık ipucu değil, okunacak bir paragraf. Gövde
   metninin altında durur ama onunla yarışmaz — bu yüzden mono ve sönük kalır. */
.lc-note--kaynak{ line-height: 1.65; max-width: 42rem; }
/* Not, ÜSTÜNDEKİ paragrafı açıklıyor ("klasik" neden klasik) — o yüzden ona
   yakın, gövdenin devamına uzak durur. `.lc-p + .lc-p` araya not girince
   eşleşmiyor ve sonraki paragraf sıfır boşlukla başlıyordu; yakınlık tersine
   dönmüş, not aşağıdaki paragrafa aitmiş gibi okunuyordu. */
.lc-note + .lc-p{ margin-top: 1.7rem; }
.lc-note--kaynak b{ font-weight: 400; color: var(--cream-dim); }
.lc-note--kaynak a{ color: var(--pop); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--pop) 35%, transparent); }
.lc-note--kaynak a:hover{ border-bottom-color: var(--pop); }

/* ---- Durak 4 · kırılma (editoryal metin bloğu, enstrüman serbest) ---- */
.lc-kir{ border-top: 1px solid var(--border); padding: clamp(4rem, 10vw, 7rem) 0; }
.lc-kir .lc-shell{ max-width: 44rem; }
.lc-kir__h{ font-family: var(--font-d); font-weight: 700; font-size: clamp(1.7rem, 4.4vw, 2.9rem);
  line-height: 1.08; letter-spacing: -0.03em; color: var(--cream); margin-bottom: 1.4rem; text-wrap: balance; }

/* İki ayrışan çizgi: puan yatay, fiyat dik. Perdenin imza anı. */
.lc-div{ margin: 2.2rem 0 1.6rem; }
.lc-div svg{ width: 100%; height: auto; display: block; overflow: visible; }
.lc-div .ax{ stroke: var(--border-2); stroke-width: 1; }
.lc-div .ln{ fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke;
  stroke-dasharray: 900; stroke-dashoffset: 900; }
.lc-div .ln--p{ stroke: var(--pop); }
.lc-div .ln--f{ stroke: var(--save); }
.lc-div.is-in .ln{ transition: stroke-dashoffset 1.3s var(--ease-o); stroke-dashoffset: 0; }
.lc-div.is-in .ln--f{ transition-delay: 0.25s; }
.lc-div text{ font-family: var(--font-m); font-size: 11px; fill: var(--muted); }
.lc-div .lbl-p{ fill: var(--pop); }
.lc-div .lbl-f{ fill: var(--save); }

.lc-pull{ font-family: var(--font-d); font-weight: 600; font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  line-height: 1.35; color: var(--cream); border-left: 1px solid var(--save);
  padding-left: 1.1rem; margin: 1.8rem 0; }
.lc-pull b{ font-family: var(--font-m); font-weight: 800; color: var(--save); }

/* Çağrı: çizginin altında kalan boşluk davetin kendisi */
.lc-cagri{ margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: clamp(2rem, 5vw, 3rem); border-top: 1px solid var(--border-2); }
.lc-cagri__h{ font-family: var(--font-d); font-weight: 700; font-size: clamp(1.3rem, 3vw, 1.8rem);
  letter-spacing: -0.025em; color: var(--cream); margin-bottom: 1.1rem; }
.lc-oran{ margin: 2rem 0; }
.lc-oran__bar{ position: relative; height: 1px; background: var(--border-2); }
.lc-oran__f{ position: absolute; left: 0; top: -1px; height: 3px; background: var(--save);
  transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease-o); }
.lc-cagri.is-in .lc-oran__f{ transform: scaleX(1); }
.lc-oran__cap{ display: flex; justify-content: space-between; margin-top: 0.6rem;
  font-family: var(--font-m); font-size: 0.66rem; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.lc-oran__cap b{ color: var(--save); font-weight: 500; }
.lc-cagri__son{ margin-top: 1.4rem; font-family: var(--font-b); font-size: 1.02rem; color: var(--cream); }

.lc-rev{ opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease-o), transform 0.6s var(--ease-o); }
.lc-rev.is-in{ opacity: 1; transform: translateY(0); }

/* ---- Mobil: enstrüman ekranın DİBİNE demirlenir, metin üstünde akar ----
   23 Ağu 2026: burada `position: relative` yazıyordu ve sahne mobilde ÖLÜYDÜ.
   Ölçüldü (390×844): tahta bölümün %20'sinde ekrandan çıkıyor, kalan ~2.000px
   boyunca gösterge 80.00'dan 90.00'a GÖRÜNMEDEN tırmanıyor, 38 kahve görünmeden
   sönüyordu. Kaydırmaya bağlı bir sahnenin tek şartı kaydırırken görünür olmak.
   Masaüstündeki çözüm (sticky sahne + metin perdesi üstünden akar) 390px'e
   sığmıyor: perde enstrümanı tamamen örtüyor. Mobilde katmanlar ayrılır —
   enstrüman alttaki 42dvh'ye demirlenir, metin üstteki boşlukta akıp arkasına
   geçer. Perde de gereksizleşir, çünkü metin artık tahtanın üstünde değil. */
@media (max-width: 900px){
  /* 27 Ağu (Çağkan emri): MASAÜSTÜ GRAMERİ MOBİLE UYARLANIR — sahne yapışkan,
     metin perdeli panellerle üstünden akar, 80→90'ı bölümün TAMAMI boyunca
     KAYDIRMA sürer (js masaüstü dalı; "hareketi azalt" açıkken de meşru,
     çünkü değeri kullanıcı sürüyor). Bu, 23 Ağu'daki "sahne kaydırmaya bağlı
     değil" kararını Çağkan'ın açık talimatıyla TERSİNE çevirir. O günkü üç
     başarısız deneme kaydırmayı ELE GEÇİRİYORDU (panel demirleme · 190dvh
     pin · sayfa durması); bu gramer geçirmez — sayfa normal kayar, sahne
     yalnız sticky. O turların iOS katilleri (adres çubuğu resize'ı ·
     innerHeight ölçeği · dvh yokluğu) v7'de tek tek çözüldü, zemin artık var.
     Eşlik çubuğu bu gramerde kendiliğinden devre dışı (js: mobil=false →
     ray hiç açılmaz) — enstrüman zaten hep ekranda. Kod duruyor. */
  .lc-stop--split .lc-stop__in,
  .lc-stop--band .lc-stop__in{ width: auto; margin-left: 0; }
  /* band masaüstünde yatay padding'i sıfırlar (dar sütun); tam genişlikte
     bu, metni ekran kenarına yapıştırır — perdeyle birlikte geri verilir. */
  .lc-stop--band .lc-stop__in{ padding: 1.5rem 1.2rem; }
  .lc-detay{ display: none; }
  .lc-gauge{ top: 8%; }
}
@media (max-width: 480px){
  .lc-dot__t{ font-size: 0.6rem; }
  .lc-detay__rows{ grid-template-columns: 1fr; }
}

/* ---- prefers-reduced-motion: 2. perde saygı gösterir ---- */
@media (prefers-reduced-motion: reduce){
  .lc-svg.is-in .lc-seed{ transition: none; stroke-dashoffset: 0; }
  .lc-field{ transform: none !important; }
  .lc-sweep{ transition: none; }
  .lc-gauge__strip{ transition: none; }
  .lc-div.is-in .ln{ transition: none; stroke-dashoffset: 0; }
  .lc-cagri.is-in .lc-oran__f{ transition: none; }
  .lc-rev{ transition: none; opacity: 1; transform: none; }
  .lc-detay{ transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   YATAY BORSA — iki karşıt yönde akan şerit
   Sahne dikey bir enstrüman (puan yüksekliği). Şerit yatay: aynı veriyi
   ikinci bir eksende, borsa tahtası diliyle okutur. İki yön karşıt çünkü
   tek yön "liste kayıyor", iki yön "piyasa işliyor" okunur.

   Hareket grameri ana sayfadaki tahtayla aynı (translateX marquee, kenar
   maskesi, hover'da durur). Şeridin işi sıralama YAPMAK DEĞİL: puanı
   yayınlanmış her kahve eşit hızla geçer, öne çıkarılan marka yoktur.
   ═══════════════════════════════════════════════════════════ */
.lc-tick{
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.15rem 0;
  display: flex; flex-direction: column; gap: 0.55rem;
  overflow: hidden;
}
.lc-tick__lane{
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.lc-tick__track{ display: inline-flex; gap: 0.5rem; white-space: nowrap; will-change: transform; }
/* Süre lc.js ölçüp yazar (ana sayfa tahtasıyla aynı px/sn). Buradaki değer
   yalnız JS gelmezse geçerli olan yedek; şerit o hâlde de okunur akar. */
.lc-tick__lane--a .lc-tick__track{ animation: lc-marq 560s linear infinite; }
.lc-tick__lane--b .lc-tick__track{ animation: lc-marq 560s linear infinite reverse; }
@keyframes lc-marq{ to{ transform: translateX(-50%); } }

.lc-chip{
  display: inline-flex; align-items: baseline; gap: 0.7rem;
  padding: 0.5rem 0.85rem; text-decoration: none;
  border: 1px solid var(--border-2); background: var(--bg-2);
  font-family: var(--font-m); font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-3) var(--ease), background var(--dur-3) var(--ease);
}
.lc-chip__s{ font-size: 0.82rem; font-weight: 800; color: var(--cream); }
.lc-chip__nm{ font-size: 0.68rem; color: var(--cream-dim); }
.lc-chip__u{ font-size: 0.68rem; color: var(--pop); }
/* Marka künyesi: satırın en sönük parçası. Kim sattığı bilgisi kalsın ama
   puanın öznesi olmasın. */
.lc-chip__br{ font-size: 0.66rem; color: var(--muted-2); }
/* CVA çipi: rozet değil künye. Puanı öne çıkarmaz, "bu sayı öbürleriyle aynı
   formdan gelmiyor" der — o yüzden çerçeveli ve sönük, vurgulu değil. */
.lc-chip__frm{ font-size: 0.58rem; letter-spacing: 0.06em; color: var(--muted-2);
  border: 1px solid var(--border-2); padding: 0.08rem 0.3rem; }
.lc-chip:hover{ border-color: var(--pop-line); background: var(--wash); }
.lc-tick__cap{
  max-width: var(--shell); margin: 0.65rem auto 0;
  padding-left: var(--gut); padding-right: var(--gut);
  font-family: var(--font-m); font-size: 0.66rem; color: var(--muted-2);
}
.lc-tick__cap::before{ content: "// "; }

@media (hover: hover) and (pointer: fine){
  .lc-tick__lane:hover .lc-tick__track{ animation-play-state: paused; }
}
/* Bu bir İÇ SAYFA → ana sayfanın reduced-motion kilidi burada geçmez.
   Şerit durur, çipler olduğu yerde okunur kalır (içerik kaybı yok). */
@media (prefers-reduced-motion: reduce){
  .lc-tick__track{ animation: none !important; }
  .lc-tick__lane{ overflow-x: auto; scrollbar-width: none; }
  .lc-tick__lane::-webkit-scrollbar{ display: none; }
}

/* ---- Sayfa kabuğu: başlıktaki kapı notu + çıkış bağlantıları ----
   Bu iki kural piyasa.css'te kalmıştı; sahne o dosyayı artık yüklemiyor,
   kurallar buraya taşındı (kopya değil, taşıma — piyasa.css'te de duruyor
   ama o dosya bu sayfada yüklü değil, lig sayfası geri gelirse kendi
   kopyasını kullanır). */
.piyasa-gate{
  max-width: 62ch; margin-top: 1.1rem;
  font-family: var(--font-m); font-size: 0.74rem; line-height: 1.8; color: var(--muted);
}
.piyasa-gate::before{ content: '// '; color: var(--muted-2); }

.sca__out{
  margin-top: 2.25rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem 2rem;
  font-family: var(--font-m); font-size: 0.8rem;
}
.sca__out a{
  color: var(--cream-dim); text-decoration: none;
  border-bottom: 1px solid var(--border-2);
  transition: color var(--dur-3) var(--ease), border-color var(--dur-3) var(--ease);
}
.sca__out a:hover,
.sca__out a:focus-visible{ color: var(--pop); border-bottom-color: var(--pop-line-2); }

/* ═══════════════════════════════════════════════════════
   Eşlik çubuğu — YÖN A (23 Ağu 2026, Çağkan seçimi)

   Sorun: mobilde sahne kendi bloğunda 3,8 saniye oynayıp geride kalıyordu.
   Okuyucu "80" metnini okumaya başladığında enstrüman ekranda değildi, oysa
   üç durak (80 · 85 · 90) tam da bir tırmanışı anlatıyor.

   Karar: tahta geride kalır, DEĞER eşlik eder. Nav'ın altına 38px'lik bir
   okuma çubuğu iner; sayı okuyucunun kendi konumundan gelir (başlık 85
   satıra geldiğinde çubuk 85.00 der) ve yanındaki sayaç o eşiğin üstünde
   kaç kahve kaldığını gerçek katalogdan söyler. Son durak bitince çubuk
   çıkar gider.

   ⚠️ ÜSTTEN demirli, ALTTAN değil. 22 Ağu'da alta demirlenen 42dvh panel
   reddedilmişti: alttaki katman OKUNMAMIŞ metni keser, üstteki katmanın
   altından geçen metin ise zaten okunmuştur. 38px = ekranın %6'sı.
   ⚠️ Yalnız mobil. Masaüstünde enstrümanın kendisi metnin altında sabit
   duruyor; orada ikinci bir okuma satırı aynı şeyi iki kez söylerdi.
   ═══════════════════════════════════════════════════════ */
.lc-ray{ display: none; }

@media (max-width: 900px){
  .lc-ray{
    display: flex; align-items: center; gap: .55rem;
    position: fixed; left: 0; right: 0; top: var(--nav-h); z-index: 120;
    height: 38px; padding: 0 var(--gut);
    background: var(--glass);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-2);
    pointer-events: none;                     /* okuma yüzeyi, kontrol değil */
    transform: translateY(-100%); opacity: 0;
    transition: transform var(--dur-4) var(--ease-o), opacity var(--dur-4) linear;
  }
  .lc-ray.is-on{ transform: none; opacity: 1; }

  .lc-ray__n{
    font: 500 .92rem/1 var(--font-m); color: var(--accent);
    font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  }
  /* Ölçek: 80 solda, 90 sağda. Dolgu bir yüzde değil KONUM — okuyucunun
     skalada nerede durduğu. Arka planı olmayan ince bir ray, çünkü dolu
     zeminli ilerleme çubuğu bunu bir yükleme göstergesi gibi okutuyor. */
  .lc-ray__bar{
    flex: 1; position: relative; height: 1px; background: var(--border-3);
  }
  .lc-ray__bar i{
    position: absolute; left: 0; top: -1px; height: 3px;
    background: var(--pop); width: 0;
    transition: width var(--dur-1) linear;
  }
  .lc-ray__c{
    font: 400 .66rem/1 var(--font-m); color: var(--muted-2); white-space: nowrap;
  }
  .lc-ray__c b{ color: var(--muted); font-weight: 500; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce){
  /* İç sayfa: hareket tam saygılı. Çubuk yine görünür, kayarak değil. */
  .lc-ray{ transition: opacity var(--dur-3) linear; transform: none; }
  .lc-ray__bar i{ transition: none; }
}